@regionerne/gis-komponent 0.0.21 → 0.0.28

package/fesm2022/regionerne-gis-komponent.mjs

@@ -1,8 +1,8 @@
 import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { CommonModule, AsyncPipe, JsonPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, Component, Input, ViewChild } from '@angular/core';
-import * as i2 from '@angular/material/icon';
+import { InjectionToken, inject, Injectable, Component, Input, ViewChild, Inject, EventEmitter, Output } from '@angular/core';
+import * as i3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import Map$1 from 'ol/Map';
 import View from 'ol/View';
@@ -12,7 +12,7 @@ import WMTSCapabilities from 'ol/format/WMTSCapabilities';
 import ImageLayer from 'ol/layer/Image';
 import { HttpClient, HttpErrorResponse, HttpHeaders, provideHttpClient, withInterceptors } from '@angular/common/http';
 import OLLayerGroup from 'ol/layer/Group';
-import * as i5 from '@angular/material/select';
+import * as i6$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i3$1 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
@@ -22,49 +22,66 @@ import { register } from 'ol/proj/proj4';
 import proj4 from 'proj4';
 import { Control, Rotate } from 'ol/control';
 import { Vector, TileWMS } from 'ol/source';
-import { BehaviorSubject, Subject, of, tap, map, ReplaySubject, filter, switchMap, forkJoin, catchError, combineLatest, throwError } from 'rxjs';
+import { Subject, BehaviorSubject, tap, switchMap, EMPTY, of, map, ReplaySubject, filter, interval, combineLatest, Observable, takeUntil, take, mergeWith, debounceTime, distinctUntilChanged, forkJoin, catchError, throwError } from 'rxjs';
 import WMTS, { optionsFromCapabilities } from 'ol/source/WMTS';
-import * as i4 from '@angular/cdk/drag-drop';
+import VectorLayer from 'ol/layer/Vector';
+import TileSource from 'ol/source/Tile';
+import ImageSource from 'ol/source/Image';
+import VectorSource from 'ol/source/Vector';
+import { unByKey } from 'ol/Observable';
+import { MAT_SNACK_BAR_DATA, MatSnackBarRef, MatSnackBar } from '@angular/material/snack-bar';
+import * as i5 from '@angular/cdk/drag-drop';
 import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
 import * as i1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i2$1 from '@angular/forms';
+import * as i1$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i3 from '@angular/material/expansion';
+import * as i6 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i6 from '@angular/material/input';
+import * as i7 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import ol_control_Control from 'ol/control/Control';
-import VectorLayer from 'ol/layer/Vector';
-import TileSource from 'ol/source/Tile';
-import ImageSource from 'ol/source/Image';
-import VectorSource from 'ol/source/Vector';
-import { unByKey } from 'ol/Observable';
-import { MAT_SNACK_BAR_DATA, MatSnackBarRef, MatSnackBar } from '@angular/material/snack-bar';
+import * as i8 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import 'ol/ol.css';
-import { LineString, Point } from 'ol/geom';
+import { Point as Point$1, LineString } from 'ol/geom';
 import { getArea, getLength } from 'ol/sphere';
-import Draw from 'ol/interaction/Draw';
+import Draw, { createBox, createRegularPolygon } from 'ol/interaction/Draw';
 import { Snap, Select as Select$1, Modify } from 'ol/interaction';
-import { Style, Circle, Stroke, Fill, Text } from 'ol/style';
-import * as i4$1 from '@angular/material/core';
+import { Style, Circle, Stroke, Fill, Icon, Text, RegularShape } from 'ol/style';
+import * as i4 from '@angular/material/core';
 import { MatOptionModule } from '@angular/material/core';
 import * as SLDReader from '@nieuwlandgeo/sldreader';
 import WKT from 'ol/format/WKT';
-import { extend, createEmpty, buffer as buffer$1 } from 'ol/extent';
 import Feature$1 from 'ol/Feature';
 import { never, always } from 'ol/events/condition';
-import { buffer, featureCollection, difference, booleanIntersects, union } from '@turf/turf';
+import { buffer, lineIntersect, lineSplit, featureCollection, difference, booleanIntersects, union, point, booleanPointInPolygon, area, feature, booleanWithin, intersect } from '@turf/turf';
 import GeoJSON from 'ol/format/GeoJSON';
-import * as i7 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i8 from '@angular/material/slide-toggle';
+import * as i9 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { Feature } from 'ol';
+import { extend, createEmpty, buffer as buffer$1 } from 'ol/extent';
+import { easeOut } from 'ol/easing';
 import Select from 'ol/interaction/Select';
 import html2canvas from 'html2canvas-pro';
+import CircleStyle from 'ol/style/Circle';
+import { transform } from 'ol/proj';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i1$3 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogTitle, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
+import WFS from 'ol/format/WFS';
+import Point from 'ol/geom/Point';
+import { intersects, contains, like } from 'ol/format/filter';
+import { BufferOp } from 'jsts/org/locationtech/jts/operation/buffer';
+import { GeoJSONReader, GeoJSONWriter } from 'jsts/org/locationtech/jts/io';
+import GeometryFactory from 'jsts/org/locationtech/jts/geom/GeometryFactory';
+import PrecisionModel from 'jsts/org/locationtech/jts/geom/PrecisionModel';
 import * as i5$1 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { map as map$1 } from 'rxjs/operators';
+import { createStringXY } from 'ol/coordinate';
+import GeoJSON$1 from 'ol/format/GeoJSON.js';
 
 const GISKOMPONENT_CONFIG = new InjectionToken('GisKomponentConfig');
 
@@ -116,83 +133,6 @@ class CopyrightControl extends Control {
     }
 }
 
-class LayerHelperService {
-    activeLayersChanged = new BehaviorSubject(true);
-    _layerDbIdKey = 'layerDbId';
-    _layerGroupDbIdKey = 'layerGroupDbId';
-    _layerIdsToDisplayInMapKeyName = 'layerIdsToDisplayInMap';
-    setDbId(layer, id) {
-        layer.set(this._layerDbIdKey, id);
-    }
-    getDbId(layer) {
-        const dbId = layer.get(this._layerDbIdKey) ?? -1;
-        return +dbId;
-    }
-    setLayerGroupDbId(layer, id) {
-        layer.set(this._layerGroupDbIdKey, id);
-    }
-    getLayerGroupDbId(layer) {
-        const dbId = layer.get(this._layerGroupDbIdKey) ?? -1;
-        return +dbId;
-    }
-    applyCachedLayersToDisplayInMap(map, profileId) {
-        this.activeLayersChanged.next(true);
-        const layerIdsCachedToDisplay = localStorage.getItem(`${this._layerIdsToDisplayInMapKeyName}_${profileId}`)?.split(',');
-        if (layerIdsCachedToDisplay) {
-            //Bottom layers are rendered first, top layers are rendered last (on top)
-            layerIdsCachedToDisplay.reverse();
-            map.getLayers().getArray().forEach(layergroup => {
-                if (layergroup instanceof OLLayerGroup) {
-                    layergroup.getLayers().getArray().forEach(l => {
-                        if (!layerIdsCachedToDisplay.some(id => l.get(this._layerDbIdKey) == id)) {
-                            const current = l.getVisible();
-                            if (current) {
-                                l.setVisible(!current);
-                            }
-                        }
-                        else {
-                            //Set z index to match the order in cache
-                            l.setZIndex(layerIdsCachedToDisplay.indexOf(l.get(this._layerDbIdKey).toString()));
-                            //console.log('layer id  '+l.get(this._layerDbIdKey)+' - setZIndex:'+layerIdsCachedToDisplay.indexOf(l.get(this._layerDbIdKey).toString()));
-                        }
-                    });
-                }
-            });
-        }
-    }
-    updateLayerOpacityInMap(map, layer) {
-        map.getLayers().getArray().forEach(layergroup => {
-            if (layergroup instanceof OLLayerGroup) {
-                layergroup.getLayers().getArray().forEach(l => {
-                    if (l.get(this._layerDbIdKey) === layer.id && layer.opacity) {
-                        l.setOpacity(layer.opacity);
-                    }
-                });
-            }
-        });
-    }
-    toggleLayerInMap(map, layer) {
-        map.getLayers().getArray().forEach(layergroup => {
-            if (layergroup instanceof OLLayerGroup) {
-                layergroup.getLayers().getArray().forEach(l => {
-                    if (l.get(this._layerDbIdKey) === layer.id) {
-                        const current = l.getVisible();
-                        l.setVisible(!current);
-                    }
-                });
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayerHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayerHelperService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayerHelperService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
 class LibNotificationComponent {
     data = inject(MAT_SNACK_BAR_DATA);
     _snackRef = inject((MatSnackBarRef));
@@ -257,6 +197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class LayerErrorService {
     layerStatusChanged = new Subject();
+    layerErrored = new Subject();
     layerStatuses = new Map();
     listeners = new Map();
     _errorService = inject(LibErrorService);
@@ -275,6 +216,7 @@ class LayerErrorService {
             console.error(`[Layer ${layerId}] load error:`, event);
             this._errorService.show(new Error(`Indlæsningsfejl for lag med id ${layerId}.`));
             this.layerStatusChanged.next(layerId);
+            this.layerErrored.next(layerId);
         };
         const clearError = () => {
             this.layerStatuses.set(layerId, { layerId, hasError: false });
@@ -324,10 +266,193 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
-class LayerSelectorComponent {
-    set contentIcon(content) {
-        this._layerSelectorIcon = content;
+class LayerHelperService {
+    activeLayersChanged = new BehaviorSubject(true);
+    _layerDbIdKey = 'layerDbId';
+    _layerGroupDbIdKey = 'layerGroupDbId';
+    _mapFilteredLayerGroupsKeyName = 'mapFilteredLayerGroups';
+    _layerErrorService = inject(LayerErrorService);
+    layerActivatedByBackgroundGroup = new Subject();
+    setDbId(layer, id) {
+        layer.set(this._layerDbIdKey, id);
+    }
+    getDbId(layer) {
+        const dbId = layer.get(this._layerDbIdKey) ?? -1;
+        return +dbId;
+    }
+    setLayerGroupDbId(layer, id) {
+        layer.set(this._layerGroupDbIdKey, id);
+    }
+    getLayerGroupDbId(layer) {
+        const dbId = layer.get(this._layerGroupDbIdKey) ?? -1;
+        return +dbId;
+    }
+    applyCachedLayersToDisplayInMap(map, profileId) {
+        this.activeLayersChanged.next(true);
+        const cacheValue = localStorage.getItem(`${this._mapFilteredLayerGroupsKeyName}_${profileId}`);
+        if (cacheValue) {
+            const layersCachedToDisplay = JSON.parse(cacheValue).cachedLayerGroups
+                .flatMap((lg) => lg.layers)
+                .map((l) => ({ id: l.id, visible: l.visible }));
+            //Bottom layers are rendered first, top layers are rendered last (on top)
+            layersCachedToDisplay.reverse();
+            map.getLayers().getArray().forEach(layergroup => {
+                if (layergroup instanceof OLLayerGroup) {
+                    layergroup.getLayers().getArray().forEach(l => {
+                        const cachedLayer = layersCachedToDisplay
+                            .find((layer) => l.get(this._layerDbIdKey) == layer.id);
+                        const current = l.getVisible();
+                        if (cachedLayer != undefined && current != cachedLayer.visible) {
+                            l.setVisible(cachedLayer.visible);
+                        }
+                        //Set z index to match the order in cache
+                        l.setZIndex(layersCachedToDisplay.indexOf(cachedLayer));
+                    });
+                }
+            });
+        }
+    }
+    startFailoverForBackgroundGroup(aMap, groupId) {
+        const currentIndex$ = new BehaviorSubject(0);
+        const layergroup = aMap.getLayers().getArray()
+            .find(layergroup => layergroup instanceof OLLayerGroup && layergroup.get('id') === groupId);
+        const items = layergroup.getLayers().getArray().sort((a, b) => (b.getZIndex() ?? 0) - (a.getZIndex() ?? 0));
+        // Handles activating the current item
+        const activation$ = currentIndex$.pipe(tap(index => {
+            // deactivate all first
+            items.forEach(layer => layer.setVisible(false));
+            // if out of range, stop completely
+            if (index >= items.length) {
+                console.warn('No more items left. Stopping failover.');
+                return;
+            }
+            // activate current
+            const layer = items[index];
+            layer.setVisible(true);
+            this.layerActivatedByBackgroundGroup.next(layer.get(this._layerDbIdKey));
+        }), 
+        // Listen for failures only while we have a valid index
+        switchMap(index => {
+            if (index >= items.length)
+                return EMPTY;
+            const currentItem = items[index];
+            return this._layerErrorService.layerErrored.pipe(tap(failedId => {
+                // If the current one failed, move to next
+                if (failedId === currentItem.get(this._layerDbIdKey)) {
+                    currentIndex$.next(index + 1);
+                }
+            }));
+        }));
+        activation$.subscribe();
+    }
+    updateLayerOpacityInMap(map, layer) {
+        map.getLayers().getArray().forEach(layergroup => {
+            if (layergroup instanceof OLLayerGroup) {
+                layergroup.getLayers().getArray().forEach(l => {
+                    if (l.get(this._layerDbIdKey) === layer.id && layer.opacity) {
+                        l.setOpacity(layer.opacity);
+                    }
+                });
+            }
+        });
+    }
+    toggleLayerInMap(map, layerId) {
+        map.getLayers().getArray().forEach(layergroup => {
+            if (layergroup instanceof OLLayerGroup) {
+                layergroup.getLayers().getArray().forEach(l => {
+                    if (l.get(this._layerDbIdKey) === layerId) {
+                        const current = l.getVisible();
+                        l.setVisible(!current);
+                    }
+                });
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayerHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayerHelperService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayerHelperService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class LayoutService {
+    loadInitialPositionFromProfile(widgetName, initialPosition) {
+        let dragPosition = { x: 2, y: -25 };
+        switch (initialPosition) {
+            case 'øverst/venstre':
+                dragPosition = { x: 46, y: -119 };
+                this._savePosition(widgetName, dragPosition);
+                break;
+            case 'midte/venstre':
+                dragPosition = { x: 1, y: 247 };
+                this._savePosition(widgetName, dragPosition);
+                break;
+            case 'nederst/venstre':
+                dragPosition = { x: 0, y: 493 };
+                this._savePosition(widgetName, dragPosition);
+                break;
+            case 'øverst/midte':
+                dragPosition = { x: 849, y: -154 };
+                this._savePosition(widgetName, dragPosition);
+                break;
+            case 'nederst/midte':
+                dragPosition = { x: 895, y: 481 };
+                this._savePosition(widgetName, dragPosition);
+                break;
+            case 'øverst/højre':
+                dragPosition = { x: 1599, y: -121 };
+                this._savePosition(widgetName, dragPosition);
+                break;
+            case 'midte/højre':
+                dragPosition = { x: 1600, y: 164 };
+                this._savePosition(widgetName, dragPosition);
+                break;
+            case 'nederst/højre':
+                dragPosition = { x: 1600, y: 500 };
+                this._savePosition(widgetName, dragPosition);
+                break;
+        }
+        return dragPosition;
+    }
+    bringElementIntoViewIfNeeded(elementClass, offsetValue, collapsed, map) {
+        const element = document.querySelector(elementClass);
+        const mapControls = map.getControls();
+        console.log('map controls', mapControls);
+        if (!element)
+            return;
+        const left = parseInt(element.style.left || '0', 10);
+        console.log('bringToolboxIntoViewIfNeeded left ', left, element, element.style);
+        if (collapsed) {
+            // Widget minimized, remove the style for left
+            element.style.left = '0em';
+        }
+        else {
+            // If widget expands outside screen on the right (left is > <offsetValue> em), then bring it back
+            element.style.left = `${left > offsetValue ? offsetValue : left}em`;
+        }
+    }
+    _savePosition(widgetStorageKey, position) {
+        try {
+            localStorage.setItem(widgetStorageKey, JSON.stringify(position));
+        }
+        catch (error) {
+            console.error('Error saving position to localStorage:', error);
+        }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayoutService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayoutService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class LayerSelectorComponent {
     set contentBody(content) {
         this._layerSelectorBody = content;
     }
@@ -337,20 +462,26 @@ class LayerSelectorComponent {
     searchText = '';
     allLayerGroups = [];
     filteredLayerGroups = [];
-    showLegend = false; // TO DO - this will be added later, as a change (probably as a Profile setting)
-    showSelector = false;
-    legendUrl = 'https://docs.geoserver.org/main/en/user/_images/samplelegend.png'; // TO DO - remove this (mockup for now, will be done as a change later)
-    _namesToGoLast = ['Baggrundskort'];
-    _layerSelectorIcon;
-    _layerSelectorIconControl;
+    filteredBackgroundLayerGroups = [];
+    showLegend = false;
+    collapsed = true;
+    dragPosition = { x: 0, y: 0 };
+    legendUrl = 'https://docs.geoserver.org/main/en/user/_images/samplelegend.png';
     _layerSelectorBody;
     _layerSelectorBodyControl;
+    layerSelectorDragPosition = { x: 0, y: 0 };
     _mapFilteredLayerGroupsKeyName = 'mapFilteredLayerGroups';
-    _layerIdsToDisplayInMapKeyName = 'layerIdsToDisplayInMap';
+    POSITION_STORAGE_KEY = 'layerSelectorPosition';
     _layerHelper = inject(LayerHelperService);
     _layerErrorService = inject(LayerErrorService);
+    _layoutService = inject(LayoutService);
+    LAYER_SELECTOR_POSITION_KEY = 'layerSelectorPosition';
     ngOnInit() {
-        this._layerErrorService.layerStatusChanged
+        this._loadLayerSelectorPosition();
+        this._loadPosition();
+        this._layerHelper.layerActivatedByBackgroundGroup
+            .subscribe(layerId => this.toggleLayer(layerId, undefined, true));
+        this._layerErrorService.layerErrored
             .subscribe(layerId => {
             const layerHasErrors = this._layerErrorService.getLayerStatus(layerId)?.hasError;
             if (layerHasErrors != undefined)
@@ -359,11 +490,12 @@ class LayerSelectorComponent {
     }
     ngOnChanges(changes) {
         if (changes['profile'] && this.profile) {
+            this._loadPosition();
             this.allLayerGroups = this.profile.layerGroups
                 .map((lg, idx) => ({ ...lg,
                 noOfVisibleLayers: lg.layers.filter(l => l.visible).length,
                 visible: lg.layers.some(l => l.visible),
-                expanded: lg.layers.some(l => l.visible),
+                expanded: lg.folded === false,
                 layers: lg.layers.filter((l) => l.activeInSelector),
                 sortOrder: idx }))
                 .filter(g => g.layers.length > 0);
@@ -372,31 +504,81 @@ class LayerSelectorComponent {
                 const cachedProfileInfo = JSON.parse(cacheValue);
                 if (cachedProfileInfo.profile.versionId < this.profile.versionId) {
                     //Profile version changed in backend, use that
-                    this.filteredLayerGroups = this.setfilteredGroups();
+                    this.filterChanged();
                     this._cacheProfileInfo();
                 }
                 else {
-                    this.filteredLayerGroups = cachedProfileInfo.cachedLayerGroups;
+                    this.filteredLayerGroups = cachedProfileInfo.cachedLayerGroups.filter(gr => !gr.background);
+                    ;
+                    this.filteredBackgroundLayerGroups = cachedProfileInfo.cachedLayerGroups.filter(gr => gr.background);
                     this._setVisibleLayersFromCache(cachedProfileInfo.cachedLayerGroups);
                 }
             }
             else {
-                this.filteredLayerGroups = this.setfilteredGroups();
+                this.filterChanged();
                 this._cacheProfileInfo();
             }
-            this._initializeMapIconControl();
+            // Apply Failover logic to  all background groups
+            this.filteredBackgroundLayerGroups
+                .forEach(group => {
+                group.layers.forEach(layer => layer.visible = false); //Turn all layers off in selector to begin with
+                group.visible = true; // Expand the group (there will be at least one active layer)
+                group.expanded = true;
+                this._layerHelper.startFailoverForBackgroundGroup(this.map, group.id);
+            });
+            this._initializeMapControl();
         }
     }
-    toggleLayer(event, layer) {
-        event.stopPropagation(); // Prevent the panel from expanding/collapsing
-        this._layerHelper.toggleLayerInMap(this.map, layer);
+    _loadLayerSelectorPosition() {
+        try {
+            const saved = localStorage.getItem(this.LAYER_SELECTOR_POSITION_KEY);
+            if (saved) {
+                this.layerSelectorDragPosition = JSON.parse(saved);
+            }
+            else if (this.profile) {
+                this.layerSelectorDragPosition = this._layoutService.loadInitialPositionFromProfile(this.LAYER_SELECTOR_POSITION_KEY, this.profile.layerSelectorInitialPosition);
+            }
+        }
+        catch (error) {
+            console.error('Error loading layer selector position from localStorage:', error);
+            this.layerSelectorDragPosition = { x: 0, y: 0 };
+        }
+    }
+    onLayerSelectorDragEnded(event) {
+        const position = event.source.getFreeDragPosition();
+        this.layerSelectorDragPosition = position;
+        try {
+            localStorage.setItem(this.LAYER_SELECTOR_POSITION_KEY, JSON.stringify(position));
+        }
+        catch (error) {
+            console.error('Error saving layer selector position to localStorage:', error);
+        }
+    }
+    toggleLayer(layerId, event, skipMapToggle = false) {
+        event?.stopPropagation(); // Prevent the panel from expanding/collapsing
+        if (!skipMapToggle)
+            this._layerHelper.toggleLayerInMap(this.map, layerId);
         // Toggle layer in all groups in the selector UI
-        this.filteredLayerGroups.forEach(group => {
+        this.filteredLayerGroups.concat(this.filteredBackgroundLayerGroups).forEach(group => {
+            let singleLaterIdToKeepOn = 0;
             group.layers.forEach(l => {
-                if (layer.id === l.id) {
+                if (layerId === l.id) {
                     l.visible = !l.visible;
+                    if (l.visible && !group.allowMultiSelect) {
+                        // Group doesn't allow multi select and we just turned this layer on
+                        // so turn all others off
+                        singleLaterIdToKeepOn = l.id;
+                    }
                 }
             });
+            if (singleLaterIdToKeepOn > 0) {
+                group.layers.forEach(l => {
+                    if (singleLaterIdToKeepOn !== l.id) {
+                        l.visible = false;
+                        this._layerHelper.toggleLayerInMap(this.map, l.id);
+                    }
+                });
+            }
             group.noOfVisibleLayers = group.layers.filter(l => l.visible).length;
             group.visible = group.layers.some(l => l.visible);
             group.expanded = group.layers.some(l => l.visible);
@@ -404,7 +586,7 @@ class LayerSelectorComponent {
         this._cacheProfileInfo();
     }
     setLayerErrorStatus(layerId, errorStatus) {
-        this.filteredLayerGroups.forEach(group => {
+        this.filteredLayerGroups.concat(this.filteredBackgroundLayerGroups).forEach(group => {
             group.layers.forEach(l => {
                 if (layerId === l.id) {
                     l.hasErrors = errorStatus;
@@ -415,34 +597,39 @@ class LayerSelectorComponent {
     toggleGroup(event, layerGroup) {
         event.stopPropagation(); // Prevent the panel from expanding/collapsing
         const visible = !layerGroup.visible;
-        layerGroup.layers.forEach(layer => {
-            if (layer.visible != visible) {
-                //Toggle layer in map
-                this._layerHelper.toggleLayerInMap(this.map, layer);
-                // Toggle layer in all groups in the selector UI
-                this.filteredLayerGroups.forEach(group => {
-                    group.layers.forEach(l => {
-                        if (layer.id === l.id) {
-                            l.visible = !l.visible;
-                        }
+        if (visible && layerGroup.background) {
+            //Toggle background group on, apply failover logic
+            layerGroup.layers.forEach(layer => layer.visible = false); // Turn all off in selector to begin with
+            this._layerHelper.startFailoverForBackgroundGroup(this.map, layerGroup.id);
+        }
+        else {
+            layerGroup.layers.forEach(layer => {
+                if (layer.visible != visible) {
+                    //Toggle layer in map
+                    this._layerHelper.toggleLayerInMap(this.map, layer.id);
+                    // Toggle layer in all groups in the selector UI
+                    this.filteredLayerGroups.concat(this.filteredBackgroundLayerGroups).forEach(group => {
+                        group.layers.forEach(l => {
+                            if (layer.id === l.id) {
+                                l.visible = !l.visible;
+                            }
+                        });
+                        group.noOfVisibleLayers = group.layers.filter(l => l.visible).length;
+                        group.visible = group.layers.some(l => l.visible);
+                        group.expanded = group.layers.some(l => l.visible);
                     });
-                    group.noOfVisibleLayers = group.layers.filter(l => l.visible).length;
-                    group.visible = group.layers.some(l => l.visible);
-                    group.expanded = group.layers.some(l => l.visible);
-                });
-            }
-        });
+                }
+            });
+        }
         layerGroup.visible = visible;
         layerGroup.expanded = layerGroup.layers.some(l => l.visible);
         this._cacheProfileInfo();
     }
     toggleLayerSelector() {
-        this.showSelector = !this.showSelector;
-        if (this.showSelector) {
-            this._addMapBodyControl();
-        }
-        else {
-            this._removeMapBodyControl();
+        this.collapsed = !this.collapsed;
+        if (this.collapsed) {
+            this.searchText = '';
+            this.filterChanged();
         }
     }
     updateOpacity(layer) {
@@ -451,12 +638,16 @@ class LayerSelectorComponent {
     stopDrag(event) {
         event.stopPropagation(); // prevents drag container from activating
     }
+    filterChanged() {
+        this.filteredLayerGroups = this.setfilteredGroups().filter(gr => !gr.background);
+        this.filteredBackgroundLayerGroups = this.setfilteredGroups().filter(gr => gr.background);
+    }
     setfilteredGroups() {
         const text = this.searchText.toLowerCase();
         return this.allLayerGroups
             .map((g, idx) => {
             if (!text) {
-                return { ...g, expanded: false, sortOrder: idx,
+                return { ...g, expanded: g.folded === false, sortOrder: idx,
                     layers: g.layers.map(layer => ({ ...layer, opacity: 1 }))
                 }; // collapsed by default
             }
@@ -470,17 +661,15 @@ class LayerSelectorComponent {
         })
             .filter(g => g.layers.length > 0)
             .sort((a, b) => {
-            const aIsLast = this._namesToGoLast.includes(a.name) || a.layers.some(layer => layer.background);
-            const bIsLast = this._namesToGoLast.includes(b.name) || b.layers.some(layer => layer.background);
-            if (aIsLast && !bIsLast)
+            if (a.background && !b.background)
                 return 1;
-            if (!aIsLast && bIsLast)
+            if (!a.background && b.background)
                 return -1;
             return a.sortOrder - b.sortOrder;
         });
     }
-    dropGroup(event) {
-        moveItemInArray(this.filteredLayerGroups, event.previousIndex, event.currentIndex);
+    dropGroup(event, groupArray) {
+        moveItemInArray(groupArray, event.previousIndex, event.currentIndex);
         this.updateGroupSortOrders();
         this._cacheProfileInfo();
     }
@@ -496,41 +685,57 @@ class LayerSelectorComponent {
     }
     clearSearchText() {
         this.searchText = '';
-        this.filteredLayerGroups = this.setfilteredGroups();
+        this.filterChanged();
         this._cacheProfileInfo();
     }
     updateGroupSortOrders() {
         this.filteredLayerGroups.forEach((g, idx) => (g.sortOrder = idx));
+        this.filteredBackgroundLayerGroups.forEach((g, idx) => (g.sortOrder = idx));
     }
     updateLayerSortOrders(group) {
         group.layers.forEach((layer, idx) => (layer.sortOrder = idx));
     }
+    onDragEnded(event) {
+        const position = event.source.getFreeDragPosition();
+        this.dragPosition = position;
+        this._savePosition(position);
+    }
+    _savePosition(position) {
+        try {
+            localStorage.setItem(this.POSITION_STORAGE_KEY, JSON.stringify(position));
+        }
+        catch (error) {
+            console.error('Error saving position to localStorage:', error);
+        }
+    }
+    _loadPosition() {
+        try {
+            const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
+            if (savedPosition) {
+                this.dragPosition = JSON.parse(savedPosition);
+            }
+            else if (this.profile) {
+                this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.layerSelectorInitialPosition);
+            }
+        }
+        catch (error) {
+            console.error('Error loading position from localStorage:', error);
+            this.dragPosition = { x: 0, y: 0 };
+        }
+    }
     _cacheProfileInfo() {
-        const cacheItem = { profile: this.profile, cachedLayerGroups: this.filteredLayerGroups };
+        const cacheItem = { profile: this.profile, cachedLayerGroups: this.filteredLayerGroups.concat(this.filteredBackgroundLayerGroups) };
         localStorage.setItem(`${this._mapFilteredLayerGroupsKeyName}_${this.profile.id}`, JSON.stringify(cacheItem));
-        localStorage.setItem(`${this._layerIdsToDisplayInMapKeyName}_${this.profile.id}`, this.filteredLayerGroups
-            .flatMap(lg => lg.layers)
-            .filter(lg => lg.visible)
-            .map(lg => lg.id).join(','));
         // Reflect new order in map
         this._layerHelper.applyCachedLayersToDisplayInMap(this.map, this.profile.id);
     }
-    _initializeMapIconControl() {
-        this.map.removeControl(this._layerSelectorIconControl);
-        if (this._layerSelectorIcon?.nativeElement) {
-            const element = this._layerSelectorIcon.nativeElement;
-            this._layerSelectorIconControl = new ol_control_Control({ element: element });
-            this.map.addControl(this._layerSelectorIconControl);
-        }
-    }
-    _addMapBodyControl() {
-        this.map.removeControl(this._layerSelectorBodyControl);
-        const element = this._layerSelectorBody.nativeElement;
-        this._layerSelectorBodyControl = new ol_control_Control({ element: element });
-        this.map.addControl(this._layerSelectorBodyControl);
-    }
-    _removeMapBodyControl() {
+    _initializeMapControl() {
         this.map.removeControl(this._layerSelectorBodyControl);
+        if (this._layerSelectorBody?.nativeElement) {
+            const element = this._layerSelectorBody.nativeElement;
+            this._layerSelectorBodyControl = new ol_control_Control({ element: element });
+            this.map.addControl(this._layerSelectorBodyControl);
+        }
     }
     _setVisibleLayersFromCache(cachedFilteredLayergroups) {
         this.allLayerGroups.forEach(group => group.layers.forEach(layer => {
@@ -539,16 +744,13 @@ class LayerSelectorComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayerSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LayerSelectorComponent, isStandalone: true, selector: "lib-layer-selector", inputs: { map: "map", profile: "profile", currentZoomLevel: "currentZoomLevel" }, viewQueries: [{ propertyName: "contentIcon", first: true, predicate: ["layerSelectorIcon"], descendants: true }, { propertyName: "contentBody", first: true, predicate: ["layerSelectorBody"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #layerSelectorIcon id=\"layerSelector\" class=\"ol-unselectable ol-control layer-selector-icon\">\n  <mat-icon  (click)=\"toggleLayerSelector()\">layers</mat-icon>\n</div>\n<div #layerSelectorBody  [class.display-none]=\"!showSelector\" class=\"layer-selector-body-wrapper\" cdkDrag cdkDragBoundary=\".map-container\">\n  <div class=\"drag-handle-selector\" cdkDragHandle>\n    <mat-icon>drag_indicator</mat-icon>\n  </div>\n <div class=\"ol-unselectable ol-control layer-selector-body\">\n  <div class=\"search-section\">\n    <mat-form-field appearance=\"outline\" class=\"w-full\">\n      <mat-label>Filtrer</mat-label>\n      <input \n        matInput \n        type=\"text\" \n        [(ngModel)]=\"searchText\" \n        (ngModelChange)=\"filteredLayerGroups=setfilteredGroups()\"\n        placeholder=\"Skriv for at filtrere...\"\n      />\n    </mat-form-field>\n    <mat-icon (click)=\"clearSearchText()\">undo</mat-icon>\n  </div>\n  \n  <div\n    cdkDropList\n    [cdkDropListData]=\"filteredLayerGroups\"\n    (cdkDropListDropped)=\"dropGroup($event)\"\n    class=\"item-list\">\n  @for (group of filteredLayerGroups; track group.id; let gIndex = $index) {\n    <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n      <mat-expansion-panel [(expanded)]=\"group.expanded\">\n        <mat-expansion-panel-header>\n          <mat-panel-title>\n              @if (group.expanded) {\n                <mat-icon>arrow_upward</mat-icon>\n              }\n              @if (!group.expanded) {\n                <mat-icon>arrow_downward</mat-icon>  \n              }\n            {{ group.name }} \n            <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n            ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n            @if (group.visible) {\n              <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\">power</mat-icon>(t\u00E6nd)\n              }\n            @if (!group.visible) {\n              <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\">power_off</mat-icon>(sluk)\n            }\n          </mat-panel-title>\n        </mat-expansion-panel-header>\n          <!-- This is only shown during drag -->\n    <!-- <div *cdkDragPreview class=\"drag-preview\">\n      {{ group.name }}\n    </div> -->\n\n    <!-- Placeholder to avoid jump -->\n    <!-- <div *cdkDragPlaceholder class=\"drag-placeholder\"></div> -->\n\n        <div\n          cdkDropList\n          [cdkDropListData]=\"group.layers\"\n          (cdkDropListDropped)=\"dropLayer($event, group)\"\n          class=\"item-list\">\n          @for (layer of group.layers; track layer.id; let iIndex = $index) {\n              <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n                <mat-expansion-panel-header>\n                  <mat-panel-title>\n                    <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n                      <div class=\"item-left\">\n                        <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n                        <span>{{ layer.name }}</span>\n                      </div>\n                      <div class=\"item-center\">\n                        @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n                          <mat-icon class=\"zoom-off\">browser_not_supported</mat-icon>\n                          <span class=\"icon-label\">(zoom)</span>\n                        }\n                        @if (layer.hasErrors) {\n                          <mat-icon class=\"zoom-off\">wifi_off</mat-icon>\n                          <span class=\"icon-label\">(fejle)</span>\n                        }\n                      </div>\n                      <div class=\"item-right\">\n                        @if (layer.visible) {\n                          <mat-icon (click)=\"toggleLayer($event, layer)\" class=\"power-on\">power</mat-icon>\n                          <span class=\"icon-label\">(t\u00E6nd)</span>\n                        }\n                        @if (!layer.visible) {\n                          <mat-icon (click)=\"toggleLayer($event, layer)\" class=\"power-off\">power_off</mat-icon>\n                          <span class=\"icon-label\">(sluk)</span>\n                        }\n                        <input                 \n                          type=\"range\"\n                          min=\"0\"\n                          max=\"1\"\n                          step=\"0.05\"\n                          [(ngModel)]=\"layer.opacity\"\n                          (click)=\"stopDrag($event)\"\n                          (input)=\"updateOpacity(layer)\"\n                          (mousedown)=\"stopDrag($event)\"\n                          (touchstart)=\"stopDrag($event)\"\n                          (pointerdown)=\"stopDrag($event)\"\n                        >\n                      </div>\n                    </div>\n                  </mat-panel-title>\n              </mat-expansion-panel-header>\n              <div class=\"item\">{{ layer.description }}</div>\n              @if (showLegend) {\n               <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n              }\n            </mat-expansion-panel>\n            }\n          </div>\n        </mat-expansion-panel>\n      </div>\n    }\n  </div>\n  </div>\n</div>", styles: ["::ng-deep .layer-selector-icon{position:absolute;left:auto;right:1em;bottom:4.5em;z-index:1000}::ng-deep .layer-selector-icon mat-icon{display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .3s ease;outline:none;border:0;height:40px;border-radius:5px;width:40px;background:color-mix(in srgb,#000 60%,transparent);box-shadow:#0000004d 0 1px 4px -1px;font-size:2em;color:#fff}::ng-deep .layer-selector-icon mat-icon:hover{box-shadow:0 4px 12px #0003;color:#fff}.legend-thumbnail{max-width:200px;max-height:200px;width:auto;height:auto;border:2px solid #dee2e6;border-radius:6px;padding:6px}.layer-selector-body-wrapper{position:absolute;left:auto;right:4em;bottom:.2em;z-index:1000;cursor:grab;max-width:calc(100vw - 8em)}.layer-selector-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}.layer-selector-body-wrapper .ol-control{border-radius:0}@media (max-width: 767px){.layer-selector-body-wrapper{right:.5em;bottom:4em;max-width:calc(100vw - 7em);left:.5em;width:calc(100vw - 7em)}}@media (min-width: 768px) and (max-width: 1024px){.layer-selector-body-wrapper{right:1em;bottom:4em;max-width:calc(100vw - 2em)}}.drag-handle-selector{display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,#000 60%,transparent);border-radius:4px 4px 0 0;padding:4px;cursor:grab;box-shadow:0 -2px 8px #0003}.drag-handle-selector mat-icon{color:#fff;font-size:20px;width:20px;height:20px}::ng-deep .layer-selector-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:color-mix(in srgb,#000 60%,transparent);box-shadow:0 4px 20px #00000026;width:480px;max-width:100%;max-height:660px;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 767px){::ng-deep .layer-selector-body{width:100%;max-height:60vh}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body{width:100%;max-width:480px;max-height:50vh}}::ng-deep .layer-selector-body .search-section{display:flex;align-items:center;gap:6px;padding:8px 12px 6px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section{padding:6px 8px 4px;gap:4px}}::ng-deep .layer-selector-body .search-section mat-form-field{flex:1}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-text-field-wrapper{padding-bottom:0}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-wrapper{padding-bottom:0;margin-bottom:0}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-form-field-infix{padding-bottom:6px;min-height:auto}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-outline{background:#fff}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-outline-thick{color:#1976d2}::ng-deep .layer-selector-body .search-section mat-form-field input{font-size:13px;padding:3px 0}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-form-field input{font-size:12px}}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-label{color:#fff;font-weight:500;font-size:13px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-label{font-size:12px}}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0;margin-top:0}::ng-deep .layer-selector-body .search-section mat-icon{color:#fff;cursor:pointer;padding:6px;border-radius:4px;transition:all .2s ease;font-size:24px;width:24px;height:24px;display:flex;justify-content:center;align-items:center}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-icon{font-size:20px;width:20px;height:20px;padding:4px}}::ng-deep .layer-selector-body .search-section mat-icon:hover{color:#f9fafb}::ng-deep .layer-selector-body .item-list{flex:1;overflow-y:auto;padding:6px;max-height:660px;width:100%}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list{padding:4px;max-height:calc(60vh - 80px)}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body .item-list{max-height:calc(70vh - 80px)}}::ng-deep .layer-selector-body .item-list .group{margin-bottom:6px;overflow:hidden;box-shadow:0 -2px 2px #4868b20a,0 2px 2px #6a6f7517,0 1px 2px #4868b214}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel{box-shadow:none!important;border-radius:0!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header{padding:0 11px;height:40px;background:color-mix(in srgb,#000 55%,transparent)}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header{padding:0 20px;height:36px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header:hover{background:color-mix(in srgb,#000 60%,transparent)!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title{align-items:center;gap:6px;font-weight:600;color:#fff;font-size:13px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon{color:#fff;font-size:16px;width:16px;height:16px;transition:transform .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.lightbulb{color:#dfca0e}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.power-on{color:#4caf50}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.power-off{color:#f44336}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content{background:color-mix(in srgb,#000 40%,transparent)}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:4px 0}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:2px 0}}::ng-deep .layer-selector-body .item-list .group .item-list{padding:0;max-height:none}::ng-deep .layer-selector-body .item-list .group .item-list .item{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 12px;background:transparent;transition:all .2s ease;color:#fff;cursor:grab}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item{gap:4px;padding:6px 8px}}::ng-deep .layer-selector-body .item-list .group .item-list .item:last-child{border-bottom:none}::ng-deep .layer-selector-body .item-list .group .item-list .item:hover{background-color:transparent;transition:all .2s ease}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left{display:flex;align-items:center;gap:3px;flex:1;min-width:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left span{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left span{font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center{display:flex;align-items:center;gap:2px;flex-shrink:0;justify-content:center;position:relative;left:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center .icon-label{font-size:11px;opacity:.8;margin-right:4px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center .icon-label{font-size:9px;margin-right:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right{display:flex;align-items:center;flex:1;justify-content:flex-end;min-width:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right .icon-label{font-size:11px;opacity:.8;margin-right:4px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right .icon-label{font-size:9px;margin-right:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right input[type=range]{width:80px;height:4px;margin:0;flex-shrink:0}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right input[type=range]{width:60px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon{flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.drag-indicator{color:#fff;font-size:16px;width:16px;height:16px;cursor:grab}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.drag-indicator{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on{color:#4caf50;font-size:18px;width:18px;height:18px;cursor:pointer;padding:3px;border-radius:3px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on{font-size:16px;width:16px;height:16px;padding:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on:hover{background:#4caf5033}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off{color:#f44336;font-size:18px;width:18px;height:18px;cursor:pointer;padding:3px;border-radius:3px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off{font-size:16px;width:16px;height:16px;padding:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off:hover{background:#f4433633}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.zoom-off{color:#f44336;font-size:16px;width:16px;height:16px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.zoom-off{font-size:14px;width:14px;height:14px}}::ng-deep .mat-expansion-indicator svg{fill:#fff!important}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 15px #00000026;background:#fff;padding:10px 12px}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.item-list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.power-on{color:#4caf50}.power-off{color:#f44336}.display-none{display:none}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar{width:8px;border-radius:10px;border:5px solid transparent}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-thumb{background:#0000004d;border:5px solid transparent;border-radius:10px;background-clip:padding-box}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-thumb:hover{background:#0006;background-clip:padding-box;border:3px solid transparent}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LayerSelectorComponent, isStandalone: true, selector: "lib-layer-selector", inputs: { map: "map", profile: "profile", currentZoomLevel: "currentZoomLevel" }, viewQueries: [{ propertyName: "contentBody", first: true, predicate: ["layerSelectorBody"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #layerSelectorBody\n  class=\"layer-selector-body-wrapper\"\n  cdkDrag\n  cdkDragBoundary=\".map-container\"\n  [cdkDragFreeDragPosition]=\"layerSelectorDragPosition\"\n  (cdkDragEnded)=\"onLayerSelectorDragEnded($event)\"\n  [class.collapsed]=\"collapsed\">\n\n  <div class=\"drag-handle-selector\" cdkDragHandle>\n    <div class=\"drag-handle-content\">\n      <div class=\"drag-handle-icons\">\n        <mat-icon class=\"icon-left\">layers</mat-icon>\n        <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n        <mat-icon class=\"toggle-icon\" (click)=\"toggleLayerSelector()\">\n          {{ collapsed ? 'flip_to_front' : 'remove' }}\n        </mat-icon>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ol-unselectable ol-control layer-selector-body\" *ngIf=\"!collapsed\">\n    <div class=\"search-section\">\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>Filtrer</mat-label>\n        <input \n          matInput \n          type=\"text\" \n          [(ngModel)]=\"searchText\" \n          (ngModelChange)=\"filteredLayerGroups=setfilteredGroups()\"\n          placeholder=\"Skriv for at filtrere...\"\n        />\n      </mat-form-field>\n      <mat-icon (click)=\"clearSearchText()\">undo</mat-icon>\n    </div>\n    <div *ngIf=\"filteredLayerGroups && filteredLayerGroups.length > 0\" class=\"group-header\">Mine Temaer</div>\n    <div\n      cdkDropList\n      [cdkDropListData]=\"filteredLayerGroups\"\n      (cdkDropListDropped)=\"dropGroup($event, filteredLayerGroups)\"\n      class=\"item-list\">\n      @for (group of filteredLayerGroups; track group.id; let gIndex = $index) {\n        <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n          <mat-expansion-panel [(expanded)]=\"group.expanded\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                  @if (group.expanded) {\n                    <mat-icon>arrow_upward</mat-icon>\n                  }\n                  @if (!group.expanded) {\n                    <mat-icon>arrow_downward</mat-icon>  \n                  }\n                {{ group.name }} \n                <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n                ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n                @if (group.visible) {\n                  <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\"  \n                    matTooltip=\"T\u00E6nd\"  \n                    [matTooltipShowDelay]=\"200\"\n                    [matTooltipHideDelay]=\"300\" \n                    matTooltipPosition=\"above\">power_settings_new\n                  </mat-icon>  \n                  }\n                @if (!group.visible) {\n                  <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n                    matTooltip=\"Sluk\"  \n                    [matTooltipShowDelay]=\"200\"\n                    [matTooltipHideDelay]=\"300\" \n                    matTooltipPosition=\"above\">power_settings_new\n                  </mat-icon>\n                }\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n\n            <div\n              cdkDropList\n              [cdkDropListData]=\"group.layers\"\n              (cdkDropListDropped)=\"dropLayer($event, group)\"\n              class=\"item-list\">\n              @for (layer of group.layers; track layer.id; let iIndex = $index) {\n                  <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n                    <mat-expansion-panel-header>\n                      <mat-panel-title>\n                        <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n                          <div class=\"item-left\">\n                            <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n                            <span>{{ layer.name }}</span>\n                          </div>\n                          <div class=\"item-center\">\n                            @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n                              <mat-icon class=\"zoom-off\" \n                                matTooltip=\"Zoom\"  \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipPosition=\"above\">browser_not_supported\n                              </mat-icon>\n                            }\n                            @if (layer.hasErrors) {\n                              <mat-icon class=\"zoom-off\" \n                                matTooltip=\"Fejl\"  \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipPosition=\"above\">priority_high\n                              </mat-icon>\n\n                            }\n                          </div>\n                          <div class=\"item-right\">\n                            @if (layer.visible) {\n                              <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\"  \n                                matTooltip=\"T\u00E6nd\"  \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipPosition=\"above\">power_settings_new\n                              </mat-icon>\n                            }\n                            @if (!layer.visible) {\n                              <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n                                matTooltip=\"Sluk\"  \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipPosition=\"above\">power_settings_new\n                              </mat-icon>\n                            }\n                            <input                 \n                              type=\"range\"\n                              min=\"0\"\n                              max=\"1\"\n                              step=\"0.05\"\n                              [(ngModel)]=\"layer.opacity\"\n                              (click)=\"stopDrag($event)\"\n                              (input)=\"updateOpacity(layer)\"\n                              (mousedown)=\"stopDrag($event)\"\n                              (touchstart)=\"stopDrag($event)\"\n                              (pointerdown)=\"stopDrag($event)\"\n                            >\n                          </div>\n                        </div>\n                      </mat-panel-title>\n                  </mat-expansion-panel-header>\n                  <div class=\"layer-description\">{{ layer.description }}</div>\n                  @if (showLegend) {\n                   <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n                  }\n                </mat-expansion-panel>\n                }\n              </div>\n            </mat-expansion-panel>\n          </div>\n        }\n      </div>\n      <div *ngIf=\"filteredBackgroundLayerGroups && filteredBackgroundLayerGroups.length > 0\" class=\"group-header\">Baggrundskort</div>\n      <div\n        cdkDropList\n        [cdkDropListData]=\"filteredBackgroundLayerGroups\"\n        (cdkDropListDropped)=\"dropGroup($event, filteredBackgroundLayerGroups)\"\n        class=\"item-list\">\n        @for (group of filteredBackgroundLayerGroups; track group.id; let gIndex = $index) {\n          <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n            <mat-expansion-panel [(expanded)]=\"group.expanded\">\n              <mat-expansion-panel-header>\n                <mat-panel-title>\n                    @if (group.expanded) {\n                      <mat-icon>arrow_upward</mat-icon>\n                    }\n                    @if (!group.expanded) {\n                      <mat-icon>arrow_downward</mat-icon>  \n                    }\n                  {{ group.name }} \n                  <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n                  ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n                  @if (group.visible) {\n                    <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\"  \n                      matTooltip=\"T\u00E6nd\"  \n                      [matTooltipShowDelay]=\"200\"\n                      [matTooltipHideDelay]=\"300\" \n                      matTooltipPosition=\"above\">power_settings_new\n                    </mat-icon>  \n                    }\n                  @if (!group.visible) {\n                    <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n                      matTooltip=\"Sluk\"  \n                      [matTooltipShowDelay]=\"200\"\n                      [matTooltipHideDelay]=\"300\" \n                      matTooltipPosition=\"above\">power_settings_new\n                    </mat-icon>\n                  }\n                </mat-panel-title>\n              </mat-expansion-panel-header>\n\n              <div\n                cdkDropList\n                [cdkDropListData]=\"group.layers\"\n                (cdkDropListDropped)=\"dropLayer($event, group)\"\n                class=\"item-list\">\n                @for (layer of group.layers; track layer.id; let iIndex = $index) {\n                    <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n                      <mat-expansion-panel-header>\n                        <mat-panel-title>\n                          <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n                            <div class=\"item-left\">\n                              <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n                              <span>{{ layer.name }}</span>\n                            </div>\n                            <div class=\"item-center\">\n                              @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n                                <mat-icon class=\"zoom-off\" \n                                  matTooltip=\"Zoom\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">browser_not_supported\n                                </mat-icon>\n                              }\n                              @if (layer.hasErrors) {\n                                <mat-icon class=\"zoom-off\" \n                                  matTooltip=\"Fejl\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">priority_high\n                                </mat-icon>\n\n                              }\n                            </div>\n                            <div class=\"item-right\">\n                              @if (layer.visible) {\n                                <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\"  \n                                  matTooltip=\"T\u00E6nd\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">power_settings_new\n                                </mat-icon>\n                              }\n                              @if (!layer.visible) {\n                                <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n                                  matTooltip=\"Sluk\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">power_settings_new\n                                </mat-icon>\n                              }\n                              <input                 \n                                type=\"range\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.05\"\n                                [(ngModel)]=\"layer.opacity\"\n                                (click)=\"stopDrag($event)\"\n                                (input)=\"updateOpacity(layer)\"\n                                (mousedown)=\"stopDrag($event)\"\n                                (touchstart)=\"stopDrag($event)\"\n                                (pointerdown)=\"stopDrag($event)\"\n                              >\n                            </div>\n                          </div>\n                        </mat-panel-title>\n                    </mat-expansion-panel-header>\n                    <div class=\"layer-description\">{{ layer.description }}</div>\n                    @if (showLegend) {\n                    <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n                    }\n                    </mat-expansion-panel>\n                  }\n              </div>\n            </mat-expansion-panel>\n          </div>\n        }\n      </div>\n  </div>\n</div>", styles: [".legend-thumbnail{max-width:200px;max-height:200px;width:auto;height:auto;border:2px solid #dee2e6;border-radius:6px;padding:6px}.layer-selector-body-wrapper{position:absolute;left:1em;top:10em;z-index:1000;cursor:grab;max-width:calc(100vw - 8em);display:flex;flex-direction:column}.layer-selector-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons{justify-content:space-between}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .icon-left{order:1;margin-right:auto}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .drag-indicator-right{order:1}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .toggle-icon{order:3}.layer-selector-body-wrapper.collapsed .layer-selector-body{display:none}.layer-selector-body-wrapper.collapsed .drag-handle-icons{justify-content:flex-end}.layer-selector-body-wrapper.collapsed .drag-handle-icons .icon-left{order:1;margin-right:0}.layer-selector-body-wrapper.collapsed .drag-handle-icons .drag-indicator-right{order:1}.layer-selector-body-wrapper.collapsed .drag-handle-icons .toggle-icon{order:3}.layer-selector-body-wrapper .ol-control{border-radius:0}.layer-selector-body-wrapper .group-header{color:#fff;padding:0 14px}@media (max-width: 767px){.layer-selector-body-wrapper{right:.5em;bottom:4em;max-width:calc(100vw - 7em);left:.5em;width:calc(100vw - 7em)}}@media (min-width: 768px) and (max-width: 1024px){.layer-selector-body-wrapper{right:3.5em;bottom:.5em;max-width:calc(100vw - 2em)}}.drag-handle-selector{display:flex;justify-content:flex-end;border-radius:5px 5px 0 0;padding:5px;cursor:grab;background:#292a2d}.drag-handle-content{display:flex;align-items:center;width:100%}.drag-handle-icons{display:flex;align-items:center;gap:16px;width:100%}.drag-handle-icons mat-icon{color:#fff;font-size:18px;width:18px;height:18px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-icons mat-icon:first-child{cursor:grab}.drag-indicator-right{cursor:grab}.toggle-icon:hover{color:#fff;background:#ffffff26}::ng-deep .layer-selector-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:#292a2d;box-shadow:0 4px 20px #00000026;width:480px;max-width:100%;max-height:317px;min-height:120px;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 767px){::ng-deep .layer-selector-body{width:100%;max-height:70vh;min-height:140px}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body{width:100%;max-width:445px;max-height:76vh;min-height:110px}}::ng-deep .layer-selector-body .search-section{display:flex;align-items:center;gap:6px;padding:8px 12px 6px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section{padding:6px 8px 4px;gap:4px}}::ng-deep .layer-selector-body .search-section mat-form-field{flex:1}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-text-field-wrapper{padding-bottom:0;background:#000}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-wrapper{padding-bottom:0;margin-bottom:0}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-form-field-infix{padding-bottom:6px;min-height:auto}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-outline{background:#fff}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-outline-thick{color:#1976d2}::ng-deep .layer-selector-body .search-section mat-form-field input{font-size:13px;padding:3px 0}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-form-field input{font-size:12px}}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-label{color:#fff;font-weight:500;font-size:13px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-label{font-size:12px}}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0;margin-top:0}::ng-deep .layer-selector-body .search-section mat-icon{color:#fff;cursor:pointer;padding:6px;border-radius:4px;transition:all .2s ease;font-size:24px;width:24px;height:24px;display:flex;justify-content:center;align-items:center}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-icon{font-size:20px;width:20px;height:20px;padding:4px}}::ng-deep .layer-selector-body .search-section mat-icon:hover{color:#f9fafb}::ng-deep .layer-selector-body .item-list{flex:1;overflow-y:auto;max-height:660px;width:100%}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list{padding:4px;max-height:calc(60vh - 80px)}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body .item-list{max-height:calc(77vh - 78px)}}::ng-deep .layer-selector-body .item-list .group{overflow:hidden;box-shadow:0 -2px 2px #4868b20a,0 2px 2px #6a6f7517,0 1px 2px #4868b214}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel{box-shadow:none!important;border-radius:0!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header{padding:0 11px;height:40px;background:#000!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header:hover{background:#333!important}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header{padding:0 20px;height:36px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header:hover{background:color-mix(in srgb,#000 60%,transparent)!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title{align-items:center;gap:6px;font-weight:600;color:#bdc1c3cc;font-size:17px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon{color:#bdc1c3cc;font-size:16px;width:16px;height:16px;transition:transform .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.lightbulb{color:#dfca0e}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.power-on{color:#4caf50}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.power-off{color:#f44336}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content{background:#4d4f55}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:4px 0;background:#000}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:2px 0}}::ng-deep .layer-selector-body .item-list .group .item-list{padding:0;max-height:none}::ng-deep .layer-selector-body .item-list .group .item-list .layer-description{font-size:13px;padding:0 31px;color:#fffc}::ng-deep .layer-selector-body .item-list .group .item-list .item{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:6px;background:transparent;transition:all .2s ease;color:#fff;cursor:grab;font-size:14px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item{gap:4px;padding:6px 8px}}::ng-deep .layer-selector-body .item-list .group .item-list .item:last-child{border-bottom:none}::ng-deep .layer-selector-body .item-list .group .item-list .item:hover{background-color:transparent;transition:all .2s ease}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left{display:flex;align-items:center;gap:3px;flex:1;min-width:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left span{font-size:13px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;flex:1;min-width:0;color:#fff}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left span{font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center{display:flex;align-items:center;gap:2px;flex-shrink:0;justify-content:center;position:relative;left:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center .icon-label{font-size:11px;opacity:.8;margin-right:4px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center .icon-label{font-size:9px;margin-right:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right{display:flex;align-items:center;flex:1;justify-content:flex-end;min-width:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right input[type=range]{width:80px;height:4px;margin:0;flex-shrink:0}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right input[type=range]{width:60px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon{flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.drag-indicator{color:#fff;font-size:16px;width:16px;height:16px;cursor:grab}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.drag-indicator{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on{color:#4caf50;font-size:18px;width:18px;height:18px;cursor:pointer;padding:3px;border-radius:3px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on{font-size:16px;width:16px;height:16px;padding:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on:hover{background:#4caf5033}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off{color:#f44336;font-size:18px;width:18px;height:18px;cursor:pointer;padding:3px;border-radius:3px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off{font-size:16px;width:16px;height:16px;padding:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off:hover{background:#f4433633}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.zoom-off{color:#f44336;font-size:16px;width:16px;height:16px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.zoom-off{font-size:14px;width:14px;height:14px}}::ng-deep .mat-expansion-indicator svg{fill:#fff!important}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 15px #00000026;background:#fff;padding:10px 12px}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.item-list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.power-on{color:#4caf50}.power-off{color:#f44336}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar{width:12px}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayerSelectorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-layer-selector', imports: [MatFormFieldModule, CommonModule, MatIconModule, FormsModule, DragDropModule,
-                        MatExpansionModule, MatInputModule], template: "<div #layerSelectorIcon id=\"layerSelector\" class=\"ol-unselectable ol-control layer-selector-icon\">\n  <mat-icon  (click)=\"toggleLayerSelector()\">layers</mat-icon>\n</div>\n<div #layerSelectorBody  [class.display-none]=\"!showSelector\" class=\"layer-selector-body-wrapper\" cdkDrag cdkDragBoundary=\".map-container\">\n  <div class=\"drag-handle-selector\" cdkDragHandle>\n    <mat-icon>drag_indicator</mat-icon>\n  </div>\n <div class=\"ol-unselectable ol-control layer-selector-body\">\n  <div class=\"search-section\">\n    <mat-form-field appearance=\"outline\" class=\"w-full\">\n      <mat-label>Filtrer</mat-label>\n      <input \n        matInput \n        type=\"text\" \n        [(ngModel)]=\"searchText\" \n        (ngModelChange)=\"filteredLayerGroups=setfilteredGroups()\"\n        placeholder=\"Skriv for at filtrere...\"\n      />\n    </mat-form-field>\n    <mat-icon (click)=\"clearSearchText()\">undo</mat-icon>\n  </div>\n  \n  <div\n    cdkDropList\n    [cdkDropListData]=\"filteredLayerGroups\"\n    (cdkDropListDropped)=\"dropGroup($event)\"\n    class=\"item-list\">\n  @for (group of filteredLayerGroups; track group.id; let gIndex = $index) {\n    <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n      <mat-expansion-panel [(expanded)]=\"group.expanded\">\n        <mat-expansion-panel-header>\n          <mat-panel-title>\n              @if (group.expanded) {\n                <mat-icon>arrow_upward</mat-icon>\n              }\n              @if (!group.expanded) {\n                <mat-icon>arrow_downward</mat-icon>  \n              }\n            {{ group.name }} \n            <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n            ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n            @if (group.visible) {\n              <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\">power</mat-icon>(t\u00E6nd)\n              }\n            @if (!group.visible) {\n              <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\">power_off</mat-icon>(sluk)\n            }\n          </mat-panel-title>\n        </mat-expansion-panel-header>\n          <!-- This is only shown during drag -->\n    <!-- <div *cdkDragPreview class=\"drag-preview\">\n      {{ group.name }}\n    </div> -->\n\n    <!-- Placeholder to avoid jump -->\n    <!-- <div *cdkDragPlaceholder class=\"drag-placeholder\"></div> -->\n\n        <div\n          cdkDropList\n          [cdkDropListData]=\"group.layers\"\n          (cdkDropListDropped)=\"dropLayer($event, group)\"\n          class=\"item-list\">\n          @for (layer of group.layers; track layer.id; let iIndex = $index) {\n              <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n                <mat-expansion-panel-header>\n                  <mat-panel-title>\n                    <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n                      <div class=\"item-left\">\n                        <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n                        <span>{{ layer.name }}</span>\n                      </div>\n                      <div class=\"item-center\">\n                        @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n                          <mat-icon class=\"zoom-off\">browser_not_supported</mat-icon>\n                          <span class=\"icon-label\">(zoom)</span>\n                        }\n                        @if (layer.hasErrors) {\n                          <mat-icon class=\"zoom-off\">wifi_off</mat-icon>\n                          <span class=\"icon-label\">(fejle)</span>\n                        }\n                      </div>\n                      <div class=\"item-right\">\n                        @if (layer.visible) {\n                          <mat-icon (click)=\"toggleLayer($event, layer)\" class=\"power-on\">power</mat-icon>\n                          <span class=\"icon-label\">(t\u00E6nd)</span>\n                        }\n                        @if (!layer.visible) {\n                          <mat-icon (click)=\"toggleLayer($event, layer)\" class=\"power-off\">power_off</mat-icon>\n                          <span class=\"icon-label\">(sluk)</span>\n                        }\n                        <input                 \n                          type=\"range\"\n                          min=\"0\"\n                          max=\"1\"\n                          step=\"0.05\"\n                          [(ngModel)]=\"layer.opacity\"\n                          (click)=\"stopDrag($event)\"\n                          (input)=\"updateOpacity(layer)\"\n                          (mousedown)=\"stopDrag($event)\"\n                          (touchstart)=\"stopDrag($event)\"\n                          (pointerdown)=\"stopDrag($event)\"\n                        >\n                      </div>\n                    </div>\n                  </mat-panel-title>\n              </mat-expansion-panel-header>\n              <div class=\"item\">{{ layer.description }}</div>\n              @if (showLegend) {\n               <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n              }\n            </mat-expansion-panel>\n            }\n          </div>\n        </mat-expansion-panel>\n      </div>\n    }\n  </div>\n  </div>\n</div>", styles: ["::ng-deep .layer-selector-icon{position:absolute;left:auto;right:1em;bottom:4.5em;z-index:1000}::ng-deep .layer-selector-icon mat-icon{display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .3s ease;outline:none;border:0;height:40px;border-radius:5px;width:40px;background:color-mix(in srgb,#000 60%,transparent);box-shadow:#0000004d 0 1px 4px -1px;font-size:2em;color:#fff}::ng-deep .layer-selector-icon mat-icon:hover{box-shadow:0 4px 12px #0003;color:#fff}.legend-thumbnail{max-width:200px;max-height:200px;width:auto;height:auto;border:2px solid #dee2e6;border-radius:6px;padding:6px}.layer-selector-body-wrapper{position:absolute;left:auto;right:4em;bottom:.2em;z-index:1000;cursor:grab;max-width:calc(100vw - 8em)}.layer-selector-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}.layer-selector-body-wrapper .ol-control{border-radius:0}@media (max-width: 767px){.layer-selector-body-wrapper{right:.5em;bottom:4em;max-width:calc(100vw - 7em);left:.5em;width:calc(100vw - 7em)}}@media (min-width: 768px) and (max-width: 1024px){.layer-selector-body-wrapper{right:1em;bottom:4em;max-width:calc(100vw - 2em)}}.drag-handle-selector{display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,#000 60%,transparent);border-radius:4px 4px 0 0;padding:4px;cursor:grab;box-shadow:0 -2px 8px #0003}.drag-handle-selector mat-icon{color:#fff;font-size:20px;width:20px;height:20px}::ng-deep .layer-selector-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:color-mix(in srgb,#000 60%,transparent);box-shadow:0 4px 20px #00000026;width:480px;max-width:100%;max-height:660px;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 767px){::ng-deep .layer-selector-body{width:100%;max-height:60vh}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body{width:100%;max-width:480px;max-height:50vh}}::ng-deep .layer-selector-body .search-section{display:flex;align-items:center;gap:6px;padding:8px 12px 6px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section{padding:6px 8px 4px;gap:4px}}::ng-deep .layer-selector-body .search-section mat-form-field{flex:1}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-text-field-wrapper{padding-bottom:0}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-wrapper{padding-bottom:0;margin-bottom:0}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-form-field-infix{padding-bottom:6px;min-height:auto}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-outline{background:#fff}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-outline-thick{color:#1976d2}::ng-deep .layer-selector-body .search-section mat-form-field input{font-size:13px;padding:3px 0}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-form-field input{font-size:12px}}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-label{color:#fff;font-weight:500;font-size:13px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-label{font-size:12px}}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0;margin-top:0}::ng-deep .layer-selector-body .search-section mat-icon{color:#fff;cursor:pointer;padding:6px;border-radius:4px;transition:all .2s ease;font-size:24px;width:24px;height:24px;display:flex;justify-content:center;align-items:center}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-icon{font-size:20px;width:20px;height:20px;padding:4px}}::ng-deep .layer-selector-body .search-section mat-icon:hover{color:#f9fafb}::ng-deep .layer-selector-body .item-list{flex:1;overflow-y:auto;padding:6px;max-height:660px;width:100%}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list{padding:4px;max-height:calc(60vh - 80px)}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body .item-list{max-height:calc(70vh - 80px)}}::ng-deep .layer-selector-body .item-list .group{margin-bottom:6px;overflow:hidden;box-shadow:0 -2px 2px #4868b20a,0 2px 2px #6a6f7517,0 1px 2px #4868b214}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel{box-shadow:none!important;border-radius:0!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header{padding:0 11px;height:40px;background:color-mix(in srgb,#000 55%,transparent)}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header{padding:0 20px;height:36px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header:hover{background:color-mix(in srgb,#000 60%,transparent)!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title{align-items:center;gap:6px;font-weight:600;color:#fff;font-size:13px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon{color:#fff;font-size:16px;width:16px;height:16px;transition:transform .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.lightbulb{color:#dfca0e}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.power-on{color:#4caf50}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.power-off{color:#f44336}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content{background:color-mix(in srgb,#000 40%,transparent)}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:4px 0}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:2px 0}}::ng-deep .layer-selector-body .item-list .group .item-list{padding:0;max-height:none}::ng-deep .layer-selector-body .item-list .group .item-list .item{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 12px;background:transparent;transition:all .2s ease;color:#fff;cursor:grab}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item{gap:4px;padding:6px 8px}}::ng-deep .layer-selector-body .item-list .group .item-list .item:last-child{border-bottom:none}::ng-deep .layer-selector-body .item-list .group .item-list .item:hover{background-color:transparent;transition:all .2s ease}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left{display:flex;align-items:center;gap:3px;flex:1;min-width:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left span{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left span{font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center{display:flex;align-items:center;gap:2px;flex-shrink:0;justify-content:center;position:relative;left:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center .icon-label{font-size:11px;opacity:.8;margin-right:4px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center .icon-label{font-size:9px;margin-right:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right{display:flex;align-items:center;flex:1;justify-content:flex-end;min-width:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right .icon-label{font-size:11px;opacity:.8;margin-right:4px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right .icon-label{font-size:9px;margin-right:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right input[type=range]{width:80px;height:4px;margin:0;flex-shrink:0}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right input[type=range]{width:60px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon{flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.drag-indicator{color:#fff;font-size:16px;width:16px;height:16px;cursor:grab}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.drag-indicator{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on{color:#4caf50;font-size:18px;width:18px;height:18px;cursor:pointer;padding:3px;border-radius:3px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on{font-size:16px;width:16px;height:16px;padding:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on:hover{background:#4caf5033}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off{color:#f44336;font-size:18px;width:18px;height:18px;cursor:pointer;padding:3px;border-radius:3px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off{font-size:16px;width:16px;height:16px;padding:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off:hover{background:#f4433633}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.zoom-off{color:#f44336;font-size:16px;width:16px;height:16px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.zoom-off{font-size:14px;width:14px;height:14px}}::ng-deep .mat-expansion-indicator svg{fill:#fff!important}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 15px #00000026;background:#fff;padding:10px 12px}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.item-list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.power-on{color:#4caf50}.power-off{color:#f44336}.display-none{display:none}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar{width:8px;border-radius:10px;border:5px solid transparent}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-thumb{background:#0000004d;border:5px solid transparent;border-radius:10px;background-clip:padding-box}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-thumb:hover{background:#0006;background-clip:padding-box;border:3px solid transparent}\n"] }]
-        }], propDecorators: { contentIcon: [{
-                type: ViewChild,
-                args: ['layerSelectorIcon', { static: false }]
-            }], contentBody: [{
+                        MatExpansionModule, MatInputModule, MatTooltipModule], template: "<div\n  #layerSelectorBody\n  class=\"layer-selector-body-wrapper\"\n  cdkDrag\n  cdkDragBoundary=\".map-container\"\n  [cdkDragFreeDragPosition]=\"layerSelectorDragPosition\"\n  (cdkDragEnded)=\"onLayerSelectorDragEnded($event)\"\n  [class.collapsed]=\"collapsed\">\n\n  <div class=\"drag-handle-selector\" cdkDragHandle>\n    <div class=\"drag-handle-content\">\n      <div class=\"drag-handle-icons\">\n        <mat-icon class=\"icon-left\">layers</mat-icon>\n        <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n        <mat-icon class=\"toggle-icon\" (click)=\"toggleLayerSelector()\">\n          {{ collapsed ? 'flip_to_front' : 'remove' }}\n        </mat-icon>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ol-unselectable ol-control layer-selector-body\" *ngIf=\"!collapsed\">\n    <div class=\"search-section\">\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>Filtrer</mat-label>\n        <input \n          matInput \n          type=\"text\" \n          [(ngModel)]=\"searchText\" \n          (ngModelChange)=\"filteredLayerGroups=setfilteredGroups()\"\n          placeholder=\"Skriv for at filtrere...\"\n        />\n      </mat-form-field>\n      <mat-icon (click)=\"clearSearchText()\">undo</mat-icon>\n    </div>\n    <div *ngIf=\"filteredLayerGroups && filteredLayerGroups.length > 0\" class=\"group-header\">Mine Temaer</div>\n    <div\n      cdkDropList\n      [cdkDropListData]=\"filteredLayerGroups\"\n      (cdkDropListDropped)=\"dropGroup($event, filteredLayerGroups)\"\n      class=\"item-list\">\n      @for (group of filteredLayerGroups; track group.id; let gIndex = $index) {\n        <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n          <mat-expansion-panel [(expanded)]=\"group.expanded\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                  @if (group.expanded) {\n                    <mat-icon>arrow_upward</mat-icon>\n                  }\n                  @if (!group.expanded) {\n                    <mat-icon>arrow_downward</mat-icon>  \n                  }\n                {{ group.name }} \n                <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n                ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n                @if (group.visible) {\n                  <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\"  \n                    matTooltip=\"T\u00E6nd\"  \n                    [matTooltipShowDelay]=\"200\"\n                    [matTooltipHideDelay]=\"300\" \n                    matTooltipPosition=\"above\">power_settings_new\n                  </mat-icon>  \n                  }\n                @if (!group.visible) {\n                  <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n                    matTooltip=\"Sluk\"  \n                    [matTooltipShowDelay]=\"200\"\n                    [matTooltipHideDelay]=\"300\" \n                    matTooltipPosition=\"above\">power_settings_new\n                  </mat-icon>\n                }\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n\n            <div\n              cdkDropList\n              [cdkDropListData]=\"group.layers\"\n              (cdkDropListDropped)=\"dropLayer($event, group)\"\n              class=\"item-list\">\n              @for (layer of group.layers; track layer.id; let iIndex = $index) {\n                  <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n                    <mat-expansion-panel-header>\n                      <mat-panel-title>\n                        <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n                          <div class=\"item-left\">\n                            <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n                            <span>{{ layer.name }}</span>\n                          </div>\n                          <div class=\"item-center\">\n                            @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n                              <mat-icon class=\"zoom-off\" \n                                matTooltip=\"Zoom\"  \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipPosition=\"above\">browser_not_supported\n                              </mat-icon>\n                            }\n                            @if (layer.hasErrors) {\n                              <mat-icon class=\"zoom-off\" \n                                matTooltip=\"Fejl\"  \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipPosition=\"above\">priority_high\n                              </mat-icon>\n\n                            }\n                          </div>\n                          <div class=\"item-right\">\n                            @if (layer.visible) {\n                              <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\"  \n                                matTooltip=\"T\u00E6nd\"  \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipPosition=\"above\">power_settings_new\n                              </mat-icon>\n                            }\n                            @if (!layer.visible) {\n                              <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n                                matTooltip=\"Sluk\"  \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipPosition=\"above\">power_settings_new\n                              </mat-icon>\n                            }\n                            <input                 \n                              type=\"range\"\n                              min=\"0\"\n                              max=\"1\"\n                              step=\"0.05\"\n                              [(ngModel)]=\"layer.opacity\"\n                              (click)=\"stopDrag($event)\"\n                              (input)=\"updateOpacity(layer)\"\n                              (mousedown)=\"stopDrag($event)\"\n                              (touchstart)=\"stopDrag($event)\"\n                              (pointerdown)=\"stopDrag($event)\"\n                            >\n                          </div>\n                        </div>\n                      </mat-panel-title>\n                  </mat-expansion-panel-header>\n                  <div class=\"layer-description\">{{ layer.description }}</div>\n                  @if (showLegend) {\n                   <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n                  }\n                </mat-expansion-panel>\n                }\n              </div>\n            </mat-expansion-panel>\n          </div>\n        }\n      </div>\n      <div *ngIf=\"filteredBackgroundLayerGroups && filteredBackgroundLayerGroups.length > 0\" class=\"group-header\">Baggrundskort</div>\n      <div\n        cdkDropList\n        [cdkDropListData]=\"filteredBackgroundLayerGroups\"\n        (cdkDropListDropped)=\"dropGroup($event, filteredBackgroundLayerGroups)\"\n        class=\"item-list\">\n        @for (group of filteredBackgroundLayerGroups; track group.id; let gIndex = $index) {\n          <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n            <mat-expansion-panel [(expanded)]=\"group.expanded\">\n              <mat-expansion-panel-header>\n                <mat-panel-title>\n                    @if (group.expanded) {\n                      <mat-icon>arrow_upward</mat-icon>\n                    }\n                    @if (!group.expanded) {\n                      <mat-icon>arrow_downward</mat-icon>  \n                    }\n                  {{ group.name }} \n                  <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n                  ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n                  @if (group.visible) {\n                    <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\"  \n                      matTooltip=\"T\u00E6nd\"  \n                      [matTooltipShowDelay]=\"200\"\n                      [matTooltipHideDelay]=\"300\" \n                      matTooltipPosition=\"above\">power_settings_new\n                    </mat-icon>  \n                    }\n                  @if (!group.visible) {\n                    <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n                      matTooltip=\"Sluk\"  \n                      [matTooltipShowDelay]=\"200\"\n                      [matTooltipHideDelay]=\"300\" \n                      matTooltipPosition=\"above\">power_settings_new\n                    </mat-icon>\n                  }\n                </mat-panel-title>\n              </mat-expansion-panel-header>\n\n              <div\n                cdkDropList\n                [cdkDropListData]=\"group.layers\"\n                (cdkDropListDropped)=\"dropLayer($event, group)\"\n                class=\"item-list\">\n                @for (layer of group.layers; track layer.id; let iIndex = $index) {\n                    <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n                      <mat-expansion-panel-header>\n                        <mat-panel-title>\n                          <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n                            <div class=\"item-left\">\n                              <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n                              <span>{{ layer.name }}</span>\n                            </div>\n                            <div class=\"item-center\">\n                              @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n                                <mat-icon class=\"zoom-off\" \n                                  matTooltip=\"Zoom\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">browser_not_supported\n                                </mat-icon>\n                              }\n                              @if (layer.hasErrors) {\n                                <mat-icon class=\"zoom-off\" \n                                  matTooltip=\"Fejl\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">priority_high\n                                </mat-icon>\n\n                              }\n                            </div>\n                            <div class=\"item-right\">\n                              @if (layer.visible) {\n                                <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\"  \n                                  matTooltip=\"T\u00E6nd\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">power_settings_new\n                                </mat-icon>\n                              }\n                              @if (!layer.visible) {\n                                <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n                                  matTooltip=\"Sluk\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">power_settings_new\n                                </mat-icon>\n                              }\n                              <input                 \n                                type=\"range\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.05\"\n                                [(ngModel)]=\"layer.opacity\"\n                                (click)=\"stopDrag($event)\"\n                                (input)=\"updateOpacity(layer)\"\n                                (mousedown)=\"stopDrag($event)\"\n                                (touchstart)=\"stopDrag($event)\"\n                                (pointerdown)=\"stopDrag($event)\"\n                              >\n                            </div>\n                          </div>\n                        </mat-panel-title>\n                    </mat-expansion-panel-header>\n                    <div class=\"layer-description\">{{ layer.description }}</div>\n                    @if (showLegend) {\n                    <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n                    }\n                    </mat-expansion-panel>\n                  }\n              </div>\n            </mat-expansion-panel>\n          </div>\n        }\n      </div>\n  </div>\n</div>", styles: [".legend-thumbnail{max-width:200px;max-height:200px;width:auto;height:auto;border:2px solid #dee2e6;border-radius:6px;padding:6px}.layer-selector-body-wrapper{position:absolute;left:1em;top:10em;z-index:1000;cursor:grab;max-width:calc(100vw - 8em);display:flex;flex-direction:column}.layer-selector-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons{justify-content:space-between}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .icon-left{order:1;margin-right:auto}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .drag-indicator-right{order:1}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .toggle-icon{order:3}.layer-selector-body-wrapper.collapsed .layer-selector-body{display:none}.layer-selector-body-wrapper.collapsed .drag-handle-icons{justify-content:flex-end}.layer-selector-body-wrapper.collapsed .drag-handle-icons .icon-left{order:1;margin-right:0}.layer-selector-body-wrapper.collapsed .drag-handle-icons .drag-indicator-right{order:1}.layer-selector-body-wrapper.collapsed .drag-handle-icons .toggle-icon{order:3}.layer-selector-body-wrapper .ol-control{border-radius:0}.layer-selector-body-wrapper .group-header{color:#fff;padding:0 14px}@media (max-width: 767px){.layer-selector-body-wrapper{right:.5em;bottom:4em;max-width:calc(100vw - 7em);left:.5em;width:calc(100vw - 7em)}}@media (min-width: 768px) and (max-width: 1024px){.layer-selector-body-wrapper{right:3.5em;bottom:.5em;max-width:calc(100vw - 2em)}}.drag-handle-selector{display:flex;justify-content:flex-end;border-radius:5px 5px 0 0;padding:5px;cursor:grab;background:#292a2d}.drag-handle-content{display:flex;align-items:center;width:100%}.drag-handle-icons{display:flex;align-items:center;gap:16px;width:100%}.drag-handle-icons mat-icon{color:#fff;font-size:18px;width:18px;height:18px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-icons mat-icon:first-child{cursor:grab}.drag-indicator-right{cursor:grab}.toggle-icon:hover{color:#fff;background:#ffffff26}::ng-deep .layer-selector-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:#292a2d;box-shadow:0 4px 20px #00000026;width:480px;max-width:100%;max-height:317px;min-height:120px;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 767px){::ng-deep .layer-selector-body{width:100%;max-height:70vh;min-height:140px}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body{width:100%;max-width:445px;max-height:76vh;min-height:110px}}::ng-deep .layer-selector-body .search-section{display:flex;align-items:center;gap:6px;padding:8px 12px 6px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section{padding:6px 8px 4px;gap:4px}}::ng-deep .layer-selector-body .search-section mat-form-field{flex:1}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-text-field-wrapper{padding-bottom:0;background:#000}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-wrapper{padding-bottom:0;margin-bottom:0}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-form-field-infix{padding-bottom:6px;min-height:auto}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-outline{background:#fff}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-outline-thick{color:#1976d2}::ng-deep .layer-selector-body .search-section mat-form-field input{font-size:13px;padding:3px 0}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-form-field input{font-size:12px}}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-label{color:#fff;font-weight:500;font-size:13px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-label{font-size:12px}}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0;margin-top:0}::ng-deep .layer-selector-body .search-section mat-icon{color:#fff;cursor:pointer;padding:6px;border-radius:4px;transition:all .2s ease;font-size:24px;width:24px;height:24px;display:flex;justify-content:center;align-items:center}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-icon{font-size:20px;width:20px;height:20px;padding:4px}}::ng-deep .layer-selector-body .search-section mat-icon:hover{color:#f9fafb}::ng-deep .layer-selector-body .item-list{flex:1;overflow-y:auto;max-height:660px;width:100%}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list{padding:4px;max-height:calc(60vh - 80px)}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body .item-list{max-height:calc(77vh - 78px)}}::ng-deep .layer-selector-body .item-list .group{overflow:hidden;box-shadow:0 -2px 2px #4868b20a,0 2px 2px #6a6f7517,0 1px 2px #4868b214}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel{box-shadow:none!important;border-radius:0!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header{padding:0 11px;height:40px;background:#000!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header:hover{background:#333!important}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header{padding:0 20px;height:36px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header:hover{background:color-mix(in srgb,#000 60%,transparent)!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title{align-items:center;gap:6px;font-weight:600;color:#bdc1c3cc;font-size:17px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon{color:#bdc1c3cc;font-size:16px;width:16px;height:16px;transition:transform .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.lightbulb{color:#dfca0e}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.power-on{color:#4caf50}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.power-off{color:#f44336}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content{background:#4d4f55}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:4px 0;background:#000}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:2px 0}}::ng-deep .layer-selector-body .item-list .group .item-list{padding:0;max-height:none}::ng-deep .layer-selector-body .item-list .group .item-list .layer-description{font-size:13px;padding:0 31px;color:#fffc}::ng-deep .layer-selector-body .item-list .group .item-list .item{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:6px;background:transparent;transition:all .2s ease;color:#fff;cursor:grab;font-size:14px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item{gap:4px;padding:6px 8px}}::ng-deep .layer-selector-body .item-list .group .item-list .item:last-child{border-bottom:none}::ng-deep .layer-selector-body .item-list .group .item-list .item:hover{background-color:transparent;transition:all .2s ease}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left{display:flex;align-items:center;gap:3px;flex:1;min-width:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left span{font-size:13px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;flex:1;min-width:0;color:#fff}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left span{font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center{display:flex;align-items:center;gap:2px;flex-shrink:0;justify-content:center;position:relative;left:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center .icon-label{font-size:11px;opacity:.8;margin-right:4px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center .icon-label{font-size:9px;margin-right:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right{display:flex;align-items:center;flex:1;justify-content:flex-end;min-width:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right input[type=range]{width:80px;height:4px;margin:0;flex-shrink:0}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right input[type=range]{width:60px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon{flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.drag-indicator{color:#fff;font-size:16px;width:16px;height:16px;cursor:grab}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.drag-indicator{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on{color:#4caf50;font-size:18px;width:18px;height:18px;cursor:pointer;padding:3px;border-radius:3px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on{font-size:16px;width:16px;height:16px;padding:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on:hover{background:#4caf5033}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off{color:#f44336;font-size:18px;width:18px;height:18px;cursor:pointer;padding:3px;border-radius:3px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off{font-size:16px;width:16px;height:16px;padding:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off:hover{background:#f4433633}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.zoom-off{color:#f44336;font-size:16px;width:16px;height:16px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.zoom-off{font-size:14px;width:14px;height:14px}}::ng-deep .mat-expansion-indicator svg{fill:#fff!important}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 15px #00000026;background:#fff;padding:10px 12px}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.item-list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.power-on{color:#4caf50}.power-off{color:#f44336}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar{width:12px}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}\n"] }]
+        }], propDecorators: { contentBody: [{
                 type: ViewChild,
                 args: ['layerSelectorBody', { static: false }]
             }], map: [{
@@ -618,6 +820,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
         }] });
 
 class CurrentItemsService {
+    constructor() {
+        const dt = new Date();
+        console.log("🚀 ~ CurrentItemsService ~ constructor ~ dt:", dt);
+    }
     _map;
     get map() { return this._map; }
     set map(value) {
@@ -625,25 +831,26 @@ class CurrentItemsService {
         this._mapSubject.next(value);
     }
     profile;
-    _mapSubject = new ReplaySubject();
+    _mapSubject = new ReplaySubject(1);
     map$ = this._mapSubject.asObservable();
+    gisKomponentSettings;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CurrentItemsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CurrentItemsService, providedIn: 'root' });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CurrentItemsService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CurrentItemsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
+            type: Injectable
+        }], ctorParameters: () => [] });
 
 class DrawLayerSourceService {
     _current = inject(CurrentItemsService);
     _features = new Subject;
     features$ = this._features.asObservable();
+    _selectedForHighlight = new Subject();
+    selectedForHighlight$ = this._selectedForHighlight.asObservable();
     source = new VectorSource();
     layer = new VectorLayer({
-        source: this.source
+        source: this.source,
+        zIndex: 999
     });
     _disabled = false;
     constructor() {
@@ -673,6 +880,16 @@ class DrawLayerSourceService {
             return newFeature;
         });
     }
+    get allCleanedFeatures() {
+        return this.allFeatures.map(f => {
+            f.unset('_centerpoint');
+            f.unset('_parentPolyId');
+            f.unset('LOCKED');
+            f.unset('STYLENAME');
+            f.unset('showlabelfrom');
+            return f;
+        });
+    }
     remove(id) {
         const feature = this.source.getFeatureById(id);
         if (feature) {
@@ -690,25 +907,26 @@ class DrawLayerSourceService {
         this._features.next(features);
         this._disabled = false;
     }
+    setFeaturesSelectedForHighlight(features) {
+        if (!Array.isArray(features)) {
+            this.setFeaturesSelectedForHighlight([features]);
+            return;
+        }
+        this._selectedForHighlight.next(features);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DrawLayerSourceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DrawLayerSourceService, providedIn: 'root' });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DrawLayerSourceService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DrawLayerSourceService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+            type: Injectable
         }], ctorParameters: () => [] });
 
 class FeatureHelperService {
     FEATURE_TYPE_ID = 'TypeId';
     FEATURE_LOCKED = 'LOCKED';
-    _idCounter = 0;
+    _idCounter = 1;
     isLocked = (feature) => feature.get(this.FEATURE_LOCKED) === 'true';
     lock(feature) { feature.set(this.FEATURE_LOCKED, 'true'); }
-    constructor() {
-        console.log('FeatureHelperService, constructor');
-    }
     setTypeId(feature, typeId) {
         feature.set(this.FEATURE_TYPE_ID, typeId);
     }
@@ -724,7 +942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class UndoRedoService {
     _drawlayerSourceService;
@@ -786,13 +1004,10 @@ class UndoRedoService {
         this._drawlayerSourceService.setFeatures(features);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UndoRedoService, deps: [{ token: DrawLayerSourceService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UndoRedoService, providedIn: 'root' });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UndoRedoService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: UndoRedoService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+            type: Injectable
         }], ctorParameters: () => [{ type: DrawLayerSourceService }] });
 
 class GeometrySplitService {
@@ -812,8 +1027,25 @@ class GeometrySplitService {
         const bufferedLine = buffer(lineGeoJSON, bufferMeters, { units: 'meters' });
         // Move back to 25832 
         bufferedLine.geometry.coordinates = bufferedLine.geometry.coordinates.map(a => a.map(c => proj4('EPSG:4326', 'EPSG:25832', c)));
-        const overlappingFeatures = vectorSource.getFeatures().filter(f => f.getGeometry()?.intersectsExtent(lineFeature.getGeometry()?.getExtent()));
-        overlappingFeatures.forEach((feature) => {
+        const overlappingFeatures = vectorSource.getFeatures().filter(f => !this._featureHelper.isLocked(f) && f.getGeometry()?.intersectsExtent(lineFeature.getGeometry()?.getExtent()));
+        overlappingFeatures.filter(f => f.getGeometry()?.getType() === 'LineString').forEach(feature => {
+            const linestringFeatureObject = this.geoJsonFormat.writeFeatureObject(feature, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:25832' });
+            const lineFeatureObject = this.geoJsonFormat.writeFeatureObject(lineFeature, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:25832' });
+            if (lineIntersect(lineFeatureObject, linestringFeatureObject)) {
+                const lines = lineSplit(linestringFeatureObject, lineFeatureObject);
+                const newFeatures = lines.features.map(lineSplitFeature => {
+                    const newFeature = feature.clone();
+                    this._featureHelper.setId(newFeature);
+                    const newGeometry = this.geoJsonFormat.readGeometry(lineSplitFeature.geometry, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:25832' });
+                    newFeature.setGeometry(newGeometry);
+                    return newFeature;
+                });
+                vectorSource.addFeatures(newFeatures);
+                vectorSource.removeFeature(feature);
+            }
+        });
+        // Handle polygons
+        overlappingFeatures.filter(f => f.getGeometry()?.getType() === 'Polygon').forEach((feature) => {
             const overlappingFeatureGeoJson = this.geoJsonFormat.writeFeatureObject(feature);
             const features = featureCollection([overlappingFeatureGeoJson, bufferedLine]);
             const clipped = difference(features);
@@ -858,61 +1090,103 @@ class ZoomService {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ZoomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ZoomService, providedIn: 'root' });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ZoomService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ZoomService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+            type: Injectable
         }] });
 
-class highlightService {
-    constructor() {
-        console.log('highlightservice, constructor');
-    }
+class HighlightService {
+    _wktFormat = new WKT();
     _zoomService = inject(ZoomService);
-    _style = new Style({
-        stroke: new Stroke({
-            color: '#0ff',
-            width: 3
-        }),
-        fill: new Fill({
-            color: 'rgba(0, 0, 255, 0.3)'
-        }),
-        image: new Circle({
-            fill: new Fill({ color: [175, 202, 10, 1] }),
-            stroke: new Stroke({ color: [40, 112, 133, 1], width: 2 }),
-            radius: 5
-        })
-    });
+    _current = inject(CurrentItemsService);
+    fadeStart = '_fadeStart';
+    fadeEnd = '_fadeEnd';
     _highlightSource = new Vector({ wrapX: false });
-    highlightLayer = new VectorLayer({
+    _highlightLayer = new VectorLayer({
         source: this._highlightSource,
-        style: this._style
+        zIndex: 999
     });
+    constructor() {
+        this._current.map$.subscribe({
+            next: map => {
+                map.addLayer(this._highlightLayer);
+            }
+        });
+        // To make the highlight fade out, I reset the style every 20 ms
+        interval(20).subscribe({
+            next: () => {
+                this._highlightSource.getFeatures().forEach(f => {
+                    const start = f.get(this.fadeStart);
+                    const end = f.get(this.fadeEnd);
+                    const now = performance.now();
+                    const t = Math.min(1, (now - start) / (end - start));
+                    // Adding and removing forces a redraw of the features
+                    if (t < 1) {
+                        const progress = 1 - easeOut(t);
+                        const newStyle = this._getFadedStyle(progress);
+                        const newFeature = f.clone();
+                        newFeature.setStyle(newStyle);
+                        this._highlightSource.addFeature(newFeature);
+                    }
+                    queueMicrotask(() => this._highlightSource.removeFeature(f));
+                });
+            }
+        });
+    }
     clear() {
         this._highlightSource.clear();
     }
     highlight(feature, zoomToFeatures = true) {
         if (!Array.isArray(feature)) {
-            this.highlight([feature]);
+            this.highlight([this._ensureFeature(feature)]);
             return;
         }
-        // If the feature has a style, it overwrites the style of the layer, so I create a new feature without properties or style.
-        this._highlightSource.addFeatures(feature.map(f => new Feature({ geometry: f.getGeometry() })));
+        const newFeatures = feature.map(f => {
+            const newFeature = new Feature({ geometry: f.getGeometry(), style: this._getFadedStyle(1) });
+            const now = performance.now();
+            newFeature.set(this.fadeStart, now);
+            const fadeMs = this._current.gisKomponentSettings?.highlightFadeTimerMs ?? 2000;
+            newFeature.set(this.fadeEnd, now + fadeMs); // set the style to fade (and be removed) to two seconds
+            return newFeature;
+        });
+        this._highlightSource.addFeatures(newFeatures);
         if (zoomToFeatures) {
             this._zoomService.zoomToFeatures(feature);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: highlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: highlightService, providedIn: 'root' });
+    _ensureFeature(feature) {
+        if (typeof feature === 'string') {
+            const newFeature = this._wktFormat.readFeature(feature, { dataProjection: 'EPSG:25832', featureProjection: 'EPSG:25832' });
+            return newFeature;
+        }
+        else {
+            return feature;
+        }
+    }
+    _getFadedStyle(fade) {
+        const newStyle = new Style({
+            stroke: new Stroke({
+                color: [0, 255, 255, fade],
+                width: 3
+            }),
+            fill: new Fill({
+                //color: 'rgba(0, 0, 255, 0.3)'
+                color: [0, 0, 255, fade]
+            }),
+            image: new Circle({
+                fill: new Fill({ color: [175, 202, 10, fade] }),
+                stroke: new Stroke({ color: [40, 112, 133, fade], width: 2 }),
+                radius: 5
+            })
+        });
+        return newStyle;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HighlightService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: highlightService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HighlightService, decorators: [{
+            type: Injectable
         }], ctorParameters: () => [] });
 
 class InteractionHelperService {
@@ -932,13 +1206,10 @@ class InteractionHelperService {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InteractionHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InteractionHelperService, providedIn: 'root' });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InteractionHelperService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InteractionHelperService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+            type: Injectable
         }] });
 
 class MergeFeaturesService {
@@ -950,6 +1221,9 @@ class MergeFeaturesService {
     formatter = new GeoJSON();
     _formatterOptions = { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:25832' };
     _selectFilter(f, typeId) {
+        if (this._featureHelper.isLocked(f)) {
+            return false;
+        }
         if (this._selectedMergeFeature) {
             const previusFeatureObject = this.formatter.writeFeatureObject(this._selectedMergeFeature, this._formatterOptions);
             const bufferedPreviouslySelected = buffer(previusFeatureObject, 5, { units: 'centimeters' });
@@ -994,13 +1268,10 @@ class MergeFeaturesService {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MergeFeaturesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MergeFeaturesService, providedIn: 'root' });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MergeFeaturesService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MergeFeaturesService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+            type: Injectable
         }] });
 
 class IconsConstants {
@@ -1019,30 +1290,20 @@ class IconsConstants {
     static lineStringIconBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAA1BJREFUSEutVmtIk2EYXb/EWBDZ7UdQP6L+WZkQEfVDCNR/gWAQqCAKQhJJUSK0KV7nZdbWdLk5pyjeFbcpzsuWSzfRTQfS5ty8X0rNOW0OiTh970cbbqYu5+Dd923wnfOe5znveb5TjL+fysrKWIfDwXK5XFd3d3dPu///n2tQUNBOcHDwHJPJ5CclJQk8z1ZVVcmLioqgVqthNBphs9mOtcizBEMoFJJlpgkqKiriBALBsQA/G+eQ2rKOiE+b+GqZ9sKQSqUQiUSlDC6XO6vRaPwm0E3MIqtzFTdKnQjhbCFeYkKUeAIZ8jUvjJGREXA4HDuDzWb/MplMhxKQ3RV0f0eEyIGQfAceS80QDfRCbWyhF7knhL6lZbFYYJCvg2peplrBk2o7mDkbiJJMI7tL6wF1g7uvd/jLqB1c8sL6J4FsZAFPa+04l7eNh/xFvO0YhdLQfiCwm4CQE4V7N7uP4CbXietcB9LaDWgdVhwJulcF2cR5zjZIj9wk+wgYbPgN2mtsRbWuD2WaAYgGVegZa6MbTlx1IgQyvQzPOhcQLt3E/fJvKJB8RPOQDBc5To9lA1KgMMiQLLPg3vtFhL/WIvHVS/SMNtB9I+YgKgIiICUpUXYjJrsS0WkFyOZloc/QhNK+AYQLtgIn8LXp3t/EKMSNASmQUyWKU8zRPXgknkdJnRD9Y020SRIkRsTX/wiMoMMgR2znMm619CMscwXJ6eno1TegXttFu+lB+ebJEVxhLyIyhY3bpbO0i5Ib1kGCMKASEQWR7esIbVbhMmsJ9xOLIVXPHH6S/Tlo1V+UiKmx4kLhFsLqdhHaogJRkJqeB9/Q9FsBiQ0SH8Qd14p3kCFbQ/f4PBKU21QPjiCg4vq3xWKhpfkqeKcYpg8OCT4SgMR67hjQT874R0CNylWdTuchEKhUdN4zM9cQLd7wnErfSDeYZ5CitONu7QZVIiqD3uR4lYiMz9zcXCeDmp0fampqaIIzOVsI5f2kJ9aYybthvgSTUzbIhifxnNOM2BeFyMkvgtls9iiUSCTg8/lqei7zeDx7Y2PjviYdNfynpqwwGMah1eqg1+thtVppDAJOjWJXW1vbWc+bhVgslpPxSTofyCIY1EvEEDXwLxHwP1I4uvOad9ZNAAAAAElFTkSuQmCC';
     static printBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAxBJREFUeNqslctrJFUUxn+3Xv2o6q6uHjs9rWjC6CIiAQMtAV0JYhYuRFy4ExcJwb/CletBMgxITIib+QcmuBhEXEQN6mQhOEPbY3AIjGmTVPUz/arKdZFJd6e7egxtvk3VPbfu99W557vnCp5iY2Pjo0ql8lmz2Zxut9txJkAkEjmJxWKPLcu6tby8fBtAAGxubm4dHR29l8/ncRwHy7Im4ader+N5HoVCAaCwsrIyK9bW1j7udrtfLy4ucpXY3t6m2+1+ofi+//nCwgJXjfn5eRqNxieKruu5eDx+5QKmaeK6rq0BqmEYvQmv1qDkVScivZ5OkrLMCzFtcHBYrvLl3W+RwbOJpJQACCEukgmVpfffJpNKhgv89fchMoBXXnuDROoaJ7UKhd9+6s036zVqZZduuw1INN3AtG3MZBohwJcB+wdH4wUGfhHkKVKe9kLV40Nq1Spy+i1kdg4Ule7xIyp/fke72SR9/XkEAjmcVRj/owe/Xhi3ThrUqmVO8yvIzCxRDVQFGs4NRO51Wj/epO55JJz0CJd2meI1Kh4yl4fMLPNZhRcSClJCpS3ZeZIlePld6n9skXCckbXKZQQ6rRZyavYsGx/u7QV8s+dTakg0RULmVU4DnyAYdYd27ohn4XxbJfDwuF+Xonf23tv1EColTHUYeiSK+Ofh+A8OH6BqGqqmjgoMezn0VNoO4sl9ROn3kA53gFK8h2U7g7n0t0hR/rsM0bhJIuVQ2/0K+eKbPZtyXETsfU8sqmPa6dC12mUyAEimn0OPRKmX7tN5/MPZQTMMLMfBtO1+vYZqesGmM7kMmlDxx/SKmGkRMy2kBIHsV/+cTBVM5zLjBTKpJJ9++A4H7mTNLnfNxjbjIwIyCAKhqmcOSMSipF7qd8QgCFBVtfccFxsHpdVqua7r9gLDC87Hg/GwWNj1mUwmm4qu63eKxeKVXzi7u7tEIpGfBcDq6qqXzWZTc3NzDF4+k6DT6bCzs0O5XG7NzMzkejZYX1/f2t/fX5RSav9HQAjhT01N/WIYxgdLS0ulfwcAKTQlaNRcuW0AAAAASUVORK5CYII=';
     static drawBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAilJREFUSImt1UlsTXEUx/FPJyFNTEHQEE2R1FzRRpSILSsrFlaEjSWJhQUrC7GzEjVUY1gQImJadEHEEBIRFWNoqVjowlAxhFqc/0uf29e+tvpLXu5993/u93/O/wyXoWs0ZqT7eSgfBqNfTcUD/MBZ/MHmkYLPwWtcwRP0oBt1OIPa/4EvxAc0Y3aC38Fb/BIRLcKU4cDr0YUjKEUJ1os8vEibPcMB/EbNUOAr8CnBSzJrDSKqDenag1MpkobBwFfhM5oKwPO1JcG70IZvuFwMvhpfcbQInPB2tzi2HlFZa7BXlHRBeDdOiDPP13zsQWOB956jXeTje/rNyhqtTJ6fzsDX4n6eh9MLbLBMlOzzZHcwa1AvEnrev925Du+xXJzt7QLwnLbhC1pTBFW5hXn4iGsYlYmoHQtSROewfYANYGJyojXHmpAg91CZZ1iHV1iS4M24mnEgq3JcEONkbO5hjTjXTXmGC/A0bVKGk2L2DAQvTXZtmJRdPIw3KZrFeCwapkzMmZZ0359KREm/VLgAVOIhbiUPapNHLTiub7lm4U1iEM4cwM5OMVuq86I6VgRemuAdee8V1EaR5Nw03K9vL2RVJqLrVGTAzcYjjE//d4mkH9L/mKgQuekU34kBVYW7IsE7RP0uxTsxLrKfxDG4lOBzi8FzahQVcFFvL1SLnFwXzQPjcGOwng9Gk3FTJHGrqLCOkYLnVIF9+CminDWS8HxN01sIg9Zflop8Ez+7Xi0AAAAASUVORK5CYII=';
+    static featureSearchIconBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAA59JREFUSEullm9MU1cYxi+fCNolRhQ+jkSjCRoTk0Y+NDMEMLEmbiMRNXMRTYDSCWE4smCMtPUPuoZYsjbFri0FUYONDqIwIm6jShw0ZULR9rYNLeg2zUTFoigJMc/ue/BWKi0U1+TJbU/vfX7nPe97z3uSuHefxsbGPeFwWDU9Pf2poGXieFJSEgdA/LngNTk5+XVKSsoDiURiKC4uNkZubmpq6qirq4PD4YDb7UYwGPwo0bPkYTKZSD4GMJvN+41G40cZ3nI/QPnVp8j56QW8gVCUR3NzMywWSz2n0+nGent7Ewb03x/D8V+eYF39FFK1kyi08ZBb7+Nox3iUh8vlglarneA0Gs0Mz/MLAmh2P9z4FzmWMFLPhLGt2QfL7V/hcF9lou8E/HBpVSoVOLVaHde8oecx8s9PQHLqOeS2EE529UVMRXPxutnwCBfv/BPlFRNw3fUX9l6cwMrTL/GZ4W9UXxtA9932uMYigOAU4dwo5gHW66awVhfG4fa7+NnZuajp3ChoEqu0L0E5EiHzAJwa80y7B+w4UaeBUqmEorQUikMV76Usg0KhYP+dPHsChY1eVlVRAKKIA7EANMsiRQlCYw+ZgqPRGhXG/hz24OvKKtjvXEOadipSsiyCRAD7lJW40vU7yo4ch+J7dZQqa2rRfvMW8ovL0D1wmeWNioMmnTAg0QgIUP/bbUiNk0sD7D/03aIR0BIRgJaUCoWqMeEICOAPhuD2+DHo4aM07A3AOXiP5UAEHLC5Udj6bAmA8uqYEZRU1UDMwVcVh3HD1YrWvi62fcjOvVgaIFYV5eXlIXt7NnJ25WJjbi4yVQ6sPjOJkstPQRth4ksUJwICpF1Pw4ZjG5D1RRa27v4SnV0d8Pv9S0yyAIgXAQG4cQ7L3cshPSiFLF+GBlMDvF7vbARzN7t4L9qebypi5kCMgAAkgmWqMpEtz4bT6YwA3gYCARbSh4CaTid7cQ4UlcSsormA9PZ0rDm7hi2VWqOGx+OZBQit8kl/f38EYOzpYfu9RDOOHdbn7K3UN5hQVPotisqroiQCMswZ2LJvC6Q7pTCZTcx8aGgItbW1U5zQO39saWlhgE9OTWKT/hXrWIP8KBsbGRkBz/vA++aLALICGbI+z4K8QI4Lly7AJ9wXCoVgs9lgMBgcrC/r9foJu90uGC3c2RY7DFD1UHKFQwSEVvymra1tReRkYbVaO4SEz9C6/R+Rh3CI+ENo+Olk/h8veXXcPn9a8AAAAABJRU5ErkJggg==';
+    static zoomIconBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNqsk+ERwiAMhdtOwAiOwAg4gYzACI7gJp4ToBPoBu0GukG7gYZeehcjgZxt7t4fCB8JvLSNHA5kQQY0gQbQo/kjAugJemeU1o9aUKokCiCuO+YXI2YOBWw9CPvFNpfEESHSu44kV2yfvpmrdOLYm/6E1bZB4iwV0LGFixJ4YxV/AelvvZTASdromo2jY+4/KM/RvCFnaGoZoxgAah1T+7W+ADXohCU3am9N/vIsx+NlfAyDBLUMSiuuzXYRWgP0wsUztBXAHn9yxzyaDH1FM+emar/GciFT5WmtjznUbTEcDiubYR8BBgD2fnjD/AKVHwAAAABJRU5ErkJggg==';
+    static cutIconBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gYDDB8MtOM2YAAAAdBJREFUSMfl1T2MTFEUB/DfjOcjviq7DRsRRCKiY+kVmleKwkchKgmrZWhEVqFhswqVRLIFiShOfBSi0C2xUSgVxGKzIxIJdmVHRnMneXmZtxijcpp33jnn/v/3no97+cdS62VRnuftsi0ian0hKIC/xzRWYGcVSb1H8DFsx14cwFTVyeo9ZGgatzGHDG9xpiq4F4IPeIcF/EAb+/pJsAuBw9iGdRjpSw0KADswiocpRcv6eYKT6bsBQ31t0zzPB9BIKRmMiGae57uxCQOpFpciYvK3CfI8X5XUlQmos3gYe3C1EN5Ohb+GRkR8zRYB3pgKebEiZLKgz+IxnuBKSuMzTGQV4Edws2SeT1MrFbaT/1c4iudo4TXu4SAmaiXg9WmQivIZH3ELZ5OtERGjaXK/YDO+4Xvyz2EGQ/VFwGdxB1sjYktENJL9DR4V4lbjFJZgKcaT/gnLswrwkYgYq7iHXhZbM9kbiaSNtcn9IiLms8L90pFjEXGjBH45qTO4EBFPu5CsSaZmRAx2/OUin+sC/gD70++JIvivhqxMMFxeXLp+D0XE3T8d+6zbDkrATRzH/b9+Mrs8GKdxHa2IaPVCkBXA62m3UzifumDBfy8/ARhwrGEODAGpAAAAAElFTkSuQmCC';
+    static copyIconBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gYDDCItkmJugAAAAHBJREFUSMftlEEOgDAIBIvp93jtPtCevBhT10m10bjXEmAWSilvV7iBmbk6cZICdeIUOIqppJCk2CfDnQ8lOEuyvWMC2uXlGTg+/wTzCVzV3nfvJXSLYwKXBhO4Wu4+18gi93QPX9MpFj0/A+zvZ9UAaFN03sNpI7gAAAAASUVORK5CYII=';
+    static copyWithBufferBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gYDDCQhzY6FLQAAAIJJREFUSMftVW0KwCAIreH1PK0HrF9BuOVHErIxIQqrl74nVsrbrXIHIjYiqisfIjYL8Dh/A9IuPQVgCVJ8ZPaN9TzPw5OlOQDpDOwASXsafduRujPggnGwVVX9GbgzuE63CogCaBSFNdA4B2vTMovHLF8Db5kea2ppFOVqEPo4PmMdpg1975VbWTEAAAAASUVORK5CYII=';
 }
 
 class PrintDrawLayerSourceService {
     _current = inject(CurrentItemsService);
-    // private _features = new Subject<Feature[]>;
-    // features$ = this._features.asObservable();
     source = new VectorSource();
     layer = new VectorLayer({
         source: this.source,
-        style: new Style({
-            stroke: new Stroke({
-                color: 'blue',
-                width: 2
-            }),
-            text: new Text({
-                text: 'MySpecialText',
-                font: '12px Calibri,sans-serif',
-                fill: new Fill({ color: '#000' }),
-                stroke: new Stroke({ color: '#fff', width: 3 }),
-                placement: 'line'
-            })
-        })
+        zIndex: 999
     });
-    // private _disabled = false;
     constructor() {
         this.layer.set('PRINTDRAWLAYER', 'true');
         this._initListener();
@@ -1050,25 +1311,594 @@ class PrintDrawLayerSourceService {
     _initListener() {
         this._current.map$.subscribe({
             next: map => {
-                console.log("🚀 ~ PrintDrawLayerSourceService ~ _initListener ~ map:", map);
                 map.addLayer(this.layer);
             }
         });
-        // this.source.on(['addfeature', 'changefeature', 'removefeature'], evt => {
-        //     if (this._disabled) { return; }
-        //     const features = this.source.getFeatures();
-        //     this._features.next(features);
-        // });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PrintDrawLayerSourceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PrintDrawLayerSourceService, providedIn: 'root' });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PrintDrawLayerSourceService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PrintDrawLayerSourceService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class CenterPointService {
+    _centerPointProperty = '_centerpoint';
+    _settingsHelper = inject(KomponentSettingsHelperService);
+    _current = inject(CurrentItemsService);
+    _drawLayerService = inject(DrawLayerSourceService);
+    _interactionHelper = inject(InteractionHelperService);
+    _geoJson = new GeoJSON();
+    _snackbar = inject(MatSnackBar);
+    _featureHelper = inject(FeatureHelperService);
+    handleFeatureDeleted(featureId) {
+        const centerFeature = this._drawLayerService.source.getFeatures().find(f => f.get('_parentPolyId') == featureId);
+        if (centerFeature) {
+            this._drawLayerService.remove(centerFeature.getId());
+        }
+    }
+    isCenterpoint(feature) {
+        return feature.get(this._centerPointProperty) === true;
+    }
+    setCenterPoint(style, withinPolygon, callBack) {
+        const style$ = this._settingsHelper.getStyle(style, this._current.profile.styleRepositoryWorkspace, this._current.profile.styleRepositoryGeoserver, 'Point');
+        combineLatest([style$, this._current.map$]).subscribe({
+            next: ([loadedStyle, map]) => {
+                let parentPolyId;
+                const centerDraw = new Draw({
+                    type: 'Point',
+                    source: this._drawLayerService.source,
+                    condition: evt => {
+                        if (!withinPolygon) {
+                            return true;
+                        }
+                        // The center needs to be inside a feature, so since turf is great for figuring out if something is in something, move the click and features to EPSG:4326
+                        const lonlat = transform(evt.coordinate, 'EPSG:25832', 'EPSG:4326');
+                        const pt = point(lonlat);
+                        const polygons = this._drawLayerService.source.getFeatures().filter(f => f.getGeometry() && f.getGeometry().getType() === 'Polygon'); // No point in checking linestrings and points
+                        const features = this._geoJson.writeFeaturesObject(polygons, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:25832' });
+                        const parentPoly = features.features.find(f => booleanPointInPolygon(pt, f));
+                        if (!parentPoly) {
+                            this._snackbar.open('Centerpunktet skal være inde i en flade', '', { duration: 3000 });
+                            return false;
+                        }
+                        // Save the parent polygon's id on the center. If the parent is deleted, the point will be deleted too                        
+                        parentPolyId = parentPoly.id;
+                        return !!parentPoly;
+                    },
+                    style: loadedStyle
+                });
+                this._interactionHelper.setAsTemp(centerDraw);
+                map.addInteraction(centerDraw);
+                centerDraw.on('drawend', evt => {
+                    const existing = this._drawLayerService.source.getFeatures().filter(f => f.get(this._centerPointProperty) === true);
+                    // There can only be ONE centerpoint, so remove previous if exists
+                    if (existing) {
+                        this._drawLayerService.source.removeFeatures(existing);
+                    }
+                    // Mark feature as centerpoint - this is to find it again an remove
+                    evt.feature.set(this._centerPointProperty, true);
+                    evt.feature.set('_parentPolyId', parentPolyId);
+                    this._featureHelper.setId(evt.feature);
+                    callBack();
+                });
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CenterPointService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CenterPointService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CenterPointService, decorators: [{
+            type: Injectable
+        }] });
+
+class ConfirmDialogComponent {
+    dialogRef;
+    data;
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    choose(choice) {
+        this.dialogRef.close(choice);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", ngImport: i0, template: "\n@if(data.title) {\n  <h2 mat-dialog-title>{{ data.title }}</h2>\n}\n<mat-dialog-content>\n  <p>{{ data.message }}</p>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <!-- Sekund\u00E6r handling -->\n  <button mat-button (click)=\"choose('secondary')\">\n    {{ data.secondaryText }}\n  </button>\n\n  <!-- Prim\u00E6r handling -->\n  <button mat-raised-button color=\"primary\" (click)=\"choose('primary')\">\n    {{ data.primaryText }}\n  </button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-confirm-dialog', imports: [CommonModule, MatDialogModule, MatButtonModule, MatDialogTitle, MatDialogContent, MatDialogActions], template: "\n@if(data.title) {\n  <h2 mat-dialog-title>{{ data.title }}</h2>\n}\n<mat-dialog-content>\n  <p>{{ data.message }}</p>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <!-- Sekund\u00E6r handling -->\n  <button mat-button (click)=\"choose('secondary')\">\n    {{ data.secondaryText }}\n  </button>\n\n  <!-- Prim\u00E6r handling -->\n  <button mat-raised-button color=\"primary\" (click)=\"choose('primary')\">\n    {{ data.primaryText }}\n  </button>\n</mat-dialog-actions>\n" }]
+        }], ctorParameters: () => [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+class ConfirmDialogService {
+    dialog;
+    constructor(dialog) {
+        this.dialog = dialog;
+    }
+    open(data) {
+        const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+            width: '400px',
+            disableClose: !!data.disableClose,
+            data
+        });
+        return dialogRef.afterClosed();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmDialogService, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$3.MatDialog }] });
+
+class OverlapService {
+    _drawLayerService = inject(DrawLayerSourceService);
+    _featureHelper = inject(FeatureHelperService);
+    _snackbar = inject(MatSnackBar);
+    _confirmService = inject(ConfirmDialogService);
+    _geoJsonFormat = new GeoJSON();
+    EPSILON = 0.1;
+    handleOverlaps(features) {
+        let newClippedFeature = null;
+        let unlockedFeaturesAsGeoJson = [];
+        let lockedClipped = false;
+        let anyOverlappingLockedFeatures = false;
+        features.forEach(feature => {
+            // Handle the locked.
+            const overlappingLockedFeatures = this._drawLayerService.source.getFeatures().filter(f => this._featureHelper.isLocked(f) && f.getGeometry()?.intersectsExtent(feature.getGeometry().getExtent()));
+            const clipped = this._handleLockedFeaturesOverlapping(overlappingLockedFeatures, feature);
+            if (!lockedClipped && clipped) {
+                lockedClipped = clipped;
+            }
+            //Handle the unlocked.
+            const overlappingUnlockedFeatures = this._drawLayerService.source.getFeatures().filter(f => !this._featureHelper.isLocked(f) && f.getGeometry()?.intersectsExtent(feature.getGeometry().getExtent()));
+            if (overlappingUnlockedFeatures.length > 0) {
+                anyOverlappingLockedFeatures = true;
+                let newFeatureGeoJson = this._geoJsonFormat.writeFeatureObject(feature);
+                const newFeatureArea = area(newFeatureGeoJson);
+                unlockedFeaturesAsGeoJson = overlappingUnlockedFeatures.map(f => this._geoJsonFormat.writeFeatureObject(f));
+                // If null the whole new feature is inside a the existing
+                newClippedFeature = difference(featureCollection([newFeatureGeoJson, ...unlockedFeaturesAsGeoJson]));
+                // if the new feature is completely inside one of the existing features, newClippedFeature will be null
+                const areaNewClippedFeature = newClippedFeature ? area(newClippedFeature) : 1;
+                if (Math.abs(newFeatureArea - areaNewClippedFeature) < this.EPSILON) {
+                    anyOverlappingLockedFeatures = false;
+                }
+            }
+        });
+        if (lockedClipped) {
+            this._snackbar.open("Der var overlap med låste flader, så den indtegnede flade er blevet beskåret", '', { duration: 3000 });
+        }
+        if (anyOverlappingLockedFeatures) {
+            return this._confirmService.open({
+                primaryText: 'Nye',
+                secondaryText: 'Eksisterende',
+                disableClose: true,
+                message: 'Den nye flade overlapper med eksisterende flade. Ønsker du at beskære de nye eller de eksisterende?',
+                title: 'Beskæring'
+            }).pipe(map(msg => {
+                return this._handleUnlockedFeaturesOverlapping(features, msg);
+            }));
+        }
+        else {
+            return of(features);
+        }
+    }
+    _handleUnlockedFeaturesOverlapping(features, msg) {
+        features.forEach(feature => {
+            const overlappingUnlockedFeatures = this._drawLayerService.source.getFeatures().filter(f => !this._featureHelper.isLocked(f) && f.getGeometry()?.intersectsExtent(feature.getGeometry().getExtent()));
+            if (overlappingUnlockedFeatures.length > 0) {
+                let newFeatureGeoJson = this._geoJsonFormat.writeFeatureObject(feature);
+                const unlockedFeaturesAsGeoJson = overlappingUnlockedFeatures.map(f => this._geoJsonFormat.writeFeatureObject(f));
+                const newClippedFeature = difference(featureCollection([newFeatureGeoJson, ...unlockedFeaturesAsGeoJson]));
+                if (msg === 'primary') {
+                    if (newClippedFeature) {
+                        const newGeometry = this._geoJsonFormat.readGeometry(newClippedFeature.geometry);
+                        feature.setGeometry(newGeometry);
+                    }
+                    else {
+                        feature.setGeometry(undefined);
+                    }
+                }
+                else {
+                    unlockedFeaturesAsGeoJson.forEach(f => {
+                        const featureArea = area(f.geometry);
+                        const fc = featureCollection([f, newFeatureGeoJson]);
+                        const featureDiff = difference(fc);
+                        if (featureDiff !== null) {
+                            const featureDiffArea = area(featureDiff.geometry);
+                            if (Math.abs(featureArea - featureDiffArea) > this.EPSILON) {
+                                const existingFeature = this._drawLayerService.source.getFeatureById(f.id);
+                                if (existingFeature) {
+                                    const newGeometry = this._geoJsonFormat.readGeometry(featureDiff?.geometry);
+                                    existingFeature.setGeometry(newGeometry);
+                                }
+                            }
+                        }
+                    });
+                }
+            }
+        });
+        features = features.filter(feature => feature.getGeometry() !== undefined);
+        return features;
+    }
+    handleOverlap(feature) {
+        // Handle the locked.
+        const overlappingLockedFeatures = this._drawLayerService.source.getFeatures().filter(f => this._featureHelper.isLocked(f) && f.getGeometry()?.intersectsExtent(feature.getGeometry().getExtent()));
+        const clipped = this._handleLockedFeaturesOverlapping(overlappingLockedFeatures, feature);
+        if (clipped) {
+            this._snackbar.open("Der var overlap med låste flader, så den indtegnede flade er blevet beskåret", '', { duration: 3000 });
+        }
+        // Handle the unlocked. 
+        const overlappingUnlockedFeatures = this._drawLayerService.source.getFeatures().filter(f => !this._featureHelper.isLocked(f) && f.getGeometry()?.intersectsExtent(feature.getGeometry().getExtent()));
+        if (overlappingUnlockedFeatures.length === 0) {
+            return of(feature);
+        }
+        else {
+            let newFeatureGeoJson = this._geoJsonFormat.writeFeatureObject(feature);
+            const newFeatureArea = area(newFeatureGeoJson);
+            const unlockedFeaturesAsGeoJson = overlappingUnlockedFeatures.map(f => this._geoJsonFormat.writeFeatureObject(f));
+            const newClippedFeature = difference(featureCollection([newFeatureGeoJson, ...unlockedFeaturesAsGeoJson]));
+            // if the new feature is completely inside one of the existing features, newClippedFeature will be null
+            const areaNewClippedFeature = newClippedFeature ? area(newClippedFeature) : 1;
+            if (Math.abs(newFeatureArea - areaNewClippedFeature) < this.EPSILON) {
+                return of(feature);
+            }
+            else {
+                return this._confirmService.open({
+                    primaryText: 'Nye',
+                    secondaryText: 'Eksisterende',
+                    disableClose: true,
+                    message: 'Den nye flade overlapper med eksisterende flade. Ønsker du at beskære de nye eller de eksisterende?',
+                    title: 'Beskæring'
+                }).pipe(map(msg => {
+                    if (msg === 'primary') {
+                        const newGeometry = this._geoJsonFormat.readGeometry(newClippedFeature.geometry);
+                        feature.setGeometry(newGeometry);
+                        return feature;
+                    }
+                    else {
+                        unlockedFeaturesAsGeoJson.forEach(f => {
+                            const featureArea = area(f.geometry);
+                            const fc = featureCollection([f, newFeatureGeoJson]);
+                            const featureDiff = difference(fc);
+                            const featureDiffArea = area(featureDiff.geometry);
+                            if (Math.abs(featureArea - featureDiffArea) > this.EPSILON) {
+                                const existingFeature = this._drawLayerService.source.getFeatureById(f.id);
+                                if (existingFeature) {
+                                    const newGeometry = this._geoJsonFormat.readGeometry(featureDiff?.geometry);
+                                    existingFeature.setGeometry(newGeometry);
+                                }
+                            }
+                        });
+                        return feature;
+                    }
+                }));
+            }
+        }
+    }
+    _handleLockedFeaturesOverlapping(overlappingFeatures, orgFeature) {
+        let newFeatureGeoJson = this._geoJsonFormat.writeFeatureObject(orgFeature);
+        const orgFeatureArea = area(newFeatureGeoJson);
+        if (overlappingFeatures.length > 0) {
+            const overlappingLockedFeaturesAsGeoJson = overlappingFeatures.map(f => this._geoJsonFormat.writeFeatureObject(f));
+            const features = featureCollection([newFeatureGeoJson, ...overlappingLockedFeaturesAsGeoJson]);
+            const clipped = difference(features);
+            if (clipped) {
+                const clippedArea = area(clipped.geometry);
+                // The overlap is done by checking extent. To make sure there's an actual change, I check if the areas are diffent
+                // but sometimes, the calculations of the same area can be a bit of. Like 0.01. To make sure that doesn't register as a change
+                // I check that there's actually a change.
+                const actuallyClipped = Math.abs(orgFeatureArea - clippedArea) > this.EPSILON;
+                if (actuallyClipped) {
+                    const geom = this._geoJsonFormat.readGeometry(clipped.geometry);
+                    orgFeature.setGeometry(geom);
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    splitByFeature(cutterFeature, remove = false) {
+        let result = [];
+        const cutterGeo = this._olToGeoJSON(cutterFeature.getGeometry());
+        const cutter = feature(cutterGeo);
+        const overlappingFeatures = this._drawLayerService.source.getFeatures().filter(f => f.getGeometry()?.intersectsExtent(cutterFeature.getGeometry().getExtent()));
+        overlappingFeatures.forEach(feature$1 => {
+            const geom = feature$1.getGeometry();
+            if (!geom)
+                return;
+            const geo = this._olToGeoJSON(geom);
+            const aTurfFeature = feature(geo);
+            if (!booleanIntersects(aTurfFeature, cutter)) {
+                return;
+            }
+            // Feature is fully inside the cutter, so remove the whole feature
+            if (remove && booleanWithin(aTurfFeature, cutter)) {
+                this._drawLayerService.source.removeFeature(feature$1);
+                return;
+            }
+            // Outside part(s)
+            const fc = featureCollection([aTurfFeature, cutter]);
+            const diff = difference(fc);
+            // Inside part(s)
+            const inter = intersect(fc);
+            // Add outside part(s)
+            if (diff)
+                result = result.concat(this._addTurfToResult(diff));
+            // Add inside part(s)
+            if (!remove && inter)
+                result = result.concat(this._addTurfToResult(inter));
+            // Remove the original overlapping feature (it was split into diff + inter)
+            if (result.length > 0)
+                this._drawLayerService.source.removeFeature(feature$1);
+        });
+        return of(result);
+    }
+    _addTurfToResult(aTurfFeature) {
+        const result = [];
+        if (aTurfFeature.geometry.type === 'MultiPolygon') {
+            aTurfFeature.geometry.coordinates.forEach((coords) => {
+                result.push(new Feature(this._geoJSONToOl({
+                    type: 'Polygon',
+                    coordinates: coords
+                })));
+            });
+        }
+        else {
+            result.push(new Feature(this._geoJSONToOl(aTurfFeature.geometry)));
+        }
+        return result;
+    }
+    _olToGeoJSON(geometry) {
+        const geoJson = new GeoJSON();
+        return geoJson.writeGeometryObject(geometry.clone().transform('EPSG:25832', 'EPSG:4326'));
+    }
+    _geoJSONToOl(geo) {
+        const geoJson = new GeoJSON();
+        return geoJson.readGeometry(geo).transform('EPSG:4326', 'EPSG:25832');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OverlapService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OverlapService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OverlapService, decorators: [{
+            type: Injectable
+        }] });
+
+class SearchProviderBase {
+    _http = inject(HttpClient);
+    wfsFormat = new WFS();
+    _serializer = new XMLSerializer();
+    search(searchValue, maxCount) {
+        const wftSearches = [];
+        const searchLayers = this.getSearchableLayers();
+        searchLayers.forEach(layer => {
+            const filter = this.getFilter(searchValue, layer); // like(layer.searchField!, `*${searchValue}*`, '*', '?', '/', false);
+            var searchFeature = this.wfsFormat.writeGetFeature({
+                featureTypes: [layer.layers.includes(':') ? layer.layers.split(':')[1] : ''],
+                outputFormat: 'application/json',
+                featureNS: '',
+                featurePrefix: '',
+                srsName: 'EPSG:25832',
+                maxFeatures: maxCount,
+                filter
+            });
+            wftSearches.push(this._http.post(layer.baseUrl.replace('wms', 'wfs'), this._serializer.serializeToString(searchFeature), { headers: { 'Content-Type': 'text/xml' }, responseType: 'json' }).pipe(map(r => {
+                const result = this.map(layer, r);
+                return result;
+            })));
+        });
+        return combineLatest(wftSearches);
+    }
+}
+class InfoSearchProvider extends SearchProviderBase {
+    _current = inject(CurrentItemsService);
+    getSearchableLayers() {
+        return this._current.profile.layerGroups.flatMap(lg => lg.layers).filter(f => f.enableShowInfo);
+    }
+    getFilter(searchValue, layer) {
+        const point = new Point(searchValue);
+        return intersects(layer.geometryField, point);
+    }
+    map(layer, f) {
+        const fieldsToExclude = new Set(layer.fieldsToExcludeFromInfoFromInfo.split(',').map(f => f.toLowerCase().trim()));
+        return {
+            layerName: layer.name,
+            values: f.features.map(f => this._mapFeature(f, fieldsToExclude))
+        };
+    }
+    _mapFeature(f, excludeSet) {
+        const result = {};
+        const props = f.properties || {};
+        for (const [key, value] of Object.entries(props)) {
+            if (excludeSet.has(key.toLowerCase()))
+                continue;
+            const kind = this._getValueKind(value);
+            result[key] = { kind, data: value, name: key };
+        }
+        return result;
+    }
+    _getValueKind(value) {
+        const imgTypes = ['.png', '.jpg', '.gif', '.jpeg'];
+        if (typeof value === 'string') {
+            if (value.startsWith('http://') || value.startsWith('https://')) {
+                if (imgTypes.some(ext => value.endsWith(ext))) {
+                    return 'img';
+                }
+                return 'url';
+            }
+        }
+        return 'data';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InfoSearchProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InfoSearchProvider });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: InfoSearchProvider, decorators: [{
+            type: Injectable
+        }] });
+
+class ShowInfoService {
+    _current = inject(CurrentItemsService);
+    _listenKey = null;
+    _active = false;
+    _infoSearchProvider = inject(InfoSearchProvider);
+    _features = new Subject();
+    features$ = this._features.asObservable();
+    stopShowInfo() {
+        this._features.next(null);
+    }
+    startShowInfo() {
+        if (this._active) {
+            return;
+        }
+        this._active = true;
+        this._current.map$.subscribe({
+            next: map => {
+                this._listenKey = this._listenKey ?? map.on('singleclick', evt => {
+                    this.disable();
+                    this._infoSearchProvider.search(evt.coordinate, 5).subscribe({
+                        next: r => {
+                            if (r.flatMap(l => l.values).length > 0) {
+                                this._features.next(r);
+                            }
+                            else {
+                                this._features.next(null);
+                            }
+                            this.disable();
+                        },
+                        error: err => {
+                            this.disable();
+                        }
+                    });
+                });
+            }
+        });
+    }
+    disable() {
+        if (!this._active) {
+            return;
+        }
+        if (this._listenKey) {
+            unByKey(this._listenKey);
+            this._listenKey = null;
+        }
+        this._active = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ShowInfoService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ShowInfoService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ShowInfoService, decorators: [{
+            type: Injectable
+        }] });
+
+class GeometryService {
+    config = inject(GISKOMPONENT_CONFIG);
+    _baseUrl = this.config.apiBaseUrl;
+    _http = inject(HttpClient);
+    validate(wkt) {
+        const url = `${this._baseUrl}/api/geometry/validate`;
+        return this._http.post(url, { wkt: wkt });
+    }
+    dmpValidate(wkt) {
+        const url = `${this._baseUrl}/api/geometry/dmpvalidate`;
+        return this._http.post(url, { wkt: wkt });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GeometryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GeometryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GeometryService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [] });
+        }] });
+
+class PrintHelperService {
+    setVisibiltyOnDOMElements(baseElement, visible) {
+        const elements = ['activeobjects', '.ol-zoom', 'map-toolbox', '.ol-mouse-position', '.layer-selector-body-wrapper'];
+        this._setVisibiltyOnDOMElements(baseElement, elements, visible);
+    }
+    getImgData(map, printFormat, printDimensions) {
+        const htmlElement = map.getViewport();
+        this.setVisibiltyOnDOMElements(htmlElement, false);
+        return new Promise((resolve, reject) => {
+            html2canvas(htmlElement, {
+                useCORS: true,
+            }).then(originalCanvas => {
+                if (printDimensions) {
+                    const srcW = originalCanvas.width;
+                    const srcH = originalCanvas.height;
+                    const scale = Math.min(printDimensions[0] / srcW, printDimensions[1] / srcH);
+                    const outW = Math.round(srcW * scale);
+                    const outH = Math.round(srcH * scale);
+                    // 3) Lav nyt canvas til nedskalering
+                    const scaledCanvas = document.createElement('canvas');
+                    scaledCanvas.width = outW;
+                    scaledCanvas.height = outH;
+                    const ctx = scaledCanvas.getContext('2d');
+                    ctx.imageSmoothingEnabled = true;
+                    ctx.imageSmoothingQuality = 'high';
+                    ctx.drawImage(originalCanvas, 0, 0, outW, outH);
+                    const dataUrl = scaledCanvas.toDataURL(printFormat);
+                    resolve(dataUrl);
+                }
+                else {
+                    const imgData = originalCanvas.toDataURL(printFormat);
+                    resolve(imgData);
+                }
+            });
+        });
+    }
+    _setVisibiltyOnDOMElements(baseElement, elements, visible) {
+        let visibilityValue = 'hidden';
+        if (visible) {
+            visibilityValue = 'visible';
+        }
+        elements.forEach(e => {
+            const activeobjects = baseElement.querySelector(e);
+            if (activeobjects) {
+                activeobjects.style.visibility = visibilityValue;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PrintHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PrintHelperService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PrintHelperService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class SearchProviderService {
+    _cancelSearch = new Subject();
+    maxSearchResults = 8;
+    searchProviders = [];
+    search(searchString, geometry) {
+        this._cancelSearch.next('');
+        let combinedSearch = new Observable();
+        this.searchProviders.forEach(searchProvider => {
+            const search = searchProvider
+                .search(searchString, geometry, this.maxSearchResults)
+                .pipe(takeUntil(this._cancelSearch.asObservable()))
+                .pipe(take(this.maxSearchResults));
+            combinedSearch = combinedSearch ? combinedSearch.pipe(mergeWith(search)) : search;
+        });
+        return combinedSearch;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchProviderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchProviderService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchProviderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
 
 class ToolboxComponent {
     // Inputs
@@ -1088,13 +1918,23 @@ class ToolboxComponent {
     _featureHelper = inject(FeatureHelperService);
     _undoRedo = inject(UndoRedoService);
     _geomSplitService = inject(GeometrySplitService);
-    _highlight = inject(highlightService);
+    _highlight = inject(HighlightService);
     _interactionHelper = inject(InteractionHelperService);
     _mergeService = inject(MergeFeaturesService);
+    _centerPointService = inject(CenterPointService);
+    _overlap = inject(OverlapService);
+    _zoomService = inject(ZoomService);
+    _showInfo = inject(ShowInfoService);
+    _geometryService = inject(GeometryService);
+    _printHelper = inject(PrintHelperService);
+    _layoutService = inject(LayoutService);
+    _searchService = inject(SearchProviderService);
     _POSITION_STORAGE_KEY = 'toolbox_position';
-    _current = inject(CurrentItemsService);
+    // private _current = inject(CurrentItemsService);
     _originalMapWidth = 0;
     _originalMapHeight = 0;
+    pointClickKey;
+    drawInteraction;
     mapWidth = 0;
     mapHeight = 0;
     format = "image/png";
@@ -1106,7 +1946,10 @@ class ToolboxComponent {
         [800, 600]
     ];
     printDrawLabel = "";
-    printDrawTool = "point";
+    bufferInMeters = 0;
+    printDrawTool = "Point";
+    filteredResults = [];
+    filteredResultsMetadata = [];
     selectedGeometrySetting = undefined;
     undoIconBase64 = IconsConstants.undoIconBase64;
     redoIconBase64 = IconsConstants.redoIconBase64;
@@ -1119,6 +1962,11 @@ class ToolboxComponent {
     removePointsIconBase64 = IconsConstants.removePointsIconBase64;
     wktIconBase64 = IconsConstants.wktIconBase64;
     pointIconBase64 = IconsConstants.pointIconBase64;
+    featureSearchIconBase64 = IconsConstants.featureSearchIconBase64;
+    objectSearchCopyIconBase64 = IconsConstants.copyIconBase64;
+    objectSearchCopyWithBufferIconBase64 = IconsConstants.copyWithBufferBase64;
+    objectSearchCutIconBase64 = IconsConstants.cutIconBase64;
+    objectSearchZoomIconBase64 = IconsConstants.zoomIconBase64;
     polygonIconBase64 = IconsConstants.polygonIconBase64;
     lineStringIconBase64 = IconsConstants.lineStringIconBase64;
     printBase64 = IconsConstants.printBase64;
@@ -1126,6 +1974,8 @@ class ToolboxComponent {
     dragPosition = { x: 0, y: 0 };
     snap = false;
     showInputWKT = false;
+    showGeometryTypes = false;
+    filteredGeometryTypeSettings = [];
     WKTString;
     activeMode = null;
     activateShowInputWKT() {
@@ -1136,8 +1986,186 @@ class ToolboxComponent {
         this._clearAllInteractions();
         this.showInputWKT = false;
     }
+    toggleFeatureSearch() {
+        if (this.activeMode != 'search-feature') {
+            this._clearAllInteractions();
+            this.activeMode = 'search-feature';
+            this.showGeometryTypes = true;
+            this._updateFilteredGeometryTypeSettings('Polygon');
+            this._enablePointSearch();
+        }
+        else {
+            this.activeMode = null;
+            this.showGeometryTypes = false;
+            this._disablePointSearch();
+            this.filteredResults = [];
+        }
+    }
+    togglePointSearch() {
+        if (this.activeMode != 'search-point') {
+            this._clearAllInteractions();
+            this._disablePolygonSearch();
+            this.activeMode = 'search-point';
+            this._enablePointSearch();
+        }
+        else {
+            this.activeMode = null;
+            this._disablePointSearch();
+        }
+    }
+    togglePolygonSearch() {
+        this._disablePointSearch();
+        if (this.activeMode != 'search-polygon') {
+            this.activeMode = 'search-polygon';
+            this.drawInteraction = new Draw({
+                source: new VectorSource(),
+                type: 'Polygon'
+            });
+            this.map.addInteraction(this.drawInteraction);
+            this.drawInteraction.on('drawend', (evt) => {
+                this._searchService.search(undefined, evt.feature.getGeometry())
+                    .subscribe({
+                    next: result => {
+                        this.filteredResults = result.filter(result => result.total > 0);
+                    }
+                });
+            });
+        }
+        else {
+            this._disablePolygonSearch();
+            this.activeMode = null;
+        }
+    }
+    _updateFilteredGeometryTypeSettings(geomType) {
+        this.filteredGeometryTypeSettings = this.settings.geometryTypeSettings.filter(setting => setting.availableGeometryTypes?.includes(geomType));
+        if (this.filteredGeometryTypeSettings.length === 1) {
+            this.selectedGeometrySetting = this.filteredGeometryTypeSettings[0];
+            this.settingsChanged();
+        }
+    }
+    _disablePolygonSearch() {
+        if (this.drawInteraction) {
+            this.map.removeInteraction(this.drawInteraction);
+            this.drawInteraction = undefined;
+        }
+        this.filteredResults = [];
+    }
+    _enablePointSearch() {
+        this.pointClickKey = this.map.on('singleclick', (evt) => {
+            const point = new Point$1(evt.coordinate);
+            this._searchService.search(undefined, point)
+                .subscribe({
+                next: result => {
+                    this.filteredResults = result.filter(result => result.total > 0);
+                }
+            });
+        });
+    }
+    _disablePointSearch() {
+        if (this.pointClickKey) {
+            unByKey(this.pointClickKey);
+            this.pointClickKey = undefined;
+        }
+        this.filteredResults = [];
+    }
+    splitBySearchedObject(item, event) {
+        event.stopPropagation();
+        if (!item.wkt) {
+            return;
+        }
+        if (!this.selectedGeometrySetting) {
+            return;
+        }
+        const wktFormat = new WKT();
+        let feature = wktFormat.readFeature(item.wkt, { featureProjection: 'EPSG:25832', dataProjection: 'EPSG:25832' });
+        const geomType = feature.getGeometry()?.getType();
+        if (!geomType) {
+            return;
+        }
+        combineLatest([this._settingsHelper.getStyle(this.selectedGeometrySetting?.style, this.profile.styleRepositoryWorkspace, this.profile.styleRepositoryGeoserver, geomType),
+            this._overlap.splitByFeature(feature)])
+            .subscribe({
+            next: ([style, features]) => {
+                this._undoRedo.enable();
+                features.forEach(feature => {
+                    this._featureHelper.setTypeId(feature, this.selectedGeometrySetting?.typeId || '');
+                    this._featureHelper.setId(feature);
+                    feature.setStyle(style);
+                    this._drawLayerService.source.addFeature(feature);
+                });
+            }
+        });
+    }
+    zoomSearchedObject(item, event) {
+        event.stopPropagation();
+        this.highlight(item.wkt, event);
+    }
+    toggleItemInfo(item, event) {
+        event.stopPropagation();
+        item.showMetadata = !item.showMetadata;
+    }
+    cutBySearchedObject(item, event) {
+        event.stopPropagation();
+        if (!item.wkt) {
+            return;
+        }
+        if (!this.selectedGeometrySetting) {
+            return;
+        }
+        const wktFormat = new WKT();
+        let feature = wktFormat.readFeature(item.wkt, { featureProjection: 'EPSG:25832', dataProjection: 'EPSG:25832' });
+        const geomType = feature.getGeometry()?.getType();
+        if (!geomType) {
+            return;
+        }
+        combineLatest([this._settingsHelper.getStyle(this.selectedGeometrySetting?.style, this.profile.styleRepositoryWorkspace, this.profile.styleRepositoryGeoserver, geomType),
+            this._overlap.splitByFeature(feature, true)])
+            .subscribe({
+            next: ([style, features]) => {
+                this._undoRedo.enable();
+                features.forEach(feature => {
+                    this._featureHelper.setTypeId(feature, this.selectedGeometrySetting?.typeId || '');
+                    this._featureHelper.setId(feature);
+                    feature.setStyle(style);
+                    this._drawLayerService.source.addFeature(feature);
+                });
+            }
+        });
+    }
+    _bufferGeometry(geometry, bufferMeters) {
+        const format = new GeoJSON();
+        const precisionModel = new PrecisionModel(); // floating precision
+        const geometryFactory = new GeometryFactory(precisionModel);
+        const reader = new GeoJSONReader(geometryFactory);
+        const writer = new GeoJSONWriter();
+        // Convert OL geometry → GeoJSON → JSTS
+        const geoJson = format.writeGeometryObject(geometry);
+        const jstsGeom = reader.read(geoJson);
+        // Create buffer
+        const bufferedJstsGeom = BufferOp.bufferOp(jstsGeom, bufferMeters);
+        // Convert back to OL geometry
+        const bufferedGeoJson = writer.write(bufferedJstsGeom);
+        return format.readGeometry(bufferedGeoJson);
+    }
     settingsChanged(evt) {
         this._clearAllInteractions();
+        setTimeout(() => {
+            switch (this.activeMode) {
+                case 'draw-point': {
+                    this._startDraw('Point');
+                    break;
+                }
+                case 'draw-polygon': {
+                    this._startDraw('Polygon');
+                    break;
+                }
+                case 'draw-linestring': {
+                    this._startDraw('LineString');
+                    break;
+                }
+                default: break;
+            }
+        }, 300);
     }
     undo() {
         this._undoRedo.undo();
@@ -1145,6 +2173,10 @@ class ToolboxComponent {
     redo() {
         this._undoRedo.redo();
     }
+    startShowInfo() {
+        this._clearAllInteractions();
+        this._showInfo.startShowInfo();
+    }
     onSnapChange() {
         if (this.snap) {
             this._addSnap();
@@ -1168,11 +2200,42 @@ class ToolboxComponent {
             }
             this._settingsHelper.getStyle(this.selectedGeometrySetting.style, this.profile.styleRepositoryWorkspace, this.profile.styleRepositoryGeoserver, featureType).subscribe({
                 next: featureStyle => {
-                    feature.setStyle(featureStyle);
-                    this._featureHelper.setTypeId(feature, this.selectedGeometrySetting?.typeId || '');
-                    this._highlight.highlight(feature);
-                    const extent = buffer$1(feature.getGeometry().getExtent(), 10);
-                    this.map.getView().fit(extent);
+                    if (featureType === 'Polygon') {
+                        this.handleFeatureValidation(feature).subscribe({
+                            next: (result) => {
+                                if (result) {
+                                    result.forEach(feature => {
+                                        feature.setStyle(featureStyle);
+                                        this._featureHelper.setTypeId(feature, this.selectedGeometrySetting?.typeId || '');
+                                        this._featureHelper.setId(feature);
+                                    });
+                                    this._overlap.handleOverlaps(result).pipe(filter(f => !!f)).subscribe({
+                                        next: f => {
+                                            if (f) {
+                                                f.forEach(feature => {
+                                                    this._drawLayerService.source.addFeature(feature);
+                                                });
+                                                this._zoomService.zoomToFeatures(f);
+                                                if (f.length > 1) {
+                                                    this._snackbar.open(`Den indtegnede flade var ikke gyldig, men rettet til ${f.length} nye flader`, '', { duration: 3000 });
+                                                }
+                                            }
+                                        }
+                                    });
+                                }
+                                else {
+                                    this._snackbar.open(`Validering af de tegnede flader resulterede i ingen flader`, '', { duration: 3000 });
+                                }
+                            }
+                        });
+                    }
+                    else {
+                        feature.setStyle(featureStyle);
+                        this._featureHelper.setTypeId(feature, this.selectedGeometrySetting?.typeId || '');
+                        this._featureHelper.setId(feature);
+                        this._zoomService.zoomToFeatures([feature]);
+                        this._drawLayerService.source.addFeature(feature);
+                    }
                 }
             });
         }
@@ -1184,6 +2247,14 @@ class ToolboxComponent {
         type: 'Polygon',
         source: this._drawLayerService.source
     });
+    setCenterPoint() {
+        this._clearAllInteractions();
+        this.activeMode = 'center-point';
+        this._centerPointService.setCenterPoint(this.settings.centerPoint.style, this.settings.centerPoint.withinPolygon, () => {
+            this.activeMode = null;
+            this._clearAllInteractions();
+        });
+    }
     _actionSource = new VectorSource();
     clipHole() {
         this._clearAllInteractions();
@@ -1194,7 +2265,7 @@ class ToolboxComponent {
         });
         this._interactionHelper.setAsTemp(clipHoleDraw);
         clipHoleDraw.on('drawend', evt => {
-            const overlappingFeatures = this._drawLayerService.source.getFeatures().filter(f => f.getGeometry()?.intersectsExtent(evt.feature.getGeometry().getExtent()));
+            const overlappingFeatures = this._drawLayerService.source.getFeatures().filter(f => !this._featureHelper.isLocked(f) && f.getGeometry()?.intersectsExtent(evt.feature.getGeometry().getExtent()));
             const geoJsonFormat = new GeoJSON();
             const holeGeoJson = geoJsonFormat.writeFeatureObject(evt.feature);
             overlappingFeatures.forEach(f => {
@@ -1243,14 +2314,52 @@ class ToolboxComponent {
         this.map.addInteraction(splitInteraction);
         this._addSnap();
     }
+    startDrawPointUrl(url) {
+        this._clearAllInteractions();
+        const style = new Style({
+            image: new Icon({
+                src: url,
+                scale: 1,
+                anchor: [0.5, 1],
+                anchorXUnits: 'fraction',
+                anchorYUnits: 'fraction'
+            })
+        });
+        const drawInteraction = new Draw({
+            type: 'Point',
+            source: new VectorSource(),
+            style
+        });
+        this.activeMode = 'draw-point';
+        this._updateFilteredGeometryTypeSettings('Point');
+        this.showGeometryTypes = true;
+        drawInteraction.on('drawend', evt => {
+            const feature = evt.feature.clone();
+            this._featureHelper.setId(feature);
+            this._featureHelper.setTypeId(feature, this.selectedGeometrySetting.typeId);
+            feature.setStyle(style);
+            this._drawLayerService.source.addFeature(feature);
+        });
+        this._interactionHelper.setAsTemp(drawInteraction);
+        this.map.addInteraction(drawInteraction);
+    }
     startDrawPoint() {
         this._startDraw('Point');
+        this.showGeometryTypes = false;
+        this._updateFilteredGeometryTypeSettings('Point');
+        this.showGeometryTypes = true;
     }
     startDrawLineString() {
         this._startDraw('LineString');
+        this.showGeometryTypes = false;
+        this._updateFilteredGeometryTypeSettings('LineString');
+        this.showGeometryTypes = true;
     }
     startDrawPolygon() {
         this._startDraw('Polygon');
+        this.showGeometryTypes = false;
+        this._updateFilteredGeometryTypeSettings('Polygon');
+        this.showGeometryTypes = true;
     }
     _deleteSelect;
     get deleteSelect() {
@@ -1264,13 +2373,14 @@ class ToolboxComponent {
         this._interactionHelper.setAsTemp(this.deleteSelect);
         this.deleteSelect.on('select', evt => {
             this._drawLayerService.source.removeFeatures(evt.selected);
+            evt.selected.forEach(f => this._centerPointService.handleFeatureDeleted(f.getId()));
         });
         return this._deleteSelect;
     }
-    _deleting = false;
+    // private _deleting: boolean = false;
     startDelete() {
         this._clearAllInteractions();
-        this._deleting = true;
+        // this._deleting = true;        
         this.activeMode = 'delete';
         this.map.addInteraction(this.deleteSelect);
         this._addSnap();
@@ -1280,38 +2390,143 @@ class ToolboxComponent {
         this.activeMode = 'edit-remove';
         const modifyRemove = new Modify({
             source: this._drawLayerService.source,
+            condition: evt => {
+                // first, get all features from the draw-layer
+                const feature = this.map.forEachFeatureAtPixel(evt.pixel, f => f, { layerFilter: l => l == this._drawLayerService.layer });
+                if (!feature) {
+                    return false;
+                }
+                return !this._featureHelper.isLocked(feature);
+            },
             // Make sure delete is allowed and other interactions are not.
             deleteCondition: always,
             insertVertexCondition: never,
-            snapToPointer: this.snap
+            snapToPointer: this.snap,
         });
         this._interactionHelper.setAsTemp(modifyRemove);
         this.map.addInteraction(modifyRemove);
         this._addSnap();
     }
+    highlight(wkt, event) {
+        event.stopPropagation();
+        this._highlight.highlight(wkt);
+    }
+    addToActiveObjectsList(item, event, withBuffer = false) {
+        event.stopPropagation();
+        if (!item.wkt) {
+            return;
+        }
+        if (!this.selectedGeometrySetting) {
+            return;
+        }
+        const wktFormat = new WKT();
+        let feature = wktFormat.readFeature(item.wkt, { featureProjection: 'EPSG:25832', dataProjection: 'EPSG:25832' });
+        if (withBuffer) {
+            const bufferedGeometry = this._bufferGeometry(feature.getGeometry(), this.bufferInMeters);
+            feature = new Feature$1({ geometry: bufferedGeometry });
+        }
+        const geomType = feature.getGeometry()?.getType();
+        if (!geomType) {
+            return;
+        }
+        combineLatest([this.handleFeatureValidation(feature), this._settingsHelper.getStyle(this.selectedGeometrySetting?.style, this.profile.styleRepositoryWorkspace, this.profile.styleRepositoryGeoserver, geomType)])
+            .subscribe({
+            next: ([validationResult, featureStyle]) => {
+                if (validationResult) {
+                    validationResult.forEach(feature => {
+                        feature.setStyle(featureStyle);
+                        this._featureHelper.setTypeId(feature, this.selectedGeometrySetting?.typeId || '');
+                        this._featureHelper.setId(feature);
+                    });
+                    this._overlap.handleOverlaps(validationResult).pipe(filter(f => !!f)).subscribe({
+                        next: f => {
+                            if (f) {
+                                f.forEach(feature => {
+                                    this._undoRedo.enable();
+                                    this._drawLayerService.source.addFeature(feature);
+                                });
+                                this._zoomService.zoomToFeatures(f);
+                                if (f.length > 1) {
+                                    this._snackbar.open(`Den indtegnede flade var ikke gyldig, men rettet til ${f.length} nye flader`, '', { duration: 3000 });
+                                }
+                            }
+                        }
+                    });
+                }
+                else {
+                    this._snackbar.open(`Validering af de tegnede flader resulterede i ingen flader`, '', { duration: 3000 });
+                }
+            }
+        });
+    }
     startEdit() {
         this._clearAllInteractions();
         this.activeMode = 'edit';
         const modify = new Modify({
             source: this._drawLayerService.source,
+            condition: evt => {
+                // first, get all features from the draw-layer
+                const feature = this.map.forEachFeatureAtPixel(evt.pixel, f => f, { layerFilter: l => l == this._drawLayerService.layer });
+                if (!feature) {
+                    return false;
+                }
+                return !this._featureHelper.isLocked(feature);
+            },
             // No delete
             deleteCondition: () => false,
             // Allow moving existing and add new points
-            condition: always,
+            // condition: always,            
             insertVertexCondition: always,
         });
         /* Modify fires changes to features a LOT, so to not flood the UndoRedo service, I disable until ending the modify
         and then force an update, to add the updated feature to the undo-service. */
         modify.on('modifystart', () => this._undoRedo.disable());
-        modify.on('modifyend', (evt) => { this._undoRedo.enable(); evt.features.forEach(f => f.set('updated', new Date().toISOString())); });
+        modify.on('modifyend', (evt) => {
+            this._undoRedo.enable();
+            evt.features.forEach(f => {
+                f.set('updated', new Date().toISOString());
+                const geom = f.getGeometry();
+                if (geom && geom.getType() === 'Polygon') {
+                    //START VALIDATING
+                    this.handleFeatureValidation(f).subscribe({
+                        next: (result) => {
+                            if (result && result.length > 0) {
+                                const featureStyle = f.getStyle();
+                                const featureTypeId = this._featureHelper.typeId(f);
+                                this._drawLayerService.source.removeFeature(f);
+                                result.forEach(feature => {
+                                    feature.setStyle(featureStyle);
+                                    this._featureHelper.setTypeId(feature, featureTypeId || '');
+                                    this._featureHelper.setId(feature);
+                                    this._drawLayerService.source.addFeature(feature);
+                                });
+                                this._overlap.handleOverlaps(result).pipe(filter(f => !!f)).subscribe({
+                                    next: f => {
+                                        if (f) {
+                                            f.forEach(feature => {
+                                                this._drawLayerService.source.addFeature(feature);
+                                            });
+                                            if (f.length > 1) {
+                                                this._snackbar.open(`Den indtegnede flade var ikke gyldig, men rettet til ${f.length} nye flader`, '', { duration: 3000 });
+                                            }
+                                        }
+                                    }
+                                });
+                            }
+                            else {
+                                this._snackbar.open(`Validering af de tegnede flader resulterede i ingen flader`, '', { duration: 3000 });
+                            }
+                        }
+                    });
+                    //END VALIDATING
+                }
+            });
+        });
         this._interactionHelper.setAsTemp(modify);
         this.map.addInteraction(modify);
     }
     _startDraw(geomType) {
         this._clearAllInteractions();
-        if (!this.selectedGeometrySetting) {
-            return;
-        }
         // Set the active mode after clearing
         if (geomType === 'Polygon')
             this.activeMode = 'draw-polygon';
@@ -1319,21 +2534,58 @@ class ToolboxComponent {
             this.activeMode = 'draw-linestring';
         else if (geomType === 'Point')
             this.activeMode = 'draw-point';
+        if (!this.selectedGeometrySetting) {
+            return;
+        }
         this._settingsHelper.getStyle(this.selectedGeometrySetting.style, this.profile.styleRepositoryWorkspace, this.profile.styleRepositoryGeoserver, geomType)
             .subscribe({
             next: style => {
                 const drawInteraction = new Draw({
                     type: geomType,
-                    source: this._drawLayerService.source,
+                    source: new VectorSource(),
                     style: style
                 });
+                this._undoRedo.disable();
                 drawInteraction.on('drawend', evt => {
-                    this._featureHelper.setTypeId(evt.feature, this.selectedGeometrySetting?.typeId || '');
-                    this._featureHelper.setId(evt.feature);
-                    evt.feature.setStyle(style);
+                    if (geomType === 'Polygon') {
+                        // Validate feature
+                        this.handleFeatureValidation(evt.feature).subscribe({
+                            next: (result) => {
+                                if (result) {
+                                    result.forEach(feature => {
+                                        this._featureHelper.setTypeId(feature, this.selectedGeometrySetting?.typeId || '');
+                                        this._featureHelper.setId(feature);
+                                        feature.setStyle(style);
+                                    });
+                                    this._overlap.handleOverlaps(result).pipe(filter(f => !!f)).subscribe({
+                                        next: f => {
+                                            if (f) {
+                                                f.forEach(feature => {
+                                                    this._undoRedo.enable();
+                                                    this._drawLayerService.source.addFeature(feature);
+                                                });
+                                                if (f.length > 1) {
+                                                    this._snackbar.open(`Den indtegnede flade var ikke gyldig, men rettet til ${f.length} nye flader`, '', { duration: 3000 });
+                                                }
+                                            }
+                                        }
+                                    });
+                                }
+                                else {
+                                    this._snackbar.open(`Validering af de tegnede flader resulterede i ingen flader`, '', { duration: 3000 });
+                                }
+                            }
+                        });
+                    }
+                    else {
+                        this._featureHelper.setTypeId(evt.feature, this.selectedGeometrySetting?.typeId || '');
+                        this._featureHelper.setId(evt.feature);
+                        evt.feature.setStyle(style);
+                        this._undoRedo.enable();
+                        this._drawLayerService.source.addFeature(evt.feature);
+                    }
                 });
                 this._interactionHelper.setAsTemp(drawInteraction);
-                // this._setDrawLayer()
                 this.map.addInteraction(drawInteraction);
                 this._addSnap();
                 this.map.getTargetElement().style.cursor = 'crosshair'; // Placeholder for now
@@ -1344,6 +2596,7 @@ class ToolboxComponent {
     _areaSource = new VectorSource();
     _areaLayer = new VectorLayer({
         source: this._areaSource,
+        zIndex: 999,
         style: (feature) => {
             const geom = feature.getGeometry();
             const area = getArea(geom);
@@ -1369,6 +2622,7 @@ class ToolboxComponent {
     _distanceLabelSource = new VectorSource();
     _distanceLabelLayer = new VectorLayer({
         source: this._distanceLabelSource,
+        zIndex: 999,
         style: (feature) => {
             return new Style({
                 text: new Text({
@@ -1383,6 +2637,7 @@ class ToolboxComponent {
     _distanceSource = new VectorSource();
     _distanceLayer = new VectorLayer({
         source: this._distanceSource,
+        zIndex: 999,
         style: (feature) => {
             const geom = feature.getGeometry();
             const length = getLength(geom);
@@ -1433,7 +2688,7 @@ class ToolboxComponent {
                     const mid = [(c1[0] + c2[0]) / 2, (c1[1] + c2[1]) / 2];
                     const formatted = `${length.toFixed(2)} m`;
                     const labelFeature = new Feature$1({
-                        geometry: new Point(mid),
+                        geometry: new Point$1(mid),
                         label: formatted
                     });
                     this._distanceLabelSource.addFeature(labelFeature);
@@ -1443,7 +2698,7 @@ class ToolboxComponent {
                     const endPoint = coords[coords.length - 1];
                     const formattedTotal = `${totalLength.toFixed(2)} m`;
                     const totalFeature = new Feature$1({
-                        geometry: new Point(endPoint),
+                        geometry: new Point$1(endPoint),
                         label: `Total: ${formattedTotal}`
                     });
                     this._distanceLabelSource.addFeature(totalFeature);
@@ -1455,8 +2710,8 @@ class ToolboxComponent {
         this._highlight.clear();
         this.stopMeasureArea();
         this.stopMeasureLength();
-        this._deleting = false;
         this._interactionHelper.clearTempFromMap();
+        this._showInfo.disable();
         this._undoRedo.enable();
     }
     ngOnInit() {
@@ -1470,6 +2725,11 @@ class ToolboxComponent {
         });
         this._loadPosition();
     }
+    ngOnChanges(changes) {
+        if (changes['profile'] && this.profile) {
+            this._loadPosition();
+        }
+    }
     onDragEnded(event) {
         this.dragPosition = {
             x: event.source.getFreeDragPosition().x,
@@ -1481,12 +2741,15 @@ class ToolboxComponent {
         try {
             const savedPosition = localStorage.getItem(this._POSITION_STORAGE_KEY);
             if (savedPosition) {
-                const position = JSON.parse(savedPosition);
-                this.dragPosition = position;
+                this.dragPosition = JSON.parse(savedPosition);
+            }
+            else if (this.profile) {
+                this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this._POSITION_STORAGE_KEY, this.profile.toolboxInitialPosition);
             }
         }
         catch (error) {
-            console.warn('Could not load toolbox position from localStorage:', error);
+            console.error('Error loading position from localStorage:', error);
+            this.dragPosition = { x: 0, y: 0 };
         }
     }
     _savePosition() {
@@ -1494,7 +2757,7 @@ class ToolboxComponent {
             localStorage.setItem(this._POSITION_STORAGE_KEY, JSON.stringify(this.dragPosition));
         }
         catch (error) {
-            console.warn('Could not save toolbox position to localStorage:', error);
+            console.error('Error saving position to localStorage:', error);
         }
     }
     startMergeFeatures() {
@@ -1540,6 +2803,9 @@ class ToolboxComponent {
             this.stopMeasureArea();
             this.stopMeasureLength();
         }
+        if (this.profile.toolboxInitialPosition.includes('højre')) {
+            this._layoutService.bringElementIntoViewIfNeeded('.toolbox-wrapper', -57, this.collapsed, this.map);
+        }
     }
     startMeasureArea() {
         if (this._active === 'Area') {
@@ -1614,7 +2880,7 @@ class ToolboxComponent {
     }
     doPrint() {
         let htmlElement = this.map.getViewport();
-        this._setVisibiltyOnDOMElements(htmlElement, false);
+        this._printHelper.setVisibiltyOnDOMElements(htmlElement, false);
         html2canvas(htmlElement, {
             useCORS: true,
         }).then(canvas => {
@@ -1630,66 +2896,124 @@ class ToolboxComponent {
             }
             link.download = download;
             link.click();
-            this._setVisibiltyOnDOMElements(htmlElement, true);
+            this._printHelper.setVisibiltyOnDOMElements(htmlElement, true);
         });
     }
-    _setVisibiltyOnDOMElements(baseElement, visible) {
-        let visibilityValue = 'hidden';
-        if (visible) {
-            visibilityValue = 'visible';
-        }
-        const activeobjects = baseElement.querySelector('activeobjects');
-        if (activeobjects) {
-            activeobjects.style.visibility = visibilityValue;
-        }
-        const zoom = baseElement.querySelector('.ol-zoom');
-        if (zoom) {
-            zoom.style.visibility = visibilityValue;
-        }
-        const mapToolbox = baseElement.querySelector('map-toolbox');
-        if (mapToolbox) {
-            mapToolbox.style.visibility = visibilityValue;
-        }
-        const mousePosition = baseElement.querySelector('.ol-mouse-position');
-        if (mousePosition) {
-            mousePosition.style.visibility = visibilityValue;
-        }
-        const layerSelector = baseElement.querySelector('.layer-selector-body-wrapper');
-        if (layerSelector) {
-            layerSelector.style.visibility = visibilityValue;
+    // private _setVisibiltyOnDOMElements(baseElement: HTMLElement, visible: boolean): void {
+    //     let visibilityValue = 'hidden';
+    //     if (visible) { visibilityValue = 'visible'; }
+    //     const activeobjects = baseElement.querySelector('activeobjects') as HTMLElement;
+    //     if (activeobjects) { activeobjects!.style.visibility = visibilityValue; }
+    //     const zoom = baseElement.querySelector('.ol-zoom') as HTMLElement;
+    //     if (zoom) { zoom!.style.visibility = visibilityValue; }
+    //     const mapToolbox = baseElement.querySelector('map-toolbox') as HTMLElement;
+    //     if (mapToolbox) { mapToolbox!.style.visibility = visibilityValue; }
+    //     const mousePosition = baseElement.querySelector('.ol-mouse-position') as HTMLElement;
+    //     if (mousePosition) { mousePosition!.style.visibility = visibilityValue; }
+    //     const layerSelector = baseElement.querySelector('.layer-selector-body-wrapper') as HTMLElement;
+    //     if (layerSelector) { layerSelector!.style.visibility = visibilityValue; }
+    // }
+    startSelectFeatureHighlight() {
+        if (this.activeMode === 'select-highlight') {
+            return;
         }
+        this._clearAllInteractions();
+        this.activeMode = 'select-highlight';
+        const highlightSelect = new Select$1({
+            layers: [this._drawLayerService.layer],
+            style: undefined,
+        });
+        this._interactionHelper.setAsTemp(highlightSelect);
+        highlightSelect.on('select', evt => {
+            this._drawLayerService.setFeaturesSelectedForHighlight(evt.selected);
+            this.activeMode = null;
+            this._clearAllInteractions();
+        });
+        this.map.addInteraction(highlightSelect);
     }
     startDrawMode() {
         if (this._active === 'PrintDraw') {
             this._active = 'No';
             this._removePrintDrawToolInteraction();
             this.activeMode = null;
+            this.printDrawTool = 'Point';
             return;
         }
         this._active = 'PrintDraw';
         this._clearAllInteractions();
         this._addPrintDrawToolInteraction();
         this.activeMode = null;
+        this.printDrawTool = 'Point';
     }
     handlePrintDrawToolChanged() {
         if (this.active === 'PrintDraw') {
-            this.printDrawTool;
-            console.log("🚀 ~ ToolboxComponent ~ handlePrintDrawToolChanged ~ this.printDrawTool:", this.printDrawTool);
+            this._removePrintDrawToolInteraction();
+            this._addPrintDrawToolInteraction();
         }
     }
+    handleClearPrintDrawFeatures() {
+        this._printDrawLayerService.source.clear();
+    }
     printDraw;
     _addPrintDrawToolInteraction() {
         if (this.active === 'PrintDraw') {
-            const features = this._printDrawLayerService.source.getFeatures();
-            console.log("🚀 ~ ToolboxComponent ~ _addPrintDrawToolInteraction ~ features:", features);
-            console.log("🚀 ~ ToolboxComponent ~ _addPrintDrawToolInteraction ~ this._current.map:", this._current.map?.getLayers());
-            this.printDraw = new Draw({
-                source: this._printDrawLayerService.source,
-                type: 'LineString',
-                style: this._printDrawStyle
-            });
+            switch (this.printDrawTool) {
+                case 'Arrow':
+                    this.printDraw = new Draw({
+                        source: this._printDrawLayerService.source,
+                        type: 'LineString',
+                    });
+                    break;
+                case 'Square':
+                    this.printDraw = new Draw({
+                        source: this._printDrawLayerService.source,
+                        type: 'Circle',
+                        geometryFunction: createRegularPolygon(4)
+                    });
+                    break;
+                case 'Rectangle':
+                    this.printDraw = new Draw({
+                        source: this._printDrawLayerService.source,
+                        type: 'Circle',
+                        geometryFunction: createBox()
+                    });
+                    break;
+                default:
+                    this.printDraw = new Draw({
+                        source: this._printDrawLayerService.source,
+                        type: this.printDrawTool,
+                    });
+                    break;
+            }
             this.printDraw.on('drawend', evt => {
-                evt.feature.setStyle(this._printDrawStyle);
+                const feature = evt.feature;
+                feature.set("printDrawLabel", this.printDrawLabel);
+                feature.set("printDrawTool", this.printDrawTool);
+                if (this.printDrawTool === 'Arrow') {
+                    feature.setStyle((feature) => {
+                        const styles = this._getDrawToolStyle(feature);
+                        const geom = feature.getGeometry();
+                        const rot = this._lastSegmentRotation(geom);
+                        const arrowHead = new RegularShape({
+                            points: 3,
+                            radius: 10,
+                            angle: Math.PI / 2,
+                            rotation: -rot,
+                            rotateWithView: true,
+                            stroke: new Stroke({ color: '#1f6feb', width: 3 })
+                        });
+                        const endCoord = geom.getCoordinateAt(1);
+                        const arrowEndStyle = new Style({
+                            image: arrowHead,
+                            geometry: () => new Point$1(endCoord)
+                        });
+                        styles.push(arrowEndStyle);
+                        return styles;
+                    });
+                }
+                else {
+                    feature.setStyle((feature) => this._getDrawToolStyle(feature));
+                }
             });
         }
         this.map.addInteraction(this.printDraw);
@@ -1698,55 +3022,57 @@ class ToolboxComponent {
     _removePrintDrawToolInteraction() {
         this.map.removeInteraction(this.printDraw);
     }
-    _printDrawStyle = new Style({
-        stroke: new Stroke({
-            color: 'blue',
-            width: 2
-        }),
-        text: new Text({
-            text: 'MySpecialText',
-            font: '12px Calibri,sans-serif',
-            fill: new Fill({ color: '#000' }),
-            stroke: new Stroke({ color: '#fff', width: 3 }),
-            placement: 'line'
-        })
-    });
-    styles = {
-        Point: {
-            'circle-radius': 5,
-            'circle-fill-color': 'red',
-            'stroke-color': 'yellow',
-            'stroke-width': 2,
-            'fill-color': 'blue',
-        },
-        LineString: {
-            'circle-radius': 5,
-            'circle-fill-color': 'red',
-            'stroke-color': 'yellow',
-            'stroke-width': 2,
-            'fill-color': 'blue',
-        },
-        Polygon: {
-            'circle-radius': 5,
-            'circle-fill-color': 'red',
-            'stroke-color': 'yellow',
-            'stroke-width': 2,
-            'fill-color': 'blue',
-        },
-        Circle: {
-            'circle-radius': 5,
-            'circle-fill-color': 'red',
-            'stroke-color': 'blue',
-            'stroke-width': 2,
-            'fill-color': 'yellow',
-        },
-    };
+    _lastSegmentRotation(lineString) {
+        const coords = lineString.getCoordinates();
+        if (!coords || coords.length < 2)
+            return 0;
+        const [x1, y1] = coords[coords.length - 2];
+        const [x2, y2] = coords[coords.length - 1];
+        return Math.atan2(y2 - y1, x2 - x1);
+    }
+    _getDrawToolStyle(feature) {
+        const textStyle = new Style({
+            text: new Text({
+                text: feature.get("printDrawLabel"),
+                font: '12px Calibri,sans-serif',
+                fill: new Fill({ color: '#000' }),
+                stroke: new Stroke({ color: '#fff', width: 3 }),
+                placement: 'point'
+            })
+        });
+        const lineStyle = new Style({
+            stroke: new Stroke({
+                color: '#1f6feb',
+                width: 3
+            })
+        });
+        const circleStyle = new Style({
+            image: new CircleStyle({
+                radius: 5,
+                fill: new Fill({ color: '#7da8e9ff' }), // teal fill
+                stroke: new Stroke({ color: '#1f6feb', width: 2 }),
+            })
+        });
+        let styles = [textStyle, lineStyle];
+        if (feature.get("printDrawTool") === 'Point') {
+            styles.push(circleStyle);
+        }
+        return styles;
+    }
+    handleFeatureValidation(feature) {
+        const wktFormat = new WKT();
+        const wkt = wktFormat.writeFeature(feature);
+        return this._geometryService.validate(wkt)
+            .pipe(map(result => {
+            return result.correctedGeometries?.map(wkt => wktFormat.readFeature(wkt));
+        }));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToolboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToolboxComponent, isStandalone: true, selector: "map-toolbox", inputs: { map: "map", showMeasureDistance: "showMeasureDistance", showMeasureArea: "showMeasureArea", collapsed: "collapsed", settings: "settings", profile: "profile", WKTInputEnabled: "WKTInputEnabled", deleteEnabled: "deleteEnabled" }, ngImport: i0, template: "<div class=\"toolbox-wrapper\" \n     cdkDrag \n     cdkDragBoundary=\".map-container\"\n     [cdkDragFreeDragPosition]=\"dragPosition\"\n     (cdkDragEnded)=\"onDragEnded($event)\">\n   <div class=\"drag-handle-toolbox\" cdkDragHandle>\n        <mat-icon>build_circle</mat-icon>\n        <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">{{ collapsed ? 'flip_to_front' : 'remove' }}</mat-icon>    </div>\n    <div class=\"toolbox-container\" [class.collapsed]=\"collapsed\">\n        @if(!collapsed) {\n            <div class=\"toolbox-content\">\n                @if (settings.geometryTypeSettings && settings.geometryTypeSettings.length) {\n                    <mat-select class=\"geometry-selector\" (selectionChange)=\"settingsChanged($event)\" [(ngModel)]=\"selectedGeometrySetting\" [compareWith]=\"compareGeometrySetting\">\n                        @for (setting of settings.geometryTypeSettings; track setting) {\n                            <mat-option [value]=\"setting\">{{setting.typeName}}</mat-option>\n                        }\n                    </mat-select>            \n                }\n                <div class=\"all-tools-container\">\n                    <div class=\"main-tools\">\n                        @if(!settings?.undoDisabled) {\n                            <img \n                                [src]=\"undoIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"undo()\" \n                                matTooltip=\"Fortryd\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Undo\">\n\n                            <img \n                                [src]=\"redoIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"redo()\" \n                                matTooltip=\"Gentag\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Redo\">\n                        }\n                        <mat-slide-toggle [(ngModel)]=\"snap\" (change)=\"onSnapChange()\">Snap</mat-slide-toggle>\n                        @if(settings.editEnabled) {\n                            <img \n                                [src]=\"editIconBase64\" \n                                [class.active]=\"activeMode === 'edit'\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startEdit()\" \n                                matTooltip=\"Rediger\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Rediger\">\n\n                            <img \n                                [src]=\"removePointsIconBase64\" \n                                [class.active]=\"activeMode === 'edit-remove'\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startEditRemovePoints()\" \n                                matTooltip=\"Fjern punkter\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Fjern punkter\">\n                        }\n                        @if(settings.cutHoleEnabled) {\n                            <img \n                                [src]=\"trimIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'clip-hole'\" \n                                (click)=\"clipHole()\" \n                                matTooltip=\"Klip hul\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Klip hul\">\n                        }\n                        @if(settings.splitEnabled) {\n                            <img \n                                [src]=\"splitIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'split'\"\n                                (click)=\"split()\" \n                                matTooltip=\"Sk\u00E6r over\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Sk\u00E6r over\">\n                        }\n                        @if(settings.changeTypeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                [class.active]=\"activeMode === 'change-type'\" \n                                (click)=\"startChangeType()\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Skift type\" \n                                matTooltipPosition=\"below\">\n                                find_replace\n                            </mat-icon>\n                        }\n                        @if(settings.mergeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                (click)=\"startMergeFeatures()\" \n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Saml flader\" \n                                [class.active]=\"activeMode === 'merge-features'\">\n                                merge\n                            </mat-icon>\n                        }\n                    </div>\n                    @if(selectedGeometrySetting && selectedGeometrySetting.availableGeometryTypes?.length) {\n                        <div class=\"geometry-tools\">\n                            @for(geomType of selectedGeometrySetting.availableGeometryTypes;track geomType) {\n                                @if(geomType === 'Polygon') {\n                                    <img \n                                        [src]=\"polygonIconBase64\" \n                                        [class.active]=\"activeMode === 'draw-polygon'\"\n                                        class=\"compact-icon primary custom-image-icon\"\n                                        (click)=\"startDrawPolygon()\" \n                                        matTooltip=\"Polygon\" \n                                        [matTooltipShowDelay]=\"200\"\n                                        [matTooltipHideDelay]=\"300\" \n                                        matTooltipClass=\"custom-tooltip\"\n                                        matTooltipPosition=\"below\"\n                                        alt=\"Polygon\">\n                                }\n                                @if(geomType === 'LineString') {\n                                    <img \n                                        [src]=\"lineStringIconBase64\" \n                                        [class.active]=\"activeMode === 'draw-linestring'\"\n                                        class=\"compact-icon primary custom-image-icon\"\n                                        (click)=\"startDrawLineString()\" \n                                        matTooltip=\"LineString\" \n                                        [matTooltipShowDelay]=\"200\"\n                                        [matTooltipHideDelay]=\"300\" \n                                        matTooltipClass=\"custom-tooltip\"\n                                        matTooltipPosition=\"below\"\n                                        alt=\"LineString\">\n                                }\n                                @if(geomType === 'Point') {\n                                    <img \n                                    [src]=\"pointIconBase64\" \n                                    [class.active]=\"activeMode === 'draw-point'\"\n                                    class=\"compact-icon primary custom-image-icon\"\n                                    (click)=\"startDrawPoint()\" \n                                    matTooltip=\"Punkter\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Punkter\">\n                                }\n                            }\n                            <img \n                                [src]=\"wktIconBase64\" \n                                class=\"compact-icon secondary custom-image-icon\"\n                                (click)=\"activateShowInputWKT()\" \n                                matTooltip=\"WKT\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"WKT\">\n                        </div>\n                    }\n                    <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n                    <div class=\"measurement-print-tools\">\n                        <div class=\"measurement-tools\">\n                            @if (deleteEnabled) {\n                                <img \n                                    [src]=\"deleteIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'delete'\"\n                                    (click)=\"startDelete()\" \n                                    matTooltip=\"Slet\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Slet\">\n                            }\n                            @if (showMeasureDistance) {\n                                <img \n                                    [src]=\"measureDistanceIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'measure-distance'\"\n                                    (click)=\"startMeasureLength()\" \n                                    matTooltip=\"M\u00E5le afstand\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"M\u00E5le afstand\">\n                            }\n                            @if(showMeasureArea) {\n                                <img \n                                    [src]=\"measureAreaIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'measure-area'\"\n                                    (click)=\"startMeasureArea()\" \n                                    matTooltip=\"M\u00E5le areal\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"M\u00E5le areal\">\n                            }\n                        </div>\n                        @if(profile.showPrint) {\n                            <div class=\"tool-separator print-separator\"></div>\n                            <div class=\"print-tools\">\n                                <img \n                                    [src]=\"printBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"active === 'Print'\"\n                                    (click)=\"startPrintMode()\" \n                                    matTooltip=\"Udskriv\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Udskriv\">\n                                <!-- <img \n                                    [src]=\"drawBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"active === 'Draw'\"\n                                    (click)=\"startDrawMode()\" \n                                    matTooltip=\"Tegn\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Tegn\"> -->\n                            </div>\n                        }\n                    </div>\n                </div>\n                @if(showInputWKT) {\n                    <div class=\"wkt-section\">\n                        <input class=\"compact-input\" [(ngModel)]=\"WKTString\">\n                            <div class=\"wkt-actions\">\n                                <button class=\"compact-button primary\" (click)=\"ReadWKT()\">Indl\u00E6s WKT</button>\n                                <button class=\"compact-button\" (click)=\"cancelWKT()\">Annuller</button>\n                            </div>\n                    </div>\n                }\n                @if(profile.showPrint) {\n                    @if(active === \"Print\") {\n                        <div class=\"print-config\">\n                            <img \n                                [src]=\"printBase64\" \n                                class=\"compact-icon\"\n                                (click)=\"doPrint()\" \n                                alt=\"Udskriv\"> \n                                <span class=\"icon-separator\">i</span>\n                            <select id=\"formatSelector\" [(ngModel)]=\"format\">\n                                <option value=\"image/png\" selected>.PNG</option>\n                                <option value=\"image/jpeg\">.JPG</option>\n                            </select>\n                            <select id=\"dimensionSelector\" [(ngModel)]=\"dimId\" (change)=\"handleDimensionSelected()\">\n                                <option value=\"99\" selected></option>\n                                <option value=\"0\">1920 X 1080</option>\n                                <option value=\"1\">1680 X 1050</option>\n                                <option value=\"2\">1280 X 800</option>\n                                <option value=\"3\">800 X 600</option>\n                            </select>\n                            <input type=\"text\" [(ngModel)]=\"mapWidth\"/> \n                            <span class=\"icon-separator\">x</span>\n                            <input type=\"text\" [(ngModel)]=\"mapHeight\"/>\n                            <button (click)=\"setNewMapDimensions()\">V\u00E6lg</button>\n                        </div>\n                    }\n                    @if(active === \"PrintDraw\") {\n                        <div class=\"print-draw-config\">\n                            <span class=\"icon-separator\">Label</span>\n                            <input type=\"text\" [(ngModel)]=\"printDrawLabel\"/>\n                            <select id=\"drawToolSelector\" [(ngModel)]=\"printDrawTool\" (change)=\"handlePrintDrawToolChanged()\">\n                                <option value=\"arrow\" selected>Pil</option>\n                                <option value=\"point\">Punkt</option>\n                                <option value=\"line\">Linje</option>\n                                <option value=\"polygon\">Polygon</option>\n                                <option value=\"cirkel\">Cirkel</option>\n                                <option value=\"square\">Kvadrat</option>\n                                <option value=\"rectangle\">Firkant</option>\n                            </select>\n                            <button>Ryd</button>\n                        </div>\n                    }\n                }\n            </div>\n        }\n    </div>\n</div>\n", styles: [".toolbox-wrapper{position:absolute;left:1em;top:31.5em;z-index:1000;cursor:grab;max-width:95vw}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}.drag-handle-toolbox{display:flex;align-items:center;justify-content:space-between;background:color-mix(in srgb,#000 60%,transparent);padding:2px 10px;cursor:grab;gap:8px}.drag-handle-toolbox mat-icon{color:#fff;font-size:18px;width:18px;height:18px}.drag-handle-toolbox mat-icon:first-child{flex:1;text-align:center}.toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.toggle-icon:hover{color:#fff;background:#ffffff26}.toggle-icon:active{background:#ffffff40}:host{position:relative;display:flex;justify-content:center}:host.expanded{width:auto;min-width:320px;padding:12px}.toolbox-container{display:flex;flex-direction:column;align-items:center;width:100%;gap:10px;background:color-mix(in srgb,#000 60%,transparent);box-shadow:#0000004d 0 1px 4px -1px;padding:10px;width:auto;min-width:32px;transition:all .3s ease;cursor:default}.toolbox-container.collapsed{display:none}.toolbox-content{display:flex;flex-direction:column;width:100%;gap:3px;animation:slideDown .3s cubic-bezier(.4,0,.2,1)}.all-tools-container{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;width:100%;justify-content:flex-start;overflow-x:hidden}.all-tools-container::-webkit-scrollbar{height:4px}.all-tools-container::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}.main-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}.main-tools ::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:12px;font-weight:500;color:#fff}.geometry-selector{width:100%}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:6px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:color-mix(in srgb,#000 60%,transparent);transition:all .2s ease}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:color-mix(in srgb,#000 70%,transparent);border-color:#667eea;box-shadow:0 4px 12px #0003}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.geometry-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px;transform:scale(.85)}.geometry-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.geometry-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-select-panel{min-width:fit-content!important;max-width:320px!important;background:color-mix(in srgb,#000 100%,transparent)!important;border:none!important;border-radius:8px!important;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014!important;margin-top:6px!important;padding:4px 0!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:14px!important;min-height:36px!important;padding:8px 14px!important;transition:all .15s ease!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover:not(.mat-mdc-option-disabled){background:#444849!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-active{background:color-mix(in srgb,#000 60%,transparent)!important;color:#fff!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;font-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.geometry-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap;background:color-mix(in srgb,#000 20%,transparent);border-radius:8px;padding:4px 8px;border:1px solid rgba(255,255,255,.1)}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}.measurement-tools .compact-icon,.print-tools .compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.measurement-tools .compact-icon.custom-image-icon,.print-tools .compact-icon.custom-image-icon{padding:4px;background:none;border:1px solid rgba(255,255,255,.2)}.measurement-tools .compact-icon.custom-image-icon img,.print-tools .compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.measurement-tools .compact-icon.custom-image-icon.active,.print-tools .compact-icon.custom-image-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985);border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.measurement-tools .compact-icon.custom-image-icon.active img,.print-tools .compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.measurement-tools .compact-icon.custom-image-icon.active:hover,.print-tools .compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active),.print-tools .compact-icon.custom-image-icon:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e94d}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active) img,.print-tools .compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.print-tools .compact-icon{background:linear-gradient(147.38deg,#4f46e5,#3730a3);color:#fff;border:1px solid rgba(255,255,255,.2)}.print-tools .compact-icon.print-icon{background:linear-gradient(147.38deg,#10b981,#047857)}.print-tools .compact-icon.draw-icon{background:linear-gradient(147.38deg,#f59e0b,#d97706)}.print-tools .compact-icon.active{background:linear-gradient(147.38deg,#ef4444,#dc2626);box-shadow:0 4px 12px #ef444466;border-color:transparent;transform:scale(1.05)}.print-tools .compact-icon.active:hover{box-shadow:0 6px 20px #ef444480;transform:scale(1.08)}.print-tools .compact-icon:hover:not(.active){box-shadow:0 4px 12px #0000004d;opacity:.9}.tool-separator{width:1px;height:24px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.3),transparent);margin:0 4px}.tool-separator.print-separator{height:28px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent)}.compact-icon{cursor:pointer;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:color-mix(in srgb,#000 40%,transparent);border:1px solid rgba(255,255,255,.2);box-shadow:0 1px 2px #0000001a;flex-shrink:0}.compact-icon.active{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;box-shadow:0 8px 25px #667eea4d;transform:scale(1.05)}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66;transform:scale(1.08)}.compact-icon:hover:not(.active){color:#fff;background:color-mix(in srgb,#000 70%,transparent);border-color:#667eea;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:0;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:transform .2s ease}.compact-icon.custom-image-icon.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1);transform:scale(1.1)}.compact-icon.custom-image-icon:hover:not(.active) img{transform:scale(1.05)}.wkt-section{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:6px;background:color-mix(in srgb,#000 60%,transparent);color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;letter-spacing:.4px;min-height:32px;display:flex;align-items:center;justify-content:center;flex:1;box-shadow:0 1px 2px #0000000d}.compact-button.primary.active{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 8px 25px #667eea4d;color:#fff}.compact-button.primary.active:hover{box-shadow:0 12px 35px #667eea66}.compact-button.secondary{background:color-mix(in srgb,#000 20%,transparent);color:#fff}.compact-button.secondary:hover{background:color-mix(in srgb,#5a6268 60%,transparent)}.compact-button:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);color:#fff}.compact-input{padding:8px 10px;border:none;border-radius:6px;font-size:13px;transition:all .2s ease;background:color-mix(in srgb,#000 60%,transparent);color:#fff}.compact-input:focus{outline:none;border-color:#1976d2;background:color-mix(in srgb,#000 70%,transparent);box-shadow:0 0 0 3px #1976d233}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:color-mix(in srgb,#000 40%,transparent);border-radius:8px;border:1px solid rgba(255,255,255,.1);animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:color-mix(in srgb,#000 60%,transparent);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:6px;font-size:12px;height:32px;min-height:32px;padding:0 10px}.print-config select:focus,.print-config input:focus,.print-draw-config select:focus,.print-draw-config input:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 2px #0ea5e933}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:color-mix(in srgb,#000 98%,transparent)!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:linear-gradient(147.38deg,#10b981,#047857);color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s ease}.print-config button:hover,.print-draw-config button:hover{box-shadow:0 4px 12px #10b9814d}.print-config .icon-separator,.print-draw-config .icon-separator{color:#70706f}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%{box-shadow:0 0 #667eeab3}70%{box-shadow:0 0 0 6px #667eea00}to{box-shadow:0 0 #667eea00}}.compact-icon.active{animation:pulse 2s infinite}@media (max-width: 768px){.toolbox-wrapper{left:.5em;top:8em;max-width:calc(100vw - 2.5em)}.drag-handle-toolbox{padding:3px 6px;gap:6px}.drag-handle-toolbox mat-icon{font-size:16px;width:16px;height:16px}.toggle-icon{font-size:16px!important;width:16px!important;height:16px!important}.toolbox-container{padding:8px;min-width:28px;max-width:calc(100vw - 3em)}:host{padding:8px;min-width:32px}:host.expanded{min-width:280px;padding:10px}.all-tools-container{flex-wrap:wrap;gap:6px;max-height:50vh;overflow-y:auto;padding:0;-ms-overflow-style:none;scrollbar-width:none}.all-tools-container::-webkit-scrollbar{display:none}.main-tools,.geometry-tools,.measurement-print-tools,.print-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.compact-icon{width:28px;height:28px;flex-shrink:0}.measurement-print-tools{padding:3px 6px}.geometry-selector{width:100%;margin-bottom:8px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:28px;min-height:28px;padding:0 8px;font-size:12px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:12px}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 2em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config,.print-draw-config{flex-direction:column;align-items:stretch;gap:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:11px;padding:4px 8px;height:28px;min-height:28px}.print-config input,.print-draw-config input{width:50px}.print-config button,.print-draw-config button{padding:4px 8px;font-size:11px;height:28px}.wkt-section .compact-input{font-size:12px;padding:6px 8px}.wkt-section .compact-button{font-size:11px;padding:5px 8px;min-height:28px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:11px!important}}@media (max-width: 480px){.toolbox-wrapper{left:.25em;top:6em;transform-origin:left top;max-width:calc(100vw - .5em)}.drag-handle-toolbox{padding:2px 4px;gap:4px}.drag-handle-toolbox mat-icon{font-size:14px;width:14px;height:14px}.toggle-icon{font-size:14px!important;width:14px!important;height:14px!important}.toolbox-container{padding:6px;min-width:24px}.toolbox-content{gap:8px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;letter-spacing:.2px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle{transform:scale(.9)}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i8.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToolboxComponent, isStandalone: true, selector: "map-toolbox", inputs: { map: "map", showMeasureDistance: "showMeasureDistance", showMeasureArea: "showMeasureArea", collapsed: "collapsed", settings: "settings", profile: "profile", WKTInputEnabled: "WKTInputEnabled", deleteEnabled: "deleteEnabled" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toolbox-wrapper\" \n     cdkDrag \n     cdkDragBoundary=\".map-container\"\n     [cdkDragFreeDragPosition]=\"dragPosition\"\n     (cdkDragEnded)=\"onDragEnded($event)\">\n     <div class=\"drag-handle-toolbox\" cdkDragHandle>\n        <mat-icon class=\"left-icon\">handyman</mat-icon>\n    \n        <div class=\"right-icons\">\n            <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n            <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n                {{ collapsed ? 'flip_to_front' : 'remove' }}\n            </mat-icon>\n        </div>\n    </div>\n    \n    <div class=\"toolbox-container\" [class.collapsed]=\"collapsed\">\n        @if(!collapsed) {\n            <div class=\"toolbox-content\">\n                @if (showGeometryTypes && filteredGeometryTypeSettings.length > 0) {\n                    <mat-select class=\"geometry-selector\" (selectionChange)=\"settingsChanged($event)\" [(ngModel)]=\"selectedGeometrySetting\" [compareWith]=\"compareGeometrySetting\">\n                        @for (setting of filteredGeometryTypeSettings; track setting) {\n                            <mat-option [value]=\"setting\">{{setting.typeName}}</mat-option>\n                        }\n                    </mat-select>            \n                }\n                <div class=\"all-tools-container\">\n                    <div class=\"main-tools\">\n                        @if(!settings?.undoDisabled) {\n                            <img \n                                [src]=\"undoIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"undo()\" \n                                matTooltip=\"Fortryd\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Undo\">\n\n                            <img \n                                [src]=\"redoIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"redo()\" \n                                matTooltip=\"Gendan\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Redo\">\n                        }\n                        <mat-icon \n                            class=\"compact-icon\"                             \n                            (click)=\"startShowInfo()\"\n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"Vis info\" \n                            matTooltipPosition=\"below\">\n                            info\n                        </mat-icon>\n                        <mat-icon \n                            class=\"compact-icon\" \n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"S\u00F8g punkt\" \n                            matTooltipPosition=\"below\"\n                            (click)=\"togglePointSearch()\">adjust\n                        </mat-icon>\n                        <mat-icon \n                            class=\"compact-icon\" \n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"S\u00F8g polygon\" \n                            matTooltipPosition=\"below\"\n                            (click)=\"togglePolygonSearch()\">crop_din\n                        </mat-icon>\n                        <mat-icon\n                            class=\"compact-icon\"                             \n                            (click)=\"startSelectFeatureHighlight()\"\n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"Fremh\u00E6v\" \n                            matTooltipPosition=\"below\"\n                        >star</mat-icon> // TODO: set correct icon for this\n\n                        <mat-slide-toggle [(ngModel)]=\"snap\" (change)=\"onSnapChange()\">Snap</mat-slide-toggle>\n                        @if(settings.editEnabled) {\n                            <img \n                                [src]=\"editIconBase64\" \n                                [class.active]=\"activeMode === 'edit'\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startEdit()\" \n                                matTooltip=\"Rediger\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Rediger\">\n\n                            <img \n                                [src]=\"removePointsIconBase64\" \n                                [class.active]=\"activeMode === 'edit-remove'\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startEditRemovePoints()\" \n                                matTooltip=\"Fjern punkter\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Fjern punkter\">\n                        }\n                        @if(settings.cutHoleEnabled) {\n                            <img \n                                [src]=\"trimIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'clip-hole'\" \n                                (click)=\"clipHole()\" \n                                matTooltip=\"Klip hul\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Klip hul\">\n                        }\n                        @if(settings.splitEnabled) {\n                            <img \n                                [src]=\"splitIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'split'\"\n                                (click)=\"split()\" \n                                matTooltip=\"Sk\u00E6r over\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Sk\u00E6r over\">\n                        }\n                        @if(settings.changeTypeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                [class.active]=\"activeMode === 'change-type'\" \n                                (click)=\"startChangeType()\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Skift type\" \n                                matTooltipPosition=\"below\">\n                                find_replace\n                            </mat-icon>\n                        }\n                        @if(settings.mergeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                (click)=\"startMergeFeatures()\" \n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Saml flader\" \n                                [class.active]=\"activeMode === 'merge-features'\">\n                                merge\n                            </mat-icon>\n                        }\n                        @if(settings.centerPoint) {\n                            <mat-icon\n                                (click)=\"setCenterPoint()\"\n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"S\u00E6t centerpunkt\" \n                                [class.active]=\"activeMode === 'center-point'\"\n                            >adjust</mat-icon>\n                        }\n                    </div>\n                    <div class=\"geometry-tools\">\n                        <img \n                            [src]=\"featureSearchIconBase64\" \n                            [class.active]=\"activeMode === 'search-feature'\"\n                            class=\"compact-icon primary custom-image-icon\"\n                            (click)=\"toggleFeatureSearch()\" \n                            matTooltip=\"Udpegede objekter\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Punkt\">\n\n                        <img \n                            [src]=\"polygonIconBase64\" \n                            [class.active]=\"activeMode === 'draw-polygon'\"\n                            class=\"compact-icon primary custom-image-icon\"\n                            (click)=\"startDrawPolygon()\" \n                            matTooltip=\"Polygon\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Polygon\">\n                        <img \n                            [src]=\"lineStringIconBase64\" \n                            [class.active]=\"activeMode === 'draw-linestring'\"\n                            class=\"compact-icon primary custom-image-icon\"\n                            (click)=\"startDrawLineString()\" \n                            matTooltip=\"LineString\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"LineString\">\n                        \n                        @if(selectedGeometrySetting && selectedGeometrySetting.icons && selectedGeometrySetting.icons.length > 0) {\n                            @for(iconUrl of selectedGeometrySetting.icons;track iconUrl) {\n                                <img \n                                    [src]=\"iconUrl\" \n                                    [class.active]=\"activeMode === 'draw-point'\"\n                                    class=\"compact-icon primary custom-image-icon\"\n                                    (click)=\"startDrawPointUrl(iconUrl)\" \n                                    matTooltip=\"Punkter\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Punkter\">}\n                        } @else {\n                            <img \n                                [src]=\"pointIconBase64\" \n                                [class.active]=\"activeMode === 'draw-point'\"\n                                class=\"compact-icon primary custom-image-icon\"\n                                (click)=\"startDrawPoint()\" \n                                matTooltip=\"Punkter\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Punkter\">\n                        }\n                        <img \n                            [src]=\"wktIconBase64\" \n                            class=\"compact-icon secondary custom-image-icon\"\n                            (click)=\"activateShowInputWKT()\" \n                            matTooltip=\"WKT\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"WKT\">\n                    </div>\n                    <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n                    <div class=\"measurement-print-tools\">\n                        <div class=\"measurement-tools\">\n                            @if (deleteEnabled) {\n                                <img \n                                    [src]=\"deleteIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'delete'\"\n                                    (click)=\"startDelete()\" \n                                    matTooltip=\"Slet\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Slet\">\n                            }\n                            @if (showMeasureDistance) {\n                                <img \n                                    [src]=\"measureDistanceIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'measure-distance'\"\n                                    (click)=\"startMeasureLength()\" \n                                    matTooltip=\"M\u00E5le afstand\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"M\u00E5le afstand\">\n                            }\n                            @if(showMeasureArea) {\n                                <img \n                                    [src]=\"measureAreaIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'measure-area'\"\n                                    (click)=\"startMeasureArea()\" \n                                    matTooltip=\"M\u00E5le areal\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"M\u00E5le areal\">\n                            }\n                        </div>\n                        @if(profile.showPrint) {\n                            <div class=\"tool-separator print-separator\"></div>\n                            <div class=\"print-tools\">\n                                <img \n                                    [src]=\"printBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"active === 'Print'\"\n                                    (click)=\"startPrintMode()\" \n                                    matTooltip=\"Udskriv\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Udskriv\">\n                                <img \n                                    [src]=\"drawBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"active === 'Draw'\"\n                                    (click)=\"startDrawMode()\" \n                                    matTooltip=\"Tegn\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Tegn\">\n                            </div>\n                        }\n                    </div>\n                </div>\n                @if(showInputWKT) {\n                    <div class=\"wkt-section\">\n                        <input class=\"compact-input\" [(ngModel)]=\"WKTString\">\n                            <div class=\"wkt-actions\">\n                                <button class=\"compact-button primary\" (click)=\"ReadWKT()\">Indl\u00E6s WKT</button>\n                                <button class=\"compact-button\" (click)=\"cancelWKT()\">Annuller</button>\n                            </div>\n                    </div>\n                }\n                @if(profile.showPrint) {\n                    @if(active === \"Print\") {\n                        <div class=\"print-config\">\n                            <img \n                                [src]=\"printBase64\" \n                                class=\"compact-icon\"\n                                (click)=\"doPrint()\" \n                                alt=\"Udskriv\"> \n                                <span class=\"icon-separator\">i</span>\n                            <select id=\"formatSelector\" [(ngModel)]=\"format\">\n                                <option value=\"image/png\" selected>.PNG</option>\n                                <option value=\"image/jpeg\">.JPG</option>\n                            </select>\n                            <select id=\"dimensionSelector\" [(ngModel)]=\"dimId\" (change)=\"handleDimensionSelected()\">\n                                <option value=\"99\" selected></option>\n                                <option value=\"0\">1920 X 1080</option>\n                                <option value=\"1\">1680 X 1050</option>\n                                <option value=\"2\">1280 X 800</option>\n                                <option value=\"3\">800 X 600</option>\n                            </select>\n                            <input type=\"text\" [(ngModel)]=\"mapWidth\"/> \n                            <span class=\"icon-separator\">x</span>\n                            <input type=\"text\" [(ngModel)]=\"mapHeight\"/>\n                            <button (click)=\"setNewMapDimensions()\">V\u00E6lg</button>\n                        </div>\n                    }\n                    @if(active === \"PrintDraw\") {\n                        <div class=\"print-draw-config\">\n                            <span class=\"icon-separator\">Label</span>\n                            <input type=\"text\" [(ngModel)]=\"printDrawLabel\"/>\n                            <select id=\"drawToolSelector\" [(ngModel)]=\"printDrawTool\" (change)=\"handlePrintDrawToolChanged()\">\n                                <option value=\"Arrow\" selected>Pil</option>\n                                <option value=\"Point\">Punkt</option>\n                                <option value=\"LineString\">Linje</option>\n                                <option value=\"Polygon\">Polygon</option>\n                                <option value=\"Circle\">Cirkel</option>\n                                <option value=\"Square\">Kvadrat</option>\n                                <option value=\"Rectangle\">Firkant</option>\n                            </select>\n                            <button class=\"compact-button\" (click)=\"handleClearPrintDrawFeatures()\">Ryd</button>\n                        </div>\n                    }\n                }\n            </div>\n        }\n    </div>\n    @if (activeMode === 'search-feature' && filteredResults.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <div class=\"buffer-item\">\n                <mat-label>Buffer</mat-label>\n                <input matInput type=\"number\" name=\"buffer\" [(ngModel)]=\"bufferInMeters\">\n                <mat-label>m</mat-label>\n            </div>\n            <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n                <span class=\"result-title\">\n                {{ result.title }} ({{result.items.length}} af {{ result.total }})\n                </span>\n                <div  (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                    <div class=\"item-right\">\n                        <img \n                            [src]=\"objectSearchCopyIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"addToActiveObjectsList(item, $event)\" \n                            matTooltip=\"Kopier\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Kopier\">\n                        <img \n                            [src]=\"objectSearchCutIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"cutBySearchedObject(item, $event)\" \n                            matTooltip=\"Fjern\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Fjern\">\n                        <img \n                            [src]=\"objectSearchCutIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"splitBySearchedObject(item, $event)\" \n                            matTooltip=\"Opsk\u00E6r\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Opsk\u00E6r\">\n                        <img \n                            [src]=\"objectSearchCopyWithBufferIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"addToActiveObjectsList(item, $event, true)\" \n                            matTooltip=\"Kopier med buffer\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Kopier med buffer\">\n                        <img \n                            [src]=\"objectSearchZoomIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"zoomSearchedObject(item, $event)\" \n                            matTooltip=\"Zoom\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Zoom\">\n                        <button\n                            (click)=\"toggleItemInfo(item, $event)\">\n                            <mat-icon class=\"button-icon\">info_outline</mat-icon>\n                        </button>\n                    </div>     \n                    @if (item.showMetadata) {\n                        <div class=\"metadata-panel\">\n                            @for(feature of item.metadata; track feature) {\n                                <div class=\"feature-item\">\n                                    <div *ngFor=\"let kv of (feature | keyvalue)\">\n                                        {{ kv.value.name }}:\n                                        <ng-container [ngSwitch]=\"kv.value.kind\">\n                                            <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n                                            <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n                                                {{ kv.key }}\n                                                <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                                            </a>\n                                            <span *ngSwitchDefault>{{ kv.value.data }}</span>\n                                        </ng-container>\n                                    </div>\n                                </div>\n                            }\n                        </div>\n                    }\n                </div>\n            </mat-option>\n        </div>\n    }\n    @if ((activeMode === \"search-point\" || activeMode === \"search-polygon\") && filteredResults.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n                <span class=\"result-title\">\n                {{ result.title }} ({{result.items.length}} af {{ result.total }})\n                </span>\n                <div  (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                 </div>\n            </mat-option>\n        </div>\n    }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;left:1em;top:10em;z-index:10;cursor:grab;max-width:95vw}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px;border:white;border-width:2px}::ng-deep .geometry-search-panel{border-radius:5px!important;max-height:320px!important;background:color-mix(in srgb,#000 85%,transparent)!important;box-shadow:0 8px 24px #00000026!important;margin-top:10px;overflow-y:auto!important;padding:8px!important;max-width:430px}::ng-deep .geometry-search-panel .buffer-item{align-items:end}::ng-deep .geometry-search-panel .buffer-item input{width:45px;margin:5px}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-wrap:wrap;margin:5px}::ng-deep .geometry-search-panel .search-result-item .item-left{display:flex;align-items:center;gap:3px;flex:1;min-width:0}::ng-deep .geometry-search-panel .search-result-item .item-right{display:flex;align-items:center;flex:1;justify-content:flex-end;min-width:0;margin-left:10px}::ng-deep .geometry-search-panel .search-result-item .item-right .custom-image-icon{background:#fff!important;margin-left:5px}::ng-deep .geometry-search-panel .search-result-item .item-right button{width:38px;margin-left:5px}::ng-deep .geometry-search-panel .search-result-item .metadata-panel{flex-basis:98%}::ng-deep .geometry-search-panel::-webkit-scrollbar{width:12px}::ng-deep .geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .geometry-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:#fff;line-height:1.5}::ng-deep .geometry-search-panel mat-label{color:#fff}.drag-handle-toolbox{display:flex;align-items:center;justify-content:space-between;background:#292a2d;padding:2px 8px;cursor:grab;gap:8px;border-radius:5px 5px 0 0;color:#fff}.drag-handle-toolbox mat-icon{color:#fff;font-size:18px;width:18px;height:18px}.drag-handle-toolbox mat-icon:first-child{flex:1;text-align:left}.right-icons{display:flex;align-items:center;gap:6px}.left-icon{flex-shrink:0}.toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.toggle-icon:hover{color:#fff;background:#ffffff26}.toggle-icon:active{background:#ffffff40}:host{position:relative;display:flex;justify-content:center}:host.expanded{width:auto;min-width:320px;padding:12px}.toolbox-container{display:flex;flex-direction:column;align-items:center;width:100%;gap:10px;background:#292a2d;box-shadow:#0000004d 0 1px 4px -1px;padding:10px;width:auto;min-width:32px;transition:all .3s ease;cursor:default;border-radius:0 0 5px 5px}.toolbox-container.collapsed{display:none}.toolbox-content{display:flex;flex-direction:column;width:100%;gap:3px;animation:slideDown .3s cubic-bezier(.4,0,.2,1)}.all-tools-container{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;width:100%;justify-content:flex-start;overflow-x:hidden}.all-tools-container::-webkit-scrollbar{height:4px}.all-tools-container::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}.main-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}.main-tools ::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:12px;font-weight:500;color:#fff}.geometry-selector{width:100%}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:6px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:color-mix(in srgb,#000 60%,transparent);transition:all .2s ease}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:color-mix(in srgb,#000 70%,transparent);border-color:#667eea;box-shadow:0 4px 12px #0003}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.geometry-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px;transform:scale(.85)}.geometry-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.geometry-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-select-panel{min-width:fit-content!important;max-width:320px!important;background:color-mix(in srgb,#000 100%,transparent)!important;border:none!important;border-radius:8px!important;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014!important;margin-top:6px!important;padding:4px 0!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:14px!important;min-height:36px!important;padding:8px 14px!important;transition:all .15s ease!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover:not(.mat-mdc-option-disabled){background:#444849!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-active{background:color-mix(in srgb,#000 60%,transparent)!important;color:#fff!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;font-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.geometry-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap;background:color-mix(in srgb,#000 20%,transparent);border-radius:8px;padding:4px 8px;border:1px solid rgba(255,255,255,.1)}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}.measurement-tools .compact-icon,.print-tools .compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.measurement-tools .compact-icon.custom-image-icon,.print-tools .compact-icon.custom-image-icon{padding:4px;background:none;border:1px solid rgba(255,255,255,.2)}.measurement-tools .compact-icon.custom-image-icon img,.print-tools .compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.measurement-tools .compact-icon.custom-image-icon.active,.print-tools .compact-icon.custom-image-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985);border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.measurement-tools .compact-icon.custom-image-icon.active img,.print-tools .compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.measurement-tools .compact-icon.custom-image-icon.active:hover,.print-tools .compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active),.print-tools .compact-icon.custom-image-icon:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e94d}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active) img,.print-tools .compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.print-tools .compact-icon{background:linear-gradient(147.38deg,#4f46e5,#3730a3);color:#fff;border:1px solid rgba(255,255,255,.2)}.print-tools .compact-icon.print-icon{background:linear-gradient(147.38deg,#10b981,#047857)}.print-tools .compact-icon.draw-icon{background:linear-gradient(147.38deg,#f59e0b,#d97706)}.print-tools .compact-icon.active{background:linear-gradient(147.38deg,#ef4444,#dc2626);box-shadow:0 4px 12px #ef444466;border-color:transparent;transform:scale(1.05)}.print-tools .compact-icon.active:hover{box-shadow:0 6px 20px #ef444480;transform:scale(1.08)}.print-tools .compact-icon:hover:not(.active){box-shadow:0 4px 12px #0000004d;opacity:.9}.tool-separator{width:1px;height:24px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.3),transparent);margin:0 4px}.tool-separator.print-separator{height:28px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent)}.compact-icon{cursor:pointer;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:color-mix(in srgb,#000 40%,transparent);border:1px solid rgba(255,255,255,.2);box-shadow:0 1px 2px #0000001a;flex-shrink:0}.compact-icon.active{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;box-shadow:0 8px 25px #667eea4d;transform:scale(1.05)}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66;transform:scale(1.08)}.compact-icon:hover:not(.active){color:#fff;background:color-mix(in srgb,#000 70%,transparent);border-color:#667eea;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:0;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:transform .2s ease}.compact-icon.custom-image-icon.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1);transform:scale(1.1)}.compact-icon.custom-image-icon:hover:not(.active) img{transform:scale(1.05)}.wkt-section{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:6px;background:color-mix(in srgb,#000 60%,transparent);color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;letter-spacing:.4px;min-height:32px;display:flex;align-items:center;justify-content:center;flex:1;box-shadow:0 1px 2px #0000000d}.compact-button.primary.active{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 8px 25px #667eea4d;color:#fff}.compact-button.primary.active:hover{box-shadow:0 12px 35px #667eea66}.compact-button.secondary{background:color-mix(in srgb,#000 20%,transparent);color:#fff}.compact-button.secondary:hover{background:color-mix(in srgb,#5a6268 60%,transparent)}.compact-input{padding:8px 10px;border:none;border-radius:6px;font-size:13px;transition:all .2s ease;background:color-mix(in srgb,#000 60%,transparent);color:#fff}.compact-input:focus{outline:none;border-color:#1976d2;background:color-mix(in srgb,#000 70%,transparent);box-shadow:0 0 0 3px #1976d233}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:color-mix(in srgb,#000 40%,transparent);border-radius:8px;border:1px solid rgba(255,255,255,.1);animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:color-mix(in srgb,#000 60%,transparent);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:6px;font-size:12px;height:32px;min-height:32px;padding:0 10px}.print-config select:focus,.print-config input:focus,.print-draw-config select:focus,.print-draw-config input:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 2px #0ea5e933}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:color-mix(in srgb,#000 98%,transparent)!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:linear-gradient(147.38deg,#10b981,#047857);color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s ease}.print-config button:hover,.print-draw-config button:hover{box-shadow:0 4px 12px #10b9814d}.print-config .icon-separator,.print-draw-config .icon-separator{color:#fff}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%{box-shadow:0 0 #667eeab3}70%{box-shadow:0 0 0 6px #667eea00}to{box-shadow:0 0 #667eea00}}.compact-icon.active{animation:pulse 2s infinite}@media (max-width: 768px){.toolbox-wrapper{left:.5em;top:8em;max-width:calc(100vw - 2.5em)}.drag-handle-toolbox{padding:3px 6px;gap:6px}.drag-handle-toolbox mat-icon{font-size:16px;width:16px;height:16px}.toggle-icon{font-size:16px!important;width:16px!important;height:16px!important}.toolbox-container{padding:8px;min-width:28px;max-width:calc(100vw - 3em)}:host{padding:8px;min-width:32px}:host.expanded{min-width:280px;padding:10px}.all-tools-container{flex-wrap:wrap;gap:6px;max-height:50vh;overflow-y:auto;padding:0;-ms-overflow-style:none;scrollbar-width:none}.all-tools-container::-webkit-scrollbar{display:none}.main-tools,.geometry-tools,.measurement-print-tools,.print-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.compact-icon{width:28px;height:28px;flex-shrink:0}.measurement-print-tools{padding:3px 6px}.geometry-selector{width:100%;margin-bottom:8px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:28px;min-height:28px;padding:0 8px;font-size:12px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:12px}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 2em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config,.print-draw-config{flex-direction:column;align-items:stretch;gap:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:11px;padding:4px 8px;height:28px;min-height:28px}.print-config input,.print-draw-config input{width:50px}.print-config button,.print-draw-config button{padding:4px 8px;font-size:11px;height:28px}.wkt-section .compact-input{font-size:12px;padding:6px 8px}.wkt-section .compact-button{font-size:11px;padding:5px 8px;min-height:28px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:11px!important}}@media (max-width: 480px){.toolbox-wrapper{left:.25em;top:6em;transform-origin:left top;max-width:calc(100vw - .5em)}.drag-handle-toolbox{padding:2px 4px;gap:4px}.drag-handle-toolbox mat-icon{font-size:14px;width:14px;height:14px}.toggle-icon{font-size:14px!important;width:14px!important;height:14px!important}.toolbox-container{padding:6px;min-width:24px}.toolbox-content{gap:8px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;letter-spacing:.2px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle{transform:scale(.9)}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToolboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'map-toolbox', imports: [FormsModule, CommonModule, MatIconModule, MatOptionModule, MatSelectModule, DragDropModule, MatTooltipModule, MatSlideToggleModule], template: "<div class=\"toolbox-wrapper\" \n     cdkDrag \n     cdkDragBoundary=\".map-container\"\n     [cdkDragFreeDragPosition]=\"dragPosition\"\n     (cdkDragEnded)=\"onDragEnded($event)\">\n   <div class=\"drag-handle-toolbox\" cdkDragHandle>\n        <mat-icon>build_circle</mat-icon>\n        <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">{{ collapsed ? 'flip_to_front' : 'remove' }}</mat-icon>    </div>\n    <div class=\"toolbox-container\" [class.collapsed]=\"collapsed\">\n        @if(!collapsed) {\n            <div class=\"toolbox-content\">\n                @if (settings.geometryTypeSettings && settings.geometryTypeSettings.length) {\n                    <mat-select class=\"geometry-selector\" (selectionChange)=\"settingsChanged($event)\" [(ngModel)]=\"selectedGeometrySetting\" [compareWith]=\"compareGeometrySetting\">\n                        @for (setting of settings.geometryTypeSettings; track setting) {\n                            <mat-option [value]=\"setting\">{{setting.typeName}}</mat-option>\n                        }\n                    </mat-select>            \n                }\n                <div class=\"all-tools-container\">\n                    <div class=\"main-tools\">\n                        @if(!settings?.undoDisabled) {\n                            <img \n                                [src]=\"undoIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"undo()\" \n                                matTooltip=\"Fortryd\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Undo\">\n\n                            <img \n                                [src]=\"redoIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"redo()\" \n                                matTooltip=\"Gentag\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Redo\">\n                        }\n                        <mat-slide-toggle [(ngModel)]=\"snap\" (change)=\"onSnapChange()\">Snap</mat-slide-toggle>\n                        @if(settings.editEnabled) {\n                            <img \n                                [src]=\"editIconBase64\" \n                                [class.active]=\"activeMode === 'edit'\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startEdit()\" \n                                matTooltip=\"Rediger\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Rediger\">\n\n                            <img \n                                [src]=\"removePointsIconBase64\" \n                                [class.active]=\"activeMode === 'edit-remove'\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startEditRemovePoints()\" \n                                matTooltip=\"Fjern punkter\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Fjern punkter\">\n                        }\n                        @if(settings.cutHoleEnabled) {\n                            <img \n                                [src]=\"trimIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'clip-hole'\" \n                                (click)=\"clipHole()\" \n                                matTooltip=\"Klip hul\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Klip hul\">\n                        }\n                        @if(settings.splitEnabled) {\n                            <img \n                                [src]=\"splitIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'split'\"\n                                (click)=\"split()\" \n                                matTooltip=\"Sk\u00E6r over\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Sk\u00E6r over\">\n                        }\n                        @if(settings.changeTypeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                [class.active]=\"activeMode === 'change-type'\" \n                                (click)=\"startChangeType()\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Skift type\" \n                                matTooltipPosition=\"below\">\n                                find_replace\n                            </mat-icon>\n                        }\n                        @if(settings.mergeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                (click)=\"startMergeFeatures()\" \n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Saml flader\" \n                                [class.active]=\"activeMode === 'merge-features'\">\n                                merge\n                            </mat-icon>\n                        }\n                    </div>\n                    @if(selectedGeometrySetting && selectedGeometrySetting.availableGeometryTypes?.length) {\n                        <div class=\"geometry-tools\">\n                            @for(geomType of selectedGeometrySetting.availableGeometryTypes;track geomType) {\n                                @if(geomType === 'Polygon') {\n                                    <img \n                                        [src]=\"polygonIconBase64\" \n                                        [class.active]=\"activeMode === 'draw-polygon'\"\n                                        class=\"compact-icon primary custom-image-icon\"\n                                        (click)=\"startDrawPolygon()\" \n                                        matTooltip=\"Polygon\" \n                                        [matTooltipShowDelay]=\"200\"\n                                        [matTooltipHideDelay]=\"300\" \n                                        matTooltipClass=\"custom-tooltip\"\n                                        matTooltipPosition=\"below\"\n                                        alt=\"Polygon\">\n                                }\n                                @if(geomType === 'LineString') {\n                                    <img \n                                        [src]=\"lineStringIconBase64\" \n                                        [class.active]=\"activeMode === 'draw-linestring'\"\n                                        class=\"compact-icon primary custom-image-icon\"\n                                        (click)=\"startDrawLineString()\" \n                                        matTooltip=\"LineString\" \n                                        [matTooltipShowDelay]=\"200\"\n                                        [matTooltipHideDelay]=\"300\" \n                                        matTooltipClass=\"custom-tooltip\"\n                                        matTooltipPosition=\"below\"\n                                        alt=\"LineString\">\n                                }\n                                @if(geomType === 'Point') {\n                                    <img \n                                    [src]=\"pointIconBase64\" \n                                    [class.active]=\"activeMode === 'draw-point'\"\n                                    class=\"compact-icon primary custom-image-icon\"\n                                    (click)=\"startDrawPoint()\" \n                                    matTooltip=\"Punkter\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Punkter\">\n                                }\n                            }\n                            <img \n                                [src]=\"wktIconBase64\" \n                                class=\"compact-icon secondary custom-image-icon\"\n                                (click)=\"activateShowInputWKT()\" \n                                matTooltip=\"WKT\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"WKT\">\n                        </div>\n                    }\n                    <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n                    <div class=\"measurement-print-tools\">\n                        <div class=\"measurement-tools\">\n                            @if (deleteEnabled) {\n                                <img \n                                    [src]=\"deleteIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'delete'\"\n                                    (click)=\"startDelete()\" \n                                    matTooltip=\"Slet\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Slet\">\n                            }\n                            @if (showMeasureDistance) {\n                                <img \n                                    [src]=\"measureDistanceIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'measure-distance'\"\n                                    (click)=\"startMeasureLength()\" \n                                    matTooltip=\"M\u00E5le afstand\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"M\u00E5le afstand\">\n                            }\n                            @if(showMeasureArea) {\n                                <img \n                                    [src]=\"measureAreaIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'measure-area'\"\n                                    (click)=\"startMeasureArea()\" \n                                    matTooltip=\"M\u00E5le areal\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"M\u00E5le areal\">\n                            }\n                        </div>\n                        @if(profile.showPrint) {\n                            <div class=\"tool-separator print-separator\"></div>\n                            <div class=\"print-tools\">\n                                <img \n                                    [src]=\"printBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"active === 'Print'\"\n                                    (click)=\"startPrintMode()\" \n                                    matTooltip=\"Udskriv\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Udskriv\">\n                                <!-- <img \n                                    [src]=\"drawBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"active === 'Draw'\"\n                                    (click)=\"startDrawMode()\" \n                                    matTooltip=\"Tegn\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Tegn\"> -->\n                            </div>\n                        }\n                    </div>\n                </div>\n                @if(showInputWKT) {\n                    <div class=\"wkt-section\">\n                        <input class=\"compact-input\" [(ngModel)]=\"WKTString\">\n                            <div class=\"wkt-actions\">\n                                <button class=\"compact-button primary\" (click)=\"ReadWKT()\">Indl\u00E6s WKT</button>\n                                <button class=\"compact-button\" (click)=\"cancelWKT()\">Annuller</button>\n                            </div>\n                    </div>\n                }\n                @if(profile.showPrint) {\n                    @if(active === \"Print\") {\n                        <div class=\"print-config\">\n                            <img \n                                [src]=\"printBase64\" \n                                class=\"compact-icon\"\n                                (click)=\"doPrint()\" \n                                alt=\"Udskriv\"> \n                                <span class=\"icon-separator\">i</span>\n                            <select id=\"formatSelector\" [(ngModel)]=\"format\">\n                                <option value=\"image/png\" selected>.PNG</option>\n                                <option value=\"image/jpeg\">.JPG</option>\n                            </select>\n                            <select id=\"dimensionSelector\" [(ngModel)]=\"dimId\" (change)=\"handleDimensionSelected()\">\n                                <option value=\"99\" selected></option>\n                                <option value=\"0\">1920 X 1080</option>\n                                <option value=\"1\">1680 X 1050</option>\n                                <option value=\"2\">1280 X 800</option>\n                                <option value=\"3\">800 X 600</option>\n                            </select>\n                            <input type=\"text\" [(ngModel)]=\"mapWidth\"/> \n                            <span class=\"icon-separator\">x</span>\n                            <input type=\"text\" [(ngModel)]=\"mapHeight\"/>\n                            <button (click)=\"setNewMapDimensions()\">V\u00E6lg</button>\n                        </div>\n                    }\n                    @if(active === \"PrintDraw\") {\n                        <div class=\"print-draw-config\">\n                            <span class=\"icon-separator\">Label</span>\n                            <input type=\"text\" [(ngModel)]=\"printDrawLabel\"/>\n                            <select id=\"drawToolSelector\" [(ngModel)]=\"printDrawTool\" (change)=\"handlePrintDrawToolChanged()\">\n                                <option value=\"arrow\" selected>Pil</option>\n                                <option value=\"point\">Punkt</option>\n                                <option value=\"line\">Linje</option>\n                                <option value=\"polygon\">Polygon</option>\n                                <option value=\"cirkel\">Cirkel</option>\n                                <option value=\"square\">Kvadrat</option>\n                                <option value=\"rectangle\">Firkant</option>\n                            </select>\n                            <button>Ryd</button>\n                        </div>\n                    }\n                }\n            </div>\n        }\n    </div>\n</div>\n", styles: [".toolbox-wrapper{position:absolute;left:1em;top:31.5em;z-index:1000;cursor:grab;max-width:95vw}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}.drag-handle-toolbox{display:flex;align-items:center;justify-content:space-between;background:color-mix(in srgb,#000 60%,transparent);padding:2px 10px;cursor:grab;gap:8px}.drag-handle-toolbox mat-icon{color:#fff;font-size:18px;width:18px;height:18px}.drag-handle-toolbox mat-icon:first-child{flex:1;text-align:center}.toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.toggle-icon:hover{color:#fff;background:#ffffff26}.toggle-icon:active{background:#ffffff40}:host{position:relative;display:flex;justify-content:center}:host.expanded{width:auto;min-width:320px;padding:12px}.toolbox-container{display:flex;flex-direction:column;align-items:center;width:100%;gap:10px;background:color-mix(in srgb,#000 60%,transparent);box-shadow:#0000004d 0 1px 4px -1px;padding:10px;width:auto;min-width:32px;transition:all .3s ease;cursor:default}.toolbox-container.collapsed{display:none}.toolbox-content{display:flex;flex-direction:column;width:100%;gap:3px;animation:slideDown .3s cubic-bezier(.4,0,.2,1)}.all-tools-container{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;width:100%;justify-content:flex-start;overflow-x:hidden}.all-tools-container::-webkit-scrollbar{height:4px}.all-tools-container::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}.main-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}.main-tools ::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:12px;font-weight:500;color:#fff}.geometry-selector{width:100%}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:6px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:color-mix(in srgb,#000 60%,transparent);transition:all .2s ease}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:color-mix(in srgb,#000 70%,transparent);border-color:#667eea;box-shadow:0 4px 12px #0003}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.geometry-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px;transform:scale(.85)}.geometry-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.geometry-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-select-panel{min-width:fit-content!important;max-width:320px!important;background:color-mix(in srgb,#000 100%,transparent)!important;border:none!important;border-radius:8px!important;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014!important;margin-top:6px!important;padding:4px 0!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:14px!important;min-height:36px!important;padding:8px 14px!important;transition:all .15s ease!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover:not(.mat-mdc-option-disabled){background:#444849!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-active{background:color-mix(in srgb,#000 60%,transparent)!important;color:#fff!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;font-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.geometry-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap;background:color-mix(in srgb,#000 20%,transparent);border-radius:8px;padding:4px 8px;border:1px solid rgba(255,255,255,.1)}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}.measurement-tools .compact-icon,.print-tools .compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.measurement-tools .compact-icon.custom-image-icon,.print-tools .compact-icon.custom-image-icon{padding:4px;background:none;border:1px solid rgba(255,255,255,.2)}.measurement-tools .compact-icon.custom-image-icon img,.print-tools .compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.measurement-tools .compact-icon.custom-image-icon.active,.print-tools .compact-icon.custom-image-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985);border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.measurement-tools .compact-icon.custom-image-icon.active img,.print-tools .compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.measurement-tools .compact-icon.custom-image-icon.active:hover,.print-tools .compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active),.print-tools .compact-icon.custom-image-icon:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e94d}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active) img,.print-tools .compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.print-tools .compact-icon{background:linear-gradient(147.38deg,#4f46e5,#3730a3);color:#fff;border:1px solid rgba(255,255,255,.2)}.print-tools .compact-icon.print-icon{background:linear-gradient(147.38deg,#10b981,#047857)}.print-tools .compact-icon.draw-icon{background:linear-gradient(147.38deg,#f59e0b,#d97706)}.print-tools .compact-icon.active{background:linear-gradient(147.38deg,#ef4444,#dc2626);box-shadow:0 4px 12px #ef444466;border-color:transparent;transform:scale(1.05)}.print-tools .compact-icon.active:hover{box-shadow:0 6px 20px #ef444480;transform:scale(1.08)}.print-tools .compact-icon:hover:not(.active){box-shadow:0 4px 12px #0000004d;opacity:.9}.tool-separator{width:1px;height:24px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.3),transparent);margin:0 4px}.tool-separator.print-separator{height:28px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent)}.compact-icon{cursor:pointer;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:color-mix(in srgb,#000 40%,transparent);border:1px solid rgba(255,255,255,.2);box-shadow:0 1px 2px #0000001a;flex-shrink:0}.compact-icon.active{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;box-shadow:0 8px 25px #667eea4d;transform:scale(1.05)}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66;transform:scale(1.08)}.compact-icon:hover:not(.active){color:#fff;background:color-mix(in srgb,#000 70%,transparent);border-color:#667eea;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:0;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:transform .2s ease}.compact-icon.custom-image-icon.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1);transform:scale(1.1)}.compact-icon.custom-image-icon:hover:not(.active) img{transform:scale(1.05)}.wkt-section{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:6px;background:color-mix(in srgb,#000 60%,transparent);color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;letter-spacing:.4px;min-height:32px;display:flex;align-items:center;justify-content:center;flex:1;box-shadow:0 1px 2px #0000000d}.compact-button.primary.active{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 8px 25px #667eea4d;color:#fff}.compact-button.primary.active:hover{box-shadow:0 12px 35px #667eea66}.compact-button.secondary{background:color-mix(in srgb,#000 20%,transparent);color:#fff}.compact-button.secondary:hover{background:color-mix(in srgb,#5a6268 60%,transparent)}.compact-button:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);color:#fff}.compact-input{padding:8px 10px;border:none;border-radius:6px;font-size:13px;transition:all .2s ease;background:color-mix(in srgb,#000 60%,transparent);color:#fff}.compact-input:focus{outline:none;border-color:#1976d2;background:color-mix(in srgb,#000 70%,transparent);box-shadow:0 0 0 3px #1976d233}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:color-mix(in srgb,#000 40%,transparent);border-radius:8px;border:1px solid rgba(255,255,255,.1);animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:color-mix(in srgb,#000 60%,transparent);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:6px;font-size:12px;height:32px;min-height:32px;padding:0 10px}.print-config select:focus,.print-config input:focus,.print-draw-config select:focus,.print-draw-config input:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 2px #0ea5e933}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:color-mix(in srgb,#000 98%,transparent)!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:linear-gradient(147.38deg,#10b981,#047857);color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s ease}.print-config button:hover,.print-draw-config button:hover{box-shadow:0 4px 12px #10b9814d}.print-config .icon-separator,.print-draw-config .icon-separator{color:#70706f}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%{box-shadow:0 0 #667eeab3}70%{box-shadow:0 0 0 6px #667eea00}to{box-shadow:0 0 #667eea00}}.compact-icon.active{animation:pulse 2s infinite}@media (max-width: 768px){.toolbox-wrapper{left:.5em;top:8em;max-width:calc(100vw - 2.5em)}.drag-handle-toolbox{padding:3px 6px;gap:6px}.drag-handle-toolbox mat-icon{font-size:16px;width:16px;height:16px}.toggle-icon{font-size:16px!important;width:16px!important;height:16px!important}.toolbox-container{padding:8px;min-width:28px;max-width:calc(100vw - 3em)}:host{padding:8px;min-width:32px}:host.expanded{min-width:280px;padding:10px}.all-tools-container{flex-wrap:wrap;gap:6px;max-height:50vh;overflow-y:auto;padding:0;-ms-overflow-style:none;scrollbar-width:none}.all-tools-container::-webkit-scrollbar{display:none}.main-tools,.geometry-tools,.measurement-print-tools,.print-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.compact-icon{width:28px;height:28px;flex-shrink:0}.measurement-print-tools{padding:3px 6px}.geometry-selector{width:100%;margin-bottom:8px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:28px;min-height:28px;padding:0 8px;font-size:12px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:12px}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 2em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config,.print-draw-config{flex-direction:column;align-items:stretch;gap:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:11px;padding:4px 8px;height:28px;min-height:28px}.print-config input,.print-draw-config input{width:50px}.print-config button,.print-draw-config button{padding:4px 8px;font-size:11px;height:28px}.wkt-section .compact-input{font-size:12px;padding:6px 8px}.wkt-section .compact-button{font-size:11px;padding:5px 8px;min-height:28px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:11px!important}}@media (max-width: 480px){.toolbox-wrapper{left:.25em;top:6em;transform-origin:left top;max-width:calc(100vw - .5em)}.drag-handle-toolbox{padding:2px 4px;gap:4px}.drag-handle-toolbox mat-icon{font-size:14px;width:14px;height:14px}.toggle-icon{font-size:14px!important;width:14px!important;height:14px!important}.toolbox-container{padding:6px;min-width:24px}.toolbox-content{gap:8px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;letter-spacing:.2px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle{transform:scale(.9)}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px}\n"] }]
+            args: [{ selector: 'map-toolbox', imports: [FormsModule, CommonModule, MatIconModule, MatOptionModule, MatSelectModule, DragDropModule, MatTooltipModule, MatSlideToggleModule], template: "<div class=\"toolbox-wrapper\" \n     cdkDrag \n     cdkDragBoundary=\".map-container\"\n     [cdkDragFreeDragPosition]=\"dragPosition\"\n     (cdkDragEnded)=\"onDragEnded($event)\">\n     <div class=\"drag-handle-toolbox\" cdkDragHandle>\n        <mat-icon class=\"left-icon\">handyman</mat-icon>\n    \n        <div class=\"right-icons\">\n            <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n            <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n                {{ collapsed ? 'flip_to_front' : 'remove' }}\n            </mat-icon>\n        </div>\n    </div>\n    \n    <div class=\"toolbox-container\" [class.collapsed]=\"collapsed\">\n        @if(!collapsed) {\n            <div class=\"toolbox-content\">\n                @if (showGeometryTypes && filteredGeometryTypeSettings.length > 0) {\n                    <mat-select class=\"geometry-selector\" (selectionChange)=\"settingsChanged($event)\" [(ngModel)]=\"selectedGeometrySetting\" [compareWith]=\"compareGeometrySetting\">\n                        @for (setting of filteredGeometryTypeSettings; track setting) {\n                            <mat-option [value]=\"setting\">{{setting.typeName}}</mat-option>\n                        }\n                    </mat-select>            \n                }\n                <div class=\"all-tools-container\">\n                    <div class=\"main-tools\">\n                        @if(!settings?.undoDisabled) {\n                            <img \n                                [src]=\"undoIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"undo()\" \n                                matTooltip=\"Fortryd\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Undo\">\n\n                            <img \n                                [src]=\"redoIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"redo()\" \n                                matTooltip=\"Gendan\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Redo\">\n                        }\n                        <mat-icon \n                            class=\"compact-icon\"                             \n                            (click)=\"startShowInfo()\"\n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"Vis info\" \n                            matTooltipPosition=\"below\">\n                            info\n                        </mat-icon>\n                        <mat-icon \n                            class=\"compact-icon\" \n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"S\u00F8g punkt\" \n                            matTooltipPosition=\"below\"\n                            (click)=\"togglePointSearch()\">adjust\n                        </mat-icon>\n                        <mat-icon \n                            class=\"compact-icon\" \n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"S\u00F8g polygon\" \n                            matTooltipPosition=\"below\"\n                            (click)=\"togglePolygonSearch()\">crop_din\n                        </mat-icon>\n                        <mat-icon\n                            class=\"compact-icon\"                             \n                            (click)=\"startSelectFeatureHighlight()\"\n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"Fremh\u00E6v\" \n                            matTooltipPosition=\"below\"\n                        >star</mat-icon> // TODO: set correct icon for this\n\n                        <mat-slide-toggle [(ngModel)]=\"snap\" (change)=\"onSnapChange()\">Snap</mat-slide-toggle>\n                        @if(settings.editEnabled) {\n                            <img \n                                [src]=\"editIconBase64\" \n                                [class.active]=\"activeMode === 'edit'\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startEdit()\" \n                                matTooltip=\"Rediger\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Rediger\">\n\n                            <img \n                                [src]=\"removePointsIconBase64\" \n                                [class.active]=\"activeMode === 'edit-remove'\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startEditRemovePoints()\" \n                                matTooltip=\"Fjern punkter\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Fjern punkter\">\n                        }\n                        @if(settings.cutHoleEnabled) {\n                            <img \n                                [src]=\"trimIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'clip-hole'\" \n                                (click)=\"clipHole()\" \n                                matTooltip=\"Klip hul\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Klip hul\">\n                        }\n                        @if(settings.splitEnabled) {\n                            <img \n                                [src]=\"splitIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'split'\"\n                                (click)=\"split()\" \n                                matTooltip=\"Sk\u00E6r over\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Sk\u00E6r over\">\n                        }\n                        @if(settings.changeTypeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                [class.active]=\"activeMode === 'change-type'\" \n                                (click)=\"startChangeType()\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Skift type\" \n                                matTooltipPosition=\"below\">\n                                find_replace\n                            </mat-icon>\n                        }\n                        @if(settings.mergeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                (click)=\"startMergeFeatures()\" \n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Saml flader\" \n                                [class.active]=\"activeMode === 'merge-features'\">\n                                merge\n                            </mat-icon>\n                        }\n                        @if(settings.centerPoint) {\n                            <mat-icon\n                                (click)=\"setCenterPoint()\"\n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"S\u00E6t centerpunkt\" \n                                [class.active]=\"activeMode === 'center-point'\"\n                            >adjust</mat-icon>\n                        }\n                    </div>\n                    <div class=\"geometry-tools\">\n                        <img \n                            [src]=\"featureSearchIconBase64\" \n                            [class.active]=\"activeMode === 'search-feature'\"\n                            class=\"compact-icon primary custom-image-icon\"\n                            (click)=\"toggleFeatureSearch()\" \n                            matTooltip=\"Udpegede objekter\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Punkt\">\n\n                        <img \n                            [src]=\"polygonIconBase64\" \n                            [class.active]=\"activeMode === 'draw-polygon'\"\n                            class=\"compact-icon primary custom-image-icon\"\n                            (click)=\"startDrawPolygon()\" \n                            matTooltip=\"Polygon\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Polygon\">\n                        <img \n                            [src]=\"lineStringIconBase64\" \n                            [class.active]=\"activeMode === 'draw-linestring'\"\n                            class=\"compact-icon primary custom-image-icon\"\n                            (click)=\"startDrawLineString()\" \n                            matTooltip=\"LineString\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"LineString\">\n                        \n                        @if(selectedGeometrySetting && selectedGeometrySetting.icons && selectedGeometrySetting.icons.length > 0) {\n                            @for(iconUrl of selectedGeometrySetting.icons;track iconUrl) {\n                                <img \n                                    [src]=\"iconUrl\" \n                                    [class.active]=\"activeMode === 'draw-point'\"\n                                    class=\"compact-icon primary custom-image-icon\"\n                                    (click)=\"startDrawPointUrl(iconUrl)\" \n                                    matTooltip=\"Punkter\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Punkter\">}\n                        } @else {\n                            <img \n                                [src]=\"pointIconBase64\" \n                                [class.active]=\"activeMode === 'draw-point'\"\n                                class=\"compact-icon primary custom-image-icon\"\n                                (click)=\"startDrawPoint()\" \n                                matTooltip=\"Punkter\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Punkter\">\n                        }\n                        <img \n                            [src]=\"wktIconBase64\" \n                            class=\"compact-icon secondary custom-image-icon\"\n                            (click)=\"activateShowInputWKT()\" \n                            matTooltip=\"WKT\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"WKT\">\n                    </div>\n                    <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n                    <div class=\"measurement-print-tools\">\n                        <div class=\"measurement-tools\">\n                            @if (deleteEnabled) {\n                                <img \n                                    [src]=\"deleteIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'delete'\"\n                                    (click)=\"startDelete()\" \n                                    matTooltip=\"Slet\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Slet\">\n                            }\n                            @if (showMeasureDistance) {\n                                <img \n                                    [src]=\"measureDistanceIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'measure-distance'\"\n                                    (click)=\"startMeasureLength()\" \n                                    matTooltip=\"M\u00E5le afstand\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"M\u00E5le afstand\">\n                            }\n                            @if(showMeasureArea) {\n                                <img \n                                    [src]=\"measureAreaIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'measure-area'\"\n                                    (click)=\"startMeasureArea()\" \n                                    matTooltip=\"M\u00E5le areal\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"M\u00E5le areal\">\n                            }\n                        </div>\n                        @if(profile.showPrint) {\n                            <div class=\"tool-separator print-separator\"></div>\n                            <div class=\"print-tools\">\n                                <img \n                                    [src]=\"printBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"active === 'Print'\"\n                                    (click)=\"startPrintMode()\" \n                                    matTooltip=\"Udskriv\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Udskriv\">\n                                <img \n                                    [src]=\"drawBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"active === 'Draw'\"\n                                    (click)=\"startDrawMode()\" \n                                    matTooltip=\"Tegn\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Tegn\">\n                            </div>\n                        }\n                    </div>\n                </div>\n                @if(showInputWKT) {\n                    <div class=\"wkt-section\">\n                        <input class=\"compact-input\" [(ngModel)]=\"WKTString\">\n                            <div class=\"wkt-actions\">\n                                <button class=\"compact-button primary\" (click)=\"ReadWKT()\">Indl\u00E6s WKT</button>\n                                <button class=\"compact-button\" (click)=\"cancelWKT()\">Annuller</button>\n                            </div>\n                    </div>\n                }\n                @if(profile.showPrint) {\n                    @if(active === \"Print\") {\n                        <div class=\"print-config\">\n                            <img \n                                [src]=\"printBase64\" \n                                class=\"compact-icon\"\n                                (click)=\"doPrint()\" \n                                alt=\"Udskriv\"> \n                                <span class=\"icon-separator\">i</span>\n                            <select id=\"formatSelector\" [(ngModel)]=\"format\">\n                                <option value=\"image/png\" selected>.PNG</option>\n                                <option value=\"image/jpeg\">.JPG</option>\n                            </select>\n                            <select id=\"dimensionSelector\" [(ngModel)]=\"dimId\" (change)=\"handleDimensionSelected()\">\n                                <option value=\"99\" selected></option>\n                                <option value=\"0\">1920 X 1080</option>\n                                <option value=\"1\">1680 X 1050</option>\n                                <option value=\"2\">1280 X 800</option>\n                                <option value=\"3\">800 X 600</option>\n                            </select>\n                            <input type=\"text\" [(ngModel)]=\"mapWidth\"/> \n                            <span class=\"icon-separator\">x</span>\n                            <input type=\"text\" [(ngModel)]=\"mapHeight\"/>\n                            <button (click)=\"setNewMapDimensions()\">V\u00E6lg</button>\n                        </div>\n                    }\n                    @if(active === \"PrintDraw\") {\n                        <div class=\"print-draw-config\">\n                            <span class=\"icon-separator\">Label</span>\n                            <input type=\"text\" [(ngModel)]=\"printDrawLabel\"/>\n                            <select id=\"drawToolSelector\" [(ngModel)]=\"printDrawTool\" (change)=\"handlePrintDrawToolChanged()\">\n                                <option value=\"Arrow\" selected>Pil</option>\n                                <option value=\"Point\">Punkt</option>\n                                <option value=\"LineString\">Linje</option>\n                                <option value=\"Polygon\">Polygon</option>\n                                <option value=\"Circle\">Cirkel</option>\n                                <option value=\"Square\">Kvadrat</option>\n                                <option value=\"Rectangle\">Firkant</option>\n                            </select>\n                            <button class=\"compact-button\" (click)=\"handleClearPrintDrawFeatures()\">Ryd</button>\n                        </div>\n                    }\n                }\n            </div>\n        }\n    </div>\n    @if (activeMode === 'search-feature' && filteredResults.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <div class=\"buffer-item\">\n                <mat-label>Buffer</mat-label>\n                <input matInput type=\"number\" name=\"buffer\" [(ngModel)]=\"bufferInMeters\">\n                <mat-label>m</mat-label>\n            </div>\n            <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n                <span class=\"result-title\">\n                {{ result.title }} ({{result.items.length}} af {{ result.total }})\n                </span>\n                <div  (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                    <div class=\"item-right\">\n                        <img \n                            [src]=\"objectSearchCopyIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"addToActiveObjectsList(item, $event)\" \n                            matTooltip=\"Kopier\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Kopier\">\n                        <img \n                            [src]=\"objectSearchCutIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"cutBySearchedObject(item, $event)\" \n                            matTooltip=\"Fjern\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Fjern\">\n                        <img \n                            [src]=\"objectSearchCutIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"splitBySearchedObject(item, $event)\" \n                            matTooltip=\"Opsk\u00E6r\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Opsk\u00E6r\">\n                        <img \n                            [src]=\"objectSearchCopyWithBufferIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"addToActiveObjectsList(item, $event, true)\" \n                            matTooltip=\"Kopier med buffer\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Kopier med buffer\">\n                        <img \n                            [src]=\"objectSearchZoomIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"zoomSearchedObject(item, $event)\" \n                            matTooltip=\"Zoom\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Zoom\">\n                        <button\n                            (click)=\"toggleItemInfo(item, $event)\">\n                            <mat-icon class=\"button-icon\">info_outline</mat-icon>\n                        </button>\n                    </div>     \n                    @if (item.showMetadata) {\n                        <div class=\"metadata-panel\">\n                            @for(feature of item.metadata; track feature) {\n                                <div class=\"feature-item\">\n                                    <div *ngFor=\"let kv of (feature | keyvalue)\">\n                                        {{ kv.value.name }}:\n                                        <ng-container [ngSwitch]=\"kv.value.kind\">\n                                            <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n                                            <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n                                                {{ kv.key }}\n                                                <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                                            </a>\n                                            <span *ngSwitchDefault>{{ kv.value.data }}</span>\n                                        </ng-container>\n                                    </div>\n                                </div>\n                            }\n                        </div>\n                    }\n                </div>\n            </mat-option>\n        </div>\n    }\n    @if ((activeMode === \"search-point\" || activeMode === \"search-polygon\") && filteredResults.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n                <span class=\"result-title\">\n                {{ result.title }} ({{result.items.length}} af {{ result.total }})\n                </span>\n                <div  (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                 </div>\n            </mat-option>\n        </div>\n    }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;left:1em;top:10em;z-index:10;cursor:grab;max-width:95vw}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px;border:white;border-width:2px}::ng-deep .geometry-search-panel{border-radius:5px!important;max-height:320px!important;background:color-mix(in srgb,#000 85%,transparent)!important;box-shadow:0 8px 24px #00000026!important;margin-top:10px;overflow-y:auto!important;padding:8px!important;max-width:430px}::ng-deep .geometry-search-panel .buffer-item{align-items:end}::ng-deep .geometry-search-panel .buffer-item input{width:45px;margin:5px}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-wrap:wrap;margin:5px}::ng-deep .geometry-search-panel .search-result-item .item-left{display:flex;align-items:center;gap:3px;flex:1;min-width:0}::ng-deep .geometry-search-panel .search-result-item .item-right{display:flex;align-items:center;flex:1;justify-content:flex-end;min-width:0;margin-left:10px}::ng-deep .geometry-search-panel .search-result-item .item-right .custom-image-icon{background:#fff!important;margin-left:5px}::ng-deep .geometry-search-panel .search-result-item .item-right button{width:38px;margin-left:5px}::ng-deep .geometry-search-panel .search-result-item .metadata-panel{flex-basis:98%}::ng-deep .geometry-search-panel::-webkit-scrollbar{width:12px}::ng-deep .geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .geometry-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:#fff;line-height:1.5}::ng-deep .geometry-search-panel mat-label{color:#fff}.drag-handle-toolbox{display:flex;align-items:center;justify-content:space-between;background:#292a2d;padding:2px 8px;cursor:grab;gap:8px;border-radius:5px 5px 0 0;color:#fff}.drag-handle-toolbox mat-icon{color:#fff;font-size:18px;width:18px;height:18px}.drag-handle-toolbox mat-icon:first-child{flex:1;text-align:left}.right-icons{display:flex;align-items:center;gap:6px}.left-icon{flex-shrink:0}.toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.toggle-icon:hover{color:#fff;background:#ffffff26}.toggle-icon:active{background:#ffffff40}:host{position:relative;display:flex;justify-content:center}:host.expanded{width:auto;min-width:320px;padding:12px}.toolbox-container{display:flex;flex-direction:column;align-items:center;width:100%;gap:10px;background:#292a2d;box-shadow:#0000004d 0 1px 4px -1px;padding:10px;width:auto;min-width:32px;transition:all .3s ease;cursor:default;border-radius:0 0 5px 5px}.toolbox-container.collapsed{display:none}.toolbox-content{display:flex;flex-direction:column;width:100%;gap:3px;animation:slideDown .3s cubic-bezier(.4,0,.2,1)}.all-tools-container{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;width:100%;justify-content:flex-start;overflow-x:hidden}.all-tools-container::-webkit-scrollbar{height:4px}.all-tools-container::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}.main-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}.main-tools ::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:12px;font-weight:500;color:#fff}.geometry-selector{width:100%}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:6px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:color-mix(in srgb,#000 60%,transparent);transition:all .2s ease}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:color-mix(in srgb,#000 70%,transparent);border-color:#667eea;box-shadow:0 4px 12px #0003}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.geometry-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px;transform:scale(.85)}.geometry-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.geometry-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-select-panel{min-width:fit-content!important;max-width:320px!important;background:color-mix(in srgb,#000 100%,transparent)!important;border:none!important;border-radius:8px!important;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014!important;margin-top:6px!important;padding:4px 0!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:14px!important;min-height:36px!important;padding:8px 14px!important;transition:all .15s ease!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover:not(.mat-mdc-option-disabled){background:#444849!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-active{background:color-mix(in srgb,#000 60%,transparent)!important;color:#fff!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;font-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.geometry-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap;background:color-mix(in srgb,#000 20%,transparent);border-radius:8px;padding:4px 8px;border:1px solid rgba(255,255,255,.1)}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}.measurement-tools .compact-icon,.print-tools .compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.measurement-tools .compact-icon.custom-image-icon,.print-tools .compact-icon.custom-image-icon{padding:4px;background:none;border:1px solid rgba(255,255,255,.2)}.measurement-tools .compact-icon.custom-image-icon img,.print-tools .compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.measurement-tools .compact-icon.custom-image-icon.active,.print-tools .compact-icon.custom-image-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985);border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.measurement-tools .compact-icon.custom-image-icon.active img,.print-tools .compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.measurement-tools .compact-icon.custom-image-icon.active:hover,.print-tools .compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active),.print-tools .compact-icon.custom-image-icon:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e94d}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active) img,.print-tools .compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.print-tools .compact-icon{background:linear-gradient(147.38deg,#4f46e5,#3730a3);color:#fff;border:1px solid rgba(255,255,255,.2)}.print-tools .compact-icon.print-icon{background:linear-gradient(147.38deg,#10b981,#047857)}.print-tools .compact-icon.draw-icon{background:linear-gradient(147.38deg,#f59e0b,#d97706)}.print-tools .compact-icon.active{background:linear-gradient(147.38deg,#ef4444,#dc2626);box-shadow:0 4px 12px #ef444466;border-color:transparent;transform:scale(1.05)}.print-tools .compact-icon.active:hover{box-shadow:0 6px 20px #ef444480;transform:scale(1.08)}.print-tools .compact-icon:hover:not(.active){box-shadow:0 4px 12px #0000004d;opacity:.9}.tool-separator{width:1px;height:24px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.3),transparent);margin:0 4px}.tool-separator.print-separator{height:28px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent)}.compact-icon{cursor:pointer;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:color-mix(in srgb,#000 40%,transparent);border:1px solid rgba(255,255,255,.2);box-shadow:0 1px 2px #0000001a;flex-shrink:0}.compact-icon.active{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;box-shadow:0 8px 25px #667eea4d;transform:scale(1.05)}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66;transform:scale(1.08)}.compact-icon:hover:not(.active){color:#fff;background:color-mix(in srgb,#000 70%,transparent);border-color:#667eea;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:0;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:transform .2s ease}.compact-icon.custom-image-icon.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1);transform:scale(1.1)}.compact-icon.custom-image-icon:hover:not(.active) img{transform:scale(1.05)}.wkt-section{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:6px;background:color-mix(in srgb,#000 60%,transparent);color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;letter-spacing:.4px;min-height:32px;display:flex;align-items:center;justify-content:center;flex:1;box-shadow:0 1px 2px #0000000d}.compact-button.primary.active{background:linear-gradient(135deg,#667eea,#764ba2);box-shadow:0 8px 25px #667eea4d;color:#fff}.compact-button.primary.active:hover{box-shadow:0 12px 35px #667eea66}.compact-button.secondary{background:color-mix(in srgb,#000 20%,transparent);color:#fff}.compact-button.secondary:hover{background:color-mix(in srgb,#5a6268 60%,transparent)}.compact-input{padding:8px 10px;border:none;border-radius:6px;font-size:13px;transition:all .2s ease;background:color-mix(in srgb,#000 60%,transparent);color:#fff}.compact-input:focus{outline:none;border-color:#1976d2;background:color-mix(in srgb,#000 70%,transparent);box-shadow:0 0 0 3px #1976d233}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:color-mix(in srgb,#000 40%,transparent);border-radius:8px;border:1px solid rgba(255,255,255,.1);animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:color-mix(in srgb,#000 60%,transparent);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:6px;font-size:12px;height:32px;min-height:32px;padding:0 10px}.print-config select:focus,.print-config input:focus,.print-draw-config select:focus,.print-draw-config input:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 2px #0ea5e933}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:color-mix(in srgb,#000 98%,transparent)!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:linear-gradient(147.38deg,#10b981,#047857);color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s ease}.print-config button:hover,.print-draw-config button:hover{box-shadow:0 4px 12px #10b9814d}.print-config .icon-separator,.print-draw-config .icon-separator{color:#fff}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%{box-shadow:0 0 #667eeab3}70%{box-shadow:0 0 0 6px #667eea00}to{box-shadow:0 0 #667eea00}}.compact-icon.active{animation:pulse 2s infinite}@media (max-width: 768px){.toolbox-wrapper{left:.5em;top:8em;max-width:calc(100vw - 2.5em)}.drag-handle-toolbox{padding:3px 6px;gap:6px}.drag-handle-toolbox mat-icon{font-size:16px;width:16px;height:16px}.toggle-icon{font-size:16px!important;width:16px!important;height:16px!important}.toolbox-container{padding:8px;min-width:28px;max-width:calc(100vw - 3em)}:host{padding:8px;min-width:32px}:host.expanded{min-width:280px;padding:10px}.all-tools-container{flex-wrap:wrap;gap:6px;max-height:50vh;overflow-y:auto;padding:0;-ms-overflow-style:none;scrollbar-width:none}.all-tools-container::-webkit-scrollbar{display:none}.main-tools,.geometry-tools,.measurement-print-tools,.print-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.compact-icon{width:28px;height:28px;flex-shrink:0}.measurement-print-tools{padding:3px 6px}.geometry-selector{width:100%;margin-bottom:8px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:28px;min-height:28px;padding:0 8px;font-size:12px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:12px}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 2em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config,.print-draw-config{flex-direction:column;align-items:stretch;gap:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:11px;padding:4px 8px;height:28px;min-height:28px}.print-config input,.print-draw-config input{width:50px}.print-config button,.print-draw-config button{padding:4px 8px;font-size:11px;height:28px}.wkt-section .compact-input{font-size:12px;padding:6px 8px}.wkt-section .compact-button{font-size:11px;padding:5px 8px;min-height:28px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:11px!important}}@media (max-width: 480px){.toolbox-wrapper{left:.25em;top:6em;transform-origin:left top;max-width:calc(100vw - .5em)}.drag-handle-toolbox{padding:2px 4px;gap:4px}.drag-handle-toolbox mat-icon{font-size:14px;width:14px;height:14px}.toggle-icon{font-size:14px!important;width:14px!important;height:14px!important}.toolbox-container{padding:6px;min-width:24px}.toolbox-content{gap:8px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;letter-spacing:.2px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle{transform:scale(.9)}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { map: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1768,46 +3094,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }] } });
 
+class ConflictAnalysisSearchProvider extends SearchProviderBase {
+    _current = inject(CurrentItemsService);
+    getSearchableLayers() {
+        return this._current.profile ? this._current.profile.layerGroups.flatMap(lg => lg.layers).filter(l => l.useInConflictAnalysis) : [];
+    }
+    getFilter(searchValue, layer) {
+        return contains(layer.geometryField, searchValue);
+    }
+    map(l, f) {
+        return {
+            conflict: f.features.length > 0,
+            layerName: l.name
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConflictAnalysisSearchProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConflictAnalysisSearchProvider });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConflictAnalysisSearchProvider, decorators: [{
+            type: Injectable
+        }] });
+
 class ActiveObjectsComponent {
     _drawLayerService = inject(DrawLayerSourceService);
+    _centerPointService = inject(CenterPointService);
+    _conflictService = inject(ConflictAnalysisSearchProvider);
+    _undoRedo = inject(UndoRedoService);
+    isZoomedToAll = false;
     features$ = this._drawLayerService.features$;
-    collapsed = false;
+    collapsed = true;
     settings;
+    sessionDone = new EventEmitter();
+    profile;
     activeFeatures = [];
     _featureHelper = inject(FeatureHelperService);
-    _highlight = inject(highlightService);
+    _highlight = inject(HighlightService);
     _zoomService = inject(ZoomService);
+    _current = inject(CurrentItemsService);
+    _layoutService = inject(LayoutService);
     opacity = 1;
     dragPosition = { x: 0, y: 0 };
     highlightedId = null;
     POSITION_STORAGE_KEY = 'activeObjects';
+    _hasCenterpoint = false;
+    _featuresForHighlight$ = this._drawLayerService.selectedForHighlight$;
+    get centerPointOk() {
+        return this._hasCenterpoint || !this._current.gisKomponentSettings.centerPoint || !this._current.gisKomponentSettings.centerPoint.required;
+    }
+    conflictAnalysisAvailable = false;
+    get allFeaturesOk() {
+        return !this._current.gisKomponentSettings.containsCheck ||
+            !this._current.gisKomponentSettings.containsCheck.requiredForEndSession ||
+            this.activeFeatures.flatMap(af => af.features).every(f => f.containedOk === 'yes');
+    }
+    get endSessionEnabled() {
+        return !this._current.gisKomponentSettings.endSessionDisabled && this.allFeaturesOk;
+    }
     constructor() {
         this.features$.subscribe({
             next: features => {
+                this._hasCenterpoint = features.some(f => this._centerPointService.isCenterpoint(f));
                 const featureTypes = [...new Set(features.map(f => this._featureHelper.typeId(f)).filter(typeId => !!typeId))];
                 const featuresObj = featureTypes
                     .map(ft => ({ featureType: ft,
                     display: this.settings.geometryTypeSettings.find(gts => gts.typeId === ft).typeName,
                     features: features.filter(f => this._featureHelper.typeId(f) === ft)
-                        .map(f => ({ id: f.getId(), feature: f, locked: this._featureHelper.isLocked(f), area: this._getAreaString(f) })) }));
+                        .map(f => ({
+                        id: f.getId(),
+                        feature: f,
+                        containedOk: this.conflictAnalysisAvailable ? 'unknown' : 'yes',
+                        locked: this._featureHelper.isLocked(f),
+                        area: this._getAreaString(f)
+                    })) }));
                 this.activeFeatures = [...featuresObj];
+                this.runConflictAnalysis();
+            }
+        });
+        this._featuresForHighlight$.subscribe({
+            next: features => {
+                console.log("🚀 ~ ActiveObjectsComponent ~ constructor ~ features:", features);
             }
         });
     }
     ngOnInit() {
         this._loadPosition();
+        this.conflictAnalysisAvailable = !!this._current.gisKomponentSettings.containsCheck && this._current.gisKomponentSettings.containsCheck.enabled &&
+            this._current.profile.layerGroups.flatMap(lg => lg.layers).some(l => l.useInConflictAnalysis);
+    }
+    endSession() {
+        this.sessionDone.emit();
+    }
+    runConflictAnalysis() {
+        this.activeFeatures.forEach(af => {
+            const unlockedFeatures = af.features.filter(f => !f.locked);
+            // unlockedFeatures.forEach(f => f.conflicts = 'unknown');
+            const conflictSearches$ = unlockedFeatures.map(f => this._conflictService.search(f.feature.getGeometry(), 1));
+            combineLatest(conflictSearches$).subscribe({
+                next: result => {
+                    result.forEach((f, i) => {
+                        af.features[i].containedOk = f.some(fx => fx.conflict) ? 'yes' : 'no';
+                        af.features[i].containedMissingIn = f.filter(fx => !fx.conflict).map(fx => fx.layerName);
+                    });
+                }
+            });
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['profile'] && this.profile) {
+            this._loadPosition();
+        }
     }
     _getAreaString(feature) {
-        if (feature.getGeometry()?.getType() !== 'Polygon') { // We only have polygon, linestring and points and only polygons have area
+        if (feature.getGeometry()?.getType() !== 'Polygon' && feature.getGeometry()?.getType() !== 'MultiPolygon') { // We only have polygon, linestring and points and only multi/polygons have area
             return '';
         }
         return this.settings.sizeInHa ? `(${(getArea(feature.getGeometry()) / 10000).toFixed(2)} ha)` : `(${getArea(feature.getGeometry()).toFixed(2)} m2)`;
     }
+    reset() {
+        this._undoRedo.reset();
+        this.highlightedId = null;
+        this._highlight.clear();
+        this.zoomToAll();
+    }
     zoomToAll() {
-        const formatter = new GeoJSON({ dataProjection: 'EPSG:25832', featureProjection: 'EPSG:25832' });
-        const allTheFeatures = formatter.writeFeaturesObject(this._drawLayerService.allFeatures);
-        console.log("🚀 ~ ActiveObjectsComponent ~ zoomToAll ~ allTheFeatures:", JSON.stringify(allTheFeatures));
         this._zoomService.zoomToFeatures(this._drawLayerService.allFeatures);
+        this.isZoomedToAll = true;
+    }
+    onMapInteraction() {
+        this.isZoomedToAll = false;
     }
     highlight(id) {
         if (this.highlightedId === id) {
@@ -1827,6 +3241,7 @@ class ActiveObjectsComponent {
     }
     delete(id) {
         this._drawLayerService.remove(id);
+        this._centerPointService.handleFeatureDeleted(id);
         this._highlight.clear();
     }
     togglePanel() {
@@ -1851,6 +3266,9 @@ class ActiveObjectsComponent {
             if (savedPosition) {
                 this.dragPosition = JSON.parse(savedPosition);
             }
+            else if (this.profile) {
+                this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.activeObjectsInitialPosition);
+            }
         }
         catch (error) {
             console.error('Error loading position from localStorage:', error);
@@ -1858,33 +3276,167 @@ class ActiveObjectsComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ActiveObjectsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ActiveObjectsComponent, isStandalone: true, selector: "activeObjects", inputs: { settings: "settings" }, ngImport: i0, template: "<div class=\"active-objects-wrapper\" \n    cdkDrag \n    cdkDragBoundary=\".map-container\" \n    [cdkDragFreeDragPosition]=\"dragPosition\"\n    (cdkDragEnded)=\"onDragEnded($event)\"\n    [class.collapsed]=\"collapsed\">\n    <div class=\"drag-handle-active-objects\" cdkDragHandle>\n        <mat-icon class=\"zoom-icon\" (click)=\"zoomToAll()\">share_reviewsr</mat-icon>\n        @if(!collapsed) {\n            <h4>Aktive flader</h4>\n        }\n        <mat-icon class=\"toggle-icon\" (click)=\"togglePanel()\">\n            {{ collapsed ? 'flip_to_front' : 'remove' }}\n        </mat-icon>\n    </div>\n    <div class=\"active-objects-container\">\n        @if(!collapsed) {\n            <input                 \n                type=\"range\"\n                min=\"0\"\n                max=\"1\"\n                step=\"0.05\"\n                [(ngModel)]=\"opacity\"\n                (input)=\"updateOpacity()\"\n                (mousedown)=\"stopDrag($event)\"\n                (touchstart)=\"stopDrag($event)\"\n                (pointerdown)=\"stopDrag($event)\"\n                >\n        }\n\n        @if(!collapsed) {\n            <div class=\"active-objects-content\">\n                <mat-icon class=\"zoom-icon\" (click)=\"zoomToAll()\">highlight</mat-icon>\n                @for(featureTypeObj of activeFeatures; track featureTypeObj.featureType) {\n                    <mat-expansion-panel>\n                        <mat-expansion-panel-header \n                        [matTooltip]=\"featureTypeObj.display\"  \n                        [matTooltipShowDelay]=\"200\"\n                        [matTooltipHideDelay]=\"300\" \n                        matTooltipPosition=\"right\">\n                            <span class=\"panel-title\">\n                                {{featureTypeObj.display}} ({{featureTypeObj.features.length}})\n                            </span>\n                        </mat-expansion-panel-header>\n                        <div class=\"item-list\">\n                            @for(item of featureTypeObj.features; track item.id) {\n                                <div class=\"item\">\n                                    <div class=\"item-text\">\n                                        <span class=\"item-id\">{{item.id}}</span>\n                                        <span class=\"item-area\">{{item.area}}</span>\n                                    </div>\n                                    <mat-icon *ngIf=\"!item.locked\" (click)=\"delete(item.id)\">delete</mat-icon>\n                                    <mat-icon (click)=\"highlight(item.id)\" [class.highlight-active]=\"highlightedId === item.id\">highlight</mat-icon>\n                                </div>\n                            }\n                        </div>\n                    </mat-expansion-panel>\n                }\n            </div>\n        }\n    </div>    \n</div>", styles: ["@charset \"UTF-8\";.active-objects-wrapper{position:absolute;top:15em;left:1em;z-index:1000;cursor:grab;box-shadow:0 2px 10px #0000001a;background:color-mix(in srgb,#000 60%,transparent);width:fit-content;max-width:295px;transition:width .3s ease}.active-objects-wrapper.collapsed{width:70px;max-width:150px}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .panel-title{display:block;overflow:visible;text-overflow:clip;white-space:normal;max-width:220px;margin-right:10px;line-height:1.3;word-break:break-word}.item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:4px;background:color-mix(in srgb,#000 60%,transparent)!important;transition:all .2s ease;font-size:14px;color:#fff;min-height:40px;cursor:default}.item .item-text{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}.item .item-id{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px}.item .item-area{font-size:12px;color:#ccc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item mat-icon{cursor:pointer;color:#f44336;font-size:18px;width:18px;height:18px;flex-shrink:0;margin-left:8px;transition:color .2s ease,background .2s ease}.item mat-icon:hover{color:#d32f2f}.highlight-active{color:#4caf50!important;text-shadow:0 0 6px #4caf50;transform:scale(1.1);transition:all .2s ease}.drag-handle-active-objects{display:flex;align-items:center;justify-content:space-between;background:color-mix(in srgb,#000 0%,transparent);border-radius:8px 8px 0 0;padding:4px 8px;cursor:grab}.drag-handle-active-objects h4{margin:0;padding:5px;background:transparent;font-weight:600;color:#fff;flex:1;font-size:16px;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.drag-handle-active-objects .zoom-icon{color:#fff;font-size:18px;width:18px;height:18px}.drag-handle-active-objects .toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:22px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0;margin:0}.drag-handle-active-objects .toggle-icon:hover{color:#ffffffb3;background:#1976d214}.active-objects-container{display:flex;flex-direction:column;align-items:center;width:100%;gap:10px;transition:all .3s ease;cursor:default;box-sizing:border-box}.active-objects-container .panel-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:5px;cursor:default}.active-objects-container .panel-header h4{margin:0;padding:5px;background:transparent;font-weight:600;color:#fff;flex:1;font-size:16px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.active-objects-container .panel-header .toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:22px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0;margin:0}.active-objects-container .panel-header .toggle-icon:hover{color:#ffffffb3;background:#1976d214}.active-objects-container .collapsed-title{color:#fff;font-weight:600;font-size:12px;padding:8px 4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.active-objects-container .collapsed-title:hover{color:#1976d2}.active-objects-content{display:block;max-height:278px;overflow:auto}.active-objects-content::-webkit-scrollbar{width:8px;border-radius:10px;border:5px solid transparent}.active-objects-content::-webkit-scrollbar-thumb{background:#0000004d;border:5px solid transparent;border-radius:10px;background-clip:padding-box}.active-objects-content::-webkit-scrollbar-thumb:hover{background:#0006;background-clip:padding-box;border:3px solid transparent}.active-objects-content .zoom-icon{color:#4caf50!important;border-radius:50%;padding:6px;margin:4px;cursor:pointer;transition:all .3s ease;font-size:20px;width:20px;height:20px}.active-objects-content .zoom-icon:hover{background:#4caf5033!important}mat-expansion-panel{border-radius:0!important;box-shadow:none!important}mat-expansion-panel:last-child{border-bottom:none}mat-expansion-panel ::ng-deep .mat-expansion-panel-header{padding:0 16px;font-weight:500}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-content{display:flex;justify-content:space-between;align-items:center;color:#fff}mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0}.item-list{display:flex;flex-direction:column;gap:4px;padding:8px;max-height:300px;overflow-y:auto}.item-list::-webkit-scrollbar{width:6px}.item-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.item-list::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.item-list::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width: 768px){.active-objects-wrapper{right:.5em;top:8em;max-width:280px;width:280px}.item{font-size:13px;padding:6px 10px}}@media (max-width: 480px){.active-objects-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.item-list{max-height:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ActiveObjectsComponent, isStandalone: true, selector: "activeObjects", inputs: { settings: "settings", profile: "profile" }, outputs: { sessionDone: "sessionDone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"active-objects-wrapper\" \n    cdkDrag \n    cdkDragBoundary=\".map-container\" \n    [cdkDragFreeDragPosition]=\"dragPosition\"\n    (cdkDragEnded)=\"onDragEnded($event)\"\n    [class.collapsed]=\"collapsed\">\n    <div class=\"drag-handle-active-objects\" cdkDragHandle>\n        <mat-icon class=\"zoom-icon\" (click)=\"zoomToAll()\">dynamic_form</mat-icon>\n      \n        <div class=\"right-icons\">\n          <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n          <mat-icon class=\"toggle-icon\" (click)=\"togglePanel()\">\n            {{ collapsed ? 'flip_to_front' : 'remove' }}\n          </mat-icon>\n        </div>\n      </div>\n      \n    <div class=\"active-objects-container\">\n        @if(!collapsed) {\n            <input                 \n                type=\"range\"\n                min=\"0\"\n                max=\"1\"\n                step=\"0.05\"\n                [(ngModel)]=\"opacity\"\n                (input)=\"updateOpacity()\"\n                (mousedown)=\"stopDrag($event)\"\n                (touchstart)=\"stopDrag($event)\"\n                (pointerdown)=\"stopDrag($event)\"\n                >\n        }\n\n        @if(!collapsed) {\n            <div class=\"active-objects-content\">\n                <div class=\"header-icons\">\n                    <mat-icon \n                    class=\"zoom-icon\" \n                    [class.zoom-active]=\"isZoomedToAll\"\n                    (click)=\"zoomToAll()\" \n                    matTooltip=\"Zoom til alle\" \n                    matTooltipPosition=\"above\">\n                    fit_screen\n                </mat-icon>                    \n                <mat-icon class=\"reset-icon\" (click)=\"reset()\" matTooltip=\"Nulstilles\" matTooltipPosition=\"above\">replay</mat-icon>\n                </div>\n                @for(featureTypeObj of activeFeatures; track featureTypeObj.featureType) {\n                    <mat-expansion-panel>\n                        <mat-expansion-panel-header \n                        [matTooltip]=\"featureTypeObj.display\"  \n                        [matTooltipShowDelay]=\"200\"\n                        [matTooltipHideDelay]=\"300\" \n                        matTooltipPosition=\"right\">\n                            <span class=\"panel-title\">\n                                {{featureTypeObj.display}} ({{featureTypeObj.features.length}})\n                            </span>\n                        </mat-expansion-panel-header>\n                        <div class=\"item-list\">\n                            @for(item of featureTypeObj.features; track item.id) {\n                                <div class=\"item\">\n                                    <div class=\"item-text\">\n                                        <span class=\"item-id\">{{item.id}}</span>\n                                        <span class=\"item-area\">{{item.area}}</span>\n                                        @if(item.containedMissingIn && item.containedMissingIn.length > 0) {\n                                            <span>Udenfor {{item.containedMissingIn.join(', ')}} </span>                    \n                                        }\n                                    </div>\n                                    @if(!item.locked) {\n                                        <mat-icon (click)=\"delete(item.id)\">delete</mat-icon>\n                                    }\n                                    <mat-icon (click)=\"highlight(item.id)\" [class.highlight-active]=\"highlightedId === item.id\">power_settings_new</mat-icon>\n                                </div>\n                            }\n                        </div>\n                    </mat-expansion-panel>\n                }\n                @if(!centerPointOk) {\n                    <span>\n                        Der er ikke noget centerpunkt og det skal der v\u00E6re\n                    </span>\n                } @else {\n                    @if (endSessionEnabled) {\n                        <button (click)=\"endSession()\">Afslut</button>\n                    }\n                }\n            </div>\n        }\n    </div>    \n</div>", styles: [".active-objects-wrapper{position:absolute;top:8em;left:1em;z-index:2;cursor:grab;box-shadow:0 2px 10px #0000001a;background:#292a2d;width:350px;max-width:350px;transition:width .3s ease,max-width .3s ease;border-radius:5px 5px 0 0}.active-objects-wrapper.collapsed{width:90px}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px;margin-right:10px;line-height:1.3;font-weight:600;color:#bdc1c3cc;font-size:17px}.item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:4px;background:color-mix(in srgb,#000 60%,transparent)!important;transition:all .2s ease;font-size:14px;color:#fff;min-height:40px;cursor:default}.item .item-text{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}.item .item-id{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px;max-width:250px;font-size:13px}.item .item-area{font-size:12px;color:#ccc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item mat-icon{cursor:pointer;color:#f44336;font-size:18px;width:18px;height:18px;flex-shrink:0;margin-left:8px;transition:color .2s ease,background .2s ease}.item mat-icon:hover{color:#d32f2f}.highlight-active{color:#4caf50!important;text-shadow:0 0 6px #4caf50;transform:scale(1.1);transition:all .2s ease}.drag-handle-active-objects{display:flex;align-items:center;justify-content:space-between;background:#292a2d;padding:2px 8px;cursor:grab;color:#fff;border-radius:5px 5px 0 0}.drag-handle-active-objects .toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.drag-handle-active-objects .toggle-icon:hover{color:#fff;background:#ffffff26}.right-icons{display:flex;align-items:center;gap:6px}.right-icons .drag-indicator-right{font-size:18px!important;width:18px!important;height:18px!important}.active-objects-container{display:flex;flex-direction:column;align-items:center;width:100%;gap:10px;transition:all .3s ease;cursor:default;box-sizing:border-box}.active-objects-container .panel-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;cursor:default;background:color-mix(in srgb,#000 70%,transparent);border-bottom:1px solid rgba(255,255,255,.1)}.active-objects-container .collapsed-title{color:#fff;font-weight:600;font-size:12px;padding:8px 4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.active-objects-container .collapsed-title:hover{color:#1976d2}.header-icons{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;padding:0 10px!important}.header-icons .reset-icon{cursor:pointer;color:#fff;font-size:20px;width:20px;height:20px;transition:all .2s ease;padding:4px}.header-icons .reset-icon:hover{color:#ff9800}.active-objects-container input[type=range]{width:95%;margin:8px auto}.active-objects-content{display:block;width:100%;max-height:278px;overflow:auto;background:#000}.active-objects-content::-webkit-scrollbar{width:12px}.active-objects-content::-webkit-scrollbar-track{background:#757474;border-radius:8px}.active-objects-content::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.active-objects-content::-webkit-scrollbar-thumb:hover{background:#0f1012}.active-objects-content::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.active-objects-content::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.active-objects-content::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.active-objects-content .zoom-icon{color:#fff;font-size:18px;width:18px;height:18px;opacity:.6;transition:all .2s ease}.active-objects-content .zoom-icon:hover{color:#4caf50;opacity:1}.active-objects-content .zoom-icon.zoom-active{color:#4caf50!important;text-shadow:0 0 6px #4caf50;opacity:1}mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%}mat-expansion-panel:last-child{border-bottom:none}mat-expansion-panel ::ng-deep .mat-expansion-panel-header{padding:0 16px;font-weight:500}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-content{display:flex;justify-content:space-between;align-items:center;color:#fff}mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0}.item-list{display:flex;flex-direction:column;padding:8px}@media (max-width: 768px){.active-objects-wrapper{right:.5em;top:8em;max-width:280px;width:280px}.item{font-size:13px;padding:6px 10px}}@media (max-width: 480px){.active-objects-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.item-list{max-height:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ActiveObjectsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'activeObjects', imports: [CommonModule, FormsModule, MatExpansionModule, MatIconModule, DragDropModule, MatTooltipModule], template: "<div class=\"active-objects-wrapper\" \n    cdkDrag \n    cdkDragBoundary=\".map-container\" \n    [cdkDragFreeDragPosition]=\"dragPosition\"\n    (cdkDragEnded)=\"onDragEnded($event)\"\n    [class.collapsed]=\"collapsed\">\n    <div class=\"drag-handle-active-objects\" cdkDragHandle>\n        <mat-icon class=\"zoom-icon\" (click)=\"zoomToAll()\">share_reviewsr</mat-icon>\n        @if(!collapsed) {\n            <h4>Aktive flader</h4>\n        }\n        <mat-icon class=\"toggle-icon\" (click)=\"togglePanel()\">\n            {{ collapsed ? 'flip_to_front' : 'remove' }}\n        </mat-icon>\n    </div>\n    <div class=\"active-objects-container\">\n        @if(!collapsed) {\n            <input                 \n                type=\"range\"\n                min=\"0\"\n                max=\"1\"\n                step=\"0.05\"\n                [(ngModel)]=\"opacity\"\n                (input)=\"updateOpacity()\"\n                (mousedown)=\"stopDrag($event)\"\n                (touchstart)=\"stopDrag($event)\"\n                (pointerdown)=\"stopDrag($event)\"\n                >\n        }\n\n        @if(!collapsed) {\n            <div class=\"active-objects-content\">\n                <mat-icon class=\"zoom-icon\" (click)=\"zoomToAll()\">highlight</mat-icon>\n                @for(featureTypeObj of activeFeatures; track featureTypeObj.featureType) {\n                    <mat-expansion-panel>\n                        <mat-expansion-panel-header \n                        [matTooltip]=\"featureTypeObj.display\"  \n                        [matTooltipShowDelay]=\"200\"\n                        [matTooltipHideDelay]=\"300\" \n                        matTooltipPosition=\"right\">\n                            <span class=\"panel-title\">\n                                {{featureTypeObj.display}} ({{featureTypeObj.features.length}})\n                            </span>\n                        </mat-expansion-panel-header>\n                        <div class=\"item-list\">\n                            @for(item of featureTypeObj.features; track item.id) {\n                                <div class=\"item\">\n                                    <div class=\"item-text\">\n                                        <span class=\"item-id\">{{item.id}}</span>\n                                        <span class=\"item-area\">{{item.area}}</span>\n                                    </div>\n                                    <mat-icon *ngIf=\"!item.locked\" (click)=\"delete(item.id)\">delete</mat-icon>\n                                    <mat-icon (click)=\"highlight(item.id)\" [class.highlight-active]=\"highlightedId === item.id\">highlight</mat-icon>\n                                </div>\n                            }\n                        </div>\n                    </mat-expansion-panel>\n                }\n            </div>\n        }\n    </div>    \n</div>", styles: ["@charset \"UTF-8\";.active-objects-wrapper{position:absolute;top:15em;left:1em;z-index:1000;cursor:grab;box-shadow:0 2px 10px #0000001a;background:color-mix(in srgb,#000 60%,transparent);width:fit-content;max-width:295px;transition:width .3s ease}.active-objects-wrapper.collapsed{width:70px;max-width:150px}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .panel-title{display:block;overflow:visible;text-overflow:clip;white-space:normal;max-width:220px;margin-right:10px;line-height:1.3;word-break:break-word}.item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:4px;background:color-mix(in srgb,#000 60%,transparent)!important;transition:all .2s ease;font-size:14px;color:#fff;min-height:40px;cursor:default}.item .item-text{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}.item .item-id{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px}.item .item-area{font-size:12px;color:#ccc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item mat-icon{cursor:pointer;color:#f44336;font-size:18px;width:18px;height:18px;flex-shrink:0;margin-left:8px;transition:color .2s ease,background .2s ease}.item mat-icon:hover{color:#d32f2f}.highlight-active{color:#4caf50!important;text-shadow:0 0 6px #4caf50;transform:scale(1.1);transition:all .2s ease}.drag-handle-active-objects{display:flex;align-items:center;justify-content:space-between;background:color-mix(in srgb,#000 0%,transparent);border-radius:8px 8px 0 0;padding:4px 8px;cursor:grab}.drag-handle-active-objects h4{margin:0;padding:5px;background:transparent;font-weight:600;color:#fff;flex:1;font-size:16px;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.drag-handle-active-objects .zoom-icon{color:#fff;font-size:18px;width:18px;height:18px}.drag-handle-active-objects .toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:22px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0;margin:0}.drag-handle-active-objects .toggle-icon:hover{color:#ffffffb3;background:#1976d214}.active-objects-container{display:flex;flex-direction:column;align-items:center;width:100%;gap:10px;transition:all .3s ease;cursor:default;box-sizing:border-box}.active-objects-container .panel-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:5px;cursor:default}.active-objects-container .panel-header h4{margin:0;padding:5px;background:transparent;font-weight:600;color:#fff;flex:1;font-size:16px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.active-objects-container .panel-header .toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:22px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0;margin:0}.active-objects-container .panel-header .toggle-icon:hover{color:#ffffffb3;background:#1976d214}.active-objects-container .collapsed-title{color:#fff;font-weight:600;font-size:12px;padding:8px 4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.active-objects-container .collapsed-title:hover{color:#1976d2}.active-objects-content{display:block;max-height:278px;overflow:auto}.active-objects-content::-webkit-scrollbar{width:8px;border-radius:10px;border:5px solid transparent}.active-objects-content::-webkit-scrollbar-thumb{background:#0000004d;border:5px solid transparent;border-radius:10px;background-clip:padding-box}.active-objects-content::-webkit-scrollbar-thumb:hover{background:#0006;background-clip:padding-box;border:3px solid transparent}.active-objects-content .zoom-icon{color:#4caf50!important;border-radius:50%;padding:6px;margin:4px;cursor:pointer;transition:all .3s ease;font-size:20px;width:20px;height:20px}.active-objects-content .zoom-icon:hover{background:#4caf5033!important}mat-expansion-panel{border-radius:0!important;box-shadow:none!important}mat-expansion-panel:last-child{border-bottom:none}mat-expansion-panel ::ng-deep .mat-expansion-panel-header{padding:0 16px;font-weight:500}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-content{display:flex;justify-content:space-between;align-items:center;color:#fff}mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0}.item-list{display:flex;flex-direction:column;gap:4px;padding:8px;max-height:300px;overflow-y:auto}.item-list::-webkit-scrollbar{width:6px}.item-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.item-list::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px}.item-list::-webkit-scrollbar-thumb:hover{background:#a8a8a8}@media (max-width: 768px){.active-objects-wrapper{right:.5em;top:8em;max-width:280px;width:280px}.item{font-size:13px;padding:6px 10px}}@media (max-width: 480px){.active-objects-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.item-list{max-height:200px}}\n"] }]
+            args: [{ selector: 'activeObjects', imports: [CommonModule, FormsModule, MatExpansionModule, MatIconModule, DragDropModule, MatTooltipModule], template: "<div class=\"active-objects-wrapper\" \n    cdkDrag \n    cdkDragBoundary=\".map-container\" \n    [cdkDragFreeDragPosition]=\"dragPosition\"\n    (cdkDragEnded)=\"onDragEnded($event)\"\n    [class.collapsed]=\"collapsed\">\n    <div class=\"drag-handle-active-objects\" cdkDragHandle>\n        <mat-icon class=\"zoom-icon\" (click)=\"zoomToAll()\">dynamic_form</mat-icon>\n      \n        <div class=\"right-icons\">\n          <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n          <mat-icon class=\"toggle-icon\" (click)=\"togglePanel()\">\n            {{ collapsed ? 'flip_to_front' : 'remove' }}\n          </mat-icon>\n        </div>\n      </div>\n      \n    <div class=\"active-objects-container\">\n        @if(!collapsed) {\n            <input                 \n                type=\"range\"\n                min=\"0\"\n                max=\"1\"\n                step=\"0.05\"\n                [(ngModel)]=\"opacity\"\n                (input)=\"updateOpacity()\"\n                (mousedown)=\"stopDrag($event)\"\n                (touchstart)=\"stopDrag($event)\"\n                (pointerdown)=\"stopDrag($event)\"\n                >\n        }\n\n        @if(!collapsed) {\n            <div class=\"active-objects-content\">\n                <div class=\"header-icons\">\n                    <mat-icon \n                    class=\"zoom-icon\" \n                    [class.zoom-active]=\"isZoomedToAll\"\n                    (click)=\"zoomToAll()\" \n                    matTooltip=\"Zoom til alle\" \n                    matTooltipPosition=\"above\">\n                    fit_screen\n                </mat-icon>                    \n                <mat-icon class=\"reset-icon\" (click)=\"reset()\" matTooltip=\"Nulstilles\" matTooltipPosition=\"above\">replay</mat-icon>\n                </div>\n                @for(featureTypeObj of activeFeatures; track featureTypeObj.featureType) {\n                    <mat-expansion-panel>\n                        <mat-expansion-panel-header \n                        [matTooltip]=\"featureTypeObj.display\"  \n                        [matTooltipShowDelay]=\"200\"\n                        [matTooltipHideDelay]=\"300\" \n                        matTooltipPosition=\"right\">\n                            <span class=\"panel-title\">\n                                {{featureTypeObj.display}} ({{featureTypeObj.features.length}})\n                            </span>\n                        </mat-expansion-panel-header>\n                        <div class=\"item-list\">\n                            @for(item of featureTypeObj.features; track item.id) {\n                                <div class=\"item\">\n                                    <div class=\"item-text\">\n                                        <span class=\"item-id\">{{item.id}}</span>\n                                        <span class=\"item-area\">{{item.area}}</span>\n                                        @if(item.containedMissingIn && item.containedMissingIn.length > 0) {\n                                            <span>Udenfor {{item.containedMissingIn.join(', ')}} </span>                    \n                                        }\n                                    </div>\n                                    @if(!item.locked) {\n                                        <mat-icon (click)=\"delete(item.id)\">delete</mat-icon>\n                                    }\n                                    <mat-icon (click)=\"highlight(item.id)\" [class.highlight-active]=\"highlightedId === item.id\">power_settings_new</mat-icon>\n                                </div>\n                            }\n                        </div>\n                    </mat-expansion-panel>\n                }\n                @if(!centerPointOk) {\n                    <span>\n                        Der er ikke noget centerpunkt og det skal der v\u00E6re\n                    </span>\n                } @else {\n                    @if (endSessionEnabled) {\n                        <button (click)=\"endSession()\">Afslut</button>\n                    }\n                }\n            </div>\n        }\n    </div>    \n</div>", styles: [".active-objects-wrapper{position:absolute;top:8em;left:1em;z-index:2;cursor:grab;box-shadow:0 2px 10px #0000001a;background:#292a2d;width:350px;max-width:350px;transition:width .3s ease,max-width .3s ease;border-radius:5px 5px 0 0}.active-objects-wrapper.collapsed{width:90px}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px;margin-right:10px;line-height:1.3;font-weight:600;color:#bdc1c3cc;font-size:17px}.item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:4px;background:color-mix(in srgb,#000 60%,transparent)!important;transition:all .2s ease;font-size:14px;color:#fff;min-height:40px;cursor:default}.item .item-text{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}.item .item-id{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px;max-width:250px;font-size:13px}.item .item-area{font-size:12px;color:#ccc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item mat-icon{cursor:pointer;color:#f44336;font-size:18px;width:18px;height:18px;flex-shrink:0;margin-left:8px;transition:color .2s ease,background .2s ease}.item mat-icon:hover{color:#d32f2f}.highlight-active{color:#4caf50!important;text-shadow:0 0 6px #4caf50;transform:scale(1.1);transition:all .2s ease}.drag-handle-active-objects{display:flex;align-items:center;justify-content:space-between;background:#292a2d;padding:2px 8px;cursor:grab;color:#fff;border-radius:5px 5px 0 0}.drag-handle-active-objects .toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.drag-handle-active-objects .toggle-icon:hover{color:#fff;background:#ffffff26}.right-icons{display:flex;align-items:center;gap:6px}.right-icons .drag-indicator-right{font-size:18px!important;width:18px!important;height:18px!important}.active-objects-container{display:flex;flex-direction:column;align-items:center;width:100%;gap:10px;transition:all .3s ease;cursor:default;box-sizing:border-box}.active-objects-container .panel-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;cursor:default;background:color-mix(in srgb,#000 70%,transparent);border-bottom:1px solid rgba(255,255,255,.1)}.active-objects-container .collapsed-title{color:#fff;font-weight:600;font-size:12px;padding:8px 4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.active-objects-container .collapsed-title:hover{color:#1976d2}.header-icons{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;padding:0 10px!important}.header-icons .reset-icon{cursor:pointer;color:#fff;font-size:20px;width:20px;height:20px;transition:all .2s ease;padding:4px}.header-icons .reset-icon:hover{color:#ff9800}.active-objects-container input[type=range]{width:95%;margin:8px auto}.active-objects-content{display:block;width:100%;max-height:278px;overflow:auto;background:#000}.active-objects-content::-webkit-scrollbar{width:12px}.active-objects-content::-webkit-scrollbar-track{background:#757474;border-radius:8px}.active-objects-content::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.active-objects-content::-webkit-scrollbar-thumb:hover{background:#0f1012}.active-objects-content::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.active-objects-content::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.active-objects-content::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.active-objects-content .zoom-icon{color:#fff;font-size:18px;width:18px;height:18px;opacity:.6;transition:all .2s ease}.active-objects-content .zoom-icon:hover{color:#4caf50;opacity:1}.active-objects-content .zoom-icon.zoom-active{color:#4caf50!important;text-shadow:0 0 6px #4caf50;opacity:1}mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%}mat-expansion-panel:last-child{border-bottom:none}mat-expansion-panel ::ng-deep .mat-expansion-panel-header{padding:0 16px;font-weight:500}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-content{display:flex;justify-content:space-between;align-items:center;color:#fff}mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0}.item-list{display:flex;flex-direction:column;padding:8px}@media (max-width: 768px){.active-objects-wrapper{right:.5em;top:8em;max-width:280px;width:280px}.item{font-size:13px;padding:6px 10px}}@media (max-width: 480px){.active-objects-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.item-list{max-height:200px}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { settings: [{
                 type: Input,
                 args: [{ required: true }]
+            }], sessionDone: [{
+                type: Output
+            }], profile: [{
+                type: Input,
+                args: [{ required: true }]
             }] } });
 
+class WFSSearchService {
+    name = 'WFS Search';
+    _http = inject(HttpClient);
+    wfsFormat = new WFS();
+    wktFormat = new WKT();
+    _searcheableLayers = [];
+    geoJsonFormat = new GeoJSON({ dataProjection: 'EPSG:25832', featureProjection: 'EPSG:25832' });
+    _serializer = new XMLSerializer();
+    search(searchValue, geometry, maxCount = 5) {
+        const wftSearches = [];
+        this._searcheableLayers.flatMap(layer => {
+            const filter = searchValue ? like(layer.searchField, `*${searchValue}*`, '*', '?', '/', false) :
+                geometry ? intersects(layer.geometryField, geometry, 'EPSG:25832') : undefined;
+            var searchFeature = this.wfsFormat.writeGetFeature({
+                featureTypes: [layer.featureType.includes(':') ? layer.featureType.split(':')[1] : ''],
+                outputFormat: 'application/json',
+                featureNS: '',
+                featurePrefix: '',
+                srsName: 'EPSG:25832',
+                maxFeatures: maxCount,
+                filter
+            });
+            const fieldsToExclude = new Set(layer.fieldsToExcludeFromInfoFromInfo.split(',').map(f => f.toLowerCase().trim()));
+            wftSearches.push(this._http.post(layer.baseUrl.replace('wms', 'wfs'), this._serializer.serializeToString(searchFeature), { headers: { 'Content-Type': 'text/xml' }, responseType: 'json' }).pipe(map$1(r => {
+                const result = {
+                    title: layer.name,
+                    total: r.numberMatched ?? 0,
+                    items: r.features.map(f => ({ header: f.properties[layer.headerField], wkt: this._formatWKT(f), metadata: this._mapFeatureMetadata(f, fieldsToExclude), showMetadata: false }))
+                };
+                return result;
+            })));
+        });
+        return combineLatest(wftSearches);
+    }
+    onSelect(searchResult, targetSrs) {
+        // TO DO : add logic for when an item is selected (right now, the map search component does a highlight on it)
+    }
+    onClear() {
+        // TO DO : add logic for when the results list is cleared
+    }
+    setSearcheableLayers(layers) {
+        this._searcheableLayers = layers;
+    }
+    _formatWKT(feature) {
+        const olFeature = this.geoJsonFormat.readFeature(feature);
+        return this.wktFormat.writeFeature(olFeature);
+    }
+    _mapFeatureMetadata(f, excludeSet) {
+        const result = {};
+        const props = f.properties || {};
+        for (const [key, value] of Object.entries(props)) {
+            if (excludeSet.has(key.toLowerCase()))
+                continue;
+            const kind = this._getValueKind(value);
+            result[key] = { kind, data: value, name: key };
+        }
+        return [result];
+    }
+    _getValueKind(value) {
+        const imgTypes = ['.png', '.jpg', '.gif', '.jpeg'];
+        if (typeof value === 'string') {
+            if (value.startsWith('http://') || value.startsWith('https://')) {
+                if (imgTypes.some(ext => value.endsWith(ext))) {
+                    return 'img';
+                }
+                return 'url';
+            }
+        }
+        return 'data';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WFSSearchService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WFSSearchService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: WFSSearchService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class MapSearchComponent {
     searchAddress = '';
-    allResults = ['address1', 'address2', 'address3', 'address4'];
+    profile;
+    // allResults = ['address1', 'address2', 'address3', 'address4'];
     filteredResults = [];
     collapsed = true;
     dragPosition = { x: 0, y: 0 };
     POSITION_STORAGE_KEY = 'mapSearchPosition';
+    _mapFilteredLayerGroupsKeyName = 'mapFilteredLayerGroups';
+    _highlight = inject(HighlightService);
+    _searchSubject = new Subject();
+    _searchService = inject(SearchProviderService);
+    _searchProviderService = inject(SearchProviderService);
+    _wfsSearch = inject(WFSSearchService);
+    _layerHelperService = inject(LayerHelperService);
+    _layoutService = inject(LayoutService);
     ngOnInit() {
+        this._layerHelperService.activeLayersChanged
+            .subscribe(() => this._addWFSSearchLayers());
         this.filterResults();
         this._loadPosition();
+        this._addWFSSearch();
+        this._searchSubject.pipe(debounceTime(200), distinctUntilChanged(), switchMap(value => this._searchService.search(value, undefined))).subscribe({
+            next: result => {
+                this.filteredResults = result.filter(result => result.total > 0);
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['profile'] && this.profile) {
+            this._loadPosition();
+            this._addWFSSearchLayers();
+        }
+    }
+    _addWFSSearch() {
+        this._searchProviderService.searchProviders = [];
+        this._searchProviderService.searchProviders.push(this._wfsSearch);
+    }
+    _addWFSSearchLayers() {
+        if (this.profile) {
+            const cacheValue = localStorage.getItem(`${this._mapFilteredLayerGroupsKeyName}_${this.profile.id}`);
+            if (cacheValue) {
+                const cachedProfileInfo = JSON.parse(cacheValue);
+                const visibleLayerIds = cachedProfileInfo.cachedLayerGroups
+                    .flatMap(group => group.layers)
+                    .filter(layer => layer.visible)
+                    .map(layer => layer.id);
+                const searcheableLayers = cachedProfileInfo.profile
+                    .layerGroups.flatMap(group => group.layers)
+                    .filter(layer => layer.wfsSearchable && visibleLayerIds.includes(layer.id))
+                    .map(layer => ({ featureType: layer.layers, baseUrl: layer.baseUrl, name: layer.name,
+                    headerField: layer.headerField, searchField: layer.searchField, geometryField: layer.geometryField,
+                    fieldsToExcludeFromInfoFromInfo: layer.fieldsToExcludeFromInfoFromInfo }));
+                this._wfsSearch.setSearcheableLayers(searcheableLayers);
+            }
+        }
     }
     filterResults() {
         if (!this.searchAddress) {
             this.filteredResults = [];
             return;
         }
-        this.filteredResults = this.allResults.filter(r => r.toLowerCase().includes(this.searchAddress.toLowerCase()));
+        this._searchSubject.next(this.searchAddress);
+        // this._wfsSearch.search(this.searchAddress).subscribe(r => {
+        //   this.filteredResults = [r];      
+        // });
     }
     toggleSearch() {
         this.collapsed = !this.collapsed;
@@ -1893,6 +3445,10 @@ class MapSearchComponent {
             this.filterResults();
         }
     }
+    highlight(wkt, event) {
+        event.stopPropagation();
+        this._highlight.highlight(wkt);
+    }
     onDragEnded(event) {
         const position = event.source.getFreeDragPosition();
         this.dragPosition = position;
@@ -1912,6 +3468,9 @@ class MapSearchComponent {
             if (savedPosition) {
                 this.dragPosition = JSON.parse(savedPosition);
             }
+            else if (this.profile) {
+                this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.searchInitialPosition);
+            }
         }
         catch (error) {
             console.error('Error loading position from localStorage:', error);
@@ -1919,7 +3478,7 @@ class MapSearchComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MapSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MapSearchComponent, isStandalone: true, selector: "lib-map-search", ngImport: i0, template: "<div class=\"search-container\" \n  cdkDrag \n  cdkDragBoundary=\".map-container\" \n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"onDragEnded($event)\"\n  [class.collapsed]=\"collapsed\">\n  <div class=\"drag-handle\" cdkDragHandle>\n    <mat-icon>search</mat-icon>\n    <mat-icon class=\"toggle-icon\" (click)=\"toggleSearch()\">{{ collapsed ? 'flip_to_front' : 'remove' }}</mat-icon>\n  </div>\n  <div class=\"search-content\" *ngIf=\"!collapsed\">\n    <mat-form-field appearance=\"outline\" class=\"search-field\">\n      <mat-label>S\u00F8ge</mat-label>\n      <input\n        type=\"text\"\n        matInput\n        [(ngModel)]=\"searchAddress\"\n        [matAutocomplete]=\"auto\"\n        (input)=\"filterResults()\"\n      />\n      <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\">\n          {{ result }}\n        </mat-option>\n      </mat-autocomplete>\n    </mat-form-field>\n  </div>\n</div>", styles: [".search-container{position:absolute;top:8em;left:1em;z-index:1000;cursor:grab;max-width:400px;min-width:48px;width:auto}.search-container.collapsed{width:48px;min-width:68px;max-width:48px}.search-container.cdk-drag-dragging{opacity:.8;cursor:grab}.drag-handle{display:flex;align-items:center;justify-content:space-between;background:color-mix(in srgb,#000 60%,transparent);padding:4px;cursor:grab}.drag-handle mat-icon:not(.toggle-icon){color:#fff;font-size:20px;width:20px;height:20px}.search-content{display:flex;align-items:center;background:color-mix(in srgb,#000 60%,transparent);padding:5px;transition:all .3s ease;box-sizing:border-box;cursor:default}.toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}.toggle-icon:hover{color:#2196f3;background:#2196f314}.search-field{width:100%;min-width:200px;cursor:pointer;flex:1}.search-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent}.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important;border-width:1.5px!important;transition:border-color .3s ease,border-width .3s ease}.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important}.search-field ::ng-deep .mat-mdc-form-field-label{color:#fff!important;font-weight:500;font-size:15px}.search-field ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-form-field-label{color:#2196f3!important}.search-field ::ng-deep .mat-mdc-input-element{font-size:15px;color:#fff;font-weight:400;line-height:1.5}.search-field ::ng-deep .mat-mdc-input-element::placeholder{color:#ccc;font-weight:400;opacity:.8}.search-field ::ng-deep .mdc-floating-label{padding:0 4px;left:40px!important}::ng-deep .mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field__input{margin-left:12px;color:#fff!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{color:#fff!important}::ng-deep .mat-mdc-form-field-flex{height:40px!important}::ng-deep .mat-mdc-autocomplete-panel{border-radius:12px!important;max-height:320px!important;background:color-mix(in srgb,#000 85%,transparent)!important;box-shadow:0 8px 24px #00000026!important;margin-top:8px!important;overflow:hidden!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:30px!important;border-radius:8px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:#0000004d!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:inherit;line-height:1.5}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar{width:6px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-track{background:#f1f1f1;border-radius:0 12px 12px 0}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px;transition:background .3s ease}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb:hover{background:#a8a8a8}::ng-deep .mat-mdc-text-field-wrapper{background:color-mix(in srgb,#000 60%,transparent);border-radius:8px;box-shadow:#0000004d 0 1px 4px -1px;transition:all .3s cubic-bezier(.4,0,.2,1)}::ng-deep .mat-mdc-text-field-wrapper:hover{box-shadow:0 4px 16px #00000026}::ng-deep .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{color:#fff!important}::ng-deep .mdc-text-field{border-radius:8px!important}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:350px}.search-container.collapsed{width:44px;min-width:44px;max-width:44px}.search-field{min-width:180px}.toggle-icon{font-size:18px;width:18px;height:18px}}@media (max-width: 480px){.search-container{left:1.5em;right:1.5em;max-width:calc(100vw - 3em)}.search-container.collapsed{width:40px;min-width:40px;max-width:40px;right:auto}.search-field{min-width:150px}.search-field ::ng-deep .mat-mdc-input-element{font-size:14px}::ng-deep .mat-mdc-autocomplete-panel{max-height:240px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:48px!important;padding:10px 16px!important}.toggle-icon{font-size:16px;width:16px;height:16px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MapSearchComponent, isStandalone: true, selector: "lib-map-search", inputs: { profile: "profile" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"search-container\" \n  cdkDrag \n  cdkDragBoundary=\".map-container\" \n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"onDragEnded($event)\"\n  [class.collapsed]=\"collapsed\">\n  <div class=\"drag-handle\" cdkDragHandle>\n    <mat-icon class=\"icon-left\">search</mat-icon>\n    <div class=\"right-icons\">\n      <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n      <mat-icon class=\"toggle-icon\" (click)=\"toggleSearch()\">\n        {{ collapsed ? 'flip_to_front' : 'remove' }}\n      </mat-icon>\n    </div>\n  </div>\n\n  <div class=\"search-content\" *ngIf=\"!collapsed\">\n    <mat-form-field appearance=\"outline\" class=\"search-field\">\n      <mat-label>S\u00F8ge</mat-label>\n      <input\n        type=\"text\"\n        matInput\n        [(ngModel)]=\"searchAddress\"\n        [matAutocomplete]=\"auto\"\n        (input)=\"filterResults()\"\n      />\n      <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n          <span class=\"result-title\">\n            {{ result.title }} ({{result.items.length}} af {{ result.total }})\n          </span>\n          <div *ngFor=\"let item of result.items\" class=\"search-result-item\">\n            <span class=\"item-header\">\n              {{item.header}}\n            </span>\n            <mat-icon (click)=\"highlight(item.wkt, $event)\">power_settings_new </mat-icon>\n          </div>\n        </mat-option>\n      </mat-autocomplete>\n    </mat-form-field>\n  </div>\n</div>", styles: [".search-container{position:absolute;top:8em;left:1em;z-index:2;cursor:grab;max-width:400px;min-width:48px;width:auto}.search-container.cdk-drag-dragging{opacity:.8;cursor:grab}.compact-icon.custom-image-icon{padding:4px;background:none;border:1px solid rgba(255,255,255,.2)}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.compact-icon.custom-image-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985);border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.compact-icon.custom-image-icon:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e94d}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.drag-handle{display:flex;align-items:center;justify-content:space-between;background:#292a2d;padding:2px 8px;cursor:grab;border-radius:5px 5px 0 0;color:#fff}.right-icons{display:flex;align-items:center;gap:6px}.right-icons .drag-indicator-right{font-size:18px!important;width:18px!important;height:18px!important}.search-content{display:flex;flex-direction:column;background:#292a2d;padding:6px;transition:all .3s ease;box-sizing:border-box;cursor:default;border-radius:0 0 5px 5px}.compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.compact-icon.custom-image-icon{background:none;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer}.toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.toggle-icon:hover{color:#fff;background:#ffffff26}.search-field{width:100%;min-width:200px;cursor:pointer;flex:1}.search-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent}.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important;border-width:1.5px!important;transition:border-color .3s ease,border-width .3s ease}.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important}.search-field ::ng-deep .mat-mdc-form-field-label{color:#fff!important;font-weight:500;font-size:15px}.search-field ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-form-field-label{color:#2196f3!important}.search-field ::ng-deep .mat-mdc-input-element{font-size:15px;color:#fff;font-weight:400;line-height:1.5}.search-field ::ng-deep .mat-mdc-input-element::placeholder{color:#ccc;font-weight:400;opacity:.8}.search-field ::ng-deep .mdc-floating-label{padding:0 4px;left:40px!important}::ng-deep .mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field__input{margin-left:12px;color:#fff!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{color:#fff!important}::ng-deep .mat-mdc-form-field-flex{height:40px!important}::ng-deep .mat-mdc-autocomplete-panel{border-radius:5px!important;max-height:320px!important;background:color-mix(in srgb,#000 85%,transparent)!important;box-shadow:0 8px 24px #00000026!important;margin-top:64px;overflow-y:auto!important;padding:8px!important}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar{width:12px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 0!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:inherit;line-height:1.5}.search-result-option{display:flex;flex-direction:column;gap:8px}.result-title{font-weight:600;font-size:13px;color:#bdc1c3cc!important;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.search-result-item{display:flex;align-items:center;justify-content:space-between;padding:6px 4px;border-radius:5px;margin-left:4px;transition:all .6s ease}.search-result-item:hover{color:#f4f4f5;background:#ffffff1a}.search-result-item .item-header{font-size:14px;color:#fff!important;flex:1;font-weight:500}.search-result-item mat-icon{color:#fff!important;font-size:20px;width:20px;height:20px;cursor:pointer;transition:all .2s ease}.search-result-item mat-icon:hover{color:#f7f7f7!important}::ng-deep .mat-mdc-text-field-wrapper{background:color-mix(in srgb,#000 60%,transparent);border-radius:5px;box-shadow:#0000004d 0 1px 4px -1px;transition:all .3s cubic-bezier(.4,0,.2,1)}::ng-deep .mat-mdc-text-field-wrapper:hover{box-shadow:0 4px 16px #00000026}::ng-deep .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{color:#fff!important}::ng-deep .mdc-text-field{border-radius:5px!important}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:350px}.search-container.collapsed{width:44px;min-width:88px;max-width:44px}.search-field{min-width:180px}.toggle-icon{font-size:18px;width:18px;height:18px}}@media (max-width: 480px){.search-container{left:1.5em;right:1.5em;max-width:calc(100vw - 3em)}.search-container.collapsed{width:40px;min-width:40px;max-width:40px;right:auto}.search-field{min-width:150px}.search-field ::ng-deep .mat-mdc-input-element{font-size:14px}::ng-deep .mat-mdc-autocomplete-panel{max-height:240px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:48px!important;padding:10px 16px!important}.toggle-icon{font-size:16px;width:16px;height:16px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MapSearchComponent, decorators: [{
             type: Component,
@@ -1932,8 +3491,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         MatOptionModule,
                         MatIconModule,
                         DragDropModule
-                    ], template: "<div class=\"search-container\" \n  cdkDrag \n  cdkDragBoundary=\".map-container\" \n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"onDragEnded($event)\"\n  [class.collapsed]=\"collapsed\">\n  <div class=\"drag-handle\" cdkDragHandle>\n    <mat-icon>search</mat-icon>\n    <mat-icon class=\"toggle-icon\" (click)=\"toggleSearch()\">{{ collapsed ? 'flip_to_front' : 'remove' }}</mat-icon>\n  </div>\n  <div class=\"search-content\" *ngIf=\"!collapsed\">\n    <mat-form-field appearance=\"outline\" class=\"search-field\">\n      <mat-label>S\u00F8ge</mat-label>\n      <input\n        type=\"text\"\n        matInput\n        [(ngModel)]=\"searchAddress\"\n        [matAutocomplete]=\"auto\"\n        (input)=\"filterResults()\"\n      />\n      <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\">\n          {{ result }}\n        </mat-option>\n      </mat-autocomplete>\n    </mat-form-field>\n  </div>\n</div>", styles: [".search-container{position:absolute;top:8em;left:1em;z-index:1000;cursor:grab;max-width:400px;min-width:48px;width:auto}.search-container.collapsed{width:48px;min-width:68px;max-width:48px}.search-container.cdk-drag-dragging{opacity:.8;cursor:grab}.drag-handle{display:flex;align-items:center;justify-content:space-between;background:color-mix(in srgb,#000 60%,transparent);padding:4px;cursor:grab}.drag-handle mat-icon:not(.toggle-icon){color:#fff;font-size:20px;width:20px;height:20px}.search-content{display:flex;align-items:center;background:color-mix(in srgb,#000 60%,transparent);padding:5px;transition:all .3s ease;box-sizing:border-box;cursor:default}.toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:20px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}.toggle-icon:hover{color:#2196f3;background:#2196f314}.search-field{width:100%;min-width:200px;cursor:pointer;flex:1}.search-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent}.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important;border-width:1.5px!important;transition:border-color .3s ease,border-width .3s ease}.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important}.search-field ::ng-deep .mat-mdc-form-field-label{color:#fff!important;font-weight:500;font-size:15px}.search-field ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-form-field-label{color:#2196f3!important}.search-field ::ng-deep .mat-mdc-input-element{font-size:15px;color:#fff;font-weight:400;line-height:1.5}.search-field ::ng-deep .mat-mdc-input-element::placeholder{color:#ccc;font-weight:400;opacity:.8}.search-field ::ng-deep .mdc-floating-label{padding:0 4px;left:40px!important}::ng-deep .mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field__input{margin-left:12px;color:#fff!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{color:#fff!important}::ng-deep .mat-mdc-form-field-flex{height:40px!important}::ng-deep .mat-mdc-autocomplete-panel{border-radius:12px!important;max-height:320px!important;background:color-mix(in srgb,#000 85%,transparent)!important;box-shadow:0 8px 24px #00000026!important;margin-top:8px!important;overflow:hidden!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:30px!important;border-radius:8px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled){background-color:#0000004d!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:inherit;line-height:1.5}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar{width:6px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-track{background:#f1f1f1;border-radius:0 12px 12px 0}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:3px;transition:background .3s ease}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb:hover{background:#a8a8a8}::ng-deep .mat-mdc-text-field-wrapper{background:color-mix(in srgb,#000 60%,transparent);border-radius:8px;box-shadow:#0000004d 0 1px 4px -1px;transition:all .3s cubic-bezier(.4,0,.2,1)}::ng-deep .mat-mdc-text-field-wrapper:hover{box-shadow:0 4px 16px #00000026}::ng-deep .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{color:#fff!important}::ng-deep .mdc-text-field{border-radius:8px!important}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:350px}.search-container.collapsed{width:44px;min-width:44px;max-width:44px}.search-field{min-width:180px}.toggle-icon{font-size:18px;width:18px;height:18px}}@media (max-width: 480px){.search-container{left:1.5em;right:1.5em;max-width:calc(100vw - 3em)}.search-container.collapsed{width:40px;min-width:40px;max-width:40px;right:auto}.search-field{min-width:150px}.search-field ::ng-deep .mat-mdc-input-element{font-size:14px}::ng-deep .mat-mdc-autocomplete-panel{max-height:240px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:48px!important;padding:10px 16px!important}.toggle-icon{font-size:16px;width:16px;height:16px}}\n"] }]
-        }] });
+                    ], template: "<div class=\"search-container\" \n  cdkDrag \n  cdkDragBoundary=\".map-container\" \n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"onDragEnded($event)\"\n  [class.collapsed]=\"collapsed\">\n  <div class=\"drag-handle\" cdkDragHandle>\n    <mat-icon class=\"icon-left\">search</mat-icon>\n    <div class=\"right-icons\">\n      <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n      <mat-icon class=\"toggle-icon\" (click)=\"toggleSearch()\">\n        {{ collapsed ? 'flip_to_front' : 'remove' }}\n      </mat-icon>\n    </div>\n  </div>\n\n  <div class=\"search-content\" *ngIf=\"!collapsed\">\n    <mat-form-field appearance=\"outline\" class=\"search-field\">\n      <mat-label>S\u00F8ge</mat-label>\n      <input\n        type=\"text\"\n        matInput\n        [(ngModel)]=\"searchAddress\"\n        [matAutocomplete]=\"auto\"\n        (input)=\"filterResults()\"\n      />\n      <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n          <span class=\"result-title\">\n            {{ result.title }} ({{result.items.length}} af {{ result.total }})\n          </span>\n          <div *ngFor=\"let item of result.items\" class=\"search-result-item\">\n            <span class=\"item-header\">\n              {{item.header}}\n            </span>\n            <mat-icon (click)=\"highlight(item.wkt, $event)\">power_settings_new </mat-icon>\n          </div>\n        </mat-option>\n      </mat-autocomplete>\n    </mat-form-field>\n  </div>\n</div>", styles: [".search-container{position:absolute;top:8em;left:1em;z-index:2;cursor:grab;max-width:400px;min-width:48px;width:auto}.search-container.cdk-drag-dragging{opacity:.8;cursor:grab}.compact-icon.custom-image-icon{padding:4px;background:none;border:1px solid rgba(255,255,255,.2)}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.compact-icon.custom-image-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985);border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.compact-icon.custom-image-icon:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e94d}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.drag-handle{display:flex;align-items:center;justify-content:space-between;background:#292a2d;padding:2px 8px;cursor:grab;border-radius:5px 5px 0 0;color:#fff}.right-icons{display:flex;align-items:center;gap:6px}.right-icons .drag-indicator-right{font-size:18px!important;width:18px!important;height:18px!important}.search-content{display:flex;flex-direction:column;background:#292a2d;padding:6px;transition:all .3s ease;box-sizing:border-box;cursor:default;border-radius:0 0 5px 5px}.compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.compact-icon.custom-image-icon{background:none;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer}.toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.toggle-icon:hover{color:#fff;background:#ffffff26}.search-field{width:100%;min-width:200px;cursor:pointer;flex:1}.search-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent}.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important;border-width:1.5px!important;transition:border-color .3s ease,border-width .3s ease}.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important}.search-field ::ng-deep .mat-mdc-form-field-label{color:#fff!important;font-weight:500;font-size:15px}.search-field ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-form-field-label{color:#2196f3!important}.search-field ::ng-deep .mat-mdc-input-element{font-size:15px;color:#fff;font-weight:400;line-height:1.5}.search-field ::ng-deep .mat-mdc-input-element::placeholder{color:#ccc;font-weight:400;opacity:.8}.search-field ::ng-deep .mdc-floating-label{padding:0 4px;left:40px!important}::ng-deep .mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field__input{margin-left:12px;color:#fff!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{color:#fff!important}::ng-deep .mat-mdc-form-field-flex{height:40px!important}::ng-deep .mat-mdc-autocomplete-panel{border-radius:5px!important;max-height:320px!important;background:color-mix(in srgb,#000 85%,transparent)!important;box-shadow:0 8px 24px #00000026!important;margin-top:64px;overflow-y:auto!important;padding:8px!important}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar{width:12px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 0!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:inherit;line-height:1.5}.search-result-option{display:flex;flex-direction:column;gap:8px}.result-title{font-weight:600;font-size:13px;color:#bdc1c3cc!important;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.search-result-item{display:flex;align-items:center;justify-content:space-between;padding:6px 4px;border-radius:5px;margin-left:4px;transition:all .6s ease}.search-result-item:hover{color:#f4f4f5;background:#ffffff1a}.search-result-item .item-header{font-size:14px;color:#fff!important;flex:1;font-weight:500}.search-result-item mat-icon{color:#fff!important;font-size:20px;width:20px;height:20px;cursor:pointer;transition:all .2s ease}.search-result-item mat-icon:hover{color:#f7f7f7!important}::ng-deep .mat-mdc-text-field-wrapper{background:color-mix(in srgb,#000 60%,transparent);border-radius:5px;box-shadow:#0000004d 0 1px 4px -1px;transition:all .3s cubic-bezier(.4,0,.2,1)}::ng-deep .mat-mdc-text-field-wrapper:hover{box-shadow:0 4px 16px #00000026}::ng-deep .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{color:#fff!important}::ng-deep .mdc-text-field{border-radius:5px!important}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:350px}.search-container.collapsed{width:44px;min-width:88px;max-width:44px}.search-field{min-width:180px}.toggle-icon{font-size:18px;width:18px;height:18px}}@media (max-width: 480px){.search-container{left:1.5em;right:1.5em;max-width:calc(100vw - 3em)}.search-container.collapsed{width:40px;min-width:40px;max-width:40px;right:auto}.search-field{min-width:150px}.search-field ::ng-deep .mat-mdc-input-element{font-size:14px}::ng-deep .mat-mdc-autocomplete-panel{max-height:240px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:48px!important;padding:10px 16px!important}.toggle-icon{font-size:16px;width:16px;height:16px}}\n"] }]
+        }], propDecorators: { profile: [{
+                type: Input
+            }] } });
 
 class LayerService {
     config = inject(GISKOMPONENT_CONFIG);
@@ -1954,69 +3515,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class LegendsListComponent {
     _http = inject(HttpClient);
+    _layerService = inject(LayerService);
+    _layerHelperService = inject(LayerHelperService);
+    _layoutService = inject(LayoutService);
+    config = inject(GISKOMPONENT_CONFIG);
+    map;
+    profile;
+    filteredLayersDetailed = [];
+    collapsed = true;
+    dragPosition = { x: 0, y: 0 };
+    _baseUrl = this.config.apiBaseUrl;
+    _legendsListBodyControl;
+    _mapFilteredLayerGroupsKeyName = 'mapFilteredLayerGroups';
+    POSITION_STORAGE_KEY = 'legendsListPosition';
     ngOnInit() {
-        this._initializeMapIconControl();
+        this._loadPosition();
         this._layerHelperService.activeLayersChanged.subscribe(() => this._setFilteredLegends().subscribe(result => this.filteredLayersDetailed = result));
     }
     ngOnChanges(changes) {
-        if (changes['profile'] && this.profile)
+        if (changes['profile'] && this.profile) {
+            this._loadPosition();
             this._setFilteredLegends().subscribe(result => this.filteredLayersDetailed = result);
+        }
     }
-    set contentIcon(content) {
-        this._legendsListIcon = content;
-    }
-    set contentBody(content) {
-        this._legendsListBody = content;
+    ngOnDestroy() {
+        if (this._legendsListBodyControl) {
+            this.map.removeControl(this._legendsListBodyControl);
+        }
     }
-    map;
-    profile;
-    searchText = '';
-    filteredLayersDetailed = [];
-    showList = false;
-    config = inject(GISKOMPONENT_CONFIG);
-    _baseUrl = this.config.apiBaseUrl;
-    _legendsListIcon;
-    _legendsListIconControl;
-    _legendsListBody;
-    _legendsListBodyControl;
-    _layerIdsToDisplayInMapKeyName = 'layerIdsToDisplayInMap';
-    _layerService = inject(LayerService);
-    _layerHelperService = inject(LayerHelperService);
     toggleLegendsList() {
-        this.showList = !this.showList;
-        if (this.showList) {
-            this._addMapBodyControl();
-        }
-        else {
-            this._removeMapBodyControl();
-        }
+        this.collapsed = !this.collapsed;
     }
-    _initializeMapIconControl() {
-        this.map.removeControl(this._legendsListIconControl);
-        const element = this._legendsListIcon?.nativeElement;
-        if (element) {
-            this._legendsListIconControl = new ol_control_Control({ element: element });
-            this.map.addControl(this._legendsListIconControl);
-        }
+    onDragEnded(event) {
+        const position = event.source.getFreeDragPosition();
+        this.dragPosition = position;
+        this._savePosition(position);
     }
     _getImageUrl(fileName) {
         return `${this._baseUrl}/api/image/${fileName}`;
     }
-    _addMapBodyControl() {
-        this.map.removeControl(this._legendsListBodyControl);
-        const element = this._legendsListBody.nativeElement;
-        this._legendsListBodyControl = new ol_control_Control({ element: element });
-        this.map.addControl(this._legendsListBodyControl);
+    _savePosition(position) {
+        try {
+            localStorage.setItem(this.POSITION_STORAGE_KEY, JSON.stringify(position));
+        }
+        catch (error) {
+            console.error('Error saving legends list position to localStorage:', error);
+        }
     }
-    _removeMapBodyControl() {
-        this.map.removeControl(this._legendsListBodyControl);
+    _loadPosition() {
+        try {
+            const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
+            if (savedPosition) {
+                this.dragPosition = JSON.parse(savedPosition);
+            }
+            else if (this.profile) {
+                this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.legendsListInitialPosition);
+            }
+        }
+        catch (error) {
+            console.error('Error loading legends list position from localStorage:', error);
+            this.dragPosition = { x: 0, y: 0 };
+        }
     }
     _setFilteredLegends() {
         if (!this.profile?.id) {
             return of([]);
         }
-        const layerIdsCachedToDisplay = localStorage.getItem(`${this._layerIdsToDisplayInMapKeyName}_${this.profile?.id}`)?.split(',').map(Number);
-        if (!layerIdsCachedToDisplay) {
+        const cacheValue = localStorage.getItem(`${this._mapFilteredLayerGroupsKeyName}_${this.profile?.id}`);
+        if (!cacheValue) {
+            return of([]);
+        }
+        const layerIdsCachedToDisplay = JSON.parse(cacheValue).cachedLayerGroups
+            .flatMap((lg) => lg.layers)
+            .filter((l) => l.visible)
+            .map((l) => l.id);
+        if (!layerIdsCachedToDisplay || layerIdsCachedToDisplay.length === 0) {
             return of([]);
         }
         return this._layerService.getByIds(layerIdsCachedToDisplay)
@@ -2053,19 +3626,13 @@ class LegendsListComponent {
         })));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LegendsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LegendsListComponent, isStandalone: true, selector: "lib-legends-list", inputs: { map: "map", profile: "profile" }, viewQueries: [{ propertyName: "contentIcon", first: true, predicate: ["legendsListIcon"], descendants: true }, { propertyName: "contentBody", first: true, predicate: ["legendsListBody"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #legendsListIcon class=\"ol-unselectable ol-control legends-list-icon\">\n  <mat-icon  (click)=\"toggleLegendsList()\">area_chart</mat-icon>\n</div>\n<div #legendsListBody  [class.display-none]=\"!showList\" class=\"legends-list-body-wrapper\" cdkDrag cdkDragBoundary=\".map-container\">\n  <div class=\"drag-handle-selector\" cdkDragHandle>\n    <mat-icon>drag_indicator</mat-icon>\n  </div>\n <div class=\"ol-unselectable ol-control legends-list-body\">\n    <div class=\"item-list\">\n      @for (layer of filteredLayersDetailed; track layer.id; let iIndex = $index) {\n        @if (layer.imageUrl) {\n          <mat-expansion-panel expanded=\"true\"> \n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"item\" ><span>{{ layer.name }}</span></div>\n              </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div class=\"legend\">\n            <span><img [src]=\"layer.imageUrl\" class=\"legend-thumbnail\"/></span>\n          </div>\n        </mat-expansion-panel>\n        }\n      }\n    </div>\n  </div>\n</div>", styles: ["::ng-deep .legends-list-icon{position:absolute;left:auto;right:1em;bottom:1em;z-index:1000}::ng-deep .legends-list-icon mat-icon{display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .3s ease;outline:none;border:0;height:40px;border-radius:5px;width:40px;background:color-mix(in srgb,#000 60%,transparent);box-shadow:#0000004d 0 1px 4px -1px;font-size:2em;color:#fff}::ng-deep .legends-list-icon mat-icon:hover{box-shadow:0 4px 12px #0003;color:#fff}.legends-list-body-wrapper{position:absolute;left:auto;right:35em;bottom:.2em;z-index:1000;cursor:grab}@media (max-width: 1024px){.legends-list-body-wrapper{right:32em;bottom:5em}}@media (max-width: 768px){.legends-list-body-wrapper{position:fixed;right:3em;left:1em;bottom:5em;width:calc(100% - 7em);max-width:100%}.legends-list-body-wrapper.cdk-drag-dragging{z-index:1002}}@media (max-width: 480px){.legends-list-body-wrapper{bottom:4em}}.legends-list-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grabbing;z-index:1001}.legends-list-body-wrapper .ol-control{border-radius:0}.drag-handle-selector{display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,#000 60%,transparent);border-radius:4px 4px 0 0;padding:4px;cursor:grab;box-shadow:0 -2px 8px #0003}@media (max-width: 768px){.drag-handle-selector{padding:8px}}.drag-handle-selector mat-icon{color:#fff;font-size:20px;width:20px;height:20px}@media (max-width: 768px){.drag-handle-selector mat-icon{font-size:24px;width:24px;height:24px}}::ng-deep .legends-list-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:color-mix(in srgb,#000 60%,transparent);box-shadow:0 4px 20px #00000026;width:290px;max-height:660px;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 1024px){::ng-deep .legends-list-body{width:280px}}@media (max-width: 768px){::ng-deep .legends-list-body{width:100%;max-height:60vh;max-height:calc(var(--vh, 1vh) * 60)}}@media (max-width: 480px){::ng-deep .legends-list-body{max-height:70vh;max-height:calc(var(--vh, 1vh) * 70)}}::ng-deep .legends-list-body .item-list{flex:1;overflow-y:auto;padding:6px;max-height:900px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list{padding:8px;max-height:none}}::ng-deep .legends-list-body .item-list .legend{overflow:hidden;box-shadow:0 -2px 2px #4868b20a,0 2px 2px #6a6f7517,0 1px 2px #4868b214}::ng-deep .legends-list-body .item-list .legend span{color:#fff}::ng-deep .legends-list-body .item-list .item{display:flex;align-items:center;gap:6px;padding:8px 12px;background:transparent;transition:all .2s ease;color:#fff;cursor:grab}@media (max-width: 768px){::ng-deep .legends-list-body .item-list .item{padding:12px 16px;gap:8px}}::ng-deep .legends-list-body .item-list .item:last-child{border-bottom:none}@media (max-width: 768px){::ng-deep .legends-list-body .item-list mat-expansion-panel{margin-bottom:8px}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header{padding:0 8px;height:auto;min-height:48px}::ng-deep .legends-list-body .item-list .legend{padding:8px}::ng-deep .legends-list-body .item-list .legend-thumbnail{max-width:100%;height:auto;max-height:150px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar{width:6px}}.legend-thumbnail{max-width:200px;max-height:200px;width:auto;height:auto;border:2px solid #dee2e6;border-radius:6px;padding:6px}@media (max-width: 768px){.legend-thumbnail{max-width:100%;max-height:150px;padding:4px}}::ng-deep .legends-list-body .item-list::-webkit-scrollbar{width:8px;border-radius:10px;border:5px solid transparent}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb{background:#0000004d;border:5px solid transparent;border-radius:10px;background-clip:padding-box}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb:hover{background:#0006;background-clip:padding-box;border:3px solid transparent}.display-none{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i4.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatInputModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LegendsListComponent, isStandalone: true, selector: "lib-legends-list", inputs: { map: "map", profile: "profile" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"legends-list-body-wrapper\" \n  cdkDrag \n  cdkDragBoundary=\".map-container\" \n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"onDragEnded($event)\"\n  [class.collapsed]=\"collapsed\">\n\n  <div class=\"drag-handle-legends\" cdkDragHandle>\n  <mat-icon class=\"legend-icon\" (click)=\"toggleLegendsList()\">area_chart</mat-icon>\n\n  <div class=\"right-icons\">\n    <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n    <mat-icon class=\"toggle-icon\" (click)=\"toggleLegendsList()\">\n      {{ collapsed ? 'flip_to_front' : 'remove' }}\n    </mat-icon>\n  </div>\n</div>\n\n<div class=\"legends-list-container\">\n  @if(!collapsed) {\n <div class=\"ol-unselectable ol-control legends-list-body\">\n    <div class=\"item-list\">\n      @for (layer of filteredLayersDetailed; track layer.id; let i = $index) {\n        @if (layer.imageUrl) {\n          <mat-expansion-panel [expanded]=\"i === 0\"> \n            <mat-expansion-panel-header>\n              <span class=\"panel-title\">\n                {{ layer.name }}\n              </span>\n            </mat-expansion-panel-header>\n            <div class=\"legend\">\n              <img [src]=\"layer.imageUrl\" class=\"legend-thumbnail\"/>\n            </div>\n          </mat-expansion-panel>\n        }\n      }\n    </div>\n  </div>\n}\n</div>\n</div>", styles: [".legends-list-body-wrapper{position:absolute;left:1em;top:10em;z-index:1000;cursor:grab;box-shadow:0 2px 10px #0000001a;background:#292a2d;width:250px;max-width:250px;transition:width .3s ease,max-width .3s ease;border-radius:5px 5px 0 0}.legends-list-body-wrapper.collapsed{width:90px}.legends-list-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grabbing;z-index:1001}@media (max-width: 1024px){.legends-list-body-wrapper{width:240px;max-width:240px}}@media (max-width: 768px){.legends-list-body-wrapper{position:fixed;right:1em;bottom:5em;width:calc(100% - 2em);max-width:280px}.legends-list-body-wrapper.collapsed{width:90px}}@media (max-width: 480px){.legends-list-body-wrapper{bottom:4em}}.drag-handle-legends{display:flex;align-items:center;justify-content:space-between;background:#292a2d;padding:2px 8px;cursor:grab;color:#fff;border-radius:5px 5px 0 0}.drag-handle-legends .legend-icon{color:#fff;font-size:18px;width:18px;height:18px;cursor:pointer;transition:all .2s ease}.drag-handle-legends .legend-icon:hover{color:#4caf50}.drag-handle-legends .toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.drag-handle-legends .toggle-icon:hover{color:#fff;background:#ffffff26}.right-icons{display:flex;align-items:center;gap:6px}.right-icons .drag-indicator-right{font-size:18px!important;width:18px!important;height:18px!important;color:#fff}.legends-list-container{display:flex;flex-direction:column;align-items:center;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box}::ng-deep .legends-list-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:#000;width:100%;max-height:317px;min-height:80px;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 1024px){::ng-deep .legends-list-body{max-height:450px;min-height:70px}}@media (max-width: 768px){::ng-deep .legends-list-body{max-height:60vh;max-height:calc(var(--vh, 1vh) * 60);min-height:100px}}@media (max-width: 480px){::ng-deep .legends-list-body{max-height:70vh;max-height:calc(var(--vh, 1vh) * 70);min-height:90px}}::ng-deep .legends-list-body .item-list{flex:1 1 auto;overflow-y:auto;padding:4px;min-height:0;background:#000;max-height:500px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list{padding:6px;max-height:400px}}::ng-deep .legends-list-body .item-list mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%;margin-bottom:4px}::ng-deep .legends-list-body .item-list mat-expansion-panel:last-child{border-bottom:none}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header{padding:0 8px;height:40px!important;min-height:40px!important}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .mat-content{display:flex;align-items:center}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;line-height:1.3;font-weight:600;color:#bdc1c3cc;font-size:17px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .panel-title{max-width:180px;font-size:15px}}::ng-deep .legends-list-body .item-list .mat-expansion-panel-body{padding:4px 8px 8px!important}::ng-deep .legends-list-body .item-list .legend{overflow:hidden;padding:4px;box-shadow:0 -2px 2px #4868b20a,0 2px 2px #6a6f7517,0 1px 2px #4868b214}::ng-deep .legends-list-body .item-list .legend span{color:#fff}.legend-thumbnail{max-width:100%;width:auto;height:auto;max-height:150px;border:1px solid #dee2e6;border-radius:4px;padding:4px;display:block}@media (max-width: 768px){.legend-thumbnail{max-height:120px;padding:3px}}::ng-deep .legends-list-body .item-list::-webkit-scrollbar{width:12px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}@media (max-width: 768px){.legends-list-body-wrapper{right:.5em;bottom:5em;max-width:280px}}@media (max-width: 480px){.legends-list-body-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.legends-list-body-wrapper.collapsed{width:90px;left:auto}::ng-deep .legends-list-body .item-list{max-height:300px}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "ngmodule", type: MatInputModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LegendsListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-legends-list', imports: [MatFormFieldModule, CommonModule, MatIconModule, FormsModule, DragDropModule,
-                        MatExpansionModule, MatInputModule], template: "<div #legendsListIcon class=\"ol-unselectable ol-control legends-list-icon\">\n  <mat-icon  (click)=\"toggleLegendsList()\">area_chart</mat-icon>\n</div>\n<div #legendsListBody  [class.display-none]=\"!showList\" class=\"legends-list-body-wrapper\" cdkDrag cdkDragBoundary=\".map-container\">\n  <div class=\"drag-handle-selector\" cdkDragHandle>\n    <mat-icon>drag_indicator</mat-icon>\n  </div>\n <div class=\"ol-unselectable ol-control legends-list-body\">\n    <div class=\"item-list\">\n      @for (layer of filteredLayersDetailed; track layer.id; let iIndex = $index) {\n        @if (layer.imageUrl) {\n          <mat-expansion-panel expanded=\"true\"> \n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <div class=\"item\" ><span>{{ layer.name }}</span></div>\n              </mat-panel-title>\n          </mat-expansion-panel-header>\n          <div class=\"legend\">\n            <span><img [src]=\"layer.imageUrl\" class=\"legend-thumbnail\"/></span>\n          </div>\n        </mat-expansion-panel>\n        }\n      }\n    </div>\n  </div>\n</div>", styles: ["::ng-deep .legends-list-icon{position:absolute;left:auto;right:1em;bottom:1em;z-index:1000}::ng-deep .legends-list-icon mat-icon{display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .3s ease;outline:none;border:0;height:40px;border-radius:5px;width:40px;background:color-mix(in srgb,#000 60%,transparent);box-shadow:#0000004d 0 1px 4px -1px;font-size:2em;color:#fff}::ng-deep .legends-list-icon mat-icon:hover{box-shadow:0 4px 12px #0003;color:#fff}.legends-list-body-wrapper{position:absolute;left:auto;right:35em;bottom:.2em;z-index:1000;cursor:grab}@media (max-width: 1024px){.legends-list-body-wrapper{right:32em;bottom:5em}}@media (max-width: 768px){.legends-list-body-wrapper{position:fixed;right:3em;left:1em;bottom:5em;width:calc(100% - 7em);max-width:100%}.legends-list-body-wrapper.cdk-drag-dragging{z-index:1002}}@media (max-width: 480px){.legends-list-body-wrapper{bottom:4em}}.legends-list-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grabbing;z-index:1001}.legends-list-body-wrapper .ol-control{border-radius:0}.drag-handle-selector{display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,#000 60%,transparent);border-radius:4px 4px 0 0;padding:4px;cursor:grab;box-shadow:0 -2px 8px #0003}@media (max-width: 768px){.drag-handle-selector{padding:8px}}.drag-handle-selector mat-icon{color:#fff;font-size:20px;width:20px;height:20px}@media (max-width: 768px){.drag-handle-selector mat-icon{font-size:24px;width:24px;height:24px}}::ng-deep .legends-list-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:color-mix(in srgb,#000 60%,transparent);box-shadow:0 4px 20px #00000026;width:290px;max-height:660px;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 1024px){::ng-deep .legends-list-body{width:280px}}@media (max-width: 768px){::ng-deep .legends-list-body{width:100%;max-height:60vh;max-height:calc(var(--vh, 1vh) * 60)}}@media (max-width: 480px){::ng-deep .legends-list-body{max-height:70vh;max-height:calc(var(--vh, 1vh) * 70)}}::ng-deep .legends-list-body .item-list{flex:1;overflow-y:auto;padding:6px;max-height:900px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list{padding:8px;max-height:none}}::ng-deep .legends-list-body .item-list .legend{overflow:hidden;box-shadow:0 -2px 2px #4868b20a,0 2px 2px #6a6f7517,0 1px 2px #4868b214}::ng-deep .legends-list-body .item-list .legend span{color:#fff}::ng-deep .legends-list-body .item-list .item{display:flex;align-items:center;gap:6px;padding:8px 12px;background:transparent;transition:all .2s ease;color:#fff;cursor:grab}@media (max-width: 768px){::ng-deep .legends-list-body .item-list .item{padding:12px 16px;gap:8px}}::ng-deep .legends-list-body .item-list .item:last-child{border-bottom:none}@media (max-width: 768px){::ng-deep .legends-list-body .item-list mat-expansion-panel{margin-bottom:8px}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header{padding:0 8px;height:auto;min-height:48px}::ng-deep .legends-list-body .item-list .legend{padding:8px}::ng-deep .legends-list-body .item-list .legend-thumbnail{max-width:100%;height:auto;max-height:150px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar{width:6px}}.legend-thumbnail{max-width:200px;max-height:200px;width:auto;height:auto;border:2px solid #dee2e6;border-radius:6px;padding:6px}@media (max-width: 768px){.legend-thumbnail{max-width:100%;max-height:150px;padding:4px}}::ng-deep .legends-list-body .item-list::-webkit-scrollbar{width:8px;border-radius:10px;border:5px solid transparent}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb{background:#0000004d;border:5px solid transparent;border-radius:10px;background-clip:padding-box}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb:hover{background:#0006;background-clip:padding-box;border:3px solid transparent}.display-none{display:none}\n"] }]
-        }], propDecorators: { contentIcon: [{
-                type: ViewChild,
-                args: ['legendsListIcon', { static: false }]
-            }], contentBody: [{
-                type: ViewChild,
-                args: ['legendsListBody', { static: false }]
-            }], map: [{
+                        MatExpansionModule, MatInputModule], template: "<div class=\"legends-list-body-wrapper\" \n  cdkDrag \n  cdkDragBoundary=\".map-container\" \n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"onDragEnded($event)\"\n  [class.collapsed]=\"collapsed\">\n\n  <div class=\"drag-handle-legends\" cdkDragHandle>\n  <mat-icon class=\"legend-icon\" (click)=\"toggleLegendsList()\">area_chart</mat-icon>\n\n  <div class=\"right-icons\">\n    <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n    <mat-icon class=\"toggle-icon\" (click)=\"toggleLegendsList()\">\n      {{ collapsed ? 'flip_to_front' : 'remove' }}\n    </mat-icon>\n  </div>\n</div>\n\n<div class=\"legends-list-container\">\n  @if(!collapsed) {\n <div class=\"ol-unselectable ol-control legends-list-body\">\n    <div class=\"item-list\">\n      @for (layer of filteredLayersDetailed; track layer.id; let i = $index) {\n        @if (layer.imageUrl) {\n          <mat-expansion-panel [expanded]=\"i === 0\"> \n            <mat-expansion-panel-header>\n              <span class=\"panel-title\">\n                {{ layer.name }}\n              </span>\n            </mat-expansion-panel-header>\n            <div class=\"legend\">\n              <img [src]=\"layer.imageUrl\" class=\"legend-thumbnail\"/>\n            </div>\n          </mat-expansion-panel>\n        }\n      }\n    </div>\n  </div>\n}\n</div>\n</div>", styles: [".legends-list-body-wrapper{position:absolute;left:1em;top:10em;z-index:1000;cursor:grab;box-shadow:0 2px 10px #0000001a;background:#292a2d;width:250px;max-width:250px;transition:width .3s ease,max-width .3s ease;border-radius:5px 5px 0 0}.legends-list-body-wrapper.collapsed{width:90px}.legends-list-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grabbing;z-index:1001}@media (max-width: 1024px){.legends-list-body-wrapper{width:240px;max-width:240px}}@media (max-width: 768px){.legends-list-body-wrapper{position:fixed;right:1em;bottom:5em;width:calc(100% - 2em);max-width:280px}.legends-list-body-wrapper.collapsed{width:90px}}@media (max-width: 480px){.legends-list-body-wrapper{bottom:4em}}.drag-handle-legends{display:flex;align-items:center;justify-content:space-between;background:#292a2d;padding:2px 8px;cursor:grab;color:#fff;border-radius:5px 5px 0 0}.drag-handle-legends .legend-icon{color:#fff;font-size:18px;width:18px;height:18px;cursor:pointer;transition:all .2s ease}.drag-handle-legends .legend-icon:hover{color:#4caf50}.drag-handle-legends .toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.drag-handle-legends .toggle-icon:hover{color:#fff;background:#ffffff26}.right-icons{display:flex;align-items:center;gap:6px}.right-icons .drag-indicator-right{font-size:18px!important;width:18px!important;height:18px!important;color:#fff}.legends-list-container{display:flex;flex-direction:column;align-items:center;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box}::ng-deep .legends-list-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:#000;width:100%;max-height:317px;min-height:80px;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 1024px){::ng-deep .legends-list-body{max-height:450px;min-height:70px}}@media (max-width: 768px){::ng-deep .legends-list-body{max-height:60vh;max-height:calc(var(--vh, 1vh) * 60);min-height:100px}}@media (max-width: 480px){::ng-deep .legends-list-body{max-height:70vh;max-height:calc(var(--vh, 1vh) * 70);min-height:90px}}::ng-deep .legends-list-body .item-list{flex:1 1 auto;overflow-y:auto;padding:4px;min-height:0;background:#000;max-height:500px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list{padding:6px;max-height:400px}}::ng-deep .legends-list-body .item-list mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%;margin-bottom:4px}::ng-deep .legends-list-body .item-list mat-expansion-panel:last-child{border-bottom:none}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header{padding:0 8px;height:40px!important;min-height:40px!important}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .mat-content{display:flex;align-items:center}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;line-height:1.3;font-weight:600;color:#bdc1c3cc;font-size:17px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .panel-title{max-width:180px;font-size:15px}}::ng-deep .legends-list-body .item-list .mat-expansion-panel-body{padding:4px 8px 8px!important}::ng-deep .legends-list-body .item-list .legend{overflow:hidden;padding:4px;box-shadow:0 -2px 2px #4868b20a,0 2px 2px #6a6f7517,0 1px 2px #4868b214}::ng-deep .legends-list-body .item-list .legend span{color:#fff}.legend-thumbnail{max-width:100%;width:auto;height:auto;max-height:150px;border:1px solid #dee2e6;border-radius:4px;padding:4px;display:block}@media (max-width: 768px){.legend-thumbnail{max-height:120px;padding:3px}}::ng-deep .legends-list-body .item-list::-webkit-scrollbar{width:12px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}@media (max-width: 768px){.legends-list-body-wrapper{right:.5em;bottom:5em;max-width:280px}}@media (max-width: 480px){.legends-list-body-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.legends-list-body-wrapper.collapsed{width:90px;left:auto}::ng-deep .legends-list-body .item-list{max-height:300px}}\n"] }]
+        }], propDecorators: { map: [{
                 type: Input
             }], profile: [{
                 type: Input
@@ -2084,19 +3651,49 @@ class FeatureLoaderService {
             return;
         }
         const profile = this._current.profile;
+        if (!settings || !settings.geometryTypeSettings)
+            return;
         const allTheFeatures = settings.geometryTypeSettings.filter(gt => gt.features).map(gt => {
             const rawFeatures = this.fomatter.readFeatures(gt.features);
             rawFeatures.forEach(f => {
                 this._featureHelper.setId(f);
                 this._featureHelper.setTypeId(f, gt.typeId);
+                if (gt.disableEditFeatures) {
+                    this._featureHelper.lock(f);
+                }
                 f.set('STYLENAME', gt.style);
+                if (gt.showLabelFromProperty) {
+                    f.set('showlabelfrom', gt.showLabelFromProperty);
+                }
             });
             return rawFeatures;
         }).flatMap(f => f);
         const getAllStyles$ = allTheFeatures.map(f => this._settingsHelper.getStyle(f.get('STYLENAME'), profile?.styleRepositoryWorkspace, profile?.styleRepositoryGeoserver, f.getGeometry().getType()));
+        if (getAllStyles$.length === 0) {
+            this._undoRedo.init();
+            return;
+        }
         combineLatest(getAllStyles$).subscribe({
             next: styles => {
-                styles.forEach((s, i) => allTheFeatures[i].setStyle(s));
+                styles.forEach((s, i) => {
+                    const feature = allTheFeatures[i];
+                    if (feature.get('showlabelfrom')) {
+                        const styles = Array.isArray(s) ? s : [s];
+                        const textStyle = new Text({
+                            font: '14px Calibri,sans-serif',
+                            fill: new Fill({ color: '#000' }),
+                            stroke: new Stroke({ color: '#fff', width: 3 }),
+                            textAlign: 'center',
+                            text: feature.get(feature.get('showlabelfrom'))
+                        });
+                        const styleText = new Style({ text: textStyle });
+                        styles.push(styleText);
+                        feature.setStyle(styles);
+                    }
+                    else {
+                        feature.setStyle(s);
+                    }
+                });
                 this._drawHelperService.setFeatures(allTheFeatures);
                 this._zoom.zoomToFeatures(allTheFeatures);
                 this._undoRedo.init();
@@ -2104,22 +3701,157 @@ class FeatureLoaderService {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FeatureLoaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FeatureLoaderService, providedIn: 'root' });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FeatureLoaderService });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FeatureLoaderService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
+            type: Injectable
+        }] });
+
+class SelectedFeatureInfoComponent {
+    _infoService = inject(ShowInfoService);
+    features = null;
+    collapsedStates = {};
+    ngOnInit() {
+        this._infoService.features$.subscribe({
+            next: f => {
+                this.features = f ? [...f] : null;
+                if (this.features) {
+                    this.features.forEach(item => {
+                        if (this.collapsedStates[item.layerName] === undefined) {
+                            this.collapsedStates[item.layerName] = true;
+                        }
+                    });
+                }
+            }
+        });
+    }
+    toggleCollapse(layerName) {
+        this.collapsedStates[layerName] = !this.collapsedStates[layerName];
+    }
+    isCollapsed(layerName) {
+        return this.collapsedStates[layerName] || false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectedFeatureInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SelectedFeatureInfoComponent, isStandalone: true, selector: "selected-feature-info", ngImport: i0, template: "\n@if(features) {\n    <div class=\"selected-features-wrapper\"> \n\n        @for(item of features; track item.layerName) { \n            <div class=\"feature-section\">\n                <h4 (click)=\"toggleCollapse(item.layerName)\" class=\"collapsible-header\">\n                    <mat-icon class=\"collapse-icon\">\n                        {{ isCollapsed(item.layerName) ? 'keyboard_arrow_up' : 'expand_more' }}\n                    </mat-icon>\n                    {{item.layerName}}\n                </h4>\n                \n                <div class=\"feature-content\" [class.collapsed]=\"isCollapsed(item.layerName)\">\n                    @for(feature of item.values; track feature) {\n                        <div class=\"feature-item\">\n                            <div *ngFor=\"let kv of (feature | keyvalue)\">\n                                {{ kv.value.name }}:\n                                <ng-container [ngSwitch]=\"kv.value.kind\">\n                                    <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n                                    <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n                                        {{ kv.key }}\n                                        <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                                    </a>\n                                    <span *ngSwitchDefault>{{ kv.value.data }}</span>\n                                </ng-container>\n                            </div>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n}\n", styles: ["::ng-deep .selected-features-wrapper{background:#292a2d;border-radius:5px;box-shadow:0 4px 6px #00000012,0 10px 20px #0000001a;max-width:420px;max-height:450px;overflow-y:auto;position:relative;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8)}::ng-deep .selected-features-wrapper::-webkit-scrollbar{width:12px}::ng-deep .selected-features-wrapper::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .selected-features-wrapper::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .selected-features-wrapper::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .selected-features-wrapper .feature-section{padding:20px 24px;position:relative}::ng-deep .selected-features-wrapper .feature-section:after{content:\"\";position:absolute;bottom:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 20%,rgba(0,0,0,.08) 80%,transparent 100%)}::ng-deep .selected-features-wrapper .feature-section:last-child:after{display:none}::ng-deep .selected-features-wrapper .feature-section h4.collapsible-header{margin:0 0 16px;font-size:18px;font-weight:700;color:#bdc1c3cc;letter-spacing:-.3px;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;display:flex;align-items:center}::ng-deep .selected-features-wrapper .feature-section h4.collapsible-header:hover{color:#d4d8dacc}::ng-deep .selected-features-wrapper .feature-section h4.collapsible-header .collapse-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:24px;width:24px;height:24px;transition:transform .3s ease;color:#fff}::ng-deep .selected-features-wrapper .feature-section .feature-content{max-height:2000px;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin-top .3s ease;opacity:1}::ng-deep .selected-features-wrapper .feature-section .feature-content.collapsed{max-height:0;opacity:0;margin-top:0}::ng-deep .selected-features-wrapper .feature-section .feature-item{margin-top:14px;background:#000;border-radius:10px;padding:16px;box-shadow:0 2px 4px #0000000a,0 1px 2px #0000000f;border:1px solid rgba(0,0,0,.06);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;color:#fff}::ng-deep .selected-features-wrapper .feature-section .feature-item:hover{box-shadow:0 4px 12px #2196f326,0 2px 4px #00000014;border-color:#2196f333}::ng-deep .selected-features-wrapper .feature-section .feature-item:hover:before{opacity:1}::ng-deep .selected-features-wrapper .feature-section .feature-item:first-of-type{margin-top:0}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of]{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;margin-bottom:12px;font-size:14px;line-height:1.6;padding:6px 0;color:#546e7a;font-weight:600;white-space:nowrap;display:flex;align-items:center}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of]:last-child{margin-bottom:0}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of]:after{content:\"\";display:inline-block;width:4px;height:4px;background:#2196f3;border-radius:50%;margin-left:6px;opacity:.5}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of] span{color:#1a1a1a;font-weight:500;word-break:break-word;background:linear-gradient(135deg,#f5f5f5,#fafafa);padding:4px 10px;border-radius:6px;border:1px solid rgba(0,0,0,.05)}::ng-deep .selected-features-wrapper img{margin-top:8px;border-radius:8px;border:2px solid #e3f2fd;max-width:100%;max-height:200px;display:block;box-shadow:0 4px 12px #0000001a;transition:transform .3s ease,box-shadow .3s ease}::ng-deep .selected-features-wrapper img:hover{box-shadow:0 8px 20px #00000026}::ng-deep .selected-features-wrapper a{color:#89bbeb!important;font-weight:600;transition:all .3s ease;text-decoration:underline;position:relative;padding:2px 4px;border-radius:3px}::ng-deep .selected-features-wrapper a:hover{color:#0d78ca!important;background-color:transparent;text-decoration:underline;transform:translateY(-1px)}::ng-deep .selected-features-wrapper a:active{transform:translateY(0)}::ng-deep .selected-features-wrapper a:after{content:\"\";position:absolute;width:100%;height:1px;bottom:-1px;left:0;background-color:#0d78ca;transform:scaleX(0);transition:transform .3s ease}::ng-deep .selected-features-wrapper a:hover:after{transform:scaleX(1)}@media (max-width: 768px){.selected-features-wrapper{max-width:100%;border-radius:12px 12px 0 0}.selected-features-wrapper .feature-section{padding:16px 20px}.selected-features-wrapper .feature-section:after{left:20px;right:20px}.selected-features-wrapper .feature-section h4.collapsible-header{font-size:16px}.selected-features-wrapper .feature-section .feature-item>div{grid-template-columns:1fr;font-size:13px;gap:4px}.selected-features-wrapper .feature-section .feature-item>div:after{display:none}.selected-features-wrapper .feature-section .feature-item>div span,.selected-features-wrapper .feature-section .feature-item>div a{margin-left:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectedFeatureInfoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'selected-feature-info', imports: [CommonModule, FormsModule, AsyncPipe, JsonPipe, MatButtonModule, MatIconModule], template: "\n@if(features) {\n    <div class=\"selected-features-wrapper\"> \n\n        @for(item of features; track item.layerName) { \n            <div class=\"feature-section\">\n                <h4 (click)=\"toggleCollapse(item.layerName)\" class=\"collapsible-header\">\n                    <mat-icon class=\"collapse-icon\">\n                        {{ isCollapsed(item.layerName) ? 'keyboard_arrow_up' : 'expand_more' }}\n                    </mat-icon>\n                    {{item.layerName}}\n                </h4>\n                \n                <div class=\"feature-content\" [class.collapsed]=\"isCollapsed(item.layerName)\">\n                    @for(feature of item.values; track feature) {\n                        <div class=\"feature-item\">\n                            <div *ngFor=\"let kv of (feature | keyvalue)\">\n                                {{ kv.value.name }}:\n                                <ng-container [ngSwitch]=\"kv.value.kind\">\n                                    <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n                                    <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n                                        {{ kv.key }}\n                                        <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                                    </a>\n                                    <span *ngSwitchDefault>{{ kv.value.data }}</span>\n                                </ng-container>\n                            </div>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n}\n", styles: ["::ng-deep .selected-features-wrapper{background:#292a2d;border-radius:5px;box-shadow:0 4px 6px #00000012,0 10px 20px #0000001a;max-width:420px;max-height:450px;overflow-y:auto;position:relative;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8)}::ng-deep .selected-features-wrapper::-webkit-scrollbar{width:12px}::ng-deep .selected-features-wrapper::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .selected-features-wrapper::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .selected-features-wrapper::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .selected-features-wrapper .feature-section{padding:20px 24px;position:relative}::ng-deep .selected-features-wrapper .feature-section:after{content:\"\";position:absolute;bottom:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 20%,rgba(0,0,0,.08) 80%,transparent 100%)}::ng-deep .selected-features-wrapper .feature-section:last-child:after{display:none}::ng-deep .selected-features-wrapper .feature-section h4.collapsible-header{margin:0 0 16px;font-size:18px;font-weight:700;color:#bdc1c3cc;letter-spacing:-.3px;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;display:flex;align-items:center}::ng-deep .selected-features-wrapper .feature-section h4.collapsible-header:hover{color:#d4d8dacc}::ng-deep .selected-features-wrapper .feature-section h4.collapsible-header .collapse-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:24px;width:24px;height:24px;transition:transform .3s ease;color:#fff}::ng-deep .selected-features-wrapper .feature-section .feature-content{max-height:2000px;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin-top .3s ease;opacity:1}::ng-deep .selected-features-wrapper .feature-section .feature-content.collapsed{max-height:0;opacity:0;margin-top:0}::ng-deep .selected-features-wrapper .feature-section .feature-item{margin-top:14px;background:#000;border-radius:10px;padding:16px;box-shadow:0 2px 4px #0000000a,0 1px 2px #0000000f;border:1px solid rgba(0,0,0,.06);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;color:#fff}::ng-deep .selected-features-wrapper .feature-section .feature-item:hover{box-shadow:0 4px 12px #2196f326,0 2px 4px #00000014;border-color:#2196f333}::ng-deep .selected-features-wrapper .feature-section .feature-item:hover:before{opacity:1}::ng-deep .selected-features-wrapper .feature-section .feature-item:first-of-type{margin-top:0}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of]{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;margin-bottom:12px;font-size:14px;line-height:1.6;padding:6px 0;color:#546e7a;font-weight:600;white-space:nowrap;display:flex;align-items:center}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of]:last-child{margin-bottom:0}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of]:after{content:\"\";display:inline-block;width:4px;height:4px;background:#2196f3;border-radius:50%;margin-left:6px;opacity:.5}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of] span{color:#1a1a1a;font-weight:500;word-break:break-word;background:linear-gradient(135deg,#f5f5f5,#fafafa);padding:4px 10px;border-radius:6px;border:1px solid rgba(0,0,0,.05)}::ng-deep .selected-features-wrapper img{margin-top:8px;border-radius:8px;border:2px solid #e3f2fd;max-width:100%;max-height:200px;display:block;box-shadow:0 4px 12px #0000001a;transition:transform .3s ease,box-shadow .3s ease}::ng-deep .selected-features-wrapper img:hover{box-shadow:0 8px 20px #00000026}::ng-deep .selected-features-wrapper a{color:#89bbeb!important;font-weight:600;transition:all .3s ease;text-decoration:underline;position:relative;padding:2px 4px;border-radius:3px}::ng-deep .selected-features-wrapper a:hover{color:#0d78ca!important;background-color:transparent;text-decoration:underline;transform:translateY(-1px)}::ng-deep .selected-features-wrapper a:active{transform:translateY(0)}::ng-deep .selected-features-wrapper a:after{content:\"\";position:absolute;width:100%;height:1px;bottom:-1px;left:0;background-color:#0d78ca;transform:scaleX(0);transition:transform .3s ease}::ng-deep .selected-features-wrapper a:hover:after{transform:scaleX(1)}@media (max-width: 768px){.selected-features-wrapper{max-width:100%;border-radius:12px 12px 0 0}.selected-features-wrapper .feature-section{padding:16px 20px}.selected-features-wrapper .feature-section:after{left:20px;right:20px}.selected-features-wrapper .feature-section h4.collapsible-header{font-size:16px}.selected-features-wrapper .feature-section .feature-item>div{grid-template-columns:1fr;font-size:13px;gap:4px}.selected-features-wrapper .feature-section .feature-item>div:after{display:none}.selected-features-wrapper .feature-section .feature-item>div span,.selected-features-wrapper .feature-section .feature-item>div a{margin-left:0}}\n"] }]
+        }] });
+
+'ol/format/geojson';
+class HoverInfoSearchService extends SearchProviderBase {
+    _current = inject(CurrentItemsService);
+    geojsonFormat = new GeoJSON;
+    getSearchableLayers() {
+        return this._current.profile.layerGroups.flatMap(l => l.layers).filter(l => l.showInfoOnHover);
+    }
+    getFilter(searchValue, layer) {
+        const point = new Point(searchValue);
+        return intersects(layer.geometryField, point);
+    }
+    map(l, f) {
+        return {
+            values: f.features.map(f => ({
+                center: this._getCenterPoint(f.geometry),
+                showValue: f.properties ? f.properties[l.propertyToShowOnHover] : ''
+            }))
+        };
+    }
+    _getCenterPoint(geometry) {
+        const geom = this.geojsonFormat.readGeometry(geometry);
+        const geomType = geom.getType();
+        switch (geomType) {
+            case 'Point':
+                return geom;
+            case 'LineString':
+                const ls = geom;
+                return new Point(ls.getCoordinateAt(0.5));
+            case 'Polygon':
+                const poly = geom;
+                return poly.getInteriorPoint();
+            // case 'MultiLineString':
+            // case 'MultiPolygon':
+            // case 'GeometryCollection':
+            // case 'Circle':
+            //     return new Point([]);
+        }
+        return new Point([]); // 
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HoverInfoSearchService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HoverInfoSearchService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HoverInfoSearchService, decorators: [{
+            type: Injectable
+        }] });
+
+class ShowInfoHoverService {
+    _current = inject(CurrentItemsService);
+    _search = inject(HoverInfoSearchService);
+    source = new VectorSource();
+    _layer = new VectorLayer({
+        source: this.source,
+        zIndex: 500,
+    });
+    init() {
+        this._current.map$.subscribe({
+            next: map => {
+                let timer;
+                map.addLayer(this._layer);
+                map.on('pointermove', evt => {
+                    if (evt.dragging) {
+                        return;
+                    }
+                    clearTimeout(timer); // for every move, restart the timer
+                    timer = setTimeout(() => {
+                        this.source.clear();
+                        this._search.search(evt.coordinate, 2).subscribe({
+                            next: features => {
+                                const newFeatures = features
+                                    .flatMap(f => f.values)
+                                    .map(f => {
+                                    const styleForFeature = this._getStyle(f.showValue);
+                                    const newFeature = new Feature({ geometry: f.center });
+                                    newFeature.setStyle(styleForFeature);
+                                    return newFeature;
+                                });
+                                this.source.addFeatures(newFeatures);
+                            }
+                        });
+                    }, 300);
+                });
+            }
+        });
+    }
+    _getStyle(text) {
+        const style = new Style({
+            text: new Text({
+                text: text,
+                font: '12px Calibri,sans-serif',
+                fill: new Fill({ color: '#000' }),
+                stroke: new Stroke({ color: '#fff', width: 3 }),
+                overflow: true,
+                placement: 'point'
+            })
+        });
+        return style;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ShowInfoHoverService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ShowInfoHoverService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ShowInfoHoverService, decorators: [{
+            type: Injectable
         }] });
 
 class GisKomponentComponent {
     _profileService = inject(ProfileService);
-    // private readonly _undoRedo = inject(UndoRedoService);
     _http = inject(HttpClient);
     _layerHelper = inject(LayerHelperService);
     _layerErrorService = inject(LayerErrorService);
     _featureLoader = inject(FeatureLoaderService);
+    _drawLayerService = inject(DrawLayerSourceService);
+    _showHoverInfoService = inject(ShowInfoHoverService);
+    _printHelper = inject(PrintHelperService);
     showToolbox = true;
     showActiveObjects = true;
     showLegendList = true;
@@ -2127,7 +3859,10 @@ class GisKomponentComponent {
     identifier;
     settings;
     toolbarRef;
-    activeObjectsRef;
+    // @ViewChild('activeObjectsRef', {static: true }) activeObjectsRef!: ElementRef;
+    selectedFeatureInfoRef;
+    sessionDone = new EventEmitter();
+    featuresChanged = new EventEmitter();
     map;
     toolbarCollapsed = false;
     layerPanelCollapsed = false;
@@ -2139,10 +3874,13 @@ class GisKomponentComponent {
     profiles = [];
     selectedProfile;
     profileShowToolbox = false;
-    _highlightService = inject(highlightService);
+    _highlightService = inject(HighlightService);
     _currentItems = inject(CurrentItemsService);
     layers = [];
-    mousePositionCtrl = new ol_control_mouse({ projection: 'EPSG:25832' });
+    mousePositionCtrl = new ol_control_mouse({
+        projection: 'EPSG:25832',
+        coordinateFormat: createStringXY(2)
+    });
     onMoveEndCheckZoomFunction = () => { };
     currentZoomLevel = 0;
     scaleCtrl = new ol_control_scale({
@@ -2152,6 +3890,9 @@ class GisKomponentComponent {
         text: true,
         minWidth: 120
     });
+    constructor() {
+        this._currentItems.gisKomponentSettings = this.settings;
+    }
     profileSelected(profileIdentifier) {
         this._profileService.getByIdentifier(profileIdentifier).subscribe({
             next: profile => {
@@ -2173,11 +3914,11 @@ class GisKomponentComponent {
                                 layers: lg.layers
                                     .filter(layer => layer.activeInSelector)
                                     .sort((a, b) => a.sortOrder - b.sortOrder)
-                                    .map((l, index) => this._mapLayer(l, capabilityObject, 'EPSG:25832', lg.id, index)) // for now, we default to EPSG:25832. 
+                                    .map((l, index) => this._mapLayer(l, capabilityObject, 'EPSG:25832', lg.id, index)), // for now, we default to EPSG:25832.
+                                properties: { id: lg.id }
                             }))
                         ];
                         this.map.setLayers(layers);
-                        this.map.addLayer(this._highlightService.highlightLayer);
                         if (this.settings) {
                             this._featureLoader.loadFeaturesSettings(this.settings);
                         }
@@ -2192,11 +3933,18 @@ class GisKomponentComponent {
                     this.profileShowToolbox = true;
                     this.map.addControl(toolbarControl);
                 }
+                this._currentItems.gisKomponentSettings = this.settings;
                 this.activeObjectsReady = true;
-                const activeObjectsControl = new Control({
-                    element: this.activeObjectsRef.nativeElement
+                // if (this.activeObjectsRef) {
+                //     const activeObjectsControl = new Control({
+                //     element: this.activeObjectsRef.nativeElement
+                //   });
+                //   this.map.addControl(activeObjectsControl);
+                // }
+                const selectedFeatureInfoRefControl = new Control({
+                    element: this.selectedFeatureInfoRef.nativeElement
                 });
-                this.map.addControl(activeObjectsControl);
+                this.map.addControl(selectedFeatureInfoRefControl);
                 this._handleShowMouseCoordinates(profile.showCoordinates);
                 this._handleShowScale(profile.showScale);
                 this._setLogo(profile.logoUrl);
@@ -2205,11 +3953,33 @@ class GisKomponentComponent {
                 this.onMoveEndCheckZoomFunction = () => {
                     this._checkZoom(this.map);
                 };
+                this._drawLayerService.features$.subscribe({
+                    next: features => {
+                        const geojson = new GeoJSON$1();
+                        this.featuresChanged.emit(geojson.writeFeaturesObject(features));
+                    }
+                });
                 this.map.on('moveend', this.onMoveEndCheckZoomFunction);
-                this._currentItems.map = this.map;
+                this._showHoverInfoService.init();
             }
         });
     }
+    sessionDoneFromActiveObject() {
+        const formatter = new GeoJSON$1();
+        const sessionDone = {
+            doneFrom: 'activeObjects',
+            features: formatter.writeFeaturesObject(this._drawLayerService.allCleanedFeatures)
+        };
+        if (this._currentItems.gisKomponentSettings.printMapSettings && this._currentItems.gisKomponentSettings.printMapSettings.doPrintWhenSessionIsClosed) {
+            this._printHelper.getImgData(this.map, this._currentItems.gisKomponentSettings.printMapSettings.printFormat, this._currentItems.gisKomponentSettings.printMapSettings.printDimensions).then(dataUrl => {
+                sessionDone.imgData = dataUrl;
+                this.sessionDone.emit(sessionDone);
+            });
+        }
+        else {
+            this.sessionDone.emit(sessionDone);
+        }
+    }
     _checkZoom(map) {
         this.currentZoomLevel = map.getView().getZoom() ?? this.currentZoomLevel;
     }
@@ -2326,7 +4096,26 @@ class GisKomponentComponent {
         this.map = new Map$1({
             target: 'map',
         });
+        // this._currentItems.gisKomponentSettings = this.settings!;
         this.map.addControl(new Rotate({ autoHide: false }));
+        this._addRotateControl();
+    }
+    // Added custom north-arrow with a compass one
+    _addRotateControl() {
+        const iconElement = document.createElement('span');
+        iconElement.innerHTML = `
+      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M12 3 L16 10 L12 8 L8 10 Z" fill="currentColor"/>
+        <path d="M12 21 L8 14 L12 16 L16 14 Z" fill="currentColor"/>
+        <circle cx="12" cy="12" r="1.5" fill="currentColor"/>
+      </svg>
+    `;
+        const rotateControl = new Rotate({
+            label: iconElement,
+            tipLabel: 'Reset to north',
+            autoHide: false
+        });
+        this.map.addControl(rotateControl);
     }
     toggleShowConflicts() {
         this.showConflicts = !this.showConflicts;
@@ -2344,12 +4133,14 @@ class GisKomponentComponent {
         this.activeObjectsCollapsed = !this.activeObjectsCollapsed;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GisKomponentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GisKomponentComponent, isStandalone: true, selector: "gis-komponent", inputs: { showToolbox: "showToolbox", showActiveObjects: "showActiveObjects", showLegendList: "showLegendList", showMapSearch: "showMapSearch", identifier: "identifier", settings: "settings" }, providers: [LayerHelperService], viewQueries: [{ propertyName: "toolbarRef", first: true, predicate: ["toolbarRef"], descendants: true, static: true }, { propertyName: "activeObjectsRef", first: true, predicate: ["activeObjectsRef"], descendants: true, static: true }], ngImport: i0, template: "@if (selectedProfile && selectedProfile.showLayerSelector) {\n  <lib-layer-selector [map]=\"map\" [profile]=\"selectedProfile\" [currentZoomLevel]=\"currentZoomLevel\"></lib-layer-selector>\n}\n@if (selectedProfile && selectedProfile.showLegends) {\n  <lib-legends-list [map]=\"map\" [profile]=\"selectedProfile\"></lib-legends-list>\n}\n\n<!-- <span>Zoom: {{ currentZoomLevel}}</span> -->\n<div #activeObjectsRef>\n  @if(showActiveObjects && activeObjectsReady && settings) {\n    <activeObjects [settings]=\"settings\"></activeObjects>\n  }\n</div>\n<div #toolbarRef class=\"map-toolbar-container\">\n    @if(showToolbox && profileShowToolbox && settings) {\n      <map-toolbox [map]=\"map\" \n      [profile]=\"selectedProfile\"\n      [settings]=\"settings\"\n      [collapsed]=\"selectedProfile.toolbarCollapsed\" [WKTInputEnabled]=\"settings?.WKTInputEnabled\" [deleteEnabled]=\"settings?.deleteEnabled\" [showMeasureArea]=\"selectedProfile.showAreaMeasurement\" [showMeasureDistance]=\"selectedProfile.showDistanceMeasurement\"></map-toolbox>\n    }\n</div>\n\n<div class=\"map-container\">\n  <lib-map-search *ngIf=\"showMapSearch\"></lib-map-search>\n\n  <!-- Objektvisning -->\n   <!-- @if (showObjects) {\n     <div class=\"object-panel\" [class.collapsed]=\"activeObjectsCollapsed\">\n       <div class=\"header\" (click)=\"toggleActiveObjectsCollapsed()\">\n         <span>Aktive objekter ({{activeObjects.length}})</span>\n         <mat-icon>{{ activeObjectsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n        </div>\n        @if (!activeObjectsCollapsed){\n          <ul>\n            <li *ngFor=\"let obj of activeObjects\">{{ obj.name }} ({{obj.size}})</li>\n          </ul>\n        }\n      </div>\n  } -->\n\n  <!-- Konflikter -->\n    @if (showConflicts) {\n\n     <div class=\"conflict-panel\" [class.collapsed]=\"conflictsCollapsed\">\n       <div class=\"header\">\n         <span>Konflikter (3)</span>\n          <mat-icon>{{ activeObjectsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon> -->\n        </div>\n        <mat-list>\n          <mat-list-item>\n            <span matListItemTitle>Lag #1</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n          </mat-list-item>\n          <mat-list-item>\n            <span matListItemTitle>Lag #2 (svarer ikke)</span>\n          </mat-list-item>\n          <mat-list-item>\n            <span matListItemTitle>Lag #3</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #2</span>\n          </mat-list-item>\n        </mat-list>\n      </div>\n      \n    } \n\n  <!-- Kort -->\n  <div id=\"map\" class=\"map\"></div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}::ng-deep .lib-error-snackbar{background-color:#d32f2f;color:#fff;font-weight:500}::ng-deep .map-container{position:relative;height:81vh;width:100%;overflow:hidden}::ng-deep #map{width:100%;height:100%;position:absolute;inset:0;overflow:hidden}::ng-deep .ol-viewport{overflow:hidden!important}::ng-deep ::ng-deep .ol-logo{position:absolute;left:auto;right:3em;top:6.25em}::ng-deep ::ng-deep .ol-copyright{background-color:transparent;position:absolute;bottom:10px;width:100%;text-align:center}::ng-deep ::ng-deep .toolbar{position:absolute;top:10px;left:10px;background:#fff;padding:4px;border-radius:4px;display:flex;flex-direction:column;transition:width .3s;z-index:1000;overflow:hidden}::ng-deep ::ng-deep .toolbar.collapsed{width:40px;overflow:hidden}::ng-deep .object-panel{position:absolute;bottom:10px;left:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .object-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep .conflict-panel{position:absolute;bottom:10px;right:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .conflict-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep ::ng-deep .ol-zoom.ol-unselectable.ol-control{display:flex;flex-direction:column;position:absolute;top:2rem;left:1rem}::ng-deep ::ng-deep button.ol-zoom-in{font-size:2em;width:40px;height:40px;background-color:color-mix(in srgb,#000 60%,transparent);border:none;box-shadow:none;cursor:pointer;color:#fff}::ng-deep ::ng-deep button.ol-zoom-in:hover{color:#e9e3e3;outline:none}::ng-deep button.ol-zoom-out{font-size:2em;width:40px;height:40px;background-color:color-mix(in srgb,#000 60%,transparent);border:none;box-shadow:none;cursor:pointer;color:#fff}::ng-deep button.ol-zoom-out:hover{color:#e9e3e3;outline:none}::ng-deep button.ol-rotate-reset{font-size:2em;width:40px;height:40px;background-color:color-mix(in srgb,#000 60%,transparent);border:none;box-shadow:none;cursor:pointer;color:#fff}::ng-deep button.ol-rotate-reset:hover{color:#e9e3e3;outline:none}::ng-deep .ol-scale-bar.ol-unselectable{position:absolute;bottom:1rem;left:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i3$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: LayerSelectorComponent, selector: "lib-layer-selector", inputs: ["map", "profile", "currentZoomLevel"] }, { kind: "component", type: MapSearchComponent, selector: "lib-map-search" }, { kind: "component", type: ToolboxComponent, selector: "map-toolbox", inputs: ["map", "showMeasureDistance", "showMeasureArea", "collapsed", "settings", "profile", "WKTInputEnabled", "deleteEnabled"] }, { kind: "component", type: ActiveObjectsComponent, selector: "activeObjects", inputs: ["settings"] }, { kind: "component", type: LegendsListComponent, selector: "lib-legends-list", inputs: ["map", "profile"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GisKomponentComponent, isStandalone: true, selector: "gis-komponent", inputs: { showToolbox: "showToolbox", showActiveObjects: "showActiveObjects", showLegendList: "showLegendList", showMapSearch: "showMapSearch", identifier: "identifier", settings: "settings" }, outputs: { sessionDone: "sessionDone", featuresChanged: "featuresChanged" }, providers: [CurrentItemsService, FeatureLoaderService, DrawLayerSourceService, ZoomService, UndoRedoService, ShowInfoHoverService, HoverInfoSearchService, CenterPointService, PrintDrawLayerSourceService,
+            HighlightService, ShowInfoService, InfoSearchProvider, InteractionHelperService, ConflictAnalysisSearchProvider, MergeFeaturesService, OverlapService], viewQueries: [{ propertyName: "toolbarRef", first: true, predicate: ["toolbarRef"], descendants: true, static: true }, { propertyName: "selectedFeatureInfoRef", first: true, predicate: ["selectedFeatureInfoRef"], descendants: true, static: true }], ngImport: i0, template: "@if (selectedProfile && selectedProfile.showLayerSelector) {\n  <lib-layer-selector [map]=\"map\" [profile]=\"selectedProfile\" [currentZoomLevel]=\"currentZoomLevel\"></lib-layer-selector>\n}\n@if (selectedProfile && selectedProfile.showLegends) {\n  <lib-legends-list [map]=\"map\" [profile]=\"selectedProfile\"></lib-legends-list>\n}\n\n<div #selectedFeatureInfoRef>\n  <selected-feature-info></selected-feature-info>\n</div>\n\n@if(showActiveObjects && activeObjectsReady && settings && selectedProfile) {\n  <activeObjects [settings]=\"settings\" [profile]=\"selectedProfile\" (sessionDone)=\"sessionDoneFromActiveObject()\"></activeObjects>\n}\n<div #toolbarRef class=\"map-toolbar-container\">\n    @if(showToolbox && profileShowToolbox && settings) {\n      <map-toolbox [map]=\"map\" \n      [profile]=\"selectedProfile\"\n      [settings]=\"settings\"\n      [collapsed]=\"selectedProfile.toolbarCollapsed\" [WKTInputEnabled]=\"settings?.WKTInputEnabled\" [deleteEnabled]=\"settings?.deleteEnabled\" [showMeasureArea]=\"selectedProfile.showAreaMeasurement\" [showMeasureDistance]=\"selectedProfile.showDistanceMeasurement\"></map-toolbox>\n    }\n</div>\n\n<div class=\"map-container\">\n  <lib-map-search *ngIf=\"showMapSearch\" [profile]=\"selectedProfile\"></lib-map-search>\n\n\n  <!-- Konflikter -->\n    @if (showConflicts) {\n\n     <div class=\"conflict-panel\" [class.collapsed]=\"conflictsCollapsed\">\n       <div class=\"header\">\n         <span>Konflikter (3)</span>\n          <mat-icon>{{ activeObjectsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon> -->\n        </div>\n        <mat-list>\n          <mat-list-item>\n            <span matListItemTitle>Lag #1</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n          </mat-list-item>\n          <mat-list-item>\n            <span matListItemTitle>Lag #2 (svarer ikke)</span>\n          </mat-list-item>\n          <mat-list-item>\n            <span matListItemTitle>Lag #3</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #2</span>\n          </mat-list-item>\n        </mat-list>\n      </div>\n      \n    } \n\n  <!-- Kort -->\n  <div id=\"map\" class=\"map\"></div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}::ng-deep .lib-error-snackbar{background-color:#d32f2f;color:#fff;font-weight:500}::ng-deep .map-container{position:relative;height:81vh;width:100%;overflow:hidden}::ng-deep #map{width:100%;height:100%;position:absolute;inset:0;overflow:hidden}::ng-deep .ol-viewport{overflow:hidden!important}::ng-deep ::ng-deep .ol-logo{position:absolute;left:auto;right:3em;top:6.25em}::ng-deep ::ng-deep .ol-copyright{background-color:transparent;position:absolute;bottom:10px;width:100%;text-align:center}::ng-deep ::ng-deep .toolbar{position:absolute;top:10px;left:10px;background:#fff;padding:4px;border-radius:4px;display:flex;flex-direction:column;transition:width .3s;z-index:1000;overflow:hidden}::ng-deep ::ng-deep .toolbar.collapsed{width:40px;overflow:hidden}::ng-deep .object-panel{position:absolute;bottom:10px;left:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .object-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep .conflict-panel{position:absolute;bottom:10px;right:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .conflict-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep ::ng-deep .ol-zoom.ol-unselectable.ol-control{display:flex;flex-direction:column;position:absolute;left:1rem}::ng-deep ::ng-deep button.ol-zoom-in{font-size:2em;width:40px;height:40px;background-color:#292a2d;border:none;box-shadow:none;cursor:pointer;border-radius:5px 5px 0 0!important;color:#fff}::ng-deep ::ng-deep button.ol-zoom-in:hover{color:#e9e3e3;outline:none}::ng-deep ::ng-deep .ol-scale-text{display:flex}::ng-deep button.ol-zoom-out{font-size:2em;width:40px;height:40px;background-color:#292a2d;border:none;box-shadow:none;cursor:pointer;color:#fff;border-radius:0 0 5px 5px!important}::ng-deep button.ol-zoom-out:hover{color:#e9e3e3;outline:none}::ng-deep button.ol-rotate-reset{font-size:2em;width:40px;height:40px;background-color:#292a2d;border:none;box-shadow:none;cursor:pointer;color:#fff;border-radius:5px}::ng-deep button.ol-rotate-reset:hover{color:#e9e3e3;outline:none}::ng-deep .ol-scale-bar.ol-unselectable{position:absolute;bottom:3rem;left:1rem}::ng-deep .ol-mouse-position{top:44em;left:12px;position:absolute;background:color-mix(in srgb,#000 21%,transparent);color:#fffcfc;width:189px;height:30px;padding:2px;border-radius:5px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;text-align:center;display:flex;align-items:center;justify-content:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i3$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: LayerSelectorComponent, selector: "lib-layer-selector", inputs: ["map", "profile", "currentZoomLevel"] }, { kind: "component", type: MapSearchComponent, selector: "lib-map-search", inputs: ["profile"] }, { kind: "component", type: ToolboxComponent, selector: "map-toolbox", inputs: ["map", "showMeasureDistance", "showMeasureArea", "collapsed", "settings", "profile", "WKTInputEnabled", "deleteEnabled"] }, { kind: "component", type: ActiveObjectsComponent, selector: "activeObjects", inputs: ["settings", "profile"], outputs: ["sessionDone"] }, { kind: "component", type: LegendsListComponent, selector: "lib-legends-list", inputs: ["map", "profile"] }, { kind: "component", type: SelectedFeatureInfoComponent, selector: "selected-feature-info" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GisKomponentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'gis-komponent', imports: [CommonModule, MatIconModule, MatListModule, MatSelectModule, LayerSelectorComponent, MapSearchComponent, ToolboxComponent, ActiveObjectsComponent, LegendsListComponent], providers: [LayerHelperService], template: "@if (selectedProfile && selectedProfile.showLayerSelector) {\n  <lib-layer-selector [map]=\"map\" [profile]=\"selectedProfile\" [currentZoomLevel]=\"currentZoomLevel\"></lib-layer-selector>\n}\n@if (selectedProfile && selectedProfile.showLegends) {\n  <lib-legends-list [map]=\"map\" [profile]=\"selectedProfile\"></lib-legends-list>\n}\n\n<!-- <span>Zoom: {{ currentZoomLevel}}</span> -->\n<div #activeObjectsRef>\n  @if(showActiveObjects && activeObjectsReady && settings) {\n    <activeObjects [settings]=\"settings\"></activeObjects>\n  }\n</div>\n<div #toolbarRef class=\"map-toolbar-container\">\n    @if(showToolbox && profileShowToolbox && settings) {\n      <map-toolbox [map]=\"map\" \n      [profile]=\"selectedProfile\"\n      [settings]=\"settings\"\n      [collapsed]=\"selectedProfile.toolbarCollapsed\" [WKTInputEnabled]=\"settings?.WKTInputEnabled\" [deleteEnabled]=\"settings?.deleteEnabled\" [showMeasureArea]=\"selectedProfile.showAreaMeasurement\" [showMeasureDistance]=\"selectedProfile.showDistanceMeasurement\"></map-toolbox>\n    }\n</div>\n\n<div class=\"map-container\">\n  <lib-map-search *ngIf=\"showMapSearch\"></lib-map-search>\n\n  <!-- Objektvisning -->\n   <!-- @if (showObjects) {\n     <div class=\"object-panel\" [class.collapsed]=\"activeObjectsCollapsed\">\n       <div class=\"header\" (click)=\"toggleActiveObjectsCollapsed()\">\n         <span>Aktive objekter ({{activeObjects.length}})</span>\n         <mat-icon>{{ activeObjectsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\n        </div>\n        @if (!activeObjectsCollapsed){\n          <ul>\n            <li *ngFor=\"let obj of activeObjects\">{{ obj.name }} ({{obj.size}})</li>\n          </ul>\n        }\n      </div>\n  } -->\n\n  <!-- Konflikter -->\n    @if (showConflicts) {\n\n     <div class=\"conflict-panel\" [class.collapsed]=\"conflictsCollapsed\">\n       <div class=\"header\">\n         <span>Konflikter (3)</span>\n          <mat-icon>{{ activeObjectsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon> -->\n        </div>\n        <mat-list>\n          <mat-list-item>\n            <span matListItemTitle>Lag #1</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n          </mat-list-item>\n          <mat-list-item>\n            <span matListItemTitle>Lag #2 (svarer ikke)</span>\n          </mat-list-item>\n          <mat-list-item>\n            <span matListItemTitle>Lag #3</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #2</span>\n          </mat-list-item>\n        </mat-list>\n      </div>\n      \n    } \n\n  <!-- Kort -->\n  <div id=\"map\" class=\"map\"></div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}::ng-deep .lib-error-snackbar{background-color:#d32f2f;color:#fff;font-weight:500}::ng-deep .map-container{position:relative;height:81vh;width:100%;overflow:hidden}::ng-deep #map{width:100%;height:100%;position:absolute;inset:0;overflow:hidden}::ng-deep .ol-viewport{overflow:hidden!important}::ng-deep ::ng-deep .ol-logo{position:absolute;left:auto;right:3em;top:6.25em}::ng-deep ::ng-deep .ol-copyright{background-color:transparent;position:absolute;bottom:10px;width:100%;text-align:center}::ng-deep ::ng-deep .toolbar{position:absolute;top:10px;left:10px;background:#fff;padding:4px;border-radius:4px;display:flex;flex-direction:column;transition:width .3s;z-index:1000;overflow:hidden}::ng-deep ::ng-deep .toolbar.collapsed{width:40px;overflow:hidden}::ng-deep .object-panel{position:absolute;bottom:10px;left:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .object-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep .conflict-panel{position:absolute;bottom:10px;right:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .conflict-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep ::ng-deep .ol-zoom.ol-unselectable.ol-control{display:flex;flex-direction:column;position:absolute;top:2rem;left:1rem}::ng-deep ::ng-deep button.ol-zoom-in{font-size:2em;width:40px;height:40px;background-color:color-mix(in srgb,#000 60%,transparent);border:none;box-shadow:none;cursor:pointer;color:#fff}::ng-deep ::ng-deep button.ol-zoom-in:hover{color:#e9e3e3;outline:none}::ng-deep button.ol-zoom-out{font-size:2em;width:40px;height:40px;background-color:color-mix(in srgb,#000 60%,transparent);border:none;box-shadow:none;cursor:pointer;color:#fff}::ng-deep button.ol-zoom-out:hover{color:#e9e3e3;outline:none}::ng-deep button.ol-rotate-reset{font-size:2em;width:40px;height:40px;background-color:color-mix(in srgb,#000 60%,transparent);border:none;box-shadow:none;cursor:pointer;color:#fff}::ng-deep button.ol-rotate-reset:hover{color:#e9e3e3;outline:none}::ng-deep .ol-scale-bar.ol-unselectable{position:absolute;bottom:1rem;left:1rem}\n"] }]
-        }], propDecorators: { showToolbox: [{
+            args: [{ selector: 'gis-komponent', imports: [CommonModule, MatIconModule, MatListModule, MatSelectModule, LayerSelectorComponent, MapSearchComponent, ToolboxComponent, ActiveObjectsComponent, LegendsListComponent, SelectedFeatureInfoComponent], providers: [CurrentItemsService, FeatureLoaderService, DrawLayerSourceService, ZoomService, UndoRedoService, ShowInfoHoverService, HoverInfoSearchService, CenterPointService, PrintDrawLayerSourceService,
+                        HighlightService, ShowInfoService, InfoSearchProvider, InteractionHelperService, ConflictAnalysisSearchProvider, MergeFeaturesService, OverlapService], template: "@if (selectedProfile && selectedProfile.showLayerSelector) {\n  <lib-layer-selector [map]=\"map\" [profile]=\"selectedProfile\" [currentZoomLevel]=\"currentZoomLevel\"></lib-layer-selector>\n}\n@if (selectedProfile && selectedProfile.showLegends) {\n  <lib-legends-list [map]=\"map\" [profile]=\"selectedProfile\"></lib-legends-list>\n}\n\n<div #selectedFeatureInfoRef>\n  <selected-feature-info></selected-feature-info>\n</div>\n\n@if(showActiveObjects && activeObjectsReady && settings && selectedProfile) {\n  <activeObjects [settings]=\"settings\" [profile]=\"selectedProfile\" (sessionDone)=\"sessionDoneFromActiveObject()\"></activeObjects>\n}\n<div #toolbarRef class=\"map-toolbar-container\">\n    @if(showToolbox && profileShowToolbox && settings) {\n      <map-toolbox [map]=\"map\" \n      [profile]=\"selectedProfile\"\n      [settings]=\"settings\"\n      [collapsed]=\"selectedProfile.toolbarCollapsed\" [WKTInputEnabled]=\"settings?.WKTInputEnabled\" [deleteEnabled]=\"settings?.deleteEnabled\" [showMeasureArea]=\"selectedProfile.showAreaMeasurement\" [showMeasureDistance]=\"selectedProfile.showDistanceMeasurement\"></map-toolbox>\n    }\n</div>\n\n<div class=\"map-container\">\n  <lib-map-search *ngIf=\"showMapSearch\" [profile]=\"selectedProfile\"></lib-map-search>\n\n\n  <!-- Konflikter -->\n    @if (showConflicts) {\n\n     <div class=\"conflict-panel\" [class.collapsed]=\"conflictsCollapsed\">\n       <div class=\"header\">\n         <span>Konflikter (3)</span>\n          <mat-icon>{{ activeObjectsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon> -->\n        </div>\n        <mat-list>\n          <mat-list-item>\n            <span matListItemTitle>Lag #1</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n          </mat-list-item>\n          <mat-list-item>\n            <span matListItemTitle>Lag #2 (svarer ikke)</span>\n          </mat-list-item>\n          <mat-list-item>\n            <span matListItemTitle>Lag #3</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #2</span>\n          </mat-list-item>\n        </mat-list>\n      </div>\n      \n    } \n\n  <!-- Kort -->\n  <div id=\"map\" class=\"map\"></div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}::ng-deep .lib-error-snackbar{background-color:#d32f2f;color:#fff;font-weight:500}::ng-deep .map-container{position:relative;height:81vh;width:100%;overflow:hidden}::ng-deep #map{width:100%;height:100%;position:absolute;inset:0;overflow:hidden}::ng-deep .ol-viewport{overflow:hidden!important}::ng-deep ::ng-deep .ol-logo{position:absolute;left:auto;right:3em;top:6.25em}::ng-deep ::ng-deep .ol-copyright{background-color:transparent;position:absolute;bottom:10px;width:100%;text-align:center}::ng-deep ::ng-deep .toolbar{position:absolute;top:10px;left:10px;background:#fff;padding:4px;border-radius:4px;display:flex;flex-direction:column;transition:width .3s;z-index:1000;overflow:hidden}::ng-deep ::ng-deep .toolbar.collapsed{width:40px;overflow:hidden}::ng-deep .object-panel{position:absolute;bottom:10px;left:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .object-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep .conflict-panel{position:absolute;bottom:10px;right:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .conflict-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep ::ng-deep .ol-zoom.ol-unselectable.ol-control{display:flex;flex-direction:column;position:absolute;left:1rem}::ng-deep ::ng-deep button.ol-zoom-in{font-size:2em;width:40px;height:40px;background-color:#292a2d;border:none;box-shadow:none;cursor:pointer;border-radius:5px 5px 0 0!important;color:#fff}::ng-deep ::ng-deep button.ol-zoom-in:hover{color:#e9e3e3;outline:none}::ng-deep ::ng-deep .ol-scale-text{display:flex}::ng-deep button.ol-zoom-out{font-size:2em;width:40px;height:40px;background-color:#292a2d;border:none;box-shadow:none;cursor:pointer;color:#fff;border-radius:0 0 5px 5px!important}::ng-deep button.ol-zoom-out:hover{color:#e9e3e3;outline:none}::ng-deep button.ol-rotate-reset{font-size:2em;width:40px;height:40px;background-color:#292a2d;border:none;box-shadow:none;cursor:pointer;color:#fff;border-radius:5px}::ng-deep button.ol-rotate-reset:hover{color:#e9e3e3;outline:none}::ng-deep .ol-scale-bar.ol-unselectable{position:absolute;bottom:3rem;left:1rem}::ng-deep .ol-mouse-position{top:44em;left:12px;position:absolute;background:color-mix(in srgb,#000 21%,transparent);color:#fffcfc;width:189px;height:30px;padding:2px;border-radius:5px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;text-align:center;display:flex;align-items:center;justify-content:flex-start}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { showToolbox: [{
                 type: Input
             }], showActiveObjects: [{
                 type: Input
@@ -2365,9 +4156,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             }], toolbarRef: [{
                 type: ViewChild,
                 args: ['toolbarRef', { static: true }]
-            }], activeObjectsRef: [{
+            }], selectedFeatureInfoRef: [{
                 type: ViewChild,
-                args: ['activeObjectsRef', { static: true }]
+                args: ['selectedFeatureInfoRef', { static: true }]
+            }], sessionDone: [{
+                type: Output
+            }], featuresChanged: [{
+                type: Output
             }] } });
 class CapabilitiesItem {
     url = '';