@regionerne/gis-komponent 0.0.19 → 0.0.23

package/fesm2022/regionerne-gis-komponent.mjs

@@ -1,8 +1,8 @@
-import * as i1 from '@angular/common';
+import * as i1$3 from '@angular/common';
 import { CommonModule } 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 } 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,9 +12,9 @@ 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 i5$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i3$2 from '@angular/material/list';
+import * as i3$1 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import ol_control_mouse from 'ol/control/MousePosition';
 import ol_control_scale from 'ol/control/ScaleLine';
@@ -22,49 +22,59 @@ 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, combineLatest, catchError, throwError } from 'rxjs';
+import { Subject, BehaviorSubject, tap, switchMap, EMPTY, of, map, ReplaySubject, filter, combineLatest, Observable, takeUntil, take, mergeWith, debounceTime, distinctUntilChanged, forkJoin, catchError, throwError } from 'rxjs';
 import WMTS, { optionsFromCapabilities } from 'ol/source/WMTS';
+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 i4 from '@angular/cdk/drag-drop';
 import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i3 from '@angular/material/form-field';
+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$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i3$1 from '@angular/material/expansion';
+import * as i5 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i6 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 i7 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import 'ol/ol.css';
 import { LineString, Point } 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 { Style, Circle, Stroke, Fill, Text, RegularShape } from 'ol/style';
 import * as i4$1 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, featureCollection, difference, booleanIntersects, union, point, booleanPointInPolygon, area } 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 { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { Feature } from 'ol';
+import { extend, createEmpty, buffer as buffer$1 } from 'ol/extent';
 import Select from 'ol/interaction/Select';
 import html2canvas from 'html2canvas-pro';
-import * as i5$1 from '@angular/material/autocomplete';
+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$2 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogTitle, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
+import * as i5$2 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import WFS from 'ol/format/WFS';
+import { like } from 'ol/format/filter';
+import { map as map$1 } from 'rxjs/operators';
+import { createStringXY } from 'ol/coordinate';
 
 const GISKOMPONENT_CONFIG = new InjectionToken('GisKomponentConfig');
 
@@ -116,83 +126,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 +190,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 +209,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,6 +259,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             args: [{ providedIn: 'root' }]
         }] });
 
