@regionerne/gis-komponent 0.0.71 → 0.0.73

package/fesm2022/regionerne-gis-komponent.mjs

@@ -452,7 +452,7 @@ class LayoutService {
     set map(value) {
         this._map = value;
     }
-    keepWidgetInViewPort(dragPosition, widgetName, widgetHeight, widgetWidth, resizedContainerHeight = null, resizedContainerWidth = null) {
+    async keepWidgetInViewPort(dragPosition, widgetName, widgetHeight, widgetWidth, resizedContainerHeight = null, resizedContainerWidth = null) {
         //Expanding or changing map size, make sure the widget stays in viewport
         const widgetPositionOptions = {
             initialPosition: '',
@@ -465,13 +465,14 @@ class LayoutService {
         };
         return this.calculateWidgetPosition(widgetPositionOptions);
     }
-    calculateWidgetPosition({ initialPosition, widgetName, widgetWidth, widgetHeight, offsetX = 2, offsetY = 9, currentPosition = null, resizedContainerHeight = null, resizedContainerWidth = null }) {
+    async 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();
+        console.log('calculateWidgetPosition', initialPosition, widgetName);
+        const containerRect = await this._getMapRect();
         if (currentPosition) {
             // Expanding a widget or viewport changed size, so fit the widget inside view again
             x = currentPosition.x;
@@ -555,8 +556,28 @@ class LayoutService {
         y = Math.max(offsetY, Math.min(y, containerRect.height - widgetHeight));
         dragPosition = { x: x, y: y };
         this._savePosition(widgetName, dragPosition);
+        console.log('end result', dragPosition);
         return { x, y };
     }
+    async _getMapRect() {
+        const element = this._map?.getViewport();
+        if (!element)
+            return new Promise(resolve => { });
+        return new Promise(resolve => {
+            const check = () => {
+                const rect = element.getBoundingClientRect();
+                if (rect.width > 0 && rect.height > 0) {
+                    console.log('_getMapRect map rendered');
+                    resolve(rect);
+                }
+                else {
+                    console.log('_getMapRect map not rendered yet');
+                    requestAnimationFrame(check);
+                }
+            };
+            check();
+        });
+    }
     _savePosition(widgetStorageKey, position) {
         try {
             localStorage.setItem(widgetStorageKey, JSON.stringify(position));
@@ -1106,7 +1127,7 @@ class LayerSelectorComponent {
         layerGroup.expanded = layerGroup.layers.some(l => l.visible);
         this._cacheProfileInfo();
     }
-    toggleLayerSelector() {
+    async toggleLayerSelector() {
         this.collapsed = !this.collapsed;
         if (this.collapsed) {
             this.searchText = '';
@@ -1114,7 +1135,7 @@ class LayerSelectorComponent {
         }
         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);
+            this.layerSelectorDragPosition = await this._layoutService.keepWidgetInViewPort(this.layerSelectorDragPosition, this.POSITION_STORAGE_KEY, WidgetConstants.layerSelectorHeight, WidgetConstants.layerSelectorWidth);
         }
     }
     updateOpacity(layerId, opacity) {
@@ -1212,7 +1233,7 @@ class LayerSelectorComponent {
             console.error('Error saving position to localStorage:', error);
         }
     }
-    _loadPosition(collapsed) {
+    async _loadPosition(collapsed) {
         try {
             // Default height and width when collapsed
             let widgetHeight = WidgetConstants.collapsedHeight;
@@ -1232,13 +1253,13 @@ class LayerSelectorComponent {
             if (this._profileService.getProfileVersionChanged() &&
                 this.profile?.layerSelectorInitialPosition) {
                 //Profile version changed in backend, use that
-                this.layerSelectorDragPosition = this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+                this.layerSelectorDragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
             }
             else if (savedPosition) {
                 this.layerSelectorDragPosition = JSON.parse(savedPosition);
             }
             else if (this.profile?.layerSelectorInitialPosition) {
-                this.layerSelectorDragPosition = this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+                this.layerSelectorDragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
             }
             else {
                 // Default position for layer selector
@@ -1273,12 +1294,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 matTooltip=\"Nulstil\"  \n                [matTooltipShowDelay]=\"200\"\n                [matTooltipHideDelay]=\"300\" (click)=\"clearSearchText()\">\n                replay</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>\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                ({{ 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>\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 *cdkDragPreview><span class=\"panel-title\">{{ layer.name }} </span></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 *cdkDragPreview><span class=\"panel-title\">{{ group.name }} </span></div>\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>\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 *cdkDragPreview><span class=\"panel-title\">{{ layer.title }} </span></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>\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>\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 *cdkDragPreview><span class=\"panel-title\">{{ layer.name }} </span></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 *cdkDragPreview><span class=\"panel-title\">{{ group.name }} </span></div>\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)}.cdk-drop-list-dragging .cdk-drag{transform:translateZ(0)!important}.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: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { 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 matTooltip=\"Nulstil\"  \n                [matTooltipShowDelay]=\"200\"\n                [matTooltipHideDelay]=\"300\" (click)=\"clearSearchText()\">\n                replay</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>\n          <mat-expansion-panel [(expanded)]=\"group.expanded\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n                <span class=\"panel-title\">{{ group.name }}</span>\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>\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 *cdkDragPreview><span class=\"panel-title\">{{ layer.name }} </span></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 *cdkDragPreview><span class=\"panel-title\">{{ group.name }} </span></div>\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>\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 *cdkDragPreview><span class=\"panel-title\">{{ layer.title }} </span></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>\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                  ({{ 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>\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 *cdkDragPreview><span class=\"panel-title\">{{ layer.name }} </span></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 *cdkDragPreview><span class=\"panel-title\">{{ group.name }} </span></div>\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)}.cdk-drop-list-dragging .cdk-drag{transform:translateZ(0)!important}.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: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { 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 matTooltip=\"Nulstil\"  \n                [matTooltipShowDelay]=\"200\"\n                [matTooltipHideDelay]=\"300\" (click)=\"clearSearchText()\">\n                replay</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>\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                ({{ 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>\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 *cdkDragPreview><span class=\"panel-title\">{{ layer.name }} </span></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 *cdkDragPreview><span class=\"panel-title\">{{ group.name }} </span></div>\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>\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 *cdkDragPreview><span class=\"panel-title\">{{ layer.title }} </span></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>\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>\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 *cdkDragPreview><span class=\"panel-title\">{{ layer.name }} </span></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 *cdkDragPreview><span class=\"panel-title\">{{ group.name }} </span></div>\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)}.cdk-drop-list-dragging .cdk-drag{transform:translateZ(0)!important}.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 matTooltip=\"Nulstil\"  \n                [matTooltipShowDelay]=\"200\"\n                [matTooltipHideDelay]=\"300\" (click)=\"clearSearchText()\">\n                replay</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>\n          <mat-expansion-panel [(expanded)]=\"group.expanded\">\n            <mat-expansion-panel-header>\n              <mat-panel-title>\n                <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n                <span class=\"panel-title\">{{ group.name }}</span>\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>\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 *cdkDragPreview><span class=\"panel-title\">{{ layer.name }} </span></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 *cdkDragPreview><span class=\"panel-title\">{{ group.name }} </span></div>\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>\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 *cdkDragPreview><span class=\"panel-title\">{{ layer.title }} </span></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>\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                  ({{ 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>\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 *cdkDragPreview><span class=\"panel-title\">{{ layer.name }} </span></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 *cdkDragPreview><span class=\"panel-title\">{{ group.name }} </span></div>\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)}.cdk-drop-list-dragging .cdk-drag{transform:translateZ(0)!important}.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 }]
@@ -2225,6 +2246,7 @@ class OverlapService {
         const cutter = feature(cutterGeo);
         const overlappingFeatures = this._drawLayerService.source.getFeatures().filter(f => f.getGeometry()?.intersectsExtent(cutterFeature.getGeometry().getExtent()));
         overlappingFeatures.forEach(feature$1 => {
+            const style = feature$1.getStyle();
             const geom = feature$1.getGeometry();
             if (!geom)
                 return;
@@ -2244,29 +2266,36 @@ class OverlapService {
             // Inside part(s)
             const inter = intersect(fc);
             // Add outside part(s)
-            if (diff)
-                result = result.concat(this._addTurfToResult(diff));
+            if (diff && area(diff.geometry) > this.EPSILON)
+                result = result.concat(this._addTurfToResult(diff, style));
             // Add inside part(s)
-            if (!remove && inter)
-                result = result.concat(this._addTurfToResult(inter));
+            if (!remove && inter && area(inter.geometry) > this.EPSILON)
+                result = result.concat(this._addTurfToResult(inter, style));
             // Remove the original overlapping feature (it was split into diff + inter)
             if (result.length > 0)
                 this._drawLayerService.source.removeFeature(feature$1);
         });
         return of(result);
     }
-    _addTurfToResult(aTurfFeature) {
+    _addTurfToResult(aTurfFeature, style) {
         const result = [];
         if (aTurfFeature.geometry.type === 'MultiPolygon') {
             aTurfFeature.geometry.coordinates.forEach((coords) => {
-                result.push(new Feature(this._geoJSONToOl({
+                const newFeature = new Feature(this._geoJSONToOl({
                     type: 'Polygon',
-                    coordinates: coords
-                })));
+                    coordinates: coords,
+                    style: style
+                }));
+                if (style)
+                    newFeature.setStyle(style);
+                result.push(newFeature);
             });
         }
         else {
-            result.push(new Feature(this._geoJSONToOl(aTurfFeature.geometry)));
+            const newFeature = new Feature(this._geoJSONToOl(aTurfFeature.geometry));
+            if (style)
+                newFeature.setStyle(style);
+            result.push(newFeature);
         }
         return result;
     }
@@ -3212,7 +3241,6 @@ class ToolboxComponent {
                 features.forEach(feature => {
                     this._featureHelper.setTypeId(feature, this.selectedDrawItem?.typeId || '');
                     this._featureHelper.setId(feature);
-                    feature.setStyle(style);
                     this._drawLayerService.source.addFeature(feature);
                 });
             }
@@ -3248,7 +3276,6 @@ class ToolboxComponent {
                 features.forEach(feature => {
                     this._featureHelper.setTypeId(feature, this.selectedDrawItem?.typeId || '');
                     this._featureHelper.setId(feature);
-                    feature.setStyle(style);
                     this._drawLayerService.source.addFeature(feature);
                 });
             }
@@ -3807,9 +3834,9 @@ class ToolboxComponent {
     ngOnInit() {
         this._originalMapHeight = this.map.getSize()[1];
         this._originalMapWidth = this.map.getSize()[0];
-        this._layoutService.mapResizedSubject.subscribe(mapResized => {
+        this._layoutService.mapResizedSubject.subscribe(async (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.dragPosition = await 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 => {
@@ -3944,7 +3971,7 @@ class ToolboxComponent {
             this._startDraw(item.geomType, item.style, item.typeId);
         }
     }
-    _loadPosition(collapsed) {
+    async _loadPosition(collapsed) {
         try {
             // Default height and width when collapsed
             let widgetHeight = WidgetConstants.collapsedHeight;
@@ -3965,13 +3992,13 @@ class ToolboxComponent {
             if (this._profileService.getProfileVersionChanged() &&
                 this.profile?.toolboxInitialPosition) {
                 //Profile version changed in backend, use that
-                this.dragPosition = this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+                this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
             }
             else if (savedPosition) {
                 this.dragPosition = JSON.parse(savedPosition);
             }
             else if (this.profile?.toolboxInitialPosition) {
-                this.dragPosition = this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+                this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
             }
             else {
                 // Default position for toolbox
@@ -4030,7 +4057,7 @@ class ToolboxComponent {
         });
         this.map.addInteraction(changeTypeSelect);
     }
-    toggleCollapsed(event) {
+    async toggleCollapsed(event) {
         if (event) {
             event.stopPropagation();
         }
@@ -4041,7 +4068,7 @@ class ToolboxComponent {
         }
         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);
+            this.dragPosition = await this._layoutService.keepWidgetInViewPort(this.dragPosition, this._POSITION_STORAGE_KEY, WidgetConstants.toolboxHeight, WidgetConstants.toolboxWidth);
         }
     }
     startMeasureArea() {
@@ -4493,11 +4520,11 @@ class ActiveObjectsComponent {
         this._centerPointService.handleFeatureDeleted(id);
         this._highlight.clear();
     }
-    togglePanel() {
+    async togglePanel() {
         this.collapsed = !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);
+            this.dragPosition = await this._layoutService.keepWidgetInViewPort(this.dragPosition, this.POSITION_STORAGE_KEY, WidgetConstants.activeObjectsHeight, WidgetConstants.activeObjectsWidth);
         }
     }
     onDragEnded(event) {
@@ -4518,7 +4545,7 @@ class ActiveObjectsComponent {
         const wktString = wktFormatter.writeGeometry(feature.getGeometry());
         this._dialogService.open({ primaryText: 'Ok', message: wktString, title: 'WKT for objekt' }).subscribe();
     }
-    _loadPosition(collapsed) {
+    async _loadPosition(collapsed) {
         try {
             // Default height and width when collapsed
             let widgetHeight = WidgetConstants.collapsedHeight;
@@ -4538,13 +4565,13 @@ class ActiveObjectsComponent {
             if (this._profileService.getProfileVersionChanged() &&
                 this.profile?.activeObjectsInitialPosition) {
                 //Profile version changed in backend, use that
-                this.dragPosition = this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+                this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
             }
             else if (savedPosition) {
                 this.dragPosition = JSON.parse(savedPosition);
             }
             else if (this.profile?.activeObjectsInitialPosition) {
-                this.dragPosition = this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+                this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
             }
             else {
                 // Default position for active objects
@@ -4726,7 +4753,7 @@ class MapSearchComponent {
         }
         this._searchSubject.next(this.searchAddress);
     }
-    toggleSearch() {
+    async toggleSearch() {
         this.collapsed = !this.collapsed;
         if (this.collapsed) {
             this.searchAddress = '';
@@ -4734,7 +4761,7 @@ class MapSearchComponent {
         }
         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);
+            this.dragPosition = await this._layoutService.keepWidgetInViewPort(this.dragPosition, this.POSITION_STORAGE_KEY, WidgetConstants.searchHeight, WidgetConstants.searchWidth);
         }
     }
     highlight(wkt, event) {
@@ -4767,7 +4794,7 @@ class MapSearchComponent {
             console.error('Error saving position to localStorage:', error);
         }
     }
-    _loadPosition(collapsed) {
+    async _loadPosition(collapsed) {
         try {
             // Default height and width when collapsed
             let widgetHeight = WidgetConstants.collapsedHeight;
@@ -4787,13 +4814,13 @@ class MapSearchComponent {
             if (this._profileService.getProfileVersionChanged() &&
                 this.profile?.searchInitialPosition) {
                 //Profile version changed in backend, use that
-                this.dragPosition = this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+                this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
             }
             else if (savedPosition) {
                 this.dragPosition = JSON.parse(savedPosition);
             }
             else if (this.profile && this.profile.searchInitialPosition) {
-                this.dragPosition = this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+                this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
             }
             else {
                 // Default position for search
@@ -4863,8 +4890,8 @@ class LegendsListComponent {
         this._layerHelperService.activeLayersChanged.subscribe(() => this._setFilteredLegends().subscribe(result => this.filteredLayersDetailed = result));
     }
     ngOnChanges(changes) {
-        this._layoutService.mapResizedSubject.subscribe(() => {
-            this.dragPosition = this._layoutService.keepWidgetInViewPort(this.dragPosition, this.POSITION_STORAGE_KEY, this.collapsed ? WidgetConstants.collapsedHeight : WidgetConstants.legendsHeight, this.collapsed ? WidgetConstants.collapsedWidth : WidgetConstants.legendsWidth);
+        this._layoutService.mapResizedSubject.subscribe(async () => {
+            this.dragPosition = await this._layoutService.keepWidgetInViewPort(this.dragPosition, this.POSITION_STORAGE_KEY, this.collapsed ? WidgetConstants.collapsedHeight : WidgetConstants.legendsHeight, this.collapsed ? WidgetConstants.collapsedWidth : WidgetConstants.legendsWidth);
         });
         if (changes['profile'] && this.profile) {
             this.collapsed = this.profile.legendsListFolded;
@@ -4877,11 +4904,11 @@ class LegendsListComponent {
             this.map.removeControl(this._legendsListBodyControl);
         }
     }
-    toggleLegendsList() {
+    async toggleLegendsList() {
         this.collapsed = !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);
+            this.dragPosition = await this._layoutService.keepWidgetInViewPort(this.dragPosition, this.POSITION_STORAGE_KEY, WidgetConstants.legendsHeight, WidgetConstants.legendsWidth);
         }
     }
     onDragEnded(event) {
@@ -4900,7 +4927,7 @@ class LegendsListComponent {
             console.error('Error saving legends list position to localStorage:', error);
         }
     }
-    _loadPosition(collapsed) {
+    async _loadPosition(collapsed) {
         try {
             // Default height and width when collapsed
             let widgetHeight = WidgetConstants.collapsedHeight;
@@ -4920,13 +4947,13 @@ class LegendsListComponent {
             if (this._profileService.getProfileVersionChanged() &&
                 this.profile?.legendsListInitialPosition) {
                 //Profile version changed in backend, use that
-                this.dragPosition = this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+                this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
             }
             else if (savedPosition) {
                 this.dragPosition = JSON.parse(savedPosition);
             }
             else if (this.profile?.legendsListInitialPosition) {
-                this.dragPosition = this._layoutService.calculateWidgetPosition(widgetPositionOptions);
+                this.dragPosition = await this._layoutService.calculateWidgetPosition(widgetPositionOptions);
             }
             else {
                 // Default position for legends list