@regionerne/gis-komponent 0.0.33 → 0.0.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/fesm2022/regionerne-gis-komponent.mjs +72 -47
  2. package/fesm2022/regionerne-gis-komponent.mjs.map +1 -1
  3. package/lib/components/active-objects/activeObjects.component.d.ts +1 -0
  4. package/lib/components/gis-komponent/gis-komponent.component.d.ts +3 -2
  5. package/lib/components/layer-selector/layer-selector.component.d.ts +2 -6
  6. package/lib/components/legends-list/legends-list.component.d.ts +1 -0
  7. package/lib/components/map-search/map-search.component.d.ts +1 -0
  8. package/lib/components/toolbox/toolbox.component.d.ts +1 -0
  9. package/lib/services/profile.service.d.ts +3 -0
  10. package/package.json +1 -1
package/fesm2022/regionerne-gis-komponent.mjs CHANGED
@@ -92,10 +92,17 @@ class ProfileService {
92
92
  config = inject(GISKOMPONENT_CONFIG);
93
93
  _baseUrl = this.config.apiBaseUrl;
94
94
  _http = inject(HttpClient);
95
+ _profileVersionChanged = false;
95
96
  getByIdentifier(identifier) {
96
97
  const url = `${this._baseUrl}/api/profile/identifier/${identifier}`;
97
98
  return this._http.get(url);
98
99
  }
100
+ setProfileVersionChanged(value) {
101
+ this._profileVersionChanged = value;
102
+ }
103
+ getProfileVersionChanged() {
104
+ return this._profileVersionChanged;
105
+ }
99
106
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ProfileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
100
107
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ProfileService, providedIn: 'root' });
101
108
  }
@@ -383,7 +390,7 @@ class LayerHelperService {
383
390
  toggleAllDmpLayersOffInMap(map) {
384
391
  map.getLayers().getArray().forEach(layergroup => {
385
392
  // DMP layers
386
- if (layergroup instanceof OLLayerGroup)
393
+ if (!(layergroup instanceof OLLayerGroup) && layergroup.get('dmp'))
387
394
  layergroup.setVisible(false);
388
395
  });
389
396
  }
@@ -742,13 +749,12 @@ class LayerSelectorComponent {
742
749
  filteredBackgroundLayerGroups = [];
743
750
  showLegend = false;
744
751
  collapsed = true;
745
- dragPosition = { x: 0, y: 0 };
752
+ layerSelectorDragPosition = { x: 0, y: 0 };
746
753
  legendUrl = 'https://docs.geoserver.org/main/en/user/_images/samplelegend.png';
747
754
  _layerSelectorBody;
748
755
  _layerSelectorBodyControl;
749
756
  dialogRef;
750
757
  _dialog = inject(MatDialog);
751
- layerSelectorDragPosition = { x: 0, y: 0 };
752
758
  _mapFilteredLayerGroupsKeyName = 'mapFilteredLayerGroups';
753
759
  POSITION_STORAGE_KEY = 'layerSelectorPosition';
754
760
  _dmpLayersCacheStoragKey = 'dmpLayersCache';
@@ -757,9 +763,9 @@ class LayerSelectorComponent {
757
763
  _layoutService = inject(LayoutService);
758
764
  _dmpCatalogService = inject(DmpCatalogService);
759
765
  _dmpMapper = inject(DmpLayerMapperService);
766
+ _profileService = inject(ProfileService);
760
767
  LAYER_SELECTOR_POSITION_KEY = 'layerSelectorPosition';
761
768
  ngOnInit() {
762
- this._loadLayerSelectorPosition();
763
769
  this._loadPosition();
764
770
  this._layerHelper.layerActivatedByBackgroundGroup
765
771
  .subscribe(layerId => this.toggleLayer(layerId, undefined, true));
@@ -781,7 +787,7 @@ class LayerSelectorComponent {
781
787
  this._loadPosition();
782
788
  this.allLayerGroups = this.profile.layerGroups
783
789
  .map((lg, idx) => ({ ...lg,
784
- noOfVisibleLayers: lg.layers.filter(l => l.visible).length,
790
+ noOfVisibleLayers: lg.layers.filter(l => l.activeInSelector && l.visible).length,
785
791
  visible: lg.layers.some(l => l.visible),
786
792
  expanded: lg.folded === false,
787
793
  layers: lg.layers.filter((l) => l.activeInSelector),
@@ -792,6 +798,7 @@ class LayerSelectorComponent {
792
798
  const cachedProfileInfo = JSON.parse(cacheValue);
793
799
  if (cachedProfileInfo.profile.versionId < this.profile.versionId) {
794
800
  //Profile version changed in backend, use that
801
+ this._profileService.setProfileVersionChanged(true);
795
802
  this.filterChanged();
796
803
  this._cacheProfileInfo();
797
804
  }
@@ -830,21 +837,6 @@ class LayerSelectorComponent {
830
837
  this._initializeMapControl();
831
838
  }
832
839
  }
833
- _loadLayerSelectorPosition() {
834
- try {
835
- const saved = localStorage.getItem(this.LAYER_SELECTOR_POSITION_KEY);
836
- if (saved) {
837
- this.layerSelectorDragPosition = JSON.parse(saved);
838
- }
839
- else if (this.profile) {
840
- this.layerSelectorDragPosition = this._layoutService.loadInitialPositionFromProfile(this.LAYER_SELECTOR_POSITION_KEY, this.profile.layerSelectorInitialPosition);
841
- }
842
- }
843
- catch (error) {
844
- console.error('Error loading layer selector position from localStorage:', error);
845
- this.layerSelectorDragPosition = { x: 0, y: 0 };
846
- }
847
- }
848
840
  onLayerSelectorDragEnded(event) {
849
841
  const position = event.source.getFreeDragPosition();
850
842
  this.layerSelectorDragPosition = position;
@@ -930,7 +922,7 @@ class LayerSelectorComponent {
930
922
  }
931
923
  });
932
924
  }
933
- group.noOfVisibleLayers = group.layers.filter(l => l.visible).length;
925
+ group.noOfVisibleLayers = group.layers.filter(l => l.activeInSelector && l.visible).length;
934
926
  group.visible = group.layers.some(l => l.visible);
935
927
  group.expanded = group.layers.some(l => l.visible);
936
928
  });
@@ -974,7 +966,7 @@ class LayerSelectorComponent {
974
966
  l.visible = !l.visible;
975
967
  }
976
968
  });
977
- group.noOfVisibleLayers = group.layers.filter(l => l.visible).length;
969
+ group.noOfVisibleLayers = group.layers.filter(l => l.activeInSelector && l.visible).length;
978
970
  group.visible = group.layers.some(l => l.visible);
979
971
  group.expanded = group.layers.some(l => l.visible);
980
972
  });
@@ -990,6 +982,7 @@ class LayerSelectorComponent {
990
982
  if (this.collapsed) {
991
983
  this.searchText = '';
992
984
  this.filterChanged();
985
+ this._layerHelper.toggleAllDmpLayersOffInMap(this.map);
993
986
  }
994
987
  if (this.profile.layerSelectorInitialPosition.includes('højre')) {
995
988
  this._layoutService.bringElementIntoViewIfNeeded('.layer-selector-body-wrapper', -13, this.collapsed);
@@ -1064,7 +1057,7 @@ class LayerSelectorComponent {
1064
1057
  }
1065
1058
  onDragEnded(event) {
1066
1059
  const position = event.source.getFreeDragPosition();
1067
- this.dragPosition = position;
1060
+ this.layerSelectorDragPosition = position;
1068
1061
  this._savePosition(position);
1069
1062
  }
1070
1063
  _savePosition(position) {
@@ -1078,21 +1071,26 @@ class LayerSelectorComponent {
1078
1071
  _loadPosition() {
1079
1072
  try {
1080
1073
  const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
1081
- if (savedPosition) {
1082
- this.dragPosition = JSON.parse(savedPosition);
1074
+ if (this._profileService.getProfileVersionChanged() &&
1075
+ this.profile?.layerSelectorInitialPosition) {
1076
+ //Profile version changed in backend, use that
1077
+ this.layerSelectorDragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.layerSelectorInitialPosition);
1078
+ }
1079
+ else if (savedPosition) {
1080
+ this.layerSelectorDragPosition = JSON.parse(savedPosition);
1083
1081
  }
1084
1082
  else if (this.profile?.layerSelectorInitialPosition) {
1085
- this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.layerSelectorInitialPosition);
1083
+ this.layerSelectorDragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.layerSelectorInitialPosition);
1086
1084
  }
1087
1085
  else {
1088
1086
  // Default position for layer selector
1089
- this.dragPosition = { x: 29, y: 370 };
1090
- this._savePosition(this.dragPosition);
1087
+ this.layerSelectorDragPosition = { x: 29, y: 370 };
1088
+ this._savePosition(this.layerSelectorDragPosition);
1091
1089
  }
1092
1090
  }
1093
1091
  catch (error) {
1094
1092
  console.error('Error loading position from localStorage:', error);
1095
- this.dragPosition = { x: 0, y: 0 };
1093
+ this.layerSelectorDragPosition = { x: 0, y: 0 };
1096
1094
  }
1097
1095
  }
1098
1096
  _cacheProfileInfo() {
@@ -1117,12 +1115,12 @@ class LayerSelectorComponent {
1117
1115
  }));
1118
1116
  }