+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));
+                        //console.log('layer id  '+l.get(this._layerDbIdKey)+' - setZIndex:'+layerIdsCachedToDisplay.indexOf(l.get(this._layerDbIdKey).toString()))
+                    });
+                }
+            });
+        }
+    }
+    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];
+            console.log('Failover turning layer on:', layer.get(this._layerDbIdKey));
+            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)) {
+                    console.log('Failover layer failed:', 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 LayerSelectorComponent {
     set contentIcon(content) {
         this._layerSelectorIcon = content;
@@ -340,17 +390,17 @@ class LayerSelectorComponent {
     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;
     _layerSelectorBody;
     _layerSelectorBodyControl;
     _mapFilteredLayerGroupsKeyName = 'mapFilteredLayerGroups';
-    _layerIdsToDisplayInMapKeyName = 'layerIdsToDisplayInMap';
     _layerHelper = inject(LayerHelperService);
     _layerErrorService = inject(LayerErrorService);
     ngOnInit() {
-        this._layerErrorService.layerStatusChanged
+        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)
@@ -384,16 +434,25 @@ class LayerSelectorComponent {
                 this.filteredLayerGroups = this.setfilteredGroups();
                 this._cacheProfileInfo();
             }
+            // Apply Failover logic to  all background groups
+            this.filteredLayerGroups.filter(group => group.background)
+                .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._initializeMapIconControl();
         }
     }
-    toggleLayer(event, layer) {
-        event.stopPropagation(); // Prevent the panel from expanding/collapsing
-        this._layerHelper.toggleLayerInMap(this.map, layer);
+    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 => {
             group.layers.forEach(l => {
-                if (layer.id === l.id) {
+                if (layerId === l.id) {
                     l.visible = !l.visible;
                 }
             });
@@ -415,23 +474,30 @@ 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.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();
@@ -470,11 +536,9 @@ 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;
         });
@@ -508,18 +572,16 @@ class LayerSelectorComponent {
     _cacheProfileInfo() {
         const cacheItem = { profile: this.profile, cachedLayerGroups: this.filteredLayerGroups };
         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);
-        const element = this._layerSelectorIcon.nativeElement;
-        this._layerSelectorIconControl = new ol_control_Control({ element: element });
-        this.map.addControl(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);
@@ -537,12 +599,12 @@ 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=\"true\" [disabled]=\"!showLegend\"> \n                <mat-expansion-panel-header>\n                  <mat-panel-title>\n                    <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n              <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n                <span>{{ layer.name }}</span>\n                @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n                  <mat-icon class=\"zoom-off\">browser_not_supported</mat-icon>(zoom)\n                }\n                @if (layer.hasErrors) {\n                  <mat-icon class=\"zoom-off\">wifi_off</mat-icon>(fejle)\n                }\n                @if (layer.visible) {\n                  <mat-icon (click)=\"toggleLayer($event, layer)\" class=\"power-on\">power</mat-icon>(t\u00E6nd)\n                }\n                @if (!layer.visible) {\n                  <mat-icon (click)=\"toggleLayer($event, layer)\" class=\"power-off\">power_off</mat-icon>(sluk)\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                  </mat-panel-title>\n              </mat-expansion-panel-header>\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:4em;bottom:.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:4em;z-index:1000;cursor:grab}.layer-selector-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}.layer-selector-body-wrapper .ol-control{border-radius:0}.drag-handle-selector{display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,#000 40%,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 40%,transparent);box-shadow:0 4px 20px #00000026;width:480px;max-height:500px;overflow:hidden;display:flex;flex-direction:column}::ng-deep .layer-selector-body .search-section{display:flex;align-items:center;gap:6px;padding:8px 12px 6px}::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}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-label{color:#fff;font-weight:500;font-size:13px}::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}::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:400px}::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 12px;height:40px;background:color-mix(in srgb,#000 55%,transparent)}::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}::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}::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}::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{display:flex;align-items:center;gap:6px;padding:8px 12px;background:transparent;transition:all .2s ease;color:#fff;cursor:grab}::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:#0000004d;transition:all .2s ease}::ng-deep .layer-selector-body .item-list .group .item-list .item.cdk-drag-preview{background:#fff;box-shadow:0 4px 12px #00000026;border-radius:4px}::ng-deep .layer-selector-body .item-list .group .item-list .item.cdk-drag-placeholder{background:#e3f2fd;opacity:.6}::ng-deep .layer-selector-body .item-list .group .item-list .item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::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}::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;margin-left:auto;padding:3px;border-radius:3px}::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.zoom-off{color:#f44336;font-size:16px;width:16px;height:16px}::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;margin-left:auto;padding:3px;border-radius:3px}::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>:nth-child(2){flex:1;font-size:13px;color:#fff;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .layer-selector-body .item-list .group .item-list .item input[type=range]{width:80px;height:4px;margin:0 4px;flex-shrink:0}::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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.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$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$1.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: "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    <div class=\"drag-handle-content\">\n      <div class=\"drag-handle-icons\">\n        <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n        <mat-icon class=\"minimize-button\" (click)=\"toggleLayerSelector()\">minimize</mat-icon>\n      </div>\n    </div>\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\"  \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          <!-- 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\" \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: ["::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:3.5em;bottom:.5em;max-width:calc(100vw - 2em)}}.drag-handle-selector{display:flex;align-items:center;justify-content:flex-end;border-radius:5px 5px 0 0;padding:5px;cursor:grab;background:color-mix(in srgb,#000 60%,transparent)}.drag-handle-content{display:flex;align-items:center;justify-content:flex-end;width:100%}.drag-handle-icons{display:flex;align-items:center;gap:16px}.drag-indicator-right{color:#fff;font-size:18px;width:18px;height:18px;cursor:grab;transition:all .2s ease}.minimize-button{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;position:relative;transform:translateY(-30%)}.minimize-button:hover{color:#fff;background:#ffffff26}::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:700px;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}.display-none{display:none}::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: "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$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: i1$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.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"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.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=\"true\" [disabled]=\"!showLegend\"> \n                <mat-expansion-panel-header>\n                  <mat-panel-title>\n                    <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n              <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n                <span>{{ layer.name }}</span>\n                @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n                  <mat-icon class=\"zoom-off\">browser_not_supported</mat-icon>(zoom)\n                }\n                @if (layer.hasErrors) {\n                  <mat-icon class=\"zoom-off\">wifi_off</mat-icon>(fejle)\n                }\n                @if (layer.visible) {\n                  <mat-icon (click)=\"toggleLayer($event, layer)\" class=\"power-on\">power</mat-icon>(t\u00E6nd)\n                }\n                @if (!layer.visible) {\n                  <mat-icon (click)=\"toggleLayer($event, layer)\" class=\"power-off\">power_off</mat-icon>(sluk)\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                  </mat-panel-title>\n              </mat-expansion-panel-header>\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:4em;bottom:.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:4em;z-index:1000;cursor:grab}.layer-selector-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}.layer-selector-body-wrapper .ol-control{border-radius:0}.drag-handle-selector{display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,#000 40%,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 40%,transparent);box-shadow:0 4px 20px #00000026;width:480px;max-height:500px;overflow:hidden;display:flex;flex-direction:column}::ng-deep .layer-selector-body .search-section{display:flex;align-items:center;gap:6px;padding:8px 12px 6px}::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}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-label{color:#fff;font-weight:500;font-size:13px}::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}::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:400px}::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 12px;height:40px;background:color-mix(in srgb,#000 55%,transparent)}::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}::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}::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}::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{display:flex;align-items:center;gap:6px;padding:8px 12px;background:transparent;transition:all .2s ease;color:#fff;cursor:grab}::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:#0000004d;transition:all .2s ease}::ng-deep .layer-selector-body .item-list .group .item-list .item.cdk-drag-preview{background:#fff;box-shadow:0 4px 12px #00000026;border-radius:4px}::ng-deep .layer-selector-body .item-list .group .item-list .item.cdk-drag-placeholder{background:#e3f2fd;opacity:.6}::ng-deep .layer-selector-body .item-list .group .item-list .item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}::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}::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;margin-left:auto;padding:3px;border-radius:3px}::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.zoom-off{color:#f44336;font-size:16px;width:16px;height:16px}::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;margin-left:auto;padding:3px;border-radius:3px}::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>:nth-child(2){flex:1;font-size:13px;color:#fff;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}::ng-deep .layer-selector-body .item-list .group .item-list .item input[type=range]{width:80px;height:4px;margin:0 4px;flex-shrink:0}::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"] }]
+                        MatExpansionModule, MatInputModule, MatTooltipModule], 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    <div class=\"drag-handle-content\">\n      <div class=\"drag-handle-icons\">\n        <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n        <mat-icon class=\"minimize-button\" (click)=\"toggleLayerSelector()\">minimize</mat-icon>\n      </div>\n    </div>\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\"  \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          <!-- 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\" \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: ["::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:3.5em;bottom:.5em;max-width:calc(100vw - 2em)}}.drag-handle-selector{display:flex;align-items:center;justify-content:flex-end;border-radius:5px 5px 0 0;padding:5px;cursor:grab;background:color-mix(in srgb,#000 60%,transparent)}.drag-handle-content{display:flex;align-items:center;justify-content:flex-end;width:100%}.drag-handle-icons{display:flex;align-items:center;gap:16px}.drag-indicator-right{color:#fff;font-size:18px;width:18px;height:18px;cursor:grab;transition:all .2s ease}.minimize-button{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;position:relative;transform:translateY(-30%)}.minimize-button:hover{color:#fff;background:#ffffff26}::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:700px;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}.display-none{display:none}::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: { contentIcon: [{
                 type: ViewChild,
                 args: ['layerSelectorIcon', { static: false }]
@@ -623,7 +685,7 @@ class CurrentItemsService {
         this._mapSubject.next(value);
     }
     profile;
-    _mapSubject = new ReplaySubject();
+    _mapSubject = new ReplaySubject(1);
     map$ = this._mapSubject.asObservable();
     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' });
@@ -641,7 +703,8 @@ class DrawLayerSourceService {
     features$ = this._features.asObservable();
     source = new VectorSource();
     layer = new VectorLayer({
-        source: this.source
+        source: this.source,
+        zIndex: 999
     });
     _disabled = false;
     constructor() {
@@ -704,9 +767,6 @@ class FeatureHelperService {
     _idCounter = 0;
     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);
     }
@@ -722,7 +782,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class UndoRedoService {
     _drawlayerSourceService;
@@ -810,7 +870,7 @@ 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()));
+        const overlappingFeatures = vectorSource.getFeatures().filter(f => !this._featureHelper.isLocked(f) && f.getGeometry()?.intersectsExtent(lineFeature.getGeometry()?.getExtent()));
         overlappingFeatures.forEach((feature) => {
             const overlappingFeatureGeoJson = this.geoJsonFormat.writeFeatureObject(feature);
             const features = featureCollection([overlappingFeatureGeoJson, bufferedLine]);
@@ -865,10 +925,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }] });
 
-class highlightService {
-    constructor() {
-        console.log('highlightservice, constructor');
-    }
+class HighlightService {
+    _wktFormat = new WKT();
     _zoomService = inject(ZoomService);
     _style = new Style({
         stroke: new Stroke({
@@ -894,7 +952,7 @@ class highlightService {
     }
     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.
@@ -903,15 +961,24 @@ class highlightService {
             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;
+        }
+    }
+    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' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: highlightService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HighlightService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class InteractionHelperService {
     _current = inject(CurrentItemsService);
@@ -948,6 +1015,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' });
@@ -1021,13 +1091,11 @@ class IconsConstants {
 
 class PrintDrawLayerSourceService {
     _current = inject(CurrentItemsService);
-    _features = new Subject;
-    features$ = this._features.asObservable();
     source = new VectorSource();
     layer = new VectorLayer({
-        source: this.source
+        source: this.source,
+        zIndex: 999
     });
-    _disabled = false;
     constructor() {
         this.layer.set('PRINTDRAWLAYER', 'true');
         this._initListener();
@@ -1038,49 +1106,213 @@ class PrintDrawLayerSourceService {
                 map.addLayer(this.layer);
             }
         });
-        this.source.on(['addfeature', 'changefeature', 'removefeature'], evt => {
-            if (this._disabled) {
-                return;
+    }
+    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' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PrintDrawLayerSourceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class CenterPointService {
+    _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());
+        }
+    }
+    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('centerpoint') === 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('centerpoint', true);
+                    evt.feature.set('_parentPolyId', parentPolyId);
+                    this._featureHelper.setId(evt.feature);
+                    callBack();
+                });
             }
-            const features = this.source.getFeatures();
-            this._features.next(features);
         });
     }
-    get allFeatures() {
-        return this.source.getFeatures().map(f => {
-            // I want a static copy of the features. 
-            const newFeature = f.clone();
-            // But cloning doesn't include the id and that is used for referencing a few places.
-            newFeature.setId(f.getId());
-            return newFeature;
+    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, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CenterPointService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+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$2.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$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.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$2.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();
     }
-    remove(id) {
-        const feature = this.source.getFeatureById(id);
-        if (feature) {
-            this.source.removeFeature(feature);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmDialogService, deps: [{ token: i1$2.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$2.MatDialog }] });
+
+class OverlapService {
+    _drawLayerService = inject(DrawLayerSourceService);
+    _featureHelper = inject(FeatureHelperService);
+    _snackbar = inject(MatSnackBar);
+    _confirmService = inject(ConfirmDialogService);
+    handleOverlap(feature) {
+        const geoJsonFormat = new GeoJSON();
+        const epsilon = 0.1;
+        const overlappingLockedFeatures = this._drawLayerService.source.getFeatures().filter(f => this._featureHelper.isLocked(f) && f.getGeometry()?.intersectsExtent(feature.getGeometry().getExtent()));
+        let newFeatureGeoJson = geoJsonFormat.writeFeatureObject(feature);
+        const orgFeatureArea = area(newFeatureGeoJson);
+        if (overlappingLockedFeatures.length > 0) {
+            const overlappingLockedFeaturesAsGeoJson = overlappingLockedFeatures.map(f => 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) > epsilon;
+                if (actuallyClipped) {
+                    const geom = geoJsonFormat.readGeometry(clipped.geometry);
+                    feature.setGeometry(geom);
+                    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 {
+            newFeatureGeoJson = geoJsonFormat.writeFeatureObject(feature);
+            const newFeatureArea = area(newFeatureGeoJson);
+            const unlockedFeaturesAsGeoJson = overlappingUnlockedFeatures.map(f => geoJsonFormat.writeFeatureObject(f));
+            const newClippedFeature = difference(featureCollection([newFeatureGeoJson, ...unlockedFeaturesAsGeoJson]));
+            const areaNewClippedFeature = area(newClippedFeature);
+            if (Math.abs(newFeatureArea - areaNewClippedFeature) < epsilon) {
+                return of(feature);
+            }
+            else {
+                const open$ = 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'
+                });
+                return open$.pipe(map(msg => {
+                    if (msg === 'primary') {
+                        const newGeometry = 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) > epsilon) {
+                                const existingFeature = this._drawLayerService.source.getFeatureById(f.id);
+                                if (existingFeature) {
+                                    const newGeometry = geoJsonFormat.readGeometry(featureDiff?.geometry);
+                                    existingFeature.setGeometry(newGeometry);
+                                }
+                            }
+                        });
+                        return feature;
+                    }
+                }));
+            }
         }
     }
