@regionerne/gis-komponent 0.0.59 → 0.0.61

package/fesm2022/regionerne-gis-komponent.mjs

@@ -445,57 +445,117 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
         }] });
 
 class LayoutService {
-    loadInitialPositionFromProfile(widgetName, initialPosition) {
-        let dragPosition = { x: 2, y: -25 };
-        switch (initialPosition) {
-            case 'øverst/venstre':
-                dragPosition = { x: 46, y: -119 };
-                this._savePosition(widgetName, dragPosition);
-                break;
-            case 'midt/venstre':
-                dragPosition = { x: 1, y: 247 };
-                this._savePosition(widgetName, dragPosition);
-                break;
-            case 'nederst/venstre':
-                dragPosition = { x: 0, y: 493 };
-                this._savePosition(widgetName, dragPosition);
-                break;
-            case 'øverst/midt':
-                dragPosition = { x: 849, y: -154 };
-                this._savePosition(widgetName, dragPosition);
-                break;
-            case 'nederst/midt':
-                dragPosition = { x: 895, y: 481 };
-                this._savePosition(widgetName, dragPosition);
-                break;
-            case 'øverst/højre':
-                dragPosition = { x: 1599, y: -121 };
-                this._savePosition(widgetName, dragPosition);
-                break;
-            case 'midt/højre':
-                dragPosition = { x: 1600, y: 164 };
-                this._savePosition(widgetName, dragPosition);
-                break;
-            case 'nederst/højre':
-                dragPosition = { x: 1600, y: 500 };
-                this._savePosition(widgetName, dragPosition);
-                break;
-        }
-        return dragPosition;
+    _map;
+    mapResizedSubject = new Subject();
+    set map(value) {
+        this._map = value;
     }
-    bringElementIntoViewIfNeeded(elementClass, offsetValue, collapsed) {
-        const element = document.querySelector(elementClass);
-        if (!element)
-            return;
-        const left = parseInt(element.style.left || '0', 10);
-        if (collapsed) {
-            // Widget minimized, remove the style for left
-            element.style.left = '0em';
+    keepWidgetInViewPort(dragPosition, widgetName, widgetHeight, widgetWidth, resizedContainerHeight = null, resizedContainerWidth = null) {
+        //Expanding or changing map size, make sure the widget stays in viewport
+        const widgetPositionOptions = {
+            initialPosition: '',
+            widgetName: widgetName,
+            widgetHeight: widgetHeight,
+            widgetWidth: widgetWidth,
+            currentPosition: dragPosition,
+            resizedContainerHeight: resizedContainerHeight,
+            resizedContainerWidth: resizedContainerWidth
+        };
+        return this.calculateWidgetPosition(widgetPositionOptions);
+    }
+    calculateWidgetPosition({ initialPosition, widgetName, widgetWidth, widgetHeight, offsetX = 2, offsetY = 9, currentPosition = null, resizedContainerHeight = null, resizedContainerWidth = null }) {
+        let x = 0;
+        let y = 0;
+        let dragPosition = { x: x, y: y };
+        if (!this._map)
+            return dragPosition;
+        const containerRect = this._map.getViewport().getBoundingClientRect();
+        if (currentPosition) {
+            // Expanding a widget or viewport changed size, so fit the widget inside view again
+            x = currentPosition.x;
+            y = currentPosition.y;
+            if (resizedContainerHeight && resizedContainerWidth) {
+                containerRect.height = resizedContainerHeight;
+                containerRect.width = resizedContainerWidth;
+            }
         }
         else {
-            // If widget expands outside screen on the right (left is > <offsetValue> em), then bring it back
-            element.style.left = `${left > offsetValue ? offsetValue : left}em`;
+            let vertical = 'top';
+            let horizontal = 'left';
+            switch (initialPosition) {
+                case 'øverst/venstre':
+                    vertical = 'top';
+                    horizontal = 'left';
+                    break;
+                case 'midt/venstre':
+                    vertical = 'middle';
+                    horizontal = 'left';
+                    break;
+                case 'nederst/venstre':
+                    vertical = 'bottom';
+                    horizontal = 'left';
+                    break;
+                case 'øverst/midt':
+                    vertical = 'top';
+                    horizontal = 'middle';
+                    break;
+                case 'nederst/midt':
+                    vertical = 'bottom';
+                    horizontal = 'middle';
+                    break;
+                case 'øverst/højre':
+                    vertical = 'top';
+                    horizontal = 'right';
+                    break;
+                case 'midt/højre':
+                    vertical = 'middle';
+                    horizontal = 'right';
+                    break;
+                case 'nederst/højre':
+                    vertical = 'bottom';
+                    horizontal = 'right';
+                    break;
+                default: break;
+            }
+            // Vertical positioning
+            switch (vertical) {
+                case 'top':
+                    y = offsetY;
+                    break;
+                case 'middle':
+                    y = (containerRect.height - widgetHeight) / 2;
+                    break;
+                case 'bottom':
+                    if (horizontal === 'left')
+                        offsetY = offsetY + 90; // Move above scalebar in bottom-left corner
+                    y = containerRect.height - widgetHeight - offsetY;
+                    break;
+            }
+            // Horizontal positioning
+            switch (horizontal) {
+                case 'left':
+                    if (vertical === 'top')
+                        offsetX = offsetX + 35; // Move to right of zoom in top-left corner
+                    x = offsetX;
+                    break;
+                case 'middle':
+                    x = (containerRect.width - widgetWidth) / 2;
+                    break;
+                case 'right':
+                    if (vertical === 'top')
+                        offsetX = offsetX + 35; // Move to left of compass in top-right corner
+                    x = containerRect.width - widgetWidth - offsetX;
+                    break;
+            }
         }
+        console.log('Ensure the widget stays inside the viewport', containerRect, containerRect.width - widgetWidth, x, containerRect.height - widgetHeight, y);
+        // Ensure the widget stays inside the viewport
+        x = Math.max(offsetX, Math.min(x, containerRect.width - widgetWidth));
+        y = Math.max(offsetY, Math.min(y, containerRect.height - widgetHeight));
+        dragPosition = { x: x, y: y };
+        console.log('calculateWidgetPosition end ', dragPosition);
+        this._savePosition(widgetName, dragPosition);
+        return { x, y };
     }
     _savePosition(widgetStorageKey, position) {
         try {
@@ -762,6 +822,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: OlCapabilitiesService }] });
 
+class WidgetConstants {
+    static collapsedHeight = 24;
+    static collapsedWidth = 86;
+    static toolboxHeight = 64;
+    static toolboxWidth = 729;
+    static searchHeight = 122;
+    static searchWidth = 374;
+    static activeObjectsHeight = 80;
+    static activeObjectsWidth = 350;
+    static layerSelectorHeight = 209;
+    static layerSelectorWidth = 329;
+    static legendsHeight = 341;
+    static legendsWidth = 296;
+    static toolboxDefaultX = 29;
+    static toolboxDefaultY = 120;
+    static searchDefaultX = 29;
+    static searchDefaultY = 5;
+    static activeObjectsDefaultX = 29;
+    static activeObjectsDefaultY = 238;
+    static layerSelectorDefaultX = 29;
+    static layerSelectorDefaultY = 470;
+    static legendsDefaultX = 1790;
+    static legendsDefaultY = 743;
+}
+
 class LayerSelectorComponent {
     set contentBody(content) {
         this._layerSelectorBody = content;
@@ -797,9 +882,7 @@ class LayerSelectorComponent {
     _dmpCatalogService = inject(DmpCatalogService);
     _dmpMapper = inject(DmpLayerMapperService);
     _profileService = inject(ProfileService);
-    LAYER_SELECTOR_POSITION_KEY = 'layerSelectorPosition';
     ngOnInit() {
-        this._loadPosition();
         this._layerHelper.layerActivatedByBackgroundGroup
             .subscribe(layerId => this.toggleLayer(layerId, undefined, true));
         this._layerErrorService.layerErrored
@@ -818,7 +901,6 @@ class LayerSelectorComponent {
     ngOnChanges(changes) {
         if (changes['profile'] && this.profile) {
             this.collapsed = this.profile.layerSelectorFolded;
-            this._loadPosition();
             this.allLayerGroups = this.profile.layerGroups
                 .map((lg, idx) => ({ ...lg,
                 noOfVisibleLayers: lg.layers.filter(l => l.activeInSelector && l.visible).length,
@@ -833,10 +915,12 @@ class LayerSelectorComponent {
                 if (cachedProfileInfo.profile.versionId < this.profile.versionId) {
                     //Profile version changed in backend, use that
                     this._profileService.setProfileVersionChanged(true);
+                    this._loadPosition(this.collapsed);
                     this.filterChanged();
                     this._cacheProfileInfo();
                 }
                 else {
+                    this._loadPosition(this.collapsed);
                     this.filteredLayerGroups = cachedProfileInfo.cachedLayerGroups.filter(gr => !gr.background);
                     ;
                     this.filteredBackgroundLayerGroups = cachedProfileInfo.cachedLayerGroups.filter(gr => gr.background);
@@ -844,6 +928,7 @@ class LayerSelectorComponent {
                 }
             }
             else {
+                this._loadPosition(this.collapsed);
                 this.filterChanged();
                 this._cacheProfileInfo();
             }
@@ -876,7 +961,7 @@ class LayerSelectorComponent {
         const position = event.source.getFreeDragPosition();
         this.layerSelectorDragPosition = position;
         try {
-            localStorage.setItem(this.LAYER_SELECTOR_POSITION_KEY, JSON.stringify(position));
+            localStorage.setItem(this.POSITION_STORAGE_KEY, JSON.stringify(position));
         }
         catch (error) {
             console.error('Error saving layer selector position to localStorage:', error);
@@ -1025,8 +1110,9 @@ class LayerSelectorComponent {
             this.searchText = '';
             this.filterChanged();
         }
-        if (this.profile.layerSelectorInitialPosition.includes('højre')) {
-            this._layoutService.bringElementIntoViewIfNeeded('.layer-selector-body-wrapper', -13, this.collapsed);
+        if (!this.collapsed) {
+            //Expanding, make sure it stays in viewport
+            this.layerSelectorDragPosition = this._layoutService.keepWidgetInViewPort(this.layerSelectorDragPosition, this.POSITION_STORAGE_KEY, WidgetConstants.layerSelectorHeight, WidgetConstants.layerSelectorWidth);
         }
     }
     updateOpacity(layerId, opacity) {
@@ -1124,23 +1210,37 @@ class LayerSelectorComponent {
             console.error('Error saving position to localStorage:', error);
         }
     }
-    _loadPosition() {
+    _loadPosition(collapsed) {
         try {
+            // Default height and width when collapsed
+            let widgetHeight = WidgetConstants.collapsedHeight;
+            let widgetWidth = WidgetConstants.collapsedWidth;
+            if (!collapsed) {
+                // Custom height and width when expanded
+                widgetHeight = WidgetConstants.layerSelectorHeight;
+                widgetWidth = WidgetConstants.layerSelectorWidth;
+            }
+            const widgetPositionOptions = {
+                initialPosition: this.profile.layerSelectorInitialPosition,
+                widgetName: this.POSITION_STORAGE_KEY,
+                widgetHeight: widgetHeight,
+                widgetWidth: widgetWidth
+            };
             const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
             if (this._profileService.getProfileVersionChanged() &&
                 this.profile?.layerSelectorInitialPosition) {
                 //Profile version changed in backend, use that
-                this.layerSelectorDragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.layerSelectorInitialPosition);
+                this.layerSelectorDragPosition = this._layoutService.calculateWidgetPosition(widgetPositionOptions);
             }
             else if (savedPosition) {
                 this.layerSelectorDragPosition = JSON.parse(savedPosition);
             }
             else if (this.profile?.layerSelectorInitialPosition) {
-                this.layerSelectorDragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.layerSelectorInitialPosition);
+                this.layerSelectorDragPosition = this._layoutService.calculateWidgetPosition(widgetPositionOptions);
             }
             else {
                 // Default position for layer selector
-                this.layerSelectorDragPosition = { x: 29, y: 370 };
+                this.layerSelectorDragPosition = { x: WidgetConstants.layerSelectorDefaultX, y: WidgetConstants.layerSelectorDefaultY };
                 this._savePosition(this.layerSelectorDragPosition);
             }
         }
@@ -1171,12 +1271,12 @@ class LayerSelectorComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayerSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LayerSelectorComponent, isStandalone: true, selector: "lib-layer-selector", inputs: { map: "map", profile: "profile", currentZoomLevel: "currentZoomLevel" }, viewQueries: [{ propertyName: "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 global-wrapper-container\"\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      <div class=\"search-field-wrapper\">\n        <label class=\"search-label\">Filtrer</label>\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n          <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\n          <input \n            matInput \n            type=\"text\" \n            [(ngModel)]=\"searchText\" \n            (ngModelChange)=\"filterChanged()\"\n          />\n        </mat-form-field>\n      </div>\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 class=\"arrow-up-layer\">arrow_upward</mat-icon>\n                  }\n                  @if (!group.expanded) {\n                    <mat-icon>arrow_downward</mat-icon>  \n                  }\n                <span class=\"panel-title\">{{ group.name }} </span>\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=\"Sluk\"  \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=\"T\u00E6nd\"  \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=\"Sluk\"  \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=\"T\u00E6nd\"  \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 (filteredDmpLayers.length > 0) {\n        <div class=\"dmp-item-list\"   cdkDropList\n                [cdkDropListData]=\"filteredDmpLayers\"\n                (cdkDropListDropped)=\"dropDmpLayer($event)\">\n          @for (layer of filteredDmpLayers; 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=\"dmp-item\" cdkDrag cdkDragPreviewDisabled>\n                      <div class=\"dmp-item-container\">\n                        <div class=\"dmp-item-left\">\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\">\n                          <span class=\"title-text\">{{ layer.title }}</span>\n                        </div>\n                      </div>\n                    \n                      <div class=\"dmp-item-center\">\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                        @if (layer.visible) {\n                          <mat-icon (click)=\"toggleLayer(layer.datasetId, $event)\" class=\"power-on\"  \n                            matTooltip=\"Sluk\"  \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=\"T\u00E6nd\"  \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipPosition=\"above\">power_settings_new\n                          </mat-icon>\n                        }\n                      </div>\n                    <div class=\"dmp-item-right\">\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 class=\"arrow-up-layer\">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=\"Sluk\"  \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=\"T\u00E6nd\"  \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=\"Sluk\"  \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=\"T\u00E6nd\"  \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            <div class=\"search-field-wrapper\">\n              <label class=\"search-label\">S\u00F8g</label>\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\n                <input \n                  matInput \n                  type=\"text\" \n                  [(ngModel)]=\"dmpSearchText\" \n                  (ngModelChange)=\"searchDmp()\"\n                />\n              </mat-form-field>\n            </div>\n            <mat-icon (click)=\"clearDmpSearchText()\" class=\"undo-icon\" >undo</mat-icon>\n          </div>\n          <mat-icon \n            class=\"close-button\" \n            (click)=\"toggleDmpSearch(false)\"\n            matTooltip=\"Luk\" \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 global-wrapper-container\">\n          <div *ngFor=\"let result of dmpLayerResults\" [attr.data-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            </div>\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 .dmp-dialog-content mat-dialog-content .search-section{display:flex;align-items:center;gap:6px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .undo-icon{color:#fff!important;cursor:pointer;flex-shrink:0}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .undo-icon:hover{color:#d3d3d3}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .search-field-wrapper{flex:1;display:flex;flex-direction:column}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .search-label{color:#fff}::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 .search-icon{color:#fff}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#dee2e6!important;border-width:1px!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#d1d5db!important;border-width:1px!important;box-shadow:0 0 0 3px #d1d5db40!important}::ng-deep .dmp-dialog-content mat-dialog-actions{display:none}::ng-deep .dmp-dialog-content .search-result-option{padding:0!important}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel{box-shadow:none!important;margin-bottom:2px;border-radius:0!important;background:transparent!important;color:#fff}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#0003}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px!important}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:10px 12px!important}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:10px;display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{font-size:11px;gap:6px}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{color:#bdc1c3cc!important;min-width:90px;font-weight:500;flex-shrink:0;font-size:13px}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{min-width:80px}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-value{color:#fff!important;font-weight:300;flex:1;word-break:break-word;font-size:13px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link:hover{color:#2180c9!important;text-decoration:underline!important}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link .link-icon{font-size:14px;width:14px;height:14px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section{display:flex;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .field-label{min-width:90px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option{color:#6ccb78!important;cursor:pointer;font-size:20px;width:20px;height:20px;transition:all .2s ease}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option:hover{color:#45a049!important;transform:scale(1.1)}.dmp-search-panel{overflow-y:scroll;max-height:300px}.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}.dmp-search-panel .search-result-option{padding:0!important;margin-bottom:2px}.dmp-search-panel .search-result-option mat-expansion-panel{box-shadow:none!important;margin:0;border-radius:0!important;background:transparent!important}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#0003}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px!important}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:10px 12px!important}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:10px;display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{font-size:11px;gap:6px}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{color:#bdc1c3cc!important;min-width:90px;font-weight:500;flex-shrink:0;font-size:13px}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{min-width:80px}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-value{color:#fff!important;font-weight:300;flex:1;word-break:break-word;font-size:13px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link:hover{color:#2180c9!important;text-decoration:underline!important}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link .link-icon{font-size:14px;width:14px;height:14px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section{display:flex;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .field-label{min-width:90px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option{color:#6ccb78!important;cursor:pointer;font-size:20px;width:20px;height:20px;transition:all .2s ease}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option:hover{color:#45a049!important;transform:scale(1.1)}.dmp-search-panel .search-result-option:first-child mat-expansion-panel .mat-expansion-panel-header{border-top-left-radius:4px!important;border-top-right-radius:4px!important}.dmp-search-panel .search-result-option:last-child mat-expansion-panel .mat-expansion-panel-header.mat-expanded{border-radius:0!important}.dmp-search-panel .search-result-option:last-child mat-expansion-panel .mat-expansion-panel-content{border-bottom-left-radius:4px!important;border-bottom-right-radius:4px!important}.dialog-header{position:relative}.dialog-header .close-button{position:absolute;top:-9px;right:-14px;color:#fff;cursor:pointer;border-radius:50%;transition:all .2s ease;font-size:18px;width:24px;height:24px;display:flex;justify-content:center;align-items:center;z-index:10;background-color:#ffffff1a}.dialog-header .close-button:hover{color:#e0d5d5}.field-label{color:#bdc1c3cc!important;margin-right:6px}.open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}.open-link:hover{color:#2180c9!important;text-decoration:underline!important}.field-value{color:#fff!important;font-weight:300}.add-layer-section{display:flex;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.dmp-item-list .dmp-item-container{display:flex;align-items:center;width:100%;gap:12px;min-width:0}.dmp-item-list .dmp-item-container .dmp-item-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer;flex-shrink:0}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon:hover{color:#d3d3d3}.dmp-item-list .dmp-item-container .dmp-item-left .dmp-item-title{flex:1;min-width:0;overflow:hidden}.dmp-item-list .dmp-item-container .dmp-item-left .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-left .dmp-item-title .title-text{font-size:11px}}.dmp-item-list .dmp-item-container .dmp-item-center{display:flex;align-items:center;gap:8px;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-center .zoom-off{color:#ef4444;font-size:16px;width:16px;height:16px}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center .zoom-off{font-size:14px;width:14px;height:14px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon{flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on{color:#6ccb78;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on:hover{background:#4caf5033;border-radius:5px}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off:hover{color:#d3d3d3}.dmp-item-list .dmp-item-container .dmp-item-right{display:flex;align-items:center;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]{width:60px;height:4px;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-moz-range-thumb:hover{background:#6ccb78}::ng-deep .dmp-item-list mat-expansion-panel{box-shadow:none!important}.group-header{display:flex;color:#fff;padding:8px 14px;font-weight:600;background:#ffffff08}.group-header mat-icon{margin-left:10px;cursor:pointer;color:#bdc1c3cc;transition:color .2s ease}.group-header mat-icon:hover{color:#6ccb78}.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-top-left-radius:5px;border-top-right-radius:5px;box-shadow:0 2px 10px #0000001a;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.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 .layer-selector-body{display:none}.layer-selector-body-wrapper.collapsed .drag-handle-selector{width:100%;min-width:100%;box-sizing:border-box;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.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}@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}.drag-handle-content,.drag-handle-icons{display:flex;align-items:center;width:100%}.drag-handle-icons mat-icon{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;width:100%;max-width:100%;max-height:317px;min-height:120px;overflow-y:auto;border-radius:0 0 5px 5px!important}::ng-deep .layer-selector-body .mat-expansion-panel-header-title{gap:6px}::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;padding:12px 12px 8px;justify-content:center;align-items:center;gap:8px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section{padding:8px 8px 4px;gap:4px}}::ng-deep .layer-selector-body .search-section .search-field-wrapper{flex:1;display:flex;flex-direction:column}::ng-deep .layer-selector-body .search-section .search-label{color:#fff}::ng-deep .layer-selector-body .search-section mat-form-field{flex:1}::ng-deep .layer-selector-body .search-section mat-form-field .search-icon{color:#fff}::ng-deep .layer-selector-body .search-section mat-form-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent}::ng-deep .layer-selector-body .search-section>mat-icon{color:#fff;cursor:pointer;margin-top:0;transition:color .2s ease}::ng-deep .layer-selector-body .search-section>mat-icon:hover{color:#d3d3d3}@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:none}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel{background:transparent!important;box-shadow:none!important;margin-bottom:4px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header{padding:0 16px;height:40px!important}}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title{display:flex;align-items:center;gap:6px;font-weight:600!important;color:#bdc1c3cc!important;transition:color .2s ease}@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:all .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.power-on{color:#6ccb78;cursor:pointer}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-on:hover{color:#45a049}::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:#bdc1c3cc}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-off:hover{color:#d3d3d3}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-content{background:#0003}@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 2px 12px}}::ng-deep .layer-selector-body .item-list .group .item-list{padding:0}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel{background:transparent!important;box-shadow:none!important;margin-bottom:2px}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel .mat-expansion-panel-content{background:#00000026}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:8px 16px 12px 32px}::ng-deep .layer-selector-body .item-list .group .item-list .layer-description{font-size:12px;color:#fffc;line-height:1.5;margin-bottom:8px;margin-left:28px}::ng-deep .layer-selector-body .item-list .group .item{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;background:transparent;transition:all .2s ease;color:#fff;cursor:move;font-size:13px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item:hover{background-color:transparent}::ng-deep .layer-selector-body .item-list .group .item .item-left{display:flex;align-items:center;gap:4px;flex:1;min-width:0}::ng-deep .layer-selector-body .item-list .group .item .item-left .drag-indicator{color:#ffffff80;font-size:16px;width:16px;height:16px;cursor:move;flex-shrink:0}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left .drag-indicator{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info{cursor:pointer;color:#dfca0e;font-size:16px;width:16px;height:16px;flex-shrink:0;transition:all .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info:hover{color:#ccb913}::ng-deep .layer-selector-body .item-list .group .item .item-left span{flex:1;font-size:13px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;color:#fff;font-weight:400}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left span{font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item .item-center{display:flex;align-items:center;gap:4px;flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-center .zoom-off{color:#ef4444;font-size:16px;width:16px;height:16px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-center .zoom-off{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-right{display:flex;align-items:center;gap:8px;flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon{flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on{color:#6ccb78;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on{font-size:16px;width:16px;height:16px}}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on:hover{color:#45a049}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off{font-size:16px;width:16px;height:16px}}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off:hover{color:#d3d3d3}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]{width:60px;height:4px;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-moz-range-thumb:hover{background:#6ccb78}::ng-deep .layer-selector-body-wrapper .result-title{color:#fff}::ng-deep .layer-selector-body-wrapper .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}::ng-deep .layer-selector-body-wrapper .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .mat-expansion-panel-header.mat-expanded:hover{background:inherit!important}::ng-deep .layer-selector-body-wrapper .show-layer-highlight{font-size:18px;height:18px;width:18px}::ng-deep .layer-selector-body-wrapper .dmp-item{cursor:move;width:100%}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel-header.mat-expanded:hover,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel-header.mat-expanded:hover{background:#ffffff26!important}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel:not([class*=mat-elevation-z]),::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-indicator:after,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-indicator:after{color:#fff!important;border-color:#fff!important}::ng-deep .layer-selector-body-wrapper mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding-left:0!important;padding-right:0!important;box-sizing:border-box}@media (max-width: 767px){::ng-deep .layer-selector-body-wrapper mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding-left:12px!important;padding-right:12px!important}}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 5px 15px #00000026;background:#4c4d51;padding:8px 12px;color:#fff;display:flex;align-items:center;gap:8px}.cdk-drag-preview mat-icon{color:#fff}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.power-on{color:#6ccb78!important;font-size:18px;width:18px;height:18px}.power-off{cursor:pointer;color:#bdc1c3cc!important}.add-option{color:#6ccb78!important}.add-option:hover{color:#37923a!important}::ng-deep .lightbulb{color:#dfca0e;width:18px;height:18px;font-size:18px}::ng-deep .arrow-up-layer{color:#fff;width:18px;height:18px;font-size:18px}::ng-deep .mdc-text-field--outlined{overflow:hidden!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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.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: i3.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: i3.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: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
+    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 global-wrapper-container\"\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      <div class=\"search-field-wrapper\">\n        <label class=\"search-label\">Filtrer</label>\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n          <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\n          <input \n            matInput \n            type=\"text\" \n            [(ngModel)]=\"searchText\" \n            (ngModelChange)=\"filterChanged()\"\n          />\n        </mat-form-field>\n      </div>\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 class=\"arrow-up-layer\">arrow_upward</mat-icon>\n                  }\n                  @if (!group.expanded) {\n                    <mat-icon>arrow_downward</mat-icon>  \n                  }\n                <span class=\"panel-title\">{{ group.name }} </span>\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=\"Sluk\"  \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=\"T\u00E6nd\"  \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=\"Sluk\"  \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=\"T\u00E6nd\"  \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 (filteredDmpLayers.length > 0) {\n        <div class=\"dmp-item-list\"   cdkDropList\n                [cdkDropListData]=\"filteredDmpLayers\"\n                (cdkDropListDropped)=\"dropDmpLayer($event)\">\n          @for (layer of filteredDmpLayers; 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=\"dmp-item\" cdkDrag cdkDragPreviewDisabled>\n                      <div class=\"dmp-item-container\">\n                        <div class=\"dmp-item-left\">\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\">\n                          <span class=\"title-text\">{{ layer.title }}</span>\n                        </div>\n                      </div>\n                    \n                      <div class=\"dmp-item-center\">\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                        @if (layer.visible) {\n                          <mat-icon (click)=\"toggleLayer(layer.datasetId, $event)\" class=\"power-on\"  \n                            matTooltip=\"Sluk\"  \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=\"T\u00E6nd\"  \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipPosition=\"above\">power_settings_new\n                          </mat-icon>\n                        }\n                      </div>\n                    <div class=\"dmp-item-right\">\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 class=\"arrow-up-layer\">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=\"Sluk\"  \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=\"T\u00E6nd\"  \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=\"Sluk\"  \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=\"T\u00E6nd\"  \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            <div class=\"search-field-wrapper\">\n              <label class=\"search-label\">S\u00F8g</label>\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\n                <input \n                  matInput \n                  type=\"text\" \n                  [(ngModel)]=\"dmpSearchText\" \n                  (ngModelChange)=\"searchDmp()\"\n                />\n              </mat-form-field>\n            </div>\n            <mat-icon (click)=\"clearDmpSearchText()\" class=\"undo-icon\" >undo</mat-icon>\n          </div>\n          <mat-icon \n            class=\"close-button\" \n            (click)=\"toggleDmpSearch(false)\"\n            matTooltip=\"Luk\" \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 global-wrapper-container\">\n          <div *ngFor=\"let result of dmpLayerResults\" [attr.data-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            </div>\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 .dmp-dialog-content mat-dialog-content .search-section{display:flex;align-items:center;gap:6px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .undo-icon{color:#fff!important;cursor:pointer;flex-shrink:0}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .undo-icon:hover{color:#d3d3d3}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .search-field-wrapper{flex:1;display:flex;flex-direction:column}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .search-label{color:#fff}::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 .search-icon{color:#fff}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#dee2e6!important;border-width:1px!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#d1d5db!important;border-width:1px!important;box-shadow:0 0 0 3px #d1d5db40!important}::ng-deep .dmp-dialog-content mat-dialog-actions{display:none}::ng-deep .dmp-dialog-content .search-result-option{padding:0!important}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel{box-shadow:none!important;margin-bottom:2px;border-radius:0!important;background:transparent!important;color:#fff}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#0003}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px!important}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:10px 12px!important}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:10px;display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{font-size:11px;gap:6px}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{color:#bdc1c3cc!important;min-width:90px;font-weight:500;flex-shrink:0;font-size:13px}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{min-width:80px}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-value{color:#fff!important;font-weight:300;flex:1;word-break:break-word;font-size:13px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link:hover{color:#2180c9!important;text-decoration:underline!important}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link .link-icon{font-size:14px;width:14px;height:14px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section{display:flex;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .field-label{min-width:90px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option{color:#6ccb78!important;cursor:pointer;font-size:20px;width:20px;height:20px;transition:all .2s ease}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option:hover{color:#45a049!important;transform:scale(1.1)}.dmp-search-panel{overflow-y:scroll;max-height:300px}.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}.dmp-search-panel .search-result-option{padding:0!important;margin-bottom:2px}.dmp-search-panel .search-result-option mat-expansion-panel{box-shadow:none!important;margin:0;border-radius:0!important;background:transparent!important}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#0003}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px!important}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:10px 12px!important}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:10px;display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{font-size:11px;gap:6px}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{color:#bdc1c3cc!important;min-width:90px;font-weight:500;flex-shrink:0;font-size:13px}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{min-width:80px}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-value{color:#fff!important;font-weight:300;flex:1;word-break:break-word;font-size:13px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link:hover{color:#2180c9!important;text-decoration:underline!important}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link .link-icon{font-size:14px;width:14px;height:14px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section{display:flex;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .field-label{min-width:90px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option{color:#6ccb78!important;cursor:pointer;font-size:20px;width:20px;height:20px;transition:all .2s ease}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option:hover{color:#45a049!important;transform:scale(1.1)}.dmp-search-panel .search-result-option:first-child mat-expansion-panel .mat-expansion-panel-header{border-top-left-radius:4px!important;border-top-right-radius:4px!important}.dmp-search-panel .search-result-option:last-child mat-expansion-panel .mat-expansion-panel-header.mat-expanded{border-radius:0!important}.dmp-search-panel .search-result-option:last-child mat-expansion-panel .mat-expansion-panel-content{border-bottom-left-radius:4px!important;border-bottom-right-radius:4px!important}.dialog-header{position:relative}.dialog-header .close-button{position:absolute;top:-9px;right:-14px;color:#fff;cursor:pointer;border-radius:50%;transition:all .2s ease;font-size:18px;width:24px;height:24px;display:flex;justify-content:center;align-items:center;z-index:10;background-color:#ffffff1a}.dialog-header .close-button:hover{color:#e0d5d5}.field-label{color:#bdc1c3cc!important;margin-right:6px}.open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}.open-link:hover{color:#2180c9!important;text-decoration:underline!important}.field-value{color:#fff!important;font-weight:300}.add-layer-section{display:flex;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.dmp-item-list .dmp-item-container{display:flex;align-items:center;width:100%;gap:12px;min-width:0}.dmp-item-list .dmp-item-container .dmp-item-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer;flex-shrink:0}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon:hover{color:#d3d3d3}.dmp-item-list .dmp-item-container .dmp-item-left .dmp-item-title{flex:1;min-width:0;overflow:hidden}.dmp-item-list .dmp-item-container .dmp-item-left .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-left .dmp-item-title .title-text{font-size:11px}}.dmp-item-list .dmp-item-container .dmp-item-center{display:flex;align-items:center;gap:8px;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-center .zoom-off{color:#ef4444;font-size:16px;width:16px;height:16px}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center .zoom-off{font-size:14px;width:14px;height:14px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon{flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on{color:#6ccb78;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on:hover{background:#4caf5033;border-radius:5px}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off:hover{color:#d3d3d3}.dmp-item-list .dmp-item-container .dmp-item-right{display:flex;align-items:center;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]{width:60px;height:4px;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-moz-range-thumb:hover{background:#6ccb78}::ng-deep .dmp-item-list mat-expansion-panel{box-shadow:none!important}.group-header{display:flex;color:#fff;padding:8px 14px;font-weight:600;background:#ffffff08}.group-header mat-icon{margin-left:10px;cursor:pointer;color:#bdc1c3cc;transition:color .2s ease}.group-header mat-icon:hover{color:#6ccb78}.layer-selector-body-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:1000;max-width:calc(100vw - 8em);display:flex;flex-direction:column;transition:width .3s ease,max-width .3s ease;border-top-left-radius:5px;border-top-right-radius:5px;box-shadow:0 2px 10px #0000001a;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.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 .layer-selector-body{display:none}.layer-selector-body-wrapper.collapsed .drag-handle-selector{width:100%;min-width:100%;box-sizing:border-box;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.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}@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}.drag-handle-content,.drag-handle-icons{display:flex;align-items:center;width:100%}.drag-handle-icons mat-icon{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;width:100%;max-width:100%;max-height:317px;min-height:120px;overflow-y:auto;border-radius:0 0 5px 5px!important}::ng-deep .layer-selector-body .mat-expansion-panel-header-title{gap:6px}::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;padding:12px 12px 8px;justify-content:center;align-items:center;gap:8px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section{padding:8px 8px 4px;gap:4px}}::ng-deep .layer-selector-body .search-section .search-field-wrapper{flex:1;display:flex;flex-direction:column}::ng-deep .layer-selector-body .search-section .search-label{color:#fff}::ng-deep .layer-selector-body .search-section mat-form-field{flex:1}::ng-deep .layer-selector-body .search-section mat-form-field .search-icon{color:#fff}::ng-deep .layer-selector-body .search-section mat-form-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent}::ng-deep .layer-selector-body .search-section>mat-icon{color:#fff;cursor:pointer;margin-top:0;transition:color .2s ease}::ng-deep .layer-selector-body .search-section>mat-icon:hover{color:#d3d3d3}@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:none}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel{background:transparent!important;box-shadow:none!important;margin-bottom:4px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header{padding:0 16px;height:40px!important}}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title{display:flex;align-items:center;gap:6px;font-weight:600!important;color:#bdc1c3cc!important;transition:color .2s ease}@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:all .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.power-on{color:#6ccb78;cursor:pointer}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-on:hover{color:#45a049}::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:#bdc1c3cc}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-off:hover{color:#d3d3d3}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-content{background:#0003}@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 2px 12px}}::ng-deep .layer-selector-body .item-list .group .item-list{padding:0}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel{background:transparent!important;box-shadow:none!important;margin-bottom:2px}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel .mat-expansion-panel-content{background:#00000026}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:8px 16px 12px 32px}::ng-deep .layer-selector-body .item-list .group .item-list .layer-description{font-size:12px;color:#fffc;line-height:1.5;margin-bottom:8px;margin-left:28px}::ng-deep .layer-selector-body .item-list .group .item{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;background:transparent;transition:all .2s ease;color:#fff;cursor:move;font-size:13px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item:hover{background-color:transparent}::ng-deep .layer-selector-body .item-list .group .item .item-left{display:flex;align-items:center;gap:4px;flex:1;min-width:0}::ng-deep .layer-selector-body .item-list .group .item .item-left .drag-indicator{color:#ffffff80;font-size:16px;width:16px;height:16px;cursor:move;flex-shrink:0}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left .drag-indicator{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info{cursor:pointer;color:#dfca0e;font-size:16px;width:16px;height:16px;flex-shrink:0;transition:all .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info:hover{color:#ccb913}::ng-deep .layer-selector-body .item-list .group .item .item-left span{flex:1;font-size:13px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;color:#fff;font-weight:400}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left span{font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item .item-center{display:flex;align-items:center;gap:4px;flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-center .zoom-off{color:#ef4444;font-size:16px;width:16px;height:16px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-center .zoom-off{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-right{display:flex;align-items:center;gap:8px;flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon{flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on{color:#6ccb78;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on{font-size:16px;width:16px;height:16px}}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on:hover{color:#45a049}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off{font-size:16px;width:16px;height:16px}}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off:hover{color:#d3d3d3}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]{width:60px;height:4px;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-moz-range-thumb:hover{background:#6ccb78}::ng-deep .layer-selector-body-wrapper .result-title{color:#fff}::ng-deep .layer-selector-body-wrapper .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}::ng-deep .layer-selector-body-wrapper .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .mat-expansion-panel-header.mat-expanded:hover{background:inherit!important}::ng-deep .layer-selector-body-wrapper .show-layer-highlight{font-size:18px;height:18px;width:18px}::ng-deep .layer-selector-body-wrapper .dmp-item{cursor:move;width:100%}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel-header.mat-expanded:hover,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel-header.mat-expanded:hover{background:#ffffff26!important}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel:not([class*=mat-elevation-z]),::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-indicator:after,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-indicator:after{color:#fff!important;border-color:#fff!important}::ng-deep .layer-selector-body-wrapper mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding-left:0!important;padding-right:0!important;box-sizing:border-box}@media (max-width: 767px){::ng-deep .layer-selector-body-wrapper mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding-left:12px!important;padding-right:12px!important}}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 5px 15px #00000026;background:#4c4d51;padding:8px 12px;color:#fff;display:flex;align-items:center;gap:8px}.cdk-drag-preview mat-icon{color:#fff}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.power-on{color:#6ccb78!important;font-size:18px;width:18px;height:18px}.power-off{cursor:pointer;color:#bdc1c3cc!important}.add-option{color:#6ccb78!important}.add-option:hover{color:#37923a!important}::ng-deep .lightbulb{color:#dfca0e;width:18px;height:18px;font-size:18px}::ng-deep .arrow-up-layer{color:#fff;width:18px;height:18px;font-size:18px}::ng-deep .mdc-text-field--outlined{overflow:hidden!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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.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: i3.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: i3.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: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$4.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, MatOptionModule, MatDialogModule, MatDialogContent, MatDialogActions], template: "<div\n  #layerSelectorBody\n  class=\"layer-selector-body-wrapper global-wrapper-container\"\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      <div class=\"search-field-wrapper\">\n        <label class=\"search-label\">Filtrer</label>\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n          <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\n          <input \n            matInput \n            type=\"text\" \n            [(ngModel)]=\"searchText\" \n            (ngModelChange)=\"filterChanged()\"\n          />\n        </mat-form-field>\n      </div>\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 class=\"arrow-up-layer\">arrow_upward</mat-icon>\n                  }\n                  @if (!group.expanded) {\n                    <mat-icon>arrow_downward</mat-icon>  \n                  }\n                <span class=\"panel-title\">{{ group.name }} </span>\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=\"Sluk\"  \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=\"T\u00E6nd\"  \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=\"Sluk\"  \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=\"T\u00E6nd\"  \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 (filteredDmpLayers.length > 0) {\n        <div class=\"dmp-item-list\"   cdkDropList\n                [cdkDropListData]=\"filteredDmpLayers\"\n                (cdkDropListDropped)=\"dropDmpLayer($event)\">\n          @for (layer of filteredDmpLayers; 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=\"dmp-item\" cdkDrag cdkDragPreviewDisabled>\n                      <div class=\"dmp-item-container\">\n                        <div class=\"dmp-item-left\">\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\">\n                          <span class=\"title-text\">{{ layer.title }}</span>\n                        </div>\n                      </div>\n                    \n                      <div class=\"dmp-item-center\">\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                        @if (layer.visible) {\n                          <mat-icon (click)=\"toggleLayer(layer.datasetId, $event)\" class=\"power-on\"  \n                            matTooltip=\"Sluk\"  \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=\"T\u00E6nd\"  \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipPosition=\"above\">power_settings_new\n                          </mat-icon>\n                        }\n                      </div>\n                    <div class=\"dmp-item-right\">\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 class=\"arrow-up-layer\">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=\"Sluk\"  \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=\"T\u00E6nd\"  \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=\"Sluk\"  \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=\"T\u00E6nd\"  \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            <div class=\"search-field-wrapper\">\n              <label class=\"search-label\">S\u00F8g</label>\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\n                <input \n                  matInput \n                  type=\"text\" \n                  [(ngModel)]=\"dmpSearchText\" \n                  (ngModelChange)=\"searchDmp()\"\n                />\n              </mat-form-field>\n            </div>\n            <mat-icon (click)=\"clearDmpSearchText()\" class=\"undo-icon\" >undo</mat-icon>\n          </div>\n          <mat-icon \n            class=\"close-button\" \n            (click)=\"toggleDmpSearch(false)\"\n            matTooltip=\"Luk\" \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 global-wrapper-container\">\n          <div *ngFor=\"let result of dmpLayerResults\" [attr.data-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            </div>\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 .dmp-dialog-content mat-dialog-content .search-section{display:flex;align-items:center;gap:6px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .undo-icon{color:#fff!important;cursor:pointer;flex-shrink:0}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .undo-icon:hover{color:#d3d3d3}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .search-field-wrapper{flex:1;display:flex;flex-direction:column}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .search-label{color:#fff}::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 .search-icon{color:#fff}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#dee2e6!important;border-width:1px!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#d1d5db!important;border-width:1px!important;box-shadow:0 0 0 3px #d1d5db40!important}::ng-deep .dmp-dialog-content mat-dialog-actions{display:none}::ng-deep .dmp-dialog-content .search-result-option{padding:0!important}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel{box-shadow:none!important;margin-bottom:2px;border-radius:0!important;background:transparent!important;color:#fff}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#0003}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px!important}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:10px 12px!important}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:10px;display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{font-size:11px;gap:6px}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{color:#bdc1c3cc!important;min-width:90px;font-weight:500;flex-shrink:0;font-size:13px}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{min-width:80px}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-value{color:#fff!important;font-weight:300;flex:1;word-break:break-word;font-size:13px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link:hover{color:#2180c9!important;text-decoration:underline!important}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link .link-icon{font-size:14px;width:14px;height:14px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section{display:flex;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .field-label{min-width:90px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option{color:#6ccb78!important;cursor:pointer;font-size:20px;width:20px;height:20px;transition:all .2s ease}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option:hover{color:#45a049!important;transform:scale(1.1)}.dmp-search-panel{overflow-y:scroll;max-height:300px}.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}.dmp-search-panel .search-result-option{padding:0!important;margin-bottom:2px}.dmp-search-panel .search-result-option mat-expansion-panel{box-shadow:none!important;margin:0;border-radius:0!important;background:transparent!important}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#0003}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px!important}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:10px 12px!important}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:10px;display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{font-size:11px;gap:6px}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{color:#bdc1c3cc!important;min-width:90px;font-weight:500;flex-shrink:0;font-size:13px}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{min-width:80px}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-value{color:#fff!important;font-weight:300;flex:1;word-break:break-word;font-size:13px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link:hover{color:#2180c9!important;text-decoration:underline!important}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link .link-icon{font-size:14px;width:14px;height:14px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section{display:flex;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .field-label{min-width:90px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option{color:#6ccb78!important;cursor:pointer;font-size:20px;width:20px;height:20px;transition:all .2s ease}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option:hover{color:#45a049!important;transform:scale(1.1)}.dmp-search-panel .search-result-option:first-child mat-expansion-panel .mat-expansion-panel-header{border-top-left-radius:4px!important;border-top-right-radius:4px!important}.dmp-search-panel .search-result-option:last-child mat-expansion-panel .mat-expansion-panel-header.mat-expanded{border-radius:0!important}.dmp-search-panel .search-result-option:last-child mat-expansion-panel .mat-expansion-panel-content{border-bottom-left-radius:4px!important;border-bottom-right-radius:4px!important}.dialog-header{position:relative}.dialog-header .close-button{position:absolute;top:-9px;right:-14px;color:#fff;cursor:pointer;border-radius:50%;transition:all .2s ease;font-size:18px;width:24px;height:24px;display:flex;justify-content:center;align-items:center;z-index:10;background-color:#ffffff1a}.dialog-header .close-button:hover{color:#e0d5d5}.field-label{color:#bdc1c3cc!important;margin-right:6px}.open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}.open-link:hover{color:#2180c9!important;text-decoration:underline!important}.field-value{color:#fff!important;font-weight:300}.add-layer-section{display:flex;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.dmp-item-list .dmp-item-container{display:flex;align-items:center;width:100%;gap:12px;min-width:0}.dmp-item-list .dmp-item-container .dmp-item-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer;flex-shrink:0}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon:hover{color:#d3d3d3}.dmp-item-list .dmp-item-container .dmp-item-left .dmp-item-title{flex:1;min-width:0;overflow:hidden}.dmp-item-list .dmp-item-container .dmp-item-left .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-left .dmp-item-title .title-text{font-size:11px}}.dmp-item-list .dmp-item-container .dmp-item-center{display:flex;align-items:center;gap:8px;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-center .zoom-off{color:#ef4444;font-size:16px;width:16px;height:16px}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center .zoom-off{font-size:14px;width:14px;height:14px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon{flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on{color:#6ccb78;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on:hover{background:#4caf5033;border-radius:5px}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off:hover{color:#d3d3d3}.dmp-item-list .dmp-item-container .dmp-item-right{display:flex;align-items:center;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]{width:60px;height:4px;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-moz-range-thumb:hover{background:#6ccb78}::ng-deep .dmp-item-list mat-expansion-panel{box-shadow:none!important}.group-header{display:flex;color:#fff;padding:8px 14px;font-weight:600;background:#ffffff08}.group-header mat-icon{margin-left:10px;cursor:pointer;color:#bdc1c3cc;transition:color .2s ease}.group-header mat-icon:hover{color:#6ccb78}.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-top-left-radius:5px;border-top-right-radius:5px;box-shadow:0 2px 10px #0000001a;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.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 .layer-selector-body{display:none}.layer-selector-body-wrapper.collapsed .drag-handle-selector{width:100%;min-width:100%;box-sizing:border-box;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.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}@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}.drag-handle-content,.drag-handle-icons{display:flex;align-items:center;width:100%}.drag-handle-icons mat-icon{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;width:100%;max-width:100%;max-height:317px;min-height:120px;overflow-y:auto;border-radius:0 0 5px 5px!important}::ng-deep .layer-selector-body .mat-expansion-panel-header-title{gap:6px}::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;padding:12px 12px 8px;justify-content:center;align-items:center;gap:8px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section{padding:8px 8px 4px;gap:4px}}::ng-deep .layer-selector-body .search-section .search-field-wrapper{flex:1;display:flex;flex-direction:column}::ng-deep .layer-selector-body .search-section .search-label{color:#fff}::ng-deep .layer-selector-body .search-section mat-form-field{flex:1}::ng-deep .layer-selector-body .search-section mat-form-field .search-icon{color:#fff}::ng-deep .layer-selector-body .search-section mat-form-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent}::ng-deep .layer-selector-body .search-section>mat-icon{color:#fff;cursor:pointer;margin-top:0;transition:color .2s ease}::ng-deep .layer-selector-body .search-section>mat-icon:hover{color:#d3d3d3}@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:none}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel{background:transparent!important;box-shadow:none!important;margin-bottom:4px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header{padding:0 16px;height:40px!important}}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title{display:flex;align-items:center;gap:6px;font-weight:600!important;color:#bdc1c3cc!important;transition:color .2s ease}@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:all .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.power-on{color:#6ccb78;cursor:pointer}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-on:hover{color:#45a049}::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:#bdc1c3cc}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-off:hover{color:#d3d3d3}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-content{background:#0003}@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 2px 12px}}::ng-deep .layer-selector-body .item-list .group .item-list{padding:0}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel{background:transparent!important;box-shadow:none!important;margin-bottom:2px}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel .mat-expansion-panel-content{background:#00000026}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:8px 16px 12px 32px}::ng-deep .layer-selector-body .item-list .group .item-list .layer-description{font-size:12px;color:#fffc;line-height:1.5;margin-bottom:8px;margin-left:28px}::ng-deep .layer-selector-body .item-list .group .item{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;background:transparent;transition:all .2s ease;color:#fff;cursor:move;font-size:13px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item:hover{background-color:transparent}::ng-deep .layer-selector-body .item-list .group .item .item-left{display:flex;align-items:center;gap:4px;flex:1;min-width:0}::ng-deep .layer-selector-body .item-list .group .item .item-left .drag-indicator{color:#ffffff80;font-size:16px;width:16px;height:16px;cursor:move;flex-shrink:0}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left .drag-indicator{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info{cursor:pointer;color:#dfca0e;font-size:16px;width:16px;height:16px;flex-shrink:0;transition:all .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info:hover{color:#ccb913}::ng-deep .layer-selector-body .item-list .group .item .item-left span{flex:1;font-size:13px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;color:#fff;font-weight:400}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left span{font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item .item-center{display:flex;align-items:center;gap:4px;flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-center .zoom-off{color:#ef4444;font-size:16px;width:16px;height:16px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-center .zoom-off{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-right{display:flex;align-items:center;gap:8px;flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon{flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on{color:#6ccb78;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on{font-size:16px;width:16px;height:16px}}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on:hover{color:#45a049}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off{font-size:16px;width:16px;height:16px}}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off:hover{color:#d3d3d3}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]{width:60px;height:4px;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-moz-range-thumb:hover{background:#6ccb78}::ng-deep .layer-selector-body-wrapper .result-title{color:#fff}::ng-deep .layer-selector-body-wrapper .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}::ng-deep .layer-selector-body-wrapper .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .mat-expansion-panel-header.mat-expanded:hover{background:inherit!important}::ng-deep .layer-selector-body-wrapper .show-layer-highlight{font-size:18px;height:18px;width:18px}::ng-deep .layer-selector-body-wrapper .dmp-item{cursor:move;width:100%}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel-header.mat-expanded:hover,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel-header.mat-expanded:hover{background:#ffffff26!important}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel:not([class*=mat-elevation-z]),::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-indicator:after,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-indicator:after{color:#fff!important;border-color:#fff!important}::ng-deep .layer-selector-body-wrapper mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding-left:0!important;padding-right:0!important;box-sizing:border-box}@media (max-width: 767px){::ng-deep .layer-selector-body-wrapper mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding-left:12px!important;padding-right:12px!important}}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 5px 15px #00000026;background:#4c4d51;padding:8px 12px;color:#fff;display:flex;align-items:center;gap:8px}.cdk-drag-preview mat-icon{color:#fff}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.power-on{color:#6ccb78!important;font-size:18px;width:18px;height:18px}.power-off{cursor:pointer;color:#bdc1c3cc!important}.add-option{color:#6ccb78!important}.add-option:hover{color:#37923a!important}::ng-deep .lightbulb{color:#dfca0e;width:18px;height:18px;font-size:18px}::ng-deep .arrow-up-layer{color:#fff;width:18px;height:18px;font-size:18px}::ng-deep .mdc-text-field--outlined{overflow:hidden!important}\n"] }]
+                        MatExpansionModule, MatInputModule, MatTooltipModule, MatOptionModule, MatDialogModule, MatDialogContent, MatDialogActions], template: "<div\n  #layerSelectorBody\n  class=\"layer-selector-body-wrapper global-wrapper-container\"\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      <div class=\"search-field-wrapper\">\n        <label class=\"search-label\">Filtrer</label>\n        <mat-form-field appearance=\"outline\" class=\"w-full\">\n          <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\n          <input \n            matInput \n            type=\"text\" \n            [(ngModel)]=\"searchText\" \n            (ngModelChange)=\"filterChanged()\"\n          />\n        </mat-form-field>\n      </div>\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 class=\"arrow-up-layer\">arrow_upward</mat-icon>\n                  }\n                  @if (!group.expanded) {\n                    <mat-icon>arrow_downward</mat-icon>  \n                  }\n                <span class=\"panel-title\">{{ group.name }} </span>\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=\"Sluk\"  \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=\"T\u00E6nd\"  \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=\"Sluk\"  \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=\"T\u00E6nd\"  \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 (filteredDmpLayers.length > 0) {\n        <div class=\"dmp-item-list\"   cdkDropList\n                [cdkDropListData]=\"filteredDmpLayers\"\n                (cdkDropListDropped)=\"dropDmpLayer($event)\">\n          @for (layer of filteredDmpLayers; 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=\"dmp-item\" cdkDrag cdkDragPreviewDisabled>\n                      <div class=\"dmp-item-container\">\n                        <div class=\"dmp-item-left\">\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\">\n                          <span class=\"title-text\">{{ layer.title }}</span>\n                        </div>\n                      </div>\n                    \n                      <div class=\"dmp-item-center\">\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                        @if (layer.visible) {\n                          <mat-icon (click)=\"toggleLayer(layer.datasetId, $event)\" class=\"power-on\"  \n                            matTooltip=\"Sluk\"  \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=\"T\u00E6nd\"  \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipPosition=\"above\">power_settings_new\n                          </mat-icon>\n                        }\n                      </div>\n                    <div class=\"dmp-item-right\">\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 class=\"arrow-up-layer\">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=\"Sluk\"  \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=\"T\u00E6nd\"  \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=\"Sluk\"  \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=\"T\u00E6nd\"  \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            <div class=\"search-field-wrapper\">\n              <label class=\"search-label\">S\u00F8g</label>\n              <mat-form-field appearance=\"outline\" class=\"w-full\">\n                <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\n                <input \n                  matInput \n                  type=\"text\" \n                  [(ngModel)]=\"dmpSearchText\" \n                  (ngModelChange)=\"searchDmp()\"\n                />\n              </mat-form-field>\n            </div>\n            <mat-icon (click)=\"clearDmpSearchText()\" class=\"undo-icon\" >undo</mat-icon>\n          </div>\n          <mat-icon \n            class=\"close-button\" \n            (click)=\"toggleDmpSearch(false)\"\n            matTooltip=\"Luk\" \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 global-wrapper-container\">\n          <div *ngFor=\"let result of dmpLayerResults\" [attr.data-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            </div>\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 .dmp-dialog-content mat-dialog-content .search-section{display:flex;align-items:center;gap:6px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .undo-icon{color:#fff!important;cursor:pointer;flex-shrink:0}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .undo-icon:hover{color:#d3d3d3}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .search-field-wrapper{flex:1;display:flex;flex-direction:column}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .search-label{color:#fff}::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 .search-icon{color:#fff}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#dee2e6!important;border-width:1px!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#d1d5db!important;border-width:1px!important;box-shadow:0 0 0 3px #d1d5db40!important}::ng-deep .dmp-dialog-content mat-dialog-actions{display:none}::ng-deep .dmp-dialog-content .search-result-option{padding:0!important}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel{box-shadow:none!important;margin-bottom:2px;border-radius:0!important;background:transparent!important;color:#fff}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#0003}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px!important}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:10px 12px!important}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:10px;display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{font-size:11px;gap:6px}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{color:#bdc1c3cc!important;min-width:90px;font-weight:500;flex-shrink:0;font-size:13px}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{min-width:80px}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-value{color:#fff!important;font-weight:300;flex:1;word-break:break-word;font-size:13px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link:hover{color:#2180c9!important;text-decoration:underline!important}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link .link-icon{font-size:14px;width:14px;height:14px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section{display:flex;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .field-label{min-width:90px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option{color:#6ccb78!important;cursor:pointer;font-size:20px;width:20px;height:20px;transition:all .2s ease}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option:hover{color:#45a049!important;transform:scale(1.1)}.dmp-search-panel{overflow-y:scroll;max-height:300px}.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}.dmp-search-panel .search-result-option{padding:0!important;margin-bottom:2px}.dmp-search-panel .search-result-option mat-expansion-panel{box-shadow:none!important;margin:0;border-radius:0!important;background:transparent!important}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#0003}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px!important}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:10px 12px!important}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:10px;display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{font-size:11px;gap:6px}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{color:#bdc1c3cc!important;min-width:90px;font-weight:500;flex-shrink:0;font-size:13px}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{min-width:80px}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-value{color:#fff!important;font-weight:300;flex:1;word-break:break-word;font-size:13px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link:hover{color:#2180c9!important;text-decoration:underline!important}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link .link-icon{font-size:14px;width:14px;height:14px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section{display:flex;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .field-label{min-width:90px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option{color:#6ccb78!important;cursor:pointer;font-size:20px;width:20px;height:20px;transition:all .2s ease}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option:hover{color:#45a049!important;transform:scale(1.1)}.dmp-search-panel .search-result-option:first-child mat-expansion-panel .mat-expansion-panel-header{border-top-left-radius:4px!important;border-top-right-radius:4px!important}.dmp-search-panel .search-result-option:last-child mat-expansion-panel .mat-expansion-panel-header.mat-expanded{border-radius:0!important}.dmp-search-panel .search-result-option:last-child mat-expansion-panel .mat-expansion-panel-content{border-bottom-left-radius:4px!important;border-bottom-right-radius:4px!important}.dialog-header{position:relative}.dialog-header .close-button{position:absolute;top:-9px;right:-14px;color:#fff;cursor:pointer;border-radius:50%;transition:all .2s ease;font-size:18px;width:24px;height:24px;display:flex;justify-content:center;align-items:center;z-index:10;background-color:#ffffff1a}.dialog-header .close-button:hover{color:#e0d5d5}.field-label{color:#bdc1c3cc!important;margin-right:6px}.open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}.open-link:hover{color:#2180c9!important;text-decoration:underline!important}.field-value{color:#fff!important;font-weight:300}.add-layer-section{display:flex;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.dmp-item-list .dmp-item-container{display:flex;align-items:center;width:100%;gap:12px;min-width:0}.dmp-item-list .dmp-item-container .dmp-item-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer;flex-shrink:0}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon:hover{color:#d3d3d3}.dmp-item-list .dmp-item-container .dmp-item-left .dmp-item-title{flex:1;min-width:0;overflow:hidden}.dmp-item-list .dmp-item-container .dmp-item-left .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-left .dmp-item-title .title-text{font-size:11px}}.dmp-item-list .dmp-item-container .dmp-item-center{display:flex;align-items:center;gap:8px;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-center .zoom-off{color:#ef4444;font-size:16px;width:16px;height:16px}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center .zoom-off{font-size:14px;width:14px;height:14px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon{flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on{color:#6ccb78;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on:hover{background:#4caf5033;border-radius:5px}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off:hover{color:#d3d3d3}.dmp-item-list .dmp-item-container .dmp-item-right{display:flex;align-items:center;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]{width:60px;height:4px;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-moz-range-thumb:hover{background:#6ccb78}::ng-deep .dmp-item-list mat-expansion-panel{box-shadow:none!important}.group-header{display:flex;color:#fff;padding:8px 14px;font-weight:600;background:#ffffff08}.group-header mat-icon{margin-left:10px;cursor:pointer;color:#bdc1c3cc;transition:color .2s ease}.group-header mat-icon:hover{color:#6ccb78}.layer-selector-body-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:1000;max-width:calc(100vw - 8em);display:flex;flex-direction:column;transition:width .3s ease,max-width .3s ease;border-top-left-radius:5px;border-top-right-radius:5px;box-shadow:0 2px 10px #0000001a;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.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 .layer-selector-body{display:none}.layer-selector-body-wrapper.collapsed .drag-handle-selector{width:100%;min-width:100%;box-sizing:border-box;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.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}@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}.drag-handle-content,.drag-handle-icons{display:flex;align-items:center;width:100%}.drag-handle-icons mat-icon{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;width:100%;max-width:100%;max-height:317px;min-height:120px;overflow-y:auto;border-radius:0 0 5px 5px!important}::ng-deep .layer-selector-body .mat-expansion-panel-header-title{gap:6px}::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;padding:12px 12px 8px;justify-content:center;align-items:center;gap:8px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section{padding:8px 8px 4px;gap:4px}}::ng-deep .layer-selector-body .search-section .search-field-wrapper{flex:1;display:flex;flex-direction:column}::ng-deep .layer-selector-body .search-section .search-label{color:#fff}::ng-deep .layer-selector-body .search-section mat-form-field{flex:1}::ng-deep .layer-selector-body .search-section mat-form-field .search-icon{color:#fff}::ng-deep .layer-selector-body .search-section mat-form-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent}::ng-deep .layer-selector-body .search-section>mat-icon{color:#fff;cursor:pointer;margin-top:0;transition:color .2s ease}::ng-deep .layer-selector-body .search-section>mat-icon:hover{color:#d3d3d3}@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:none}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel{background:transparent!important;box-shadow:none!important;margin-bottom:4px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header{padding:0 16px;height:40px!important}}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title{display:flex;align-items:center;gap:6px;font-weight:600!important;color:#bdc1c3cc!important;transition:color .2s ease}@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:all .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.power-on{color:#6ccb78;cursor:pointer}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-on:hover{color:#45a049}::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:#bdc1c3cc}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-off:hover{color:#d3d3d3}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-content{background:#0003}@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 2px 12px}}::ng-deep .layer-selector-body .item-list .group .item-list{padding:0}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel{background:transparent!important;box-shadow:none!important;margin-bottom:2px}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel .mat-expansion-panel-content{background:#00000026}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:8px 16px 12px 32px}::ng-deep .layer-selector-body .item-list .group .item-list .layer-description{font-size:12px;color:#fffc;line-height:1.5;margin-bottom:8px;margin-left:28px}::ng-deep .layer-selector-body .item-list .group .item{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;background:transparent;transition:all .2s ease;color:#fff;cursor:move;font-size:13px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item:hover{background-color:transparent}::ng-deep .layer-selector-body .item-list .group .item .item-left{display:flex;align-items:center;gap:4px;flex:1;min-width:0}::ng-deep .layer-selector-body .item-list .group .item .item-left .drag-indicator{color:#ffffff80;font-size:16px;width:16px;height:16px;cursor:move;flex-shrink:0}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left .drag-indicator{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info{cursor:pointer;color:#dfca0e;font-size:16px;width:16px;height:16px;flex-shrink:0;transition:all .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info:hover{color:#ccb913}::ng-deep .layer-selector-body .item-list .group .item .item-left span{flex:1;font-size:13px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;color:#fff;font-weight:400}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left span{font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item .item-center{display:flex;align-items:center;gap:4px;flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-center .zoom-off{color:#ef4444;font-size:16px;width:16px;height:16px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-center .zoom-off{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-right{display:flex;align-items:center;gap:8px;flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon{flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on{color:#6ccb78;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on{font-size:16px;width:16px;height:16px}}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on:hover{color:#45a049}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off{font-size:16px;width:16px;height:16px}}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off:hover{color:#d3d3d3}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]{width:60px;height:4px;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-moz-range-thumb:hover{background:#6ccb78}::ng-deep .layer-selector-body-wrapper .result-title{color:#fff}::ng-deep .layer-selector-body-wrapper .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}::ng-deep .layer-selector-body-wrapper .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .mat-expansion-panel-header.mat-expanded:hover{background:inherit!important}::ng-deep .layer-selector-body-wrapper .show-layer-highlight{font-size:18px;height:18px;width:18px}::ng-deep .layer-selector-body-wrapper .dmp-item{cursor:move;width:100%}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel-header.mat-expanded:hover,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel-header.mat-expanded:hover{background:#ffffff26!important}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel:not([class*=mat-elevation-z]),::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-indicator:after,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-indicator:after{color:#fff!important;border-color:#fff!important}::ng-deep .layer-selector-body-wrapper mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding-left:0!important;padding-right:0!important;box-sizing:border-box}@media (max-width: 767px){::ng-deep .layer-selector-body-wrapper mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding-left:12px!important;padding-right:12px!important}}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 5px 15px #00000026;background:#4c4d51;padding:8px 12px;color:#fff;display:flex;align-items:center;gap:8px}.cdk-drag-preview mat-icon{color:#fff}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.power-on{color:#6ccb78!important;font-size:18px;width:18px;height:18px}.power-off{cursor:pointer;color:#bdc1c3cc!important}.add-option{color:#6ccb78!important}.add-option:hover{color:#37923a!important}::ng-deep .lightbulb{color:#dfca0e;width:18px;height:18px;font-size:18px}::ng-deep .arrow-up-layer{color:#fff;width:18px;height:18px;font-size:18px}::ng-deep .mdc-text-field--outlined{overflow:hidden!important}\n"] }]
         }], propDecorators: { contentBody: [{
                 type: ViewChild,
                 args: ['layerSelectorBody', { static: false }]
@@ -1689,6 +1789,9 @@ class MergeFeaturesService {
         if (this._featureHelper.isLocked(f)) {
             return false;
         }
+        if (this._featureHelper.typeId(f) !== typeId) {
+            return false;
+        }
         if (this._selectedMergeFeature) {
             const previusFeatureObject = this.formatter.writeFeatureObject(this._selectedMergeFeature, this._formatterOptions);
             const bufferedPreviouslySelected = buffer(previusFeatureObject, 5, { units: 'centimeters' });
@@ -2417,7 +2520,6 @@ class ShowDocumentInfoService {
             const geom = evt.feature.getGeometry();
             this._documentSearch.search({ kind: 'polygon', value: geom }, 100).subscribe({
                 next: result => {
-                    console.log("🚀 ~ ShowDocumentInfoService ~ _startByPolygon ~ result:", result);
                     this._features.next(result);
                 }
             });
@@ -2970,37 +3072,55 @@ class ToolboxComponent {
             this._disablePointSearch();
         }
     }
-    openCowiPage() {
-        if (!this.pointClickKey) {
+    toggleCowiPage() {
+        if (this.activeMode != 'cowi') {
             this._clearAllInteractions();
             this.activeMode = 'cowi';
             this.pointClickKey = this.map.on('click', evt => {
                 this._cowiService.openCowiPageFromPoint(this.settings.cowiUrlTemplate, evt.coordinate);
+            });
+        }
+        else {
+            this.activeMode = null;
+            this._clearAllInteractions();
+            if (this.pointClickKey) {
                 unByKey(this.pointClickKey);
                 this.pointClickKey = undefined;
-            });
+            }
         }
     }
-    openSkraafotoPage() {
-        if (!this.pointClickKey) {
+    toggleSkraafotoPage() {
+        if (this.activeMode != 'skrafoto') {
             this._clearAllInteractions();
             this.activeMode = 'skrafoto';
             this.pointClickKey = this.map.on('click', evt => {
                 this._cowiService.openCowiPageFromPoint(this.settings.skraaFotoUrlTemplate, evt.coordinate);
+            });
+        }
+        else {
+            this.activeMode = null;
+            this._clearAllInteractions();
+            if (this.pointClickKey) {
                 unByKey(this.pointClickKey);
                 this.pointClickKey = undefined;
-            });
+            }
         }
     }
-    openGoogleStreetviewPage() {
-        if (!this.pointClickKey) {
+    toggleGoogleStreetviewPage() {
+        if (this.activeMode != 'streetview') {
             this._clearAllInteractions();
             this.activeMode = 'streetview';
             this.pointClickKey = this.map.on('click', evt => {
                 this._cowiService.openGoogleStreetViewFromPoint(evt.coordinate);
+            });
+        }
+        else {
+            this.activeMode = null;
+            this._clearAllInteractions();
+            if (this.pointClickKey) {
                 unByKey(this.pointClickKey);
                 this.pointClickKey = undefined;
-            });
+            }
         }
     }
     startDocumentPointSearch() {
@@ -3060,6 +3180,9 @@ class ToolboxComponent {
         event.stopPropagation();
         result.items = [...result.items.filter(i => i.id !== itemId)];
     }
+    deleteAllGeometrySearchItem() {
+        this.geometrySearchResult = [];
+    }
     _disablePointSearch() {
         if (this.pointClickKey) {
             unByKey(this.pointClickKey);
@@ -3450,25 +3573,18 @@ class ToolboxComponent {
         this.activeMode = 'edit';
         const modify = new Modify({
             source: this._drawLayerService.source,
-            condition: evt => {
-                // first, get all features from the draw-layer
-                const feature = this.map.forEachFeatureAtPixel(evt.pixel, f => f, { layerFilter: l => l == this._drawLayerService.layer });
-                if (!feature) {
-                    return false;
-                }
-                return !this._featureHelper.isLocked(feature);
+            filter: (f) => {
+                return !this._featureHelper.isLocked(f);
             },
-            // No delete
             deleteCondition: () => false,
             // Allow moving existing and add new points
-            // condition: always,            
+            // condition: always,
             insertVertexCondition: always,
         });
         /* Modify fires changes to features a LOT, so to not flood the UndoRedo service, I disable until ending the modify
         and then force an update, to add the updated feature to the undo-service. */
         modify.on('modifystart', () => this._undoRedo.disable());
         modify.on('modifyend', (evt) => {
-            console.log("🚀 ~ ToolboxComponent ~ startEdit ~ evt:", evt);
             this._undoRedo.enable();
             evt.features.forEach(f => {
                 f.set('updated', new Date().toISOString());
@@ -3489,7 +3605,7 @@ class ToolboxComponent {
                                     idsToExcludeFromOverlap.push(`${feature.getId()}`); // Don't check these for overlap
                                     this._drawLayerService.source.addFeature(feature);
                                 });
-                                // Don't check for overlap with the feature being updated. 
+                                // Don't check for overlap with the feature being updated.
                                 this._overlap.handleOverlaps(result, idsToExcludeFromOverlap).pipe(filter(f => !!f)).subscribe({
                                     next: f => {
                                         if (f) {
@@ -3700,6 +3816,10 @@ class ToolboxComponent {
     ngOnInit() {
         this._originalMapHeight = this.map.getSize()[1];
         this._originalMapWidth = this.map.getSize()[0];
+        this._layoutService.mapResizedSubject.subscribe(mapResized => {
+            //Map resized, make sure it stays in viewport
+            this.dragPosition = this._layoutService.keepWidgetInViewPort(this.dragPosition, this._POSITION_STORAGE_KEY, WidgetConstants.toolboxHeight, WidgetConstants.toolboxWidth, this.mapHeight, this.mapWidth);
+        });
         this.drawItems = [];
         (this.settings.geometryTypeSettings ?? []).filter(f => f.availableGeometryTypes).forEach(geomSetting => {
             geomSetting.availableGeometryTypes.forEach(geomType => {
@@ -3724,15 +3844,11 @@ class ToolboxComponent {
         this._drawPolygon.on('drawend', evt => {
             this._featureHelper.setTypeId(evt.feature, this.selectedGeometrySetting?.typeId || '');
         });
-        this._loadPosition();
     }
     ngOnChanges(changes) {
         if (changes['profile'] && this.profile) {
             this.collapsed = this.profile.toolbarCollapsed;
-            this._loadPosition();
-            if (!this.collapsed && this.profile.toolboxInitialPosition.includes('højre')) {
-                this._layoutService.bringElementIntoViewIfNeeded('.toolbox-wrapper', -30, this.collapsed);
-            }
+            this._loadPosition(this.collapsed);
             this._loadDefaultToolIfNeeded();
         }
     }
@@ -3837,23 +3953,38 @@ class ToolboxComponent {
             this._startDraw(item.geomType, item.style, item.typeId);
         }
     }
-    _loadPosition() {
+    _loadPosition(collapsed) {
         try {
+            // Default height and width when collapsed
+            let widgetHeight = WidgetConstants.collapsedHeight;
+            let widgetWidth = WidgetConstants.collapsedWidth;
+            if (!collapsed) {
+                // Custom height and width when expanded
+                widgetHeight = WidgetConstants.toolboxHeight;
+                widgetWidth = WidgetConstants.toolboxWidth;
+            }
+            const container = this.map.getViewport();
+            const widgetPositionOptions = {
+                initialPosition: this.profile.toolboxInitialPosition,
+                widgetName: this._POSITION_STORAGE_KEY,
+                widgetHeight: widgetHeight,
+                widgetWidth: widgetWidth,
+            };
             const savedPosition = localStorage.getItem(this._POSITION_STORAGE_KEY);
             if (this._profileService.getProfileVersionChanged() &&
                 this.profile?.toolboxInitialPosition) {
                 //Profile version changed in backend, use that
-                this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this._POSITION_STORAGE_KEY, this.profile.toolboxInitialPosition);
+                this.dragPosition = this._layoutService.calculateWidgetPosition(widgetPositionOptions);
             }
             else if (savedPosition) {
                 this.dragPosition = JSON.parse(savedPosition);
             }
             else if (this.profile?.toolboxInitialPosition) {
-                this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this._POSITION_STORAGE_KEY, this.profile.toolboxInitialPosition);
+                this.dragPosition = this._layoutService.calculateWidgetPosition(widgetPositionOptions);
             }
             else {
                 // Default position for toolbox
-                this.dragPosition = { x: 29, y: 26 };
+                this.dragPosition = { x: WidgetConstants.toolboxDefaultX, y: WidgetConstants.toolboxDefaultY };
                 this._savePosition();
             }
         }
@@ -3882,7 +4013,7 @@ class ToolboxComponent {
             return;
         }
         const changeTypeSelect = new Select$1({
-            // layers: [this._drawLayer!],            
+            // layers: [this._drawLayer!],
             layers: [this._drawLayerService.layer],
             filter: f => !this._featureHelper.isLocked(f) && this._featureHelper.typeId(f) !== this.selectedDrawItem?.typeId // can't changed locked and cant change to same type
         });
@@ -3916,8 +4047,9 @@ class ToolboxComponent {
             this.stopMeasureArea();
             this.stopMeasureLength();
         }
-        if (this.profile.toolboxInitialPosition.includes('højre')) {
-            this._layoutService.bringElementIntoViewIfNeeded('.toolbox-wrapper', -30, this.collapsed);
+        if (!this.collapsed) {
+            //Expanding, make sure it stays in viewport
+            this.dragPosition = this._layoutService.keepWidgetInViewPort(this.dragPosition, this._POSITION_STORAGE_KEY, WidgetConstants.toolboxHeight, WidgetConstants.toolboxWidth);
         }
     }
     startMeasureArea() {
@@ -3987,15 +4119,11 @@ class ToolboxComponent {
         }
     }
     setNewMapDimensions() {
+        this._layoutService.mapResizedSubject.next(true);
         this.map.getTargetElement().style.width = this.mapWidth + 'px';
         this.map.getTargetElement().style.height = this.mapHeight + 'px';
-        if (this.mapWidth < 1920 && this.profile.toolboxInitialPosition.includes('højre')) {
-            const offset = this.mapWidth <= 800 ? 80 : (this.mapWidth <= 1280 ? 40 :
-                (this.mapWidth <= 1680 ? 20 : 0));
-            //Map got smaller, push Toolbox to the left
-            this._layoutService.bringElementIntoViewIfNeeded('.toolbox-wrapper', -offset, this.collapsed);
-        }
         this.map.updateSize();
+        this._layoutService.map = this.map;
     }
     doPrint() {
         let htmlElement = this.map.getViewport();
@@ -4174,11 +4302,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 global-wrapper-container\" \n     cdkDrag \n     cdkDragBoundary=\".map-container\"\n     [cdkDragFreeDragPosition]=\"dragPosition\"\n     (cdkDragEnded)=\"onDragEnded($event)\"\n     [class.collapsed]=\"collapsed\">\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\">\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)=\"toggleShowInfo()\" \n                            [class.active]=\"activeMode === 'show-info'\"\n                            matTooltip=\"Vis info om geometri\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Vis info for flader\">\n                        <img \n                            [src]=\"downloadFileBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startDownloadAddresses()\" \n                            [class.active]=\"activeMode === 'download-addresses'\"\n                            matTooltip=\"Download addresser\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Download addresser\">\n                        <img \n                            [src]=\"downloadMatriklerBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startDownloadCasdatres()\" \n                            [class.active]=\"activeMode === 'download-cadastres'\"\n                            matTooltip=\"Download matrikler\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Download matrikler\">\n\n                        <img \n                            [src]=\"splitIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"togglePointPolygonSearch()\"\n                            [class.active]=\"activeMode === 'search-point' || activeMode === 'search-polygon'\"\n                            matTooltip=\"S\u00F8g punkt / polygon\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"S\u00F8g\">\n                        @if (settings.showDocumentSearch) {\n\n                            <img \n                                [src]=\"documentSearchBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startDocumentPointSearch()\"\n                                [class.active]=\"activeMode === 'document-search-by-point'\"\n                                matTooltip=\"Dokument fra punkt\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Dokument fra punkt\">\n\n                            <img \n                                [src]=\"documentSearchBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startDocumentPolygonSearch()\"\n                                [class.active]=\"activeMode === 'document-search-by-polygon'\"\n                                matTooltip=\"Dokumenter fra polygon\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Dokumenter fra polygon\">\n                        }\n                        @if (settings.cowiUrlTemplate) {\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                        }\n                        @if (settings.skraaFotoUrlTemplate) {\n                            <img \n                                [src]=\"skrafotoBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'skrafoto'\"\n                                (click)=\"openSkraafotoPage()\" \n                                matTooltip=\"Opslag p\u00E5 Skr\u00E5fotos\" \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=\"Fremh\u00E6v aktivt objekt i listen\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Fremh\u00E6v\">\n                        @if (activeMode === 'draw' || activeMode === 'edit' || activeMode === 'edit-remove' || activeMode === 'search-feature' ||\n                            activeMode === 'clip-hole' || activeMode === 'split' || activeMode === 'merge-features') {\n                            <label class=\"snap-toggle\">\n                                <input type=\"checkbox\" [checked]=\"snap\" (change)=\"onSnapChange($event)\">\n                                Snap\n                            </label> \n                        }      \n                        @if(settings.editEnabled) {\n                        <img \n                            [src]=\"editBase64\" \n                            [class.active]=\"activeMode === 'edit'\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startEdit()\" \n                            matTooltip=\"Inds\u00E6t eller flyt punkter i flade\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Inds\u00E6t eller flyt punkter i flade\">\n                        <img \n                            [src]=\"deleteIconBase64\"                             \n                            [class.active]=\"activeMode === 'edit-remove'\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startEditRemovePoints()\" \n                            matTooltip=\"Slet punkter i flade/linje\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Slet punkter i flade/linje\">\n                        }\n                        @if(settings.cutHoleEnabled) {\n                            <img \n                                [src]=\"clipHoleBase64\" \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 i flade\">\n                        }\n                        @if(settings.splitEnabled) {\n                            <img \n                                [src]=\"splitBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'split'\"\n                                (click)=\"split()\" \n                                matTooltip=\"Del et element\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Del et element\">\n                        }\n                        @if(settings.changeTypeEnabled) {\n                            <img \n                                [src]=\"changeTypeBase64\" \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 status p\u00E5 element\" \n                                alt=\"Skift status p\u00E5 element\" \n                                matTooltipPosition=\"below\">\n                        }\n                        @if(settings.mergeEnabled) {\n                            <img \n                                [src]=\"mergeBase64\"\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                        }\n                        @if(settings.centerPoint) {\n                            <img \n                                [src]=\"setCenterBase64\" \n                                [class.active]=\"activeMode === 'center-point'\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"setCenterPoint()\" \n                                matTooltip=\"S\u00E6t centerpunkt\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"S\u00E6t centerpunkt\">\n                        }\n                    </div>\n                    <div class=\"geometry-tools\">\n                        <img \n                            [src]=\"sogPolygonBase64\" \n                            [class.active]=\"activeMode === 'search-feature'\"\n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"toggleFeatureSearch()\" \n                            matTooltip=\"V\u00E6lg og vis emner i listen\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"V\u00E6lg og vis emner i listen\">\n\n                        <img \n                            [src]=\"drawBase64\" \n                            [class.active]=\"activeMode === 'draw'\"\n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startDraw()\"\n                            matTooltip=\"Tegn element\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Tegn element\">\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=\"Inds\u00E6t WKT streng for at importere elementet\">\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 element\">\n                            }\n                                <img \n                                    [src]=\"measureDistanceIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    (click)=\"toggleMeasure()\"\n                                    [class.active]=\"activeMode === 'measure-distance' || activeMode === 'measure-area'\"\n                                    matTooltip=\"M\u00E5l afstand / areal\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"M\u00E5l\">\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=\"Sk\u00E6rmprint af kortet\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Sk\u00E6rmprint af kortet\">\n                                <img \n                                    [src]=\"drawPrintBase64\" \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=\"Tegnev\u00E6rkt\u00F8j til print\">\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' || activeMode === 'wkt-input'\n            || activeMode === 'change-type' || activeMode === 'merge-features') {\n                <mat-select class=\"geometry-selector\" (selectionChange)=\"drawItemChanged($event)\" [(ngModel)]=\"selectedDrawItem\">                    \n                    @for (drawItem of drawItems; track drawItem) {\n                        @if(activeMode !== 'merge-features' || drawItem.geomType === 'Polygon') {\n                            <mat-option [value]=\"drawItem\">{{drawItem.name}} <img *ngIf=\"drawItem.iconUrl\" class=\"compact-icon custom-image-icon\" [src]=\"drawItem.iconUrl\"></mat-option>\n                        }\n                    }\n                </mat-select>            \n            }\n\n            @if (activeMode === 'search-point' || activeMode === 'search-polygon') {\n                <mat-select \n                    class=\"search-point-polygon-selector\" \n                    [(ngModel)]=\"selectedSearchMode\"\n                    (selectionChange)=\"onSearchModeChanged($event)\">\n                    <mat-option value=\"search-point\">S\u00F8g med punkt</mat-option>\n                    <mat-option value=\"search-polygon\">S\u00F8g med polygon</mat-option>\n                </mat-select>\n            }\n            \n            @if (activeMode === 'measure-distance' || activeMode === 'measure-area') {\n                <mat-select \n                    class=\"geometry-selector\"\n                    [(ngModel)]=\"selectedMeasureMode\"\n                    (selectionChange)=\"onMeasureModeChanged($event)\">\n                    <mat-option value=\"measure-distance\">M\u00E5l afstand</mat-option>\n                    <mat-option value=\"measure-area\">M\u00E5l areal</mat-option>\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)\" class=\"feature-title\">\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 class=\"secondary-item\">{{ 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\") && geometrySearchResult.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <mat-option *ngFor=\"let result of geometrySearchResult\" [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=\"geometry-search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                    <div class=\"item-right\">\n                        @if (item.url) {\n                            <mat-icon \n                                class=\"search-item-external\"\n                                matTooltip=\"\u00C5bn i ny tab\"\n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                (click)=\"openUrl(item.url, $event)\"\n                                matTooltipPosition=\"above\"\n                              >info</mat-icon>\n                        }\n                        <mat-icon (click)=\"deleteGeometrySearchItem(result, item.id, $event)\" >delete</mat-icon>\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;border-radius:5px;transition:width .3s ease,max-width .3s ease}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.search-item-external{cursor:pointer}.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;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%;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 .snap-toggle{display:flex;align-items:center;gap:5px;color:#fff;font-size:12px;font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none}.main-tools .snap-toggle input[type=checkbox]{appearance:none;width:18px;height:18px;border:1.5px solid rgba(255,255,255,.6);border-radius:3px;background:transparent;cursor:pointer;position:relative;flex-shrink:0}.main-tools .snap-toggle input[type=checkbox]:checked{background:#f7b528;border-color:#f7b528}.main-tools .snap-toggle input[type=checkbox]:checked:after{content:\"\";position:absolute;left:4px;top:0;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.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)}.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;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){box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.search-point-polygon-selector{width:24%;margin-right:auto;padding:6px}.search-point-polygon-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.search-point-polygon-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.search-point-polygon-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.geometry-selector{width:34%;margin-left:15em;padding:6px}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.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:30px!important;padding:0 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-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.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:5px;background:#6d6f73;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;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:5px;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;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}.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}.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;top:0;z-index:1;font-weight:600;color:#bdc1c3cc}.search-result-item{display:flex;align-items:center;padding:4px 14px;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.item-left{flex:1;width:100%}.item-header{color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.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}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px}::ng-deep .metadata-panel .feature-item{padding:8px 12px;margin:4px 0;background:#ffffff0d;border-radius:5px;transition:all .2s ease}::ng-deep .metadata-panel .feature-item:hover{background:#ffffff1a;box-shadow:0 2px 8px #00000026}::ng-deep .metadata-panel .feature-item:first-child{margin-top:0}::ng-deep .metadata-panel .feature-item:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title{color:#bdc1c3cc;font-size:13px;line-height:1.6;display:flex;align-items:center;gap:6px;letter-spacing:.2px}::ng-deep .metadata-panel .feature-title:first-child{margin-top:0}::ng-deep .metadata-panel .feature-title:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title img{border-radius:4px;margin-top:4px;box-shadow:0 2px 6px #0003}::ng-deep .metadata-panel .feature-title a{color:#6ccb78;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:color .2s ease}::ng-deep .metadata-panel .feature-title a:hover{color:#85d990;text-decoration:underline}::ng-deep .metadata-panel .feature-title a .link-icon{font-size:16px;width:16px;height:16px}::ng-deep .metadata-panel .secondary-item{color:#fff;font-weight:400}::ng-deep .geometry-search-panel{max-height:360px!important;overflow-y:auto!important;max-width:430px;background:#4c4d51!important;border:1px solid rgba(255,255,255,.07);border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:0 8px 24px #00000026!important}::ng-deep .geometry-search-panel::-webkit-scrollbar{width:4px}::ng-deep .geometry-search-panel::-webkit-scrollbar-track{background:transparent}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#fff3}::ng-deep .geometry-search-panel .buffer-item{display:flex;align-items:center;gap:8px;padding:10px 14px 8px;background:#0003;border-bottom:1px solid rgba(255,255,255,.06)}::ng-deep .geometry-search-panel .buffer-item mat-label{color:#9ca3af;font-size:12px;font-weight:500;letter-spacing:.3px}::ng-deep .geometry-search-panel .buffer-item input{width:52px;margin:0;background:#3a3d42;border:1px solid rgba(255,255,255,.1);border-radius:5px;color:#fff;font-size:12px;padding:4px 8px;text-align:center;outline:none;transition:border-color .15s ease}::ng-deep .geometry-search-panel .buffer-item input:focus{border-color:#f7b528}::ng-deep .geometry-search-panel .result-title{display:flex;align-items:center;gap:8px;padding:8px 14px 4px;font-size:14px;font-weight:600;color:#bdc1c3cc;position:sticky;top:0;z-index:1}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-direction:column;gap:5px;padding:8px 14px;cursor:pointer;border-left:2px solid transparent;transition:background .12s ease,border-color .12s ease}::ng-deep .geometry-search-panel .search-result-item+.search-result-item{border-top:1px solid rgba(255,255,255,.04)}::ng-deep .geometry-search-panel .search-result-item:hover{background:#ffffff09}::ng-deep .geometry-search-panel .search-result-item:hover .item-header{color:#fff}::ng-deep .geometry-search-panel .search-result-item:last-child{border-radius:0 0 10px 10px}::ng-deep .geometry-search-panel .item-header{color:#d1d5db;font-size:14px;font-weight:500;line-height:1.4;display:block;word-wrap:break-word;overflow-wrap:break-word;transition:color .12s ease}::ng-deep .geometry-search-panel .item-right{display:flex;align-items:center;gap:3px;flex-wrap:wrap;width:100%}::ng-deep .geometry-search-panel .item-right .custom-image-icon{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff!important;border:1px solid rgba(255,255,255,0);border-radius:5px;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease!important}::ng-deep .geometry-search-panel .item-right .custom-image-icon:hover{background:#ffffff0d!important;box-shadow:0 0 0 1px #f7b5282e}::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;padding:4px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff}::ng-deep .geometry-search-panel mat-label{color:#fff}::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}@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}.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}.result-title{padding:10px 12px;font-size:13px}}.geometry-search-result-item{display:flex;padding:4px 14px;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.geometry-search-result-item .item-header{width:260px}@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;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}.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}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.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$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i4.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: i3.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: i3.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: 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 global-wrapper-container\" \n    cdkDrag \n    cdkDragBoundary=\".map-container\"\n    [cdkDragFreeDragPosition]=\"dragPosition\"\n    (cdkDragEnded)=\"onDragEnded($event)\"\n    [class.collapsed]=\"collapsed\">\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\">\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)=\"toggleShowInfo()\" \n                            [class.active]=\"activeMode === 'show-info'\"\n                            matTooltip=\"Vis info om geometri\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Vis info for flader\">\n                        <img \n                            [src]=\"downloadFileBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startDownloadAddresses()\" \n                            [class.active]=\"activeMode === 'download-addresses'\"\n                            matTooltip=\"Download addresser\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Download addresser\">\n                        <img \n                            [src]=\"downloadMatriklerBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startDownloadCasdatres()\" \n                            [class.active]=\"activeMode === 'download-cadastres'\"\n                            matTooltip=\"Download matrikler\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Download matrikler\">\n\n                        <img \n                            [src]=\"splitIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"togglePointPolygonSearch()\"\n                            [class.active]=\"activeMode === 'search-point' || activeMode === 'search-polygon'\"\n                            matTooltip=\"S\u00F8g punkt / polygon\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"S\u00F8g\">\n                        @if (settings.showDocumentSearch) {\n\n                            <img \n                                [src]=\"documentSearchBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startDocumentPointSearch()\"\n                                [class.active]=\"activeMode === 'document-search-by-point'\"\n                                matTooltip=\"Dokument fra punkt\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Dokument fra punkt\">\n\n                            <img \n                                [src]=\"documentSearchBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startDocumentPolygonSearch()\"\n                                [class.active]=\"activeMode === 'document-search-by-polygon'\"\n                                matTooltip=\"Dokumenter fra polygon\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Dokumenter fra polygon\">\n                        }\n                        @if (settings.cowiUrlTemplate) {\n                            <img \n                                [src]=\"openCowiPageBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'cowi'\"\n                                (click)=\"toggleCowiPage()\" \n                                matTooltip=\"COWI\u00B4s Gadefoto\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"COWI\u00B4s Gadefoto\">\n                        }\n                        @if (settings.skraaFotoUrlTemplate) {\n                            <img \n                                [src]=\"skrafotoBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'skrafoto'\"\n                                (click)=\"toggleSkraafotoPage()\" \n                                matTooltip=\"Opslag p\u00E5 Skr\u00E5fotos\" \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)=\"toggleGoogleStreetviewPage()\" \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=\"Fremh\u00E6v aktivt objekt i listen\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Fremh\u00E6v\">\n                        @if (activeMode === 'draw' || activeMode === 'edit' || activeMode === 'edit-remove' || activeMode === 'search-feature' ||\n                            activeMode === 'clip-hole' || activeMode === 'split' || activeMode === 'merge-features') {\n                            <label class=\"snap-toggle\">\n                                <input type=\"checkbox\" [checked]=\"snap\" (change)=\"onSnapChange($event)\">\n                                Snap\n                            </label> \n                        }      \n                        @if(settings.editEnabled) {\n                        <img \n                            [src]=\"editBase64\" \n                            [class.active]=\"activeMode === 'edit'\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startEdit()\" \n                            matTooltip=\"Inds\u00E6t eller flyt punkter i flade\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Inds\u00E6t eller flyt punkter i flade\">\n                        <img \n                            [src]=\"deleteIconBase64\"                             \n                            [class.active]=\"activeMode === 'edit-remove'\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startEditRemovePoints()\" \n                            matTooltip=\"Slet punkter i flade/linje\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Slet punkter i flade/linje\">\n                        }\n                        @if(settings.cutHoleEnabled) {\n                            <img \n                                [src]=\"clipHoleBase64\" \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 i flade\">\n                        }\n                        @if(settings.splitEnabled) {\n                            <img \n                                [src]=\"splitBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'split'\"\n                                (click)=\"split()\" \n                                matTooltip=\"Del et element\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Del et element\">\n                        }\n                        @if(settings.changeTypeEnabled) {\n                            <img \n                                [src]=\"changeTypeBase64\" \n                                class=\"compact-icon custom-image-icon\" \n                                [class.active]=\"activeMode === 'change-type'\" \n                                (click)=\"startChangeType()\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Skift status p\u00E5 element\" \n                                alt=\"Skift status p\u00E5 element\" \n                                matTooltipPosition=\"below\">\n                        }\n                        @if(settings.mergeEnabled) {\n                            <img \n                                [src]=\"mergeBase64\"\n                                class=\"compact-icon custom-image-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                        }\n                        @if(settings.centerPoint) {\n                            <img \n                                [src]=\"setCenterBase64\" \n                                [class.active]=\"activeMode === 'center-point'\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"setCenterPoint()\" \n                                matTooltip=\"S\u00E6t centerpunkt\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"S\u00E6t centerpunkt\">\n                        }\n                    </div>\n                    <div class=\"geometry-tools\">\n                        <img \n                            [src]=\"sogPolygonBase64\" \n                            [class.active]=\"activeMode === 'search-feature'\"\n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"toggleFeatureSearch()\" \n                            matTooltip=\"V\u00E6lg og vis emner i listen\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"V\u00E6lg og vis emner i listen\">\n\n                        <img \n                            [src]=\"drawBase64\" \n                            [class.active]=\"activeMode === 'draw'\"\n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startDraw()\"\n                            matTooltip=\"Tegn element\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Tegn element\">\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=\"Inds\u00E6t WKT streng for at importere elementet\">\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 element\">\n                            }\n                                <img \n                                    [src]=\"measureDistanceIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    (click)=\"toggleMeasure()\"\n                                    [class.active]=\"activeMode === 'measure-distance' || activeMode === 'measure-area'\"\n                                    matTooltip=\"M\u00E5l afstand / areal\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"M\u00E5l\">\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=\"Sk\u00E6rmprint af kortet\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Sk\u00E6rmprint af kortet\">\n                                <img \n                                    [src]=\"drawPrintBase64\" \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=\"Tegnev\u00E6rkt\u00F8j til print\">\n                            </div>\n                        }\n                    </div>\n                </div>\n                @if(showInputWKT && activeMode === 'wkt-input') {\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' || activeMode === 'wkt-input'\n            || activeMode === 'change-type' || activeMode === 'merge-features') {\n                <mat-select class=\"geometry-selector\" (selectionChange)=\"drawItemChanged($event)\" [(ngModel)]=\"selectedDrawItem\">                    \n                    @for (drawItem of drawItems; track drawItem) {\n                        @if(activeMode !== 'merge-features' || drawItem.geomType === 'Polygon') {\n                            <mat-option [value]=\"drawItem\">{{drawItem.name}} <img *ngIf=\"drawItem.iconUrl\" class=\"compact-icon custom-image-icon\" [src]=\"drawItem.iconUrl\"></mat-option>\n                        }\n                    }\n                </mat-select>            \n            }\n\n            @if (activeMode === 'search-point' || activeMode === 'search-polygon') {\n                <mat-select \n                    class=\"search-point-polygon-selector\" \n                    [(ngModel)]=\"selectedSearchMode\"\n                    (selectionChange)=\"onSearchModeChanged($event)\">\n                    <mat-option value=\"search-point\">S\u00F8g med punkt</mat-option>\n                    <mat-option value=\"search-polygon\">S\u00F8g med polygon</mat-option>\n                </mat-select>\n            }\n            \n            @if (activeMode === 'measure-distance' || activeMode === 'measure-area') {\n                <mat-select \n                    class=\"geometry-selector\"\n                    [(ngModel)]=\"selectedMeasureMode\"\n                    (selectionChange)=\"onMeasureModeChanged($event)\">\n                    <mat-option value=\"measure-distance\">M\u00E5l afstand</mat-option>\n                    <mat-option value=\"measure-area\">M\u00E5l areal</mat-option>\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)\" class=\"feature-title\">\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 class=\"secondary-item\">{{ 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\") && geometrySearchResult.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <mat-icon (click)=\"deleteAllGeometrySearchItem()\"  matTooltip=\"Ryd\">delete</mat-icon>\n            <mat-option *ngFor=\"let result of geometrySearchResult\" [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=\"geometry-search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                    <div class=\"item-right\">\n                        @if (item.url) {\n                            <mat-icon \n                                class=\"search-item-external\"\n                                matTooltip=\"\u00C5bn i ny tab\"\n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                (click)=\"openUrl(item.url, $event)\"\n                                matTooltipPosition=\"above\"\n                              >info</mat-icon>\n                        }\n                        <mat-icon (click)=\"deleteGeometrySearchItem(result, item.id, $event)\" >delete</mat-icon>\n                    </div>\n                 </div>\n            </mat-option>\n        </div>\n    }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:10;max-width:95vw;box-shadow:0 2px 10px #0000001a;border-radius:5px;transition:width .3s ease,max-width .3s ease}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.search-item-external{cursor:pointer}.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;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%;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 .snap-toggle{display:flex;align-items:center;gap:5px;color:#fff;font-size:12px;font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none}.main-tools .snap-toggle input[type=checkbox]{appearance:none;width:18px;height:18px;border:1.5px solid rgba(255,255,255,.6);border-radius:3px;background:transparent;cursor:pointer;position:relative;flex-shrink:0}.main-tools .snap-toggle input[type=checkbox]:checked{background:#f7b528;border-color:#f7b528}.main-tools .snap-toggle input[type=checkbox]:checked:after{content:\"\";position:absolute;left:4px;top:0;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.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)}.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;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){box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.search-point-polygon-selector{width:24%;margin-right:auto;padding:6px}.search-point-polygon-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.search-point-polygon-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.search-point-polygon-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.geometry-selector{width:34%;margin-left:15em;padding:6px}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.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:30px!important;padding:0 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-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.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:5px;background:#6d6f73;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;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:5px;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;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}.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}.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;top:0;z-index:1;font-weight:600;color:#bdc1c3cc}.search-result-item{display:flex;align-items:center;padding:4px 14px;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.item-left{flex:1;width:100%}.item-header{color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.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}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px}::ng-deep .metadata-panel .feature-item{padding:8px 12px;margin:4px 0;background:#ffffff0d;border-radius:5px;transition:all .2s ease}::ng-deep .metadata-panel .feature-item:hover{background:#ffffff1a;box-shadow:0 2px 8px #00000026}::ng-deep .metadata-panel .feature-item:first-child{margin-top:0}::ng-deep .metadata-panel .feature-item:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title{color:#bdc1c3cc;font-size:13px;line-height:1.6;display:flex;align-items:center;gap:6px;letter-spacing:.2px}::ng-deep .metadata-panel .feature-title:first-child{margin-top:0}::ng-deep .metadata-panel .feature-title:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title img{border-radius:4px;margin-top:4px;box-shadow:0 2px 6px #0003}::ng-deep .metadata-panel .feature-title a{color:#6ccb78;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:color .2s ease}::ng-deep .metadata-panel .feature-title a:hover{color:#85d990;text-decoration:underline}::ng-deep .metadata-panel .feature-title a .link-icon{font-size:16px;width:16px;height:16px}::ng-deep .metadata-panel .secondary-item{color:#fff;font-weight:400}::ng-deep .geometry-search-panel{max-height:360px!important;overflow-y:auto!important;max-width:430px;background:#4c4d51!important;border:1px solid rgba(255,255,255,.07);border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:0 8px 24px #00000026!important}::ng-deep .geometry-search-panel::-webkit-scrollbar{width:4px}::ng-deep .geometry-search-panel::-webkit-scrollbar-track{background:transparent}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#fff3}::ng-deep .geometry-search-panel .buffer-item{display:flex;align-items:center;gap:8px;padding:10px 14px 8px;background:#0003;border-bottom:1px solid rgba(255,255,255,.06)}::ng-deep .geometry-search-panel .buffer-item mat-label{color:#9ca3af;font-size:12px;font-weight:500;letter-spacing:.3px}::ng-deep .geometry-search-panel .buffer-item input{width:52px;margin:0;background:#3a3d42;border:1px solid rgba(255,255,255,.1);border-radius:5px;color:#fff;font-size:12px;padding:4px 8px;text-align:center;outline:none;transition:border-color .15s ease}::ng-deep .geometry-search-panel .buffer-item input:focus{border-color:#f7b528}::ng-deep .geometry-search-panel .result-title{display:flex;align-items:center;gap:8px;padding:8px 14px 4px;font-size:14px;font-weight:600;color:#bdc1c3cc;position:sticky;top:0;z-index:1}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-direction:column;gap:5px;padding:8px 14px;cursor:pointer;border-left:2px solid transparent;transition:background .12s ease,border-color .12s ease}::ng-deep .geometry-search-panel .search-result-item+.search-result-item{border-top:1px solid rgba(255,255,255,.04)}::ng-deep .geometry-search-panel .search-result-item:hover{background:#ffffff09}::ng-deep .geometry-search-panel .search-result-item:hover .item-header{color:#fff}::ng-deep .geometry-search-panel .search-result-item:last-child{border-radius:0 0 10px 10px}::ng-deep .geometry-search-panel .item-header{color:#d1d5db;font-size:14px;font-weight:500;line-height:1.4;display:block;word-wrap:break-word;overflow-wrap:break-word;transition:color .12s ease}::ng-deep .geometry-search-panel .item-right{display:flex;align-items:center;gap:3px;flex-wrap:wrap;width:100%}::ng-deep .geometry-search-panel .item-right .custom-image-icon{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff!important;border:1px solid rgba(255,255,255,0);border-radius:5px;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease!important}::ng-deep .geometry-search-panel .item-right .custom-image-icon:hover{background:#ffffff0d!important;box-shadow:0 0 0 1px #f7b5282e}::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;padding:4px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff}::ng-deep .geometry-search-panel mat-label{color:#fff}::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}@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}.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}.result-title{padding:10px 12px;font-size:13px}}.geometry-search-result-item{display:flex;padding:4px 14px;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.geometry-search-result-item .item-header{width:260px}@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;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}.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}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.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$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i4.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: i3.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: i3.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: ToolboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'map-toolbox', imports: [FormsModule, CommonModule, MatIconModule, MatOptionModule, MatSelectModule, DragDropModule, MatTooltipModule], template: "<div class=\"toolbox-wrapper global-wrapper-container\" \n     cdkDrag \n     cdkDragBoundary=\".map-container\"\n     [cdkDragFreeDragPosition]=\"dragPosition\"\n     (cdkDragEnded)=\"onDragEnded($event)\"\n     [class.collapsed]=\"collapsed\">\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\">\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)=\"toggleShowInfo()\" \n                            [class.active]=\"activeMode === 'show-info'\"\n                            matTooltip=\"Vis info om geometri\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Vis info for flader\">\n                        <img \n                            [src]=\"downloadFileBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startDownloadAddresses()\" \n                            [class.active]=\"activeMode === 'download-addresses'\"\n                            matTooltip=\"Download addresser\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Download addresser\">\n                        <img \n                            [src]=\"downloadMatriklerBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startDownloadCasdatres()\" \n                            [class.active]=\"activeMode === 'download-cadastres'\"\n                            matTooltip=\"Download matrikler\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Download matrikler\">\n\n                        <img \n                            [src]=\"splitIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"togglePointPolygonSearch()\"\n                            [class.active]=\"activeMode === 'search-point' || activeMode === 'search-polygon'\"\n                            matTooltip=\"S\u00F8g punkt / polygon\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"S\u00F8g\">\n                        @if (settings.showDocumentSearch) {\n\n                            <img \n                                [src]=\"documentSearchBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startDocumentPointSearch()\"\n                                [class.active]=\"activeMode === 'document-search-by-point'\"\n                                matTooltip=\"Dokument fra punkt\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Dokument fra punkt\">\n\n                            <img \n                                [src]=\"documentSearchBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startDocumentPolygonSearch()\"\n                                [class.active]=\"activeMode === 'document-search-by-polygon'\"\n                                matTooltip=\"Dokumenter fra polygon\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Dokumenter fra polygon\">\n                        }\n                        @if (settings.cowiUrlTemplate) {\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                        }\n                        @if (settings.skraaFotoUrlTemplate) {\n                            <img \n                                [src]=\"skrafotoBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'skrafoto'\"\n                                (click)=\"openSkraafotoPage()\" \n                                matTooltip=\"Opslag p\u00E5 Skr\u00E5fotos\" \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=\"Fremh\u00E6v aktivt objekt i listen\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Fremh\u00E6v\">\n                        @if (activeMode === 'draw' || activeMode === 'edit' || activeMode === 'edit-remove' || activeMode === 'search-feature' ||\n                            activeMode === 'clip-hole' || activeMode === 'split' || activeMode === 'merge-features') {\n                            <label class=\"snap-toggle\">\n                                <input type=\"checkbox\" [checked]=\"snap\" (change)=\"onSnapChange($event)\">\n                                Snap\n                            </label> \n                        }      \n                        @if(settings.editEnabled) {\n                        <img \n                            [src]=\"editBase64\" \n                            [class.active]=\"activeMode === 'edit'\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startEdit()\" \n                            matTooltip=\"Inds\u00E6t eller flyt punkter i flade\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Inds\u00E6t eller flyt punkter i flade\">\n                        <img \n                            [src]=\"deleteIconBase64\"                             \n                            [class.active]=\"activeMode === 'edit-remove'\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startEditRemovePoints()\" \n                            matTooltip=\"Slet punkter i flade/linje\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Slet punkter i flade/linje\">\n                        }\n                        @if(settings.cutHoleEnabled) {\n                            <img \n                                [src]=\"clipHoleBase64\" \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 i flade\">\n                        }\n                        @if(settings.splitEnabled) {\n                            <img \n                                [src]=\"splitBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'split'\"\n                                (click)=\"split()\" \n                                matTooltip=\"Del et element\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Del et element\">\n                        }\n                        @if(settings.changeTypeEnabled) {\n                            <img \n                                [src]=\"changeTypeBase64\" \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 status p\u00E5 element\" \n                                alt=\"Skift status p\u00E5 element\" \n                                matTooltipPosition=\"below\">\n                        }\n                        @if(settings.mergeEnabled) {\n                            <img \n                                [src]=\"mergeBase64\"\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                        }\n                        @if(settings.centerPoint) {\n                            <img \n                                [src]=\"setCenterBase64\" \n                                [class.active]=\"activeMode === 'center-point'\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"setCenterPoint()\" \n                                matTooltip=\"S\u00E6t centerpunkt\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"S\u00E6t centerpunkt\">\n                        }\n                    </div>\n                    <div class=\"geometry-tools\">\n                        <img \n                            [src]=\"sogPolygonBase64\" \n                            [class.active]=\"activeMode === 'search-feature'\"\n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"toggleFeatureSearch()\" \n                            matTooltip=\"V\u00E6lg og vis emner i listen\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"V\u00E6lg og vis emner i listen\">\n\n                        <img \n                            [src]=\"drawBase64\" \n                            [class.active]=\"activeMode === 'draw'\"\n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startDraw()\"\n                            matTooltip=\"Tegn element\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Tegn element\">\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=\"Inds\u00E6t WKT streng for at importere elementet\">\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 element\">\n                            }\n                                <img \n                                    [src]=\"measureDistanceIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    (click)=\"toggleMeasure()\"\n                                    [class.active]=\"activeMode === 'measure-distance' || activeMode === 'measure-area'\"\n                                    matTooltip=\"M\u00E5l afstand / areal\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"M\u00E5l\">\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=\"Sk\u00E6rmprint af kortet\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Sk\u00E6rmprint af kortet\">\n                                <img \n                                    [src]=\"drawPrintBase64\" \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=\"Tegnev\u00E6rkt\u00F8j til print\">\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' || activeMode === 'wkt-input'\n            || activeMode === 'change-type' || activeMode === 'merge-features') {\n                <mat-select class=\"geometry-selector\" (selectionChange)=\"drawItemChanged($event)\" [(ngModel)]=\"selectedDrawItem\">                    \n                    @for (drawItem of drawItems; track drawItem) {\n                        @if(activeMode !== 'merge-features' || drawItem.geomType === 'Polygon') {\n                            <mat-option [value]=\"drawItem\">{{drawItem.name}} <img *ngIf=\"drawItem.iconUrl\" class=\"compact-icon custom-image-icon\" [src]=\"drawItem.iconUrl\"></mat-option>\n                        }\n                    }\n                </mat-select>            \n            }\n\n            @if (activeMode === 'search-point' || activeMode === 'search-polygon') {\n                <mat-select \n                    class=\"search-point-polygon-selector\" \n                    [(ngModel)]=\"selectedSearchMode\"\n                    (selectionChange)=\"onSearchModeChanged($event)\">\n                    <mat-option value=\"search-point\">S\u00F8g med punkt</mat-option>\n                    <mat-option value=\"search-polygon\">S\u00F8g med polygon</mat-option>\n                </mat-select>\n            }\n            \n            @if (activeMode === 'measure-distance' || activeMode === 'measure-area') {\n                <mat-select \n                    class=\"geometry-selector\"\n                    [(ngModel)]=\"selectedMeasureMode\"\n                    (selectionChange)=\"onMeasureModeChanged($event)\">\n                    <mat-option value=\"measure-distance\">M\u00E5l afstand</mat-option>\n                    <mat-option value=\"measure-area\">M\u00E5l areal</mat-option>\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)\" class=\"feature-title\">\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 class=\"secondary-item\">{{ 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\") && geometrySearchResult.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <mat-option *ngFor=\"let result of geometrySearchResult\" [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=\"geometry-search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                    <div class=\"item-right\">\n                        @if (item.url) {\n                            <mat-icon \n                                class=\"search-item-external\"\n                                matTooltip=\"\u00C5bn i ny tab\"\n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                (click)=\"openUrl(item.url, $event)\"\n                                matTooltipPosition=\"above\"\n                              >info</mat-icon>\n                        }\n                        <mat-icon (click)=\"deleteGeometrySearchItem(result, item.id, $event)\" >delete</mat-icon>\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;border-radius:5px;transition:width .3s ease,max-width .3s ease}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.search-item-external{cursor:pointer}.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;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%;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 .snap-toggle{display:flex;align-items:center;gap:5px;color:#fff;font-size:12px;font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none}.main-tools .snap-toggle input[type=checkbox]{appearance:none;width:18px;height:18px;border:1.5px solid rgba(255,255,255,.6);border-radius:3px;background:transparent;cursor:pointer;position:relative;flex-shrink:0}.main-tools .snap-toggle input[type=checkbox]:checked{background:#f7b528;border-color:#f7b528}.main-tools .snap-toggle input[type=checkbox]:checked:after{content:\"\";position:absolute;left:4px;top:0;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.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)}.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;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){box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.search-point-polygon-selector{width:24%;margin-right:auto;padding:6px}.search-point-polygon-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.search-point-polygon-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.search-point-polygon-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.geometry-selector{width:34%;margin-left:15em;padding:6px}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.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:30px!important;padding:0 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-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.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:5px;background:#6d6f73;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;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:5px;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;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}.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}.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;top:0;z-index:1;font-weight:600;color:#bdc1c3cc}.search-result-item{display:flex;align-items:center;padding:4px 14px;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.item-left{flex:1;width:100%}.item-header{color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.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}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px}::ng-deep .metadata-panel .feature-item{padding:8px 12px;margin:4px 0;background:#ffffff0d;border-radius:5px;transition:all .2s ease}::ng-deep .metadata-panel .feature-item:hover{background:#ffffff1a;box-shadow:0 2px 8px #00000026}::ng-deep .metadata-panel .feature-item:first-child{margin-top:0}::ng-deep .metadata-panel .feature-item:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title{color:#bdc1c3cc;font-size:13px;line-height:1.6;display:flex;align-items:center;gap:6px;letter-spacing:.2px}::ng-deep .metadata-panel .feature-title:first-child{margin-top:0}::ng-deep .metadata-panel .feature-title:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title img{border-radius:4px;margin-top:4px;box-shadow:0 2px 6px #0003}::ng-deep .metadata-panel .feature-title a{color:#6ccb78;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:color .2s ease}::ng-deep .metadata-panel .feature-title a:hover{color:#85d990;text-decoration:underline}::ng-deep .metadata-panel .feature-title a .link-icon{font-size:16px;width:16px;height:16px}::ng-deep .metadata-panel .secondary-item{color:#fff;font-weight:400}::ng-deep .geometry-search-panel{max-height:360px!important;overflow-y:auto!important;max-width:430px;background:#4c4d51!important;border:1px solid rgba(255,255,255,.07);border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:0 8px 24px #00000026!important}::ng-deep .geometry-search-panel::-webkit-scrollbar{width:4px}::ng-deep .geometry-search-panel::-webkit-scrollbar-track{background:transparent}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#fff3}::ng-deep .geometry-search-panel .buffer-item{display:flex;align-items:center;gap:8px;padding:10px 14px 8px;background:#0003;border-bottom:1px solid rgba(255,255,255,.06)}::ng-deep .geometry-search-panel .buffer-item mat-label{color:#9ca3af;font-size:12px;font-weight:500;letter-spacing:.3px}::ng-deep .geometry-search-panel .buffer-item input{width:52px;margin:0;background:#3a3d42;border:1px solid rgba(255,255,255,.1);border-radius:5px;color:#fff;font-size:12px;padding:4px 8px;text-align:center;outline:none;transition:border-color .15s ease}::ng-deep .geometry-search-panel .buffer-item input:focus{border-color:#f7b528}::ng-deep .geometry-search-panel .result-title{display:flex;align-items:center;gap:8px;padding:8px 14px 4px;font-size:14px;font-weight:600;color:#bdc1c3cc;position:sticky;top:0;z-index:1}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-direction:column;gap:5px;padding:8px 14px;cursor:pointer;border-left:2px solid transparent;transition:background .12s ease,border-color .12s ease}::ng-deep .geometry-search-panel .search-result-item+.search-result-item{border-top:1px solid rgba(255,255,255,.04)}::ng-deep .geometry-search-panel .search-result-item:hover{background:#ffffff09}::ng-deep .geometry-search-panel .search-result-item:hover .item-header{color:#fff}::ng-deep .geometry-search-panel .search-result-item:last-child{border-radius:0 0 10px 10px}::ng-deep .geometry-search-panel .item-header{color:#d1d5db;font-size:14px;font-weight:500;line-height:1.4;display:block;word-wrap:break-word;overflow-wrap:break-word;transition:color .12s ease}::ng-deep .geometry-search-panel .item-right{display:flex;align-items:center;gap:3px;flex-wrap:wrap;width:100%}::ng-deep .geometry-search-panel .item-right .custom-image-icon{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff!important;border:1px solid rgba(255,255,255,0);border-radius:5px;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease!important}::ng-deep .geometry-search-panel .item-right .custom-image-icon:hover{background:#ffffff0d!important;box-shadow:0 0 0 1px #f7b5282e}::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;padding:4px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff}::ng-deep .geometry-search-panel mat-label{color:#fff}::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}@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}.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}.result-title{padding:10px 12px;font-size:13px}}.geometry-search-result-item{display:flex;padding:4px 14px;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.geometry-search-result-item .item-header{width:260px}@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;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}.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}}\n"] }]
+            args: [{ selector: 'map-toolbox', imports: [FormsModule, CommonModule, MatIconModule, MatOptionModule, MatSelectModule, DragDropModule, MatTooltipModule], template: "<div class=\"toolbox-wrapper global-wrapper-container\" \n    cdkDrag \n    cdkDragBoundary=\".map-container\"\n    [cdkDragFreeDragPosition]=\"dragPosition\"\n    (cdkDragEnded)=\"onDragEnded($event)\"\n    [class.collapsed]=\"collapsed\">\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\">\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)=\"toggleShowInfo()\" \n                            [class.active]=\"activeMode === 'show-info'\"\n                            matTooltip=\"Vis info om geometri\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Vis info for flader\">\n                        <img \n                            [src]=\"downloadFileBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startDownloadAddresses()\" \n                            [class.active]=\"activeMode === 'download-addresses'\"\n                            matTooltip=\"Download addresser\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Download addresser\">\n                        <img \n                            [src]=\"downloadMatriklerBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startDownloadCasdatres()\" \n                            [class.active]=\"activeMode === 'download-cadastres'\"\n                            matTooltip=\"Download matrikler\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Download matrikler\">\n\n                        <img \n                            [src]=\"splitIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"togglePointPolygonSearch()\"\n                            [class.active]=\"activeMode === 'search-point' || activeMode === 'search-polygon'\"\n                            matTooltip=\"S\u00F8g punkt / polygon\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"S\u00F8g\">\n                        @if (settings.showDocumentSearch) {\n\n                            <img \n                                [src]=\"documentSearchBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startDocumentPointSearch()\"\n                                [class.active]=\"activeMode === 'document-search-by-point'\"\n                                matTooltip=\"Dokument fra punkt\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Dokument fra punkt\">\n\n                            <img \n                                [src]=\"documentSearchBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startDocumentPolygonSearch()\"\n                                [class.active]=\"activeMode === 'document-search-by-polygon'\"\n                                matTooltip=\"Dokumenter fra polygon\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Dokumenter fra polygon\">\n                        }\n                        @if (settings.cowiUrlTemplate) {\n                            <img \n                                [src]=\"openCowiPageBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'cowi'\"\n                                (click)=\"toggleCowiPage()\" \n                                matTooltip=\"COWI\u00B4s Gadefoto\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"COWI\u00B4s Gadefoto\">\n                        }\n                        @if (settings.skraaFotoUrlTemplate) {\n                            <img \n                                [src]=\"skrafotoBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'skrafoto'\"\n                                (click)=\"toggleSkraafotoPage()\" \n                                matTooltip=\"Opslag p\u00E5 Skr\u00E5fotos\" \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)=\"toggleGoogleStreetviewPage()\" \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=\"Fremh\u00E6v aktivt objekt i listen\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Fremh\u00E6v\">\n                        @if (activeMode === 'draw' || activeMode === 'edit' || activeMode === 'edit-remove' || activeMode === 'search-feature' ||\n                            activeMode === 'clip-hole' || activeMode === 'split' || activeMode === 'merge-features') {\n                            <label class=\"snap-toggle\">\n                                <input type=\"checkbox\" [checked]=\"snap\" (change)=\"onSnapChange($event)\">\n                                Snap\n                            </label> \n                        }      \n                        @if(settings.editEnabled) {\n                        <img \n                            [src]=\"editBase64\" \n                            [class.active]=\"activeMode === 'edit'\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startEdit()\" \n                            matTooltip=\"Inds\u00E6t eller flyt punkter i flade\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Inds\u00E6t eller flyt punkter i flade\">\n                        <img \n                            [src]=\"deleteIconBase64\"                             \n                            [class.active]=\"activeMode === 'edit-remove'\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startEditRemovePoints()\" \n                            matTooltip=\"Slet punkter i flade/linje\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Slet punkter i flade/linje\">\n                        }\n                        @if(settings.cutHoleEnabled) {\n                            <img \n                                [src]=\"clipHoleBase64\" \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 i flade\">\n                        }\n                        @if(settings.splitEnabled) {\n                            <img \n                                [src]=\"splitBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'split'\"\n                                (click)=\"split()\" \n                                matTooltip=\"Del et element\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Del et element\">\n                        }\n                        @if(settings.changeTypeEnabled) {\n                            <img \n                                [src]=\"changeTypeBase64\" \n                                class=\"compact-icon custom-image-icon\" \n                                [class.active]=\"activeMode === 'change-type'\" \n                                (click)=\"startChangeType()\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Skift status p\u00E5 element\" \n                                alt=\"Skift status p\u00E5 element\" \n                                matTooltipPosition=\"below\">\n                        }\n                        @if(settings.mergeEnabled) {\n                            <img \n                                [src]=\"mergeBase64\"\n                                class=\"compact-icon custom-image-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                        }\n                        @if(settings.centerPoint) {\n                            <img \n                                [src]=\"setCenterBase64\" \n                                [class.active]=\"activeMode === 'center-point'\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"setCenterPoint()\" \n                                matTooltip=\"S\u00E6t centerpunkt\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"S\u00E6t centerpunkt\">\n                        }\n                    </div>\n                    <div class=\"geometry-tools\">\n                        <img \n                            [src]=\"sogPolygonBase64\" \n                            [class.active]=\"activeMode === 'search-feature'\"\n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"toggleFeatureSearch()\" \n                            matTooltip=\"V\u00E6lg og vis emner i listen\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"V\u00E6lg og vis emner i listen\">\n\n                        <img \n                            [src]=\"drawBase64\" \n                            [class.active]=\"activeMode === 'draw'\"\n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"startDraw()\"\n                            matTooltip=\"Tegn element\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Tegn element\">\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=\"Inds\u00E6t WKT streng for at importere elementet\">\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 element\">\n                            }\n                                <img \n                                    [src]=\"measureDistanceIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    (click)=\"toggleMeasure()\"\n                                    [class.active]=\"activeMode === 'measure-distance' || activeMode === 'measure-area'\"\n                                    matTooltip=\"M\u00E5l afstand / areal\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"M\u00E5l\">\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=\"Sk\u00E6rmprint af kortet\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Sk\u00E6rmprint af kortet\">\n                                <img \n                                    [src]=\"drawPrintBase64\" \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=\"Tegnev\u00E6rkt\u00F8j til print\">\n                            </div>\n                        }\n                    </div>\n                </div>\n                @if(showInputWKT && activeMode === 'wkt-input') {\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' || activeMode === 'wkt-input'\n            || activeMode === 'change-type' || activeMode === 'merge-features') {\n                <mat-select class=\"geometry-selector\" (selectionChange)=\"drawItemChanged($event)\" [(ngModel)]=\"selectedDrawItem\">                    \n                    @for (drawItem of drawItems; track drawItem) {\n                        @if(activeMode !== 'merge-features' || drawItem.geomType === 'Polygon') {\n                            <mat-option [value]=\"drawItem\">{{drawItem.name}} <img *ngIf=\"drawItem.iconUrl\" class=\"compact-icon custom-image-icon\" [src]=\"drawItem.iconUrl\"></mat-option>\n                        }\n                    }\n                </mat-select>            \n            }\n\n            @if (activeMode === 'search-point' || activeMode === 'search-polygon') {\n                <mat-select \n                    class=\"search-point-polygon-selector\" \n                    [(ngModel)]=\"selectedSearchMode\"\n                    (selectionChange)=\"onSearchModeChanged($event)\">\n                    <mat-option value=\"search-point\">S\u00F8g med punkt</mat-option>\n                    <mat-option value=\"search-polygon\">S\u00F8g med polygon</mat-option>\n                </mat-select>\n            }\n            \n            @if (activeMode === 'measure-distance' || activeMode === 'measure-area') {\n                <mat-select \n                    class=\"geometry-selector\"\n                    [(ngModel)]=\"selectedMeasureMode\"\n                    (selectionChange)=\"onMeasureModeChanged($event)\">\n                    <mat-option value=\"measure-distance\">M\u00E5l afstand</mat-option>\n                    <mat-option value=\"measure-area\">M\u00E5l areal</mat-option>\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)\" class=\"feature-title\">\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 class=\"secondary-item\">{{ 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\") && geometrySearchResult.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <mat-icon (click)=\"deleteAllGeometrySearchItem()\"  matTooltip=\"Ryd\">delete</mat-icon>\n            <mat-option *ngFor=\"let result of geometrySearchResult\" [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=\"geometry-search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                    <div class=\"item-right\">\n                        @if (item.url) {\n                            <mat-icon \n                                class=\"search-item-external\"\n                                matTooltip=\"\u00C5bn i ny tab\"\n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                (click)=\"openUrl(item.url, $event)\"\n                                matTooltipPosition=\"above\"\n                              >info</mat-icon>\n                        }\n                        <mat-icon (click)=\"deleteGeometrySearchItem(result, item.id, $event)\" >delete</mat-icon>\n                    </div>\n                 </div>\n            </mat-option>\n        </div>\n    }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:10;max-width:95vw;box-shadow:0 2px 10px #0000001a;border-radius:5px;transition:width .3s ease,max-width .3s ease}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.search-item-external{cursor:pointer}.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;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%;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 .snap-toggle{display:flex;align-items:center;gap:5px;color:#fff;font-size:12px;font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none}.main-tools .snap-toggle input[type=checkbox]{appearance:none;width:18px;height:18px;border:1.5px solid rgba(255,255,255,.6);border-radius:3px;background:transparent;cursor:pointer;position:relative;flex-shrink:0}.main-tools .snap-toggle input[type=checkbox]:checked{background:#f7b528;border-color:#f7b528}.main-tools .snap-toggle input[type=checkbox]:checked:after{content:\"\";position:absolute;left:4px;top:0;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.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)}.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;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){box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.search-point-polygon-selector{width:24%;margin-right:auto;padding:6px}.search-point-polygon-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.search-point-polygon-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.search-point-polygon-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.geometry-selector{width:34%;margin-left:15em;padding:6px}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.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:30px!important;padding:0 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-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.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:5px;background:#6d6f73;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;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:5px;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;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}.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}.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;top:0;z-index:1;font-weight:600;color:#bdc1c3cc}.search-result-item{display:flex;align-items:center;padding:4px 14px;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.item-left{flex:1;width:100%}.item-header{color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.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}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px}::ng-deep .metadata-panel .feature-item{padding:8px 12px;margin:4px 0;background:#ffffff0d;border-radius:5px;transition:all .2s ease}::ng-deep .metadata-panel .feature-item:hover{background:#ffffff1a;box-shadow:0 2px 8px #00000026}::ng-deep .metadata-panel .feature-item:first-child{margin-top:0}::ng-deep .metadata-panel .feature-item:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title{color:#bdc1c3cc;font-size:13px;line-height:1.6;display:flex;align-items:center;gap:6px;letter-spacing:.2px}::ng-deep .metadata-panel .feature-title:first-child{margin-top:0}::ng-deep .metadata-panel .feature-title:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title img{border-radius:4px;margin-top:4px;box-shadow:0 2px 6px #0003}::ng-deep .metadata-panel .feature-title a{color:#6ccb78;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:color .2s ease}::ng-deep .metadata-panel .feature-title a:hover{color:#85d990;text-decoration:underline}::ng-deep .metadata-panel .feature-title a .link-icon{font-size:16px;width:16px;height:16px}::ng-deep .metadata-panel .secondary-item{color:#fff;font-weight:400}::ng-deep .geometry-search-panel{max-height:360px!important;overflow-y:auto!important;max-width:430px;background:#4c4d51!important;border:1px solid rgba(255,255,255,.07);border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:0 8px 24px #00000026!important}::ng-deep .geometry-search-panel::-webkit-scrollbar{width:4px}::ng-deep .geometry-search-panel::-webkit-scrollbar-track{background:transparent}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#fff3}::ng-deep .geometry-search-panel .buffer-item{display:flex;align-items:center;gap:8px;padding:10px 14px 8px;background:#0003;border-bottom:1px solid rgba(255,255,255,.06)}::ng-deep .geometry-search-panel .buffer-item mat-label{color:#9ca3af;font-size:12px;font-weight:500;letter-spacing:.3px}::ng-deep .geometry-search-panel .buffer-item input{width:52px;margin:0;background:#3a3d42;border:1px solid rgba(255,255,255,.1);border-radius:5px;color:#fff;font-size:12px;padding:4px 8px;text-align:center;outline:none;transition:border-color .15s ease}::ng-deep .geometry-search-panel .buffer-item input:focus{border-color:#f7b528}::ng-deep .geometry-search-panel .result-title{display:flex;align-items:center;gap:8px;padding:8px 14px 4px;font-size:14px;font-weight:600;color:#bdc1c3cc;position:sticky;top:0;z-index:1}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-direction:column;gap:5px;padding:8px 14px;cursor:pointer;border-left:2px solid transparent;transition:background .12s ease,border-color .12s ease}::ng-deep .geometry-search-panel .search-result-item+.search-result-item{border-top:1px solid rgba(255,255,255,.04)}::ng-deep .geometry-search-panel .search-result-item:hover{background:#ffffff09}::ng-deep .geometry-search-panel .search-result-item:hover .item-header{color:#fff}::ng-deep .geometry-search-panel .search-result-item:last-child{border-radius:0 0 10px 10px}::ng-deep .geometry-search-panel .item-header{color:#d1d5db;font-size:14px;font-weight:500;line-height:1.4;display:block;word-wrap:break-word;overflow-wrap:break-word;transition:color .12s ease}::ng-deep .geometry-search-panel .item-right{display:flex;align-items:center;gap:3px;flex-wrap:wrap;width:100%}::ng-deep .geometry-search-panel .item-right .custom-image-icon{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff!important;border:1px solid rgba(255,255,255,0);border-radius:5px;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease!important}::ng-deep .geometry-search-panel .item-right .custom-image-icon:hover{background:#ffffff0d!important;box-shadow:0 0 0 1px #f7b5282e}::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;padding:4px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff}::ng-deep .geometry-search-panel mat-label{color:#fff}::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}@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}.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}.result-title{padding:10px 12px;font-size:13px}}.geometry-search-result-item{display:flex;padding:4px 14px;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.geometry-search-result-item .item-header{width:260px}@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;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}.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}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { map: [{
                 type: Input,
                 args: [{ required: true }]
@@ -4279,7 +4407,6 @@ class ActiveObjectsComponent {
         });
         this._featuresForHighlight$.subscribe({
             next: features => {
-                console.log("🚀 ~ ActiveObjectsComponent ~ constructor ~ features:", features);
                 this._highlightFromMap(features.map(feature => feature.getId()));
             }
         });
@@ -4308,7 +4435,6 @@ class ActiveObjectsComponent {
         this._highlightTimeouts.set(id, timeout);
     }
     ngOnInit() {
-        this._loadPosition();
         this.conflictAnalysisAvailable = !!this._current.gisKomponentSettings.containsCheck && this._current.gisKomponentSettings.containsCheck.enabled &&
             this._current.profile.layerGroups.flatMap(lg => lg.layers).some(l => l.useInConflictAnalysis);
     }
@@ -4330,7 +4456,7 @@ class ActiveObjectsComponent {
     ngOnChanges(changes) {
         if (changes['profile'] && this.profile) {
             this.collapsed = this.profile.activeObjectsFolded;
-            this._loadPosition();
+            this._loadPosition(this.collapsed);
         }
     }
     _getAreaString(feature) {
@@ -4375,8 +4501,9 @@ class ActiveObjectsComponent {
     }
     togglePanel() {
         this.collapsed = !this.collapsed;
-        if (this.profile.activeObjectsInitialPosition.includes('højre')) {
-            this._layoutService.bringElementIntoViewIfNeeded('.active-objects-wrapper', -6, this.collapsed);
+        if (!this.collapsed) {
+            //Expanding, make sure it stays in viewport
+            this.dragPosition = this._layoutService.keepWidgetInViewPort(this.dragPosition, this.POSITION_STORAGE_KEY, WidgetConstants.activeObjectsHeight, WidgetConstants.activeObjectsWidth);
         }
     }
     onDragEnded(event) {
@@ -4392,23 +4519,37 @@ class ActiveObjectsComponent {
             console.error('Error saving position to localStorage:', error);
         }
     }
-    _loadPosition() {
+    _loadPosition(collapsed) {
         try {
+            // Default height and width when collapsed
+            let widgetHeight = WidgetConstants.collapsedHeight;
+            let widgetWidth = WidgetConstants.collapsedWidth;
+            if (!collapsed) {
+                // Custom height and width when expanded
+                widgetHeight = WidgetConstants.activeObjectsHeight;
+                widgetWidth = WidgetConstants.activeObjectsWidth;
+            }
+            const widgetPositionOptions = {
+                initialPosition: this.profile.activeObjectsInitialPosition,
+                widgetName: this.POSITION_STORAGE_KEY,
+                widgetHeight: widgetHeight,
+                widgetWidth: widgetWidth
+            };
             const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
             if (this._profileService.getProfileVersionChanged() &&
                 this.profile?.activeObjectsInitialPosition) {
                 //Profile version changed in backend, use that
-                this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.activeObjectsInitialPosition);
+                this.dragPosition = this._layoutService.calculateWidgetPosition(widgetPositionOptions);
             }
             else if (savedPosition) {
                 this.dragPosition = JSON.parse(savedPosition);
             }
             else if (this.profile?.activeObjectsInitialPosition) {
-                this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.activeObjectsInitialPosition);
+                this.dragPosition = this._layoutService.calculateWidgetPosition(widgetPositionOptions);
             }
             else {
                 // Default position for active objects
-                this.dragPosition = { x: 29, y: 238 };
+                this.dragPosition = { x: WidgetConstants.activeObjectsDefaultX, y: WidgetConstants.activeObjectsDefaultY };
                 this._savePosition(this.dragPosition);
             }
         }
@@ -4418,11 +4559,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 global-wrapper-container\" cdkDrag cdkDragBoundary=\".map-container\"\n    [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"onDragEnded($event)\" [class.collapsed]=\"collapsed\">\n    <div class=\"drag-handle-active-objects\" cdkDragHandle>\n        <mat-icon class=\"active-object-icon\" (click)=\"zoomToAll()\" matTooltip=\"Aktive objekter\"\n            [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" 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 type=\"range\" min=\"0\" max=\"1\" step=\"0.05\" [(ngModel)]=\"opacity\" (input)=\"updateOpacity()\"\n            (mousedown)=\"stopDrag($event)\" (touchstart)=\"stopDrag($event)\" (pointerdown)=\"stopDrag($event)\">\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 class=\"zoom-icon\" [class.zoom-active]=\"isZoomedToAll\" (click)=\"zoomToAll()\"\n                        matTooltip=\"Zoom til alle\" matTooltipPosition=\"above\">\n                        fit_screen\n                    </mat-icon>\n                    <mat-icon class=\"reset-icon\" (click)=\"reset()\" matTooltip=\"Nulstilles\" matTooltipPosition=\"above\">\n                        replay\n                    </mat-icon>\n                </div>\n\n                <div class=\"header-right-controls\">\n                    @if(!centerPointOk) {\n                    <mat-icon class=\"warning-icon\" matTooltip=\"Der er ikke noget centerpunkt og det skal der v\u00E6re\"\n                       [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n                        warning\n                    </mat-icon>\n                    } @else if (allFeaturesOk) {                        \n                        @if (endSessionButtonLabel) {\n                            <button (click)=\"endSession()\" matTooltip=\"Afslut\" [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n                                {{endSessionButtonLabel}}\n                            </button>\n                            } @else {\n                            <mat-icon class=\"end-session-icon\" (click)=\"endSession()\" matTooltip=\"Afslut\"\n                              [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n                                done_all\n                            </mat-icon>\n                        }\n                    }\n                </div>\n            </div>\n            <div class=\"item-list\">\n                @for(item of activeFeatures; track item.id) {\n                <div class=\"item\" [class.listhighlight]=\"listHighlightedIds.has(item.id)\" [attr.data-id]=\"item.id\">\n                    <div class=\"item-text\">\n                        <span class=\"item-id\">{{item.display}} {{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)\" matTooltip=\"Slet\" [matTooltipShowDelay]=\"500\"\n                        [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n                        delete\n                    </mat-icon>\n                    }\n                    <mat-icon (click)=\"highlight(item.id)\" matTooltip=\"T\u00E6nd\" [matTooltipShowDelay]=\"500\"\n                        [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\"\n                        [class.highlight-active]=\"highlightedId === item.id\">\n                        power_settings_new\n                    </mat-icon>\n                </div>\n                }\n            </div>\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;width:350px;transition:width .3s ease,max-width .3s ease;border-radius:5px!important}.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 :not(.collapsed){max-width:350px}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.listhighlight{color:#0af!important;font-weight:700}.item{display:flex;justify-content:space-between;align-items:center;padding:0 14px;border-radius:5px;background:transparent!important;transition:all .2s ease;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{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item .item-area{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item mat-icon{cursor:pointer;color:#bdc1c3cc;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:#d3d3d3}.highlight-active{color:#6ccb78!important;transition:all .2s ease}.drag-handle-active-objects .active-object-icon{cursor:default!important;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;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;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.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}.active-objects-container input[type=range]{width:95%;height:4px;margin:8px auto;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}.active-objects-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}.active-objects-container input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}.active-objects-container input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}.active-objects-container input[type=range]::-moz-range-thumb:hover{background:#6ccb78}.header-icons{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:5px 10px!important}.header-icons .header-left-controls,.header-icons .header-right-controls{display:flex;align-items:center;gap:8px}.header-icons .header-right-controls button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 12px;height:26px;min-width:56px;max-width:150px;background:linear-gradient(135deg,#6ccb781f,#6ccb780f);border:1px solid rgba(108,203,120,.55);border-radius:5px;color:#6ccb78;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;outline:none;box-shadow:0 0 #6ccb7800,inset 0 1px #ffffff0f;transition:background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,transform .12s ease}.header-icons .header-right-controls button mat-icon{font-size:14px;width:14px;height:14px;flex-shrink:0;transition:transform .3s ease;margin:0}.header-icons .header-right-controls button:hover{background:linear-gradient(135deg,#6ccb7838,#6ccb781a);border-color:#6ccb78e6;color:#88d994}.header-icons .header-right-controls button:hover mat-icon{transform:scale(1.15)}.header-icons .header-right-controls button:active{background:#6ccb782e;border-color:#6ccb78;color:#fff;box-shadow:0 0 6px #6ccb7833,inset 0 2px 4px #0000004d;transform:translateY(0)}.header-icons .header-right-controls button:focus-visible{outline:2px solid rgba(108,203,120,.6);outline-offset:2px}.header-icons .header-right-controls .end-session-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:5px;color:#6ccb78;cursor:pointer;transition:color .2s ease,background .2s ease,box-shadow .2s ease,transform .12s ease}.header-icons .header-right-controls .end-session-icon:hover{color:#88d994;background:#6ccb781f;box-shadow:0 0 10px #6ccb7833;transform:scale(1.1)}.header-icons .header-right-controls .end-session-icon:active{color:#fff;background:#6ccb7833;transform:scale(.95)}.header-icons .zoom-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .zoom-icon:hover{color:#6ccb78}.header-icons .zoom-icon.zoom-active{color:#6ccb78!important}.header-icons .reset-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .reset-icon:hover{color:#6ccb78}.header-icons .warning-icon{color:#6ccb78;font-size:18px;cursor:help}.header-icons .end-session-icon{cursor:pointer;color:#6ccb78;font-size:18px;transition:all .2s ease}.header-icons .end-session-icon:hover{color:#45a049}.active-objects-content{display:block;width:100%;max-height:278px;overflow:auto;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.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:#6ccb78}.active-objects-content .zoom-icon.zoom-active{color:#6ccb78!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 .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{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$3.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$3.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.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: i3.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 global-wrapper-container\" cdkDrag cdkDragBoundary=\".map-container\"\n    [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"onDragEnded($event)\" [class.collapsed]=\"collapsed\">\n    <div class=\"drag-handle-active-objects\" cdkDragHandle>\n        <mat-icon class=\"active-object-icon\" (click)=\"zoomToAll()\" matTooltip=\"Aktive objekter\"\n            [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" 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 type=\"range\" min=\"0\" max=\"1\" step=\"0.05\" [(ngModel)]=\"opacity\" (input)=\"updateOpacity()\"\n            (mousedown)=\"stopDrag($event)\" (touchstart)=\"stopDrag($event)\" (pointerdown)=\"stopDrag($event)\">\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 class=\"zoom-icon\" [class.zoom-active]=\"isZoomedToAll\" (click)=\"zoomToAll()\"\n                        matTooltip=\"Zoom til alle\" matTooltipPosition=\"above\">\n                        fit_screen\n                    </mat-icon>\n                    <mat-icon class=\"reset-icon\" (click)=\"reset()\" matTooltip=\"Nulstilles\" matTooltipPosition=\"above\">\n                        replay\n                    </mat-icon>\n                </div>\n\n                <div class=\"header-right-controls\">\n                    @if(!centerPointOk) {\n                    <mat-icon class=\"warning-icon\" matTooltip=\"Der er ikke noget centerpunkt og det skal der v\u00E6re\"\n                       [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n                        warning\n                    </mat-icon>\n                    } @else if (allFeaturesOk) {                        \n                        @if (endSessionButtonLabel) {\n                            <button (click)=\"endSession()\" matTooltip=\"Afslut\" [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n                                {{endSessionButtonLabel}}\n                            </button>\n                            } @else {\n                            <mat-icon class=\"end-session-icon\" (click)=\"endSession()\" matTooltip=\"Afslut\"\n                              [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n                                done_all\n                            </mat-icon>\n                        }\n                    }\n                </div>\n            </div>\n            <div class=\"item-list\">\n                @for(item of activeFeatures; track item.id) {\n                <div class=\"item\" [class.listhighlight]=\"listHighlightedIds.has(item.id)\" [attr.data-id]=\"item.id\">\n                    <div class=\"item-text\">\n                        <span class=\"item-id\">{{item.display}} {{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)\" matTooltip=\"Slet\" [matTooltipShowDelay]=\"500\"\n                        [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n                        delete\n                    </mat-icon>\n                    }\n                    <mat-icon (click)=\"highlight(item.id)\" matTooltip=\"T\u00E6nd\" [matTooltipShowDelay]=\"500\"\n                        [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\"\n                        [class.highlight-active]=\"highlightedId === item.id\">\n                        power_settings_new\n                    </mat-icon>\n                </div>\n                }\n            </div>\n\n        </div>\n        }\n    </div>\n</div>", styles: [".active-objects-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:2;box-shadow:0 2px 10px #0000001a;width:350px;transition:width .3s ease,max-width .3s ease;border-radius:5px!important}.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 :not(.collapsed){max-width:350px}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.listhighlight{color:#0af!important;font-weight:700}.item{display:flex;justify-content:space-between;align-items:center;padding:0 14px;border-radius:5px;background:transparent!important;transition:all .2s ease;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{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item .item-area{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item mat-icon{cursor:pointer;color:#bdc1c3cc;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:#d3d3d3}.highlight-active{color:#6ccb78!important;transition:all .2s ease}.drag-handle-active-objects .active-object-icon{cursor:default!important;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;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;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.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}.active-objects-container input[type=range]{width:95%;height:4px;margin:8px auto;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}.active-objects-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}.active-objects-container input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}.active-objects-container input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}.active-objects-container input[type=range]::-moz-range-thumb:hover{background:#6ccb78}.header-icons{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:5px 10px!important}.header-icons .header-left-controls,.header-icons .header-right-controls{display:flex;align-items:center;gap:8px}.header-icons .header-right-controls button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 12px;height:26px;min-width:56px;max-width:150px;background:linear-gradient(135deg,#6ccb781f,#6ccb780f);border:1px solid rgba(108,203,120,.55);border-radius:5px;color:#6ccb78;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;outline:none;box-shadow:0 0 #6ccb7800,inset 0 1px #ffffff0f;transition:background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,transform .12s ease}.header-icons .header-right-controls button mat-icon{font-size:14px;width:14px;height:14px;flex-shrink:0;transition:transform .3s ease;margin:0}.header-icons .header-right-controls button:hover{background:linear-gradient(135deg,#6ccb7838,#6ccb781a);border-color:#6ccb78e6;color:#88d994}.header-icons .header-right-controls button:hover mat-icon{transform:scale(1.15)}.header-icons .header-right-controls button:active{background:#6ccb782e;border-color:#6ccb78;color:#fff;box-shadow:0 0 6px #6ccb7833,inset 0 2px 4px #0000004d;transform:translateY(0)}.header-icons .header-right-controls button:focus-visible{outline:2px solid rgba(108,203,120,.6);outline-offset:2px}.header-icons .header-right-controls .end-session-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:5px;color:#6ccb78;cursor:pointer;transition:color .2s ease,background .2s ease,box-shadow .2s ease,transform .12s ease}.header-icons .header-right-controls .end-session-icon:hover{color:#88d994;background:#6ccb781f;box-shadow:0 0 10px #6ccb7833;transform:scale(1.1)}.header-icons .header-right-controls .end-session-icon:active{color:#fff;background:#6ccb7833;transform:scale(.95)}.header-icons .zoom-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .zoom-icon:hover{color:#6ccb78}.header-icons .zoom-icon.zoom-active{color:#6ccb78!important}.header-icons .reset-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .reset-icon:hover{color:#6ccb78}.header-icons .warning-icon{color:#6ccb78;font-size:18px;cursor:help}.header-icons .end-session-icon{cursor:pointer;color:#6ccb78;font-size:18px;transition:all .2s ease}.header-icons .end-session-icon:hover{color:#45a049}.active-objects-content{display:block;width:100%;max-height:278px;overflow:auto;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.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:#6ccb78}.active-objects-content .zoom-icon.zoom-active{color:#6ccb78!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 .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{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$3.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$3.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.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: i3.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 global-wrapper-container\" cdkDrag cdkDragBoundary=\".map-container\"\n    [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"onDragEnded($event)\" [class.collapsed]=\"collapsed\">\n    <div class=\"drag-handle-active-objects\" cdkDragHandle>\n        <mat-icon class=\"active-object-icon\" (click)=\"zoomToAll()\" matTooltip=\"Aktive objekter\"\n            [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" 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 type=\"range\" min=\"0\" max=\"1\" step=\"0.05\" [(ngModel)]=\"opacity\" (input)=\"updateOpacity()\"\n            (mousedown)=\"stopDrag($event)\" (touchstart)=\"stopDrag($event)\" (pointerdown)=\"stopDrag($event)\">\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 class=\"zoom-icon\" [class.zoom-active]=\"isZoomedToAll\" (click)=\"zoomToAll()\"\n                        matTooltip=\"Zoom til alle\" matTooltipPosition=\"above\">\n                        fit_screen\n                    </mat-icon>\n                    <mat-icon class=\"reset-icon\" (click)=\"reset()\" matTooltip=\"Nulstilles\" matTooltipPosition=\"above\">\n                        replay\n                    </mat-icon>\n                </div>\n\n                <div class=\"header-right-controls\">\n                    @if(!centerPointOk) {\n                    <mat-icon class=\"warning-icon\" matTooltip=\"Der er ikke noget centerpunkt og det skal der v\u00E6re\"\n                       [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n                        warning\n                    </mat-icon>\n                    } @else if (allFeaturesOk) {                        \n                        @if (endSessionButtonLabel) {\n                            <button (click)=\"endSession()\" matTooltip=\"Afslut\" [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n                                {{endSessionButtonLabel}}\n                            </button>\n                            } @else {\n                            <mat-icon class=\"end-session-icon\" (click)=\"endSession()\" matTooltip=\"Afslut\"\n                              [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n                                done_all\n                            </mat-icon>\n                        }\n                    }\n                </div>\n            </div>\n            <div class=\"item-list\">\n                @for(item of activeFeatures; track item.id) {\n                <div class=\"item\" [class.listhighlight]=\"listHighlightedIds.has(item.id)\" [attr.data-id]=\"item.id\">\n                    <div class=\"item-text\">\n                        <span class=\"item-id\">{{item.display}} {{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)\" matTooltip=\"Slet\" [matTooltipShowDelay]=\"500\"\n                        [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n                        delete\n                    </mat-icon>\n                    }\n                    <mat-icon (click)=\"highlight(item.id)\" matTooltip=\"T\u00E6nd\" [matTooltipShowDelay]=\"500\"\n                        [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\"\n                        [class.highlight-active]=\"highlightedId === item.id\">\n                        power_settings_new\n                    </mat-icon>\n                </div>\n                }\n            </div>\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;width:350px;transition:width .3s ease,max-width .3s ease;border-radius:5px!important}.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 :not(.collapsed){max-width:350px}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.listhighlight{color:#0af!important;font-weight:700}.item{display:flex;justify-content:space-between;align-items:center;padding:0 14px;border-radius:5px;background:transparent!important;transition:all .2s ease;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{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item .item-area{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item mat-icon{cursor:pointer;color:#bdc1c3cc;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:#d3d3d3}.highlight-active{color:#6ccb78!important;transition:all .2s ease}.drag-handle-active-objects .active-object-icon{cursor:default!important;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;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;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.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}.active-objects-container input[type=range]{width:95%;height:4px;margin:8px auto;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}.active-objects-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}.active-objects-container input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}.active-objects-container input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}.active-objects-container input[type=range]::-moz-range-thumb:hover{background:#6ccb78}.header-icons{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:5px 10px!important}.header-icons .header-left-controls,.header-icons .header-right-controls{display:flex;align-items:center;gap:8px}.header-icons .header-right-controls button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 12px;height:26px;min-width:56px;max-width:150px;background:linear-gradient(135deg,#6ccb781f,#6ccb780f);border:1px solid rgba(108,203,120,.55);border-radius:5px;color:#6ccb78;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;outline:none;box-shadow:0 0 #6ccb7800,inset 0 1px #ffffff0f;transition:background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,transform .12s ease}.header-icons .header-right-controls button mat-icon{font-size:14px;width:14px;height:14px;flex-shrink:0;transition:transform .3s ease;margin:0}.header-icons .header-right-controls button:hover{background:linear-gradient(135deg,#6ccb7838,#6ccb781a);border-color:#6ccb78e6;color:#88d994}.header-icons .header-right-controls button:hover mat-icon{transform:scale(1.15)}.header-icons .header-right-controls button:active{background:#6ccb782e;border-color:#6ccb78;color:#fff;box-shadow:0 0 6px #6ccb7833,inset 0 2px 4px #0000004d;transform:translateY(0)}.header-icons .header-right-controls button:focus-visible{outline:2px solid rgba(108,203,120,.6);outline-offset:2px}.header-icons .header-right-controls .end-session-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:5px;color:#6ccb78;cursor:pointer;transition:color .2s ease,background .2s ease,box-shadow .2s ease,transform .12s ease}.header-icons .header-right-controls .end-session-icon:hover{color:#88d994;background:#6ccb781f;box-shadow:0 0 10px #6ccb7833;transform:scale(1.1)}.header-icons .header-right-controls .end-session-icon:active{color:#fff;background:#6ccb7833;transform:scale(.95)}.header-icons .zoom-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .zoom-icon:hover{color:#6ccb78}.header-icons .zoom-icon.zoom-active{color:#6ccb78!important}.header-icons .reset-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .reset-icon:hover{color:#6ccb78}.header-icons .warning-icon{color:#6ccb78;font-size:18px;cursor:help}.header-icons .end-session-icon{cursor:pointer;color:#6ccb78;font-size:18px;transition:all .2s ease}.header-icons .end-session-icon:hover{color:#45a049}.active-objects-content{display:block;width:100%;max-height:278px;overflow:auto;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.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:#6ccb78}.active-objects-content .zoom-icon.zoom-active{color:#6ccb78!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 .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{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 global-wrapper-container\" cdkDrag cdkDragBoundary=\".map-container\"\n    [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"onDragEnded($event)\" [class.collapsed]=\"collapsed\">\n    <div class=\"drag-handle-active-objects\" cdkDragHandle>\n        <mat-icon class=\"active-object-icon\" (click)=\"zoomToAll()\" matTooltip=\"Aktive objekter\"\n            [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" 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 type=\"range\" min=\"0\" max=\"1\" step=\"0.05\" [(ngModel)]=\"opacity\" (input)=\"updateOpacity()\"\n            (mousedown)=\"stopDrag($event)\" (touchstart)=\"stopDrag($event)\" (pointerdown)=\"stopDrag($event)\">\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 class=\"zoom-icon\" [class.zoom-active]=\"isZoomedToAll\" (click)=\"zoomToAll()\"\n                        matTooltip=\"Zoom til alle\" matTooltipPosition=\"above\">\n                        fit_screen\n                    </mat-icon>\n                    <mat-icon class=\"reset-icon\" (click)=\"reset()\" matTooltip=\"Nulstilles\" matTooltipPosition=\"above\">\n                        replay\n                    </mat-icon>\n                </div>\n\n                <div class=\"header-right-controls\">\n                    @if(!centerPointOk) {\n                    <mat-icon class=\"warning-icon\" matTooltip=\"Der er ikke noget centerpunkt og det skal der v\u00E6re\"\n                       [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n                        warning\n                    </mat-icon>\n                    } @else if (allFeaturesOk) {                        \n                        @if (endSessionButtonLabel) {\n                            <button (click)=\"endSession()\" matTooltip=\"Afslut\" [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n                                {{endSessionButtonLabel}}\n                            </button>\n                            } @else {\n                            <mat-icon class=\"end-session-icon\" (click)=\"endSession()\" matTooltip=\"Afslut\"\n                              [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n                                done_all\n                            </mat-icon>\n                        }\n                    }\n                </div>\n            </div>\n            <div class=\"item-list\">\n                @for(item of activeFeatures; track item.id) {\n                <div class=\"item\" [class.listhighlight]=\"listHighlightedIds.has(item.id)\" [attr.data-id]=\"item.id\">\n                    <div class=\"item-text\">\n                        <span class=\"item-id\">{{item.display}} {{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)\" matTooltip=\"Slet\" [matTooltipShowDelay]=\"500\"\n                        [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n                        delete\n                    </mat-icon>\n                    }\n                    <mat-icon (click)=\"highlight(item.id)\" matTooltip=\"T\u00E6nd\" [matTooltipShowDelay]=\"500\"\n                        [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\"\n                        [class.highlight-active]=\"highlightedId === item.id\">\n                        power_settings_new\n                    </mat-icon>\n                </div>\n                }\n            </div>\n\n        </div>\n        }\n    </div>\n</div>", styles: [".active-objects-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:2;box-shadow:0 2px 10px #0000001a;width:350px;transition:width .3s ease,max-width .3s ease;border-radius:5px!important}.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 :not(.collapsed){max-width:350px}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.listhighlight{color:#0af!important;font-weight:700}.item{display:flex;justify-content:space-between;align-items:center;padding:0 14px;border-radius:5px;background:transparent!important;transition:all .2s ease;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{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item .item-area{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item mat-icon{cursor:pointer;color:#bdc1c3cc;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:#d3d3d3}.highlight-active{color:#6ccb78!important;transition:all .2s ease}.drag-handle-active-objects .active-object-icon{cursor:default!important;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;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;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.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}.active-objects-container input[type=range]{width:95%;height:4px;margin:8px auto;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}.active-objects-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}.active-objects-container input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}.active-objects-container input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}.active-objects-container input[type=range]::-moz-range-thumb:hover{background:#6ccb78}.header-icons{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:5px 10px!important}.header-icons .header-left-controls,.header-icons .header-right-controls{display:flex;align-items:center;gap:8px}.header-icons .header-right-controls button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 12px;height:26px;min-width:56px;max-width:150px;background:linear-gradient(135deg,#6ccb781f,#6ccb780f);border:1px solid rgba(108,203,120,.55);border-radius:5px;color:#6ccb78;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;outline:none;box-shadow:0 0 #6ccb7800,inset 0 1px #ffffff0f;transition:background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,transform .12s ease}.header-icons .header-right-controls button mat-icon{font-size:14px;width:14px;height:14px;flex-shrink:0;transition:transform .3s ease;margin:0}.header-icons .header-right-controls button:hover{background:linear-gradient(135deg,#6ccb7838,#6ccb781a);border-color:#6ccb78e6;color:#88d994}.header-icons .header-right-controls button:hover mat-icon{transform:scale(1.15)}.header-icons .header-right-controls button:active{background:#6ccb782e;border-color:#6ccb78;color:#fff;box-shadow:0 0 6px #6ccb7833,inset 0 2px 4px #0000004d;transform:translateY(0)}.header-icons .header-right-controls button:focus-visible{outline:2px solid rgba(108,203,120,.6);outline-offset:2px}.header-icons .header-right-controls .end-session-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:5px;color:#6ccb78;cursor:pointer;transition:color .2s ease,background .2s ease,box-shadow .2s ease,transform .12s ease}.header-icons .header-right-controls .end-session-icon:hover{color:#88d994;background:#6ccb781f;box-shadow:0 0 10px #6ccb7833;transform:scale(1.1)}.header-icons .header-right-controls .end-session-icon:active{color:#fff;background:#6ccb7833;transform:scale(.95)}.header-icons .zoom-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .zoom-icon:hover{color:#6ccb78}.header-icons .zoom-icon.zoom-active{color:#6ccb78!important}.header-icons .reset-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .reset-icon:hover{color:#6ccb78}.header-icons .warning-icon{color:#6ccb78;font-size:18px;cursor:help}.header-icons .end-session-icon{cursor:pointer;color:#6ccb78;font-size:18px;transition:all .2s ease}.header-icons .end-session-icon:hover{color:#45a049}.active-objects-content{display:block;width:100%;max-height:278px;overflow:auto;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.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:#6ccb78}.active-objects-content .zoom-icon.zoom-active{color:#6ccb78!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 .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{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 }]
@@ -4531,7 +4672,6 @@ class MapSearchComponent {
         this._layerHelperService.activeLayersChanged
             .subscribe(() => this._addWFSSearchLayers());
         this.filterResults();
-        this._loadPosition();
         this._addWFSSearch();
         this._searchSubject.pipe(debounceTime(200), distinctUntilChanged(), switchMap(value => this._searchService.search(value, undefined))).subscribe({
             next: result => {
@@ -4542,7 +4682,7 @@ class MapSearchComponent {
     ngOnChanges(changes) {
         if (changes['profile'] && this.profile) {
             this.collapsed = this.profile.searchFolded;
-            this._loadPosition();
+            this._loadPosition(this.collapsed);
             this._addWFSSearchLayers();
         }
     }
@@ -4593,8 +4733,9 @@ class MapSearchComponent {
             this.searchAddress = '';
             this.filterResults();
         }
-        if (this.profile.searchInitialPosition?.includes('højre')) {
-            this._layoutService.bringElementIntoViewIfNeeded('.search-container', -3, this.collapsed);
+        if (!this.collapsed) {
+            //Expanding, make sure it stays in viewport
+            this.dragPosition = this._layoutService.keepWidgetInViewPort(this.dragPosition, this.POSITION_STORAGE_KEY, WidgetConstants.searchHeight, WidgetConstants.searchWidth);
         }
     }
     highlight(wkt, event) {
@@ -4627,23 +4768,37 @@ class MapSearchComponent {
             console.error('Error saving position to localStorage:', error);
         }
     }
-    _loadPosition() {
+    _loadPosition(collapsed) {
         try {
+            // Default height and width when collapsed
+            let widgetHeight = WidgetConstants.collapsedHeight;
+            let widgetWidth = WidgetConstants.collapsedWidth;
+            if (!collapsed) {
+                // Custom height and width when expanded
+                widgetHeight = WidgetConstants.searchHeight;
+                widgetWidth = WidgetConstants.searchWidth;
+            }
+            const widgetPositionOptions = {
+                initialPosition: this.profile.searchInitialPosition,
+                widgetName: this.POSITION_STORAGE_KEY,
+                widgetHeight: widgetHeight,
+                widgetWidth: widgetWidth
+            };
             const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
             if (this._profileService.getProfileVersionChanged() &&
                 this.profile?.searchInitialPosition) {
                 //Profile version changed in backend, use that
-                this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.searchInitialPosition);
+                this.dragPosition = this._layoutService.calculateWidgetPosition(widgetPositionOptions);
             }
             else if (savedPosition) {
                 this.dragPosition = JSON.parse(savedPosition);
             }
             else if (this.profile && this.profile.searchInitialPosition) {
-                this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.searchInitialPosition);
+                this.dragPosition = this._layoutService.calculateWidgetPosition(widgetPositionOptions);
             }
             else {
                 // Default position for search
-                this.dragPosition = { x: 29, y: -125 };
+                this.dragPosition = { x: WidgetConstants.searchDefaultX, y: WidgetConstants.searchDefaultY };
                 this._savePosition(this.dragPosition);
             }
         }
@@ -4653,7 +4808,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 global-wrapper-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    <label class=\"search-label\">S\u00F8g</label>\n    <mat-form-field appearance=\"outline\" class=\"search-field\">\n      <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\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        <ng-container *ngFor=\"let result of filteredResults\" >\n          <mat-option disabled class=\"result-title\">\n            {{ result.title }} ({{result.items.length}}\n            <span *ngIf=\"result.total\"> af {{result.total }}</span>)\n          </mat-option>\n          <mat-option *ngFor=\"let item of result.items\" [value]=\"item\" class=\"custom-option\"\n            (mouseenter)=\"highlight(item.wkt, $event)\">\n            <div class=\"item-container\">\n              <span class=\"item-header\">{{item.header}}</span>\n            </div>\n          </mat-option>\n        </ng-container>\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;border-radius:5px;transition:width .3s ease,max-width .3s ease}.search-container.collapsed .drag-handle{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 .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.search-content{display:flex;flex-direction:column;transition:all .3s ease;box-sizing:border-box;border-radius:0 0 5px 5px;padding:8px 12px 4px;gap:4px}.search-label{color:#fff}.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;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:350px;flex:1}.search-field .search-icon{color:#fff}.search-field ::ng-deep .mat-mdc-form-field-label{color:#fff!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{color:#fff!important}::ng-deep .mat-mdc-autocomplete-panel{border-radius:5px!important;background:#4c4d51!important;box-shadow:0 8px 24px #00000026!important;overflow-y:auto!important;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}::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;overflow-x:hidden}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover{background-color:#ffffff1a!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:#ffffff1a!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;width:100%;opacity:1!important}.search-result-option{display:flex;flex-direction:column;gap:8px}.result-title{font-weight:600;color:#bdc1c3cc!important}.item-container{display:flex;align-items:center;justify-content:space-between;width:100%}.item-container .item-header{color:#fff!important;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.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}::ng-deep .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{color:#fff!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}}@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}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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.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.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.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: i3.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: "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 global-wrapper-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    <label class=\"search-label\">S\u00F8g</label>\n    <mat-form-field appearance=\"outline\" class=\"search-field\">\n      <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\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        <ng-container *ngFor=\"let result of filteredResults\" >\n          <mat-option disabled class=\"result-title\">\n            {{ result.title }} ({{result.items.length}}\n            <span *ngIf=\"result.total\"> af {{result.total }}</span>)\n          </mat-option>\n          <mat-option *ngFor=\"let item of result.items\" [value]=\"item\" class=\"custom-option\"\n            (mouseenter)=\"highlight(item.wkt, $event)\">\n            <div class=\"item-container\">\n              <span class=\"item-header\">{{item.header}}</span>\n            </div>\n          </mat-option>\n        </ng-container>\n      </mat-autocomplete>\n    </mat-form-field>\n  </div>\n</div>", styles: [".search-container{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:2;max-width:550px;min-width:48px;border-radius:5px;transition:width .3s ease,max-width .3s ease}.search-container.collapsed .drag-handle{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 .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.search-content{display:flex;flex-direction:column;transition:all .3s ease;box-sizing:border-box;border-radius:0 0 5px 5px;padding:8px 12px 4px;gap:4px}.search-label{color:#fff}.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;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:350px;flex:1}.search-field .search-icon{color:#fff}.search-field ::ng-deep .mat-mdc-form-field-label{color:#fff!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{color:#fff!important}::ng-deep .mat-mdc-autocomplete-panel{border-radius:5px!important;background:#4c4d51!important;box-shadow:0 8px 24px #00000026!important;overflow-y:auto!important;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}::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;overflow-x:hidden}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover{background-color:#ffffff1a!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:#ffffff1a!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;width:100%;opacity:1!important}.search-result-option{display:flex;flex-direction:column;gap:8px}.result-title{font-weight:600;color:#bdc1c3cc!important}.item-container{display:flex;align-items:center;justify-content:space-between;width:100%}.item-container .item-header{color:#fff!important;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.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}::ng-deep .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{color:#fff!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}}@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}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { 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.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.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.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: i3.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,
@@ -4667,7 +4822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         MatIconModule,
                         DragDropModule,
                         MatTooltipModule
-                    ], template: "<div class=\"search-container global-wrapper-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    <label class=\"search-label\">S\u00F8g</label>\n    <mat-form-field appearance=\"outline\" class=\"search-field\">\n      <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\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        <ng-container *ngFor=\"let result of filteredResults\" >\n          <mat-option disabled class=\"result-title\">\n            {{ result.title }} ({{result.items.length}}\n            <span *ngIf=\"result.total\"> af {{result.total }}</span>)\n          </mat-option>\n          <mat-option *ngFor=\"let item of result.items\" [value]=\"item\" class=\"custom-option\"\n            (mouseenter)=\"highlight(item.wkt, $event)\">\n            <div class=\"item-container\">\n              <span class=\"item-header\">{{item.header}}</span>\n            </div>\n          </mat-option>\n        </ng-container>\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;border-radius:5px;transition:width .3s ease,max-width .3s ease}.search-container.collapsed .drag-handle{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 .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.search-content{display:flex;flex-direction:column;transition:all .3s ease;box-sizing:border-box;border-radius:0 0 5px 5px;padding:8px 12px 4px;gap:4px}.search-label{color:#fff}.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;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:350px;flex:1}.search-field .search-icon{color:#fff}.search-field ::ng-deep .mat-mdc-form-field-label{color:#fff!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{color:#fff!important}::ng-deep .mat-mdc-autocomplete-panel{border-radius:5px!important;background:#4c4d51!important;box-shadow:0 8px 24px #00000026!important;overflow-y:auto!important;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}::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;overflow-x:hidden}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover{background-color:#ffffff1a!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:#ffffff1a!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;width:100%;opacity:1!important}.search-result-option{display:flex;flex-direction:column;gap:8px}.result-title{font-weight:600;color:#bdc1c3cc!important}.item-container{display:flex;align-items:center;justify-content:space-between;width:100%}.item-container .item-header{color:#fff!important;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.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}::ng-deep .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{color:#fff!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}}@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}}\n"] }]
+                    ], template: "<div class=\"search-container global-wrapper-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    <label class=\"search-label\">S\u00F8g</label>\n    <mat-form-field appearance=\"outline\" class=\"search-field\">\n      <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\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        <ng-container *ngFor=\"let result of filteredResults\" >\n          <mat-option disabled class=\"result-title\">\n            {{ result.title }} ({{result.items.length}}\n            <span *ngIf=\"result.total\"> af {{result.total }}</span>)\n          </mat-option>\n          <mat-option *ngFor=\"let item of result.items\" [value]=\"item\" class=\"custom-option\"\n            (mouseenter)=\"highlight(item.wkt, $event)\">\n            <div class=\"item-container\">\n              <span class=\"item-header\">{{item.header}}</span>\n            </div>\n          </mat-option>\n        </ng-container>\n      </mat-autocomplete>\n    </mat-form-field>\n  </div>\n</div>", styles: [".search-container{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:2;max-width:550px;min-width:48px;border-radius:5px;transition:width .3s ease,max-width .3s ease}.search-container.collapsed .drag-handle{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 .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.search-content{display:flex;flex-direction:column;transition:all .3s ease;box-sizing:border-box;border-radius:0 0 5px 5px;padding:8px 12px 4px;gap:4px}.search-label{color:#fff}.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;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:350px;flex:1}.search-field .search-icon{color:#fff}.search-field ::ng-deep .mat-mdc-form-field-label{color:#fff!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{color:#fff!important}::ng-deep .mat-mdc-autocomplete-panel{border-radius:5px!important;background:#4c4d51!important;box-shadow:0 8px 24px #00000026!important;overflow-y:auto!important;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}::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;overflow-x:hidden}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover{background-color:#ffffff1a!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:#ffffff1a!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;width:100%;opacity:1!important}.search-result-option{display:flex;flex-direction:column;gap:8px}.result-title{font-weight:600;color:#bdc1c3cc!important}.item-container{display:flex;align-items:center;justify-content:space-between;width:100%}.item-container .item-header{color:#fff!important;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.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}::ng-deep .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{color:#fff!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}}@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}}\n"] }]
         }], propDecorators: { profile: [{
                 type: Input
             }] } });
@@ -4706,13 +4861,12 @@ class LegendsListComponent {
     _mapFilteredLayerGroupsKeyName = 'mapFilteredLayerGroups';
     POSITION_STORAGE_KEY = 'legendsListPosition';
     ngOnInit() {
-        this._loadPosition();
         this._layerHelperService.activeLayersChanged.subscribe(() => this._setFilteredLegends().subscribe(result => this.filteredLayersDetailed = result));
     }
     ngOnChanges(changes) {
         if (changes['profile'] && this.profile) {
             this.collapsed = this.profile.legendsListFolded;
-            this._loadPosition();
+            this._loadPosition(this.collapsed);
             this._setFilteredLegends().subscribe(result => this.filteredLayersDetailed = result);
         }
     }
@@ -4723,8 +4877,9 @@ class LegendsListComponent {
     }
     toggleLegendsList() {
         this.collapsed = !this.collapsed;
-        if (this.profile.legendsListInitialPosition.includes('højre')) {
-            this._layoutService.bringElementIntoViewIfNeeded('.legends-list-body-wrapper', -8, this.collapsed);
+        if (!this.collapsed) {
+            //Expanding, make sure it stays in viewport
+            this.dragPosition = this._layoutService.keepWidgetInViewPort(this.dragPosition, this.POSITION_STORAGE_KEY, WidgetConstants.legendsHeight, WidgetConstants.legendsWidth);
         }
     }
     onDragEnded(event) {
@@ -4743,23 +4898,37 @@ class LegendsListComponent {
             console.error('Error saving legends list position to localStorage:', error);
         }
     }
-    _loadPosition() {
+    _loadPosition(collapsed) {
         try {
+            // Default height and width when collapsed
+            let widgetHeight = WidgetConstants.collapsedHeight;
+            let widgetWidth = WidgetConstants.collapsedWidth;
+            if (!collapsed) {
+                // Custom height and width when expanded
+                widgetHeight = WidgetConstants.legendsHeight;
+                widgetWidth = WidgetConstants.legendsWidth;
+            }
+            const widgetPositionOptions = {
+                initialPosition: this.profile.legendsListInitialPosition,
+                widgetName: this.POSITION_STORAGE_KEY,
+                widgetHeight: widgetHeight,
+                widgetWidth: widgetWidth
+            };
             const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
             if (this._profileService.getProfileVersionChanged() &&
                 this.profile?.legendsListInitialPosition) {
                 //Profile version changed in backend, use that
-                this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.legendsListInitialPosition);
+                this.dragPosition = this._layoutService.calculateWidgetPosition(widgetPositionOptions);
             }
             else if (savedPosition) {
                 this.dragPosition = JSON.parse(savedPosition);
             }
             else if (this.profile?.legendsListInitialPosition) {
-                this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.legendsListInitialPosition);
+                this.dragPosition = this._layoutService.calculateWidgetPosition(widgetPositionOptions);
             }
             else {
                 // Default position for legends list
-                this.dragPosition = { x: 1753, y: 531 };
+                this.dragPosition = { x: WidgetConstants.legendsDefaultX, y: WidgetConstants.legendsDefaultY };
                 this._savePosition(this.dragPosition);
             }
         }
@@ -4817,12 +4986,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 global-wrapper-container\" \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=\"Signaturforklaring\" \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;transition:width .3s ease,max-width .3s ease;border-radius:5px}.legends-list-body-wrapper.collapsed .drag-handle-legends{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 .legend-icon{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;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;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}@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%;background:transparent}::ng-deep .legends-list-body .item-list mat-expansion-panel.mat-expansion-panel{background:transparent}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-body{padding:12px 16px;background:#0003}::ng-deep .legends-list-body .item-list .legend{overflow:hidden}::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;border-radius:5px}@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}::ng-deep .mat-expansion-indicator:after{color:#bdc1c3cc!important}::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-indicator:after{color:#fff!important}@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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.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: i3.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"] }] });
+    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 global-wrapper-container\" \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=\"Signaturforklaring\" \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;top:0!important;left:0!important;margin:0!important;z-index:1000;box-shadow:0 2px 10px #0000001a;transition:width .3s ease,max-width .3s ease;border-radius:5px}.legends-list-body-wrapper.collapsed .drag-handle-legends{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 .legend-icon{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;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;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}@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%;background:transparent}::ng-deep .legends-list-body .item-list mat-expansion-panel.mat-expansion-panel{background:transparent}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-body{padding:12px 16px;background:#0003}::ng-deep .legends-list-body .item-list .legend{overflow:hidden}::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;border-radius:5px}@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}::ng-deep .mat-expansion-indicator:after{color:#bdc1c3cc!important}::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-indicator:after{color:#fff!important}@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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3.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: i3.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, MatTooltipModule], template: "<div class=\"legends-list-body-wrapper global-wrapper-container\" \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=\"Signaturforklaring\" \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;transition:width .3s ease,max-width .3s ease;border-radius:5px}.legends-list-body-wrapper.collapsed .drag-handle-legends{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 .legend-icon{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;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;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}@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%;background:transparent}::ng-deep .legends-list-body .item-list mat-expansion-panel.mat-expansion-panel{background:transparent}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-body{padding:12px 16px;background:#0003}::ng-deep .legends-list-body .item-list .legend{overflow:hidden}::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;border-radius:5px}@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}::ng-deep .mat-expansion-indicator:after{color:#bdc1c3cc!important}::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-indicator:after{color:#fff!important}@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 global-wrapper-container\" \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=\"Signaturforklaring\" \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;top:0!important;left:0!important;margin:0!important;z-index:1000;box-shadow:0 2px 10px #0000001a;transition:width .3s ease,max-width .3s ease;border-radius:5px}.legends-list-body-wrapper.collapsed .drag-handle-legends{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 .legend-icon{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;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;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}@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%;background:transparent}::ng-deep .legends-list-body .item-list mat-expansion-panel.mat-expansion-panel{background:transparent}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-body{padding:12px 16px;background:#0003}::ng-deep .legends-list-body .item-list .legend{overflow:hidden}::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;border-radius:5px}@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}::ng-deep .mat-expansion-indicator:after{color:#bdc1c3cc!important}::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-indicator:after{color:#fff!important}@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: [{
@@ -5076,6 +5245,7 @@ class GisKomponentComponent {
     _http = inject(HttpClient);
     _layerHelper = inject(LayerHelperService);
     _layerErrorService = inject(LayerErrorService);
+    _layoutService = inject(LayoutService);
     _featureLoader = inject(FeatureLoaderService);
     _drawLayerService = inject(DrawLayerSourceService);
     _showHoverInfoService = inject(ShowInfoHoverService);
@@ -5157,6 +5327,7 @@ class GisKomponentComponent {
                             this._featureLoader.loadFeaturesSettings(this.settings);
                         }
                         this._currentItems.map = this.map;
+                        this._layoutService.map = this.map;
                         this._layerHelper.applyCachedLayersToDisplayInMap(this.map, profile.id);
                     }
                 });