1119
1117
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayerSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1120
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LayerSelectorComponent, isStandalone: true, selector: "lib-layer-selector", inputs: { map: "map", profile: "profile", currentZoomLevel: "currentZoomLevel" }, viewQueries: [{ propertyName: "contentBody", first: true, predicate: ["layerSelectorBody"], descendants: true }, { propertyName: "dmpDialog", first: true, predicate: ["dmpDialog"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #layerSelectorBody\n class=\"layer-selector-body-wrapper\"\n cdkDrag\n cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"layerSelectorDragPosition\"\n (cdkDragEnded)=\"onLayerSelectorDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n\n <div class=\"drag-handle-selector\" cdkDragHandle>\n <div class=\"drag-handle-content\">\n <div class=\"drag-handle-icons\">\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"Lag\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n layers\n </mat-icon>\n <mat-icon class=\"toggle-icon\" (click)=\"toggleLayerSelector()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n </div>\n\n <div class=\"ol-unselectable ol-control layer-selector-body\" *ngIf=\"!collapsed\">\n <div class=\"search-section\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-label>Filtrer</mat-label>\n <input \n matInput \n type=\"text\" \n [(ngModel)]=\"searchText\" \n (ngModelChange)=\"filteredLayerGroups=setfilteredGroups()\"\n placeholder=\"Skriv for at filtrere...\"\n />\n </mat-form-field>\n <mat-icon (click)=\"clearSearchText()\">undo</mat-icon>\n </div>\n <div\n cdkDropList\n [cdkDropListData]=\"filteredLayerGroups\"\n (cdkDropListDropped)=\"dropGroup($event, filteredLayerGroups)\"\n class=\"item-list\">\n @for (group of filteredLayerGroups; track group.id; let gIndex = $index) {\n <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n <mat-expansion-panel [(expanded)]=\"group.expanded\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n @if (group.expanded) {\n <mat-icon>arrow_upward</mat-icon>\n }\n @if (!group.expanded) {\n <mat-icon>arrow_downward</mat-icon> \n }\n {{ group.name }} \n <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n @if (group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\" \n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon> \n }\n @if (!group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n </mat-panel-title>\n </mat-expansion-panel-header>\n\n <div\n cdkDropList\n [cdkDropListData]=\"group.layers\"\n (cdkDropListDropped)=\"dropLayer($event, group)\"\n class=\"item-list\">\n @for (layer of group.layers; track layer.id; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n <div class=\"item-left\">\n <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n @if(layer.infoUrl) {\n <mat-icon \n class=\"layer-info\"\n matTooltip=\"Vis ekstra informationer i ny tab\"\n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n (click)=\"openUrl(layer.infoUrl)\"\n matTooltipPosition=\"above\"\n >info</mat-icon>\n }\n <span>{{ layer.name }}</span> \n <mat-icon></mat-icon>\n </div>\n <div class=\"item-center\">\n @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">browser_not_supported\n </mat-icon>\n }\n @if (layer.hasErrors) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n\n }\n </div>\n <div class=\"item-right\">\n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\" \n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.id, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"layer-description\">{{ layer.description }}</div>\n @if (showLegend) {\n <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n }\n </mat-expansion-panel>\n }\n </div>\n </mat-expansion-panel>\n </div>\n }\n </div>\n <div class=\"group-header\">Mine Temaer\n <mat-icon (click)=\"toggleDmpSearch(true)\"\n class=\"power-on\"\n matTooltip=\"S\u00F8g\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">add\n </mat-icon>\n </div>\n @if (dmpLayers.length > 0) {\n <div class=\"dmp-item-list\">\n @for (layer of dmpLayers; track layer.datasetId; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"true\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"item\">\n <div class=\"dmp-item-container\">\n <mat-icon (click)=\"deleteDmpLayer(layer, $event)\" class=\"delete-icon\" \n matTooltip=\"Slet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">delete\n </mat-icon>\n <div class=\"dmp-item-title-section\">\n <div class=\"dmp-item-title\">\n <span class=\"title-text\">{{ layer.title }}</span>\n </div>\n </div>\n @if (layer.hasErrors) {\n <div class=\"dmp-item-signal-center\">\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n </div>\n }\n <div class=\"dmp-item-controls\">\n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.datasetId, $event)\" class=\"power-on\" \n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.datasetId, $event)\" class=\"power-off\"\n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.datasetId, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n </mat-expansion-panel>\n }\n </div>\n }\n <div *ngIf=\"filteredBackgroundLayerGroups && filteredBackgroundLayerGroups.length > 0\" class=\"group-header\">Baggrundskort</div>\n <div\n cdkDropList\n [cdkDropListData]=\"filteredBackgroundLayerGroups\"\n (cdkDropListDropped)=\"dropGroup($event, filteredBackgroundLayerGroups)\"\n class=\"item-list\">\n @for (group of filteredBackgroundLayerGroups; track group.id; let gIndex = $index) {\n <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n <mat-expansion-panel [(expanded)]=\"group.expanded\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n @if (group.expanded) {\n <mat-icon>arrow_upward</mat-icon>\n }\n @if (!group.expanded) {\n <mat-icon>arrow_downward</mat-icon> \n }\n {{ group.name }} \n <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n @if (group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\" \n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon> \n }\n @if (!group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n </mat-panel-title>\n </mat-expansion-panel-header>\n\n <div\n cdkDropList\n [cdkDropListData]=\"group.layers\"\n (cdkDropListDropped)=\"dropLayer($event, group)\"\n class=\"item-list\">\n @for (layer of group.layers; track layer.id; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n <div class=\"item-left\">\n <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n <span>{{ layer.name }}</span>\n </div>\n <div class=\"item-center\">\n @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">browser_not_supported\n </mat-icon>\n }\n @if (layer.hasErrors) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n\n }\n </div>\n <div class=\"item-right\">\n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\" \n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.id, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"layer-description\">{{ layer.description }}</div>\n @if (showLegend) {\n <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n }\n </mat-expansion-panel>\n }\n </div>\n </mat-expansion-panel>\n </div>\n }\n </div>\n </div>\n <ng-template #dmpDialog>\n @if (dmpSearchMode) {\n <mat-dialog-content>\n <div class=\"dialog-header\">\n <div class=\"search-section\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-label>S\u00F8g</mat-label>\n <input \n matInput \n type=\"text\" \n [(ngModel)]=\"dmpSearchText\" \n (ngModelChange)=\"searchDmp()\"\n placeholder=\"Skriv for at s\u00F8ge...\"\n />\n </mat-form-field>\n <mat-icon (click)=\"clearDmpSearchText()\">undo</mat-icon>\n </div>\n <mat-icon \n class=\"close-button\" \n (click)=\"toggleDmpSearch(false)\"\n matTooltip=\"Lukke\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"left\">\n close\n </mat-icon>\n </div>\n </mat-dialog-content>\n }\n\n @if (dmpLayerResults.length > 0) {\n <div class=\"dmp-search-panel\">\n <mat-option *ngFor=\"let result of dmpLayerResults\" [value]=\"result\" class=\"search-result-option\">\n <mat-expansion-panel expanded=\"false\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <span class=\"result-title\">{{ result.title }}</span>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div><span class=\"field-label\">Status:</span><span class=\"field-value\"> {{ result.availability }}</span></div>\n <div><span class=\"field-label\">Kategori:</span><span class=\"field-value\"> {{ result.category }}</span></div>\n <div><span class=\"field-label\">Beskrivelse:</span><span class=\"field-value\"> {{ result.description }}</span></div>\n <div><span class=\"field-label\">Tags:</span><span class=\"field-value\"> {{ result.tags?.join(', ') }}</span></div>\n <div *ngIf=\"result.metaDataUrl\">\n <span class=\"field-label\">Metadata:</span>\n <a [href]=\"result.metaDataUrl\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n Vis metadata\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div *ngIf=\"result.license && result.license.url\">\n <span class=\"field-label\">Licens:</span>\n <a [href]=\"result.license.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n {{ result.license.title }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div *ngIf=\"result.dataLiabilityAgreement && result.dataLiabilityAgreement.url\">\n <span class=\"field-label\">Dataansvarsaftale:</span>\n <a [href]=\"result.dataLiabilityAgreement.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n {{ result.dataLiabilityAgreement.title }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div class=\"add-layer-section\">\n <span class=\"field-label\">Tilf\u00F8j {{ result.serviceType }}:</span>\n <mat-icon (click)=\"addDmpLayer(result)\" class=\"add-option\"\n matTooltip=\"Tilf\u00F8j\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">add\n </mat-icon>\n </div>\n </mat-expansion-panel>\n </mat-option>\n </div>}\n </ng-template>\n</div>", styles: [".layer-info{cursor:pointer}.legend-thumbnail{max-width:200px;max-height:200px;width:auto;height:auto;border:2px solid #dee2e6;padding:6px}::ng-deep .mat-mdc-dialog-container .mdc-dialog__surface{background:#4c4d51!important;border-radius:5px}::ng-deep .dmp-dialog-content mat-dialog-content{padding:12px 16px!important;background:#4c4d51}::ng-deep .dmp-dialog-content mat-dialog-content .search-section{display:flex;align-items:center;gap:6px;padding:0}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field{flex:1}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-text-field-wrapper{padding-bottom:0;background:#6d6f73}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-text-field-wrapper:hover{box-shadow:none!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-form-field-infix{padding-bottom:6px;min-height:auto}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field input{font-size:13px;padding:3px 0;color:#fff}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0;margin-top:0}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field label{color:#fff!important;font-size:13px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-icon{color:#fff;cursor:pointer;padding:6px;border-radius:4px;transition:all .2s ease;font-size:24px;width:24px;height:24px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-icon:hover{color:#f9fafb;background:#ffffff1a}::ng-deep .dmp-dialog-content mat-dialog-actions{display:none}.dialog-header{position:relative}.dialog-header .search-section{padding-right:40px}.dialog-header .close-button{position:absolute;top:0;right:0;color:#fff;cursor:pointer;padding:6px;border-radius:50%;transition:all .2s ease;font-size:24px;width:24px;height:24px;display:flex;justify-content:center;align-items:center;z-index:10;background-color:#ffffff1a}.dialog-header .close-button:hover{background:#d1d0d01a}.field-label{color:#d4d8da!important;font-size:14px!important;margin-right:6px}.open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px;font-size:13px;transition:color .2s ease}.open-link:hover{color:#2180c9!important;text-decoration:underline!important}.open-link .link-icon{font-size:16px;width:16px;height:16px}.field-value{color:#fff!important;font-size:14px!important}.add-layer-section{display:flex;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.add-layer-section .field-label{flex:1}.search-result-option{padding:0!important}.search-result-option mat-expansion-panel{box-shadow:none!important;background:#4d4f55;margin-bottom:4px;border-radius:5px!important}.search-result-option mat-expansion-panel:last-child{margin-bottom:0}.search-result-option mat-expansion-panel mat-expansion-panel-header{background:#4c4d51!important;padding:0 16px;height:48px}.search-result-option mat-expansion-panel mat-expansion-panel-header:hover{background:#ffffff1a!important}.search-result-option mat-expansion-panel mat-expansion-panel-header mat-panel-title{color:#fff;font-size:14px}.search-result-option mat-expansion-panel mat-expansion-panel-header mat-panel-title .result-title{color:#fff;font-size:14px}.search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#4d4f55}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:8px;display:flex;align-items:flex-start;gap:4px}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div mat-icon.add-option{margin-left:auto}.dmp-search-panel{background:#4c4d51;overflow-y:scroll;max-height:300px;margin-top:10px}.dmp-search-panel span{color:#fff;font-size:13px}.dmp-search-panel::-webkit-scrollbar{width:12px}.dmp-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.dmp-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.dmp-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.dmp-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.dmp-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.dmp-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.dmp-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.dmp-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-dialog-container .dmp-search-panel{max-height:400px;margin-top:0;border-radius:4px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.dmp-item-list .dmp-item-container{display:flex;align-items:center;width:100%;gap:8px;min-width:0}.dmp-item-list .dmp-item-container .delete-icon{color:#e5281a;font-size:18px;width:18px;height:18px;cursor:pointer;flex-shrink:0;margin-right:4px}@media (max-width: 767px){.dmp-item-list .dmp-item-container .delete-icon{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .delete-icon:hover{background:#e5281a33;border-radius:3px}.dmp-item-list .dmp-item-container .dmp-item-title-section{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden}.dmp-item-list .dmp-item-container .dmp-item-title{flex:1;min-width:0;overflow:hidden}.dmp-item-list .dmp-item-container .dmp-item-title .title-text{color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-title .title-text{font-size:11px}}.dmp-item-list .dmp-item-container .dmp-item-signal-center{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:30px}.dmp-item-list .dmp-item-container .dmp-item-signal-center .zoom-off{color:#e5281a;font-size:16px;width:16px;height:16px}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-signal-center .zoom-off{font-size:14px;width:14px;height:14px}}.dmp-item-list .dmp-item-container .dmp-item-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon{flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-on{color:#4caf50;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-on{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-on:hover{background:#4caf5033;border-radius:3px}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-off{color:#e5281a;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-off{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-off:hover{background:#e5281a33;border-radius:3px}.dmp-item-list .dmp-item-container .dmp-item-controls input[type=range]{width:80px;height:4px;margin:0;flex-shrink:0}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-controls input[type=range]{width:60px}}::ng-deep .dmp-item-list mat-expansion-panel-header{padding:0 11px!important;height:40px!important}@media (max-width: 767px){::ng-deep .dmp-item-list mat-expansion-panel-header{padding:0 20px!important;height:36px!important}}::ng-deep .dmp-item-list mat-expansion-panel-header mat-panel-title{width:100%}::ng-deep .dmp-item-list mat-expansion-panel-header mat-panel-title .item{width:100%}.group-header{display:flex}.group-header mat-icon{margin-left:10px}.layer-selector-body-wrapper{position:absolute;left:1em;top:10em;z-index:1000;max-width:calc(100vw - 8em);display:flex;flex-direction:column;transition:width .3s ease,max-width .3s ease;border-radius:5px}.layer-selector-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:move;z-index:1001}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons{justify-content:space-between}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .icon-left{order:1;margin-right:auto}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .toggle-icon{order:3}.layer-selector-body-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}.layer-selector-body-wrapper.collapsed .layer-selector-body{display:none}.layer-selector-body-wrapper.collapsed .drag-handle-selector{width:100%;min-width:100%;box-sizing:border-box}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content{width:100%}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons{width:100%;justify-content:space-between;gap:6px}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon{font-size:18px!important;flex-shrink:0}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.icon-left{cursor:default!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.toggle-icon{cursor:pointer!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.toggle-icon:hover{color:#d3d3d3!important}.layer-selector-body-wrapper .ol-control{border-radius:0}.layer-selector-body-wrapper .group-header{color:#fff;padding:4px 14px}@media (max-width: 767px){.layer-selector-body-wrapper{right:.5em;bottom:4em;max-width:calc(100vw - 7em);left:.5em;width:calc(100vw - 7em)}.layer-selector-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}@media (min-width: 768px) and (max-width: 1024px){.layer-selector-body-wrapper{right:3.5em;bottom:.5em;max-width:calc(100vw - 2em)}.layer-selector-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}.drag-handle-selector{display:flex;justify-content:flex-end;border-radius:5px 5px 0 0;padding:0 2px;cursor:move;background:#4c4d51}.drag-handle-content,.drag-handle-icons{display:flex;align-items:center;width:100%}.drag-handle-icons mat-icon{color:#fff;font-size:18px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-left{cursor:default!important}.toggle-icon{cursor:pointer!important}.toggle-icon:hover{color:#d3d3d3!important}::ng-deep .layer-selector-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:#4c4d51;box-shadow:0 4px 20px #00000026;width:100%;max-width:100%;max-height:317px;min-height:120px;overflow-y:auto}::ng-deep .layer-selector-body::-webkit-scrollbar{width:12px}::ng-deep .layer-selector-body::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .layer-selector-body::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .layer-selector-body::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .layer-selector-body::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}@media (max-width: 767px){::ng-deep .layer-selector-body{width:100%;max-height:70vh;min-height:140px}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body{width:100%;max-width:445px;max-height:76vh;min-height:110px}}::ng-deep .layer-selector-body .search-section{display:flex;align-items:center;gap:6px;padding:8px 12px 6px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section{padding:6px 8px 4px;gap:4px}}::ng-deep .layer-selector-body .search-section mat-form-field{flex:1}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-text-field-wrapper{padding-bottom:0;background:#6d6f73}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-text-field-wrapper:hover{box-shadow:none!important}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-wrapper{padding-bottom:0;margin-bottom:0}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-form-field-infix{padding-bottom:6px;min-height:auto}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-outline{background:#fff}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-outline-thick{color:#1976d2}::ng-deep .layer-selector-body .search-section mat-form-field input{font-size:13px;padding:3px 0}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-form-field input{font-size:12px}}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-label{color:#fff;font-weight:500;font-size:13px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-label{font-size:12px}}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0;margin-top:0}::ng-deep .layer-selector-body .search-section mat-icon{color:#fff;cursor:pointer;padding:6px;border-radius:4px;transition:all .2s ease;font-size:24px;width:24px;height:24px;display:flex;justify-content:center;align-items:center}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-icon{font-size:20px;width:20px;height:20px;padding:4px}}::ng-deep .layer-selector-body .search-section mat-icon:hover{color:#f9fafb}::ng-deep .layer-selector-body .item-list{flex:1;max-height:660px;width:100%}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list{padding:4px;max-height:calc(60vh - 80px)}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body .item-list{max-height:calc(77vh - 78px)}}::ng-deep .layer-selector-body .item-list .group{overflow:hidden;box-shadow:0 -2px 2px #4868b20a,0 2px 2px #6a6f7517,0 1px 2px #4868b214}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel{box-shadow:none!important;border-radius:0!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header{padding:0 11px;height:40px;background:#4c4d51!important}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header{padding:0 20px;height:36px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header:hover{background:#ffffff1a!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title{align-items:center;gap:6px;font-weight:600;color:#bdc1c3cc;font-size:17px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon{color:#bdc1c3cc;font-size:16px;width:16px;height:16px;transition:transform .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.lightbulb{color:#dfca0e}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.power-on{color:#4caf50}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.power-off{cursor:pointer;color:#e5281a}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content{background:#4d4f55}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:4px 0;background:#4d4f55}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:2px 0}}::ng-deep .layer-selector-body .item-list .group .item-list{padding:0;max-height:none}::ng-deep .layer-selector-body .item-list .group .item-list .layer-description{font-size:13px;padding:0 31px;color:#fffc}::ng-deep .layer-selector-body .item-list .group .item-list .item{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:6px;background:transparent;transition:all .2s ease;color:#fff;cursor:move;font-size:14px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item{gap:4px;padding:6px 8px}}::ng-deep .layer-selector-body .item-list .group .item-list .item:last-child{border-bottom:none}::ng-deep .layer-selector-body .item-list .group .item-list .item:hover{background-color:transparent;transition:all .2s ease}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left{display:flex;align-items:center;gap:3px;flex:1;min-width:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left .layer-info{cursor:pointer;color:#dfca0e;font-size:16px;width:16px;height:16px;flex-shrink:0;transition:all .2s ease;padding:2px;border-radius:50%}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left .layer-info{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left .layer-info:hover{color:#ccb913}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left span{font-size:13px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;flex:1;min-width:0;color:#fff}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left span{font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center{display:flex;align-items:center;gap:2px;flex-shrink:0;justify-content:center;position:relative;left:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center .icon-label{font-size:11px;opacity:.8;margin-right:4px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center .icon-label{font-size:9px;margin-right:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right{display:flex;align-items:center;flex:1;justify-content:flex-end;min-width:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right input[type=range]{width:80px;height:4px;margin:0;flex-shrink:0}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right input[type=range]{width:60px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon{flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.drag-indicator{color:#fff;font-size:16px;width:16px;height:16px;cursor:move}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.drag-indicator{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on{color:#4caf50;font-size:18px;width:18px;height:18px;cursor:pointer;padding:3px;border-radius:3px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on{font-size:16px;width:16px;height:16px;padding:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on:hover{background:#4caf5033}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off{color:#e5281a;font-size:18px;width:18px;height:18px;cursor:pointer;padding:3px;border-radius:3px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off{font-size:16px;width:16px;height:16px;padding:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off:hover{background:#f4433633}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.zoom-off{color:#e5281a;font-size:16px;width:16px;height:16px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.zoom-off{font-size:14px;width:14px;height:14px}}::ng-deep .mat-expansion-indicator svg{fill:#fff!important}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 15px #00000026;background:#fff;padding:10px 12px}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.item-list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.power-on{color:#4caf50}.power-off{cursor:pointer;color:#e5281a}.add-option{color:#4caf50}.add-option:hover{color:#37923a}::ng-deep .layer-selector-body .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
1118
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LayerSelectorComponent, isStandalone: true, selector: "lib-layer-selector", inputs: { map: "map", profile: "profile", currentZoomLevel: "currentZoomLevel" }, viewQueries: [{ propertyName: "contentBody", first: true, predicate: ["layerSelectorBody"], descendants: true }, { propertyName: "dmpDialog", first: true, predicate: ["dmpDialog"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #layerSelectorBody\n class=\"layer-selector-body-wrapper\"\n cdkDrag\n cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"layerSelectorDragPosition\"\n (cdkDragEnded)=\"onLayerSelectorDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n\n <div class=\"drag-handle-selector\" cdkDragHandle>\n <div class=\"drag-handle-content\">\n <div class=\"drag-handle-icons\">\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"Lag\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n layers\n </mat-icon>\n <mat-icon class=\"toggle-icon\" (click)=\"toggleLayerSelector()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n </div>\n\n <div class=\"ol-unselectable ol-control layer-selector-body\" *ngIf=\"!collapsed\">\n <div class=\"search-section\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-label>Filtrer</mat-label>\n <input \n matInput \n type=\"text\" \n [(ngModel)]=\"searchText\" \n (ngModelChange)=\"filteredLayerGroups=setfilteredGroups()\"\n placeholder=\"Skriv for at filtrere...\"\n />\n </mat-form-field>\n <mat-icon (click)=\"clearSearchText()\">undo</mat-icon>\n </div>\n <div\n cdkDropList\n [cdkDropListData]=\"filteredLayerGroups\"\n (cdkDropListDropped)=\"dropGroup($event, filteredLayerGroups)\"\n class=\"item-list\">\n @for (group of filteredLayerGroups; track group.id; let gIndex = $index) {\n <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n <mat-expansion-panel [(expanded)]=\"group.expanded\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n @if (group.expanded) {\n <mat-icon>arrow_upward</mat-icon>\n }\n @if (!group.expanded) {\n <mat-icon>arrow_downward</mat-icon> \n }\n {{ group.name }} \n <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n @if (group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\" \n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon> \n }\n @if (!group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n </mat-panel-title>\n </mat-expansion-panel-header>\n\n <div\n cdkDropList\n [cdkDropListData]=\"group.layers\"\n (cdkDropListDropped)=\"dropLayer($event, group)\"\n class=\"item-list\">\n @for (layer of group.layers; track layer.id; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n <div class=\"item-left\">\n <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n @if(layer.infoUrl) {\n <mat-icon \n class=\"layer-info\"\n matTooltip=\"Vis ekstra informationer i ny tab\"\n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n (click)=\"openUrl(layer.infoUrl)\"\n matTooltipPosition=\"above\"\n >info</mat-icon>\n }\n <span>{{ layer.name }}</span> \n <mat-icon></mat-icon>\n </div>\n <div class=\"item-center\">\n @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">browser_not_supported\n </mat-icon>\n }\n @if (layer.hasErrors) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n\n }\n </div>\n <div class=\"item-right\">\n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\" \n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.id, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"layer-description\">{{ layer.description }}</div>\n @if (showLegend) {\n <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n }\n </mat-expansion-panel>\n }\n </div>\n </mat-expansion-panel>\n </div>\n }\n </div>\n <div class=\"group-header\">Mine Temaer\n <mat-icon (click)=\"toggleDmpSearch(true)\"\n class=\"power-on\"\n matTooltip=\"S\u00F8g\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">add\n </mat-icon>\n </div>\n @if (dmpLayers.length > 0) {\n <div class=\"dmp-item-list\">\n @for (layer of dmpLayers; track layer.datasetId; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"true\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"item\">\n <div class=\"dmp-item-container\">\n <mat-icon (click)=\"deleteDmpLayer(layer, $event)\" class=\"delete-icon\" \n matTooltip=\"Slet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">delete\n </mat-icon>\n <div class=\"dmp-item-title-section\">\n <div class=\"dmp-item-title\">\n <span class=\"title-text\">{{ layer.title }}</span>\n </div>\n </div>\n @if (layer.hasErrors) {\n <div class=\"dmp-item-signal-center\">\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n </div>\n }\n <div class=\"dmp-item-controls\">\n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.datasetId, $event)\" class=\"power-on\" \n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.datasetId, $event)\" class=\"power-off\"\n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.datasetId, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n </mat-expansion-panel>\n }\n </div>\n }\n <div *ngIf=\"filteredBackgroundLayerGroups && filteredBackgroundLayerGroups.length > 0\" class=\"group-header\">Baggrundskort</div>\n <div\n cdkDropList\n [cdkDropListData]=\"filteredBackgroundLayerGroups\"\n (cdkDropListDropped)=\"dropGroup($event, filteredBackgroundLayerGroups)\"\n class=\"item-list\">\n @for (group of filteredBackgroundLayerGroups; track group.id; let gIndex = $index) {\n <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n <mat-expansion-panel [(expanded)]=\"group.expanded\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n @if (group.expanded) {\n <mat-icon>arrow_upward</mat-icon>\n }\n @if (!group.expanded) {\n <mat-icon>arrow_downward</mat-icon> \n }\n {{ group.name }} \n <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n @if (group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\" \n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon> \n }\n @if (!group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n </mat-panel-title>\n </mat-expansion-panel-header>\n\n <div\n cdkDropList\n [cdkDropListData]=\"group.layers\"\n (cdkDropListDropped)=\"dropLayer($event, group)\"\n class=\"item-list\">\n @for (layer of group.layers; track layer.id; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n <div class=\"item-left\">\n <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n <span>{{ layer.name }}</span>\n </div>\n <div class=\"item-center\">\n @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">browser_not_supported\n </mat-icon>\n }\n @if (layer.hasErrors) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n\n }\n </div>\n <div class=\"item-right\">\n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\" \n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.id, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"layer-description\">{{ layer.description }}</div>\n @if (showLegend) {\n <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n }\n </mat-expansion-panel>\n }\n </div>\n </mat-expansion-panel>\n </div>\n }\n </div>\n </div>\n <ng-template #dmpDialog>\n @if (dmpSearchMode) {\n <mat-dialog-content>\n <div class=\"dialog-header\">\n <div class=\"search-section\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-label>S\u00F8g</mat-label>\n <input \n matInput \n type=\"text\" \n [(ngModel)]=\"dmpSearchText\" \n (ngModelChange)=\"searchDmp()\"\n placeholder=\"Skriv for at s\u00F8ge...\"\n />\n </mat-form-field>\n <mat-icon (click)=\"clearDmpSearchText()\">undo</mat-icon>\n </div>\n <mat-icon \n class=\"close-button\" \n (click)=\"toggleDmpSearch(false)\"\n matTooltip=\"Lukke\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"left\">\n close\n </mat-icon>\n </div>\n </mat-dialog-content>\n }\n\n @if (dmpLayerResults.length > 0) {\n <div class=\"dmp-search-panel\">\n <mat-option *ngFor=\"let result of dmpLayerResults\" [value]=\"result\" class=\"search-result-option\">\n <mat-expansion-panel expanded=\"false\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <span class=\"result-title\">{{ result.title }}</span>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div><span class=\"field-label\">Status:</span><span class=\"field-value\"> {{ result.availability }}</span></div>\n <div><span class=\"field-label\">Kategori:</span><span class=\"field-value\"> {{ result.category }}</span></div>\n <div><span class=\"field-label\">Beskrivelse:</span><span class=\"field-value\"> {{ result.description }}</span></div>\n <div><span class=\"field-label\">Tags:</span><span class=\"field-value\"> {{ result.tags?.join(', ') }}</span></div>\n <div *ngIf=\"result.metaDataUrl\">\n <span class=\"field-label\">Metadata:</span>\n <a [href]=\"result.metaDataUrl\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n Vis metadata\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div *ngIf=\"result.license && result.license.url\">\n <span class=\"field-label\">Licens:</span>\n <a [href]=\"result.license.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n {{ result.license.title }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div *ngIf=\"result.dataLiabilityAgreement && result.dataLiabilityAgreement.url\">\n <span class=\"field-label\">Dataansvarsaftale:</span>\n <a [href]=\"result.dataLiabilityAgreement.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n {{ result.dataLiabilityAgreement.title }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div class=\"add-layer-section\">\n <span class=\"field-label\">Tilf\u00F8j {{ result.serviceType }}:</span>\n <mat-icon (click)=\"addDmpLayer(result)\" class=\"add-option\"\n matTooltip=\"Tilf\u00F8j\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">add\n </mat-icon>\n </div>\n </mat-expansion-panel>\n </mat-option>\n </div>}\n </ng-template>\n</div>", styles: [".layer-info{cursor:pointer}.legend-thumbnail{max-width:200px;max-height:200px;width:auto;height:auto;border:2px solid #dee2e6;padding:6px}::ng-deep .dmp-dialog-content mat-dialog-content{padding:12px 16px!important;background:#4c4d51}::ng-deep .dmp-dialog-content mat-dialog-content .search-section{display:flex;align-items:center;gap:6px;padding:0}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field{flex:1}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-text-field-wrapper{padding-bottom:0;background:#6d6f73;border-radius:0!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-text-field-wrapper:hover{box-shadow:none!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important;border-width:1.5px!important;transition:border-color .3s ease,border-width .3s ease}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field ::ng-deep .mdc-text-field{border-radius:0!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-form-field-infix{padding-bottom:6px;min-height:auto}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field input{font-size:13px;padding:3px 0;color:#fff}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field input::placeholder{opacity:1;color:#fff!important;transition:opacity .3s ease}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field ::ng-deep .mat-mdc-form-field.mat-focused input::placeholder,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field ::ng-deep .mat-mdc-form-field.mat-form-field-should-float input::placeholder{opacity:1;color:#fff!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0;margin-top:0}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field label{color:#fff!important;font-size:13px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field ::ng-deep .mdc-floating-label{transition:all .3s cubic-bezier(.4,0,.2,1)}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field ::ng-deep .mat-mdc-form-field.mat-focused .mdc-floating-label,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field ::ng-deep .mat-mdc-form-field .mdc-floating-label--float-above{left:12px!important;top:0!important;transform:translateY(-50%) scale(.75)}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-icon{color:#fff;cursor:pointer;padding:6px;border-radius:4px;transition:all .2s ease;font-size:24px;width:24px;height:24px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-icon:hover{color:#f9fafb}::ng-deep .dmp-dialog-content mat-dialog-actions{display:none}.dialog-header{position:relative}.dialog-header .search-section{padding-right:40px}.dialog-header .close-button{position:absolute;top:0;right:0;color:#fff;cursor:pointer;padding:6px;border-radius:50%;transition:all .2s ease;font-size:24px;width:24px;height:24px;display:flex;justify-content:center;align-items:center;z-index:10;background-color:#ffffff1a}.dialog-header .close-button:hover{background:#d1d0d01a}.field-label{color:#d4d8da!important;font-size:13px!important;margin-right:6px}.open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px;font-size:13px;transition:color .2s ease}.open-link:hover{color:#2180c9!important;text-decoration:underline!important}.open-link .link-icon{font-size:16px;width:16px;height:16px}.field-value{color:#fff!important;font-size:13px!important}.add-layer-section{display:flex;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.add-layer-section .field-label{flex:1}.search-result-option{padding:0!important}.search-result-option mat-expansion-panel{box-shadow:none!important;background:#4d4f55;margin-bottom:4px;border-radius:5px!important}.search-result-option mat-expansion-panel:last-child{margin-bottom:0}.search-result-option mat-expansion-panel mat-expansion-panel-header{background:#4c4d51!important;padding:0 16px;height:48px}.search-result-option mat-expansion-panel mat-expansion-panel-header:hover{background:#ffffff1a!important}.search-result-option mat-expansion-panel mat-expansion-panel-header mat-panel-title{color:#fff;font-size:13px}.search-result-option mat-expansion-panel mat-expansion-panel-header mat-panel-title .result-title{color:#fff;font-size:13px}.search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#4d4f55}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:8px;display:flex;align-items:flex-start;gap:4px}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div mat-icon.add-option{margin-left:auto}.dmp-search-panel{background:#4c4d51;overflow-y:scroll;max-height:300px;margin-top:10px}.dmp-search-panel span{color:#fff;font-size:13px}.dmp-search-panel::-webkit-scrollbar{width:12px}.dmp-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.dmp-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.dmp-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.dmp-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.dmp-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.dmp-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.dmp-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.dmp-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-dialog-container .dmp-search-panel{max-height:400px;margin-top:0;border-radius:4px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.dmp-item-list .dmp-item-container{display:flex;align-items:center;width:100%;gap:8px;min-width:0}.dmp-item-list .dmp-item-container .delete-icon{color:#e5281a;font-size:18px;width:18px;height:18px;cursor:pointer;flex-shrink:0;margin-right:4px}@media (max-width: 767px){.dmp-item-list .dmp-item-container .delete-icon{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .delete-icon:hover{background:#e5281a33;border-radius:3px}.dmp-item-list .dmp-item-container .dmp-item-title-section{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden}.dmp-item-list .dmp-item-container .dmp-item-title{flex:1;min-width:0;overflow:hidden}.dmp-item-list .dmp-item-container .dmp-item-title .title-text{color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-title .title-text{font-size:11px}}.dmp-item-list .dmp-item-container .dmp-item-signal-center{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:30px}.dmp-item-list .dmp-item-container .dmp-item-signal-center .zoom-off{color:#e5281a;font-size:16px;width:16px;height:16px}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-signal-center .zoom-off{font-size:14px;width:14px;height:14px}}.dmp-item-list .dmp-item-container .dmp-item-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon{flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-on{color:#4caf50;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-on{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-on:hover{background:#4caf5033;border-radius:3px}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-off{color:#e5281a;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-off{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-off:hover{background:#e5281a33;border-radius:3px}.dmp-item-list .dmp-item-container .dmp-item-controls input[type=range]{width:80px;height:4px;margin:0;flex-shrink:0}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-controls input[type=range]{width:60px}}::ng-deep .dmp-item-list mat-expansion-panel-header{padding:0 11px!important;height:40px!important}@media (max-width: 767px){::ng-deep .dmp-item-list mat-expansion-panel-header{padding:0 20px!important;height:36px!important}}::ng-deep .dmp-item-list mat-expansion-panel-header mat-panel-title{width:100%}::ng-deep .dmp-item-list mat-expansion-panel-header mat-panel-title .item{width:100%}.group-header{display:flex}.group-header mat-icon{margin-left:10px}.layer-selector-body-wrapper{position:absolute;left:1em;top:10em;z-index:1000;max-width:calc(100vw - 8em);display:flex;flex-direction:column;transition:width .3s ease,max-width .3s ease;border-top-left-radius:5px;border-top-right-radius:5px}.layer-selector-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:move;z-index:1001}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons{justify-content:space-between}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .icon-left{order:1;margin-right:auto}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .toggle-icon{order:3}.layer-selector-body-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}.layer-selector-body-wrapper.collapsed .layer-selector-body{display:none}.layer-selector-body-wrapper.collapsed .drag-handle-selector{width:100%;min-width:100%;box-sizing:border-box;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content{width:100%}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons{width:100%;justify-content:space-between;gap:6px}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon{font-size:18px!important;flex-shrink:0}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.icon-left{cursor:default!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.toggle-icon{cursor:pointer!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.toggle-icon:hover{color:#d3d3d3!important}.layer-selector-body-wrapper .ol-control{border-radius:0}.layer-selector-body-wrapper .group-header{color:#fff;padding:4px 14px;font-size:13px}@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}}.layer-selector-body-wrapper .mat-mdc-dialog-container .mdc-dialog__surface{background:#4c4d51!important;border-radius:5px}.drag-handle-selector{display:flex;justify-content:flex-end;border-radius:5px 5px 0 0;padding:0 2px;cursor:move;background:#4c4d51}.drag-handle-content,.drag-handle-icons{display:flex;align-items:center;width:100%}.drag-handle-icons mat-icon{color:#fff;font-size:18px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-left{cursor:default!important}.toggle-icon{cursor:pointer!important}.toggle-icon:hover{color:#d3d3d3!important}::ng-deep .layer-selector-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:#4c4d51;width:100%;max-width:100%;max-height:317px;min-height:120px;overflow-y:auto;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}::ng-deep .layer-selector-body::-webkit-scrollbar{width:12px}::ng-deep .layer-selector-body::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .layer-selector-body::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .layer-selector-body::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .layer-selector-body::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}@media (max-width: 767px){::ng-deep .layer-selector-body{width:100%;max-height:70vh;min-height:140px}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body{width:100%;max-width:445px;max-height:76vh;min-height:110px}}::ng-deep .layer-selector-body .search-section{display:flex;align-items:center;gap:6px;padding:8px 12px 6px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section{padding:6px 8px 4px;gap:4px}}::ng-deep .layer-selector-body .search-section mat-form-field{flex:1}::ng-deep .layer-selector-body .search-section mat-form-field input{font-size:13px;padding:3px 0}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-label{color:#fff;font-weight:500;font-size:13px}::ng-deep .layer-selector-body .search-section mat-icon{color:#fff;cursor:pointer;padding:6px;border-radius:4px;transition:all .2s ease;font-size:24px;width:24px;height:24px;display:flex;justify-content:center;align-items:center}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-icon{font-size:20px;width:20px;height:20px;padding:4px}}::ng-deep .layer-selector-body .search-section mat-icon:hover{color:#f9fafb}::ng-deep .layer-selector-body .item-list{flex:1;max-height:660px;width:100%}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list{padding:4px;max-height:calc(60vh - 80px)}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body .item-list{max-height:calc(77vh - 78px)}}::ng-deep .layer-selector-body .item-list .group{overflow:hidden;box-shadow:0 -2px 2px #4868b20a,0 2px 2px #6a6f7517,0 1px 2px #4868b214}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel{box-shadow:none!important;border-radius:0!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header{padding:0 11px;height:40px;background:#4c4d51!important}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header{padding:0 20px;height:36px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header:hover{background:#ffffff1a!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title{align-items:center;gap:6px;font-weight:600;color:#bdc1c3cc;font-size:13px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon{color:#bdc1c3cc;font-size:16px;width:16px;height:16px;transition:transform .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.lightbulb{color:#dfca0e}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.power-on{color:#4caf50}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.power-off{cursor:pointer;color:#e5281a}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content{background:#4d4f55}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:4px 0;background:#4d4f55}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:2px 0}}::ng-deep .layer-selector-body .item-list .group .item-list{padding:0;max-height:none}::ng-deep .layer-selector-body .item-list .group .item-list .layer-description{font-size:13px;padding:0 31px;color:#fffc}::ng-deep .layer-selector-body .item-list .group .item-list .item{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:6px;background:transparent;transition:all .2s ease;color:#fff;cursor:move;font-size:14px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item{gap:4px;padding:6px 8px}}::ng-deep .layer-selector-body .item-list .group .item-list .item:last-child{border-bottom:none}::ng-deep .layer-selector-body .item-list .group .item-list .item:hover{background-color:transparent;transition:all .2s ease}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left{display:flex;align-items:center;gap:3px;flex:1;min-width:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left .layer-info{cursor:pointer;color:#dfca0e;font-size:16px;width:16px;height:16px;flex-shrink:0;transition:all .2s ease;padding:2px;border-radius:50%}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left .layer-info{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left .layer-info:hover{color:#ccb913}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left span{font-size:13px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;flex:1;min-width:0;color:#fff}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left span{font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center{display:flex;align-items:center;gap:2px;flex-shrink:0;justify-content:center;position:relative;left:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center .icon-label{font-size:11px;opacity:.8;margin-right:4px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center .icon-label{font-size:9px;margin-right:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right{display:flex;align-items:center;flex:1;justify-content:flex-end;min-width:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right input[type=range]{width:80px;height:4px;margin:0;flex-shrink:0}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right input[type=range]{width:60px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon{flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.drag-indicator{color:#fff;font-size:16px;width:16px;height:16px;cursor:move}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.drag-indicator{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on{color:#4caf50;font-size:18px;width:18px;height:18px;cursor:pointer;padding:3px;border-radius:3px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on{font-size:16px;width:16px;height:16px;padding:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on:hover{background:#4caf5033}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off{color:#e5281a;font-size:18px;width:18px;height:18px;cursor:pointer;padding:3px;border-radius:3px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off{font-size:16px;width:16px;height:16px;padding:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off:hover{background:#f4433633}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.zoom-off{color:#e5281a;font-size:16px;width:16px;height:16px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.zoom-off{font-size:14px;width:14px;height:14px}}::ng-deep .mat-expansion-indicator svg{fill:#fff!important}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 15px #00000026;background:#fff;padding:10px 12px}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.item-list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.power-on{color:#4caf50}.power-off{cursor:pointer;color:#e5281a}.add-option{color:#4caf50}.add-option:hover{color:#37923a}::ng-deep .layer-selector-body .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
1121
1119
  }
1122
1120
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayerSelectorComponent, decorators: [{
1123
1121
  type: Component,
1124
1122
  args: [{ selector: 'lib-layer-selector', imports: [MatFormFieldModule, CommonModule, MatIconModule, FormsModule, DragDropModule,
1125
- MatExpansionModule, MatInputModule, MatTooltipModule, MatOptionModule, MatDialogModule, MatDialogContent, MatDialogActions], template: "<div\n #layerSelectorBody\n class=\"layer-selector-body-wrapper\"\n cdkDrag\n cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"layerSelectorDragPosition\"\n (cdkDragEnded)=\"onLayerSelectorDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n\n <div class=\"drag-handle-selector\" cdkDragHandle>\n <div class=\"drag-handle-content\">\n <div class=\"drag-handle-icons\">\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"Lag\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n layers\n </mat-icon>\n <mat-icon class=\"toggle-icon\" (click)=\"toggleLayerSelector()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n </div>\n\n <div class=\"ol-unselectable ol-control layer-selector-body\" *ngIf=\"!collapsed\">\n <div class=\"search-section\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-label>Filtrer</mat-label>\n <input \n matInput \n type=\"text\" \n [(ngModel)]=\"searchText\" \n (ngModelChange)=\"filteredLayerGroups=setfilteredGroups()\"\n placeholder=\"Skriv for at filtrere...\"\n />\n </mat-form-field>\n <mat-icon (click)=\"clearSearchText()\">undo</mat-icon>\n </div>\n <div\n cdkDropList\n [cdkDropListData]=\"filteredLayerGroups\"\n (cdkDropListDropped)=\"dropGroup($event, filteredLayerGroups)\"\n class=\"item-list\">\n @for (group of filteredLayerGroups; track group.id; let gIndex = $index) {\n <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n <mat-expansion-panel [(expanded)]=\"group.expanded\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n @if (group.expanded) {\n <mat-icon>arrow_upward</mat-icon>\n }\n @if (!group.expanded) {\n <mat-icon>arrow_downward</mat-icon> \n }\n {{ group.name }} \n <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n @if (group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\" \n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon> \n }\n @if (!group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n </mat-panel-title>\n </mat-expansion-panel-header>\n\n <div\n cdkDropList\n [cdkDropListData]=\"group.layers\"\n (cdkDropListDropped)=\"dropLayer($event, group)\"\n class=\"item-list\">\n @for (layer of group.layers; track layer.id; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n <div class=\"item-left\">\n <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n @if(layer.infoUrl) {\n <mat-icon \n class=\"layer-info\"\n matTooltip=\"Vis ekstra informationer i ny tab\"\n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n (click)=\"openUrl(layer.infoUrl)\"\n matTooltipPosition=\"above\"\n >info</mat-icon>\n }\n <span>{{ layer.name }}</span> \n <mat-icon></mat-icon>\n </div>\n <div class=\"item-center\">\n @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">browser_not_supported\n </mat-icon>\n }\n @if (layer.hasErrors) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n\n }\n </div>\n <div class=\"item-right\">\n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\" \n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.id, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"layer-description\">{{ layer.description }}</div>\n @if (showLegend) {\n <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n }\n </mat-expansion-panel>\n }\n </div>\n </mat-expansion-panel>\n </div>\n }\n </div>\n <div class=\"group-header\">Mine Temaer\n <mat-icon (click)=\"toggleDmpSearch(true)\"\n class=\"power-on\"\n matTooltip=\"S\u00F8g\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">add\n </mat-icon>\n </div>\n @if (dmpLayers.length > 0) {\n <div class=\"dmp-item-list\">\n @for (layer of dmpLayers; track layer.datasetId; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"true\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"item\">\n <div class=\"dmp-item-container\">\n <mat-icon (click)=\"deleteDmpLayer(layer, $event)\" class=\"delete-icon\" \n matTooltip=\"Slet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">delete\n </mat-icon>\n <div class=\"dmp-item-title-section\">\n <div class=\"dmp-item-title\">\n <span class=\"title-text\">{{ layer.title }}</span>\n </div>\n </div>\n @if (layer.hasErrors) {\n <div class=\"dmp-item-signal-center\">\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n </div>\n }\n <div class=\"dmp-item-controls\">\n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.datasetId, $event)\" class=\"power-on\" \n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.datasetId, $event)\" class=\"power-off\"\n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.datasetId, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n </mat-expansion-panel>\n }\n </div>\n }\n <div *ngIf=\"filteredBackgroundLayerGroups && filteredBackgroundLayerGroups.length > 0\" class=\"group-header\">Baggrundskort</div>\n <div\n cdkDropList\n [cdkDropListData]=\"filteredBackgroundLayerGroups\"\n (cdkDropListDropped)=\"dropGroup($event, filteredBackgroundLayerGroups)\"\n class=\"item-list\">\n @for (group of filteredBackgroundLayerGroups; track group.id; let gIndex = $index) {\n <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n <mat-expansion-panel [(expanded)]=\"group.expanded\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n @if (group.expanded) {\n <mat-icon>arrow_upward</mat-icon>\n }\n @if (!group.expanded) {\n <mat-icon>arrow_downward</mat-icon> \n }\n {{ group.name }} \n <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n @if (group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\" \n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon> \n }\n @if (!group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n </mat-panel-title>\n </mat-expansion-panel-header>\n\n <div\n cdkDropList\n [cdkDropListData]=\"group.layers\"\n (cdkDropListDropped)=\"dropLayer($event, group)\"\n class=\"item-list\">\n @for (layer of group.layers; track layer.id; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n <div class=\"item-left\">\n <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n <span>{{ layer.name }}</span>\n </div>\n <div class=\"item-center\">\n @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">browser_not_supported\n </mat-icon>\n }\n @if (layer.hasErrors) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n\n }\n </div>\n <div class=\"item-right\">\n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\" \n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.id, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"layer-description\">{{ layer.description }}</div>\n @if (showLegend) {\n <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n }\n </mat-expansion-panel>\n }\n </div>\n </mat-expansion-panel>\n </div>\n }\n </div>\n </div>\n <ng-template #dmpDialog>\n @if (dmpSearchMode) {\n <mat-dialog-content>\n <div class=\"dialog-header\">\n <div class=\"search-section\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-label>S\u00F8g</mat-label>\n <input \n matInput \n type=\"text\" \n [(ngModel)]=\"dmpSearchText\" \n (ngModelChange)=\"searchDmp()\"\n placeholder=\"Skriv for at s\u00F8ge...\"\n />\n </mat-form-field>\n <mat-icon (click)=\"clearDmpSearchText()\">undo</mat-icon>\n </div>\n <mat-icon \n class=\"close-button\" \n (click)=\"toggleDmpSearch(false)\"\n matTooltip=\"Lukke\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"left\">\n close\n </mat-icon>\n </div>\n </mat-dialog-content>\n }\n\n @if (dmpLayerResults.length > 0) {\n <div class=\"dmp-search-panel\">\n <mat-option *ngFor=\"let result of dmpLayerResults\" [value]=\"result\" class=\"search-result-option\">\n <mat-expansion-panel expanded=\"false\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <span class=\"result-title\">{{ result.title }}</span>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div><span class=\"field-label\">Status:</span><span class=\"field-value\"> {{ result.availability }}</span></div>\n <div><span class=\"field-label\">Kategori:</span><span class=\"field-value\"> {{ result.category }}</span></div>\n <div><span class=\"field-label\">Beskrivelse:</span><span class=\"field-value\"> {{ result.description }}</span></div>\n <div><span class=\"field-label\">Tags:</span><span class=\"field-value\"> {{ result.tags?.join(', ') }}</span></div>\n <div *ngIf=\"result.metaDataUrl\">\n <span class=\"field-label\">Metadata:</span>\n <a [href]=\"result.metaDataUrl\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n Vis metadata\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div *ngIf=\"result.license && result.license.url\">\n <span class=\"field-label\">Licens:</span>\n <a [href]=\"result.license.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n {{ result.license.title }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div *ngIf=\"result.dataLiabilityAgreement && result.dataLiabilityAgreement.url\">\n <span class=\"field-label\">Dataansvarsaftale:</span>\n <a [href]=\"result.dataLiabilityAgreement.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n {{ result.dataLiabilityAgreement.title }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div class=\"add-layer-section\">\n <span class=\"field-label\">Tilf\u00F8j {{ result.serviceType }}:</span>\n <mat-icon (click)=\"addDmpLayer(result)\" class=\"add-option\"\n matTooltip=\"Tilf\u00F8j\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">add\n </mat-icon>\n </div>\n </mat-expansion-panel>\n </mat-option>\n </div>}\n </ng-template>\n</div>", styles: [".layer-info{cursor:pointer}.legend-thumbnail{max-width:200px;max-height:200px;width:auto;height:auto;border:2px solid #dee2e6;padding:6px}::ng-deep .mat-mdc-dialog-container .mdc-dialog__surface{background:#4c4d51!important;border-radius:5px}::ng-deep .dmp-dialog-content mat-dialog-content{padding:12px 16px!important;background:#4c4d51}::ng-deep .dmp-dialog-content mat-dialog-content .search-section{display:flex;align-items:center;gap:6px;padding:0}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field{flex:1}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-text-field-wrapper{padding-bottom:0;background:#6d6f73}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-text-field-wrapper:hover{box-shadow:none!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-form-field-infix{padding-bottom:6px;min-height:auto}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field input{font-size:13px;padding:3px 0;color:#fff}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0;margin-top:0}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field label{color:#fff!important;font-size:13px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-icon{color:#fff;cursor:pointer;padding:6px;border-radius:4px;transition:all .2s ease;font-size:24px;width:24px;height:24px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-icon:hover{color:#f9fafb;background:#ffffff1a}::ng-deep .dmp-dialog-content mat-dialog-actions{display:none}.dialog-header{position:relative}.dialog-header .search-section{padding-right:40px}.dialog-header .close-button{position:absolute;top:0;right:0;color:#fff;cursor:pointer;padding:6px;border-radius:50%;transition:all .2s ease;font-size:24px;width:24px;height:24px;display:flex;justify-content:center;align-items:center;z-index:10;background-color:#ffffff1a}.dialog-header .close-button:hover{background:#d1d0d01a}.field-label{color:#d4d8da!important;font-size:14px!important;margin-right:6px}.open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px;font-size:13px;transition:color .2s ease}.open-link:hover{color:#2180c9!important;text-decoration:underline!important}.open-link .link-icon{font-size:16px;width:16px;height:16px}.field-value{color:#fff!important;font-size:14px!important}.add-layer-section{display:flex;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.add-layer-section .field-label{flex:1}.search-result-option{padding:0!important}.search-result-option mat-expansion-panel{box-shadow:none!important;background:#4d4f55;margin-bottom:4px;border-radius:5px!important}.search-result-option mat-expansion-panel:last-child{margin-bottom:0}.search-result-option mat-expansion-panel mat-expansion-panel-header{background:#4c4d51!important;padding:0 16px;height:48px}.search-result-option mat-expansion-panel mat-expansion-panel-header:hover{background:#ffffff1a!important}.search-result-option mat-expansion-panel mat-expansion-panel-header mat-panel-title{color:#fff;font-size:14px}.search-result-option mat-expansion-panel mat-expansion-panel-header mat-panel-title .result-title{color:#fff;font-size:14px}.search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#4d4f55}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:8px;display:flex;align-items:flex-start;gap:4px}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div mat-icon.add-option{margin-left:auto}.dmp-search-panel{background:#4c4d51;overflow-y:scroll;max-height:300px;margin-top:10px}.dmp-search-panel span{color:#fff;font-size:13px}.dmp-search-panel::-webkit-scrollbar{width:12px}.dmp-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.dmp-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.dmp-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.dmp-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.dmp-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.dmp-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.dmp-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.dmp-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-dialog-container .dmp-search-panel{max-height:400px;margin-top:0;border-radius:4px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.dmp-item-list .dmp-item-container{display:flex;align-items:center;width:100%;gap:8px;min-width:0}.dmp-item-list .dmp-item-container .delete-icon{color:#e5281a;font-size:18px;width:18px;height:18px;cursor:pointer;flex-shrink:0;margin-right:4px}@media (max-width: 767px){.dmp-item-list .dmp-item-container .delete-icon{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .delete-icon:hover{background:#e5281a33;border-radius:3px}.dmp-item-list .dmp-item-container .dmp-item-title-section{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden}.dmp-item-list .dmp-item-container .dmp-item-title{flex:1;min-width:0;overflow:hidden}.dmp-item-list .dmp-item-container .dmp-item-title .title-text{color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-title .title-text{font-size:11px}}.dmp-item-list .dmp-item-container .dmp-item-signal-center{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:30px}.dmp-item-list .dmp-item-container .dmp-item-signal-center .zoom-off{color:#e5281a;font-size:16px;width:16px;height:16px}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-signal-center .zoom-off{font-size:14px;width:14px;height:14px}}.dmp-item-list .dmp-item-container .dmp-item-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon{flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-on{color:#4caf50;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-on{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-on:hover{background:#4caf5033;border-radius:3px}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-off{color:#e5281a;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-off{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-off:hover{background:#e5281a33;border-radius:3px}.dmp-item-list .dmp-item-container .dmp-item-controls input[type=range]{width:80px;height:4px;margin:0;flex-shrink:0}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-controls input[type=range]{width:60px}}::ng-deep .dmp-item-list mat-expansion-panel-header{padding:0 11px!important;height:40px!important}@media (max-width: 767px){::ng-deep .dmp-item-list mat-expansion-panel-header{padding:0 20px!important;height:36px!important}}::ng-deep .dmp-item-list mat-expansion-panel-header mat-panel-title{width:100%}::ng-deep .dmp-item-list mat-expansion-panel-header mat-panel-title .item{width:100%}.group-header{display:flex}.group-header mat-icon{margin-left:10px}.layer-selector-body-wrapper{position:absolute;left:1em;top:10em;z-index:1000;max-width:calc(100vw - 8em);display:flex;flex-direction:column;transition:width .3s ease,max-width .3s ease;border-radius:5px}.layer-selector-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:move;z-index:1001}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons{justify-content:space-between}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .icon-left{order:1;margin-right:auto}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .toggle-icon{order:3}.layer-selector-body-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}.layer-selector-body-wrapper.collapsed .layer-selector-body{display:none}.layer-selector-body-wrapper.collapsed .drag-handle-selector{width:100%;min-width:100%;box-sizing:border-box}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content{width:100%}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons{width:100%;justify-content:space-between;gap:6px}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon{font-size:18px!important;flex-shrink:0}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.icon-left{cursor:default!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.toggle-icon{cursor:pointer!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.toggle-icon:hover{color:#d3d3d3!important}.layer-selector-body-wrapper .ol-control{border-radius:0}.layer-selector-body-wrapper .group-header{color:#fff;padding:4px 14px}@media (max-width: 767px){.layer-selector-body-wrapper{right:.5em;bottom:4em;max-width:calc(100vw - 7em);left:.5em;width:calc(100vw - 7em)}.layer-selector-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}@media (min-width: 768px) and (max-width: 1024px){.layer-selector-body-wrapper{right:3.5em;bottom:.5em;max-width:calc(100vw - 2em)}.layer-selector-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}.drag-handle-selector{display:flex;justify-content:flex-end;border-radius:5px 5px 0 0;padding:0 2px;cursor:move;background:#4c4d51}.drag-handle-content,.drag-handle-icons{display:flex;align-items:center;width:100%}.drag-handle-icons mat-icon{color:#fff;font-size:18px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-left{cursor:default!important}.toggle-icon{cursor:pointer!important}.toggle-icon:hover{color:#d3d3d3!important}::ng-deep .layer-selector-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:#4c4d51;box-shadow:0 4px 20px #00000026;width:100%;max-width:100%;max-height:317px;min-height:120px;overflow-y:auto}::ng-deep .layer-selector-body::-webkit-scrollbar{width:12px}::ng-deep .layer-selector-body::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .layer-selector-body::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .layer-selector-body::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .layer-selector-body::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}@media (max-width: 767px){::ng-deep .layer-selector-body{width:100%;max-height:70vh;min-height:140px}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body{width:100%;max-width:445px;max-height:76vh;min-height:110px}}::ng-deep .layer-selector-body .search-section{display:flex;align-items:center;gap:6px;padding:8px 12px 6px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section{padding:6px 8px 4px;gap:4px}}::ng-deep .layer-selector-body .search-section mat-form-field{flex:1}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-text-field-wrapper{padding-bottom:0;background:#6d6f73}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-text-field-wrapper:hover{box-shadow:none!important}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-wrapper{padding-bottom:0;margin-bottom:0}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-form-field-infix{padding-bottom:6px;min-height:auto}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-outline{background:#fff}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-outline-thick{color:#1976d2}::ng-deep .layer-selector-body .search-section mat-form-field input{font-size:13px;padding:3px 0}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-form-field input{font-size:12px}}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-label{color:#fff;font-weight:500;font-size:13px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-label{font-size:12px}}::ng-deep .layer-selector-body .search-section mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0;margin-top:0}::ng-deep .layer-selector-body .search-section mat-icon{color:#fff;cursor:pointer;padding:6px;border-radius:4px;transition:all .2s ease;font-size:24px;width:24px;height:24px;display:flex;justify-content:center;align-items:center}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-icon{font-size:20px;width:20px;height:20px;padding:4px}}::ng-deep .layer-selector-body .search-section mat-icon:hover{color:#f9fafb}::ng-deep .layer-selector-body .item-list{flex:1;max-height:660px;width:100%}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list{padding:4px;max-height:calc(60vh - 80px)}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body .item-list{max-height:calc(77vh - 78px)}}::ng-deep .layer-selector-body .item-list .group{overflow:hidden;box-shadow:0 -2px 2px #4868b20a,0 2px 2px #6a6f7517,0 1px 2px #4868b214}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel{box-shadow:none!important;border-radius:0!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header{padding:0 11px;height:40px;background:#4c4d51!important}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header{padding:0 20px;height:36px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header:hover{background:#ffffff1a!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title{align-items:center;gap:6px;font-weight:600;color:#bdc1c3cc;font-size:17px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon{color:#bdc1c3cc;font-size:16px;width:16px;height:16px;transition:transform .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.lightbulb{color:#dfca0e}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.power-on{color:#4caf50}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.power-off{cursor:pointer;color:#e5281a}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content{background:#4d4f55}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:4px 0;background:#4d4f55}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:2px 0}}::ng-deep .layer-selector-body .item-list .group .item-list{padding:0;max-height:none}::ng-deep .layer-selector-body .item-list .group .item-list .layer-description{font-size:13px;padding:0 31px;color:#fffc}::ng-deep .layer-selector-body .item-list .group .item-list .item{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:6px;background:transparent;transition:all .2s ease;color:#fff;cursor:move;font-size:14px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item{gap:4px;padding:6px 8px}}::ng-deep .layer-selector-body .item-list .group .item-list .item:last-child{border-bottom:none}::ng-deep .layer-selector-body .item-list .group .item-list .item:hover{background-color:transparent;transition:all .2s ease}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left{display:flex;align-items:center;gap:3px;flex:1;min-width:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left .layer-info{cursor:pointer;color:#dfca0e;font-size:16px;width:16px;height:16px;flex-shrink:0;transition:all .2s ease;padding:2px;border-radius:50%}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left .layer-info{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left .layer-info:hover{color:#ccb913}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left span{font-size:13px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;flex:1;min-width:0;color:#fff}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left span{font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center{display:flex;align-items:center;gap:2px;flex-shrink:0;justify-content:center;position:relative;left:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center .icon-label{font-size:11px;opacity:.8;margin-right:4px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center .icon-label{font-size:9px;margin-right:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right{display:flex;align-items:center;flex:1;justify-content:flex-end;min-width:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right input[type=range]{width:80px;height:4px;margin:0;flex-shrink:0}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right input[type=range]{width:60px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon{flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.drag-indicator{color:#fff;font-size:16px;width:16px;height:16px;cursor:move}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.drag-indicator{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on{color:#4caf50;font-size:18px;width:18px;height:18px;cursor:pointer;padding:3px;border-radius:3px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on{font-size:16px;width:16px;height:16px;padding:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on:hover{background:#4caf5033}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off{color:#e5281a;font-size:18px;width:18px;height:18px;cursor:pointer;padding:3px;border-radius:3px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off{font-size:16px;width:16px;height:16px;padding:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off:hover{background:#f4433633}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.zoom-off{color:#e5281a;font-size:16px;width:16px;height:16px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.zoom-off{font-size:14px;width:14px;height:14px}}::ng-deep .mat-expansion-indicator svg{fill:#fff!important}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 15px #00000026;background:#fff;padding:10px 12px}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.item-list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.power-on{color:#4caf50}.power-off{cursor:pointer;color:#e5281a}.add-option{color:#4caf50}.add-option:hover{color:#37923a}::ng-deep .layer-selector-body .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}\n"] }]
1123
+ MatExpansionModule, MatInputModule, MatTooltipModule, MatOptionModule, MatDialogModule, MatDialogContent, MatDialogActions], template: "<div\n #layerSelectorBody\n class=\"layer-selector-body-wrapper\"\n cdkDrag\n cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"layerSelectorDragPosition\"\n (cdkDragEnded)=\"onLayerSelectorDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n\n <div class=\"drag-handle-selector\" cdkDragHandle>\n <div class=\"drag-handle-content\">\n <div class=\"drag-handle-icons\">\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"Lag\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n layers\n </mat-icon>\n <mat-icon class=\"toggle-icon\" (click)=\"toggleLayerSelector()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n </div>\n\n <div class=\"ol-unselectable ol-control layer-selector-body\" *ngIf=\"!collapsed\">\n <div class=\"search-section\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-label>Filtrer</mat-label>\n <input \n matInput \n type=\"text\" \n [(ngModel)]=\"searchText\" \n (ngModelChange)=\"filteredLayerGroups=setfilteredGroups()\"\n placeholder=\"Skriv for at filtrere...\"\n />\n </mat-form-field>\n <mat-icon (click)=\"clearSearchText()\">undo</mat-icon>\n </div>\n <div\n cdkDropList\n [cdkDropListData]=\"filteredLayerGroups\"\n (cdkDropListDropped)=\"dropGroup($event, filteredLayerGroups)\"\n class=\"item-list\">\n @for (group of filteredLayerGroups; track group.id; let gIndex = $index) {\n <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n <mat-expansion-panel [(expanded)]=\"group.expanded\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n @if (group.expanded) {\n <mat-icon>arrow_upward</mat-icon>\n }\n @if (!group.expanded) {\n <mat-icon>arrow_downward</mat-icon> \n }\n {{ group.name }} \n <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n @if (group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\" \n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon> \n }\n @if (!group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n </mat-panel-title>\n </mat-expansion-panel-header>\n\n <div\n cdkDropList\n [cdkDropListData]=\"group.layers\"\n (cdkDropListDropped)=\"dropLayer($event, group)\"\n class=\"item-list\">\n @for (layer of group.layers; track layer.id; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n <div class=\"item-left\">\n <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n @if(layer.infoUrl) {\n <mat-icon \n class=\"layer-info\"\n matTooltip=\"Vis ekstra informationer i ny tab\"\n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n (click)=\"openUrl(layer.infoUrl)\"\n matTooltipPosition=\"above\"\n >info</mat-icon>\n }\n <span>{{ layer.name }}</span> \n <mat-icon></mat-icon>\n </div>\n <div class=\"item-center\">\n @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">browser_not_supported\n </mat-icon>\n }\n @if (layer.hasErrors) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n\n }\n </div>\n <div class=\"item-right\">\n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\" \n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.id, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"layer-description\">{{ layer.description }}</div>\n @if (showLegend) {\n <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n }\n </mat-expansion-panel>\n }\n </div>\n </mat-expansion-panel>\n </div>\n }\n </div>\n <div class=\"group-header\">Mine Temaer\n <mat-icon (click)=\"toggleDmpSearch(true)\"\n class=\"power-on\"\n matTooltip=\"S\u00F8g\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">add\n </mat-icon>\n </div>\n @if (dmpLayers.length > 0) {\n <div class=\"dmp-item-list\">\n @for (layer of dmpLayers; track layer.datasetId; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"true\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"item\">\n <div class=\"dmp-item-container\">\n <mat-icon (click)=\"deleteDmpLayer(layer, $event)\" class=\"delete-icon\" \n matTooltip=\"Slet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">delete\n </mat-icon>\n <div class=\"dmp-item-title-section\">\n <div class=\"dmp-item-title\">\n <span class=\"title-text\">{{ layer.title }}</span>\n </div>\n </div>\n @if (layer.hasErrors) {\n <div class=\"dmp-item-signal-center\">\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n </div>\n }\n <div class=\"dmp-item-controls\">\n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.datasetId, $event)\" class=\"power-on\" \n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.datasetId, $event)\" class=\"power-off\"\n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.datasetId, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n </mat-expansion-panel>\n }\n </div>\n }\n <div *ngIf=\"filteredBackgroundLayerGroups && filteredBackgroundLayerGroups.length > 0\" class=\"group-header\">Baggrundskort</div>\n <div\n cdkDropList\n [cdkDropListData]=\"filteredBackgroundLayerGroups\"\n (cdkDropListDropped)=\"dropGroup($event, filteredBackgroundLayerGroups)\"\n class=\"item-list\">\n @for (group of filteredBackgroundLayerGroups; track group.id; let gIndex = $index) {\n <div class=\"group\" cdkDrag cdkDragPreviewDisabled>\n <mat-expansion-panel [(expanded)]=\"group.expanded\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n @if (group.expanded) {\n <mat-icon>arrow_upward</mat-icon>\n }\n @if (!group.expanded) {\n <mat-icon>arrow_downward</mat-icon> \n }\n {{ group.name }} \n <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n @if (group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\" \n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon> \n }\n @if (!group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n </mat-panel-title>\n </mat-expansion-panel-header>\n\n <div\n cdkDropList\n [cdkDropListData]=\"group.layers\"\n (cdkDropListDropped)=\"dropLayer($event, group)\"\n class=\"item-list\">\n @for (layer of group.layers; track layer.id; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"item\" cdkDrag cdkDragPreviewDisabled>\n <div class=\"item-left\">\n <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n <span>{{ layer.name }}</span>\n </div>\n <div class=\"item-center\">\n @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">browser_not_supported\n </mat-icon>\n }\n @if (layer.hasErrors) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n\n }\n </div>\n <div class=\"item-right\">\n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\" \n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.id, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"layer-description\">{{ layer.description }}</div>\n @if (showLegend) {\n <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n }\n </mat-expansion-panel>\n }\n </div>\n </mat-expansion-panel>\n </div>\n }\n </div>\n </div>\n <ng-template #dmpDialog>\n @if (dmpSearchMode) {\n <mat-dialog-content>\n <div class=\"dialog-header\">\n <div class=\"search-section\">\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-label>S\u00F8g</mat-label>\n <input \n matInput \n type=\"text\" \n [(ngModel)]=\"dmpSearchText\" \n (ngModelChange)=\"searchDmp()\"\n placeholder=\"Skriv for at s\u00F8ge...\"\n />\n </mat-form-field>\n <mat-icon (click)=\"clearDmpSearchText()\">undo</mat-icon>\n </div>\n <mat-icon \n class=\"close-button\" \n (click)=\"toggleDmpSearch(false)\"\n matTooltip=\"Lukke\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"left\">\n close\n </mat-icon>\n </div>\n </mat-dialog-content>\n }\n\n @if (dmpLayerResults.length > 0) {\n <div class=\"dmp-search-panel\">\n <mat-option *ngFor=\"let result of dmpLayerResults\" [value]=\"result\" class=\"search-result-option\">\n <mat-expansion-panel expanded=\"false\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <span class=\"result-title\">{{ result.title }}</span>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div><span class=\"field-label\">Status:</span><span class=\"field-value\"> {{ result.availability }}</span></div>\n <div><span class=\"field-label\">Kategori:</span><span class=\"field-value\"> {{ result.category }}</span></div>\n <div><span class=\"field-label\">Beskrivelse:</span><span class=\"field-value\"> {{ result.description }}</span></div>\n <div><span class=\"field-label\">Tags:</span><span class=\"field-value\"> {{ result.tags?.join(', ') }}</span></div>\n <div *ngIf=\"result.metaDataUrl\">\n <span class=\"field-label\">Metadata:</span>\n <a [href]=\"result.metaDataUrl\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n Vis metadata\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div *ngIf=\"result.license && result.license.url\">\n <span class=\"field-label\">Licens:</span>\n <a [href]=\"result.license.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n {{ result.license.title }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div *ngIf=\"result.dataLiabilityAgreement && result.dataLiabilityAgreement.url\">\n <span class=\"field-label\">Dataansvarsaftale:</span>\n <a [href]=\"result.dataLiabilityAgreement.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n {{ result.dataLiabilityAgreement.title }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div class=\"add-layer-section\">\n <span class=\"field-label\">Tilf\u00F8j {{ result.serviceType }}:</span>\n <mat-icon (click)=\"addDmpLayer(result)\" class=\"add-option\"\n matTooltip=\"Tilf\u00F8j\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">add\n </mat-icon>\n </div>\n </mat-expansion-panel>\n </mat-option>\n </div>}\n </ng-template>\n</div>", styles: [".layer-info{cursor:pointer}.legend-thumbnail{max-width:200px;max-height:200px;width:auto;height:auto;border:2px solid #dee2e6;padding:6px}::ng-deep .dmp-dialog-content mat-dialog-content{padding:12px 16px!important;background:#4c4d51}::ng-deep .dmp-dialog-content mat-dialog-content .search-section{display:flex;align-items:center;gap:6px;padding:0}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field{flex:1}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-text-field-wrapper{padding-bottom:0;background:#6d6f73;border-radius:0!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-text-field-wrapper:hover{box-shadow:none!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important;border-width:1.5px!important;transition:border-color .3s ease,border-width .3s ease}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field ::ng-deep .mdc-text-field{border-radius:0!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-form-field-infix{padding-bottom:6px;min-height:auto}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field input{font-size:13px;padding:3px 0;color:#fff}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field input::placeholder{opacity:1;color:#fff!important;transition:opacity .3s ease}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field ::ng-deep .mat-mdc-form-field.mat-focused input::placeholder,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field ::ng-deep .mat-mdc-form-field.mat-form-field-should-float input::placeholder{opacity:1;color:#fff!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mat-mdc-form-field-subscript-wrapper{height:0;margin-top:0}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field label{color:#fff!important;font-size:13px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field ::ng-deep .mdc-floating-label{transition:all .3s cubic-bezier(.4,0,.2,1)}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field ::ng-deep .mat-mdc-form-field.mat-focused .mdc-floating-label,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field ::ng-deep .mat-mdc-form-field .mdc-floating-label--float-above{left:12px!important;top:0!important;transform:translateY(-50%) scale(.75)}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-icon{color:#fff;cursor:pointer;padding:6px;border-radius:4px;transition:all .2s ease;font-size:24px;width:24px;height:24px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-icon:hover{color:#f9fafb}::ng-deep .dmp-dialog-content mat-dialog-actions{display:none}.dialog-header{position:relative}.dialog-header .search-section{padding-right:40px}.dialog-header .close-button{position:absolute;top:0;right:0;color:#fff;cursor:pointer;padding:6px;border-radius:50%;transition:all .2s ease;font-size:24px;width:24px;height:24px;display:flex;justify-content:center;align-items:center;z-index:10;background-color:#ffffff1a}.dialog-header .close-button:hover{background:#d1d0d01a}.field-label{color:#d4d8da!important;font-size:13px!important;margin-right:6px}.open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px;font-size:13px;transition:color .2s ease}.open-link:hover{color:#2180c9!important;text-decoration:underline!important}.open-link .link-icon{font-size:16px;width:16px;height:16px}.field-value{color:#fff!important;font-size:13px!important}.add-layer-section{display:flex;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.add-layer-section .field-label{flex:1}.search-result-option{padding:0!important}.search-result-option mat-expansion-panel{box-shadow:none!important;background:#4d4f55;margin-bottom:4px;border-radius:5px!important}.search-result-option mat-expansion-panel:last-child{margin-bottom:0}.search-result-option mat-expansion-panel mat-expansion-panel-header{background:#4c4d51!important;padding:0 16px;height:48px}.search-result-option mat-expansion-panel mat-expansion-panel-header:hover{background:#ffffff1a!important}.search-result-option mat-expansion-panel mat-expansion-panel-header mat-panel-title{color:#fff;font-size:13px}.search-result-option mat-expansion-panel mat-expansion-panel-header mat-panel-title .result-title{color:#fff;font-size:13px}.search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#4d4f55}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:8px;display:flex;align-items:flex-start;gap:4px}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}.search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div mat-icon.add-option{margin-left:auto}.dmp-search-panel{background:#4c4d51;overflow-y:scroll;max-height:300px;margin-top:10px}.dmp-search-panel span{color:#fff;font-size:13px}.dmp-search-panel::-webkit-scrollbar{width:12px}.dmp-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.dmp-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.dmp-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.dmp-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.dmp-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.dmp-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.dmp-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.dmp-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-dialog-container .dmp-search-panel{max-height:400px;margin-top:0;border-radius:4px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.dmp-item-list .dmp-item-container{display:flex;align-items:center;width:100%;gap:8px;min-width:0}.dmp-item-list .dmp-item-container .delete-icon{color:#e5281a;font-size:18px;width:18px;height:18px;cursor:pointer;flex-shrink:0;margin-right:4px}@media (max-width: 767px){.dmp-item-list .dmp-item-container .delete-icon{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .delete-icon:hover{background:#e5281a33;border-radius:3px}.dmp-item-list .dmp-item-container .dmp-item-title-section{display:flex;align-items:center;flex:1;min-width:0;overflow:hidden}.dmp-item-list .dmp-item-container .dmp-item-title{flex:1;min-width:0;overflow:hidden}.dmp-item-list .dmp-item-container .dmp-item-title .title-text{color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-title .title-text{font-size:11px}}.dmp-item-list .dmp-item-container .dmp-item-signal-center{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:30px}.dmp-item-list .dmp-item-container .dmp-item-signal-center .zoom-off{color:#e5281a;font-size:16px;width:16px;height:16px}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-signal-center .zoom-off{font-size:14px;width:14px;height:14px}}.dmp-item-list .dmp-item-container .dmp-item-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon{flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-on{color:#4caf50;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-on{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-on:hover{background:#4caf5033;border-radius:3px}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-off{color:#e5281a;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-off{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-controls mat-icon.power-off:hover{background:#e5281a33;border-radius:3px}.dmp-item-list .dmp-item-container .dmp-item-controls input[type=range]{width:80px;height:4px;margin:0;flex-shrink:0}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-controls input[type=range]{width:60px}}::ng-deep .dmp-item-list mat-expansion-panel-header{padding:0 11px!important;height:40px!important}@media (max-width: 767px){::ng-deep .dmp-item-list mat-expansion-panel-header{padding:0 20px!important;height:36px!important}}::ng-deep .dmp-item-list mat-expansion-panel-header mat-panel-title{width:100%}::ng-deep .dmp-item-list mat-expansion-panel-header mat-panel-title .item{width:100%}.group-header{display:flex}.group-header mat-icon{margin-left:10px}.layer-selector-body-wrapper{position:absolute;left:1em;top:10em;z-index:1000;max-width:calc(100vw - 8em);display:flex;flex-direction:column;transition:width .3s ease,max-width .3s ease;border-top-left-radius:5px;border-top-right-radius:5px}.layer-selector-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:move;z-index:1001}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons{justify-content:space-between}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .icon-left{order:1;margin-right:auto}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .toggle-icon{order:3}.layer-selector-body-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}.layer-selector-body-wrapper.collapsed .layer-selector-body{display:none}.layer-selector-body-wrapper.collapsed .drag-handle-selector{width:100%;min-width:100%;box-sizing:border-box;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content{width:100%}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons{width:100%;justify-content:space-between;gap:6px}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon{font-size:18px!important;flex-shrink:0}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.icon-left{cursor:default!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.toggle-icon{cursor:pointer!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.toggle-icon:hover{color:#d3d3d3!important}.layer-selector-body-wrapper .ol-control{border-radius:0}.layer-selector-body-wrapper .group-header{color:#fff;padding:4px 14px;font-size:13px}@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}}.layer-selector-body-wrapper .mat-mdc-dialog-container .mdc-dialog__surface{background:#4c4d51!important;border-radius:5px}.drag-handle-selector{display:flex;justify-content:flex-end;border-radius:5px 5px 0 0;padding:0 2px;cursor:move;background:#4c4d51}.drag-handle-content,.drag-handle-icons{display:flex;align-items:center;width:100%}.drag-handle-icons mat-icon{color:#fff;font-size:18px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-left{cursor:default!important}.toggle-icon{cursor:pointer!important}.toggle-icon:hover{color:#d3d3d3!important}::ng-deep .layer-selector-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:#4c4d51;width:100%;max-width:100%;max-height:317px;min-height:120px;overflow-y:auto;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}::ng-deep .layer-selector-body::-webkit-scrollbar{width:12px}::ng-deep .layer-selector-body::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .layer-selector-body::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .layer-selector-body::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .layer-selector-body::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}@media (max-width: 767px){::ng-deep .layer-selector-body{width:100%;max-height:70vh;min-height:140px}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body{width:100%;max-width:445px;max-height:76vh;min-height:110px}}::ng-deep .layer-selector-body .search-section{display:flex;align-items:center;gap:6px;padding:8px 12px 6px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section{padding:6px 8px 4px;gap:4px}}::ng-deep .layer-selector-body .search-section mat-form-field{flex:1}::ng-deep .layer-selector-body .search-section mat-form-field input{font-size:13px;padding:3px 0}::ng-deep .layer-selector-body .search-section mat-form-field .mat-form-field-label{color:#fff;font-weight:500;font-size:13px}::ng-deep .layer-selector-body .search-section mat-icon{color:#fff;cursor:pointer;padding:6px;border-radius:4px;transition:all .2s ease;font-size:24px;width:24px;height:24px;display:flex;justify-content:center;align-items:center}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section mat-icon{font-size:20px;width:20px;height:20px;padding:4px}}::ng-deep .layer-selector-body .search-section mat-icon:hover{color:#f9fafb}::ng-deep .layer-selector-body .item-list{flex:1;max-height:660px;width:100%}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list{padding:4px;max-height:calc(60vh - 80px)}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body .item-list{max-height:calc(77vh - 78px)}}::ng-deep .layer-selector-body .item-list .group{overflow:hidden;box-shadow:0 -2px 2px #4868b20a,0 2px 2px #6a6f7517,0 1px 2px #4868b214}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel{box-shadow:none!important;border-radius:0!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header{padding:0 11px;height:40px;background:#4c4d51!important}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header{padding:0 20px;height:36px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header:hover{background:#ffffff1a!important}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title{align-items:center;gap:6px;font-weight:600;color:#bdc1c3cc;font-size:13px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon{color:#bdc1c3cc;font-size:16px;width:16px;height:16px;transition:transform .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.lightbulb{color:#dfca0e}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.power-on{color:#4caf50}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel mat-expansion-panel-header mat-panel-title mat-icon.power-off{cursor:pointer;color:#e5281a}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content{background:#4d4f55}::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:4px 0;background:#4d4f55}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:2px 0}}::ng-deep .layer-selector-body .item-list .group .item-list{padding:0;max-height:none}::ng-deep .layer-selector-body .item-list .group .item-list .layer-description{font-size:13px;padding:0 31px;color:#fffc}::ng-deep .layer-selector-body .item-list .group .item-list .item{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:6px;background:transparent;transition:all .2s ease;color:#fff;cursor:move;font-size:14px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item{gap:4px;padding:6px 8px}}::ng-deep .layer-selector-body .item-list .group .item-list .item:last-child{border-bottom:none}::ng-deep .layer-selector-body .item-list .group .item-list .item:hover{background-color:transparent;transition:all .2s ease}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left{display:flex;align-items:center;gap:3px;flex:1;min-width:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left .layer-info{cursor:pointer;color:#dfca0e;font-size:16px;width:16px;height:16px;flex-shrink:0;transition:all .2s ease;padding:2px;border-radius:50%}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left .layer-info{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left .layer-info:hover{color:#ccb913}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left span{font-size:13px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;flex:1;min-width:0;color:#fff}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-left span{font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center{display:flex;align-items:center;gap:2px;flex-shrink:0;justify-content:center;position:relative;left:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center .icon-label{font-size:11px;opacity:.8;margin-right:4px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-center .icon-label{font-size:9px;margin-right:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right{display:flex;align-items:center;flex:1;justify-content:flex-end;min-width:0}::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right input[type=range]{width:80px;height:4px;margin:0;flex-shrink:0}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item .item-right input[type=range]{width:60px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon{flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.drag-indicator{color:#fff;font-size:16px;width:16px;height:16px;cursor:move}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.drag-indicator{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on{color:#4caf50;font-size:18px;width:18px;height:18px;cursor:pointer;padding:3px;border-radius:3px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on{font-size:16px;width:16px;height:16px;padding:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-on:hover{background:#4caf5033}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off{color:#e5281a;font-size:18px;width:18px;height:18px;cursor:pointer;padding:3px;border-radius:3px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off{font-size:16px;width:16px;height:16px;padding:2px}}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.power-off:hover{background:#f4433633}::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.zoom-off{color:#e5281a;font-size:16px;width:16px;height:16px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item-list .item mat-icon.zoom-off{font-size:14px;width:14px;height:14px}}::ng-deep .mat-expansion-indicator svg{fill:#fff!important}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 15px #00000026;background:#fff;padding:10px 12px}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.item-list.cdk-drop-list-dragging .item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.power-on{color:#4caf50}.power-off{cursor:pointer;color:#e5281a}.add-option{color:#4caf50}.add-option:hover{color:#37923a}::ng-deep .layer-selector-body .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}\n"] }]
1126
1124
  }], propDecorators: { contentBody: [{
1127
1125
  type: ViewChild,
1128
1126
  args: ['layerSelectorBody', { static: false }]
@@ -1732,11 +1730,11 @@ class ConfirmDialogComponent {
1732
1730
  this.dialogRef.close(choice);
1733
1731
  }
1734
1732
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
1735
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", ngImport: i0, template: "\n@if(data.title) {\n <h2 mat-dialog-title>{{ data.title }}</h2>\n}\n<mat-dialog-content>\n <p>{{ data.message }}</p>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n <!-- Sekund\u00E6r handling -->\n @if(data.secondaryText) {\n <button mat-button (click)=\"choose('secondary')\">\n {{ data.secondaryText }}\n </button>\n }\n\n <!-- Prim\u00E6r handling -->\n <button mat-raised-button color=\"primary\" (click)=\"choose('primary')\">\n {{ data.primaryText }}\n </button>\n</mat-dialog-actions>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] });
1733
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", ngImport: i0, template: "\n@if(data.title) {\n <h2 mat-dialog-title>{{ data.title }}</h2>\n}\n<mat-dialog-content>\n <p>{{ data.message }}</p>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n <!-- Sekund\u00E6r handling -->\n @if(data.secondaryText) {\n <button mat-button (click)=\"choose('secondary')\">\n {{ data.secondaryText }}\n </button>\n }\n\n <!-- Prim\u00E6r handling -->\n <button mat-raised-button color=\"primary\" (click)=\"choose('primary')\">\n {{ data.primaryText }}\n </button>\n</mat-dialog-actions>\n", styles: [":host{display:block}::ng-deep .mat-mdc-dialog-container{--mdc-dialog-container-shape: 12px}h2[mat-dialog-title]{font-weight:600}mat-dialog-actions button[mat-button]{color:#0009}mat-dialog-actions button[mat-button]:hover{background-color:#0000000a}mat-dialog-actions button[mat-raised-button]{font-weight:500;background:#f95738;color:#fff;border-radius:40px;box-shadow:0 2px 4px #0003}mat-dialog-actions button[mat-raised-button]:hover{box-shadow:0 1px 2px #0000001f,0 4px 5px #00000024,0 2px 4px -1px #0003}@media (max-width: 599px){mat-dialog-content{padding:0 16px 16px}mat-dialog-actions{flex-direction:column-reverse;align-items:stretch}mat-dialog-actions button{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] });
1736
1734
  }
1737
1735
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
1738
1736
  type: Component,
1739
- args: [{ selector: 'app-confirm-dialog', imports: [CommonModule, MatDialogModule, MatButtonModule, MatDialogTitle, MatDialogContent, MatDialogActions], template: "\n@if(data.title) {\n <h2 mat-dialog-title>{{ data.title }}</h2>\n}\n<mat-dialog-content>\n <p>{{ data.message }}</p>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n <!-- Sekund\u00E6r handling -->\n @if(data.secondaryText) {\n <button mat-button (click)=\"choose('secondary')\">\n {{ data.secondaryText }}\n </button>\n }\n\n <!-- Prim\u00E6r handling -->\n <button mat-raised-button color=\"primary\" (click)=\"choose('primary')\">\n {{ data.primaryText }}\n </button>\n</mat-dialog-actions>\n" }]
1737
+ args: [{ selector: 'app-confirm-dialog', imports: [CommonModule, MatDialogModule, MatButtonModule, MatDialogTitle, MatDialogContent, MatDialogActions], template: "\n@if(data.title) {\n <h2 mat-dialog-title>{{ data.title }}</h2>\n}\n<mat-dialog-content>\n <p>{{ data.message }}</p>\n</mat-dialog-content>\n\n<mat-dialog-actions align=\"end\">\n <!-- Sekund\u00E6r handling -->\n @if(data.secondaryText) {\n <button mat-button (click)=\"choose('secondary')\">\n {{ data.secondaryText }}\n </button>\n }\n\n <!-- Prim\u00E6r handling -->\n <button mat-raised-button color=\"primary\" (click)=\"choose('primary')\">\n {{ data.primaryText }}\n </button>\n</mat-dialog-actions>\n", styles: [":host{display:block}::ng-deep .mat-mdc-dialog-container{--mdc-dialog-container-shape: 12px}h2[mat-dialog-title]{font-weight:600}mat-dialog-actions button[mat-button]{color:#0009}mat-dialog-actions button[mat-button]:hover{background-color:#0000000a}mat-dialog-actions button[mat-raised-button]{font-weight:500;background:#f95738;color:#fff;border-radius:40px;box-shadow:0 2px 4px #0003}mat-dialog-actions button[mat-raised-button]:hover{box-shadow:0 1px 2px #0000001f,0 4px 5px #00000024,0 2px 4px -1px #0003}@media (max-width: 599px){mat-dialog-content{padding:0 16px 16px}mat-dialog-actions{flex-direction:column-reverse;align-items:stretch}mat-dialog-actions button{width:100%}}\n"] }]
1740
1738
  }], ctorParameters: () => [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
1741
1739
  type: Inject,
1742
1740
  args: [MAT_DIALOG_DATA]
@@ -2396,6 +2394,7 @@ class ToolboxComponent {
2396
2394
  _layoutService = inject(LayoutService);
2397
2395
  _searchService = inject(SearchProviderService);
2398
2396
  _POSITION_STORAGE_KEY = 'toolbox_position';
2397
+ _profileService = inject(ProfileService);
2399
2398
  _originalMapWidth = 0;
2400
2399
  _originalMapHeight = 0;
2401
2400
  pointClickKey;
@@ -3232,7 +3231,12 @@ class ToolboxComponent {
3232
3231
  _loadPosition() {
3233
3232
  try {
3234
3233
  const savedPosition = localStorage.getItem(this._POSITION_STORAGE_KEY);
3235
- if (savedPosition) {
3234
+ if (this._profileService.getProfileVersionChanged() &&
3235
+ this.profile?.toolboxInitialPosition) {
3236
+ //Profile version changed in backend, use that
3237
+ this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this._POSITION_STORAGE_KEY, this.profile.toolboxInitialPosition);
3238
+ }
3239
+ else if (savedPosition) {
3236
3240
  this.dragPosition = JSON.parse(savedPosition);
3237
3241
  }
3238
3242
  else if (this.profile?.toolboxInitialPosition) {
@@ -3552,11 +3556,11 @@ class ToolboxComponent {
3552
3556
  }));
3553
3557
  }
3554
3558
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToolboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3555
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToolboxComponent, isStandalone: true, selector: "map-toolbox", inputs: { map: "map", showMeasureDistance: "showMeasureDistance", showMeasureArea: "showMeasureArea", collapsed: "collapsed", settings: "settings", profile: "profile", WKTInputEnabled: "WKTInputEnabled", deleteEnabled: "deleteEnabled" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toolbox-wrapper\" \n cdkDrag \n cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\">\n <div class=\"drag-handle-toolbox\" cdkDragHandle>\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"V\u00E6rkt\u00F8jskasse\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n handyman\n </mat-icon> \n <div class=\"right-icons\"> \n <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n \n <div class=\"toolbox-container\" [class.collapsed]=\"collapsed\">\n @if(!collapsed) {\n <div class=\"toolbox-content\">\n <div class=\"all-tools-container\">\n <div class=\"main-tools\">\n @if(!settings?.undoDisabled) {\n <img \n [src]=\"undoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"undo()\" \n matTooltip=\"Fortryd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Undo\">\n\n <img \n [src]=\"redoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"redo()\" \n matTooltip=\"Gendan\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Redo\">\n }\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startShowInfo()\" \n [class.active]=\"activeMode === 'show-info'\"\n matTooltip=\"Vejledning til anvendelse af systemet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Vejledning til anvendelse af systemet\">\n <img \n [src]=\"sogPunktBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"togglePointSearch()\" \n [class.active]=\"activeMode === 'search-point'\"\n matTooltip=\"S\u00F8g punkt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"S\u00F8g punkt\">\n \n <img \n [src]=\"sogPolygonBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"togglePolygonSearch()\" \n [class.active]=\"activeMode === 'search-polygon'\"\n matTooltip=\"S\u00F8g polygon\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"S\u00F8g polygon\">\n <img \n [src]=\"openCowiPageBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'cowi'\"\n (click)=\"openCowiPage()\" \n matTooltip=\"COWI\u00B4s Gadefoto\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"COWI\u00B4s Gadefoto\">\n <img \n [src]=\"skrafotoBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'skrafoto'\"\n (click)=\"openSkraafotoPage()\" \n matTooltip=\"Skr\u00E5foto\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Skr\u00E5foto\">\n \n <img \n [src]=\"streetViewBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'streetview'\"\n (click)=\"openGoogleStreetviewPage()\" \n matTooltip=\"Google Streetview\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Google Streetview\">\n <img \n [src]=\"fremhaevBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'select-highlight'\"\n (click)=\"startSelectFeatureHighlight()\" \n matTooltip=\"Vejledning til anvendelse af systemet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fremh\u00E6v\">\n\n <mat-slide-toggle [(ngModel)]=\"snap\" (change)=\"onSnapChange()\">Snap</mat-slide-toggle>\n @if(settings.editEnabled) {\n <img \n [src]=\"editIconBase64\" \n [class.active]=\"activeMode === 'edit'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEdit()\" \n matTooltip=\"V\u00E6lg og vis dokumenter fra liste\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"V\u00E6lg og vis dokumenter fra liste\">\n\n <img \n [src]=\"removePointsIconBase64\" \n [class.active]=\"activeMode === 'edit-remove'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEditRemovePoints()\" \n matTooltip=\"Fjern punkter\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fjern punkter\">\n }\n @if(settings.cutHoleEnabled) {\n <img \n [src]=\"trimIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'clip-hole'\" \n (click)=\"clipHole()\" \n matTooltip=\"Klip hul i flade\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Klip hul\">\n }\n @if(settings.splitEnabled) {\n <img \n [src]=\"splitIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'split'\"\n (click)=\"split()\" \n matTooltip=\"Sk\u00E6r over\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Sk\u00E6r over\">\n }\n @if(settings.changeTypeEnabled) {\n <mat-icon \n class=\"compact-icon\" \n [class.active]=\"activeMode === 'change-type'\" \n (click)=\"startChangeType()\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"Skift type\" \n matTooltipPosition=\"below\">\n find_replace\n </mat-icon>\n }\n @if(settings.mergeEnabled) {\n <mat-icon \n class=\"compact-icon\" \n (click)=\"startMergeFeatures()\" \n matTooltipPosition=\"below\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"Saml flader\" \n [class.active]=\"activeMode === 'merge-features'\">\n merge\n </mat-icon>\n }\n @if(settings.centerPoint) {\n <mat-icon\n (click)=\"setCenterPoint()\"\n matTooltipPosition=\"below\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"S\u00E6t centerpunkt\" \n [class.active]=\"activeMode === 'center-point'\"\n >adjust</mat-icon>\n }\n </div>\n <div class=\"geometry-tools\">\n <img \n [src]=\"featureSearchIconBase64\" \n [class.active]=\"activeMode === 'search-feature'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleFeatureSearch()\" \n matTooltip=\"Udpegede objekter\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Punkt\">\n\n <img \n [src]=\"polygonIconBase64\" \n [class.active]=\"activeMode === 'draw'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDraw()\"\n matTooltip=\"Indtegn objekt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Indtegn objekt\">\n <!-- <img \n [src]=\"lineStringIconBase64\" \n [class.active]=\"activeMode === 'draw-linestring'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDrawLineString()\" \n matTooltip=\"LineString\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"LineString\">\n \n @if(selectedGeometrySetting && selectedGeometrySetting.icons && selectedGeometrySetting.icons.length > 0) {\n @for(iconUrl of selectedGeometrySetting.icons;track iconUrl) {\n <img \n [src]=\"iconUrl\" \n [class.active]=\"activeMode === 'draw-point'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDrawPointUrl(iconUrl)\" \n matTooltip=\"Punkter\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Punkter\">}\n } @else {\n <img \n [src]=\"pointIconBase64\" \n [class.active]=\"activeMode === 'draw-point'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDrawPoint()\" \n matTooltip=\"Punkter\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Punkter\">\n } -->\n <img \n [src]=\"wktIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'wkt-input'\"\n (click)=\"activateShowInputWKT()\" \n matTooltip=\"Inds\u00E6t WKT streng for at importere elementet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"WKT\">\n </div>\n <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n <div class=\"measurement-print-tools\">\n <div class=\"measurement-tools\">\n @if (deleteEnabled) {\n <img \n [src]=\"deleteIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'delete'\"\n (click)=\"startDelete()\" \n matTooltip=\"Slet element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Slet\">\n }\n @if (showMeasureDistance) {\n <img \n [src]=\"measureDistanceIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'measure-distance'\"\n (click)=\"startMeasureLength()\" \n matTooltip=\"M\u00E5l afstand\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"M\u00E5le afstand\">\n }\n @if(showMeasureArea) {\n <img \n [src]=\"measureAreaIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'measure-area'\"\n (click)=\"startMeasureArea()\" \n matTooltip=\"M\u00E5l areal\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"M\u00E5le areal\">\n }\n </div>\n @if(profile.showPrint) {\n <div class=\"tool-separator print-separator\"></div>\n <div class=\"print-tools\">\n <img \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'Print'\"\n (click)=\"startPrintMode()\" \n matTooltip=\"Udskriv\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Udskriv\">\n <img \n [src]=\"drawBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'PrintDraw'\"\n (click)=\"startDrawMode()\" \n matTooltip=\"Tegnev\u00E6rkt\u00F8j til print\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Tegn\">\n </div>\n }\n </div>\n </div>\n @if(showInputWKT) {\n <div class=\"wkt-section\">\n <input class=\"compact-input\" [(ngModel)]=\"WKTString\">\n <div class=\"wkt-actions\">\n <button class=\"compact-button primary\" (click)=\"ReadWKT()\">Indl\u00E6s WKT</button>\n <button class=\"compact-button\" (click)=\"cancelWKT()\">Annuller</button>\n </div>\n </div>\n }\n @if(profile.showPrint) {\n @if(active === \"Print\") {\n <div class=\"print-config\">\n <img \n matTooltip=\"Sk\u00E6rmprint af kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"doPrint()\" \n alt=\"Udskriv\"> \n <span class=\"icon-separator\">i</span>\n <select id=\"formatSelector\" [(ngModel)]=\"format\">\n <option value=\"image/png\" selected>.PNG</option>\n <option value=\"image/jpeg\">.JPG</option>\n </select>\n <select id=\"dimensionSelector\" [(ngModel)]=\"dimId\" (change)=\"handleDimensionSelected()\">\n <option value=\"99\" selected></option>\n <option value=\"0\">1920 X 1080</option>\n <option value=\"1\">1680 X 1050</option>\n <option value=\"2\">1280 X 800</option>\n <option value=\"3\">800 X 600</option>\n </select>\n <input type=\"text\" [(ngModel)]=\"mapWidth\"/> \n <span class=\"icon-separator\">x</span>\n <input type=\"text\" [(ngModel)]=\"mapHeight\"/>\n <button (click)=\"setNewMapDimensions()\">V\u00E6lg</button>\n </div>\n }\n @if(active === \"PrintDraw\") {\n <div class=\"print-draw-config\">\n <span class=\"icon-separator\">Label</span>\n <input type=\"text\" [(ngModel)]=\"printDrawLabel\"/>\n <select id=\"drawToolSelector\" [(ngModel)]=\"printDrawTool\" (change)=\"handlePrintDrawToolChanged()\">\n <option value=\"Arrow\" selected>Pil</option>\n <option value=\"Point\">Punkt</option>\n <option value=\"LineString\">Linje</option>\n <option value=\"Polygon\">Polygon</option>\n <option value=\"Circle\">Cirkel</option>\n <option value=\"Square\">Kvadrat</option>\n <option value=\"Rectangle\">Firkant</option>\n </select>\n <button class=\"compact-button\" (click)=\"handleClearPrintDrawFeatures()\">Ryd</button>\n </div>\n }\n }\n </div>\n @if (activeMode === 'draw' || activeMode === 'search-feature') {\n <mat-select class=\"geometry-selector\" (selectionChange)=\"drawItemChanged($event)\" [(ngModel)]=\"selectedDrawItem\"> \n @for (drawItem of drawItems; track drawItem) {\n <mat-option [value]=\"drawItem\">{{drawItem.name}} <img *ngIf=\"drawItem.iconUrl\" class=\"compact-icon custom-image-icon\" [src]=\"drawItem.iconUrl\"></mat-option>\n }\n </mat-select> \n }\n }\n </div>\n @if (activeMode === 'search-feature' && filteredResults.length > 0) {\n <div class=\"geometry-search-panel\">\n <div class=\"buffer-item\">\n <mat-label>Buffer</mat-label>\n <input matInput type=\"number\" name=\"buffer\" [(ngModel)]=\"bufferInMeters\">\n <mat-label>m</mat-label>\n </div>\n <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n <div class=\"item-right\">\n <img \n [src]=\"objectSearchCopyIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event)\" \n matTooltip=\"Kopier\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier\">\n <img \n [src]=\"objectSearchCutIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"cutBySearchedObject(item, $event)\" \n matTooltip=\"Fjern\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fjern\">\n <img \n [src]=\"objectSearchCutIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"splitBySearchedObject(item, $event)\" \n matTooltip=\"Opsk\u00E6r\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Opsk\u00E6r\">\n <img \n [src]=\"objectSearchCopyWithBufferIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event, true)\" \n matTooltip=\"Kopier med buffer\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier med buffer\">\n <img \n [src]=\"objectSearchZoomIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"zoomSearchedObject(item, $event)\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Zoom\">\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleItemInfo(item, $event)\" \n matTooltip=\"Info\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Info\">\n </div> \n @if (item.showMetadata) {\n <div class=\"metadata-panel\">\n @for(feature of item.metadata; track feature) {\n <div class=\"feature-item\">\n <div *ngFor=\"let kv of (feature | keyvalue)\">\n {{ kv.value.name }}:\n <ng-container [ngSwitch]=\"kv.value.kind\">\n <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n {{ kv.key }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n <span *ngSwitchDefault>{{ kv.value.data }}</span>\n </ng-container>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </mat-option>\n </div>\n }\n @if ((activeMode === \"search-point\" || activeMode === \"search-polygon\") && filteredResults.length > 0) {\n <div class=\"geometry-search-panel\">\n <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n </div>\n </mat-option>\n </div>\n }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;left:1em;top:10em;z-index:10;max-width:95vw;box-shadow:0 2px 10px #0000001a;background:#4c4d51;border-radius:5px;width:auto;min-width:90px;transition:width .3s ease,max-width .3s ease}.toolbox-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}.toolbox-wrapper.collapsed .drag-handle-toolbox{width:90px;padding:8px 10px;box-sizing:border-box}.toolbox-wrapper.collapsed .drag-handle-toolbox .icon-left{margin-right:0;cursor:default!important}.toolbox-wrapper.collapsed .drag-handle-toolbox .right-icons .toggle-icon{cursor:pointer!important}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.geometry-search-panel{position:absolute;right:0;z-index:1000;width:380px}.geometry-search-panel::-webkit-scrollbar{width:12px}.geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.geometry-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.geometry-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.geometry-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.geometry-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.geometry-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.search-result-option{display:block!important;padding:0!important;margin:0!important;background:transparent!important}.search-result-option:last-child{border-bottom:none}.search-result-option .mdc-list-item__primary-text{width:100%!important;margin:0!important;padding:0!important}.result-title{display:block;padding:8px 6px;top:0;z-index:1;font-weight:600;font-size:17px;color:#bdc1c3cc}.search-result-item{display:flex;align-items:center;padding:8px 16px;cursor:pointer;transition:background-color .15s ease}.search-result-item:hover{background:#ffffff1a}.item-left{flex:1;min-width:0}.item-header{font-size:13px;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.search-result-item.loading .item-header{background-size:200% 100%;height:16px;border-radius:4px;width:80%}.search-result-item.loading .item-header:before{display:none}.search-empty-state{padding:32px 16px;text-align:center;color:#757575}.search-empty-state .empty-icon{font-size:40px;width:40px;height:40px;color:#bdbdbd;margin-bottom:12px}.search-empty-state .empty-title{font-size:14px;font-weight:500;margin-bottom:4px}.search-empty-state .empty-subtitle{font-size:12px;color:#9e9e9e}@media (max-width: 768px){.geometry-search-panel{width:calc(100vw - 40px);max-width:400px;left:50%;max-height:70vh}.search-result-item{padding:8px 12px}.item-header{font-size:13px}.item-header:before{width:5px;height:5px;margin-right:8px}.result-title{padding:10px 12px;font-size:12px}}@media (max-width: 480px){.geometry-search-panel{width:calc(100vw - 32px);max-height:60vh}.search-result-item{padding:6px 10px}.item-header{font-size:12px;-webkit-line-clamp:1}.item-header:before{width:4px;height:4px;margin-right:6px}}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px;border:white;border-width:2px}::ng-deep .geometry-search-panel{border-radius:5px!important;max-height:320px!important;background:#4c4d51!important;box-shadow:0 8px 24px #00000026!important;margin-top:10px;overflow-y:auto!important;padding:8px!important;max-width:430px}::ng-deep .geometry-search-panel .buffer-item{align-items:end}::ng-deep .geometry-search-panel .buffer-item input{width:45px;margin:5px}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-direction:column;padding:8px 16px;cursor:pointer;transition:background-color .15s ease;gap:8px}::ng-deep .geometry-search-panel .search-result-item:hover{background:#ffffff1a}::ng-deep .geometry-search-panel .item-left{flex:1;min-width:0;width:100%}::ng-deep .geometry-search-panel .item-header{font-size:13px;color:#fff;display:block;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}::ng-deep .geometry-search-panel .item-right{display:flex;align-items:center;gap:4px;flex-wrap:wrap;width:100%}::ng-deep .geometry-search-panel .item-right .custom-image-icon{background:#fff!important;flex-shrink:0}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:#fff;line-height:1.5}::ng-deep .geometry-search-panel mat-label{color:#fff}.drag-handle-toolbox{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;gap:8px;border-radius:5px 5px 0 0;color:#fff}.drag-handle-toolbox mat-icon{font-size:18px}.drag-handle-toolbox mat-icon:first-child{display:flex;align-items:center;justify-content:center}.drag-handle-toolbox .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}:host{position:relative;display:flex;justify-content:center}:host.expanded{width:auto;min-width:320px;padding:12px}.toolbox-container{display:flex;flex-direction:column;align-items:center;width:100%;background:#4c4d51;width:auto;gap:6px;min-width:32px;transition:all .3s ease;cursor:default;border-radius:0 0 5px 5px}.toolbox-content{display:flex;flex-direction:column;width:100%;gap:3px;animation:slideDown .3s cubic-bezier(.4,0,.2,1)}.all-tools-container{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;width:100%;justify-content:flex-start;overflow-x:hidden;padding:2px 8px}.all-tools-container::-webkit-scrollbar{height:4px}.all-tools-container::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}.main-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.main-tools ::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:12px;font-weight:500;color:#fff}.geometry-selector{width:34%;margin-left:12em;padding:6px}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:6px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border-radius:6px;background:#6d6f73;transition:all .2s ease;border:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73;border:none}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.geometry-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.geometry-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.geometry-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-select-panel{min-width:fit-content!important;max-width:320px!important;background:#4c4d51!important;border:none!important;border-radius:8px!important;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014!important;margin-top:6px!important;padding:4px 0!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:14px!important;min-height:36px!important;padding:8px 14px!important;transition:all .15s ease!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover:not(.mat-mdc-option-disabled){background:#444849!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-active{background:color-mix(in srgb,#000 60%,transparent)!important;color:#fff!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;font-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.geometry-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;background:none;border-radius:8px;padding:3px 0}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-tools .compact-icon,.print-tools .compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.measurement-tools .compact-icon.custom-image-icon,.print-tools .compact-icon.custom-image-icon{background:none}.measurement-tools .compact-icon.custom-image-icon img,.print-tools .compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.measurement-tools .compact-icon.custom-image-icon.active,.print-tools .compact-icon.custom-image-icon.active{background:#f7b528!important;border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.measurement-tools .compact-icon.custom-image-icon.active img,.print-tools .compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.measurement-tools .compact-icon.custom-image-icon.active:hover,.print-tools .compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active),.print-tools .compact-icon.custom-image-icon:hover:not(.active){background:#ffffff1a;border-color:none;box-shadow:none}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active) img,.print-tools .compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.print-tools .compact-icon{background:none;color:#fff}.print-tools .compact-icon.active{background:#f7b528!important;border-color:transparent}.print-tools .compact-icon.active:hover{background:#ffffff1a}.print-tools .compact-icon:hover:not(.active){box-shadow:0 4px 12px #0000004d;opacity:.9}.tool-separator{width:1px;height:24px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.3),transparent)}.tool-separator.print-separator{height:28px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent)}.compact-icon{cursor:pointer;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}.compact-icon.active{color:#fff;background:#f7b528!important;border-color:transparent;box-shadow:0 8px 25px #667eea4d}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon:hover:not(.active){color:#fff;background:color-mix(in srgb,#000 70%,transparent);box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:2px;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease,transform .2s ease}.compact-icon.custom-image-icon.active{background:#ffffff1a;border-color:none;box-shadow:none}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon.custom-image-icon:hover:not(.active){background:#ffffff1a;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.wkt-section{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease;padding:10px 8px}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:6px;background:#6d6f73;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;letter-spacing:.4px;min-height:32px;display:flex;align-items:center;justify-content:center;flex:1;box-shadow:0 1px 2px #0000000d}.compact-button.primary.active{background:#f7b528;box-shadow:0 8px 25px #667eea4d;color:#fff}.compact-button.primary.active:hover{box-shadow:0 12px 35px #667eea66}.compact-button.secondary{background:color-mix(in srgb,#000 20%,transparent);color:#fff}.compact-button.secondary:hover{background:color-mix(in srgb,#5a6268 60%,transparent)}.compact-input{padding:8px 10px;border-radius:6px;font-size:13px;transition:all .2s ease;background:#6d6f73;border:none;color:#fff}.compact-input:focus{outline:none;background:#6d6f73;border:1px solid #97989b}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:transparent;border:none;border-radius:8px;animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:#6d6f73;border:none;color:#fff;border-radius:6px;font-size:12px;height:32px;min-height:32px;padding:0 10px}.print-config select:focus,.print-config input:focus,.print-draw-config select:focus,.print-draw-config input:focus{outline:none}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:#6d6f73!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:#6ccb78;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;box-shadow:0 0 #0000,0 0 #0000,0 0 #0000;transition:all .2s ease}.print-config button:hover,.print-draw-config button:hover{box-shadow:0 4px 12px #10b9814d}.print-config .icon-separator,.print-draw-config .icon-separator{color:#fff}@media (max-width: 768px){.toolbox-wrapper{left:.5em;top:8em;max-width:calc(100vw - 2.5em)}.drag-handle-toolbox{padding:3px 6px;gap:6px}.drag-handle-toolbox mat-icon{font-size:16px;width:16px;height:16px}.toggle-icon{font-size:16px!important;width:16px!important;height:16px!important}.toolbox-container{padding:8px;min-width:28px;max-width:calc(100vw - 3em)}:host{padding:8px;min-width:32px}:host.expanded{min-width:280px;padding:10px}.all-tools-container{flex-wrap:wrap;gap:6px;max-height:50vh;overflow-y:auto;padding:0;-ms-overflow-style:none;scrollbar-width:none}.all-tools-container::-webkit-scrollbar{display:none}.main-tools,.geometry-tools,.measurement-print-tools,.print-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.compact-icon{width:28px;height:28px;flex-shrink:0}.measurement-print-tools{padding:3px 0}.geometry-selector{width:30%;margin-bottom:8px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:28px;min-height:28px;padding:0 8px;font-size:12px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:12px}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 2em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config,.print-draw-config{flex-direction:column;align-items:stretch;gap:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:11px;padding:4px 8px;height:28px;min-height:28px}.print-config input,.print-draw-config input{width:50px}.print-config button,.print-draw-config button{padding:4px 8px;font-size:11px;height:28px}.wkt-section .compact-input{font-size:12px;padding:6px 8px}.wkt-section .compact-button{font-size:11px;padding:5px 8px;min-height:28px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:11px!important}}@media (max-width: 480px){.toolbox-wrapper{left:.25em;top:6em;transform-origin:left top;max-width:calc(100vw - .5em)}.drag-handle-toolbox{padding:2px 4px;gap:4px}.drag-handle-toolbox mat-icon{font-size:14px;width:14px;height:14px}.toggle-icon{font-size:14px!important;width:14px!important;height:14px!important}.toolbox-container{padding:2px;min-width:24px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;letter-spacing:.2px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
3559
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToolboxComponent, isStandalone: true, selector: "map-toolbox", inputs: { map: "map", showMeasureDistance: "showMeasureDistance", showMeasureArea: "showMeasureArea", collapsed: "collapsed", settings: "settings", profile: "profile", WKTInputEnabled: "WKTInputEnabled", deleteEnabled: "deleteEnabled" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toolbox-wrapper\" \n cdkDrag \n cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\">\n <div class=\"drag-handle-toolbox\" cdkDragHandle>\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"V\u00E6rkt\u00F8jskasse\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n handyman\n </mat-icon> \n <div class=\"right-icons\"> \n <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n \n <div class=\"toolbox-container\" [class.collapsed]=\"collapsed\">\n @if(!collapsed) {\n <div class=\"toolbox-content\">\n <div class=\"all-tools-container\">\n <div class=\"main-tools\">\n @if(!settings?.undoDisabled) {\n <img \n [src]=\"undoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"undo()\" \n matTooltip=\"Fortryd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Undo\">\n\n <img \n [src]=\"redoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"redo()\" \n matTooltip=\"Gendan\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Redo\">\n }\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startShowInfo()\" \n [class.active]=\"activeMode === 'show-info'\"\n matTooltip=\"Vejledning til anvendelse af systemet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Vejledning til anvendelse af systemet\">\n <img \n [src]=\"sogPunktBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"togglePointSearch()\" \n [class.active]=\"activeMode === 'search-point'\"\n matTooltip=\"S\u00F8g punkt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"S\u00F8g punkt\">\n \n <img \n [src]=\"sogPolygonBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"togglePolygonSearch()\" \n [class.active]=\"activeMode === 'search-polygon'\"\n matTooltip=\"S\u00F8g polygon\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"S\u00F8g polygon\">\n <img \n [src]=\"openCowiPageBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'cowi'\"\n (click)=\"openCowiPage()\" \n matTooltip=\"COWI\u00B4s Gadefoto\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"COWI\u00B4s Gadefoto\">\n <img \n [src]=\"skrafotoBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'skrafoto'\"\n (click)=\"openSkraafotoPage()\" \n matTooltip=\"Skr\u00E5foto\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Skr\u00E5foto\">\n \n <img \n [src]=\"streetViewBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'streetview'\"\n (click)=\"openGoogleStreetviewPage()\" \n matTooltip=\"Google Streetview\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Google Streetview\">\n <img \n [src]=\"fremhaevBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'select-highlight'\"\n (click)=\"startSelectFeatureHighlight()\" \n matTooltip=\"Vejledning til anvendelse af systemet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fremh\u00E6v\">\n\n <mat-slide-toggle [(ngModel)]=\"snap\" (change)=\"onSnapChange()\">Snap</mat-slide-toggle>\n @if(settings.editEnabled) {\n <img \n [src]=\"editIconBase64\" \n [class.active]=\"activeMode === 'edit'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEdit()\" \n matTooltip=\"V\u00E6lg og vis dokumenter fra liste\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"V\u00E6lg og vis dokumenter fra liste\">\n\n <img \n [src]=\"removePointsIconBase64\" \n [class.active]=\"activeMode === 'edit-remove'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEditRemovePoints()\" \n matTooltip=\"Fjern punkter\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fjern punkter\">\n }\n @if(settings.cutHoleEnabled) {\n <img \n [src]=\"trimIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'clip-hole'\" \n (click)=\"clipHole()\" \n matTooltip=\"Klip hul i flade\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Klip hul\">\n }\n @if(settings.splitEnabled) {\n <img \n [src]=\"splitIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'split'\"\n (click)=\"split()\" \n matTooltip=\"Sk\u00E6r over\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Sk\u00E6r over\">\n }\n @if(settings.changeTypeEnabled) {\n <mat-icon \n class=\"compact-icon\" \n [class.active]=\"activeMode === 'change-type'\" \n (click)=\"startChangeType()\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"Skift type\" \n matTooltipPosition=\"below\">\n find_replace\n </mat-icon>\n }\n @if(settings.mergeEnabled) {\n <mat-icon \n class=\"compact-icon\" \n (click)=\"startMergeFeatures()\" \n matTooltipPosition=\"below\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"Saml flader\" \n [class.active]=\"activeMode === 'merge-features'\">\n merge\n </mat-icon>\n }\n @if(settings.centerPoint) {\n <mat-icon\n (click)=\"setCenterPoint()\"\n matTooltipPosition=\"below\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"S\u00E6t centerpunkt\" \n [class.active]=\"activeMode === 'center-point'\"\n >adjust</mat-icon>\n }\n </div>\n <div class=\"geometry-tools\">\n <img \n [src]=\"featureSearchIconBase64\" \n [class.active]=\"activeMode === 'search-feature'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleFeatureSearch()\" \n matTooltip=\"Udpegede objekter\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Punkt\">\n\n <img \n [src]=\"polygonIconBase64\" \n [class.active]=\"activeMode === 'draw'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDraw()\"\n matTooltip=\"Indtegn objekt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Indtegn objekt\">\n <!-- <img \n [src]=\"lineStringIconBase64\" \n [class.active]=\"activeMode === 'draw-linestring'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDrawLineString()\" \n matTooltip=\"LineString\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"LineString\">\n \n @if(selectedGeometrySetting && selectedGeometrySetting.icons && selectedGeometrySetting.icons.length > 0) {\n @for(iconUrl of selectedGeometrySetting.icons;track iconUrl) {\n <img \n [src]=\"iconUrl\" \n [class.active]=\"activeMode === 'draw-point'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDrawPointUrl(iconUrl)\" \n matTooltip=\"Punkter\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Punkter\">}\n } @else {\n <img \n [src]=\"pointIconBase64\" \n [class.active]=\"activeMode === 'draw-point'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDrawPoint()\" \n matTooltip=\"Punkter\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Punkter\">\n } -->\n <img \n [src]=\"wktIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'wkt-input'\"\n (click)=\"activateShowInputWKT()\" \n matTooltip=\"Inds\u00E6t WKT streng for at importere elementet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"WKT\">\n </div>\n <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n <div class=\"measurement-print-tools\">\n <div class=\"measurement-tools\">\n @if (deleteEnabled) {\n <img \n [src]=\"deleteIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'delete'\"\n (click)=\"startDelete()\" \n matTooltip=\"Slet element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Slet\">\n }\n @if (showMeasureDistance) {\n <img \n [src]=\"measureDistanceIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'measure-distance'\"\n (click)=\"startMeasureLength()\" \n matTooltip=\"M\u00E5l afstand\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"M\u00E5le afstand\">\n }\n @if(showMeasureArea) {\n <img \n [src]=\"measureAreaIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'measure-area'\"\n (click)=\"startMeasureArea()\" \n matTooltip=\"M\u00E5l areal\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"M\u00E5le areal\">\n }\n </div>\n @if(profile.showPrint) {\n <div class=\"tool-separator print-separator\"></div>\n <div class=\"print-tools\">\n <img \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'Print'\"\n (click)=\"startPrintMode()\" \n matTooltip=\"Udskriv\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Udskriv\">\n <img \n [src]=\"drawBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'PrintDraw'\"\n (click)=\"startDrawMode()\" \n matTooltip=\"Tegnev\u00E6rkt\u00F8j til print\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Tegn\">\n </div>\n }\n </div>\n </div>\n @if(showInputWKT) {\n <div class=\"wkt-section\">\n <input class=\"compact-input\" [(ngModel)]=\"WKTString\">\n <div class=\"wkt-actions\">\n <button class=\"compact-button primary\" (click)=\"ReadWKT()\">Indl\u00E6s WKT</button>\n <button class=\"compact-button\" (click)=\"cancelWKT()\">Annuller</button>\n </div>\n </div>\n }\n @if(profile.showPrint) {\n @if(active === \"Print\") {\n <div class=\"print-config\">\n <img \n matTooltip=\"Sk\u00E6rmprint af kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"doPrint()\" \n alt=\"Udskriv\"> \n <span class=\"icon-separator\">i</span>\n <select id=\"formatSelector\" [(ngModel)]=\"format\">\n <option value=\"image/png\" selected>.PNG</option>\n <option value=\"image/jpeg\">.JPG</option>\n </select>\n <select id=\"dimensionSelector\" [(ngModel)]=\"dimId\" (change)=\"handleDimensionSelected()\">\n <option value=\"99\" selected></option>\n <option value=\"0\">1920 X 1080</option>\n <option value=\"1\">1680 X 1050</option>\n <option value=\"2\">1280 X 800</option>\n <option value=\"3\">800 X 600</option>\n </select>\n <input type=\"text\" [(ngModel)]=\"mapWidth\"/> \n <span class=\"icon-separator\">x</span>\n <input type=\"text\" [(ngModel)]=\"mapHeight\"/>\n <button (click)=\"setNewMapDimensions()\">V\u00E6lg</button>\n </div>\n }\n @if(active === \"PrintDraw\") {\n <div class=\"print-draw-config\">\n <span class=\"icon-separator\">Label</span>\n <input type=\"text\" [(ngModel)]=\"printDrawLabel\"/>\n <select id=\"drawToolSelector\" [(ngModel)]=\"printDrawTool\" (change)=\"handlePrintDrawToolChanged()\">\n <option value=\"Arrow\" selected>Pil</option>\n <option value=\"Point\">Punkt</option>\n <option value=\"LineString\">Linje</option>\n <option value=\"Polygon\">Polygon</option>\n <option value=\"Circle\">Cirkel</option>\n <option value=\"Square\">Kvadrat</option>\n <option value=\"Rectangle\">Firkant</option>\n </select>\n <button class=\"compact-button\" (click)=\"handleClearPrintDrawFeatures()\">Ryd</button>\n </div>\n }\n }\n </div>\n @if (activeMode === 'draw' || activeMode === 'search-feature') {\n <mat-select class=\"geometry-selector\" (selectionChange)=\"drawItemChanged($event)\" [(ngModel)]=\"selectedDrawItem\"> \n @for (drawItem of drawItems; track drawItem) {\n <mat-option [value]=\"drawItem\">{{drawItem.name}} <img *ngIf=\"drawItem.iconUrl\" class=\"compact-icon custom-image-icon\" [src]=\"drawItem.iconUrl\"></mat-option>\n }\n </mat-select> \n }\n }\n </div>\n @if (activeMode === 'search-feature' && filteredResults.length > 0) {\n <div class=\"geometry-search-panel\">\n <div class=\"buffer-item\">\n <mat-label>Buffer</mat-label>\n <input matInput type=\"number\" name=\"buffer\" [(ngModel)]=\"bufferInMeters\">\n <mat-label>m</mat-label>\n </div>\n <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n <div class=\"item-right\">\n <img \n [src]=\"objectSearchCopyIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event)\" \n matTooltip=\"Kopier\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier\">\n <img \n [src]=\"objectSearchCutIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"cutBySearchedObject(item, $event)\" \n matTooltip=\"Fjern\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fjern\">\n <img \n [src]=\"objectSearchCutIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"splitBySearchedObject(item, $event)\" \n matTooltip=\"Opsk\u00E6r\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Opsk\u00E6r\">\n <img \n [src]=\"objectSearchCopyWithBufferIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event, true)\" \n matTooltip=\"Kopier med buffer\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier med buffer\">\n <img \n [src]=\"objectSearchZoomIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"zoomSearchedObject(item, $event)\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Zoom\">\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleItemInfo(item, $event)\" \n matTooltip=\"Info\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Info\">\n </div> \n @if (item.showMetadata) {\n <div class=\"metadata-panel\">\n @for(feature of item.metadata; track feature) {\n <div class=\"feature-item\">\n <div *ngFor=\"let kv of (feature | keyvalue)\">\n {{ kv.value.name }}:\n <ng-container [ngSwitch]=\"kv.value.kind\">\n <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n {{ kv.key }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n <span *ngSwitchDefault>{{ kv.value.data }}</span>\n </ng-container>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </mat-option>\n </div>\n }\n @if ((activeMode === \"search-point\" || activeMode === \"search-polygon\") && filteredResults.length > 0) {\n <div class=\"geometry-search-panel\">\n <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n </div>\n </mat-option>\n </div>\n }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;left:1em;top:10em;z-index:10;max-width:95vw;box-shadow:0 2px 10px #0000001a;background:#4c4d51;border-radius:5px;width:auto;min-width:90px;transition:width .3s ease,max-width .3s ease}.toolbox-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}.toolbox-wrapper.collapsed .drag-handle-toolbox{width:90px;padding:8px 10px;box-sizing:border-box}.toolbox-wrapper.collapsed .drag-handle-toolbox .icon-left{margin-right:0;cursor:default!important}.toolbox-wrapper.collapsed .drag-handle-toolbox .right-icons .toggle-icon{cursor:pointer!important}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.geometry-search-panel{position:absolute;right:0;z-index:1000;width:380px}.geometry-search-panel::-webkit-scrollbar{width:12px}.geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.geometry-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.geometry-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.geometry-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.geometry-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.geometry-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.search-result-option{display:block!important;padding:0!important;margin:0!important;background:transparent!important}.search-result-option:last-child{border-bottom:none}.search-result-option .mdc-list-item__primary-text{width:100%!important;margin:0!important;padding:0!important}.result-title{display:block;padding:8px 6px;top:0;z-index:1;font-weight:600;font-size:13px;color:#bdc1c3cc}.search-result-item{display:flex;align-items:center;padding:8px 16px;cursor:pointer;transition:background-color .15s ease}.search-result-item:hover{background:#ffffff1a}.item-left{flex:1;min-width:0}.item-header{font-size:13px;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.search-result-item.loading .item-header{background-size:200% 100%;height:16px;border-radius:4px;width:80%}.search-result-item.loading .item-header:before{display:none}.search-empty-state{padding:32px 16px;text-align:center;color:#757575}.search-empty-state .empty-icon{font-size:40px;width:40px;height:40px;color:#bdbdbd;margin-bottom:12px}.search-empty-state .empty-title{font-size:14px;font-weight:500;margin-bottom:4px}.search-empty-state .empty-subtitle{font-size:12px;color:#9e9e9e}@media (max-width: 768px){.geometry-search-panel{width:calc(100vw - 40px);max-width:400px;left:50%;max-height:70vh}.search-result-item{padding:8px 12px}.item-header{font-size:13px}.item-header:before{width:5px;height:5px;margin-right:8px}.result-title{padding:10px 12px;font-size:13px}}@media (max-width: 480px){.geometry-search-panel{width:calc(100vw - 32px);max-height:60vh}.search-result-item{padding:6px 10px}.item-header{font-size:12px;-webkit-line-clamp:1}.item-header:before{width:4px;height:4px;margin-right:6px}}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px;border:white;border-width:2px}::ng-deep .geometry-search-panel{border-radius:5px!important;max-height:320px!important;background:#4c4d51!important;box-shadow:0 8px 24px #00000026!important;margin-top:10px;overflow-y:auto!important;padding:8px!important;max-width:430px}::ng-deep .geometry-search-panel .buffer-item{align-items:end}::ng-deep .geometry-search-panel .buffer-item input{width:45px;margin:5px}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-direction:column;padding:8px 16px;cursor:pointer;transition:background-color .15s ease;gap:8px}::ng-deep .geometry-search-panel .search-result-item:hover{background:#ffffff1a}::ng-deep .geometry-search-panel .item-left{flex:1;min-width:0;width:100%}::ng-deep .geometry-search-panel .item-header{font-size:13px;color:#fff;display:block;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}::ng-deep .geometry-search-panel .item-right{display:flex;align-items:center;gap:4px;flex-wrap:wrap;width:100%}::ng-deep .geometry-search-panel .item-right .custom-image-icon{background:#fff!important;flex-shrink:0}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:#fff;line-height:1.5}::ng-deep .geometry-search-panel mat-label{color:#fff}.drag-handle-toolbox{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;gap:8px;border-radius:5px;color:#fff}.drag-handle-toolbox mat-icon{font-size:18px}.drag-handle-toolbox mat-icon:first-child{display:flex;align-items:center;justify-content:center}.drag-handle-toolbox .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}:host{position:relative;display:flex;justify-content:center}:host.expanded{width:auto;min-width:320px;padding:12px}.toolbox-container{display:flex;flex-direction:column;align-items:center;width:100%;background:#4c4d51;width:auto;min-width:32px;transition:all .3s ease;cursor:default;border-radius:0 0 5px 5px}.toolbox-content{display:flex;flex-direction:column;width:100%;gap:3px;animation:slideDown .3s cubic-bezier(.4,0,.2,1)}.all-tools-container{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;width:100%;justify-content:flex-start;overflow-x:hidden;padding:2px 8px}.all-tools-container::-webkit-scrollbar{height:4px}.all-tools-container::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}.main-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.main-tools ::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:12px;font-weight:500;color:#fff}.geometry-selector{width:34%;margin-left:15em;padding:6px}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border-radius:6px;background:#6d6f73;transition:all .2s ease;border:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73;border:none}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.geometry-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.geometry-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.geometry-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-select-panel{min-width:fit-content!important;max-width:320px!important;background:#4c4d51!important;border:none!important;border-radius:8px!important;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014!important;margin-top:6px!important;padding:4px 0!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:14px!important;min-height:36px!important;padding:8px 14px!important;transition:all .15s ease!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover:not(.mat-mdc-option-disabled){background:#444849!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-active{background:color-mix(in srgb,#000 60%,transparent)!important;color:#fff!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;font-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.geometry-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;background:none;border-radius:8px;padding:3px 0}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-tools .compact-icon,.print-tools .compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.measurement-tools .compact-icon.custom-image-icon,.print-tools .compact-icon.custom-image-icon{background:none}.measurement-tools .compact-icon.custom-image-icon img,.print-tools .compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.measurement-tools .compact-icon.custom-image-icon.active,.print-tools .compact-icon.custom-image-icon.active{background:#f7b528!important;border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.measurement-tools .compact-icon.custom-image-icon.active img,.print-tools .compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.measurement-tools .compact-icon.custom-image-icon.active:hover,.print-tools .compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active),.print-tools .compact-icon.custom-image-icon:hover:not(.active){background:#ffffff1a;border-color:none;box-shadow:none}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active) img,.print-tools .compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.print-tools .compact-icon{background:none;color:#fff}.print-tools .compact-icon.active{background:#f7b528!important;border-color:transparent}.print-tools .compact-icon.active:hover{background:#ffffff1a}.print-tools .compact-icon:hover:not(.active){box-shadow:0 4px 12px #0000004d;opacity:.9}.tool-separator{width:1px;height:24px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.3),transparent)}.tool-separator.print-separator{height:28px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent)}.compact-icon{cursor:pointer;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}.compact-icon.active{color:#fff;background:#f7b528!important;border-color:transparent;box-shadow:0 8px 25px #667eea4d}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon:hover:not(.active){color:#fff;background:color-mix(in srgb,#000 70%,transparent);box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:2px;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease,transform .2s ease}.compact-icon.custom-image-icon.active{background:#ffffff1a;border-color:none;box-shadow:none}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon.custom-image-icon:hover:not(.active){background:#ffffff1a;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.wkt-section{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease;padding:10px 8px}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:5px;background:#6d6f73;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;letter-spacing:.4px;min-height:32px;display:flex;align-items:center;justify-content:center;flex:1;box-shadow:0 1px 2px #0000000d}.compact-button.primary.active{background:#f7b528;box-shadow:0 8px 25px #667eea4d;color:#fff}.compact-button.primary.active:hover{box-shadow:0 12px 35px #667eea66}.compact-button.secondary{background:color-mix(in srgb,#000 20%,transparent);color:#fff}.compact-button.secondary:hover{background:color-mix(in srgb,#5a6268 60%,transparent)}.compact-input{padding:8px 10px;border-radius:5px;font-size:13px;transition:all .2s ease;background:#6d6f73;border:none;color:#fff}.compact-input:focus{outline:none;background:#6d6f73;border:1px solid #97989b}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:transparent;border:none;border-radius:8px;animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:#6d6f73;border:none;color:#fff;border-radius:6px;font-size:12px;height:32px;min-height:32px;padding:0 10px}.print-config select:focus,.print-config input:focus,.print-draw-config select:focus,.print-draw-config input:focus{outline:none}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:#6d6f73!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:#6ccb78;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;box-shadow:0 0 #0000,0 0 #0000,0 0 #0000;transition:all .2s ease}.print-config button:hover,.print-draw-config button:hover{box-shadow:0 4px 12px #10b9814d}.print-config .icon-separator,.print-draw-config .icon-separator{color:#fff}@media (max-width: 768px){.toolbox-wrapper{left:.5em;top:8em;max-width:calc(100vw - 2.5em)}.drag-handle-toolbox{padding:3px 6px;gap:6px}.drag-handle-toolbox mat-icon{font-size:16px;width:16px;height:16px}.toggle-icon{font-size:16px!important;width:16px!important;height:16px!important}.toolbox-container{padding:8px;min-width:28px;max-width:calc(100vw - 3em)}:host{padding:8px;min-width:32px}:host.expanded{min-width:280px;padding:10px}.all-tools-container{flex-wrap:wrap;gap:6px;max-height:50vh;overflow-y:auto;padding:0;-ms-overflow-style:none;scrollbar-width:none}.all-tools-container::-webkit-scrollbar{display:none}.main-tools,.geometry-tools,.measurement-print-tools,.print-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.compact-icon{width:28px;height:28px;flex-shrink:0}.measurement-print-tools{padding:3px 0}.geometry-selector{width:30%;margin-bottom:8px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:28px;min-height:28px;padding:0 8px;font-size:12px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:12px}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 2em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config,.print-draw-config{flex-direction:column;align-items:stretch;gap:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:11px;padding:4px 8px;height:28px;min-height:28px}.print-config input,.print-draw-config input{width:50px}.print-config button,.print-draw-config button{padding:4px 8px;font-size:11px;height:28px}.wkt-section .compact-input{font-size:12px;padding:6px 8px}.wkt-section .compact-button{font-size:11px;padding:5px 8px;min-height:28px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:11px!important}}@media (max-width: 480px){.toolbox-wrapper{left:.25em;top:6em;transform-origin:left top;max-width:calc(100vw - .5em)}.drag-handle-toolbox{padding:2px 4px;gap:4px}.drag-handle-toolbox mat-icon{font-size:14px;width:14px;height:14px}.toggle-icon{font-size:14px!important;width:14px!important;height:14px!important}.toolbox-container{padding:2px;min-width:24px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;letter-spacing:.2px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
3556
3560
  }
3557
3561
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToolboxComponent, decorators: [{
3558
3562
  type: Component,
3559
- args: [{ selector: 'map-toolbox', imports: [FormsModule, CommonModule, MatIconModule, MatOptionModule, MatSelectModule, DragDropModule, MatTooltipModule, MatSlideToggleModule], template: "<div class=\"toolbox-wrapper\" \n cdkDrag \n cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\">\n <div class=\"drag-handle-toolbox\" cdkDragHandle>\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"V\u00E6rkt\u00F8jskasse\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n handyman\n </mat-icon> \n <div class=\"right-icons\"> \n <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n \n <div class=\"toolbox-container\" [class.collapsed]=\"collapsed\">\n @if(!collapsed) {\n <div class=\"toolbox-content\">\n <div class=\"all-tools-container\">\n <div class=\"main-tools\">\n @if(!settings?.undoDisabled) {\n <img \n [src]=\"undoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"undo()\" \n matTooltip=\"Fortryd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Undo\">\n\n <img \n [src]=\"redoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"redo()\" \n matTooltip=\"Gendan\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Redo\">\n }\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startShowInfo()\" \n [class.active]=\"activeMode === 'show-info'\"\n matTooltip=\"Vejledning til anvendelse af systemet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Vejledning til anvendelse af systemet\">\n <img \n [src]=\"sogPunktBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"togglePointSearch()\" \n [class.active]=\"activeMode === 'search-point'\"\n matTooltip=\"S\u00F8g punkt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"S\u00F8g punkt\">\n \n <img \n [src]=\"sogPolygonBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"togglePolygonSearch()\" \n [class.active]=\"activeMode === 'search-polygon'\"\n matTooltip=\"S\u00F8g polygon\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"S\u00F8g polygon\">\n <img \n [src]=\"openCowiPageBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'cowi'\"\n (click)=\"openCowiPage()\" \n matTooltip=\"COWI\u00B4s Gadefoto\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"COWI\u00B4s Gadefoto\">\n <img \n [src]=\"skrafotoBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'skrafoto'\"\n (click)=\"openSkraafotoPage()\" \n matTooltip=\"Skr\u00E5foto\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Skr\u00E5foto\">\n \n <img \n [src]=\"streetViewBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'streetview'\"\n (click)=\"openGoogleStreetviewPage()\" \n matTooltip=\"Google Streetview\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Google Streetview\">\n <img \n [src]=\"fremhaevBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'select-highlight'\"\n (click)=\"startSelectFeatureHighlight()\" \n matTooltip=\"Vejledning til anvendelse af systemet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fremh\u00E6v\">\n\n <mat-slide-toggle [(ngModel)]=\"snap\" (change)=\"onSnapChange()\">Snap</mat-slide-toggle>\n @if(settings.editEnabled) {\n <img \n [src]=\"editIconBase64\" \n [class.active]=\"activeMode === 'edit'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEdit()\" \n matTooltip=\"V\u00E6lg og vis dokumenter fra liste\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"V\u00E6lg og vis dokumenter fra liste\">\n\n <img \n [src]=\"removePointsIconBase64\" \n [class.active]=\"activeMode === 'edit-remove'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEditRemovePoints()\" \n matTooltip=\"Fjern punkter\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fjern punkter\">\n }\n @if(settings.cutHoleEnabled) {\n <img \n [src]=\"trimIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'clip-hole'\" \n (click)=\"clipHole()\" \n matTooltip=\"Klip hul i flade\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Klip hul\">\n }\n @if(settings.splitEnabled) {\n <img \n [src]=\"splitIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'split'\"\n (click)=\"split()\" \n matTooltip=\"Sk\u00E6r over\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Sk\u00E6r over\">\n }\n @if(settings.changeTypeEnabled) {\n <mat-icon \n class=\"compact-icon\" \n [class.active]=\"activeMode === 'change-type'\" \n (click)=\"startChangeType()\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"Skift type\" \n matTooltipPosition=\"below\">\n find_replace\n </mat-icon>\n }\n @if(settings.mergeEnabled) {\n <mat-icon \n class=\"compact-icon\" \n (click)=\"startMergeFeatures()\" \n matTooltipPosition=\"below\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"Saml flader\" \n [class.active]=\"activeMode === 'merge-features'\">\n merge\n </mat-icon>\n }\n @if(settings.centerPoint) {\n <mat-icon\n (click)=\"setCenterPoint()\"\n matTooltipPosition=\"below\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"S\u00E6t centerpunkt\" \n [class.active]=\"activeMode === 'center-point'\"\n >adjust</mat-icon>\n }\n </div>\n <div class=\"geometry-tools\">\n <img \n [src]=\"featureSearchIconBase64\" \n [class.active]=\"activeMode === 'search-feature'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleFeatureSearch()\" \n matTooltip=\"Udpegede objekter\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Punkt\">\n\n <img \n [src]=\"polygonIconBase64\" \n [class.active]=\"activeMode === 'draw'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDraw()\"\n matTooltip=\"Indtegn objekt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Indtegn objekt\">\n <!-- <img \n [src]=\"lineStringIconBase64\" \n [class.active]=\"activeMode === 'draw-linestring'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDrawLineString()\" \n matTooltip=\"LineString\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"LineString\">\n \n @if(selectedGeometrySetting && selectedGeometrySetting.icons && selectedGeometrySetting.icons.length > 0) {\n @for(iconUrl of selectedGeometrySetting.icons;track iconUrl) {\n <img \n [src]=\"iconUrl\" \n [class.active]=\"activeMode === 'draw-point'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDrawPointUrl(iconUrl)\" \n matTooltip=\"Punkter\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Punkter\">}\n } @else {\n <img \n [src]=\"pointIconBase64\" \n [class.active]=\"activeMode === 'draw-point'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDrawPoint()\" \n matTooltip=\"Punkter\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Punkter\">\n } -->\n <img \n [src]=\"wktIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'wkt-input'\"\n (click)=\"activateShowInputWKT()\" \n matTooltip=\"Inds\u00E6t WKT streng for at importere elementet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"WKT\">\n </div>\n <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n <div class=\"measurement-print-tools\">\n <div class=\"measurement-tools\">\n @if (deleteEnabled) {\n <img \n [src]=\"deleteIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'delete'\"\n (click)=\"startDelete()\" \n matTooltip=\"Slet element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Slet\">\n }\n @if (showMeasureDistance) {\n <img \n [src]=\"measureDistanceIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'measure-distance'\"\n (click)=\"startMeasureLength()\" \n matTooltip=\"M\u00E5l afstand\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"M\u00E5le afstand\">\n }\n @if(showMeasureArea) {\n <img \n [src]=\"measureAreaIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'measure-area'\"\n (click)=\"startMeasureArea()\" \n matTooltip=\"M\u00E5l areal\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"M\u00E5le areal\">\n }\n </div>\n @if(profile.showPrint) {\n <div class=\"tool-separator print-separator\"></div>\n <div class=\"print-tools\">\n <img \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'Print'\"\n (click)=\"startPrintMode()\" \n matTooltip=\"Udskriv\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Udskriv\">\n <img \n [src]=\"drawBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'PrintDraw'\"\n (click)=\"startDrawMode()\" \n matTooltip=\"Tegnev\u00E6rkt\u00F8j til print\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Tegn\">\n </div>\n }\n </div>\n </div>\n @if(showInputWKT) {\n <div class=\"wkt-section\">\n <input class=\"compact-input\" [(ngModel)]=\"WKTString\">\n <div class=\"wkt-actions\">\n <button class=\"compact-button primary\" (click)=\"ReadWKT()\">Indl\u00E6s WKT</button>\n <button class=\"compact-button\" (click)=\"cancelWKT()\">Annuller</button>\n </div>\n </div>\n }\n @if(profile.showPrint) {\n @if(active === \"Print\") {\n <div class=\"print-config\">\n <img \n matTooltip=\"Sk\u00E6rmprint af kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"doPrint()\" \n alt=\"Udskriv\"> \n <span class=\"icon-separator\">i</span>\n <select id=\"formatSelector\" [(ngModel)]=\"format\">\n <option value=\"image/png\" selected>.PNG</option>\n <option value=\"image/jpeg\">.JPG</option>\n </select>\n <select id=\"dimensionSelector\" [(ngModel)]=\"dimId\" (change)=\"handleDimensionSelected()\">\n <option value=\"99\" selected></option>\n <option value=\"0\">1920 X 1080</option>\n <option value=\"1\">1680 X 1050</option>\n <option value=\"2\">1280 X 800</option>\n <option value=\"3\">800 X 600</option>\n </select>\n <input type=\"text\" [(ngModel)]=\"mapWidth\"/> \n <span class=\"icon-separator\">x</span>\n <input type=\"text\" [(ngModel)]=\"mapHeight\"/>\n <button (click)=\"setNewMapDimensions()\">V\u00E6lg</button>\n </div>\n }\n @if(active === \"PrintDraw\") {\n <div class=\"print-draw-config\">\n <span class=\"icon-separator\">Label</span>\n <input type=\"text\" [(ngModel)]=\"printDrawLabel\"/>\n <select id=\"drawToolSelector\" [(ngModel)]=\"printDrawTool\" (change)=\"handlePrintDrawToolChanged()\">\n <option value=\"Arrow\" selected>Pil</option>\n <option value=\"Point\">Punkt</option>\n <option value=\"LineString\">Linje</option>\n <option value=\"Polygon\">Polygon</option>\n <option value=\"Circle\">Cirkel</option>\n <option value=\"Square\">Kvadrat</option>\n <option value=\"Rectangle\">Firkant</option>\n </select>\n <button class=\"compact-button\" (click)=\"handleClearPrintDrawFeatures()\">Ryd</button>\n </div>\n }\n }\n </div>\n @if (activeMode === 'draw' || activeMode === 'search-feature') {\n <mat-select class=\"geometry-selector\" (selectionChange)=\"drawItemChanged($event)\" [(ngModel)]=\"selectedDrawItem\"> \n @for (drawItem of drawItems; track drawItem) {\n <mat-option [value]=\"drawItem\">{{drawItem.name}} <img *ngIf=\"drawItem.iconUrl\" class=\"compact-icon custom-image-icon\" [src]=\"drawItem.iconUrl\"></mat-option>\n }\n </mat-select> \n }\n }\n </div>\n @if (activeMode === 'search-feature' && filteredResults.length > 0) {\n <div class=\"geometry-search-panel\">\n <div class=\"buffer-item\">\n <mat-label>Buffer</mat-label>\n <input matInput type=\"number\" name=\"buffer\" [(ngModel)]=\"bufferInMeters\">\n <mat-label>m</mat-label>\n </div>\n <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n <div class=\"item-right\">\n <img \n [src]=\"objectSearchCopyIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event)\" \n matTooltip=\"Kopier\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier\">\n <img \n [src]=\"objectSearchCutIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"cutBySearchedObject(item, $event)\" \n matTooltip=\"Fjern\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fjern\">\n <img \n [src]=\"objectSearchCutIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"splitBySearchedObject(item, $event)\" \n matTooltip=\"Opsk\u00E6r\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Opsk\u00E6r\">\n <img \n [src]=\"objectSearchCopyWithBufferIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event, true)\" \n matTooltip=\"Kopier med buffer\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier med buffer\">\n <img \n [src]=\"objectSearchZoomIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"zoomSearchedObject(item, $event)\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Zoom\">\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleItemInfo(item, $event)\" \n matTooltip=\"Info\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Info\">\n </div> \n @if (item.showMetadata) {\n <div class=\"metadata-panel\">\n @for(feature of item.metadata; track feature) {\n <div class=\"feature-item\">\n <div *ngFor=\"let kv of (feature | keyvalue)\">\n {{ kv.value.name }}:\n <ng-container [ngSwitch]=\"kv.value.kind\">\n <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n {{ kv.key }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n <span *ngSwitchDefault>{{ kv.value.data }}</span>\n </ng-container>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </mat-option>\n </div>\n }\n @if ((activeMode === \"search-point\" || activeMode === \"search-polygon\") && filteredResults.length > 0) {\n <div class=\"geometry-search-panel\">\n <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n </div>\n </mat-option>\n </div>\n }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;left:1em;top:10em;z-index:10;max-width:95vw;box-shadow:0 2px 10px #0000001a;background:#4c4d51;border-radius:5px;width:auto;min-width:90px;transition:width .3s ease,max-width .3s ease}.toolbox-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}.toolbox-wrapper.collapsed .drag-handle-toolbox{width:90px;padding:8px 10px;box-sizing:border-box}.toolbox-wrapper.collapsed .drag-handle-toolbox .icon-left{margin-right:0;cursor:default!important}.toolbox-wrapper.collapsed .drag-handle-toolbox .right-icons .toggle-icon{cursor:pointer!important}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.geometry-search-panel{position:absolute;right:0;z-index:1000;width:380px}.geometry-search-panel::-webkit-scrollbar{width:12px}.geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.geometry-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.geometry-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.geometry-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.geometry-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.geometry-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.search-result-option{display:block!important;padding:0!important;margin:0!important;background:transparent!important}.search-result-option:last-child{border-bottom:none}.search-result-option .mdc-list-item__primary-text{width:100%!important;margin:0!important;padding:0!important}.result-title{display:block;padding:8px 6px;top:0;z-index:1;font-weight:600;font-size:17px;color:#bdc1c3cc}.search-result-item{display:flex;align-items:center;padding:8px 16px;cursor:pointer;transition:background-color .15s ease}.search-result-item:hover{background:#ffffff1a}.item-left{flex:1;min-width:0}.item-header{font-size:13px;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.search-result-item.loading .item-header{background-size:200% 100%;height:16px;border-radius:4px;width:80%}.search-result-item.loading .item-header:before{display:none}.search-empty-state{padding:32px 16px;text-align:center;color:#757575}.search-empty-state .empty-icon{font-size:40px;width:40px;height:40px;color:#bdbdbd;margin-bottom:12px}.search-empty-state .empty-title{font-size:14px;font-weight:500;margin-bottom:4px}.search-empty-state .empty-subtitle{font-size:12px;color:#9e9e9e}@media (max-width: 768px){.geometry-search-panel{width:calc(100vw - 40px);max-width:400px;left:50%;max-height:70vh}.search-result-item{padding:8px 12px}.item-header{font-size:13px}.item-header:before{width:5px;height:5px;margin-right:8px}.result-title{padding:10px 12px;font-size:12px}}@media (max-width: 480px){.geometry-search-panel{width:calc(100vw - 32px);max-height:60vh}.search-result-item{padding:6px 10px}.item-header{font-size:12px;-webkit-line-clamp:1}.item-header:before{width:4px;height:4px;margin-right:6px}}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px;border:white;border-width:2px}::ng-deep .geometry-search-panel{border-radius:5px!important;max-height:320px!important;background:#4c4d51!important;box-shadow:0 8px 24px #00000026!important;margin-top:10px;overflow-y:auto!important;padding:8px!important;max-width:430px}::ng-deep .geometry-search-panel .buffer-item{align-items:end}::ng-deep .geometry-search-panel .buffer-item input{width:45px;margin:5px}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-direction:column;padding:8px 16px;cursor:pointer;transition:background-color .15s ease;gap:8px}::ng-deep .geometry-search-panel .search-result-item:hover{background:#ffffff1a}::ng-deep .geometry-search-panel .item-left{flex:1;min-width:0;width:100%}::ng-deep .geometry-search-panel .item-header{font-size:13px;color:#fff;display:block;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}::ng-deep .geometry-search-panel .item-right{display:flex;align-items:center;gap:4px;flex-wrap:wrap;width:100%}::ng-deep .geometry-search-panel .item-right .custom-image-icon{background:#fff!important;flex-shrink:0}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:#fff;line-height:1.5}::ng-deep .geometry-search-panel mat-label{color:#fff}.drag-handle-toolbox{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;gap:8px;border-radius:5px 5px 0 0;color:#fff}.drag-handle-toolbox mat-icon{font-size:18px}.drag-handle-toolbox mat-icon:first-child{display:flex;align-items:center;justify-content:center}.drag-handle-toolbox .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}:host{position:relative;display:flex;justify-content:center}:host.expanded{width:auto;min-width:320px;padding:12px}.toolbox-container{display:flex;flex-direction:column;align-items:center;width:100%;background:#4c4d51;width:auto;gap:6px;min-width:32px;transition:all .3s ease;cursor:default;border-radius:0 0 5px 5px}.toolbox-content{display:flex;flex-direction:column;width:100%;gap:3px;animation:slideDown .3s cubic-bezier(.4,0,.2,1)}.all-tools-container{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;width:100%;justify-content:flex-start;overflow-x:hidden;padding:2px 8px}.all-tools-container::-webkit-scrollbar{height:4px}.all-tools-container::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}.main-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.main-tools ::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:12px;font-weight:500;color:#fff}.geometry-selector{width:34%;margin-left:12em;padding:6px}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:6px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border-radius:6px;background:#6d6f73;transition:all .2s ease;border:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73;border:none}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.geometry-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.geometry-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.geometry-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-select-panel{min-width:fit-content!important;max-width:320px!important;background:#4c4d51!important;border:none!important;border-radius:8px!important;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014!important;margin-top:6px!important;padding:4px 0!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:14px!important;min-height:36px!important;padding:8px 14px!important;transition:all .15s ease!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover:not(.mat-mdc-option-disabled){background:#444849!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-active{background:color-mix(in srgb,#000 60%,transparent)!important;color:#fff!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;font-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.geometry-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;background:none;border-radius:8px;padding:3px 0}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-tools .compact-icon,.print-tools .compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.measurement-tools .compact-icon.custom-image-icon,.print-tools .compact-icon.custom-image-icon{background:none}.measurement-tools .compact-icon.custom-image-icon img,.print-tools .compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.measurement-tools .compact-icon.custom-image-icon.active,.print-tools .compact-icon.custom-image-icon.active{background:#f7b528!important;border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.measurement-tools .compact-icon.custom-image-icon.active img,.print-tools .compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.measurement-tools .compact-icon.custom-image-icon.active:hover,.print-tools .compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active),.print-tools .compact-icon.custom-image-icon:hover:not(.active){background:#ffffff1a;border-color:none;box-shadow:none}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active) img,.print-tools .compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.print-tools .compact-icon{background:none;color:#fff}.print-tools .compact-icon.active{background:#f7b528!important;border-color:transparent}.print-tools .compact-icon.active:hover{background:#ffffff1a}.print-tools .compact-icon:hover:not(.active){box-shadow:0 4px 12px #0000004d;opacity:.9}.tool-separator{width:1px;height:24px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.3),transparent)}.tool-separator.print-separator{height:28px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent)}.compact-icon{cursor:pointer;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}.compact-icon.active{color:#fff;background:#f7b528!important;border-color:transparent;box-shadow:0 8px 25px #667eea4d}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon:hover:not(.active){color:#fff;background:color-mix(in srgb,#000 70%,transparent);box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:2px;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease,transform .2s ease}.compact-icon.custom-image-icon.active{background:#ffffff1a;border-color:none;box-shadow:none}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon.custom-image-icon:hover:not(.active){background:#ffffff1a;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.wkt-section{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease;padding:10px 8px}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:6px;background:#6d6f73;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;letter-spacing:.4px;min-height:32px;display:flex;align-items:center;justify-content:center;flex:1;box-shadow:0 1px 2px #0000000d}.compact-button.primary.active{background:#f7b528;box-shadow:0 8px 25px #667eea4d;color:#fff}.compact-button.primary.active:hover{box-shadow:0 12px 35px #667eea66}.compact-button.secondary{background:color-mix(in srgb,#000 20%,transparent);color:#fff}.compact-button.secondary:hover{background:color-mix(in srgb,#5a6268 60%,transparent)}.compact-input{padding:8px 10px;border-radius:6px;font-size:13px;transition:all .2s ease;background:#6d6f73;border:none;color:#fff}.compact-input:focus{outline:none;background:#6d6f73;border:1px solid #97989b}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:transparent;border:none;border-radius:8px;animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:#6d6f73;border:none;color:#fff;border-radius:6px;font-size:12px;height:32px;min-height:32px;padding:0 10px}.print-config select:focus,.print-config input:focus,.print-draw-config select:focus,.print-draw-config input:focus{outline:none}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:#6d6f73!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:#6ccb78;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;box-shadow:0 0 #0000,0 0 #0000,0 0 #0000;transition:all .2s ease}.print-config button:hover,.print-draw-config button:hover{box-shadow:0 4px 12px #10b9814d}.print-config .icon-separator,.print-draw-config .icon-separator{color:#fff}@media (max-width: 768px){.toolbox-wrapper{left:.5em;top:8em;max-width:calc(100vw - 2.5em)}.drag-handle-toolbox{padding:3px 6px;gap:6px}.drag-handle-toolbox mat-icon{font-size:16px;width:16px;height:16px}.toggle-icon{font-size:16px!important;width:16px!important;height:16px!important}.toolbox-container{padding:8px;min-width:28px;max-width:calc(100vw - 3em)}:host{padding:8px;min-width:32px}:host.expanded{min-width:280px;padding:10px}.all-tools-container{flex-wrap:wrap;gap:6px;max-height:50vh;overflow-y:auto;padding:0;-ms-overflow-style:none;scrollbar-width:none}.all-tools-container::-webkit-scrollbar{display:none}.main-tools,.geometry-tools,.measurement-print-tools,.print-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.compact-icon{width:28px;height:28px;flex-shrink:0}.measurement-print-tools{padding:3px 0}.geometry-selector{width:30%;margin-bottom:8px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:28px;min-height:28px;padding:0 8px;font-size:12px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:12px}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 2em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config,.print-draw-config{flex-direction:column;align-items:stretch;gap:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:11px;padding:4px 8px;height:28px;min-height:28px}.print-config input,.print-draw-config input{width:50px}.print-config button,.print-draw-config button{padding:4px 8px;font-size:11px;height:28px}.wkt-section .compact-input{font-size:12px;padding:6px 8px}.wkt-section .compact-button{font-size:11px;padding:5px 8px;min-height:28px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:11px!important}}@media (max-width: 480px){.toolbox-wrapper{left:.25em;top:6em;transform-origin:left top;max-width:calc(100vw - .5em)}.drag-handle-toolbox{padding:2px 4px;gap:4px}.drag-handle-toolbox mat-icon{font-size:14px;width:14px;height:14px}.toggle-icon{font-size:14px!important;width:14px!important;height:14px!important}.toolbox-container{padding:2px;min-width:24px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;letter-spacing:.2px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px}\n"] }]
3563
+ args: [{ selector: 'map-toolbox', imports: [FormsModule, CommonModule, MatIconModule, MatOptionModule, MatSelectModule, DragDropModule, MatTooltipModule, MatSlideToggleModule], template: "<div class=\"toolbox-wrapper\" \n cdkDrag \n cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\">\n <div class=\"drag-handle-toolbox\" cdkDragHandle>\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"V\u00E6rkt\u00F8jskasse\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n handyman\n </mat-icon> \n <div class=\"right-icons\"> \n <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n \n <div class=\"toolbox-container\" [class.collapsed]=\"collapsed\">\n @if(!collapsed) {\n <div class=\"toolbox-content\">\n <div class=\"all-tools-container\">\n <div class=\"main-tools\">\n @if(!settings?.undoDisabled) {\n <img \n [src]=\"undoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"undo()\" \n matTooltip=\"Fortryd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Undo\">\n\n <img \n [src]=\"redoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"redo()\" \n matTooltip=\"Gendan\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Redo\">\n }\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startShowInfo()\" \n [class.active]=\"activeMode === 'show-info'\"\n matTooltip=\"Vejledning til anvendelse af systemet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Vejledning til anvendelse af systemet\">\n <img \n [src]=\"sogPunktBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"togglePointSearch()\" \n [class.active]=\"activeMode === 'search-point'\"\n matTooltip=\"S\u00F8g punkt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"S\u00F8g punkt\">\n \n <img \n [src]=\"sogPolygonBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"togglePolygonSearch()\" \n [class.active]=\"activeMode === 'search-polygon'\"\n matTooltip=\"S\u00F8g polygon\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"S\u00F8g polygon\">\n <img \n [src]=\"openCowiPageBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'cowi'\"\n (click)=\"openCowiPage()\" \n matTooltip=\"COWI\u00B4s Gadefoto\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"COWI\u00B4s Gadefoto\">\n <img \n [src]=\"skrafotoBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'skrafoto'\"\n (click)=\"openSkraafotoPage()\" \n matTooltip=\"Skr\u00E5foto\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Skr\u00E5foto\">\n \n <img \n [src]=\"streetViewBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'streetview'\"\n (click)=\"openGoogleStreetviewPage()\" \n matTooltip=\"Google Streetview\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Google Streetview\">\n <img \n [src]=\"fremhaevBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'select-highlight'\"\n (click)=\"startSelectFeatureHighlight()\" \n matTooltip=\"Vejledning til anvendelse af systemet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fremh\u00E6v\">\n\n <mat-slide-toggle [(ngModel)]=\"snap\" (change)=\"onSnapChange()\">Snap</mat-slide-toggle>\n @if(settings.editEnabled) {\n <img \n [src]=\"editIconBase64\" \n [class.active]=\"activeMode === 'edit'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEdit()\" \n matTooltip=\"V\u00E6lg og vis dokumenter fra liste\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"V\u00E6lg og vis dokumenter fra liste\">\n\n <img \n [src]=\"removePointsIconBase64\" \n [class.active]=\"activeMode === 'edit-remove'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEditRemovePoints()\" \n matTooltip=\"Fjern punkter\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fjern punkter\">\n }\n @if(settings.cutHoleEnabled) {\n <img \n [src]=\"trimIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'clip-hole'\" \n (click)=\"clipHole()\" \n matTooltip=\"Klip hul i flade\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Klip hul\">\n }\n @if(settings.splitEnabled) {\n <img \n [src]=\"splitIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'split'\"\n (click)=\"split()\" \n matTooltip=\"Sk\u00E6r over\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Sk\u00E6r over\">\n }\n @if(settings.changeTypeEnabled) {\n <mat-icon \n class=\"compact-icon\" \n [class.active]=\"activeMode === 'change-type'\" \n (click)=\"startChangeType()\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"Skift type\" \n matTooltipPosition=\"below\">\n find_replace\n </mat-icon>\n }\n @if(settings.mergeEnabled) {\n <mat-icon \n class=\"compact-icon\" \n (click)=\"startMergeFeatures()\" \n matTooltipPosition=\"below\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"Saml flader\" \n [class.active]=\"activeMode === 'merge-features'\">\n merge\n </mat-icon>\n }\n @if(settings.centerPoint) {\n <mat-icon\n (click)=\"setCenterPoint()\"\n matTooltipPosition=\"below\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"S\u00E6t centerpunkt\" \n [class.active]=\"activeMode === 'center-point'\"\n >adjust</mat-icon>\n }\n </div>\n <div class=\"geometry-tools\">\n <img \n [src]=\"featureSearchIconBase64\" \n [class.active]=\"activeMode === 'search-feature'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleFeatureSearch()\" \n matTooltip=\"Udpegede objekter\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Punkt\">\n\n <img \n [src]=\"polygonIconBase64\" \n [class.active]=\"activeMode === 'draw'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDraw()\"\n matTooltip=\"Indtegn objekt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Indtegn objekt\">\n <!-- <img \n [src]=\"lineStringIconBase64\" \n [class.active]=\"activeMode === 'draw-linestring'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDrawLineString()\" \n matTooltip=\"LineString\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"LineString\">\n \n @if(selectedGeometrySetting && selectedGeometrySetting.icons && selectedGeometrySetting.icons.length > 0) {\n @for(iconUrl of selectedGeometrySetting.icons;track iconUrl) {\n <img \n [src]=\"iconUrl\" \n [class.active]=\"activeMode === 'draw-point'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDrawPointUrl(iconUrl)\" \n matTooltip=\"Punkter\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Punkter\">}\n } @else {\n <img \n [src]=\"pointIconBase64\" \n [class.active]=\"activeMode === 'draw-point'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDrawPoint()\" \n matTooltip=\"Punkter\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Punkter\">\n } -->\n <img \n [src]=\"wktIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'wkt-input'\"\n (click)=\"activateShowInputWKT()\" \n matTooltip=\"Inds\u00E6t WKT streng for at importere elementet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"WKT\">\n </div>\n <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n <div class=\"measurement-print-tools\">\n <div class=\"measurement-tools\">\n @if (deleteEnabled) {\n <img \n [src]=\"deleteIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'delete'\"\n (click)=\"startDelete()\" \n matTooltip=\"Slet element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Slet\">\n }\n @if (showMeasureDistance) {\n <img \n [src]=\"measureDistanceIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'measure-distance'\"\n (click)=\"startMeasureLength()\" \n matTooltip=\"M\u00E5l afstand\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"M\u00E5le afstand\">\n }\n @if(showMeasureArea) {\n <img \n [src]=\"measureAreaIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'measure-area'\"\n (click)=\"startMeasureArea()\" \n matTooltip=\"M\u00E5l areal\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"M\u00E5le areal\">\n }\n </div>\n @if(profile.showPrint) {\n <div class=\"tool-separator print-separator\"></div>\n <div class=\"print-tools\">\n <img \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'Print'\"\n (click)=\"startPrintMode()\" \n matTooltip=\"Udskriv\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Udskriv\">\n <img \n [src]=\"drawBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'PrintDraw'\"\n (click)=\"startDrawMode()\" \n matTooltip=\"Tegnev\u00E6rkt\u00F8j til print\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Tegn\">\n </div>\n }\n </div>\n </div>\n @if(showInputWKT) {\n <div class=\"wkt-section\">\n <input class=\"compact-input\" [(ngModel)]=\"WKTString\">\n <div class=\"wkt-actions\">\n <button class=\"compact-button primary\" (click)=\"ReadWKT()\">Indl\u00E6s WKT</button>\n <button class=\"compact-button\" (click)=\"cancelWKT()\">Annuller</button>\n </div>\n </div>\n }\n @if(profile.showPrint) {\n @if(active === \"Print\") {\n <div class=\"print-config\">\n <img \n matTooltip=\"Sk\u00E6rmprint af kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"doPrint()\" \n alt=\"Udskriv\"> \n <span class=\"icon-separator\">i</span>\n <select id=\"formatSelector\" [(ngModel)]=\"format\">\n <option value=\"image/png\" selected>.PNG</option>\n <option value=\"image/jpeg\">.JPG</option>\n </select>\n <select id=\"dimensionSelector\" [(ngModel)]=\"dimId\" (change)=\"handleDimensionSelected()\">\n <option value=\"99\" selected></option>\n <option value=\"0\">1920 X 1080</option>\n <option value=\"1\">1680 X 1050</option>\n <option value=\"2\">1280 X 800</option>\n <option value=\"3\">800 X 600</option>\n </select>\n <input type=\"text\" [(ngModel)]=\"mapWidth\"/> \n <span class=\"icon-separator\">x</span>\n <input type=\"text\" [(ngModel)]=\"mapHeight\"/>\n <button (click)=\"setNewMapDimensions()\">V\u00E6lg</button>\n </div>\n }\n @if(active === \"PrintDraw\") {\n <div class=\"print-draw-config\">\n <span class=\"icon-separator\">Label</span>\n <input type=\"text\" [(ngModel)]=\"printDrawLabel\"/>\n <select id=\"drawToolSelector\" [(ngModel)]=\"printDrawTool\" (change)=\"handlePrintDrawToolChanged()\">\n <option value=\"Arrow\" selected>Pil</option>\n <option value=\"Point\">Punkt</option>\n <option value=\"LineString\">Linje</option>\n <option value=\"Polygon\">Polygon</option>\n <option value=\"Circle\">Cirkel</option>\n <option value=\"Square\">Kvadrat</option>\n <option value=\"Rectangle\">Firkant</option>\n </select>\n <button class=\"compact-button\" (click)=\"handleClearPrintDrawFeatures()\">Ryd</button>\n </div>\n }\n }\n </div>\n @if (activeMode === 'draw' || activeMode === 'search-feature') {\n <mat-select class=\"geometry-selector\" (selectionChange)=\"drawItemChanged($event)\" [(ngModel)]=\"selectedDrawItem\"> \n @for (drawItem of drawItems; track drawItem) {\n <mat-option [value]=\"drawItem\">{{drawItem.name}} <img *ngIf=\"drawItem.iconUrl\" class=\"compact-icon custom-image-icon\" [src]=\"drawItem.iconUrl\"></mat-option>\n }\n </mat-select> \n }\n }\n </div>\n @if (activeMode === 'search-feature' && filteredResults.length > 0) {\n <div class=\"geometry-search-panel\">\n <div class=\"buffer-item\">\n <mat-label>Buffer</mat-label>\n <input matInput type=\"number\" name=\"buffer\" [(ngModel)]=\"bufferInMeters\">\n <mat-label>m</mat-label>\n </div>\n <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n <div class=\"item-right\">\n <img \n [src]=\"objectSearchCopyIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event)\" \n matTooltip=\"Kopier\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier\">\n <img \n [src]=\"objectSearchCutIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"cutBySearchedObject(item, $event)\" \n matTooltip=\"Fjern\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fjern\">\n <img \n [src]=\"objectSearchCutIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"splitBySearchedObject(item, $event)\" \n matTooltip=\"Opsk\u00E6r\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Opsk\u00E6r\">\n <img \n [src]=\"objectSearchCopyWithBufferIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event, true)\" \n matTooltip=\"Kopier med buffer\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier med buffer\">\n <img \n [src]=\"objectSearchZoomIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"zoomSearchedObject(item, $event)\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Zoom\">\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleItemInfo(item, $event)\" \n matTooltip=\"Info\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Info\">\n </div> \n @if (item.showMetadata) {\n <div class=\"metadata-panel\">\n @for(feature of item.metadata; track feature) {\n <div class=\"feature-item\">\n <div *ngFor=\"let kv of (feature | keyvalue)\">\n {{ kv.value.name }}:\n <ng-container [ngSwitch]=\"kv.value.kind\">\n <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n {{ kv.key }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n <span *ngSwitchDefault>{{ kv.value.data }}</span>\n </ng-container>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </mat-option>\n </div>\n }\n @if ((activeMode === \"search-point\" || activeMode === \"search-polygon\") && filteredResults.length > 0) {\n <div class=\"geometry-search-panel\">\n <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n </div>\n </mat-option>\n </div>\n }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;left:1em;top:10em;z-index:10;max-width:95vw;box-shadow:0 2px 10px #0000001a;background:#4c4d51;border-radius:5px;width:auto;min-width:90px;transition:width .3s ease,max-width .3s ease}.toolbox-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}.toolbox-wrapper.collapsed .drag-handle-toolbox{width:90px;padding:8px 10px;box-sizing:border-box}.toolbox-wrapper.collapsed .drag-handle-toolbox .icon-left{margin-right:0;cursor:default!important}.toolbox-wrapper.collapsed .drag-handle-toolbox .right-icons .toggle-icon{cursor:pointer!important}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.geometry-search-panel{position:absolute;right:0;z-index:1000;width:380px}.geometry-search-panel::-webkit-scrollbar{width:12px}.geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.geometry-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.geometry-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.geometry-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.geometry-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.geometry-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.search-result-option{display:block!important;padding:0!important;margin:0!important;background:transparent!important}.search-result-option:last-child{border-bottom:none}.search-result-option .mdc-list-item__primary-text{width:100%!important;margin:0!important;padding:0!important}.result-title{display:block;padding:8px 6px;top:0;z-index:1;font-weight:600;font-size:13px;color:#bdc1c3cc}.search-result-item{display:flex;align-items:center;padding:8px 16px;cursor:pointer;transition:background-color .15s ease}.search-result-item:hover{background:#ffffff1a}.item-left{flex:1;min-width:0}.item-header{font-size:13px;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.search-result-item.loading .item-header{background-size:200% 100%;height:16px;border-radius:4px;width:80%}.search-result-item.loading .item-header:before{display:none}.search-empty-state{padding:32px 16px;text-align:center;color:#757575}.search-empty-state .empty-icon{font-size:40px;width:40px;height:40px;color:#bdbdbd;margin-bottom:12px}.search-empty-state .empty-title{font-size:14px;font-weight:500;margin-bottom:4px}.search-empty-state .empty-subtitle{font-size:12px;color:#9e9e9e}@media (max-width: 768px){.geometry-search-panel{width:calc(100vw - 40px);max-width:400px;left:50%;max-height:70vh}.search-result-item{padding:8px 12px}.item-header{font-size:13px}.item-header:before{width:5px;height:5px;margin-right:8px}.result-title{padding:10px 12px;font-size:13px}}@media (max-width: 480px){.geometry-search-panel{width:calc(100vw - 32px);max-height:60vh}.search-result-item{padding:6px 10px}.item-header{font-size:12px;-webkit-line-clamp:1}.item-header:before{width:4px;height:4px;margin-right:6px}}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px;border:white;border-width:2px}::ng-deep .geometry-search-panel{border-radius:5px!important;max-height:320px!important;background:#4c4d51!important;box-shadow:0 8px 24px #00000026!important;margin-top:10px;overflow-y:auto!important;padding:8px!important;max-width:430px}::ng-deep .geometry-search-panel .buffer-item{align-items:end}::ng-deep .geometry-search-panel .buffer-item input{width:45px;margin:5px}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-direction:column;padding:8px 16px;cursor:pointer;transition:background-color .15s ease;gap:8px}::ng-deep .geometry-search-panel .search-result-item:hover{background:#ffffff1a}::ng-deep .geometry-search-panel .item-left{flex:1;min-width:0;width:100%}::ng-deep .geometry-search-panel .item-header{font-size:13px;color:#fff;display:block;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}::ng-deep .geometry-search-panel .item-right{display:flex;align-items:center;gap:4px;flex-wrap:wrap;width:100%}::ng-deep .geometry-search-panel .item-right .custom-image-icon{background:#fff!important;flex-shrink:0}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:#fff;line-height:1.5}::ng-deep .geometry-search-panel mat-label{color:#fff}.drag-handle-toolbox{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;gap:8px;border-radius:5px;color:#fff}.drag-handle-toolbox mat-icon{font-size:18px}.drag-handle-toolbox mat-icon:first-child{display:flex;align-items:center;justify-content:center}.drag-handle-toolbox .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}:host{position:relative;display:flex;justify-content:center}:host.expanded{width:auto;min-width:320px;padding:12px}.toolbox-container{display:flex;flex-direction:column;align-items:center;width:100%;background:#4c4d51;width:auto;min-width:32px;transition:all .3s ease;cursor:default;border-radius:0 0 5px 5px}.toolbox-content{display:flex;flex-direction:column;width:100%;gap:3px;animation:slideDown .3s cubic-bezier(.4,0,.2,1)}.all-tools-container{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;width:100%;justify-content:flex-start;overflow-x:hidden;padding:2px 8px}.all-tools-container::-webkit-scrollbar{height:4px}.all-tools-container::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}.main-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.main-tools ::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:12px;font-weight:500;color:#fff}.geometry-selector{width:34%;margin-left:15em;padding:6px}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border-radius:6px;background:#6d6f73;transition:all .2s ease;border:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73;border:none}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.geometry-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.geometry-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.geometry-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-select-panel{min-width:fit-content!important;max-width:320px!important;background:#4c4d51!important;border:none!important;border-radius:8px!important;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014!important;margin-top:6px!important;padding:4px 0!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:14px!important;min-height:36px!important;padding:8px 14px!important;transition:all .15s ease!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover:not(.mat-mdc-option-disabled){background:#444849!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-active{background:color-mix(in srgb,#000 60%,transparent)!important;color:#fff!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;font-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.geometry-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;background:none;border-radius:8px;padding:3px 0}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-tools .compact-icon,.print-tools .compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.measurement-tools .compact-icon.custom-image-icon,.print-tools .compact-icon.custom-image-icon{background:none}.measurement-tools .compact-icon.custom-image-icon img,.print-tools .compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.measurement-tools .compact-icon.custom-image-icon.active,.print-tools .compact-icon.custom-image-icon.active{background:#f7b528!important;border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.measurement-tools .compact-icon.custom-image-icon.active img,.print-tools .compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.measurement-tools .compact-icon.custom-image-icon.active:hover,.print-tools .compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active),.print-tools .compact-icon.custom-image-icon:hover:not(.active){background:#ffffff1a;border-color:none;box-shadow:none}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active) img,.print-tools .compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.print-tools .compact-icon{background:none;color:#fff}.print-tools .compact-icon.active{background:#f7b528!important;border-color:transparent}.print-tools .compact-icon.active:hover{background:#ffffff1a}.print-tools .compact-icon:hover:not(.active){box-shadow:0 4px 12px #0000004d;opacity:.9}.tool-separator{width:1px;height:24px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.3),transparent)}.tool-separator.print-separator{height:28px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent)}.compact-icon{cursor:pointer;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}.compact-icon.active{color:#fff;background:#f7b528!important;border-color:transparent;box-shadow:0 8px 25px #667eea4d}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon:hover:not(.active){color:#fff;background:color-mix(in srgb,#000 70%,transparent);box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:2px;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease,transform .2s ease}.compact-icon.custom-image-icon.active{background:#ffffff1a;border-color:none;box-shadow:none}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon.custom-image-icon:hover:not(.active){background:#ffffff1a;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.wkt-section{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease;padding:10px 8px}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:5px;background:#6d6f73;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;letter-spacing:.4px;min-height:32px;display:flex;align-items:center;justify-content:center;flex:1;box-shadow:0 1px 2px #0000000d}.compact-button.primary.active{background:#f7b528;box-shadow:0 8px 25px #667eea4d;color:#fff}.compact-button.primary.active:hover{box-shadow:0 12px 35px #667eea66}.compact-button.secondary{background:color-mix(in srgb,#000 20%,transparent);color:#fff}.compact-button.secondary:hover{background:color-mix(in srgb,#5a6268 60%,transparent)}.compact-input{padding:8px 10px;border-radius:5px;font-size:13px;transition:all .2s ease;background:#6d6f73;border:none;color:#fff}.compact-input:focus{outline:none;background:#6d6f73;border:1px solid #97989b}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:transparent;border:none;border-radius:8px;animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:#6d6f73;border:none;color:#fff;border-radius:6px;font-size:12px;height:32px;min-height:32px;padding:0 10px}.print-config select:focus,.print-config input:focus,.print-draw-config select:focus,.print-draw-config input:focus{outline:none}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:#6d6f73!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:#6ccb78;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;box-shadow:0 0 #0000,0 0 #0000,0 0 #0000;transition:all .2s ease}.print-config button:hover,.print-draw-config button:hover{box-shadow:0 4px 12px #10b9814d}.print-config .icon-separator,.print-draw-config .icon-separator{color:#fff}@media (max-width: 768px){.toolbox-wrapper{left:.5em;top:8em;max-width:calc(100vw - 2.5em)}.drag-handle-toolbox{padding:3px 6px;gap:6px}.drag-handle-toolbox mat-icon{font-size:16px;width:16px;height:16px}.toggle-icon{font-size:16px!important;width:16px!important;height:16px!important}.toolbox-container{padding:8px;min-width:28px;max-width:calc(100vw - 3em)}:host{padding:8px;min-width:32px}:host.expanded{min-width:280px;padding:10px}.all-tools-container{flex-wrap:wrap;gap:6px;max-height:50vh;overflow-y:auto;padding:0;-ms-overflow-style:none;scrollbar-width:none}.all-tools-container::-webkit-scrollbar{display:none}.main-tools,.geometry-tools,.measurement-print-tools,.print-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.compact-icon{width:28px;height:28px;flex-shrink:0}.measurement-print-tools{padding:3px 0}.geometry-selector{width:30%;margin-bottom:8px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:28px;min-height:28px;padding:0 8px;font-size:12px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:12px}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 2em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config,.print-draw-config{flex-direction:column;align-items:stretch;gap:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:11px;padding:4px 8px;height:28px;min-height:28px}.print-config input,.print-draw-config input{width:50px}.print-config button,.print-draw-config button{padding:4px 8px;font-size:11px;height:28px}.wkt-section .compact-input{font-size:12px;padding:6px 8px}.wkt-section .compact-button{font-size:11px;padding:5px 8px;min-height:28px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:11px!important}}@media (max-width: 480px){.toolbox-wrapper{left:.25em;top:6em;transform-origin:left top;max-width:calc(100vw - .5em)}.drag-handle-toolbox{padding:2px 4px;gap:4px}.drag-handle-toolbox mat-icon{font-size:14px;width:14px;height:14px}.toggle-icon{font-size:14px!important;width:14px!important;height:14px!important}.toolbox-container{padding:2px;min-width:24px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;letter-spacing:.2px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px}\n"] }]
3560
3564
  }], ctorParameters: () => [], propDecorators: { map: [{
3561
3565
  type: Input,
3562
3566
  args: [{ required: true }]
@@ -3616,6 +3620,7 @@ class ActiveObjectsComponent {
3616
3620
  _zoomService = inject(ZoomService);
3617
3621
  _current = inject(CurrentItemsService);
3618
3622
  _layoutService = inject(LayoutService);
3623
+ _profileService = inject(ProfileService);
3619
3624
  opacity = 1;
3620
3625
  dragPosition = { x: 0, y: 0 };
3621
3626
  highlightedId = null;
@@ -3750,7 +3755,12 @@ class ActiveObjectsComponent {
3750
3755
  _loadPosition() {
3751
3756
  try {
3752
3757
  const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
3753
- if (savedPosition) {
3758
+ if (this._profileService.getProfileVersionChanged() &&
3759
+ this.profile?.activeObjectsInitialPosition) {
3760
+ //Profile version changed in backend, use that
3761
+ this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.activeObjectsInitialPosition);
3762
+ }
3763
+ else if (savedPosition) {
3754
3764
  this.dragPosition = JSON.parse(savedPosition);
3755
3765
  }
3756
3766
  else if (this.profile?.activeObjectsInitialPosition) {
@@ -3768,11 +3778,11 @@ class ActiveObjectsComponent {
3768
3778
  }
3769
3779
  }
3770
3780
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ActiveObjectsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3771
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ActiveObjectsComponent, isStandalone: true, selector: "activeObjects", inputs: { settings: "settings", profile: "profile" }, outputs: { sessionDone: "sessionDone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"active-objects-wrapper\" \n cdkDrag \n cdkDragBoundary=\".map-container\" \n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle-active-objects\" cdkDragHandle>\n <mat-icon \n class=\"active-object-icon\" \n (click)=\"zoomToAll()\"\n matTooltip=\"Aktive objekter\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n format_list_bulleted_add\n </mat-icon>\n \n <div class=\"right-icons\">\n <mat-icon class=\"toggle-icon\" (click)=\"togglePanel()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n \n <div class=\"active-objects-container\">\n @if(!collapsed) {\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"opacity\"\n (input)=\"updateOpacity()\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n }\n\n @if(!collapsed) {\n <div class=\"active-objects-content\">\n <div class=\"header-icons\">\n <div class=\"header-left-controls\">\n <mat-icon \n class=\"zoom-icon\" \n [class.zoom-active]=\"isZoomedToAll\"\n (click)=\"zoomToAll()\" \n matTooltip=\"Zoom til alle\" \n matTooltipPosition=\"above\">\n fit_screen\n </mat-icon> \n <mat-icon \n class=\"reset-icon\" \n (click)=\"reset()\" \n matTooltip=\"Nulstilles\" \n matTooltipPosition=\"above\">\n replay\n </mat-icon>\n </div>\n \n <div class=\"header-right-controls\">\n @if(!centerPointOk) {\n <mat-icon \n class=\"warning-icon\" \n matTooltip=\"Der er ikke noget centerpunkt og det skal der v\u00E6re\" \n matTooltipPosition=\"above\">\n warning\n </mat-icon>\n } @else {\n @if (endSessionEnabled) {\n <mat-icon \n class=\"end-session-icon\" \n (click)=\"endSession()\" \n matTooltip=\"Afslut\" \n matTooltipPosition=\"above\">\n done_all\n </mat-icon>\n }\n }\n </div>\n </div>\n @for(featureTypeObj of activeFeatures; track featureTypeObj.featureType) {\n <mat-expansion-panel>\n <mat-expansion-panel-header \n [matTooltip]=\"featureTypeObj.display\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">\n <span class=\"panel-title\">\n {{featureTypeObj.display}} ({{featureTypeObj.features.length}})\n </span>\n </mat-expansion-panel-header>\n <div class=\"item-list\">\n @for(item of featureTypeObj.features; track item.id) {\n <div class=\"item\">\n <div class=\"item-text\">\n <span class=\"item-id\">{{item.id}}</span>\n <span class=\"item-area\">{{item.area}}</span>\n @if(item.containedMissingIn && item.containedMissingIn.length > 0) {\n <div class=\"item-warning\">\n <mat-icon>error</mat-icon>\n <span>Udenfor {{item.containedMissingIn.join(', ')}}</span>\n </div> \n }\n </div>\n @if(!item.locked) {\n <mat-icon (click)=\"delete(item.id)\">delete</mat-icon>\n }\n <mat-icon (click)=\"highlight(item.id)\" [class.highlight-active]=\"highlightedId === item.id\">power_settings_new</mat-icon>\n </div>\n }\n </div>\n </mat-expansion-panel>\n }\n </div>\n }\n </div> \n</div>", styles: [".active-objects-wrapper{position:absolute;top:8em;left:1em;z-index:2;box-shadow:0 2px 10px #0000001a;background:#4c4d51;width:350px;max-width:350px;transition:width .3s ease,max-width .3s ease;border-radius:5px}.active-objects-wrapper.collapsed{width:90px}.active-objects-wrapper.collapsed .drag-handle-active-objects .active-object-icon{cursor:default!important}.active-objects-wrapper.collapsed .drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px;margin-right:10px;line-height:1.3;font-weight:600;color:#bdc1c3cc;font-size:17px}mat-expansion-panel .mat-expansion-panel-header.mat-expanded:hover{background:#ffffff1a!important}.item{display:flex;justify-content:space-between;align-items:center;padding:0 18px;border-radius:4px;background:transparent!important;transition:all .2s ease;font-size:14px;color:#fff;min-height:40px;cursor:default}.item .item-text{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;gap:4px}.item .item-text .item-warning{display:inline-flex;align-items:center;gap:6px;font-size:11px;width:fit-content;max-width:100%;color:#dfca0e;margin-top:2px;margin-bottom:2px}.item .item-text .item-warning mat-icon{font-size:14px;width:14px;height:14px;color:#dfca0e;margin:0;cursor:default;flex-shrink:0}.item .item-text .item-warning mat-icon:hover{color:#ccb913}.item .item-text .item-warning span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.item .item-id{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px;max-width:250px;font-size:13px}.item .item-area{font-size:13px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item mat-icon{cursor:pointer;color:#e5281a;font-size:18px;width:18px;height:18px;flex-shrink:0;margin-left:8px;transition:color .2s ease,background .2s ease}.item mat-icon:hover{color:#d32f2f}.highlight-active{color:#4caf50!important;transition:all .2s ease}.drag-handle-active-objects{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;color:#fff;border-radius:5px 5px 0 0;width:100%;box-sizing:border-box}.drag-handle-active-objects .active-object-icon{cursor:default!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons{display:flex;align-items:center;gap:7px}.drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons .toggle-icon:hover{color:#d3d3d3}.active-objects-container{display:flex;flex-direction:column;align-items:center;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box;background:#4c4d51}.active-objects-container .panel-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;cursor:default;background:color-mix(in srgb,#000 70%,transparent);border-bottom:1px solid rgba(255,255,255,.1)}.active-objects-container .collapsed-title{color:#fff;font-weight:600;font-size:12px;padding:8px 4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.active-objects-container .collapsed-title:hover{color:#1976d2}.header-icons{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:0 10px!important}.header-icons .header-left-controls,.header-icons .header-right-controls{display:flex;align-items:center;gap:8px}.header-icons .header-right-controls{margin-left:auto;padding-left:12px;border-left:1px solid rgba(255,255,255,.15)}.header-icons .zoom-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .zoom-icon:hover{color:#4caf50}.header-icons .zoom-icon.zoom-active{color:#4caf50!important}.header-icons .reset-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .reset-icon:hover{color:#ff9800}.header-icons .warning-icon{color:#ff9800;font-size:18px;cursor:help}.header-icons .end-session-icon{cursor:pointer;color:#4caf50;font-size:18px;transition:all .2s ease}.header-icons .end-session-icon:hover{color:#45a049}.active-objects-container input[type=range]{width:95%;margin:8px auto}.active-objects-content{display:block;width:100%;max-height:278px;overflow:auto;background:#4c4d51}.active-objects-content::-webkit-scrollbar{width:12px}.active-objects-content::-webkit-scrollbar-track{background:#757474;border-radius:8px}.active-objects-content::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.active-objects-content::-webkit-scrollbar-thumb:hover{background:#0f1012}.active-objects-content::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.active-objects-content::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.active-objects-content::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.active-objects-content .zoom-icon{color:#fff;font-size:18px;transition:all .2s ease}.active-objects-content .zoom-icon:hover{color:#4caf50}.active-objects-content .zoom-icon.zoom-active{color:#4caf50!important}mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%}mat-expansion-panel:last-child{border-bottom:none}mat-expansion-panel ::ng-deep .mat-expansion-panel-header{padding:0 16px;font-weight:500}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-content{display:flex;justify-content:space-between;align-items:center;color:#fff}mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0}.item-list{display:flex;flex-direction:column}@media (max-width: 768px){.active-objects-wrapper{right:.5em;top:8em;max-width:280px;width:280px}.item{font-size:13px;padding:6px 10px}}@media (max-width: 480px){.active-objects-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.item-list{max-height:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
3781
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ActiveObjectsComponent, isStandalone: true, selector: "activeObjects", inputs: { settings: "settings", profile: "profile" }, outputs: { sessionDone: "sessionDone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"active-objects-wrapper\" \n cdkDrag \n cdkDragBoundary=\".map-container\" \n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle-active-objects\" cdkDragHandle>\n <mat-icon \n class=\"active-object-icon\" \n (click)=\"zoomToAll()\"\n matTooltip=\"Aktive objekter\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n format_list_bulleted_add\n </mat-icon>\n \n <div class=\"right-icons\">\n <mat-icon class=\"toggle-icon\" (click)=\"togglePanel()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n \n <div class=\"active-objects-container\">\n @if(!collapsed) {\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"opacity\"\n (input)=\"updateOpacity()\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n }\n\n @if(!collapsed) {\n <div class=\"active-objects-content\">\n <div class=\"header-icons\">\n <div class=\"header-left-controls\">\n <mat-icon \n class=\"zoom-icon\" \n [class.zoom-active]=\"isZoomedToAll\"\n (click)=\"zoomToAll()\" \n matTooltip=\"Zoom til alle\" \n matTooltipPosition=\"above\">\n fit_screen\n </mat-icon> \n <mat-icon \n class=\"reset-icon\" \n (click)=\"reset()\" \n matTooltip=\"Nulstilles\" \n matTooltipPosition=\"above\">\n replay\n </mat-icon>\n </div>\n \n <div class=\"header-right-controls\">\n @if(!centerPointOk) {\n <mat-icon \n class=\"warning-icon\" \n matTooltip=\"Der er ikke noget centerpunkt og det skal der v\u00E6re\" \n matTooltipPosition=\"above\">\n warning\n </mat-icon>\n } @else {\n @if (endSessionEnabled) {\n <mat-icon \n class=\"end-session-icon\" \n (click)=\"endSession()\" \n matTooltip=\"Afslut\" \n matTooltipPosition=\"above\">\n done_all\n </mat-icon>\n }\n }\n </div>\n </div>\n @for(featureTypeObj of activeFeatures; track featureTypeObj.featureType) {\n <mat-expansion-panel>\n <mat-expansion-panel-header \n [matTooltip]=\"featureTypeObj.display\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">\n <span class=\"panel-title\">\n {{featureTypeObj.display}} ({{featureTypeObj.features.length}})\n </span>\n </mat-expansion-panel-header>\n <div class=\"item-list\">\n @for(item of featureTypeObj.features; track item.id) {\n <div class=\"item\">\n <div class=\"item-text\">\n <span class=\"item-id\">{{item.id}}</span>\n <span class=\"item-area\">{{item.area}}</span>\n @if(item.containedMissingIn && item.containedMissingIn.length > 0) {\n <div class=\"item-warning\">\n <mat-icon>error</mat-icon>\n <span>Udenfor {{item.containedMissingIn.join(', ')}}</span>\n </div> \n }\n </div>\n @if(!item.locked) {\n <mat-icon (click)=\"delete(item.id)\">delete</mat-icon>\n }\n <mat-icon (click)=\"highlight(item.id)\" [class.highlight-active]=\"highlightedId === item.id\">power_settings_new</mat-icon>\n </div>\n }\n </div>\n </mat-expansion-panel>\n }\n </div>\n }\n </div> \n</div>", styles: [".active-objects-wrapper{position:absolute;top:8em;left:1em;z-index:2;box-shadow:0 2px 10px #0000001a;background:#4c4d51;width:350px;max-width:350px;transition:width .3s ease,max-width .3s ease;border-radius:5px!important}.active-objects-wrapper.collapsed{width:90px}.active-objects-wrapper.collapsed .drag-handle-active-objects .active-object-icon{cursor:default!important}.active-objects-wrapper.collapsed .drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px;margin-right:10px;line-height:1.3;font-weight:600;color:#bdc1c3cc;font-size:13px}mat-expansion-panel .mat-expansion-panel-header.mat-expanded:hover{background:#ffffff1a!important}.item{display:flex;justify-content:space-between;align-items:center;padding:0 18px;border-radius:4px;background:transparent!important;transition:all .2s ease;font-size:14px;color:#fff;min-height:40px;cursor:default}.item .item-text{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;gap:4px}.item .item-text .item-warning{display:inline-flex;align-items:center;gap:6px;font-size:11px;width:fit-content;max-width:100%;color:#dfca0e;margin-top:2px;margin-bottom:2px}.item .item-text .item-warning mat-icon{font-size:14px;width:14px;height:14px;color:#dfca0e;margin:0;cursor:default;flex-shrink:0}.item .item-text .item-warning mat-icon:hover{color:#ccb913}.item .item-text .item-warning span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.item .item-id{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px;max-width:250px;font-size:13px}.item .item-area{font-size:13px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item mat-icon{cursor:pointer;color:#e5281a;font-size:18px;width:18px;height:18px;flex-shrink:0;margin-left:8px;transition:color .2s ease,background .2s ease}.item mat-icon:hover{color:#d32f2f}.highlight-active{color:#4caf50!important;transition:all .2s ease}.drag-handle-active-objects{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;color:#fff;border-radius:5px;width:100%;box-sizing:border-box}.drag-handle-active-objects .active-object-icon{cursor:default!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons{display:flex;align-items:center;gap:7px}.drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons .toggle-icon:hover{color:#d3d3d3}.active-objects-container{display:flex;flex-direction:column;align-items:center;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box;background:#4c4d51;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.active-objects-container .panel-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;cursor:default;background:color-mix(in srgb,#000 70%,transparent);border-bottom:1px solid rgba(255,255,255,.1)}.active-objects-container .collapsed-title{color:#fff;font-weight:600;font-size:12px;padding:8px 4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.active-objects-container .collapsed-title:hover{color:#1976d2}.header-icons{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:0 10px!important}.header-icons .header-left-controls,.header-icons .header-right-controls{display:flex;align-items:center;gap:8px}.header-icons .header-right-controls{margin-left:auto;padding-left:12px;border-left:1px solid rgba(255,255,255,.15)}.header-icons .zoom-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .zoom-icon:hover{color:#4caf50}.header-icons .zoom-icon.zoom-active{color:#4caf50!important}.header-icons .reset-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .reset-icon:hover{color:#ff9800}.header-icons .warning-icon{color:#ff9800;font-size:18px;cursor:help}.header-icons .end-session-icon{cursor:pointer;color:#4caf50;font-size:18px;transition:all .2s ease}.header-icons .end-session-icon:hover{color:#45a049}.active-objects-container input[type=range]{width:95%;margin:8px auto}.active-objects-content{display:block;width:100%;max-height:278px;overflow:auto;background:#4c4d51;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.active-objects-content::-webkit-scrollbar{width:12px}.active-objects-content::-webkit-scrollbar-track{background:#757474;border-radius:8px}.active-objects-content::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.active-objects-content::-webkit-scrollbar-thumb:hover{background:#0f1012}.active-objects-content::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.active-objects-content::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.active-objects-content::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.active-objects-content .zoom-icon{color:#fff;font-size:18px;transition:all .2s ease}.active-objects-content .zoom-icon:hover{color:#4caf50}.active-objects-content .zoom-icon.zoom-active{color:#4caf50!important}mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%}mat-expansion-panel:last-child{border-bottom:none}mat-expansion-panel ::ng-deep .mat-expansion-panel-header{padding:0 16px;font-weight:500;height:48px}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-content{display:flex;justify-content:space-between;align-items:center;color:#fff}mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0}.item-list{display:flex;flex-direction:column}@media (max-width: 768px){.active-objects-wrapper{right:.5em;top:8em;max-width:280px;width:280px}.item{font-size:13px;padding:6px 10px}}@media (max-width: 480px){.active-objects-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.item-list{max-height:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
3772
3782
  }
3773
3783
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ActiveObjectsComponent, decorators: [{
3774
3784
  type: Component,
3775
- args: [{ selector: 'activeObjects', imports: [CommonModule, FormsModule, MatExpansionModule, MatIconModule, DragDropModule, MatTooltipModule], template: "<div class=\"active-objects-wrapper\" \n cdkDrag \n cdkDragBoundary=\".map-container\" \n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle-active-objects\" cdkDragHandle>\n <mat-icon \n class=\"active-object-icon\" \n (click)=\"zoomToAll()\"\n matTooltip=\"Aktive objekter\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n format_list_bulleted_add\n </mat-icon>\n \n <div class=\"right-icons\">\n <mat-icon class=\"toggle-icon\" (click)=\"togglePanel()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n \n <div class=\"active-objects-container\">\n @if(!collapsed) {\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"opacity\"\n (input)=\"updateOpacity()\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n }\n\n @if(!collapsed) {\n <div class=\"active-objects-content\">\n <div class=\"header-icons\">\n <div class=\"header-left-controls\">\n <mat-icon \n class=\"zoom-icon\" \n [class.zoom-active]=\"isZoomedToAll\"\n (click)=\"zoomToAll()\" \n matTooltip=\"Zoom til alle\" \n matTooltipPosition=\"above\">\n fit_screen\n </mat-icon> \n <mat-icon \n class=\"reset-icon\" \n (click)=\"reset()\" \n matTooltip=\"Nulstilles\" \n matTooltipPosition=\"above\">\n replay\n </mat-icon>\n </div>\n \n <div class=\"header-right-controls\">\n @if(!centerPointOk) {\n <mat-icon \n class=\"warning-icon\" \n matTooltip=\"Der er ikke noget centerpunkt og det skal der v\u00E6re\" \n matTooltipPosition=\"above\">\n warning\n </mat-icon>\n } @else {\n @if (endSessionEnabled) {\n <mat-icon \n class=\"end-session-icon\" \n (click)=\"endSession()\" \n matTooltip=\"Afslut\" \n matTooltipPosition=\"above\">\n done_all\n </mat-icon>\n }\n }\n </div>\n </div>\n @for(featureTypeObj of activeFeatures; track featureTypeObj.featureType) {\n <mat-expansion-panel>\n <mat-expansion-panel-header \n [matTooltip]=\"featureTypeObj.display\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">\n <span class=\"panel-title\">\n {{featureTypeObj.display}} ({{featureTypeObj.features.length}})\n </span>\n </mat-expansion-panel-header>\n <div class=\"item-list\">\n @for(item of featureTypeObj.features; track item.id) {\n <div class=\"item\">\n <div class=\"item-text\">\n <span class=\"item-id\">{{item.id}}</span>\n <span class=\"item-area\">{{item.area}}</span>\n @if(item.containedMissingIn && item.containedMissingIn.length > 0) {\n <div class=\"item-warning\">\n <mat-icon>error</mat-icon>\n <span>Udenfor {{item.containedMissingIn.join(', ')}}</span>\n </div> \n }\n </div>\n @if(!item.locked) {\n <mat-icon (click)=\"delete(item.id)\">delete</mat-icon>\n }\n <mat-icon (click)=\"highlight(item.id)\" [class.highlight-active]=\"highlightedId === item.id\">power_settings_new</mat-icon>\n </div>\n }\n </div>\n </mat-expansion-panel>\n }\n </div>\n }\n </div> \n</div>", styles: [".active-objects-wrapper{position:absolute;top:8em;left:1em;z-index:2;box-shadow:0 2px 10px #0000001a;background:#4c4d51;width:350px;max-width:350px;transition:width .3s ease,max-width .3s ease;border-radius:5px}.active-objects-wrapper.collapsed{width:90px}.active-objects-wrapper.collapsed .drag-handle-active-objects .active-object-icon{cursor:default!important}.active-objects-wrapper.collapsed .drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px;margin-right:10px;line-height:1.3;font-weight:600;color:#bdc1c3cc;font-size:17px}mat-expansion-panel .mat-expansion-panel-header.mat-expanded:hover{background:#ffffff1a!important}.item{display:flex;justify-content:space-between;align-items:center;padding:0 18px;border-radius:4px;background:transparent!important;transition:all .2s ease;font-size:14px;color:#fff;min-height:40px;cursor:default}.item .item-text{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;gap:4px}.item .item-text .item-warning{display:inline-flex;align-items:center;gap:6px;font-size:11px;width:fit-content;max-width:100%;color:#dfca0e;margin-top:2px;margin-bottom:2px}.item .item-text .item-warning mat-icon{font-size:14px;width:14px;height:14px;color:#dfca0e;margin:0;cursor:default;flex-shrink:0}.item .item-text .item-warning mat-icon:hover{color:#ccb913}.item .item-text .item-warning span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.item .item-id{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px;max-width:250px;font-size:13px}.item .item-area{font-size:13px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item mat-icon{cursor:pointer;color:#e5281a;font-size:18px;width:18px;height:18px;flex-shrink:0;margin-left:8px;transition:color .2s ease,background .2s ease}.item mat-icon:hover{color:#d32f2f}.highlight-active{color:#4caf50!important;transition:all .2s ease}.drag-handle-active-objects{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;color:#fff;border-radius:5px 5px 0 0;width:100%;box-sizing:border-box}.drag-handle-active-objects .active-object-icon{cursor:default!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons{display:flex;align-items:center;gap:7px}.drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons .toggle-icon:hover{color:#d3d3d3}.active-objects-container{display:flex;flex-direction:column;align-items:center;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box;background:#4c4d51}.active-objects-container .panel-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;cursor:default;background:color-mix(in srgb,#000 70%,transparent);border-bottom:1px solid rgba(255,255,255,.1)}.active-objects-container .collapsed-title{color:#fff;font-weight:600;font-size:12px;padding:8px 4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.active-objects-container .collapsed-title:hover{color:#1976d2}.header-icons{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:0 10px!important}.header-icons .header-left-controls,.header-icons .header-right-controls{display:flex;align-items:center;gap:8px}.header-icons .header-right-controls{margin-left:auto;padding-left:12px;border-left:1px solid rgba(255,255,255,.15)}.header-icons .zoom-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .zoom-icon:hover{color:#4caf50}.header-icons .zoom-icon.zoom-active{color:#4caf50!important}.header-icons .reset-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .reset-icon:hover{color:#ff9800}.header-icons .warning-icon{color:#ff9800;font-size:18px;cursor:help}.header-icons .end-session-icon{cursor:pointer;color:#4caf50;font-size:18px;transition:all .2s ease}.header-icons .end-session-icon:hover{color:#45a049}.active-objects-container input[type=range]{width:95%;margin:8px auto}.active-objects-content{display:block;width:100%;max-height:278px;overflow:auto;background:#4c4d51}.active-objects-content::-webkit-scrollbar{width:12px}.active-objects-content::-webkit-scrollbar-track{background:#757474;border-radius:8px}.active-objects-content::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.active-objects-content::-webkit-scrollbar-thumb:hover{background:#0f1012}.active-objects-content::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.active-objects-content::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.active-objects-content::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.active-objects-content .zoom-icon{color:#fff;font-size:18px;transition:all .2s ease}.active-objects-content .zoom-icon:hover{color:#4caf50}.active-objects-content .zoom-icon.zoom-active{color:#4caf50!important}mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%}mat-expansion-panel:last-child{border-bottom:none}mat-expansion-panel ::ng-deep .mat-expansion-panel-header{padding:0 16px;font-weight:500}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-content{display:flex;justify-content:space-between;align-items:center;color:#fff}mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0}.item-list{display:flex;flex-direction:column}@media (max-width: 768px){.active-objects-wrapper{right:.5em;top:8em;max-width:280px;width:280px}.item{font-size:13px;padding:6px 10px}}@media (max-width: 480px){.active-objects-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.item-list{max-height:200px}}\n"] }]
3785
+ args: [{ selector: 'activeObjects', imports: [CommonModule, FormsModule, MatExpansionModule, MatIconModule, DragDropModule, MatTooltipModule], template: "<div class=\"active-objects-wrapper\" \n cdkDrag \n cdkDragBoundary=\".map-container\" \n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle-active-objects\" cdkDragHandle>\n <mat-icon \n class=\"active-object-icon\" \n (click)=\"zoomToAll()\"\n matTooltip=\"Aktive objekter\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n format_list_bulleted_add\n </mat-icon>\n \n <div class=\"right-icons\">\n <mat-icon class=\"toggle-icon\" (click)=\"togglePanel()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n \n <div class=\"active-objects-container\">\n @if(!collapsed) {\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"opacity\"\n (input)=\"updateOpacity()\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n }\n\n @if(!collapsed) {\n <div class=\"active-objects-content\">\n <div class=\"header-icons\">\n <div class=\"header-left-controls\">\n <mat-icon \n class=\"zoom-icon\" \n [class.zoom-active]=\"isZoomedToAll\"\n (click)=\"zoomToAll()\" \n matTooltip=\"Zoom til alle\" \n matTooltipPosition=\"above\">\n fit_screen\n </mat-icon> \n <mat-icon \n class=\"reset-icon\" \n (click)=\"reset()\" \n matTooltip=\"Nulstilles\" \n matTooltipPosition=\"above\">\n replay\n </mat-icon>\n </div>\n \n <div class=\"header-right-controls\">\n @if(!centerPointOk) {\n <mat-icon \n class=\"warning-icon\" \n matTooltip=\"Der er ikke noget centerpunkt og det skal der v\u00E6re\" \n matTooltipPosition=\"above\">\n warning\n </mat-icon>\n } @else {\n @if (endSessionEnabled) {\n <mat-icon \n class=\"end-session-icon\" \n (click)=\"endSession()\" \n matTooltip=\"Afslut\" \n matTooltipPosition=\"above\">\n done_all\n </mat-icon>\n }\n }\n </div>\n </div>\n @for(featureTypeObj of activeFeatures; track featureTypeObj.featureType) {\n <mat-expansion-panel>\n <mat-expansion-panel-header \n [matTooltip]=\"featureTypeObj.display\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">\n <span class=\"panel-title\">\n {{featureTypeObj.display}} ({{featureTypeObj.features.length}})\n </span>\n </mat-expansion-panel-header>\n <div class=\"item-list\">\n @for(item of featureTypeObj.features; track item.id) {\n <div class=\"item\">\n <div class=\"item-text\">\n <span class=\"item-id\">{{item.id}}</span>\n <span class=\"item-area\">{{item.area}}</span>\n @if(item.containedMissingIn && item.containedMissingIn.length > 0) {\n <div class=\"item-warning\">\n <mat-icon>error</mat-icon>\n <span>Udenfor {{item.containedMissingIn.join(', ')}}</span>\n </div> \n }\n </div>\n @if(!item.locked) {\n <mat-icon (click)=\"delete(item.id)\">delete</mat-icon>\n }\n <mat-icon (click)=\"highlight(item.id)\" [class.highlight-active]=\"highlightedId === item.id\">power_settings_new</mat-icon>\n </div>\n }\n </div>\n </mat-expansion-panel>\n }\n </div>\n }\n </div> \n</div>", styles: [".active-objects-wrapper{position:absolute;top:8em;left:1em;z-index:2;box-shadow:0 2px 10px #0000001a;background:#4c4d51;width:350px;max-width:350px;transition:width .3s ease,max-width .3s ease;border-radius:5px!important}.active-objects-wrapper.collapsed{width:90px}.active-objects-wrapper.collapsed .drag-handle-active-objects .active-object-icon{cursor:default!important}.active-objects-wrapper.collapsed .drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px;margin-right:10px;line-height:1.3;font-weight:600;color:#bdc1c3cc;font-size:13px}mat-expansion-panel .mat-expansion-panel-header.mat-expanded:hover{background:#ffffff1a!important}.item{display:flex;justify-content:space-between;align-items:center;padding:0 18px;border-radius:4px;background:transparent!important;transition:all .2s ease;font-size:14px;color:#fff;min-height:40px;cursor:default}.item .item-text{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;gap:4px}.item .item-text .item-warning{display:inline-flex;align-items:center;gap:6px;font-size:11px;width:fit-content;max-width:100%;color:#dfca0e;margin-top:2px;margin-bottom:2px}.item .item-text .item-warning mat-icon{font-size:14px;width:14px;height:14px;color:#dfca0e;margin:0;cursor:default;flex-shrink:0}.item .item-text .item-warning mat-icon:hover{color:#ccb913}.item .item-text .item-warning span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.item .item-id{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:2px;max-width:250px;font-size:13px}.item .item-area{font-size:13px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item mat-icon{cursor:pointer;color:#e5281a;font-size:18px;width:18px;height:18px;flex-shrink:0;margin-left:8px;transition:color .2s ease,background .2s ease}.item mat-icon:hover{color:#d32f2f}.highlight-active{color:#4caf50!important;transition:all .2s ease}.drag-handle-active-objects{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;color:#fff;border-radius:5px;width:100%;box-sizing:border-box}.drag-handle-active-objects .active-object-icon{cursor:default!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons{display:flex;align-items:center;gap:7px}.drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons .toggle-icon:hover{color:#d3d3d3}.active-objects-container{display:flex;flex-direction:column;align-items:center;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box;background:#4c4d51;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.active-objects-container .panel-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;cursor:default;background:color-mix(in srgb,#000 70%,transparent);border-bottom:1px solid rgba(255,255,255,.1)}.active-objects-container .collapsed-title{color:#fff;font-weight:600;font-size:12px;padding:8px 4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.active-objects-container .collapsed-title:hover{color:#1976d2}.header-icons{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:0 10px!important}.header-icons .header-left-controls,.header-icons .header-right-controls{display:flex;align-items:center;gap:8px}.header-icons .header-right-controls{margin-left:auto;padding-left:12px;border-left:1px solid rgba(255,255,255,.15)}.header-icons .zoom-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .zoom-icon:hover{color:#4caf50}.header-icons .zoom-icon.zoom-active{color:#4caf50!important}.header-icons .reset-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .reset-icon:hover{color:#ff9800}.header-icons .warning-icon{color:#ff9800;font-size:18px;cursor:help}.header-icons .end-session-icon{cursor:pointer;color:#4caf50;font-size:18px;transition:all .2s ease}.header-icons .end-session-icon:hover{color:#45a049}.active-objects-container input[type=range]{width:95%;margin:8px auto}.active-objects-content{display:block;width:100%;max-height:278px;overflow:auto;background:#4c4d51;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.active-objects-content::-webkit-scrollbar{width:12px}.active-objects-content::-webkit-scrollbar-track{background:#757474;border-radius:8px}.active-objects-content::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.active-objects-content::-webkit-scrollbar-thumb:hover{background:#0f1012}.active-objects-content::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.active-objects-content::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.active-objects-content::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.active-objects-content .zoom-icon{color:#fff;font-size:18px;transition:all .2s ease}.active-objects-content .zoom-icon:hover{color:#4caf50}.active-objects-content .zoom-icon.zoom-active{color:#4caf50!important}mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%}mat-expansion-panel:last-child{border-bottom:none}mat-expansion-panel ::ng-deep .mat-expansion-panel-header{padding:0 16px;font-weight:500;height:48px}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-content{display:flex;justify-content:space-between;align-items:center;color:#fff}mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0}.item-list{display:flex;flex-direction:column}@media (max-width: 768px){.active-objects-wrapper{right:.5em;top:8em;max-width:280px;width:280px}.item{font-size:13px;padding:6px 10px}}@media (max-width: 480px){.active-objects-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.item-list{max-height:200px}}\n"] }]
3776
3786
  }], ctorParameters: () => [], propDecorators: { settings: [{
3777
3787
  type: Input,
3778
3788
  args: [{ required: true }]
@@ -3915,6 +3925,7 @@ class MapSearchComponent {
3915
3925
  _cadastreSearch = inject(CadastreSearchService);
3916
3926
  _layerHelperService = inject(LayerHelperService);
3917
3927
  _layoutService = inject(LayoutService);
3928
+ _profileService = inject(ProfileService);
3918
3929
  _zoomService = inject(ZoomService);
3919
3930
  ngOnInit() {
3920
3931
  this._layerHelperService.activeLayersChanged
@@ -4012,7 +4023,12 @@ class MapSearchComponent {
4012
4023
  _loadPosition() {
4013
4024
  try {
4014
4025
  const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
4015
- if (savedPosition) {
4026
+ if (this._profileService.getProfileVersionChanged() &&
4027
+ this.profile?.searchInitialPosition) {
4028
+ //Profile version changed in backend, use that
4029
+ this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.searchInitialPosition);
4030
+ }
4031
+ else if (savedPosition) {
4016
4032
  this.dragPosition = JSON.parse(savedPosition);
4017
4033
  }
4018
4034
  else if (this.profile && this.profile.searchInitialPosition) {
@@ -4030,7 +4046,7 @@ class MapSearchComponent {
4030
4046
  }
4031
4047
  }
4032
4048
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MapSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4033
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MapSearchComponent, isStandalone: true, selector: "lib-map-search", inputs: { profile: "profile" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"search-container\" \n cdkDrag \n cdkDragBoundary=\".map-container\" \n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle\" cdkDragHandle>\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"S\u00F8g\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n manage_search\n </mat-icon>\n <div class=\"right-icons\"> \n <mat-icon class=\"toggle-icon\" (click)=\"toggleSearch()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n\n <div class=\"search-content\" *ngIf=\"!collapsed\">\n <mat-form-field appearance=\"outline\" class=\"search-field\">\n <mat-label>S\u00F8g</mat-label>\n <input\n type=\"text\"\n matInput\n [(ngModel)]=\"searchAddress\"\n [matAutocomplete]=\"auto\"\n (input)=\"filterResults()\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displaySearchFn\">\n <span *ngFor=\"let result of filteredResults\" >\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}}<span *ngIf=\"result.total\">af {{result.total }}</span>)\n </span>\n <mat-option *ngFor=\"let item of result.items\" [value]=item>\n <div class=\"item-container\">\n <span class=\"item-header\">{{item.header}}</span>\n <mat-icon (click)=\"highlight(item.wkt, $event)\">power_settings_new</mat-icon>\n </div>\n </mat-option>\n </span>\n </mat-autocomplete>\n </mat-form-field>\n </div>\n</div>", styles: [".search-container{position:absolute;top:8em;left:1em;z-index:2;max-width:550px;min-width:48px;width:auto;border-radius:5px;background:#4c4d51;transition:width .3s ease,max-width .3s ease}.search-container.collapsed{width:90px;max-width:90px;min-width:90px}.search-container.collapsed .drag-handle{width:90px;box-sizing:border-box}.search-container.collapsed .drag-handle .icon-left{margin-left:3px}.search-container.cdk-drag-dragging{opacity:.8;cursor:grab}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:450px}.search-container.collapsed{width:90px!important;min-width:90px!important;max-width:90px!important}}@media (max-width: 480px){.search-container{left:1.5em;right:1.5em;max-width:calc(100vw - 3em)}.search-container.collapsed{width:90px!important;min-width:90px!important;max-width:90px!important}}.compact-icon.custom-image-icon{padding:4px;background:none;border:1px solid rgba(255,255,255,.2)}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.compact-icon.custom-image-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985);border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.compact-icon.custom-image-icon:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e94d}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.drag-handle{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;border-radius:5px 5px 0 0;color:#fff}.drag-handle .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.search-content{display:flex;flex-direction:column;background:#4c4d51;padding:6px;transition:all .3s ease;box-sizing:border-box;cursor:default;border-radius:0 0 5px 5px}.compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.compact-icon.custom-image-icon{background:none;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer}.toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}.search-field{width:100%;min-width:300px;cursor:pointer;flex:1}.search-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent}.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important;border-width:1.5px!important;transition:border-color .3s ease,border-width .3s ease}.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important}.search-field ::ng-deep .mat-mdc-form-field-label{color:#fff!important;font-weight:500;font-size:15px}.search-field ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-form-field-label{color:#2196f3!important}.search-field ::ng-deep .mat-mdc-input-element{font-size:15px;color:#fff;font-weight:400;line-height:1.5}.search-field ::ng-deep .mat-mdc-input-element::placeholder{color:#ccc;font-weight:400;opacity:.8}.search-field ::ng-deep .mdc-floating-label{padding:0 4px;left:40px!important}::ng-deep .mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field__input{margin-left:12px;color:#fff!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{color:#fff!important}::ng-deep .mat-mdc-form-field-flex{height:40px!important}::ng-deep .mat-mdc-autocomplete-panel{border-radius:5px!important;max-height:320px!important;background:#4c4d51!important;box-shadow:0 8px 24px #00000026!important;margin-top:35px;overflow-y:auto!important;padding:8px!important}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar{width:12px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover{background-color:#ffffff14!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected{background-color:#ffffff1f!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:inherit;line-height:1.5;width:100%}.search-result-option{display:flex;flex-direction:column;gap:8px}.result-title{font-weight:600;font-size:13px;color:#bdc1c3cc!important;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.item-container{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px}.item-container .item-header{font-size:14px;color:#fff!important;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.item-container mat-icon{color:#fff!important;font-size:20px;width:20px;height:20px;flex-shrink:0;cursor:pointer;transition:all .2s ease}.item-container mat-icon:hover{color:#f7f7f7!important}.search-result-item{display:flex;align-items:center;justify-content:space-between;padding:6px 4px;border-radius:5px;margin-left:4px;transition:all .6s ease}.search-result-item:hover{color:#f4f4f5;background:#ffffff1a}.search-result-item .item-header{font-size:14px;color:#fff!important;flex:1;font-weight:500}.search-result-item mat-icon{color:#fff!important;font-size:20px;width:20px;height:20px;cursor:pointer;transition:all .2s ease}.search-result-item mat-icon:hover{color:#f7f7f7!important}::ng-deep .mat-mdc-text-field-wrapper{background:#6d6f73!important;border-radius:5px;transition:all .3s cubic-bezier(.4,0,.2,1)}::ng-deep .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{color:#fff!important}::ng-deep .mdc-text-field{border-radius:5px!important}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:450px}.search-container.collapsed{width:88px;min-width:88px;max-width:88px}.search-field{min-width:250px}.toggle-icon{font-size:18px;width:18px;height:18px}}@media (max-width: 480px){.search-container{left:1.5em;right:1.5em;max-width:calc(100vw - 3em)}.search-container.collapsed{width:40px;min-width:40px;max-width:40px;right:auto}.search-field{min-width:150px}.search-field ::ng-deep .mat-mdc-input-element{font-size:14px}::ng-deep .mat-mdc-autocomplete-panel{max-height:240px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:48px!important;padding:10px 16px!important}.toggle-icon{font-size:16px;width:16px;height:16px}.item-container{gap:8px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
4049
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MapSearchComponent, isStandalone: true, selector: "lib-map-search", inputs: { profile: "profile" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"search-container\" \n cdkDrag \n cdkDragBoundary=\".map-container\" \n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle\" cdkDragHandle>\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"S\u00F8g\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n manage_search\n </mat-icon>\n <div class=\"right-icons\"> \n <mat-icon class=\"toggle-icon\" (click)=\"toggleSearch()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n\n <div class=\"search-content\" *ngIf=\"!collapsed\">\n <mat-form-field appearance=\"outline\" class=\"search-field\">\n <mat-label>S\u00F8g</mat-label>\n <input\n type=\"text\"\n matInput\n [(ngModel)]=\"searchAddress\"\n [matAutocomplete]=\"auto\"\n (input)=\"filterResults()\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displaySearchFn\">\n <span *ngFor=\"let result of filteredResults\" >\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}}<span *ngIf=\"result.total\">af {{result.total }}</span>)\n </span>\n <mat-option *ngFor=\"let item of result.items\" [value]=item>\n <div class=\"item-container\">\n <span class=\"item-header\">{{item.header}}</span>\n <mat-icon (click)=\"highlight(item.wkt, $event)\">power_settings_new</mat-icon>\n </div>\n </mat-option>\n </span>\n </mat-autocomplete>\n </mat-form-field>\n </div>\n</div>", styles: [".search-container{position:absolute;top:8em;left:1em;z-index:2;max-width:550px;min-width:48px;width:auto;border-radius:5px;background:#4c4d51;transition:width .3s ease,max-width .3s ease}.search-container.collapsed{width:90px;max-width:90px;min-width:90px}.search-container.collapsed .drag-handle{width:90px;box-sizing:border-box}.search-container.collapsed .drag-handle .icon-left{margin-left:3px}.search-container.cdk-drag-dragging{opacity:.8;cursor:grab}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:450px}.search-container.collapsed{width:90px!important;min-width:90px!important;max-width:90px!important}}@media (max-width: 480px){.search-container{left:1.5em;right:1.5em;max-width:calc(100vw - 3em)}.search-container.collapsed{width:90px!important;min-width:90px!important;max-width:90px!important}}.compact-icon.custom-image-icon{padding:4px;background:none;border:1px solid rgba(255,255,255,.2)}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.compact-icon.custom-image-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985);border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.compact-icon.custom-image-icon:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e94d}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.drag-handle{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;border-radius:5px;color:#fff}.drag-handle .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.search-content{display:flex;flex-direction:column;background:#4c4d51;padding:6px;transition:all .3s ease;box-sizing:border-box;border-radius:0 0 5px 5px}.compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.compact-icon.custom-image-icon{background:none;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer}.toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}.search-field{width:100%;min-width:300px;cursor:pointer;flex:1}.search-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent}.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important;border-width:1.5px!important;transition:border-color .3s ease,border-width .3s ease}.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important}.search-field ::ng-deep .mat-mdc-form-field-label{color:#fff!important;font-weight:500;font-size:13px}.search-field ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-form-field-label{color:#2196f3!important}.search-field ::ng-deep .mat-mdc-input-element{font-size:13px;color:#fff;font-weight:400;line-height:1.5}.search-field ::ng-deep .mat-mdc-input-element::placeholder{color:#ccc;font-weight:400;opacity:.8}::ng-deep .mat-mdc-text-field-wrapper{border-radius:0!important}::ng-deep .mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field__input{margin-left:12px;color:#fff!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{color:#fff!important}::ng-deep .mat-mdc-form-field-flex{height:40px!important}::ng-deep .mat-mdc-autocomplete-panel{border-radius:5px!important;max-height:320px!important;background:#4c4d51!important;box-shadow:0 8px 24px #00000026!important;margin-top:35px;overflow-y:auto!important;padding:8px!important}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar{width:12px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover{background-color:#ffffff14!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected{background-color:#ffffff1f!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:inherit;line-height:1.5;width:100%}.search-result-option{display:flex;flex-direction:column;gap:8px}.result-title{font-weight:600;font-size:13px;color:#bdc1c3cc!important;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.item-container{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px}.item-container .item-header{font-size:14px;color:#fff!important;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.item-container mat-icon{color:#fff!important;font-size:20px;width:20px;height:20px;flex-shrink:0;cursor:pointer;transition:all .2s ease}.item-container mat-icon:hover{color:#f7f7f7!important}.search-result-item{display:flex;align-items:center;justify-content:space-between;padding:6px 4px;border-radius:5px;margin-left:4px;transition:all .6s ease}.search-result-item:hover{color:#f4f4f5;background:#ffffff1a}.search-result-item .item-header{font-size:14px;color:#fff!important;flex:1;font-weight:500}.search-result-item mat-icon{color:#fff!important;font-size:20px;width:20px;height:20px;cursor:pointer;transition:all .2s ease}.search-result-item mat-icon:hover{color:#f7f7f7!important}::ng-deep .mat-mdc-text-field-wrapper{background:#6d6f73!important;border-radius:5px;transition:all .3s cubic-bezier(.4,0,.2,1)}::ng-deep .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{color:#fff!important}::ng-deep .mdc-text-field{border-radius:0!important}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:450px}.search-container.collapsed{width:88px;min-width:88px;max-width:88px}.search-field{min-width:250px}.toggle-icon{font-size:18px;width:18px;height:18px}}@media (max-width: 480px){.search-container{left:1.5em;right:1.5em;max-width:calc(100vw - 3em)}.search-container.collapsed{width:40px;min-width:40px;max-width:40px;right:auto}.search-field{min-width:150px}.search-field ::ng-deep .mat-mdc-input-element{font-size:14px}::ng-deep .mat-mdc-autocomplete-panel{max-height:240px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:48px!important;padding:10px 16px!important}.toggle-icon{font-size:16px;width:16px;height:16px}.item-container{gap:8px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
4034
4050
  }
4035
4051
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MapSearchComponent, decorators: [{
4036
4052
  type: Component,
@@ -4044,7 +4060,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
4044
4060
  MatIconModule,
4045
4061
  DragDropModule,
4046
4062
  MatTooltipModule
4047
- ], template: "<div class=\"search-container\" \n cdkDrag \n cdkDragBoundary=\".map-container\" \n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle\" cdkDragHandle>\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"S\u00F8g\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n manage_search\n </mat-icon>\n <div class=\"right-icons\"> \n <mat-icon class=\"toggle-icon\" (click)=\"toggleSearch()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n\n <div class=\"search-content\" *ngIf=\"!collapsed\">\n <mat-form-field appearance=\"outline\" class=\"search-field\">\n <mat-label>S\u00F8g</mat-label>\n <input\n type=\"text\"\n matInput\n [(ngModel)]=\"searchAddress\"\n [matAutocomplete]=\"auto\"\n (input)=\"filterResults()\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displaySearchFn\">\n <span *ngFor=\"let result of filteredResults\" >\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}}<span *ngIf=\"result.total\">af {{result.total }}</span>)\n </span>\n <mat-option *ngFor=\"let item of result.items\" [value]=item>\n <div class=\"item-container\">\n <span class=\"item-header\">{{item.header}}</span>\n <mat-icon (click)=\"highlight(item.wkt, $event)\">power_settings_new</mat-icon>\n </div>\n </mat-option>\n </span>\n </mat-autocomplete>\n </mat-form-field>\n </div>\n</div>", styles: [".search-container{position:absolute;top:8em;left:1em;z-index:2;max-width:550px;min-width:48px;width:auto;border-radius:5px;background:#4c4d51;transition:width .3s ease,max-width .3s ease}.search-container.collapsed{width:90px;max-width:90px;min-width:90px}.search-container.collapsed .drag-handle{width:90px;box-sizing:border-box}.search-container.collapsed .drag-handle .icon-left{margin-left:3px}.search-container.cdk-drag-dragging{opacity:.8;cursor:grab}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:450px}.search-container.collapsed{width:90px!important;min-width:90px!important;max-width:90px!important}}@media (max-width: 480px){.search-container{left:1.5em;right:1.5em;max-width:calc(100vw - 3em)}.search-container.collapsed{width:90px!important;min-width:90px!important;max-width:90px!important}}.compact-icon.custom-image-icon{padding:4px;background:none;border:1px solid rgba(255,255,255,.2)}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.compact-icon.custom-image-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985);border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.compact-icon.custom-image-icon:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e94d}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.drag-handle{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;border-radius:5px 5px 0 0;color:#fff}.drag-handle .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.search-content{display:flex;flex-direction:column;background:#4c4d51;padding:6px;transition:all .3s ease;box-sizing:border-box;cursor:default;border-radius:0 0 5px 5px}.compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.compact-icon.custom-image-icon{background:none;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer}.toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}.search-field{width:100%;min-width:300px;cursor:pointer;flex:1}.search-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent}.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important;border-width:1.5px!important;transition:border-color .3s ease,border-width .3s ease}.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important}.search-field ::ng-deep .mat-mdc-form-field-label{color:#fff!important;font-weight:500;font-size:15px}.search-field ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-form-field-label{color:#2196f3!important}.search-field ::ng-deep .mat-mdc-input-element{font-size:15px;color:#fff;font-weight:400;line-height:1.5}.search-field ::ng-deep .mat-mdc-input-element::placeholder{color:#ccc;font-weight:400;opacity:.8}.search-field ::ng-deep .mdc-floating-label{padding:0 4px;left:40px!important}::ng-deep .mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field__input{margin-left:12px;color:#fff!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{color:#fff!important}::ng-deep .mat-mdc-form-field-flex{height:40px!important}::ng-deep .mat-mdc-autocomplete-panel{border-radius:5px!important;max-height:320px!important;background:#4c4d51!important;box-shadow:0 8px 24px #00000026!important;margin-top:35px;overflow-y:auto!important;padding:8px!important}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar{width:12px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover{background-color:#ffffff14!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected{background-color:#ffffff1f!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:inherit;line-height:1.5;width:100%}.search-result-option{display:flex;flex-direction:column;gap:8px}.result-title{font-weight:600;font-size:13px;color:#bdc1c3cc!important;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.item-container{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px}.item-container .item-header{font-size:14px;color:#fff!important;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.item-container mat-icon{color:#fff!important;font-size:20px;width:20px;height:20px;flex-shrink:0;cursor:pointer;transition:all .2s ease}.item-container mat-icon:hover{color:#f7f7f7!important}.search-result-item{display:flex;align-items:center;justify-content:space-between;padding:6px 4px;border-radius:5px;margin-left:4px;transition:all .6s ease}.search-result-item:hover{color:#f4f4f5;background:#ffffff1a}.search-result-item .item-header{font-size:14px;color:#fff!important;flex:1;font-weight:500}.search-result-item mat-icon{color:#fff!important;font-size:20px;width:20px;height:20px;cursor:pointer;transition:all .2s ease}.search-result-item mat-icon:hover{color:#f7f7f7!important}::ng-deep .mat-mdc-text-field-wrapper{background:#6d6f73!important;border-radius:5px;transition:all .3s cubic-bezier(.4,0,.2,1)}::ng-deep .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{color:#fff!important}::ng-deep .mdc-text-field{border-radius:5px!important}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:450px}.search-container.collapsed{width:88px;min-width:88px;max-width:88px}.search-field{min-width:250px}.toggle-icon{font-size:18px;width:18px;height:18px}}@media (max-width: 480px){.search-container{left:1.5em;right:1.5em;max-width:calc(100vw - 3em)}.search-container.collapsed{width:40px;min-width:40px;max-width:40px;right:auto}.search-field{min-width:150px}.search-field ::ng-deep .mat-mdc-input-element{font-size:14px}::ng-deep .mat-mdc-autocomplete-panel{max-height:240px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:48px!important;padding:10px 16px!important}.toggle-icon{font-size:16px;width:16px;height:16px}.item-container{gap:8px}}\n"] }]
4063
+ ], template: "<div class=\"search-container\" \n cdkDrag \n cdkDragBoundary=\".map-container\" \n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle\" cdkDragHandle>\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"S\u00F8g\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n manage_search\n </mat-icon>\n <div class=\"right-icons\"> \n <mat-icon class=\"toggle-icon\" (click)=\"toggleSearch()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n\n <div class=\"search-content\" *ngIf=\"!collapsed\">\n <mat-form-field appearance=\"outline\" class=\"search-field\">\n <mat-label>S\u00F8g</mat-label>\n <input\n type=\"text\"\n matInput\n [(ngModel)]=\"searchAddress\"\n [matAutocomplete]=\"auto\"\n (input)=\"filterResults()\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displaySearchFn\">\n <span *ngFor=\"let result of filteredResults\" >\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}}<span *ngIf=\"result.total\">af {{result.total }}</span>)\n </span>\n <mat-option *ngFor=\"let item of result.items\" [value]=item>\n <div class=\"item-container\">\n <span class=\"item-header\">{{item.header}}</span>\n <mat-icon (click)=\"highlight(item.wkt, $event)\">power_settings_new</mat-icon>\n </div>\n </mat-option>\n </span>\n </mat-autocomplete>\n </mat-form-field>\n </div>\n</div>", styles: [".search-container{position:absolute;top:8em;left:1em;z-index:2;max-width:550px;min-width:48px;width:auto;border-radius:5px;background:#4c4d51;transition:width .3s ease,max-width .3s ease}.search-container.collapsed{width:90px;max-width:90px;min-width:90px}.search-container.collapsed .drag-handle{width:90px;box-sizing:border-box}.search-container.collapsed .drag-handle .icon-left{margin-left:3px}.search-container.cdk-drag-dragging{opacity:.8;cursor:grab}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:450px}.search-container.collapsed{width:90px!important;min-width:90px!important;max-width:90px!important}}@media (max-width: 480px){.search-container{left:1.5em;right:1.5em;max-width:calc(100vw - 3em)}.search-container.collapsed{width:90px!important;min-width:90px!important;max-width:90px!important}}.compact-icon.custom-image-icon{padding:4px;background:none;border:1px solid rgba(255,255,255,.2)}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.compact-icon.custom-image-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985);border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.compact-icon.custom-image-icon:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e94d}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.drag-handle{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;border-radius:5px;color:#fff}.drag-handle .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.search-content{display:flex;flex-direction:column;background:#4c4d51;padding:6px;transition:all .3s ease;box-sizing:border-box;border-radius:0 0 5px 5px}.compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.compact-icon.custom-image-icon{background:none;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer}.toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}.search-field{width:100%;min-width:300px;cursor:pointer;flex:1}.search-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent}.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important;border-width:1.5px!important;transition:border-color .3s ease,border-width .3s ease}.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,.search-field:not(.mat-focused):hover ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:transparent!important}.search-field ::ng-deep .mat-mdc-form-field-label{color:#fff!important;font-weight:500;font-size:13px}.search-field ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-form-field-label{color:#2196f3!important}.search-field ::ng-deep .mat-mdc-input-element{font-size:13px;color:#fff;font-weight:400;line-height:1.5}.search-field ::ng-deep .mat-mdc-input-element::placeholder{color:#ccc;font-weight:400;opacity:.8}::ng-deep .mat-mdc-text-field-wrapper{border-radius:0!important}::ng-deep .mat-mdc-form-field.mat-form-field-animations-enabled .mdc-text-field__input{margin-left:12px;color:#fff!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{color:#fff!important}::ng-deep .mat-mdc-form-field-flex{height:40px!important}::ng-deep .mat-mdc-autocomplete-panel{border-radius:5px!important;max-height:320px!important;background:#4c4d51!important;box-shadow:0 8px 24px #00000026!important;margin-top:35px;overflow-y:auto!important;padding:8px!important}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar{width:12px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .mat-mdc-autocomplete-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover{background-color:#ffffff14!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected{background-color:#ffffff1f!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:inherit;line-height:1.5;width:100%}.search-result-option{display:flex;flex-direction:column;gap:8px}.result-title{font-weight:600;font-size:13px;color:#bdc1c3cc!important;display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}.item-container{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px}.item-container .item-header{font-size:14px;color:#fff!important;font-weight:500;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.item-container mat-icon{color:#fff!important;font-size:20px;width:20px;height:20px;flex-shrink:0;cursor:pointer;transition:all .2s ease}.item-container mat-icon:hover{color:#f7f7f7!important}.search-result-item{display:flex;align-items:center;justify-content:space-between;padding:6px 4px;border-radius:5px;margin-left:4px;transition:all .6s ease}.search-result-item:hover{color:#f4f4f5;background:#ffffff1a}.search-result-item .item-header{font-size:14px;color:#fff!important;flex:1;font-weight:500}.search-result-item mat-icon{color:#fff!important;font-size:20px;width:20px;height:20px;cursor:pointer;transition:all .2s ease}.search-result-item mat-icon:hover{color:#f7f7f7!important}::ng-deep .mat-mdc-text-field-wrapper{background:#6d6f73!important;border-radius:5px;transition:all .3s cubic-bezier(.4,0,.2,1)}::ng-deep .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{color:#fff!important}::ng-deep .mdc-text-field{border-radius:0!important}@media (max-width: 768px){.search-container{left:2em;top:1.5em;max-width:450px}.search-container.collapsed{width:88px;min-width:88px;max-width:88px}.search-field{min-width:250px}.toggle-icon{font-size:18px;width:18px;height:18px}}@media (max-width: 480px){.search-container{left:1.5em;right:1.5em;max-width:calc(100vw - 3em)}.search-container.collapsed{width:40px;min-width:40px;max-width:40px;right:auto}.search-field{min-width:150px}.search-field ::ng-deep .mat-mdc-input-element{font-size:14px}::ng-deep .mat-mdc-autocomplete-panel{max-height:240px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{min-height:48px!important;padding:10px 16px!important}.toggle-icon{font-size:16px;width:16px;height:16px}.item-container{gap:8px}}\n"] }]
4048
4064
  }], propDecorators: { profile: [{
4049
4065
  type: Input
4050
4066
  }] } });
@@ -4071,6 +4087,7 @@ class LegendsListComponent {
4071
4087
  _layerService = inject(LayerService);
4072
4088
  _layerHelperService = inject(LayerHelperService);
4073
4089
  _layoutService = inject(LayoutService);
4090
+ _profileService = inject(ProfileService);
4074
4091
  config = inject(GISKOMPONENT_CONFIG);
4075
4092
  map;
4076
4093
  profile;
@@ -4121,7 +4138,12 @@ class LegendsListComponent {
4121
4138
  _loadPosition() {
4122
4139
  try {
4123
4140
  const savedPosition = localStorage.getItem(this.POSITION_STORAGE_KEY);
4124
- if (savedPosition) {
4141
+ if (this._profileService.getProfileVersionChanged() &&
4142
+ this.profile?.legendsListInitialPosition) {
4143
+ //Profile version changed in backend, use that
4144
+ this.dragPosition = this._layoutService.loadInitialPositionFromProfile(this.POSITION_STORAGE_KEY, this.profile.legendsListInitialPosition);
4145
+ }
4146
+ else if (savedPosition) {
4125
4147
  this.dragPosition = JSON.parse(savedPosition);
4126
4148
  }
4127
4149
  else if (this.profile?.legendsListInitialPosition) {
@@ -4187,12 +4209,12 @@ class LegendsListComponent {
4187
4209
  })));
4188
4210
  }
4189
4211
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LegendsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4190
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LegendsListComponent, isStandalone: true, selector: "lib-legends-list", inputs: { map: "map", profile: "profile" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"legends-list-body-wrapper\" \n cdkDrag \n cdkDragBoundary=\".map-container\" \n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n\n <div class=\"drag-handle-legends\" cdkDragHandle>\n <mat-icon \n class=\"legend-icon\" \n matTooltip=\"Legendeliste\" \n (click)=\"toggleLegendsList()\"\n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n area_chart\n </mat-icon>\n <div class=\"right-icons\">\n <mat-icon class=\"toggle-icon\" (click)=\"toggleLegendsList()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n</div>\n\n<div class=\"legends-list-container\">\n @if(!collapsed) {\n <div class=\"ol-unselectable ol-control legends-list-body\">\n <div class=\"item-list\">\n @for (layer of filteredLayersDetailed; track layer.id; let i = $index) {\n @if (layer.imageUrl) {\n <mat-expansion-panel [expanded]=\"i === 0\"> \n <mat-expansion-panel-header>\n <span class=\"panel-title\">\n {{ layer.name }}\n </span>\n </mat-expansion-panel-header>\n <div class=\"legend\">\n <img [src]=\"layer.imageUrl\" class=\"legend-thumbnail\"/>\n </div>\n </mat-expansion-panel>\n }\n }\n </div>\n </div>\n}\n</div>\n</div>", styles: [".legends-list-body-wrapper{position:absolute;left:1em;top:10em;z-index:1000;box-shadow:0 2px 10px #0000001a;width:250px;max-width:250px;transition:width .3s ease,max-width .3s ease;background:#4c4d51;border-radius:5px}.legends-list-body-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}.legends-list-body-wrapper.collapsed .drag-handle-legends{width:90px;box-sizing:border-box}.legends-list-body-wrapper.collapsed .drag-handle-legends .legend-icon{margin-right:0}.legends-list-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grabbing;z-index:1001}@media (max-width: 1024px){.legends-list-body-wrapper{width:240px;max-width:240px}.legends-list-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}@media (max-width: 768px){.legends-list-body-wrapper{position:fixed;right:1em;bottom:5em;width:calc(100% - 2em);max-width:280px}.legends-list-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important;left:auto;right:1em}}@media (max-width: 480px){.legends-list-body-wrapper{bottom:4em}.legends-list-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}.drag-handle-legends{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;color:#fff;border-radius:5px 5px 0 0}.drag-handle-legends .legend-icon{color:#fff;font-size:18px;cursor:default!important;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.drag-handle-legends .toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-legends .toggle-icon:hover{color:#d3d3d3}.right-icons{display:flex;align-items:center;gap:10px}.legends-list-container{display:flex;flex-direction:column;align-items:center;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box}::ng-deep .legends-list-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:#4c4d51;width:100%;max-height:317px;min-height:80px;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 1024px){::ng-deep .legends-list-body{max-height:450px;min-height:70px}}@media (max-width: 768px){::ng-deep .legends-list-body{max-height:60vh;max-height:calc(var(--vh, 1vh) * 60);min-height:100px}}@media (max-width: 480px){::ng-deep .legends-list-body{max-height:70vh;max-height:calc(var(--vh, 1vh) * 70);min-height:90px}}::ng-deep .legends-list-body .item-list{flex:1 1 auto;overflow-y:auto;min-height:0;background:#4c4d51;max-height:500px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list{padding:6px;max-height:400px}}::ng-deep .legends-list-body .item-list mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%;margin-bottom:4px}::ng-deep .legends-list-body .item-list mat-expansion-panel:last-child{border-bottom:none}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header{padding:0 8px;height:40px!important;min-height:40px!important}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .mat-content{display:flex;align-items:center}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;line-height:1.3;font-weight:600;color:#bdc1c3cc;font-size:17px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .panel-title{max-width:180px;font-size:15px}}::ng-deep .legends-list-body .item-list .mat-expansion-panel-body{padding:4px 8px 8px!important}::ng-deep .legends-list-body .item-list .legend{overflow:hidden;padding:4px;box-shadow:0 -2px 2px #4868b20a,0 2px 2px #6a6f7517,0 1px 2px #4868b214}::ng-deep .legends-list-body .item-list .legend span{color:#fff}.legend-thumbnail{max-width:100%;width:auto;height:auto;max-height:150px;border:1px solid #dee2e6;display:block}@media (max-width: 768px){.legend-thumbnail{max-height:120px;padding:3px}}::ng-deep .legends-list-body .item-list::-webkit-scrollbar{width:12px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}@media (max-width: 768px){.legends-list-body-wrapper{right:.5em;bottom:5em;max-width:280px}}@media (max-width: 480px){.legends-list-body-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.legends-list-body-wrapper.collapsed{width:90px;left:auto}::ng-deep .legends-list-body .item-list{max-height:300px}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
4212
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LegendsListComponent, isStandalone: true, selector: "lib-legends-list", inputs: { map: "map", profile: "profile" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"legends-list-body-wrapper\" \n cdkDrag \n cdkDragBoundary=\".map-container\" \n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n\n <div class=\"drag-handle-legends\" cdkDragHandle>\n <mat-icon \n class=\"legend-icon\" \n matTooltip=\"Legendeliste\" \n (click)=\"toggleLegendsList()\"\n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n area_chart\n </mat-icon>\n <div class=\"right-icons\">\n <mat-icon class=\"toggle-icon\" (click)=\"toggleLegendsList()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n</div>\n\n<div class=\"legends-list-container\">\n @if(!collapsed) {\n <div class=\"ol-unselectable ol-control legends-list-body\">\n <div class=\"item-list\">\n @for (layer of filteredLayersDetailed; track layer.id; let i = $index) {\n @if (layer.imageUrl) {\n <mat-expansion-panel [expanded]=\"i === 0\"> \n <mat-expansion-panel-header>\n <span class=\"panel-title\">\n {{ layer.name }}\n </span>\n </mat-expansion-panel-header>\n <div class=\"legend\">\n <img [src]=\"layer.imageUrl\" class=\"legend-thumbnail\"/>\n </div>\n </mat-expansion-panel>\n }\n }\n </div>\n </div>\n}\n</div>\n</div>", styles: [".legends-list-body-wrapper{position:absolute;left:1em;top:10em;z-index:1000;box-shadow:0 2px 10px #0000001a;width:250px;max-width:250px;transition:width .3s ease,max-width .3s ease;background:#4c4d51;border-radius:5px}.legends-list-body-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}.legends-list-body-wrapper.collapsed .drag-handle-legends{width:90px;box-sizing:border-box}.legends-list-body-wrapper.collapsed .drag-handle-legends .legend-icon{margin-right:0}.legends-list-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grabbing;z-index:1001}@media (max-width: 1024px){.legends-list-body-wrapper{width:240px;max-width:240px}.legends-list-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}@media (max-width: 768px){.legends-list-body-wrapper{position:fixed;right:1em;bottom:5em;width:calc(100% - 2em);max-width:280px}.legends-list-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important;left:auto;right:1em}}@media (max-width: 480px){.legends-list-body-wrapper{bottom:4em}.legends-list-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}.drag-handle-legends{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;color:#fff;border-radius:5px}.drag-handle-legends .legend-icon{color:#fff;font-size:18px;cursor:default!important;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.drag-handle-legends .toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-legends .toggle-icon:hover{color:#d3d3d3}.right-icons{display:flex;align-items:center;gap:10px}.legends-list-container{display:flex;flex-direction:column;align-items:center;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box}::ng-deep .legends-list-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:#4c4d51;width:100%;max-height:317px;min-height:80px;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 1024px){::ng-deep .legends-list-body{max-height:450px;min-height:70px}}@media (max-width: 768px){::ng-deep .legends-list-body{max-height:60vh;max-height:calc(var(--vh, 1vh) * 60);min-height:100px}}@media (max-width: 480px){::ng-deep .legends-list-body{max-height:70vh;max-height:calc(var(--vh, 1vh) * 70);min-height:90px}}::ng-deep .legends-list-body .item-list{flex:1 1 auto;overflow-y:auto;min-height:0;background:#4c4d51;max-height:500px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list{padding:6px;max-height:400px}}::ng-deep .legends-list-body .item-list mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%;margin-bottom:4px}::ng-deep .legends-list-body .item-list mat-expansion-panel:last-child{border-bottom:none}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header{padding:0 8px;height:40px!important;min-height:40px!important}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .mat-content{display:flex;align-items:center}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;line-height:1.3;font-weight:600;color:#bdc1c3cc;font-size:13px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .panel-title{max-width:180px;font-size:15px}}::ng-deep .legends-list-body .item-list .mat-expansion-panel-body{padding:4px 8px 8px!important}::ng-deep .legends-list-body .item-list .legend{overflow:hidden;padding:4px}::ng-deep .legends-list-body .item-list .legend span{color:#fff}.legend-thumbnail{max-width:100%;width:auto;height:auto;max-height:150px;border:1px solid #dee2e6;display:block}@media (max-width: 768px){.legend-thumbnail{max-height:120px;padding:3px}}::ng-deep .legends-list-body .item-list::-webkit-scrollbar{width:12px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}@media (max-width: 768px){.legends-list-body-wrapper{right:.5em;bottom:5em;max-width:280px}}@media (max-width: 480px){.legends-list-body-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.legends-list-body-wrapper.collapsed{width:90px;left:auto}::ng-deep .legends-list-body .item-list{max-height:300px}}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
4191
4213
  }
4192
4214
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LegendsListComponent, decorators: [{
4193
4215
  type: Component,
4194
4216
  args: [{ selector: 'lib-legends-list', imports: [MatFormFieldModule, CommonModule, MatIconModule, FormsModule, DragDropModule,
4195
- MatExpansionModule, MatInputModule, MatTooltipModule], template: "<div class=\"legends-list-body-wrapper\" \n cdkDrag \n cdkDragBoundary=\".map-container\" \n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n\n <div class=\"drag-handle-legends\" cdkDragHandle>\n <mat-icon \n class=\"legend-icon\" \n matTooltip=\"Legendeliste\" \n (click)=\"toggleLegendsList()\"\n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n area_chart\n </mat-icon>\n <div class=\"right-icons\">\n <mat-icon class=\"toggle-icon\" (click)=\"toggleLegendsList()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n</div>\n\n<div class=\"legends-list-container\">\n @if(!collapsed) {\n <div class=\"ol-unselectable ol-control legends-list-body\">\n <div class=\"item-list\">\n @for (layer of filteredLayersDetailed; track layer.id; let i = $index) {\n @if (layer.imageUrl) {\n <mat-expansion-panel [expanded]=\"i === 0\"> \n <mat-expansion-panel-header>\n <span class=\"panel-title\">\n {{ layer.name }}\n </span>\n </mat-expansion-panel-header>\n <div class=\"legend\">\n <img [src]=\"layer.imageUrl\" class=\"legend-thumbnail\"/>\n </div>\n </mat-expansion-panel>\n }\n }\n </div>\n </div>\n}\n</div>\n</div>", styles: [".legends-list-body-wrapper{position:absolute;left:1em;top:10em;z-index:1000;box-shadow:0 2px 10px #0000001a;width:250px;max-width:250px;transition:width .3s ease,max-width .3s ease;background:#4c4d51;border-radius:5px}.legends-list-body-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}.legends-list-body-wrapper.collapsed .drag-handle-legends{width:90px;box-sizing:border-box}.legends-list-body-wrapper.collapsed .drag-handle-legends .legend-icon{margin-right:0}.legends-list-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grabbing;z-index:1001}@media (max-width: 1024px){.legends-list-body-wrapper{width:240px;max-width:240px}.legends-list-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}@media (max-width: 768px){.legends-list-body-wrapper{position:fixed;right:1em;bottom:5em;width:calc(100% - 2em);max-width:280px}.legends-list-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important;left:auto;right:1em}}@media (max-width: 480px){.legends-list-body-wrapper{bottom:4em}.legends-list-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}.drag-handle-legends{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;color:#fff;border-radius:5px 5px 0 0}.drag-handle-legends .legend-icon{color:#fff;font-size:18px;cursor:default!important;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.drag-handle-legends .toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-legends .toggle-icon:hover{color:#d3d3d3}.right-icons{display:flex;align-items:center;gap:10px}.legends-list-container{display:flex;flex-direction:column;align-items:center;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box}::ng-deep .legends-list-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:#4c4d51;width:100%;max-height:317px;min-height:80px;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 1024px){::ng-deep .legends-list-body{max-height:450px;min-height:70px}}@media (max-width: 768px){::ng-deep .legends-list-body{max-height:60vh;max-height:calc(var(--vh, 1vh) * 60);min-height:100px}}@media (max-width: 480px){::ng-deep .legends-list-body{max-height:70vh;max-height:calc(var(--vh, 1vh) * 70);min-height:90px}}::ng-deep .legends-list-body .item-list{flex:1 1 auto;overflow-y:auto;min-height:0;background:#4c4d51;max-height:500px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list{padding:6px;max-height:400px}}::ng-deep .legends-list-body .item-list mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%;margin-bottom:4px}::ng-deep .legends-list-body .item-list mat-expansion-panel:last-child{border-bottom:none}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header{padding:0 8px;height:40px!important;min-height:40px!important}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .mat-content{display:flex;align-items:center}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;line-height:1.3;font-weight:600;color:#bdc1c3cc;font-size:17px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .panel-title{max-width:180px;font-size:15px}}::ng-deep .legends-list-body .item-list .mat-expansion-panel-body{padding:4px 8px 8px!important}::ng-deep .legends-list-body .item-list .legend{overflow:hidden;padding:4px;box-shadow:0 -2px 2px #4868b20a,0 2px 2px #6a6f7517,0 1px 2px #4868b214}::ng-deep .legends-list-body .item-list .legend span{color:#fff}.legend-thumbnail{max-width:100%;width:auto;height:auto;max-height:150px;border:1px solid #dee2e6;display:block}@media (max-width: 768px){.legend-thumbnail{max-height:120px;padding:3px}}::ng-deep .legends-list-body .item-list::-webkit-scrollbar{width:12px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}@media (max-width: 768px){.legends-list-body-wrapper{right:.5em;bottom:5em;max-width:280px}}@media (max-width: 480px){.legends-list-body-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.legends-list-body-wrapper.collapsed{width:90px;left:auto}::ng-deep .legends-list-body .item-list{max-height:300px}}\n"] }]
4217
+ MatExpansionModule, MatInputModule, MatTooltipModule], template: "<div class=\"legends-list-body-wrapper\" \n cdkDrag \n cdkDragBoundary=\".map-container\" \n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n\n <div class=\"drag-handle-legends\" cdkDragHandle>\n <mat-icon \n class=\"legend-icon\" \n matTooltip=\"Legendeliste\" \n (click)=\"toggleLegendsList()\"\n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n area_chart\n </mat-icon>\n <div class=\"right-icons\">\n <mat-icon class=\"toggle-icon\" (click)=\"toggleLegendsList()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n</div>\n\n<div class=\"legends-list-container\">\n @if(!collapsed) {\n <div class=\"ol-unselectable ol-control legends-list-body\">\n <div class=\"item-list\">\n @for (layer of filteredLayersDetailed; track layer.id; let i = $index) {\n @if (layer.imageUrl) {\n <mat-expansion-panel [expanded]=\"i === 0\"> \n <mat-expansion-panel-header>\n <span class=\"panel-title\">\n {{ layer.name }}\n </span>\n </mat-expansion-panel-header>\n <div class=\"legend\">\n <img [src]=\"layer.imageUrl\" class=\"legend-thumbnail\"/>\n </div>\n </mat-expansion-panel>\n }\n }\n </div>\n </div>\n}\n</div>\n</div>", styles: [".legends-list-body-wrapper{position:absolute;left:1em;top:10em;z-index:1000;box-shadow:0 2px 10px #0000001a;width:250px;max-width:250px;transition:width .3s ease,max-width .3s ease;background:#4c4d51;border-radius:5px}.legends-list-body-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}.legends-list-body-wrapper.collapsed .drag-handle-legends{width:90px;box-sizing:border-box}.legends-list-body-wrapper.collapsed .drag-handle-legends .legend-icon{margin-right:0}.legends-list-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:grabbing;z-index:1001}@media (max-width: 1024px){.legends-list-body-wrapper{width:240px;max-width:240px}.legends-list-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}@media (max-width: 768px){.legends-list-body-wrapper{position:fixed;right:1em;bottom:5em;width:calc(100% - 2em);max-width:280px}.legends-list-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important;left:auto;right:1em}}@media (max-width: 480px){.legends-list-body-wrapper{bottom:4em}.legends-list-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}.drag-handle-legends{display:flex;align-items:center;justify-content:space-between;background:#4c4d51;padding:0 2px;cursor:move;color:#fff;border-radius:5px}.drag-handle-legends .legend-icon{color:#fff;font-size:18px;cursor:default!important;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.drag-handle-legends .toggle-icon{cursor:pointer!important;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-legends .toggle-icon:hover{color:#d3d3d3}.right-icons{display:flex;align-items:center;gap:10px}.legends-list-container{display:flex;flex-direction:column;align-items:center;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box}::ng-deep .legends-list-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;background:#4c4d51;width:100%;max-height:317px;min-height:80px;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 1024px){::ng-deep .legends-list-body{max-height:450px;min-height:70px}}@media (max-width: 768px){::ng-deep .legends-list-body{max-height:60vh;max-height:calc(var(--vh, 1vh) * 60);min-height:100px}}@media (max-width: 480px){::ng-deep .legends-list-body{max-height:70vh;max-height:calc(var(--vh, 1vh) * 70);min-height:90px}}::ng-deep .legends-list-body .item-list{flex:1 1 auto;overflow-y:auto;min-height:0;background:#4c4d51;max-height:500px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list{padding:6px;max-height:400px}}::ng-deep .legends-list-body .item-list mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%;margin-bottom:4px}::ng-deep .legends-list-body .item-list mat-expansion-panel:last-child{border-bottom:none}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header{padding:0 8px;height:40px!important;min-height:40px!important}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .mat-content{display:flex;align-items:center}::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;line-height:1.3;font-weight:600;color:#bdc1c3cc;font-size:13px}@media (max-width: 768px){::ng-deep .legends-list-body .item-list mat-expansion-panel .mat-expansion-panel-header .panel-title{max-width:180px;font-size:15px}}::ng-deep .legends-list-body .item-list .mat-expansion-panel-body{padding:4px 8px 8px!important}::ng-deep .legends-list-body .item-list .legend{overflow:hidden;padding:4px}::ng-deep .legends-list-body .item-list .legend span{color:#fff}.legend-thumbnail{max-width:100%;width:auto;height:auto;max-height:150px;border:1px solid #dee2e6;display:block}@media (max-width: 768px){.legend-thumbnail{max-height:120px;padding:3px}}::ng-deep .legends-list-body .item-list::-webkit-scrollbar{width:12px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .legends-list-body .item-list::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}@media (max-width: 768px){.legends-list-body-wrapper{right:.5em;bottom:5em;max-width:280px}}@media (max-width: 480px){.legends-list-body-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.legends-list-body-wrapper.collapsed{width:90px;left:auto}::ng-deep .legends-list-body .item-list{max-height:300px}}\n"] }]
4196
4218
  }], propDecorators: { map: [{
4197
4219
  type: Input
4198
4220
  }], profile: [{
@@ -4459,6 +4481,9 @@ class GisKomponentComponent {
4459
4481
  constructor() {
4460
4482
  this._currentItems.gisKomponentSettings = this.settings;
4461
4483
  }
4484
+ ngOnDestroy() {
4485
+ this._profileService.setProfileVersionChanged(false);
4486
+ }
4462
4487
  profileSelected(profileIdentifier) {
4463
4488
  this._profileService.getByIdentifier(profileIdentifier).subscribe({
4464
4489
  next: profile => {
@@ -4715,14 +4740,14 @@ class GisKomponentComponent {
4715
4740
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GisKomponentComponent, isStandalone: true, selector: "gis-komponent", inputs: { showToolbox: "showToolbox", showActiveObjects: "showActiveObjects", showLegendList: "showLegendList", showMapSearch: "showMapSearch", identifier: "identifier", settings: "settings" }, outputs: { sessionDone: "sessionDone", featuresChanged: "featuresChanged" }, providers: [CurrentItemsService, FeatureLoaderService, DrawLayerSourceService, ZoomService, UndoRedoService, ShowInfoHoverService, HoverInfoSearchService, CenterPointService, PrintDrawLayerSourceService,
4716
4741
  HighlightService, ShowInfoService, InfoSearchProvider, InteractionHelperService, ConflictAnalysisSearchProvider,
4717
4742
  MergeFeaturesService, OverlapService, CowiService, SearchProviderService, AddressSearchService, CadastreSearchService,
4718
- DmpCatalogService, OlCapabilitiesService, DmpLayerMapperService], viewQueries: [{ propertyName: "toolbarRef", first: true, predicate: ["toolbarRef"], descendants: true, static: true }, { propertyName: "legendsListRef", first: true, predicate: ["legendsListRef"], descendants: true, static: true }, { propertyName: "layerSelectorRef", first: true, predicate: ["layerSelectorRef"], descendants: true, static: true }, { propertyName: "activeObjectsRef", first: true, predicate: ["activeObjectsRef"], descendants: true, static: true }, { propertyName: "selectedFeatureInfoRef", first: true, predicate: ["selectedFeatureInfoRef"], descendants: true, static: true }], ngImport: i0, template: "<div #layerSelectorRef class=\"layer-selector-container\">\n @if (selectedProfile && selectedProfile.showLayerSelector) {\n <lib-layer-selector [map]=\"map\" [profile]=\"selectedProfile\" [currentZoomLevel]=\"currentZoomLevel\"></lib-layer-selector>\n }\n</div>\n\n<div #legendsListRef class=\"legends-list-container\">\n @if (selectedProfile && selectedProfile.showLegends) {\n <lib-legends-list [map]=\"map\" [profile]=\"selectedProfile\"></lib-legends-list>\n }\n</div>\n\n<div #selectedFeatureInfoRef>\n <selected-feature-info></selected-feature-info>\n</div>\n\n<div #activeObjectsRef class=\"active-objects-container\">\n @if(showActiveObjects && activeObjectsReady && settings && selectedProfile) {\n <activeObjects [settings]=\"settings\" [profile]=\"selectedProfile\" (sessionDone)=\"sessionDoneFromActiveObject()\"></activeObjects>\n }\n</div>\n\n<div #toolbarRef class=\"map-toolbar-container\">\n @if(showToolbox && profileShowToolbox && settings) {\n <map-toolbox [map]=\"map\" \n [profile]=\"selectedProfile\"\n [settings]=\"settings\"\n [collapsed]=\"selectedProfile.toolbarCollapsed\" [WKTInputEnabled]=\"settings?.WKTInputEnabled\" [deleteEnabled]=\"settings?.deleteEnabled\" [showMeasureArea]=\"selectedProfile.showAreaMeasurement\" [showMeasureDistance]=\"selectedProfile.showDistanceMeasurement\"></map-toolbox>\n }\n</div>\n\n<div class=\"map-container\">\n <lib-map-search *ngIf=\"showMapSearch\" [profile]=\"selectedProfile\"></lib-map-search>\n\n\n <!-- Konflikter -->\n @if (showConflicts) {\n\n <div class=\"conflict-panel\" [class.collapsed]=\"conflictsCollapsed\">\n <div class=\"header\">\n <span>Konflikter (3)</span>\n <mat-icon>{{ activeObjectsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon> -->\n </div>\n <mat-list>\n <mat-list-item>\n <span matListItemTitle>Lag #1</span>\n <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n </mat-list-item>\n <mat-list-item>\n <span matListItemTitle>Lag #2 (svarer ikke)</span>\n </mat-list-item>\n <mat-list-item>\n <span matListItemTitle>Lag #3</span>\n <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #2</span>\n </mat-list-item>\n </mat-list>\n </div>\n \n } \n\n <!-- Kort -->\n <div id=\"map\" class=\"map\"></div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}::ng-deep .lib-error-snackbar{background-color:#d32f2f;color:#fff;font-weight:500}::ng-deep .map-container{position:relative;height:81vh;width:100%;overflow:hidden}::ng-deep #map{width:100%;height:100%;position:absolute;inset:0;overflow:hidden}::ng-deep .ol-viewport{overflow:hidden!important}::ng-deep ::ng-deep .ol-logo{position:absolute;left:auto;right:3em;top:6.25em}::ng-deep ::ng-deep .ol-copyright{background-color:transparent;position:absolute;bottom:10px;width:100%;text-align:center}::ng-deep ::ng-deep .toolbar{position:absolute;top:10px;left:10px;background:#fff;padding:4px;border-radius:4px;display:flex;flex-direction:column;transition:width .3s;z-index:1000;overflow:hidden}::ng-deep ::ng-deep .toolbar.collapsed{width:40px;overflow:hidden}::ng-deep .object-panel{position:absolute;bottom:10px;left:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .object-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep .conflict-panel{position:absolute;bottom:10px;right:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .conflict-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep ::ng-deep .ol-zoom.ol-unselectable.ol-control{display:flex;flex-direction:column;position:absolute}::ng-deep ::ng-deep button.ol-zoom-in{background:#4c4d51;border:none;box-shadow:none;border-radius:5px 5px 0 0!important;color:#fff}::ng-deep ::ng-deep button.ol-zoom-in:hover{color:#e9e3e3;outline:none}::ng-deep ::ng-deep .ol-scale-text{display:flex}::ng-deep button.ol-zoom-out{background:#4c4d51;border:none;box-shadow:none;color:#fff;border-radius:0 0 5px 5px!important}::ng-deep button.ol-zoom-out:hover{color:#e9e3e3;outline:none}::ng-deep button.ol-rotate-reset{background:#4c4d51;border:none;box-shadow:none;color:#fff;border-radius:5px}::ng-deep button.ol-rotate-reset:hover{color:#e9e3e3;outline:none}::ng-deep .ol-scale-bar.ol-unselectable{position:absolute;bottom:3rem}::ng-deep .ol-mouse-position{top:44em;left:6px;position:absolute;background:#0000004d;color:#fffcfc;width:189px;height:30px;padding:2px;border-radius:5px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;text-align:center;display:flex;align-items:center;justify-content:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i3$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: LayerSelectorComponent, selector: "lib-layer-selector", inputs: ["map", "profile", "currentZoomLevel"] }, { kind: "component", type: MapSearchComponent, selector: "lib-map-search", inputs: ["profile"] }, { kind: "component", type: ToolboxComponent, selector: "map-toolbox", inputs: ["map", "showMeasureDistance", "showMeasureArea", "collapsed", "settings", "profile", "WKTInputEnabled", "deleteEnabled"] }, { kind: "component", type: ActiveObjectsComponent, selector: "activeObjects", inputs: ["settings", "profile"], outputs: ["sessionDone"] }, { kind: "component", type: LegendsListComponent, selector: "lib-legends-list", inputs: ["map", "profile"] }, { kind: "component", type: SelectedFeatureInfoComponent, selector: "selected-feature-info" }] });
4743
+ DmpCatalogService, OlCapabilitiesService, DmpLayerMapperService], viewQueries: [{ propertyName: "toolbarRef", first: true, predicate: ["toolbarRef"], descendants: true, static: true }, { propertyName: "legendsListRef", first: true, predicate: ["legendsListRef"], descendants: true, static: true }, { propertyName: "layerSelectorRef", first: true, predicate: ["layerSelectorRef"], descendants: true, static: true }, { propertyName: "activeObjectsRef", first: true, predicate: ["activeObjectsRef"], descendants: true, static: true }, { propertyName: "selectedFeatureInfoRef", first: true, predicate: ["selectedFeatureInfoRef"], descendants: true, static: true }], ngImport: i0, template: "<div #layerSelectorRef class=\"layer-selector-container\">\n @if (selectedProfile && selectedProfile.showLayerSelector) {\n <lib-layer-selector [map]=\"map\" [profile]=\"selectedProfile\" [currentZoomLevel]=\"currentZoomLevel\"></lib-layer-selector>\n }\n</div>\n\n<div #legendsListRef class=\"legends-list-container\">\n @if (selectedProfile && selectedProfile.showLegends) {\n <lib-legends-list [map]=\"map\" [profile]=\"selectedProfile\"></lib-legends-list>\n }\n</div>\n\n<div #selectedFeatureInfoRef>\n <selected-feature-info></selected-feature-info>\n</div>\n\n<div #activeObjectsRef class=\"active-objects-container\">\n @if(showActiveObjects && activeObjectsReady && settings && selectedProfile) {\n <activeObjects [settings]=\"settings\" [profile]=\"selectedProfile\" (sessionDone)=\"sessionDoneFromActiveObject()\"></activeObjects>\n }\n</div>\n\n<div #toolbarRef class=\"map-toolbar-container\">\n @if(showToolbox && profileShowToolbox && settings) {\n <map-toolbox [map]=\"map\" \n [profile]=\"selectedProfile\"\n [settings]=\"settings\"\n [collapsed]=\"selectedProfile.toolbarCollapsed\" [WKTInputEnabled]=\"settings?.WKTInputEnabled\" [deleteEnabled]=\"settings?.deleteEnabled\" [showMeasureArea]=\"selectedProfile.showAreaMeasurement\" [showMeasureDistance]=\"selectedProfile.showDistanceMeasurement\"></map-toolbox>\n }\n</div>\n\n<div class=\"map-container\">\n <lib-map-search *ngIf=\"showMapSearch\" [profile]=\"selectedProfile\"></lib-map-search>\n\n\n <!-- Konflikter -->\n @if (showConflicts) {\n\n <div class=\"conflict-panel\" [class.collapsed]=\"conflictsCollapsed\">\n <div class=\"header\">\n <span>Konflikter (3)</span>\n <mat-icon>{{ activeObjectsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon> -->\n </div>\n <mat-list>\n <mat-list-item>\n <span matListItemTitle>Lag #1</span>\n <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n </mat-list-item>\n <mat-list-item>\n <span matListItemTitle>Lag #2 (svarer ikke)</span>\n </mat-list-item>\n <mat-list-item>\n <span matListItemTitle>Lag #3</span>\n <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #2</span>\n </mat-list-item>\n </mat-list>\n </div>\n \n } \n\n <!-- Kort -->\n <div id=\"map\" class=\"map\"></div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}::ng-deep .lib-error-snackbar{background-color:#d32f2f;color:#fff;font-weight:500}::ng-deep .map-container{position:relative;height:81vh;width:100%;overflow:hidden}::ng-deep #map{width:100%;height:100%;position:absolute;inset:0;overflow:hidden}::ng-deep .ol-viewport{overflow:hidden!important}::ng-deep ::ng-deep .ol-logo{position:absolute;left:auto;right:3em;top:6.25em}::ng-deep ::ng-deep .ol-copyright{background-color:transparent;position:absolute;bottom:10px;width:100%;text-align:center}::ng-deep ::ng-deep .toolbar{position:absolute;top:10px;left:10px;background:#fff;padding:4px;border-radius:4px;display:flex;flex-direction:column;transition:width .3s;z-index:1000;overflow:hidden}::ng-deep ::ng-deep .toolbar.collapsed{width:40px;overflow:hidden}::ng-deep .object-panel{position:absolute;bottom:10px;left:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .object-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep .conflict-panel{position:absolute;bottom:10px;right:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .conflict-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep ::ng-deep .ol-zoom.ol-unselectable.ol-control{display:flex;flex-direction:column;position:absolute}::ng-deep ::ng-deep button.ol-zoom-in{background:#4c4d51;border:none;box-shadow:none;border-radius:5px 5px 0 0!important;color:#fff}::ng-deep ::ng-deep button.ol-zoom-in:hover{color:#e9e3e3;outline:none}::ng-deep ::ng-deep .ol-scale-text{display:flex}::ng-deep button.ol-zoom-out{background:#4c4d51;border:none;box-shadow:none;color:#fff;border-radius:0 0 5px 5px!important}::ng-deep button.ol-zoom-out:hover{color:#e9e3e3;outline:none}::ng-deep button.ol-rotate-reset{background:#4c4d51;border:none;box-shadow:none;color:#fff;border-radius:5px}::ng-deep button.ol-rotate-reset:hover{color:#e9e3e3;outline:none}::ng-deep .ol-scale-bar.ol-unselectable{position:absolute;bottom:3rem}::ng-deep .ol-mouse-position{position:absolute;bottom:10px;left:6px;top:auto;background:#0000004d;color:#fffcfc;width:189px;height:30px;padding:2px;border-radius:5px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;text-align:center;display:flex;align-items:center;justify-content:flex-start;z-index:1000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i3$1.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: LayerSelectorComponent, selector: "lib-layer-selector", inputs: ["map", "profile", "currentZoomLevel"] }, { kind: "component", type: MapSearchComponent, selector: "lib-map-search", inputs: ["profile"] }, { kind: "component", type: ToolboxComponent, selector: "map-toolbox", inputs: ["map", "showMeasureDistance", "showMeasureArea", "collapsed", "settings", "profile", "WKTInputEnabled", "deleteEnabled"] }, { kind: "component", type: ActiveObjectsComponent, selector: "activeObjects", inputs: ["settings", "profile"], outputs: ["sessionDone"] }, { kind: "component", type: LegendsListComponent, selector: "lib-legends-list", inputs: ["map", "profile"] }, { kind: "component", type: SelectedFeatureInfoComponent, selector: "selected-feature-info" }] });
4719
4744
  }
4720
4745
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GisKomponentComponent, decorators: [{
4721
4746
  type: Component,
4722
4747
  args: [{ selector: 'gis-komponent', imports: [CommonModule, MatIconModule, MatListModule, MatSelectModule, LayerSelectorComponent, MapSearchComponent, ToolboxComponent, ActiveObjectsComponent, LegendsListComponent, SelectedFeatureInfoComponent], providers: [CurrentItemsService, FeatureLoaderService, DrawLayerSourceService, ZoomService, UndoRedoService, ShowInfoHoverService, HoverInfoSearchService, CenterPointService, PrintDrawLayerSourceService,
4723
4748
  HighlightService, ShowInfoService, InfoSearchProvider, InteractionHelperService, ConflictAnalysisSearchProvider,
4724
4749
  MergeFeaturesService, OverlapService, CowiService, SearchProviderService, AddressSearchService, CadastreSearchService,
4725
- DmpCatalogService, OlCapabilitiesService, DmpLayerMapperService], template: "<div #layerSelectorRef class=\"layer-selector-container\">\n @if (selectedProfile && selectedProfile.showLayerSelector) {\n <lib-layer-selector [map]=\"map\" [profile]=\"selectedProfile\" [currentZoomLevel]=\"currentZoomLevel\"></lib-layer-selector>\n }\n</div>\n\n<div #legendsListRef class=\"legends-list-container\">\n @if (selectedProfile && selectedProfile.showLegends) {\n <lib-legends-list [map]=\"map\" [profile]=\"selectedProfile\"></lib-legends-list>\n }\n</div>\n\n<div #selectedFeatureInfoRef>\n <selected-feature-info></selected-feature-info>\n</div>\n\n<div #activeObjectsRef class=\"active-objects-container\">\n @if(showActiveObjects && activeObjectsReady && settings && selectedProfile) {\n <activeObjects [settings]=\"settings\" [profile]=\"selectedProfile\" (sessionDone)=\"sessionDoneFromActiveObject()\"></activeObjects>\n }\n</div>\n\n<div #toolbarRef class=\"map-toolbar-container\">\n @if(showToolbox && profileShowToolbox && settings) {\n <map-toolbox [map]=\"map\" \n [profile]=\"selectedProfile\"\n [settings]=\"settings\"\n [collapsed]=\"selectedProfile.toolbarCollapsed\" [WKTInputEnabled]=\"settings?.WKTInputEnabled\" [deleteEnabled]=\"settings?.deleteEnabled\" [showMeasureArea]=\"selectedProfile.showAreaMeasurement\" [showMeasureDistance]=\"selectedProfile.showDistanceMeasurement\"></map-toolbox>\n }\n</div>\n\n<div class=\"map-container\">\n <lib-map-search *ngIf=\"showMapSearch\" [profile]=\"selectedProfile\"></lib-map-search>\n\n\n <!-- Konflikter -->\n @if (showConflicts) {\n\n <div class=\"conflict-panel\" [class.collapsed]=\"conflictsCollapsed\">\n <div class=\"header\">\n <span>Konflikter (3)</span>\n <mat-icon>{{ activeObjectsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon> -->\n </div>\n <mat-list>\n <mat-list-item>\n <span matListItemTitle>Lag #1</span>\n <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n </mat-list-item>\n <mat-list-item>\n <span matListItemTitle>Lag #2 (svarer ikke)</span>\n </mat-list-item>\n <mat-list-item>\n <span matListItemTitle>Lag #3</span>\n <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #2</span>\n </mat-list-item>\n </mat-list>\n </div>\n \n } \n\n <!-- Kort -->\n <div id=\"map\" class=\"map\"></div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}::ng-deep .lib-error-snackbar{background-color:#d32f2f;color:#fff;font-weight:500}::ng-deep .map-container{position:relative;height:81vh;width:100%;overflow:hidden}::ng-deep #map{width:100%;height:100%;position:absolute;inset:0;overflow:hidden}::ng-deep .ol-viewport{overflow:hidden!important}::ng-deep ::ng-deep .ol-logo{position:absolute;left:auto;right:3em;top:6.25em}::ng-deep ::ng-deep .ol-copyright{background-color:transparent;position:absolute;bottom:10px;width:100%;text-align:center}::ng-deep ::ng-deep .toolbar{position:absolute;top:10px;left:10px;background:#fff;padding:4px;border-radius:4px;display:flex;flex-direction:column;transition:width .3s;z-index:1000;overflow:hidden}::ng-deep ::ng-deep .toolbar.collapsed{width:40px;overflow:hidden}::ng-deep .object-panel{position:absolute;bottom:10px;left:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .object-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep .conflict-panel{position:absolute;bottom:10px;right:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .conflict-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep ::ng-deep .ol-zoom.ol-unselectable.ol-control{display:flex;flex-direction:column;position:absolute}::ng-deep ::ng-deep button.ol-zoom-in{background:#4c4d51;border:none;box-shadow:none;border-radius:5px 5px 0 0!important;color:#fff}::ng-deep ::ng-deep button.ol-zoom-in:hover{color:#e9e3e3;outline:none}::ng-deep ::ng-deep .ol-scale-text{display:flex}::ng-deep button.ol-zoom-out{background:#4c4d51;border:none;box-shadow:none;color:#fff;border-radius:0 0 5px 5px!important}::ng-deep button.ol-zoom-out:hover{color:#e9e3e3;outline:none}::ng-deep button.ol-rotate-reset{background:#4c4d51;border:none;box-shadow:none;color:#fff;border-radius:5px}::ng-deep button.ol-rotate-reset:hover{color:#e9e3e3;outline:none}::ng-deep .ol-scale-bar.ol-unselectable{position:absolute;bottom:3rem}::ng-deep .ol-mouse-position{top:44em;left:6px;position:absolute;background:#0000004d;color:#fffcfc;width:189px;height:30px;padding:2px;border-radius:5px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;text-align:center;display:flex;align-items:center;justify-content:flex-start}\n"] }]
4750
+ DmpCatalogService, OlCapabilitiesService, DmpLayerMapperService], template: "<div #layerSelectorRef class=\"layer-selector-container\">\n @if (selectedProfile && selectedProfile.showLayerSelector) {\n <lib-layer-selector [map]=\"map\" [profile]=\"selectedProfile\" [currentZoomLevel]=\"currentZoomLevel\"></lib-layer-selector>\n }\n</div>\n\n<div #legendsListRef class=\"legends-list-container\">\n @if (selectedProfile && selectedProfile.showLegends) {\n <lib-legends-list [map]=\"map\" [profile]=\"selectedProfile\"></lib-legends-list>\n }\n</div>\n\n<div #selectedFeatureInfoRef>\n <selected-feature-info></selected-feature-info>\n</div>\n\n<div #activeObjectsRef class=\"active-objects-container\">\n @if(showActiveObjects && activeObjectsReady && settings && selectedProfile) {\n <activeObjects [settings]=\"settings\" [profile]=\"selectedProfile\" (sessionDone)=\"sessionDoneFromActiveObject()\"></activeObjects>\n }\n</div>\n\n<div #toolbarRef class=\"map-toolbar-container\">\n @if(showToolbox && profileShowToolbox && settings) {\n <map-toolbox [map]=\"map\" \n [profile]=\"selectedProfile\"\n [settings]=\"settings\"\n [collapsed]=\"selectedProfile.toolbarCollapsed\" [WKTInputEnabled]=\"settings?.WKTInputEnabled\" [deleteEnabled]=\"settings?.deleteEnabled\" [showMeasureArea]=\"selectedProfile.showAreaMeasurement\" [showMeasureDistance]=\"selectedProfile.showDistanceMeasurement\"></map-toolbox>\n }\n</div>\n\n<div class=\"map-container\">\n <lib-map-search *ngIf=\"showMapSearch\" [profile]=\"selectedProfile\"></lib-map-search>\n\n\n <!-- Konflikter -->\n @if (showConflicts) {\n\n <div class=\"conflict-panel\" [class.collapsed]=\"conflictsCollapsed\">\n <div class=\"header\">\n <span>Konflikter (3)</span>\n <mat-icon>{{ activeObjectsCollapsed ? 'expand_more' : 'expand_less' }}</mat-icon> -->\n </div>\n <mat-list>\n <mat-list-item>\n <span matListItemTitle>Lag #1</span>\n <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n </mat-list-item>\n <mat-list-item>\n <span matListItemTitle>Lag #2 (svarer ikke)</span>\n </mat-list-item>\n <mat-list-item>\n <span matListItemTitle>Lag #3</span>\n <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #1</span>\n <span matListItemLine><mat-icon>highlight</mat-icon> Objekt #2</span>\n </mat-list-item>\n </mat-list>\n </div>\n \n } \n\n <!-- Kort -->\n <div id=\"map\" class=\"map\"></div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%;overflow:hidden}::ng-deep .lib-error-snackbar{background-color:#d32f2f;color:#fff;font-weight:500}::ng-deep .map-container{position:relative;height:81vh;width:100%;overflow:hidden}::ng-deep #map{width:100%;height:100%;position:absolute;inset:0;overflow:hidden}::ng-deep .ol-viewport{overflow:hidden!important}::ng-deep ::ng-deep .ol-logo{position:absolute;left:auto;right:3em;top:6.25em}::ng-deep ::ng-deep .ol-copyright{background-color:transparent;position:absolute;bottom:10px;width:100%;text-align:center}::ng-deep ::ng-deep .toolbar{position:absolute;top:10px;left:10px;background:#fff;padding:4px;border-radius:4px;display:flex;flex-direction:column;transition:width .3s;z-index:1000;overflow:hidden}::ng-deep ::ng-deep .toolbar.collapsed{width:40px;overflow:hidden}::ng-deep .object-panel{position:absolute;bottom:10px;left:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .object-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep .conflict-panel{position:absolute;bottom:10px;right:10px;background:#fff;padding:8px;border-radius:4px;z-index:1000;max-height:calc(85vh - 20px);overflow-y:auto}::ng-deep .conflict-panel .header{display:flex;justify-content:space-between;padding:8px;cursor:pointer;background:#f0f0f0}::ng-deep ::ng-deep .ol-zoom.ol-unselectable.ol-control{display:flex;flex-direction:column;position:absolute}::ng-deep ::ng-deep button.ol-zoom-in{background:#4c4d51;border:none;box-shadow:none;border-radius:5px 5px 0 0!important;color:#fff}::ng-deep ::ng-deep button.ol-zoom-in:hover{color:#e9e3e3;outline:none}::ng-deep ::ng-deep .ol-scale-text{display:flex}::ng-deep button.ol-zoom-out{background:#4c4d51;border:none;box-shadow:none;color:#fff;border-radius:0 0 5px 5px!important}::ng-deep button.ol-zoom-out:hover{color:#e9e3e3;outline:none}::ng-deep button.ol-rotate-reset{background:#4c4d51;border:none;box-shadow:none;color:#fff;border-radius:5px}::ng-deep button.ol-rotate-reset:hover{color:#e9e3e3;outline:none}::ng-deep .ol-scale-bar.ol-unselectable{position:absolute;bottom:3rem}::ng-deep .ol-mouse-position{position:absolute;bottom:10px;left:6px;top:auto;background:#0000004d;color:#fffcfc;width:189px;height:30px;padding:2px;border-radius:5px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;text-align:center;display:flex;align-items:center;justify-content:flex-start;z-index:1000}\n"] }]
4726
4751
  }], ctorParameters: () => [], propDecorators: { showToolbox: [{
4727
4752
  type: Input
4728
4753
  }], showActiveObjects: [{