-    setFeatures(features) {
-        this._disabled = true;
-        this.source.clear();
-        this.source.addFeatures(features.map(f => {
-            const newFeature = f.clone();
-            newFeature.setId(f.getId());
-            return newFeature;
-        }));
-        this._features.next(features);
-        this._disabled = false;
-    }
-    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 ɵ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, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PrintDrawLayerSourceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OverlapService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class ToolboxComponent {
     // Inputs
@@ -1100,9 +1332,12 @@ 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);
     _POSITION_STORAGE_KEY = 'toolbox_position';
     _current = inject(CurrentItemsService);
     _originalMapWidth = 0;
@@ -1118,7 +1353,7 @@ class ToolboxComponent {
         [800, 600]
     ];
     printDrawLabel = "";
-    drawTool = "point";
+    printDrawTool = "Point";
     selectedGeometrySetting = undefined;
     undoIconBase64 = IconsConstants.undoIconBase64;
     redoIconBase64 = IconsConstants.redoIconBase64;
@@ -1182,9 +1417,21 @@ class ToolboxComponent {
                 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);
+                    this._featureHelper.setId(feature);
+                    if (featureType === 'Polygon') {
+                        this._overlap.handleOverlap(feature).subscribe({
+                            next: f => {
+                                if (f) {
+                                    this._zoomService.zoomToFeatures([f]);
+                                    this._drawLayerService.source.addFeature(f);
+                                }
+                            }
+                        });
+                    }
+                    else {
+                        this._zoomService.zoomToFeatures([feature]);
+                        this._drawLayerService.source.addFeature(feature);
+                    }
                 }
             });
         }
@@ -1196,6 +1443,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();
@@ -1206,7 +1461,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 => {
@@ -1276,6 +1531,7 @@ 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;
     }
