@regionerne/gis-komponent 0.0.69 → 0.0.71
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.
|
@@ -354,6 +354,8 @@ class LayerHelperService {
|
|
|
354
354
|
const currentIndex$ = new BehaviorSubject(0);
|
|
355
355
|
const layergroup = aMap.getLayers().getArray()
|
|
356
356
|
.find(layergroup => layergroup instanceof OLLayerGroup && layergroup.get('id') === groupId);
|
|
357
|
+
if (!layergroup)
|
|
358
|
+
return;
|
|
357
359
|
const items = layergroup.getLayers().getArray().sort((a, b) => (b.getZIndex() ?? 0) - (a.getZIndex() ?? 0));
|
|
358
360
|
// Handles activating the current item
|
|
359
361
|
const activation$ = currentIndex$.pipe(tap(index => {
|
|
@@ -881,12 +883,6 @@ class LayerSelectorComponent {
|
|
|
881
883
|
_dmpMapper = inject(DmpLayerMapperService);
|
|
882
884
|
_profileService = inject(ProfileService);
|
|
883
885
|
ngOnInit() {
|
|
884
|
-
this._layerErrorService.layerErrored
|
|
885
|
-
.subscribe(layerId => {
|
|
886
|
-
const layerHasErrors = this._layerErrorService.getLayerStatus(layerId)?.hasError;
|
|
887
|
-
if (layerHasErrors != undefined)
|
|
888
|
-
this.setLayerErrorStatus(layerId, layerHasErrors);
|
|
889
|
-
});
|
|
890
886
|
this._dmpSearchTextSubject.pipe(debounceTime(200), distinctUntilChanged(), switchMap(value => this._dmpCatalogService.searchLayers(value))).subscribe({
|
|
891
887
|
next: result => {
|
|
892
888
|
this.dmpLayerResults = result.map(layer => ({ ...layer, availability: layer.availability?.replace('unavailable', 'Ikke klar til brug').replace('available', 'Klar til brug')
|
|
@@ -895,11 +891,17 @@ class LayerSelectorComponent {
|
|
|
895
891
|
});
|
|
896
892
|
}
|
|
897
893
|
ngOnChanges(changes) {
|
|
898
|
-
if (
|
|
894
|
+
if (this.profile && this.map) {
|
|
899
895
|
this.collapsed = this.profile.layerSelectorFolded;
|
|
900
896
|
this._layerHelper.layerActivatedByBackgroundGroup
|
|
901
897
|
.subscribe(layerId => {
|
|
902
|
-
this.toggleLayer(layerId, undefined, true);
|
|
898
|
+
this.toggleLayer(layerId, undefined, true, true);
|
|
899
|
+
});
|
|
900
|
+
this._layerErrorService.layerErrored
|
|
901
|
+
.subscribe(layerId => {
|
|
902
|
+
const layerHasErrors = this._layerErrorService.getLayerStatus(layerId)?.hasError;
|
|
903
|
+
if (layerHasErrors != undefined)
|
|
904
|
+
this.setLayerErrorStatus(layerId, layerHasErrors);
|
|
903
905
|
});
|
|
904
906
|
this.allLayerGroups = this.profile.layerGroups
|
|
905
907
|
.map((lg, idx) => ({ ...lg,
|
|
@@ -1019,7 +1021,7 @@ class LayerSelectorComponent {
|
|
|
1019
1021
|
_cacheDmpLayers() {
|
|
1020
1022
|
localStorage.setItem(`${this._dmpLayersCacheStoragKey}_${this.profile.id}`, JSON.stringify(this.dmpLayers));
|
|
1021
1023
|
}
|
|
1022
|
-
toggleLayer(layerId, event, skipMapToggle = false) {
|
|
1024
|
+
toggleLayer(layerId, event, skipMapToggle = false, value = undefined) {
|
|
1023
1025
|
event?.stopPropagation(); // Prevent the panel from expanding/collapsing
|
|
1024
1026
|
if (!skipMapToggle)
|
|
1025
1027
|
this._layerHelper.toggleLayerInMap(this.map, layerId);
|
|
@@ -1028,7 +1030,7 @@ class LayerSelectorComponent {
|
|
|
1028
1030
|
let singleLayerIdToKeepOn = 0;
|
|
1029
1031
|
group.layers.forEach(l => {
|
|
1030
1032
|
if (layerId === l.id) {
|
|
1031
|
-
l.visible = !l.visible;
|
|
1033
|
+
l.visible = value != undefined ? value : !l.visible;
|
|
1032
1034
|
if (l.visible && !group.allowMultiSelect) {
|
|
1033
1035
|
// Group doesn't allow multi select and we just turned this layer on
|
|
1034
1036
|
// so turn all others off
|
|
@@ -1271,12 +1273,12 @@ class LayerSelectorComponent {
|
|
|
1271
1273
|
}));
|
|
1272
1274
|
}
|
|
1273
1275
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayerSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1274
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LayerSelectorComponent, isStandalone: true, selector: "lib-layer-selector", inputs: { map: "map", profile: "profile", currentZoomLevel: "currentZoomLevel" }, viewQueries: [{ propertyName: "contentBody", first: true, predicate: ["layerSelectorBody"], descendants: true }, { propertyName: "dmpDialog", first: true, predicate: ["dmpDialog"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #layerSelectorBody\n class=\"layer-selector-body-wrapper global-wrapper-container\"\n cdkDrag\n cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"layerSelectorDragPosition\"\n (cdkDragEnded)=\"onLayerSelectorDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n\n <div class=\"drag-handle-selector\" cdkDragHandle>\n <div class=\"drag-handle-content\">\n <div class=\"drag-handle-icons\">\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"Lag\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n layers\n </mat-icon>\n <mat-icon class=\"toggle-icon\" (click)=\"toggleLayerSelector()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n </div>\n\n <div class=\"ol-unselectable ol-control layer-selector-body\" *ngIf=\"!collapsed\">\n <div class=\"search-section\">\n <div class=\"search-field-wrapper\">\n <label class=\"search-label\">Filtrer</label>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\n <input \n matInput \n type=\"text\" \n [(ngModel)]=\"searchText\" \n (ngModelChange)=\"filterChanged()\"\n />\n </mat-form-field>\n </div>\n <mat-icon (click)=\"clearSearchText()\">undo</mat-icon>\n </div>\n <div\n cdkDropList\n [cdkDropListData]=\"filteredLayerGroups\"\n (cdkDropListDropped)=\"dropGroup($event, filteredLayerGroups)\"\n class=\"item-list\">\n @for (group of filteredLayerGroups; track group.id; let gIndex = $index) {\n <div class=\"group\" cdkDrag>\n <mat-expansion-panel [(expanded)]=\"group.expanded\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n @if (group.expanded) {\n <mat-icon class=\"arrow-up-layer\">arrow_upward</mat-icon>\n }\n @if (!group.expanded) {\n <mat-icon>arrow_downward</mat-icon> \n }\n <span class=\"panel-title\">{{ group.name }}</span>\n <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n @if (group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\" \n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon> \n }\n @if (!group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n </mat-panel-title>\n </mat-expansion-panel-header>\n\n <div\n cdkDropList\n [cdkDropListData]=\"group.layers\"\n (cdkDropListDropped)=\"dropLayer($event, group)\"\n class=\"item-list\">\n @for (layer of group.layers; track layer.id; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"item\" cdkDrag>\n <div class=\"item-left\">\n <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n @if(layer.infoUrl) {\n <mat-icon \n class=\"layer-info\"\n matTooltip=\"Vis ekstra informationer i ny tab\"\n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n (click)=\"openUrl(layer.infoUrl)\"\n matTooltipPosition=\"above\"\n >info</mat-icon>\n }\n <span>{{ layer.name }}</span> \n <mat-icon></mat-icon>\n </div>\n <div class=\"item-center\">\n @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">browser_not_supported\n </mat-icon>\n }\n @if (layer.hasErrors) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n\n }\n </div>\n <div class=\"item-right\">\n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\" \n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.id, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n <div *cdkDragPreview><span class=\"panel-title\">{{ layer.name }} </span></div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"layer-description\">{{ layer.description }}</div>\n @if (showLegend) {\n <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n }\n </mat-expansion-panel>\n }\n </div>\n </mat-expansion-panel>\n <div *cdkDragPreview><span class=\"panel-title\">{{ group.name }} </span></div>\n </div>\n }\n </div>\n <div class=\"group-header\">Mine Temaer\n <mat-icon (click)=\"toggleDmpSearch(true)\"\n class=\"power-on\"\n matTooltip=\"S\u00F8g\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">add\n </mat-icon>\n </div>\n @if (filteredDmpLayers.length > 0) {\n <div class=\"dmp-item-list\" cdkDropList\n [cdkDropListData]=\"filteredDmpLayers\"\n (cdkDropListDropped)=\"dropDmpLayer($event)\">\n @for (layer of filteredDmpLayers; track layer.datasetId; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"true\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"dmp-item\" cdkDrag>\n <div class=\"dmp-item-container\">\n <div class=\"dmp-item-left\">\n <mat-icon (click)=\"deleteDmpLayer(layer, $event)\" class=\"delete-icon\" \n matTooltip=\"Slet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">delete\n </mat-icon>\n <div class=\"dmp-item-title\">\n <span class=\"title-text\">{{ layer.title }}</span>\n </div>\n </div>\n \n <div class=\"dmp-item-center\">\n @if (layer.hasErrors) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n }\n \n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.datasetId, $event)\" class=\"power-on\" \n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.datasetId, $event)\" class=\"power-off\"\n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n </div>\n <div class=\"dmp-item-right\">\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.datasetId, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n </div>\n <div *cdkDragPreview><span class=\"panel-title\">{{ layer.title }} </span></div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n </mat-expansion-panel>\n }\n </div>\n }\n <div *ngIf=\"filteredBackgroundLayerGroups && filteredBackgroundLayerGroups.length > 0\" class=\"group-header\">Baggrundskort</div>\n <div\n cdkDropList\n [cdkDropListData]=\"filteredBackgroundLayerGroups\"\n (cdkDropListDropped)=\"dropGroup($event, filteredBackgroundLayerGroups)\"\n class=\"item-list\">\n @for (group of filteredBackgroundLayerGroups; track group.id; let gIndex = $index) {\n <div class=\"group\" cdkDrag>\n <mat-expansion-panel [(expanded)]=\"group.expanded\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n @if (group.expanded) {\n <mat-icon class=\"arrow-up-layer\">arrow_upward</mat-icon>\n }\n @if (!group.expanded) {\n <mat-icon>arrow_downward</mat-icon> \n }\n {{ group.name }}\n <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n @if (group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\" \n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon> \n }\n @if (!group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n </mat-panel-title>\n </mat-expansion-panel-header>\n\n <div\n cdkDropList\n [cdkDropListData]=\"group.layers\"\n (cdkDropListDropped)=\"dropLayer($event, group)\"\n class=\"item-list\">\n @for (layer of group.layers; track layer.id; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"item\" cdkDrag>\n <div class=\"item-left\">\n <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n <span>{{ layer.name }}</span>\n </div>\n <div class=\"item-center\">\n @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">browser_not_supported\n </mat-icon>\n }\n @if (layer.hasErrors) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n\n }\n </div>\n <div class=\"item-right\">\n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\" \n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.id, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n <div *cdkDragPreview><span class=\"panel-title\">{{ layer.name }} </span></div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"layer-description\">{{ layer.description }}</div>\n @if (showLegend) {\n <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n }\n </mat-expansion-panel>\n }\n </div>\n </mat-expansion-panel>\n <div *cdkDragPreview><span class=\"panel-title\">{{ group.name }} </span></div>\n </div>\n }\n </div>\n </div>\n <ng-template #dmpDialog>\n @if (dmpSearchMode) {\n <mat-dialog-content>\n <div class=\"dialog-header\">\n <div class=\"search-section\">\n <div class=\"search-field-wrapper\">\n <label class=\"search-label\">S\u00F8g</label>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\n <input \n matInput \n type=\"text\" \n [(ngModel)]=\"dmpSearchText\" \n (ngModelChange)=\"searchDmp()\"\n />\n </mat-form-field>\n </div>\n <mat-icon (click)=\"clearDmpSearchText()\" class=\"undo-icon\" >undo</mat-icon>\n </div>\n <mat-icon \n class=\"close-button\" \n (click)=\"toggleDmpSearch(false)\"\n matTooltip=\"Luk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"left\">\n close\n </mat-icon>\n </div>\n </mat-dialog-content>\n }\n\n @if (dmpLayerResults.length > 0) {\n <div class=\"dmp-search-panel global-wrapper-container\">\n <div *ngFor=\"let result of dmpLayerResults\" [attr.data-value]=\"result\" class=\"search-result-option\">\n <mat-expansion-panel expanded=\"false\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <span class=\"result-title\">{{ result.title }}</span>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div><span class=\"field-label\">Status:</span><span class=\"field-value\"> {{ result.availability }}</span></div>\n <div><span class=\"field-label\">Kategori:</span><span class=\"field-value\"> {{ result.category }}</span></div>\n <div><span class=\"field-label\">Beskrivelse:</span><span class=\"field-value\"> {{ result.description }}</span></div>\n <div><span class=\"field-label\">Tags:</span><span class=\"field-value\"> {{ result.tags?.join(', ') }}</span></div>\n <div *ngIf=\"result.metaDataUrl\">\n <span class=\"field-label\">Metadata:</span>\n <a [href]=\"result.metaDataUrl\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n Vis metadata\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div *ngIf=\"result.license && result.license.url\">\n <span class=\"field-label\">Licens:</span>\n <a [href]=\"result.license.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n {{ result.license.title }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div *ngIf=\"result.dataLiabilityAgreement && result.dataLiabilityAgreement.url\">\n <span class=\"field-label\">Dataansvarsaftale:</span>\n <a [href]=\"result.dataLiabilityAgreement.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n {{ result.dataLiabilityAgreement.title }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div class=\"add-layer-section\">\n <span class=\"field-label\">Tilf\u00F8j {{ result.serviceType }}:</span>\n <mat-icon (click)=\"addDmpLayer(result)\" class=\"add-option\"\n matTooltip=\"Tilf\u00F8j\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">add\n </mat-icon>\n </div>\n </mat-expansion-panel>\n </div>\n </div>}\n </ng-template>\n</div>", styles: [".layer-info{cursor:pointer}.legend-thumbnail{max-width:200px;max-height:200px;width:auto;height:auto;border:2px solid #dee2e6;padding:6px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section{display:flex;align-items:center;gap:6px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .undo-icon{color:#fff!important;cursor:pointer;flex-shrink:0}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .undo-icon:hover{color:#d3d3d3}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .search-field-wrapper{flex:1;display:flex;flex-direction:column}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .search-label{color:#fff}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field{flex:1}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .search-icon{color:#fff}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#dee2e6!important;border-width:1px!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#d1d5db!important;border-width:1px!important;box-shadow:0 0 0 3px #d1d5db40!important}::ng-deep .dmp-dialog-content mat-dialog-actions{display:none}::ng-deep .dmp-dialog-content .search-result-option{padding:0!important}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel{box-shadow:none!important;margin-bottom:2px;border-radius:0!important;background:transparent!important;color:#fff}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#0003}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px!important}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:10px 12px!important}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:10px;display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{font-size:11px;gap:6px}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{color:#bdc1c3cc!important;min-width:90px;font-weight:500;flex-shrink:0;font-size:13px}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{min-width:80px}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-value{color:#fff!important;font-weight:300;flex:1;word-break:break-word;font-size:13px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link:hover{color:#2180c9!important;text-decoration:underline!important}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link .link-icon{font-size:14px;width:14px;height:14px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section{display:flex;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .field-label{min-width:90px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option{color:#6ccb78!important;cursor:pointer;font-size:20px;width:20px;height:20px;transition:all .2s ease}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option:hover{color:#45a049!important;transform:scale(1.1)}.dmp-search-panel{overflow-y:scroll;max-height:300px}.dmp-search-panel::-webkit-scrollbar{width:12px}.dmp-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.dmp-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.dmp-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.dmp-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.dmp-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.dmp-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.dmp-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.dmp-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.dmp-search-panel .search-result-option{padding:0!important;margin-bottom:2px}.dmp-search-panel .search-result-option mat-expansion-panel{box-shadow:none!important;margin:0;border-radius:0!important;background:transparent!important}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#0003}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px!important}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:10px 12px!important}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:10px;display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{font-size:11px;gap:6px}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{color:#bdc1c3cc!important;min-width:90px;font-weight:500;flex-shrink:0;font-size:13px}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{min-width:80px}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-value{color:#fff!important;font-weight:300;flex:1;word-break:break-word;font-size:13px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link:hover{color:#2180c9!important;text-decoration:underline!important}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link .link-icon{font-size:14px;width:14px;height:14px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section{display:flex;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .field-label{min-width:90px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option{color:#6ccb78!important;cursor:pointer;font-size:20px;width:20px;height:20px;transition:all .2s ease}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option:hover{color:#45a049!important;transform:scale(1.1)}.dmp-search-panel .search-result-option:first-child mat-expansion-panel .mat-expansion-panel-header{border-top-left-radius:4px!important;border-top-right-radius:4px!important}.dmp-search-panel .search-result-option:last-child mat-expansion-panel .mat-expansion-panel-header.mat-expanded{border-radius:0!important}.dmp-search-panel .search-result-option:last-child mat-expansion-panel .mat-expansion-panel-content{border-bottom-left-radius:4px!important;border-bottom-right-radius:4px!important}.dialog-header{position:relative}.dialog-header .close-button{position:absolute;top:-9px;right:-14px;color:#fff;cursor:pointer;border-radius:50%;transition:all .2s ease;font-size:18px;width:24px;height:24px;display:flex;justify-content:center;align-items:center;z-index:10;background-color:#ffffff1a}.dialog-header .close-button:hover{color:#e0d5d5}.field-label{color:#bdc1c3cc!important;margin-right:6px}.open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}.open-link:hover{color:#2180c9!important;text-decoration:underline!important}.field-value{color:#fff!important;font-weight:300}.add-layer-section{display:flex;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.dmp-item-list .dmp-item-container{display:flex;align-items:center;width:100%;gap:12px;min-width:0}.dmp-item-list .dmp-item-container .dmp-item-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer;flex-shrink:0}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon:hover{color:#d3d3d3}.dmp-item-list .dmp-item-container .dmp-item-left .dmp-item-title{flex:1;min-width:0;overflow:hidden}.dmp-item-list .dmp-item-container .dmp-item-left .dmp-item-title .title-text{color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-left .dmp-item-title .title-text{font-size:11px}}.dmp-item-list .dmp-item-container .dmp-item-center{display:flex;align-items:center;gap:8px;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-center .zoom-off{color:#ef4444;font-size:16px;width:16px;height:16px}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center .zoom-off{font-size:14px;width:14px;height:14px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon{flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on{color:#6ccb78;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on:hover{background:#4caf5033;border-radius:5px}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off:hover{color:#d3d3d3}.dmp-item-list .dmp-item-container .dmp-item-right{display:flex;align-items:center;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]{width:60px;height:4px;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-moz-range-thumb:hover{background:#6ccb78}::ng-deep .dmp-item-list mat-expansion-panel{box-shadow:none!important}.group-header{display:flex;color:#fff;padding:8px 14px;font-weight:600;background:#ffffff08}.group-header mat-icon{margin-left:10px;cursor:pointer;color:#bdc1c3cc;transition:color .2s ease}.group-header mat-icon:hover{color:#6ccb78}.layer-selector-body-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:1000;max-width:calc(100vw - 8em);display:flex;flex-direction:column;transition:width .3s ease,max-width .3s ease;border-top-left-radius:5px;border-top-right-radius:5px;box-shadow:0 2px 10px #0000001a;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.layer-selector-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:move;z-index:1001}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons{justify-content:space-between}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .icon-left{order:1;margin-right:auto}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .toggle-icon{order:3}.layer-selector-body-wrapper.collapsed .layer-selector-body{display:none}.layer-selector-body-wrapper.collapsed .drag-handle-selector{width:100%;min-width:100%;box-sizing:border-box;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content{width:100%}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons{width:100%;justify-content:space-between;gap:6px}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon{font-size:18px!important;flex-shrink:0}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.icon-left{cursor:default!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.toggle-icon{cursor:pointer!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.toggle-icon:hover{color:#d3d3d3!important}@media (max-width: 767px){.layer-selector-body-wrapper{right:.5em;bottom:4em;max-width:calc(100vw - 7em);left:.5em;width:calc(100vw - 7em)}.layer-selector-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}@media (min-width: 768px) and (max-width: 1024px){.layer-selector-body-wrapper{right:3.5em;bottom:.5em;max-width:calc(100vw - 2em)}.layer-selector-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}.drag-handle-selector{display:flex;justify-content:flex-end;border-radius:5px 5px 0 0;padding:0 2px;cursor:move}.drag-handle-content,.drag-handle-icons{display:flex;align-items:center;width:100%}.drag-handle-icons mat-icon{font-size:18px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-left{cursor:default!important}.toggle-icon{cursor:pointer!important}.toggle-icon:hover{color:#d3d3d3!important}::ng-deep .layer-selector-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;width:100%;max-width:100%;max-height:317px;min-height:120px;overflow-y:auto;border-radius:0 0 5px 5px!important}::ng-deep .layer-selector-body .mat-expansion-panel-header-title{gap:6px}::ng-deep .layer-selector-body::-webkit-scrollbar{width:12px}::ng-deep .layer-selector-body::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .layer-selector-body::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .layer-selector-body::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .layer-selector-body::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}@media (max-width: 767px){::ng-deep .layer-selector-body{width:100%;max-height:70vh;min-height:140px}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body{width:100%;max-width:445px;max-height:76vh;min-height:110px}}::ng-deep .layer-selector-body .search-section{display:flex;padding:12px 12px 8px;justify-content:center;align-items:center;gap:8px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section{padding:8px 8px 4px;gap:4px}}::ng-deep .layer-selector-body .search-section .search-field-wrapper{flex:1;display:flex;flex-direction:column}::ng-deep .layer-selector-body .search-section .search-label{color:#fff}::ng-deep .layer-selector-body .search-section mat-form-field{flex:1}::ng-deep .layer-selector-body .search-section mat-form-field .search-icon{color:#fff}::ng-deep .layer-selector-body .search-section mat-form-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent}::ng-deep .layer-selector-body .search-section>mat-icon{color:#fff;cursor:pointer;margin-top:0;transition:color .2s ease}::ng-deep .layer-selector-body .search-section>mat-icon:hover{color:#d3d3d3}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list{padding:4px;max-height:calc(60vh - 80px)}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body .item-list{max-height:calc(77vh - 78px)}}::ng-deep .layer-selector-body .item-list .group{overflow:hidden;box-shadow:none}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel{background:transparent!important;box-shadow:none!important;margin-bottom:4px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header{padding:0 16px;height:40px!important}}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title{display:flex;align-items:center;gap:6px;font-weight:600!important;color:#bdc1c3cc!important;transition:color .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon{color:#bdc1c3cc;font-size:16px;width:16px;height:16px;transition:all .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-on{color:#6ccb78;cursor:pointer}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-on:hover{color:#45a049}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-off{cursor:pointer;color:#bdc1c3cc}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-off:hover{color:#d3d3d3}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-content{background:#0003}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:2px 0 2px 12px}}::ng-deep .layer-selector-body .item-list .group .item-list{padding:0}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel{background:transparent!important;box-shadow:none!important;margin-bottom:2px}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel .mat-expansion-panel-content{background:#00000026}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:8px 16px 12px 32px}::ng-deep .layer-selector-body .item-list .group .item-list .layer-description{font-size:12px;color:#fffc;line-height:1.5;margin-bottom:8px;margin-left:28px}::ng-deep .layer-selector-body .item-list .group .item{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;background:transparent;transition:all .2s ease;color:#fff;cursor:move;font-size:13px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item:hover{background-color:transparent}::ng-deep .layer-selector-body .item-list .group .item .item-left{display:flex;align-items:center;gap:4px;flex:1;min-width:0}::ng-deep .layer-selector-body .item-list .group .item .item-left .drag-indicator{color:#ffffff80;font-size:16px;width:16px;height:16px;cursor:move;flex-shrink:0}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left .drag-indicator{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info{cursor:pointer;color:#dfca0e;font-size:16px;width:16px;height:16px;flex-shrink:0;transition:all .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info:hover{color:#ccb913}::ng-deep .layer-selector-body .item-list .group .item .item-left span{flex:1;font-size:13px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;color:#fff;font-weight:400}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left span{font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item .item-center{display:flex;align-items:center;gap:4px;flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-center .zoom-off{color:#ef4444;font-size:16px;width:16px;height:16px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-center .zoom-off{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-right{display:flex;align-items:center;gap:8px;flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon{flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on{color:#6ccb78;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on{font-size:16px;width:16px;height:16px}}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on:hover{color:#45a049}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off{font-size:16px;width:16px;height:16px}}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off:hover{color:#d3d3d3}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]{width:60px;height:4px;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-moz-range-thumb:hover{background:#6ccb78}::ng-deep .layer-selector-body-wrapper .result-title{color:#fff}::ng-deep .layer-selector-body-wrapper .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}::ng-deep .layer-selector-body-wrapper .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .mat-expansion-panel-header.mat-expanded:hover{background:inherit!important}::ng-deep .layer-selector-body-wrapper .show-layer-highlight{font-size:18px;height:18px;width:18px}::ng-deep .layer-selector-body-wrapper .dmp-item{cursor:move;width:100%}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel-header.mat-expanded:hover,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel-header.mat-expanded:hover{background:#ffffff26!important}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel:not([class*=mat-elevation-z]),::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-indicator:after,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-indicator:after{color:#fff!important;border-color:#fff!important}::ng-deep .layer-selector-body-wrapper mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding-left:0!important;padding-right:0!important;box-sizing:border-box}@media (max-width: 767px){::ng-deep .layer-selector-body-wrapper mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding-left:12px!important;padding-right:12px!important}}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 5px 15px #00000026;background:#4c4d51;padding:8px 12px;color:#fff;display:flex;align-items:center;gap:8px}.cdk-drag-preview mat-icon{color:#fff}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .cdk-drag{transform:translateZ(0)!important}.power-on{color:#6ccb78!important;font-size:18px;width:18px;height:18px}.power-off{cursor:pointer;color:#bdc1c3cc!important}.add-option{color:#6ccb78!important}.add-option:hover{color:#37923a!important}::ng-deep .lightbulb{color:#dfca0e;width:18px;height:18px;font-size:18px}::ng-deep .arrow-up-layer{color:#fff;width:18px;height:18px;font-size:18px}::ng-deep .mdc-text-field--outlined{overflow:hidden!important}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
|
|
1276
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: LayerSelectorComponent, isStandalone: true, selector: "lib-layer-selector", inputs: { map: "map", profile: "profile", currentZoomLevel: "currentZoomLevel" }, viewQueries: [{ propertyName: "contentBody", first: true, predicate: ["layerSelectorBody"], descendants: true }, { propertyName: "dmpDialog", first: true, predicate: ["dmpDialog"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #layerSelectorBody\n class=\"layer-selector-body-wrapper global-wrapper-container\"\n cdkDrag\n cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"layerSelectorDragPosition\"\n (cdkDragEnded)=\"onLayerSelectorDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n\n <div class=\"drag-handle-selector\" cdkDragHandle>\n <div class=\"drag-handle-content\">\n <div class=\"drag-handle-icons\">\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"Lag\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n layers\n </mat-icon>\n <mat-icon class=\"toggle-icon\" (click)=\"toggleLayerSelector()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n </div>\n\n <div class=\"ol-unselectable ol-control layer-selector-body\" *ngIf=\"!collapsed\">\n <div class=\"search-section\">\n <div class=\"search-field-wrapper\">\n <label class=\"search-label\">Filtrer</label>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\n <input \n matInput \n type=\"text\" \n [(ngModel)]=\"searchText\" \n (ngModelChange)=\"filterChanged()\"\n />\n </mat-form-field>\n </div>\n <mat-icon matTooltip=\"Nulstil\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" (click)=\"clearSearchText()\">\n replay</mat-icon>\n </div>\n <div\n cdkDropList\n [cdkDropListData]=\"filteredLayerGroups\"\n (cdkDropListDropped)=\"dropGroup($event, filteredLayerGroups)\"\n class=\"item-list\">\n @for (group of filteredLayerGroups; track group.id; let gIndex = $index) {\n <div class=\"group\" cdkDrag>\n <mat-expansion-panel [(expanded)]=\"group.expanded\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n @if (group.expanded) {\n <mat-icon class=\"arrow-up-layer\">arrow_upward</mat-icon>\n }\n @if (!group.expanded) {\n <mat-icon>arrow_downward</mat-icon> \n }\n <span class=\"panel-title\">{{ group.name }}</span>\n ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n @if (group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\" \n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon> \n }\n @if (!group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n </mat-panel-title>\n </mat-expansion-panel-header>\n\n <div\n cdkDropList\n [cdkDropListData]=\"group.layers\"\n (cdkDropListDropped)=\"dropLayer($event, group)\"\n class=\"item-list\">\n @for (layer of group.layers; track layer.id; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"item\" cdkDrag>\n <div class=\"item-left\">\n <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n @if(layer.infoUrl) {\n <mat-icon \n class=\"layer-info\"\n matTooltip=\"Vis ekstra informationer i ny tab\"\n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n (click)=\"openUrl(layer.infoUrl)\"\n matTooltipPosition=\"above\"\n >info</mat-icon>\n }\n <span>{{ layer.name }}</span> \n <mat-icon></mat-icon>\n </div>\n <div class=\"item-center\">\n @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">browser_not_supported\n </mat-icon>\n }\n @if (layer.hasErrors) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n\n }\n </div>\n <div class=\"item-right\">\n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\" \n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.id, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n <div *cdkDragPreview><span class=\"panel-title\">{{ layer.name }} </span></div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"layer-description\">{{ layer.description }}</div>\n @if (showLegend) {\n <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n }\n </mat-expansion-panel>\n }\n </div>\n </mat-expansion-panel>\n <div *cdkDragPreview><span class=\"panel-title\">{{ group.name }} </span></div>\n </div>\n }\n </div>\n <div class=\"group-header\">Mine Temaer\n <mat-icon (click)=\"toggleDmpSearch(true)\"\n class=\"power-on\"\n matTooltip=\"S\u00F8g\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">add\n </mat-icon>\n </div>\n @if (filteredDmpLayers.length > 0) {\n <div class=\"dmp-item-list\" cdkDropList\n [cdkDropListData]=\"filteredDmpLayers\"\n (cdkDropListDropped)=\"dropDmpLayer($event)\">\n @for (layer of filteredDmpLayers; track layer.datasetId; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"true\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"dmp-item\" cdkDrag>\n <div class=\"dmp-item-container\">\n <div class=\"dmp-item-left\">\n <mat-icon (click)=\"deleteDmpLayer(layer, $event)\" class=\"delete-icon\" \n matTooltip=\"Slet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">delete\n </mat-icon>\n <div class=\"dmp-item-title\">\n <span class=\"title-text\">{{ layer.title }}</span>\n </div>\n </div>\n \n <div class=\"dmp-item-center\">\n @if (layer.hasErrors) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n }\n \n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.datasetId, $event)\" class=\"power-on\" \n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.datasetId, $event)\" class=\"power-off\"\n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n </div>\n <div class=\"dmp-item-right\">\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.datasetId, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n </div>\n <div *cdkDragPreview><span class=\"panel-title\">{{ layer.title }} </span></div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n </mat-expansion-panel>\n }\n </div>\n }\n <div *ngIf=\"filteredBackgroundLayerGroups && filteredBackgroundLayerGroups.length > 0\" class=\"group-header\">Baggrundskort</div>\n <div\n cdkDropList\n [cdkDropListData]=\"filteredBackgroundLayerGroups\"\n (cdkDropListDropped)=\"dropGroup($event, filteredBackgroundLayerGroups)\"\n class=\"item-list\">\n @for (group of filteredBackgroundLayerGroups; track group.id; let gIndex = $index) {\n <div class=\"group\" cdkDrag>\n <mat-expansion-panel [(expanded)]=\"group.expanded\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n @if (group.expanded) {\n <mat-icon class=\"arrow-up-layer\">arrow_upward</mat-icon>\n }\n @if (!group.expanded) {\n <mat-icon>arrow_downward</mat-icon> \n }\n {{ group.name }}\n <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n @if (group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\" \n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon> \n }\n @if (!group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n </mat-panel-title>\n </mat-expansion-panel-header>\n\n <div\n cdkDropList\n [cdkDropListData]=\"group.layers\"\n (cdkDropListDropped)=\"dropLayer($event, group)\"\n class=\"item-list\">\n @for (layer of group.layers; track layer.id; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"item\" cdkDrag>\n <div class=\"item-left\">\n <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n <span>{{ layer.name }}</span>\n </div>\n <div class=\"item-center\">\n @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">browser_not_supported\n </mat-icon>\n }\n @if (layer.hasErrors) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n\n }\n </div>\n <div class=\"item-right\">\n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\" \n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.id, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n <div *cdkDragPreview><span class=\"panel-title\">{{ layer.name }} </span></div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"layer-description\">{{ layer.description }}</div>\n @if (showLegend) {\n <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n }\n </mat-expansion-panel>\n }\n </div>\n </mat-expansion-panel>\n <div *cdkDragPreview><span class=\"panel-title\">{{ group.name }} </span></div>\n </div>\n }\n </div>\n </div>\n <ng-template #dmpDialog>\n @if (dmpSearchMode) {\n <mat-dialog-content>\n <div class=\"dialog-header\">\n <div class=\"search-section\">\n <div class=\"search-field-wrapper\">\n <label class=\"search-label\">S\u00F8g</label>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\n <input \n matInput \n type=\"text\" \n [(ngModel)]=\"dmpSearchText\" \n (ngModelChange)=\"searchDmp()\"\n />\n </mat-form-field>\n </div>\n <mat-icon (click)=\"clearDmpSearchText()\" class=\"undo-icon\" >undo</mat-icon>\n </div>\n <mat-icon \n class=\"close-button\" \n (click)=\"toggleDmpSearch(false)\"\n matTooltip=\"Luk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"left\">\n close\n </mat-icon>\n </div>\n </mat-dialog-content>\n }\n\n @if (dmpLayerResults.length > 0) {\n <div class=\"dmp-search-panel global-wrapper-container\">\n <div *ngFor=\"let result of dmpLayerResults\" [attr.data-value]=\"result\" class=\"search-result-option\">\n <mat-expansion-panel expanded=\"false\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <span class=\"result-title\">{{ result.title }}</span>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div><span class=\"field-label\">Status:</span><span class=\"field-value\"> {{ result.availability }}</span></div>\n <div><span class=\"field-label\">Kategori:</span><span class=\"field-value\"> {{ result.category }}</span></div>\n <div><span class=\"field-label\">Beskrivelse:</span><span class=\"field-value\"> {{ result.description }}</span></div>\n <div><span class=\"field-label\">Tags:</span><span class=\"field-value\"> {{ result.tags?.join(', ') }}</span></div>\n <div *ngIf=\"result.metaDataUrl\">\n <span class=\"field-label\">Metadata:</span>\n <a [href]=\"result.metaDataUrl\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n Vis metadata\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div *ngIf=\"result.license && result.license.url\">\n <span class=\"field-label\">Licens:</span>\n <a [href]=\"result.license.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n {{ result.license.title }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div *ngIf=\"result.dataLiabilityAgreement && result.dataLiabilityAgreement.url\">\n <span class=\"field-label\">Dataansvarsaftale:</span>\n <a [href]=\"result.dataLiabilityAgreement.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n {{ result.dataLiabilityAgreement.title }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div class=\"add-layer-section\">\n <span class=\"field-label\">Tilf\u00F8j {{ result.serviceType }}:</span>\n <mat-icon (click)=\"addDmpLayer(result)\" class=\"add-option\"\n matTooltip=\"Tilf\u00F8j\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">add\n </mat-icon>\n </div>\n </mat-expansion-panel>\n </div>\n </div>}\n </ng-template>\n</div>", styles: [".layer-info{cursor:pointer}.legend-thumbnail{max-width:200px;max-height:200px;width:auto;height:auto;border:2px solid #dee2e6;padding:6px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section{display:flex;align-items:center;gap:6px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .undo-icon{color:#fff!important;cursor:pointer;flex-shrink:0}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .undo-icon:hover{color:#d3d3d3}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .search-field-wrapper{flex:1;display:flex;flex-direction:column}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .search-label{color:#fff}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field{flex:1}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .search-icon{color:#fff}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#dee2e6!important;border-width:1px!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#d1d5db!important;border-width:1px!important;box-shadow:0 0 0 3px #d1d5db40!important}::ng-deep .dmp-dialog-content mat-dialog-actions{display:none}::ng-deep .dmp-dialog-content .search-result-option{padding:0!important}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel{box-shadow:none!important;margin-bottom:2px;border-radius:0!important;background:transparent!important;color:#fff}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#0003}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px!important}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:10px 12px!important}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:10px;display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{font-size:11px;gap:6px}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{color:#bdc1c3cc!important;min-width:90px;font-weight:500;flex-shrink:0;font-size:13px}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{min-width:80px}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-value{color:#fff!important;font-weight:300;flex:1;word-break:break-word;font-size:13px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link:hover{color:#2180c9!important;text-decoration:underline!important}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link .link-icon{font-size:14px;width:14px;height:14px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section{display:flex;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .field-label{min-width:90px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option{color:#6ccb78!important;cursor:pointer;font-size:20px;width:20px;height:20px;transition:all .2s ease}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option:hover{color:#45a049!important;transform:scale(1.1)}.dmp-search-panel{overflow-y:scroll;max-height:300px}.dmp-search-panel::-webkit-scrollbar{width:12px}.dmp-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.dmp-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.dmp-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.dmp-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.dmp-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.dmp-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.dmp-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.dmp-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.dmp-search-panel .search-result-option{padding:0!important;margin-bottom:2px}.dmp-search-panel .search-result-option mat-expansion-panel{box-shadow:none!important;margin:0;border-radius:0!important;background:transparent!important}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#0003}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px!important}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:10px 12px!important}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:10px;display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{font-size:11px;gap:6px}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{color:#bdc1c3cc!important;min-width:90px;font-weight:500;flex-shrink:0;font-size:13px}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{min-width:80px}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-value{color:#fff!important;font-weight:300;flex:1;word-break:break-word;font-size:13px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link:hover{color:#2180c9!important;text-decoration:underline!important}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link .link-icon{font-size:14px;width:14px;height:14px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section{display:flex;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .field-label{min-width:90px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option{color:#6ccb78!important;cursor:pointer;font-size:20px;width:20px;height:20px;transition:all .2s ease}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option:hover{color:#45a049!important;transform:scale(1.1)}.dmp-search-panel .search-result-option:first-child mat-expansion-panel .mat-expansion-panel-header{border-top-left-radius:4px!important;border-top-right-radius:4px!important}.dmp-search-panel .search-result-option:last-child mat-expansion-panel .mat-expansion-panel-header.mat-expanded{border-radius:0!important}.dmp-search-panel .search-result-option:last-child mat-expansion-panel .mat-expansion-panel-content{border-bottom-left-radius:4px!important;border-bottom-right-radius:4px!important}.dialog-header{position:relative}.dialog-header .close-button{position:absolute;top:-9px;right:-14px;color:#fff;cursor:pointer;border-radius:50%;transition:all .2s ease;font-size:18px;width:24px;height:24px;display:flex;justify-content:center;align-items:center;z-index:10;background-color:#ffffff1a}.dialog-header .close-button:hover{color:#e0d5d5}.field-label{color:#bdc1c3cc!important;margin-right:6px}.open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}.open-link:hover{color:#2180c9!important;text-decoration:underline!important}.field-value{color:#fff!important;font-weight:300}.add-layer-section{display:flex;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.dmp-item-list .dmp-item-container{display:flex;align-items:center;width:100%;gap:12px;min-width:0}.dmp-item-list .dmp-item-container .dmp-item-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer;flex-shrink:0}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon:hover{color:#d3d3d3}.dmp-item-list .dmp-item-container .dmp-item-left .dmp-item-title{flex:1;min-width:0;overflow:hidden}.dmp-item-list .dmp-item-container .dmp-item-left .dmp-item-title .title-text{color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-left .dmp-item-title .title-text{font-size:11px}}.dmp-item-list .dmp-item-container .dmp-item-center{display:flex;align-items:center;gap:8px;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-center .zoom-off{color:#ef4444;font-size:16px;width:16px;height:16px}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center .zoom-off{font-size:14px;width:14px;height:14px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon{flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on{color:#6ccb78;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on:hover{background:#4caf5033;border-radius:5px}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off:hover{color:#d3d3d3}.dmp-item-list .dmp-item-container .dmp-item-right{display:flex;align-items:center;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]{width:60px;height:4px;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-moz-range-thumb:hover{background:#6ccb78}::ng-deep .dmp-item-list mat-expansion-panel{box-shadow:none!important}.group-header{display:flex;color:#fff;padding:8px 14px;font-weight:600;background:#ffffff08}.group-header mat-icon{margin-left:10px;cursor:pointer;color:#bdc1c3cc;transition:color .2s ease}.group-header mat-icon:hover{color:#6ccb78}.layer-selector-body-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:1000;max-width:calc(100vw - 8em);display:flex;flex-direction:column;transition:width .3s ease,max-width .3s ease;border-top-left-radius:5px;border-top-right-radius:5px;box-shadow:0 2px 10px #0000001a;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.layer-selector-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:move;z-index:1001}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons{justify-content:space-between}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .icon-left{order:1;margin-right:auto}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .toggle-icon{order:3}.layer-selector-body-wrapper.collapsed .layer-selector-body{display:none}.layer-selector-body-wrapper.collapsed .drag-handle-selector{width:100%;min-width:100%;box-sizing:border-box;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content{width:100%}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons{width:100%;justify-content:space-between;gap:6px}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon{font-size:18px!important;flex-shrink:0}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.icon-left{cursor:default!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.toggle-icon{cursor:pointer!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.toggle-icon:hover{color:#d3d3d3!important}@media (max-width: 767px){.layer-selector-body-wrapper{right:.5em;bottom:4em;max-width:calc(100vw - 7em);left:.5em;width:calc(100vw - 7em)}.layer-selector-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}@media (min-width: 768px) and (max-width: 1024px){.layer-selector-body-wrapper{right:3.5em;bottom:.5em;max-width:calc(100vw - 2em)}.layer-selector-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}.drag-handle-selector{display:flex;justify-content:flex-end;border-radius:5px 5px 0 0;padding:0 2px;cursor:move}.drag-handle-content,.drag-handle-icons{display:flex;align-items:center;width:100%}.drag-handle-icons mat-icon{font-size:18px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-left{cursor:default!important}.toggle-icon{cursor:pointer!important}.toggle-icon:hover{color:#d3d3d3!important}::ng-deep .layer-selector-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;width:100%;max-width:100%;max-height:317px;min-height:120px;overflow-y:auto;border-radius:0 0 5px 5px!important}::ng-deep .layer-selector-body .mat-expansion-panel-header-title{gap:6px}::ng-deep .layer-selector-body::-webkit-scrollbar{width:12px}::ng-deep .layer-selector-body::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .layer-selector-body::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .layer-selector-body::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .layer-selector-body::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}@media (max-width: 767px){::ng-deep .layer-selector-body{width:100%;max-height:70vh;min-height:140px}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body{width:100%;max-width:445px;max-height:76vh;min-height:110px}}::ng-deep .layer-selector-body .search-section{display:flex;padding:12px 12px 8px;justify-content:center;align-items:center;gap:8px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section{padding:8px 8px 4px;gap:4px}}::ng-deep .layer-selector-body .search-section .search-field-wrapper{flex:1;display:flex;flex-direction:column}::ng-deep .layer-selector-body .search-section .search-label{color:#fff}::ng-deep .layer-selector-body .search-section mat-form-field{flex:1}::ng-deep .layer-selector-body .search-section mat-form-field .search-icon{color:#fff}::ng-deep .layer-selector-body .search-section mat-form-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent}::ng-deep .layer-selector-body .search-section>mat-icon{color:#fff;cursor:pointer;margin-top:0;transition:color .2s ease}::ng-deep .layer-selector-body .search-section>mat-icon:hover{color:#d3d3d3}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list{padding:4px;max-height:calc(60vh - 80px)}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body .item-list{max-height:calc(77vh - 78px)}}::ng-deep .layer-selector-body .item-list .group{overflow:hidden;box-shadow:none}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel{background:transparent!important;box-shadow:none!important;margin-bottom:4px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header{padding:0 16px;height:40px!important}}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title{display:flex;align-items:center;gap:6px;font-weight:600!important;color:#bdc1c3cc!important;transition:color .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon{color:#bdc1c3cc;font-size:16px;width:16px;height:16px;transition:all .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-on{color:#6ccb78;cursor:pointer}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-on:hover{color:#45a049}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-off{cursor:pointer;color:#bdc1c3cc}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-off:hover{color:#d3d3d3}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-content{background:#0003}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:2px 0 2px 12px}}::ng-deep .layer-selector-body .item-list .group .item-list{padding:0}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel{background:transparent!important;box-shadow:none!important;margin-bottom:2px}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel .mat-expansion-panel-content{background:#00000026}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:8px 16px 12px 32px}::ng-deep .layer-selector-body .item-list .group .item-list .layer-description{font-size:12px;color:#fffc;line-height:1.5;margin-bottom:8px;margin-left:28px}::ng-deep .layer-selector-body .item-list .group .item{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;background:transparent;transition:all .2s ease;color:#fff;cursor:move;font-size:13px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item:hover{background-color:transparent}::ng-deep .layer-selector-body .item-list .group .item .item-left{display:flex;align-items:center;gap:4px;flex:1;min-width:0}::ng-deep .layer-selector-body .item-list .group .item .item-left .drag-indicator{color:#ffffff80;font-size:16px;width:16px;height:16px;cursor:move;flex-shrink:0}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left .drag-indicator{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info{cursor:pointer;color:#dfca0e;font-size:16px;width:16px;height:16px;flex-shrink:0;transition:all .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info:hover{color:#ccb913}::ng-deep .layer-selector-body .item-list .group .item .item-left span{flex:1;font-size:13px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;color:#fff;font-weight:400}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left span{font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item .item-center{display:flex;align-items:center;gap:4px;flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-center .zoom-off{color:#ef4444;font-size:16px;width:16px;height:16px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-center .zoom-off{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-right{display:flex;align-items:center;gap:8px;flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon{flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on{color:#6ccb78;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on{font-size:16px;width:16px;height:16px}}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on:hover{color:#45a049}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off{font-size:16px;width:16px;height:16px}}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off:hover{color:#d3d3d3}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]{width:60px;height:4px;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-moz-range-thumb:hover{background:#6ccb78}::ng-deep .layer-selector-body-wrapper .result-title{color:#fff}::ng-deep .layer-selector-body-wrapper .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}::ng-deep .layer-selector-body-wrapper .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .mat-expansion-panel-header.mat-expanded:hover{background:inherit!important}::ng-deep .layer-selector-body-wrapper .show-layer-highlight{font-size:18px;height:18px;width:18px}::ng-deep .layer-selector-body-wrapper .dmp-item{cursor:move;width:100%}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel-header.mat-expanded:hover,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel-header.mat-expanded:hover{background:#ffffff26!important}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel:not([class*=mat-elevation-z]),::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-indicator:after,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-indicator:after{color:#fff!important;border-color:#fff!important}::ng-deep .layer-selector-body-wrapper mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding-left:0!important;padding-right:0!important;box-sizing:border-box}@media (max-width: 767px){::ng-deep .layer-selector-body-wrapper mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding-left:12px!important;padding-right:12px!important}}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 5px 15px #00000026;background:#4c4d51;padding:8px 12px;color:#fff;display:flex;align-items:center;gap:8px}.cdk-drag-preview mat-icon{color:#fff}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .cdk-drag{transform:translateZ(0)!important}.power-on{color:#6ccb78!important;font-size:18px;width:18px;height:18px}.power-off{cursor:pointer;color:#bdc1c3cc!important}.add-option{color:#6ccb78!important}.add-option:hover{color:#37923a!important}::ng-deep .lightbulb{color:#dfca0e;width:18px;height:18px;font-size:18px}::ng-deep .arrow-up-layer{color:#fff;width:18px;height:18px;font-size:18px}::ng-deep .mdc-text-field--outlined{overflow:hidden!important}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i5.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
|
|
1275
1277
|
}
|
|
1276
1278
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: LayerSelectorComponent, decorators: [{
|
|
1277
1279
|
type: Component,
|
|
1278
1280
|
args: [{ selector: 'lib-layer-selector', imports: [MatFormFieldModule, CommonModule, MatIconModule, FormsModule, DragDropModule,
|
|
1279
|
-
MatExpansionModule, MatInputModule, MatTooltipModule, MatOptionModule, MatDialogModule, MatDialogContent, MatDialogActions], template: "<div\n #layerSelectorBody\n class=\"layer-selector-body-wrapper global-wrapper-container\"\n cdkDrag\n cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"layerSelectorDragPosition\"\n (cdkDragEnded)=\"onLayerSelectorDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n\n <div class=\"drag-handle-selector\" cdkDragHandle>\n <div class=\"drag-handle-content\">\n <div class=\"drag-handle-icons\">\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"Lag\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n layers\n </mat-icon>\n <mat-icon class=\"toggle-icon\" (click)=\"toggleLayerSelector()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n </div>\n\n <div class=\"ol-unselectable ol-control layer-selector-body\" *ngIf=\"!collapsed\">\n <div class=\"search-section\">\n <div class=\"search-field-wrapper\">\n <label class=\"search-label\">Filtrer</label>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\n <input \n matInput \n type=\"text\" \n [(ngModel)]=\"searchText\" \n (ngModelChange)=\"filterChanged()\"\n />\n </mat-form-field>\n </div>\n <mat-icon (click)=\"clearSearchText()\">undo</mat-icon>\n </div>\n <div\n cdkDropList\n [cdkDropListData]=\"filteredLayerGroups\"\n (cdkDropListDropped)=\"dropGroup($event, filteredLayerGroups)\"\n class=\"item-list\">\n @for (group of filteredLayerGroups; track group.id; let gIndex = $index) {\n <div class=\"group\" cdkDrag>\n <mat-expansion-panel [(expanded)]=\"group.expanded\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n @if (group.expanded) {\n <mat-icon class=\"arrow-up-layer\">arrow_upward</mat-icon>\n }\n @if (!group.expanded) {\n <mat-icon>arrow_downward</mat-icon> \n }\n <span class=\"panel-title\">{{ group.name }}</span>\n <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n @if (group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\" \n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon> \n }\n @if (!group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n </mat-panel-title>\n </mat-expansion-panel-header>\n\n <div\n cdkDropList\n [cdkDropListData]=\"group.layers\"\n (cdkDropListDropped)=\"dropLayer($event, group)\"\n class=\"item-list\">\n @for (layer of group.layers; track layer.id; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"item\" cdkDrag>\n <div class=\"item-left\">\n <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n @if(layer.infoUrl) {\n <mat-icon \n class=\"layer-info\"\n matTooltip=\"Vis ekstra informationer i ny tab\"\n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n (click)=\"openUrl(layer.infoUrl)\"\n matTooltipPosition=\"above\"\n >info</mat-icon>\n }\n <span>{{ layer.name }}</span> \n <mat-icon></mat-icon>\n </div>\n <div class=\"item-center\">\n @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">browser_not_supported\n </mat-icon>\n }\n @if (layer.hasErrors) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n\n }\n </div>\n <div class=\"item-right\">\n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\" \n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.id, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n <div *cdkDragPreview><span class=\"panel-title\">{{ layer.name }} </span></div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"layer-description\">{{ layer.description }}</div>\n @if (showLegend) {\n <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n }\n </mat-expansion-panel>\n }\n </div>\n </mat-expansion-panel>\n <div *cdkDragPreview><span class=\"panel-title\">{{ group.name }} </span></div>\n </div>\n }\n </div>\n <div class=\"group-header\">Mine Temaer\n <mat-icon (click)=\"toggleDmpSearch(true)\"\n class=\"power-on\"\n matTooltip=\"S\u00F8g\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">add\n </mat-icon>\n </div>\n @if (filteredDmpLayers.length > 0) {\n <div class=\"dmp-item-list\" cdkDropList\n [cdkDropListData]=\"filteredDmpLayers\"\n (cdkDropListDropped)=\"dropDmpLayer($event)\">\n @for (layer of filteredDmpLayers; track layer.datasetId; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"true\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"dmp-item\" cdkDrag>\n <div class=\"dmp-item-container\">\n <div class=\"dmp-item-left\">\n <mat-icon (click)=\"deleteDmpLayer(layer, $event)\" class=\"delete-icon\" \n matTooltip=\"Slet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">delete\n </mat-icon>\n <div class=\"dmp-item-title\">\n <span class=\"title-text\">{{ layer.title }}</span>\n </div>\n </div>\n \n <div class=\"dmp-item-center\">\n @if (layer.hasErrors) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n }\n \n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.datasetId, $event)\" class=\"power-on\" \n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.datasetId, $event)\" class=\"power-off\"\n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n </div>\n <div class=\"dmp-item-right\">\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.datasetId, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n </div>\n <div *cdkDragPreview><span class=\"panel-title\">{{ layer.title }} </span></div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n </mat-expansion-panel>\n }\n </div>\n }\n <div *ngIf=\"filteredBackgroundLayerGroups && filteredBackgroundLayerGroups.length > 0\" class=\"group-header\">Baggrundskort</div>\n <div\n cdkDropList\n [cdkDropListData]=\"filteredBackgroundLayerGroups\"\n (cdkDropListDropped)=\"dropGroup($event, filteredBackgroundLayerGroups)\"\n class=\"item-list\">\n @for (group of filteredBackgroundLayerGroups; track group.id; let gIndex = $index) {\n <div class=\"group\" cdkDrag>\n <mat-expansion-panel [(expanded)]=\"group.expanded\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n @if (group.expanded) {\n <mat-icon class=\"arrow-up-layer\">arrow_upward</mat-icon>\n }\n @if (!group.expanded) {\n <mat-icon>arrow_downward</mat-icon> \n }\n {{ group.name }}\n <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n @if (group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\" \n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon> \n }\n @if (!group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n </mat-panel-title>\n </mat-expansion-panel-header>\n\n <div\n cdkDropList\n [cdkDropListData]=\"group.layers\"\n (cdkDropListDropped)=\"dropLayer($event, group)\"\n class=\"item-list\">\n @for (layer of group.layers; track layer.id; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"item\" cdkDrag>\n <div class=\"item-left\">\n <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n <span>{{ layer.name }}</span>\n </div>\n <div class=\"item-center\">\n @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">browser_not_supported\n </mat-icon>\n }\n @if (layer.hasErrors) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n\n }\n </div>\n <div class=\"item-right\">\n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\" \n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.id, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n <div *cdkDragPreview><span class=\"panel-title\">{{ layer.name }} </span></div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"layer-description\">{{ layer.description }}</div>\n @if (showLegend) {\n <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n }\n </mat-expansion-panel>\n }\n </div>\n </mat-expansion-panel>\n <div *cdkDragPreview><span class=\"panel-title\">{{ group.name }} </span></div>\n </div>\n }\n </div>\n </div>\n <ng-template #dmpDialog>\n @if (dmpSearchMode) {\n <mat-dialog-content>\n <div class=\"dialog-header\">\n <div class=\"search-section\">\n <div class=\"search-field-wrapper\">\n <label class=\"search-label\">S\u00F8g</label>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\n <input \n matInput \n type=\"text\" \n [(ngModel)]=\"dmpSearchText\" \n (ngModelChange)=\"searchDmp()\"\n />\n </mat-form-field>\n </div>\n <mat-icon (click)=\"clearDmpSearchText()\" class=\"undo-icon\" >undo</mat-icon>\n </div>\n <mat-icon \n class=\"close-button\" \n (click)=\"toggleDmpSearch(false)\"\n matTooltip=\"Luk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"left\">\n close\n </mat-icon>\n </div>\n </mat-dialog-content>\n }\n\n @if (dmpLayerResults.length > 0) {\n <div class=\"dmp-search-panel global-wrapper-container\">\n <div *ngFor=\"let result of dmpLayerResults\" [attr.data-value]=\"result\" class=\"search-result-option\">\n <mat-expansion-panel expanded=\"false\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <span class=\"result-title\">{{ result.title }}</span>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div><span class=\"field-label\">Status:</span><span class=\"field-value\"> {{ result.availability }}</span></div>\n <div><span class=\"field-label\">Kategori:</span><span class=\"field-value\"> {{ result.category }}</span></div>\n <div><span class=\"field-label\">Beskrivelse:</span><span class=\"field-value\"> {{ result.description }}</span></div>\n <div><span class=\"field-label\">Tags:</span><span class=\"field-value\"> {{ result.tags?.join(', ') }}</span></div>\n <div *ngIf=\"result.metaDataUrl\">\n <span class=\"field-label\">Metadata:</span>\n <a [href]=\"result.metaDataUrl\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n Vis metadata\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div *ngIf=\"result.license && result.license.url\">\n <span class=\"field-label\">Licens:</span>\n <a [href]=\"result.license.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n {{ result.license.title }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div *ngIf=\"result.dataLiabilityAgreement && result.dataLiabilityAgreement.url\">\n <span class=\"field-label\">Dataansvarsaftale:</span>\n <a [href]=\"result.dataLiabilityAgreement.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n {{ result.dataLiabilityAgreement.title }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div class=\"add-layer-section\">\n <span class=\"field-label\">Tilf\u00F8j {{ result.serviceType }}:</span>\n <mat-icon (click)=\"addDmpLayer(result)\" class=\"add-option\"\n matTooltip=\"Tilf\u00F8j\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">add\n </mat-icon>\n </div>\n </mat-expansion-panel>\n </div>\n </div>}\n </ng-template>\n</div>", styles: [".layer-info{cursor:pointer}.legend-thumbnail{max-width:200px;max-height:200px;width:auto;height:auto;border:2px solid #dee2e6;padding:6px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section{display:flex;align-items:center;gap:6px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .undo-icon{color:#fff!important;cursor:pointer;flex-shrink:0}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .undo-icon:hover{color:#d3d3d3}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .search-field-wrapper{flex:1;display:flex;flex-direction:column}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .search-label{color:#fff}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field{flex:1}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .search-icon{color:#fff}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#dee2e6!important;border-width:1px!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#d1d5db!important;border-width:1px!important;box-shadow:0 0 0 3px #d1d5db40!important}::ng-deep .dmp-dialog-content mat-dialog-actions{display:none}::ng-deep .dmp-dialog-content .search-result-option{padding:0!important}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel{box-shadow:none!important;margin-bottom:2px;border-radius:0!important;background:transparent!important;color:#fff}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#0003}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px!important}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:10px 12px!important}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:10px;display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{font-size:11px;gap:6px}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{color:#bdc1c3cc!important;min-width:90px;font-weight:500;flex-shrink:0;font-size:13px}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{min-width:80px}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-value{color:#fff!important;font-weight:300;flex:1;word-break:break-word;font-size:13px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link:hover{color:#2180c9!important;text-decoration:underline!important}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link .link-icon{font-size:14px;width:14px;height:14px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section{display:flex;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .field-label{min-width:90px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option{color:#6ccb78!important;cursor:pointer;font-size:20px;width:20px;height:20px;transition:all .2s ease}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option:hover{color:#45a049!important;transform:scale(1.1)}.dmp-search-panel{overflow-y:scroll;max-height:300px}.dmp-search-panel::-webkit-scrollbar{width:12px}.dmp-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.dmp-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.dmp-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.dmp-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.dmp-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.dmp-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.dmp-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.dmp-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.dmp-search-panel .search-result-option{padding:0!important;margin-bottom:2px}.dmp-search-panel .search-result-option mat-expansion-panel{box-shadow:none!important;margin:0;border-radius:0!important;background:transparent!important}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#0003}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px!important}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:10px 12px!important}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:10px;display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{font-size:11px;gap:6px}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{color:#bdc1c3cc!important;min-width:90px;font-weight:500;flex-shrink:0;font-size:13px}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{min-width:80px}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-value{color:#fff!important;font-weight:300;flex:1;word-break:break-word;font-size:13px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link:hover{color:#2180c9!important;text-decoration:underline!important}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link .link-icon{font-size:14px;width:14px;height:14px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section{display:flex;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .field-label{min-width:90px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option{color:#6ccb78!important;cursor:pointer;font-size:20px;width:20px;height:20px;transition:all .2s ease}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option:hover{color:#45a049!important;transform:scale(1.1)}.dmp-search-panel .search-result-option:first-child mat-expansion-panel .mat-expansion-panel-header{border-top-left-radius:4px!important;border-top-right-radius:4px!important}.dmp-search-panel .search-result-option:last-child mat-expansion-panel .mat-expansion-panel-header.mat-expanded{border-radius:0!important}.dmp-search-panel .search-result-option:last-child mat-expansion-panel .mat-expansion-panel-content{border-bottom-left-radius:4px!important;border-bottom-right-radius:4px!important}.dialog-header{position:relative}.dialog-header .close-button{position:absolute;top:-9px;right:-14px;color:#fff;cursor:pointer;border-radius:50%;transition:all .2s ease;font-size:18px;width:24px;height:24px;display:flex;justify-content:center;align-items:center;z-index:10;background-color:#ffffff1a}.dialog-header .close-button:hover{color:#e0d5d5}.field-label{color:#bdc1c3cc!important;margin-right:6px}.open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}.open-link:hover{color:#2180c9!important;text-decoration:underline!important}.field-value{color:#fff!important;font-weight:300}.add-layer-section{display:flex;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.dmp-item-list .dmp-item-container{display:flex;align-items:center;width:100%;gap:12px;min-width:0}.dmp-item-list .dmp-item-container .dmp-item-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer;flex-shrink:0}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon:hover{color:#d3d3d3}.dmp-item-list .dmp-item-container .dmp-item-left .dmp-item-title{flex:1;min-width:0;overflow:hidden}.dmp-item-list .dmp-item-container .dmp-item-left .dmp-item-title .title-text{color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-left .dmp-item-title .title-text{font-size:11px}}.dmp-item-list .dmp-item-container .dmp-item-center{display:flex;align-items:center;gap:8px;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-center .zoom-off{color:#ef4444;font-size:16px;width:16px;height:16px}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center .zoom-off{font-size:14px;width:14px;height:14px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon{flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on{color:#6ccb78;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on:hover{background:#4caf5033;border-radius:5px}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off:hover{color:#d3d3d3}.dmp-item-list .dmp-item-container .dmp-item-right{display:flex;align-items:center;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]{width:60px;height:4px;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-moz-range-thumb:hover{background:#6ccb78}::ng-deep .dmp-item-list mat-expansion-panel{box-shadow:none!important}.group-header{display:flex;color:#fff;padding:8px 14px;font-weight:600;background:#ffffff08}.group-header mat-icon{margin-left:10px;cursor:pointer;color:#bdc1c3cc;transition:color .2s ease}.group-header mat-icon:hover{color:#6ccb78}.layer-selector-body-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:1000;max-width:calc(100vw - 8em);display:flex;flex-direction:column;transition:width .3s ease,max-width .3s ease;border-top-left-radius:5px;border-top-right-radius:5px;box-shadow:0 2px 10px #0000001a;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.layer-selector-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:move;z-index:1001}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons{justify-content:space-between}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .icon-left{order:1;margin-right:auto}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .toggle-icon{order:3}.layer-selector-body-wrapper.collapsed .layer-selector-body{display:none}.layer-selector-body-wrapper.collapsed .drag-handle-selector{width:100%;min-width:100%;box-sizing:border-box;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content{width:100%}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons{width:100%;justify-content:space-between;gap:6px}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon{font-size:18px!important;flex-shrink:0}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.icon-left{cursor:default!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.toggle-icon{cursor:pointer!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.toggle-icon:hover{color:#d3d3d3!important}@media (max-width: 767px){.layer-selector-body-wrapper{right:.5em;bottom:4em;max-width:calc(100vw - 7em);left:.5em;width:calc(100vw - 7em)}.layer-selector-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}@media (min-width: 768px) and (max-width: 1024px){.layer-selector-body-wrapper{right:3.5em;bottom:.5em;max-width:calc(100vw - 2em)}.layer-selector-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}.drag-handle-selector{display:flex;justify-content:flex-end;border-radius:5px 5px 0 0;padding:0 2px;cursor:move}.drag-handle-content,.drag-handle-icons{display:flex;align-items:center;width:100%}.drag-handle-icons mat-icon{font-size:18px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-left{cursor:default!important}.toggle-icon{cursor:pointer!important}.toggle-icon:hover{color:#d3d3d3!important}::ng-deep .layer-selector-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;width:100%;max-width:100%;max-height:317px;min-height:120px;overflow-y:auto;border-radius:0 0 5px 5px!important}::ng-deep .layer-selector-body .mat-expansion-panel-header-title{gap:6px}::ng-deep .layer-selector-body::-webkit-scrollbar{width:12px}::ng-deep .layer-selector-body::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .layer-selector-body::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .layer-selector-body::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .layer-selector-body::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}@media (max-width: 767px){::ng-deep .layer-selector-body{width:100%;max-height:70vh;min-height:140px}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body{width:100%;max-width:445px;max-height:76vh;min-height:110px}}::ng-deep .layer-selector-body .search-section{display:flex;padding:12px 12px 8px;justify-content:center;align-items:center;gap:8px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section{padding:8px 8px 4px;gap:4px}}::ng-deep .layer-selector-body .search-section .search-field-wrapper{flex:1;display:flex;flex-direction:column}::ng-deep .layer-selector-body .search-section .search-label{color:#fff}::ng-deep .layer-selector-body .search-section mat-form-field{flex:1}::ng-deep .layer-selector-body .search-section mat-form-field .search-icon{color:#fff}::ng-deep .layer-selector-body .search-section mat-form-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent}::ng-deep .layer-selector-body .search-section>mat-icon{color:#fff;cursor:pointer;margin-top:0;transition:color .2s ease}::ng-deep .layer-selector-body .search-section>mat-icon:hover{color:#d3d3d3}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list{padding:4px;max-height:calc(60vh - 80px)}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body .item-list{max-height:calc(77vh - 78px)}}::ng-deep .layer-selector-body .item-list .group{overflow:hidden;box-shadow:none}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel{background:transparent!important;box-shadow:none!important;margin-bottom:4px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header{padding:0 16px;height:40px!important}}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title{display:flex;align-items:center;gap:6px;font-weight:600!important;color:#bdc1c3cc!important;transition:color .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon{color:#bdc1c3cc;font-size:16px;width:16px;height:16px;transition:all .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-on{color:#6ccb78;cursor:pointer}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-on:hover{color:#45a049}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-off{cursor:pointer;color:#bdc1c3cc}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-off:hover{color:#d3d3d3}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-content{background:#0003}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:2px 0 2px 12px}}::ng-deep .layer-selector-body .item-list .group .item-list{padding:0}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel{background:transparent!important;box-shadow:none!important;margin-bottom:2px}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel .mat-expansion-panel-content{background:#00000026}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:8px 16px 12px 32px}::ng-deep .layer-selector-body .item-list .group .item-list .layer-description{font-size:12px;color:#fffc;line-height:1.5;margin-bottom:8px;margin-left:28px}::ng-deep .layer-selector-body .item-list .group .item{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;background:transparent;transition:all .2s ease;color:#fff;cursor:move;font-size:13px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item:hover{background-color:transparent}::ng-deep .layer-selector-body .item-list .group .item .item-left{display:flex;align-items:center;gap:4px;flex:1;min-width:0}::ng-deep .layer-selector-body .item-list .group .item .item-left .drag-indicator{color:#ffffff80;font-size:16px;width:16px;height:16px;cursor:move;flex-shrink:0}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left .drag-indicator{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info{cursor:pointer;color:#dfca0e;font-size:16px;width:16px;height:16px;flex-shrink:0;transition:all .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info:hover{color:#ccb913}::ng-deep .layer-selector-body .item-list .group .item .item-left span{flex:1;font-size:13px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;color:#fff;font-weight:400}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left span{font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item .item-center{display:flex;align-items:center;gap:4px;flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-center .zoom-off{color:#ef4444;font-size:16px;width:16px;height:16px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-center .zoom-off{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-right{display:flex;align-items:center;gap:8px;flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon{flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on{color:#6ccb78;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on{font-size:16px;width:16px;height:16px}}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on:hover{color:#45a049}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off{font-size:16px;width:16px;height:16px}}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off:hover{color:#d3d3d3}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]{width:60px;height:4px;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-moz-range-thumb:hover{background:#6ccb78}::ng-deep .layer-selector-body-wrapper .result-title{color:#fff}::ng-deep .layer-selector-body-wrapper .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}::ng-deep .layer-selector-body-wrapper .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .mat-expansion-panel-header.mat-expanded:hover{background:inherit!important}::ng-deep .layer-selector-body-wrapper .show-layer-highlight{font-size:18px;height:18px;width:18px}::ng-deep .layer-selector-body-wrapper .dmp-item{cursor:move;width:100%}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel-header.mat-expanded:hover,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel-header.mat-expanded:hover{background:#ffffff26!important}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel:not([class*=mat-elevation-z]),::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-indicator:after,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-indicator:after{color:#fff!important;border-color:#fff!important}::ng-deep .layer-selector-body-wrapper mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding-left:0!important;padding-right:0!important;box-sizing:border-box}@media (max-width: 767px){::ng-deep .layer-selector-body-wrapper mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding-left:12px!important;padding-right:12px!important}}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 5px 15px #00000026;background:#4c4d51;padding:8px 12px;color:#fff;display:flex;align-items:center;gap:8px}.cdk-drag-preview mat-icon{color:#fff}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .cdk-drag{transform:translateZ(0)!important}.power-on{color:#6ccb78!important;font-size:18px;width:18px;height:18px}.power-off{cursor:pointer;color:#bdc1c3cc!important}.add-option{color:#6ccb78!important}.add-option:hover{color:#37923a!important}::ng-deep .lightbulb{color:#dfca0e;width:18px;height:18px;font-size:18px}::ng-deep .arrow-up-layer{color:#fff;width:18px;height:18px;font-size:18px}::ng-deep .mdc-text-field--outlined{overflow:hidden!important}\n"] }]
|
|
1281
|
+
MatExpansionModule, MatInputModule, MatTooltipModule, MatOptionModule, MatDialogModule, MatDialogContent, MatDialogActions], template: "<div\n #layerSelectorBody\n class=\"layer-selector-body-wrapper global-wrapper-container\"\n cdkDrag\n cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"layerSelectorDragPosition\"\n (cdkDragEnded)=\"onLayerSelectorDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n\n <div class=\"drag-handle-selector\" cdkDragHandle>\n <div class=\"drag-handle-content\">\n <div class=\"drag-handle-icons\">\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"Lag\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n layers\n </mat-icon>\n <mat-icon class=\"toggle-icon\" (click)=\"toggleLayerSelector()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n </div>\n\n <div class=\"ol-unselectable ol-control layer-selector-body\" *ngIf=\"!collapsed\">\n <div class=\"search-section\">\n <div class=\"search-field-wrapper\">\n <label class=\"search-label\">Filtrer</label>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\n <input \n matInput \n type=\"text\" \n [(ngModel)]=\"searchText\" \n (ngModelChange)=\"filterChanged()\"\n />\n </mat-form-field>\n </div>\n <mat-icon matTooltip=\"Nulstil\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" (click)=\"clearSearchText()\">\n replay</mat-icon>\n </div>\n <div\n cdkDropList\n [cdkDropListData]=\"filteredLayerGroups\"\n (cdkDropListDropped)=\"dropGroup($event, filteredLayerGroups)\"\n class=\"item-list\">\n @for (group of filteredLayerGroups; track group.id; let gIndex = $index) {\n <div class=\"group\" cdkDrag>\n <mat-expansion-panel [(expanded)]=\"group.expanded\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n @if (group.expanded) {\n <mat-icon class=\"arrow-up-layer\">arrow_upward</mat-icon>\n }\n @if (!group.expanded) {\n <mat-icon>arrow_downward</mat-icon> \n }\n <span class=\"panel-title\">{{ group.name }}</span>\n ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n @if (group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\" \n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon> \n }\n @if (!group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n </mat-panel-title>\n </mat-expansion-panel-header>\n\n <div\n cdkDropList\n [cdkDropListData]=\"group.layers\"\n (cdkDropListDropped)=\"dropLayer($event, group)\"\n class=\"item-list\">\n @for (layer of group.layers; track layer.id; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"item\" cdkDrag>\n <div class=\"item-left\">\n <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n @if(layer.infoUrl) {\n <mat-icon \n class=\"layer-info\"\n matTooltip=\"Vis ekstra informationer i ny tab\"\n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n (click)=\"openUrl(layer.infoUrl)\"\n matTooltipPosition=\"above\"\n >info</mat-icon>\n }\n <span>{{ layer.name }}</span> \n <mat-icon></mat-icon>\n </div>\n <div class=\"item-center\">\n @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">browser_not_supported\n </mat-icon>\n }\n @if (layer.hasErrors) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n\n }\n </div>\n <div class=\"item-right\">\n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\" \n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.id, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n <div *cdkDragPreview><span class=\"panel-title\">{{ layer.name }} </span></div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"layer-description\">{{ layer.description }}</div>\n @if (showLegend) {\n <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n }\n </mat-expansion-panel>\n }\n </div>\n </mat-expansion-panel>\n <div *cdkDragPreview><span class=\"panel-title\">{{ group.name }} </span></div>\n </div>\n }\n </div>\n <div class=\"group-header\">Mine Temaer\n <mat-icon (click)=\"toggleDmpSearch(true)\"\n class=\"power-on\"\n matTooltip=\"S\u00F8g\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">add\n </mat-icon>\n </div>\n @if (filteredDmpLayers.length > 0) {\n <div class=\"dmp-item-list\" cdkDropList\n [cdkDropListData]=\"filteredDmpLayers\"\n (cdkDropListDropped)=\"dropDmpLayer($event)\">\n @for (layer of filteredDmpLayers; track layer.datasetId; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"true\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"dmp-item\" cdkDrag>\n <div class=\"dmp-item-container\">\n <div class=\"dmp-item-left\">\n <mat-icon (click)=\"deleteDmpLayer(layer, $event)\" class=\"delete-icon\" \n matTooltip=\"Slet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">delete\n </mat-icon>\n <div class=\"dmp-item-title\">\n <span class=\"title-text\">{{ layer.title }}</span>\n </div>\n </div>\n \n <div class=\"dmp-item-center\">\n @if (layer.hasErrors) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n }\n \n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.datasetId, $event)\" class=\"power-on\" \n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.datasetId, $event)\" class=\"power-off\"\n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n </div>\n <div class=\"dmp-item-right\">\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.datasetId, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n </div>\n <div *cdkDragPreview><span class=\"panel-title\">{{ layer.title }} </span></div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n </mat-expansion-panel>\n }\n </div>\n }\n <div *ngIf=\"filteredBackgroundLayerGroups && filteredBackgroundLayerGroups.length > 0\" class=\"group-header\">Baggrundskort</div>\n <div\n cdkDropList\n [cdkDropListData]=\"filteredBackgroundLayerGroups\"\n (cdkDropListDropped)=\"dropGroup($event, filteredBackgroundLayerGroups)\"\n class=\"item-list\">\n @for (group of filteredBackgroundLayerGroups; track group.id; let gIndex = $index) {\n <div class=\"group\" cdkDrag>\n <mat-expansion-panel [(expanded)]=\"group.expanded\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n @if (group.expanded) {\n <mat-icon class=\"arrow-up-layer\">arrow_upward</mat-icon>\n }\n @if (!group.expanded) {\n <mat-icon>arrow_downward</mat-icon> \n }\n {{ group.name }}\n <mat-icon class=\"lightbulb\">lightbulb</mat-icon>\n ({{ group.noOfVisibleLayers }}/{{ group.layers.length }})\n @if (group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-on\" \n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon> \n }\n @if (!group.visible) {\n <mat-icon (click)=\"toggleGroup($event, group)\" class=\"power-off\"\n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n </mat-panel-title>\n </mat-expansion-panel-header>\n\n <div\n cdkDropList\n [cdkDropListData]=\"group.layers\"\n (cdkDropListDropped)=\"dropLayer($event, group)\"\n class=\"item-list\">\n @for (layer of group.layers; track layer.id; let iIndex = $index) {\n <mat-expansion-panel expanded=\"false\" [disabled]=\"!layer.description\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"item\" cdkDrag>\n <div class=\"item-left\">\n <mat-icon class=\"drag-indicator\">drag_indicator</mat-icon>\n <span>{{ layer.name }}</span>\n </div>\n <div class=\"item-center\">\n @if (layer.maxZoom < currentZoomLevel || layer.minZoom > currentZoomLevel) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">browser_not_supported\n </mat-icon>\n }\n @if (layer.hasErrors) {\n <mat-icon class=\"zoom-off\" \n matTooltip=\"Fejl\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">priority_high\n </mat-icon>\n\n }\n </div>\n <div class=\"item-right\">\n @if (layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-on\" \n matTooltip=\"Sluk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n @if (!layer.visible) {\n <mat-icon (click)=\"toggleLayer(layer.id, $event)\" class=\"power-off\"\n matTooltip=\"T\u00E6nd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">power_settings_new\n </mat-icon>\n }\n <input \n type=\"range\"\n min=\"0\"\n max=\"1\"\n step=\"0.05\"\n [(ngModel)]=\"layer.opacity\"\n (click)=\"stopDrag($event)\"\n (input)=\"updateOpacity(layer.id, layer.opacity)\"\n (mousedown)=\"stopDrag($event)\"\n (touchstart)=\"stopDrag($event)\"\n (pointerdown)=\"stopDrag($event)\"\n >\n </div>\n <div *cdkDragPreview><span class=\"panel-title\">{{ layer.name }} </span></div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"layer-description\">{{ layer.description }}</div>\n @if (showLegend) {\n <img [src]=\"legendUrl\" class=\"legend-thumbnail\"/>\n }\n </mat-expansion-panel>\n }\n </div>\n </mat-expansion-panel>\n <div *cdkDragPreview><span class=\"panel-title\">{{ group.name }} </span></div>\n </div>\n }\n </div>\n </div>\n <ng-template #dmpDialog>\n @if (dmpSearchMode) {\n <mat-dialog-content>\n <div class=\"dialog-header\">\n <div class=\"search-section\">\n <div class=\"search-field-wrapper\">\n <label class=\"search-label\">S\u00F8g</label>\n <mat-form-field appearance=\"outline\" class=\"w-full\">\n <mat-icon matPrefix class=\"search-icon\">search</mat-icon>\n <input \n matInput \n type=\"text\" \n [(ngModel)]=\"dmpSearchText\" \n (ngModelChange)=\"searchDmp()\"\n />\n </mat-form-field>\n </div>\n <mat-icon (click)=\"clearDmpSearchText()\" class=\"undo-icon\" >undo</mat-icon>\n </div>\n <mat-icon \n class=\"close-button\" \n (click)=\"toggleDmpSearch(false)\"\n matTooltip=\"Luk\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"left\">\n close\n </mat-icon>\n </div>\n </mat-dialog-content>\n }\n\n @if (dmpLayerResults.length > 0) {\n <div class=\"dmp-search-panel global-wrapper-container\">\n <div *ngFor=\"let result of dmpLayerResults\" [attr.data-value]=\"result\" class=\"search-result-option\">\n <mat-expansion-panel expanded=\"false\"> \n <mat-expansion-panel-header>\n <mat-panel-title>\n <span class=\"result-title\">{{ result.title }}</span>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div><span class=\"field-label\">Status:</span><span class=\"field-value\"> {{ result.availability }}</span></div>\n <div><span class=\"field-label\">Kategori:</span><span class=\"field-value\"> {{ result.category }}</span></div>\n <div><span class=\"field-label\">Beskrivelse:</span><span class=\"field-value\"> {{ result.description }}</span></div>\n <div><span class=\"field-label\">Tags:</span><span class=\"field-value\"> {{ result.tags?.join(', ') }}</span></div>\n <div *ngIf=\"result.metaDataUrl\">\n <span class=\"field-label\">Metadata:</span>\n <a [href]=\"result.metaDataUrl\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n Vis metadata\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div *ngIf=\"result.license && result.license.url\">\n <span class=\"field-label\">Licens:</span>\n <a [href]=\"result.license.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n {{ result.license.title }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div *ngIf=\"result.dataLiabilityAgreement && result.dataLiabilityAgreement.url\">\n <span class=\"field-label\">Dataansvarsaftale:</span>\n <a [href]=\"result.dataLiabilityAgreement.url\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"open-link\">\n {{ result.dataLiabilityAgreement.title }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n </div>\n <div class=\"add-layer-section\">\n <span class=\"field-label\">Tilf\u00F8j {{ result.serviceType }}:</span>\n <mat-icon (click)=\"addDmpLayer(result)\" class=\"add-option\"\n matTooltip=\"Tilf\u00F8j\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipPosition=\"above\">add\n </mat-icon>\n </div>\n </mat-expansion-panel>\n </div>\n </div>}\n </ng-template>\n</div>", styles: [".layer-info{cursor:pointer}.legend-thumbnail{max-width:200px;max-height:200px;width:auto;height:auto;border:2px solid #dee2e6;padding:6px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section{display:flex;align-items:center;gap:6px}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .undo-icon{color:#fff!important;cursor:pointer;flex-shrink:0}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .undo-icon:hover{color:#d3d3d3}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .search-field-wrapper{flex:1;display:flex;flex-direction:column}::ng-deep .dmp-dialog-content mat-dialog-content .search-section .search-label{color:#fff}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field{flex:1}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .search-icon{color:#fff}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#dee2e6!important;border-width:1px!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#d1d5db!important;border-width:1px!important;box-shadow:0 0 0 3px #d1d5db40!important}::ng-deep .dmp-dialog-content mat-dialog-actions{display:none}::ng-deep .dmp-dialog-content .search-result-option{padding:0!important}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel{box-shadow:none!important;margin-bottom:2px;border-radius:0!important;background:transparent!important;color:#fff}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#0003}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px!important}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:10px 12px!important}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:10px;display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{font-size:11px;gap:6px}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{color:#bdc1c3cc!important;min-width:90px;font-weight:500;flex-shrink:0;font-size:13px}@media (max-width: 767px){::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{min-width:80px}}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-value{color:#fff!important;font-weight:300;flex:1;word-break:break-word;font-size:13px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link:hover{color:#2180c9!important;text-decoration:underline!important}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link .link-icon{font-size:14px;width:14px;height:14px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section{display:flex;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .field-label{min-width:90px}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option{color:#6ccb78!important;cursor:pointer;font-size:20px;width:20px;height:20px;transition:all .2s ease}::ng-deep .dmp-dialog-content .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option:hover{color:#45a049!important;transform:scale(1.1)}.dmp-search-panel{overflow-y:scroll;max-height:300px}.dmp-search-panel::-webkit-scrollbar{width:12px}.dmp-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.dmp-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.dmp-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.dmp-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.dmp-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.dmp-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.dmp-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.dmp-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.dmp-search-panel .search-result-option{padding:0!important;margin-bottom:2px}.dmp-search-panel .search-result-option mat-expansion-panel{box-shadow:none!important;margin:0;border-radius:0!important;background:transparent!important}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content{background:#0003}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:12px 16px!important}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:10px 12px!important}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{margin-bottom:10px;display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div:last-child{margin-bottom:0}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div{font-size:11px;gap:6px}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{color:#bdc1c3cc!important;min-width:90px;font-weight:500;flex-shrink:0;font-size:13px}@media (max-width: 767px){.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-label{min-width:80px}}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .field-value{color:#fff!important;font-weight:300;flex:1;word-break:break-word;font-size:13px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link:hover{color:#2180c9!important;text-decoration:underline!important}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body>div .open-link .link-icon{font-size:14px;width:14px;height:14px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section{display:flex;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .field-label{min-width:90px}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option{color:#6ccb78!important;cursor:pointer;font-size:20px;width:20px;height:20px;transition:all .2s ease}.dmp-search-panel .search-result-option mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body .add-layer-section .add-option:hover{color:#45a049!important;transform:scale(1.1)}.dmp-search-panel .search-result-option:first-child mat-expansion-panel .mat-expansion-panel-header{border-top-left-radius:4px!important;border-top-right-radius:4px!important}.dmp-search-panel .search-result-option:last-child mat-expansion-panel .mat-expansion-panel-header.mat-expanded{border-radius:0!important}.dmp-search-panel .search-result-option:last-child mat-expansion-panel .mat-expansion-panel-content{border-bottom-left-radius:4px!important;border-bottom-right-radius:4px!important}.dialog-header{position:relative}.dialog-header .close-button{position:absolute;top:-9px;right:-14px;color:#fff;cursor:pointer;border-radius:50%;transition:all .2s ease;font-size:18px;width:24px;height:24px;display:flex;justify-content:center;align-items:center;z-index:10;background-color:#ffffff1a}.dialog-header .close-button:hover{color:#e0d5d5}.field-label{color:#bdc1c3cc!important;margin-right:6px}.open-link{color:#2e98eb!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:4px}.open-link:hover{color:#2180c9!important;text-decoration:underline!important}.field-value{color:#fff!important;font-weight:300}.add-layer-section{display:flex;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.dmp-item-list .dmp-item-container{display:flex;align-items:center;width:100%;gap:12px;min-width:0}.dmp-item-list .dmp-item-container .dmp-item-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer;flex-shrink:0}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-left .delete-icon:hover{color:#d3d3d3}.dmp-item-list .dmp-item-container .dmp-item-left .dmp-item-title{flex:1;min-width:0;overflow:hidden}.dmp-item-list .dmp-item-container .dmp-item-left .dmp-item-title .title-text{color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-left .dmp-item-title .title-text{font-size:11px}}.dmp-item-list .dmp-item-container .dmp-item-center{display:flex;align-items:center;gap:8px;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-center .zoom-off{color:#ef4444;font-size:16px;width:16px;height:16px}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center .zoom-off{font-size:14px;width:14px;height:14px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon{flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on{color:#6ccb78;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-on:hover{background:#4caf5033;border-radius:5px}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off{font-size:16px;width:16px;height:16px}}.dmp-item-list .dmp-item-container .dmp-item-center mat-icon.power-off:hover{color:#d3d3d3}.dmp-item-list .dmp-item-container .dmp-item-right{display:flex;align-items:center;flex-shrink:0}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]{width:60px;height:4px;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}.dmp-item-list .dmp-item-container .dmp-item-right input[type=range]::-moz-range-thumb:hover{background:#6ccb78}::ng-deep .dmp-item-list mat-expansion-panel{box-shadow:none!important}.group-header{display:flex;color:#fff;padding:8px 14px;font-weight:600;background:#ffffff08}.group-header mat-icon{margin-left:10px;cursor:pointer;color:#bdc1c3cc;transition:color .2s ease}.group-header mat-icon:hover{color:#6ccb78}.layer-selector-body-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:1000;max-width:calc(100vw - 8em);display:flex;flex-direction:column;transition:width .3s ease,max-width .3s ease;border-top-left-radius:5px;border-top-right-radius:5px;box-shadow:0 2px 10px #0000001a;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.layer-selector-body-wrapper.cdk-drag-dragging{opacity:.8;cursor:move;z-index:1001}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons{justify-content:space-between}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .icon-left{order:1;margin-right:auto}.layer-selector-body-wrapper:not(.collapsed) .drag-handle-icons .toggle-icon{order:3}.layer-selector-body-wrapper.collapsed .layer-selector-body{display:none}.layer-selector-body-wrapper.collapsed .drag-handle-selector{width:100%;min-width:100%;box-sizing:border-box;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content{width:100%}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons{width:100%;justify-content:space-between;gap:6px}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon{font-size:18px!important;flex-shrink:0}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.icon-left{cursor:default!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.toggle-icon{cursor:pointer!important}.layer-selector-body-wrapper.collapsed .drag-handle-selector .drag-handle-content .drag-handle-icons mat-icon.toggle-icon:hover{color:#d3d3d3!important}@media (max-width: 767px){.layer-selector-body-wrapper{right:.5em;bottom:4em;max-width:calc(100vw - 7em);left:.5em;width:calc(100vw - 7em)}.layer-selector-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}@media (min-width: 768px) and (max-width: 1024px){.layer-selector-body-wrapper{right:3.5em;bottom:.5em;max-width:calc(100vw - 2em)}.layer-selector-body-wrapper.collapsed{width:90px!important;max-width:90px!important;min-width:90px!important}}.drag-handle-selector{display:flex;justify-content:flex-end;border-radius:5px 5px 0 0;padding:0 2px;cursor:move}.drag-handle-content,.drag-handle-icons{display:flex;align-items:center;width:100%}.drag-handle-icons mat-icon{font-size:18px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.icon-left{cursor:default!important}.toggle-icon{cursor:pointer!important}.toggle-icon:hover{color:#d3d3d3!important}::ng-deep .layer-selector-body{position:relative;left:auto;right:auto;bottom:auto;z-index:auto;width:100%;max-width:100%;max-height:317px;min-height:120px;overflow-y:auto;border-radius:0 0 5px 5px!important}::ng-deep .layer-selector-body .mat-expansion-panel-header-title{gap:6px}::ng-deep .layer-selector-body::-webkit-scrollbar{width:12px}::ng-deep .layer-selector-body::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .layer-selector-body::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .layer-selector-body::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .layer-selector-body::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .layer-selector-body::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}@media (max-width: 767px){::ng-deep .layer-selector-body{width:100%;max-height:70vh;min-height:140px}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body{width:100%;max-width:445px;max-height:76vh;min-height:110px}}::ng-deep .layer-selector-body .search-section{display:flex;padding:12px 12px 8px;justify-content:center;align-items:center;gap:8px}@media (max-width: 767px){::ng-deep .layer-selector-body .search-section{padding:8px 8px 4px;gap:4px}}::ng-deep .layer-selector-body .search-section .search-field-wrapper{flex:1;display:flex;flex-direction:column}::ng-deep .layer-selector-body .search-section .search-label{color:#fff}::ng-deep .layer-selector-body .search-section mat-form-field{flex:1}::ng-deep .layer-selector-body .search-section mat-form-field .search-icon{color:#fff}::ng-deep .layer-selector-body .search-section mat-form-field ::ng-deep .mat-mdc-form-field-focus-overlay{background-color:transparent}::ng-deep .layer-selector-body .search-section>mat-icon{color:#fff;cursor:pointer;margin-top:0;transition:color .2s ease}::ng-deep .layer-selector-body .search-section>mat-icon:hover{color:#d3d3d3}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list{padding:4px;max-height:calc(60vh - 80px)}}@media (min-width: 768px) and (max-width: 1024px){::ng-deep .layer-selector-body .item-list{max-height:calc(77vh - 78px)}}::ng-deep .layer-selector-body .item-list .group{overflow:hidden;box-shadow:none}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel{background:transparent!important;box-shadow:none!important;margin-bottom:4px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header{padding:0 16px;height:40px!important}}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title{display:flex;align-items:center;gap:6px;font-weight:600!important;color:#bdc1c3cc!important;transition:color .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon{color:#bdc1c3cc;font-size:16px;width:16px;height:16px;transition:all .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-on{color:#6ccb78;cursor:pointer}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-on:hover{color:#45a049}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-off{cursor:pointer;color:#bdc1c3cc}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-header .mat-panel-title mat-icon.power-off:hover{color:#d3d3d3}::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-content{background:#0003}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group>mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:2px 0 2px 12px}}::ng-deep .layer-selector-body .item-list .group .item-list{padding:0}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel{background:transparent!important;box-shadow:none!important;margin-bottom:2px}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel .mat-expansion-panel-content{background:#00000026}::ng-deep .layer-selector-body .item-list .group .item-list mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding:8px 16px 12px 32px}::ng-deep .layer-selector-body .item-list .group .item-list .layer-description{font-size:12px;color:#fffc;line-height:1.5;margin-bottom:8px;margin-left:28px}::ng-deep .layer-selector-body .item-list .group .item{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;background:transparent;transition:all .2s ease;color:#fff;cursor:move;font-size:13px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item{gap:4px;font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item:hover{background-color:transparent}::ng-deep .layer-selector-body .item-list .group .item .item-left{display:flex;align-items:center;gap:4px;flex:1;min-width:0}::ng-deep .layer-selector-body .item-list .group .item .item-left .drag-indicator{color:#ffffff80;font-size:16px;width:16px;height:16px;cursor:move;flex-shrink:0}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left .drag-indicator{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info{cursor:pointer;color:#dfca0e;font-size:16px;width:16px;height:16px;flex-shrink:0;transition:all .2s ease}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-left .layer-info:hover{color:#ccb913}::ng-deep .layer-selector-body .item-list .group .item .item-left span{flex:1;font-size:13px;word-wrap:break-word;word-break:break-word;overflow-wrap:break-word;white-space:normal;color:#fff;font-weight:400}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-left span{font-size:11px}}::ng-deep .layer-selector-body .item-list .group .item .item-center{display:flex;align-items:center;gap:4px;flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-center .zoom-off{color:#ef4444;font-size:16px;width:16px;height:16px}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-center .zoom-off{font-size:14px;width:14px;height:14px}}::ng-deep .layer-selector-body .item-list .group .item .item-right{display:flex;align-items:center;gap:8px;flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon{flex-shrink:0}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on{color:#6ccb78;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on{font-size:16px;width:16px;height:16px}}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-on:hover{color:#45a049}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off{color:#bdc1c3cc;font-size:18px;width:18px;height:18px;cursor:pointer}@media (max-width: 767px){::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off{font-size:16px;width:16px;height:16px}}::ng-deep .layer-selector-body .item-list .group .item .item-right mat-icon.power-off:hover{color:#d3d3d3}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]{width:60px;height:4px;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}::ng-deep .layer-selector-body .item-list .group .item .item-right input[type=range]::-moz-range-thumb:hover{background:#6ccb78}::ng-deep .layer-selector-body-wrapper .result-title{color:#fff}::ng-deep .layer-selector-body-wrapper .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}::ng-deep .layer-selector-body-wrapper .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .mat-expansion-panel-header.mat-expanded:hover{background:inherit!important}::ng-deep .layer-selector-body-wrapper .show-layer-highlight{font-size:18px;height:18px;width:18px}::ng-deep .layer-selector-body-wrapper .dmp-item{cursor:move;width:100%}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel-header.mat-expanded:hover,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel-header.mat-expanded:focus,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel-header.mat-expanded:hover{background:#ffffff26!important}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-panel:not([class*=mat-elevation-z]),::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none!important}::ng-deep .layer-selector-body-wrapper .dmp-search-panel .mat-expansion-indicator:after,::ng-deep .layer-selector-body-wrapper .dmp-dialog-content .mat-expansion-indicator:after{color:#fff!important;border-color:#fff!important}::ng-deep .layer-selector-body-wrapper mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding-left:0!important;padding-right:0!important;box-sizing:border-box}@media (max-width: 767px){::ng-deep .layer-selector-body-wrapper mat-expansion-panel .mat-expansion-panel-content .mat-expansion-panel-body{padding-left:12px!important;padding-right:12px!important}}.cdk-drag-preview{box-sizing:border-box;border-radius:5px;box-shadow:0 5px 15px #00000026;background:#4c4d51;padding:8px 12px;color:#fff;display:flex;align-items:center;gap:8px}.cdk-drag-preview mat-icon{color:#fff}.cdk-drag-animating,.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .cdk-drag{transform:translateZ(0)!important}.power-on{color:#6ccb78!important;font-size:18px;width:18px;height:18px}.power-off{cursor:pointer;color:#bdc1c3cc!important}.add-option{color:#6ccb78!important}.add-option:hover{color:#37923a!important}::ng-deep .lightbulb{color:#dfca0e;width:18px;height:18px;font-size:18px}::ng-deep .arrow-up-layer{color:#fff;width:18px;height:18px;font-size:18px}::ng-deep .mdc-text-field--outlined{overflow:hidden!important}\n"] }]
|
|
1280
1282
|
}], propDecorators: { contentBody: [{
|
|
1281
1283
|
type: ViewChild,
|
|
1282
1284
|
args: ['layerSelectorBody', { static: false }]
|
|
@@ -3998,13 +4000,14 @@ class ToolboxComponent {
|
|
|
3998
4000
|
startChangeType() {
|
|
3999
4001
|
this._clearAllInteractions();
|
|
4000
4002
|
this.activeMode = 'change-type';
|
|
4003
|
+
// Make sure the selected draw item is set, if at all possible.
|
|
4004
|
+
this.selectedDrawItem = this.selectedDrawItem ?? this.drawItems?.find(d => d.geomType === 'Polygon');
|
|
4001
4005
|
if (!this.selectedDrawItem) {
|
|
4002
4006
|
return;
|
|
4003
4007
|
}
|
|
4004
4008
|
const changeTypeSelect = new Select$1({
|
|
4005
|
-
// layers: [this._drawLayer!],
|
|
4006
4009
|
layers: [this._drawLayerService.layer],
|
|
4007
|
-
filter: f => !this._featureHelper.isLocked(f) && this._featureHelper.typeId(f) !== this.selectedDrawItem?.typeId // can't changed locked and cant change to same type
|
|
4010
|
+
filter: f => !this._featureHelper.isLocked(f) && f.getGeometry()?.getType() === this.selectedDrawItem?.geomType && this._featureHelper.typeId(f) !== this.selectedDrawItem?.typeId // can't changed locked and cant change to same type
|
|
4008
4011
|
});
|
|
4009
4012
|
this._interactionHelper.setAsTemp(changeTypeSelect);
|
|
4010
4013
|
changeTypeSelect.on('select', evt => {
|
|
@@ -4343,9 +4346,11 @@ class ActiveObjectsComponent {
|
|
|
4343
4346
|
_centerPointService = inject(CenterPointService);
|
|
4344
4347
|
_conflictService = inject(ConflictAnalysisSearchProvider);
|
|
4345
4348
|
_undoRedo = inject(UndoRedoService);
|
|
4349
|
+
_dialogService = inject(ConfirmDialogService);
|
|
4346
4350
|
isZoomedToAll = false;
|
|
4347
4351
|
features$ = this._drawLayerService.features$;
|
|
4348
4352
|
collapsed = true;
|
|
4353
|
+
wktIconBase64 = IconsConstants.wktIconBase64;
|
|
4349
4354
|
settings;
|
|
4350
4355
|
sessionDone = new EventEmitter();
|
|
4351
4356
|
profile;
|
|
@@ -4508,6 +4513,11 @@ class ActiveObjectsComponent {
|
|
|
4508
4513
|
console.error('Error saving position to localStorage:', error);
|
|
4509
4514
|
}
|
|
4510
4515
|
}
|
|
4516
|
+
showItemWKT(feature) {
|
|
4517
|
+
const wktFormatter = new WKT();
|
|
4518
|
+
const wktString = wktFormatter.writeGeometry(feature.getGeometry());
|
|
4519
|
+
this._dialogService.open({ primaryText: 'Ok', message: wktString, title: 'WKT for objekt' }).subscribe();
|
|
4520
|
+
}
|
|
4511
4521
|
_loadPosition(collapsed) {
|
|
4512
4522
|
try {
|
|
4513
4523
|
// Default height and width when collapsed
|
|
@@ -4548,11 +4558,11 @@ class ActiveObjectsComponent {
|
|
|
4548
4558
|
}
|
|
4549
4559
|
}
|
|
4550
4560
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ActiveObjectsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4551
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ActiveObjectsComponent, isStandalone: true, selector: "activeObjects", inputs: { settings: "settings", profile: "profile" }, outputs: { sessionDone: "sessionDone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"active-objects-wrapper global-wrapper-container\" cdkDrag cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"onDragEnded($event)\" [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle-active-objects\" cdkDragHandle>\n <mat-icon class=\"active-object-icon\" (click)=\"zoomToAll()\" matTooltip=\"Aktive objekter\"\n [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n format_list_bulleted_add\n </mat-icon>\n\n <div class=\"right-icons\">\n <mat-icon class=\"toggle-icon\" (click)=\"togglePanel()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n\n <div class=\"active-objects-container\">\n @if(!collapsed) {\n <input type=\"range\" min=\"0\" max=\"1\" step=\"0.05\" [(ngModel)]=\"opacity\" (input)=\"updateOpacity()\"\n (mousedown)=\"stopDrag($event)\" (touchstart)=\"stopDrag($event)\" (pointerdown)=\"stopDrag($event)\">\n <div class=\"header-icons\">\n <div class=\"header-left-controls\">\n <mat-icon class=\"zoom-icon\" [class.zoom-active]=\"isZoomedToAll\" (click)=\"zoomToAll()\"\n matTooltip=\"Zoom til alle\" matTooltipPosition=\"above\">\n fit_screen\n </mat-icon>\n <mat-icon class=\"reset-icon\" (click)=\"reset()\" matTooltip=\"Nulstilles\" matTooltipPosition=\"above\">\n replay\n </mat-icon>\n </div>\n\n <div class=\"header-right-controls\">\n @if(!centerPointOk) {\n <mat-icon class=\"warning-icon\" matTooltip=\"Der er ikke noget centerpunkt og det skal der v\u00E6re\"\n [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n warning\n </mat-icon>\n } @else if (allFeaturesOk) { \n @if (endSessionButtonLabel) {\n <button (click)=\"endSession()\" matTooltip=\"Afslut\" [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n {{endSessionButtonLabel}}\n </button>\n } @else {\n <mat-icon class=\"end-session-icon\" (click)=\"endSession()\" matTooltip=\"Afslut\"\n [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n done_all\n </mat-icon>\n }\n }\n </div>\n </div>\n }\n\n @if(!collapsed) {\n <div class=\"active-objects-content\">\n <div class=\"item-list\">\n @for(item of activeFeatures; track item.id) {\n <div class=\"item\" [class.listhighlight]=\"listHighlightedIds.has(item.id)\" [attr.data-id]=\"item.id\">\n <div class=\"item-text\">\n <span (click)=\"highlight(item.id)\" class=\"item-id\">{{item.display}} {{item.area}}</span>\n @if(item.containedMissingIn && item.containedMissingIn.length > 0) {\n <div class=\"item-warning\">\n <mat-icon>error</mat-icon>\n <span>Udenfor {{item.containedMissingIn.join(', ')}}</span>\n </div>\n }\n </div>\n @if(!item.locked) {\n <mat-icon (click)=\"delete(item.id)\" matTooltip=\"Slet\" [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n delete\n </mat-icon>\n }\n </div>\n }\n </div>\n\n </div>\n }\n </div>\n</div>", styles: [".active-objects-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:2;box-shadow:0 2px 10px #0000001a;width:350px;transition:width .3s ease,max-width .3s ease;border-radius:5px!important}.active-objects-wrapper.collapsed .drag-handle-active-objects .active-object-icon{cursor:default!important}.active-objects-wrapper.collapsed .drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important}.active-objects-wrapper :not(.collapsed){max-width:350px}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.listhighlight{color:#0af!important;font-weight:700}.item{display:flex;justify-content:space-between;align-items:center;padding:0 14px;border-radius:5px;background:transparent!important;transition:all .2s ease;color:#fff;min-height:40px;cursor:default}.item .item-text{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;gap:4px}.item .item-text .item-warning{display:inline-flex;align-items:center;gap:6px;font-size:11px;width:fit-content;max-width:100%;color:#dfca0e;margin-top:2px;margin-bottom:2px}.item .item-text .item-warning mat-icon{font-size:14px;width:14px;height:14px;color:#dfca0e;margin:0;cursor:default;flex-shrink:0}.item .item-text .item-warning mat-icon:hover{color:#ccb913}.item .item-text .item-warning span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.item .item-id{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item .item-area{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item mat-icon{cursor:pointer;color:#bdc1c3cc;font-size:18px;width:18px;height:18px;flex-shrink:0;margin-left:8px;transition:color .2s ease,background .2s ease}.item mat-icon:hover{color:#d3d3d3}.highlight-active{color:#6ccb78!important;transition:all .2s ease}.drag-handle-active-objects .active-object-icon{cursor:default!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons{display:flex;align-items:center;gap:7px}.drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons .toggle-icon:hover{color:#d3d3d3}.active-objects-container{display:flex;flex-direction:column;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.active-objects-container .panel-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;cursor:default;background:color-mix(in srgb,#000 70%,transparent);border-bottom:1px solid rgba(255,255,255,.1)}.active-objects-container .collapsed-title{color:#fff;font-weight:600;font-size:12px;padding:8px 4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.active-objects-container .collapsed-title:hover{color:#1976d2}.active-objects-container input[type=range]{width:95%;height:4px;margin:8px auto;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}.active-objects-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}.active-objects-container input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}.active-objects-container input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}.active-objects-container input[type=range]::-moz-range-thumb:hover{background:#6ccb78}.header-icons{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:5px 10px!important}.header-icons .header-left-controls,.header-icons .header-right-controls{display:flex;align-items:center;gap:8px}.header-icons .header-right-controls button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 12px;height:26px;min-width:56px;max-width:150px;background:linear-gradient(135deg,#6ccb781f,#6ccb780f);border:1px solid rgba(108,203,120,.55);border-radius:5px;color:#6ccb78;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;outline:none;box-shadow:0 0 #6ccb7800,inset 0 1px #ffffff0f;transition:background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,transform .12s ease}.header-icons .header-right-controls button mat-icon{font-size:14px;width:14px;height:14px;flex-shrink:0;transition:transform .3s ease;margin:0}.header-icons .header-right-controls button:hover{background:linear-gradient(135deg,#6ccb7838,#6ccb781a);border-color:#6ccb78e6;color:#88d994}.header-icons .header-right-controls button:hover mat-icon{transform:scale(1.15)}.header-icons .header-right-controls button:active{background:#6ccb782e;border-color:#6ccb78;color:#fff;box-shadow:0 0 6px #6ccb7833,inset 0 2px 4px #0000004d;transform:translateY(0)}.header-icons .header-right-controls button:focus-visible{outline:2px solid rgba(108,203,120,.6);outline-offset:2px}.header-icons .header-right-controls .end-session-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:5px;color:#6ccb78;cursor:pointer;transition:color .2s ease,background .2s ease,box-shadow .2s ease,transform .12s ease}.header-icons .header-right-controls .end-session-icon:hover{color:#88d994;background:#6ccb781f;box-shadow:0 0 10px #6ccb7833;transform:scale(1.1)}.header-icons .header-right-controls .end-session-icon:active{color:#fff;background:#6ccb7833;transform:scale(.95)}.header-icons .zoom-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .zoom-icon:hover{color:#6ccb78}.header-icons .zoom-icon.zoom-active{color:#6ccb78!important}.header-icons .reset-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .reset-icon:hover{color:#6ccb78}.header-icons .warning-icon{color:#6ccb78;font-size:18px;cursor:help}.header-icons .end-session-icon{cursor:pointer;color:#6ccb78;font-size:18px;transition:all .2s ease}.header-icons .end-session-icon:hover{color:#45a049}.active-objects-content{display:block;width:100%;max-height:278px;overflow:auto;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.active-objects-content::-webkit-scrollbar{width:12px}.active-objects-content::-webkit-scrollbar-track{background:#757474;border-radius:8px}.active-objects-content::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.active-objects-content::-webkit-scrollbar-thumb:hover{background:#0f1012}.active-objects-content::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.active-objects-content::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.active-objects-content::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.active-objects-content .zoom-icon{color:#fff;font-size:18px;transition:all .2s ease}.active-objects-content .zoom-icon:hover{color:#6ccb78}.active-objects-content .zoom-icon.zoom-active{color:#6ccb78!important}mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%}mat-expansion-panel:last-child{border-bottom:none}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-content{display:flex;justify-content:space-between;align-items:center;color:#fff}mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0}.item-list{display:flex;flex-direction:column}@media (max-width: 768px){.active-objects-wrapper{right:.5em;top:8em;max-width:280px;width:280px}.item{padding:6px 10px}}@media (max-width: 480px){.active-objects-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.item-list{max-height:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: 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"] }] });
|
|
4561
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ActiveObjectsComponent, isStandalone: true, selector: "activeObjects", inputs: { settings: "settings", profile: "profile" }, outputs: { sessionDone: "sessionDone" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"active-objects-wrapper global-wrapper-container\" cdkDrag cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"onDragEnded($event)\" [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle-active-objects\" cdkDragHandle>\n <mat-icon class=\"active-object-icon\" (click)=\"zoomToAll()\" matTooltip=\"Aktive objekter\"\n [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n format_list_bulleted_add\n </mat-icon>\n\n <div class=\"right-icons\">\n <mat-icon class=\"toggle-icon\" (click)=\"togglePanel()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n\n <div class=\"active-objects-container\">\n @if(!collapsed) {\n <input type=\"range\" min=\"0\" max=\"1\" step=\"0.05\" [(ngModel)]=\"opacity\" (input)=\"updateOpacity()\"\n (mousedown)=\"stopDrag($event)\" (touchstart)=\"stopDrag($event)\" (pointerdown)=\"stopDrag($event)\">\n <div class=\"header-icons\">\n <div class=\"header-left-controls\">\n <mat-icon class=\"zoom-icon\" [class.zoom-active]=\"isZoomedToAll\" (click)=\"zoomToAll()\"\n matTooltip=\"Zoom til alle\" matTooltipPosition=\"above\">\n fit_screen\n </mat-icon>\n <mat-icon class=\"reset-icon\" (click)=\"reset()\" matTooltip=\"Nulstil\" matTooltipPosition=\"above\">\n replay\n </mat-icon>\n </div>\n\n <div class=\"header-right-controls\">\n @if(!centerPointOk) {\n <mat-icon class=\"warning-icon\" matTooltip=\"Der er ikke noget centerpunkt og det skal der v\u00E6re\"\n [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n warning\n </mat-icon>\n } @else if (allFeaturesOk) { \n @if (endSessionButtonLabel) {\n <button (click)=\"endSession()\" matTooltip=\"Afslut\" [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n {{endSessionButtonLabel}}\n </button>\n } @else {\n <mat-icon class=\"end-session-icon\" (click)=\"endSession()\" matTooltip=\"Afslut\"\n [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n done_all\n </mat-icon>\n }\n }\n </div>\n </div>\n }\n\n @if(!collapsed) {\n <div class=\"active-objects-content\">\n <div class=\"item-list\">\n @for(item of activeFeatures; track item.id) {\n <div class=\"item\" [class.listhighlight]=\"listHighlightedIds.has(item.id)\" [attr.data-id]=\"item.id\">\n <div class=\"item-text\">\n <span (click)=\"highlight(item.id)\" class=\"item-id\">{{item.display}} {{item.area}}</span>\n @if(item.containedMissingIn && item.containedMissingIn.length > 0) {\n <div class=\"item-warning\">\n <mat-icon>error</mat-icon>\n <span>Udenfor {{item.containedMissingIn.join(', ')}}</span>\n </div>\n }\n </div>\n <img \n [src]=\"wktIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"showItemWKT(item.feature)\" \n matTooltip=\"Vis WKT\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Vis WKT\">\n \n\n @if(!item.locked) {\n <mat-icon (click)=\"delete(item.id)\" matTooltip=\"Slet\" [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n delete\n </mat-icon>\n }\n </div>\n }\n </div>\n\n </div>\n }\n </div>\n</div>", styles: [".active-objects-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:2;box-shadow:0 2px 10px #0000001a;width:350px;transition:width .3s ease,max-width .3s ease;border-radius:5px!important}.active-objects-wrapper.collapsed .drag-handle-active-objects .active-object-icon{cursor:default!important}.active-objects-wrapper.collapsed .drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important}.active-objects-wrapper :not(.collapsed){max-width:350px}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.listhighlight{color:#0af!important;font-weight:700}.item{display:flex;justify-content:space-between;align-items:center;padding:0 14px;border-radius:5px;background:transparent!important;transition:all .2s ease;color:#fff;min-height:40px;cursor:default}.item .item-text{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;gap:4px}.item .item-text .item-warning{display:inline-flex;align-items:center;gap:6px;font-size:11px;width:fit-content;max-width:100%;color:#dfca0e;margin-top:2px;margin-bottom:2px}.item .item-text .item-warning mat-icon{font-size:14px;width:14px;height:14px;color:#dfca0e;margin:0;cursor:default;flex-shrink:0}.item .item-text .item-warning mat-icon:hover{color:#ccb913}.item .item-text .item-warning span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.item .item-id{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item .item-area{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item mat-icon{cursor:pointer;color:#bdc1c3cc;font-size:18px;width:18px;height:18px;flex-shrink:0;margin-left:8px;transition:color .2s ease,background .2s ease}.item mat-icon:hover{color:#d3d3d3}.highlight-active{color:#6ccb78!important;transition:all .2s ease}.drag-handle-active-objects .active-object-icon{cursor:default!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons{display:flex;align-items:center;gap:7px}.drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons .toggle-icon:hover{color:#d3d3d3}.active-objects-container{display:flex;flex-direction:column;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.active-objects-container .panel-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;cursor:default;background:color-mix(in srgb,#000 70%,transparent);border-bottom:1px solid rgba(255,255,255,.1)}.active-objects-container .collapsed-title{color:#fff;font-weight:600;font-size:12px;padding:8px 4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.active-objects-container .collapsed-title:hover{color:#1976d2}.active-objects-container input[type=range]{width:95%;height:4px;margin:8px auto;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}.active-objects-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}.active-objects-container input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}.active-objects-container input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}.active-objects-container input[type=range]::-moz-range-thumb:hover{background:#6ccb78}.header-icons{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:5px 10px!important}.header-icons .header-left-controls,.header-icons .header-right-controls{display:flex;align-items:center;gap:8px}.header-icons .header-right-controls button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 12px;height:26px;min-width:56px;max-width:150px;background:linear-gradient(135deg,#6ccb781f,#6ccb780f);border:1px solid rgba(108,203,120,.55);border-radius:5px;color:#6ccb78;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;outline:none;box-shadow:0 0 #6ccb7800,inset 0 1px #ffffff0f;transition:background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,transform .12s ease}.header-icons .header-right-controls button mat-icon{font-size:14px;width:14px;height:14px;flex-shrink:0;transition:transform .3s ease;margin:0}.header-icons .header-right-controls button:hover{background:linear-gradient(135deg,#6ccb7838,#6ccb781a);border-color:#6ccb78e6;color:#88d994}.header-icons .header-right-controls button:hover mat-icon{transform:scale(1.15)}.header-icons .header-right-controls button:active{background:#6ccb782e;border-color:#6ccb78;color:#fff;box-shadow:0 0 6px #6ccb7833,inset 0 2px 4px #0000004d;transform:translateY(0)}.header-icons .header-right-controls button:focus-visible{outline:2px solid rgba(108,203,120,.6);outline-offset:2px}.header-icons .header-right-controls .end-session-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:5px;color:#6ccb78;cursor:pointer;transition:color .2s ease,background .2s ease,box-shadow .2s ease,transform .12s ease}.header-icons .header-right-controls .end-session-icon:hover{color:#88d994;background:#6ccb781f;box-shadow:0 0 10px #6ccb7833;transform:scale(1.1)}.header-icons .header-right-controls .end-session-icon:active{color:#fff;background:#6ccb7833;transform:scale(.95)}.header-icons .zoom-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .zoom-icon:hover{color:#6ccb78}.header-icons .zoom-icon.zoom-active{color:#6ccb78!important}.header-icons .reset-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .reset-icon:hover{color:#6ccb78}.header-icons .warning-icon{color:#6ccb78;font-size:18px;cursor:help}.header-icons .end-session-icon{cursor:pointer;color:#6ccb78;font-size:18px;transition:all .2s ease}.header-icons .end-session-icon:hover{color:#45a049}.active-objects-content{display:block;width:100%;max-height:278px;overflow:auto;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.active-objects-content::-webkit-scrollbar{width:12px}.active-objects-content::-webkit-scrollbar-track{background:#757474;border-radius:8px}.active-objects-content::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.active-objects-content::-webkit-scrollbar-thumb:hover{background:#0f1012}.active-objects-content::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.active-objects-content::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.active-objects-content::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.active-objects-content .zoom-icon{color:#fff;font-size:18px;transition:all .2s ease}.active-objects-content .zoom-icon:hover{color:#6ccb78}.active-objects-content .zoom-icon.zoom-active{color:#6ccb78!important}mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%}mat-expansion-panel:last-child{border-bottom:none}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-content{display:flex;justify-content:space-between;align-items:center;color:#fff}mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0}.item-list{display:flex;flex-direction:column}@media (max-width: 768px){.active-objects-wrapper{right:.5em;top:8em;max-width:280px;width:280px}.item{padding:6px 10px}}@media (max-width: 480px){.active-objects-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.item-list{max-height:200px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: 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"] }] });
|
|
4552
4562
|
}
|
|
4553
4563
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ActiveObjectsComponent, decorators: [{
|
|
4554
4564
|
type: Component,
|
|
4555
|
-
args: [{ selector: 'activeObjects', imports: [CommonModule, FormsModule, MatExpansionModule, MatIconModule, DragDropModule, MatTooltipModule], template: "<div class=\"active-objects-wrapper global-wrapper-container\" cdkDrag cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"onDragEnded($event)\" [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle-active-objects\" cdkDragHandle>\n <mat-icon class=\"active-object-icon\" (click)=\"zoomToAll()\" matTooltip=\"Aktive objekter\"\n [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n format_list_bulleted_add\n </mat-icon>\n\n <div class=\"right-icons\">\n <mat-icon class=\"toggle-icon\" (click)=\"togglePanel()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n\n <div class=\"active-objects-container\">\n @if(!collapsed) {\n <input type=\"range\" min=\"0\" max=\"1\" step=\"0.05\" [(ngModel)]=\"opacity\" (input)=\"updateOpacity()\"\n (mousedown)=\"stopDrag($event)\" (touchstart)=\"stopDrag($event)\" (pointerdown)=\"stopDrag($event)\">\n <div class=\"header-icons\">\n <div class=\"header-left-controls\">\n <mat-icon class=\"zoom-icon\" [class.zoom-active]=\"isZoomedToAll\" (click)=\"zoomToAll()\"\n matTooltip=\"Zoom til alle\" matTooltipPosition=\"above\">\n fit_screen\n </mat-icon>\n <mat-icon class=\"reset-icon\" (click)=\"reset()\" matTooltip=\"Nulstilles\" matTooltipPosition=\"above\">\n replay\n </mat-icon>\n </div>\n\n <div class=\"header-right-controls\">\n @if(!centerPointOk) {\n <mat-icon class=\"warning-icon\" matTooltip=\"Der er ikke noget centerpunkt og det skal der v\u00E6re\"\n [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n warning\n </mat-icon>\n } @else if (allFeaturesOk) { \n @if (endSessionButtonLabel) {\n <button (click)=\"endSession()\" matTooltip=\"Afslut\" [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n {{endSessionButtonLabel}}\n </button>\n } @else {\n <mat-icon class=\"end-session-icon\" (click)=\"endSession()\" matTooltip=\"Afslut\"\n [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n done_all\n </mat-icon>\n }\n }\n </div>\n </div>\n }\n\n @if(!collapsed) {\n <div class=\"active-objects-content\">\n <div class=\"item-list\">\n @for(item of activeFeatures; track item.id) {\n <div class=\"item\" [class.listhighlight]=\"listHighlightedIds.has(item.id)\" [attr.data-id]=\"item.id\">\n <div class=\"item-text\">\n <span (click)=\"highlight(item.id)\" class=\"item-id\">{{item.display}} {{item.area}}</span>\n @if(item.containedMissingIn && item.containedMissingIn.length > 0) {\n <div class=\"item-warning\">\n <mat-icon>error</mat-icon>\n <span>Udenfor {{item.containedMissingIn.join(', ')}}</span>\n </div>\n }\n </div>\n @if(!item.locked) {\n <mat-icon (click)=\"delete(item.id)\" matTooltip=\"Slet\" [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n delete\n </mat-icon>\n }\n </div>\n }\n </div>\n\n </div>\n }\n </div>\n</div>", styles: [".active-objects-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:2;box-shadow:0 2px 10px #0000001a;width:350px;transition:width .3s ease,max-width .3s ease;border-radius:5px!important}.active-objects-wrapper.collapsed .drag-handle-active-objects .active-object-icon{cursor:default!important}.active-objects-wrapper.collapsed .drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important}.active-objects-wrapper :not(.collapsed){max-width:350px}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.listhighlight{color:#0af!important;font-weight:700}.item{display:flex;justify-content:space-between;align-items:center;padding:0 14px;border-radius:5px;background:transparent!important;transition:all .2s ease;color:#fff;min-height:40px;cursor:default}.item .item-text{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;gap:4px}.item .item-text .item-warning{display:inline-flex;align-items:center;gap:6px;font-size:11px;width:fit-content;max-width:100%;color:#dfca0e;margin-top:2px;margin-bottom:2px}.item .item-text .item-warning mat-icon{font-size:14px;width:14px;height:14px;color:#dfca0e;margin:0;cursor:default;flex-shrink:0}.item .item-text .item-warning mat-icon:hover{color:#ccb913}.item .item-text .item-warning span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.item .item-id{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item .item-area{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item mat-icon{cursor:pointer;color:#bdc1c3cc;font-size:18px;width:18px;height:18px;flex-shrink:0;margin-left:8px;transition:color .2s ease,background .2s ease}.item mat-icon:hover{color:#d3d3d3}.highlight-active{color:#6ccb78!important;transition:all .2s ease}.drag-handle-active-objects .active-object-icon{cursor:default!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons{display:flex;align-items:center;gap:7px}.drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons .toggle-icon:hover{color:#d3d3d3}.active-objects-container{display:flex;flex-direction:column;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.active-objects-container .panel-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;cursor:default;background:color-mix(in srgb,#000 70%,transparent);border-bottom:1px solid rgba(255,255,255,.1)}.active-objects-container .collapsed-title{color:#fff;font-weight:600;font-size:12px;padding:8px 4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.active-objects-container .collapsed-title:hover{color:#1976d2}.active-objects-container input[type=range]{width:95%;height:4px;margin:8px auto;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}.active-objects-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}.active-objects-container input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}.active-objects-container input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}.active-objects-container input[type=range]::-moz-range-thumb:hover{background:#6ccb78}.header-icons{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:5px 10px!important}.header-icons .header-left-controls,.header-icons .header-right-controls{display:flex;align-items:center;gap:8px}.header-icons .header-right-controls button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 12px;height:26px;min-width:56px;max-width:150px;background:linear-gradient(135deg,#6ccb781f,#6ccb780f);border:1px solid rgba(108,203,120,.55);border-radius:5px;color:#6ccb78;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;outline:none;box-shadow:0 0 #6ccb7800,inset 0 1px #ffffff0f;transition:background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,transform .12s ease}.header-icons .header-right-controls button mat-icon{font-size:14px;width:14px;height:14px;flex-shrink:0;transition:transform .3s ease;margin:0}.header-icons .header-right-controls button:hover{background:linear-gradient(135deg,#6ccb7838,#6ccb781a);border-color:#6ccb78e6;color:#88d994}.header-icons .header-right-controls button:hover mat-icon{transform:scale(1.15)}.header-icons .header-right-controls button:active{background:#6ccb782e;border-color:#6ccb78;color:#fff;box-shadow:0 0 6px #6ccb7833,inset 0 2px 4px #0000004d;transform:translateY(0)}.header-icons .header-right-controls button:focus-visible{outline:2px solid rgba(108,203,120,.6);outline-offset:2px}.header-icons .header-right-controls .end-session-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:5px;color:#6ccb78;cursor:pointer;transition:color .2s ease,background .2s ease,box-shadow .2s ease,transform .12s ease}.header-icons .header-right-controls .end-session-icon:hover{color:#88d994;background:#6ccb781f;box-shadow:0 0 10px #6ccb7833;transform:scale(1.1)}.header-icons .header-right-controls .end-session-icon:active{color:#fff;background:#6ccb7833;transform:scale(.95)}.header-icons .zoom-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .zoom-icon:hover{color:#6ccb78}.header-icons .zoom-icon.zoom-active{color:#6ccb78!important}.header-icons .reset-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .reset-icon:hover{color:#6ccb78}.header-icons .warning-icon{color:#6ccb78;font-size:18px;cursor:help}.header-icons .end-session-icon{cursor:pointer;color:#6ccb78;font-size:18px;transition:all .2s ease}.header-icons .end-session-icon:hover{color:#45a049}.active-objects-content{display:block;width:100%;max-height:278px;overflow:auto;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.active-objects-content::-webkit-scrollbar{width:12px}.active-objects-content::-webkit-scrollbar-track{background:#757474;border-radius:8px}.active-objects-content::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.active-objects-content::-webkit-scrollbar-thumb:hover{background:#0f1012}.active-objects-content::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.active-objects-content::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.active-objects-content::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.active-objects-content .zoom-icon{color:#fff;font-size:18px;transition:all .2s ease}.active-objects-content .zoom-icon:hover{color:#6ccb78}.active-objects-content .zoom-icon.zoom-active{color:#6ccb78!important}mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%}mat-expansion-panel:last-child{border-bottom:none}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-content{display:flex;justify-content:space-between;align-items:center;color:#fff}mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0}.item-list{display:flex;flex-direction:column}@media (max-width: 768px){.active-objects-wrapper{right:.5em;top:8em;max-width:280px;width:280px}.item{padding:6px 10px}}@media (max-width: 480px){.active-objects-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.item-list{max-height:200px}}\n"] }]
|
|
4565
|
+
args: [{ selector: 'activeObjects', imports: [CommonModule, FormsModule, MatExpansionModule, MatIconModule, DragDropModule, MatTooltipModule], template: "<div class=\"active-objects-wrapper global-wrapper-container\" cdkDrag cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"dragPosition\" (cdkDragEnded)=\"onDragEnded($event)\" [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle-active-objects\" cdkDragHandle>\n <mat-icon class=\"active-object-icon\" (click)=\"zoomToAll()\" matTooltip=\"Aktive objekter\"\n [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n format_list_bulleted_add\n </mat-icon>\n\n <div class=\"right-icons\">\n <mat-icon class=\"toggle-icon\" (click)=\"togglePanel()\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n\n <div class=\"active-objects-container\">\n @if(!collapsed) {\n <input type=\"range\" min=\"0\" max=\"1\" step=\"0.05\" [(ngModel)]=\"opacity\" (input)=\"updateOpacity()\"\n (mousedown)=\"stopDrag($event)\" (touchstart)=\"stopDrag($event)\" (pointerdown)=\"stopDrag($event)\">\n <div class=\"header-icons\">\n <div class=\"header-left-controls\">\n <mat-icon class=\"zoom-icon\" [class.zoom-active]=\"isZoomedToAll\" (click)=\"zoomToAll()\"\n matTooltip=\"Zoom til alle\" matTooltipPosition=\"above\">\n fit_screen\n </mat-icon>\n <mat-icon class=\"reset-icon\" (click)=\"reset()\" matTooltip=\"Nulstil\" matTooltipPosition=\"above\">\n replay\n </mat-icon>\n </div>\n\n <div class=\"header-right-controls\">\n @if(!centerPointOk) {\n <mat-icon class=\"warning-icon\" matTooltip=\"Der er ikke noget centerpunkt og det skal der v\u00E6re\"\n [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n warning\n </mat-icon>\n } @else if (allFeaturesOk) { \n @if (endSessionButtonLabel) {\n <button (click)=\"endSession()\" matTooltip=\"Afslut\" [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n {{endSessionButtonLabel}}\n </button>\n } @else {\n <mat-icon class=\"end-session-icon\" (click)=\"endSession()\" matTooltip=\"Afslut\"\n [matTooltipShowDelay]=\"500\" [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n done_all\n </mat-icon>\n }\n }\n </div>\n </div>\n }\n\n @if(!collapsed) {\n <div class=\"active-objects-content\">\n <div class=\"item-list\">\n @for(item of activeFeatures; track item.id) {\n <div class=\"item\" [class.listhighlight]=\"listHighlightedIds.has(item.id)\" [attr.data-id]=\"item.id\">\n <div class=\"item-text\">\n <span (click)=\"highlight(item.id)\" class=\"item-id\">{{item.display}} {{item.area}}</span>\n @if(item.containedMissingIn && item.containedMissingIn.length > 0) {\n <div class=\"item-warning\">\n <mat-icon>error</mat-icon>\n <span>Udenfor {{item.containedMissingIn.join(', ')}}</span>\n </div>\n }\n </div>\n <img \n [src]=\"wktIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"showItemWKT(item.feature)\" \n matTooltip=\"Vis WKT\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Vis WKT\">\n \n\n @if(!item.locked) {\n <mat-icon (click)=\"delete(item.id)\" matTooltip=\"Slet\" [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" matTooltipPosition=\"above\">\n delete\n </mat-icon>\n }\n </div>\n }\n </div>\n\n </div>\n }\n </div>\n</div>", styles: [".active-objects-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:2;box-shadow:0 2px 10px #0000001a;width:350px;transition:width .3s ease,max-width .3s ease;border-radius:5px!important}.active-objects-wrapper.collapsed .drag-handle-active-objects .active-object-icon{cursor:default!important}.active-objects-wrapper.collapsed .drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important}.active-objects-wrapper :not(.collapsed){max-width:350px}.active-objects-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.listhighlight{color:#0af!important;font-weight:700}.item{display:flex;justify-content:space-between;align-items:center;padding:0 14px;border-radius:5px;background:transparent!important;transition:all .2s ease;color:#fff;min-height:40px;cursor:default}.item .item-text{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;gap:4px}.item .item-text .item-warning{display:inline-flex;align-items:center;gap:6px;font-size:11px;width:fit-content;max-width:100%;color:#dfca0e;margin-top:2px;margin-bottom:2px}.item .item-text .item-warning mat-icon{font-size:14px;width:14px;height:14px;color:#dfca0e;margin:0;cursor:default;flex-shrink:0}.item .item-text .item-warning mat-icon:hover{color:#ccb913}.item .item-text .item-warning span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}.item .item-id{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item .item-area{color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.item mat-icon{cursor:pointer;color:#bdc1c3cc;font-size:18px;width:18px;height:18px;flex-shrink:0;margin-left:8px;transition:color .2s ease,background .2s ease}.item mat-icon:hover{color:#d3d3d3}.highlight-active{color:#6ccb78!important;transition:all .2s ease}.drag-handle-active-objects .active-object-icon{cursor:default!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons{display:flex;align-items:center;gap:7px}.drag-handle-active-objects .right-icons .toggle-icon{cursor:pointer!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.drag-handle-active-objects .right-icons .toggle-icon:hover{color:#d3d3d3}.active-objects-container{display:flex;flex-direction:column;width:100%;transition:all .3s ease;cursor:default;box-sizing:border-box;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.active-objects-container .panel-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 12px;cursor:default;background:color-mix(in srgb,#000 70%,transparent);border-bottom:1px solid rgba(255,255,255,.1)}.active-objects-container .collapsed-title{color:#fff;font-weight:600;font-size:12px;padding:8px 4px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .2s ease;white-space:nowrap;text-align:center}.active-objects-container .collapsed-title:hover{color:#1976d2}.active-objects-container input[type=range]{width:95%;height:4px;margin:8px auto;-webkit-appearance:none;background:#fff3;border-radius:2px;outline:none}.active-objects-container input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;transition:background .2s ease}.active-objects-container input[type=range]::-webkit-slider-thumb:hover{background:#6ccb78}.active-objects-container input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer;border:none}.active-objects-container input[type=range]::-moz-range-thumb:hover{background:#6ccb78}.header-icons{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;padding:5px 10px!important}.header-icons .header-left-controls,.header-icons .header-right-controls{display:flex;align-items:center;gap:8px}.header-icons .header-right-controls button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:0 12px;height:26px;min-width:56px;max-width:150px;background:linear-gradient(135deg,#6ccb781f,#6ccb780f);border:1px solid rgba(108,203,120,.55);border-radius:5px;color:#6ccb78;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;outline:none;box-shadow:0 0 #6ccb7800,inset 0 1px #ffffff0f;transition:background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease,transform .12s ease}.header-icons .header-right-controls button mat-icon{font-size:14px;width:14px;height:14px;flex-shrink:0;transition:transform .3s ease;margin:0}.header-icons .header-right-controls button:hover{background:linear-gradient(135deg,#6ccb7838,#6ccb781a);border-color:#6ccb78e6;color:#88d994}.header-icons .header-right-controls button:hover mat-icon{transform:scale(1.15)}.header-icons .header-right-controls button:active{background:#6ccb782e;border-color:#6ccb78;color:#fff;box-shadow:0 0 6px #6ccb7833,inset 0 2px 4px #0000004d;transform:translateY(0)}.header-icons .header-right-controls button:focus-visible{outline:2px solid rgba(108,203,120,.6);outline-offset:2px}.header-icons .header-right-controls .end-session-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:5px;color:#6ccb78;cursor:pointer;transition:color .2s ease,background .2s ease,box-shadow .2s ease,transform .12s ease}.header-icons .header-right-controls .end-session-icon:hover{color:#88d994;background:#6ccb781f;box-shadow:0 0 10px #6ccb7833;transform:scale(1.1)}.header-icons .header-right-controls .end-session-icon:active{color:#fff;background:#6ccb7833;transform:scale(.95)}.header-icons .zoom-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .zoom-icon:hover{color:#6ccb78}.header-icons .zoom-icon.zoom-active{color:#6ccb78!important}.header-icons .reset-icon{cursor:pointer;color:#fff;font-size:18px;transition:all .2s ease}.header-icons .reset-icon:hover{color:#6ccb78}.header-icons .warning-icon{color:#6ccb78;font-size:18px;cursor:help}.header-icons .end-session-icon{cursor:pointer;color:#6ccb78;font-size:18px;transition:all .2s ease}.header-icons .end-session-icon:hover{color:#45a049}.active-objects-content{display:block;width:100%;max-height:278px;overflow:auto;border-bottom-left-radius:5px!important;border-bottom-right-radius:5px!important}.active-objects-content::-webkit-scrollbar{width:12px}.active-objects-content::-webkit-scrollbar-track{background:#757474;border-radius:8px}.active-objects-content::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.active-objects-content::-webkit-scrollbar-thumb:hover{background:#0f1012}.active-objects-content::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}.active-objects-content::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}.active-objects-content::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}.active-objects-content::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}.active-objects-content .zoom-icon{color:#fff;font-size:18px;transition:all .2s ease}.active-objects-content .zoom-icon:hover{color:#6ccb78}.active-objects-content .zoom-icon.zoom-active{color:#6ccb78!important}mat-expansion-panel{border-radius:0!important;box-shadow:none!important;width:100%}mat-expansion-panel:last-child{border-bottom:none}mat-expansion-panel ::ng-deep .mat-expansion-panel-header .mat-content{display:flex;justify-content:space-between;align-items:center;color:#fff}mat-expansion-panel ::ng-deep .mat-expansion-panel-body{padding:0}.item-list{display:flex;flex-direction:column}@media (max-width: 768px){.active-objects-wrapper{right:.5em;top:8em;max-width:280px;width:280px}.item{padding:6px 10px}}@media (max-width: 480px){.active-objects-wrapper{right:.5em;left:.5em;max-width:calc(100vw - 1em);width:auto}.item-list{max-height:200px}}\n"] }]
|
|
4556
4566
|
}], ctorParameters: () => [], propDecorators: { settings: [{
|
|
4557
4567
|
type: Input,
|
|
4558
4568
|
args: [{ required: true }]
|
|
@@ -5553,7 +5563,7 @@ class GisKomponentComponent {
|
|
|
5553
5563
|
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,
|
|
5554
5564
|
HighlightService, ShowInfoService, InfoSearchProvider, InteractionHelperService, ConflictAnalysisSearchProvider,
|
|
5555
5565
|
MergeFeaturesService, OverlapService, CowiService, SearchProviderService, AddressSearchService, CadastreSearchService, ShowDocumentInfoService, DocumentSearchService,
|
|
5556
|
-
DmpCatalogService, OlCapabilitiesService, DmpLayerMapperService, GeometrySearchService], 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 }, { propertyName: "documentInfoRef", first: true, predicate: ["documentInfoRef"], 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 class=\"selected-features-wrapper\">\n <selected-feature-info></selected-feature-info>\n</div>\n\n<div #documentInfoRef class=\"selected-features-wrapper\">\n <document-search-info></document-search-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: ["::ng-deep .global-wrapper-container{background:#4c4d51}::ng-deep .dmp-dialog-content mat-dialog-content{background:#4c4d51!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field input{color:#fff!important;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field input .search-icon{color:#fff!important}::ng-deep button.ol-zoom-in,::ng-deep button.ol-zoom-out,::ng-deep button.ol-rotate-reset{background:#4c4d51;color:#fff;border-radius:5px!important}::ng-deep button.ol-zoom-in:hover,::ng-deep button.ol-zoom-out:hover,::ng-deep button.ol-rotate-reset:hover{color:#e9e3e3;outline:none}::ng-deep mat-expansion-panel .mat-expansion-panel-header{height:40px!important;min-height:40px!important;background:#ffffff0d;transition:background .2s ease;border-top-left-radius:4px!important;border-top-right-radius:4px!important;padding:0 16px;margin-bottom:2px}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover{background:#ffffff14!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px;margin-right:10px;color:#fff;font-weight:600;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:15px}::ng-deep mat-expansion-panel .mat-expansion-panel-header-title{color:#fff}::ng-deep .custom-image-icon,.compact-icon{background:none}::ng-deep .custom-image-icon img,.compact-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}::ng-deep .custom-image-icon.active,.compact-icon.active{background:#f7b528!important;border-color:transparent;box-shadow:0 4px 12px #0ea5e966}::ng-deep .custom-image-icon.active img,.compact-icon.active img{filter:brightness(0) invert(1)}::ng-deep .custom-image-icon.active:hover,.compact-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}::ng-deep .custom-image-icon:hover:not(.active),.compact-icon:hover:not(.active){background:#ffffff1a!important;border-color:none;box-shadow:none}::ng-deep .custom-image-icon:hover:not(.active) img,.compact-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}::ng-deep .layer-selector-body .search-section mat-form-field input{color:#fff!important}::ng-deep .search-field .mat-mdc-input-element{color:#fff!important}::ng-deep .mat-mdc-text-field-wrapper{background:#878787!important}::ng-deep .mat-mdc-select-panel{font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}::ng-deep .active-objects-wrapper.collapsed,::ng-deep .layer-selector-body-wrapper.collapsed,::ng-deep .legends-list-body-wrapper.collapsed,::ng-deep .search-container.collapsed,::ng-deep .toolbox-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}::ng-deep .drag-handle-active-objects,::ng-deep .drag-handle-legends,::ng-deep .drag-handle,::ng-deep .drag-handle-selector,::ng-deep .drag-handle-toolbox{display:flex;align-items:center;justify-content:space-between;padding:0 2px;cursor:move;color:#fff;border-radius:5px;width:100%;box-sizing:border-box}:host{font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}:host ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,:host ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#dee2e6!important;border-width:1px!important}:host.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,:host.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,:host.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#d1d5db!important;border-width:1px!important;box-shadow:0 0 0 3px #d1d5db40!important}::ng-deep .mat-mdc-form-field-flex{height:40px!important}::ng-deep .mat-expansion-indicator svg{fill:#fff!important}::ng-deep .ol-control{background-color:transparent!important}::ng-deep .search-result-option{font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}::ng-deep .mat-mdc-autocomplete-panel .mat-pseudo-checkbox{display:none!important}::ng-deep .mat-mdc-autocomplete-panel .mdc-list-item__end{display:none!important}: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 .ol-scale-text{display:flex}::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;text-align:center;display:flex;align-items:center;justify-content:flex-start;z-index:1000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i3.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" }, { kind: "component", type: DocumentSearchInfoComponent, selector: "document-search-info" }] });
|
|
5566
|
+
DmpCatalogService, OlCapabilitiesService, DmpLayerMapperService, GeometrySearchService], 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 }, { propertyName: "documentInfoRef", first: true, predicate: ["documentInfoRef"], 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 class=\"selected-features-wrapper\">\n <selected-feature-info></selected-feature-info>\n</div>\n\n<div #documentInfoRef class=\"selected-features-wrapper\">\n <document-search-info></document-search-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: ["::ng-deep .global-wrapper-container{background:#4c4d51}::ng-deep .dmp-dialog-content mat-dialog-content{background:#4c4d51!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field input{color:#fff!important;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field input .search-icon{color:#fff!important}::ng-deep button.ol-zoom-in,::ng-deep button.ol-zoom-out,::ng-deep button.ol-rotate-reset{background:#4c4d51;color:#fff;border-radius:5px!important}::ng-deep button.ol-zoom-in:hover,::ng-deep button.ol-zoom-out:hover,::ng-deep button.ol-rotate-reset:hover{color:#e9e3e3;outline:none}::ng-deep mat-expansion-panel .mat-expansion-panel-header{height:40px!important;min-height:40px!important;background:#ffffff0d;transition:background .2s ease;border-top-left-radius:4px!important;border-top-right-radius:4px!important;padding:0 16px;margin-bottom:2px}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover{background:#ffffff14!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px;margin-right:10px;color:#fff;font-weight:600;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:15px}::ng-deep mat-expansion-panel .mat-expansion-panel-header-title{color:#fff}::ng-deep .custom-image-icon,.compact-icon{background:none}::ng-deep .custom-image-icon img,.compact-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}::ng-deep .custom-image-icon.active,.compact-icon.active{background:#f7b528!important;border-color:transparent;box-shadow:0 4px 12px #0ea5e966}::ng-deep .custom-image-icon.active img,.compact-icon.active img{filter:brightness(0) invert(1)}::ng-deep .custom-image-icon.active:hover,.compact-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}::ng-deep .custom-image-icon:hover:not(.active),.compact-icon:hover:not(.active){background:#ffffff1a!important;border-color:none;box-shadow:none}::ng-deep .custom-image-icon:hover:not(.active) img,.compact-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}::ng-deep .layer-selector-body .search-section mat-form-field input{color:#fff!important}::ng-deep .search-field .mat-mdc-input-element{color:#fff!important}::ng-deep .mat-mdc-text-field-wrapper{background:#878787!important}::ng-deep .mat-mdc-select-panel{font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}::ng-deep .active-objects-wrapper.collapsed,::ng-deep .layer-selector-body-wrapper.collapsed,::ng-deep .legends-list-body-wrapper.collapsed,::ng-deep .search-container.collapsed,::ng-deep .toolbox-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}::ng-deep .drag-handle-active-objects,::ng-deep .drag-handle-legends,::ng-deep .drag-handle,::ng-deep .drag-handle-selector,::ng-deep .drag-handle-toolbox{display:flex;align-items:center;justify-content:space-between;padding:0 2px;cursor:move;color:#fff;border-radius:5px;width:100%;box-sizing:border-box}:host{font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}:host ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,:host ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#dee2e6!important;border-width:1px!important}:host.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,:host.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,:host.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#d1d5db!important;border-width:1px!important;box-shadow:0 0 0 3px #d1d5db40!important}::ng-deep .mat-mdc-form-field-flex{height:40px!important;display:flex!important;align-items:center!important}::ng-deep .mat-expansion-indicator svg{fill:#fff!important}::ng-deep .ol-control{background-color:transparent!important}::ng-deep .search-result-option{font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}::ng-deep .mat-mdc-autocomplete-panel .mat-pseudo-checkbox{display:none!important}::ng-deep .mat-mdc-autocomplete-panel .mdc-list-item__end{display:none!important}: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 .ol-scale-text{display:flex}::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;text-align:center;display:flex;align-items:center;justify-content:flex-start;z-index:1000}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i3.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i3.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" }, { kind: "component", type: DocumentSearchInfoComponent, selector: "document-search-info" }] });
|
|
5557
5567
|
}
|
|
5558
5568
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GisKomponentComponent, decorators: [{
|
|
5559
5569
|
type: Component,
|
|
@@ -5561,7 +5571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5561
5571
|
LegendsListComponent, SelectedFeatureInfoComponent, DocumentSearchInfoComponent], providers: [CurrentItemsService, FeatureLoaderService, DrawLayerSourceService, ZoomService, UndoRedoService, ShowInfoHoverService, HoverInfoSearchService, CenterPointService, PrintDrawLayerSourceService,
|
|
5562
5572
|
HighlightService, ShowInfoService, InfoSearchProvider, InteractionHelperService, ConflictAnalysisSearchProvider,
|
|
5563
5573
|
MergeFeaturesService, OverlapService, CowiService, SearchProviderService, AddressSearchService, CadastreSearchService, ShowDocumentInfoService, DocumentSearchService,
|
|
5564
|
-
DmpCatalogService, OlCapabilitiesService, DmpLayerMapperService, GeometrySearchService], 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 class=\"selected-features-wrapper\">\n <selected-feature-info></selected-feature-info>\n</div>\n\n<div #documentInfoRef class=\"selected-features-wrapper\">\n <document-search-info></document-search-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: ["::ng-deep .global-wrapper-container{background:#4c4d51}::ng-deep .dmp-dialog-content mat-dialog-content{background:#4c4d51!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field input{color:#fff!important;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field input .search-icon{color:#fff!important}::ng-deep button.ol-zoom-in,::ng-deep button.ol-zoom-out,::ng-deep button.ol-rotate-reset{background:#4c4d51;color:#fff;border-radius:5px!important}::ng-deep button.ol-zoom-in:hover,::ng-deep button.ol-zoom-out:hover,::ng-deep button.ol-rotate-reset:hover{color:#e9e3e3;outline:none}::ng-deep mat-expansion-panel .mat-expansion-panel-header{height:40px!important;min-height:40px!important;background:#ffffff0d;transition:background .2s ease;border-top-left-radius:4px!important;border-top-right-radius:4px!important;padding:0 16px;margin-bottom:2px}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover{background:#ffffff14!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px;margin-right:10px;color:#fff;font-weight:600;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:15px}::ng-deep mat-expansion-panel .mat-expansion-panel-header-title{color:#fff}::ng-deep .custom-image-icon,.compact-icon{background:none}::ng-deep .custom-image-icon img,.compact-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}::ng-deep .custom-image-icon.active,.compact-icon.active{background:#f7b528!important;border-color:transparent;box-shadow:0 4px 12px #0ea5e966}::ng-deep .custom-image-icon.active img,.compact-icon.active img{filter:brightness(0) invert(1)}::ng-deep .custom-image-icon.active:hover,.compact-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}::ng-deep .custom-image-icon:hover:not(.active),.compact-icon:hover:not(.active){background:#ffffff1a!important;border-color:none;box-shadow:none}::ng-deep .custom-image-icon:hover:not(.active) img,.compact-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}::ng-deep .layer-selector-body .search-section mat-form-field input{color:#fff!important}::ng-deep .search-field .mat-mdc-input-element{color:#fff!important}::ng-deep .mat-mdc-text-field-wrapper{background:#878787!important}::ng-deep .mat-mdc-select-panel{font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}::ng-deep .active-objects-wrapper.collapsed,::ng-deep .layer-selector-body-wrapper.collapsed,::ng-deep .legends-list-body-wrapper.collapsed,::ng-deep .search-container.collapsed,::ng-deep .toolbox-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}::ng-deep .drag-handle-active-objects,::ng-deep .drag-handle-legends,::ng-deep .drag-handle,::ng-deep .drag-handle-selector,::ng-deep .drag-handle-toolbox{display:flex;align-items:center;justify-content:space-between;padding:0 2px;cursor:move;color:#fff;border-radius:5px;width:100%;box-sizing:border-box}:host{font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}:host ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,:host ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#dee2e6!important;border-width:1px!important}:host.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,:host.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,:host.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#d1d5db!important;border-width:1px!important;box-shadow:0 0 0 3px #d1d5db40!important}::ng-deep .mat-mdc-form-field-flex{height:40px!important}::ng-deep .mat-expansion-indicator svg{fill:#fff!important}::ng-deep .ol-control{background-color:transparent!important}::ng-deep .search-result-option{font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}::ng-deep .mat-mdc-autocomplete-panel .mat-pseudo-checkbox{display:none!important}::ng-deep .mat-mdc-autocomplete-panel .mdc-list-item__end{display:none!important}: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 .ol-scale-text{display:flex}::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;text-align:center;display:flex;align-items:center;justify-content:flex-start;z-index:1000}\n"] }]
|
|
5574
|
+
DmpCatalogService, OlCapabilitiesService, DmpLayerMapperService, GeometrySearchService], 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 class=\"selected-features-wrapper\">\n <selected-feature-info></selected-feature-info>\n</div>\n\n<div #documentInfoRef class=\"selected-features-wrapper\">\n <document-search-info></document-search-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: ["::ng-deep .global-wrapper-container{background:#4c4d51}::ng-deep .dmp-dialog-content mat-dialog-content{background:#4c4d51!important}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field input{color:#fff!important;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}::ng-deep .dmp-dialog-content mat-dialog-content .search-section mat-form-field input .search-icon{color:#fff!important}::ng-deep button.ol-zoom-in,::ng-deep button.ol-zoom-out,::ng-deep button.ol-rotate-reset{background:#4c4d51;color:#fff;border-radius:5px!important}::ng-deep button.ol-zoom-in:hover,::ng-deep button.ol-zoom-out:hover,::ng-deep button.ol-rotate-reset:hover{color:#e9e3e3;outline:none}::ng-deep mat-expansion-panel .mat-expansion-panel-header{height:40px!important;min-height:40px!important;background:#ffffff0d;transition:background .2s ease;border-top-left-radius:4px!important;border-top-right-radius:4px!important;padding:0 16px;margin-bottom:2px}::ng-deep mat-expansion-panel .mat-expansion-panel-header:hover{background:#ffffff14!important}::ng-deep mat-expansion-panel .mat-expansion-panel-header .panel-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px;margin-right:10px;color:#fff;font-weight:600;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:15px}::ng-deep mat-expansion-panel .mat-expansion-panel-header-title{color:#fff}::ng-deep .custom-image-icon,.compact-icon{background:none}::ng-deep .custom-image-icon img,.compact-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}::ng-deep .custom-image-icon.active,.compact-icon.active{background:#f7b528!important;border-color:transparent;box-shadow:0 4px 12px #0ea5e966}::ng-deep .custom-image-icon.active img,.compact-icon.active img{filter:brightness(0) invert(1)}::ng-deep .custom-image-icon.active:hover,.compact-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}::ng-deep .custom-image-icon:hover:not(.active),.compact-icon:hover:not(.active){background:#ffffff1a!important;border-color:none;box-shadow:none}::ng-deep .custom-image-icon:hover:not(.active) img,.compact-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}::ng-deep .layer-selector-body .search-section mat-form-field input{color:#fff!important}::ng-deep .search-field .mat-mdc-input-element{color:#fff!important}::ng-deep .mat-mdc-text-field-wrapper{background:#878787!important}::ng-deep .mat-mdc-select-panel{font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}::ng-deep .active-objects-wrapper.collapsed,::ng-deep .layer-selector-body-wrapper.collapsed,::ng-deep .legends-list-body-wrapper.collapsed,::ng-deep .search-container.collapsed,::ng-deep .toolbox-wrapper.collapsed{width:90px;max-width:90px;min-width:90px}::ng-deep .drag-handle-active-objects,::ng-deep .drag-handle-legends,::ng-deep .drag-handle,::ng-deep .drag-handle-selector,::ng-deep .drag-handle-toolbox{display:flex;align-items:center;justify-content:space-between;padding:0 2px;cursor:move;color:#fff;border-radius:5px;width:100%;box-sizing:border-box}:host{font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}:host ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,:host ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,:host ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#dee2e6!important;border-width:1px!important}:host.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__leading,:host.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__notch,:host.mat-focused ::ng-deep .mdc-notched-outline .mdc-notched-outline__trailing{border-color:#d1d5db!important;border-width:1px!important;box-shadow:0 0 0 3px #d1d5db40!important}::ng-deep .mat-mdc-form-field-flex{height:40px!important;display:flex!important;align-items:center!important}::ng-deep .mat-expansion-indicator svg{fill:#fff!important}::ng-deep .ol-control{background-color:transparent!important}::ng-deep .search-result-option{font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}::ng-deep .mat-mdc-autocomplete-panel .mat-pseudo-checkbox{display:none!important}::ng-deep .mat-mdc-autocomplete-panel .mdc-list-item__end{display:none!important}: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 .ol-scale-text{display:flex}::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;text-align:center;display:flex;align-items:center;justify-content:flex-start;z-index:1000}\n"] }]
|
|
5565
5575
|
}], ctorParameters: () => [], propDecorators: { showToolbox: [{
|
|
5566
5576
|
type: Input
|
|
5567
5577
|
}], showActiveObjects: [{
|