@regionerne/gis-komponent 0.0.98 → 0.0.100
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.
- package/fesm2022/regionerne-gis-komponent.mjs +281 -123
- package/fesm2022/regionerne-gis-komponent.mjs.map +1 -1
- package/lib/components/fast-switch-selector/fast-switch-selector.component.d.ts +31 -0
- package/lib/components/gis-komponent/gis-komponent.component.d.ts +1 -0
- package/lib/components/legends-list/legends-list.component.d.ts +2 -3
- package/lib/components/toolbox/toolbox.component.d.ts +6 -6
- package/lib/models/IProfile.d.ts +2 -0
- package/lib/models/profile.d.ts +1 -0
- package/lib/services/geometry.service.d.ts +1 -1
- package/lib/services/layerHelper.service.d.ts +1 -1
- package/lib/services/polygonCleanup.service.d.ts +1 -1
- package/package.json +1 -1
|
@@ -360,20 +360,20 @@ class LayerHelperService {
|
|
|
360
360
|
}
|
|
361
361
|
});
|
|
362
362
|
}
|
|
363
|
-
toggleLayerInMap(map, layerId) {
|
|
363
|
+
toggleLayerInMap(map, layerId, value = undefined) {
|
|
364
364
|
map.getLayers().getArray().forEach(layergroup => {
|
|
365
365
|
if (layergroup instanceof OLLayerGroup) {
|
|
366
366
|
layergroup.getLayers().getArray().forEach(l => {
|
|
367
367
|
if (l.get(this._layerDbIdKey) === layerId) {
|
|
368
368
|
const current = l.getVisible();
|
|
369
|
-
l.setVisible(!current);
|
|
369
|
+
l.setVisible(value != undefined ? value : !current);
|
|
370
370
|
}
|
|
371
371
|
});
|
|
372
372
|
// DMP layer
|
|
373
373
|
}
|
|
374
374
|
else if (layergroup.get('dmp') && layergroup.get(this._layerDbIdKey) === layerId) {
|
|
375
375
|
const current = layergroup.getVisible();
|
|
376
|
-
layergroup.setVisible(!current);
|
|
376
|
+
layergroup.setVisible(value != undefined ? value : !current);
|
|
377
377
|
}
|
|
378
378
|
});
|
|
379
379
|
}
|
|
@@ -801,7 +801,7 @@ class WidgetConstants {
|
|
|
801
801
|
static activeObjectsWidth = 350;
|
|
802
802
|
static layerSelectorHeight = 610;
|
|
803
803
|
static layerSelectorWidth = 429;
|
|
804
|
-
static legendsHeight =
|
|
804
|
+
static legendsHeight = 610;
|
|
805
805
|
static legendsWidth = 350;
|
|
806
806
|
static toolboxDefaultX = 29;
|
|
807
807
|
static toolboxDefaultY = 120;
|
|
@@ -2842,6 +2842,7 @@ class GeometrySearchService extends SearchProviderBase {
|
|
|
2842
2842
|
return intersects(layer.geometryField, searchValue);
|
|
2843
2843
|
}
|
|
2844
2844
|
map(l, f) {
|
|
2845
|
+
console.log("🚀 ~ GeometrySearchService ~ map ~ l:", l);
|
|
2845
2846
|
const fc = f;
|
|
2846
2847
|
return {
|
|
2847
2848
|
title: l.name,
|
|
@@ -2958,7 +2959,7 @@ class PolygonCleanupService {
|
|
|
2958
2959
|
cleanupPolygonTurf(polygon) {
|
|
2959
2960
|
const coords = polygon.getCoordinates();
|
|
2960
2961
|
if (coords.length === 0)
|
|
2961
|
-
return;
|
|
2962
|
+
return 'notChanged';
|
|
2962
2963
|
const exterior = coords[0];
|
|
2963
2964
|
const holes = coords.slice(1);
|
|
2964
2965
|
const cleanedHoles = [];
|
|
@@ -2968,6 +2969,7 @@ class PolygonCleanupService {
|
|
|
2968
2969
|
}
|
|
2969
2970
|
}
|
|
2970
2971
|
polygon.setCoordinates([exterior, ...cleanedHoles]);
|
|
2972
|
+
return holes.length === cleanedHoles.length ? 'notChanged' : 'changed';
|
|
2971
2973
|
}
|
|
2972
2974
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PolygonCleanupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2973
2975
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PolygonCleanupService });
|
|
@@ -2975,7 +2977,6 @@ class PolygonCleanupService {
|
|
|
2975
2977
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PolygonCleanupService, decorators: [{
|
|
2976
2978
|
type: Injectable
|
|
2977
2979
|
}] });
|
|
2978
|
-
``;
|
|
2979
2980
|
|
|
2980
2981
|
class ToolboxComponent {
|
|
2981
2982
|
// Inputs
|
|
@@ -3161,6 +3162,7 @@ class ToolboxComponent {
|
|
|
3161
3162
|
this.drawInteraction.on('drawend', (evt) => {
|
|
3162
3163
|
this._geometrySearchService.search(evt.feature.getGeometry(), this.profile.searchResultLimit).subscribe({
|
|
3163
3164
|
next: result => {
|
|
3165
|
+
console.log("🚀 ~ ToolboxComponent ~ _enablePolygonSearch ~ result:", result);
|
|
3164
3166
|
this.geometrySearchResult = result.filter(result => result.total > 0);
|
|
3165
3167
|
}
|
|
3166
3168
|
});
|
|
@@ -3359,8 +3361,8 @@ class ToolboxComponent {
|
|
|
3359
3361
|
event.stopPropagation();
|
|
3360
3362
|
result.items = [...result.items.filter(i => i.id !== itemId)];
|
|
3361
3363
|
}
|
|
3362
|
-
|
|
3363
|
-
this.geometrySearchResult = [];
|
|
3364
|
+
deleteAllGeometrySearchItemForLayer(layerId) {
|
|
3365
|
+
this.geometrySearchResult = [...this.geometrySearchResult.filter(gsr => gsr.layer.id !== layerId)];
|
|
3364
3366
|
}
|
|
3365
3367
|
_disablePointSearch() {
|
|
3366
3368
|
if (this.pointClickKey) {
|
|
@@ -3622,8 +3624,10 @@ class ToolboxComponent {
|
|
|
3622
3624
|
.filter(item => !!item.clipped) // Filter out the items that aren't clipped. They are in the same extent, but don't actually overlap, so I leave those out
|
|
3623
3625
|
.map(item => ({ ...item, allPolys: flatten(item.clipped) })) // The clipped item can be an array of item, so I make sure to flatten it.
|
|
3624
3626
|
.map(item => ({ ...item, allPolysAsWkt: item.allPolys.features.map(poly => wktFormat.writeGeometry(geoJsonFormat.readGeometry(poly.geometry))) }))
|
|
3625
|
-
.map(item => item.allPolysAsWkt.map(wkt => this._geometryService.validate(wkt).pipe(map(result =>
|
|
3626
|
-
|
|
3627
|
+
.map(item => item.allPolysAsWkt.map(wkt => this._geometryService.validate(wkt).pipe(map(result => {
|
|
3628
|
+
const actualResult = result;
|
|
3629
|
+
return actualResult.correctedGeometries ? { ...item, validWKTS: actualResult.correctedGeometries } : { ...item, validWKTS: [wkt] };
|
|
3630
|
+
} // If there were corrections, I return the corrected items. If not, just the original
|
|
3627
3631
|
))))
|
|
3628
3632
|
.flatMap(r => r);
|
|
3629
3633
|
combineLatest(overlappingItems$).subscribe({
|
|
@@ -3716,15 +3720,21 @@ class ToolboxComponent {
|
|
|
3716
3720
|
this._interactionHelper.setAsTemp(drawInteraction);
|
|
3717
3721
|
this.map.addInteraction(drawInteraction);
|
|
3718
3722
|
}
|
|
3719
|
-
|
|
3720
|
-
this.activeMode
|
|
3721
|
-
|
|
3722
|
-
|
|
3723
|
-
this.selectedDrawItem = this.drawItems[0];
|
|
3723
|
+
toggleDraw() {
|
|
3724
|
+
if (this.activeMode === 'draw') {
|
|
3725
|
+
this._clearAllInteractions();
|
|
3726
|
+
this.activeMode = null;
|
|
3724
3727
|
}
|
|
3725
|
-
|
|
3726
|
-
|
|
3727
|
-
|
|
3728
|
+
else {
|
|
3729
|
+
this.activeMode = 'draw';
|
|
3730
|
+
// Set the first item as default
|
|
3731
|
+
if (!this.selectedDrawItem && this.drawItems && this.drawItems.length > 0) {
|
|
3732
|
+
this.selectedDrawItem = this.drawItems[0];
|
|
3733
|
+
}
|
|
3734
|
+
// Actually start drawing immediately
|
|
3735
|
+
if (this.selectedDrawItem) {
|
|
3736
|
+
this._doStartDraw(this.selectedDrawItem);
|
|
3737
|
+
}
|
|
3728
3738
|
}
|
|
3729
3739
|
}
|
|
3730
3740
|
_deleteSelect;
|
|
@@ -3803,8 +3813,9 @@ class ToolboxComponent {
|
|
|
3803
3813
|
const wktString = wkt.writeGeometry(poly);
|
|
3804
3814
|
this._geometryService.validate(wktString).subscribe({
|
|
3805
3815
|
next: result => {
|
|
3806
|
-
|
|
3807
|
-
|
|
3816
|
+
const actualResult = result;
|
|
3817
|
+
if (actualResult.wasCorrected) {
|
|
3818
|
+
const newfeatures = actualResult.correctedGeometries.map(cg => {
|
|
3808
3819
|
const newFeature = feature.clone();
|
|
3809
3820
|
const geom = wkt.readGeometry(cg);
|
|
3810
3821
|
this._featureHelper.setId(newFeature);
|
|
@@ -3819,6 +3830,9 @@ class ToolboxComponent {
|
|
|
3819
3830
|
}
|
|
3820
3831
|
this._centerPointService.checkAfterUpdate();
|
|
3821
3832
|
this._undoRedo.addStep();
|
|
3833
|
+
},
|
|
3834
|
+
error: err => {
|
|
3835
|
+
console.log("🚀 ~ ToolboxComponent ~ _startRemovePoints ~ err:", err);
|
|
3822
3836
|
}
|
|
3823
3837
|
});
|
|
3824
3838
|
});
|
|
@@ -3905,6 +3919,7 @@ class ToolboxComponent {
|
|
|
3905
3919
|
this._addSnap();
|
|
3906
3920
|
}
|
|
3907
3921
|
_editFeature(f, highlight = true) {
|
|
3922
|
+
const startFeature = f.clone();
|
|
3908
3923
|
if (highlight) {
|
|
3909
3924
|
this._highlight.highlight(f, false);
|
|
3910
3925
|
}
|
|
@@ -3917,52 +3932,68 @@ class ToolboxComponent {
|
|
|
3917
3932
|
modify.on('modifyend', evt => {
|
|
3918
3933
|
const wktFormat = new WKT();
|
|
3919
3934
|
const editedFeature = evt.features.getArray()[0].clone();
|
|
3920
|
-
this._polygonCleanupService.cleanupPolygonTurf(editedFeature.getGeometry())
|
|
3935
|
+
if (this._polygonCleanupService.cleanupPolygonTurf(editedFeature.getGeometry()) === 'changed') {
|
|
3936
|
+
f.setGeometry(startFeature.getGeometry());
|
|
3937
|
+
this._confirmService.open({ primaryText: 'OK', title: 'Fejl i geometri', message: 'Den indtegnede geometri kunne ikke valideres og ændringen føres tilbage' }).subscribe();
|
|
3938
|
+
this._editFeature(f);
|
|
3939
|
+
return;
|
|
3940
|
+
}
|
|
3921
3941
|
const wkt = wktFormat.writeFeature(editedFeature);
|
|
3922
3942
|
this._geometryService.validate(wkt).subscribe({
|
|
3923
3943
|
next: validatedResult => {
|
|
3924
|
-
|
|
3925
|
-
|
|
3926
|
-
|
|
3927
|
-
|
|
3928
|
-
|
|
3929
|
-
|
|
3930
|
-
|
|
3931
|
-
|
|
3932
|
-
|
|
3933
|
-
|
|
3934
|
-
|
|
3935
|
-
|
|
3936
|
-
this.
|
|
3937
|
-
|
|
3938
|
-
|
|
3939
|
-
|
|
3940
|
-
|
|
3941
|
-
|
|
3942
|
-
|
|
3943
|
-
|
|
3944
|
-
|
|
3945
|
-
|
|
3946
|
-
|
|
3947
|
-
|
|
3948
|
-
|
|
3949
|
-
|
|
3950
|
-
|
|
3951
|
-
|
|
3952
|
-
|
|
3953
|
-
|
|
3954
|
-
|
|
3955
|
-
|
|
3956
|
-
|
|
3957
|
-
|
|
3958
|
-
|
|
3959
|
-
|
|
3960
|
-
|
|
3944
|
+
if (typeof (validatedResult) === 'string') {
|
|
3945
|
+
this._confirmService.open({ primaryText: 'OK', title: 'Fejl i geometri', message: 'Den indtegnede geometri kunne ikke valideres og ændringen føres tilbage' })
|
|
3946
|
+
.subscribe({
|
|
3947
|
+
next: () => {
|
|
3948
|
+
f.setGeometry(startFeature.getGeometry());
|
|
3949
|
+
this._editFeature(f, false);
|
|
3950
|
+
}
|
|
3951
|
+
});
|
|
3952
|
+
}
|
|
3953
|
+
else {
|
|
3954
|
+
const featuresWithValidGeoms = validatedResult.correctedGeometries.map(validGeomWKT => {
|
|
3955
|
+
const newGeomValidFeature = editedFeature.clone();
|
|
3956
|
+
this._featureHelper.setId(newGeomValidFeature);
|
|
3957
|
+
const newValidGeom = wktFormat.readGeometry(validGeomWKT);
|
|
3958
|
+
newGeomValidFeature.setGeometry(newValidGeom);
|
|
3959
|
+
return newGeomValidFeature;
|
|
3960
|
+
});
|
|
3961
|
+
const listen$ = validatedResult.wasCorrected ? this._confirmService.open({ message: `Den rettede flade var ikke gyldig, men rettet til ${featuresWithValidGeoms.length} nye flader`, primaryText: 'OK', title: 'Advarsel' }) :
|
|
3962
|
+
of(undefined);
|
|
3963
|
+
listen$.subscribe({
|
|
3964
|
+
next: () => {
|
|
3965
|
+
// Handle overlap
|
|
3966
|
+
this._drawLayerService.source.removeFeature(f);
|
|
3967
|
+
this._overlap.handleOverlaps(featuresWithValidGeoms).subscribe({
|
|
3968
|
+
next: overlapResult => {
|
|
3969
|
+
const newOverlap = [...overlapResult.filter(or => or.getGeometry()?.getType() === 'Polygon'),
|
|
3970
|
+
...overlapResult.filter(or => or.getGeometry()?.getType() === 'MultiPolygon').flatMap(or => {
|
|
3971
|
+
const geom = or.getGeometry();
|
|
3972
|
+
const mappedFeatures = geom.getPolygons().map(poly => {
|
|
3973
|
+
const newFeature = or.clone();
|
|
3974
|
+
newFeature.setGeometry(poly);
|
|
3975
|
+
this._featureHelper.setId(newFeature);
|
|
3976
|
+
return newFeature;
|
|
3977
|
+
});
|
|
3978
|
+
return mappedFeatures;
|
|
3979
|
+
})
|
|
3980
|
+
];
|
|
3981
|
+
this._drawLayerService.source.addFeatures(newOverlap);
|
|
3982
|
+
this._centerPointService.checkAfterUpdate();
|
|
3983
|
+
this._undoRedo.addStep();
|
|
3984
|
+
if (newOverlap.length === 1) {
|
|
3985
|
+
// After the whole validation, only one item is being edited - keep editing it
|
|
3986
|
+
this._editFeature(newOverlap[0], false);
|
|
3987
|
+
}
|
|
3988
|
+
else {
|
|
3989
|
+
// The validating ended up with several features. No longer possible to know which feature is being edited, so move back to the select feature to edit.
|
|
3990
|
+
this.startEdit();
|
|
3991
|
+
}
|
|
3961
3992
|
}
|
|
3962
|
-
}
|
|
3963
|
-
}
|
|
3964
|
-
}
|
|
3965
|
-
}
|
|
3993
|
+
});
|
|
3994
|
+
}
|
|
3995
|
+
});
|
|
3996
|
+
}
|
|
3966
3997
|
}
|
|
3967
3998
|
});
|
|
3968
3999
|
this.map.removeInteraction(modify);
|
|
@@ -4211,11 +4242,11 @@ class ToolboxComponent {
|
|
|
4211
4242
|
this._loadDefaultToolIfNeeded();
|
|
4212
4243
|
}
|
|
4213
4244
|
}
|
|
4214
|
-
|
|
4215
|
-
this.
|
|
4245
|
+
toggleDownloadCasdatres() {
|
|
4246
|
+
this._toggleDownload('cadastre');
|
|
4216
4247
|
}
|
|
4217
|
-
|
|
4218
|
-
this.
|
|
4248
|
+
toggleDownloadAddresses() {
|
|
4249
|
+
this._toggleDownload('address');
|
|
4219
4250
|
}
|
|
4220
4251
|
_loadDefaultToolIfNeeded() {
|
|
4221
4252
|
if (this.profile && this.profile.defaultTool) {
|
|
@@ -4224,10 +4255,10 @@ class ToolboxComponent {
|
|
|
4224
4255
|
this.toggleShowInfo();
|
|
4225
4256
|
return;
|
|
4226
4257
|
case 'Download adresser':
|
|
4227
|
-
this.
|
|
4258
|
+
this.toggleDownloadAddresses();
|
|
4228
4259
|
return;
|
|
4229
4260
|
case 'Download matrikler':
|
|
4230
|
-
this.
|
|
4261
|
+
this.toggleDownloadCasdatres();
|
|
4231
4262
|
return;
|
|
4232
4263
|
case 'Vælg Lokaliteter ved udpegning i kortet':
|
|
4233
4264
|
this.togglePointPolygonSearch();
|
|
@@ -4239,7 +4270,7 @@ class ToolboxComponent {
|
|
|
4239
4270
|
this.toggleDocumentPolygonSearch();
|
|
4240
4271
|
return;
|
|
4241
4272
|
case 'Fremhæv aktivt objekt i listen':
|
|
4242
|
-
this.
|
|
4273
|
+
this.toggleSelectFeatureHighlight();
|
|
4243
4274
|
return;
|
|
4244
4275
|
case 'Indsæt eller flyt punkter i flade/linje':
|
|
4245
4276
|
this.startEdit();
|
|
@@ -4254,7 +4285,7 @@ class ToolboxComponent {
|
|
|
4254
4285
|
this.toggleFeatureSearch();
|
|
4255
4286
|
return;
|
|
4256
4287
|
case 'Tegn element':
|
|
4257
|
-
this.
|
|
4288
|
+
this.toggleDraw();
|
|
4258
4289
|
return;
|
|
4259
4290
|
case 'Indsæt WKT streng for at importere elementet':
|
|
4260
4291
|
this.activateShowInputWKT();
|
|
@@ -4266,28 +4297,34 @@ class ToolboxComponent {
|
|
|
4266
4297
|
}
|
|
4267
4298
|
}
|
|
4268
4299
|
}
|
|
4269
|
-
|
|
4270
|
-
this.
|
|
4271
|
-
|
|
4272
|
-
const drawDownloadArea = new Draw({
|
|
4273
|
-
type: 'Polygon',
|
|
4274
|
-
stopClick: true
|
|
4275
|
-
});
|
|
4276
|
-
this._interactionHelper.setAsTemp(drawDownloadArea);
|
|
4277
|
-
drawDownloadArea.on('drawend', evt => {
|
|
4278
|
-
const geom = evt.feature.getGeometry();
|
|
4279
|
-
if (geom) {
|
|
4280
|
-
const coordinates = geom.getCoordinates();
|
|
4281
|
-
if (downloadType === 'address') {
|
|
4282
|
-
this._addressService.download(JSON.stringify(coordinates));
|
|
4283
|
-
}
|
|
4284
|
-
else {
|
|
4285
|
-
this._cadastreService.download(JSON.stringify(coordinates));
|
|
4286
|
-
}
|
|
4287
|
-
}
|
|
4300
|
+
_toggleDownload(downloadType) {
|
|
4301
|
+
if ((this.activeMode === 'download-addresses' && downloadType === 'address') ||
|
|
4302
|
+
(this.activeMode === 'download-cadastres' && downloadType === 'cadastre')) {
|
|
4288
4303
|
this._clearAllInteractions();
|
|
4289
|
-
|
|
4290
|
-
|
|
4304
|
+
this.activeMode = null;
|
|
4305
|
+
}
|
|
4306
|
+
else {
|
|
4307
|
+
this._clearAllInteractions();
|
|
4308
|
+
this.activeMode = downloadType === 'address' ? 'download-addresses' : 'download-cadastres';
|
|
4309
|
+
const drawDownloadArea = new Draw({
|
|
4310
|
+
type: 'Polygon',
|
|
4311
|
+
stopClick: true
|
|
4312
|
+
});
|
|
4313
|
+
this._interactionHelper.setAsTemp(drawDownloadArea);
|
|
4314
|
+
drawDownloadArea.on('drawend', evt => {
|
|
4315
|
+
const geom = evt.feature.getGeometry();
|
|
4316
|
+
if (geom) {
|
|
4317
|
+
const coordinates = geom.getCoordinates();
|
|
4318
|
+
if (downloadType === 'address') {
|
|
4319
|
+
this._addressService.download(JSON.stringify(coordinates));
|
|
4320
|
+
}
|
|
4321
|
+
else {
|
|
4322
|
+
this._cadastreService.download(JSON.stringify(coordinates));
|
|
4323
|
+
}
|
|
4324
|
+
}
|
|
4325
|
+
});
|
|
4326
|
+
this.map.addInteraction(drawDownloadArea);
|
|
4327
|
+
}
|
|
4291
4328
|
}
|
|
4292
4329
|
onDragEnded(event) {
|
|
4293
4330
|
this.dragPosition = {
|
|
@@ -4509,21 +4546,24 @@ class ToolboxComponent {
|
|
|
4509
4546
|
this._printHelper.setVisibiltyOnDOMElements(htmlElement, true);
|
|
4510
4547
|
});
|
|
4511
4548
|
}
|
|
4512
|
-
|
|
4549
|
+
toggleSelectFeatureHighlight() {
|
|
4513
4550
|
if (this.activeMode === 'select-highlight') {
|
|
4514
|
-
|
|
4551
|
+
this._clearAllInteractions();
|
|
4552
|
+
this.activeMode = null;
|
|
4553
|
+
}
|
|
4554
|
+
else {
|
|
4555
|
+
this._clearAllInteractions();
|
|
4556
|
+
this.activeMode = 'select-highlight';
|
|
4557
|
+
const highlightSelect = new Select$1({
|
|
4558
|
+
layers: [this._drawLayerService.layer],
|
|
4559
|
+
style: null // Leave this as null. Undefined won't do. If it's anything but null, it will change the style of the selected feature and that will be part of undo/redo.
|
|
4560
|
+
});
|
|
4561
|
+
this._interactionHelper.setAsTemp(highlightSelect);
|
|
4562
|
+
highlightSelect.on('select', evt => {
|
|
4563
|
+
this._drawLayerService.setFeaturesSelectedForHighlight(evt.selected);
|
|
4564
|
+
});
|
|
4565
|
+
this.map.addInteraction(highlightSelect);
|
|
4515
4566
|
}
|
|
4516
|
-
this._clearAllInteractions();
|
|
4517
|
-
this.activeMode = 'select-highlight';
|
|
4518
|
-
const highlightSelect = new Select$1({
|
|
4519
|
-
layers: [this._drawLayerService.layer],
|
|
4520
|
-
style: null // Leave this as null. Undefined won't do. If it's anything but null, it will change the style of the selected feature and that will be part of undo/redo.
|
|
4521
|
-
});
|
|
4522
|
-
this._interactionHelper.setAsTemp(highlightSelect);
|
|
4523
|
-
highlightSelect.on('select', evt => {
|
|
4524
|
-
this._drawLayerService.setFeaturesSelectedForHighlight(evt.selected);
|
|
4525
|
-
});
|
|
4526
|
-
this.map.addInteraction(highlightSelect);
|
|
4527
4567
|
}
|
|
4528
4568
|
startDrawMode() {
|
|
4529
4569
|
if (this._active === 'PrintDraw') {
|
|
@@ -4659,15 +4699,15 @@ class ToolboxComponent {
|
|
|
4659
4699
|
const wkt = wktFormat.writeFeature(feature);
|
|
4660
4700
|
return this._geometryService.validate(wkt)
|
|
4661
4701
|
.pipe(map(result => {
|
|
4662
|
-
return result.correctedGeometries?.map(wkt => wktFormat.readFeature(wkt));
|
|
4702
|
+
return typeof (result) === 'string' ? undefined : result.correctedGeometries?.map(wkt => wktFormat.readFeature(wkt));
|
|
4663
4703
|
}));
|
|
4664
4704
|
}
|
|
4665
4705
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToolboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4666
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToolboxComponent, isStandalone: true, selector: "map-toolbox", inputs: { map: "map", showMeasureDistance: "showMeasureDistance", showMeasureArea: "showMeasureArea", collapsed: "collapsed", settings: "settings", profile: "profile", WKTInputEnabled: "WKTInputEnabled", deleteEnabled: "deleteEnabled" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toolbox-wrapper global-wrapper-container\" \n cdkDrag \n cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle-toolbox\" cdkDragHandle>\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"V\u00E6rkt\u00F8jskasse\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n handyman\n </mat-icon> \n <div class=\"right-icons\"> \n <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n \n <div class=\"toolbox-container\">\n @if (!collapsed) {\n <div class=\"toolbox-content\">\n <div class=\"all-tools-container\">\n <div class=\"main-tools\">\n @if (!settings?.undoDisabled) {\n <img \n [src]=\"undoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"undo()\" \n matTooltip=\"Fortryd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Undo\">\n\n <img \n [src]=\"redoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"redo()\" \n matTooltip=\"Gendan\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Redo\">\n }\n @if (settings.externalHelpUrl) {\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"openUrl(settings.externalHelpUrl, $event)\"\n matTooltip=\"Vejledning til anvendelse af systemet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Vejledning til anvendelse af systemet\">\n } \n @if (showInfo){ <img \n [src]=\"showInfoObjBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleShowInfo()\" \n [class.active]=\"activeMode === 'show-info'\"\n matTooltip=\"V\u00E6lg og vis objektdata i tr\u00E6struktur\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"V\u00E6lg og vis objektdata i tr\u00E6 struktur\">\n }\n @if (showDownloadAddresses) {\n <img \n [src]=\"downloadFileBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startDownloadAddresses()\" \n [class.active]=\"activeMode === 'download-addresses'\"\n matTooltip=\"Download adresser\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Download adresser\">\n }\n @if (showDownloadCadastres) {\n <img \n [src]=\"downloadMatriklerBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startDownloadCasdatres()\" \n [class.active]=\"activeMode === 'download-cadastres'\"\n matTooltip=\"Download matrikler\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Download matrikler\">\n }\n @if (showChooseLocations) {\n <img \n [src]=\"splitIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"togglePointPolygonSearch()\"\n [class.active]=\"activeMode === 'search-point' || activeMode === 'search-polygon'\"\n matTooltip=\"V\u00E6lg Lokaliteter ved udpegning i kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"V\u00E6lg Lokaliteter ved udpegning i kortet\">\n }\n @if (showDocumentSearch) {\n <img \n [src]=\"documentSearchBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleDocumentPointSearch()\"\n [class.active]=\"activeMode === 'document-search-by-point'\"\n matTooltip=\"Dokument fra punkt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Dokument fra punkt\">\n\n <img \n [src]=\"documentSearchBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleDocumentPolygonSearch()\"\n [class.active]=\"activeMode === 'document-search-by-polygon'\"\n matTooltip=\"Dokumenter fra polygon\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Dokumenter fra polygon\">\n }\n @if (settings.cowiUrlTemplate) {\n <img \n [src]=\"openCowiPageBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'cowi'\"\n (click)=\"toggleCowiPage()\" \n matTooltip=\"COWI\u00B4s Gadefoto\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"COWI\u00B4s Gadefoto\">\n }\n @if (settings.skraaFotoUrlTemplate) {\n <img \n [src]=\"skrafotoBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'skrafoto'\"\n (click)=\"toggleSkraafotoPage()\" \n matTooltip=\"Opslag p\u00E5 Skr\u00E5fotos\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Skr\u00E5foto\">\n }\n @if (settings.googleStreetUrlTemplate) {\n <img \n [src]=\"streetViewBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'streetview'\"\n (click)=\"toggleGoogleStreetviewPage()\" \n matTooltip=\"Google Streetview\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Google Streetview\">\n }\n @if (showFeatureHighlight) {\n <img \n [src]=\"fremhaevBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'select-highlight'\"\n (click)=\"startSelectFeatureHighlight()\" \n matTooltip=\"Fremh\u00E6v aktivt objekt i listen\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fremh\u00E6v\">\n }\n @if (activeMode === 'draw' || activeMode === 'edit' || activeMode === 'edit-remove' || activeMode === 'search-feature' ||\n activeMode === 'clip-hole' || activeMode === 'split' || activeMode === 'merge-features') {\n <label class=\"snap-toggle\">\n <input type=\"checkbox\" [checked]=\"snap\" (change)=\"onSnapChange($event)\">\n Snap\n </label> \n } \n @if (settings.editEnabled) {\n <img \n [src]=\"editBase64\" \n [class.active]=\"activeMode === 'edit'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEdit()\" \n matTooltip=\"Inds\u00E6t eller flyt punkter i flade/linje\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Inds\u00E6t eller flyt punkter i flade/linje\"> \n <img \n [src]=\"deleteIconBase64\" \n [class.active]=\"activeMode === 'edit-remove'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEditRemovePoints()\" \n matTooltip=\"Slet punkter i flade/linje\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Slet punkter i flade/linje\"> \n }\n @if (settings.cutHoleEnabled) {\n <img \n [src]=\"clipHoleBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'clip-hole'\" \n (click)=\"clipHole()\" \n matTooltip=\"Klip hul i flade\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Klip hul i flade\">\n }\n @if (settings.splitEnabled) {\n <img \n [src]=\"splitBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'split'\"\n (click)=\"split()\" \n matTooltip=\"Del et element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Del et element\">\n }\n @if (settings.changeTypeEnabled) {\n <img \n [src]=\"changeTypeBase64\" \n class=\"compact-icon custom-image-icon\" \n [class.active]=\"activeMode === 'change-type'\" \n (click)=\"startChangeType()\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"Skift status p\u00E5 element\" \n alt=\"Skift status p\u00E5 element\" \n matTooltipPosition=\"below\">\n }\n @if (settings.mergeEnabled) {\n <img \n [src]=\"mergeBase64\"\n class=\"compact-icon custom-image-icon\" \n (click)=\"startMergeFeatures()\" \n matTooltipPosition=\"below\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"Saml flader\" \n [class.active]=\"activeMode === 'merge-features'\">\n }\n @if (settings.centerPoint) {\n <img \n [src]=\"setCenterBase64\" \n [class.active]=\"activeMode === 'center-point'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"setCenterPoint()\" \n matTooltip=\"S\u00E6t centerpunkt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"S\u00E6t centerpunkt\">\n }\n </div>\n <div class=\"geometry-tools\">\n @if (showPickAndShowInList) {\n <img \n [src]=\"sogPolygonBase64\" \n [class.active]=\"activeMode === 'search-feature'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleFeatureSearch()\" \n matTooltip=\"V\u00E6lg og vis emner i listen\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"V\u00E6lg og vis emner i listen\">\n @if (showDrawElement) {\n <img \n [src]=\"drawBase64\" \n [class.active]=\"activeMode === 'draw'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDraw()\"\n matTooltip=\"Tegn element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Tegn element\">\n }\n @if (settings.WKTInputEnabled) {\n <img \n [src]=\"wktIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'wkt-input'\"\n (click)=\"activateShowInputWKT()\" \n matTooltip=\"Inds\u00E6t WKT streng for at importere elementet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Inds\u00E6t WKT streng for at importere elementet\">\n }\n }\n </div>\n <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n <div class=\"measurement-print-tools\">\n <div class=\"measurement-tools\">\n @if (deleteEnabled) {\n <img \n [src]=\"deleteIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'delete'\"\n (click)=\"startDelete()\" \n matTooltip=\"Slet element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Slet element\">\n }\n @if (showMeasureArea || showMeasureDistance) {\n <img \n [src]=\"measureDistanceIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleMeasure()\"\n [class.active]=\"activeMode === 'measure-distance' || activeMode === 'measure-area'\"\n matTooltip=\"M\u00E5l afstand / areal\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"M\u00E5l\">\n }\n </div>\n @if (profile.showPrint) {\n <div class=\"tool-separator print-separator\"></div>\n <div class=\"print-tools\">\n <img \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'Print'\"\n (click)=\"startPrintMode()\" \n matTooltip=\"Sk\u00E6rmprint af kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Sk\u00E6rmprint af kortet\">\n <img \n [src]=\"drawPrintBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'PrintDraw'\"\n (click)=\"startDrawMode()\" \n matTooltip=\"Tegnev\u00E6rkt\u00F8j til print\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Tegnev\u00E6rkt\u00F8j til print\">\n </div>\n }\n </div>\n </div>\n @if (activeMode === 'draw' || activeMode === 'search-feature' || activeMode === 'wkt-input'\n || activeMode === 'change-type' || activeMode === 'merge-features') {\n <mat-select class=\"geometry-selector\" (selectionChange)=\"drawItemChanged($event)\" [(ngModel)]=\"selectedDrawItem\"> \n @for (drawItem of drawItems; track drawItem) {\n @if (activeMode !== 'merge-features' || drawItem.geomType === 'Polygon') {\n <mat-option [value]=\"drawItem\">{{drawItem.name}} <img *ngIf=\"drawItem.iconUrl\" class=\"compact-icon custom-image-icon\" [src]=\"drawItem.iconUrl\"></mat-option>\n }\n }\n </mat-select> \n }\n @if (showInputWKT && activeMode === 'wkt-input') {\n <div class=\"wkt-section\">\n <input matInput class=\"compact-input\" placeholder=\"Inds\u00E6t WKT-streng\" [(ngModel)]=\"WKTString\">\n <div class=\"wkt-actions\">\n <button class=\"compact-button primary\" (click)=\"ReadWKT()\">Indl\u00E6s WKT</button>\n <button class=\"compact-button\" (click)=\"cancelWKT()\">Annuller</button>\n </div>\n </div>\n }\n @if (profile.showPrint) {\n @if (active === \"Print\") {\n <div class=\"print-config\">\n <img \n matTooltip=\"Sk\u00E6rmprint af kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"doPrint()\" \n alt=\"Udskriv\"> \n <span class=\"icon-separator\">i</span>\n <select id=\"formatSelector\" [(ngModel)]=\"format\">\n <option value=\"image/png\" selected>.PNG</option>\n <option value=\"image/jpeg\">.JPG</option>\n </select>\n <select id=\"dimensionSelector\" [(ngModel)]=\"dimId\" (change)=\"handleDimensionSelected()\">\n <option value=\"99\" selected></option>\n <option value=\"0\">1920 X 1080</option>\n <option value=\"1\">1680 X 1050</option>\n <option value=\"2\">1280 X 800</option>\n <option value=\"3\">800 X 600</option>\n </select>\n <input type=\"text\" [(ngModel)]=\"mapWidth\"/> \n <span class=\"icon-separator\">x</span>\n <input type=\"text\" [(ngModel)]=\"mapHeight\"/>\n <button (click)=\"setNewMapDimensions()\">V\u00E6lg</button>\n </div>\n }\n @if (active === \"PrintDraw\") {\n <div class=\"print-draw-config\">\n <span class=\"icon-separator\">Label</span>\n <input type=\"text\" [(ngModel)]=\"printDrawLabel\"/>\n <select id=\"drawToolSelector\" [(ngModel)]=\"printDrawTool\" (change)=\"handlePrintDrawToolChanged()\">\n <option value=\"Arrow\" selected>Pil</option>\n <option value=\"Point\">Punkt</option>\n <option value=\"LineString\">Linje</option>\n <option value=\"Polygon\">Polygon</option>\n <option value=\"Circle\">Cirkel</option>\n <option value=\"Square\">Kvadrat</option>\n <option value=\"Rectangle\">Firkant</option>\n </select>\n <button class=\"compact-button\" (click)=\"handleClearPrintDrawFeatures()\">Ryd</button>\n </div>\n }\n }\n </div>\n @if (activeMode === 'search-point' || activeMode === 'search-polygon') {\n <mat-select \n class=\"search-point-polygon-selector\" \n [(ngModel)]=\"selectedSearchMode\"\n (selectionChange)=\"onSearchModeChanged($event)\">\n <mat-option value=\"search-point\">S\u00F8g med punkt</mat-option>\n <mat-option value=\"search-polygon\">S\u00F8g med polygon</mat-option>\n </mat-select>\n }\n \n @if (activeMode === 'measure-distance' || activeMode === 'measure-area') {\n <mat-select \n class=\"geometry-selector\"\n [(ngModel)]=\"selectedMeasureMode\"\n (selectionChange)=\"onMeasureModeChanged($event)\">\n @if (showMeasureDistance){\n <mat-option value=\"measure-distance\">M\u00E5l afstand</mat-option>\n }\n @if (showMeasureArea){\n <mat-option value=\"measure-area\">M\u00E5l areal</mat-option>\n } \n </mat-select>\n }\n }\n </div>\n @if (!collapsed && activeMode === 'search-feature' && filteredResults.length > 0) {\n <div class=\"geometry-search-panel\">\n <div class=\"buffer-item\">\n <mat-label>Buffer</mat-label>\n <input matInput type=\"number\" name=\"buffer\" [(ngModel)]=\"bufferInMeters\">\n <mat-label>m</mat-label>\n </div>\n <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n <div class=\"item-right\">\n <img \n [src]=\"objectSearchCopyIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event)\" \n matTooltip=\"Kopier\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier\">\n <img \n [src]=\"deleteIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"cutBySearchedObject(item, $event)\" \n matTooltip=\"Fjern\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fjern\">\n <img \n [src]=\"objectSearchCutIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"splitBySearchedObject(item, $event)\" \n matTooltip=\"Opsk\u00E6r\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Opsk\u00E6r\">\n <img \n [src]=\"objectSearchCopyWithBufferIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event, true)\" \n matTooltip=\"Kopier med buffer\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier med buffer\">\n <img \n [src]=\"objectSearchZoomIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"zoomSearchedObject(item, $event)\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Zoom\">\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleItemInfo(item, $event)\" \n matTooltip=\"Info\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Info\">\n </div> \n @if (item.showMetadata) { \n <div class=\"metadata-panel\">\n @for(feature of item.metadata; track feature) {\n <div class=\"feature-item\">\n <div *ngFor=\"let kv of (feature | keyvalue)\" class=\"feature-title\">\n <!-- <div *ngFor=\"let kv of (item.metadata | keyvalue)\" class=\"feature-title\"> -->\n {{ kv.value.name }}:\n <ng-container [ngSwitch]=\"kv.value.kind\">\n <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n {{ kv.key }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n <span *ngSwitchDefault class=\"secondary-item\">{{ kv.value.data }}</span>\n </ng-container>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </mat-option>\n </div>\n }\n @if (!collapsed && activeMode === \"show-info\") {\n <selected-feature-info class=\"info-search-panel\"></selected-feature-info>\n }\n @if (!collapsed && (activeMode === \"search-point\" || activeMode === \"search-polygon\") && geometrySearchResult.length > 0) {\n <div class=\"geometry-search-panel\">\n <mat-option *ngFor=\"let result of geometrySearchResult\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n <mat-icon (click)=\"deleteAllGeometrySearchItem()\" class=\"delete-all-icon\" matTooltip=\"Ryd\">delete</mat-icon>\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"geometry-search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n <div class=\"item-right\">\n @if (item.url) {\n <mat-icon \n class=\"search-item-external\"\n matTooltip=\"\u00C5bn i ny tab\"\n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n (click)=\"openUrl(item.url, $event)\"\n matTooltipPosition=\"above\"\n >info</mat-icon>\n }\n <mat-icon (click)=\"deleteGeometrySearchItem(result, item.id, $event)\" >delete</mat-icon>\n </div>\n </div>\n </mat-option>\n </div>\n }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:10;max-width:95vw;box-shadow:0 2px 10px #0000001a;border-radius:5px;transition:width .3s ease,max-width .3s ease}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.search-item-external{cursor:pointer}.drag-handle-toolbox mat-icon{font-size:18px}.drag-handle-toolbox mat-icon:first-child{display:flex;align-items:center;justify-content:center}.drag-handle-toolbox .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.toggle-icon{cursor:pointer!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}:host{position:relative;display:flex;justify-content:center}:host.expanded{width:auto;min-width:320px;padding:12px}.toolbox-container{display:flex;flex-direction:column;align-items:center;width:100%;min-width:32px;transition:all .3s ease;cursor:default;border-radius:0 0 5px 5px}.toolbox-content{display:flex;flex-direction:column;width:100%;gap:3px;animation:slideDown .3s cubic-bezier(.4,0,.2,1)}.all-tools-container{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;width:100%;justify-content:flex-start;overflow-x:hidden;padding:2px 8px}.all-tools-container::-webkit-scrollbar{height:4px}.all-tools-container::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}.main-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.main-tools .snap-toggle{display:flex;align-items:center;gap:5px;color:#fff;font-size:12px;font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none}.main-tools .snap-toggle input[type=checkbox]{appearance:none;width:18px;height:18px;border:1.5px solid rgba(255,255,255,.6);border-radius:3px;background:transparent;cursor:pointer;position:relative;flex-shrink:0}.main-tools .snap-toggle input[type=checkbox]:checked{background:#f7b528;border-color:#f7b528}.main-tools .snap-toggle input[type=checkbox]:checked:after{content:\"\";position:absolute;left:4px;top:0;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.geometry-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;background:none;border-radius:8px;padding:3px 0}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-tools .compact-icon,.print-tools .compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.print-tools .compact-icon{background:none;color:#fff}.print-tools .compact-icon.active{background:#f7b528!important;border-color:transparent}.print-tools .compact-icon.active:hover{background:#ffffff1a}.print-tools .compact-icon:hover:not(.active){box-shadow:0 4px 12px #0000004d;opacity:.9}.tool-separator{width:1px;height:24px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.3),transparent)}.tool-separator.print-separator{height:28px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent)}.compact-icon{cursor:pointer;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}.compact-icon.active{color:#fff;background:#f7b528!important;border-color:transparent;box-shadow:0 8px 25px #667eea4d}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon:hover:not(.active){color:#fff;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:2px;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease,transform .2s ease}.compact-icon.custom-image-icon.active{background:#ffffff1a;border-color:none;box-shadow:none}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon.custom-image-icon:hover:not(.active){box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.search-point-polygon-selector{width:170px;margin-right:auto;padding:6px}.search-point-polygon-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.search-point-polygon-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.search-point-polygon-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.geometry-selector{width:34%;margin-left:15em;padding:6px}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.geometry-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.geometry-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.geometry-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-select-panel{min-width:fit-content!important;max-width:320px!important;background:#4c4d51!important;border:none!important;border-radius:8px!important;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014!important;margin-top:6px!important;padding:4px 0!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:14px!important;min-height:30px!important;padding:0 14px!important;transition:all .15s ease!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover:not(.mat-mdc-option-disabled){background:#444849!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-active{background:color-mix(in srgb,#000 60%,transparent)!important;color:#fff!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.wkt-section{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease;padding:10px 8px}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:5px;background:#6d6f73;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;min-height:32px;display:flex;align-items:center;justify-content:center;flex:1;box-shadow:0 1px 2px #0000000d;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important}.compact-button.primary.active{background:#f7b528;box-shadow:0 8px 25px #667eea4d;color:#fff}.compact-button.primary.active:hover{box-shadow:0 12px 35px #667eea66}.compact-button.secondary{background:color-mix(in srgb,#000 20%,transparent);color:#fff}.compact-button.secondary:hover{background:color-mix(in srgb,#5a6268 60%,transparent)}.compact-input{padding:8px 10px;border-radius:5px;font-size:13px;transition:all .2s ease;background:#6d6f73;border:none;color:#fff;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important}.compact-input::placeholder{color:#ffffffb3}.compact-input:focus{outline:none;background:#6d6f73;border:1px solid #97989b}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:transparent;border:none;border-radius:8px;animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:#6d6f73;border:none;color:#fff;border-radius:6px;font-size:12px;height:32px;min-height:32px;padding:0 10px}.print-config select:focus,.print-config input:focus,.print-draw-config select:focus,.print-draw-config input:focus{outline:none}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:#6d6f73!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:#6ccb78;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s ease}.print-config button:hover,.print-draw-config button:hover{box-shadow:0 4px 12px #10b9814d}.print-config .icon-separator,.print-draw-config .icon-separator{color:#fff}.info-search-panel{position:absolute;right:0;z-index:1000;width:380px;max-height:360px!important;max-width:430px;background:#4c4d51!important;border:1px solid rgba(255,255,255,.07);border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:0 8px 24px #00000026!important}.geometry-search-panel{position:absolute;right:0;z-index:1000;width:380px;padding:5px}.geometry-search-panel::-webkit-scrollbar{width:12px}.geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.search-result-option{display:block!important;padding:0!important;margin:0!important;background:transparent!important}.search-result-option:last-child{border-bottom:none}.search-result-option .mdc-list-item__primary-text{width:100%!important;margin:0!important;padding:0!important}.result-title{display:flex;align-items:center;justify-content:space-between;width:100%;font-weight:600;color:#bdc1c3cc}.result-title .delete-all-icon{float:none;padding-top:0;font-size:18px;cursor:pointer;color:#bdc1c3cc}.result-title .delete-all-icon:hover{color:#d3d3d3}.search-result-item{display:flex;align-items:center;padding:4px 14px;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.item-left{flex:1;width:100%}.item-header{color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.search-empty-state{padding:32px 16px;text-align:center;color:#757575}.search-empty-state .empty-icon{font-size:40px;width:40px;height:40px;color:#bdbdbd;margin-bottom:12px}.search-empty-state .empty-title{font-size:14px;font-weight:500;margin-bottom:4px}.search-empty-state .empty-subtitle{font-size:12px;color:#9e9e9e}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px}::ng-deep .metadata-panel .feature-item{padding:8px 12px;margin:4px 0;background:#ffffff0d;border-radius:5px;transition:all .2s ease}::ng-deep .metadata-panel .feature-item:hover{background:#ffffff1a;box-shadow:0 2px 8px #00000026}::ng-deep .metadata-panel .feature-item:first-child{margin-top:0}::ng-deep .metadata-panel .feature-item:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title{color:#bdc1c3cc;font-size:13px;line-height:1.6;display:flex;align-items:center;gap:6px;letter-spacing:.2px}::ng-deep .metadata-panel .feature-title:first-child{margin-top:0}::ng-deep .metadata-panel .feature-title:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title img{border-radius:4px;margin-top:4px;box-shadow:0 2px 6px #0003}::ng-deep .metadata-panel .feature-title a{color:#6ccb78;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:color .2s ease}::ng-deep .metadata-panel .feature-title a:hover{color:#85d990;text-decoration:underline}::ng-deep .metadata-panel .feature-title a .link-icon{font-size:16px;width:16px;height:16px}::ng-deep .metadata-panel .secondary-item{color:#fff;font-weight:400}::ng-deep .geometry-search-panel{max-height:360px!important;overflow-y:auto!important;max-width:430px;background:#4c4d51!important;border:1px solid rgba(255,255,255,.07);border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:0 8px 24px #00000026!important}::ng-deep .geometry-search-panel::-webkit-scrollbar{width:4px}::ng-deep .geometry-search-panel::-webkit-scrollbar-track{background:transparent}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#fff3}::ng-deep .geometry-search-panel .buffer-item{display:flex;align-items:center;gap:8px;padding:10px 14px 8px;background:#0003;border-bottom:1px solid rgba(255,255,255,.06)}::ng-deep .geometry-search-panel .buffer-item mat-label{color:#9ca3af;font-size:12px;font-weight:500;letter-spacing:.3px}::ng-deep .geometry-search-panel .buffer-item input{width:52px;margin:0;background:#3a3d42;border:1px solid rgba(255,255,255,.1);border-radius:5px;color:#fff;font-size:12px;padding:4px 8px;text-align:center;outline:none;transition:border-color .15s ease}::ng-deep .geometry-search-panel .buffer-item input:focus{border-color:#f7b528}::ng-deep .geometry-search-panel .result-title{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600;color:#bdc1c3cc;position:sticky;top:0;z-index:1}::ng-deep .geometry-search-panel .result-title .delete-all-icon{float:none;padding-top:0;font-size:18px;cursor:pointer;color:#bdc1c3cc}::ng-deep .geometry-search-panel .result-title .delete-all-icon:hover{color:#d3d3d3}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-direction:column;gap:5px;padding:8px 14px;cursor:pointer;border-left:2px solid transparent;transition:background .12s ease,border-color .12s ease}::ng-deep .geometry-search-panel .search-result-item+.search-result-item{border-top:1px solid rgba(255,255,255,.04)}::ng-deep .geometry-search-panel .search-result-item:hover{background:#ffffff09}::ng-deep .geometry-search-panel .search-result-item:hover .item-header{color:#fff}::ng-deep .geometry-search-panel .search-result-item:last-child{border-radius:0 0 10px 10px}::ng-deep .geometry-search-panel .item-header{color:#d1d5db;font-size:14px;font-weight:500;line-height:1.4;display:block;word-wrap:break-word;overflow-wrap:break-word;transition:color .12s ease}::ng-deep .geometry-search-panel .item-right{display:flex;align-items:center;gap:3px;flex-wrap:wrap;width:100%}::ng-deep .geometry-search-panel .item-right .custom-image-icon{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff!important;border:1px solid rgba(255,255,255,0);border-radius:5px;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease!important}::ng-deep .geometry-search-panel .item-right .custom-image-icon:hover{background:#ffffff0d!important;box-shadow:0 0 0 1px #f7b5282e}::ng-deep .geometry-search-panel .item-right mat-icon{font-size:18px!important;color:#bdc1c3cc}::ng-deep .geometry-search-panel .item-right mat-icon:hover{color:#d3d3d3!important}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff}::ng-deep .geometry-search-panel mat-label{color:#fff}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}@media (max-width: 768px){.toolbox-wrapper{left:.5em;top:8em;max-width:calc(100vw - 2.5em)}.drag-handle-toolbox{padding:3px 6px;gap:6px}.drag-handle-toolbox mat-icon{font-size:16px;width:16px;height:16px}.toggle-icon{font-size:16px!important;width:16px!important;height:16px!important}.toolbox-container{min-width:28px;max-width:calc(100vw - 3em)}:host{padding:8px;min-width:32px}:host.expanded{min-width:280px;padding:10px}.all-tools-container{flex-wrap:wrap;gap:6px;max-height:50vh;overflow-y:auto;padding:0;-ms-overflow-style:none;scrollbar-width:none}.all-tools-container::-webkit-scrollbar{display:none}.main-tools,.geometry-tools,.measurement-print-tools,.print-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.compact-icon{width:28px;height:28px;flex-shrink:0}.measurement-print-tools{padding:3px 0}.geometry-selector{width:30%;margin-bottom:8px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:28px;min-height:28px;padding:0 8px;font-size:12px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:12px}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 2em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config,.print-draw-config{flex-direction:column;align-items:stretch;gap:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:11px;padding:4px 8px;height:28px;min-height:28px}.print-config input,.print-draw-config input{width:50px}.print-config button,.print-draw-config button{padding:4px 8px;font-size:11px;height:28px}.wkt-section .compact-input{font-size:12px;padding:6px 8px}.wkt-section .compact-button{font-size:11px;padding:5px 8px;min-height:28px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:11px!important}.geometry-search-panel{width:calc(100vw - 40px);max-width:400px;left:50%;max-height:70vh}.search-result-item{padding:8px 12px}.item-header{font-size:13px}.result-title{padding:10px 12px;font-size:13px}}.geometry-search-result-item{display:flex;padding:4px 0;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.geometry-search-result-item .item-header{width:260px}.geometry-search-result-item .item-right{display:flex;flex-direction:row;align-items:center;justify-content:flex-end}@media (max-width: 480px){.toolbox-wrapper{left:.25em;top:6em;transform-origin:left top;max-width:calc(100vw - .5em)}.drag-handle-toolbox{padding:2px 4px;gap:4px}.drag-handle-toolbox mat-icon{font-size:14px;width:14px;height:14px}.toggle-icon{font-size:14px!important;width:14px!important;height:14px!important}.toolbox-container{padding:2px;min-width:24px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}.geometry-search-panel{width:calc(100vw - 32px);max-height:60vh}.search-result-item{padding:6px 10px}.item-header{font-size:12px;-webkit-line-clamp:1}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SelectedFeatureInfoComponent, selector: "selected-feature-info" }] });
|
|
4706
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToolboxComponent, isStandalone: true, selector: "map-toolbox", inputs: { map: "map", showMeasureDistance: "showMeasureDistance", showMeasureArea: "showMeasureArea", collapsed: "collapsed", settings: "settings", profile: "profile", WKTInputEnabled: "WKTInputEnabled", deleteEnabled: "deleteEnabled" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toolbox-wrapper global-wrapper-container\" \n cdkDrag \n cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle-toolbox\" cdkDragHandle>\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"V\u00E6rkt\u00F8jskasse\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n handyman\n </mat-icon> \n <div class=\"right-icons\"> \n <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n \n <div class=\"toolbox-container\">\n @if (!collapsed) {\n <div class=\"toolbox-content\">\n <div class=\"all-tools-container\">\n <div class=\"main-tools\">\n @if (!settings?.undoDisabled) {\n <img \n [src]=\"undoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"undo()\" \n matTooltip=\"Fortryd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Undo\">\n\n <img \n [src]=\"redoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"redo()\" \n matTooltip=\"Gendan\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Redo\">\n }\n @if (settings.externalHelpUrl) {\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"openUrl(settings.externalHelpUrl, $event)\"\n matTooltip=\"Vejledning til anvendelse af systemet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Vejledning til anvendelse af systemet\">\n } \n @if (showInfo){ <img \n [src]=\"showInfoObjBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleShowInfo()\" \n [class.active]=\"activeMode === 'show-info'\"\n matTooltip=\"V\u00E6lg og vis objektdata i tr\u00E6struktur\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"V\u00E6lg og vis objektdata i tr\u00E6 struktur\">\n }\n @if (showDownloadAddresses) {\n <img \n [src]=\"downloadFileBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleDownloadAddresses()\" \n [class.active]=\"activeMode === 'download-addresses'\"\n matTooltip=\"Download adresser\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Download adresser\">\n }\n @if (showDownloadCadastres) {\n <img \n [src]=\"downloadMatriklerBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleDownloadCasdatres()\" \n [class.active]=\"activeMode === 'download-cadastres'\"\n matTooltip=\"Download matrikler\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Download matrikler\">\n }\n @if (showChooseLocations) {\n <img \n [src]=\"splitIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"togglePointPolygonSearch()\"\n [class.active]=\"activeMode === 'search-point' || activeMode === 'search-polygon'\"\n matTooltip=\"V\u00E6lg Lokaliteter ved udpegning i kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"V\u00E6lg Lokaliteter ved udpegning i kortet\">\n }\n @if (showDocumentSearch) {\n <img \n [src]=\"documentSearchBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleDocumentPointSearch()\"\n [class.active]=\"activeMode === 'document-search-by-point'\"\n matTooltip=\"Dokument fra punkt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Dokument fra punkt\">\n\n <img \n [src]=\"documentSearchBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleDocumentPolygonSearch()\"\n [class.active]=\"activeMode === 'document-search-by-polygon'\"\n matTooltip=\"Dokumenter fra polygon\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Dokumenter fra polygon\">\n }\n @if (settings.cowiUrlTemplate) {\n <img \n [src]=\"openCowiPageBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'cowi'\"\n (click)=\"toggleCowiPage()\" \n matTooltip=\"COWI\u00B4s Gadefoto\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"COWI\u00B4s Gadefoto\">\n }\n @if (settings.skraaFotoUrlTemplate) {\n <img \n [src]=\"skrafotoBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'skrafoto'\"\n (click)=\"toggleSkraafotoPage()\" \n matTooltip=\"Opslag p\u00E5 Skr\u00E5fotos\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Skr\u00E5foto\">\n }\n @if (settings.googleStreetUrlTemplate) {\n <img \n [src]=\"streetViewBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'streetview'\"\n (click)=\"toggleGoogleStreetviewPage()\" \n matTooltip=\"Google Streetview\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Google Streetview\">\n }\n @if (showFeatureHighlight) {\n <img \n [src]=\"fremhaevBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'select-highlight'\"\n (click)=\"toggleSelectFeatureHighlight()\" \n matTooltip=\"Fremh\u00E6v aktivt objekt i listen\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fremh\u00E6v\">\n }\n @if (activeMode === 'draw' || activeMode === 'edit' || activeMode === 'edit-remove' || activeMode === 'search-feature' ||\n activeMode === 'clip-hole' || activeMode === 'split' || activeMode === 'merge-features') {\n <label class=\"snap-toggle\">\n <input type=\"checkbox\" [checked]=\"snap\" (change)=\"onSnapChange($event)\">\n Snap\n </label> \n } \n @if (settings.editEnabled) {\n <img \n [src]=\"editBase64\" \n [class.active]=\"activeMode === 'edit'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEdit()\" \n matTooltip=\"Inds\u00E6t eller flyt punkter i flade/linje\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Inds\u00E6t eller flyt punkter i flade/linje\"> \n <img \n [src]=\"deleteIconBase64\" \n [class.active]=\"activeMode === 'edit-remove'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEditRemovePoints()\" \n matTooltip=\"Slet punkter i flade/linje\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Slet punkter i flade/linje\"> \n }\n @if (settings.cutHoleEnabled) {\n <img \n [src]=\"clipHoleBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'clip-hole'\" \n (click)=\"clipHole()\" \n matTooltip=\"Klip hul i flade\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Klip hul i flade\">\n }\n @if (settings.splitEnabled) {\n <img \n [src]=\"splitBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'split'\"\n (click)=\"split()\" \n matTooltip=\"Del et element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Del et element\">\n }\n @if (settings.changeTypeEnabled) {\n <img \n [src]=\"changeTypeBase64\" \n class=\"compact-icon custom-image-icon\" \n [class.active]=\"activeMode === 'change-type'\" \n (click)=\"startChangeType()\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"Skift status p\u00E5 element\" \n alt=\"Skift status p\u00E5 element\" \n matTooltipPosition=\"below\">\n }\n @if (settings.mergeEnabled) {\n <img \n [src]=\"mergeBase64\"\n class=\"compact-icon custom-image-icon\" \n (click)=\"startMergeFeatures()\" \n matTooltipPosition=\"below\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"Saml flader\" \n [class.active]=\"activeMode === 'merge-features'\">\n }\n @if (settings.centerPoint) {\n <img \n [src]=\"setCenterBase64\" \n [class.active]=\"activeMode === 'center-point'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"setCenterPoint()\" \n matTooltip=\"S\u00E6t centerpunkt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"S\u00E6t centerpunkt\">\n }\n </div>\n <div class=\"geometry-tools\">\n @if (showPickAndShowInList) {\n <img \n [src]=\"sogPolygonBase64\" \n [class.active]=\"activeMode === 'search-feature'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleFeatureSearch()\" \n matTooltip=\"V\u00E6lg og vis emner i listen\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"V\u00E6lg og vis emner i listen\">\n @if (showDrawElement) {\n <img \n [src]=\"drawBase64\" \n [class.active]=\"activeMode === 'draw'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleDraw()\"\n matTooltip=\"Tegn element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Tegn element\">\n }\n @if (settings.WKTInputEnabled) {\n <img \n [src]=\"wktIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'wkt-input'\"\n (click)=\"activateShowInputWKT()\" \n matTooltip=\"Inds\u00E6t WKT streng for at importere elementet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Inds\u00E6t WKT streng for at importere elementet\">\n }\n }\n </div>\n <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n <div class=\"measurement-print-tools\">\n <div class=\"measurement-tools\">\n @if (deleteEnabled) {\n <img \n [src]=\"deleteIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'delete'\"\n (click)=\"startDelete()\" \n matTooltip=\"Slet element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Slet element\">\n }\n @if (showMeasureArea || showMeasureDistance) {\n <img \n [src]=\"measureDistanceIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleMeasure()\"\n [class.active]=\"activeMode === 'measure-distance' || activeMode === 'measure-area'\"\n matTooltip=\"M\u00E5l afstand / areal\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"M\u00E5l\">\n }\n </div>\n @if (profile.showPrint) {\n <div class=\"tool-separator print-separator\"></div>\n <div class=\"print-tools\">\n <img \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'Print'\"\n (click)=\"startPrintMode()\" \n matTooltip=\"Sk\u00E6rmprint af kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Sk\u00E6rmprint af kortet\">\n <img \n [src]=\"drawPrintBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'PrintDraw'\"\n (click)=\"startDrawMode()\" \n matTooltip=\"Tegnev\u00E6rkt\u00F8j til print\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Tegnev\u00E6rkt\u00F8j til print\">\n </div>\n }\n </div>\n </div>\n @if (activeMode === 'draw' || activeMode === 'search-feature' || activeMode === 'wkt-input'\n || activeMode === 'change-type' || activeMode === 'merge-features') {\n <mat-select class=\"geometry-selector\" (selectionChange)=\"drawItemChanged($event)\" [(ngModel)]=\"selectedDrawItem\"> \n @for (drawItem of drawItems; track drawItem) {\n @if (activeMode !== 'merge-features' || drawItem.geomType === 'Polygon') {\n <mat-option [value]=\"drawItem\">{{drawItem.name}} <img *ngIf=\"drawItem.iconUrl\" class=\"compact-icon custom-image-icon\" [src]=\"drawItem.iconUrl\"></mat-option>\n }\n }\n </mat-select> \n }\n @if (showInputWKT && activeMode === 'wkt-input') {\n <div class=\"wkt-section\">\n <input matInput class=\"compact-input\" placeholder=\"Inds\u00E6t WKT-streng\" [(ngModel)]=\"WKTString\">\n <div class=\"wkt-actions\">\n <button class=\"compact-button primary\" (click)=\"ReadWKT()\">Indl\u00E6s WKT</button>\n <button class=\"compact-button\" (click)=\"cancelWKT()\">Annuller</button>\n </div>\n </div>\n }\n @if (profile.showPrint) {\n @if (active === \"Print\") {\n <div class=\"print-config\">\n <img \n matTooltip=\"Sk\u00E6rmprint af kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"doPrint()\" \n alt=\"Udskriv\"> \n <span class=\"icon-separator\">i</span>\n <select id=\"formatSelector\" [(ngModel)]=\"format\">\n <option value=\"image/png\" selected>.PNG</option>\n <option value=\"image/jpeg\">.JPG</option>\n </select>\n <select id=\"dimensionSelector\" [(ngModel)]=\"dimId\" (change)=\"handleDimensionSelected()\">\n <option value=\"99\" selected></option>\n <option value=\"0\">1920 X 1080</option>\n <option value=\"1\">1680 X 1050</option>\n <option value=\"2\">1280 X 800</option>\n <option value=\"3\">800 X 600</option>\n </select>\n <input type=\"text\" [(ngModel)]=\"mapWidth\"/> \n <span class=\"icon-separator\">x</span>\n <input type=\"text\" [(ngModel)]=\"mapHeight\"/>\n <button (click)=\"setNewMapDimensions()\">V\u00E6lg</button>\n </div>\n }\n @if (active === \"PrintDraw\") {\n <div class=\"print-draw-config\">\n <span class=\"icon-separator\">Label</span>\n <input type=\"text\" [(ngModel)]=\"printDrawLabel\"/>\n <select id=\"drawToolSelector\" [(ngModel)]=\"printDrawTool\" (change)=\"handlePrintDrawToolChanged()\">\n <option value=\"Arrow\" selected>Pil</option>\n <option value=\"Point\">Punkt</option>\n <option value=\"LineString\">Linje</option>\n <option value=\"Polygon\">Polygon</option>\n <option value=\"Circle\">Cirkel</option>\n <option value=\"Square\">Kvadrat</option>\n <option value=\"Rectangle\">Firkant</option>\n </select>\n <button class=\"compact-button\" (click)=\"handleClearPrintDrawFeatures()\">Ryd</button>\n </div>\n }\n }\n </div>\n @if (activeMode === 'search-point' || activeMode === 'search-polygon') {\n <mat-select \n class=\"search-point-polygon-selector\" \n [(ngModel)]=\"selectedSearchMode\"\n (selectionChange)=\"onSearchModeChanged($event)\">\n <mat-option value=\"search-point\">S\u00F8g med punkt</mat-option>\n <mat-option value=\"search-polygon\">S\u00F8g med polygon</mat-option>\n </mat-select>\n }\n \n @if (activeMode === 'measure-distance' || activeMode === 'measure-area') {\n <mat-select \n class=\"geometry-selector\"\n [(ngModel)]=\"selectedMeasureMode\"\n (selectionChange)=\"onMeasureModeChanged($event)\">\n @if (showMeasureDistance){\n <mat-option value=\"measure-distance\">M\u00E5l afstand</mat-option>\n }\n @if (showMeasureArea){\n <mat-option value=\"measure-area\">M\u00E5l areal</mat-option>\n } \n </mat-select>\n }\n }\n </div>\n @if (!collapsed && activeMode === 'search-feature' && filteredResults.length > 0) {\n <div class=\"geometry-search-panel\">\n <div class=\"buffer-item\">\n <mat-label>Buffer</mat-label>\n <input matInput type=\"number\" name=\"buffer\" [(ngModel)]=\"bufferInMeters\">\n <mat-label>m</mat-label>\n </div>\n <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n <div class=\"item-right\">\n <img \n [src]=\"objectSearchCopyIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event)\" \n matTooltip=\"Kopier\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier\">\n <img \n [src]=\"deleteIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"cutBySearchedObject(item, $event)\" \n matTooltip=\"Fjern\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fjern\">\n <img \n [src]=\"objectSearchCutIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"splitBySearchedObject(item, $event)\" \n matTooltip=\"Opsk\u00E6r\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Opsk\u00E6r\">\n <img \n [src]=\"objectSearchCopyWithBufferIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event, true)\" \n matTooltip=\"Kopier med buffer\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier med buffer\">\n <img \n [src]=\"objectSearchZoomIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"zoomSearchedObject(item, $event)\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Zoom\">\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleItemInfo(item, $event)\" \n matTooltip=\"Info\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Info\">\n </div> \n @if (item.showMetadata) { \n <div class=\"metadata-panel\">\n @for(feature of item.metadata; track feature) {\n <div class=\"feature-item\">\n <div *ngFor=\"let kv of (feature | keyvalue)\" class=\"feature-title\">\n <!-- <div *ngFor=\"let kv of (item.metadata | keyvalue)\" class=\"feature-title\"> -->\n {{ kv.value.name }}:\n <ng-container [ngSwitch]=\"kv.value.kind\">\n <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n {{ kv.key }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n <span *ngSwitchDefault class=\"secondary-item\">{{ kv.value.data }}</span>\n </ng-container>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </mat-option>\n </div>\n }\n @if (!collapsed && activeMode === \"show-info\") {\n <selected-feature-info class=\"info-search-panel\"></selected-feature-info>\n }\n @if (!collapsed && (activeMode === \"search-point\" || activeMode === \"search-polygon\") && geometrySearchResult.length > 0) {\n <div class=\"geometry-search-panel\">\n <mat-option *ngFor=\"let result of geometrySearchResult\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n <mat-icon (click)=\"deleteAllGeometrySearchItemForLayer(result.layer.id)\" class=\"delete-all-icon\" matTooltip=\"Ryd gruppe\">delete</mat-icon>\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"geometry-search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n <div class=\"item-right\">\n @if (item.url) {\n <a class=\"goto-link\" href=\"{{ item.url }}\" target=\"_blank\" rel=\"noopener noreferrer\">G\u00E5 til</a>\n }\n <mat-icon (click)=\"deleteGeometrySearchItem(result, item.id, $event)\" matTooltip=\"Slet\">delete</mat-icon>\n </div>\n </div>\n </mat-option>\n </div>\n }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:10;max-width:95vw;box-shadow:0 2px 10px #0000001a;border-radius:5px;transition:width .3s ease,max-width .3s ease}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.goto-link{color:#d2e9f0;font-weight:600;text-decoration:underline}.goto-link:hover{color:#cbf1f0}.search-item-external{cursor:pointer}.drag-handle-toolbox mat-icon{font-size:18px}.drag-handle-toolbox mat-icon:first-child{display:flex;align-items:center;justify-content:center}.drag-handle-toolbox .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.toggle-icon{cursor:pointer!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}:host{position:relative;display:flex;justify-content:center}:host.expanded{width:auto;min-width:320px;padding:12px}.toolbox-container{display:flex;flex-direction:column;align-items:center;width:100%;min-width:32px;transition:all .3s ease;cursor:default;border-radius:0 0 5px 5px}.toolbox-content{display:flex;flex-direction:column;width:100%;gap:3px;animation:slideDown .3s cubic-bezier(.4,0,.2,1)}.all-tools-container{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;width:100%;justify-content:flex-start;overflow-x:hidden;padding:2px 8px}.all-tools-container::-webkit-scrollbar{height:4px}.all-tools-container::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}.main-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.main-tools .snap-toggle{display:flex;align-items:center;gap:5px;color:#fff;font-size:12px;font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none}.main-tools .snap-toggle input[type=checkbox]{appearance:none;width:18px;height:18px;border:1.5px solid rgba(255,255,255,.6);border-radius:3px;background:transparent;cursor:pointer;position:relative;flex-shrink:0}.main-tools .snap-toggle input[type=checkbox]:checked{background:#f7b528;border-color:#f7b528}.main-tools .snap-toggle input[type=checkbox]:checked:after{content:\"\";position:absolute;left:4px;top:0;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.geometry-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;background:none;border-radius:8px;padding:3px 0}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-tools .compact-icon,.print-tools .compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.print-tools .compact-icon{background:none;color:#fff}.print-tools .compact-icon.active{background:#f7b528!important;border-color:transparent}.print-tools .compact-icon.active:hover{background:#ffffff1a}.print-tools .compact-icon:hover:not(.active){box-shadow:0 4px 12px #0000004d;opacity:.9}.tool-separator{width:1px;height:24px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.3),transparent)}.tool-separator.print-separator{height:28px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent)}.compact-icon{cursor:pointer;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}.compact-icon.active{color:#fff;background:#f7b528!important;border-color:transparent;box-shadow:0 8px 25px #667eea4d}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon:hover:not(.active){color:#fff;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:2px;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease,transform .2s ease}.compact-icon.custom-image-icon.active{background:#ffffff1a;border-color:none;box-shadow:none}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon.custom-image-icon:hover:not(.active){box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.search-point-polygon-selector{width:170px;margin-right:auto;padding:6px}.search-point-polygon-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.search-point-polygon-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.search-point-polygon-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.geometry-selector{width:34%;margin-left:15em;padding:6px}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.geometry-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.geometry-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.geometry-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-select-panel{min-width:fit-content!important;max-width:320px!important;background:#4c4d51!important;border:none!important;border-radius:8px!important;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014!important;margin-top:6px!important;padding:4px 0!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:14px!important;min-height:30px!important;padding:0 14px!important;transition:all .15s ease!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover:not(.mat-mdc-option-disabled){background:#444849!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-active{background:color-mix(in srgb,#000 60%,transparent)!important;color:#fff!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.wkt-section{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease;padding:10px 8px}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:5px;background:#6d6f73;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;min-height:32px;display:flex;align-items:center;justify-content:center;flex:1;box-shadow:0 1px 2px #0000000d;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important}.compact-button.primary.active{background:#f7b528;box-shadow:0 8px 25px #667eea4d;color:#fff}.compact-button.primary.active:hover{box-shadow:0 12px 35px #667eea66}.compact-button.secondary{background:color-mix(in srgb,#000 20%,transparent);color:#fff}.compact-button.secondary:hover{background:color-mix(in srgb,#5a6268 60%,transparent)}.compact-input{padding:8px 10px;border-radius:5px;font-size:13px;transition:all .2s ease;background:#6d6f73;border:none;color:#fff;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important}.compact-input::placeholder{color:#ffffffb3}.compact-input:focus{outline:none;background:#6d6f73;border:1px solid #97989b}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:transparent;border:none;border-radius:8px;animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:#6d6f73;border:none;color:#fff;border-radius:6px;font-size:12px;height:32px;min-height:32px;padding:0 10px}.print-config select:focus,.print-config input:focus,.print-draw-config select:focus,.print-draw-config input:focus{outline:none}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:#6d6f73!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:#6ccb78;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s ease}.print-config button:hover,.print-draw-config button:hover{box-shadow:0 4px 12px #10b9814d}.print-config .icon-separator,.print-draw-config .icon-separator{color:#fff}.info-search-panel{position:absolute;right:0;z-index:1000;width:380px;max-height:360px!important;max-width:430px;background:#4c4d51!important;border:1px solid rgba(255,255,255,.07);border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:0 8px 24px #00000026!important}.geometry-search-panel{position:absolute;right:0;z-index:1000;width:380px;padding:5px}.geometry-search-panel::-webkit-scrollbar{width:12px}.geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.search-result-option{display:block!important;padding:0!important;margin:0!important;background:transparent!important}.search-result-option:last-child{border-bottom:none}.search-result-option .mdc-list-item__primary-text{width:100%!important;margin:0!important;padding:0!important}.result-title{display:flex;align-items:center;justify-content:space-between;width:100%;font-weight:600;color:#bdc1c3cc}.result-title .delete-all-icon{float:none;padding-top:0;font-size:18px;cursor:pointer;color:#bdc1c3cc}.result-title .delete-all-icon:hover{color:#d3d3d3}.search-result-item{display:flex;align-items:center;padding:4px 14px;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.item-left{flex:1;width:100%}.item-header{color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.search-empty-state{padding:32px 16px;text-align:center;color:#757575}.search-empty-state .empty-icon{font-size:40px;width:40px;height:40px;color:#bdbdbd;margin-bottom:12px}.search-empty-state .empty-title{font-size:14px;font-weight:500;margin-bottom:4px}.search-empty-state .empty-subtitle{font-size:12px;color:#9e9e9e}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px}::ng-deep .metadata-panel .feature-item{padding:8px 12px;margin:4px 0;background:#ffffff0d;border-radius:5px;transition:all .2s ease}::ng-deep .metadata-panel .feature-item:hover{background:#ffffff1a;box-shadow:0 2px 8px #00000026}::ng-deep .metadata-panel .feature-item:first-child{margin-top:0}::ng-deep .metadata-panel .feature-item:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title{color:#bdc1c3cc;font-size:13px;line-height:1.6;display:flex;align-items:center;gap:6px;letter-spacing:.2px}::ng-deep .metadata-panel .feature-title:first-child{margin-top:0}::ng-deep .metadata-panel .feature-title:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title img{border-radius:4px;margin-top:4px;box-shadow:0 2px 6px #0003}::ng-deep .metadata-panel .feature-title a{color:#6ccb78;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:color .2s ease}::ng-deep .metadata-panel .feature-title a:hover{color:#85d990;text-decoration:underline}::ng-deep .metadata-panel .feature-title a .link-icon{font-size:16px;width:16px;height:16px}::ng-deep .metadata-panel .secondary-item{color:#fff;font-weight:400}::ng-deep .geometry-search-panel{max-height:360px!important;overflow-y:auto!important;max-width:430px;background:#4c4d51!important;border:1px solid rgba(255,255,255,.07);border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:0 8px 24px #00000026!important}::ng-deep .geometry-search-panel::-webkit-scrollbar{width:4px}::ng-deep .geometry-search-panel::-webkit-scrollbar-track{background:transparent}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#fff3}::ng-deep .geometry-search-panel .buffer-item{display:flex;align-items:center;gap:8px;padding:10px 14px 8px;background:#0003;border-bottom:1px solid rgba(255,255,255,.06)}::ng-deep .geometry-search-panel .buffer-item mat-label{color:#9ca3af;font-size:12px;font-weight:500;letter-spacing:.3px}::ng-deep .geometry-search-panel .buffer-item input{width:52px;margin:0;background:#3a3d42;border:1px solid rgba(255,255,255,.1);border-radius:5px;color:#fff;font-size:12px;padding:4px 8px;text-align:center;outline:none;transition:border-color .15s ease}::ng-deep .geometry-search-panel .buffer-item input:focus{border-color:#f7b528}::ng-deep .geometry-search-panel .result-title{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600;color:#bdc1c3cc;position:sticky;top:0;z-index:1}::ng-deep .geometry-search-panel .result-title .delete-all-icon{float:none;padding-top:0;font-size:18px;cursor:pointer;color:#bdc1c3cc}::ng-deep .geometry-search-panel .result-title .delete-all-icon:hover{color:#d3d3d3}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-direction:column;gap:5px;padding:8px 14px;cursor:pointer;border-left:2px solid transparent;transition:background .12s ease,border-color .12s ease}::ng-deep .geometry-search-panel .search-result-item+.search-result-item{border-top:1px solid rgba(255,255,255,.04)}::ng-deep .geometry-search-panel .search-result-item:hover{background:#ffffff09}::ng-deep .geometry-search-panel .search-result-item:hover .item-header{color:#fff}::ng-deep .geometry-search-panel .search-result-item:last-child{border-radius:0 0 10px 10px}::ng-deep .geometry-search-panel .item-header{color:#d1d5db;font-size:14px;font-weight:500;line-height:1.4;display:block;word-wrap:break-word;overflow-wrap:break-word;transition:color .12s ease}::ng-deep .geometry-search-panel .item-right{display:flex;align-items:center;gap:3px;flex-wrap:wrap;width:100%}::ng-deep .geometry-search-panel .item-right .custom-image-icon{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff!important;border:1px solid rgba(255,255,255,0);border-radius:5px;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease!important}::ng-deep .geometry-search-panel .item-right .custom-image-icon:hover{background:#ffffff0d!important;box-shadow:0 0 0 1px #f7b5282e}::ng-deep .geometry-search-panel .item-right mat-icon{font-size:18px!important;color:#bdc1c3cc}::ng-deep .geometry-search-panel .item-right mat-icon:hover{color:#d3d3d3!important}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff}::ng-deep .geometry-search-panel mat-label{color:#fff}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}@media (max-width: 768px){.toolbox-wrapper{left:.5em;top:8em;max-width:calc(100vw - 2.5em)}.drag-handle-toolbox{padding:3px 6px;gap:6px}.drag-handle-toolbox mat-icon{font-size:16px;width:16px;height:16px}.toggle-icon{font-size:16px!important;width:16px!important;height:16px!important}.toolbox-container{min-width:28px;max-width:calc(100vw - 3em)}:host{padding:8px;min-width:32px}:host.expanded{min-width:280px;padding:10px}.all-tools-container{flex-wrap:wrap;gap:6px;max-height:50vh;overflow-y:auto;padding:0;-ms-overflow-style:none;scrollbar-width:none}.all-tools-container::-webkit-scrollbar{display:none}.main-tools,.geometry-tools,.measurement-print-tools,.print-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.compact-icon{width:28px;height:28px;flex-shrink:0}.measurement-print-tools{padding:3px 0}.geometry-selector{width:30%;margin-bottom:8px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:28px;min-height:28px;padding:0 8px;font-size:12px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:12px}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 2em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config,.print-draw-config{flex-direction:column;align-items:stretch;gap:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:11px;padding:4px 8px;height:28px;min-height:28px}.print-config input,.print-draw-config input{width:50px}.print-config button,.print-draw-config button{padding:4px 8px;font-size:11px;height:28px}.wkt-section .compact-input{font-size:12px;padding:6px 8px}.wkt-section .compact-button{font-size:11px;padding:5px 8px;min-height:28px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:11px!important}.geometry-search-panel{width:calc(100vw - 40px);max-width:400px;left:50%;max-height:70vh}.search-result-item{padding:8px 12px}.item-header{font-size:13px}.result-title{padding:10px 12px;font-size:13px}}.geometry-search-result-item{display:flex;padding:4px 0;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.geometry-search-result-item .item-header{width:260px}.geometry-search-result-item .item-right{display:flex;flex-direction:row;align-items:center;justify-content:flex-end}@media (max-width: 480px){.toolbox-wrapper{left:.25em;top:6em;transform-origin:left top;max-width:calc(100vw - .5em)}.drag-handle-toolbox{padding:2px 4px;gap:4px}.drag-handle-toolbox mat-icon{font-size:14px;width:14px;height:14px}.toggle-icon{font-size:14px!important;width:14px!important;height:14px!important}.toolbox-container{padding:2px;min-width:24px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}.geometry-search-panel{width:calc(100vw - 32px);max-height:60vh}.search-result-item{padding:6px 10px}.item-header{font-size:12px;-webkit-line-clamp:1}}.goto-link{color:#2e98eb;font-weight:600;font-size:12px;text-decoration:none;padding:2px 7px;transition:all .15s ease;white-space:nowrap;line-height:1;display:inline-flex;align-items:center}.goto-link:hover{color:#2180c9;text-decoration:underline}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SelectedFeatureInfoComponent, selector: "selected-feature-info" }] });
|
|
4667
4707
|
}
|
|
4668
4708
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToolboxComponent, decorators: [{
|
|
4669
4709
|
type: Component,
|
|
4670
|
-
args: [{ selector: 'map-toolbox', imports: [FormsModule, CommonModule, MatIconModule, MatOptionModule, MatSelectModule, DragDropModule, MatTooltipModule, SelectedFeatureInfoComponent], template: "<div class=\"toolbox-wrapper global-wrapper-container\" \n cdkDrag \n cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle-toolbox\" cdkDragHandle>\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"V\u00E6rkt\u00F8jskasse\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n handyman\n </mat-icon> \n <div class=\"right-icons\"> \n <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n \n <div class=\"toolbox-container\">\n @if (!collapsed) {\n <div class=\"toolbox-content\">\n <div class=\"all-tools-container\">\n <div class=\"main-tools\">\n @if (!settings?.undoDisabled) {\n <img \n [src]=\"undoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"undo()\" \n matTooltip=\"Fortryd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Undo\">\n\n <img \n [src]=\"redoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"redo()\" \n matTooltip=\"Gendan\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Redo\">\n }\n @if (settings.externalHelpUrl) {\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"openUrl(settings.externalHelpUrl, $event)\"\n matTooltip=\"Vejledning til anvendelse af systemet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Vejledning til anvendelse af systemet\">\n } \n @if (showInfo){ <img \n [src]=\"showInfoObjBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleShowInfo()\" \n [class.active]=\"activeMode === 'show-info'\"\n matTooltip=\"V\u00E6lg og vis objektdata i tr\u00E6struktur\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"V\u00E6lg og vis objektdata i tr\u00E6 struktur\">\n }\n @if (showDownloadAddresses) {\n <img \n [src]=\"downloadFileBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startDownloadAddresses()\" \n [class.active]=\"activeMode === 'download-addresses'\"\n matTooltip=\"Download adresser\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Download adresser\">\n }\n @if (showDownloadCadastres) {\n <img \n [src]=\"downloadMatriklerBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startDownloadCasdatres()\" \n [class.active]=\"activeMode === 'download-cadastres'\"\n matTooltip=\"Download matrikler\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Download matrikler\">\n }\n @if (showChooseLocations) {\n <img \n [src]=\"splitIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"togglePointPolygonSearch()\"\n [class.active]=\"activeMode === 'search-point' || activeMode === 'search-polygon'\"\n matTooltip=\"V\u00E6lg Lokaliteter ved udpegning i kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"V\u00E6lg Lokaliteter ved udpegning i kortet\">\n }\n @if (showDocumentSearch) {\n <img \n [src]=\"documentSearchBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleDocumentPointSearch()\"\n [class.active]=\"activeMode === 'document-search-by-point'\"\n matTooltip=\"Dokument fra punkt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Dokument fra punkt\">\n\n <img \n [src]=\"documentSearchBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleDocumentPolygonSearch()\"\n [class.active]=\"activeMode === 'document-search-by-polygon'\"\n matTooltip=\"Dokumenter fra polygon\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Dokumenter fra polygon\">\n }\n @if (settings.cowiUrlTemplate) {\n <img \n [src]=\"openCowiPageBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'cowi'\"\n (click)=\"toggleCowiPage()\" \n matTooltip=\"COWI\u00B4s Gadefoto\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"COWI\u00B4s Gadefoto\">\n }\n @if (settings.skraaFotoUrlTemplate) {\n <img \n [src]=\"skrafotoBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'skrafoto'\"\n (click)=\"toggleSkraafotoPage()\" \n matTooltip=\"Opslag p\u00E5 Skr\u00E5fotos\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Skr\u00E5foto\">\n }\n @if (settings.googleStreetUrlTemplate) {\n <img \n [src]=\"streetViewBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'streetview'\"\n (click)=\"toggleGoogleStreetviewPage()\" \n matTooltip=\"Google Streetview\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Google Streetview\">\n }\n @if (showFeatureHighlight) {\n <img \n [src]=\"fremhaevBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'select-highlight'\"\n (click)=\"startSelectFeatureHighlight()\" \n matTooltip=\"Fremh\u00E6v aktivt objekt i listen\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fremh\u00E6v\">\n }\n @if (activeMode === 'draw' || activeMode === 'edit' || activeMode === 'edit-remove' || activeMode === 'search-feature' ||\n activeMode === 'clip-hole' || activeMode === 'split' || activeMode === 'merge-features') {\n <label class=\"snap-toggle\">\n <input type=\"checkbox\" [checked]=\"snap\" (change)=\"onSnapChange($event)\">\n Snap\n </label> \n } \n @if (settings.editEnabled) {\n <img \n [src]=\"editBase64\" \n [class.active]=\"activeMode === 'edit'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEdit()\" \n matTooltip=\"Inds\u00E6t eller flyt punkter i flade/linje\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Inds\u00E6t eller flyt punkter i flade/linje\"> \n <img \n [src]=\"deleteIconBase64\" \n [class.active]=\"activeMode === 'edit-remove'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEditRemovePoints()\" \n matTooltip=\"Slet punkter i flade/linje\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Slet punkter i flade/linje\"> \n }\n @if (settings.cutHoleEnabled) {\n <img \n [src]=\"clipHoleBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'clip-hole'\" \n (click)=\"clipHole()\" \n matTooltip=\"Klip hul i flade\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Klip hul i flade\">\n }\n @if (settings.splitEnabled) {\n <img \n [src]=\"splitBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'split'\"\n (click)=\"split()\" \n matTooltip=\"Del et element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Del et element\">\n }\n @if (settings.changeTypeEnabled) {\n <img \n [src]=\"changeTypeBase64\" \n class=\"compact-icon custom-image-icon\" \n [class.active]=\"activeMode === 'change-type'\" \n (click)=\"startChangeType()\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"Skift status p\u00E5 element\" \n alt=\"Skift status p\u00E5 element\" \n matTooltipPosition=\"below\">\n }\n @if (settings.mergeEnabled) {\n <img \n [src]=\"mergeBase64\"\n class=\"compact-icon custom-image-icon\" \n (click)=\"startMergeFeatures()\" \n matTooltipPosition=\"below\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"Saml flader\" \n [class.active]=\"activeMode === 'merge-features'\">\n }\n @if (settings.centerPoint) {\n <img \n [src]=\"setCenterBase64\" \n [class.active]=\"activeMode === 'center-point'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"setCenterPoint()\" \n matTooltip=\"S\u00E6t centerpunkt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"S\u00E6t centerpunkt\">\n }\n </div>\n <div class=\"geometry-tools\">\n @if (showPickAndShowInList) {\n <img \n [src]=\"sogPolygonBase64\" \n [class.active]=\"activeMode === 'search-feature'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleFeatureSearch()\" \n matTooltip=\"V\u00E6lg og vis emner i listen\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"V\u00E6lg og vis emner i listen\">\n @if (showDrawElement) {\n <img \n [src]=\"drawBase64\" \n [class.active]=\"activeMode === 'draw'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDraw()\"\n matTooltip=\"Tegn element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Tegn element\">\n }\n @if (settings.WKTInputEnabled) {\n <img \n [src]=\"wktIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'wkt-input'\"\n (click)=\"activateShowInputWKT()\" \n matTooltip=\"Inds\u00E6t WKT streng for at importere elementet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Inds\u00E6t WKT streng for at importere elementet\">\n }\n }\n </div>\n <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n <div class=\"measurement-print-tools\">\n <div class=\"measurement-tools\">\n @if (deleteEnabled) {\n <img \n [src]=\"deleteIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'delete'\"\n (click)=\"startDelete()\" \n matTooltip=\"Slet element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Slet element\">\n }\n @if (showMeasureArea || showMeasureDistance) {\n <img \n [src]=\"measureDistanceIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleMeasure()\"\n [class.active]=\"activeMode === 'measure-distance' || activeMode === 'measure-area'\"\n matTooltip=\"M\u00E5l afstand / areal\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"M\u00E5l\">\n }\n </div>\n @if (profile.showPrint) {\n <div class=\"tool-separator print-separator\"></div>\n <div class=\"print-tools\">\n <img \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'Print'\"\n (click)=\"startPrintMode()\" \n matTooltip=\"Sk\u00E6rmprint af kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Sk\u00E6rmprint af kortet\">\n <img \n [src]=\"drawPrintBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'PrintDraw'\"\n (click)=\"startDrawMode()\" \n matTooltip=\"Tegnev\u00E6rkt\u00F8j til print\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Tegnev\u00E6rkt\u00F8j til print\">\n </div>\n }\n </div>\n </div>\n @if (activeMode === 'draw' || activeMode === 'search-feature' || activeMode === 'wkt-input'\n || activeMode === 'change-type' || activeMode === 'merge-features') {\n <mat-select class=\"geometry-selector\" (selectionChange)=\"drawItemChanged($event)\" [(ngModel)]=\"selectedDrawItem\"> \n @for (drawItem of drawItems; track drawItem) {\n @if (activeMode !== 'merge-features' || drawItem.geomType === 'Polygon') {\n <mat-option [value]=\"drawItem\">{{drawItem.name}} <img *ngIf=\"drawItem.iconUrl\" class=\"compact-icon custom-image-icon\" [src]=\"drawItem.iconUrl\"></mat-option>\n }\n }\n </mat-select> \n }\n @if (showInputWKT && activeMode === 'wkt-input') {\n <div class=\"wkt-section\">\n <input matInput class=\"compact-input\" placeholder=\"Inds\u00E6t WKT-streng\" [(ngModel)]=\"WKTString\">\n <div class=\"wkt-actions\">\n <button class=\"compact-button primary\" (click)=\"ReadWKT()\">Indl\u00E6s WKT</button>\n <button class=\"compact-button\" (click)=\"cancelWKT()\">Annuller</button>\n </div>\n </div>\n }\n @if (profile.showPrint) {\n @if (active === \"Print\") {\n <div class=\"print-config\">\n <img \n matTooltip=\"Sk\u00E6rmprint af kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"doPrint()\" \n alt=\"Udskriv\"> \n <span class=\"icon-separator\">i</span>\n <select id=\"formatSelector\" [(ngModel)]=\"format\">\n <option value=\"image/png\" selected>.PNG</option>\n <option value=\"image/jpeg\">.JPG</option>\n </select>\n <select id=\"dimensionSelector\" [(ngModel)]=\"dimId\" (change)=\"handleDimensionSelected()\">\n <option value=\"99\" selected></option>\n <option value=\"0\">1920 X 1080</option>\n <option value=\"1\">1680 X 1050</option>\n <option value=\"2\">1280 X 800</option>\n <option value=\"3\">800 X 600</option>\n </select>\n <input type=\"text\" [(ngModel)]=\"mapWidth\"/> \n <span class=\"icon-separator\">x</span>\n <input type=\"text\" [(ngModel)]=\"mapHeight\"/>\n <button (click)=\"setNewMapDimensions()\">V\u00E6lg</button>\n </div>\n }\n @if (active === \"PrintDraw\") {\n <div class=\"print-draw-config\">\n <span class=\"icon-separator\">Label</span>\n <input type=\"text\" [(ngModel)]=\"printDrawLabel\"/>\n <select id=\"drawToolSelector\" [(ngModel)]=\"printDrawTool\" (change)=\"handlePrintDrawToolChanged()\">\n <option value=\"Arrow\" selected>Pil</option>\n <option value=\"Point\">Punkt</option>\n <option value=\"LineString\">Linje</option>\n <option value=\"Polygon\">Polygon</option>\n <option value=\"Circle\">Cirkel</option>\n <option value=\"Square\">Kvadrat</option>\n <option value=\"Rectangle\">Firkant</option>\n </select>\n <button class=\"compact-button\" (click)=\"handleClearPrintDrawFeatures()\">Ryd</button>\n </div>\n }\n }\n </div>\n @if (activeMode === 'search-point' || activeMode === 'search-polygon') {\n <mat-select \n class=\"search-point-polygon-selector\" \n [(ngModel)]=\"selectedSearchMode\"\n (selectionChange)=\"onSearchModeChanged($event)\">\n <mat-option value=\"search-point\">S\u00F8g med punkt</mat-option>\n <mat-option value=\"search-polygon\">S\u00F8g med polygon</mat-option>\n </mat-select>\n }\n \n @if (activeMode === 'measure-distance' || activeMode === 'measure-area') {\n <mat-select \n class=\"geometry-selector\"\n [(ngModel)]=\"selectedMeasureMode\"\n (selectionChange)=\"onMeasureModeChanged($event)\">\n @if (showMeasureDistance){\n <mat-option value=\"measure-distance\">M\u00E5l afstand</mat-option>\n }\n @if (showMeasureArea){\n <mat-option value=\"measure-area\">M\u00E5l areal</mat-option>\n } \n </mat-select>\n }\n }\n </div>\n @if (!collapsed && activeMode === 'search-feature' && filteredResults.length > 0) {\n <div class=\"geometry-search-panel\">\n <div class=\"buffer-item\">\n <mat-label>Buffer</mat-label>\n <input matInput type=\"number\" name=\"buffer\" [(ngModel)]=\"bufferInMeters\">\n <mat-label>m</mat-label>\n </div>\n <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n <div class=\"item-right\">\n <img \n [src]=\"objectSearchCopyIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event)\" \n matTooltip=\"Kopier\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier\">\n <img \n [src]=\"deleteIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"cutBySearchedObject(item, $event)\" \n matTooltip=\"Fjern\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fjern\">\n <img \n [src]=\"objectSearchCutIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"splitBySearchedObject(item, $event)\" \n matTooltip=\"Opsk\u00E6r\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Opsk\u00E6r\">\n <img \n [src]=\"objectSearchCopyWithBufferIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event, true)\" \n matTooltip=\"Kopier med buffer\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier med buffer\">\n <img \n [src]=\"objectSearchZoomIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"zoomSearchedObject(item, $event)\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Zoom\">\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleItemInfo(item, $event)\" \n matTooltip=\"Info\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Info\">\n </div> \n @if (item.showMetadata) { \n <div class=\"metadata-panel\">\n @for(feature of item.metadata; track feature) {\n <div class=\"feature-item\">\n <div *ngFor=\"let kv of (feature | keyvalue)\" class=\"feature-title\">\n <!-- <div *ngFor=\"let kv of (item.metadata | keyvalue)\" class=\"feature-title\"> -->\n {{ kv.value.name }}:\n <ng-container [ngSwitch]=\"kv.value.kind\">\n <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n {{ kv.key }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n <span *ngSwitchDefault class=\"secondary-item\">{{ kv.value.data }}</span>\n </ng-container>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </mat-option>\n </div>\n }\n @if (!collapsed && activeMode === \"show-info\") {\n <selected-feature-info class=\"info-search-panel\"></selected-feature-info>\n }\n @if (!collapsed && (activeMode === \"search-point\" || activeMode === \"search-polygon\") && geometrySearchResult.length > 0) {\n <div class=\"geometry-search-panel\">\n <mat-option *ngFor=\"let result of geometrySearchResult\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n <mat-icon (click)=\"deleteAllGeometrySearchItem()\" class=\"delete-all-icon\" matTooltip=\"Ryd\">delete</mat-icon>\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"geometry-search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n <div class=\"item-right\">\n @if (item.url) {\n <mat-icon \n class=\"search-item-external\"\n matTooltip=\"\u00C5bn i ny tab\"\n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n (click)=\"openUrl(item.url, $event)\"\n matTooltipPosition=\"above\"\n >info</mat-icon>\n }\n <mat-icon (click)=\"deleteGeometrySearchItem(result, item.id, $event)\" >delete</mat-icon>\n </div>\n </div>\n </mat-option>\n </div>\n }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:10;max-width:95vw;box-shadow:0 2px 10px #0000001a;border-radius:5px;transition:width .3s ease,max-width .3s ease}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.search-item-external{cursor:pointer}.drag-handle-toolbox mat-icon{font-size:18px}.drag-handle-toolbox mat-icon:first-child{display:flex;align-items:center;justify-content:center}.drag-handle-toolbox .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.toggle-icon{cursor:pointer!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}:host{position:relative;display:flex;justify-content:center}:host.expanded{width:auto;min-width:320px;padding:12px}.toolbox-container{display:flex;flex-direction:column;align-items:center;width:100%;min-width:32px;transition:all .3s ease;cursor:default;border-radius:0 0 5px 5px}.toolbox-content{display:flex;flex-direction:column;width:100%;gap:3px;animation:slideDown .3s cubic-bezier(.4,0,.2,1)}.all-tools-container{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;width:100%;justify-content:flex-start;overflow-x:hidden;padding:2px 8px}.all-tools-container::-webkit-scrollbar{height:4px}.all-tools-container::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}.main-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.main-tools .snap-toggle{display:flex;align-items:center;gap:5px;color:#fff;font-size:12px;font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none}.main-tools .snap-toggle input[type=checkbox]{appearance:none;width:18px;height:18px;border:1.5px solid rgba(255,255,255,.6);border-radius:3px;background:transparent;cursor:pointer;position:relative;flex-shrink:0}.main-tools .snap-toggle input[type=checkbox]:checked{background:#f7b528;border-color:#f7b528}.main-tools .snap-toggle input[type=checkbox]:checked:after{content:\"\";position:absolute;left:4px;top:0;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.geometry-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;background:none;border-radius:8px;padding:3px 0}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-tools .compact-icon,.print-tools .compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.print-tools .compact-icon{background:none;color:#fff}.print-tools .compact-icon.active{background:#f7b528!important;border-color:transparent}.print-tools .compact-icon.active:hover{background:#ffffff1a}.print-tools .compact-icon:hover:not(.active){box-shadow:0 4px 12px #0000004d;opacity:.9}.tool-separator{width:1px;height:24px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.3),transparent)}.tool-separator.print-separator{height:28px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent)}.compact-icon{cursor:pointer;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}.compact-icon.active{color:#fff;background:#f7b528!important;border-color:transparent;box-shadow:0 8px 25px #667eea4d}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon:hover:not(.active){color:#fff;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:2px;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease,transform .2s ease}.compact-icon.custom-image-icon.active{background:#ffffff1a;border-color:none;box-shadow:none}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon.custom-image-icon:hover:not(.active){box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.search-point-polygon-selector{width:170px;margin-right:auto;padding:6px}.search-point-polygon-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.search-point-polygon-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.search-point-polygon-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.geometry-selector{width:34%;margin-left:15em;padding:6px}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.geometry-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.geometry-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.geometry-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-select-panel{min-width:fit-content!important;max-width:320px!important;background:#4c4d51!important;border:none!important;border-radius:8px!important;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014!important;margin-top:6px!important;padding:4px 0!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:14px!important;min-height:30px!important;padding:0 14px!important;transition:all .15s ease!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover:not(.mat-mdc-option-disabled){background:#444849!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-active{background:color-mix(in srgb,#000 60%,transparent)!important;color:#fff!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.wkt-section{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease;padding:10px 8px}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:5px;background:#6d6f73;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;min-height:32px;display:flex;align-items:center;justify-content:center;flex:1;box-shadow:0 1px 2px #0000000d;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important}.compact-button.primary.active{background:#f7b528;box-shadow:0 8px 25px #667eea4d;color:#fff}.compact-button.primary.active:hover{box-shadow:0 12px 35px #667eea66}.compact-button.secondary{background:color-mix(in srgb,#000 20%,transparent);color:#fff}.compact-button.secondary:hover{background:color-mix(in srgb,#5a6268 60%,transparent)}.compact-input{padding:8px 10px;border-radius:5px;font-size:13px;transition:all .2s ease;background:#6d6f73;border:none;color:#fff;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important}.compact-input::placeholder{color:#ffffffb3}.compact-input:focus{outline:none;background:#6d6f73;border:1px solid #97989b}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:transparent;border:none;border-radius:8px;animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:#6d6f73;border:none;color:#fff;border-radius:6px;font-size:12px;height:32px;min-height:32px;padding:0 10px}.print-config select:focus,.print-config input:focus,.print-draw-config select:focus,.print-draw-config input:focus{outline:none}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:#6d6f73!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:#6ccb78;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s ease}.print-config button:hover,.print-draw-config button:hover{box-shadow:0 4px 12px #10b9814d}.print-config .icon-separator,.print-draw-config .icon-separator{color:#fff}.info-search-panel{position:absolute;right:0;z-index:1000;width:380px;max-height:360px!important;max-width:430px;background:#4c4d51!important;border:1px solid rgba(255,255,255,.07);border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:0 8px 24px #00000026!important}.geometry-search-panel{position:absolute;right:0;z-index:1000;width:380px;padding:5px}.geometry-search-panel::-webkit-scrollbar{width:12px}.geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.search-result-option{display:block!important;padding:0!important;margin:0!important;background:transparent!important}.search-result-option:last-child{border-bottom:none}.search-result-option .mdc-list-item__primary-text{width:100%!important;margin:0!important;padding:0!important}.result-title{display:flex;align-items:center;justify-content:space-between;width:100%;font-weight:600;color:#bdc1c3cc}.result-title .delete-all-icon{float:none;padding-top:0;font-size:18px;cursor:pointer;color:#bdc1c3cc}.result-title .delete-all-icon:hover{color:#d3d3d3}.search-result-item{display:flex;align-items:center;padding:4px 14px;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.item-left{flex:1;width:100%}.item-header{color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.search-empty-state{padding:32px 16px;text-align:center;color:#757575}.search-empty-state .empty-icon{font-size:40px;width:40px;height:40px;color:#bdbdbd;margin-bottom:12px}.search-empty-state .empty-title{font-size:14px;font-weight:500;margin-bottom:4px}.search-empty-state .empty-subtitle{font-size:12px;color:#9e9e9e}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px}::ng-deep .metadata-panel .feature-item{padding:8px 12px;margin:4px 0;background:#ffffff0d;border-radius:5px;transition:all .2s ease}::ng-deep .metadata-panel .feature-item:hover{background:#ffffff1a;box-shadow:0 2px 8px #00000026}::ng-deep .metadata-panel .feature-item:first-child{margin-top:0}::ng-deep .metadata-panel .feature-item:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title{color:#bdc1c3cc;font-size:13px;line-height:1.6;display:flex;align-items:center;gap:6px;letter-spacing:.2px}::ng-deep .metadata-panel .feature-title:first-child{margin-top:0}::ng-deep .metadata-panel .feature-title:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title img{border-radius:4px;margin-top:4px;box-shadow:0 2px 6px #0003}::ng-deep .metadata-panel .feature-title a{color:#6ccb78;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:color .2s ease}::ng-deep .metadata-panel .feature-title a:hover{color:#85d990;text-decoration:underline}::ng-deep .metadata-panel .feature-title a .link-icon{font-size:16px;width:16px;height:16px}::ng-deep .metadata-panel .secondary-item{color:#fff;font-weight:400}::ng-deep .geometry-search-panel{max-height:360px!important;overflow-y:auto!important;max-width:430px;background:#4c4d51!important;border:1px solid rgba(255,255,255,.07);border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:0 8px 24px #00000026!important}::ng-deep .geometry-search-panel::-webkit-scrollbar{width:4px}::ng-deep .geometry-search-panel::-webkit-scrollbar-track{background:transparent}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#fff3}::ng-deep .geometry-search-panel .buffer-item{display:flex;align-items:center;gap:8px;padding:10px 14px 8px;background:#0003;border-bottom:1px solid rgba(255,255,255,.06)}::ng-deep .geometry-search-panel .buffer-item mat-label{color:#9ca3af;font-size:12px;font-weight:500;letter-spacing:.3px}::ng-deep .geometry-search-panel .buffer-item input{width:52px;margin:0;background:#3a3d42;border:1px solid rgba(255,255,255,.1);border-radius:5px;color:#fff;font-size:12px;padding:4px 8px;text-align:center;outline:none;transition:border-color .15s ease}::ng-deep .geometry-search-panel .buffer-item input:focus{border-color:#f7b528}::ng-deep .geometry-search-panel .result-title{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600;color:#bdc1c3cc;position:sticky;top:0;z-index:1}::ng-deep .geometry-search-panel .result-title .delete-all-icon{float:none;padding-top:0;font-size:18px;cursor:pointer;color:#bdc1c3cc}::ng-deep .geometry-search-panel .result-title .delete-all-icon:hover{color:#d3d3d3}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-direction:column;gap:5px;padding:8px 14px;cursor:pointer;border-left:2px solid transparent;transition:background .12s ease,border-color .12s ease}::ng-deep .geometry-search-panel .search-result-item+.search-result-item{border-top:1px solid rgba(255,255,255,.04)}::ng-deep .geometry-search-panel .search-result-item:hover{background:#ffffff09}::ng-deep .geometry-search-panel .search-result-item:hover .item-header{color:#fff}::ng-deep .geometry-search-panel .search-result-item:last-child{border-radius:0 0 10px 10px}::ng-deep .geometry-search-panel .item-header{color:#d1d5db;font-size:14px;font-weight:500;line-height:1.4;display:block;word-wrap:break-word;overflow-wrap:break-word;transition:color .12s ease}::ng-deep .geometry-search-panel .item-right{display:flex;align-items:center;gap:3px;flex-wrap:wrap;width:100%}::ng-deep .geometry-search-panel .item-right .custom-image-icon{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff!important;border:1px solid rgba(255,255,255,0);border-radius:5px;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease!important}::ng-deep .geometry-search-panel .item-right .custom-image-icon:hover{background:#ffffff0d!important;box-shadow:0 0 0 1px #f7b5282e}::ng-deep .geometry-search-panel .item-right mat-icon{font-size:18px!important;color:#bdc1c3cc}::ng-deep .geometry-search-panel .item-right mat-icon:hover{color:#d3d3d3!important}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff}::ng-deep .geometry-search-panel mat-label{color:#fff}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}@media (max-width: 768px){.toolbox-wrapper{left:.5em;top:8em;max-width:calc(100vw - 2.5em)}.drag-handle-toolbox{padding:3px 6px;gap:6px}.drag-handle-toolbox mat-icon{font-size:16px;width:16px;height:16px}.toggle-icon{font-size:16px!important;width:16px!important;height:16px!important}.toolbox-container{min-width:28px;max-width:calc(100vw - 3em)}:host{padding:8px;min-width:32px}:host.expanded{min-width:280px;padding:10px}.all-tools-container{flex-wrap:wrap;gap:6px;max-height:50vh;overflow-y:auto;padding:0;-ms-overflow-style:none;scrollbar-width:none}.all-tools-container::-webkit-scrollbar{display:none}.main-tools,.geometry-tools,.measurement-print-tools,.print-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.compact-icon{width:28px;height:28px;flex-shrink:0}.measurement-print-tools{padding:3px 0}.geometry-selector{width:30%;margin-bottom:8px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:28px;min-height:28px;padding:0 8px;font-size:12px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:12px}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 2em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config,.print-draw-config{flex-direction:column;align-items:stretch;gap:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:11px;padding:4px 8px;height:28px;min-height:28px}.print-config input,.print-draw-config input{width:50px}.print-config button,.print-draw-config button{padding:4px 8px;font-size:11px;height:28px}.wkt-section .compact-input{font-size:12px;padding:6px 8px}.wkt-section .compact-button{font-size:11px;padding:5px 8px;min-height:28px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:11px!important}.geometry-search-panel{width:calc(100vw - 40px);max-width:400px;left:50%;max-height:70vh}.search-result-item{padding:8px 12px}.item-header{font-size:13px}.result-title{padding:10px 12px;font-size:13px}}.geometry-search-result-item{display:flex;padding:4px 0;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.geometry-search-result-item .item-header{width:260px}.geometry-search-result-item .item-right{display:flex;flex-direction:row;align-items:center;justify-content:flex-end}@media (max-width: 480px){.toolbox-wrapper{left:.25em;top:6em;transform-origin:left top;max-width:calc(100vw - .5em)}.drag-handle-toolbox{padding:2px 4px;gap:4px}.drag-handle-toolbox mat-icon{font-size:14px;width:14px;height:14px}.toggle-icon{font-size:14px!important;width:14px!important;height:14px!important}.toolbox-container{padding:2px;min-width:24px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}.geometry-search-panel{width:calc(100vw - 32px);max-height:60vh}.search-result-item{padding:6px 10px}.item-header{font-size:12px;-webkit-line-clamp:1}}\n"] }]
|
|
4710
|
+
args: [{ selector: 'map-toolbox', imports: [FormsModule, CommonModule, MatIconModule, MatOptionModule, MatSelectModule, DragDropModule, MatTooltipModule, SelectedFeatureInfoComponent], template: "<div class=\"toolbox-wrapper global-wrapper-container\" \n cdkDrag \n cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle-toolbox\" cdkDragHandle>\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"V\u00E6rkt\u00F8jskasse\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n handyman\n </mat-icon> \n <div class=\"right-icons\"> \n <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n \n <div class=\"toolbox-container\">\n @if (!collapsed) {\n <div class=\"toolbox-content\">\n <div class=\"all-tools-container\">\n <div class=\"main-tools\">\n @if (!settings?.undoDisabled) {\n <img \n [src]=\"undoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"undo()\" \n matTooltip=\"Fortryd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Undo\">\n\n <img \n [src]=\"redoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"redo()\" \n matTooltip=\"Gendan\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Redo\">\n }\n @if (settings.externalHelpUrl) {\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"openUrl(settings.externalHelpUrl, $event)\"\n matTooltip=\"Vejledning til anvendelse af systemet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Vejledning til anvendelse af systemet\">\n } \n @if (showInfo){ <img \n [src]=\"showInfoObjBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleShowInfo()\" \n [class.active]=\"activeMode === 'show-info'\"\n matTooltip=\"V\u00E6lg og vis objektdata i tr\u00E6struktur\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"V\u00E6lg og vis objektdata i tr\u00E6 struktur\">\n }\n @if (showDownloadAddresses) {\n <img \n [src]=\"downloadFileBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleDownloadAddresses()\" \n [class.active]=\"activeMode === 'download-addresses'\"\n matTooltip=\"Download adresser\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Download adresser\">\n }\n @if (showDownloadCadastres) {\n <img \n [src]=\"downloadMatriklerBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleDownloadCasdatres()\" \n [class.active]=\"activeMode === 'download-cadastres'\"\n matTooltip=\"Download matrikler\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Download matrikler\">\n }\n @if (showChooseLocations) {\n <img \n [src]=\"splitIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"togglePointPolygonSearch()\"\n [class.active]=\"activeMode === 'search-point' || activeMode === 'search-polygon'\"\n matTooltip=\"V\u00E6lg Lokaliteter ved udpegning i kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"V\u00E6lg Lokaliteter ved udpegning i kortet\">\n }\n @if (showDocumentSearch) {\n <img \n [src]=\"documentSearchBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleDocumentPointSearch()\"\n [class.active]=\"activeMode === 'document-search-by-point'\"\n matTooltip=\"Dokument fra punkt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Dokument fra punkt\">\n\n <img \n [src]=\"documentSearchBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleDocumentPolygonSearch()\"\n [class.active]=\"activeMode === 'document-search-by-polygon'\"\n matTooltip=\"Dokumenter fra polygon\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Dokumenter fra polygon\">\n }\n @if (settings.cowiUrlTemplate) {\n <img \n [src]=\"openCowiPageBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'cowi'\"\n (click)=\"toggleCowiPage()\" \n matTooltip=\"COWI\u00B4s Gadefoto\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"COWI\u00B4s Gadefoto\">\n }\n @if (settings.skraaFotoUrlTemplate) {\n <img \n [src]=\"skrafotoBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'skrafoto'\"\n (click)=\"toggleSkraafotoPage()\" \n matTooltip=\"Opslag p\u00E5 Skr\u00E5fotos\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Skr\u00E5foto\">\n }\n @if (settings.googleStreetUrlTemplate) {\n <img \n [src]=\"streetViewBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'streetview'\"\n (click)=\"toggleGoogleStreetviewPage()\" \n matTooltip=\"Google Streetview\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Google Streetview\">\n }\n @if (showFeatureHighlight) {\n <img \n [src]=\"fremhaevBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'select-highlight'\"\n (click)=\"toggleSelectFeatureHighlight()\" \n matTooltip=\"Fremh\u00E6v aktivt objekt i listen\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fremh\u00E6v\">\n }\n @if (activeMode === 'draw' || activeMode === 'edit' || activeMode === 'edit-remove' || activeMode === 'search-feature' ||\n activeMode === 'clip-hole' || activeMode === 'split' || activeMode === 'merge-features') {\n <label class=\"snap-toggle\">\n <input type=\"checkbox\" [checked]=\"snap\" (change)=\"onSnapChange($event)\">\n Snap\n </label> \n } \n @if (settings.editEnabled) {\n <img \n [src]=\"editBase64\" \n [class.active]=\"activeMode === 'edit'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEdit()\" \n matTooltip=\"Inds\u00E6t eller flyt punkter i flade/linje\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Inds\u00E6t eller flyt punkter i flade/linje\"> \n <img \n [src]=\"deleteIconBase64\" \n [class.active]=\"activeMode === 'edit-remove'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEditRemovePoints()\" \n matTooltip=\"Slet punkter i flade/linje\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Slet punkter i flade/linje\"> \n }\n @if (settings.cutHoleEnabled) {\n <img \n [src]=\"clipHoleBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'clip-hole'\" \n (click)=\"clipHole()\" \n matTooltip=\"Klip hul i flade\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Klip hul i flade\">\n }\n @if (settings.splitEnabled) {\n <img \n [src]=\"splitBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'split'\"\n (click)=\"split()\" \n matTooltip=\"Del et element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Del et element\">\n }\n @if (settings.changeTypeEnabled) {\n <img \n [src]=\"changeTypeBase64\" \n class=\"compact-icon custom-image-icon\" \n [class.active]=\"activeMode === 'change-type'\" \n (click)=\"startChangeType()\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"Skift status p\u00E5 element\" \n alt=\"Skift status p\u00E5 element\" \n matTooltipPosition=\"below\">\n }\n @if (settings.mergeEnabled) {\n <img \n [src]=\"mergeBase64\"\n class=\"compact-icon custom-image-icon\" \n (click)=\"startMergeFeatures()\" \n matTooltipPosition=\"below\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"Saml flader\" \n [class.active]=\"activeMode === 'merge-features'\">\n }\n @if (settings.centerPoint) {\n <img \n [src]=\"setCenterBase64\" \n [class.active]=\"activeMode === 'center-point'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"setCenterPoint()\" \n matTooltip=\"S\u00E6t centerpunkt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"S\u00E6t centerpunkt\">\n }\n </div>\n <div class=\"geometry-tools\">\n @if (showPickAndShowInList) {\n <img \n [src]=\"sogPolygonBase64\" \n [class.active]=\"activeMode === 'search-feature'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleFeatureSearch()\" \n matTooltip=\"V\u00E6lg og vis emner i listen\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"V\u00E6lg og vis emner i listen\">\n @if (showDrawElement) {\n <img \n [src]=\"drawBase64\" \n [class.active]=\"activeMode === 'draw'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleDraw()\"\n matTooltip=\"Tegn element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Tegn element\">\n }\n @if (settings.WKTInputEnabled) {\n <img \n [src]=\"wktIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'wkt-input'\"\n (click)=\"activateShowInputWKT()\" \n matTooltip=\"Inds\u00E6t WKT streng for at importere elementet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Inds\u00E6t WKT streng for at importere elementet\">\n }\n }\n </div>\n <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n <div class=\"measurement-print-tools\">\n <div class=\"measurement-tools\">\n @if (deleteEnabled) {\n <img \n [src]=\"deleteIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'delete'\"\n (click)=\"startDelete()\" \n matTooltip=\"Slet element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Slet element\">\n }\n @if (showMeasureArea || showMeasureDistance) {\n <img \n [src]=\"measureDistanceIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleMeasure()\"\n [class.active]=\"activeMode === 'measure-distance' || activeMode === 'measure-area'\"\n matTooltip=\"M\u00E5l afstand / areal\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"M\u00E5l\">\n }\n </div>\n @if (profile.showPrint) {\n <div class=\"tool-separator print-separator\"></div>\n <div class=\"print-tools\">\n <img \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'Print'\"\n (click)=\"startPrintMode()\" \n matTooltip=\"Sk\u00E6rmprint af kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Sk\u00E6rmprint af kortet\">\n <img \n [src]=\"drawPrintBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'PrintDraw'\"\n (click)=\"startDrawMode()\" \n matTooltip=\"Tegnev\u00E6rkt\u00F8j til print\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Tegnev\u00E6rkt\u00F8j til print\">\n </div>\n }\n </div>\n </div>\n @if (activeMode === 'draw' || activeMode === 'search-feature' || activeMode === 'wkt-input'\n || activeMode === 'change-type' || activeMode === 'merge-features') {\n <mat-select class=\"geometry-selector\" (selectionChange)=\"drawItemChanged($event)\" [(ngModel)]=\"selectedDrawItem\"> \n @for (drawItem of drawItems; track drawItem) {\n @if (activeMode !== 'merge-features' || drawItem.geomType === 'Polygon') {\n <mat-option [value]=\"drawItem\">{{drawItem.name}} <img *ngIf=\"drawItem.iconUrl\" class=\"compact-icon custom-image-icon\" [src]=\"drawItem.iconUrl\"></mat-option>\n }\n }\n </mat-select> \n }\n @if (showInputWKT && activeMode === 'wkt-input') {\n <div class=\"wkt-section\">\n <input matInput class=\"compact-input\" placeholder=\"Inds\u00E6t WKT-streng\" [(ngModel)]=\"WKTString\">\n <div class=\"wkt-actions\">\n <button class=\"compact-button primary\" (click)=\"ReadWKT()\">Indl\u00E6s WKT</button>\n <button class=\"compact-button\" (click)=\"cancelWKT()\">Annuller</button>\n </div>\n </div>\n }\n @if (profile.showPrint) {\n @if (active === \"Print\") {\n <div class=\"print-config\">\n <img \n matTooltip=\"Sk\u00E6rmprint af kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"doPrint()\" \n alt=\"Udskriv\"> \n <span class=\"icon-separator\">i</span>\n <select id=\"formatSelector\" [(ngModel)]=\"format\">\n <option value=\"image/png\" selected>.PNG</option>\n <option value=\"image/jpeg\">.JPG</option>\n </select>\n <select id=\"dimensionSelector\" [(ngModel)]=\"dimId\" (change)=\"handleDimensionSelected()\">\n <option value=\"99\" selected></option>\n <option value=\"0\">1920 X 1080</option>\n <option value=\"1\">1680 X 1050</option>\n <option value=\"2\">1280 X 800</option>\n <option value=\"3\">800 X 600</option>\n </select>\n <input type=\"text\" [(ngModel)]=\"mapWidth\"/> \n <span class=\"icon-separator\">x</span>\n <input type=\"text\" [(ngModel)]=\"mapHeight\"/>\n <button (click)=\"setNewMapDimensions()\">V\u00E6lg</button>\n </div>\n }\n @if (active === \"PrintDraw\") {\n <div class=\"print-draw-config\">\n <span class=\"icon-separator\">Label</span>\n <input type=\"text\" [(ngModel)]=\"printDrawLabel\"/>\n <select id=\"drawToolSelector\" [(ngModel)]=\"printDrawTool\" (change)=\"handlePrintDrawToolChanged()\">\n <option value=\"Arrow\" selected>Pil</option>\n <option value=\"Point\">Punkt</option>\n <option value=\"LineString\">Linje</option>\n <option value=\"Polygon\">Polygon</option>\n <option value=\"Circle\">Cirkel</option>\n <option value=\"Square\">Kvadrat</option>\n <option value=\"Rectangle\">Firkant</option>\n </select>\n <button class=\"compact-button\" (click)=\"handleClearPrintDrawFeatures()\">Ryd</button>\n </div>\n }\n }\n </div>\n @if (activeMode === 'search-point' || activeMode === 'search-polygon') {\n <mat-select \n class=\"search-point-polygon-selector\" \n [(ngModel)]=\"selectedSearchMode\"\n (selectionChange)=\"onSearchModeChanged($event)\">\n <mat-option value=\"search-point\">S\u00F8g med punkt</mat-option>\n <mat-option value=\"search-polygon\">S\u00F8g med polygon</mat-option>\n </mat-select>\n }\n \n @if (activeMode === 'measure-distance' || activeMode === 'measure-area') {\n <mat-select \n class=\"geometry-selector\"\n [(ngModel)]=\"selectedMeasureMode\"\n (selectionChange)=\"onMeasureModeChanged($event)\">\n @if (showMeasureDistance){\n <mat-option value=\"measure-distance\">M\u00E5l afstand</mat-option>\n }\n @if (showMeasureArea){\n <mat-option value=\"measure-area\">M\u00E5l areal</mat-option>\n } \n </mat-select>\n }\n }\n </div>\n @if (!collapsed && activeMode === 'search-feature' && filteredResults.length > 0) {\n <div class=\"geometry-search-panel\">\n <div class=\"buffer-item\">\n <mat-label>Buffer</mat-label>\n <input matInput type=\"number\" name=\"buffer\" [(ngModel)]=\"bufferInMeters\">\n <mat-label>m</mat-label>\n </div>\n <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n <div class=\"item-right\">\n <img \n [src]=\"objectSearchCopyIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event)\" \n matTooltip=\"Kopier\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier\">\n <img \n [src]=\"deleteIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"cutBySearchedObject(item, $event)\" \n matTooltip=\"Fjern\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fjern\">\n <img \n [src]=\"objectSearchCutIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"splitBySearchedObject(item, $event)\" \n matTooltip=\"Opsk\u00E6r\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Opsk\u00E6r\">\n <img \n [src]=\"objectSearchCopyWithBufferIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event, true)\" \n matTooltip=\"Kopier med buffer\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier med buffer\">\n <img \n [src]=\"objectSearchZoomIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"zoomSearchedObject(item, $event)\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Zoom\">\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleItemInfo(item, $event)\" \n matTooltip=\"Info\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Info\">\n </div> \n @if (item.showMetadata) { \n <div class=\"metadata-panel\">\n @for(feature of item.metadata; track feature) {\n <div class=\"feature-item\">\n <div *ngFor=\"let kv of (feature | keyvalue)\" class=\"feature-title\">\n <!-- <div *ngFor=\"let kv of (item.metadata | keyvalue)\" class=\"feature-title\"> -->\n {{ kv.value.name }}:\n <ng-container [ngSwitch]=\"kv.value.kind\">\n <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n {{ kv.key }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n <span *ngSwitchDefault class=\"secondary-item\">{{ kv.value.data }}</span>\n </ng-container>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </mat-option>\n </div>\n }\n @if (!collapsed && activeMode === \"show-info\") {\n <selected-feature-info class=\"info-search-panel\"></selected-feature-info>\n }\n @if (!collapsed && (activeMode === \"search-point\" || activeMode === \"search-polygon\") && geometrySearchResult.length > 0) {\n <div class=\"geometry-search-panel\">\n <mat-option *ngFor=\"let result of geometrySearchResult\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n <mat-icon (click)=\"deleteAllGeometrySearchItemForLayer(result.layer.id)\" class=\"delete-all-icon\" matTooltip=\"Ryd gruppe\">delete</mat-icon>\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"geometry-search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n <div class=\"item-right\">\n @if (item.url) {\n <a class=\"goto-link\" href=\"{{ item.url }}\" target=\"_blank\" rel=\"noopener noreferrer\">G\u00E5 til</a>\n }\n <mat-icon (click)=\"deleteGeometrySearchItem(result, item.id, $event)\" matTooltip=\"Slet\">delete</mat-icon>\n </div>\n </div>\n </mat-option>\n </div>\n }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:10;max-width:95vw;box-shadow:0 2px 10px #0000001a;border-radius:5px;transition:width .3s ease,max-width .3s ease}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.goto-link{color:#d2e9f0;font-weight:600;text-decoration:underline}.goto-link:hover{color:#cbf1f0}.search-item-external{cursor:pointer}.drag-handle-toolbox mat-icon{font-size:18px}.drag-handle-toolbox mat-icon:first-child{display:flex;align-items:center;justify-content:center}.drag-handle-toolbox .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.toggle-icon{cursor:pointer!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}:host{position:relative;display:flex;justify-content:center}:host.expanded{width:auto;min-width:320px;padding:12px}.toolbox-container{display:flex;flex-direction:column;align-items:center;width:100%;min-width:32px;transition:all .3s ease;cursor:default;border-radius:0 0 5px 5px}.toolbox-content{display:flex;flex-direction:column;width:100%;gap:3px;animation:slideDown .3s cubic-bezier(.4,0,.2,1)}.all-tools-container{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;width:100%;justify-content:flex-start;overflow-x:hidden;padding:2px 8px}.all-tools-container::-webkit-scrollbar{height:4px}.all-tools-container::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}.main-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.main-tools .snap-toggle{display:flex;align-items:center;gap:5px;color:#fff;font-size:12px;font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none}.main-tools .snap-toggle input[type=checkbox]{appearance:none;width:18px;height:18px;border:1.5px solid rgba(255,255,255,.6);border-radius:3px;background:transparent;cursor:pointer;position:relative;flex-shrink:0}.main-tools .snap-toggle input[type=checkbox]:checked{background:#f7b528;border-color:#f7b528}.main-tools .snap-toggle input[type=checkbox]:checked:after{content:\"\";position:absolute;left:4px;top:0;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.geometry-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;background:none;border-radius:8px;padding:3px 0}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-tools .compact-icon,.print-tools .compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.print-tools .compact-icon{background:none;color:#fff}.print-tools .compact-icon.active{background:#f7b528!important;border-color:transparent}.print-tools .compact-icon.active:hover{background:#ffffff1a}.print-tools .compact-icon:hover:not(.active){box-shadow:0 4px 12px #0000004d;opacity:.9}.tool-separator{width:1px;height:24px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.3),transparent)}.tool-separator.print-separator{height:28px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent)}.compact-icon{cursor:pointer;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}.compact-icon.active{color:#fff;background:#f7b528!important;border-color:transparent;box-shadow:0 8px 25px #667eea4d}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon:hover:not(.active){color:#fff;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:2px;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease,transform .2s ease}.compact-icon.custom-image-icon.active{background:#ffffff1a;border-color:none;box-shadow:none}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon.custom-image-icon:hover:not(.active){box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.search-point-polygon-selector{width:170px;margin-right:auto;padding:6px}.search-point-polygon-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.search-point-polygon-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.search-point-polygon-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.geometry-selector{width:34%;margin-left:15em;padding:6px}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.geometry-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.geometry-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.geometry-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-select-panel{min-width:fit-content!important;max-width:320px!important;background:#4c4d51!important;border:none!important;border-radius:8px!important;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014!important;margin-top:6px!important;padding:4px 0!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:14px!important;min-height:30px!important;padding:0 14px!important;transition:all .15s ease!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover:not(.mat-mdc-option-disabled){background:#444849!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-active{background:color-mix(in srgb,#000 60%,transparent)!important;color:#fff!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.wkt-section{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease;padding:10px 8px}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:5px;background:#6d6f73;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;min-height:32px;display:flex;align-items:center;justify-content:center;flex:1;box-shadow:0 1px 2px #0000000d;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important}.compact-button.primary.active{background:#f7b528;box-shadow:0 8px 25px #667eea4d;color:#fff}.compact-button.primary.active:hover{box-shadow:0 12px 35px #667eea66}.compact-button.secondary{background:color-mix(in srgb,#000 20%,transparent);color:#fff}.compact-button.secondary:hover{background:color-mix(in srgb,#5a6268 60%,transparent)}.compact-input{padding:8px 10px;border-radius:5px;font-size:13px;transition:all .2s ease;background:#6d6f73;border:none;color:#fff;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important}.compact-input::placeholder{color:#ffffffb3}.compact-input:focus{outline:none;background:#6d6f73;border:1px solid #97989b}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:transparent;border:none;border-radius:8px;animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:#6d6f73;border:none;color:#fff;border-radius:6px;font-size:12px;height:32px;min-height:32px;padding:0 10px}.print-config select:focus,.print-config input:focus,.print-draw-config select:focus,.print-draw-config input:focus{outline:none}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:#6d6f73!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:#6ccb78;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s ease}.print-config button:hover,.print-draw-config button:hover{box-shadow:0 4px 12px #10b9814d}.print-config .icon-separator,.print-draw-config .icon-separator{color:#fff}.info-search-panel{position:absolute;right:0;z-index:1000;width:380px;max-height:360px!important;max-width:430px;background:#4c4d51!important;border:1px solid rgba(255,255,255,.07);border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:0 8px 24px #00000026!important}.geometry-search-panel{position:absolute;right:0;z-index:1000;width:380px;padding:5px}.geometry-search-panel::-webkit-scrollbar{width:12px}.geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.search-result-option{display:block!important;padding:0!important;margin:0!important;background:transparent!important}.search-result-option:last-child{border-bottom:none}.search-result-option .mdc-list-item__primary-text{width:100%!important;margin:0!important;padding:0!important}.result-title{display:flex;align-items:center;justify-content:space-between;width:100%;font-weight:600;color:#bdc1c3cc}.result-title .delete-all-icon{float:none;padding-top:0;font-size:18px;cursor:pointer;color:#bdc1c3cc}.result-title .delete-all-icon:hover{color:#d3d3d3}.search-result-item{display:flex;align-items:center;padding:4px 14px;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.item-left{flex:1;width:100%}.item-header{color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.search-empty-state{padding:32px 16px;text-align:center;color:#757575}.search-empty-state .empty-icon{font-size:40px;width:40px;height:40px;color:#bdbdbd;margin-bottom:12px}.search-empty-state .empty-title{font-size:14px;font-weight:500;margin-bottom:4px}.search-empty-state .empty-subtitle{font-size:12px;color:#9e9e9e}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px}::ng-deep .metadata-panel .feature-item{padding:8px 12px;margin:4px 0;background:#ffffff0d;border-radius:5px;transition:all .2s ease}::ng-deep .metadata-panel .feature-item:hover{background:#ffffff1a;box-shadow:0 2px 8px #00000026}::ng-deep .metadata-panel .feature-item:first-child{margin-top:0}::ng-deep .metadata-panel .feature-item:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title{color:#bdc1c3cc;font-size:13px;line-height:1.6;display:flex;align-items:center;gap:6px;letter-spacing:.2px}::ng-deep .metadata-panel .feature-title:first-child{margin-top:0}::ng-deep .metadata-panel .feature-title:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title img{border-radius:4px;margin-top:4px;box-shadow:0 2px 6px #0003}::ng-deep .metadata-panel .feature-title a{color:#6ccb78;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:color .2s ease}::ng-deep .metadata-panel .feature-title a:hover{color:#85d990;text-decoration:underline}::ng-deep .metadata-panel .feature-title a .link-icon{font-size:16px;width:16px;height:16px}::ng-deep .metadata-panel .secondary-item{color:#fff;font-weight:400}::ng-deep .geometry-search-panel{max-height:360px!important;overflow-y:auto!important;max-width:430px;background:#4c4d51!important;border:1px solid rgba(255,255,255,.07);border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:0 8px 24px #00000026!important}::ng-deep .geometry-search-panel::-webkit-scrollbar{width:4px}::ng-deep .geometry-search-panel::-webkit-scrollbar-track{background:transparent}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#fff3}::ng-deep .geometry-search-panel .buffer-item{display:flex;align-items:center;gap:8px;padding:10px 14px 8px;background:#0003;border-bottom:1px solid rgba(255,255,255,.06)}::ng-deep .geometry-search-panel .buffer-item mat-label{color:#9ca3af;font-size:12px;font-weight:500;letter-spacing:.3px}::ng-deep .geometry-search-panel .buffer-item input{width:52px;margin:0;background:#3a3d42;border:1px solid rgba(255,255,255,.1);border-radius:5px;color:#fff;font-size:12px;padding:4px 8px;text-align:center;outline:none;transition:border-color .15s ease}::ng-deep .geometry-search-panel .buffer-item input:focus{border-color:#f7b528}::ng-deep .geometry-search-panel .result-title{display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600;color:#bdc1c3cc;position:sticky;top:0;z-index:1}::ng-deep .geometry-search-panel .result-title .delete-all-icon{float:none;padding-top:0;font-size:18px;cursor:pointer;color:#bdc1c3cc}::ng-deep .geometry-search-panel .result-title .delete-all-icon:hover{color:#d3d3d3}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-direction:column;gap:5px;padding:8px 14px;cursor:pointer;border-left:2px solid transparent;transition:background .12s ease,border-color .12s ease}::ng-deep .geometry-search-panel .search-result-item+.search-result-item{border-top:1px solid rgba(255,255,255,.04)}::ng-deep .geometry-search-panel .search-result-item:hover{background:#ffffff09}::ng-deep .geometry-search-panel .search-result-item:hover .item-header{color:#fff}::ng-deep .geometry-search-panel .search-result-item:last-child{border-radius:0 0 10px 10px}::ng-deep .geometry-search-panel .item-header{color:#d1d5db;font-size:14px;font-weight:500;line-height:1.4;display:block;word-wrap:break-word;overflow-wrap:break-word;transition:color .12s ease}::ng-deep .geometry-search-panel .item-right{display:flex;align-items:center;gap:3px;flex-wrap:wrap;width:100%}::ng-deep .geometry-search-panel .item-right .custom-image-icon{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff!important;border:1px solid rgba(255,255,255,0);border-radius:5px;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease!important}::ng-deep .geometry-search-panel .item-right .custom-image-icon:hover{background:#ffffff0d!important;box-shadow:0 0 0 1px #f7b5282e}::ng-deep .geometry-search-panel .item-right mat-icon{font-size:18px!important;color:#bdc1c3cc}::ng-deep .geometry-search-panel .item-right mat-icon:hover{color:#d3d3d3!important}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff}::ng-deep .geometry-search-panel mat-label{color:#fff}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}@media (max-width: 768px){.toolbox-wrapper{left:.5em;top:8em;max-width:calc(100vw - 2.5em)}.drag-handle-toolbox{padding:3px 6px;gap:6px}.drag-handle-toolbox mat-icon{font-size:16px;width:16px;height:16px}.toggle-icon{font-size:16px!important;width:16px!important;height:16px!important}.toolbox-container{min-width:28px;max-width:calc(100vw - 3em)}:host{padding:8px;min-width:32px}:host.expanded{min-width:280px;padding:10px}.all-tools-container{flex-wrap:wrap;gap:6px;max-height:50vh;overflow-y:auto;padding:0;-ms-overflow-style:none;scrollbar-width:none}.all-tools-container::-webkit-scrollbar{display:none}.main-tools,.geometry-tools,.measurement-print-tools,.print-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.compact-icon{width:28px;height:28px;flex-shrink:0}.measurement-print-tools{padding:3px 0}.geometry-selector{width:30%;margin-bottom:8px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:28px;min-height:28px;padding:0 8px;font-size:12px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:12px}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 2em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config,.print-draw-config{flex-direction:column;align-items:stretch;gap:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:11px;padding:4px 8px;height:28px;min-height:28px}.print-config input,.print-draw-config input{width:50px}.print-config button,.print-draw-config button{padding:4px 8px;font-size:11px;height:28px}.wkt-section .compact-input{font-size:12px;padding:6px 8px}.wkt-section .compact-button{font-size:11px;padding:5px 8px;min-height:28px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:11px!important}.geometry-search-panel{width:calc(100vw - 40px);max-width:400px;left:50%;max-height:70vh}.search-result-item{padding:8px 12px}.item-header{font-size:13px}.result-title{padding:10px 12px;font-size:13px}}.geometry-search-result-item{display:flex;padding:4px 0;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.geometry-search-result-item .item-header{width:260px}.geometry-search-result-item .item-right{display:flex;flex-direction:row;align-items:center;justify-content:flex-end}@media (max-width: 480px){.toolbox-wrapper{left:.25em;top:6em;transform-origin:left top;max-width:calc(100vw - .5em)}.drag-handle-toolbox{padding:2px 4px;gap:4px}.drag-handle-toolbox mat-icon{font-size:14px;width:14px;height:14px}.toggle-icon{font-size:14px!important;width:14px!important;height:14px!important}.toolbox-container{padding:2px;min-width:24px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}.geometry-search-panel{width:calc(100vw - 32px);max-height:60vh}.search-result-item{padding:6px 10px}.item-header{font-size:12px;-webkit-line-clamp:1}}.goto-link{color:#2e98eb;font-weight:600;font-size:12px;text-decoration:none;padding:2px 7px;transition:all .15s ease;white-space:nowrap;line-height:1;display:inline-flex;align-items:center}.goto-link:hover{color:#2180c9;text-decoration:underline}\n"] }]
|
|
4671
4711
|
}], ctorParameters: () => [], propDecorators: { map: [{
|
|
4672
4712
|
type: Input,
|
|
4673
4713
|
args: [{ required: true }]
|
|
@@ -5335,11 +5375,11 @@ class LegendsListComponent {
|
|
|
5335
5375
|
}
|
|
5336
5376
|
return this._layerService.getByIds(layerIdsCachedToDisplay)
|
|
5337
5377
|
.pipe(switchMap(layers => {
|
|
5338
|
-
const enriched$ = layers.map(layer => this.
|
|
5378
|
+
const enriched$ = layers.map(layer => this._resolveLegendImage(layer));
|
|
5339
5379
|
return forkJoin(enriched$); // Wait until all items are enriched
|
|
5340
5380
|
}));
|
|
5341
5381
|
}
|
|
5342
|
-
|
|
5382
|
+
_resolveLegendImage(layer) {
|
|
5343
5383
|
if (layer.legend?.imageName) {
|
|
5344
5384
|
return of({
|
|
5345
5385
|
...layer,
|
|
@@ -5601,6 +5641,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5601
5641
|
args: [{ selector: 'document-search-info', imports: [CommonModule, FormsModule, AsyncPipe, JsonPipe, MatButtonModule, MatIconModule], template: "<div *ngIf=\"showPanel && (features$ | async) as features\" class=\"doc-info-panel\">\n <div class=\"doc-info-features\">\n <div *ngFor=\"let feature of features\" class=\"doc-info-layer\">\n <h3 class=\"doc-info-layer-title\">{{feature.layer}}</h3>\n <div *ngFor=\"let item of feature.items\" class=\"doc-info-item\">\n <mat-icon class=\"doc-info-item-icon\">{{getIcon(item.url)}}</mat-icon>\n <a [href]=\"item.url\" target=\"_blank\" rel=\"noopener\" class=\"doc-info-item-link\">\n {{ item.header }}\n </a>\n </div>\n </div>\n </div>\n</div>", styles: ["::ng-deep .doc-info-panel{display:block;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:#4c4d51;border:1px solid rgba(255,255,255,.07);padding:.75rem;border-radius:5px;box-shadow:0 2px 4px #0000004d,0 8px 24px #00000059,inset 0 1px #ffffff0f;max-width:420px;max-height:450px;overflow-y:auto;position:relative}::ng-deep .doc-info-panel::-webkit-scrollbar{width:12px}::ng-deep .doc-info-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .doc-info-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .doc-info-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .doc-info-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .doc-info-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .doc-info-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .doc-info-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .doc-info-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .doc-info-panel .doc-info-layer{background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:5px;overflow:hidden;margin-bottom:.5rem;transition:border-color .2s ease,box-shadow .2s ease}::ng-deep .doc-info-panel .doc-info-layer:last-child{margin-bottom:0}::ng-deep .doc-info-panel .doc-info-layer:hover{border-color:#ffffff1a;box-shadow:0 2px 12px #0003}::ng-deep .doc-info-panel .doc-info-layer-title{font-size:13px;font-weight:600;color:#bdc1c3cc;padding:.6rem .875rem .5rem;margin:0;border-bottom:1px solid rgba(255,255,255,.06);background:#0000001f}::ng-deep .doc-info-panel .doc-info-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .875rem;border-bottom:1px solid rgba(255,255,255,.06);border-radius:0;transition:background .15s ease}::ng-deep .doc-info-panel .doc-info-item:last-child{border-bottom:none}::ng-deep .doc-info-panel .doc-info-item:hover{background:#ffffff0d}::ng-deep .doc-info-panel .doc-info-item:hover .doc-info-item-icon{transform:scale(1.12);opacity:1}::ng-deep .doc-info-panel .doc-info-item:hover .doc-info-item-link{color:#5cb8ff!important}::ng-deep .doc-info-panel .doc-info-item-icon{font-size:1rem;width:1rem;height:1rem;flex-shrink:0;opacity:.65;color:#8a8a94;transition:transform .15s ease,opacity .15s ease}::ng-deep .doc-info-panel .doc-info-item-link{font-size:12.5px;font-weight:450;color:#4da6f5!important;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:330px;letter-spacing:.01em;transition:color .15s ease;background:none}::ng-deep .doc-info-panel .doc-info-item-link:hover{text-decoration:underline;text-underline-offset:2px;text-decoration-color:#4da6f566;color:#5cb8ff!important;background:none!important}::ng-deep .doc-info-panel .doc-info-item-icon:has(+.doc-info-item-link[href$=\".pdf\"]){color:#e06c75;opacity:.85}::ng-deep .doc-info-panel .doc-info-item-icon:has(+.doc-info-item-link[href$=\".docx\"]),::ng-deep .doc-info-panel .doc-info-item-icon:has(+.doc-info-item-link[href$=\".doc\"]){color:#4da6f5;opacity:.85}::ng-deep .doc-info-panel .doc-info-item-icon:has(+.doc-info-item-link[href$=\".xlsx\"]),::ng-deep .doc-info-panel .doc-info-item-icon:has(+.doc-info-item-link[href$=\".xls\"]){color:#56c784;opacity:.85}::ng-deep .doc-info-panel .doc-info-item-icon:has(+.doc-info-item-link[href$=\".jpg\"]),::ng-deep .doc-info-panel .doc-info-item-icon:has(+.doc-info-item-link[href$=\".jpeg\"]),::ng-deep .doc-info-panel .doc-info-item-icon:has(+.doc-info-item-link[href$=\".png\"]),::ng-deep .doc-info-panel .doc-info-item-icon:has(+.doc-info-item-link[href$=\".gif\"]){color:#b07ce8;opacity:.85}\n"] }]
|
|
5602
5642
|
}] });
|
|
5603
5643
|
|
|
5644
|
+
class FastSwitchSelectorComponent {
|
|
5645
|
+
_http = inject(HttpClient);
|
|
5646
|
+
_layerService = inject(LayerService);
|
|
5647
|
+
_layerHelper = inject(LayerHelperService);
|
|
5648
|
+
config = inject(GISKOMPONENT_CONFIG);
|
|
5649
|
+
map;
|
|
5650
|
+
profile;
|
|
5651
|
+
collapsed = true;
|
|
5652
|
+
selectedLayer;
|
|
5653
|
+
layerGroup = [];
|
|
5654
|
+
fastSwitchLayers = [];
|
|
5655
|
+
_baseUrl = this.config.apiBaseUrl;
|
|
5656
|
+
ngOnChanges(changes) {
|
|
5657
|
+
if (changes['profile'] && this.profile) {
|
|
5658
|
+
this.fastSwitchLayers = this.profile.fastSwitchLayerGroup?.layers ? this.profile.fastSwitchLayerGroup?.layers : [];
|
|
5659
|
+
this._setFilteredLegends().subscribe(result => {
|
|
5660
|
+
this.layerGroup = result.filter(lg => this.profile.fastSwitchLayerGroup?.layers.find(l => l.id === lg.id)?.activeInSelector);
|
|
5661
|
+
// Turn them all off (except for first one)
|
|
5662
|
+
this.layerGroup.forEach((layer, index) => {
|
|
5663
|
+
if (index > 0) {
|
|
5664
|
+
this._layerHelper.toggleLayerInMap(this.map, layer.id, false);
|
|
5665
|
+
}
|
|
5666
|
+
else {
|
|
5667
|
+
this._layerHelper.toggleLayerInMap(this.map, layer.id, true);
|
|
5668
|
+
}
|
|
5669
|
+
});
|
|
5670
|
+
if (this.layerGroup.length > 0)
|
|
5671
|
+
this.selectedLayer = this.layerGroup[0];
|
|
5672
|
+
});
|
|
5673
|
+
}
|
|
5674
|
+
}
|
|
5675
|
+
toggleCollapsed() {
|
|
5676
|
+
this.collapsed = !this.collapsed;
|
|
5677
|
+
}
|
|
5678
|
+
layerChanged(layer) {
|
|
5679
|
+
// Turn off current layer
|
|
5680
|
+
if (this.selectedLayer?.id)
|
|
5681
|
+
this._layerHelper.toggleLayerInMap(this.map, this.selectedLayer?.id, false);
|
|
5682
|
+
this.selectedLayer = layer;
|
|
5683
|
+
// Turn on new layer
|
|
5684
|
+
this._layerHelper.toggleLayerInMap(this.map, layer.id, true);
|
|
5685
|
+
this.collapsed = true;
|
|
5686
|
+
}
|
|
5687
|
+
_getImageUrl(fileName) {
|
|
5688
|
+
return `${this._baseUrl}/api/image/${fileName}`;
|
|
5689
|
+
}
|
|
5690
|
+
_setFilteredLegends() {
|
|
5691
|
+
if (!this.profile?.id) {
|
|
5692
|
+
return of([]);
|
|
5693
|
+
}
|
|
5694
|
+
return this._layerService.getByIds(this.fastSwitchLayers.map(layer => layer.id))
|
|
5695
|
+
.pipe(switchMap(layers => {
|
|
5696
|
+
const enriched$ = layers.map(layer => this._resolveLegendImage(layer));
|
|
5697
|
+
return forkJoin(enriched$); // Wait until all items are enriched
|
|
5698
|
+
}));
|
|
5699
|
+
}
|
|
5700
|
+
_resolveLegendImage(layer) {
|
|
5701
|
+
if (layer.legend?.imageName) {
|
|
5702
|
+
return of({
|
|
5703
|
+
...layer,
|
|
5704
|
+
imageUrl: this._getImageUrl(layer.legend.imageName)
|
|
5705
|
+
});
|
|
5706
|
+
}
|
|
5707
|
+
if (layer.legend?.imageExternalURL) {
|
|
5708
|
+
return of({
|
|
5709
|
+
...layer,
|
|
5710
|
+
imageUrl: layer.legend.imageExternalURL
|
|
5711
|
+
});
|
|
5712
|
+
}
|
|
5713
|
+
// Fallback to Geoserver legend file
|
|
5714
|
+
const fallbackUrl = `${layer.baseUrl}?service=WMS&REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&STRICT=false&layer=${layer.layers}`;
|
|
5715
|
+
return this._http.get(fallbackUrl, { responseType: 'blob' }).pipe(map(blob => {
|
|
5716
|
+
// Blob returned as an image, so layer has a legend in Geoserver
|
|
5717
|
+
const isImage = blob.type.startsWith('image/');
|
|
5718
|
+
return {
|
|
5719
|
+
...layer,
|
|
5720
|
+
imageUrl: isImage ? fallbackUrl : ''
|
|
5721
|
+
};
|
|
5722
|
+
}), catchError((err) => {
|
|
5723
|
+
console.error(`Signatur kunne ikke indlæses for ${layer.name}`, err);
|
|
5724
|
+
return of({
|
|
5725
|
+
...layer,
|
|
5726
|
+
imageUrl: '' // fallback failed, layer has no legend on Geoserver
|
|
5727
|
+
});
|
|
5728
|
+
}));
|
|
5729
|
+
}
|
|
5730
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FastSwitchSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5731
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FastSwitchSelectorComponent, isStandalone: true, selector: "lib-fast-switch-selector", inputs: { map: "map", profile: "profile" }, usesOnChanges: true, ngImport: i0, template: "@if (layerGroup && layerGroup.length > 0) {\n <div class=\"fast-switch-body-wrapper\" \n [class.collapsed]=\"collapsed\">\n @if (collapsed && selectedLayer?.imageUrl) {\n <div class=\"fast-switch-collapsed\">\n <div class=\"legend\">\n <img [src]=\"selectedLayer?.imageUrl\" class=\"legend-thumbnail\" (click)=\"toggleCollapsed()\"/>\n </div>\n </div>\n }\n @if (!collapsed) {\n <div class=\"fast-switch-expanded global-wrapper-container\">\n \n <div class=\"ol-unselectable ol-control legends-list-body\">\n <div class=\"item-list\">\n @for (layer of layerGroup; track layer.id; let i = $index) {\n @if (layer.imageUrl) {\n <mat-expansion-panel [expanded]=\"true\"> \n <div class=\"legend\">\n <img [src]=\"layer.imageUrl\" class=\"legend-thumbnail\" (click)=\"layerChanged(layer)\"/>\n </div>\n </mat-expansion-panel>\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n}", styles: [".fast-switch-body-wrapper{position:absolute;bottom:100px;left:20px}.fast-switch-body-wrapper .fast-switch-collapsed{width:100px;max-height:100px}.fast-switch-body-wrapper .fast-switch-expanded{width:145px;max-height:610px;position:absolute;bottom:0}.fast-switch-body-wrapper .legends-list-body{bottom:0}.fast-switch-body-wrapper .legend-thumbnail{width:100px;height:100px;border:5px solid white;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }] });
|
|
5732
|
+
}
|
|
5733
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FastSwitchSelectorComponent, decorators: [{
|
|
5734
|
+
type: Component,
|
|
5735
|
+
args: [{ selector: 'lib-fast-switch-selector', imports: [MatFormFieldModule, CommonModule, MatIconModule, FormsModule, DragDropModule,
|
|
5736
|
+
MatExpansionModule, MatInputModule, MatTooltipModule], template: "@if (layerGroup && layerGroup.length > 0) {\n <div class=\"fast-switch-body-wrapper\" \n [class.collapsed]=\"collapsed\">\n @if (collapsed && selectedLayer?.imageUrl) {\n <div class=\"fast-switch-collapsed\">\n <div class=\"legend\">\n <img [src]=\"selectedLayer?.imageUrl\" class=\"legend-thumbnail\" (click)=\"toggleCollapsed()\"/>\n </div>\n </div>\n }\n @if (!collapsed) {\n <div class=\"fast-switch-expanded global-wrapper-container\">\n \n <div class=\"ol-unselectable ol-control legends-list-body\">\n <div class=\"item-list\">\n @for (layer of layerGroup; track layer.id; let i = $index) {\n @if (layer.imageUrl) {\n <mat-expansion-panel [expanded]=\"true\"> \n <div class=\"legend\">\n <img [src]=\"layer.imageUrl\" class=\"legend-thumbnail\" (click)=\"layerChanged(layer)\"/>\n </div>\n </mat-expansion-panel>\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n}", styles: [".fast-switch-body-wrapper{position:absolute;bottom:100px;left:20px}.fast-switch-body-wrapper .fast-switch-collapsed{width:100px;max-height:100px}.fast-switch-body-wrapper .fast-switch-expanded{width:145px;max-height:610px;position:absolute;bottom:0}.fast-switch-body-wrapper .legends-list-body{bottom:0}.fast-switch-body-wrapper .legend-thumbnail{width:100px;height:100px;border:5px solid white;border-radius:6px}\n"] }]
|
|
5737
|
+
}], propDecorators: { map: [{
|
|
5738
|
+
type: Input
|
|
5739
|
+
}], profile: [{
|
|
5740
|
+
type: Input
|
|
5741
|
+
}] } });
|
|
5742
|
+
|
|
5604
5743
|
class GisKomponentComponent {
|
|
5605
5744
|
_profileService = inject(ProfileService);
|
|
5606
5745
|
_http = inject(HttpClient);
|
|
@@ -5616,6 +5755,7 @@ class GisKomponentComponent {
|
|
|
5616
5755
|
settings;
|
|
5617
5756
|
toolbarRef;
|
|
5618
5757
|
legendsListRef;
|
|
5758
|
+
fastSwitchSelectorRef;
|
|
5619
5759
|
layerSelectorRef;
|
|
5620
5760
|
activeObjectsRef;
|
|
5621
5761
|
documentInfoRef;
|
|
@@ -5663,6 +5803,7 @@ class GisKomponentComponent {
|
|
|
5663
5803
|
profileSelected(profileIdentifier) {
|
|
5664
5804
|
this._profileService.getByIdentifier(profileIdentifier).subscribe({
|
|
5665
5805
|
next: profile => {
|
|
5806
|
+
console.log("🚀 ~ GisKomponentComponent ~ profileSelected ~ profile:", profile);
|
|
5666
5807
|
this._currentItems.profile = profile;
|
|
5667
5808
|
this.toolbarCollapsed = profile.toolbarCollapsed;
|
|
5668
5809
|
this.selectedProfile = profile;
|
|
@@ -5678,14 +5819,19 @@ class GisKomponentComponent {
|
|
|
5678
5819
|
this.currentZoomLevel = profile.zoom ?? 8;
|
|
5679
5820
|
this._getCapabilitiesObject(profile).subscribe({
|
|
5680
5821
|
next: capabilityObject => {
|
|
5681
|
-
|
|
5682
|
-
|
|
5683
|
-
|
|
5684
|
-
|
|
5685
|
-
|
|
5686
|
-
|
|
5687
|
-
|
|
5688
|
-
|
|
5822
|
+
console.log("🚀 ~ GisKomponentComponent ~ profileSelected ~ capabilityObject:", capabilityObject);
|
|
5823
|
+
let allLayergroups = [...profile.layerGroups];
|
|
5824
|
+
if (profile.fastSwitchLayerGroup) {
|
|
5825
|
+
const mappedFastSwitchGroup = { ...profile.fastSwitchLayerGroup, sortOrder: -1, fastSwitchLayerGroup: true };
|
|
5826
|
+
allLayergroups = allLayergroups.concat(mappedFastSwitchGroup);
|
|
5827
|
+
}
|
|
5828
|
+
const layers = allLayergroups.map((lg) => new OLLayerGroup({
|
|
5829
|
+
layers: lg.layers
|
|
5830
|
+
.filter(layer => layer.activeInSelector)
|
|
5831
|
+
.sort((a, b) => a.sortOrder - b.sortOrder)
|
|
5832
|
+
.map((l, index) => this._mapLayer(l, capabilityObject, 'EPSG:25832', lg.id, lg.fastSwitchLayerGroup === true ? -1 : index)), // for now, we default to EPSG:25832.
|
|
5833
|
+
properties: { id: lg.id }
|
|
5834
|
+
}));
|
|
5689
5835
|
this.map.setLayers(layers);
|
|
5690
5836
|
if (this.settings) {
|
|
5691
5837
|
this._featureLoader.loadFeaturesSettings(this.settings);
|
|
@@ -5708,6 +5854,13 @@ class GisKomponentComponent {
|
|
|
5708
5854
|
//Toolbox is hidden, but needed for default tool, so expand it
|
|
5709
5855
|
this.toolbarCollapsed = false;
|
|
5710
5856
|
}
|
|
5857
|
+
if (profile.fastSwitchLayerGroup?.layers &&
|
|
5858
|
+
profile.fastSwitchLayerGroup?.layers.length > 0) {
|
|
5859
|
+
const fastSwitchControl = new Control({
|
|
5860
|
+
element: this.fastSwitchSelectorRef?.nativeElement
|
|
5861
|
+
});
|
|
5862
|
+
this.map.addControl(fastSwitchControl);
|
|
5863
|
+
}
|
|
5711
5864
|
if (profile.showLegends) {
|
|
5712
5865
|
const legendsListControl = new Control({
|
|
5713
5866
|
element: this.legendsListRef?.nativeElement
|
|
@@ -5773,7 +5926,9 @@ class GisKomponentComponent {
|
|
|
5773
5926
|
}
|
|
5774
5927
|
_getCapabilitiesObject(profile) {
|
|
5775
5928
|
// Find all WMTS-layers and get their base url's for retrieving the capabilities. Make sure every url is only called once by removing duplicates
|
|
5776
|
-
|
|
5929
|
+
let layerGroupLayers = [...new Set(profile.layerGroups.flatMap(lg => lg.layers).filter(lg => lg.layerType === 'WMTS'))];
|
|
5930
|
+
if (profile.fastSwitchLayerGroup)
|
|
5931
|
+
layerGroupLayers = layerGroupLayers.concat(profile.fastSwitchLayerGroup.layers.filter(lg => lg.layerType === 'WMTS'));
|
|
5777
5932
|
const parser = new WMTSCapabilities();
|
|
5778
5933
|
const capabilities$ = layerGroupLayers
|
|
5779
5934
|
.map(layer => {
|
|
@@ -5813,7 +5968,7 @@ class GisKomponentComponent {
|
|
|
5813
5968
|
result = new ImageLayer({
|
|
5814
5969
|
source: new ImageWMS({
|
|
5815
5970
|
url: layer.baseUrl,
|
|
5816
|
-
crossOrigin: 'anonymous',
|
|
5971
|
+
// crossOrigin: 'anonymous', // This gives us CORS errors sometimes
|
|
5817
5972
|
params,
|
|
5818
5973
|
})
|
|
5819
5974
|
});
|
|
@@ -5822,7 +5977,7 @@ class GisKomponentComponent {
|
|
|
5822
5977
|
result = new TileLayer({
|
|
5823
5978
|
source: new TileWMS({
|
|
5824
5979
|
url: layer.baseUrl,
|
|
5825
|
-
crossOrigin: 'anonymous',
|
|
5980
|
+
// crossOrigin: 'anonymous',
|
|
5826
5981
|
params,
|
|
5827
5982
|
})
|
|
5828
5983
|
});
|
|
@@ -5961,15 +6116,15 @@ class GisKomponentComponent {
|
|
|
5961
6116
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: GisKomponentComponent, isStandalone: true, selector: "gis-komponent", inputs: { identifier: "identifier", settings: "settings" }, outputs: { sessionDone: "sessionDone", featuresChanged: "featuresChanged" }, providers: [CurrentItemsService, FeatureLoaderService, DrawLayerSourceService, ZoomService, UndoRedoService, ShowInfoHoverService, HoverInfoSearchService, CenterPointService, PrintDrawLayerSourceService,
|
|
5962
6117
|
HighlightService, ShowInfoService, InfoSearchProvider, InteractionHelperService, ConflictAnalysisSearchProvider,
|
|
5963
6118
|
MergeFeaturesService, OverlapService, CowiService, SearchProviderService, AddressSearchService, CadastreSearchService, ShowDocumentInfoService, DocumentSearchService,
|
|
5964
|
-
DmpCatalogService, OlCapabilitiesService, DmpLayerMapperService, GeometrySearchService, GeometrySplitService, PolygonCleanupService], 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: "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 #documentInfoRef class=\"documents-features-wrapper\">\n <document-search-info></document-search-info>\n</div>\n\n<div #activeObjectsRef class=\"active-objects-container\">\n @if(showActiveObjects && settings && selectedProfile) {\n <activeObjects [settings]=\"settings\" [profile]=\"selectedProfile\" (sessionDone)=\"sessionDoneFromActiveObject()\"></activeObjects>\n }\n</div>\n\n<div #toolbarRef class=\"map-toolbar-container\">\n @if (settings) {\n <map-toolbox [map]=\"map\" \n [profile]=\"selectedProfile\"\n [settings]=\"settings\"\n [class.toolbox-hidden]=\"!profileShowToolbox\"\n [collapsed]=\"toolbarCollapsed\" [WKTInputEnabled]=\"settings?.WKTInputEnabled\" [deleteEnabled]=\"settings?.deleteEnabled\" [showMeasureArea]=\"selectedProfile?.showAreaMeasurement || false\" [showMeasureDistance]=\"selectedProfile?.showDistanceMeasurement || false\"></map-toolbox>\n }\n</div>\n\n<div class=\"map-container\">\n <lib-map-search *ngIf=\"showSearch\" [profile]=\"selectedProfile\"></lib-map-search>\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 .ol-rotate.ol-control{position:absolute;top:10px;right:10px;background:transparent}@media (max-width: 768px){::ng-deep .ol-rotate.ol-control{top:5px;right:5px}}::ng-deep .ol-rotate-reset{position:relative;background:#4c4d51;color:#fff;border-radius:5px;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;margin:0;padding:0}::ng-deep .ol-rotate-reset .hover-text{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);background:#4c4d51;color:#fff;padding:8px;border-radius:5px;white-space:nowrap;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:500;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;z-index:9999}::ng-deep .ol-rotate-reset:hover .hover-text{opacity:1;visibility:visible}::ng-deep .ol-rotate-reset .ol-compass{display:inline-block;transition:transform .3s ease;line-height:0}::ng-deep .ol-rotate.ol-control{background:transparent!important;border-radius:0!important;padding:0!important;margin:0!important}::ng-deep .ol-rotate.ol-control button{margin:0}::ng-deep button.ol-zoom-in,::ng-deep button.ol-zoom-out{background:#4c4d51!important;color:#fff;border-radius:5px!important}::ng-deep button.ol-zoom-in:hover,::ng-deep button.ol-zoom-out:hover{color:#e9e3e3;outline:none}::ng-deep button.ol-rotate-reset{border:none}::ng-deep button.ol-rotate-reset:hover{outline:none}::ng-deep [data-tooltip]{position:relative}::ng-deep [data-tooltip]:after{content:attr(data-tooltip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:#4c4d51;color:#fff;padding:8px;border-radius:5px;white-space:nowrap;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-size:12px;pointer-events:none;opacity:0;transition:opacity .2s}::ng-deep [data-tooltip]:hover:after{opacity:1}::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}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-weight:500}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-weight:500}::ng-deep .mat-mdc-tooltip-surface{font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-weight:500}::ng-deep .mdc-tooltip .mdc-tooltip__surface{font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-weight:500}: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 .toolbox-hidden{visibility:hidden!important}::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:250px;display:flex;justify-content:end;right:5px}::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}::ng-deep .documents-features-wrapper{position:absolute!important;left:45px;top:9px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatListModule }, { 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: DocumentSearchInfoComponent, selector: "document-search-info" }] });
|
|
6119
|
+
DmpCatalogService, OlCapabilitiesService, DmpLayerMapperService, GeometrySearchService, GeometrySplitService, PolygonCleanupService], viewQueries: [{ propertyName: "toolbarRef", first: true, predicate: ["toolbarRef"], descendants: true, static: true }, { propertyName: "legendsListRef", first: true, predicate: ["legendsListRef"], descendants: true, static: true }, { propertyName: "fastSwitchSelectorRef", first: true, predicate: ["fastSwitchSelectorRef"], 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: "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 #fastSwitchSelectorRef class=\"fast-switch-container\">\n @if (selectedProfile && selectedProfile.fastSwitchLayerGroup\n && selectedProfile.fastSwitchLayerGroup.layers \n && selectedProfile.fastSwitchLayerGroup.layers.length > 0) {\n <lib-fast-switch-selector [map]=\"map\" [profile]=\"selectedProfile\"></lib-fast-switch-selector>\n }\n</div>\n\n<div #documentInfoRef class=\"documents-features-wrapper\">\n <document-search-info></document-search-info>\n</div>\n\n<div #activeObjectsRef class=\"active-objects-container\">\n @if(showActiveObjects && settings && selectedProfile) {\n <activeObjects [settings]=\"settings\" [profile]=\"selectedProfile\" (sessionDone)=\"sessionDoneFromActiveObject()\"></activeObjects>\n }\n</div>\n\n<div #toolbarRef class=\"map-toolbar-container\">\n @if (settings) {\n <map-toolbox [map]=\"map\" \n [profile]=\"selectedProfile\"\n [settings]=\"settings\"\n [class.toolbox-hidden]=\"!profileShowToolbox\"\n [collapsed]=\"toolbarCollapsed\" [WKTInputEnabled]=\"settings?.WKTInputEnabled\" [deleteEnabled]=\"settings?.deleteEnabled\" [showMeasureArea]=\"selectedProfile?.showAreaMeasurement || false\" [showMeasureDistance]=\"selectedProfile?.showDistanceMeasurement || false\"></map-toolbox>\n }\n</div>\n\n<div class=\"map-container\">\n <lib-map-search *ngIf=\"showSearch\" [profile]=\"selectedProfile\"></lib-map-search>\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 .ol-rotate.ol-control{position:absolute;top:10px;right:10px;background:transparent}@media (max-width: 768px){::ng-deep .ol-rotate.ol-control{top:5px;right:5px}}::ng-deep .ol-rotate-reset{position:relative;background:#4c4d51;color:#fff;border-radius:5px;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;margin:0;padding:0}::ng-deep .ol-rotate-reset .hover-text{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);background:#4c4d51;color:#fff;padding:8px;border-radius:5px;white-space:nowrap;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:500;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;z-index:9999}::ng-deep .ol-rotate-reset:hover .hover-text{opacity:1;visibility:visible}::ng-deep .ol-rotate-reset .ol-compass{display:inline-block;transition:transform .3s ease;line-height:0}::ng-deep .ol-rotate.ol-control{background:transparent!important;border-radius:0!important;padding:0!important;margin:0!important}::ng-deep .ol-rotate.ol-control button{margin:0}::ng-deep button.ol-zoom-in,::ng-deep button.ol-zoom-out{background:#4c4d51!important;color:#fff;border-radius:5px!important}::ng-deep button.ol-zoom-in:hover,::ng-deep button.ol-zoom-out:hover{color:#e9e3e3;outline:none}::ng-deep button.ol-rotate-reset{border:none}::ng-deep button.ol-rotate-reset:hover{outline:none}::ng-deep [data-tooltip]{position:relative}::ng-deep [data-tooltip]:after{content:attr(data-tooltip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:#4c4d51;color:#fff;padding:8px;border-radius:5px;white-space:nowrap;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-size:12px;pointer-events:none;opacity:0;transition:opacity .2s}::ng-deep [data-tooltip]:hover:after{opacity:1}::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}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-weight:500}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-weight:500}::ng-deep .mat-mdc-tooltip-surface{font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-weight:500}::ng-deep .mdc-tooltip .mdc-tooltip__surface{font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-weight:500}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none}: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 .toolbox-hidden{visibility:hidden!important}::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:250px;display:flex;justify-content:end;right:5px}::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}::ng-deep .documents-features-wrapper{position:absolute!important;left:45px;top:9px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatListModule }, { 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: DocumentSearchInfoComponent, selector: "document-search-info" }, { kind: "component", type: FastSwitchSelectorComponent, selector: "lib-fast-switch-selector", inputs: ["map", "profile"] }] });
|
|
5965
6120
|
}
|
|
5966
6121
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: GisKomponentComponent, decorators: [{
|
|
5967
6122
|
type: Component,
|
|
5968
6123
|
args: [{ selector: 'gis-komponent', imports: [CommonModule, MatIconModule, MatListModule, MatSelectModule, LayerSelectorComponent, MapSearchComponent, ToolboxComponent, ActiveObjectsComponent,
|
|
5969
|
-
LegendsListComponent, DocumentSearchInfoComponent], providers: [CurrentItemsService, FeatureLoaderService, DrawLayerSourceService, ZoomService, UndoRedoService, ShowInfoHoverService, HoverInfoSearchService, CenterPointService, PrintDrawLayerSourceService,
|
|
6124
|
+
LegendsListComponent, DocumentSearchInfoComponent, FastSwitchSelectorComponent], providers: [CurrentItemsService, FeatureLoaderService, DrawLayerSourceService, ZoomService, UndoRedoService, ShowInfoHoverService, HoverInfoSearchService, CenterPointService, PrintDrawLayerSourceService,
|
|
5970
6125
|
HighlightService, ShowInfoService, InfoSearchProvider, InteractionHelperService, ConflictAnalysisSearchProvider,
|
|
5971
6126
|
MergeFeaturesService, OverlapService, CowiService, SearchProviderService, AddressSearchService, CadastreSearchService, ShowDocumentInfoService, DocumentSearchService,
|
|
5972
|
-
DmpCatalogService, OlCapabilitiesService, DmpLayerMapperService, GeometrySearchService, GeometrySplitService, PolygonCleanupService], 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 #documentInfoRef class=\"documents-features-wrapper\">\n <document-search-info></document-search-info>\n</div>\n\n<div #activeObjectsRef class=\"active-objects-container\">\n @if(showActiveObjects && settings && selectedProfile) {\n <activeObjects [settings]=\"settings\" [profile]=\"selectedProfile\" (sessionDone)=\"sessionDoneFromActiveObject()\"></activeObjects>\n }\n</div>\n\n<div #toolbarRef class=\"map-toolbar-container\">\n @if (settings) {\n <map-toolbox [map]=\"map\" \n [profile]=\"selectedProfile\"\n [settings]=\"settings\"\n [class.toolbox-hidden]=\"!profileShowToolbox\"\n [collapsed]=\"toolbarCollapsed\" [WKTInputEnabled]=\"settings?.WKTInputEnabled\" [deleteEnabled]=\"settings?.deleteEnabled\" [showMeasureArea]=\"selectedProfile?.showAreaMeasurement || false\" [showMeasureDistance]=\"selectedProfile?.showDistanceMeasurement || false\"></map-toolbox>\n }\n</div>\n\n<div class=\"map-container\">\n <lib-map-search *ngIf=\"showSearch\" [profile]=\"selectedProfile\"></lib-map-search>\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 .ol-rotate.ol-control{position:absolute;top:10px;right:10px;background:transparent}@media (max-width: 768px){::ng-deep .ol-rotate.ol-control{top:5px;right:5px}}::ng-deep .ol-rotate-reset{position:relative;background:#4c4d51;color:#fff;border-radius:5px;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;margin:0;padding:0}::ng-deep .ol-rotate-reset .hover-text{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);background:#4c4d51;color:#fff;padding:8px;border-radius:5px;white-space:nowrap;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:500;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;z-index:9999}::ng-deep .ol-rotate-reset:hover .hover-text{opacity:1;visibility:visible}::ng-deep .ol-rotate-reset .ol-compass{display:inline-block;transition:transform .3s ease;line-height:0}::ng-deep .ol-rotate.ol-control{background:transparent!important;border-radius:0!important;padding:0!important;margin:0!important}::ng-deep .ol-rotate.ol-control button{margin:0}::ng-deep button.ol-zoom-in,::ng-deep button.ol-zoom-out{background:#4c4d51!important;color:#fff;border-radius:5px!important}::ng-deep button.ol-zoom-in:hover,::ng-deep button.ol-zoom-out:hover{color:#e9e3e3;outline:none}::ng-deep button.ol-rotate-reset{border:none}::ng-deep button.ol-rotate-reset:hover{outline:none}::ng-deep [data-tooltip]{position:relative}::ng-deep [data-tooltip]:after{content:attr(data-tooltip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:#4c4d51;color:#fff;padding:8px;border-radius:5px;white-space:nowrap;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-size:12px;pointer-events:none;opacity:0;transition:opacity .2s}::ng-deep [data-tooltip]:hover:after{opacity:1}::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}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-weight:500}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-weight:500}::ng-deep .mat-mdc-tooltip-surface{font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-weight:500}::ng-deep .mdc-tooltip .mdc-tooltip__surface{font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-weight:500}: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 .toolbox-hidden{visibility:hidden!important}::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:250px;display:flex;justify-content:end;right:5px}::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}::ng-deep .documents-features-wrapper{position:absolute!important;left:45px;top:9px}\n"] }]
|
|
6127
|
+
DmpCatalogService, OlCapabilitiesService, DmpLayerMapperService, GeometrySearchService, GeometrySplitService, PolygonCleanupService], 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 #fastSwitchSelectorRef class=\"fast-switch-container\">\n @if (selectedProfile && selectedProfile.fastSwitchLayerGroup\n && selectedProfile.fastSwitchLayerGroup.layers \n && selectedProfile.fastSwitchLayerGroup.layers.length > 0) {\n <lib-fast-switch-selector [map]=\"map\" [profile]=\"selectedProfile\"></lib-fast-switch-selector>\n }\n</div>\n\n<div #documentInfoRef class=\"documents-features-wrapper\">\n <document-search-info></document-search-info>\n</div>\n\n<div #activeObjectsRef class=\"active-objects-container\">\n @if(showActiveObjects && settings && selectedProfile) {\n <activeObjects [settings]=\"settings\" [profile]=\"selectedProfile\" (sessionDone)=\"sessionDoneFromActiveObject()\"></activeObjects>\n }\n</div>\n\n<div #toolbarRef class=\"map-toolbar-container\">\n @if (settings) {\n <map-toolbox [map]=\"map\" \n [profile]=\"selectedProfile\"\n [settings]=\"settings\"\n [class.toolbox-hidden]=\"!profileShowToolbox\"\n [collapsed]=\"toolbarCollapsed\" [WKTInputEnabled]=\"settings?.WKTInputEnabled\" [deleteEnabled]=\"settings?.deleteEnabled\" [showMeasureArea]=\"selectedProfile?.showAreaMeasurement || false\" [showMeasureDistance]=\"selectedProfile?.showDistanceMeasurement || false\"></map-toolbox>\n }\n</div>\n\n<div class=\"map-container\">\n <lib-map-search *ngIf=\"showSearch\" [profile]=\"selectedProfile\"></lib-map-search>\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 .ol-rotate.ol-control{position:absolute;top:10px;right:10px;background:transparent}@media (max-width: 768px){::ng-deep .ol-rotate.ol-control{top:5px;right:5px}}::ng-deep .ol-rotate-reset{position:relative;background:#4c4d51;color:#fff;border-radius:5px;border:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;margin:0;padding:0}::ng-deep .ol-rotate-reset .hover-text{position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);background:#4c4d51;color:#fff;padding:8px;border-radius:5px;white-space:nowrap;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:12px;font-weight:500;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;z-index:9999}::ng-deep .ol-rotate-reset:hover .hover-text{opacity:1;visibility:visible}::ng-deep .ol-rotate-reset .ol-compass{display:inline-block;transition:transform .3s ease;line-height:0}::ng-deep .ol-rotate.ol-control{background:transparent!important;border-radius:0!important;padding:0!important;margin:0!important}::ng-deep .ol-rotate.ol-control button{margin:0}::ng-deep button.ol-zoom-in,::ng-deep button.ol-zoom-out{background:#4c4d51!important;color:#fff;border-radius:5px!important}::ng-deep button.ol-zoom-in:hover,::ng-deep button.ol-zoom-out:hover{color:#e9e3e3;outline:none}::ng-deep button.ol-rotate-reset{border:none}::ng-deep button.ol-rotate-reset:hover{outline:none}::ng-deep [data-tooltip]{position:relative}::ng-deep [data-tooltip]:after{content:attr(data-tooltip);position:absolute;left:calc(100% + 8px);top:50%;transform:translateY(-50%);background:#4c4d51;color:#fff;padding:8px;border-radius:5px;white-space:nowrap;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-size:12px;pointer-events:none;opacity:0;transition:opacity .2s}::ng-deep [data-tooltip]:hover:after{opacity:1}::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}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-weight:500}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px;font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-weight:500}::ng-deep .mat-mdc-tooltip-surface{font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-weight:500}::ng-deep .mdc-tooltip .mdc-tooltip__surface{font-family:Avenir Next W01,Lato,-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif!important;font-weight:500}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none}: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 .toolbox-hidden{visibility:hidden!important}::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:250px;display:flex;justify-content:end;right:5px}::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}::ng-deep .documents-features-wrapper{position:absolute!important;left:45px;top:9px}\n"] }]
|
|
5973
6128
|
}], ctorParameters: () => [], propDecorators: { identifier: [{
|
|
5974
6129
|
type: Input,
|
|
5975
6130
|
args: [{ required: true }]
|
|
@@ -5981,6 +6136,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5981
6136
|
}], legendsListRef: [{
|
|
5982
6137
|
type: ViewChild,
|
|
5983
6138
|
args: ['legendsListRef', { static: true }]
|
|
6139
|
+
}], fastSwitchSelectorRef: [{
|
|
6140
|
+
type: ViewChild,
|
|
6141
|
+
args: ['fastSwitchSelectorRef', { static: true }]
|
|
5984
6142
|
}], layerSelectorRef: [{
|
|
5985
6143
|
type: ViewChild,
|
|
5986
6144
|
args: ['layerSelectorRef', { static: true }]
|