@@ -1292,10 +1548,18 @@ 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);
@@ -1306,10 +1570,18 @@ class ToolboxComponent {
         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
@@ -1336,14 +1608,28 @@ class ToolboxComponent {
             next: style => {
                 const drawInteraction = new Draw({
                     type: geomType,
-                    source: this._drawLayerService.source,
+                    source: new VectorSource(),
                     style: style
                 });
+                this._undoRedo.disable();
                 drawInteraction.on('drawend', evt => {
-                    console.log("🚀 ~ ToolboxComponent ~ _startDraw ~ evt:", evt);
                     this._featureHelper.setTypeId(evt.feature, this.selectedGeometrySetting?.typeId || '');
                     this._featureHelper.setId(evt.feature);
                     evt.feature.setStyle(style);
+                    if (geomType === 'Polygon') {
+                        this._overlap.handleOverlap(evt.feature).pipe(filter(f => !!f)).subscribe({
+                            next: f => {
+                                if (f) {
+                                    this._undoRedo.enable();
+                                    this._drawLayerService.source.addFeature(f);
+                                }
+                            }
+                        });
+                    }
+                    else {
+                        this._undoRedo.enable();
+                        this._drawLayerService.source.addFeature(evt.feature);
+                    }
                 });
                 this._interactionHelper.setAsTemp(drawInteraction);
                 // this._setDrawLayer()
@@ -1357,6 +1643,7 @@ class ToolboxComponent {
     _areaSource = new VectorSource();
     _areaLayer = new VectorLayer({
         source: this._areaSource,
+        zIndex: 999,
         style: (feature) => {
             const geom = feature.getGeometry();
             const area = getArea(geom);
@@ -1382,6 +1669,7 @@ class ToolboxComponent {
     _distanceLabelSource = new VectorSource();
     _distanceLabelLayer = new VectorLayer({
         source: this._distanceLabelSource,
+        zIndex: 999,
         style: (feature) => {
             return new Style({
                 text: new Text({
@@ -1396,6 +1684,7 @@ class ToolboxComponent {
     _distanceSource = new VectorSource();
     _distanceLayer = new VectorLayer({
         source: this._distanceSource,
+        zIndex: 999,
         style: (feature) => {
             const geom = feature.getGeometry();
             const length = getLength(geom);
@@ -1544,7 +1833,10 @@ class ToolboxComponent {
         });
         this.map.addInteraction(changeTypeSelect);
     }
-    toggleCollapsed() {
+    toggleCollapsed(event) {
+        if (event) {
+            event.stopPropagation();
+        }
         this.collapsed = !this.collapsed;
         if (this.collapsed) {
             this.stopMeasureArea();
@@ -1624,16 +1916,7 @@ class ToolboxComponent {
     }
     doPrint() {
         let htmlElement = this.map.getViewport();
-        const activeobjects = htmlElement.querySelector('activeobjects');
-        activeobjects.style.visibility = 'hidden';
-        const zoom = htmlElement.querySelector('.ol-zoom');
-        zoom.style.visibility = 'hidden';
-        const mapToolbox = htmlElement.querySelector('map-toolbox');
-        mapToolbox.style.visibility = 'hidden';
-        const mousePosition = htmlElement.querySelector('.ol-mouse-position');
-        mousePosition.style.visibility = 'hidden';
-        const layerSelector = htmlElement.querySelector('#layerSelector');
-        layerSelector.style.visibility = 'hidden';
+        this._setVisibiltyOnDOMElements(htmlElement, false);
         html2canvas(htmlElement, {
             useCORS: true,
         }).then(canvas => {
@@ -1649,26 +1932,169 @@ class ToolboxComponent {
             }
             link.download = download;
             link.click();
-            activeobjects.style.visibility = 'visible';
-            zoom.style.visibility = 'visible';
-            mapToolbox.style.visibility = 'visible';
-            mousePosition.style.visibility = 'visible';
-            layerSelector.style.visibility = 'visible';
+            this._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;
+        }
+    }
     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._removePrintDrawToolInteraction();
+            this._addPrintDrawToolInteraction();
+        }
+    }
+    handleClearPrintDrawFeatures() {
+        this._printDrawLayerService.source.clear();
+    }
+    printDraw;
+    _addPrintDrawToolInteraction() {
+        if (this.active === 'PrintDraw') {
+            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 => {
+                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(endCoord)
+                        });
+                        styles.push(arrowEndStyle);
+                        return styles;
+                    });
+                }
+                else {
+                    feature.setStyle((feature) => this._getDrawToolStyle(feature));
+                }
+            });
+        }
+        this.map.addInteraction(this.printDraw);
+        this._interactionHelper.setAsTemp(this.printDraw);
+    }
+    _removePrintDrawToolInteraction() {
+        this.map.removeInteraction(this.printDraw);
+    }
+    _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;
     }
     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>drag_indicator</mat-icon>\n    </div>\n    <div class=\"toolbox-container\">\n        <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed()\">{{ collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\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\">\u00A8\n                            Label <input type=\"text\" [(ngModel)]=\"printDrawLabel\"/>\n                            <select id=\"drawToolSelector\" [(ngModel)]=\"drawTool\">\n                                <option value=\"arrow\" selected>Pil</option>\n                                <option value=\"point\">Punkt</option>\n                            </select>\n                        </div>\n                    }\n                }\n            </div>\n        }\n    </div>\n</div>\n", styles: [".toolbox-wrapper{position:absolute;left:1em;top:31.2em;z-index:1000;cursor:grab}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}.drag-handle-toolbox{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}.drag-handle-toolbox mat-icon{color:#fff;font-size:18px;width:18px;height:18px}: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}.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}.toggle-icon:hover{color:#1976d2;background:#1976d214}.toolbox-content{display:flex;flex-direction:column;width:100%;gap:10px;animation:slideDown .3s cubic-bezier(.4,0,.2,1)}.all-tools-container{display:flex;flex-direction:row;align-items:center;gap:8px;flex-wrap:nowrap;width:100%;justify-content:flex-start;overflow-x:hidden;padding:8px 0}.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{display:flex;align-items:center;gap:8px;padding:10px;background:color-mix(in srgb,#000 40%,transparent);border-radius:8px;border:1px solid rgba(255,255,255,.1);margin-top:10px;animation:slideDown .3s ease}.print-config select,.print-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{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 2px #0ea5e933}.print-config select{cursor:pointer}.print-config option{background:color-mix(in srgb,#000 98%,transparent)!important;border:none!important}.print-config input{width:60px;text-align:center}.print-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{box-shadow:0 4px 12px #10b9814d}.print-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}:host{padding:8px;min-width:32px}:host.expanded{min-width:280px;padding:10px}.all-tools-container{gap:6px;padding-bottom:4px;-ms-overflow-style:none;scrollbar-width:none}.all-tools-container::-webkit-scrollbar{display:none}.main-tools,.geometry-tools,.measurement-print-tools{gap:4px}.compact-icon{width:28px;height:28px;flex-shrink:0}.measurement-print-tools{padding:3px 6px}::ng-deep .mat-mdc-select-panel{max-width:280px!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config{flex-wrap:wrap;justify-content:center}.print-config select,.print-config input{font-size:11px;padding:3px 6px}.print-config input{width:50px}.print-config button{padding:4px 8px;font-size:11px}}@media (max-width: 480px){.toolbox-wrapper{transform-origin:left top}.geometry-tools{gap:4px}.measurement-print-tools{gap:4px;flex-wrap:wrap}.compact-button{font-size:10px;letter-spacing:.2px}.print-config{gap:6px}.print-config select,.print-config input{font-size:10px}.print-config button{flex:1;min-width:60px}}::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.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" }, 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>handyman</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                        @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                    @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=\"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</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;border-radius:5px 5px 0 0}.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}.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;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$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$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: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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$3.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: 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$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: 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"] }] });
 }
 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>drag_indicator</mat-icon>\n    </div>\n    <div class=\"toolbox-container\">\n        <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed()\">{{ collapsed ? 'expand_more' : 'expand_less' }}</mat-icon>\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\">\u00A8\n                            Label <input type=\"text\" [(ngModel)]=\"printDrawLabel\"/>\n                            <select id=\"drawToolSelector\" [(ngModel)]=\"drawTool\">\n                                <option value=\"arrow\" selected>Pil</option>\n                                <option value=\"point\">Punkt</option>\n                            </select>\n                        </div>\n                    }\n                }\n            </div>\n        }\n    </div>\n</div>\n", styles: [".toolbox-wrapper{position:absolute;left:1em;top:31.2em;z-index:1000;cursor:grab}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}.drag-handle-toolbox{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}.drag-handle-toolbox mat-icon{color:#fff;font-size:18px;width:18px;height:18px}: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}.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}.toggle-icon:hover{color:#1976d2;background:#1976d214}.toolbox-content{display:flex;flex-direction:column;width:100%;gap:10px;animation:slideDown .3s cubic-bezier(.4,0,.2,1)}.all-tools-container{display:flex;flex-direction:row;align-items:center;gap:8px;flex-wrap:nowrap;width:100%;justify-content:flex-start;overflow-x:hidden;padding:8px 0}.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{display:flex;align-items:center;gap:8px;padding:10px;background:color-mix(in srgb,#000 40%,transparent);border-radius:8px;border:1px solid rgba(255,255,255,.1);margin-top:10px;animation:slideDown .3s ease}.print-config select,.print-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{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 2px #0ea5e933}.print-config select{cursor:pointer}.print-config option{background:color-mix(in srgb,#000 98%,transparent)!important;border:none!important}.print-config input{width:60px;text-align:center}.print-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{box-shadow:0 4px 12px #10b9814d}.print-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}:host{padding:8px;min-width:32px}:host.expanded{min-width:280px;padding:10px}.all-tools-container{gap:6px;padding-bottom:4px;-ms-overflow-style:none;scrollbar-width:none}.all-tools-container::-webkit-scrollbar{display:none}.main-tools,.geometry-tools,.measurement-print-tools{gap:4px}.compact-icon{width:28px;height:28px;flex-shrink:0}.measurement-print-tools{padding:3px 6px}::ng-deep .mat-mdc-select-panel{max-width:280px!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config{flex-wrap:wrap;justify-content:center}.print-config select,.print-config input{font-size:11px;padding:3px 6px}.print-config input{width:50px}.print-config button{padding:4px 8px;font-size:11px}}@media (max-width: 480px){.toolbox-wrapper{transform-origin:left top}.geometry-tools{gap:4px}.measurement-print-tools{gap:4px;flex-wrap:wrap}.compact-button{font-size:10px;letter-spacing:.2px}.print-config{gap:6px}.print-config select,.print-config input{font-size:10px}.print-config button{flex:1;min-width:60px}}::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>handyman</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                        @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                    @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=\"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</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;border-radius:5px 5px 0 0}.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}.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;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 }]
@@ -1692,12 +2118,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class ActiveObjectsComponent {
     _drawLayerService = inject(DrawLayerSourceService);
+    _centerPointService = inject(CenterPointService);
+    _undoRedo = inject(UndoRedoService);
     features$ = this._drawLayerService.features$;
     collapsed = false;
     settings;
     activeFeatures = [];
     _featureHelper = inject(FeatureHelperService);
-    _highlight = inject(highlightService);
+    _highlight = inject(HighlightService);
     _zoomService = inject(ZoomService);
     opacity = 1;
     dragPosition = { x: 0, y: 0 };
@@ -1711,7 +2139,12 @@ class ActiveObjectsComponent {
                     .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,
+                        locked: this._featureHelper.isLocked(f),
+                        area: this._getAreaString(f)
+                    })) }));
                 this.activeFeatures = [...featuresObj];
             }
         });
