@regionerne/gis-komponent 0.0.30 → 0.0.32

package/fesm2022/regionerne-gis-komponent.mjs

@@ -1,4 +1,4 @@
-import * as i1$1 from '@angular/common';
+import * as i2 from '@angular/common';
 import { CommonModule, AsyncPipe, JsonPipe } from '@angular/common';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, Injectable, Component, Input, ViewChild, Inject, EventEmitter, Output } from '@angular/core';
@@ -10,7 +10,8 @@ import TileLayer from 'ol/layer/Tile';
 import ImageWMS from 'ol/source/ImageWMS';
 import WMTSCapabilities from 'ol/format/WMTSCapabilities';
 import ImageLayer from 'ol/layer/Image';
-import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams, provideHttpClient, withInterceptors } from '@angular/common/http';
+import * as i1 from '@angular/common/http';
+import { HttpClient, HttpErrorResponse, HttpParams, HttpHeaders, provideHttpClient, withInterceptors } from '@angular/common/http';
 import OLLayerGroup from 'ol/layer/Group';
 import * as i6$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
@@ -21,8 +22,8 @@ import ol_control_scale from 'ol/control/ScaleLine';
 import { register } from 'ol/proj/proj4';
 import proj4 from 'proj4';
 import { Control, Rotate } from 'ol/control';
-import { Vector, TileWMS } from 'ol/source';
-import { Subject, BehaviorSubject, tap, switchMap, EMPTY, of, map, ReplaySubject, filter, interval, combineLatest, Observable, takeUntil, take, mergeWith, debounceTime, distinctUntilChanged, forkJoin, catchError, throwError } from 'rxjs';
+import { TileWMS, Vector } from 'ol/source';
+import { Subject, BehaviorSubject, tap, switchMap, EMPTY, map, combineLatest, Observable, debounceTime, distinctUntilChanged, of, ReplaySubject, filter, interval, forkJoin, catchError, throwError } from 'rxjs';
 import WMTS, { optionsFromCapabilities } from 'ol/source/WMTS';
 import VectorLayer from 'ol/layer/Vector';
 import TileSource from 'ol/source/Tile';
@@ -32,7 +33,7 @@ import { unByKey } from 'ol/Observable';
 import { MAT_SNACK_BAR_DATA, MatSnackBarRef, MatSnackBar } from '@angular/material/snack-bar';
 import * as i5 from '@angular/cdk/drag-drop';
 import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i1 from '@angular/material/form-field';
+import * as i1$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i1$2 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
@@ -43,21 +44,25 @@ import { MatInputModule } from '@angular/material/input';
 import ol_control_Control from 'ol/control/Control';
 import * as i8 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i9 from '@angular/material/core';
+import { MatOptionModule } from '@angular/material/core';
+import { GeoJSON } from 'ol/format';
+import WMSCapabilities from 'ol/format/WMSCapabilities';
+import * as i1$3 from '@angular/material/dialog';
+import { MatDialog, MatDialogModule, MatDialogContent, MatDialogActions, MAT_DIALOG_DATA, MatDialogTitle } from '@angular/material/dialog';
 import 'ol/ol.css';
-import { Point as Point$1, LineString } from 'ol/geom';
+import { Point as Point$1, LineString, MultiPolygon } from 'ol/geom';
 import { getArea, getLength } from 'ol/sphere';
 import Draw, { createBox, createRegularPolygon } from 'ol/interaction/Draw';
 import { Snap, Select as Select$1, Modify } from 'ol/interaction';
 import { Style, Circle, Stroke, Fill, Icon, Text, RegularShape } from 'ol/style';
-import * as i4 from '@angular/material/core';
-import { MatOptionModule } from '@angular/material/core';
 import * as SLDReader from '@nieuwlandgeo/sldreader';
 import WKT from 'ol/format/WKT';
 import Feature$1 from 'ol/Feature';
 import { never, always } from 'ol/events/condition';
-import { buffer, lineIntersect, lineSplit, featureCollection, difference, booleanIntersects, union, point, booleanPointInPolygon, area, feature, booleanWithin, intersect } from '@turf/turf';
-import GeoJSON from 'ol/format/GeoJSON';
-import * as i9 from '@angular/material/slide-toggle';
+import { buffer, lineIntersect, lineSplit, featureCollection, difference, booleanIntersects, union, point, booleanPointInPolygon, area, feature, booleanWithin, intersect, bboxPolygon } from '@turf/turf';
+import GeoJSON$1 from 'ol/format/GeoJSON';
+import * as i9$1 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';
@@ -66,10 +71,8 @@ import Select from 'ol/interaction/Select';
 import html2canvas from 'html2canvas-pro';
 import CircleStyle from 'ol/style/Circle';
 import { transform, toLonLat } from 'ol/proj';
-import * as i2 from '@angular/material/button';
+import * as i2$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i1$3 from '@angular/material/dialog';
-import { MAT_DIALOG_DATA, MatDialogModule, MatDialogTitle, MatDialogContent, MatDialogActions } from '@angular/material/dialog';
 import WFS from 'ol/format/WFS';
 import Point from 'ol/geom/Point';
 import { intersects, contains, like } from 'ol/format/filter';
@@ -81,7 +84,7 @@ import * as i5$1 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { map as map$1 } from 'rxjs/operators';
 import { createStringXY } from 'ol/coordinate';
-import GeoJSON$1 from 'ol/format/GeoJSON.js';
+import GeoJSON$2 from 'ol/format/GeoJSON.js';
 
 const GISKOMPONENT_CONFIG = new InjectionToken('GisKomponentConfig');
 
@@ -140,11 +143,11 @@ class LibNotificationComponent {
         this._snackRef.dismiss();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LibNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LibNotificationComponent, isStandalone: true, selector: "lib-notification", ngImport: i0, template: "<div class=\"notification-container\">\n    <button mat-icon-button class=\"close-btn\" (click)=\"dismiss()\">&times;</button>\n    @for (message of data.messages; track message) {\n      <div class=\"lib-notification\">\n        <span>{{ message }}</span>\n      </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:block}.notification-container{display:flex;flex-direction:column;gap:12px;padding:8px;min-width:300px;max-width:480px}.close-btn{position:absolute;top:12px;right:12px;width:32px;height:32px;background:#ffffffe6;border:none;border-radius:50%;color:#666;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(8px);z-index:10}.close-btn:hover{background:#fff;color:#333}.lib-notification{position:relative;background:linear-gradient(135deg,#d32f2f,#b71c1c);color:#fff;padding:16px 52px 16px 20px;border-radius:12px;box-shadow:0 4px 20px #d32f2f4d,0 2px 8px #00000026,inset 0 1px #fff3;font-weight:500;font-size:14px;line-height:1.5;border:1px solid rgba(255,255,255,.1);overflow:hidden;backdrop-filter:blur(10px);animation-fill-mode:forwards}.lib-notification:before{content:\"\";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#fffc,#fff6);border-radius:12px 12px 0 0;animation:progress 5s linear forwards}.lib-notification:hover{transform:translateY(-1px);box-shadow:0 6px 25px #d32f2f66,0 4px 12px #0000002e,inset 0 1px #fff3;transition:all .2s ease}.lib-notification.success{background:linear-gradient(135deg,#2e7d32,#1b5e20);box-shadow:0 4px 20px #2e7d324d,0 2px 8px #00000026}.lib-notification.success:before{background:linear-gradient(90deg,#fffc,#fff6)}.lib-notification.success:after{content:\"\\2705\"}.lib-notification.warning{background:linear-gradient(135deg,#f57c00,#e65100);box-shadow:0 4px 20px #f57c004d,0 2px 8px #00000026}.lib-notification.warning:before{background:linear-gradient(90deg,#fffc,#fff6)}.lib-notification.info{background:linear-gradient(135deg,#0288d1,#01579b);box-shadow:0 4px 20px #0288d14d,0 2px 8px #00000026}.lib-notification.info:before{background:linear-gradient(90deg,#fffc,#fff6)}.lib-notification.info:after{content:\"\\2139\\fe0f\"}@keyframes slideIn{0%{opacity:0;transform:translate(100%) scale(.9)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes progress{0%{width:100%}to{width:0%}}@media (max-width: 480px){.notification-container{min-width:calc(100vw - 32px);max-width:calc(100vw - 32px);margin:0 16px}.lib-notification{padding:14px 48px 14px 16px;font-size:13px}.close-btn{top:8px;right:8px;width:28px;height:28px;font-size:18px}}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LibNotificationComponent, isStandalone: true, selector: "lib-notification", ngImport: i0, template: "<div class=\"notification-container\">\n    <button mat-icon-button class=\"close-btn\" (click)=\"dismiss()\">&times;</button>\n    @for (message of data.messages; track message) {\n      <div class=\"lib-notification\">\n        <span>{{ message }}</span>\n      </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:block}.notification-container{display:flex;flex-direction:column;gap:12px;padding:8px;min-width:300px;max-width:480px}.close-btn{position:absolute;top:12px;right:12px;width:32px;height:32px;background:#ffffffe6;border:none;border-radius:50%;color:#666;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(8px);z-index:10}.close-btn:hover{background:#fff;color:#333}.lib-notification{position:relative;background:linear-gradient(135deg,#d32f2f,#b71c1c);color:#fff;padding:16px 52px 16px 20px;border-radius:12px;box-shadow:0 4px 20px #d32f2f4d,0 2px 8px #00000026,inset 0 1px #fff3;font-weight:500;font-size:14px;line-height:1.5;border:1px solid rgba(255,255,255,.1);overflow:hidden;backdrop-filter:blur(10px);animation-fill-mode:forwards}.lib-notification:before{content:\"\";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#fffc,#fff6);border-radius:12px 12px 0 0;animation:progress 5s linear forwards}.lib-notification:hover{box-shadow:0 6px 25px #d32f2f66,0 4px 12px #0000002e,inset 0 1px #fff3;transition:all .2s ease}.lib-notification.success{background:linear-gradient(135deg,#2e7d32,#1b5e20);box-shadow:0 4px 20px #2e7d324d,0 2px 8px #00000026}.lib-notification.success:before{background:linear-gradient(90deg,#fffc,#fff6)}.lib-notification.success:after{content:\"\\2705\"}.lib-notification.warning{background:linear-gradient(135deg,#f57c00,#e65100);box-shadow:0 4px 20px #f57c004d,0 2px 8px #00000026}.lib-notification.warning:before{background:linear-gradient(90deg,#fffc,#fff6)}.lib-notification.info{background:linear-gradient(135deg,#0288d1,#01579b);box-shadow:0 4px 20px #0288d14d,0 2px 8px #00000026}.lib-notification.info:before{background:linear-gradient(90deg,#fffc,#fff6)}.lib-notification.info:after{content:\"\\2139\\fe0f\"}@keyframes slideIn{0%{opacity:0;transform:translate(100%) scale(.9)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes progress{0%{width:100%}to{width:0%}}@media (max-width: 480px){.notification-container{min-width:calc(100vw - 32px);max-width:calc(100vw - 32px);margin:0 16px}.lib-notification{padding:14px 48px 14px 16px;font-size:13px}.close-btn{top:8px;right:8px;width:28px;height:28px;font-size:18px}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LibNotificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-notification', standalone: true, template: "<div class=\"notification-container\">\n    <button mat-icon-button class=\"close-btn\" (click)=\"dismiss()\">&times;</button>\n    @for (message of data.messages; track message) {\n      <div class=\"lib-notification\">\n        <span>{{ message }}</span>\n      </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:block}.notification-container{display:flex;flex-direction:column;gap:12px;padding:8px;min-width:300px;max-width:480px}.close-btn{position:absolute;top:12px;right:12px;width:32px;height:32px;background:#ffffffe6;border:none;border-radius:50%;color:#666;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(8px);z-index:10}.close-btn:hover{background:#fff;color:#333}.lib-notification{position:relative;background:linear-gradient(135deg,#d32f2f,#b71c1c);color:#fff;padding:16px 52px 16px 20px;border-radius:12px;box-shadow:0 4px 20px #d32f2f4d,0 2px 8px #00000026,inset 0 1px #fff3;font-weight:500;font-size:14px;line-height:1.5;border:1px solid rgba(255,255,255,.1);overflow:hidden;backdrop-filter:blur(10px);animation-fill-mode:forwards}.lib-notification:before{content:\"\";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#fffc,#fff6);border-radius:12px 12px 0 0;animation:progress 5s linear forwards}.lib-notification:hover{transform:translateY(-1px);box-shadow:0 6px 25px #d32f2f66,0 4px 12px #0000002e,inset 0 1px #fff3;transition:all .2s ease}.lib-notification.success{background:linear-gradient(135deg,#2e7d32,#1b5e20);box-shadow:0 4px 20px #2e7d324d,0 2px 8px #00000026}.lib-notification.success:before{background:linear-gradient(90deg,#fffc,#fff6)}.lib-notification.success:after{content:\"\\2705\"}.lib-notification.warning{background:linear-gradient(135deg,#f57c00,#e65100);box-shadow:0 4px 20px #f57c004d,0 2px 8px #00000026}.lib-notification.warning:before{background:linear-gradient(90deg,#fffc,#fff6)}.lib-notification.info{background:linear-gradient(135deg,#0288d1,#01579b);box-shadow:0 4px 20px #0288d14d,0 2px 8px #00000026}.lib-notification.info:before{background:linear-gradient(90deg,#fffc,#fff6)}.lib-notification.info:after{content:\"\\2139\\fe0f\"}@keyframes slideIn{0%{opacity:0;transform:translate(100%) scale(.9)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes progress{0%{width:100%}to{width:0%}}@media (max-width: 480px){.notification-container{min-width:calc(100vw - 32px);max-width:calc(100vw - 32px);margin:0 16px}.lib-notification{padding:14px 48px 14px 16px;font-size:13px}.close-btn{top:8px;right:8px;width:28px;height:28px;font-size:18px}}\n"] }]
+            args: [{ selector: 'lib-notification', standalone: true, template: "<div class=\"notification-container\">\n    <button mat-icon-button class=\"close-btn\" (click)=\"dismiss()\">&times;</button>\n    @for (message of data.messages; track message) {\n      <div class=\"lib-notification\">\n        <span>{{ message }}</span>\n      </div>\n    }\n</div>", styles: ["@charset \"UTF-8\";:host{display:block}.notification-container{display:flex;flex-direction:column;gap:12px;padding:8px;min-width:300px;max-width:480px}.close-btn{position:absolute;top:12px;right:12px;width:32px;height:32px;background:#ffffffe6;border:none;border-radius:50%;color:#666;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);backdrop-filter:blur(8px);z-index:10}.close-btn:hover{background:#fff;color:#333}.lib-notification{position:relative;background:linear-gradient(135deg,#d32f2f,#b71c1c);color:#fff;padding:16px 52px 16px 20px;border-radius:12px;box-shadow:0 4px 20px #d32f2f4d,0 2px 8px #00000026,inset 0 1px #fff3;font-weight:500;font-size:14px;line-height:1.5;border:1px solid rgba(255,255,255,.1);overflow:hidden;backdrop-filter:blur(10px);animation-fill-mode:forwards}.lib-notification:before{content:\"\";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#fffc,#fff6);border-radius:12px 12px 0 0;animation:progress 5s linear forwards}.lib-notification:hover{box-shadow:0 6px 25px #d32f2f66,0 4px 12px #0000002e,inset 0 1px #fff3;transition:all .2s ease}.lib-notification.success{background:linear-gradient(135deg,#2e7d32,#1b5e20);box-shadow:0 4px 20px #2e7d324d,0 2px 8px #00000026}.lib-notification.success:before{background:linear-gradient(90deg,#fffc,#fff6)}.lib-notification.success:after{content:\"\\2705\"}.lib-notification.warning{background:linear-gradient(135deg,#f57c00,#e65100);box-shadow:0 4px 20px #f57c004d,0 2px 8px #00000026}.lib-notification.warning:before{background:linear-gradient(90deg,#fffc,#fff6)}.lib-notification.info{background:linear-gradient(135deg,#0288d1,#01579b);box-shadow:0 4px 20px #0288d14d,0 2px 8px #00000026}.lib-notification.info:before{background:linear-gradient(90deg,#fffc,#fff6)}.lib-notification.info:after{content:\"\\2139\\fe0f\"}@keyframes slideIn{0%{opacity:0;transform:translate(100%) scale(.9)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes progress{0%{width:100%}to{width:0%}}@media (max-width: 480px){.notification-container{min-width:calc(100vw - 32px);max-width:calc(100vw - 32px);margin:0 16px}.lib-notification{padding:14px 48px 14px 16px;font-size:13px}.close-btn{top:8px;right:8px;width:28px;height:28px;font-size:18px}}\n"] }]
         }] });
 
 class LibErrorService {
@@ -345,14 +348,18 @@ class LayerHelperService {
         }));
         activation$.subscribe();
     }
-    updateLayerOpacityInMap(map, layer) {
+    updateLayerOpacityInMap(map, layerId, opacity) {
         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);
+                    if (l.get(this._layerDbIdKey) === layerId && opacity) {
+                        l.setOpacity(opacity);
                     }
                 });
+                // DMP layer
+            }
+            else if (layergroup.get(this._layerDbIdKey) === layerId && opacity) {
+                layergroup.setOpacity(opacity);
             }
         });
     }
@@ -365,6 +372,19 @@ class LayerHelperService {
                         l.setVisible(!current);
                     }
                 });
+                // DMP layer
+            }
+            else if (layergroup.get(this._layerDbIdKey) === layerId) {
+                const current = layergroup.getVisible();
+                layergroup.setVisible(!current);
+            }
+        });
+    }
+    deleteDmpLayerFromMap(map, layerId) {
+        map.getLayers().getArray().forEach(layergroup => {
+            if (layergroup.get(this._layerDbIdKey) === layerId) {
+                layergroup.setVisible(false);
+                map.removeLayer(layergroup);
             }
         });
     }
@@ -449,16 +469,269 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }] });
 
+class DmpCatalogService {
+    http;
+    aiSearchUrl = 'https://datakatalog.miljoeportal.dk/api/search/ai-search';
+    datasetsUrl = 'https://datakatalog.udv.miljoeportal.dk/api/datasets';
+    datasetsStatusUrl = 'https://datakatalog.udv.miljoeportal.dk/api/datasetavailabilities';
+    constructor(http) {
+        this.http = http;
+    }
+    searchLayers(searchText) {
+        return this._aiSearch(searchText).pipe(switchMap(ids => {
+            if (!ids.length) {
+                return [];
+            }
+            return this._fetchDatasets(ids);
+        }));
+    }
+    _aiSearch(searchText) {
+        return this.http.post(this.aiSearchUrl, {
+            searchText: searchText, entityTypes: ['ds']
+        }).pipe(map(res => (res?.results ?? [])
+            .map((r) => r.id)
+            .filter(Boolean)));
+    }
+    _fetchDatasets(ids) {
+        const params = new HttpParams()
+            .set('filter', `any(id,${ids.map(id => `'${id}'`).join(',')})`)
+            .set('include', [
+            'wmsSource',
+            'wfsSource',
+            'wmtsSource',
+            'license',
+            'tags',
+            'category',
+            'dataLiabilityAgreement'
+        ].join(','));
+        const datasets$ = this.http.get(this.datasetsUrl, { params });
+        const availabilityParams = new HttpParams()
+            .set('filter', `any(id,${ids.map(id => `'${id}'`).join(',')})`);
+        const availability$ = this.http.get(this.datasetsStatusUrl, { params: availabilityParams });
+        return combineLatest([datasets$, availability$]).pipe(map(([datasetsRes, availabilityRes]) => this._compileResults(datasetsRes, availabilityRes)));
+    }
+    _compileResults(datasetsResponse, availabilityResponse) {
+        const datasets = datasetsResponse.data ?? [];
+        const included = datasetsResponse.included ?? [];
+        const availabilityByDatasetId = new Map();
+        for (const a of availabilityResponse.data ?? []) {
+            availabilityByDatasetId.set(a.id, a.attributes?.status);
+        }
+        const includedByKey = new Map();
+        for (const inc of included) {
+            includedByKey.set(`${inc.type}:${inc.id}`, inc);
+        }
+        const results = [];
+        for (const ds of datasets) {
+            const title = ds.attributes?.title ?? 'Untitled';
+            const description = ds.attributes?.description ?? null;
+            const metaDataUrl = ds.attributes?.metadata ?? null;
+            const datasetId = ds.id;
+            const commonMeta = {
+                datasetId,
+                title,
+                description,
+                availability: availabilityByDatasetId.get(datasetId),
+                license: this._resolveSingleWithUrl(ds.relationships?.license, includedByKey),
+                dataLiabilityAgreement: this._resolveSingleWithUrl(ds.relationships?.dataLiabilityAgreement, includedByKey),
+                tags: this._resolveMulti(ds.relationships?.tags, includedByKey),
+                category: this._resolveSingle(ds.relationships?.category, includedByKey),
+                metaDataUrl,
+                visible: true,
+                opacity: 1,
+                hasErrors: false
+            };
+            this._extractService(ds, 'wmsSource', 'WMS', commonMeta, includedByKey, results);
+            this._extractService(ds, 'wmtsSource', 'WMTS', commonMeta, includedByKey, results);
+            this._extractService(ds, 'wfsSource', 'WFS', commonMeta, includedByKey, results);
+        }
+        return results;
+    }
+    _extractService(dataset, relationName, serviceType, meta, includedByKey, results) {
+        const rel = dataset.relationships?.[relationName]?.data;
+        if (!rel)
+            return;
+        const inc = includedByKey.get(`${rel.type}:${rel.id}`);
+        if (!inc)
+            return;
+        const url = inc.attributes?.url;
+        const layer = inc.attributes?.layer;
+        if (!url || !layer)
+            return;
+        results.push({
+            ...meta,
+            serviceType,
+            sourceUrl: url,
+            layers: layer
+        });
+    }
+    _resolveSingle(rel, included) {
+        if (!rel?.data)
+            return undefined;
+        const inc = included.get(`${rel.data.type}:${rel.data.id}`);
+        return inc?.attributes?.title ?? inc?.attributes?.name;
+    }
+    _resolveMulti(rel, included) {
+        if (!Array.isArray(rel?.data))
+            return undefined;
+        return rel.data
+            .map((r) => {
+            const inc = included.get(`${r.type}:${r.id}`);
+            return inc?.attributes?.title ?? inc?.attributes?.name;
+        })
+            .filter(Boolean);
+    }
+    _resolveSingleWithUrl(rel, included) {
+        if (!rel?.data)
+            return undefined;
+        const inc = included.get(`${rel.data.type}:${rel.data.id}`);
+        if (!inc)
+            return undefined;
+        return {
+            title: inc.attributes?.title ?? inc.attributes?.name,
+            url: inc.attributes?.url ??
+                inc.attributes?.link ??
+                inc.attributes?.landingPage
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DmpCatalogService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DmpCatalogService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DmpCatalogService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+
+class OlCapabilitiesService {
+    http;
+    constructor(http) {
+        this.http = http;
+    }
+    loadWmsCapabilities(url) {
+        const capUrl = `${url}?service=WMS&request=GetCapabilities`;
+        return this.http.get(capUrl, { responseType: 'text' }).pipe(map(xml => new WMSCapabilities().read(xml)));
+    }
+    loadWmtsCapabilities(url) {
+        url = url.replace('&service=wmts&request=getcapabilities', '');
+        const capUrl = `${url}&service=WMTS&request=GetCapabilities`;
+        return this.http.get(capUrl, { responseType: 'text' }).pipe(map(xml => new WMTSCapabilities().read(xml)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OlCapabilitiesService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OlCapabilitiesService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OlCapabilitiesService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.HttpClient }] });
+
+class DmpLayerMapperService {
+    caps;
+    constructor(caps) {
+        this.caps = caps;
+    }
+    toBaseLayer(result) {
+        switch (result.serviceType) {
+            case 'WMS':
+                return this.caps.loadWmsCapabilities(result.sourceUrl).pipe(map(cap => {
+                    const layer = this._createWmsLayerFromCapabilities(cap, result.layers, result.sourceUrl);
+                    this._attachMetadata(layer, result);
+                    return layer;
+                }));
+            case 'WMTS':
+                return this.caps.loadWmtsCapabilities(result.sourceUrl).pipe(map(cap => {
+                    const layer = this._createWmtsLayerFromCapabilities(cap, result.layers, result.sourceUrl);
+                    this._attachMetadata(layer, result);
+                    return layer;
+                }));
+            case 'WFS':
+                const wfsLayer = new VectorLayer({
+                    source: new VectorSource({
+                        format: new GeoJSON(),
+                        url: `${result.sourceUrl}?service=WFS&request=GetFeature&version=2.0.0&typename=${result.layers}&outputFormat=application/json`
+                    })
+                });
+                this._attachMetadata(wfsLayer, result);
+                return new Observable(o => {
+                    o.next(wfsLayer);
+                    o.complete();
+                });
+            default:
+                throw new Error('Unsupported service type');
+        }
+    }
+    _attachMetadata(layer, r) {
+        layer.setProperties({
+            id: r.datasetId,
+            title: r.title,
+            serviceType: r.serviceType,
+            dmp: true
+        });
+    }
+    _createWmtsLayerFromCapabilities(capabilities, layerName, url) {
+        const options = optionsFromCapabilities(capabilities, {
+            layer: layerName,
+            matrixSet: this._findBestMatrixSet(capabilities, layerName),
+            requestEncoding: 'KVP'
+        });
+        options.urls = [url];
+        return new TileLayer({
+            source: new WMTS(options)
+        });
+    }
+    _findBestMatrixSet(cap, layerName) {
+        const layer = cap.Contents.Layer.find((l) => l.Identifier === layerName);
+        return layer.TileMatrixSetLink[0].TileMatrixSet;
+    }
+    _createWmsLayerFromCapabilities(capabilities, layerName, url) {
+        const available = this._findWmsLayer(capabilities.Capability.Layer, layerName);
+        if (!available) {
+            throw new Error(`WMS layer not found in capabilities: ${layerName}`);
+        }
+        return new TileLayer({
+            source: new TileWMS({
+                url,
+                params: {
+                    LAYERS: layerName,
+                    TILED: true
+                },
+                serverType: 'geoserver',
+                crossOrigin: 'anonymous'
+            })
+        });
+    }
+    _findWmsLayer(layer, name) {
+        if (layer.Name === name)
+            return layer;
+        if (!layer.Layer)
+            return null;
+        for (const l of layer.Layer) {
+            const found = this._findWmsLayer(l, name);
+            if (found)
+                return found;
+        }
+        return null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DmpLayerMapperService, deps: [{ token: OlCapabilitiesService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DmpLayerMapperService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DmpLayerMapperService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: OlCapabilitiesService }] });
+
 class LayerSelectorComponent {
     set contentBody(content) {
         this._layerSelectorBody = content;
     }
+    dmpDialog;
     map;
     profile;
     currentZoomLevel;
     searchText = '';
+    dmpSearchText = '';
+    _dmpSearchTextSubject = new Subject();
     allLayerGroups = [];
     filteredLayerGroups = [];
+    dmpLayers = [];
+    dmpLayerResults = [];
+    dmpSearchMode = false;
     filteredBackgroundLayerGroups = [];
     showLegend = false;
     collapsed = true;
@@ -466,12 +739,17 @@ class LayerSelectorComponent {
     legendUrl = 'https://docs.geoserver.org/main/en/user/_images/samplelegend.png';
     _layerSelectorBody;
     _layerSelectorBodyControl;
+    dialogRef;
+    _dialog = inject(MatDialog);
     layerSelectorDragPosition = { x: 0, y: 0 };
     _mapFilteredLayerGroupsKeyName = 'mapFilteredLayerGroups';
     POSITION_STORAGE_KEY = 'layerSelectorPosition';
+    _dmpLayersCacheStoragKey = 'dmpLayersCache';
     _layerHelper = inject(LayerHelperService);
     _layerErrorService = inject(LayerErrorService);
     _layoutService = inject(LayoutService);
+    _dmpCatalogService = inject(DmpCatalogService);
+    _dmpMapper = inject(DmpLayerMapperService);
     LAYER_SELECTOR_POSITION_KEY = 'layerSelectorPosition';
     ngOnInit() {
         this._loadLayerSelectorPosition();
@@ -484,6 +762,12 @@ class LayerSelectorComponent {
             if (layerHasErrors != undefined)
                 this.setLayerErrorStatus(layerId, layerHasErrors);
         });
+        this._dmpSearchTextSubject.pipe(debounceTime(200), distinctUntilChanged(), switchMap(value => this._dmpCatalogService.searchLayers(value))).subscribe({
+            next: result => {
+                this.dmpLayerResults = result.map(layer => ({ ...layer, availability: layer.availability?.replace('unavailable', 'Ikke klar til brug').replace('available', 'Klar til brug')
+                        .replace('partly', 'Delvis klar til brug') }));
+            }
+        });
     }
     ngOnChanges(changes) {
         if (changes['profile'] && this.profile) {
@@ -515,6 +799,19 @@ class LayerSelectorComponent {
                 this.filterChanged();
                 this._cacheProfileInfo();
             }
+            const dmpLayersCacheValue = localStorage.getItem(`${this._dmpLayersCacheStoragKey}_${this.profile.id}`);
+            if (dmpLayersCacheValue) {
+                this.dmpLayers = JSON.parse(dmpLayersCacheValue);
+                this.dmpLayers.forEach(dmpLayer => {
+                    const dmpLayerId = dmpLayer.datasetId;
+                    this._dmpMapper.toBaseLayer(dmpLayer).subscribe(layer => {
+                        this._layerHelper.setDbId(layer, dmpLayerId);
+                        this._layerErrorService.registerLayer(dmpLayerId, layer);
+                        layer.setVisible(dmpLayer.visible);
+                        this.map.addLayer(layer);
+                    });
+                });
+            }
             // Apply Failover logic to  all background groups
             this.filteredBackgroundLayerGroups
                 .forEach(group => {
@@ -551,26 +848,76 @@ class LayerSelectorComponent {
             console.error('Error saving layer selector position to localStorage:', error);
         }
     }
+    openUrl(url) {
+        if (!url)
+            return;
+        const localUrl = url.startsWith('http:') || url.startsWith('https:') ? url : `https://${url}`;
+        window.open(localUrl, '_blank');
+    }
+    toggleDmpSearch(value) {
+        this.dmpSearchMode = value;
+        if (!this.dmpSearchMode) {
+            this.dmpLayerResults = [];
+            this.dmpSearchText = '';
+            this.dialogRef?.close();
+        }
+        else {
+            this.dialogRef = this._dialog.open(this.dmpDialog, {
+                disableClose: true,
+                hasBackdrop: true,
+                autoFocus: true,
+                restoreFocus: true,
+                width: '700px',
+                panelClass: 'dmp-dialog-content'
+            });
+        }
+    }
+    searchDmp() {
+        if (!this.dmpSearchText || this.dmpSearchText === '') {
+            this.dmpLayerResults = [];
+            return;
+        }
+        this._dmpSearchTextSubject.next(this.dmpSearchText);
+    }
+    addDmpLayer(dmpLayer) {
+        this.dmpLayers.push(dmpLayer);
+        this._cacheDmpLayers();
+        const dmpLayerId = dmpLayer.datasetId;
+        this._dmpMapper.toBaseLayer(dmpLayer).subscribe(layer => {
+            this._layerHelper.setDbId(layer, dmpLayerId);
+            this._layerErrorService.registerLayer(dmpLayerId, layer);
+            this.map.addLayer(layer);
+        });
+    }
+    deleteDmpLayer(dmpLayer, event) {
+        event?.stopPropagation();
+        this.dmpLayers = this.dmpLayers.filter(layer => layer.datasetId != dmpLayer.datasetId);
+        this._layerHelper.deleteDmpLayerFromMap(this.map, dmpLayer.datasetId);
+        this._cacheDmpLayers();
+    }
+    _cacheDmpLayers() {
+        localStorage.setItem(`${this._dmpLayersCacheStoragKey}_${this.profile.id}`, JSON.stringify(this.dmpLayers));
+    }
     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.concat(this.filteredBackgroundLayerGroups).forEach(group => {
-            let singleLaterIdToKeepOn = 0;
+            let singleLayerIdToKeepOn = 0;
             group.layers.forEach(l => {
                 if (layerId === l.id) {
                     l.visible = !l.visible;
                     if (l.visible && !group.allowMultiSelect) {
                         // Group doesn't allow multi select and we just turned this layer on
                         // so turn all others off
-                        singleLaterIdToKeepOn = l.id;
+                        singleLayerIdToKeepOn = l.id;
                     }
                 }
             });
-            if (singleLaterIdToKeepOn > 0) {
+            if (singleLayerIdToKeepOn > 0) {
                 group.layers.forEach(l => {
-                    if (singleLaterIdToKeepOn !== l.id) {
+                    if (singleLayerIdToKeepOn !== l.id) {
                         l.visible = false;
                         this._layerHelper.toggleLayerInMap(this.map, l.id);
                     }
@@ -580,6 +927,9 @@ class LayerSelectorComponent {
             group.visible = group.layers.some(l => l.visible);
             group.expanded = group.layers.some(l => l.visible);
         });
+        // DMP Layer
+        this.dmpLayers.forEach(dmpLayer => { if (dmpLayer.datasetId === layerId)
+            dmpLayer.visible = !dmpLayer.visible; });
         this._cacheProfileInfo();
     }
     setLayerErrorStatus(layerId, errorStatus) {
@@ -590,6 +940,12 @@ class LayerSelectorComponent {
                 }
             });
         });
+        //DMP layer
+        this.dmpLayers.forEach(dmpLayer => {
+            if (dmpLayer.datasetId === layerId) {
+                dmpLayer.hasErrors = errorStatus;
+            }
+        });
     }
     toggleGroup(event, layerGroup) {
         event.stopPropagation(); // Prevent the panel from expanding/collapsing
@@ -632,8 +988,8 @@ class LayerSelectorComponent {
             this._layoutService.bringElementIntoViewIfNeeded('.layer-selector-body-wrapper', -13, this.collapsed);
         }
     }
-    updateOpacity(layer) {
-        this._layerHelper.updateLayerOpacityInMap(this.map, layer);
+    updateOpacity(layerId, opacity) {
+        this._layerHelper.updateLayerOpacityInMap(this.map, layerId, opacity);
     }
     stopDrag(event) {
         event.stopPropagation(); // prevents drag container from activating
@@ -688,6 +1044,10 @@ class LayerSelectorComponent {
         this.filterChanged();
         this._cacheProfileInfo();
     }
+    clearDmpSearchText() {
+        this.dmpSearchText = '';
+        this.dmpLayerResults = [];
+    }
     updateGroupSortOrders() {
         this.filteredLayerGroups.forEach((g, idx) => (g.sortOrder = idx));
         this.filteredBackgroundLayerGroups.forEach((g, idx) => (g.sortOrder = idx));
@@ -714,9 +1074,14 @@ class LayerSelectorComponent {
             if (savedPosition) {
                 this.dragPosition = JSON.parse(savedPosition);
             }
-            else if (this.profile) {
+            else if (this.profile?.layerSelectorInitialPosition) {
                 this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.layerSelectorInitialPosition);
             }
+            else {
+                // Default position for layer selector
+                this.dragPosition = { x: 29, y: 370 };
+                this._savePosition(this.dragPosition);
+            }
         }
         catch (error) {
             console.error('Error loading position from localStorage:', error);
@@ -728,6 +1093,7 @@ class LayerSelectorComponent {
         localStorage.setItem(`${this._mapFilteredLayerGroupsKeyName}_${this.profile.id}`, JSON.stringify(cacheItem));
         // Reflect new order in map
         this._layerHelper.applyCachedLayersToDisplayInMap(this.map, this.profile.id);
+        this._cacheDmpLayers();
     }
     _initializeMapControl() {
         this.map.removeControl(this._layerSelectorBodyControl);
@@ -744,15 +1110,18 @@ 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: "contentBody", first: true, predicate: ["layerSelectorBody"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #layerSelectorBody\n  class=\"layer-selector-body-wrapper\"\n  cdkDrag\n  cdkDragBoundary=\".map-container\"\n  [cdkDragFreeDragPosition]=\"layerSelectorDragPosition\"\n  (cdkDragEnded)=\"onLayerSelectorDragEnded($event)\"\n  [class.collapsed]=\"collapsed\">\n\n  <div class=\"drag-handle-selector\" cdkDragHandle>\n    <div class=\"drag-handle-content\">\n      <div class=\"drag-handle-icons\">\n        <mat-icon class=\"icon-left\">layers</mat-icon>\n        <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n        <mat-icon class=\"toggle-icon\" (click)=\"toggleLayerSelector()\">\n          {{ collapsed ? 'flip_to_front' : 'remove' }}\n        </mat-icon>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ol-unselectable ol-control layer-selector-body\" *ngIf=\"!collapsed\">\n    <div class=\"search-section\">\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>Filtrer</mat-label>\n        <input \n          matInput \n          type=\"text\" \n          [(ngModel)]=\"searchText\" \n          (ngModelChange)=\"filteredLayerGroups=setfilteredGroups()\"\n          placeholder=\"Skriv for at filtrere...\"\n        />\n      </mat-form-field>\n      <mat-icon (click)=\"clearSearchText()\">undo</mat-icon>\n    </div>\n    <div *ngIf=\"filteredLayerGroups && filteredLayerGroups.length > 0\" class=\"group-header\">Mine Temaer</div>\n    <div\n      cdkDropList\n      [cdkDropListData]=\"filteredLayerGroups\"\n      (cdkDropListDropped)=\"dropGroup($event, filteredLayerGroups)\"\n      class=\"item-list\">\n      @for (group of filteredLayerGroups; track group.id; let gIndex = $index) {\n        <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n          <mat-expansion-panel [(expanded)]=\"group.expanded\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                  @if (group.expanded) {\n                    <mat-icon>arrow_upward</mat-icon>\n                  }\n                  @if (!group.expanded) {\n                    <mat-icon>arrow_downward</mat-icon>  \n                  }\n                {{ group.name }} \n                <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n                ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n                @if (group.visible) {\n                  <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\"  \n                    matTooltip=\"T\u00E6nd\"  \n                    [matTooltipShowDelay]=\"200\"\n                    [matTooltipHideDelay]=\"300\" \n                    matTooltipPosition=\"above\">power_settings_new\n                  </mat-icon>  \n                  }\n                @if (!group.visible) {\n                  <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n                    matTooltip=\"Sluk\"  \n                    [matTooltipShowDelay]=\"200\"\n                    [matTooltipHideDelay]=\"300\" \n                    matTooltipPosition=\"above\">power_settings_new\n                  </mat-icon>\n                }\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n\n            <div\n              cdkDropList\n              [cdkDropListData]=\"group.layers\"\n              (cdkDropListDropped)=\"dropLayer($event, group)\"\n              class=\"item-list\">\n              @for (layer of group.layers; track layer.id; let iIndex = $index) {\n                  <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n                    <mat-expansion-panel-header>\n                      <mat-panel-title>\n                        <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n                          <div class=\"item-left\">\n                            <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n                            <span>{{ layer.name }}</span>\n                          </div>\n                          <div class=\"item-center\">\n                            @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n                              <mat-icon class=\"zoom-off\" \n                                matTooltip=\"Zoom\"  \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipPosition=\"above\">browser_not_supported\n                              </mat-icon>\n                            }\n                            @if (layer.hasErrors) {\n                              <mat-icon class=\"zoom-off\" \n                                matTooltip=\"Fejl\"  \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipPosition=\"above\">priority_high\n                              </mat-icon>\n\n                            }\n                          </div>\n                          <div class=\"item-right\">\n                            @if (layer.visible) {\n                              <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\"  \n                                matTooltip=\"T\u00E6nd\"  \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipPosition=\"above\">power_settings_new\n                              </mat-icon>\n                            }\n                            @if (!layer.visible) {\n                              <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n                                matTooltip=\"Sluk\"  \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipPosition=\"above\">power_settings_new\n                              </mat-icon>\n                            }\n                            <input                 \n                              type=\"range\"\n                              min=\"0\"\n                              max=\"1\"\n                              step=\"0.05\"\n                              [(ngModel)]=\"layer.opacity\"\n                              (click)=\"stopDrag($event)\"\n                              (input)=\"updateOpacity(layer)\"\n                              (mousedown)=\"stopDrag($event)\"\n                              (touchstart)=\"stopDrag($event)\"\n                              (pointerdown)=\"stopDrag($event)\"\n                            >\n                          </div>\n                        </div>\n                      </mat-panel-title>\n                  </mat-expansion-panel-header>\n                  <div class=\"layer-description\">{{ layer.description }}</div>\n                  @if (showLegend) {\n                   <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n                  }\n                </mat-expansion-panel>\n                }\n              </div>\n            </mat-expansion-panel>\n          </div>\n        }\n      </div>\n      <div *ngIf=\"filteredBackgroundLayerGroups && filteredBackgroundLayerGroups.length > 0\" class=\"group-header\">Baggrundskort</div>\n      <div\n        cdkDropList\n        [cdkDropListData]=\"filteredBackgroundLayerGroups\"\n        (cdkDropListDropped)=\"dropGroup($event, filteredBackgroundLayerGroups)\"\n        class=\"item-list\">\n        @for (group of filteredBackgroundLayerGroups; track group.id; let gIndex = $index) {\n          <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n            <mat-expansion-panel [(expanded)]=\"group.expanded\">\n              <mat-expansion-panel-header>\n                <mat-panel-title>\n                    @if (group.expanded) {\n                      <mat-icon>arrow_upward</mat-icon>\n                    }\n                    @if (!group.expanded) {\n                      <mat-icon>arrow_downward</mat-icon>  \n                    }\n                  {{ group.name }} \n                  <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n                  ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n                  @if (group.visible) {\n                    <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\"  \n                      matTooltip=\"T\u00E6nd\"  \n                      [matTooltipShowDelay]=\"200\"\n                      [matTooltipHideDelay]=\"300\" \n                      matTooltipPosition=\"above\">power_settings_new\n                    </mat-icon>  \n                    }\n                  @if (!group.visible) {\n                    <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n                      matTooltip=\"Sluk\"  \n                      [matTooltipShowDelay]=\"200\"\n                      [matTooltipHideDelay]=\"300\" \n                      matTooltipPosition=\"above\">power_settings_new\n                    </mat-icon>\n                  }\n                </mat-panel-title>\n              </mat-expansion-panel-header>\n\n              <div\n                cdkDropList\n                [cdkDropListData]=\"group.layers\"\n                (cdkDropListDropped)=\"dropLayer($event, group)\"\n                class=\"item-list\">\n                @for (layer of group.layers; track layer.id; let iIndex = $index) {\n                    <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n                      <mat-expansion-panel-header>\n                        <mat-panel-title>\n                          <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n                            <div class=\"item-left\">\n                              <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n                              <span>{{ layer.name }}</span>\n                            </div>\n                            <div class=\"item-center\">\n                              @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n                                <mat-icon class=\"zoom-off\" \n                                  matTooltip=\"Zoom\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">browser_not_supported\n                                </mat-icon>\n                              }\n                              @if (layer.hasErrors) {\n                                <mat-icon class=\"zoom-off\" \n                                  matTooltip=\"Fejl\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">priority_high\n                                </mat-icon>\n\n                              }\n                            </div>\n                            <div class=\"item-right\">\n                              @if (layer.visible) {\n                                <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\"  \n                                  matTooltip=\"T\u00E6nd\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">power_settings_new\n                                </mat-icon>\n                              }\n                              @if (!layer.visible) {\n                                <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n                                  matTooltip=\"Sluk\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">power_settings_new\n                                </mat-icon>\n                              }\n                              <input                 \n                                type=\"range\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.05\"\n                                [(ngModel)]=\"layer.opacity\"\n                                (click)=\"stopDrag($event)\"\n                                (input)=\"updateOpacity(layer)\"\n                                (mousedown)=\"stopDrag($event)\"\n                                (touchstart)=\"stopDrag($event)\"\n                                (pointerdown)=\"stopDrag($event)\"\n                              >\n                            </div>\n                          </div>\n                        </mat-panel-title>\n                    </mat-expansion-panel-header>\n                    <div class=\"layer-description\">{{ layer.description }}</div>\n                    @if (showLegend) {\n                    <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n                    }\n                    </mat-expansion-panel>\n                  }\n              </div>\n            </mat-expansion-panel>\n          </div>\n        }\n      </div>\n  </div>\n</div>", styles: [".legend-thumbnail{max-width:200px;max-height:200px;width:auto;height:auto;border:2px solid #dee2e6;border-radius:6px;padding:6px}.layer-selector-body-wrapper{position:absolute;left:1em;top:10em;z-index:1000;cursor:grab;max-width:calc(100vw - 8em);display:flex;flex-direction:column}.layer-selector-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons{justify-content:space-between}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .icon-left{order:1;margin-right:auto}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .drag-indicator-right{order:1}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .toggle-icon{order:3}.layer-selector-body-wrapper.collapsed .layer-selector-body{display:none}.layer-selector-body-wrapper.collapsed .drag-handle-icons{justify-content:flex-end}.layer-selector-body-wrapper.collapsed .drag-handle-icons .icon-left{order:1;margin-right:0}.layer-selector-body-wrapper.collapsed .drag-handle-icons .drag-indicator-right{order:1}.layer-selector-body-wrapper.collapsed .drag-handle-icons .toggle-icon{order:3}.layer-selector-body-wrapper .ol-control{border-radius:0}.layer-selector-body-wrapper .group-header{color:#fff;padding:0 14px}@media (max-width: 767px){.layer-selector-body-wrapper{right:.5em;bottom:4em;max-width:calc(100vw - 7em);left:.5em;width:calc(100vw - 7em)}}@media (min-width: 768px) and (max-width: 1024px){.layer-selector-body-wrapper{right:3.5em;bottom:.5em;max-width:calc(100vw - 2em)}}.drag-handle-selector{display:flex;justify-content:flex-end;border-radius:5px 5px 0 0;padding:5px;cursor:grab;background:#292a2d}.drag-handle-content{display:flex;align-items:center;width:100%}.drag-handle-icons{display:flex;align-items:center;gap:16px;width:100%}.drag-handle-icons mat-icon{color:#fff;font-size:18px;width:18px;height:18px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-icons mat-icon:first-child{cursor:grab}.drag-indicator-right{cursor:grab}.toggle-icon:hover{color:#fff;background:#ffffff26}::ng-deep .layer-selector-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:#292a2d;box-shadow:0 4px 20px #00000026;width:480px;max-width:100%;max-height:317px;min-height:120px;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 767px){::ng-deep .layer-selector-body{width:100%;max-height:70vh;min-height:140px}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body{width:100%;max-width:445px;max-height:76vh;min-height:110px}}::ng-deep .layer-selector-body .search-section{display:flex;align-items:center;gap:6px;padding:8px 12px 6px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section{padding:6px 8px 4px;gap:4px}}::ng-deep .layer-selector-body .search-section mat-form-field{flex:1}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-text-field-wrapper{padding-bottom:0;background:#000}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-wrapper{padding-bottom:0;margin-bottom:0}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-form-field-infix{padding-bottom:6px;min-height:auto}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-outline{background:#fff}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-outline-thick{color:#1976d2}::ng-deep .layer-selector-body .search-section mat-form-field input{font-size:13px;padding:3px 0}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-form-field input{font-size:12px}}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-label{color:#fff;font-weight:500;font-size:13px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-label{font-size:12px}}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0;margin-top:0}::ng-deep .layer-selector-body .search-section mat-icon{color:#fff;cursor:pointer;padding:6px;border-radius:4px;transition:all .2s ease;font-size:24px;width:24px;height:24px;display:flex;justify-content:center;align-items:center}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-icon{font-size:20px;width:20px;height:20px;padding:4px}}::ng-deep .layer-selector-body .search-section mat-icon:hover{color:#f9fafb}::ng-deep .layer-selector-body .item-list{flex:1;overflow-y:auto;max-height:660px;width:100%}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list{padding:4px;max-height:calc(60vh - 80px)}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body .item-list{max-height:calc(77vh - 78px)}}::ng-deep .layer-selector-body .item-list .group{overflow:hidden;box-shadow:0 -2px 2px #4868b20a,0 2px 2px #6a6f7517,0 1px 2px #4868b214}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel{box-shadow:none!important;border-radius:0!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header{padding:0 11px;height:40px;background:#000!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header:hover{background:#333!important}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header{padding:0 20px;height:36px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header:hover{background:color-mix(in srgb,#000 60%,transparent)!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title{align-items:center;gap:6px;font-weight:600;color:#bdc1c3cc;font-size:17px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon{color:#bdc1c3cc;font-size:16px;width:16px;height:16px;transition:transform .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.lightbulb{color:#dfca0e}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.power-on{color:#4caf50}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.power-off{color:#f44336}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content{background:#4d4f55}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:4px 0;background:#000}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:2px 0}}::ng-deep .layer-selector-body .item-list .group .item-list{padding:0;max-height:none}::ng-deep .layer-selector-body .item-list .group .item-list .layer-description{font-size:13px;padding:0 31px;color:#fffc}::ng-deep .layer-selector-body .item-list .group .item-list .item{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:6px;background:transparent;transition:all .2s ease;color:#fff;cursor:grab;font-size:14px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item{gap:4px;padding:6px 8px}}::ng-deep .layer-selector-body .item-list .group .item-list .item:last-child{border-bottom:none}::ng-deep .layer-selector-body .item-list .group .item-list .item:hover{background-color:transparent;transition:all .2s ease}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left{display:flex;align-items:center;gap:3px;flex:1;min-width:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left span{font-size:13px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;flex:1;min-width:0;color:#fff}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left span{font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center{display:flex;align-items:center;gap:2px;flex-shrink:0;justify-content:center;position:relative;left:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center .icon-label{font-size:11px;opacity:.8;margin-right:4px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center .icon-label{font-size:9px;margin-right:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right{display:flex;align-items:center;flex:1;justify-content:flex-end;min-width:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right input[type=range]{width:80px;height:4px;margin:0;flex-shrink:0}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right input[type=range]{width:60px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon{flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.drag-indicator{color:#fff;font-size:16px;width:16px;height:16px;cursor:grab}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.drag-indicator{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on{color:#4caf50;font-size:18px;width:18px;height:18px;cursor:pointer;padding:3px;border-radius:3px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on{font-size:16px;width:16px;height:16px;padding:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on:hover{background:#4caf5033}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off{color:#f44336;font-size:18px;width:18px;height:18px;cursor:pointer;padding:3px;border-radius:3px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off{font-size:16px;width:16px;height:16px;padding:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off:hover{background:#f4433633}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.zoom-off{color:#f44336;font-size:16px;width:16px;height:16px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.zoom-off{font-size:14px;width:14px;height:14px}}::ng-deep .mat-expansion-indicator svg{fill:#fff!important}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 15px #00000026;background:#fff;padding:10px 12px}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.item-list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.power-on{color:#4caf50}.power-off{color:#f44336}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar{width:12px}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LayerSelectorComponent, isStandalone: true, selector: "lib-layer-selector", inputs: { map: "map", profile: "profile", currentZoomLevel: "currentZoomLevel" }, viewQueries: [{ propertyName: "contentBody", first: true, predicate: ["layerSelectorBody"], descendants: true }, { propertyName: "dmpDialog", first: true, predicate: ["dmpDialog"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #layerSelectorBody\n  class=\"layer-selector-body-wrapper\"\n  cdkDrag\n  cdkDragBoundary=\".map-container\"\n  [cdkDragFreeDragPosition]=\"layerSelectorDragPosition\"\n  (cdkDragEnded)=\"onLayerSelectorDragEnded($event)\"\n  [class.collapsed]=\"collapsed\">\n\n  <div class=\"drag-handle-selector\" cdkDragHandle>\n    <div class=\"drag-handle-content\">\n      <div class=\"drag-handle-icons\">\n        <mat-icon \n          class=\"icon-left\" \n          matTooltip=\"Lag\" \n          [matTooltipShowDelay]=\"500\"\n          [matTooltipHideDelay]=\"100\" \n          matTooltipPosition=\"above\">\n          layers\n        </mat-icon>\n        <mat-icon class=\"toggle-icon\" (click)=\"toggleLayerSelector()\">\n          {{ collapsed ? 'flip_to_front' : 'remove' }}\n        </mat-icon>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ol-unselectable ol-control layer-selector-body\" *ngIf=\"!collapsed\">\n    <div class=\"search-section\">\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>Filtrer</mat-label>\n        <input \n          matInput \n          type=\"text\" \n          [(ngModel)]=\"searchText\" \n          (ngModelChange)=\"filteredLayerGroups=setfilteredGroups()\"\n          placeholder=\"Skriv for at filtrere...\"\n        />\n      </mat-form-field>\n      <mat-icon (click)=\"clearSearchText()\">undo</mat-icon>\n    </div>\n    <div\n      cdkDropList\n      [cdkDropListData]=\"filteredLayerGroups\"\n      (cdkDropListDropped)=\"dropGroup($event, filteredLayerGroups)\"\n      class=\"item-list\">\n      @for (group of filteredLayerGroups; track group.id; let gIndex = $index) {\n        <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n          <mat-expansion-panel [(expanded)]=\"group.expanded\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                  @if (group.expanded) {\n                    <mat-icon>arrow_upward</mat-icon>\n                  }\n                  @if (!group.expanded) {\n                    <mat-icon>arrow_downward</mat-icon>  \n                  }\n                {{ group.name }} \n                <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n                ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n                @if (group.visible) {\n                  <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\"  \n                    matTooltip=\"T\u00E6nd\"  \n                    [matTooltipShowDelay]=\"200\"\n                    [matTooltipHideDelay]=\"300\" \n                    matTooltipPosition=\"above\">power_settings_new\n                  </mat-icon>  \n                  }\n                @if (!group.visible) {\n                  <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n                    matTooltip=\"Sluk\"  \n                    [matTooltipShowDelay]=\"200\"\n                    [matTooltipHideDelay]=\"300\" \n                    matTooltipPosition=\"above\">power_settings_new\n                  </mat-icon>\n                }\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n\n            <div\n              cdkDropList\n              [cdkDropListData]=\"group.layers\"\n              (cdkDropListDropped)=\"dropLayer($event, group)\"\n              class=\"item-list\">\n              @for (layer of group.layers; track layer.id; let iIndex = $index) {\n                  <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n                    <mat-expansion-panel-header>\n                      <mat-panel-title>\n                        <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n                          <div class=\"item-left\">\n                            <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n                            @if(layer.infoUrl) {\n                              <mat-icon \n                                class=\"layer-info\"\n                                matTooltip=\"Vis ekstra informationer i ny tab\"\n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                (click)=\"openUrl(layer.infoUrl)\"\n                                matTooltipPosition=\"above\"\n                              >info</mat-icon>\n                            }\n                            <span>{{ layer.name }}</span>                            \n                            <mat-icon></mat-icon>\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.id, layer.opacity)\"\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 class=\"group-header\">Mine Temaer\n          <mat-icon (click)=\"toggleDmpSearch(true)\"\n            class=\"power-on\"\n            matTooltip=\"S\u00F8g\"  \n            [matTooltipShowDelay]=\"200\"\n            [matTooltipHideDelay]=\"300\" \n            matTooltipPosition=\"above\">add\n          </mat-icon>\n      </div>\n      @if (dmpLayers.length > 0) {\n        <div class=\"dmp-item-list\">\n          @for (layer of dmpLayers; track layer.datasetId; let iIndex = $index) {\n              <mat-expansion-panel expanded=\"false\" [disabled]=\"true\"> \n                <mat-expansion-panel-header>\n                  <mat-panel-title>\n                    <div class=\"item\">\n                      <div class=\"dmp-item-container\">\n                        <mat-icon (click)=\"deleteDmpLayer(layer, $event)\" class=\"delete-icon\"  \n                            matTooltip=\"Slet\"  \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipPosition=\"above\">delete\n                        </mat-icon>\n                        <div class=\"dmp-item-title-section\">\n                          <div class=\"dmp-item-title\">\n                            <span class=\"title-text\">{{ layer.title }}</span>\n                          </div>\n                        </div>\n                        @if (layer.hasErrors) {\n                          <div class=\"dmp-item-signal-center\">\n                            <mat-icon class=\"zoom-off\" \n                              matTooltip=\"Fejl\"  \n                              [matTooltipShowDelay]=\"200\"\n                              [matTooltipHideDelay]=\"300\" \n                              matTooltipPosition=\"above\">priority_high\n                            </mat-icon>\n                          </div>\n                        }\n                        <div class=\"dmp-item-controls\">\n                          @if (layer.visible) {\n                            <mat-icon (click)=\"toggleLayer(layer.datasetId, $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.datasetId, $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.datasetId, layer.opacity)\"\n                                (mousedown)=\"stopDrag($event)\"\n                                (touchstart)=\"stopDrag($event)\"\n                                (pointerdown)=\"stopDrag($event)\"\n                              >\n                        </div>\n                    </div>\n                  </div>\n                  </mat-panel-title>\n              </mat-expansion-panel-header>\n            </mat-expansion-panel>\n            }\n        </div>\n      }\n      <div *ngIf=\"filteredBackgroundLayerGroups && filteredBackgroundLayerGroups.length > 0\" class=\"group-header\">Baggrundskort</div>\n      <div\n        cdkDropList\n        [cdkDropListData]=\"filteredBackgroundLayerGroups\"\n        (cdkDropListDropped)=\"dropGroup($event, filteredBackgroundLayerGroups)\"\n        class=\"item-list\">\n        @for (group of filteredBackgroundLayerGroups; track group.id; let gIndex = $index) {\n          <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n            <mat-expansion-panel [(expanded)]=\"group.expanded\">\n              <mat-expansion-panel-header>\n                <mat-panel-title>\n                    @if (group.expanded) {\n                      <mat-icon>arrow_upward</mat-icon>\n                    }\n                    @if (!group.expanded) {\n                      <mat-icon>arrow_downward</mat-icon>  \n                    }\n                  {{ group.name }} \n                  <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n                  ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n                  @if (group.visible) {\n                    <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\"  \n                      matTooltip=\"T\u00E6nd\"  \n                      [matTooltipShowDelay]=\"200\"\n                      [matTooltipHideDelay]=\"300\" \n                      matTooltipPosition=\"above\">power_settings_new\n                    </mat-icon>  \n                    }\n                  @if (!group.visible) {\n                    <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n                      matTooltip=\"Sluk\"  \n                      [matTooltipShowDelay]=\"200\"\n                      [matTooltipHideDelay]=\"300\" \n                      matTooltipPosition=\"above\">power_settings_new\n                    </mat-icon>\n                  }\n                </mat-panel-title>\n              </mat-expansion-panel-header>\n\n              <div\n                cdkDropList\n                [cdkDropListData]=\"group.layers\"\n                (cdkDropListDropped)=\"dropLayer($event, group)\"\n                class=\"item-list\">\n                @for (layer of group.layers; track layer.id; let iIndex = $index) {\n                    <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n                      <mat-expansion-panel-header>\n                        <mat-panel-title>\n                          <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n                            <div class=\"item-left\">\n                              <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n                              <span>{{ layer.name }}</span>\n                            </div>\n                            <div class=\"item-center\">\n                              @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n                                <mat-icon class=\"zoom-off\" \n                                  matTooltip=\"Zoom\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">browser_not_supported\n                                </mat-icon>\n                              }\n                              @if (layer.hasErrors) {\n                                <mat-icon class=\"zoom-off\" \n                                  matTooltip=\"Fejl\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">priority_high\n                                </mat-icon>\n\n                              }\n                            </div>\n                            <div class=\"item-right\">\n                              @if (layer.visible) {\n                                <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\"  \n                                  matTooltip=\"T\u00E6nd\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">power_settings_new\n                                </mat-icon>\n                              }\n                              @if (!layer.visible) {\n                                <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n                                  matTooltip=\"Sluk\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">power_settings_new\n                                </mat-icon>\n                              }\n                              <input                 \n                                type=\"range\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.05\"\n                                [(ngModel)]=\"layer.opacity\"\n                                (click)=\"stopDrag($event)\"\n                                (input)=\"updateOpacity(layer.id, layer.opacity)\"\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  <ng-template #dmpDialog>\n    @if (dmpSearchMode) {\n      <mat-dialog-content>\n        <div class=\"dialog-header\">\n          <div class=\"search-section\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n              <mat-label>S\u00F8g</mat-label>\n              <input \n                matInput \n                type=\"text\" \n                [(ngModel)]=\"dmpSearchText\" \n                (ngModelChange)=\"searchDmp()\"\n                placeholder=\"Skriv for at s\u00F8ge...\"\n              />\n            </mat-form-field>\n            <mat-icon (click)=\"clearDmpSearchText()\">undo</mat-icon>\n          </div>\n          <mat-icon \n            class=\"close-button\" \n            (click)=\"toggleDmpSearch(false)\"\n            matTooltip=\"Lukke\" \n            [matTooltipShowDelay]=\"200\"\n            [matTooltipHideDelay]=\"300\" \n            matTooltipPosition=\"left\">\n            close\n          </mat-icon>\n        </div>\n      </mat-dialog-content>\n    }\n\n    @if (dmpLayerResults.length > 0) {\n      <div class=\"dmp-search-panel\">\n          <mat-option *ngFor=\"let result of dmpLayerResults\" [value]=\"result\" class=\"search-result-option\">\n              <mat-expansion-panel expanded=\"false\"> \n                <mat-expansion-panel-header>\n                  <mat-panel-title>\n                    <span class=\"result-title\">{{ result.title }}</span>\n                  </mat-panel-title>\n                </mat-expansion-panel-header>\n                <div><span class=\"field-label\">Status:</span><span class=\"field-value\"> {{ result.availability }}</span></div>\n                <div><span class=\"field-label\">Kategori:</span><span class=\"field-value\"> {{ result.category }}</span></div>\n                <div><span class=\"field-label\">Beskrivelse:</span><span class=\"field-value\"> {{ result.description }}</span></div>\n                <div><span class=\"field-label\">Tags:</span><span class=\"field-value\"> {{ result.tags?.join(', ') }}</span></div>\n                <div *ngIf=\"result.metaDataUrl\">\n                  <span class=\"field-label\">Metadata:</span>\n                    <a [href]=\"result.metaDataUrl\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n                      Vis metadata\n                      <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                    </a>\n                </div>\n                <div *ngIf=\"result.license && result.license.url\">\n                  <span class=\"field-label\">Licens:</span>\n                    <a [href]=\"result.license.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n                      {{ result.license.title }}\n                      <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                    </a>\n                </div>\n                <div *ngIf=\"result.dataLiabilityAgreement && result.dataLiabilityAgreement.url\">\n                  <span class=\"field-label\">Dataansvarsaftale:</span>\n                    <a [href]=\"result.dataLiabilityAgreement.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n                      {{ result.dataLiabilityAgreement.title }}\n                      <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                    </a>\n                </div>\n                <div class=\"add-layer-section\">\n                  <span class=\"field-label\">Tilf\u00F8j {{ result.serviceType }}:</span>\n                    <mat-icon (click)=\"addDmpLayer(result)\" class=\"add-option\"\n                      matTooltip=\"Tilf\u00F8j\" \n                      [matTooltipShowDelay]=\"200\"\n                      [matTooltipHideDelay]=\"300\" \n                      matTooltipPosition=\"above\">add\n                  </mat-icon>\n                </div>\n              </mat-expansion-panel>\n          </mat-option>\n    </div>}\n  </ng-template>\n</div>", styles: [".layer-info{cursor:pointer}.legend-thumbnail{max-width:200px;max-height:200px;width:auto;height:auto;border:2px solid #dee2e6;padding:6px}::ng-deep .mat-mdc-dialog-container .mdc-dialog__surface{background:#4c4d51!important;border-radius:5px}::ng-deep .dmp-dialog-content mat-dialog-content{padding:12px 16px!important;background:#4c4d51}::ng-deep .dmp-dialog-content mat-dialog-content .search-section{display:flex;align-items:center;gap:6px;padding:0}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field{flex:1}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-text-field-wrapper{padding-bottom:0;background:#6d6f73}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-text-field-wrapper:hover{box-shadow:none!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-form-field-infix{padding-bottom:6px;min-height:auto}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field input{font-size:13px;padding:3px 0;color:#fff}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0;margin-top:0}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field label{color:#fff!important;font-size:13px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-icon{color:#fff;cursor:pointer;padding:6px;border-radius:4px;transition:all .2s ease;font-size:24px;width:24px;height:24px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-icon:hover{color:#f9fafb;background:#ffffff1a}::ng-deep .dmp-dialog-content mat-dialog-actions{display:none}.dialog-header{position:relative}.dialog-header .search-section{padding-right:40px}.dialog-header .close-button{position:absolute;top:0;right:0;color:#fff;cursor:pointer;padding:6px;border-radius:50%;transition:all .2s ease;font-size:24px;width:24px;height:24px;display:flex;justify-content:center;align-items:center;z-index:10;background-color:#ffffff1a}.dialog-header .close-button:hover{background:#d1d0d01a}.field-label{color:#d4d8da!important;font-size:14px!important;margin-right:6px}.open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px;font-size:13px;transition:color .2s ease}.open-link:hover{color:#2180c9!important;text-decoration:underline!important}.open-link .link-icon{font-size:16px;width:16px;height:16px}.field-value{color:#fff!important;font-size:14px!important}.add-layer-section{display:flex;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.add-layer-section .field-label{flex:1}.search-result-option{padding:0!important}.search-result-option mat-expansion-panel{box-shadow:none!important;background:#4d4f55;margin-bottom:4px;border-radius:5px!important}.search-result-option mat-expansion-panel:last-child{margin-bottom:0}.search-result-option mat-expansion-panel mat-expansion-panel-header{background:#4c4d51!important;padding:0 16px;height:48px}.search-result-option mat-expansion-panel mat-expansion-panel-header:hover{background:#ffffff1a!important}.search-result-option mat-expansion-panel mat-expansion-panel-header mat-panel-title{color:#fff;font-size:14px}.search-result-option mat-expansion-panel mat-expansion-panel-header mat-panel-title .result-title{color:#fff;font-size:14px}.search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#4d4f55}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:8px;display:flex;align-items:flex-start;gap:4px}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div mat-icon.add-option{margin-left:auto}.dmp-search-panel{background:#4c4d51;overflow-y:scroll;max-height:300px;margin-top:10px}.dmp-search-panel span{color:#fff;font-size:13px}.dmp-search-panel::-webkit-scrollbar{width:12px}.dmp-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.dmp-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.dmp-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.dmp-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.dmp-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.dmp-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.dmp-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.dmp-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-dialog-container .dmp-search-panel{max-height:400px;margin-top:0;border-radius:4px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.dmp-item-list .dmp-item-container{display:flex;align-items:center;width:100%;gap:8px;min-width:0}.dmp-item-list .dmp-item-container .delete-icon{color:#e5281a;font-size:18px;width:18px;height:18px;cursor:pointer;flex-shrink:0;margin-right:4px}@media (max-width: 767px){.dmp-item-list .dmp-item-container .delete-icon{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .delete-icon:hover{background:#e5281a33;border-radius:3px}.dmp-item-list .dmp-item-container .dmp-item-title-section{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden}.dmp-item-list .dmp-item-container .dmp-item-title{flex:1;min-width:0;overflow:hidden}.dmp-item-list .dmp-item-container .dmp-item-title .title-text{color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-title .title-text{font-size:11px}}.dmp-item-list .dmp-item-container .dmp-item-signal-center{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:30px}.dmp-item-list .dmp-item-container .dmp-item-signal-center .zoom-off{color:#e5281a;font-size:16px;width:16px;height:16px}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-signal-center .zoom-off{font-size:14px;width:14px;height:14px}}.dmp-item-list .dmp-item-container .dmp-item-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon{flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-on{color:#4caf50;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-on{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-on:hover{background:#4caf5033;border-radius:3px}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-off{color:#e5281a;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-off{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-off:hover{background:#e5281a33;border-radius:3px}.dmp-item-list .dmp-item-container .dmp-item-controls input[type=range]{width:80px;height:4px;margin:0;flex-shrink:0}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-controls input[type=range]{width:60px}}::ng-deep .dmp-item-list mat-expansion-panel-header{padding:0 11px!important;height:40px!important}@media (max-width: 767px){::ng-deep .dmp-item-list mat-expansion-panel-header{padding:0 20px!important;height:36px!important}}::ng-deep .dmp-item-list mat-expansion-panel-header mat-panel-title{width:100%}::ng-deep .dmp-item-list mat-expansion-panel-header mat-panel-title .item{width:100%}.group-header{display:flex}.group-header mat-icon{margin-left:10px}.layer-selector-body-wrapper{position:absolute;left:1em;top:10em;z-index:1000;max-width:calc(100vw - 8em);display:flex;flex-direction:column;transition:width .3s ease,max-width .3s ease;border-radius:5px}.layer-selector-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:move;z-index:1001}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons{justify-content:space-between}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .icon-left{order:1;margin-right:auto}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .toggle-icon{order:3}.layer-selector-body-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}.layer-selector-body-wrapper.collapsed .layer-selector-body{display:none}.layer-selector-body-wrapper.collapsed .drag-handle-selector{width:100%;min-width:100%;box-sizing:border-box}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content{width:100%}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons{width:100%;justify-content:space-between;gap:6px}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon{font-size:18px!important;flex-shrink:0}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.icon-left{cursor:default!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.toggle-icon{cursor:pointer!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.toggle-icon:hover{color:#d3d3d3!important}.layer-selector-body-wrapper .ol-control{border-radius:0}.layer-selector-body-wrapper .group-header{color:#fff;padding:4px 14px}@media (max-width: 767px){.layer-selector-body-wrapper{right:.5em;bottom:4em;max-width:calc(100vw - 7em);left:.5em;width:calc(100vw - 7em)}.layer-selector-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}@media (min-width: 768px) and (max-width: 1024px){.layer-selector-body-wrapper{right:3.5em;bottom:.5em;max-width:calc(100vw - 2em)}.layer-selector-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}.drag-handle-selector{display:flex;justify-content:flex-end;border-radius:5px 5px 0 0;padding:0 2px;cursor:move;background:#4c4d51}.drag-handle-content,.drag-handle-icons{display:flex;align-items:center;width:100%}.drag-handle-icons mat-icon{color:#fff;font-size:18px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-left{cursor:default!important}.toggle-icon{cursor:pointer!important}.toggle-icon:hover{color:#d3d3d3!important}::ng-deep .layer-selector-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:#4c4d51;box-shadow:0 4px 20px #00000026;width:100%;max-width:100%;max-height:317px;min-height:120px;overflow-y:auto}::ng-deep .layer-selector-body::-webkit-scrollbar{width:12px}::ng-deep .layer-selector-body::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .layer-selector-body::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .layer-selector-body::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .layer-selector-body::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .layer-selector-body::-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::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .layer-selector-body::-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::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}@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:#6d6f73}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-text-field-wrapper:hover{box-shadow:none!important}::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;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:#4c4d51!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:#ffffff1a!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{cursor:pointer;color:#e5281a}::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:#4d4f55}@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:move;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 .layer-info{cursor:pointer;color:#dfca0e;font-size:16px;width:16px;height:16px;flex-shrink:0;transition:all .2s ease;padding:2px;border-radius:50%}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left .layer-info{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left .layer-info:hover{color:#ccb913}::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:move}@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:#e5281a;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:#e5281a;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{cursor:pointer;color:#e5281a}.add-option{color:#4caf50}.add-option:hover{color:#37923a}::ng-deep .layer-selector-body .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
 }
 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, MatTooltipModule], template: "<div\n  #layerSelectorBody\n  class=\"layer-selector-body-wrapper\"\n  cdkDrag\n  cdkDragBoundary=\".map-container\"\n  [cdkDragFreeDragPosition]=\"layerSelectorDragPosition\"\n  (cdkDragEnded)=\"onLayerSelectorDragEnded($event)\"\n  [class.collapsed]=\"collapsed\">\n\n  <div class=\"drag-handle-selector\" cdkDragHandle>\n    <div class=\"drag-handle-content\">\n      <div class=\"drag-handle-icons\">\n        <mat-icon class=\"icon-left\">layers</mat-icon>\n        <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n        <mat-icon class=\"toggle-icon\" (click)=\"toggleLayerSelector()\">\n          {{ collapsed ? 'flip_to_front' : 'remove' }}\n        </mat-icon>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ol-unselectable ol-control layer-selector-body\" *ngIf=\"!collapsed\">\n    <div class=\"search-section\">\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>Filtrer</mat-label>\n        <input \n          matInput \n          type=\"text\" \n          [(ngModel)]=\"searchText\" \n          (ngModelChange)=\"filteredLayerGroups=setfilteredGroups()\"\n          placeholder=\"Skriv for at filtrere...\"\n        />\n      </mat-form-field>\n      <mat-icon (click)=\"clearSearchText()\">undo</mat-icon>\n    </div>\n    <div *ngIf=\"filteredLayerGroups && filteredLayerGroups.length > 0\" class=\"group-header\">Mine Temaer</div>\n    <div\n      cdkDropList\n      [cdkDropListData]=\"filteredLayerGroups\"\n      (cdkDropListDropped)=\"dropGroup($event, filteredLayerGroups)\"\n      class=\"item-list\">\n      @for (group of filteredLayerGroups; track group.id; let gIndex = $index) {\n        <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n          <mat-expansion-panel [(expanded)]=\"group.expanded\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                  @if (group.expanded) {\n                    <mat-icon>arrow_upward</mat-icon>\n                  }\n                  @if (!group.expanded) {\n                    <mat-icon>arrow_downward</mat-icon>  \n                  }\n                {{ group.name }} \n                <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n                ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n                @if (group.visible) {\n                  <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\"  \n                    matTooltip=\"T\u00E6nd\"  \n                    [matTooltipShowDelay]=\"200\"\n                    [matTooltipHideDelay]=\"300\" \n                    matTooltipPosition=\"above\">power_settings_new\n                  </mat-icon>  \n                  }\n                @if (!group.visible) {\n                  <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n                    matTooltip=\"Sluk\"  \n                    [matTooltipShowDelay]=\"200\"\n                    [matTooltipHideDelay]=\"300\" \n                    matTooltipPosition=\"above\">power_settings_new\n                  </mat-icon>\n                }\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n\n            <div\n              cdkDropList\n              [cdkDropListData]=\"group.layers\"\n              (cdkDropListDropped)=\"dropLayer($event, group)\"\n              class=\"item-list\">\n              @for (layer of group.layers; track layer.id; let iIndex = $index) {\n                  <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n                    <mat-expansion-panel-header>\n                      <mat-panel-title>\n                        <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n                          <div class=\"item-left\">\n                            <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n                            <span>{{ layer.name }}</span>\n                          </div>\n                          <div class=\"item-center\">\n                            @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n                              <mat-icon class=\"zoom-off\" \n                                matTooltip=\"Zoom\"  \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipPosition=\"above\">browser_not_supported\n                              </mat-icon>\n                            }\n                            @if (layer.hasErrors) {\n                              <mat-icon class=\"zoom-off\" \n                                matTooltip=\"Fejl\"  \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipPosition=\"above\">priority_high\n                              </mat-icon>\n\n                            }\n                          </div>\n                          <div class=\"item-right\">\n                            @if (layer.visible) {\n                              <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\"  \n                                matTooltip=\"T\u00E6nd\"  \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipPosition=\"above\">power_settings_new\n                              </mat-icon>\n                            }\n                            @if (!layer.visible) {\n                              <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n                                matTooltip=\"Sluk\"  \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipPosition=\"above\">power_settings_new\n                              </mat-icon>\n                            }\n                            <input                 \n                              type=\"range\"\n                              min=\"0\"\n                              max=\"1\"\n                              step=\"0.05\"\n                              [(ngModel)]=\"layer.opacity\"\n                              (click)=\"stopDrag($event)\"\n                              (input)=\"updateOpacity(layer)\"\n                              (mousedown)=\"stopDrag($event)\"\n                              (touchstart)=\"stopDrag($event)\"\n                              (pointerdown)=\"stopDrag($event)\"\n                            >\n                          </div>\n                        </div>\n                      </mat-panel-title>\n                  </mat-expansion-panel-header>\n                  <div class=\"layer-description\">{{ layer.description }}</div>\n                  @if (showLegend) {\n                   <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n                  }\n                </mat-expansion-panel>\n                }\n              </div>\n            </mat-expansion-panel>\n          </div>\n        }\n      </div>\n      <div *ngIf=\"filteredBackgroundLayerGroups && filteredBackgroundLayerGroups.length > 0\" class=\"group-header\">Baggrundskort</div>\n      <div\n        cdkDropList\n        [cdkDropListData]=\"filteredBackgroundLayerGroups\"\n        (cdkDropListDropped)=\"dropGroup($event, filteredBackgroundLayerGroups)\"\n        class=\"item-list\">\n        @for (group of filteredBackgroundLayerGroups; track group.id; let gIndex = $index) {\n          <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n            <mat-expansion-panel [(expanded)]=\"group.expanded\">\n              <mat-expansion-panel-header>\n                <mat-panel-title>\n                    @if (group.expanded) {\n                      <mat-icon>arrow_upward</mat-icon>\n                    }\n                    @if (!group.expanded) {\n                      <mat-icon>arrow_downward</mat-icon>  \n                    }\n                  {{ group.name }} \n                  <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n                  ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n                  @if (group.visible) {\n                    <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\"  \n                      matTooltip=\"T\u00E6nd\"  \n                      [matTooltipShowDelay]=\"200\"\n                      [matTooltipHideDelay]=\"300\" \n                      matTooltipPosition=\"above\">power_settings_new\n                    </mat-icon>  \n                    }\n                  @if (!group.visible) {\n                    <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n                      matTooltip=\"Sluk\"  \n                      [matTooltipShowDelay]=\"200\"\n                      [matTooltipHideDelay]=\"300\" \n                      matTooltipPosition=\"above\">power_settings_new\n                    </mat-icon>\n                  }\n                </mat-panel-title>\n              </mat-expansion-panel-header>\n\n              <div\n                cdkDropList\n                [cdkDropListData]=\"group.layers\"\n                (cdkDropListDropped)=\"dropLayer($event, group)\"\n                class=\"item-list\">\n                @for (layer of group.layers; track layer.id; let iIndex = $index) {\n                    <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n                      <mat-expansion-panel-header>\n                        <mat-panel-title>\n                          <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n                            <div class=\"item-left\">\n                              <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n                              <span>{{ layer.name }}</span>\n                            </div>\n                            <div class=\"item-center\">\n                              @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n                                <mat-icon class=\"zoom-off\" \n                                  matTooltip=\"Zoom\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">browser_not_supported\n                                </mat-icon>\n                              }\n                              @if (layer.hasErrors) {\n                                <mat-icon class=\"zoom-off\" \n                                  matTooltip=\"Fejl\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">priority_high\n                                </mat-icon>\n\n                              }\n                            </div>\n                            <div class=\"item-right\">\n                              @if (layer.visible) {\n                                <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\"  \n                                  matTooltip=\"T\u00E6nd\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">power_settings_new\n                                </mat-icon>\n                              }\n                              @if (!layer.visible) {\n                                <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n                                  matTooltip=\"Sluk\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">power_settings_new\n                                </mat-icon>\n                              }\n                              <input                 \n                                type=\"range\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.05\"\n                                [(ngModel)]=\"layer.opacity\"\n                                (click)=\"stopDrag($event)\"\n                                (input)=\"updateOpacity(layer)\"\n                                (mousedown)=\"stopDrag($event)\"\n                                (touchstart)=\"stopDrag($event)\"\n                                (pointerdown)=\"stopDrag($event)\"\n                              >\n                            </div>\n                          </div>\n                        </mat-panel-title>\n                    </mat-expansion-panel-header>\n                    <div class=\"layer-description\">{{ layer.description }}</div>\n                    @if (showLegend) {\n                    <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n                    }\n                    </mat-expansion-panel>\n                  }\n              </div>\n            </mat-expansion-panel>\n          </div>\n        }\n      </div>\n  </div>\n</div>", styles: [".legend-thumbnail{max-width:200px;max-height:200px;width:auto;height:auto;border:2px solid #dee2e6;border-radius:6px;padding:6px}.layer-selector-body-wrapper{position:absolute;left:1em;top:10em;z-index:1000;cursor:grab;max-width:calc(100vw - 8em);display:flex;flex-direction:column}.layer-selector-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons{justify-content:space-between}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .icon-left{order:1;margin-right:auto}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .drag-indicator-right{order:1}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .toggle-icon{order:3}.layer-selector-body-wrapper.collapsed .layer-selector-body{display:none}.layer-selector-body-wrapper.collapsed .drag-handle-icons{justify-content:flex-end}.layer-selector-body-wrapper.collapsed .drag-handle-icons .icon-left{order:1;margin-right:0}.layer-selector-body-wrapper.collapsed .drag-handle-icons .drag-indicator-right{order:1}.layer-selector-body-wrapper.collapsed .drag-handle-icons .toggle-icon{order:3}.layer-selector-body-wrapper .ol-control{border-radius:0}.layer-selector-body-wrapper .group-header{color:#fff;padding:0 14px}@media (max-width: 767px){.layer-selector-body-wrapper{right:.5em;bottom:4em;max-width:calc(100vw - 7em);left:.5em;width:calc(100vw - 7em)}}@media (min-width: 768px) and (max-width: 1024px){.layer-selector-body-wrapper{right:3.5em;bottom:.5em;max-width:calc(100vw - 2em)}}.drag-handle-selector{display:flex;justify-content:flex-end;border-radius:5px 5px 0 0;padding:5px;cursor:grab;background:#292a2d}.drag-handle-content{display:flex;align-items:center;width:100%}.drag-handle-icons{display:flex;align-items:center;gap:16px;width:100%}.drag-handle-icons mat-icon{color:#fff;font-size:18px;width:18px;height:18px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-icons mat-icon:first-child{cursor:grab}.drag-indicator-right{cursor:grab}.toggle-icon:hover{color:#fff;background:#ffffff26}::ng-deep .layer-selector-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:#292a2d;box-shadow:0 4px 20px #00000026;width:480px;max-width:100%;max-height:317px;min-height:120px;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 767px){::ng-deep .layer-selector-body{width:100%;max-height:70vh;min-height:140px}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body{width:100%;max-width:445px;max-height:76vh;min-height:110px}}::ng-deep .layer-selector-body .search-section{display:flex;align-items:center;gap:6px;padding:8px 12px 6px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section{padding:6px 8px 4px;gap:4px}}::ng-deep .layer-selector-body .search-section mat-form-field{flex:1}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-text-field-wrapper{padding-bottom:0;background:#000}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-wrapper{padding-bottom:0;margin-bottom:0}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-form-field-infix{padding-bottom:6px;min-height:auto}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-outline{background:#fff}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-outline-thick{color:#1976d2}::ng-deep .layer-selector-body .search-section mat-form-field input{font-size:13px;padding:3px 0}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-form-field input{font-size:12px}}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-label{color:#fff;font-weight:500;font-size:13px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-label{font-size:12px}}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0;margin-top:0}::ng-deep .layer-selector-body .search-section mat-icon{color:#fff;cursor:pointer;padding:6px;border-radius:4px;transition:all .2s ease;font-size:24px;width:24px;height:24px;display:flex;justify-content:center;align-items:center}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-icon{font-size:20px;width:20px;height:20px;padding:4px}}::ng-deep .layer-selector-body .search-section mat-icon:hover{color:#f9fafb}::ng-deep .layer-selector-body .item-list{flex:1;overflow-y:auto;max-height:660px;width:100%}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list{padding:4px;max-height:calc(60vh - 80px)}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body .item-list{max-height:calc(77vh - 78px)}}::ng-deep .layer-selector-body .item-list .group{overflow:hidden;box-shadow:0 -2px 2px #4868b20a,0 2px 2px #6a6f7517,0 1px 2px #4868b214}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel{box-shadow:none!important;border-radius:0!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header{padding:0 11px;height:40px;background:#000!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header:hover{background:#333!important}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header{padding:0 20px;height:36px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header:hover{background:color-mix(in srgb,#000 60%,transparent)!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title{align-items:center;gap:6px;font-weight:600;color:#bdc1c3cc;font-size:17px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon{color:#bdc1c3cc;font-size:16px;width:16px;height:16px;transition:transform .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.lightbulb{color:#dfca0e}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.power-on{color:#4caf50}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.power-off{color:#f44336}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content{background:#4d4f55}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:4px 0;background:#000}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:2px 0}}::ng-deep .layer-selector-body .item-list .group .item-list{padding:0;max-height:none}::ng-deep .layer-selector-body .item-list .group .item-list .layer-description{font-size:13px;padding:0 31px;color:#fffc}::ng-deep .layer-selector-body .item-list .group .item-list .item{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:6px;background:transparent;transition:all .2s ease;color:#fff;cursor:grab;font-size:14px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item{gap:4px;padding:6px 8px}}::ng-deep .layer-selector-body .item-list .group .item-list .item:last-child{border-bottom:none}::ng-deep .layer-selector-body .item-list .group .item-list .item:hover{background-color:transparent;transition:all .2s ease}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left{display:flex;align-items:center;gap:3px;flex:1;min-width:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left span{font-size:13px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;flex:1;min-width:0;color:#fff}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left span{font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center{display:flex;align-items:center;gap:2px;flex-shrink:0;justify-content:center;position:relative;left:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center .icon-label{font-size:11px;opacity:.8;margin-right:4px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center .icon-label{font-size:9px;margin-right:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right{display:flex;align-items:center;flex:1;justify-content:flex-end;min-width:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right input[type=range]{width:80px;height:4px;margin:0;flex-shrink:0}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right input[type=range]{width:60px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon{flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.drag-indicator{color:#fff;font-size:16px;width:16px;height:16px;cursor:grab}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.drag-indicator{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on{color:#4caf50;font-size:18px;width:18px;height:18px;cursor:pointer;padding:3px;border-radius:3px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on{font-size:16px;width:16px;height:16px;padding:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on:hover{background:#4caf5033}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off{color:#f44336;font-size:18px;width:18px;height:18px;cursor:pointer;padding:3px;border-radius:3px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off{font-size:16px;width:16px;height:16px;padding:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off:hover{background:#f4433633}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.zoom-off{color:#f44336;font-size:16px;width:16px;height:16px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.zoom-off{font-size:14px;width:14px;height:14px}}::ng-deep .mat-expansion-indicator svg{fill:#fff!important}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 15px #00000026;background:#fff;padding:10px 12px}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.item-list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.power-on{color:#4caf50}.power-off{color:#f44336}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar{width:12px}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .layer-selector-body .item-list::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}\n"] }]
+                        MatExpansionModule, MatInputModule, MatTooltipModule, MatOptionModule, MatDialogModule, MatDialogContent, MatDialogActions], template: "<div\n  #layerSelectorBody\n  class=\"layer-selector-body-wrapper\"\n  cdkDrag\n  cdkDragBoundary=\".map-container\"\n  [cdkDragFreeDragPosition]=\"layerSelectorDragPosition\"\n  (cdkDragEnded)=\"onLayerSelectorDragEnded($event)\"\n  [class.collapsed]=\"collapsed\">\n\n  <div class=\"drag-handle-selector\" cdkDragHandle>\n    <div class=\"drag-handle-content\">\n      <div class=\"drag-handle-icons\">\n        <mat-icon \n          class=\"icon-left\" \n          matTooltip=\"Lag\" \n          [matTooltipShowDelay]=\"500\"\n          [matTooltipHideDelay]=\"100\" \n          matTooltipPosition=\"above\">\n          layers\n        </mat-icon>\n        <mat-icon class=\"toggle-icon\" (click)=\"toggleLayerSelector()\">\n          {{ collapsed ? 'flip_to_front' : 'remove' }}\n        </mat-icon>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ol-unselectable ol-control layer-selector-body\" *ngIf=\"!collapsed\">\n    <div class=\"search-section\">\n      <mat-form-field appearance=\"outline\" class=\"w-full\">\n        <mat-label>Filtrer</mat-label>\n        <input \n          matInput \n          type=\"text\" \n          [(ngModel)]=\"searchText\" \n          (ngModelChange)=\"filteredLayerGroups=setfilteredGroups()\"\n          placeholder=\"Skriv for at filtrere...\"\n        />\n      </mat-form-field>\n      <mat-icon (click)=\"clearSearchText()\">undo</mat-icon>\n    </div>\n    <div\n      cdkDropList\n      [cdkDropListData]=\"filteredLayerGroups\"\n      (cdkDropListDropped)=\"dropGroup($event, filteredLayerGroups)\"\n      class=\"item-list\">\n      @for (group of filteredLayerGroups; track group.id; let gIndex = $index) {\n        <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n          <mat-expansion-panel [(expanded)]=\"group.expanded\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                  @if (group.expanded) {\n                    <mat-icon>arrow_upward</mat-icon>\n                  }\n                  @if (!group.expanded) {\n                    <mat-icon>arrow_downward</mat-icon>  \n                  }\n                {{ group.name }} \n                <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n                ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n                @if (group.visible) {\n                  <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\"  \n                    matTooltip=\"T\u00E6nd\"  \n                    [matTooltipShowDelay]=\"200\"\n                    [matTooltipHideDelay]=\"300\" \n                    matTooltipPosition=\"above\">power_settings_new\n                  </mat-icon>  \n                  }\n                @if (!group.visible) {\n                  <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n                    matTooltip=\"Sluk\"  \n                    [matTooltipShowDelay]=\"200\"\n                    [matTooltipHideDelay]=\"300\" \n                    matTooltipPosition=\"above\">power_settings_new\n                  </mat-icon>\n                }\n              </mat-panel-title>\n            </mat-expansion-panel-header>\n\n            <div\n              cdkDropList\n              [cdkDropListData]=\"group.layers\"\n              (cdkDropListDropped)=\"dropLayer($event, group)\"\n              class=\"item-list\">\n              @for (layer of group.layers; track layer.id; let iIndex = $index) {\n                  <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n                    <mat-expansion-panel-header>\n                      <mat-panel-title>\n                        <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n                          <div class=\"item-left\">\n                            <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n                            @if(layer.infoUrl) {\n                              <mat-icon \n                                class=\"layer-info\"\n                                matTooltip=\"Vis ekstra informationer i ny tab\"\n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                (click)=\"openUrl(layer.infoUrl)\"\n                                matTooltipPosition=\"above\"\n                              >info</mat-icon>\n                            }\n                            <span>{{ layer.name }}</span>                            \n                            <mat-icon></mat-icon>\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.id, layer.opacity)\"\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 class=\"group-header\">Mine Temaer\n          <mat-icon (click)=\"toggleDmpSearch(true)\"\n            class=\"power-on\"\n            matTooltip=\"S\u00F8g\"  \n            [matTooltipShowDelay]=\"200\"\n            [matTooltipHideDelay]=\"300\" \n            matTooltipPosition=\"above\">add\n          </mat-icon>\n      </div>\n      @if (dmpLayers.length > 0) {\n        <div class=\"dmp-item-list\">\n          @for (layer of dmpLayers; track layer.datasetId; let iIndex = $index) {\n              <mat-expansion-panel expanded=\"false\" [disabled]=\"true\"> \n                <mat-expansion-panel-header>\n                  <mat-panel-title>\n                    <div class=\"item\">\n                      <div class=\"dmp-item-container\">\n                        <mat-icon (click)=\"deleteDmpLayer(layer, $event)\" class=\"delete-icon\"  \n                            matTooltip=\"Slet\"  \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipPosition=\"above\">delete\n                        </mat-icon>\n                        <div class=\"dmp-item-title-section\">\n                          <div class=\"dmp-item-title\">\n                            <span class=\"title-text\">{{ layer.title }}</span>\n                          </div>\n                        </div>\n                        @if (layer.hasErrors) {\n                          <div class=\"dmp-item-signal-center\">\n                            <mat-icon class=\"zoom-off\" \n                              matTooltip=\"Fejl\"  \n                              [matTooltipShowDelay]=\"200\"\n                              [matTooltipHideDelay]=\"300\" \n                              matTooltipPosition=\"above\">priority_high\n                            </mat-icon>\n                          </div>\n                        }\n                        <div class=\"dmp-item-controls\">\n                          @if (layer.visible) {\n                            <mat-icon (click)=\"toggleLayer(layer.datasetId, $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.datasetId, $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.datasetId, layer.opacity)\"\n                                (mousedown)=\"stopDrag($event)\"\n                                (touchstart)=\"stopDrag($event)\"\n                                (pointerdown)=\"stopDrag($event)\"\n                              >\n                        </div>\n                    </div>\n                  </div>\n                  </mat-panel-title>\n              </mat-expansion-panel-header>\n            </mat-expansion-panel>\n            }\n        </div>\n      }\n      <div *ngIf=\"filteredBackgroundLayerGroups && filteredBackgroundLayerGroups.length > 0\" class=\"group-header\">Baggrundskort</div>\n      <div\n        cdkDropList\n        [cdkDropListData]=\"filteredBackgroundLayerGroups\"\n        (cdkDropListDropped)=\"dropGroup($event, filteredBackgroundLayerGroups)\"\n        class=\"item-list\">\n        @for (group of filteredBackgroundLayerGroups; track group.id; let gIndex = $index) {\n          <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n            <mat-expansion-panel [(expanded)]=\"group.expanded\">\n              <mat-expansion-panel-header>\n                <mat-panel-title>\n                    @if (group.expanded) {\n                      <mat-icon>arrow_upward</mat-icon>\n                    }\n                    @if (!group.expanded) {\n                      <mat-icon>arrow_downward</mat-icon>  \n                    }\n                  {{ group.name }} \n                  <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n                  ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n                  @if (group.visible) {\n                    <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\"  \n                      matTooltip=\"T\u00E6nd\"  \n                      [matTooltipShowDelay]=\"200\"\n                      [matTooltipHideDelay]=\"300\" \n                      matTooltipPosition=\"above\">power_settings_new\n                    </mat-icon>  \n                    }\n                  @if (!group.visible) {\n                    <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n                      matTooltip=\"Sluk\"  \n                      [matTooltipShowDelay]=\"200\"\n                      [matTooltipHideDelay]=\"300\" \n                      matTooltipPosition=\"above\">power_settings_new\n                    </mat-icon>\n                  }\n                </mat-panel-title>\n              </mat-expansion-panel-header>\n\n              <div\n                cdkDropList\n                [cdkDropListData]=\"group.layers\"\n                (cdkDropListDropped)=\"dropLayer($event, group)\"\n                class=\"item-list\">\n                @for (layer of group.layers; track layer.id; let iIndex = $index) {\n                    <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n                      <mat-expansion-panel-header>\n                        <mat-panel-title>\n                          <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n                            <div class=\"item-left\">\n                              <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n                              <span>{{ layer.name }}</span>\n                            </div>\n                            <div class=\"item-center\">\n                              @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n                                <mat-icon class=\"zoom-off\" \n                                  matTooltip=\"Zoom\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">browser_not_supported\n                                </mat-icon>\n                              }\n                              @if (layer.hasErrors) {\n                                <mat-icon class=\"zoom-off\" \n                                  matTooltip=\"Fejl\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">priority_high\n                                </mat-icon>\n\n                              }\n                            </div>\n                            <div class=\"item-right\">\n                              @if (layer.visible) {\n                                <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\"  \n                                  matTooltip=\"T\u00E6nd\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">power_settings_new\n                                </mat-icon>\n                              }\n                              @if (!layer.visible) {\n                                <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n                                  matTooltip=\"Sluk\"  \n                                  [matTooltipShowDelay]=\"200\"\n                                  [matTooltipHideDelay]=\"300\" \n                                  matTooltipPosition=\"above\">power_settings_new\n                                </mat-icon>\n                              }\n                              <input                 \n                                type=\"range\"\n                                min=\"0\"\n                                max=\"1\"\n                                step=\"0.05\"\n                                [(ngModel)]=\"layer.opacity\"\n                                (click)=\"stopDrag($event)\"\n                                (input)=\"updateOpacity(layer.id, layer.opacity)\"\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  <ng-template #dmpDialog>\n    @if (dmpSearchMode) {\n      <mat-dialog-content>\n        <div class=\"dialog-header\">\n          <div class=\"search-section\">\n            <mat-form-field appearance=\"outline\" class=\"w-full\">\n              <mat-label>S\u00F8g</mat-label>\n              <input \n                matInput \n                type=\"text\" \n                [(ngModel)]=\"dmpSearchText\" \n                (ngModelChange)=\"searchDmp()\"\n                placeholder=\"Skriv for at s\u00F8ge...\"\n              />\n            </mat-form-field>\n            <mat-icon (click)=\"clearDmpSearchText()\">undo</mat-icon>\n          </div>\n          <mat-icon \n            class=\"close-button\" \n            (click)=\"toggleDmpSearch(false)\"\n            matTooltip=\"Lukke\" \n            [matTooltipShowDelay]=\"200\"\n            [matTooltipHideDelay]=\"300\" \n            matTooltipPosition=\"left\">\n            close\n          </mat-icon>\n        </div>\n      </mat-dialog-content>\n    }\n\n    @if (dmpLayerResults.length > 0) {\n      <div class=\"dmp-search-panel\">\n          <mat-option *ngFor=\"let result of dmpLayerResults\" [value]=\"result\" class=\"search-result-option\">\n              <mat-expansion-panel expanded=\"false\"> \n                <mat-expansion-panel-header>\n                  <mat-panel-title>\n                    <span class=\"result-title\">{{ result.title }}</span>\n                  </mat-panel-title>\n                </mat-expansion-panel-header>\n                <div><span class=\"field-label\">Status:</span><span class=\"field-value\"> {{ result.availability }}</span></div>\n                <div><span class=\"field-label\">Kategori:</span><span class=\"field-value\"> {{ result.category }}</span></div>\n                <div><span class=\"field-label\">Beskrivelse:</span><span class=\"field-value\"> {{ result.description }}</span></div>\n                <div><span class=\"field-label\">Tags:</span><span class=\"field-value\"> {{ result.tags?.join(', ') }}</span></div>\n                <div *ngIf=\"result.metaDataUrl\">\n                  <span class=\"field-label\">Metadata:</span>\n                    <a [href]=\"result.metaDataUrl\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n                      Vis metadata\n                      <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                    </a>\n                </div>\n                <div *ngIf=\"result.license && result.license.url\">\n                  <span class=\"field-label\">Licens:</span>\n                    <a [href]=\"result.license.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n                      {{ result.license.title }}\n                      <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                    </a>\n                </div>\n                <div *ngIf=\"result.dataLiabilityAgreement && result.dataLiabilityAgreement.url\">\n                  <span class=\"field-label\">Dataansvarsaftale:</span>\n                    <a [href]=\"result.dataLiabilityAgreement.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n                      {{ result.dataLiabilityAgreement.title }}\n                      <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                    </a>\n                </div>\n                <div class=\"add-layer-section\">\n                  <span class=\"field-label\">Tilf\u00F8j {{ result.serviceType }}:</span>\n                    <mat-icon (click)=\"addDmpLayer(result)\" class=\"add-option\"\n                      matTooltip=\"Tilf\u00F8j\" \n                      [matTooltipShowDelay]=\"200\"\n                      [matTooltipHideDelay]=\"300\" \n                      matTooltipPosition=\"above\">add\n                  </mat-icon>\n                </div>\n              </mat-expansion-panel>\n          </mat-option>\n    </div>}\n  </ng-template>\n</div>", styles: [".layer-info{cursor:pointer}.legend-thumbnail{max-width:200px;max-height:200px;width:auto;height:auto;border:2px solid #dee2e6;padding:6px}::ng-deep .mat-mdc-dialog-container .mdc-dialog__surface{background:#4c4d51!important;border-radius:5px}::ng-deep .dmp-dialog-content mat-dialog-content{padding:12px 16px!important;background:#4c4d51}::ng-deep .dmp-dialog-content mat-dialog-content .search-section{display:flex;align-items:center;gap:6px;padding:0}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field{flex:1}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-text-field-wrapper{padding-bottom:0;background:#6d6f73}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-text-field-wrapper:hover{box-shadow:none!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-form-field-infix{padding-bottom:6px;min-height:auto}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field input{font-size:13px;padding:3px 0;color:#fff}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0;margin-top:0}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field label{color:#fff!important;font-size:13px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-icon{color:#fff;cursor:pointer;padding:6px;border-radius:4px;transition:all .2s ease;font-size:24px;width:24px;height:24px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-icon:hover{color:#f9fafb;background:#ffffff1a}::ng-deep .dmp-dialog-content mat-dialog-actions{display:none}.dialog-header{position:relative}.dialog-header .search-section{padding-right:40px}.dialog-header .close-button{position:absolute;top:0;right:0;color:#fff;cursor:pointer;padding:6px;border-radius:50%;transition:all .2s ease;font-size:24px;width:24px;height:24px;display:flex;justify-content:center;align-items:center;z-index:10;background-color:#ffffff1a}.dialog-header .close-button:hover{background:#d1d0d01a}.field-label{color:#d4d8da!important;font-size:14px!important;margin-right:6px}.open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px;font-size:13px;transition:color .2s ease}.open-link:hover{color:#2180c9!important;text-decoration:underline!important}.open-link .link-icon{font-size:16px;width:16px;height:16px}.field-value{color:#fff!important;font-size:14px!important}.add-layer-section{display:flex;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.add-layer-section .field-label{flex:1}.search-result-option{padding:0!important}.search-result-option mat-expansion-panel{box-shadow:none!important;background:#4d4f55;margin-bottom:4px;border-radius:5px!important}.search-result-option mat-expansion-panel:last-child{margin-bottom:0}.search-result-option mat-expansion-panel mat-expansion-panel-header{background:#4c4d51!important;padding:0 16px;height:48px}.search-result-option mat-expansion-panel mat-expansion-panel-header:hover{background:#ffffff1a!important}.search-result-option mat-expansion-panel mat-expansion-panel-header mat-panel-title{color:#fff;font-size:14px}.search-result-option mat-expansion-panel mat-expansion-panel-header mat-panel-title .result-title{color:#fff;font-size:14px}.search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#4d4f55}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:8px;display:flex;align-items:flex-start;gap:4px}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div mat-icon.add-option{margin-left:auto}.dmp-search-panel{background:#4c4d51;overflow-y:scroll;max-height:300px;margin-top:10px}.dmp-search-panel span{color:#fff;font-size:13px}.dmp-search-panel::-webkit-scrollbar{width:12px}.dmp-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.dmp-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.dmp-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.dmp-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.dmp-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.dmp-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.dmp-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.dmp-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-dialog-container .dmp-search-panel{max-height:400px;margin-top:0;border-radius:4px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.dmp-item-list .dmp-item-container{display:flex;align-items:center;width:100%;gap:8px;min-width:0}.dmp-item-list .dmp-item-container .delete-icon{color:#e5281a;font-size:18px;width:18px;height:18px;cursor:pointer;flex-shrink:0;margin-right:4px}@media (max-width: 767px){.dmp-item-list .dmp-item-container .delete-icon{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .delete-icon:hover{background:#e5281a33;border-radius:3px}.dmp-item-list .dmp-item-container .dmp-item-title-section{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden}.dmp-item-list .dmp-item-container .dmp-item-title{flex:1;min-width:0;overflow:hidden}.dmp-item-list .dmp-item-container .dmp-item-title .title-text{color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-title .title-text{font-size:11px}}.dmp-item-list .dmp-item-container .dmp-item-signal-center{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:30px}.dmp-item-list .dmp-item-container .dmp-item-signal-center .zoom-off{color:#e5281a;font-size:16px;width:16px;height:16px}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-signal-center .zoom-off{font-size:14px;width:14px;height:14px}}.dmp-item-list .dmp-item-container .dmp-item-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon{flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-on{color:#4caf50;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-on{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-on:hover{background:#4caf5033;border-radius:3px}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-off{color:#e5281a;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-off{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-off:hover{background:#e5281a33;border-radius:3px}.dmp-item-list .dmp-item-container .dmp-item-controls input[type=range]{width:80px;height:4px;margin:0;flex-shrink:0}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-controls input[type=range]{width:60px}}::ng-deep .dmp-item-list mat-expansion-panel-header{padding:0 11px!important;height:40px!important}@media (max-width: 767px){::ng-deep .dmp-item-list mat-expansion-panel-header{padding:0 20px!important;height:36px!important}}::ng-deep .dmp-item-list mat-expansion-panel-header mat-panel-title{width:100%}::ng-deep .dmp-item-list mat-expansion-panel-header mat-panel-title .item{width:100%}.group-header{display:flex}.group-header mat-icon{margin-left:10px}.layer-selector-body-wrapper{position:absolute;left:1em;top:10em;z-index:1000;max-width:calc(100vw - 8em);display:flex;flex-direction:column;transition:width .3s ease,max-width .3s ease;border-radius:5px}.layer-selector-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:move;z-index:1001}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons{justify-content:space-between}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .icon-left{order:1;margin-right:auto}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .toggle-icon{order:3}.layer-selector-body-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}.layer-selector-body-wrapper.collapsed .layer-selector-body{display:none}.layer-selector-body-wrapper.collapsed .drag-handle-selector{width:100%;min-width:100%;box-sizing:border-box}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content{width:100%}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons{width:100%;justify-content:space-between;gap:6px}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon{font-size:18px!important;flex-shrink:0}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.icon-left{cursor:default!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.toggle-icon{cursor:pointer!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.toggle-icon:hover{color:#d3d3d3!important}.layer-selector-body-wrapper .ol-control{border-radius:0}.layer-selector-body-wrapper .group-header{color:#fff;padding:4px 14px}@media (max-width: 767px){.layer-selector-body-wrapper{right:.5em;bottom:4em;max-width:calc(100vw - 7em);left:.5em;width:calc(100vw - 7em)}.layer-selector-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}@media (min-width: 768px) and (max-width: 1024px){.layer-selector-body-wrapper{right:3.5em;bottom:.5em;max-width:calc(100vw - 2em)}.layer-selector-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}.drag-handle-selector{display:flex;justify-content:flex-end;border-radius:5px 5px 0 0;padding:0 2px;cursor:move;background:#4c4d51}.drag-handle-content,.drag-handle-icons{display:flex;align-items:center;width:100%}.drag-handle-icons mat-icon{color:#fff;font-size:18px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-left{cursor:default!important}.toggle-icon{cursor:pointer!important}.toggle-icon:hover{color:#d3d3d3!important}::ng-deep .layer-selector-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:#4c4d51;box-shadow:0 4px 20px #00000026;width:100%;max-width:100%;max-height:317px;min-height:120px;overflow-y:auto}::ng-deep .layer-selector-body::-webkit-scrollbar{width:12px}::ng-deep .layer-selector-body::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .layer-selector-body::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .layer-selector-body::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .layer-selector-body::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .layer-selector-body::-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::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .layer-selector-body::-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::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}@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:#6d6f73}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-text-field-wrapper:hover{box-shadow:none!important}::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;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:#4c4d51!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:#ffffff1a!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{cursor:pointer;color:#e5281a}::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:#4d4f55}@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:move;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 .layer-info{cursor:pointer;color:#dfca0e;font-size:16px;width:16px;height:16px;flex-shrink:0;transition:all .2s ease;padding:2px;border-radius:50%}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left .layer-info{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left .layer-info:hover{color:#ccb913}::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:move}@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:#e5281a;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:#e5281a;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{cursor:pointer;color:#e5281a}.add-option{color:#4caf50}.add-option:hover{color:#37923a}::ng-deep .layer-selector-body .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}\n"] }]
         }], propDecorators: { contentBody: [{
                 type: ViewChild,
                 args: ['layerSelectorBody', { static: false }]
+            }], dmpDialog: [{
+                type: ViewChild,
+                args: ['dmpDialog']
             }], map: [{
                 type: Input
             }], profile: [{
@@ -822,7 +1191,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 class CurrentItemsService {
     constructor() {
         const dt = new Date();
-        console.log("🚀 ~ CurrentItemsService ~ constructor ~ dt:", dt);
     }
     _map;
     get map() { return this._map; }
@@ -1011,7 +1379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
         }], ctorParameters: () => [{ type: DrawLayerSourceService }] });
 
 class GeometrySplitService {
-    geoJsonFormat = new GeoJSON();
+    geoJsonFormat = new GeoJSON$1();
     _featureHelper = inject(FeatureHelperService);
     /**
      * Split polygons in a vector source using a buffered LineString.
@@ -1076,7 +1444,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class ZoomService {
     _currentItems = inject(CurrentItemsService);
+    _wktFormat = new WKT();
     zoomToFeatures(features) {
+        if (!Array.isArray(features)) {
+            this.zoomToFeatures([this._ensureFeature(features)]);
+            return;
+        }
         const extent = features.filter(f => !!f && f.getGeometry()).reduce((acc, feature) => {
             return extend(acc, feature.getGeometry().getExtent());
         }, createEmpty());
@@ -1091,6 +1464,15 @@ class ZoomService {
             maxZoom: maxZoom
         });
     }
+    _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: ZoomService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ZoomService });
 }
@@ -1220,7 +1602,7 @@ class MergeFeaturesService {
     _interactionHelper = inject(InteractionHelperService);
     _drawLayerService = inject(DrawLayerSourceService);
     _selectedMergeFeature;
-    formatter = new GeoJSON();
+    formatter = new GeoJSON$1();
     _formatterOptions = { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:25832' };
     _selectFilter(f, typeId) {
         if (this._featureHelper.isLocked(f)) {
@@ -1332,15 +1714,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             type: Injectable
         }], ctorParameters: () => [] });
 
+class ConfirmDialogComponent {
+    dialogRef;
+    data;
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    choose(choice) {
+        this.dialogRef.close(choice);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", ngImport: i0, template: "\n@if(data.title) {\n  <h2 mat-dialog-title>{{ data.title }}</h2>\n}\n<mat-dialog-content>\n  <p>{{ data.message }}</p>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <!-- Sekund\u00E6r handling -->\n   @if(data.secondaryText) {\n     <button mat-button (click)=\"choose('secondary')\">\n       {{ data.secondaryText }}\n     </button>\n   }\n\n  <!-- Prim\u00E6r handling -->\n  <button mat-raised-button color=\"primary\" (click)=\"choose('primary')\">\n    {{ data.primaryText }}\n  </button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.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   @if(data.secondaryText) {\n     <button mat-button (click)=\"choose('secondary')\">\n       {{ data.secondaryText }}\n     </button>\n   }\n\n  <!-- Prim\u00E6r handling -->\n  <button mat-raised-button color=\"primary\" (click)=\"choose('primary')\">\n    {{ data.primaryText }}\n  </button>\n</mat-dialog-actions>\n" }]
+        }], ctorParameters: () => [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }] });
+
+class ConfirmDialogService {
+    dialog;
+    constructor(dialog) {
+        this.dialog = dialog;
+    }
+    open(data) {
+        const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+            width: '400px',
+            disableClose: !!data.disableClose,
+            data
+        });
+        return dialogRef.afterClosed();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmDialogService, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [{ type: i1$3.MatDialog }] });
+
 class CenterPointService {
     _centerPointProperty = '_centerpoint';
     _settingsHelper = inject(KomponentSettingsHelperService);
     _current = inject(CurrentItemsService);
     _drawLayerService = inject(DrawLayerSourceService);
     _interactionHelper = inject(InteractionHelperService);
-    _geoJson = new GeoJSON();
-    _snackbar = inject(MatSnackBar);
+    _geoJson = new GeoJSON$1();
     _featureHelper = inject(FeatureHelperService);
+    _confirmDialog = inject(ConfirmDialogService);
     handleFeatureDeleted(featureId) {
         const centerFeature = this._drawLayerService.source.getFeatures().find(f => f.get('_parentPolyId') == featureId);
         if (centerFeature) {
@@ -1369,7 +1793,10 @@ class CenterPointService {
                         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 });
+                            this._confirmDialog.open({ message: 'Centerpunktet skal være inde i en flade', primaryText: 'Ok', title: 'Advarsel' }).subscribe({
+                                next: () => { return false; }
+                            });
+                            // 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                        
@@ -1402,54 +1829,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             type: Injectable
         }] });
 
-class ConfirmDialogComponent {
-    dialogRef;
-    data;
-    constructor(dialogRef, data) {
-        this.dialogRef = dialogRef;
-        this.data = data;
-    }
-    choose(choice) {
-        this.dialogRef.close(choice);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", ngImport: i0, template: "\n@if(data.title) {\n  <h2 mat-dialog-title>{{ data.title }}</h2>\n}\n<mat-dialog-content>\n  <p>{{ data.message }}</p>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <!-- Sekund\u00E6r handling -->\n  <button mat-button (click)=\"choose('secondary')\">\n    {{ data.secondaryText }}\n  </button>\n\n  <!-- Prim\u00E6r handling -->\n  <button mat-raised-button color=\"primary\" (click)=\"choose('primary')\">\n    {{ data.primaryText }}\n  </button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-confirm-dialog', imports: [CommonModule, MatDialogModule, MatButtonModule, MatDialogTitle, MatDialogContent, MatDialogActions], template: "\n@if(data.title) {\n  <h2 mat-dialog-title>{{ data.title }}</h2>\n}\n<mat-dialog-content>\n  <p>{{ data.message }}</p>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n  <!-- Sekund\u00E6r handling -->\n  <button mat-button (click)=\"choose('secondary')\">\n    {{ data.secondaryText }}\n  </button>\n\n  <!-- Prim\u00E6r handling -->\n  <button mat-raised-button color=\"primary\" (click)=\"choose('primary')\">\n    {{ data.primaryText }}\n  </button>\n</mat-dialog-actions>\n" }]
-        }], ctorParameters: () => [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [MAT_DIALOG_DATA]
-                }] }] });
-
-class ConfirmDialogService {
-    dialog;
-    constructor(dialog) {
-        this.dialog = dialog;
-    }
-    open(data) {
-        const dialogRef = this.dialog.open(ConfirmDialogComponent, {
-            width: '400px',
-            disableClose: !!data.disableClose,
-            data
-        });
-        return dialogRef.afterClosed();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmDialogService, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmDialogService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmDialogService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$3.MatDialog }] });
-
 class OverlapService {
     _drawLayerService = inject(DrawLayerSourceService);
     _featureHelper = inject(FeatureHelperService);
     _snackbar = inject(MatSnackBar);
     _confirmService = inject(ConfirmDialogService);
-    _geoJsonFormat = new GeoJSON();
+    _geoJsonFormat = new GeoJSON$1();
     _current = inject(CurrentItemsService);
     EPSILON = 0.1;
     handleOverlaps(features) {
@@ -1669,11 +2054,11 @@ class OverlapService {
         return result;
     }
     _olToGeoJSON(geometry) {
-        const geoJson = new GeoJSON();
+        const geoJson = new GeoJSON$1();
         return geoJson.writeGeometryObject(geometry.clone().transform('EPSG:25832', 'EPSG:4326'));
     }
     _geoJSONToOl(geo) {
-        const geoJson = new GeoJSON();
+        const geoJson = new GeoJSON$1();
         return geoJson.readGeometry(geo).transform('EPSG:4326', 'EPSG:25832');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: OverlapService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -1891,21 +2276,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
         }] });
 
 class SearchProviderService {
-    _cancelSearch = new Subject();
+    _cancelSearchSubject = new Subject();
+    _cancelSearch = this._cancelSearchSubject.asObservable();
     _current = inject(CurrentItemsService);
     searchProviders = [];
     search(searchString, geometry) {
-        this._cancelSearch.next('');
+        this._cancelSearchSubject.next('');
         const maxSearchResults = this._current.profile?.searchResultLimit ?? 8;
-        let combinedSearch = new Observable();
-        this.searchProviders.forEach(searchProvider => {
-            const search = searchProvider
-                .search(searchString, geometry, maxSearchResults)
-                .pipe(takeUntil(this._cancelSearch.asObservable()))
-                .pipe(take(maxSearchResults));
-            combinedSearch = combinedSearch ? combinedSearch.pipe(mergeWith(search)) : search;
-        });
-        return combinedSearch;
+        const searches = this.searchProviders.map(sp => sp.search(searchString, geometry, maxSearchResults)).flatMap(sp => sp);
+        return forkJoin(searches);
     }
     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 });
@@ -1951,6 +2330,14 @@ class CowiService {
         const streetViewUrl = `https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${lat},${lon}`;
         window.open(streetViewUrl);
     }
+    openGoogleStreetViewFromPoint(coordinate) {
+        if (!coordinate) {
+            return;
+        }
+        const [lon, lat] = toLonLat(coordinate, 'EPSG:25832');
+        const streetViewUrl = `https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${lat},${lon}`;
+        window.open(streetViewUrl);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CowiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: CowiService });
 }
@@ -1989,11 +2376,9 @@ class ToolboxComponent {
     _layoutService = inject(LayoutService);
     _searchService = inject(SearchProviderService);
     _POSITION_STORAGE_KEY = 'toolbox_position';
-    // private _current = inject(CurrentItemsService);
     _originalMapWidth = 0;
     _originalMapHeight = 0;
     pointClickKey;
-    skraafotoClickKey;
     drawInteraction;
     mapWidth = 0;
     mapHeight = 0;
@@ -2043,7 +2428,8 @@ class ToolboxComponent {
     snap = false;
     showInputWKT = false;
     showGeometryTypes = false;
-    filteredGeometryTypeSettings = [];
+    drawItems;
+    selectedDrawItem;
     WKTString;
     activeMode = null;
     activateShowInputWKT() {
@@ -2060,7 +2446,6 @@ class ToolboxComponent {
             this._clearAllInteractions();
             this.activeMode = 'search-feature';
             this.showGeometryTypes = true;
-            this._updateFilteredGeometryTypeSettings('Polygon');
             this._enablePointSearch();
         }
         else {
@@ -2083,9 +2468,15 @@ class ToolboxComponent {
         }
     }
     openCowiPage() {
-        this._clearAllInteractions();
-        this.activeMode = 'cowi';
-        this._cowiService.openCowiPageFromCenterPoint(this.settings.cowiUrlTemplate, this.map);
+        if (!this.pointClickKey) {
+            this._clearAllInteractions();
+            this.activeMode = 'cowi';
+            this.pointClickKey = this.map.on('click', evt => {
+                this._cowiService.openCowiPageFromPoint(this.settings.cowiUrlTemplate, evt.coordinate);
+                unByKey(this.pointClickKey);
+                this.pointClickKey = undefined;
+            });
+        }
     }
     openSkraafotoPage() {
         if (!this.pointClickKey) {
@@ -2099,9 +2490,15 @@ class ToolboxComponent {
         }
     }
     openGoogleStreetviewPage() {
-        this._clearAllInteractions();
-        this.activeMode = 'streetview';
-        this._cowiService.openGoogleStreetViewFromCenterPoint(this.map);
+        if (!this.pointClickKey) {
+            this._clearAllInteractions();
+            this.activeMode = 'streetview';
+            this.pointClickKey = this.map.on('click', evt => {
+                this._cowiService.openGoogleStreetViewFromPoint(evt.coordinate);
+                unByKey(this.pointClickKey);
+                this.pointClickKey = undefined;
+            });
+        }
     }
     togglePolygonSearch() {
         this._disablePointSearch();
@@ -2130,13 +2527,6 @@ class ToolboxComponent {
             this.activeMode = null;
         }
     }
-    _updateFilteredGeometryTypeSettings(geomType) {
-        this.filteredGeometryTypeSettings = this.settings.geometryTypeSettings.filter(setting => setting.availableGeometryTypes?.includes(geomType));
-        if (this.filteredGeometryTypeSettings.length === 1) {
-            this.selectedGeometrySetting = this.filteredGeometryTypeSettings[0];
-            this.settingsChanged();
-        }
-    }
     _disablePolygonSearch() {
         if (this.drawInteraction) {
             this.map.removeInteraction(this.drawInteraction);
@@ -2167,7 +2557,7 @@ class ToolboxComponent {
         if (!item.wkt) {
             return;
         }
-        if (!this.selectedGeometrySetting) {
+        if (!this.selectedDrawItem) {
             return;
         }
         const wktFormat = new WKT();
@@ -2176,13 +2566,13 @@ class ToolboxComponent {
         if (!geomType) {
             return;
         }
-        combineLatest([this._settingsHelper.getStyle(this.selectedGeometrySetting?.style, this.profile.styleRepositoryWorkspace, this.profile.styleRepositoryGeoserver, geomType),
+        combineLatest([this._settingsHelper.getStyle(this.selectedDrawItem?.style, this.profile.styleRepositoryWorkspace, this.profile.styleRepositoryGeoserver, geomType),
             this._overlap.splitByFeature(feature)])
             .subscribe({
             next: ([style, features]) => {
                 this._undoRedo.enable();
                 features.forEach(feature => {
-                    this._featureHelper.setTypeId(feature, this.selectedGeometrySetting?.typeId || '');
+                    this._featureHelper.setTypeId(feature, this.selectedDrawItem?.typeId || '');
                     this._featureHelper.setId(feature);
                     feature.setStyle(style);
                     this._drawLayerService.source.addFeature(feature);
@@ -2203,7 +2593,7 @@ class ToolboxComponent {
         if (!item.wkt) {
             return;
         }
-        if (!this.selectedGeometrySetting) {
+        if (!this.selectedDrawItem) {
             return;
         }
         const wktFormat = new WKT();
@@ -2212,13 +2602,13 @@ class ToolboxComponent {
         if (!geomType) {
             return;
         }
-        combineLatest([this._settingsHelper.getStyle(this.selectedGeometrySetting?.style, this.profile.styleRepositoryWorkspace, this.profile.styleRepositoryGeoserver, geomType),
+        combineLatest([this._settingsHelper.getStyle(this.selectedDrawItem?.style, this.profile.styleRepositoryWorkspace, this.profile.styleRepositoryGeoserver, geomType),
             this._overlap.splitByFeature(feature, true)])
             .subscribe({
             next: ([style, features]) => {
                 this._undoRedo.enable();
                 features.forEach(feature => {
-                    this._featureHelper.setTypeId(feature, this.selectedGeometrySetting?.typeId || '');
+                    this._featureHelper.setTypeId(feature, this.selectedDrawItem?.typeId || '');
                     this._featureHelper.setId(feature);
                     feature.setStyle(style);
                     this._drawLayerService.source.addFeature(feature);
@@ -2227,7 +2617,7 @@ class ToolboxComponent {
         });
     }
     _bufferGeometry(geometry, bufferMeters) {
-        const format = new GeoJSON();
+        const format = new GeoJSON$1();
         const precisionModel = new PrecisionModel(); // floating precision
         const geometryFactory = new GeometryFactory(precisionModel);
         const reader = new GeoJSONReader(geometryFactory);
@@ -2241,26 +2631,6 @@ class ToolboxComponent {
         const bufferedGeoJson = writer.write(bufferedJstsGeom);
         return format.readGeometry(bufferedGeoJson);
     }
-    settingsChanged(evt) {
-        this._clearAllInteractions();
-        setTimeout(() => {
-            switch (this.activeMode) {
-                case 'draw-point': {
-                    this._startDraw('Point');
-                    break;
-                }
-                case 'draw-polygon': {
-                    this._startDraw('Polygon');
-                    break;
-                }
-                case 'draw-linestring': {
-                    this._startDraw('LineString');
-                    break;
-                }
-                default: break;
-            }
-        }, 300);
-    }
     undo() {
         this._undoRedo.undo();
     }
@@ -2361,7 +2731,7 @@ class ToolboxComponent {
         this._interactionHelper.setAsTemp(clipHoleDraw);
         clipHoleDraw.on('drawend', evt => {
             const overlappingFeatures = this._drawLayerService.source.getFeatures().filter(f => !this._featureHelper.isLocked(f) && f.getGeometry()?.intersectsExtent(evt.feature.getGeometry().getExtent()));
-            const geoJsonFormat = new GeoJSON();
+            const geoJsonFormat = new GeoJSON$1();
             const holeGeoJson = geoJsonFormat.writeFeatureObject(evt.feature);
             overlappingFeatures.forEach(f => {
                 const overlappingFeatureGeoJson = geoJsonFormat.writeFeatureObject(f);
@@ -2409,7 +2779,7 @@ class ToolboxComponent {
         this.map.addInteraction(splitInteraction);
         this._addSnap();
     }
-    startDrawPointUrl(url) {
+    startDrawPointUrl(url, typeId) {
         this._clearAllInteractions();
         const style = new Style({
             image: new Icon({
@@ -2425,36 +2795,25 @@ class ToolboxComponent {
             source: new VectorSource(),
             style
         });
-        this.activeMode = 'draw-point';
-        this._updateFilteredGeometryTypeSettings('Point');
         this.showGeometryTypes = true;
         drawInteraction.on('drawend', evt => {
             const feature = evt.feature.clone();
             this._featureHelper.setId(feature);
-            this._featureHelper.setTypeId(feature, this.selectedGeometrySetting.typeId);
+            this._featureHelper.setTypeId(feature, typeId);
             feature.setStyle(style);
             this._drawLayerService.source.addFeature(feature);
         });
         this._interactionHelper.setAsTemp(drawInteraction);
         this.map.addInteraction(drawInteraction);
     }
-    startDrawPoint() {
-        this._startDraw('Point');
-        this.showGeometryTypes = false;
-        this._updateFilteredGeometryTypeSettings('Point');
-        this.showGeometryTypes = true;
-    }
-    startDrawLineString() {
-        this._startDraw('LineString');
-        this.showGeometryTypes = false;
-        this._updateFilteredGeometryTypeSettings('LineString');
-        this.showGeometryTypes = true;
-    }
-    startDrawPolygon() {
-        this._startDraw('Polygon');
-        this.showGeometryTypes = false;
-        this._updateFilteredGeometryTypeSettings('Polygon');
-        this.showGeometryTypes = true;
+    startDraw() {
+        this.activeMode = 'draw';
+        // Set the first item as default
+        if (!this.selectedDrawItem) {
+            this.selectedDrawItem = this.drawItems[0];
+        }
+        // Actually start drawing immediately
+        this._doStartDraw(this.selectedDrawItem);
     }
     _deleteSelect;
     get deleteSelect() {
@@ -2472,10 +2831,8 @@ class ToolboxComponent {
         });
         return this._deleteSelect;
     }
-    // private _deleting: boolean = false;
     startDelete() {
         this._clearAllInteractions();
-        // this._deleting = true;        
         this.activeMode = 'delete';
         this.map.addInteraction(this.deleteSelect);
         this._addSnap();
@@ -2511,7 +2868,7 @@ class ToolboxComponent {
         if (!item.wkt) {
             return;
         }
-        if (!this.selectedGeometrySetting) {
+        if (!this.selectedDrawItem) {
             return;
         }
         const wktFormat = new WKT();
@@ -2524,13 +2881,13 @@ class ToolboxComponent {
         if (!geomType) {
             return;
         }
-        combineLatest([this.handleFeatureValidation(feature), this._settingsHelper.getStyle(this.selectedGeometrySetting?.style, this.profile.styleRepositoryWorkspace, this.profile.styleRepositoryGeoserver, geomType)])
+        combineLatest([this.handleFeatureValidation(feature), this._settingsHelper.getStyle(this.selectedDrawItem.style, this.profile.styleRepositoryWorkspace, this.profile.styleRepositoryGeoserver, geomType)])
             .subscribe({
             next: ([validationResult, featureStyle]) => {
                 if (validationResult) {
                     validationResult.forEach(feature => {
                         feature.setStyle(featureStyle);
-                        this._featureHelper.setTypeId(feature, this.selectedGeometrySetting?.typeId || '');
+                        this._featureHelper.setTypeId(feature, this.selectedDrawItem?.typeId || '');
                         this._featureHelper.setId(feature);
                     });
                     this._overlap.handleOverlaps(validationResult).pipe(filter(f => !!f)).subscribe({
@@ -2620,19 +2977,9 @@ class ToolboxComponent {
         this._interactionHelper.setAsTemp(modify);
         this.map.addInteraction(modify);
     }
-    _startDraw(geomType) {
+    _startDraw(geomType, style, typeId) {
         this._clearAllInteractions();
-        // Set the active mode after clearing
-        if (geomType === 'Polygon')
-            this.activeMode = 'draw-polygon';
-        else if (geomType === 'LineString')
-            this.activeMode = 'draw-linestring';
-        else if (geomType === 'Point')
-            this.activeMode = 'draw-point';
-        if (!this.selectedGeometrySetting) {
-            return;
-        }
-        this._settingsHelper.getStyle(this.selectedGeometrySetting.style, this.profile.styleRepositoryWorkspace, this.profile.styleRepositoryGeoserver, geomType)
+        this._settingsHelper.getStyle(style, this.profile.styleRepositoryWorkspace, this.profile.styleRepositoryGeoserver, geomType)
             .subscribe({
             next: style => {
                 const drawInteraction = new Draw({
@@ -2648,7 +2995,7 @@ class ToolboxComponent {
                             next: (result) => {
                                 if (result) {
                                     result.forEach(feature => {
-                                        this._featureHelper.setTypeId(feature, this.selectedGeometrySetting?.typeId || '');
+                                        this._featureHelper.setTypeId(feature, typeId);
                                         this._featureHelper.setId(feature);
                                         feature.setStyle(style);
                                     });
@@ -2673,7 +3020,7 @@ class ToolboxComponent {
                         });
                     }
                     else {
-                        this._featureHelper.setTypeId(evt.feature, this.selectedGeometrySetting?.typeId || '');
+                        this._featureHelper.setTypeId(evt.feature, typeId);
                         this._featureHelper.setId(evt.feature);
                         evt.feature.setStyle(style);
                         this._undoRedo.enable();
@@ -2687,7 +3034,7 @@ class ToolboxComponent {
             }
         });
     }
-    compareGeometrySetting = (g1, g2) => g1 && g2 && g1.typeId === g2.typeId;
+    // compareGeometrySetting = (g1: GeometryTypeSetting, g2: GeometryTypeSetting) => g1 && g2 && g1.typeId === g2.typeId;
     _areaSource = new VectorSource();
     _areaLayer = new VectorLayer({
         source: this._areaSource,
@@ -2765,7 +3112,6 @@ class ToolboxComponent {
         return this._active;
     }
     constructor() {
-        // TODO: Move out from constructor
         // In order to add the distance to each segment of the distance measure feature, we need some extra handling like this.
         this._distanceMeasureDraw.on('drawstart', (evt) => {
             const sketch = evt.feature;
@@ -2809,12 +3155,28 @@ class ToolboxComponent {
             unByKey(this.pointClickKey);
         }
         this._interactionHelper.clearTempFromMap();
-        this._showInfo.disable();
-        this._undoRedo.enable();
     }
     ngOnInit() {
         this._originalMapHeight = this.map.getSize()[1];
         this._originalMapWidth = this.map.getSize()[0];
+        this.drawItems = [];
+        (this.settings.geometryTypeSettings ?? []).filter(f => f.availableGeometryTypes).forEach(geomSetting => {
+            geomSetting.availableGeometryTypes.forEach(geomType => {
+                if (geomType === 'Point' && geomSetting.icons && geomSetting.icons.length > 0) {
+                    geomSetting.icons.forEach(i => {
+                        this.drawItems.push({ name: geomSetting.typeName, iconUrl: i, style: geomSetting.style, typeId: geomSetting.typeId, geomType });
+                    });
+                }
+                else {
+                    this.drawItems.push({
+                        name: `${geomSetting.typeName}${(geomSetting.availableGeometryTypes.length > 1 ? `(${geomType})` : '')}`,
+                        typeId: geomSetting.typeId,
+                        style: geomSetting.style,
+                        geomType
+                    });
+                }
+            });
+        });
         if (this.settings.geometryTypeSettings && this.settings.geometryTypeSettings.length === 1) {
             this.selectedGeometrySetting = this.settings.geometryTypeSettings[0];
         }
@@ -2835,15 +3197,32 @@ class ToolboxComponent {
         };
         this._savePosition();
     }
+    drawItemChanged(item) {
+        if (this.activeMode === 'draw')
+            this._doStartDraw(item.value);
+    }
+    _doStartDraw(item) {
+        if (item.iconUrl) {
+            this.startDrawPointUrl(item.iconUrl, item.typeId);
+        }
+        else {
+            this._startDraw(item.geomType, item.style, item.typeId);
+        }
+    }
     _loadPosition() {
         try {
             const savedPosition = localStorage.getItem(this._POSITION_STORAGE_KEY);
             if (savedPosition) {
                 this.dragPosition = JSON.parse(savedPosition);
             }
-            else if (this.profile) {
+            else if (this.profile?.toolboxInitialPosition) {
                 this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this._POSITION_STORAGE_KEY, this.profile.toolboxInitialPosition);
             }
+            else {
+                // Default position for toolbox
+                this.dragPosition = { x: 29, y: 26 };
+                this._savePosition();
+            }
         }
         catch (error) {
             console.error('Error loading position from localStorage:', error);
@@ -2997,20 +3376,6 @@ class ToolboxComponent {
             this._printHelper.setVisibiltyOnDOMElements(htmlElement, true);
         });
     }
-    // private _setVisibiltyOnDOMElements(baseElement: HTMLElement, visible: boolean): void {
-    //     let visibilityValue = 'hidden';
-    //     if (visible) { visibilityValue = 'visible'; }
-    //     const activeobjects = baseElement.querySelector('activeobjects') as HTMLElement;
-    //     if (activeobjects) { activeobjects!.style.visibility = visibilityValue; }
-    //     const zoom = baseElement.querySelector('.ol-zoom') as HTMLElement;
-    //     if (zoom) { zoom!.style.visibility = visibilityValue; }
-    //     const mapToolbox = baseElement.querySelector('map-toolbox') as HTMLElement;
-    //     if (mapToolbox) { mapToolbox!.style.visibility = visibilityValue; }
-    //     const mousePosition = baseElement.querySelector('.ol-mouse-position') as HTMLElement;
-    //     if (mousePosition) { mousePosition!.style.visibility = visibilityValue; }
-    //     const layerSelector = baseElement.querySelector('.layer-selector-body-wrapper') as HTMLElement;
-    //     if (layerSelector) { layerSelector!.style.visibility = visibilityValue; }
-    // }
     startSelectFeatureHighlight() {
         if (this.activeMode === 'select-highlight') {
             return;
@@ -3054,6 +3419,7 @@ class ToolboxComponent {
     }
     printDraw;
     _addPrintDrawToolInteraction() {
+        this._clearAllInteractions();
         if (this.active === 'PrintDraw') {
             switch (this.printDrawTool) {
                 case 'Arrow':
@@ -3166,11 +3532,11 @@ class ToolboxComponent {
         }));
     }
     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" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toolbox-wrapper\" \n     cdkDrag \n     cdkDragBoundary=\".map-container\"\n     [cdkDragFreeDragPosition]=\"dragPosition\"\n     (cdkDragEnded)=\"onDragEnded($event)\">\n     <div class=\"drag-handle-toolbox\" cdkDragHandle>\n        <mat-icon class=\"left-icon\">handyman</mat-icon>\n    \n        <div class=\"right-icons\">\n            <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n            <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n                {{ collapsed ? 'flip_to_front' : 'remove' }}\n            </mat-icon>\n        </div>\n    </div>\n    \n    <div class=\"toolbox-container\" [class.collapsed]=\"collapsed\">\n        @if(!collapsed) {\n            <div class=\"toolbox-content\">\n                <div class=\"all-tools-container\">\n                    <div class=\"main-tools\">\n                        @if(!settings?.undoDisabled) {\n                            <img \n                                [src]=\"undoIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"undo()\" \n                                matTooltip=\"Fortryd\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Undo\">\n\n                            <img \n                                [src]=\"redoIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"redo()\" \n                                matTooltip=\"Gendan\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Redo\">\n                        }\n                        <img \n                            [src]=\"infoBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startShowInfo()\" \n                            [class.active]=\"activeMode === 'show-info'\"\n                            matTooltip=\"Vejledning til anvendelse af systemet\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Vejledning til anvendelse af systemet\">\n                        <img \n                            [src]=\"sogPunktBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"togglePointSearch()\" \n                            [class.active]=\"activeMode === 'search-point'\"\n                            matTooltip=\"S\u00F8g punkt\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"S\u00F8g punkt\">\n                            \n                        <img \n                            [src]=\"sogPolygonBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"togglePolygonSearch()\" \n                            [class.active]=\"activeMode === 'search-polygon'\"\n                            matTooltip=\"S\u00F8g polygon\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"S\u00F8g polygon\">\n                        <img \n                            [src]=\"openCowiPageBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            [class.active]=\"activeMode === 'cowi'\"\n                            (click)=\"openCowiPage()\" \n                            matTooltip=\"COWI\u00B4s Gadefoto\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"COWI\u00B4s Gadefoto\">\n                        <img \n                            [src]=\"skrafotoBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            [class.active]=\"activeMode === 'skrafoto'\"\n                            (click)=\"openSkraafotoPage()\" \n                            matTooltip=\"Skr\u00E5foto\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Skr\u00E5foto\">\n            \n                        <img \n                            [src]=\"streetViewBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            [class.active]=\"activeMode === 'streetview'\"\n                            (click)=\"openGoogleStreetviewPage()\" \n                            matTooltip=\"Google Streetview\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Google Streetview\">\n                        <img \n                            [src]=\"fremhaevBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            [class.active]=\"activeMode === 'select-highlight'\"\n                            (click)=\"startSelectFeatureHighlight()\" \n                            matTooltip=\"Vejledning til anvendelse af systemet\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Fremh\u00E6v\">\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=\"V\u00E6lg og vis dokumenter fra liste\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"V\u00E6lg og vis dokumenter fra liste\">\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 i flade\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Klip hul\">\n                        }\n                        @if(settings.splitEnabled) {\n                            <img \n                                [src]=\"splitIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'split'\"\n                                (click)=\"split()\" \n                                matTooltip=\"Sk\u00E6r over\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Sk\u00E6r over\">\n                        }\n                        @if(settings.changeTypeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                [class.active]=\"activeMode === 'change-type'\" \n                                (click)=\"startChangeType()\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Skift type\" \n                                matTooltipPosition=\"below\">\n                                find_replace\n                            </mat-icon>\n                        }\n                        @if(settings.mergeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                (click)=\"startMergeFeatures()\" \n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Saml flader\" \n                                [class.active]=\"activeMode === 'merge-features'\">\n                                merge\n                            </mat-icon>\n                        }\n                        @if(settings.centerPoint) {\n                            <mat-icon\n                                (click)=\"setCenterPoint()\"\n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"S\u00E6t centerpunkt\" \n                                [class.active]=\"activeMode === 'center-point'\"\n                            >adjust</mat-icon>\n                        }\n                    </div>\n                    <div class=\"geometry-tools\">\n                        <img \n                            [src]=\"featureSearchIconBase64\" \n                            [class.active]=\"activeMode === 'search-feature'\"\n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"toggleFeatureSearch()\" \n                            matTooltip=\"Udpegede objekter\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Punkt\">\n\n                        <img \n                            [src]=\"polygonIconBase64\" \n                            [class.active]=\"activeMode === 'draw-polygon'\"\n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startDrawPolygon()\" \n                            matTooltip=\"Polygon\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Polygon\">\n                        <img \n                            [src]=\"lineStringIconBase64\" \n                            [class.active]=\"activeMode === 'draw-linestring'\"\n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startDrawLineString()\" \n                            matTooltip=\"LineString\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"LineString\">\n                        \n                        @if(selectedGeometrySetting && selectedGeometrySetting.icons && selectedGeometrySetting.icons.length > 0) {\n                            @for(iconUrl of selectedGeometrySetting.icons;track iconUrl) {\n                                <img \n                                    [src]=\"iconUrl\" \n                                    [class.active]=\"activeMode === 'draw-point'\"\n                                    class=\"compact-icon custom-image-icon\"\n                                    (click)=\"startDrawPointUrl(iconUrl)\" \n                                    matTooltip=\"Punkter\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Punkter\">}\n                        } @else {\n                            <img \n                                [src]=\"pointIconBase64\" \n                                [class.active]=\"activeMode === 'draw-point'\"\n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startDrawPoint()\" \n                                matTooltip=\"Punkter\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Punkter\">\n                        }\n                        <img \n                            [src]=\"wktIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            [class.active]=\"activeMode === 'wkt-input'\"\n                            (click)=\"activateShowInputWKT()\" \n                            matTooltip=\"Inds\u00E6t WKT streng for at importere elementet\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"WKT\">\n                    </div>\n                    <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n                    <div class=\"measurement-print-tools\">\n                        <div class=\"measurement-tools\">\n                            @if (deleteEnabled) {\n                                <img \n                                    [src]=\"deleteIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'delete'\"\n                                    (click)=\"startDelete()\" \n                                    matTooltip=\"Slet element\" \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\u00E5l 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\u00E5l 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 === 'PrintDraw'\"\n                                    (click)=\"startDrawMode()\" \n                                    matTooltip=\"Tegnev\u00E6rkt\u00F8j til print\" \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                                matTooltip=\"Sk\u00E6rmprint af kortet\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                [src]=\"printBase64\" \n                                class=\"compact-icon custom-image-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            @if (showGeometryTypes && filteredGeometryTypeSettings.length > 0) {\n                <mat-select class=\"geometry-selector\" (selectionChange)=\"settingsChanged($event)\" [(ngModel)]=\"selectedGeometrySetting\" [compareWith]=\"compareGeometrySetting\">\n                    @for (setting of filteredGeometryTypeSettings; track setting) {\n                        <mat-option [value]=\"setting\">{{setting.typeName}}</mat-option>\n                    }\n                </mat-select>            \n            }\n        }\n    </div>\n    @if (activeMode === 'search-feature' && filteredResults.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <div class=\"buffer-item\">\n                <mat-label>Buffer</mat-label>\n                <input matInput type=\"number\" name=\"buffer\" [(ngModel)]=\"bufferInMeters\">\n                <mat-label>m</mat-label>\n            </div>\n            <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n                <span class=\"result-title\">\n                {{ result.title }} ({{result.items.length}} af {{ result.total }})\n                </span>\n                <div  (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                    <div class=\"item-right\">\n                        <img \n                            [src]=\"objectSearchCopyIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"addToActiveObjectsList(item, $event)\" \n                            matTooltip=\"Kopier\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Kopier\">\n                        <img \n                            [src]=\"objectSearchCutIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"cutBySearchedObject(item, $event)\" \n                            matTooltip=\"Fjern\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Fjern\">\n                        <img \n                            [src]=\"objectSearchCutIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"splitBySearchedObject(item, $event)\" \n                            matTooltip=\"Opsk\u00E6r\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Opsk\u00E6r\">\n                        <img \n                            [src]=\"objectSearchCopyWithBufferIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"addToActiveObjectsList(item, $event, true)\" \n                            matTooltip=\"Kopier med buffer\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Kopier med buffer\">\n                        <img \n                            [src]=\"objectSearchZoomIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"zoomSearchedObject(item, $event)\" \n                            matTooltip=\"Zoom\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Zoom\">\n                        <button\n                            (click)=\"toggleItemInfo(item, $event)\">\n                            <mat-icon class=\"button-icon\">info_outline</mat-icon>\n                        </button>\n                    </div>     \n                    @if (item.showMetadata) {\n                        <div class=\"metadata-panel\">\n                            @for(feature of item.metadata; track feature) {\n                                <div class=\"feature-item\">\n                                    <div *ngFor=\"let kv of (feature | keyvalue)\">\n                                        {{ kv.value.name }}:\n                                        <ng-container [ngSwitch]=\"kv.value.kind\">\n                                            <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n                                            <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n                                                {{ kv.key }}\n                                                <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                                            </a>\n                                            <span *ngSwitchDefault>{{ kv.value.data }}</span>\n                                        </ng-container>\n                                    </div>\n                                </div>\n                            }\n                        </div>\n                    }\n                </div>\n            </mat-option>\n        </div>\n    }\n    @if ((activeMode === \"search-point\" || activeMode === \"search-polygon\") && filteredResults.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n                <span class=\"result-title\">\n                {{ result.title }} ({{result.items.length}} af {{ result.total }})\n                </span>\n                <div  (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                 </div>\n            </mat-option>\n        </div>\n    }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;left:1em;top:10em;z-index:10;cursor:grab;max-width:95vw}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}.geometry-search-panel{position:absolute;left:0;z-index:1000;width:380px}.geometry-search-panel::-webkit-scrollbar{width:12px}.geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.geometry-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.geometry-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.geometry-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.geometry-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.geometry-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.search-result-option{display:block!important;padding:0!important;margin:0!important;background:transparent!important}.search-result-option:last-child{border-bottom:none}.search-result-option .mdc-list-item__primary-text{width:100%!important;margin:0!important;padding:0!important}.result-title{display:block;padding:8px 6px;top:0;z-index:1;font-weight:600;font-size:17px;color:#bdc1c3cc}.search-result-item{display:flex;align-items:center;padding:8px 16px;cursor:pointer;transition:background-color .15s ease}.search-result-item:hover{background:#ffffff1a}.item-left{flex:1;min-width:0}.item-header{font-size:13px;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.search-result-item.loading .item-header{background-size:200% 100%;height:16px;border-radius:4px;width:80%}.search-result-item.loading .item-header:before{display:none}.search-empty-state{padding:32px 16px;text-align:center;color:#757575}.search-empty-state .empty-icon{font-size:40px;width:40px;height:40px;color:#bdbdbd;margin-bottom:12px}.search-empty-state .empty-title{font-size:14px;font-weight:500;margin-bottom:4px}.search-empty-state .empty-subtitle{font-size:12px;color:#9e9e9e}@media (max-width: 768px){.geometry-search-panel{width:calc(100vw - 40px);max-width:400px;left:50%;transform:translate(-50%);max-height:70vh}.search-result-item{padding:8px 12px}.item-header{font-size:13px}.item-header:before{width:5px;height:5px;margin-right:8px}.result-title{padding:10px 12px;font-size:12px}}@media (max-width: 480px){.geometry-search-panel{width:calc(100vw - 32px);max-height:60vh}.search-result-item{padding:6px 10px}.item-header{font-size:12px;-webkit-line-clamp:1}.item-header:before{width:4px;height:4px;margin-right:6px}}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px;border:white;border-width:2px}::ng-deep .geometry-search-panel{border-radius:5px!important;max-height:320px!important;background:#4c4d51!important;box-shadow:0 8px 24px #00000026!important;margin-top:10px;overflow-y:auto!important;padding:8px!important;max-width:430px}::ng-deep .geometry-search-panel .buffer-item{align-items:end}::ng-deep .geometry-search-panel .buffer-item input{width:45px;margin:5px}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-wrap:wrap}::ng-deep .geometry-search-panel .search-result-item .item-left{display:flex;align-items:center;gap:3px;flex:1;min-width:0}::ng-deep .geometry-search-panel .search-result-item .item-right{display:flex;align-items:center;flex:1;justify-content:flex-end;min-width:0;margin-left:10px}::ng-deep .geometry-search-panel .search-result-item .item-right .custom-image-icon{background:#fff!important;margin-left:5px}::ng-deep .geometry-search-panel .search-result-item .item-right button{width:38px;margin-left:5px}::ng-deep .geometry-search-panel .search-result-item .metadata-panel{flex-basis:98%}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:#fff;line-height:1.5}::ng-deep .geometry-search-panel mat-label{color:#fff}.drag-handle-toolbox{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:2px 8px;cursor:grab;gap:8px;border-radius:5px 5px 0 0;color:#fff}.drag-handle-toolbox mat-icon{color:#fff;font-size:18px;width:18px;height:18px}.drag-handle-toolbox mat-icon:first-child{flex:1;text-align:left}.right-icons{display:flex;align-items:center;gap:6px}.left-icon{flex-shrink:0}.toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.toggle-icon:hover{color:#fff;background:#ffffff26}.toggle-icon:active{background:#ffffff40}:host{position:relative;display:flex;justify-content:center}:host.expanded{width:auto;min-width:320px;padding:12px}.toolbox-container{display:flex;flex-direction:column;align-items:center;width:100%;background:#4c4d51;box-shadow:#0000004d 0 1px 4px -1px;width:auto;padding:4px;gap:6px;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;flex-wrap:nowrap}.main-tools ::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:12px;font-weight:500;color:#fff}.geometry-selector{width:25%;margin-right:auto}.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-radius:6px;background:#6d6f73;transition:all .2s ease;border:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73;border:none}.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:#4c4d51!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;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;background:none;border-radius:8px;padding:3px 0}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;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}.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)!important;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:#ffffff1a;border-color:none;box-shadow:none}.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:none;color:#fff}.print-tools .compact-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985)!important;border-color:transparent}.print-tools .compact-icon.active:hover{background:#ffffff1a}.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)}.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:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}.compact-icon.active{color:#fff;background:linear-gradient(147.38deg,#0ea5e9,#075985)!important;border-color:transparent;box-shadow:0 8px 25px #667eea4d;transform:scale(1.05)}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon:hover:not(.active){color:#fff;background:color-mix(in srgb,#000 70%,transparent);box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:2px;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease,transform .2s ease}.compact-icon.custom-image-icon.active{background:#ffffff1a;border-color:none;box-shadow:none}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon.custom-image-icon:hover:not(.active){background:#ffffff1a;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.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:#6d6f73;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(147.38deg,#0ea5e9,#075985);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-radius:6px;font-size:13px;transition:all .2s ease;background:#6d6f73;border:none;color:#fff}.compact-input:focus{outline:none;background:#6d6f73;border:1px solid #97989b}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:transparent;border:none;border-radius:8px;animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:#6d6f73;border:none;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}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:#6d6f73!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}@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 0}.geometry-selector{width:30%;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:2px;min-width:24px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;letter-spacing:.2px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle{transform:scale(.9)}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToolboxComponent, isStandalone: true, selector: "map-toolbox", inputs: { map: "map", showMeasureDistance: "showMeasureDistance", showMeasureArea: "showMeasureArea", collapsed: "collapsed", settings: "settings", profile: "profile", WKTInputEnabled: "WKTInputEnabled", deleteEnabled: "deleteEnabled" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toolbox-wrapper\" \n     cdkDrag \n     cdkDragBoundary=\".map-container\"\n     [cdkDragFreeDragPosition]=\"dragPosition\"\n     (cdkDragEnded)=\"onDragEnded($event)\">\n     <div class=\"drag-handle-toolbox\" cdkDragHandle>\n        <mat-icon \n            class=\"icon-left\" \n            matTooltip=\"V\u00E6rkt\u00F8jskasse\" \n            [matTooltipShowDelay]=\"500\"\n            [matTooltipHideDelay]=\"100\" \n            matTooltipPosition=\"above\">\n            handyman\n        </mat-icon>    \n        <div class=\"right-icons\">          \n            <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n                {{ collapsed ? 'flip_to_front' : 'remove' }}\n            </mat-icon>\n        </div>\n    </div>\n    \n    <div class=\"toolbox-container\" [class.collapsed]=\"collapsed\">\n        @if(!collapsed) {\n            <div class=\"toolbox-content\">\n                <div class=\"all-tools-container\">\n                    <div class=\"main-tools\">\n                        @if(!settings?.undoDisabled) {\n                            <img \n                                [src]=\"undoIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"undo()\" \n                                matTooltip=\"Fortryd\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Undo\">\n\n                            <img \n                                [src]=\"redoIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"redo()\" \n                                matTooltip=\"Gendan\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Redo\">\n                        }\n                        <img \n                            [src]=\"infoBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startShowInfo()\" \n                            [class.active]=\"activeMode === 'show-info'\"\n                            matTooltip=\"Vejledning til anvendelse af systemet\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Vejledning til anvendelse af systemet\">\n                        <img \n                            [src]=\"sogPunktBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"togglePointSearch()\" \n                            [class.active]=\"activeMode === 'search-point'\"\n                            matTooltip=\"S\u00F8g punkt\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"S\u00F8g punkt\">\n                            \n                        <img \n                            [src]=\"sogPolygonBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"togglePolygonSearch()\" \n                            [class.active]=\"activeMode === 'search-polygon'\"\n                            matTooltip=\"S\u00F8g polygon\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"S\u00F8g polygon\">\n                        <img \n                            [src]=\"openCowiPageBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            [class.active]=\"activeMode === 'cowi'\"\n                            (click)=\"openCowiPage()\" \n                            matTooltip=\"COWI\u00B4s Gadefoto\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"COWI\u00B4s Gadefoto\">\n                        <img \n                            [src]=\"skrafotoBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            [class.active]=\"activeMode === 'skrafoto'\"\n                            (click)=\"openSkraafotoPage()\" \n                            matTooltip=\"Skr\u00E5foto\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Skr\u00E5foto\">\n            \n                        <img \n                            [src]=\"streetViewBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            [class.active]=\"activeMode === 'streetview'\"\n                            (click)=\"openGoogleStreetviewPage()\" \n                            matTooltip=\"Google Streetview\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Google Streetview\">\n                        <img \n                            [src]=\"fremhaevBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            [class.active]=\"activeMode === 'select-highlight'\"\n                            (click)=\"startSelectFeatureHighlight()\" \n                            matTooltip=\"Vejledning til anvendelse af systemet\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Fremh\u00E6v\">\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=\"V\u00E6lg og vis dokumenter fra liste\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"V\u00E6lg og vis dokumenter fra liste\">\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 i flade\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Klip hul\">\n                        }\n                        @if(settings.splitEnabled) {\n                            <img \n                                [src]=\"splitIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'split'\"\n                                (click)=\"split()\" \n                                matTooltip=\"Sk\u00E6r over\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Sk\u00E6r over\">\n                        }\n                        @if(settings.changeTypeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                [class.active]=\"activeMode === 'change-type'\" \n                                (click)=\"startChangeType()\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Skift type\" \n                                matTooltipPosition=\"below\">\n                                find_replace\n                            </mat-icon>\n                        }\n                        @if(settings.mergeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                (click)=\"startMergeFeatures()\" \n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Saml flader\" \n                                [class.active]=\"activeMode === 'merge-features'\">\n                                merge\n                            </mat-icon>\n                        }\n                        @if(settings.centerPoint) {\n                            <mat-icon\n                                (click)=\"setCenterPoint()\"\n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"S\u00E6t centerpunkt\" \n                                [class.active]=\"activeMode === 'center-point'\"\n                            >adjust</mat-icon>\n                        }\n                    </div>\n                    <div class=\"geometry-tools\">\n                        <img \n                            [src]=\"featureSearchIconBase64\" \n                            [class.active]=\"activeMode === 'search-feature'\"\n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"toggleFeatureSearch()\" \n                            matTooltip=\"Udpegede objekter\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Punkt\">\n\n                        <img \n                            [src]=\"polygonIconBase64\" \n                            [class.active]=\"activeMode === 'draw'\"\n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startDraw()\"\n                            matTooltip=\"Indtegn objekt\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Indtegn objekt\">\n                        <!-- <img \n                            [src]=\"lineStringIconBase64\" \n                            [class.active]=\"activeMode === 'draw-linestring'\"\n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startDrawLineString()\" \n                            matTooltip=\"LineString\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"LineString\">\n                        \n                        @if(selectedGeometrySetting && selectedGeometrySetting.icons && selectedGeometrySetting.icons.length > 0) {\n                            @for(iconUrl of selectedGeometrySetting.icons;track iconUrl) {\n                                <img \n                                    [src]=\"iconUrl\" \n                                    [class.active]=\"activeMode === 'draw-point'\"\n                                    class=\"compact-icon custom-image-icon\"\n                                    (click)=\"startDrawPointUrl(iconUrl)\" \n                                    matTooltip=\"Punkter\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Punkter\">}\n                        } @else {\n                            <img \n                                [src]=\"pointIconBase64\" \n                                [class.active]=\"activeMode === 'draw-point'\"\n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startDrawPoint()\" \n                                matTooltip=\"Punkter\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Punkter\">\n                        } -->\n                        <img \n                            [src]=\"wktIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            [class.active]=\"activeMode === 'wkt-input'\"\n                            (click)=\"activateShowInputWKT()\" \n                            matTooltip=\"Inds\u00E6t WKT streng for at importere elementet\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"WKT\">\n                    </div>\n                    <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n                    <div class=\"measurement-print-tools\">\n                        <div class=\"measurement-tools\">\n                            @if (deleteEnabled) {\n                                <img \n                                    [src]=\"deleteIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'delete'\"\n                                    (click)=\"startDelete()\" \n                                    matTooltip=\"Slet element\" \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\u00E5l 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\u00E5l 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 === 'PrintDraw'\"\n                                    (click)=\"startDrawMode()\" \n                                    matTooltip=\"Tegnev\u00E6rkt\u00F8j til print\" \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                                matTooltip=\"Sk\u00E6rmprint af kortet\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                [src]=\"printBase64\" \n                                class=\"compact-icon custom-image-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            @if (activeMode === 'draw' || activeMode === 'search-feature') {\n                <mat-select class=\"geometry-selector\" (selectionChange)=\"drawItemChanged($event)\" [(ngModel)]=\"selectedDrawItem\">                    \n                    @for (drawItem of drawItems; track drawItem) {\n                        <mat-option [value]=\"drawItem\">{{drawItem.name}} <img *ngIf=\"drawItem.iconUrl\" class=\"compact-icon custom-image-icon\" [src]=\"drawItem.iconUrl\"></mat-option>\n                    }\n                </mat-select>            \n            }\n        }\n    </div>\n    @if (activeMode === 'search-feature' && filteredResults.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <div class=\"buffer-item\">\n                <mat-label>Buffer</mat-label>\n                <input matInput type=\"number\" name=\"buffer\" [(ngModel)]=\"bufferInMeters\">\n                <mat-label>m</mat-label>\n            </div>\n            <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n                <span class=\"result-title\">\n                {{ result.title }} ({{result.items.length}} af {{ result.total }})\n                </span>\n                <div  (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                    <div class=\"item-right\">\n                        <img \n                            [src]=\"objectSearchCopyIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"addToActiveObjectsList(item, $event)\" \n                            matTooltip=\"Kopier\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Kopier\">\n                        <img \n                            [src]=\"objectSearchCutIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"cutBySearchedObject(item, $event)\" \n                            matTooltip=\"Fjern\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Fjern\">\n                        <img \n                            [src]=\"objectSearchCutIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"splitBySearchedObject(item, $event)\" \n                            matTooltip=\"Opsk\u00E6r\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Opsk\u00E6r\">\n                        <img \n                            [src]=\"objectSearchCopyWithBufferIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"addToActiveObjectsList(item, $event, true)\" \n                            matTooltip=\"Kopier med buffer\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Kopier med buffer\">\n                        <img \n                            [src]=\"objectSearchZoomIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"zoomSearchedObject(item, $event)\" \n                            matTooltip=\"Zoom\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Zoom\">\n                        <img \n                            [src]=\"infoBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"toggleItemInfo(item, $event)\" \n                            matTooltip=\"Info\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Info\">\n                    </div>     \n                    @if (item.showMetadata) {\n                        <div class=\"metadata-panel\">\n                            @for(feature of item.metadata; track feature) {\n                                <div class=\"feature-item\">\n                                    <div *ngFor=\"let kv of (feature | keyvalue)\">\n                                        {{ kv.value.name }}:\n                                        <ng-container [ngSwitch]=\"kv.value.kind\">\n                                            <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n                                            <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n                                                {{ kv.key }}\n                                                <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                                            </a>\n                                            <span *ngSwitchDefault>{{ kv.value.data }}</span>\n                                        </ng-container>\n                                    </div>\n                                </div>\n                            }\n                        </div>\n                    }\n                </div>\n            </mat-option>\n        </div>\n    }\n    @if ((activeMode === \"search-point\" || activeMode === \"search-polygon\") && filteredResults.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n                <span class=\"result-title\">\n                {{ result.title }} ({{result.items.length}} af {{ result.total }})\n                </span>\n                <div  (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                 </div>\n            </mat-option>\n        </div>\n    }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;left:1em;top:10em;z-index:10;max-width:95vw;box-shadow:0 2px 10px #0000001a;background:#4c4d51;border-radius:5px;width:auto;min-width:90px;transition:width .3s ease,max-width .3s ease}.toolbox-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}.toolbox-wrapper.collapsed .drag-handle-toolbox{width:90px;padding:8px 10px;box-sizing:border-box}.toolbox-wrapper.collapsed .drag-handle-toolbox .icon-left{margin-right:0;cursor:default!important}.toolbox-wrapper.collapsed .drag-handle-toolbox .right-icons .toggle-icon{cursor:pointer!important}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.geometry-search-panel{position:absolute;right:0;z-index:1000;width:380px}.geometry-search-panel::-webkit-scrollbar{width:12px}.geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.geometry-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.geometry-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.geometry-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.geometry-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.geometry-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.search-result-option{display:block!important;padding:0!important;margin:0!important;background:transparent!important}.search-result-option:last-child{border-bottom:none}.search-result-option .mdc-list-item__primary-text{width:100%!important;margin:0!important;padding:0!important}.result-title{display:block;padding:8px 6px;top:0;z-index:1;font-weight:600;font-size:17px;color:#bdc1c3cc}.search-result-item{display:flex;align-items:center;padding:8px 16px;cursor:pointer;transition:background-color .15s ease}.search-result-item:hover{background:#ffffff1a}.item-left{flex:1;min-width:0}.item-header{font-size:13px;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.search-result-item.loading .item-header{background-size:200% 100%;height:16px;border-radius:4px;width:80%}.search-result-item.loading .item-header:before{display:none}.search-empty-state{padding:32px 16px;text-align:center;color:#757575}.search-empty-state .empty-icon{font-size:40px;width:40px;height:40px;color:#bdbdbd;margin-bottom:12px}.search-empty-state .empty-title{font-size:14px;font-weight:500;margin-bottom:4px}.search-empty-state .empty-subtitle{font-size:12px;color:#9e9e9e}@media (max-width: 768px){.geometry-search-panel{width:calc(100vw - 40px);max-width:400px;left:50%;max-height:70vh}.search-result-item{padding:8px 12px}.item-header{font-size:13px}.item-header:before{width:5px;height:5px;margin-right:8px}.result-title{padding:10px 12px;font-size:12px}}@media (max-width: 480px){.geometry-search-panel{width:calc(100vw - 32px);max-height:60vh}.search-result-item{padding:6px 10px}.item-header{font-size:12px;-webkit-line-clamp:1}.item-header:before{width:4px;height:4px;margin-right:6px}}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px;border:white;border-width:2px}::ng-deep .geometry-search-panel{border-radius:5px!important;max-height:320px!important;background:#4c4d51!important;box-shadow:0 8px 24px #00000026!important;margin-top:10px;overflow-y:auto!important;padding:8px!important;max-width:430px}::ng-deep .geometry-search-panel .buffer-item{align-items:end}::ng-deep .geometry-search-panel .buffer-item input{width:45px;margin:5px}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-direction:column;padding:8px 16px;cursor:pointer;transition:background-color .15s ease;gap:8px}::ng-deep .geometry-search-panel .search-result-item:hover{background:#ffffff1a}::ng-deep .geometry-search-panel .item-left{flex:1;min-width:0;width:100%}::ng-deep .geometry-search-panel .item-header{font-size:13px;color:#fff;display:block;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}::ng-deep .geometry-search-panel .item-right{display:flex;align-items:center;gap:4px;flex-wrap:wrap;width:100%}::ng-deep .geometry-search-panel .item-right .custom-image-icon{background:#fff!important;flex-shrink:0}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:#fff;line-height:1.5}::ng-deep .geometry-search-panel mat-label{color:#fff}.drag-handle-toolbox{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;gap:8px;border-radius:5px 5px 0 0;color:#fff}.drag-handle-toolbox mat-icon{font-size:18px}.drag-handle-toolbox mat-icon:first-child{display:flex;align-items:center;justify-content:center}.drag-handle-toolbox .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}: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%;background:#4c4d51;width:auto;gap:6px;min-width:32px;transition:all .3s ease;cursor:default;border-radius:0 0 5px 5px}.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;padding:2px 8px}.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;flex-wrap:nowrap}.main-tools ::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:12px;font-weight:500;color:#fff}.geometry-selector{width:34%;margin-left:12em;padding:6px}.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-radius:6px;background:#6d6f73;transition:all .2s ease;border:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73;border:none}.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}.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:#4c4d51!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;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;background:none;border-radius:8px;padding:3px 0}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;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{background:none}.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:#f7b528!important;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:#ffffff1a;border-color:none;box-shadow:none}.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:none;color:#fff}.print-tools .compact-icon.active{background:#f7b528!important;border-color:transparent}.print-tools .compact-icon.active:hover{background:#ffffff1a}.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)}.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:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}.compact-icon.active{color:#fff;background:#f7b528!important;border-color:transparent;box-shadow:0 8px 25px #667eea4d}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon:hover:not(.active){color:#fff;background:color-mix(in srgb,#000 70%,transparent);box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:2px;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease,transform .2s ease}.compact-icon.custom-image-icon.active{background:#ffffff1a;border-color:none;box-shadow:none}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon.custom-image-icon:hover:not(.active){background:#ffffff1a;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.wkt-section{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease;padding:10px 8px}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:6px;background:#6d6f73;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:#f7b528;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-radius:6px;font-size:13px;transition:all .2s ease;background:#6d6f73;border:none;color:#fff}.compact-input:focus{outline:none;background:#6d6f73;border:1px solid #97989b}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:transparent;border:none;border-radius:8px;animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:#6d6f73;border:none;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}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:#6d6f73!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:#6ccb78;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;box-shadow:0 0 #0000,0 0 #0000,0 0 #0000;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}@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 0}.geometry-selector{width:30%;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:2px;min-width:24px}.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 .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9$1.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 class=\"left-icon\">handyman</mat-icon>\n    \n        <div class=\"right-icons\">\n            <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n            <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n                {{ collapsed ? 'flip_to_front' : 'remove' }}\n            </mat-icon>\n        </div>\n    </div>\n    \n    <div class=\"toolbox-container\" [class.collapsed]=\"collapsed\">\n        @if(!collapsed) {\n            <div class=\"toolbox-content\">\n                <div class=\"all-tools-container\">\n                    <div class=\"main-tools\">\n                        @if(!settings?.undoDisabled) {\n                            <img \n                                [src]=\"undoIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"undo()\" \n                                matTooltip=\"Fortryd\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Undo\">\n\n                            <img \n                                [src]=\"redoIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"redo()\" \n                                matTooltip=\"Gendan\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Redo\">\n                        }\n                        <img \n                            [src]=\"infoBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startShowInfo()\" \n                            [class.active]=\"activeMode === 'show-info'\"\n                            matTooltip=\"Vejledning til anvendelse af systemet\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Vejledning til anvendelse af systemet\">\n                        <img \n                            [src]=\"sogPunktBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"togglePointSearch()\" \n                            [class.active]=\"activeMode === 'search-point'\"\n                            matTooltip=\"S\u00F8g punkt\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"S\u00F8g punkt\">\n                            \n                        <img \n                            [src]=\"sogPolygonBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"togglePolygonSearch()\" \n                            [class.active]=\"activeMode === 'search-polygon'\"\n                            matTooltip=\"S\u00F8g polygon\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"S\u00F8g polygon\">\n                        <img \n                            [src]=\"openCowiPageBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            [class.active]=\"activeMode === 'cowi'\"\n                            (click)=\"openCowiPage()\" \n                            matTooltip=\"COWI\u00B4s Gadefoto\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"COWI\u00B4s Gadefoto\">\n                        <img \n                            [src]=\"skrafotoBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            [class.active]=\"activeMode === 'skrafoto'\"\n                            (click)=\"openSkraafotoPage()\" \n                            matTooltip=\"Skr\u00E5foto\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Skr\u00E5foto\">\n            \n                        <img \n                            [src]=\"streetViewBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            [class.active]=\"activeMode === 'streetview'\"\n                            (click)=\"openGoogleStreetviewPage()\" \n                            matTooltip=\"Google Streetview\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Google Streetview\">\n                        <img \n                            [src]=\"fremhaevBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            [class.active]=\"activeMode === 'select-highlight'\"\n                            (click)=\"startSelectFeatureHighlight()\" \n                            matTooltip=\"Vejledning til anvendelse af systemet\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Fremh\u00E6v\">\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=\"V\u00E6lg og vis dokumenter fra liste\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"V\u00E6lg og vis dokumenter fra liste\">\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 i flade\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Klip hul\">\n                        }\n                        @if(settings.splitEnabled) {\n                            <img \n                                [src]=\"splitIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'split'\"\n                                (click)=\"split()\" \n                                matTooltip=\"Sk\u00E6r over\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Sk\u00E6r over\">\n                        }\n                        @if(settings.changeTypeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                [class.active]=\"activeMode === 'change-type'\" \n                                (click)=\"startChangeType()\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Skift type\" \n                                matTooltipPosition=\"below\">\n                                find_replace\n                            </mat-icon>\n                        }\n                        @if(settings.mergeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                (click)=\"startMergeFeatures()\" \n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Saml flader\" \n                                [class.active]=\"activeMode === 'merge-features'\">\n                                merge\n                            </mat-icon>\n                        }\n                        @if(settings.centerPoint) {\n                            <mat-icon\n                                (click)=\"setCenterPoint()\"\n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"S\u00E6t centerpunkt\" \n                                [class.active]=\"activeMode === 'center-point'\"\n                            >adjust</mat-icon>\n                        }\n                    </div>\n                    <div class=\"geometry-tools\">\n                        <img \n                            [src]=\"featureSearchIconBase64\" \n                            [class.active]=\"activeMode === 'search-feature'\"\n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"toggleFeatureSearch()\" \n                            matTooltip=\"Udpegede objekter\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Punkt\">\n\n                        <img \n                            [src]=\"polygonIconBase64\" \n                            [class.active]=\"activeMode === 'draw-polygon'\"\n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startDrawPolygon()\" \n                            matTooltip=\"Polygon\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Polygon\">\n                        <img \n                            [src]=\"lineStringIconBase64\" \n                            [class.active]=\"activeMode === 'draw-linestring'\"\n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startDrawLineString()\" \n                            matTooltip=\"LineString\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"LineString\">\n                        \n                        @if(selectedGeometrySetting && selectedGeometrySetting.icons && selectedGeometrySetting.icons.length > 0) {\n                            @for(iconUrl of selectedGeometrySetting.icons;track iconUrl) {\n                                <img \n                                    [src]=\"iconUrl\" \n                                    [class.active]=\"activeMode === 'draw-point'\"\n                                    class=\"compact-icon custom-image-icon\"\n                                    (click)=\"startDrawPointUrl(iconUrl)\" \n                                    matTooltip=\"Punkter\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Punkter\">}\n                        } @else {\n                            <img \n                                [src]=\"pointIconBase64\" \n                                [class.active]=\"activeMode === 'draw-point'\"\n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startDrawPoint()\" \n                                matTooltip=\"Punkter\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Punkter\">\n                        }\n                        <img \n                            [src]=\"wktIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            [class.active]=\"activeMode === 'wkt-input'\"\n                            (click)=\"activateShowInputWKT()\" \n                            matTooltip=\"Inds\u00E6t WKT streng for at importere elementet\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"WKT\">\n                    </div>\n                    <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n                    <div class=\"measurement-print-tools\">\n                        <div class=\"measurement-tools\">\n                            @if (deleteEnabled) {\n                                <img \n                                    [src]=\"deleteIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'delete'\"\n                                    (click)=\"startDelete()\" \n                                    matTooltip=\"Slet element\" \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\u00E5l 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\u00E5l 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 === 'PrintDraw'\"\n                                    (click)=\"startDrawMode()\" \n                                    matTooltip=\"Tegnev\u00E6rkt\u00F8j til print\" \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                                matTooltip=\"Sk\u00E6rmprint af kortet\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                [src]=\"printBase64\" \n                                class=\"compact-icon custom-image-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            @if (showGeometryTypes && filteredGeometryTypeSettings.length > 0) {\n                <mat-select class=\"geometry-selector\" (selectionChange)=\"settingsChanged($event)\" [(ngModel)]=\"selectedGeometrySetting\" [compareWith]=\"compareGeometrySetting\">\n                    @for (setting of filteredGeometryTypeSettings; track setting) {\n                        <mat-option [value]=\"setting\">{{setting.typeName}}</mat-option>\n                    }\n                </mat-select>            \n            }\n        }\n    </div>\n    @if (activeMode === 'search-feature' && filteredResults.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <div class=\"buffer-item\">\n                <mat-label>Buffer</mat-label>\n                <input matInput type=\"number\" name=\"buffer\" [(ngModel)]=\"bufferInMeters\">\n                <mat-label>m</mat-label>\n            </div>\n            <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n                <span class=\"result-title\">\n                {{ result.title }} ({{result.items.length}} af {{ result.total }})\n                </span>\n                <div  (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                    <div class=\"item-right\">\n                        <img \n                            [src]=\"objectSearchCopyIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"addToActiveObjectsList(item, $event)\" \n                            matTooltip=\"Kopier\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Kopier\">\n                        <img \n                            [src]=\"objectSearchCutIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"cutBySearchedObject(item, $event)\" \n                            matTooltip=\"Fjern\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Fjern\">\n                        <img \n                            [src]=\"objectSearchCutIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"splitBySearchedObject(item, $event)\" \n                            matTooltip=\"Opsk\u00E6r\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Opsk\u00E6r\">\n                        <img \n                            [src]=\"objectSearchCopyWithBufferIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"addToActiveObjectsList(item, $event, true)\" \n                            matTooltip=\"Kopier med buffer\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Kopier med buffer\">\n                        <img \n                            [src]=\"objectSearchZoomIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"zoomSearchedObject(item, $event)\" \n                            matTooltip=\"Zoom\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Zoom\">\n                        <button\n                            (click)=\"toggleItemInfo(item, $event)\">\n                            <mat-icon class=\"button-icon\">info_outline</mat-icon>\n                        </button>\n                    </div>     \n                    @if (item.showMetadata) {\n                        <div class=\"metadata-panel\">\n                            @for(feature of item.metadata; track feature) {\n                                <div class=\"feature-item\">\n                                    <div *ngFor=\"let kv of (feature | keyvalue)\">\n                                        {{ kv.value.name }}:\n                                        <ng-container [ngSwitch]=\"kv.value.kind\">\n                                            <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n                                            <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n                                                {{ kv.key }}\n                                                <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                                            </a>\n                                            <span *ngSwitchDefault>{{ kv.value.data }}</span>\n                                        </ng-container>\n                                    </div>\n                                </div>\n                            }\n                        </div>\n                    }\n                </div>\n            </mat-option>\n        </div>\n    }\n    @if ((activeMode === \"search-point\" || activeMode === \"search-polygon\") && filteredResults.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n                <span class=\"result-title\">\n                {{ result.title }} ({{result.items.length}} af {{ result.total }})\n                </span>\n                <div  (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                 </div>\n            </mat-option>\n        </div>\n    }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;left:1em;top:10em;z-index:10;cursor:grab;max-width:95vw}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}.geometry-search-panel{position:absolute;left:0;z-index:1000;width:380px}.geometry-search-panel::-webkit-scrollbar{width:12px}.geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.geometry-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.geometry-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.geometry-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.geometry-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.geometry-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.search-result-option{display:block!important;padding:0!important;margin:0!important;background:transparent!important}.search-result-option:last-child{border-bottom:none}.search-result-option .mdc-list-item__primary-text{width:100%!important;margin:0!important;padding:0!important}.result-title{display:block;padding:8px 6px;top:0;z-index:1;font-weight:600;font-size:17px;color:#bdc1c3cc}.search-result-item{display:flex;align-items:center;padding:8px 16px;cursor:pointer;transition:background-color .15s ease}.search-result-item:hover{background:#ffffff1a}.item-left{flex:1;min-width:0}.item-header{font-size:13px;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.search-result-item.loading .item-header{background-size:200% 100%;height:16px;border-radius:4px;width:80%}.search-result-item.loading .item-header:before{display:none}.search-empty-state{padding:32px 16px;text-align:center;color:#757575}.search-empty-state .empty-icon{font-size:40px;width:40px;height:40px;color:#bdbdbd;margin-bottom:12px}.search-empty-state .empty-title{font-size:14px;font-weight:500;margin-bottom:4px}.search-empty-state .empty-subtitle{font-size:12px;color:#9e9e9e}@media (max-width: 768px){.geometry-search-panel{width:calc(100vw - 40px);max-width:400px;left:50%;transform:translate(-50%);max-height:70vh}.search-result-item{padding:8px 12px}.item-header{font-size:13px}.item-header:before{width:5px;height:5px;margin-right:8px}.result-title{padding:10px 12px;font-size:12px}}@media (max-width: 480px){.geometry-search-panel{width:calc(100vw - 32px);max-height:60vh}.search-result-item{padding:6px 10px}.item-header{font-size:12px;-webkit-line-clamp:1}.item-header:before{width:4px;height:4px;margin-right:6px}}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px;border:white;border-width:2px}::ng-deep .geometry-search-panel{border-radius:5px!important;max-height:320px!important;background:#4c4d51!important;box-shadow:0 8px 24px #00000026!important;margin-top:10px;overflow-y:auto!important;padding:8px!important;max-width:430px}::ng-deep .geometry-search-panel .buffer-item{align-items:end}::ng-deep .geometry-search-panel .buffer-item input{width:45px;margin:5px}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-wrap:wrap}::ng-deep .geometry-search-panel .search-result-item .item-left{display:flex;align-items:center;gap:3px;flex:1;min-width:0}::ng-deep .geometry-search-panel .search-result-item .item-right{display:flex;align-items:center;flex:1;justify-content:flex-end;min-width:0;margin-left:10px}::ng-deep .geometry-search-panel .search-result-item .item-right .custom-image-icon{background:#fff!important;margin-left:5px}::ng-deep .geometry-search-panel .search-result-item .item-right button{width:38px;margin-left:5px}::ng-deep .geometry-search-panel .search-result-item .metadata-panel{flex-basis:98%}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:#fff;line-height:1.5}::ng-deep .geometry-search-panel mat-label{color:#fff}.drag-handle-toolbox{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:2px 8px;cursor:grab;gap:8px;border-radius:5px 5px 0 0;color:#fff}.drag-handle-toolbox mat-icon{color:#fff;font-size:18px;width:18px;height:18px}.drag-handle-toolbox mat-icon:first-child{flex:1;text-align:left}.right-icons{display:flex;align-items:center;gap:6px}.left-icon{flex-shrink:0}.toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.toggle-icon:hover{color:#fff;background:#ffffff26}.toggle-icon:active{background:#ffffff40}:host{position:relative;display:flex;justify-content:center}:host.expanded{width:auto;min-width:320px;padding:12px}.toolbox-container{display:flex;flex-direction:column;align-items:center;width:100%;background:#4c4d51;box-shadow:#0000004d 0 1px 4px -1px;width:auto;padding:4px;gap:6px;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;flex-wrap:nowrap}.main-tools ::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:12px;font-weight:500;color:#fff}.geometry-selector{width:25%;margin-right:auto}.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-radius:6px;background:#6d6f73;transition:all .2s ease;border:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73;border:none}.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:#4c4d51!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;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;background:none;border-radius:8px;padding:3px 0}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;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}.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)!important;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:#ffffff1a;border-color:none;box-shadow:none}.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:none;color:#fff}.print-tools .compact-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985)!important;border-color:transparent}.print-tools .compact-icon.active:hover{background:#ffffff1a}.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)}.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:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}.compact-icon.active{color:#fff;background:linear-gradient(147.38deg,#0ea5e9,#075985)!important;border-color:transparent;box-shadow:0 8px 25px #667eea4d;transform:scale(1.05)}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon:hover:not(.active){color:#fff;background:color-mix(in srgb,#000 70%,transparent);box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:2px;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease,transform .2s ease}.compact-icon.custom-image-icon.active{background:#ffffff1a;border-color:none;box-shadow:none}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon.custom-image-icon:hover:not(.active){background:#ffffff1a;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.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:#6d6f73;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(147.38deg,#0ea5e9,#075985);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-radius:6px;font-size:13px;transition:all .2s ease;background:#6d6f73;border:none;color:#fff}.compact-input:focus{outline:none;background:#6d6f73;border:1px solid #97989b}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:transparent;border:none;border-radius:8px;animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:#6d6f73;border:none;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}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:#6d6f73!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}@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 0}.geometry-selector{width:30%;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:2px;min-width:24px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;letter-spacing:.2px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle{transform:scale(.9)}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px}\n"] }]
+            args: [{ selector: 'map-toolbox', imports: [FormsModule, CommonModule, MatIconModule, MatOptionModule, MatSelectModule, DragDropModule, MatTooltipModule, MatSlideToggleModule], template: "<div class=\"toolbox-wrapper\" \n     cdkDrag \n     cdkDragBoundary=\".map-container\"\n     [cdkDragFreeDragPosition]=\"dragPosition\"\n     (cdkDragEnded)=\"onDragEnded($event)\">\n     <div class=\"drag-handle-toolbox\" cdkDragHandle>\n        <mat-icon \n            class=\"icon-left\" \n            matTooltip=\"V\u00E6rkt\u00F8jskasse\" \n            [matTooltipShowDelay]=\"500\"\n            [matTooltipHideDelay]=\"100\" \n            matTooltipPosition=\"above\">\n            handyman\n        </mat-icon>    \n        <div class=\"right-icons\">          \n            <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n                {{ collapsed ? 'flip_to_front' : 'remove' }}\n            </mat-icon>\n        </div>\n    </div>\n    \n    <div class=\"toolbox-container\" [class.collapsed]=\"collapsed\">\n        @if(!collapsed) {\n            <div class=\"toolbox-content\">\n                <div class=\"all-tools-container\">\n                    <div class=\"main-tools\">\n                        @if(!settings?.undoDisabled) {\n                            <img \n                                [src]=\"undoIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"undo()\" \n                                matTooltip=\"Fortryd\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Undo\">\n\n                            <img \n                                [src]=\"redoIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"redo()\" \n                                matTooltip=\"Gendan\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Redo\">\n                        }\n                        <img \n                            [src]=\"infoBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startShowInfo()\" \n                            [class.active]=\"activeMode === 'show-info'\"\n                            matTooltip=\"Vejledning til anvendelse af systemet\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Vejledning til anvendelse af systemet\">\n                        <img \n                            [src]=\"sogPunktBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"togglePointSearch()\" \n                            [class.active]=\"activeMode === 'search-point'\"\n                            matTooltip=\"S\u00F8g punkt\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"S\u00F8g punkt\">\n                            \n                        <img \n                            [src]=\"sogPolygonBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"togglePolygonSearch()\" \n                            [class.active]=\"activeMode === 'search-polygon'\"\n                            matTooltip=\"S\u00F8g polygon\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"S\u00F8g polygon\">\n                        <img \n                            [src]=\"openCowiPageBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            [class.active]=\"activeMode === 'cowi'\"\n                            (click)=\"openCowiPage()\" \n                            matTooltip=\"COWI\u00B4s Gadefoto\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"COWI\u00B4s Gadefoto\">\n                        <img \n                            [src]=\"skrafotoBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            [class.active]=\"activeMode === 'skrafoto'\"\n                            (click)=\"openSkraafotoPage()\" \n                            matTooltip=\"Skr\u00E5foto\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Skr\u00E5foto\">\n            \n                        <img \n                            [src]=\"streetViewBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            [class.active]=\"activeMode === 'streetview'\"\n                            (click)=\"openGoogleStreetviewPage()\" \n                            matTooltip=\"Google Streetview\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Google Streetview\">\n                        <img \n                            [src]=\"fremhaevBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            [class.active]=\"activeMode === 'select-highlight'\"\n                            (click)=\"startSelectFeatureHighlight()\" \n                            matTooltip=\"Vejledning til anvendelse af systemet\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Fremh\u00E6v\">\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=\"V\u00E6lg og vis dokumenter fra liste\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"V\u00E6lg og vis dokumenter fra liste\">\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 i flade\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Klip hul\">\n                        }\n                        @if(settings.splitEnabled) {\n                            <img \n                                [src]=\"splitIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'split'\"\n                                (click)=\"split()\" \n                                matTooltip=\"Sk\u00E6r over\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Sk\u00E6r over\">\n                        }\n                        @if(settings.changeTypeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                [class.active]=\"activeMode === 'change-type'\" \n                                (click)=\"startChangeType()\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Skift type\" \n                                matTooltipPosition=\"below\">\n                                find_replace\n                            </mat-icon>\n                        }\n                        @if(settings.mergeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                (click)=\"startMergeFeatures()\" \n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Saml flader\" \n                                [class.active]=\"activeMode === 'merge-features'\">\n                                merge\n                            </mat-icon>\n                        }\n                        @if(settings.centerPoint) {\n                            <mat-icon\n                                (click)=\"setCenterPoint()\"\n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"S\u00E6t centerpunkt\" \n                                [class.active]=\"activeMode === 'center-point'\"\n                            >adjust</mat-icon>\n                        }\n                    </div>\n                    <div class=\"geometry-tools\">\n                        <img \n                            [src]=\"featureSearchIconBase64\" \n                            [class.active]=\"activeMode === 'search-feature'\"\n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"toggleFeatureSearch()\" \n                            matTooltip=\"Udpegede objekter\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Punkt\">\n\n                        <img \n                            [src]=\"polygonIconBase64\" \n                            [class.active]=\"activeMode === 'draw'\"\n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startDraw()\"\n                            matTooltip=\"Indtegn objekt\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Indtegn objekt\">\n                        <!-- <img \n                            [src]=\"lineStringIconBase64\" \n                            [class.active]=\"activeMode === 'draw-linestring'\"\n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startDrawLineString()\" \n                            matTooltip=\"LineString\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"LineString\">\n                        \n                        @if(selectedGeometrySetting && selectedGeometrySetting.icons && selectedGeometrySetting.icons.length > 0) {\n                            @for(iconUrl of selectedGeometrySetting.icons;track iconUrl) {\n                                <img \n                                    [src]=\"iconUrl\" \n                                    [class.active]=\"activeMode === 'draw-point'\"\n                                    class=\"compact-icon custom-image-icon\"\n                                    (click)=\"startDrawPointUrl(iconUrl)\" \n                                    matTooltip=\"Punkter\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Punkter\">}\n                        } @else {\n                            <img \n                                [src]=\"pointIconBase64\" \n                                [class.active]=\"activeMode === 'draw-point'\"\n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startDrawPoint()\" \n                                matTooltip=\"Punkter\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Punkter\">\n                        } -->\n                        <img \n                            [src]=\"wktIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            [class.active]=\"activeMode === 'wkt-input'\"\n                            (click)=\"activateShowInputWKT()\" \n                            matTooltip=\"Inds\u00E6t WKT streng for at importere elementet\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"WKT\">\n                    </div>\n                    <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n                    <div class=\"measurement-print-tools\">\n                        <div class=\"measurement-tools\">\n                            @if (deleteEnabled) {\n                                <img \n                                    [src]=\"deleteIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'delete'\"\n                                    (click)=\"startDelete()\" \n                                    matTooltip=\"Slet element\" \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\u00E5l 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\u00E5l 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 === 'PrintDraw'\"\n                                    (click)=\"startDrawMode()\" \n                                    matTooltip=\"Tegnev\u00E6rkt\u00F8j til print\" \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                                matTooltip=\"Sk\u00E6rmprint af kortet\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                [src]=\"printBase64\" \n                                class=\"compact-icon custom-image-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            @if (activeMode === 'draw' || activeMode === 'search-feature') {\n                <mat-select class=\"geometry-selector\" (selectionChange)=\"drawItemChanged($event)\" [(ngModel)]=\"selectedDrawItem\">                    \n                    @for (drawItem of drawItems; track drawItem) {\n                        <mat-option [value]=\"drawItem\">{{drawItem.name}} <img *ngIf=\"drawItem.iconUrl\" class=\"compact-icon custom-image-icon\" [src]=\"drawItem.iconUrl\"></mat-option>\n                    }\n                </mat-select>            \n            }\n        }\n    </div>\n    @if (activeMode === 'search-feature' && filteredResults.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <div class=\"buffer-item\">\n                <mat-label>Buffer</mat-label>\n                <input matInput type=\"number\" name=\"buffer\" [(ngModel)]=\"bufferInMeters\">\n                <mat-label>m</mat-label>\n            </div>\n            <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n                <span class=\"result-title\">\n                {{ result.title }} ({{result.items.length}} af {{ result.total }})\n                </span>\n                <div  (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                    <div class=\"item-right\">\n                        <img \n                            [src]=\"objectSearchCopyIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"addToActiveObjectsList(item, $event)\" \n                            matTooltip=\"Kopier\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Kopier\">\n                        <img \n                            [src]=\"objectSearchCutIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"cutBySearchedObject(item, $event)\" \n                            matTooltip=\"Fjern\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Fjern\">\n                        <img \n                            [src]=\"objectSearchCutIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"splitBySearchedObject(item, $event)\" \n                            matTooltip=\"Opsk\u00E6r\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Opsk\u00E6r\">\n                        <img \n                            [src]=\"objectSearchCopyWithBufferIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"addToActiveObjectsList(item, $event, true)\" \n                            matTooltip=\"Kopier med buffer\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Kopier med buffer\">\n                        <img \n                            [src]=\"objectSearchZoomIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"zoomSearchedObject(item, $event)\" \n                            matTooltip=\"Zoom\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Zoom\">\n                        <img \n                            [src]=\"infoBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"toggleItemInfo(item, $event)\" \n                            matTooltip=\"Info\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Info\">\n                    </div>     \n                    @if (item.showMetadata) {\n                        <div class=\"metadata-panel\">\n                            @for(feature of item.metadata; track feature) {\n                                <div class=\"feature-item\">\n                                    <div *ngFor=\"let kv of (feature | keyvalue)\">\n                                        {{ kv.value.name }}:\n                                        <ng-container [ngSwitch]=\"kv.value.kind\">\n                                            <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n                                            <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n                                                {{ kv.key }}\n                                                <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                                            </a>\n                                            <span *ngSwitchDefault>{{ kv.value.data }}</span>\n                                        </ng-container>\n                                    </div>\n                                </div>\n                            }\n                        </div>\n                    }\n                </div>\n            </mat-option>\n        </div>\n    }\n    @if ((activeMode === \"search-point\" || activeMode === \"search-polygon\") && filteredResults.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n                <span class=\"result-title\">\n                {{ result.title }} ({{result.items.length}} af {{ result.total }})\n                </span>\n                <div  (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                 </div>\n            </mat-option>\n        </div>\n    }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;left:1em;top:10em;z-index:10;max-width:95vw;box-shadow:0 2px 10px #0000001a;background:#4c4d51;border-radius:5px;width:auto;min-width:90px;transition:width .3s ease,max-width .3s ease}.toolbox-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}.toolbox-wrapper.collapsed .drag-handle-toolbox{width:90px;padding:8px 10px;box-sizing:border-box}.toolbox-wrapper.collapsed .drag-handle-toolbox .icon-left{margin-right:0;cursor:default!important}.toolbox-wrapper.collapsed .drag-handle-toolbox .right-icons .toggle-icon{cursor:pointer!important}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.geometry-search-panel{position:absolute;right:0;z-index:1000;width:380px}.geometry-search-panel::-webkit-scrollbar{width:12px}.geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.geometry-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.geometry-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.geometry-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.geometry-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.geometry-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.search-result-option{display:block!important;padding:0!important;margin:0!important;background:transparent!important}.search-result-option:last-child{border-bottom:none}.search-result-option .mdc-list-item__primary-text{width:100%!important;margin:0!important;padding:0!important}.result-title{display:block;padding:8px 6px;top:0;z-index:1;font-weight:600;font-size:17px;color:#bdc1c3cc}.search-result-item{display:flex;align-items:center;padding:8px 16px;cursor:pointer;transition:background-color .15s ease}.search-result-item:hover{background:#ffffff1a}.item-left{flex:1;min-width:0}.item-header{font-size:13px;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.search-result-item.loading .item-header{background-size:200% 100%;height:16px;border-radius:4px;width:80%}.search-result-item.loading .item-header:before{display:none}.search-empty-state{padding:32px 16px;text-align:center;color:#757575}.search-empty-state .empty-icon{font-size:40px;width:40px;height:40px;color:#bdbdbd;margin-bottom:12px}.search-empty-state .empty-title{font-size:14px;font-weight:500;margin-bottom:4px}.search-empty-state .empty-subtitle{font-size:12px;color:#9e9e9e}@media (max-width: 768px){.geometry-search-panel{width:calc(100vw - 40px);max-width:400px;left:50%;max-height:70vh}.search-result-item{padding:8px 12px}.item-header{font-size:13px}.item-header:before{width:5px;height:5px;margin-right:8px}.result-title{padding:10px 12px;font-size:12px}}@media (max-width: 480px){.geometry-search-panel{width:calc(100vw - 32px);max-height:60vh}.search-result-item{padding:6px 10px}.item-header{font-size:12px;-webkit-line-clamp:1}.item-header:before{width:4px;height:4px;margin-right:6px}}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px;border:white;border-width:2px}::ng-deep .geometry-search-panel{border-radius:5px!important;max-height:320px!important;background:#4c4d51!important;box-shadow:0 8px 24px #00000026!important;margin-top:10px;overflow-y:auto!important;padding:8px!important;max-width:430px}::ng-deep .geometry-search-panel .buffer-item{align-items:end}::ng-deep .geometry-search-panel .buffer-item input{width:45px;margin:5px}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-direction:column;padding:8px 16px;cursor:pointer;transition:background-color .15s ease;gap:8px}::ng-deep .geometry-search-panel .search-result-item:hover{background:#ffffff1a}::ng-deep .geometry-search-panel .item-left{flex:1;min-width:0;width:100%}::ng-deep .geometry-search-panel .item-header{font-size:13px;color:#fff;display:block;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}::ng-deep .geometry-search-panel .item-right{display:flex;align-items:center;gap:4px;flex-wrap:wrap;width:100%}::ng-deep .geometry-search-panel .item-right .custom-image-icon{background:#fff!important;flex-shrink:0}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:#fff;line-height:1.5}::ng-deep .geometry-search-panel mat-label{color:#fff}.drag-handle-toolbox{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;gap:8px;border-radius:5px 5px 0 0;color:#fff}.drag-handle-toolbox mat-icon{font-size:18px}.drag-handle-toolbox mat-icon:first-child{display:flex;align-items:center;justify-content:center}.drag-handle-toolbox .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}: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%;background:#4c4d51;width:auto;gap:6px;min-width:32px;transition:all .3s ease;cursor:default;border-radius:0 0 5px 5px}.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;padding:2px 8px}.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;flex-wrap:nowrap}.main-tools ::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:12px;font-weight:500;color:#fff}.geometry-selector{width:34%;margin-left:12em;padding:6px}.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-radius:6px;background:#6d6f73;transition:all .2s ease;border:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73;border:none}.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}.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:#4c4d51!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;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;background:none;border-radius:8px;padding:3px 0}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;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{background:none}.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:#f7b528!important;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:#ffffff1a;border-color:none;box-shadow:none}.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:none;color:#fff}.print-tools .compact-icon.active{background:#f7b528!important;border-color:transparent}.print-tools .compact-icon.active:hover{background:#ffffff1a}.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)}.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:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}.compact-icon.active{color:#fff;background:#f7b528!important;border-color:transparent;box-shadow:0 8px 25px #667eea4d}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon:hover:not(.active){color:#fff;background:color-mix(in srgb,#000 70%,transparent);box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:2px;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease,transform .2s ease}.compact-icon.custom-image-icon.active{background:#ffffff1a;border-color:none;box-shadow:none}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon.custom-image-icon:hover:not(.active){background:#ffffff1a;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.wkt-section{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease;padding:10px 8px}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:6px;background:#6d6f73;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:#f7b528;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-radius:6px;font-size:13px;transition:all .2s ease;background:#6d6f73;border:none;color:#fff}.compact-input:focus{outline:none;background:#6d6f73;border:1px solid #97989b}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:transparent;border:none;border-radius:8px;animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:#6d6f73;border:none;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}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:#6d6f73!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:#6ccb78;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;box-shadow:0 0 #0000,0 0 #0000,0 0 #0000;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}@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 0}.geometry-selector{width:30%;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:2px;min-width:24px}.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 .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 }]
@@ -3367,9 +3733,14 @@ class ActiveObjectsComponent {
             if (savedPosition) {
                 this.dragPosition = JSON.parse(savedPosition);
             }
-            else if (this.profile) {
+            else if (this.profile?.activeObjectsInitialPosition) {
                 this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.activeObjectsInitialPosition);
             }
+            else {
+                // Default position for active objects
+                this.dragPosition = { x: 29, y: 238 };
+                this._savePosition(this.dragPosition);
+            }
         }
         catch (error) {
             console.error('Error loading position from localStorage:', error);
@@ -3377,11 +3748,11 @@ 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", profile: "profile" }, outputs: { sessionDone: "sessionDone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"active-objects-wrapper\" \n    cdkDrag \n    cdkDragBoundary=\".map-container\" \n    [cdkDragFreeDragPosition]=\"dragPosition\"\n    (cdkDragEnded)=\"onDragEnded($event)\"\n    [class.collapsed]=\"collapsed\">\n    <div class=\"drag-handle-active-objects\" cdkDragHandle>\n        <mat-icon class=\"zoom-icon\" (click)=\"zoomToAll()\">dynamic_form</mat-icon>\n      \n        <div class=\"right-icons\">\n          <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n          <mat-icon class=\"toggle-icon\" (click)=\"togglePanel()\">\n            {{ collapsed ? 'flip_to_front' : 'remove' }}\n          </mat-icon>\n        </div>\n      </div>\n      \n    <div class=\"active-objects-container\">\n        @if(!collapsed) {\n            <input                 \n                type=\"range\"\n                min=\"0\"\n                max=\"1\"\n                step=\"0.05\"\n                [(ngModel)]=\"opacity\"\n                (input)=\"updateOpacity()\"\n                (mousedown)=\"stopDrag($event)\"\n                (touchstart)=\"stopDrag($event)\"\n                (pointerdown)=\"stopDrag($event)\"\n                >\n        }\n\n        @if(!collapsed) {\n            <div class=\"active-objects-content\">\n                <div class=\"header-icons\">\n                    <mat-icon \n                    class=\"zoom-icon\" \n                    [class.zoom-active]=\"isZoomedToAll\"\n                    (click)=\"zoomToAll()\" \n                    matTooltip=\"Zoom til alle\" \n                    matTooltipPosition=\"above\">\n                    fit_screen\n                </mat-icon>                    \n                <mat-icon class=\"reset-icon\" (click)=\"reset()\" matTooltip=\"Nulstilles\" matTooltipPosition=\"above\">replay</mat-icon>\n                </div>\n                @for(featureTypeObj of activeFeatures; track featureTypeObj.featureType) {\n                    <mat-expansion-panel>\n                        <mat-expansion-panel-header \n                        [matTooltip]=\"featureTypeObj.display\"  \n                        [matTooltipShowDelay]=\"200\"\n                        [matTooltipHideDelay]=\"300\" \n                        matTooltipPosition=\"right\">\n                            <span class=\"panel-title\">\n                                {{featureTypeObj.display}} ({{featureTypeObj.features.length}})\n                            </span>\n                        </mat-expansion-panel-header>\n                        <div class=\"item-list\">\n                            @for(item of featureTypeObj.features; track item.id) {\n                                <div class=\"item\">\n                                    <div class=\"item-text\">\n                                        <span class=\"item-id\">{{item.id}}</span>\n                                        <span class=\"item-area\">{{item.area}}</span>\n                                        @if(item.containedMissingIn && item.containedMissingIn.length > 0) {\n                                            <span>Udenfor {{item.containedMissingIn.join(', ')}} </span>                    \n                                        }\n                                    </div>\n                                    @if(!item.locked) {\n                                        <mat-icon (click)=\"delete(item.id)\">delete</mat-icon>\n                                    }\n                                    <mat-icon (click)=\"highlight(item.id)\" [class.highlight-active]=\"highlightedId === item.id\">power_settings_new</mat-icon>\n                                </div>\n                            }\n                        </div>\n                    </mat-expansion-panel>\n                }\n                @if(!centerPointOk) {\n                    <span>\n                        Der er ikke noget centerpunkt og det skal der v\u00E6re\n                    </span>\n                } @else {\n                    @if (endSessionEnabled) {\n                        <button (click)=\"endSession()\">Afslut</button>\n                    }\n                }\n            </div>\n        }\n    </div>    \n</div>", styles: [".active-objects-wrapper{position:absolute;top:8em;left:1em;z-index:2;cursor:grab;box-shadow:0 2px 10px #0000001a;background:#292a2d;width:350px;max-width:350px;transition:width .3s ease,max-width .3s ease;border-radius:5px 5px 0 0}.active-objects-wrapper.collapsed{width:90px}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px;margin-right:10px;line-height:1.3;font-weight:600;color:#bdc1c3cc;font-size:17px}.item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:4px;background:color-mix(in srgb,#000 60%,transparent)!important;transition:all .2s ease;font-size:14px;color:#fff;min-height:40px;cursor:default}.item .item-text{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}.item .item-id{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px;max-width:250px;font-size:13px}.item .item-area{font-size:12px;color:#ccc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item mat-icon{cursor:pointer;color:#f44336;font-size:18px;width:18px;height:18px;flex-shrink:0;margin-left:8px;transition:color .2s ease,background .2s ease}.item mat-icon:hover{color:#d32f2f}.highlight-active{color:#4caf50!important;text-shadow:0 0 6px #4caf50;transform:scale(1.1);transition:all .2s ease}.drag-handle-active-objects{display:flex;align-items:center;justify-content:space-between;background:#292a2d;padding:2px 8px;cursor:grab;color:#fff;border-radius:5px 5px 0 0}.drag-handle-active-objects .toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.drag-handle-active-objects .toggle-icon:hover{color:#fff;background:#ffffff26}.right-icons{display:flex;align-items:center;gap:6px}.right-icons .drag-indicator-right{font-size:18px!important;width:18px!important;height:18px!important}.active-objects-container{display:flex;flex-direction:column;align-items:center;width:100%;gap:10px;transition:all .3s ease;cursor:default;box-sizing:border-box}.active-objects-container .panel-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;cursor:default;background:color-mix(in srgb,#000 70%,transparent);border-bottom:1px solid rgba(255,255,255,.1)}.active-objects-container .collapsed-title{color:#fff;font-weight:600;font-size:12px;padding:8px 4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.active-objects-container .collapsed-title:hover{color:#1976d2}.header-icons{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;padding:0 10px!important}.header-icons .reset-icon{cursor:pointer;color:#fff;font-size:20px;width:20px;height:20px;transition:all .2s ease;padding:4px}.header-icons .reset-icon:hover{color:#ff9800}.active-objects-container input[type=range]{width:95%;margin:8px auto}.active-objects-content{display:block;width:100%;max-height:278px;overflow:auto;background:#000}.active-objects-content::-webkit-scrollbar{width:12px}.active-objects-content::-webkit-scrollbar-track{background:#757474;border-radius:8px}.active-objects-content::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.active-objects-content::-webkit-scrollbar-thumb:hover{background:#0f1012}.active-objects-content::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.active-objects-content::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.active-objects-content::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.active-objects-content .zoom-icon{color:#fff;font-size:18px;width:18px;height:18px;opacity:.6;transition:all .2s ease}.active-objects-content .zoom-icon:hover{color:#4caf50;opacity:1}.active-objects-content .zoom-icon.zoom-active{color:#4caf50!important;text-shadow:0 0 6px #4caf50;opacity:1}mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%}mat-expansion-panel:last-child{border-bottom:none}mat-expansion-panel ::ng-deep .mat-expansion-panel-header{padding:0 16px;font-weight:500}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-content{display:flex;justify-content:space-between;align-items:center;color:#fff}mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0}.item-list{display:flex;flex-direction:column;padding:8px}@media (max-width: 768px){.active-objects-wrapper{right:.5em;top:8em;max-width:280px;width:280px}.item{font-size:13px;padding:6px 10px}}@media (max-width: 480px){.active-objects-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.item-list{max-height:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ActiveObjectsComponent, isStandalone: true, selector: "activeObjects", inputs: { settings: "settings", profile: "profile" }, outputs: { sessionDone: "sessionDone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"active-objects-wrapper\" \n    cdkDrag \n    cdkDragBoundary=\".map-container\" \n    [cdkDragFreeDragPosition]=\"dragPosition\"\n    (cdkDragEnded)=\"onDragEnded($event)\"\n    [class.collapsed]=\"collapsed\">\n    <div class=\"drag-handle-active-objects\" cdkDragHandle>\n        <mat-icon \n            class=\"active-object-icon\" \n            (click)=\"zoomToAll()\"\n            matTooltip=\"Aktive objekter\" \n            [matTooltipShowDelay]=\"500\"\n            [matTooltipHideDelay]=\"100\" \n            matTooltipPosition=\"above\">\n            format_list_bulleted_add\n        </mat-icon>\n      \n        <div class=\"right-icons\">\n            <mat-icon class=\"toggle-icon\" (click)=\"togglePanel()\">\n                {{ collapsed ? 'flip_to_front' : 'remove' }}\n            </mat-icon>\n        </div>\n      </div>\n      \n    <div class=\"active-objects-container\">\n        @if(!collapsed) {\n            <input                 \n                type=\"range\"\n                min=\"0\"\n                max=\"1\"\n                step=\"0.05\"\n                [(ngModel)]=\"opacity\"\n                (input)=\"updateOpacity()\"\n                (mousedown)=\"stopDrag($event)\"\n                (touchstart)=\"stopDrag($event)\"\n                (pointerdown)=\"stopDrag($event)\"\n                >\n        }\n\n        @if(!collapsed) {\n            <div class=\"active-objects-content\">\n                <div class=\"header-icons\">\n                    <div class=\"header-left-controls\">\n                        <mat-icon \n                            class=\"zoom-icon\" \n                            [class.zoom-active]=\"isZoomedToAll\"\n                            (click)=\"zoomToAll()\" \n                            matTooltip=\"Zoom til alle\" \n                            matTooltipPosition=\"above\">\n                            fit_screen\n                        </mat-icon>                    \n                        <mat-icon \n                            class=\"reset-icon\" \n                            (click)=\"reset()\" \n                            matTooltip=\"Nulstilles\" \n                            matTooltipPosition=\"above\">\n                            replay\n                        </mat-icon>\n                    </div>\n                \n                    <div class=\"header-right-controls\">\n                        @if(!centerPointOk) {\n                            <mat-icon \n                                class=\"warning-icon\" \n                                matTooltip=\"Der er ikke noget centerpunkt og det skal der v\u00E6re\" \n                                matTooltipPosition=\"above\">\n                                warning\n                            </mat-icon>\n                        } @else {\n                            @if (endSessionEnabled) {\n                                <mat-icon \n                                    class=\"end-session-icon\" \n                                    (click)=\"endSession()\" \n                                    matTooltip=\"Afslut\" \n                                    matTooltipPosition=\"above\">\n                                    done_all\n                                </mat-icon>\n                            }\n                        }\n                    </div>\n                </div>\n                @for(featureTypeObj of activeFeatures; track featureTypeObj.featureType) {\n                    <mat-expansion-panel>\n                        <mat-expansion-panel-header \n                        [matTooltip]=\"featureTypeObj.display\"  \n                        [matTooltipShowDelay]=\"200\"\n                        [matTooltipHideDelay]=\"300\" \n                        matTooltipPosition=\"above\">\n                            <span class=\"panel-title\">\n                                {{featureTypeObj.display}} ({{featureTypeObj.features.length}})\n                            </span>\n                        </mat-expansion-panel-header>\n                        <div class=\"item-list\">\n                            @for(item of featureTypeObj.features; track item.id) {\n                                <div class=\"item\">\n                                    <div class=\"item-text\">\n                                        <span class=\"item-id\">{{item.id}}</span>\n                                        <span class=\"item-area\">{{item.area}}</span>\n                                        @if(item.containedMissingIn && item.containedMissingIn.length > 0) {\n                                            <div class=\"item-warning\">\n                                                <mat-icon>error</mat-icon>\n                                                <span>Udenfor {{item.containedMissingIn.join(', ')}}</span>\n                                            </div>                \n                                        }\n                                    </div>\n                                    @if(!item.locked) {\n                                        <mat-icon (click)=\"delete(item.id)\">delete</mat-icon>\n                                    }\n                                    <mat-icon (click)=\"highlight(item.id)\" [class.highlight-active]=\"highlightedId === item.id\">power_settings_new</mat-icon>\n                                </div>\n                            }\n                        </div>\n                    </mat-expansion-panel>\n                }\n            </div>\n        }\n    </div>    \n</div>", styles: [".active-objects-wrapper{position:absolute;top:8em;left:1em;z-index:2;box-shadow:0 2px 10px #0000001a;background:#4c4d51;width:350px;max-width:350px;transition:width .3s ease,max-width .3s ease;border-radius:5px}.active-objects-wrapper.collapsed{width:90px}.active-objects-wrapper.collapsed .drag-handle-active-objects .active-object-icon{cursor:default!important}.active-objects-wrapper.collapsed .drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px;margin-right:10px;line-height:1.3;font-weight:600;color:#bdc1c3cc;font-size:17px}mat-expansion-panel .mat-expansion-panel-header.mat-expanded:hover{background:#ffffff1a!important}.item{display:flex;justify-content:space-between;align-items:center;padding:0 18px;border-radius:4px;background: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;gap:4px}.item .item-text .item-warning{display:inline-flex;align-items:center;gap:6px;font-size:11px;width:fit-content;max-width:100%;color:#dfca0e;margin-top:2px;margin-bottom:2px}.item .item-text .item-warning mat-icon{font-size:14px;width:14px;height:14px;color:#dfca0e;margin:0;cursor:default;flex-shrink:0}.item .item-text .item-warning mat-icon:hover{color:#ccb913}.item .item-text .item-warning span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.item .item-id{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px;max-width:250px;font-size:13px}.item .item-area{font-size:13px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item mat-icon{cursor:pointer;color:#e5281a;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;transition:all .2s ease}.drag-handle-active-objects{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;color:#fff;border-radius:5px 5px 0 0;width:100%;box-sizing:border-box}.drag-handle-active-objects .active-object-icon{cursor:default!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons{display:flex;align-items:center;gap:7px}.drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons .toggle-icon:hover{color:#d3d3d3}.active-objects-container{display:flex;flex-direction:column;align-items:center;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box;background:#4c4d51}.active-objects-container .panel-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;cursor:default;background:color-mix(in srgb,#000 70%,transparent);border-bottom:1px solid rgba(255,255,255,.1)}.active-objects-container .collapsed-title{color:#fff;font-weight:600;font-size:12px;padding:8px 4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.active-objects-container .collapsed-title:hover{color:#1976d2}.header-icons{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:0 10px!important}.header-icons .header-left-controls,.header-icons .header-right-controls{display:flex;align-items:center;gap:8px}.header-icons .header-right-controls{margin-left:auto;padding-left:12px;border-left:1px solid rgba(255,255,255,.15)}.header-icons .zoom-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .zoom-icon:hover{color:#4caf50}.header-icons .zoom-icon.zoom-active{color:#4caf50!important}.header-icons .reset-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .reset-icon:hover{color:#ff9800}.header-icons .warning-icon{color:#ff9800;font-size:18px;cursor:help}.header-icons .end-session-icon{cursor:pointer;color:#4caf50;font-size:18px;transition:all .2s ease}.header-icons .end-session-icon:hover{color:#45a049}.active-objects-container input[type=range]{width:95%;margin:8px auto}.active-objects-content{display:block;width:100%;max-height:278px;overflow:auto;background:#4c4d51}.active-objects-content::-webkit-scrollbar{width:12px}.active-objects-content::-webkit-scrollbar-track{background:#757474;border-radius:8px}.active-objects-content::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.active-objects-content::-webkit-scrollbar-thumb:hover{background:#0f1012}.active-objects-content::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.active-objects-content::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.active-objects-content::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.active-objects-content .zoom-icon{color:#fff;font-size:18px;transition:all .2s ease}.active-objects-content .zoom-icon:hover{color:#4caf50}.active-objects-content .zoom-icon.zoom-active{color:#4caf50!important}mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%}mat-expansion-panel:last-child{border-bottom:none}mat-expansion-panel ::ng-deep .mat-expansion-panel-header{padding:0 16px;font-weight:500}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-content{display:flex;justify-content:space-between;align-items:center;color:#fff}mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0}.item-list{display:flex;flex-direction:column}@media (max-width: 768px){.active-objects-wrapper{right:.5em;top:8em;max-width:280px;width:280px}.item{font-size:13px;padding:6px 10px}}@media (max-width: 480px){.active-objects-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.item-list{max-height:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ActiveObjectsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'activeObjects', imports: [CommonModule, FormsModule, MatExpansionModule, MatIconModule, DragDropModule, MatTooltipModule], template: "<div class=\"active-objects-wrapper\" \n    cdkDrag \n    cdkDragBoundary=\".map-container\" \n    [cdkDragFreeDragPosition]=\"dragPosition\"\n    (cdkDragEnded)=\"onDragEnded($event)\"\n    [class.collapsed]=\"collapsed\">\n    <div class=\"drag-handle-active-objects\" cdkDragHandle>\n        <mat-icon class=\"zoom-icon\" (click)=\"zoomToAll()\">dynamic_form</mat-icon>\n      \n        <div class=\"right-icons\">\n          <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n          <mat-icon class=\"toggle-icon\" (click)=\"togglePanel()\">\n            {{ collapsed ? 'flip_to_front' : 'remove' }}\n          </mat-icon>\n        </div>\n      </div>\n      \n    <div class=\"active-objects-container\">\n        @if(!collapsed) {\n            <input                 \n                type=\"range\"\n                min=\"0\"\n                max=\"1\"\n                step=\"0.05\"\n                [(ngModel)]=\"opacity\"\n                (input)=\"updateOpacity()\"\n                (mousedown)=\"stopDrag($event)\"\n                (touchstart)=\"stopDrag($event)\"\n                (pointerdown)=\"stopDrag($event)\"\n                >\n        }\n\n        @if(!collapsed) {\n            <div class=\"active-objects-content\">\n                <div class=\"header-icons\">\n                    <mat-icon \n                    class=\"zoom-icon\" \n                    [class.zoom-active]=\"isZoomedToAll\"\n                    (click)=\"zoomToAll()\" \n                    matTooltip=\"Zoom til alle\" \n                    matTooltipPosition=\"above\">\n                    fit_screen\n                </mat-icon>                    \n                <mat-icon class=\"reset-icon\" (click)=\"reset()\" matTooltip=\"Nulstilles\" matTooltipPosition=\"above\">replay</mat-icon>\n                </div>\n                @for(featureTypeObj of activeFeatures; track featureTypeObj.featureType) {\n                    <mat-expansion-panel>\n                        <mat-expansion-panel-header \n                        [matTooltip]=\"featureTypeObj.display\"  \n                        [matTooltipShowDelay]=\"200\"\n                        [matTooltipHideDelay]=\"300\" \n                        matTooltipPosition=\"right\">\n                            <span class=\"panel-title\">\n                                {{featureTypeObj.display}} ({{featureTypeObj.features.length}})\n                            </span>\n                        </mat-expansion-panel-header>\n                        <div class=\"item-list\">\n                            @for(item of featureTypeObj.features; track item.id) {\n                                <div class=\"item\">\n                                    <div class=\"item-text\">\n                                        <span class=\"item-id\">{{item.id}}</span>\n                                        <span class=\"item-area\">{{item.area}}</span>\n                                        @if(item.containedMissingIn && item.containedMissingIn.length > 0) {\n                                            <span>Udenfor {{item.containedMissingIn.join(', ')}} </span>                    \n                                        }\n                                    </div>\n                                    @if(!item.locked) {\n                                        <mat-icon (click)=\"delete(item.id)\">delete</mat-icon>\n                                    }\n                                    <mat-icon (click)=\"highlight(item.id)\" [class.highlight-active]=\"highlightedId === item.id\">power_settings_new</mat-icon>\n                                </div>\n                            }\n                        </div>\n                    </mat-expansion-panel>\n                }\n                @if(!centerPointOk) {\n                    <span>\n                        Der er ikke noget centerpunkt og det skal der v\u00E6re\n                    </span>\n                } @else {\n                    @if (endSessionEnabled) {\n                        <button (click)=\"endSession()\">Afslut</button>\n                    }\n                }\n            </div>\n        }\n    </div>    \n</div>", styles: [".active-objects-wrapper{position:absolute;top:8em;left:1em;z-index:2;cursor:grab;box-shadow:0 2px 10px #0000001a;background:#292a2d;width:350px;max-width:350px;transition:width .3s ease,max-width .3s ease;border-radius:5px 5px 0 0}.active-objects-wrapper.collapsed{width:90px}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px;margin-right:10px;line-height:1.3;font-weight:600;color:#bdc1c3cc;font-size:17px}.item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:4px;background:color-mix(in srgb,#000 60%,transparent)!important;transition:all .2s ease;font-size:14px;color:#fff;min-height:40px;cursor:default}.item .item-text{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}.item .item-id{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px;max-width:250px;font-size:13px}.item .item-area{font-size:12px;color:#ccc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item mat-icon{cursor:pointer;color:#f44336;font-size:18px;width:18px;height:18px;flex-shrink:0;margin-left:8px;transition:color .2s ease,background .2s ease}.item mat-icon:hover{color:#d32f2f}.highlight-active{color:#4caf50!important;text-shadow:0 0 6px #4caf50;transform:scale(1.1);transition:all .2s ease}.drag-handle-active-objects{display:flex;align-items:center;justify-content:space-between;background:#292a2d;padding:2px 8px;cursor:grab;color:#fff;border-radius:5px 5px 0 0}.drag-handle-active-objects .toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.drag-handle-active-objects .toggle-icon:hover{color:#fff;background:#ffffff26}.right-icons{display:flex;align-items:center;gap:6px}.right-icons .drag-indicator-right{font-size:18px!important;width:18px!important;height:18px!important}.active-objects-container{display:flex;flex-direction:column;align-items:center;width:100%;gap:10px;transition:all .3s ease;cursor:default;box-sizing:border-box}.active-objects-container .panel-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;cursor:default;background:color-mix(in srgb,#000 70%,transparent);border-bottom:1px solid rgba(255,255,255,.1)}.active-objects-container .collapsed-title{color:#fff;font-weight:600;font-size:12px;padding:8px 4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.active-objects-container .collapsed-title:hover{color:#1976d2}.header-icons{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;padding:0 10px!important}.header-icons .reset-icon{cursor:pointer;color:#fff;font-size:20px;width:20px;height:20px;transition:all .2s ease;padding:4px}.header-icons .reset-icon:hover{color:#ff9800}.active-objects-container input[type=range]{width:95%;margin:8px auto}.active-objects-content{display:block;width:100%;max-height:278px;overflow:auto;background:#000}.active-objects-content::-webkit-scrollbar{width:12px}.active-objects-content::-webkit-scrollbar-track{background:#757474;border-radius:8px}.active-objects-content::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.active-objects-content::-webkit-scrollbar-thumb:hover{background:#0f1012}.active-objects-content::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.active-objects-content::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.active-objects-content::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.active-objects-content .zoom-icon{color:#fff;font-size:18px;width:18px;height:18px;opacity:.6;transition:all .2s ease}.active-objects-content .zoom-icon:hover{color:#4caf50;opacity:1}.active-objects-content .zoom-icon.zoom-active{color:#4caf50!important;text-shadow:0 0 6px #4caf50;opacity:1}mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%}mat-expansion-panel:last-child{border-bottom:none}mat-expansion-panel ::ng-deep .mat-expansion-panel-header{padding:0 16px;font-weight:500}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-content{display:flex;justify-content:space-between;align-items:center;color:#fff}mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0}.item-list{display:flex;flex-direction:column;padding:8px}@media (max-width: 768px){.active-objects-wrapper{right:.5em;top:8em;max-width:280px;width:280px}.item{font-size:13px;padding:6px 10px}}@media (max-width: 480px){.active-objects-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.item-list{max-height:200px}}\n"] }]
+            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 \n            class=\"active-object-icon\" \n            (click)=\"zoomToAll()\"\n            matTooltip=\"Aktive objekter\" \n            [matTooltipShowDelay]=\"500\"\n            [matTooltipHideDelay]=\"100\" \n            matTooltipPosition=\"above\">\n            format_list_bulleted_add\n        </mat-icon>\n      \n        <div class=\"right-icons\">\n            <mat-icon class=\"toggle-icon\" (click)=\"togglePanel()\">\n                {{ collapsed ? 'flip_to_front' : 'remove' }}\n            </mat-icon>\n        </div>\n      </div>\n      \n    <div class=\"active-objects-container\">\n        @if(!collapsed) {\n            <input                 \n                type=\"range\"\n                min=\"0\"\n                max=\"1\"\n                step=\"0.05\"\n                [(ngModel)]=\"opacity\"\n                (input)=\"updateOpacity()\"\n                (mousedown)=\"stopDrag($event)\"\n                (touchstart)=\"stopDrag($event)\"\n                (pointerdown)=\"stopDrag($event)\"\n                >\n        }\n\n        @if(!collapsed) {\n            <div class=\"active-objects-content\">\n                <div class=\"header-icons\">\n                    <div class=\"header-left-controls\">\n                        <mat-icon \n                            class=\"zoom-icon\" \n                            [class.zoom-active]=\"isZoomedToAll\"\n                            (click)=\"zoomToAll()\" \n                            matTooltip=\"Zoom til alle\" \n                            matTooltipPosition=\"above\">\n                            fit_screen\n                        </mat-icon>                    \n                        <mat-icon \n                            class=\"reset-icon\" \n                            (click)=\"reset()\" \n                            matTooltip=\"Nulstilles\" \n                            matTooltipPosition=\"above\">\n                            replay\n                        </mat-icon>\n                    </div>\n                \n                    <div class=\"header-right-controls\">\n                        @if(!centerPointOk) {\n                            <mat-icon \n                                class=\"warning-icon\" \n                                matTooltip=\"Der er ikke noget centerpunkt og det skal der v\u00E6re\" \n                                matTooltipPosition=\"above\">\n                                warning\n                            </mat-icon>\n                        } @else {\n                            @if (endSessionEnabled) {\n                                <mat-icon \n                                    class=\"end-session-icon\" \n                                    (click)=\"endSession()\" \n                                    matTooltip=\"Afslut\" \n                                    matTooltipPosition=\"above\">\n                                    done_all\n                                </mat-icon>\n                            }\n                        }\n                    </div>\n                </div>\n                @for(featureTypeObj of activeFeatures; track featureTypeObj.featureType) {\n                    <mat-expansion-panel>\n                        <mat-expansion-panel-header \n                        [matTooltip]=\"featureTypeObj.display\"  \n                        [matTooltipShowDelay]=\"200\"\n                        [matTooltipHideDelay]=\"300\" \n                        matTooltipPosition=\"above\">\n                            <span class=\"panel-title\">\n                                {{featureTypeObj.display}} ({{featureTypeObj.features.length}})\n                            </span>\n                        </mat-expansion-panel-header>\n                        <div class=\"item-list\">\n                            @for(item of featureTypeObj.features; track item.id) {\n                                <div class=\"item\">\n                                    <div class=\"item-text\">\n                                        <span class=\"item-id\">{{item.id}}</span>\n                                        <span class=\"item-area\">{{item.area}}</span>\n                                        @if(item.containedMissingIn && item.containedMissingIn.length > 0) {\n                                            <div class=\"item-warning\">\n                                                <mat-icon>error</mat-icon>\n                                                <span>Udenfor {{item.containedMissingIn.join(', ')}}</span>\n                                            </div>                \n                                        }\n                                    </div>\n                                    @if(!item.locked) {\n                                        <mat-icon (click)=\"delete(item.id)\">delete</mat-icon>\n                                    }\n                                    <mat-icon (click)=\"highlight(item.id)\" [class.highlight-active]=\"highlightedId === item.id\">power_settings_new</mat-icon>\n                                </div>\n                            }\n                        </div>\n                    </mat-expansion-panel>\n                }\n            </div>\n        }\n    </div>    \n</div>", styles: [".active-objects-wrapper{position:absolute;top:8em;left:1em;z-index:2;box-shadow:0 2px 10px #0000001a;background:#4c4d51;width:350px;max-width:350px;transition:width .3s ease,max-width .3s ease;border-radius:5px}.active-objects-wrapper.collapsed{width:90px}.active-objects-wrapper.collapsed .drag-handle-active-objects .active-object-icon{cursor:default!important}.active-objects-wrapper.collapsed .drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px;margin-right:10px;line-height:1.3;font-weight:600;color:#bdc1c3cc;font-size:17px}mat-expansion-panel .mat-expansion-panel-header.mat-expanded:hover{background:#ffffff1a!important}.item{display:flex;justify-content:space-between;align-items:center;padding:0 18px;border-radius:4px;background: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;gap:4px}.item .item-text .item-warning{display:inline-flex;align-items:center;gap:6px;font-size:11px;width:fit-content;max-width:100%;color:#dfca0e;margin-top:2px;margin-bottom:2px}.item .item-text .item-warning mat-icon{font-size:14px;width:14px;height:14px;color:#dfca0e;margin:0;cursor:default;flex-shrink:0}.item .item-text .item-warning mat-icon:hover{color:#ccb913}.item .item-text .item-warning span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.item .item-id{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px;max-width:250px;font-size:13px}.item .item-area{font-size:13px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item mat-icon{cursor:pointer;color:#e5281a;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;transition:all .2s ease}.drag-handle-active-objects{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;color:#fff;border-radius:5px 5px 0 0;width:100%;box-sizing:border-box}.drag-handle-active-objects .active-object-icon{cursor:default!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons{display:flex;align-items:center;gap:7px}.drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons .toggle-icon:hover{color:#d3d3d3}.active-objects-container{display:flex;flex-direction:column;align-items:center;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box;background:#4c4d51}.active-objects-container .panel-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;cursor:default;background:color-mix(in srgb,#000 70%,transparent);border-bottom:1px solid rgba(255,255,255,.1)}.active-objects-container .collapsed-title{color:#fff;font-weight:600;font-size:12px;padding:8px 4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.active-objects-container .collapsed-title:hover{color:#1976d2}.header-icons{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:0 10px!important}.header-icons .header-left-controls,.header-icons .header-right-controls{display:flex;align-items:center;gap:8px}.header-icons .header-right-controls{margin-left:auto;padding-left:12px;border-left:1px solid rgba(255,255,255,.15)}.header-icons .zoom-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .zoom-icon:hover{color:#4caf50}.header-icons .zoom-icon.zoom-active{color:#4caf50!important}.header-icons .reset-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .reset-icon:hover{color:#ff9800}.header-icons .warning-icon{color:#ff9800;font-size:18px;cursor:help}.header-icons .end-session-icon{cursor:pointer;color:#4caf50;font-size:18px;transition:all .2s ease}.header-icons .end-session-icon:hover{color:#45a049}.active-objects-container input[type=range]{width:95%;margin:8px auto}.active-objects-content{display:block;width:100%;max-height:278px;overflow:auto;background:#4c4d51}.active-objects-content::-webkit-scrollbar{width:12px}.active-objects-content::-webkit-scrollbar-track{background:#757474;border-radius:8px}.active-objects-content::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.active-objects-content::-webkit-scrollbar-thumb:hover{background:#0f1012}.active-objects-content::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.active-objects-content::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.active-objects-content::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.active-objects-content .zoom-icon{color:#fff;font-size:18px;transition:all .2s ease}.active-objects-content .zoom-icon:hover{color:#4caf50}.active-objects-content .zoom-icon.zoom-active{color:#4caf50!important}mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%}mat-expansion-panel:last-child{border-bottom:none}mat-expansion-panel ::ng-deep .mat-expansion-panel-header{padding:0 16px;font-weight:500}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-content{display:flex;justify-content:space-between;align-items:center;color:#fff}mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0}.item-list{display:flex;flex-direction:column}@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 }]
@@ -3398,7 +3769,7 @@ class WFSSearchService {
     wfsFormat = new WFS();
     wktFormat = new WKT();
     _searcheableLayers = [];
-    geoJsonFormat = new GeoJSON({ dataProjection: 'EPSG:25832', featureProjection: 'EPSG:25832' });
+    geoJsonFormat = new GeoJSON$1({ dataProjection: 'EPSG:25832', featureProjection: 'EPSG:25832' });
     _serializer = new XMLSerializer();
     search(searchValue, geometry, maxCount = 5) {
         const wftSearches = [];
@@ -3424,7 +3795,7 @@ class WFSSearchService {
                 return result;
             })));
         });
-        return combineLatest(wftSearches);
+        return 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)
@@ -3473,14 +3844,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
         }] });
 
 class AddressSearchService {
-    name = 'Address Search';
+    name = 'Adresser';
     _http = inject(HttpClient);
     _config = inject(GISKOMPONENT_CONFIG);
+    _current = inject(CurrentItemsService);
     _baseUrl = `${this._config.apiBaseUrl}/api/address/addresses`;
     search(searchValue, geometry, maxCount = 5) {
-        const params = new HttpParams().append('search', searchValue ?? '').append('regionskode', '1082');
-        return this._http.get(this._baseUrl, { params }).pipe(map(r => ([{ total: 0, title: this.name, items: r.map(i => ({ ...i, showMetadata: false })) }])));
-        // return of([]);
+        const regionskode = this._current.profile?.searchRegionKode ?? '1084';
+        const params = new HttpParams().append('search', searchValue ?? 'test').append('regionskode', regionskode);
+        return this._http.get(this._baseUrl, { params }).pipe(map(r => ({ total: 0, title: this.name, items: r.map(i => ({ ...i, showMetadata: false })) })));
     }
     onSelect(searchResult, targetSrs) {
         // TO DO - implement logic for when an item is selected
@@ -3499,13 +3871,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
         }] });
 
 class CadastreSearchService {
-    name = 'Cadastre Search';
+    name = 'Matrikler';
     _http = inject(HttpClient);
     _config = inject(GISKOMPONENT_CONFIG);
+    _current = inject(CurrentItemsService);
     _baseUrl = `${this._config.apiBaseUrl}/api/address/cadastres`;
     search(searchValue, geometry, maxCount = 5) {
-        const params = new HttpParams().append('search', searchValue ?? '').append('regionskode', '1082');
-        return this._http.get(this._baseUrl, { params }).pipe(map(r => ([{ total: 0, title: this.name, items: r.map(i => ({ ...i, showMetadata: false })) }])));
+        const regionskode = this._current.profile?.searchRegionKode ?? '1084';
+        const params = new HttpParams().append('search', searchValue ?? 'test').append('regionskode', regionskode);
+        return this._http.get(this._baseUrl, { params }).pipe(map(r => ({ total: 0, title: this.name, items: r.map(i => ({ ...i, showMetadata: false })) })));
     }
     onSelect(searchResult, targetSrs) {
         // TO DO - implement logic for when an item is selected
@@ -3534,12 +3908,12 @@ class MapSearchComponent {
     _highlight = inject(HighlightService);
     _searchSubject = new Subject();
     _searchService = inject(SearchProviderService);
-    // private _searchProviderService = inject(SearchProviderService);
     _wfsSearch = inject(WFSSearchService);
     _addressSearch = inject(AddressSearchService);
     _cadastreSearch = inject(CadastreSearchService);
     _layerHelperService = inject(LayerHelperService);
     _layoutService = inject(LayoutService);
+    _zoomService = inject(ZoomService);
     ngOnInit() {
         this._layerHelperService.activeLayersChanged
             .subscribe(() => this._addWFSSearchLayers());
@@ -3558,6 +3932,15 @@ class MapSearchComponent {
             this._addWFSSearchLayers();
         }
     }
+    displaySearchFn = (item) => {
+        if (!item) {
+            return '';
+        }
+        if (typeof item === 'string') {
+            return item;
+        }
+        return item.header;
+    };
     _addWFSSearch() {
         this._searchService.searchProviders = [];
         this._searchService.searchProviders.push(this._addressSearch);
@@ -3589,9 +3972,6 @@ class MapSearchComponent {
             return;
         }
         this._searchSubject.next(this.searchAddress);
-        // this._wfsSearch.search(this.searchAddress).subscribe(r => {
-        //   this.filteredResults = [r];      
-        // });
     }
     toggleSearch() {
         this.collapsed = !this.collapsed;
@@ -3599,13 +3979,20 @@ class MapSearchComponent {
             this.searchAddress = '';
             this.filterResults();
         }
-        if (this.profile.searchInitialPosition.includes('højre')) {
+        if (this.profile.searchInitialPosition?.includes('højre')) {
             this._layoutService.bringElementIntoViewIfNeeded('.search-container', -3, this.collapsed);
         }
     }
     highlight(wkt, event) {
         event.stopPropagation();
-        this._highlight.highlight(wkt);
+        const wktFormatter = new WKT();
+        const geom = wktFormatter.readGeometry(wkt);
+        if (geom.getType() === 'Point') {
+            this._zoomService.zoomToFeatures(wkt);
+        }
+        else {
+            this._highlight.highlight(wkt);
+        }
     }
     onDragEnded(event) {
         const position = event.source.getFreeDragPosition();
@@ -3626,9 +4013,14 @@ class MapSearchComponent {
             if (savedPosition) {
                 this.dragPosition = JSON.parse(savedPosition);
             }
-            else if (this.profile) {
+            else if (this.profile && this.profile.searchInitialPosition) {
                 this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.searchInitialPosition);
             }
+            else {
+                // Default position for search
+                this.dragPosition = { x: 29, y: -125 };
+                this._savePosition(this.dragPosition);
+            }
         }
         catch (error) {
             console.error('Error loading position from localStorage:', error);
@@ -3636,7 +4028,7 @@ class MapSearchComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MapSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MapSearchComponent, isStandalone: true, selector: "lib-map-search", inputs: { profile: "profile" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"search-container\" \n  cdkDrag \n  cdkDragBoundary=\".map-container\" \n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"onDragEnded($event)\"\n  [class.collapsed]=\"collapsed\">\n  <div class=\"drag-handle\" cdkDragHandle>\n    <mat-icon class=\"icon-left\">search</mat-icon>\n    <div class=\"right-icons\">\n      <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n      <mat-icon class=\"toggle-icon\" (click)=\"toggleSearch()\">\n        {{ collapsed ? 'flip_to_front' : 'remove' }}\n      </mat-icon>\n    </div>\n  </div>\n\n  <div class=\"search-content\" *ngIf=\"!collapsed\">\n    <mat-form-field appearance=\"outline\" class=\"search-field\">\n      <mat-label>S\u00F8g</mat-label>\n      <input\n        type=\"text\"\n        matInput\n        [(ngModel)]=\"searchAddress\"\n        [matAutocomplete]=\"auto\"\n        (input)=\"filterResults()\"\n      />\n      <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n          <span class=\"result-title\">\n            {{ result.title }} ({{result.items.length}} af {{ result.total }})\n          </span>\n          <div *ngFor=\"let item of result.items\" class=\"search-result-item\">\n            <span class=\"item-header\">\n              {{item.header}}\n            </span>\n            <mat-icon (click)=\"highlight(item.wkt, $event)\">power_settings_new </mat-icon>\n          </div>\n        </mat-option>\n      </mat-autocomplete>\n    </mat-form-field>\n  </div>\n</div>", styles: [".search-container{position:absolute;top:8em;left:1em;z-index:2;cursor:grab;max-width:400px;min-width:48px;width:auto}.search-container.cdk-drag-dragging{opacity:.8;cursor:grab}.compact-icon.custom-image-icon{padding:4px;background:none;border:1px solid rgba(255,255,255,.2)}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.compact-icon.custom-image-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985);border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.compact-icon.custom-image-icon:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e94d}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.drag-handle{display:flex;align-items:center;justify-content:space-between;background:#292a2d;padding:2px 8px;cursor:grab;border-radius:5px 5px 0 0;color:#fff}.right-icons{display:flex;align-items:center;gap:6px}.right-icons .drag-indicator-right{font-size:18px!important;width:18px!important;height:18px!important}.search-content{display:flex;flex-direction:column;background:#292a2d;padding:6px;transition:all .3s ease;box-sizing:border-box;cursor:default;border-radius:0 0 5px 5px}.compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.compact-icon.custom-image-icon{background:none;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer}.toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.toggle-icon:hover{color:#fff;background:#ffffff26}.search-field{width:100%;min-width:200px;cursor:pointer;flex:1}.search-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent}.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important;border-width:1.5px!important;transition:border-color .3s ease,border-width .3s ease}.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important}.search-field ::ng-deep .mat-mdc-form-field-label{color:#fff!important;font-weight:500;font-size:15px}.search-field ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-form-field-label{color:#2196f3!important}.search-field ::ng-deep .mat-mdc-input-element{font-size:15px;color:#fff;font-weight:400;line-height:1.5}.search-field ::ng-deep .mat-mdc-input-element::placeholder{color:#ccc;font-weight:400;opacity:.8}.search-field ::ng-deep .mdc-floating-label{padding:0 4px;left:40px!important}::ng-deep .mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field__input{margin-left:12px;color:#fff!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{color:#fff!important}::ng-deep .mat-mdc-form-field-flex{height:40px!important}::ng-deep .mat-mdc-autocomplete-panel{border-radius:5px!important;max-height:320px!important;background:color-mix(in srgb,#000 85%,transparent)!important;box-shadow:0 8px 24px #00000026!important;margin-top:64px;overflow-y:auto!important;padding:8px!important}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar{width:12px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 0!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:inherit;line-height:1.5}.search-result-option{display:flex;flex-direction:column;gap:8px}.result-title{font-weight:600;font-size:13px;color:#bdc1c3cc!important;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.search-result-item{display:flex;align-items:center;justify-content:space-between;padding:6px 4px;border-radius:5px;margin-left:4px;transition:all .6s ease}.search-result-item:hover{color:#f4f4f5;background:#ffffff1a}.search-result-item .item-header{font-size:14px;color:#fff!important;flex:1;font-weight:500}.search-result-item mat-icon{color:#fff!important;font-size:20px;width:20px;height:20px;cursor:pointer;transition:all .2s ease}.search-result-item mat-icon:hover{color:#f7f7f7!important}::ng-deep .mat-mdc-text-field-wrapper{background:color-mix(in srgb,#000 60%,transparent);border-radius:5px;box-shadow:#0000004d 0 1px 4px -1px;transition:all .3s cubic-bezier(.4,0,.2,1)}::ng-deep .mat-mdc-text-field-wrapper:hover{box-shadow:0 4px 16px #00000026}::ng-deep .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{color:#fff!important}::ng-deep .mdc-text-field{border-radius:5px!important}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:350px}.search-container.collapsed{width:44px;min-width:88px;max-width:44px}.search-field{min-width:180px}.toggle-icon{font-size:18px;width:18px;height:18px}}@media (max-width: 480px){.search-container{left:1.5em;right:1.5em;max-width:calc(100vw - 3em)}.search-container.collapsed{width:40px;min-width:40px;max-width:40px;right:auto}.search-field{min-width:150px}.search-field ::ng-deep .mat-mdc-input-element{font-size:14px}::ng-deep .mat-mdc-autocomplete-panel{max-height:240px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:48px!important;padding:10px 16px!important}.toggle-icon{font-size:16px;width:16px;height:16px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MapSearchComponent, isStandalone: true, selector: "lib-map-search", inputs: { profile: "profile" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"search-container\" \n  cdkDrag \n  cdkDragBoundary=\".map-container\" \n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"onDragEnded($event)\"\n  [class.collapsed]=\"collapsed\">\n  <div class=\"drag-handle\" cdkDragHandle>\n    <mat-icon \n      class=\"icon-left\" \n      matTooltip=\"S\u00F8g\" \n      [matTooltipShowDelay]=\"500\"\n      [matTooltipHideDelay]=\"100\" \n      matTooltipPosition=\"above\">\n      manage_search\n    </mat-icon>\n    <div class=\"right-icons\">    \n      <mat-icon class=\"toggle-icon\" (click)=\"toggleSearch()\">\n        {{ collapsed ? 'flip_to_front' : 'remove' }}\n      </mat-icon>\n    </div>\n  </div>\n\n  <div class=\"search-content\" *ngIf=\"!collapsed\">\n    <mat-form-field appearance=\"outline\" class=\"search-field\">\n      <mat-label>S\u00F8g</mat-label>\n      <input\n        type=\"text\"\n        matInput\n        [(ngModel)]=\"searchAddress\"\n        [matAutocomplete]=\"auto\"\n        (input)=\"filterResults()\"\n      />\n      <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displaySearchFn\">\n        <span *ngFor=\"let result of filteredResults\" >\n          <span class=\"result-title\">\n            {{ result.title }} ({{result.items.length}}<span *ngIf=\"result.total\">af {{result.total }}</span>)\n          </span>\n          <mat-option *ngFor=\"let item of result.items\" [value]=item>\n            <div class=\"item-container\">\n              <span class=\"item-header\">{{item.header}}</span>\n              <mat-icon (click)=\"highlight(item.wkt, $event)\">power_settings_new</mat-icon>\n            </div>\n          </mat-option>\n        </span>\n      </mat-autocomplete>\n    </mat-form-field>\n  </div>\n</div>", styles: [".search-container{position:absolute;top:8em;left:1em;z-index:2;max-width:550px;min-width:48px;width:auto;border-radius:5px;background:#4c4d51;transition:width .3s ease,max-width .3s ease}.search-container.collapsed{width:90px;max-width:90px;min-width:90px}.search-container.collapsed .drag-handle{width:90px;box-sizing:border-box}.search-container.collapsed .drag-handle .icon-left{margin-left:3px}.search-container.cdk-drag-dragging{opacity:.8;cursor:grab}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:450px}.search-container.collapsed{width:90px!important;min-width:90px!important;max-width:90px!important}}@media (max-width: 480px){.search-container{left:1.5em;right:1.5em;max-width:calc(100vw - 3em)}.search-container.collapsed{width:90px!important;min-width:90px!important;max-width:90px!important}}.compact-icon.custom-image-icon{padding:4px;background:none;border:1px solid rgba(255,255,255,.2)}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.compact-icon.custom-image-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985);border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.compact-icon.custom-image-icon:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e94d}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.drag-handle{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;border-radius:5px 5px 0 0;color:#fff}.drag-handle .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.search-content{display:flex;flex-direction:column;background:#4c4d51;padding:6px;transition:all .3s ease;box-sizing:border-box;cursor:default;border-radius:0 0 5px 5px}.compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.compact-icon.custom-image-icon{background:none;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer}.toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}.search-field{width:100%;min-width:300px;cursor:pointer;flex:1}.search-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent}.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important;border-width:1.5px!important;transition:border-color .3s ease,border-width .3s ease}.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important}.search-field ::ng-deep .mat-mdc-form-field-label{color:#fff!important;font-weight:500;font-size:15px}.search-field ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-form-field-label{color:#2196f3!important}.search-field ::ng-deep .mat-mdc-input-element{font-size:15px;color:#fff;font-weight:400;line-height:1.5}.search-field ::ng-deep .mat-mdc-input-element::placeholder{color:#ccc;font-weight:400;opacity:.8}.search-field ::ng-deep .mdc-floating-label{padding:0 4px;left:40px!important}::ng-deep .mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field__input{margin-left:12px;color:#fff!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{color:#fff!important}::ng-deep .mat-mdc-form-field-flex{height:40px!important}::ng-deep .mat-mdc-autocomplete-panel{border-radius:5px!important;max-height:320px!important;background:#4c4d51!important;box-shadow:0 8px 24px #00000026!important;margin-top:35px;overflow-y:auto!important;padding:8px!important}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar{width:12px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover{background-color:#ffffff14!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected{background-color:#ffffff1f!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;width:100%}.search-result-option{display:flex;flex-direction:column;gap:8px}.result-title{font-weight:600;font-size:13px;color:#bdc1c3cc!important;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.item-container{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px}.item-container .item-header{font-size:14px;color:#fff!important;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.item-container mat-icon{color:#fff!important;font-size:20px;width:20px;height:20px;flex-shrink:0;cursor:pointer;transition:all .2s ease}.item-container mat-icon:hover{color:#f7f7f7!important}.search-result-item{display:flex;align-items:center;justify-content:space-between;padding:6px 4px;border-radius:5px;margin-left:4px;transition:all .6s ease}.search-result-item:hover{color:#f4f4f5;background:#ffffff1a}.search-result-item .item-header{font-size:14px;color:#fff!important;flex:1;font-weight:500}.search-result-item mat-icon{color:#fff!important;font-size:20px;width:20px;height:20px;cursor:pointer;transition:all .2s ease}.search-result-item mat-icon:hover{color:#f7f7f7!important}::ng-deep .mat-mdc-text-field-wrapper{background:#6d6f73!important;border-radius:5px;transition:all .3s cubic-bezier(.4,0,.2,1)}::ng-deep .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{color:#fff!important}::ng-deep .mdc-text-field{border-radius:5px!important}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:450px}.search-container.collapsed{width:88px;min-width:88px;max-width:88px}.search-field{min-width:250px}.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}.item-container{gap:8px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MapSearchComponent, decorators: [{
             type: Component,
@@ -3648,8 +4040,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         MatAutocompleteModule,
                         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 class=\"icon-left\">search</mat-icon>\n    <div class=\"right-icons\">\n      <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n      <mat-icon class=\"toggle-icon\" (click)=\"toggleSearch()\">\n        {{ collapsed ? 'flip_to_front' : 'remove' }}\n      </mat-icon>\n    </div>\n  </div>\n\n  <div class=\"search-content\" *ngIf=\"!collapsed\">\n    <mat-form-field appearance=\"outline\" class=\"search-field\">\n      <mat-label>S\u00F8g</mat-label>\n      <input\n        type=\"text\"\n        matInput\n        [(ngModel)]=\"searchAddress\"\n        [matAutocomplete]=\"auto\"\n        (input)=\"filterResults()\"\n      />\n      <mat-autocomplete #auto=\"matAutocomplete\">\n        <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n          <span class=\"result-title\">\n            {{ result.title }} ({{result.items.length}} af {{ result.total }})\n          </span>\n          <div *ngFor=\"let item of result.items\" class=\"search-result-item\">\n            <span class=\"item-header\">\n              {{item.header}}\n            </span>\n            <mat-icon (click)=\"highlight(item.wkt, $event)\">power_settings_new </mat-icon>\n          </div>\n        </mat-option>\n      </mat-autocomplete>\n    </mat-form-field>\n  </div>\n</div>", styles: [".search-container{position:absolute;top:8em;left:1em;z-index:2;cursor:grab;max-width:400px;min-width:48px;width:auto}.search-container.cdk-drag-dragging{opacity:.8;cursor:grab}.compact-icon.custom-image-icon{padding:4px;background:none;border:1px solid rgba(255,255,255,.2)}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.compact-icon.custom-image-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985);border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.compact-icon.custom-image-icon:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e94d}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.drag-handle{display:flex;align-items:center;justify-content:space-between;background:#292a2d;padding:2px 8px;cursor:grab;border-radius:5px 5px 0 0;color:#fff}.right-icons{display:flex;align-items:center;gap:6px}.right-icons .drag-indicator-right{font-size:18px!important;width:18px!important;height:18px!important}.search-content{display:flex;flex-direction:column;background:#292a2d;padding:6px;transition:all .3s ease;box-sizing:border-box;cursor:default;border-radius:0 0 5px 5px}.compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.compact-icon.custom-image-icon{background:none;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer}.toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.toggle-icon:hover{color:#fff;background:#ffffff26}.search-field{width:100%;min-width:200px;cursor:pointer;flex:1}.search-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent}.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important;border-width:1.5px!important;transition:border-color .3s ease,border-width .3s ease}.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important}.search-field ::ng-deep .mat-mdc-form-field-label{color:#fff!important;font-weight:500;font-size:15px}.search-field ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-form-field-label{color:#2196f3!important}.search-field ::ng-deep .mat-mdc-input-element{font-size:15px;color:#fff;font-weight:400;line-height:1.5}.search-field ::ng-deep .mat-mdc-input-element::placeholder{color:#ccc;font-weight:400;opacity:.8}.search-field ::ng-deep .mdc-floating-label{padding:0 4px;left:40px!important}::ng-deep .mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field__input{margin-left:12px;color:#fff!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{color:#fff!important}::ng-deep .mat-mdc-form-field-flex{height:40px!important}::ng-deep .mat-mdc-autocomplete-panel{border-radius:5px!important;max-height:320px!important;background:color-mix(in srgb,#000 85%,transparent)!important;box-shadow:0 8px 24px #00000026!important;margin-top:64px;overflow-y:auto!important;padding:8px!important}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar{width:12px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 0!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:inherit;line-height:1.5}.search-result-option{display:flex;flex-direction:column;gap:8px}.result-title{font-weight:600;font-size:13px;color:#bdc1c3cc!important;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.search-result-item{display:flex;align-items:center;justify-content:space-between;padding:6px 4px;border-radius:5px;margin-left:4px;transition:all .6s ease}.search-result-item:hover{color:#f4f4f5;background:#ffffff1a}.search-result-item .item-header{font-size:14px;color:#fff!important;flex:1;font-weight:500}.search-result-item mat-icon{color:#fff!important;font-size:20px;width:20px;height:20px;cursor:pointer;transition:all .2s ease}.search-result-item mat-icon:hover{color:#f7f7f7!important}::ng-deep .mat-mdc-text-field-wrapper{background:color-mix(in srgb,#000 60%,transparent);border-radius:5px;box-shadow:#0000004d 0 1px 4px -1px;transition:all .3s cubic-bezier(.4,0,.2,1)}::ng-deep .mat-mdc-text-field-wrapper:hover{box-shadow:0 4px 16px #00000026}::ng-deep .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{color:#fff!important}::ng-deep .mdc-text-field{border-radius:5px!important}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:350px}.search-container.collapsed{width:44px;min-width:88px;max-width:44px}.search-field{min-width:180px}.toggle-icon{font-size:18px;width:18px;height:18px}}@media (max-width: 480px){.search-container{left:1.5em;right:1.5em;max-width:calc(100vw - 3em)}.search-container.collapsed{width:40px;min-width:40px;max-width:40px;right:auto}.search-field{min-width:150px}.search-field ::ng-deep .mat-mdc-input-element{font-size:14px}::ng-deep .mat-mdc-autocomplete-panel{max-height:240px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:48px!important;padding:10px 16px!important}.toggle-icon{font-size:16px;width:16px;height:16px}}\n"] }]
+                        DragDropModule,
+                        MatTooltipModule
+                    ], 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 \n      class=\"icon-left\" \n      matTooltip=\"S\u00F8g\" \n      [matTooltipShowDelay]=\"500\"\n      [matTooltipHideDelay]=\"100\" \n      matTooltipPosition=\"above\">\n      manage_search\n    </mat-icon>\n    <div class=\"right-icons\">    \n      <mat-icon class=\"toggle-icon\" (click)=\"toggleSearch()\">\n        {{ collapsed ? 'flip_to_front' : 'remove' }}\n      </mat-icon>\n    </div>\n  </div>\n\n  <div class=\"search-content\" *ngIf=\"!collapsed\">\n    <mat-form-field appearance=\"outline\" class=\"search-field\">\n      <mat-label>S\u00F8g</mat-label>\n      <input\n        type=\"text\"\n        matInput\n        [(ngModel)]=\"searchAddress\"\n        [matAutocomplete]=\"auto\"\n        (input)=\"filterResults()\"\n      />\n      <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displaySearchFn\">\n        <span *ngFor=\"let result of filteredResults\" >\n          <span class=\"result-title\">\n            {{ result.title }} ({{result.items.length}}<span *ngIf=\"result.total\">af {{result.total }}</span>)\n          </span>\n          <mat-option *ngFor=\"let item of result.items\" [value]=item>\n            <div class=\"item-container\">\n              <span class=\"item-header\">{{item.header}}</span>\n              <mat-icon (click)=\"highlight(item.wkt, $event)\">power_settings_new</mat-icon>\n            </div>\n          </mat-option>\n        </span>\n      </mat-autocomplete>\n    </mat-form-field>\n  </div>\n</div>", styles: [".search-container{position:absolute;top:8em;left:1em;z-index:2;max-width:550px;min-width:48px;width:auto;border-radius:5px;background:#4c4d51;transition:width .3s ease,max-width .3s ease}.search-container.collapsed{width:90px;max-width:90px;min-width:90px}.search-container.collapsed .drag-handle{width:90px;box-sizing:border-box}.search-container.collapsed .drag-handle .icon-left{margin-left:3px}.search-container.cdk-drag-dragging{opacity:.8;cursor:grab}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:450px}.search-container.collapsed{width:90px!important;min-width:90px!important;max-width:90px!important}}@media (max-width: 480px){.search-container{left:1.5em;right:1.5em;max-width:calc(100vw - 3em)}.search-container.collapsed{width:90px!important;min-width:90px!important;max-width:90px!important}}.compact-icon.custom-image-icon{padding:4px;background:none;border:1px solid rgba(255,255,255,.2)}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.compact-icon.custom-image-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985);border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.compact-icon.custom-image-icon:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e94d}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.drag-handle{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;border-radius:5px 5px 0 0;color:#fff}.drag-handle .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.search-content{display:flex;flex-direction:column;background:#4c4d51;padding:6px;transition:all .3s ease;box-sizing:border-box;cursor:default;border-radius:0 0 5px 5px}.compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.compact-icon.custom-image-icon{background:none;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer}.toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}.search-field{width:100%;min-width:300px;cursor:pointer;flex:1}.search-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent}.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important;border-width:1.5px!important;transition:border-color .3s ease,border-width .3s ease}.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important}.search-field ::ng-deep .mat-mdc-form-field-label{color:#fff!important;font-weight:500;font-size:15px}.search-field ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-form-field-label{color:#2196f3!important}.search-field ::ng-deep .mat-mdc-input-element{font-size:15px;color:#fff;font-weight:400;line-height:1.5}.search-field ::ng-deep .mat-mdc-input-element::placeholder{color:#ccc;font-weight:400;opacity:.8}.search-field ::ng-deep .mdc-floating-label{padding:0 4px;left:40px!important}::ng-deep .mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field__input{margin-left:12px;color:#fff!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{color:#fff!important}::ng-deep .mat-mdc-form-field-flex{height:40px!important}::ng-deep .mat-mdc-autocomplete-panel{border-radius:5px!important;max-height:320px!important;background:#4c4d51!important;box-shadow:0 8px 24px #00000026!important;margin-top:35px;overflow-y:auto!important;padding:8px!important}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar{width:12px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover{background-color:#ffffff14!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected{background-color:#ffffff1f!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;width:100%}.search-result-option{display:flex;flex-direction:column;gap:8px}.result-title{font-weight:600;font-size:13px;color:#bdc1c3cc!important;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.item-container{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px}.item-container .item-header{font-size:14px;color:#fff!important;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.item-container mat-icon{color:#fff!important;font-size:20px;width:20px;height:20px;flex-shrink:0;cursor:pointer;transition:all .2s ease}.item-container mat-icon:hover{color:#f7f7f7!important}.search-result-item{display:flex;align-items:center;justify-content:space-between;padding:6px 4px;border-radius:5px;margin-left:4px;transition:all .6s ease}.search-result-item:hover{color:#f4f4f5;background:#ffffff1a}.search-result-item .item-header{font-size:14px;color:#fff!important;flex:1;font-weight:500}.search-result-item mat-icon{color:#fff!important;font-size:20px;width:20px;height:20px;cursor:pointer;transition:all .2s ease}.search-result-item mat-icon:hover{color:#f7f7f7!important}::ng-deep .mat-mdc-text-field-wrapper{background:#6d6f73!important;border-radius:5px;transition:all .3s cubic-bezier(.4,0,.2,1)}::ng-deep .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{color:#fff!important}::ng-deep .mdc-text-field{border-radius:5px!important}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:450px}.search-container.collapsed{width:88px;min-width:88px;max-width:88px}.search-field{min-width:250px}.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}.item-container{gap:8px}}\n"] }]
         }], propDecorators: { profile: [{
                 type: Input
             }] } });
@@ -3729,9 +4122,14 @@ class LegendsListComponent {
             if (savedPosition) {
                 this.dragPosition = JSON.parse(savedPosition);
             }
-            else if (this.profile) {
+            else if (this.profile?.legendsListInitialPosition) {
                 this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.legendsListInitialPosition);
             }
+            else {
+                // Default position for legends list
+                this.dragPosition = { x: 1753, y: 531 };
+                this._savePosition(this.dragPosition);
+            }
         }
         catch (error) {
             console.error('Error loading legends list position from localStorage:', error);
@@ -3787,12 +4185,12 @@ class LegendsListComponent {
         })));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LegendsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LegendsListComponent, isStandalone: true, selector: "lib-legends-list", inputs: { map: "map", profile: "profile" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"legends-list-body-wrapper\" \n  cdkDrag \n  cdkDragBoundary=\".map-container\" \n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"onDragEnded($event)\"\n  [class.collapsed]=\"collapsed\">\n\n  <div class=\"drag-handle-legends\" cdkDragHandle>\n  <mat-icon class=\"legend-icon\" (click)=\"toggleLegendsList()\">area_chart</mat-icon>\n\n  <div class=\"right-icons\">\n    <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n    <mat-icon class=\"toggle-icon\" (click)=\"toggleLegendsList()\">\n      {{ collapsed ? 'flip_to_front' : 'remove' }}\n    </mat-icon>\n  </div>\n</div>\n\n<div class=\"legends-list-container\">\n  @if(!collapsed) {\n <div class=\"ol-unselectable ol-control legends-list-body\">\n    <div class=\"item-list\">\n      @for (layer of filteredLayersDetailed; track layer.id; let i = $index) {\n        @if (layer.imageUrl) {\n          <mat-expansion-panel [expanded]=\"i === 0\"> \n            <mat-expansion-panel-header>\n              <span class=\"panel-title\">\n                {{ layer.name }}\n              </span>\n            </mat-expansion-panel-header>\n            <div class=\"legend\">\n              <img [src]=\"layer.imageUrl\" class=\"legend-thumbnail\"/>\n            </div>\n          </mat-expansion-panel>\n        }\n      }\n    </div>\n  </div>\n}\n</div>\n</div>", styles: [".legends-list-body-wrapper{position:absolute;left:1em;top:10em;z-index:1000;cursor:grab;box-shadow:0 2px 10px #0000001a;background:#292a2d;width:250px;max-width:250px;transition:width .3s ease,max-width .3s ease;border-radius:5px 5px 0 0}.legends-list-body-wrapper.collapsed{width:90px}.legends-list-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grabbing;z-index:1001}@media (max-width: 1024px){.legends-list-body-wrapper{width:240px;max-width:240px}}@media (max-width: 768px){.legends-list-body-wrapper{position:fixed;right:1em;bottom:5em;width:calc(100% - 2em);max-width:280px}.legends-list-body-wrapper.collapsed{width:90px}}@media (max-width: 480px){.legends-list-body-wrapper{bottom:4em}}.drag-handle-legends{display:flex;align-items:center;justify-content:space-between;background:#292a2d;padding:2px 8px;cursor:grab;color:#fff;border-radius:5px 5px 0 0}.drag-handle-legends .legend-icon{color:#fff;font-size:18px;width:18px;height:18px;cursor:pointer;transition:all .2s ease}.drag-handle-legends .legend-icon:hover{color:#4caf50}.drag-handle-legends .toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.drag-handle-legends .toggle-icon:hover{color:#fff;background:#ffffff26}.right-icons{display:flex;align-items:center;gap:6px}.right-icons .drag-indicator-right{font-size:18px!important;width:18px!important;height:18px!important;color:#fff}.legends-list-container{display:flex;flex-direction:column;align-items:center;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box}::ng-deep .legends-list-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:#000;width:100%;max-height:317px;min-height:80px;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 1024px){::ng-deep .legends-list-body{max-height:450px;min-height:70px}}@media (max-width: 768px){::ng-deep .legends-list-body{max-height:60vh;max-height:calc(var(--vh, 1vh) * 60);min-height:100px}}@media (max-width: 480px){::ng-deep .legends-list-body{max-height:70vh;max-height:calc(var(--vh, 1vh) * 70);min-height:90px}}::ng-deep .legends-list-body .item-list{flex:1 1 auto;overflow-y:auto;padding:4px;min-height:0;background:#000;max-height:500px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list{padding:6px;max-height:400px}}::ng-deep .legends-list-body .item-list mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%;margin-bottom:4px}::ng-deep .legends-list-body .item-list mat-expansion-panel:last-child{border-bottom:none}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header{padding:0 8px;height:40px!important;min-height:40px!important}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .mat-content{display:flex;align-items:center}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;line-height:1.3;font-weight:600;color:#bdc1c3cc;font-size:17px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .panel-title{max-width:180px;font-size:15px}}::ng-deep .legends-list-body .item-list .mat-expansion-panel-body{padding:4px 8px 8px!important}::ng-deep .legends-list-body .item-list .legend{overflow:hidden;padding:4px;box-shadow:0 -2px 2px #4868b20a,0 2px 2px #6a6f7517,0 1px 2px #4868b214}::ng-deep .legends-list-body .item-list .legend span{color:#fff}.legend-thumbnail{max-width:100%;width:auto;height:auto;max-height:150px;border:1px solid #dee2e6;border-radius:4px;padding:4px;display:block}@media (max-width: 768px){.legend-thumbnail{max-height:120px;padding:3px}}::ng-deep .legends-list-body .item-list::-webkit-scrollbar{width:12px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}@media (max-width: 768px){.legends-list-body-wrapper{right:.5em;bottom:5em;max-width:280px}}@media (max-width: 480px){.legends-list-body-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.legends-list-body-wrapper.collapsed{width:90px;left:auto}::ng-deep .legends-list-body .item-list{max-height:300px}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "ngmodule", type: MatInputModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LegendsListComponent, isStandalone: true, selector: "lib-legends-list", inputs: { map: "map", profile: "profile" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"legends-list-body-wrapper\" \n  cdkDrag \n  cdkDragBoundary=\".map-container\" \n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"onDragEnded($event)\"\n  [class.collapsed]=\"collapsed\">\n\n  <div class=\"drag-handle-legends\" cdkDragHandle>\n    <mat-icon \n      class=\"legend-icon\" \n      matTooltip=\"Legendeliste\" \n      (click)=\"toggleLegendsList()\"\n      [matTooltipShowDelay]=\"500\"\n      [matTooltipHideDelay]=\"100\" \n      matTooltipPosition=\"above\">\n      area_chart\n    </mat-icon>\n  <div class=\"right-icons\">\n    <mat-icon class=\"toggle-icon\" (click)=\"toggleLegendsList()\">\n      {{ collapsed ? 'flip_to_front' : 'remove' }}\n    </mat-icon>\n  </div>\n</div>\n\n<div class=\"legends-list-container\">\n  @if(!collapsed) {\n <div class=\"ol-unselectable ol-control legends-list-body\">\n    <div class=\"item-list\">\n      @for (layer of filteredLayersDetailed; track layer.id; let i = $index) {\n        @if (layer.imageUrl) {\n          <mat-expansion-panel [expanded]=\"i === 0\"> \n            <mat-expansion-panel-header>\n              <span class=\"panel-title\">\n                {{ layer.name }}\n              </span>\n            </mat-expansion-panel-header>\n            <div class=\"legend\">\n              <img [src]=\"layer.imageUrl\" class=\"legend-thumbnail\"/>\n            </div>\n          </mat-expansion-panel>\n        }\n      }\n    </div>\n  </div>\n}\n</div>\n</div>", styles: [".legends-list-body-wrapper{position:absolute;left:1em;top:10em;z-index:1000;box-shadow:0 2px 10px #0000001a;width:250px;max-width:250px;transition:width .3s ease,max-width .3s ease;background:#4c4d51;border-radius:5px}.legends-list-body-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}.legends-list-body-wrapper.collapsed .drag-handle-legends{width:90px;box-sizing:border-box}.legends-list-body-wrapper.collapsed .drag-handle-legends .legend-icon{margin-right:0}.legends-list-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grabbing;z-index:1001}@media (max-width: 1024px){.legends-list-body-wrapper{width:240px;max-width:240px}.legends-list-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}@media (max-width: 768px){.legends-list-body-wrapper{position:fixed;right:1em;bottom:5em;width:calc(100% - 2em);max-width:280px}.legends-list-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important;left:auto;right:1em}}@media (max-width: 480px){.legends-list-body-wrapper{bottom:4em}.legends-list-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}.drag-handle-legends{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;color:#fff;border-radius:5px 5px 0 0}.drag-handle-legends .legend-icon{color:#fff;font-size:18px;cursor:default!important;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.drag-handle-legends .toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-legends .toggle-icon:hover{color:#d3d3d3}.right-icons{display:flex;align-items:center;gap:10px}.legends-list-container{display:flex;flex-direction:column;align-items:center;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box}::ng-deep .legends-list-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:#4c4d51;width:100%;max-height:317px;min-height:80px;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 1024px){::ng-deep .legends-list-body{max-height:450px;min-height:70px}}@media (max-width: 768px){::ng-deep .legends-list-body{max-height:60vh;max-height:calc(var(--vh, 1vh) * 60);min-height:100px}}@media (max-width: 480px){::ng-deep .legends-list-body{max-height:70vh;max-height:calc(var(--vh, 1vh) * 70);min-height:90px}}::ng-deep .legends-list-body .item-list{flex:1 1 auto;overflow-y:auto;min-height:0;background:#4c4d51;max-height:500px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list{padding:6px;max-height:400px}}::ng-deep .legends-list-body .item-list mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%;margin-bottom:4px}::ng-deep .legends-list-body .item-list mat-expansion-panel:last-child{border-bottom:none}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header{padding:0 8px;height:40px!important;min-height:40px!important}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .mat-content{display:flex;align-items:center}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;line-height:1.3;font-weight:600;color:#bdc1c3cc;font-size:17px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .panel-title{max-width:180px;font-size:15px}}::ng-deep .legends-list-body .item-list .mat-expansion-panel-body{padding:4px 8px 8px!important}::ng-deep .legends-list-body .item-list .legend{overflow:hidden;padding:4px;box-shadow:0 -2px 2px #4868b20a,0 2px 2px #6a6f7517,0 1px 2px #4868b214}::ng-deep .legends-list-body .item-list .legend span{color:#fff}.legend-thumbnail{max-width:100%;width:auto;height:auto;max-height:150px;border:1px solid #dee2e6;display:block}@media (max-width: 768px){.legend-thumbnail{max-height:120px;padding:3px}}::ng-deep .legends-list-body .item-list::-webkit-scrollbar{width:12px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}@media (max-width: 768px){.legends-list-body-wrapper{right:.5em;bottom:5em;max-width:280px}}@media (max-width: 480px){.legends-list-body-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.legends-list-body-wrapper.collapsed{width:90px;left:auto}::ng-deep .legends-list-body .item-list{max-height:300px}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LegendsListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-legends-list', imports: [MatFormFieldModule, CommonModule, MatIconModule, FormsModule, DragDropModule,
-                        MatExpansionModule, MatInputModule], template: "<div class=\"legends-list-body-wrapper\" \n  cdkDrag \n  cdkDragBoundary=\".map-container\" \n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"onDragEnded($event)\"\n  [class.collapsed]=\"collapsed\">\n\n  <div class=\"drag-handle-legends\" cdkDragHandle>\n  <mat-icon class=\"legend-icon\" (click)=\"toggleLegendsList()\">area_chart</mat-icon>\n\n  <div class=\"right-icons\">\n    <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n    <mat-icon class=\"toggle-icon\" (click)=\"toggleLegendsList()\">\n      {{ collapsed ? 'flip_to_front' : 'remove' }}\n    </mat-icon>\n  </div>\n</div>\n\n<div class=\"legends-list-container\">\n  @if(!collapsed) {\n <div class=\"ol-unselectable ol-control legends-list-body\">\n    <div class=\"item-list\">\n      @for (layer of filteredLayersDetailed; track layer.id; let i = $index) {\n        @if (layer.imageUrl) {\n          <mat-expansion-panel [expanded]=\"i === 0\"> \n            <mat-expansion-panel-header>\n              <span class=\"panel-title\">\n                {{ layer.name }}\n              </span>\n            </mat-expansion-panel-header>\n            <div class=\"legend\">\n              <img [src]=\"layer.imageUrl\" class=\"legend-thumbnail\"/>\n            </div>\n          </mat-expansion-panel>\n        }\n      }\n    </div>\n  </div>\n}\n</div>\n</div>", styles: [".legends-list-body-wrapper{position:absolute;left:1em;top:10em;z-index:1000;cursor:grab;box-shadow:0 2px 10px #0000001a;background:#292a2d;width:250px;max-width:250px;transition:width .3s ease,max-width .3s ease;border-radius:5px 5px 0 0}.legends-list-body-wrapper.collapsed{width:90px}.legends-list-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grabbing;z-index:1001}@media (max-width: 1024px){.legends-list-body-wrapper{width:240px;max-width:240px}}@media (max-width: 768px){.legends-list-body-wrapper{position:fixed;right:1em;bottom:5em;width:calc(100% - 2em);max-width:280px}.legends-list-body-wrapper.collapsed{width:90px}}@media (max-width: 480px){.legends-list-body-wrapper{bottom:4em}}.drag-handle-legends{display:flex;align-items:center;justify-content:space-between;background:#292a2d;padding:2px 8px;cursor:grab;color:#fff;border-radius:5px 5px 0 0}.drag-handle-legends .legend-icon{color:#fff;font-size:18px;width:18px;height:18px;cursor:pointer;transition:all .2s ease}.drag-handle-legends .legend-icon:hover{color:#4caf50}.drag-handle-legends .toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.drag-handle-legends .toggle-icon:hover{color:#fff;background:#ffffff26}.right-icons{display:flex;align-items:center;gap:6px}.right-icons .drag-indicator-right{font-size:18px!important;width:18px!important;height:18px!important;color:#fff}.legends-list-container{display:flex;flex-direction:column;align-items:center;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box}::ng-deep .legends-list-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:#000;width:100%;max-height:317px;min-height:80px;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 1024px){::ng-deep .legends-list-body{max-height:450px;min-height:70px}}@media (max-width: 768px){::ng-deep .legends-list-body{max-height:60vh;max-height:calc(var(--vh, 1vh) * 60);min-height:100px}}@media (max-width: 480px){::ng-deep .legends-list-body{max-height:70vh;max-height:calc(var(--vh, 1vh) * 70);min-height:90px}}::ng-deep .legends-list-body .item-list{flex:1 1 auto;overflow-y:auto;padding:4px;min-height:0;background:#000;max-height:500px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list{padding:6px;max-height:400px}}::ng-deep .legends-list-body .item-list mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%;margin-bottom:4px}::ng-deep .legends-list-body .item-list mat-expansion-panel:last-child{border-bottom:none}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header{padding:0 8px;height:40px!important;min-height:40px!important}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .mat-content{display:flex;align-items:center}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;line-height:1.3;font-weight:600;color:#bdc1c3cc;font-size:17px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .panel-title{max-width:180px;font-size:15px}}::ng-deep .legends-list-body .item-list .mat-expansion-panel-body{padding:4px 8px 8px!important}::ng-deep .legends-list-body .item-list .legend{overflow:hidden;padding:4px;box-shadow:0 -2px 2px #4868b20a,0 2px 2px #6a6f7517,0 1px 2px #4868b214}::ng-deep .legends-list-body .item-list .legend span{color:#fff}.legend-thumbnail{max-width:100%;width:auto;height:auto;max-height:150px;border:1px solid #dee2e6;border-radius:4px;padding:4px;display:block}@media (max-width: 768px){.legend-thumbnail{max-height:120px;padding:3px}}::ng-deep .legends-list-body .item-list::-webkit-scrollbar{width:12px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}@media (max-width: 768px){.legends-list-body-wrapper{right:.5em;bottom:5em;max-width:280px}}@media (max-width: 480px){.legends-list-body-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.legends-list-body-wrapper.collapsed{width:90px;left:auto}::ng-deep .legends-list-body .item-list{max-height:300px}}\n"] }]
+                        MatExpansionModule, MatInputModule, MatTooltipModule], template: "<div class=\"legends-list-body-wrapper\" \n  cdkDrag \n  cdkDragBoundary=\".map-container\" \n  [cdkDragFreeDragPosition]=\"dragPosition\"\n  (cdkDragEnded)=\"onDragEnded($event)\"\n  [class.collapsed]=\"collapsed\">\n\n  <div class=\"drag-handle-legends\" cdkDragHandle>\n    <mat-icon \n      class=\"legend-icon\" \n      matTooltip=\"Legendeliste\" \n      (click)=\"toggleLegendsList()\"\n      [matTooltipShowDelay]=\"500\"\n      [matTooltipHideDelay]=\"100\" \n      matTooltipPosition=\"above\">\n      area_chart\n    </mat-icon>\n  <div class=\"right-icons\">\n    <mat-icon class=\"toggle-icon\" (click)=\"toggleLegendsList()\">\n      {{ collapsed ? 'flip_to_front' : 'remove' }}\n    </mat-icon>\n  </div>\n</div>\n\n<div class=\"legends-list-container\">\n  @if(!collapsed) {\n <div class=\"ol-unselectable ol-control legends-list-body\">\n    <div class=\"item-list\">\n      @for (layer of filteredLayersDetailed; track layer.id; let i = $index) {\n        @if (layer.imageUrl) {\n          <mat-expansion-panel [expanded]=\"i === 0\"> \n            <mat-expansion-panel-header>\n              <span class=\"panel-title\">\n                {{ layer.name }}\n              </span>\n            </mat-expansion-panel-header>\n            <div class=\"legend\">\n              <img [src]=\"layer.imageUrl\" class=\"legend-thumbnail\"/>\n            </div>\n          </mat-expansion-panel>\n        }\n      }\n    </div>\n  </div>\n}\n</div>\n</div>", styles: [".legends-list-body-wrapper{position:absolute;left:1em;top:10em;z-index:1000;box-shadow:0 2px 10px #0000001a;width:250px;max-width:250px;transition:width .3s ease,max-width .3s ease;background:#4c4d51;border-radius:5px}.legends-list-body-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}.legends-list-body-wrapper.collapsed .drag-handle-legends{width:90px;box-sizing:border-box}.legends-list-body-wrapper.collapsed .drag-handle-legends .legend-icon{margin-right:0}.legends-list-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grabbing;z-index:1001}@media (max-width: 1024px){.legends-list-body-wrapper{width:240px;max-width:240px}.legends-list-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}@media (max-width: 768px){.legends-list-body-wrapper{position:fixed;right:1em;bottom:5em;width:calc(100% - 2em);max-width:280px}.legends-list-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important;left:auto;right:1em}}@media (max-width: 480px){.legends-list-body-wrapper{bottom:4em}.legends-list-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}.drag-handle-legends{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;color:#fff;border-radius:5px 5px 0 0}.drag-handle-legends .legend-icon{color:#fff;font-size:18px;cursor:default!important;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.drag-handle-legends .toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-legends .toggle-icon:hover{color:#d3d3d3}.right-icons{display:flex;align-items:center;gap:10px}.legends-list-container{display:flex;flex-direction:column;align-items:center;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box}::ng-deep .legends-list-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:#4c4d51;width:100%;max-height:317px;min-height:80px;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 1024px){::ng-deep .legends-list-body{max-height:450px;min-height:70px}}@media (max-width: 768px){::ng-deep .legends-list-body{max-height:60vh;max-height:calc(var(--vh, 1vh) * 60);min-height:100px}}@media (max-width: 480px){::ng-deep .legends-list-body{max-height:70vh;max-height:calc(var(--vh, 1vh) * 70);min-height:90px}}::ng-deep .legends-list-body .item-list{flex:1 1 auto;overflow-y:auto;min-height:0;background:#4c4d51;max-height:500px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list{padding:6px;max-height:400px}}::ng-deep .legends-list-body .item-list mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%;margin-bottom:4px}::ng-deep .legends-list-body .item-list mat-expansion-panel:last-child{border-bottom:none}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header{padding:0 8px;height:40px!important;min-height:40px!important}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .mat-content{display:flex;align-items:center}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;line-height:1.3;font-weight:600;color:#bdc1c3cc;font-size:17px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .panel-title{max-width:180px;font-size:15px}}::ng-deep .legends-list-body .item-list .mat-expansion-panel-body{padding:4px 8px 8px!important}::ng-deep .legends-list-body .item-list .legend{overflow:hidden;padding:4px;box-shadow:0 -2px 2px #4868b20a,0 2px 2px #6a6f7517,0 1px 2px #4868b214}::ng-deep .legends-list-body .item-list .legend span{color:#fff}.legend-thumbnail{max-width:100%;width:auto;height:auto;max-height:150px;border:1px solid #dee2e6;display:block}@media (max-width: 768px){.legend-thumbnail{max-height:120px;padding:3px}}::ng-deep .legends-list-body .item-list::-webkit-scrollbar{width:12px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}@media (max-width: 768px){.legends-list-body-wrapper{right:.5em;bottom:5em;max-width:280px}}@media (max-width: 480px){.legends-list-body-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.legends-list-body-wrapper.collapsed{width:90px;left:auto}::ng-deep .legends-list-body .item-list{max-height:300px}}\n"] }]
         }], propDecorators: { map: [{
                 type: Input
             }], profile: [{
@@ -3806,7 +4204,7 @@ class FeatureLoaderService {
     _zoom = inject(ZoomService);
     _undoRedo = inject(UndoRedoService);
     _featureHelper = inject(FeatureHelperService);
-    fomatter = new GeoJSON({ featureProjection: 'EPSG:25832', dataProjection: 'EPSG:25832' });
+    fomatter = new GeoJSON$1({ featureProjection: 'EPSG:25832', dataProjection: 'EPSG:25832' });
     loadFeaturesSettings(settings) {
         if (!settings || !settings.geometryTypeSettings) {
             return;
@@ -3893,17 +4291,15 @@ class SelectedFeatureInfoComponent {
         return this.collapsedStates[layerName] || false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectedFeatureInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SelectedFeatureInfoComponent, isStandalone: true, selector: "selected-feature-info", ngImport: i0, template: "\n@if(features) {\n    <div class=\"selected-features-wrapper\"> \n\n        @for(item of features; track item.layerName) { \n            <div class=\"feature-section\">\n                <h4 (click)=\"toggleCollapse(item.layerName)\" class=\"collapsible-header\">\n                    <mat-icon class=\"collapse-icon\">\n                        {{ isCollapsed(item.layerName) ? 'keyboard_arrow_up' : 'expand_more' }}\n                    </mat-icon>\n                    {{item.layerName}}\n                </h4>\n                \n                <div class=\"feature-content\" [class.collapsed]=\"isCollapsed(item.layerName)\">\n                    @for(feature of item.values; track feature) {\n                        <div class=\"feature-item\">\n                            <div *ngFor=\"let kv of (feature | keyvalue)\">\n                                {{ kv.value.name }}:\n                                <ng-container [ngSwitch]=\"kv.value.kind\">\n                                    <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n                                    <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n                                        {{ kv.key }}\n                                        <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                                    </a>\n                                    <span *ngSwitchDefault>{{ kv.value.data }}</span>\n                                </ng-container>\n                            </div>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n}\n", styles: ["::ng-deep .selected-features-wrapper{background:#292a2d;border-radius:5px;box-shadow:0 4px 6px #00000012,0 10px 20px #0000001a;max-width:420px;max-height:450px;overflow-y:auto;position:relative;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8)}::ng-deep .selected-features-wrapper::-webkit-scrollbar{width:12px}::ng-deep .selected-features-wrapper::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .selected-features-wrapper::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .selected-features-wrapper::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .selected-features-wrapper .feature-section{padding:20px 24px;position:relative}::ng-deep .selected-features-wrapper .feature-section:after{content:\"\";position:absolute;bottom:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 20%,rgba(0,0,0,.08) 80%,transparent 100%)}::ng-deep .selected-features-wrapper .feature-section:last-child:after{display:none}::ng-deep .selected-features-wrapper .feature-section h4.collapsible-header{margin:0 0 16px;font-size:18px;font-weight:700;color:#bdc1c3cc;letter-spacing:-.3px;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;display:flex;align-items:center}::ng-deep .selected-features-wrapper .feature-section h4.collapsible-header:hover{color:#d4d8dacc}::ng-deep .selected-features-wrapper .feature-section h4.collapsible-header .collapse-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:24px;width:24px;height:24px;transition:transform .3s ease;color:#fff}::ng-deep .selected-features-wrapper .feature-section .feature-content{max-height:2000px;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin-top .3s ease;opacity:1}::ng-deep .selected-features-wrapper .feature-section .feature-content.collapsed{max-height:0;opacity:0;margin-top:0}::ng-deep .selected-features-wrapper .feature-section .feature-item{margin-top:14px;background:#000;border-radius:10px;padding:16px;box-shadow:0 2px 4px #0000000a,0 1px 2px #0000000f;border:1px solid rgba(0,0,0,.06);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;color:#fff}::ng-deep .selected-features-wrapper .feature-section .feature-item:hover{box-shadow:0 4px 12px #2196f326,0 2px 4px #00000014;border-color:#2196f333}::ng-deep .selected-features-wrapper .feature-section .feature-item:hover:before{opacity:1}::ng-deep .selected-features-wrapper .feature-section .feature-item:first-of-type{margin-top:0}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of]{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;margin-bottom:12px;font-size:14px;line-height:1.6;padding:6px 0;color:#546e7a;font-weight:600;white-space:nowrap;display:flex;align-items:center}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of]:last-child{margin-bottom:0}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of]:after{content:\"\";display:inline-block;width:4px;height:4px;background:#2196f3;border-radius:50%;margin-left:6px;opacity:.5}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of] span{color:#1a1a1a;font-weight:500;word-break:break-word;background:linear-gradient(135deg,#f5f5f5,#fafafa);padding:4px 10px;border-radius:6px;border:1px solid rgba(0,0,0,.05)}::ng-deep .selected-features-wrapper img{margin-top:8px;border-radius:8px;border:2px solid #e3f2fd;max-width:100%;max-height:200px;display:block;box-shadow:0 4px 12px #0000001a;transition:transform .3s ease,box-shadow .3s ease}::ng-deep .selected-features-wrapper img:hover{box-shadow:0 8px 20px #00000026}::ng-deep .selected-features-wrapper a{color:#89bbeb!important;font-weight:600;transition:all .3s ease;text-decoration:underline;position:relative;padding:2px 4px;border-radius:3px}::ng-deep .selected-features-wrapper a:hover{color:#0d78ca!important;background-color:transparent;text-decoration:underline;transform:translateY(-1px)}::ng-deep .selected-features-wrapper a:active{transform:translateY(0)}::ng-deep .selected-features-wrapper a:after{content:\"\";position:absolute;width:100%;height:1px;bottom:-1px;left:0;background-color:#0d78ca;transform:scaleX(0);transition:transform .3s ease}::ng-deep .selected-features-wrapper a:hover:after{transform:scaleX(1)}@media (max-width: 768px){.selected-features-wrapper{max-width:100%;border-radius:12px 12px 0 0}.selected-features-wrapper .feature-section{padding:16px 20px}.selected-features-wrapper .feature-section:after{left:20px;right:20px}.selected-features-wrapper .feature-section h4.collapsible-header{font-size:16px}.selected-features-wrapper .feature-section .feature-item>div{grid-template-columns:1fr;font-size:13px;gap:4px}.selected-features-wrapper .feature-section .feature-item>div:after{display:none}.selected-features-wrapper .feature-section .feature-item>div span,.selected-features-wrapper .feature-section .feature-item>div a{margin-left:0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SelectedFeatureInfoComponent, isStandalone: true, selector: "selected-feature-info", ngImport: i0, template: "\n@if(features) {\n    <div class=\"selected-features-wrapper\"> \n\n        @for(item of features; track item.layerName) { \n            <div class=\"feature-section\">\n                <h4 (click)=\"toggleCollapse(item.layerName)\" class=\"collapsible-header\">\n                    <mat-icon class=\"collapse-icon\">\n                        {{ isCollapsed(item.layerName) ? 'keyboard_arrow_up' : 'expand_more' }}\n                    </mat-icon>\n                    {{item.layerName}}\n                </h4>\n                \n                <div class=\"feature-content\" [class.collapsed]=\"isCollapsed(item.layerName)\">\n                    @for(feature of item.values; track feature) {\n                        <div class=\"feature-item\">\n                            <div *ngFor=\"let kv of (feature | keyvalue)\" class=\"feature-row\">\n                                <div class=\"feature-label\">\n                                    {{ kv.value.name }}:\n                                </div>\n                                <div class=\"feature-value\">\n                                    <ng-container [ngSwitch]=\"kv.value.kind\">\n                                        <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n                                        <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n                                            {{ kv.key }}\n                                            <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                                        </a>\n                                        <span *ngSwitchDefault>{{ kv.value.data }}</span>\n                                    </ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n}\n", styles: ["::ng-deep .selected-features-wrapper{background:#4c4d51;border-radius:5px;box-shadow:0 4px 6px #00000012,0 10px 20px #0000001a;max-width:420px;max-height:450px;overflow-y:auto;position:relative;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;backdrop-filter:blur(10px)}::ng-deep .selected-features-wrapper::-webkit-scrollbar{width:12px}::ng-deep .selected-features-wrapper::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .selected-features-wrapper::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .selected-features-wrapper::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .selected-features-wrapper .feature-section{padding:6px 9px;position:relative}::ng-deep .selected-features-wrapper .feature-section:after{content:\"\";position:absolute;bottom:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 20%,rgba(0,0,0,.08) 80%,transparent 100%)}::ng-deep .selected-features-wrapper .feature-section:last-child:after{display:none}::ng-deep .selected-features-wrapper .feature-section h4.collapsible-header{margin:0 0 16px;font-size:17px;font-weight:700;color:#bdc1c3cc;letter-spacing:-.3px;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;display:flex;align-items:center}::ng-deep .selected-features-wrapper .feature-section h4.collapsible-header:hover{color:#d4d8dacc}::ng-deep .selected-features-wrapper .feature-section h4.collapsible-header .collapse-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:24px;width:24px;height:24px;transition:transform .3s ease;color:#fff}::ng-deep .selected-features-wrapper .feature-section .feature-content{max-height:2000px;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin-top .3s ease;opacity:1}::ng-deep .selected-features-wrapper .feature-section .feature-content.collapsed{max-height:0;opacity:0;margin-top:0}::ng-deep .selected-features-wrapper .feature-section .feature-item{margin-top:14px;background:#ffffff1a;border-radius:5px;padding:8px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;color:#fff}::ng-deep .selected-features-wrapper .feature-section .feature-item:hover{box-shadow:6px 0 20px #192a4659}::ng-deep .selected-features-wrapper .feature-section .feature-item:hover:before{opacity:1}::ng-deep .selected-features-wrapper .feature-section .feature-item:first-of-type{margin-top:0}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of]{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;margin-bottom:12px;font-size:14px;line-height:1.6;padding:6px 0;color:#546e7a;font-weight:600;white-space:nowrap;display:flex;align-items:center}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of]:last-child{margin-bottom:0}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of]:after{content:\"\";display:inline-block;width:4px;height:4px;background:#2196f3;border-radius:50%;margin-left:6px;opacity:.5}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of] span{color:#1a1a1a;font-weight:500;word-break:break-word;background:linear-gradient(135deg,#f5f5f5,#fafafa);padding:4px 10px;border-radius:6px;border:1px solid rgba(0,0,0,.05)}::ng-deep .selected-features-wrapper img{margin-top:8px;border-radius:8px;border:2px solid #e3f2fd;max-width:100%;max-height:200px;display:block;box-shadow:0 4px 12px #0000001a;transition:transform .3s ease,box-shadow .3s ease}::ng-deep .selected-features-wrapper img:hover{box-shadow:0 8px 20px #00000026}::ng-deep .selected-features-wrapper a{color:#89bbeb!important;font-weight:600;transition:all .3s ease;text-decoration:underline;position:relative;padding:2px 4px;border-radius:3px}::ng-deep .selected-features-wrapper a:hover{color:#0d78ca!important;background-color:transparent;text-decoration:underline;transform:translateY(-1px)}::ng-deep .selected-features-wrapper a:active{transform:translateY(0)}::ng-deep .selected-features-wrapper a:after{content:\"\";position:absolute;width:100%;height:1px;bottom:-1px;left:0;background-color:#0d78ca;transform:scaleX(0);transition:transform .3s ease}::ng-deep .selected-features-wrapper a:hover:after{transform:scaleX(1)}@media (max-width: 768px){.selected-features-wrapper{max-width:100%;border-radius:12px 12px 0 0}.selected-features-wrapper .feature-section{padding:16px 20px}.selected-features-wrapper .feature-section:after{left:20px;right:20px}.selected-features-wrapper .feature-section h4.collapsible-header{font-size:16px}.selected-features-wrapper .feature-section .feature-item>div{grid-template-columns:1fr;font-size:13px;gap:4px}.selected-features-wrapper .feature-section .feature-item>div:after{display:none}.selected-features-wrapper .feature-section .feature-item>div span,.selected-features-wrapper .feature-section .feature-item>div a{margin-left:0}}.feature-row{display:flex;align-items:flex-start;margin-bottom:12px;gap:12px}.feature-row:last-child{margin-bottom:0}.feature-label{color:#d4d8da;min-width:120px;flex-shrink:0;font-size:14px}.feature-value{color:#fff;flex-grow:1;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectedFeatureInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'selected-feature-info', imports: [CommonModule, FormsModule, AsyncPipe, JsonPipe, MatButtonModule, MatIconModule], template: "\n@if(features) {\n    <div class=\"selected-features-wrapper\"> \n\n        @for(item of features; track item.layerName) { \n            <div class=\"feature-section\">\n                <h4 (click)=\"toggleCollapse(item.layerName)\" class=\"collapsible-header\">\n                    <mat-icon class=\"collapse-icon\">\n                        {{ isCollapsed(item.layerName) ? 'keyboard_arrow_up' : 'expand_more' }}\n                    </mat-icon>\n                    {{item.layerName}}\n                </h4>\n                \n                <div class=\"feature-content\" [class.collapsed]=\"isCollapsed(item.layerName)\">\n                    @for(feature of item.values; track feature) {\n                        <div class=\"feature-item\">\n                            <div *ngFor=\"let kv of (feature | keyvalue)\">\n                                {{ kv.value.name }}:\n                                <ng-container [ngSwitch]=\"kv.value.kind\">\n                                    <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n                                    <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n                                        {{ kv.key }}\n                                        <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                                    </a>\n                                    <span *ngSwitchDefault>{{ kv.value.data }}</span>\n                                </ng-container>\n                            </div>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n}\n", styles: ["::ng-deep .selected-features-wrapper{background:#292a2d;border-radius:5px;box-shadow:0 4px 6px #00000012,0 10px 20px #0000001a;max-width:420px;max-height:450px;overflow-y:auto;position:relative;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8)}::ng-deep .selected-features-wrapper::-webkit-scrollbar{width:12px}::ng-deep .selected-features-wrapper::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .selected-features-wrapper::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .selected-features-wrapper::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .selected-features-wrapper .feature-section{padding:20px 24px;position:relative}::ng-deep .selected-features-wrapper .feature-section:after{content:\"\";position:absolute;bottom:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 20%,rgba(0,0,0,.08) 80%,transparent 100%)}::ng-deep .selected-features-wrapper .feature-section:last-child:after{display:none}::ng-deep .selected-features-wrapper .feature-section h4.collapsible-header{margin:0 0 16px;font-size:18px;font-weight:700;color:#bdc1c3cc;letter-spacing:-.3px;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;display:flex;align-items:center}::ng-deep .selected-features-wrapper .feature-section h4.collapsible-header:hover{color:#d4d8dacc}::ng-deep .selected-features-wrapper .feature-section h4.collapsible-header .collapse-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:24px;width:24px;height:24px;transition:transform .3s ease;color:#fff}::ng-deep .selected-features-wrapper .feature-section .feature-content{max-height:2000px;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin-top .3s ease;opacity:1}::ng-deep .selected-features-wrapper .feature-section .feature-content.collapsed{max-height:0;opacity:0;margin-top:0}::ng-deep .selected-features-wrapper .feature-section .feature-item{margin-top:14px;background:#000;border-radius:10px;padding:16px;box-shadow:0 2px 4px #0000000a,0 1px 2px #0000000f;border:1px solid rgba(0,0,0,.06);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;color:#fff}::ng-deep .selected-features-wrapper .feature-section .feature-item:hover{box-shadow:0 4px 12px #2196f326,0 2px 4px #00000014;border-color:#2196f333}::ng-deep .selected-features-wrapper .feature-section .feature-item:hover:before{opacity:1}::ng-deep .selected-features-wrapper .feature-section .feature-item:first-of-type{margin-top:0}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of]{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;margin-bottom:12px;font-size:14px;line-height:1.6;padding:6px 0;color:#546e7a;font-weight:600;white-space:nowrap;display:flex;align-items:center}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of]:last-child{margin-bottom:0}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of]:after{content:\"\";display:inline-block;width:4px;height:4px;background:#2196f3;border-radius:50%;margin-left:6px;opacity:.5}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of] span{color:#1a1a1a;font-weight:500;word-break:break-word;background:linear-gradient(135deg,#f5f5f5,#fafafa);padding:4px 10px;border-radius:6px;border:1px solid rgba(0,0,0,.05)}::ng-deep .selected-features-wrapper img{margin-top:8px;border-radius:8px;border:2px solid #e3f2fd;max-width:100%;max-height:200px;display:block;box-shadow:0 4px 12px #0000001a;transition:transform .3s ease,box-shadow .3s ease}::ng-deep .selected-features-wrapper img:hover{box-shadow:0 8px 20px #00000026}::ng-deep .selected-features-wrapper a{color:#89bbeb!important;font-weight:600;transition:all .3s ease;text-decoration:underline;position:relative;padding:2px 4px;border-radius:3px}::ng-deep .selected-features-wrapper a:hover{color:#0d78ca!important;background-color:transparent;text-decoration:underline;transform:translateY(-1px)}::ng-deep .selected-features-wrapper a:active{transform:translateY(0)}::ng-deep .selected-features-wrapper a:after{content:\"\";position:absolute;width:100%;height:1px;bottom:-1px;left:0;background-color:#0d78ca;transform:scaleX(0);transition:transform .3s ease}::ng-deep .selected-features-wrapper a:hover:after{transform:scaleX(1)}@media (max-width: 768px){.selected-features-wrapper{max-width:100%;border-radius:12px 12px 0 0}.selected-features-wrapper .feature-section{padding:16px 20px}.selected-features-wrapper .feature-section:after{left:20px;right:20px}.selected-features-wrapper .feature-section h4.collapsible-header{font-size:16px}.selected-features-wrapper .feature-section .feature-item>div{grid-template-columns:1fr;font-size:13px;gap:4px}.selected-features-wrapper .feature-section .feature-item>div:after{display:none}.selected-features-wrapper .feature-section .feature-item>div span,.selected-features-wrapper .feature-section .feature-item>div a{margin-left:0}}\n"] }]
+            args: [{ selector: 'selected-feature-info', imports: [CommonModule, FormsModule, AsyncPipe, JsonPipe, MatButtonModule, MatIconModule], template: "\n@if(features) {\n    <div class=\"selected-features-wrapper\"> \n\n        @for(item of features; track item.layerName) { \n            <div class=\"feature-section\">\n                <h4 (click)=\"toggleCollapse(item.layerName)\" class=\"collapsible-header\">\n                    <mat-icon class=\"collapse-icon\">\n                        {{ isCollapsed(item.layerName) ? 'keyboard_arrow_up' : 'expand_more' }}\n                    </mat-icon>\n                    {{item.layerName}}\n                </h4>\n                \n                <div class=\"feature-content\" [class.collapsed]=\"isCollapsed(item.layerName)\">\n                    @for(feature of item.values; track feature) {\n                        <div class=\"feature-item\">\n                            <div *ngFor=\"let kv of (feature | keyvalue)\" class=\"feature-row\">\n                                <div class=\"feature-label\">\n                                    {{ kv.value.name }}:\n                                </div>\n                                <div class=\"feature-value\">\n                                    <ng-container [ngSwitch]=\"kv.value.kind\">\n                                        <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n                                        <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n                                            {{ kv.key }}\n                                            <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                                        </a>\n                                        <span *ngSwitchDefault>{{ kv.value.data }}</span>\n                                    </ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    }\n                </div>\n            </div>\n        }\n    </div>\n}\n", styles: ["::ng-deep .selected-features-wrapper{background:#4c4d51;border-radius:5px;box-shadow:0 4px 6px #00000012,0 10px 20px #0000001a;max-width:420px;max-height:450px;overflow-y:auto;position:relative;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;backdrop-filter:blur(10px)}::ng-deep .selected-features-wrapper::-webkit-scrollbar{width:12px}::ng-deep .selected-features-wrapper::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .selected-features-wrapper::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .selected-features-wrapper::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .selected-features-wrapper::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .selected-features-wrapper .feature-section{padding:6px 9px;position:relative}::ng-deep .selected-features-wrapper .feature-section:after{content:\"\";position:absolute;bottom:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 20%,rgba(0,0,0,.08) 80%,transparent 100%)}::ng-deep .selected-features-wrapper .feature-section:last-child:after{display:none}::ng-deep .selected-features-wrapper .feature-section h4.collapsible-header{margin:0 0 16px;font-size:17px;font-weight:700;color:#bdc1c3cc;letter-spacing:-.3px;position:relative;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;display:flex;align-items:center}::ng-deep .selected-features-wrapper .feature-section h4.collapsible-header:hover{color:#d4d8dacc}::ng-deep .selected-features-wrapper .feature-section h4.collapsible-header .collapse-icon{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:24px;width:24px;height:24px;transition:transform .3s ease;color:#fff}::ng-deep .selected-features-wrapper .feature-section .feature-content{max-height:2000px;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin-top .3s ease;opacity:1}::ng-deep .selected-features-wrapper .feature-section .feature-content.collapsed{max-height:0;opacity:0;margin-top:0}::ng-deep .selected-features-wrapper .feature-section .feature-item{margin-top:14px;background:#ffffff1a;border-radius:5px;padding:8px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;color:#fff}::ng-deep .selected-features-wrapper .feature-section .feature-item:hover{box-shadow:6px 0 20px #192a4659}::ng-deep .selected-features-wrapper .feature-section .feature-item:hover:before{opacity:1}::ng-deep .selected-features-wrapper .feature-section .feature-item:first-of-type{margin-top:0}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of]{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start;margin-bottom:12px;font-size:14px;line-height:1.6;padding:6px 0;color:#546e7a;font-weight:600;white-space:nowrap;display:flex;align-items:center}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of]:last-child{margin-bottom:0}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of]:after{content:\"\";display:inline-block;width:4px;height:4px;background:#2196f3;border-radius:50%;margin-left:6px;opacity:.5}::ng-deep .selected-features-wrapper div[ng-reflect-ng-for-of] span{color:#1a1a1a;font-weight:500;word-break:break-word;background:linear-gradient(135deg,#f5f5f5,#fafafa);padding:4px 10px;border-radius:6px;border:1px solid rgba(0,0,0,.05)}::ng-deep .selected-features-wrapper img{margin-top:8px;border-radius:8px;border:2px solid #e3f2fd;max-width:100%;max-height:200px;display:block;box-shadow:0 4px 12px #0000001a;transition:transform .3s ease,box-shadow .3s ease}::ng-deep .selected-features-wrapper img:hover{box-shadow:0 8px 20px #00000026}::ng-deep .selected-features-wrapper a{color:#89bbeb!important;font-weight:600;transition:all .3s ease;text-decoration:underline;position:relative;padding:2px 4px;border-radius:3px}::ng-deep .selected-features-wrapper a:hover{color:#0d78ca!important;background-color:transparent;text-decoration:underline;transform:translateY(-1px)}::ng-deep .selected-features-wrapper a:active{transform:translateY(0)}::ng-deep .selected-features-wrapper a:after{content:\"\";position:absolute;width:100%;height:1px;bottom:-1px;left:0;background-color:#0d78ca;transform:scaleX(0);transition:transform .3s ease}::ng-deep .selected-features-wrapper a:hover:after{transform:scaleX(1)}@media (max-width: 768px){.selected-features-wrapper{max-width:100%;border-radius:12px 12px 0 0}.selected-features-wrapper .feature-section{padding:16px 20px}.selected-features-wrapper .feature-section:after{left:20px;right:20px}.selected-features-wrapper .feature-section h4.collapsible-header{font-size:16px}.selected-features-wrapper .feature-section .feature-item>div{grid-template-columns:1fr;font-size:13px;gap:4px}.selected-features-wrapper .feature-section .feature-item>div:after{display:none}.selected-features-wrapper .feature-section .feature-item>div span,.selected-features-wrapper .feature-section .feature-item>div a{margin-left:0}}.feature-row{display:flex;align-items:flex-start;margin-bottom:12px;gap:12px}.feature-row:last-child{margin-bottom:0}.feature-label{color:#d4d8da;min-width:120px;flex-shrink:0;font-size:14px}.feature-value{color:#fff;flex-grow:1;font-size:14px}\n"] }]
         }] });
 
-'ol/format/geojson';
 class HoverInfoSearchService extends SearchProviderBase {
     _current = inject(CurrentItemsService);
-    geojsonFormat = new GeoJSON;
     getSearchableLayers() {
         return this._current.profile.layerGroups.flatMap(l => l.layers).filter(l => l.showInfoOnHover);
     }
@@ -3913,31 +4309,36 @@ class HoverInfoSearchService extends SearchProviderBase {
     }
     map(l, f) {
         return {
-            values: f.features.map(f => ({
-                center: this._getCenterPoint(f.geometry),
-                showValue: f.properties ? f.properties[l.propertyToShowOnHover] : ''
+            values: f.features
+                .filter(f => f.geometry.type === 'Polygon' || f.geometry.type === 'MultiPolygon')
+                .map(f => ({
+                center: this._getVisibleInteriorPoint(f),
+                showValue: f.properties ? `${l.name}:${f.properties[l.propertyToShowOnHover]}` : ''
             }))
         };
     }
-    _getCenterPoint(geometry) {
-        const geom = this.geojsonFormat.readGeometry(geometry);
-        const geomType = geom.getType();
-        switch (geomType) {
-            case 'Point':
-                return geom;
-            case 'LineString':
-                const ls = geom;
-                return new Point(ls.getCoordinateAt(0.5));
-            case 'Polygon':
-                const poly = geom;
-                return poly.getInteriorPoint();
-            // case 'MultiLineString':
-            // case 'MultiPolygon':
-            // case 'GeometryCollection':
-            // case 'Circle':
-            //     return new Point([]);
-        }
-        return new Point([]); // 
+    // Finds the center point of the part of a feature that is visible on the map
+    _getVisibleInteriorPoint(feature) {
+        const map = this._current.map;
+        const view = map.getView();
+        const proj = view.getProjection();
+        const size = map.getSize();
+        const extent = view.calculateExtent(size);
+        const extentPoly = bboxPolygon(extent);
+        const collection = featureCollection([feature, extentPoly]);
+        const clipped = intersect(collection);
+        const gj = new GeoJSON$1({ dataProjection: proj, featureProjection: proj });
+        const clippedGeom = gj.readGeometry(clipped.geometry);
+        // For MultiPoly, find largest polygon
+        let target;
+        if (clippedGeom instanceof MultiPolygon) {
+            const parts = clippedGeom.getPolygons();
+            target = parts.reduce((best, p) => (p.getArea() > best.getArea() ? p : best), parts[0]);
+        }
+        else {
+            target = clippedGeom;
+        }
+        return target.getInteriorPoint();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HoverInfoSearchService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: HoverInfoSearchService });
@@ -4116,7 +4517,7 @@ class GisKomponentComponent {
                 };
                 this._drawLayerService.features$.subscribe({
                     next: features => {
-                        const geojson = new GeoJSON$1();
+                        const geojson = new GeoJSON$2();
                         this.featuresChanged.emit(geojson.writeFeaturesObject(features));
                     }
                 });
@@ -4126,7 +4527,7 @@ class GisKomponentComponent {
         });
     }
     sessionDoneFromActiveObject() {
-        const formatter = new GeoJSON$1();
+        const formatter = new GeoJSON$2();
         const sessionDone = {
             doneFrom: 'activeObjects',
             features: formatter.writeFeaturesObject(this._drawLayerService.allCleanedFeatures)
@@ -4265,7 +4666,7 @@ class GisKomponentComponent {
     _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">
+      <svg width="20" height="20" 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"/>
@@ -4295,12 +4696,16 @@ class GisKomponentComponent {
     }
     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" }, outputs: { sessionDone: "sessionDone", featuresChanged: "featuresChanged" }, providers: [CurrentItemsService, FeatureLoaderService, DrawLayerSourceService, ZoomService, UndoRedoService, ShowInfoHoverService, HoverInfoSearchService, CenterPointService, PrintDrawLayerSourceService,
-            HighlightService, ShowInfoService, InfoSearchProvider, InteractionHelperService, ConflictAnalysisSearchProvider, MergeFeaturesService, OverlapService, CowiService, SearchProviderService], viewQueries: [{ propertyName: "toolbarRef", first: true, predicate: ["toolbarRef"], descendants: true, static: true }, { propertyName: "selectedFeatureInfoRef", first: true, predicate: ["selectedFeatureInfoRef"], descendants: true, static: true }], ngImport: i0, template: "@if (selectedProfile && selectedProfile.showLayerSelector) {\n  <lib-layer-selector [map]=\"map\" [profile]=\"selectedProfile\" [currentZoomLevel]=\"currentZoomLevel\"></lib-layer-selector>\n}\n@if (selectedProfile && selectedProfile.showLegends) {\n  <lib-legends-list [map]=\"map\" [profile]=\"selectedProfile\"></lib-legends-list>\n}\n\n<div #selectedFeatureInfoRef>\n  <selected-feature-info></selected-feature-info>\n</div>\n\n@if(showActiveObjects && activeObjectsReady && settings && selectedProfile) {\n  <activeObjects [settings]=\"settings\" [profile]=\"selectedProfile\" (sessionDone)=\"sessionDoneFromActiveObject()\"></activeObjects>\n}\n<div #toolbarRef class=\"map-toolbar-container\">\n    @if(showToolbox && profileShowToolbox && settings) {\n      <map-toolbox [map]=\"map\" \n      [profile]=\"selectedProfile\"\n      [settings]=\"settings\"\n      [collapsed]=\"selectedProfile.toolbarCollapsed\" [WKTInputEnabled]=\"settings?.WKTInputEnabled\" [deleteEnabled]=\"settings?.deleteEnabled\" [showMeasureArea]=\"selectedProfile.showAreaMeasurement\" [showMeasureDistance]=\"selectedProfile.showDistanceMeasurement\"></map-toolbox>\n    }\n</div>\n\n<div class=\"map-container\">\n  <lib-map-search *ngIf=\"showMapSearch\" [profile]=\"selectedProfile\"></lib-map-search>\n\n\n  <!-- Konflikter -->\n    @if (showConflicts) {\n\n     <div class=\"conflict-panel\" [class.collapsed]=\"conflictsCollapsed\">\n       <div class=\"header\">\n         <span>Konflikter (3)</span>\n          <mat-icon>{{ activeObjectsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon> -->\n        </div>\n        <mat-list>\n          <mat-list-item>\n            <span matListItemTitle>Lag #1</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n          </mat-list-item>\n          <mat-list-item>\n            <span matListItemTitle>Lag #2 (svarer ikke)</span>\n          </mat-list-item>\n          <mat-list-item>\n            <span matListItemTitle>Lag #3</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #2</span>\n          </mat-list-item>\n        </mat-list>\n      </div>\n      \n    } \n\n  <!-- Kort -->\n  <div id=\"map\" class=\"map\"></div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}::ng-deep .lib-error-snackbar{background-color:#d32f2f;color:#fff;font-weight:500}::ng-deep .map-container{position:relative;height:81vh;width:100%;overflow:hidden}::ng-deep #map{width:100%;height:100%;position:absolute;inset:0;overflow:hidden}::ng-deep .ol-viewport{overflow:hidden!important}::ng-deep ::ng-deep .ol-logo{position:absolute;left:auto;right:3em;top:6.25em}::ng-deep ::ng-deep .ol-copyright{background-color:transparent;position:absolute;bottom:10px;width:100%;text-align:center}::ng-deep ::ng-deep .toolbar{position:absolute;top:10px;left:10px;background:#fff;padding:4px;border-radius:4px;display:flex;flex-direction:column;transition:width .3s;z-index:1000;overflow:hidden}::ng-deep ::ng-deep .toolbar.collapsed{width:40px;overflow:hidden}::ng-deep .object-panel{position:absolute;bottom:10px;left:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .object-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep .conflict-panel{position:absolute;bottom:10px;right:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .conflict-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep ::ng-deep .ol-zoom.ol-unselectable.ol-control{display:flex;flex-direction:column;position:absolute;left:1rem}::ng-deep ::ng-deep button.ol-zoom-in{font-size:2em;width:40px;height:40px;background-color:#292a2d;border:none;box-shadow:none;cursor:pointer;border-radius:5px 5px 0 0!important;color:#fff}::ng-deep ::ng-deep button.ol-zoom-in:hover{color:#e9e3e3;outline:none}::ng-deep ::ng-deep .ol-scale-text{display:flex}::ng-deep button.ol-zoom-out{font-size:2em;width:40px;height:40px;background-color:#292a2d;border:none;box-shadow:none;cursor:pointer;color:#fff;border-radius:0 0 5px 5px!important}::ng-deep button.ol-zoom-out:hover{color:#e9e3e3;outline:none}::ng-deep button.ol-rotate-reset{font-size:2em;width:40px;height:40px;background-color:#292a2d;border:none;box-shadow:none;cursor:pointer;color:#fff;border-radius:5px}::ng-deep button.ol-rotate-reset:hover{color:#e9e3e3;outline:none}::ng-deep .ol-scale-bar.ol-unselectable{position:absolute;bottom:3rem;left:1rem}::ng-deep .ol-mouse-position{top:44em;left:12px;position:absolute;background:color-mix(in srgb,#000 21%,transparent);color:#fffcfc;width:189px;height:30px;padding:2px;border-radius:5px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;text-align:center;display:flex;align-items:center;justify-content:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i3$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: LayerSelectorComponent, selector: "lib-layer-selector", inputs: ["map", "profile", "currentZoomLevel"] }, { kind: "component", type: MapSearchComponent, selector: "lib-map-search", inputs: ["profile"] }, { kind: "component", type: ToolboxComponent, selector: "map-toolbox", inputs: ["map", "showMeasureDistance", "showMeasureArea", "collapsed", "settings", "profile", "WKTInputEnabled", "deleteEnabled"] }, { kind: "component", type: ActiveObjectsComponent, selector: "activeObjects", inputs: ["settings", "profile"], outputs: ["sessionDone"] }, { kind: "component", type: LegendsListComponent, selector: "lib-legends-list", inputs: ["map", "profile"] }, { kind: "component", type: SelectedFeatureInfoComponent, selector: "selected-feature-info" }] });
+            HighlightService, ShowInfoService, InfoSearchProvider, InteractionHelperService, ConflictAnalysisSearchProvider,
+            MergeFeaturesService, OverlapService, CowiService, SearchProviderService, AddressSearchService, CadastreSearchService,
+            DmpCatalogService, OlCapabilitiesService, DmpLayerMapperService], viewQueries: [{ propertyName: "toolbarRef", first: true, predicate: ["toolbarRef"], descendants: true, static: true }, { propertyName: "selectedFeatureInfoRef", first: true, predicate: ["selectedFeatureInfoRef"], descendants: true, static: true }], ngImport: i0, template: "@if (selectedProfile && selectedProfile.showLayerSelector) {\n  <lib-layer-selector [map]=\"map\" [profile]=\"selectedProfile\" [currentZoomLevel]=\"currentZoomLevel\"></lib-layer-selector>\n}\n@if (selectedProfile && selectedProfile.showLegends) {\n  <lib-legends-list [map]=\"map\" [profile]=\"selectedProfile\"></lib-legends-list>\n}\n\n<div #selectedFeatureInfoRef>\n  <selected-feature-info></selected-feature-info>\n</div>\n\n@if(showActiveObjects && activeObjectsReady && settings && selectedProfile) {\n  <activeObjects [settings]=\"settings\" [profile]=\"selectedProfile\" (sessionDone)=\"sessionDoneFromActiveObject()\"></activeObjects>\n}\n<div #toolbarRef class=\"map-toolbar-container\">\n    @if(showToolbox && profileShowToolbox && settings) {\n      <map-toolbox [map]=\"map\" \n      [profile]=\"selectedProfile\"\n      [settings]=\"settings\"\n      [collapsed]=\"selectedProfile.toolbarCollapsed\" [WKTInputEnabled]=\"settings?.WKTInputEnabled\" [deleteEnabled]=\"settings?.deleteEnabled\" [showMeasureArea]=\"selectedProfile.showAreaMeasurement\" [showMeasureDistance]=\"selectedProfile.showDistanceMeasurement\"></map-toolbox>\n    }\n</div>\n\n<div class=\"map-container\">\n  <lib-map-search *ngIf=\"showMapSearch\" [profile]=\"selectedProfile\"></lib-map-search>\n\n\n  <!-- Konflikter -->\n    @if (showConflicts) {\n\n     <div class=\"conflict-panel\" [class.collapsed]=\"conflictsCollapsed\">\n       <div class=\"header\">\n         <span>Konflikter (3)</span>\n          <mat-icon>{{ activeObjectsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon> -->\n        </div>\n        <mat-list>\n          <mat-list-item>\n            <span matListItemTitle>Lag #1</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n          </mat-list-item>\n          <mat-list-item>\n            <span matListItemTitle>Lag #2 (svarer ikke)</span>\n          </mat-list-item>\n          <mat-list-item>\n            <span matListItemTitle>Lag #3</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #2</span>\n          </mat-list-item>\n        </mat-list>\n      </div>\n      \n    } \n\n  <!-- Kort -->\n  <div id=\"map\" class=\"map\"></div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}::ng-deep .lib-error-snackbar{background-color:#d32f2f;color:#fff;font-weight:500}::ng-deep .map-container{position:relative;height:81vh;width:100%;overflow:hidden}::ng-deep #map{width:100%;height:100%;position:absolute;inset:0;overflow:hidden}::ng-deep .ol-viewport{overflow:hidden!important}::ng-deep ::ng-deep .ol-logo{position:absolute;left:auto;right:3em;top:6.25em}::ng-deep ::ng-deep .ol-copyright{background-color:transparent;position:absolute;bottom:10px;width:100%;text-align:center}::ng-deep ::ng-deep .toolbar{position:absolute;top:10px;left:10px;background:#fff;padding:4px;border-radius:4px;display:flex;flex-direction:column;transition:width .3s;z-index:1000;overflow:hidden}::ng-deep ::ng-deep .toolbar.collapsed{width:40px;overflow:hidden}::ng-deep .object-panel{position:absolute;bottom:10px;left:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .object-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep .conflict-panel{position:absolute;bottom:10px;right:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .conflict-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep ::ng-deep .ol-zoom.ol-unselectable.ol-control{display:flex;flex-direction:column;position:absolute}::ng-deep ::ng-deep button.ol-zoom-in{background:#4c4d51;border:none;box-shadow:none;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{background:#4c4d51;border:none;box-shadow:none;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{background:#4c4d51;border:none;box-shadow:none;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}::ng-deep .ol-mouse-position{top:44em;left:6px;position:absolute;background:#0000004d;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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i3$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: LayerSelectorComponent, selector: "lib-layer-selector", inputs: ["map", "profile", "currentZoomLevel"] }, { kind: "component", type: MapSearchComponent, selector: "lib-map-search", inputs: ["profile"] }, { kind: "component", type: ToolboxComponent, selector: "map-toolbox", inputs: ["map", "showMeasureDistance", "showMeasureArea", "collapsed", "settings", "profile", "WKTInputEnabled", "deleteEnabled"] }, { kind: "component", type: ActiveObjectsComponent, selector: "activeObjects", inputs: ["settings", "profile"], outputs: ["sessionDone"] }, { kind: "component", type: LegendsListComponent, selector: "lib-legends-list", inputs: ["map", "profile"] }, { kind: "component", type: SelectedFeatureInfoComponent, selector: "selected-feature-info" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GisKomponentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'gis-komponent', imports: [CommonModule, MatIconModule, MatListModule, MatSelectModule, LayerSelectorComponent, MapSearchComponent, ToolboxComponent, ActiveObjectsComponent, LegendsListComponent, SelectedFeatureInfoComponent], providers: [CurrentItemsService, FeatureLoaderService, DrawLayerSourceService, ZoomService, UndoRedoService, ShowInfoHoverService, HoverInfoSearchService, CenterPointService, PrintDrawLayerSourceService,
-                        HighlightService, ShowInfoService, InfoSearchProvider, InteractionHelperService, ConflictAnalysisSearchProvider, MergeFeaturesService, OverlapService, CowiService, SearchProviderService], template: "@if (selectedProfile && selectedProfile.showLayerSelector) {\n  <lib-layer-selector [map]=\"map\" [profile]=\"selectedProfile\" [currentZoomLevel]=\"currentZoomLevel\"></lib-layer-selector>\n}\n@if (selectedProfile && selectedProfile.showLegends) {\n  <lib-legends-list [map]=\"map\" [profile]=\"selectedProfile\"></lib-legends-list>\n}\n\n<div #selectedFeatureInfoRef>\n  <selected-feature-info></selected-feature-info>\n</div>\n\n@if(showActiveObjects && activeObjectsReady && settings && selectedProfile) {\n  <activeObjects [settings]=\"settings\" [profile]=\"selectedProfile\" (sessionDone)=\"sessionDoneFromActiveObject()\"></activeObjects>\n}\n<div #toolbarRef class=\"map-toolbar-container\">\n    @if(showToolbox && profileShowToolbox && settings) {\n      <map-toolbox [map]=\"map\" \n      [profile]=\"selectedProfile\"\n      [settings]=\"settings\"\n      [collapsed]=\"selectedProfile.toolbarCollapsed\" [WKTInputEnabled]=\"settings?.WKTInputEnabled\" [deleteEnabled]=\"settings?.deleteEnabled\" [showMeasureArea]=\"selectedProfile.showAreaMeasurement\" [showMeasureDistance]=\"selectedProfile.showDistanceMeasurement\"></map-toolbox>\n    }\n</div>\n\n<div class=\"map-container\">\n  <lib-map-search *ngIf=\"showMapSearch\" [profile]=\"selectedProfile\"></lib-map-search>\n\n\n  <!-- Konflikter -->\n    @if (showConflicts) {\n\n     <div class=\"conflict-panel\" [class.collapsed]=\"conflictsCollapsed\">\n       <div class=\"header\">\n         <span>Konflikter (3)</span>\n          <mat-icon>{{ activeObjectsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon> -->\n        </div>\n        <mat-list>\n          <mat-list-item>\n            <span matListItemTitle>Lag #1</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n          </mat-list-item>\n          <mat-list-item>\n            <span matListItemTitle>Lag #2 (svarer ikke)</span>\n          </mat-list-item>\n          <mat-list-item>\n            <span matListItemTitle>Lag #3</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #2</span>\n          </mat-list-item>\n        </mat-list>\n      </div>\n      \n    } \n\n  <!-- Kort -->\n  <div id=\"map\" class=\"map\"></div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}::ng-deep .lib-error-snackbar{background-color:#d32f2f;color:#fff;font-weight:500}::ng-deep .map-container{position:relative;height:81vh;width:100%;overflow:hidden}::ng-deep #map{width:100%;height:100%;position:absolute;inset:0;overflow:hidden}::ng-deep .ol-viewport{overflow:hidden!important}::ng-deep ::ng-deep .ol-logo{position:absolute;left:auto;right:3em;top:6.25em}::ng-deep ::ng-deep .ol-copyright{background-color:transparent;position:absolute;bottom:10px;width:100%;text-align:center}::ng-deep ::ng-deep .toolbar{position:absolute;top:10px;left:10px;background:#fff;padding:4px;border-radius:4px;display:flex;flex-direction:column;transition:width .3s;z-index:1000;overflow:hidden}::ng-deep ::ng-deep .toolbar.collapsed{width:40px;overflow:hidden}::ng-deep .object-panel{position:absolute;bottom:10px;left:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .object-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep .conflict-panel{position:absolute;bottom:10px;right:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .conflict-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep ::ng-deep .ol-zoom.ol-unselectable.ol-control{display:flex;flex-direction:column;position:absolute;left:1rem}::ng-deep ::ng-deep button.ol-zoom-in{font-size:2em;width:40px;height:40px;background-color:#292a2d;border:none;box-shadow:none;cursor:pointer;border-radius:5px 5px 0 0!important;color:#fff}::ng-deep ::ng-deep button.ol-zoom-in:hover{color:#e9e3e3;outline:none}::ng-deep ::ng-deep .ol-scale-text{display:flex}::ng-deep button.ol-zoom-out{font-size:2em;width:40px;height:40px;background-color:#292a2d;border:none;box-shadow:none;cursor:pointer;color:#fff;border-radius:0 0 5px 5px!important}::ng-deep button.ol-zoom-out:hover{color:#e9e3e3;outline:none}::ng-deep button.ol-rotate-reset{font-size:2em;width:40px;height:40px;background-color:#292a2d;border:none;box-shadow:none;cursor:pointer;color:#fff;border-radius:5px}::ng-deep button.ol-rotate-reset:hover{color:#e9e3e3;outline:none}::ng-deep .ol-scale-bar.ol-unselectable{position:absolute;bottom:3rem;left:1rem}::ng-deep .ol-mouse-position{top:44em;left:12px;position:absolute;background:color-mix(in srgb,#000 21%,transparent);color:#fffcfc;width:189px;height:30px;padding:2px;border-radius:5px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;text-align:center;display:flex;align-items:center;justify-content:flex-start}\n"] }]
+                        HighlightService, ShowInfoService, InfoSearchProvider, InteractionHelperService, ConflictAnalysisSearchProvider,
+                        MergeFeaturesService, OverlapService, CowiService, SearchProviderService, AddressSearchService, CadastreSearchService,
+                        DmpCatalogService, OlCapabilitiesService, DmpLayerMapperService], template: "@if (selectedProfile && selectedProfile.showLayerSelector) {\n  <lib-layer-selector [map]=\"map\" [profile]=\"selectedProfile\" [currentZoomLevel]=\"currentZoomLevel\"></lib-layer-selector>\n}\n@if (selectedProfile && selectedProfile.showLegends) {\n  <lib-legends-list [map]=\"map\" [profile]=\"selectedProfile\"></lib-legends-list>\n}\n\n<div #selectedFeatureInfoRef>\n  <selected-feature-info></selected-feature-info>\n</div>\n\n@if(showActiveObjects && activeObjectsReady && settings && selectedProfile) {\n  <activeObjects [settings]=\"settings\" [profile]=\"selectedProfile\" (sessionDone)=\"sessionDoneFromActiveObject()\"></activeObjects>\n}\n<div #toolbarRef class=\"map-toolbar-container\">\n    @if(showToolbox && profileShowToolbox && settings) {\n      <map-toolbox [map]=\"map\" \n      [profile]=\"selectedProfile\"\n      [settings]=\"settings\"\n      [collapsed]=\"selectedProfile.toolbarCollapsed\" [WKTInputEnabled]=\"settings?.WKTInputEnabled\" [deleteEnabled]=\"settings?.deleteEnabled\" [showMeasureArea]=\"selectedProfile.showAreaMeasurement\" [showMeasureDistance]=\"selectedProfile.showDistanceMeasurement\"></map-toolbox>\n    }\n</div>\n\n<div class=\"map-container\">\n  <lib-map-search *ngIf=\"showMapSearch\" [profile]=\"selectedProfile\"></lib-map-search>\n\n\n  <!-- Konflikter -->\n    @if (showConflicts) {\n\n     <div class=\"conflict-panel\" [class.collapsed]=\"conflictsCollapsed\">\n       <div class=\"header\">\n         <span>Konflikter (3)</span>\n          <mat-icon>{{ activeObjectsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon> -->\n        </div>\n        <mat-list>\n          <mat-list-item>\n            <span matListItemTitle>Lag #1</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n          </mat-list-item>\n          <mat-list-item>\n            <span matListItemTitle>Lag #2 (svarer ikke)</span>\n          </mat-list-item>\n          <mat-list-item>\n            <span matListItemTitle>Lag #3</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n            <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #2</span>\n          </mat-list-item>\n        </mat-list>\n      </div>\n      \n    } \n\n  <!-- Kort -->\n  <div id=\"map\" class=\"map\"></div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}::ng-deep .lib-error-snackbar{background-color:#d32f2f;color:#fff;font-weight:500}::ng-deep .map-container{position:relative;height:81vh;width:100%;overflow:hidden}::ng-deep #map{width:100%;height:100%;position:absolute;inset:0;overflow:hidden}::ng-deep .ol-viewport{overflow:hidden!important}::ng-deep ::ng-deep .ol-logo{position:absolute;left:auto;right:3em;top:6.25em}::ng-deep ::ng-deep .ol-copyright{background-color:transparent;position:absolute;bottom:10px;width:100%;text-align:center}::ng-deep ::ng-deep .toolbar{position:absolute;top:10px;left:10px;background:#fff;padding:4px;border-radius:4px;display:flex;flex-direction:column;transition:width .3s;z-index:1000;overflow:hidden}::ng-deep ::ng-deep .toolbar.collapsed{width:40px;overflow:hidden}::ng-deep .object-panel{position:absolute;bottom:10px;left:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .object-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep .conflict-panel{position:absolute;bottom:10px;right:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .conflict-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep ::ng-deep .ol-zoom.ol-unselectable.ol-control{display:flex;flex-direction:column;position:absolute}::ng-deep ::ng-deep button.ol-zoom-in{background:#4c4d51;border:none;box-shadow:none;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{background:#4c4d51;border:none;box-shadow:none;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{background:#4c4d51;border:none;box-shadow:none;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}::ng-deep .ol-mouse-position{top:44em;left:6px;position:absolute;background:#0000004d;color:#fffcfc;width:189px;height:30px;padding:2px;border-radius:5px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;text-align:center;display:flex;align-items:center;justify-content:flex-start}\n"] }]
         }], ctorParameters: () => [], propDecorators: { showToolbox: [{
                 type: Input
             }], showActiveObjects: [{