@@ -1725,10 +2158,13 @@ class ActiveObjectsComponent {
         }
         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);
     }
     highlight(id) {
@@ -1749,6 +2185,7 @@ class ActiveObjectsComponent {
     }
     delete(id) {
         this._drawLayerService.remove(id);
+        this._centerPointService.handleFeatureDeleted(id);
         this._highlight.clear();
     }
     togglePanel() {
@@ -1780,33 +2217,158 @@ 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()\">drag_indicator</mat-icon>        \n    </div>\n    <div class=\"active-objects-container\">\n        <div class=\"panel-header\">\n            <h4>Aktive flader</h4>\n            <mat-icon class=\"toggle-icon\" (click)=\"togglePanel()\">\n                {{ collapsed ? 'expand_more' : 'expand_less' }}\n            </mat-icon>\n        </div>\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:8em;left:1em;z-index:1000;cursor:grab;border-radius:8px;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:120px;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:center;background:color-mix(in srgb,#000 0%,transparent);border-radius:8px 8px 0 0;padding:4px;cursor:grab}.drag-handle-active-objects mat-icon{color:#fff;font-size:18px;width:18px;height:18px}.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.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$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.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" }, 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        <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                <mat-icon (click)=\"reset()\">replay</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                                    @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\">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;border-radius:5px 5px 0 0}.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);padding:4px 8px;cursor:grab}.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: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}.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 .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: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:#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: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.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: 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"] }] });
 }
 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()\">drag_indicator</mat-icon>        \n    </div>\n    <div class=\"active-objects-container\">\n        <div class=\"panel-header\">\n            <h4>Aktive flader</h4>\n            <mat-icon class=\"toggle-icon\" (click)=\"togglePanel()\">\n                {{ collapsed ? 'expand_more' : 'expand_less' }}\n            </mat-icon>\n        </div>\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:8em;left:1em;z-index:1000;cursor:grab;border-radius:8px;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:120px;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:center;background:color-mix(in srgb,#000 0%,transparent);border-radius:8px 8px 0 0;padding:4px;cursor:grab}.drag-handle-active-objects mat-icon{color:#fff;font-size:18px;width:18px;height:18px}.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        <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                <mat-icon (click)=\"reset()\">replay</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                                    @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\">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;border-radius:5px 5px 0 0}.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);padding:4px 8px;cursor:grab}.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: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}.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 .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: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:#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"] }]
         }], ctorParameters: () => [], propDecorators: { settings: [{
                 type: Input,
                 args: [{ required: true }]
             }] } });
 
+class SearchProviderService {
+    _cancelSearch = new Subject();
+    maxSearchResults = 8;
+    searchProviders = [];
+    search(searchString) {
+        this._cancelSearch.next('');
+        let combinedSearch = new Observable();
+        this.searchProviders.forEach(searchProvider => {
+            const search = searchProvider
+                .search(searchString, 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 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, maxCount = 5) {
+        const wftSearches = [];
+        this._searcheableLayers.flatMap(layer => {
+            const filter = like(layer.searchField, `*${searchValue}*`, '*', '?', '/', false);
+            var searchFeature = this.wfsFormat.writeGetFeature({
+                featureTypes: [layer.featureType.includes(':') ? layer.featureType.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$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) }))
+                };
+                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) {
+        console.log('setSearcheableLayers', layers);
+        this._searcheableLayers = layers;
+    }
+    _formatWKT(feature) {
+        const olFeature = this.geoJsonFormat.readFeature(feature);
+        return this.wktFormat.writeFeature(olFeature);
+    }
+    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);
     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))).subscribe({
+            next: result => {
+                console.log('search results', result);
+                this.filteredResults = result;
+            }
+        });
+    }
+    _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
+                }));
+                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;
@@ -1815,6 +2377,10 @@ class MapSearchComponent {
             this.filterResults();
         }
     }
+    highlight(wkt, event) {
+        event.stopPropagation();
+        this._highlight.highlight(wkt);
+    }
     onDragEnded(event) {
         const position = event.source.getFreeDragPosition();
         this.dragPosition = position;
@@ -1841,7 +2407,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: "17.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>drag_indicator</mat-icon>\n  </div>\n  <div class=\"search-content\">\n    <mat-icon class=\"toggle-icon\" (click)=\"toggleSearch()\">{{ collapsed ? 'search' : 'close' }}</mat-icon>\n    @if(!collapsed) {\n      <mat-form-field appearance=\"outline\" class=\"search-field\">\n        <mat-icon class=\"search-icon\" matPrefix>search</mat-icon>\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    }\n  </div>\n</div>", styles: [".search-container{position:absolute;top:2em;left:25em;z-index:1000;cursor:grab;max-width:400px;min-width:48px;width:auto}.search-container.collapsed{width:48px;min-width:48px;max-width:48px}.search-container.collapsed .search-content{display:flex;justify-content:center;align-items:center;min-width:40px}.search-container.collapsed .toggle-icon{margin:0}.search-container.cdk-drag-dragging{opacity:.8;cursor:grab}.search-content{display:flex;align-items:center;gap:8px;background:color-mix(in srgb,#000 60%,transparent);border-radius:0 0 12px 12px;padding:10px;min-width:40px;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;margin-right:4px}.toggle-icon:hover{color:#2196f3;background:#2196f314}.drag-handle{display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,#000 60%,transparent);padding:4px;cursor:grab;border-radius:8px 8px 0 0}.drag-handle mat-icon{color:#fff;font-size:20px;width:20px;height:20px}.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 .mat-icon.search-icon{color:#fff;margin-left:0;margin-right:8px;transition:color .3s ease}.search-field.mat-focused ::ng-deep .mat-icon.search-icon{color:#2196f3}.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}::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-autocomplete-panel{border-radius:12px!important;max-height:320px!important;background:color-mix(in srgb,#000 60%,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:52px!important;margin:4px 8px!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-container.collapsed .search-content{padding:6px 3px;min-width:38px}.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}}::ng-deep .mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field__input{color:#fff!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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" }, 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\" class=\"search-result-option\">\n          {{ result.title }} ({{result.items.length}} af {{ result.total }})\n            <div *ngFor=\"let item of result.items\" class=\"search-result-item\">\n              {{item.header}} \n              <mat-icon (click)=\"highlight(item.wkt, $event)\">highlight</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: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;border-radius:5px 5px 0 0}.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;border-radius:0 0 5px 5px}.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: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:auto}::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$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$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$2.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$2.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: 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MapSearchComponent, decorators: [{
             type: Component,
@@ -1854,8 +2420,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>drag_indicator</mat-icon>\n  </div>\n  <div class=\"search-content\">\n    <mat-icon class=\"toggle-icon\" (click)=\"toggleSearch()\">{{ collapsed ? 'search' : 'close' }}</mat-icon>\n    @if(!collapsed) {\n      <mat-form-field appearance=\"outline\" class=\"search-field\">\n        <mat-icon class=\"search-icon\" matPrefix>search</mat-icon>\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    }\n  </div>\n</div>", styles: [".search-container{position:absolute;top:2em;left:25em;z-index:1000;cursor:grab;max-width:400px;min-width:48px;width:auto}.search-container.collapsed{width:48px;min-width:48px;max-width:48px}.search-container.collapsed .search-content{display:flex;justify-content:center;align-items:center;min-width:40px}.search-container.collapsed .toggle-icon{margin:0}.search-container.cdk-drag-dragging{opacity:.8;cursor:grab}.search-content{display:flex;align-items:center;gap:8px;background:color-mix(in srgb,#000 60%,transparent);border-radius:0 0 12px 12px;padding:10px;min-width:40px;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;margin-right:4px}.toggle-icon:hover{color:#2196f3;background:#2196f314}.drag-handle{display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,#000 60%,transparent);padding:4px;cursor:grab;border-radius:8px 8px 0 0}.drag-handle mat-icon{color:#fff;font-size:20px;width:20px;height:20px}.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 .mat-icon.search-icon{color:#fff;margin-left:0;margin-right:8px;transition:color .3s ease}.search-field.mat-focused ::ng-deep .mat-icon.search-icon{color:#2196f3}.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}::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-autocomplete-panel{border-radius:12px!important;max-height:320px!important;background:color-mix(in srgb,#000 60%,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:52px!important;margin:4px 8px!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-container.collapsed .search-content{padding:6px 3px;min-width:38px}.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}}::ng-deep .mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field__input{color:#fff!important}\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>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\" class=\"search-result-option\">\n          {{ result.title }} ({{result.items.length}} af {{ result.total }})\n            <div *ngFor=\"let item of result.items\" class=\"search-result-item\">\n              {{item.header}} \n              <mat-icon (click)=\"highlight(item.wkt, $event)\">highlight</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: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;border-radius:5px 5px 0 0}.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;border-radius:0 0 5px 5px}.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: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:auto}::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"] }]
+        }], propDecorators: { profile: [{
+                type: Input
+            }] } });
 
 class LayerService {
     config = inject(GISKOMPONENT_CONFIG);
@@ -1875,13 +2443,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
         }] });
 
 class LegendsListComponent {
+    _http = inject(HttpClient);
     ngOnInit() {
         this._initializeMapIconControl();
-        this._layerHelperService.activeLayersChanged.subscribe(() => this._setFilteredLegends());
+        this._layerHelperService.activeLayersChanged.subscribe(() => this._setFilteredLegends().subscribe(result => this.filteredLayersDetailed = result));
     }
     ngOnChanges(changes) {
         if (changes['profile'] && this.profile)
-            this._setFilteredLegends();
+            this._setFilteredLegends().subscribe(result => this.filteredLayersDetailed = result);
     }
     set contentIcon(content) {
         this._legendsListIcon = content;
@@ -1900,7 +2469,7 @@ class LegendsListComponent {
     _legendsListIconControl;
     _legendsListBody;
     _legendsListBodyControl;
-    _layerIdsToDisplayInMapKeyName = 'layerIdsToDisplayInMap';
+    _mapFilteredLayerGroupsKeyName = 'mapFilteredLayerGroups';
     _layerService = inject(LayerService);
     _layerHelperService = inject(LayerHelperService);
     toggleLegendsList() {
@@ -1933,23 +2502,60 @@ class LegendsListComponent {
         this.map.removeControl(this._legendsListBodyControl);
     }
     _setFilteredLegends() {
-        if (this.profile?.id) {
-            const layerIdsCachedToDisplay = localStorage.getItem(`${this._layerIdsToDisplayInMapKeyName}_${this.profile?.id}`)?.split(',').map(Number);
-            if (layerIdsCachedToDisplay) {
-                this._layerService.getByIds(layerIdsCachedToDisplay)
-                    .subscribe(layers => {
-                    this.filteredLayersDetailed = layers.map(l => ({ ...l, imageUrl: l.legend?.imageName ? this._getImageUrl(l.legend.imageName) : l.legend?.imageExternalURL ?? '' }));
-                });
-            }
+        if (!this.profile?.id) {
+            return of([]);
+        }
+        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) {
+            return of([]);
+        }
+        return this._layerService.getByIds(layerIdsCachedToDisplay)
+            .pipe(switchMap(layers => {
+            const enriched$ = layers.map(layer => this.resolveLegendImage(layer));
+            return forkJoin(enriched$); // Wait until all items are enriched
+        }));
+    }
+    resolveLegendImage(layer) {
+        if (layer.legend?.imageName) {
+            return of({
+                ...layer,
+                imageUrl: this._getImageUrl(layer.legend.imageName)
+            });
         }
+        if (layer.legend?.imageExternalURL) {
+            return of({
+                ...layer,
+                imageUrl: layer.legend.imageExternalURL
+            });
+        }
+        // Fallback to Geoserver legend file
+        const fallbackUrl = `${layer.baseUrl}?service=WMS&REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&STRICT=false&layer=${layer.layers}`;
+        return this._http.get(fallbackUrl, { responseType: 'blob' }).pipe(map(blob => {
+            // Blob returned as an image, so layer has a legend in Geoserver
+            const isImage = blob.type.startsWith('image/');
+            return {
+                ...layer,
+                imageUrl: isImage ? fallbackUrl : ''
+            };
+        }), catchError(() => of({
+            ...layer,
+            imageUrl: '' // fallback failed, layer has no legend on Geoserver
+        })));
     }
     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:8em;bottom:.5em;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:36em;bottom:4em;z-index:1000;cursor:grab}.legends-list-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;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 40%,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 .legends-list-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:color-mix(in srgb,#000 40%,transparent);box-shadow:0 4px 20px #00000026;width:290px;max-height:500px;overflow:hidden;display:flex;flex-direction:column}::ng-deep .legends-list-body .item-list{flex:1;overflow-y:auto;padding:6px;max-height:900px}::ng-deep .legends-list-body .item-list .legend{margin-bottom:6px;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}::ng-deep .legends-list-body .item-list .item:last-child{border-bottom:none}.display-none{display:none}.legend-thumbnail{max-width:200px;max-height:200px;width:auto;height:auto;border:2px solid #dee2e6;border-radius:6px;padding:6px}::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}\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$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$1.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" }, 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    <div class=\"drag-handle-content\">\n      <div class=\"drag-handle-icons\">\n        <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n        <mat-icon class=\"minimize-button\" (click)=\"toggleLegendsList()\">minimize</mat-icon>\n      </div>\n    </div>\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}.display-none{display:none!important}::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:250px;max-height:700px;min-height:80px;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 1024px){::ng-deep .legends-list-body{width:240px;max-height:550px;min-height:70px}}@media (max-width: 768px){::ng-deep .legends-list-body{width:100%;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}}.legends-list-body-wrapper{position:absolute;left:auto;right:35em;bottom:.2em;z-index:1000;cursor:grab;width:fit-content;max-width:250px}@media (max-width: 1024px){.legends-list-body-wrapper{right:32em;bottom:.5em;max-width:240px}}@media (max-width: 768px){.legends-list-body-wrapper{position:fixed;right:3em;left:1em;bottom:5em;width:calc(100% - 7em);max-width:100%}}@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:flex-end;border-radius:5px 5px 0 0;padding:5px;cursor:grab;background:#000}.drag-handle-content{display:flex;align-items:center;justify-content:flex-end;width:100%}.drag-handle-icons{display:flex;align-items:center;gap:16px}.drag-indicator-right{color:#fff;font-size:18px;width:18px;height:18px;cursor:grab;transition:all .2s ease}.minimize-button{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;position:relative;transform:translateY(-30%)}.minimize-button:hover{color:#fff;background:#ffffff26}.drag-handle-selector{display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,#000 60%,transparent);border-radius:5px 5px 0 0;padding:5px;cursor:grab;box-shadow:0 -2px 8px #0003;position:sticky;top:0;z-index:1}@media (max-width: 768px){.drag-handle-selector{padding:8px}}.drag-handle-selector mat-icon{color:#fff;font-size:18px;width:18px;height:18px}@media (max-width: 768px){.drag-handle-selector mat-icon{font-size:20px;width:20px;height:20px}}::ng-deep .legends-list-body .item-list{flex:1 1 auto;overflow-y:auto;padding:4px;min-height:0;background:#000}@media (max-width: 768px){::ng-deep .legends-list-body .item-list{padding:6px}}::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 .mat-expansion-panel-header-title{font-weight:600;color:#fff;font-size:17px}::ng-deep .legends-list-body .item-list .mat-expansion-panel-body{padding:4px 8px 0!important}::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:4px;padding:6px 0;background:transparent;transition:all .2s ease;color:#bdc1c3cc;cursor:grab;min-width:0;flex:1}::ng-deep .legends-list-body .item-list .item span{word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;flex:1;min-width:0}@media (max-width: 768px){::ng-deep .legends-list-body .item-list .item{padding:8px 12px;gap:6px}}@media (max-width: 768px){::ng-deep .legends-list-body .item-list mat-expansion-panel{margin-bottom:6px}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header{padding:0 6px;height:18px!important;min-height:18px!important}::ng-deep .legends-list-body .item-list .legend{padding:6px}::ng-deep .legends-list-body .item-list .legend-thumbnail{max-width:100%;height:auto;max-height:120px}}.legend-thumbnail{max-width:150px;max-height:150px;width:auto;height:auto;border:1px solid #dee2e6;border-radius:4px;padding:4px}@media (max-width: 768px){.legend-thumbnail{max-width:100%;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}\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: 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: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { 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:8em;bottom:.5em;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:36em;bottom:4em;z-index:1000;cursor:grab}.legends-list-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;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 40%,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 .legends-list-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:color-mix(in srgb,#000 40%,transparent);box-shadow:0 4px 20px #00000026;width:290px;max-height:500px;overflow:hidden;display:flex;flex-direction:column}::ng-deep .legends-list-body .item-list{flex:1;overflow-y:auto;padding:6px;max-height:900px}::ng-deep .legends-list-body .item-list .legend{margin-bottom:6px;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}::ng-deep .legends-list-body .item-list .item:last-child{border-bottom:none}.display-none{display:none}.legend-thumbnail{max-width:200px;max-height:200px;width:auto;height:auto;border:2px solid #dee2e6;border-radius:6px;padding:6px}::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}\n"] }]
+                        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    <div class=\"drag-handle-content\">\n      <div class=\"drag-handle-icons\">\n        <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n        <mat-icon class=\"minimize-button\" (click)=\"toggleLegendsList()\">minimize</mat-icon>\n      </div>\n    </div>\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}.display-none{display:none!important}::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:250px;max-height:700px;min-height:80px;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 1024px){::ng-deep .legends-list-body{width:240px;max-height:550px;min-height:70px}}@media (max-width: 768px){::ng-deep .legends-list-body{width:100%;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}}.legends-list-body-wrapper{position:absolute;left:auto;right:35em;bottom:.2em;z-index:1000;cursor:grab;width:fit-content;max-width:250px}@media (max-width: 1024px){.legends-list-body-wrapper{right:32em;bottom:.5em;max-width:240px}}@media (max-width: 768px){.legends-list-body-wrapper{position:fixed;right:3em;left:1em;bottom:5em;width:calc(100% - 7em);max-width:100%}}@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:flex-end;border-radius:5px 5px 0 0;padding:5px;cursor:grab;background:#000}.drag-handle-content{display:flex;align-items:center;justify-content:flex-end;width:100%}.drag-handle-icons{display:flex;align-items:center;gap:16px}.drag-indicator-right{color:#fff;font-size:18px;width:18px;height:18px;cursor:grab;transition:all .2s ease}.minimize-button{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;position:relative;transform:translateY(-30%)}.minimize-button:hover{color:#fff;background:#ffffff26}.drag-handle-selector{display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,#000 60%,transparent);border-radius:5px 5px 0 0;padding:5px;cursor:grab;box-shadow:0 -2px 8px #0003;position:sticky;top:0;z-index:1}@media (max-width: 768px){.drag-handle-selector{padding:8px}}.drag-handle-selector mat-icon{color:#fff;font-size:18px;width:18px;height:18px}@media (max-width: 768px){.drag-handle-selector mat-icon{font-size:20px;width:20px;height:20px}}::ng-deep .legends-list-body .item-list{flex:1 1 auto;overflow-y:auto;padding:4px;min-height:0;background:#000}@media (max-width: 768px){::ng-deep .legends-list-body .item-list{padding:6px}}::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 .mat-expansion-panel-header-title{font-weight:600;color:#fff;font-size:17px}::ng-deep .legends-list-body .item-list .mat-expansion-panel-body{padding:4px 8px 0!important}::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:4px;padding:6px 0;background:transparent;transition:all .2s ease;color:#bdc1c3cc;cursor:grab;min-width:0;flex:1}::ng-deep .legends-list-body .item-list .item span{word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;flex:1;min-width:0}@media (max-width: 768px){::ng-deep .legends-list-body .item-list .item{padding:8px 12px;gap:6px}}@media (max-width: 768px){::ng-deep .legends-list-body .item-list mat-expansion-panel{margin-bottom:6px}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header{padding:0 6px;height:18px!important;min-height:18px!important}::ng-deep .legends-list-body .item-list .legend{padding:6px}::ng-deep .legends-list-body .item-list .legend-thumbnail{max-width:100%;height:auto;max-height:120px}}.legend-thumbnail{max-width:150px;max-height:150px;width:auto;height:auto;border:1px solid #dee2e6;border-radius:4px;padding:4px}@media (max-width: 768px){.legend-thumbnail{max-width:100%;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}\n"] }]
         }], propDecorators: { contentIcon: [{
                 type: ViewChild,
                 args: ['legendsListIcon', { static: false }]
@@ -1971,20 +2577,49 @@ class FeatureLoaderService {
     _featureHelper = inject(FeatureHelperService);
     fomatter = new GeoJSON({ featureProjection: 'EPSG:25832', dataProjection: 'EPSG:25832' });
     loadFeaturesSettings(settings) {
+        if (!settings || !settings.geometryTypeSettings) {
+            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()));
         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();
@@ -2027,10 +2662,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({
@@ -2061,16 +2699,17 @@ 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);
                         }
                         this._currentItems.map = this.map;
                         this._layerHelper.applyCachedLayersToDisplayInMap(this.map, profile.id);
+                        this.map.addLayer(this._highlightService.highlightLayer);
                     }
                 });
                 const toolbarControl = new Control({
@@ -2094,7 +2733,6 @@ class GisKomponentComponent {
                     this._checkZoom(this.map);
                 };
                 this.map.on('moveend', this.onMoveEndCheckZoomFunction);
-                this._currentItems.map = this.map;
             }
         });
     }
@@ -2215,6 +2853,24 @@ class GisKomponentComponent {
             target: 'map',
         });
         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;
@@ -2232,11 +2888,11 @@ 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: "<lib-layer-selector [map]=\"map\" [profile]=\"selectedProfile\" [currentZoomLevel]=\"currentZoomLevel\"></lib-layer-selector>\n<lib-legends-list [map]=\"map\" [profile]=\"selectedProfile\"></lib-legends-list>\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: ["::ng-deep .lib-error-snackbar{background-color:#d32f2f;color:#fff;font-weight:500}::ng-deep .map-container{position:relative;height:85vh;width:100%}::ng-deep #map{width:100%;height:100%;position:absolute;inset:0}::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}::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}::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}::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.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$2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3$2.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i3$2.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" }, 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\" [profile]=\"selectedProfile\"></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;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;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:color-mix(in srgb,#000 60%,transparent);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:color-mix(in srgb,#000 60%,transparent);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$3.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"] }, { kind: "component", type: LegendsListComponent, selector: "lib-legends-list", inputs: ["map", "profile"] }] });
 }
 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: "<lib-layer-selector [map]=\"map\" [profile]=\"selectedProfile\" [currentZoomLevel]=\"currentZoomLevel\"></lib-layer-selector>\n<lib-legends-list [map]=\"map\" [profile]=\"selectedProfile\"></lib-legends-list>\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: ["::ng-deep .lib-error-snackbar{background-color:#d32f2f;color:#fff;font-weight:500}::ng-deep .map-container{position:relative;height:85vh;width:100%}::ng-deep #map{width:100%;height:100%;position:absolute;inset:0}::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}::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}::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}::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"] }]
+            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\" [profile]=\"selectedProfile\"></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;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;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:color-mix(in srgb,#000 60%,transparent);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:color-mix(in srgb,#000 60%,transparent);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"] }]
         }], propDecorators: { showToolbox: [{
                 type: Input
             }], showActiveObjects: [{