@regionerne/gis-komponent 0.0.68 → 0.0.69
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.
|
@@ -1873,6 +1873,7 @@ class IconsConstants {
|
|
|
1873
1873
|
static mergeBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAIAAABvFaqvAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAQbSURBVDhPjZVdTFt1FMDvvaUtNyv9klIqo7Ed61gLmyOdICNrsnVpGoFFszUYt/mEaDJ9Ut80yxJf9MHozB4EZzTRZdnQKZ0NgbJJi+ma2oGwFUpp51Zmv2w7+sX6dT239xYoYMIvaXu+/uf+z/9/7ilKEASCID6fz2KxhEKhZDIJ6k7gcDh1dXVqtVqpVIJKJjKbzdPT02ASCATgpuIobIHqH9w1l46GaX0D8MhYLLawsMDn8w0GA+p2u8fHx3U6He0vE84wLt7l/pPJ3ouIl856aet2WK1WhUKBQUWtra20rczlWV7fqEhdv3hS/pA2/T9Qmt1ux5aXl2tra2lbqZbjNyX+VPQrjfnYbn/JRnRcb3h9VHLlAXc5WVWyVCAUCqPRaFWhUGCxWKCv1XKx3SqtSVBBJAT63sGHIz7pl39xP3HwGBgiZBdl3OKJxpROmm7g5Kko+glQy/ASfq55rryLdaqw1S6JS1PvotREXjTi2++M4GTeP59DkZznLLkEg89Jo/hRNL6hlgqYGANFi0WseOvn3+F7FyvYt+/Op0dMI93GCy/ZCYSsBiATZQqYhJ/gMHOUCTANW2iJ9DKfPA45pubuOz2mG5ZS220DmahZkL/qklM6EHzyb8AfWXzw9+SoI2ga6nb0TBjvrsRS4Oo8foggClTYJshEHx2ORnNsT5wHstM6/+vV209jiTnnIruahR/QGtUjZ97pOdbdzuVzuPxdGEYu2QppFeGFNlH+0kwLyG1dzbVi/isGzatntO2aA9yGFxBkvhSJvPXBaRRFTcNWSt0Enf5Ce3Q2yk9mmSCvxFONMgllh66AWmmxBJwULVVCJ2oW5J7Hi5dnyRZ/83wvGyczlhAhCBt+nsaSUCx1CVD+I0+g5F1nveB3X0yY/eJnBWziln01nSMQAhZH5mcO+mxff3b92pDpsS/QKKuHSChf2kQKG1lv+VNNyY/t3JtLMpVk4dsvfirk8+xqdqO8Xn1Y2dui5wnIqQCj4g/zPSp+ExVXcFqe/v7+HtWhpjqJQH/qKJwu3tH3TaSfygIvExx2//sGaKVkjjnh320PC2uYaWptRaJz+1MYE7vhadK9dsR2Z4a2lmEwGPageGi6pf+2tu83rSOwt0PEN3ZHKG/F27yHl5Ny89c8e3vlPugd2oogP7r3OSJCZ1DSJUm8LM59rlpRCrO0rwz0FwZ7pjXYlGK1Gsn84pWtvQoo8gxFJOdVCIy377Tht1vjW7MAGAwjmCa0hiA9slQ0jV9xKdIFFFQiB9fH/rAtrmnIUAFbgZkLAxqdmpryer2dnZ20NRu2hxJwCpQKsLCs641tpsIak5OTPB6PHP6Dg4MwwGHgUhNu52SzWZvNBjsaGBig/47GxsbAtPGwdgLco0ql0uv1OI7/B1EuvKrM1DRLAAAAAElFTkSuQmCC';
|
|
1874
1874
|
static drawPrintBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAaCAYAAABCfffNAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAUQSURBVEhLjZbrM1VvFMfXOUcuyRhySW6FklJCkepFSi7jUpMuIzW55A/oVW/9I2YYipohphqKjCi3ZqSJbjRjXCsqt6Qkv/NZ7Eaifmtmz977PM9e37W+a63vc0yfPn1akH+Y2WyWL1++yIMHD6SxsVEcHR3FwcFBPn/+LElJSXLgwAFZv369/PjxY+mL3+2vICaTSQEmJibkzp07UlVVJd3d3fL9+3e93N3d5cqVK+Lh4SFbtmwRPz8/sbW1lZ8/fy55WDTz0v0PA4Drw4cPUl5eLpWVlbJx40bZtWuXfPv2Tebm5jSA1tZWKSgokM7OTgU2vl1ulqtXr+YvPf8yNlksFnn37p0C3Lp1S3bs2CEXLlxQx9Cyfft26evrk0ePHsnk5KQEBweLlRWllQxtbGxkYWGRpD9AjCiGhoakoqJCbt++LXv27JHs7Gy9u7q6yr59+2TDhg3y9OlTrY2Tk5MCNTU1aXAhISEKQkDYb3QBwMLg4KCUlpYqRREREXL58mWNlPWtW7fqM8Vn7cyZM/p7Q0ODfP36Vevx5MkTefXq1S+fvzLhhfTI4ObNm1JdXa0R5+TkKDWs44BIiXLz5s2ye/dumZqaUqfz8/Nib28vL1++lK6uLnF2dpZt27aJnZ3dYiY4wAYGBqSoqEju3bsn0dHRmsFyABxRdIKhCQICAiQwMFBOnDghFy9e1Oxev36tvqgb2RGE2QCAopKSErl//77SkJubqwAYXfP+/XvlvLm5WUZHR9UJWe3du1cp43l6elrBx8fHlW4ahr02OOnv75fi4mJ5+PChDpZBEVHDLR1Ei/b29srx48dl586dCo5jFxcXpYTWhq4XL17owPJtWFiYNoiZCK9duyY1NTUaFRThhDl49uyZXL9+XXmGBi4yxzF3aINCBhDwY8eO6TNrZMQ6l8XakvnUwKAoNDRUZmdnFYDuwlJTUzVqHMTGxmrUfGwYTlmbmZnRDNatW6czw/3o0aNi+fjxYz4AeXl5CkCB6Q74JJvz588rHR0dHVroI0eOaCYrDSDkhUGEfuoSHx+v9JvRGyYZAIoJp1AHDRQUIACJ8NChQ6pR2MpMmK+RkRHN/vnz5xIXFyenT5/WjjMznd7e3rrpzZs36pChOnfunDpCVuias2fPLkZl3bdcAAGAyrGxMblx44bU19dr+8MAWWlNrLKQzxTjGJUlg7S0NL3zTnbp6ekSGRmpHK8EABQABpijICoqSgEYViNbk7UjFtAf2o+CJiQkaAEBwMmpU6d0sol2tQxQ6bKyMqmrq1M6YcDX11f3GCBmehm19fT0lOTkZM2AmmAnT57UXkdGVgOg/cmgtrZW9u/frzVcrWZmDiSc0b4U+e7du+oQipgbHAK83ABF45gvFCImJkYp8vf3173LATAzIgYlcItuUThqtFYNADBUGoDw8HDJyMjQ9sZWAmBmWo3uoavgl/rQgpwVxulnGM9v376VwsJCFT9qkJWVpTUgmNUAMIu1hfPb29v10ElMTJSgoCBpa2tTKXFzc5NNmzbpMJIF2kW2ABw+fFgBmDNsLQDMYt2UjwOk4+DBgwpCNgDzp4FnLiMDAkBaLl26JD4+PurkbwCYqaenZ4FOQS3RH4wWbmlpUXFEgzgJOc+Hh4clJSVFMjMzxcvLS7P7FwBmstbDum9RTY0iA8oZgoZxzj9+/FjfaRAm/181WGlr/u8CiGmnk5Abio4EkQH2fwFERP4DZxLcmtGNPaEAAAAASUVORK5CYII=';
|
|
1875
1875
|
static documentSearchBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAIAAABvFaqvAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAKsSURBVDhPlZXda1JxGMfPmx6d56wzPW5pbC6EXIYkZF04E6PCddHV6qoXooL+gS6jboOgiyAWjaiugqC6HeV2MTaWmQilhVALas61TZ35Nl+Op2c7P7d55kH34YHj8zzH7+/5vT0HT6fTGIYlEolQKLS6ulooFMDtBJ1Ox/O8w+GwWq3gbggFg8FYLOZyuXp6ehiGkd5rSz6fz2Qy8XicZdmRkRE8EonMzc35/X6U74yygNOkKP2emZmxWCz4+Pj40NCQ2WyWoq9/sPfDBi1Vl9wtBBHHMezFmaSNq6BQA5jT7OwslUwmPR4PimHYvU/8bWf6bH9RphRZoe98NF7+YHp5esmuL6PoJnq9HuZICIKgVqtRDMMqAn6Iqwyw1cFm69UKBo1w0569OGH+nVOht3dAoGcHFGv4rSNr1w5nRyfM8bXtsSU6FYIa6yJ+NWD69U+VXicvvTehRINOhfqZ2iv/4rCpdMy4fvd4KlMmUaLBHqYG+wVTu2HPjlpzjEq+rYpCX1L00xj37Nu+nfZunq3V4Ri0QFFoIU+FljWfV5osmlLX0DGUQ6HnLk70rfdpBaJ5eDiocKBbFqUoFPije/69W928pgNM9cHwMnKaURQ6P5h39ZZkQ2spsYsS89W9VPRmnnkS5dTE1pLgdRE72F0d8y2hQDOKQhesOZ+5tHFTN1ERIhiJK1akuGtvf7JXAqbrk/slG4tyHF0HQ+ldKAqdsxQenfz70LMsGVxXKAflWkEA0ACQt0lN3Kgc7vpRvuwwIOtnqlIWAD1oT8hpQBkMBuhMRqNR8k8dKD7+yk0udInKw5dqBK/ZHht6LvRvfGpqCjq/2+1G4b0zPT0NQoTT6SwWi+FwuFKR99C2wF9AJZfL+Xw+9DmC/g9assVqC0mSNpvN6/XSNP0f/kMg5XZvKf4AAAAASUVORK5CYII=';
|
|
1876
|
+
static showInfoObjBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAIAAABvFaqvAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAD6SURBVDhP1ZWxCoMwEIbzBn3kokMXXUQUFETESUEfQBwEEQUnBysE4mM4CCW9NDeVDiYg2I8TzjP/z+nwS/iHdV2TJLEs634YOAySeZ6lgzCq69q27aZppmlih4HDIAmCIMsyYUQp9X0fHx7mSVfsGIO9+r4nURS1bYszLcZxdByHmKa5LAvOdIFPRuDCO8Zuj5dqSeEPI+wU+78wUi0pPHMj7C5kpFpSeOZG2F3ISLWk8NtIG2FkGAZkGw50EUae5w3DgAMtIHMhv0nXdWma4kyLOI7LshThH4ZhnucaOQkScHFdd993/B1VVQWZC6+qBEiKoti2jXP+BtBOC1S23cCGAAAAAElFTkSuQmCC';
|
|
1876
1877
|
}
|
|
1877
1878
|
|
|
1878
1879
|
class PrintDrawLayerSourceService {
|
|
@@ -2743,7 +2744,7 @@ class AddressSearchService {
|
|
|
2743
2744
|
const a = this.document.createElement('a');
|
|
2744
2745
|
a.style.display = 'none';
|
|
2745
2746
|
a.href = url;
|
|
2746
|
-
a.download = '
|
|
2747
|
+
a.download = 'adresser.csv';
|
|
2747
2748
|
this.document.body.appendChild(a);
|
|
2748
2749
|
a.click();
|
|
2749
2750
|
a.remove();
|
|
@@ -2938,6 +2939,7 @@ class ToolboxComponent {
|
|
|
2938
2939
|
mergeBase64 = IconsConstants.mergeBase64;
|
|
2939
2940
|
drawPrintBase64 = IconsConstants.drawPrintBase64;
|
|
2940
2941
|
documentSearchBase64 = IconsConstants.documentSearchBase64;
|
|
2942
|
+
showInfoObjBase64 = IconsConstants.showInfoObjBase64;
|
|
2941
2943
|
dragPosition = { x: 0, y: 0 };
|
|
2942
2944
|
snap = true;
|
|
2943
2945
|
showInputWKT = false;
|
|
@@ -3848,16 +3850,16 @@ class ToolboxComponent {
|
|
|
3848
3850
|
_loadDefaultToolIfNeeded() {
|
|
3849
3851
|
if (this.profile && this.profile.defaultTool) {
|
|
3850
3852
|
switch (this.profile.defaultTool) {
|
|
3851
|
-
case '
|
|
3853
|
+
case 'Vælg og vis objektdata i træstruktur':
|
|
3852
3854
|
this.toggleShowInfo();
|
|
3853
3855
|
return;
|
|
3854
|
-
case 'Download
|
|
3856
|
+
case 'Download adresser':
|
|
3855
3857
|
this.startDownloadAddresses();
|
|
3856
3858
|
return;
|
|
3857
3859
|
case 'Download matrikler':
|
|
3858
3860
|
this.startDownloadCasdatres();
|
|
3859
3861
|
return;
|
|
3860
|
-
case '
|
|
3862
|
+
case 'Vælg Lokaliteter ved udpegning i kortet':
|
|
3861
3863
|
this.togglePointPolygonSearch();
|
|
3862
3864
|
return;
|
|
3863
3865
|
case 'Dokument fra punkt':
|
|
@@ -3869,7 +3871,7 @@ class ToolboxComponent {
|
|
|
3869
3871
|
case 'Fremhæv aktivt objekt i listen':
|
|
3870
3872
|
this.startSelectFeatureHighlight();
|
|
3871
3873
|
return;
|
|
3872
|
-
case 'Indsæt eller flyt punkter i flade':
|
|
3874
|
+
case 'Indsæt eller flyt punkter i flade/linje':
|
|
3873
3875
|
this.startEdit();
|
|
3874
3876
|
return;
|
|
3875
3877
|
case 'Skift status på element':
|
|
@@ -4289,11 +4291,11 @@ class ToolboxComponent {
|
|
|
4289
4291
|
}));
|
|
4290
4292
|
}
|
|
4291
4293
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToolboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4292
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToolboxComponent, isStandalone: true, selector: "map-toolbox", inputs: { map: "map", showMeasureDistance: "showMeasureDistance", showMeasureArea: "showMeasureArea", collapsed: "collapsed", settings: "settings", profile: "profile", WKTInputEnabled: "WKTInputEnabled", deleteEnabled: "deleteEnabled" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toolbox-wrapper global-wrapper-container\" \n cdkDrag \n cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle-toolbox\" cdkDragHandle>\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"V\u00E6rkt\u00F8jskasse\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n handyman\n </mat-icon> \n <div class=\"right-icons\"> \n <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n \n <div class=\"toolbox-container\">\n @if(!collapsed) {\n <div class=\"toolbox-content\">\n <div class=\"all-tools-container\">\n <div class=\"main-tools\">\n @if(!settings?.undoDisabled) {\n <img \n [src]=\"undoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"undo()\" \n matTooltip=\"Fortryd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Undo\">\n\n <img \n [src]=\"redoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"redo()\" \n matTooltip=\"Gendan\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Redo\">\n }\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleShowInfo()\" \n [class.active]=\"activeMode === 'show-info'\"\n matTooltip=\"Vis info om geometri\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Vis info for flader\">\n <img \n [src]=\"downloadFileBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startDownloadAddresses()\" \n [class.active]=\"activeMode === 'download-addresses'\"\n matTooltip=\"Download addresser\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Download addresser\">\n <img \n [src]=\"downloadMatriklerBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startDownloadCasdatres()\" \n [class.active]=\"activeMode === 'download-cadastres'\"\n matTooltip=\"Download matrikler\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Download matrikler\">\n\n <img \n [src]=\"splitIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"togglePointPolygonSearch()\"\n [class.active]=\"activeMode === 'search-point' || activeMode === 'search-polygon'\"\n matTooltip=\"S\u00F8g punkt / polygon\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"S\u00F8g\">\n @if (settings.showDocumentSearch) {\n\n <img \n [src]=\"documentSearchBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startDocumentPointSearch()\"\n [class.active]=\"activeMode === 'document-search-by-point'\"\n matTooltip=\"Dokument fra punkt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Dokument fra punkt\">\n\n <img \n [src]=\"documentSearchBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startDocumentPolygonSearch()\"\n [class.active]=\"activeMode === 'document-search-by-polygon'\"\n matTooltip=\"Dokumenter fra polygon\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Dokumenter fra polygon\">\n }\n @if (settings.cowiUrlTemplate) {\n <img \n [src]=\"openCowiPageBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'cowi'\"\n (click)=\"toggleCowiPage()\" \n matTooltip=\"COWI\u00B4s Gadefoto\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"COWI\u00B4s Gadefoto\">\n }\n @if (settings.skraaFotoUrlTemplate) {\n <img \n [src]=\"skrafotoBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'skrafoto'\"\n (click)=\"toggleSkraafotoPage()\" \n matTooltip=\"Opslag p\u00E5 Skr\u00E5fotos\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Skr\u00E5foto\">\n }\n <img \n [src]=\"streetViewBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'streetview'\"\n (click)=\"toggleGoogleStreetviewPage()\" \n matTooltip=\"Google Streetview\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Google Streetview\">\n <img \n [src]=\"fremhaevBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'select-highlight'\"\n (click)=\"startSelectFeatureHighlight()\" \n matTooltip=\"Fremh\u00E6v aktivt objekt i listen\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fremh\u00E6v\">\n @if (activeMode === 'draw' || activeMode === 'edit' || activeMode === 'edit-remove' || activeMode === 'search-feature' ||\n activeMode === 'clip-hole' || activeMode === 'split' || activeMode === 'merge-features') {\n <label class=\"snap-toggle\">\n <input type=\"checkbox\" [checked]=\"snap\" (change)=\"onSnapChange($event)\">\n Snap\n </label> \n } \n @if(settings.editEnabled) {\n <img \n [src]=\"editBase64\" \n [class.active]=\"activeMode === 'edit'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEdit()\" \n matTooltip=\"Inds\u00E6t eller flyt punkter i flade\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Inds\u00E6t eller flyt punkter i flade\">\n <img \n [src]=\"deleteIconBase64\" \n [class.active]=\"activeMode === 'edit-remove'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEditRemovePoints()\" \n matTooltip=\"Slet punkter i flade/linje\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Slet punkter i flade/linje\">\n }\n @if(settings.cutHoleEnabled) {\n <img \n [src]=\"clipHoleBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'clip-hole'\" \n (click)=\"clipHole()\" \n matTooltip=\"Klip hul i flade\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Klip hul i flade\">\n }\n @if(settings.splitEnabled) {\n <img \n [src]=\"splitBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'split'\"\n (click)=\"split()\" \n matTooltip=\"Del et element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Del et element\">\n }\n @if(settings.changeTypeEnabled) {\n <img \n [src]=\"changeTypeBase64\" \n class=\"compact-icon custom-image-icon\" \n [class.active]=\"activeMode === 'change-type'\" \n (click)=\"startChangeType()\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"Skift status p\u00E5 element\" \n alt=\"Skift status p\u00E5 element\" \n matTooltipPosition=\"below\">\n }\n @if(settings.mergeEnabled) {\n <img \n [src]=\"mergeBase64\"\n class=\"compact-icon custom-image-icon\" \n (click)=\"startMergeFeatures()\" \n matTooltipPosition=\"below\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"Saml flader\" \n [class.active]=\"activeMode === 'merge-features'\">\n }\n @if(settings.centerPoint) {\n <img \n [src]=\"setCenterBase64\" \n [class.active]=\"activeMode === 'center-point'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"setCenterPoint()\" \n matTooltip=\"S\u00E6t centerpunkt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"S\u00E6t centerpunkt\">\n }\n </div>\n <div class=\"geometry-tools\">\n <img \n [src]=\"sogPolygonBase64\" \n [class.active]=\"activeMode === 'search-feature'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleFeatureSearch()\" \n matTooltip=\"V\u00E6lg og vis emner i listen\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"V\u00E6lg og vis emner i listen\">\n\n <img \n [src]=\"drawBase64\" \n [class.active]=\"activeMode === 'draw'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDraw()\"\n matTooltip=\"Tegn element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Tegn element\">\n @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 </div>\n <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n <div class=\"measurement-print-tools\">\n <div class=\"measurement-tools\">\n @if (deleteEnabled) {\n <img \n [src]=\"deleteIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'delete'\"\n (click)=\"startDelete()\" \n matTooltip=\"Slet element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Slet element\">\n }\n <img \n [src]=\"measureDistanceIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleMeasure()\"\n [class.active]=\"activeMode === 'measure-distance' || activeMode === 'measure-area'\"\n matTooltip=\"M\u00E5l afstand / areal\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"M\u00E5l\">\n </div>\n @if(profile.showPrint) {\n <div class=\"tool-separator print-separator\"></div>\n <div class=\"print-tools\">\n <img \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'Print'\"\n (click)=\"startPrintMode()\" \n matTooltip=\"Sk\u00E6rmprint af kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Sk\u00E6rmprint af kortet\">\n <img \n [src]=\"drawPrintBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'PrintDraw'\"\n (click)=\"startDrawMode()\" \n matTooltip=\"Tegnev\u00E6rkt\u00F8j til print\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Tegnev\u00E6rkt\u00F8j til print\">\n </div>\n }\n </div>\n </div>\n @if(showInputWKT && activeMode === 'wkt-input') {\n <div class=\"wkt-section\">\n <input class=\"compact-input\" [(ngModel)]=\"WKTString\">\n <div class=\"wkt-actions\">\n <button class=\"compact-button primary\" (click)=\"ReadWKT()\">Indl\u00E6s WKT</button>\n <button class=\"compact-button\" (click)=\"cancelWKT()\">Annuller</button>\n </div>\n </div>\n }\n @if(profile.showPrint) {\n @if(active === \"Print\") {\n <div class=\"print-config\">\n <img \n matTooltip=\"Sk\u00E6rmprint af kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"doPrint()\" \n alt=\"Udskriv\"> \n <span class=\"icon-separator\">i</span>\n <select id=\"formatSelector\" [(ngModel)]=\"format\">\n <option value=\"image/png\" selected>.PNG</option>\n <option value=\"image/jpeg\">.JPG</option>\n </select>\n <select id=\"dimensionSelector\" [(ngModel)]=\"dimId\" (change)=\"handleDimensionSelected()\">\n <option value=\"99\" selected></option>\n <option value=\"0\">1920 X 1080</option>\n <option value=\"1\">1680 X 1050</option>\n <option value=\"2\">1280 X 800</option>\n <option value=\"3\">800 X 600</option>\n </select>\n <input type=\"text\" [(ngModel)]=\"mapWidth\"/> \n <span class=\"icon-separator\">x</span>\n <input type=\"text\" [(ngModel)]=\"mapHeight\"/>\n <button (click)=\"setNewMapDimensions()\">V\u00E6lg</button>\n </div>\n }\n @if(active === \"PrintDraw\") {\n <div class=\"print-draw-config\">\n <span class=\"icon-separator\">Label</span>\n <input type=\"text\" [(ngModel)]=\"printDrawLabel\"/>\n <select id=\"drawToolSelector\" [(ngModel)]=\"printDrawTool\" (change)=\"handlePrintDrawToolChanged()\">\n <option value=\"Arrow\" selected>Pil</option>\n <option value=\"Point\">Punkt</option>\n <option value=\"LineString\">Linje</option>\n <option value=\"Polygon\">Polygon</option>\n <option value=\"Circle\">Cirkel</option>\n <option value=\"Square\">Kvadrat</option>\n <option value=\"Rectangle\">Firkant</option>\n </select>\n <button class=\"compact-button\" (click)=\"handleClearPrintDrawFeatures()\">Ryd</button>\n </div>\n }\n }\n </div>\n @if (activeMode === 'draw' || activeMode === 'search-feature' || activeMode === 'wkt-input'\n || activeMode === 'change-type' || activeMode === 'merge-features') {\n <mat-select class=\"geometry-selector\" (selectionChange)=\"drawItemChanged($event)\" [(ngModel)]=\"selectedDrawItem\"> \n @for (drawItem of drawItems; track drawItem) {\n @if(activeMode !== 'merge-features' || drawItem.geomType === 'Polygon') {\n <mat-option [value]=\"drawItem\">{{drawItem.name}} <img *ngIf=\"drawItem.iconUrl\" class=\"compact-icon custom-image-icon\" [src]=\"drawItem.iconUrl\"></mat-option>\n }\n }\n </mat-select> \n }\n\n @if (activeMode === 'search-point' || activeMode === 'search-polygon') {\n <mat-select \n class=\"search-point-polygon-selector\" \n [(ngModel)]=\"selectedSearchMode\"\n (selectionChange)=\"onSearchModeChanged($event)\">\n <mat-option value=\"search-point\">S\u00F8g med punkt</mat-option>\n <mat-option value=\"search-polygon\">S\u00F8g med polygon</mat-option>\n </mat-select>\n }\n \n @if (activeMode === 'measure-distance' || activeMode === 'measure-area') {\n <mat-select \n class=\"geometry-selector\"\n [(ngModel)]=\"selectedMeasureMode\"\n (selectionChange)=\"onMeasureModeChanged($event)\">\n <mat-option value=\"measure-distance\">M\u00E5l afstand</mat-option>\n <mat-option value=\"measure-area\">M\u00E5l areal</mat-option>\n </mat-select>\n }\n }\n </div>\n @if (activeMode === 'search-feature' && filteredResults.length > 0) {\n <div class=\"geometry-search-panel\">\n <div class=\"buffer-item\">\n <mat-label>Buffer</mat-label>\n <input matInput type=\"number\" name=\"buffer\" [(ngModel)]=\"bufferInMeters\">\n <mat-label>m</mat-label>\n </div>\n <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n <div class=\"item-right\">\n <img \n [src]=\"objectSearchCopyIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event)\" \n matTooltip=\"Kopier\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier\">\n <img \n [src]=\"objectSearchCutIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"cutBySearchedObject(item, $event)\" \n matTooltip=\"Fjern\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fjern\">\n <img \n [src]=\"objectSearchCutIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"splitBySearchedObject(item, $event)\" \n matTooltip=\"Opsk\u00E6r\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Opsk\u00E6r\">\n <img \n [src]=\"objectSearchCopyWithBufferIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event, true)\" \n matTooltip=\"Kopier med buffer\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier med buffer\">\n <img \n [src]=\"objectSearchZoomIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"zoomSearchedObject(item, $event)\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Zoom\">\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleItemInfo(item, $event)\" \n matTooltip=\"Info\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Info\">\n </div> \n @if (item.showMetadata) {\n <div class=\"metadata-panel\">\n @for(feature of item.metadata; track feature) {\n <div class=\"feature-item\">\n <div *ngFor=\"let kv of (feature | keyvalue)\" class=\"feature-title\">\n {{ kv.value.name }}:\n <ng-container [ngSwitch]=\"kv.value.kind\">\n <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n {{ kv.key }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n <span *ngSwitchDefault class=\"secondary-item\">{{ kv.value.data }}</span>\n </ng-container>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </mat-option>\n </div>\n }\n @if ((activeMode === \"search-point\" || activeMode === \"search-polygon\") && geometrySearchResult.length > 0) {\n <div class=\"geometry-search-panel\">\n <mat-icon (click)=\"deleteAllGeometrySearchItem()\" class=\"delete-all-icon\" matTooltip=\"Ryd\">delete</mat-icon>\n <mat-option *ngFor=\"let result of geometrySearchResult\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"geometry-search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n <div class=\"item-right\">\n @if (item.url) {\n <mat-icon \n class=\"search-item-external\"\n matTooltip=\"\u00C5bn i ny tab\"\n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n (click)=\"openUrl(item.url, $event)\"\n matTooltipPosition=\"above\"\n >info</mat-icon>\n }\n <mat-icon (click)=\"deleteGeometrySearchItem(result, item.id, $event)\" >delete</mat-icon>\n </div>\n </div>\n </mat-option>\n </div>\n }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:10;max-width:95vw;box-shadow:0 2px 10px #0000001a;border-radius:5px;transition:width .3s ease,max-width .3s ease}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.search-item-external{cursor:pointer}.drag-handle-toolbox mat-icon{font-size:18px}.drag-handle-toolbox mat-icon:first-child{display:flex;align-items:center;justify-content:center}.drag-handle-toolbox .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.toggle-icon{cursor:pointer!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}:host{position:relative;display:flex;justify-content:center}:host.expanded{width:auto;min-width:320px;padding:12px}.toolbox-container{display:flex;flex-direction:column;align-items:center;width:100%;min-width:32px;transition:all .3s ease;cursor:default;border-radius:0 0 5px 5px}.toolbox-content{display:flex;flex-direction:column;width:100%;gap:3px;animation:slideDown .3s cubic-bezier(.4,0,.2,1)}.all-tools-container{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;width:100%;justify-content:flex-start;overflow-x:hidden;padding:2px 8px}.all-tools-container::-webkit-scrollbar{height:4px}.all-tools-container::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}.main-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.main-tools .snap-toggle{display:flex;align-items:center;gap:5px;color:#fff;font-size:12px;font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none}.main-tools .snap-toggle input[type=checkbox]{appearance:none;width:18px;height:18px;border:1.5px solid rgba(255,255,255,.6);border-radius:3px;background:transparent;cursor:pointer;position:relative;flex-shrink:0}.main-tools .snap-toggle input[type=checkbox]:checked{background:#f7b528;border-color:#f7b528}.main-tools .snap-toggle input[type=checkbox]:checked:after{content:\"\";position:absolute;left:4px;top:0;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.geometry-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;background:none;border-radius:8px;padding:3px 0}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-tools .compact-icon,.print-tools .compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.print-tools .compact-icon{background:none;color:#fff}.print-tools .compact-icon.active{background:#f7b528!important;border-color:transparent}.print-tools .compact-icon.active:hover{background:#ffffff1a}.print-tools .compact-icon:hover:not(.active){box-shadow:0 4px 12px #0000004d;opacity:.9}.tool-separator{width:1px;height:24px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.3),transparent)}.tool-separator.print-separator{height:28px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent)}.compact-icon{cursor:pointer;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}.compact-icon.active{color:#fff;background:#f7b528!important;border-color:transparent;box-shadow:0 8px 25px #667eea4d}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon:hover:not(.active){color:#fff;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:2px;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease,transform .2s ease}.compact-icon.custom-image-icon.active{background:#ffffff1a;border-color:none;box-shadow:none}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon.custom-image-icon:hover:not(.active){box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.search-point-polygon-selector{width:24%;margin-right:auto;padding:6px}.search-point-polygon-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.search-point-polygon-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.search-point-polygon-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.geometry-selector{width:34%;margin-left:15em;padding:6px}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.geometry-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.geometry-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.geometry-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-select-panel{min-width:fit-content!important;max-width:320px!important;background:#4c4d51!important;border:none!important;border-radius:8px!important;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014!important;margin-top:6px!important;padding:4px 0!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:14px!important;min-height:30px!important;padding:0 14px!important;transition:all .15s ease!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover:not(.mat-mdc-option-disabled){background:#444849!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-active{background:color-mix(in srgb,#000 60%,transparent)!important;color:#fff!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.wkt-section{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease;padding:10px 8px}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:5px;background:#6d6f73;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;min-height:32px;display:flex;align-items:center;justify-content:center;flex:1;box-shadow:0 1px 2px #0000000d}.compact-button.primary.active{background:#f7b528;box-shadow:0 8px 25px #667eea4d;color:#fff}.compact-button.primary.active:hover{box-shadow:0 12px 35px #667eea66}.compact-button.secondary{background:color-mix(in srgb,#000 20%,transparent);color:#fff}.compact-button.secondary:hover{background:color-mix(in srgb,#5a6268 60%,transparent)}.compact-input{padding:8px 10px;border-radius:5px;font-size:13px;transition:all .2s ease;background:#6d6f73;border:none;color:#fff}.compact-input:focus{outline:none;background:#6d6f73;border:1px solid #97989b}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:transparent;border:none;border-radius:8px;animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:#6d6f73;border:none;color:#fff;border-radius:6px;font-size:12px;height:32px;min-height:32px;padding:0 10px}.print-config select:focus,.print-config input:focus,.print-draw-config select:focus,.print-draw-config input:focus{outline:none}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:#6d6f73!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:#6ccb78;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s ease}.print-config button:hover,.print-draw-config button:hover{box-shadow:0 4px 12px #10b9814d}.print-config .icon-separator,.print-draw-config .icon-separator{color:#fff}.geometry-search-panel{position:absolute;right:0;z-index:1000;width:380px}.geometry-search-panel .delete-all-icon{color:#fff;margin-left:315px}.geometry-search-panel::-webkit-scrollbar{width:12px}.geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.search-result-option{display:block!important;padding:0!important;margin:0!important;background:transparent!important}.search-result-option:last-child{border-bottom:none}.search-result-option .mdc-list-item__primary-text{width:100%!important;margin:0!important;padding:0!important}.result-title{display:block;top:0;z-index:1;font-weight:600;color:#bdc1c3cc}.search-result-item{display:flex;align-items:center;padding:4px 14px;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.item-left{flex:1;width:100%}.item-header{color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.search-empty-state{padding:32px 16px;text-align:center;color:#757575}.search-empty-state .empty-icon{font-size:40px;width:40px;height:40px;color:#bdbdbd;margin-bottom:12px}.search-empty-state .empty-title{font-size:14px;font-weight:500;margin-bottom:4px}.search-empty-state .empty-subtitle{font-size:12px;color:#9e9e9e}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px}::ng-deep .metadata-panel .feature-item{padding:8px 12px;margin:4px 0;background:#ffffff0d;border-radius:5px;transition:all .2s ease}::ng-deep .metadata-panel .feature-item:hover{background:#ffffff1a;box-shadow:0 2px 8px #00000026}::ng-deep .metadata-panel .feature-item:first-child{margin-top:0}::ng-deep .metadata-panel .feature-item:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title{color:#bdc1c3cc;font-size:13px;line-height:1.6;display:flex;align-items:center;gap:6px;letter-spacing:.2px}::ng-deep .metadata-panel .feature-title:first-child{margin-top:0}::ng-deep .metadata-panel .feature-title:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title img{border-radius:4px;margin-top:4px;box-shadow:0 2px 6px #0003}::ng-deep .metadata-panel .feature-title a{color:#6ccb78;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:color .2s ease}::ng-deep .metadata-panel .feature-title a:hover{color:#85d990;text-decoration:underline}::ng-deep .metadata-panel .feature-title a .link-icon{font-size:16px;width:16px;height:16px}::ng-deep .metadata-panel .secondary-item{color:#fff;font-weight:400}::ng-deep .geometry-search-panel{max-height:360px!important;overflow-y:auto!important;max-width:430px;background:#4c4d51!important;border:1px solid rgba(255,255,255,.07);border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:0 8px 24px #00000026!important}::ng-deep .geometry-search-panel::-webkit-scrollbar{width:4px}::ng-deep .geometry-search-panel::-webkit-scrollbar-track{background:transparent}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#fff3}::ng-deep .geometry-search-panel .buffer-item{display:flex;align-items:center;gap:8px;padding:10px 14px 8px;background:#0003;border-bottom:1px solid rgba(255,255,255,.06)}::ng-deep .geometry-search-panel .buffer-item mat-label{color:#9ca3af;font-size:12px;font-weight:500;letter-spacing:.3px}::ng-deep .geometry-search-panel .buffer-item input{width:52px;margin:0;background:#3a3d42;border:1px solid rgba(255,255,255,.1);border-radius:5px;color:#fff;font-size:12px;padding:4px 8px;text-align:center;outline:none;transition:border-color .15s ease}::ng-deep .geometry-search-panel .buffer-item input:focus{border-color:#f7b528}::ng-deep .geometry-search-panel .result-title{display:flex;align-items:center;gap:8px;padding:8px 14px 4px;font-size:14px;font-weight:600;color:#bdc1c3cc;position:sticky;top:0;z-index:1}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-direction:column;gap:5px;padding:8px 14px;cursor:pointer;border-left:2px solid transparent;transition:background .12s ease,border-color .12s ease}::ng-deep .geometry-search-panel .search-result-item+.search-result-item{border-top:1px solid rgba(255,255,255,.04)}::ng-deep .geometry-search-panel .search-result-item:hover{background:#ffffff09}::ng-deep .geometry-search-panel .search-result-item:hover .item-header{color:#fff}::ng-deep .geometry-search-panel .search-result-item:last-child{border-radius:0 0 10px 10px}::ng-deep .geometry-search-panel .item-header{color:#d1d5db;font-size:14px;font-weight:500;line-height:1.4;display:block;word-wrap:break-word;overflow-wrap:break-word;transition:color .12s ease}::ng-deep .geometry-search-panel .item-right{display:flex;align-items:center;gap:3px;flex-wrap:wrap;width:100%}::ng-deep .geometry-search-panel .item-right .custom-image-icon{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff!important;border:1px solid rgba(255,255,255,0);border-radius:5px;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease!important}::ng-deep .geometry-search-panel .item-right .custom-image-icon:hover{background:#ffffff0d!important;box-shadow:0 0 0 1px #f7b5282e}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;padding:4px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff}::ng-deep .geometry-search-panel mat-label{color:#fff}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px}@media (max-width: 768px){.toolbox-wrapper{left:.5em;top:8em;max-width:calc(100vw - 2.5em)}.drag-handle-toolbox{padding:3px 6px;gap:6px}.drag-handle-toolbox mat-icon{font-size:16px;width:16px;height:16px}.toggle-icon{font-size:16px!important;width:16px!important;height:16px!important}.toolbox-container{padding:8px;min-width:28px;max-width:calc(100vw - 3em)}:host{padding:8px;min-width:32px}:host.expanded{min-width:280px;padding:10px}.all-tools-container{flex-wrap:wrap;gap:6px;max-height:50vh;overflow-y:auto;padding:0;-ms-overflow-style:none;scrollbar-width:none}.all-tools-container::-webkit-scrollbar{display:none}.main-tools,.geometry-tools,.measurement-print-tools,.print-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.compact-icon{width:28px;height:28px;flex-shrink:0}.measurement-print-tools{padding:3px 0}.geometry-selector{width:30%;margin-bottom:8px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:28px;min-height:28px;padding:0 8px;font-size:12px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:12px}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 2em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config,.print-draw-config{flex-direction:column;align-items:stretch;gap:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:11px;padding:4px 8px;height:28px;min-height:28px}.print-config input,.print-draw-config input{width:50px}.print-config button,.print-draw-config button{padding:4px 8px;font-size:11px;height:28px}.wkt-section .compact-input{font-size:12px;padding:6px 8px}.wkt-section .compact-button{font-size:11px;padding:5px 8px;min-height:28px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:11px!important}.geometry-search-panel{width:calc(100vw - 40px);max-width:400px;left:50%;max-height:70vh}.search-result-item{padding:8px 12px}.item-header{font-size:13px}.result-title{padding:10px 12px;font-size:13px}}.geometry-search-result-item{display:flex;padding:4px 14px;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.geometry-search-result-item .item-header{width:260px}@media (max-width: 480px){.toolbox-wrapper{left:.25em;top:6em;transform-origin:left top;max-width:calc(100vw - .5em)}.drag-handle-toolbox{padding:2px 4px;gap:4px}.drag-handle-toolbox mat-icon{font-size:14px;width:14px;height:14px}.toggle-icon{font-size:14px!important;width:14px!important;height:14px!important}.toolbox-container{padding:2px;min-width:24px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}.geometry-search-panel{width:calc(100vw - 32px);max-height:60vh}.search-result-item{padding:6px 10px}.item-header{font-size:12px;-webkit-line-clamp:1}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: 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"] }] });
|
|
4294
|
+
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 <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 <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 <img \n [src]=\"downloadMatriklerBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startDownloadCasdatres()\" \n [class.active]=\"activeMode === 'download-cadastres'\"\n matTooltip=\"Download matrikler\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Download matrikler\">\n\n <img \n [src]=\"splitIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"togglePointPolygonSearch()\"\n [class.active]=\"activeMode === 'search-point' || activeMode === 'search-polygon'\"\n matTooltip=\"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 @if (settings.showDocumentSearch) {\n\n <img \n [src]=\"documentSearchBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startDocumentPointSearch()\"\n [class.active]=\"activeMode === 'document-search-by-point'\"\n matTooltip=\"Dokument fra punkt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Dokument fra punkt\">\n\n <img \n [src]=\"documentSearchBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startDocumentPolygonSearch()\"\n [class.active]=\"activeMode === 'document-search-by-polygon'\"\n matTooltip=\"Dokumenter fra polygon\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Dokumenter fra polygon\">\n }\n @if (settings.cowiUrlTemplate) {\n <img \n [src]=\"openCowiPageBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'cowi'\"\n (click)=\"toggleCowiPage()\" \n matTooltip=\"COWI\u00B4s Gadefoto\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"COWI\u00B4s Gadefoto\">\n }\n @if (settings.skraaFotoUrlTemplate) {\n <img \n [src]=\"skrafotoBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'skrafoto'\"\n (click)=\"toggleSkraafotoPage()\" \n matTooltip=\"Opslag p\u00E5 Skr\u00E5fotos\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Skr\u00E5foto\">\n }\n <img \n [src]=\"streetViewBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'streetview'\"\n (click)=\"toggleGoogleStreetviewPage()\" \n matTooltip=\"Google Streetview\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Google Streetview\">\n <img \n [src]=\"fremhaevBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'select-highlight'\"\n (click)=\"startSelectFeatureHighlight()\" \n matTooltip=\"Fremh\u00E6v aktivt objekt i listen\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fremh\u00E6v\">\n @if (activeMode === 'draw' || activeMode === 'edit' || activeMode === 'edit-remove' || activeMode === 'search-feature' ||\n activeMode === 'clip-hole' || activeMode === 'split' || activeMode === 'merge-features') {\n <label class=\"snap-toggle\">\n <input type=\"checkbox\" [checked]=\"snap\" (change)=\"onSnapChange($event)\">\n Snap\n </label> \n } \n @if(settings.editEnabled) {\n <img \n [src]=\"editBase64\" \n [class.active]=\"activeMode === 'edit'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEdit()\" \n matTooltip=\"Inds\u00E6t eller flyt punkter i flade/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 <img \n [src]=\"sogPolygonBase64\" \n [class.active]=\"activeMode === 'search-feature'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleFeatureSearch()\" \n matTooltip=\"V\u00E6lg og vis emner i listen\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"V\u00E6lg og vis emner i listen\">\n\n <img \n [src]=\"drawBase64\" \n [class.active]=\"activeMode === 'draw'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDraw()\"\n matTooltip=\"Tegn element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Tegn element\">\n @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 </div>\n <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n <div class=\"measurement-print-tools\">\n <div class=\"measurement-tools\">\n @if (deleteEnabled) {\n <img \n [src]=\"deleteIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'delete'\"\n (click)=\"startDelete()\" \n matTooltip=\"Slet element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Slet element\">\n }\n <img \n [src]=\"measureDistanceIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleMeasure()\"\n [class.active]=\"activeMode === 'measure-distance' || activeMode === 'measure-area'\"\n matTooltip=\"M\u00E5l afstand / areal\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"M\u00E5l\">\n </div>\n @if(profile.showPrint) {\n <div class=\"tool-separator print-separator\"></div>\n <div class=\"print-tools\">\n <img \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'Print'\"\n (click)=\"startPrintMode()\" \n matTooltip=\"Sk\u00E6rmprint af kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Sk\u00E6rmprint af kortet\">\n <img \n [src]=\"drawPrintBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'PrintDraw'\"\n (click)=\"startDrawMode()\" \n matTooltip=\"Tegnev\u00E6rkt\u00F8j til print\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Tegnev\u00E6rkt\u00F8j til print\">\n </div>\n }\n </div>\n </div>\n @if(showInputWKT && activeMode === 'wkt-input') {\n <div class=\"wkt-section\">\n <input class=\"compact-input\" [(ngModel)]=\"WKTString\">\n <div class=\"wkt-actions\">\n <button class=\"compact-button primary\" (click)=\"ReadWKT()\">Indl\u00E6s WKT</button>\n <button class=\"compact-button\" (click)=\"cancelWKT()\">Annuller</button>\n </div>\n </div>\n }\n @if(profile.showPrint) {\n @if(active === \"Print\") {\n <div class=\"print-config\">\n <img \n matTooltip=\"Sk\u00E6rmprint af kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"doPrint()\" \n alt=\"Udskriv\"> \n <span class=\"icon-separator\">i</span>\n <select id=\"formatSelector\" [(ngModel)]=\"format\">\n <option value=\"image/png\" selected>.PNG</option>\n <option value=\"image/jpeg\">.JPG</option>\n </select>\n <select id=\"dimensionSelector\" [(ngModel)]=\"dimId\" (change)=\"handleDimensionSelected()\">\n <option value=\"99\" selected></option>\n <option value=\"0\">1920 X 1080</option>\n <option value=\"1\">1680 X 1050</option>\n <option value=\"2\">1280 X 800</option>\n <option value=\"3\">800 X 600</option>\n </select>\n <input type=\"text\" [(ngModel)]=\"mapWidth\"/> \n <span class=\"icon-separator\">x</span>\n <input type=\"text\" [(ngModel)]=\"mapHeight\"/>\n <button (click)=\"setNewMapDimensions()\">V\u00E6lg</button>\n </div>\n }\n @if(active === \"PrintDraw\") {\n <div class=\"print-draw-config\">\n <span class=\"icon-separator\">Label</span>\n <input type=\"text\" [(ngModel)]=\"printDrawLabel\"/>\n <select id=\"drawToolSelector\" [(ngModel)]=\"printDrawTool\" (change)=\"handlePrintDrawToolChanged()\">\n <option value=\"Arrow\" selected>Pil</option>\n <option value=\"Point\">Punkt</option>\n <option value=\"LineString\">Linje</option>\n <option value=\"Polygon\">Polygon</option>\n <option value=\"Circle\">Cirkel</option>\n <option value=\"Square\">Kvadrat</option>\n <option value=\"Rectangle\">Firkant</option>\n </select>\n <button class=\"compact-button\" (click)=\"handleClearPrintDrawFeatures()\">Ryd</button>\n </div>\n }\n }\n </div>\n @if (activeMode === 'draw' || activeMode === 'search-feature' || activeMode === 'wkt-input'\n || activeMode === 'change-type' || activeMode === 'merge-features') {\n <mat-select class=\"geometry-selector\" (selectionChange)=\"drawItemChanged($event)\" [(ngModel)]=\"selectedDrawItem\"> \n @for (drawItem of drawItems; track drawItem) {\n @if(activeMode !== 'merge-features' || drawItem.geomType === 'Polygon') {\n <mat-option [value]=\"drawItem\">{{drawItem.name}} <img *ngIf=\"drawItem.iconUrl\" class=\"compact-icon custom-image-icon\" [src]=\"drawItem.iconUrl\"></mat-option>\n }\n }\n </mat-select> \n }\n\n @if (activeMode === 'search-point' || activeMode === 'search-polygon') {\n <mat-select \n class=\"search-point-polygon-selector\" \n [(ngModel)]=\"selectedSearchMode\"\n (selectionChange)=\"onSearchModeChanged($event)\">\n <mat-option value=\"search-point\">S\u00F8g med punkt</mat-option>\n <mat-option value=\"search-polygon\">S\u00F8g med polygon</mat-option>\n </mat-select>\n }\n \n @if (activeMode === 'measure-distance' || activeMode === 'measure-area') {\n <mat-select \n class=\"geometry-selector\"\n [(ngModel)]=\"selectedMeasureMode\"\n (selectionChange)=\"onMeasureModeChanged($event)\">\n <mat-option value=\"measure-distance\">M\u00E5l afstand</mat-option>\n <mat-option value=\"measure-area\">M\u00E5l areal</mat-option>\n </mat-select>\n }\n }\n </div>\n @if (activeMode === 'search-feature' && filteredResults.length > 0) {\n <div class=\"geometry-search-panel\">\n <div class=\"buffer-item\">\n <mat-label>Buffer</mat-label>\n <input matInput type=\"number\" name=\"buffer\" [(ngModel)]=\"bufferInMeters\">\n <mat-label>m</mat-label>\n </div>\n <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n <div class=\"item-right\">\n <img \n [src]=\"objectSearchCopyIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event)\" \n matTooltip=\"Kopier\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier\">\n <img \n [src]=\"objectSearchCutIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"cutBySearchedObject(item, $event)\" \n matTooltip=\"Fjern\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fjern\">\n <img \n [src]=\"objectSearchCutIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"splitBySearchedObject(item, $event)\" \n matTooltip=\"Opsk\u00E6r\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Opsk\u00E6r\">\n <img \n [src]=\"objectSearchCopyWithBufferIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event, true)\" \n matTooltip=\"Kopier med buffer\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier med buffer\">\n <img \n [src]=\"objectSearchZoomIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"zoomSearchedObject(item, $event)\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Zoom\">\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleItemInfo(item, $event)\" \n matTooltip=\"Info\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Info\">\n </div> \n @if (item.showMetadata) {\n <div class=\"metadata-panel\">\n @for(feature of item.metadata; track feature) {\n <div class=\"feature-item\">\n <div *ngFor=\"let kv of (feature | keyvalue)\" class=\"feature-title\">\n {{ kv.value.name }}:\n <ng-container [ngSwitch]=\"kv.value.kind\">\n <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n {{ kv.key }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n <span *ngSwitchDefault class=\"secondary-item\">{{ kv.value.data }}</span>\n </ng-container>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </mat-option>\n </div>\n }\n @if ((activeMode === \"search-point\" || activeMode === \"search-polygon\") && geometrySearchResult.length > 0) {\n <div class=\"geometry-search-panel\">\n <mat-icon (click)=\"deleteAllGeometrySearchItem()\" class=\"delete-all-icon\" matTooltip=\"Ryd\">delete</mat-icon>\n <mat-option *ngFor=\"let result of geometrySearchResult\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"geometry-search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n <div class=\"item-right\">\n @if (item.url) {\n <mat-icon \n class=\"search-item-external\"\n matTooltip=\"\u00C5bn i ny tab\"\n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n (click)=\"openUrl(item.url, $event)\"\n matTooltipPosition=\"above\"\n >info</mat-icon>\n }\n <mat-icon (click)=\"deleteGeometrySearchItem(result, item.id, $event)\" >delete</mat-icon>\n </div>\n </div>\n </mat-option>\n </div>\n }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:10;max-width:95vw;box-shadow:0 2px 10px #0000001a;border-radius:5px;transition:width .3s ease,max-width .3s ease}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.search-item-external{cursor:pointer}.drag-handle-toolbox mat-icon{font-size:18px}.drag-handle-toolbox mat-icon:first-child{display:flex;align-items:center;justify-content:center}.drag-handle-toolbox .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.toggle-icon{cursor:pointer!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}:host{position:relative;display:flex;justify-content:center}:host.expanded{width:auto;min-width:320px;padding:12px}.toolbox-container{display:flex;flex-direction:column;align-items:center;width:100%;min-width:32px;transition:all .3s ease;cursor:default;border-radius:0 0 5px 5px}.toolbox-content{display:flex;flex-direction:column;width:100%;gap:3px;animation:slideDown .3s cubic-bezier(.4,0,.2,1)}.all-tools-container{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;width:100%;justify-content:flex-start;overflow-x:hidden;padding:2px 8px}.all-tools-container::-webkit-scrollbar{height:4px}.all-tools-container::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}.main-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.main-tools .snap-toggle{display:flex;align-items:center;gap:5px;color:#fff;font-size:12px;font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none}.main-tools .snap-toggle input[type=checkbox]{appearance:none;width:18px;height:18px;border:1.5px solid rgba(255,255,255,.6);border-radius:3px;background:transparent;cursor:pointer;position:relative;flex-shrink:0}.main-tools .snap-toggle input[type=checkbox]:checked{background:#f7b528;border-color:#f7b528}.main-tools .snap-toggle input[type=checkbox]:checked:after{content:\"\";position:absolute;left:4px;top:0;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.geometry-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;background:none;border-radius:8px;padding:3px 0}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-tools .compact-icon,.print-tools .compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.print-tools .compact-icon{background:none;color:#fff}.print-tools .compact-icon.active{background:#f7b528!important;border-color:transparent}.print-tools .compact-icon.active:hover{background:#ffffff1a}.print-tools .compact-icon:hover:not(.active){box-shadow:0 4px 12px #0000004d;opacity:.9}.tool-separator{width:1px;height:24px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.3),transparent)}.tool-separator.print-separator{height:28px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent)}.compact-icon{cursor:pointer;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}.compact-icon.active{color:#fff;background:#f7b528!important;border-color:transparent;box-shadow:0 8px 25px #667eea4d}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon:hover:not(.active){color:#fff;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:2px;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease,transform .2s ease}.compact-icon.custom-image-icon.active{background:#ffffff1a;border-color:none;box-shadow:none}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon.custom-image-icon:hover:not(.active){box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.search-point-polygon-selector{width:24%;margin-right:auto;padding:6px}.search-point-polygon-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.search-point-polygon-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.search-point-polygon-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.geometry-selector{width:34%;margin-left:15em;padding:6px}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.geometry-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.geometry-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.geometry-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-select-panel{min-width:fit-content!important;max-width:320px!important;background:#4c4d51!important;border:none!important;border-radius:8px!important;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014!important;margin-top:6px!important;padding:4px 0!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:14px!important;min-height:30px!important;padding:0 14px!important;transition:all .15s ease!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover:not(.mat-mdc-option-disabled){background:#444849!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-active{background:color-mix(in srgb,#000 60%,transparent)!important;color:#fff!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.wkt-section{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease;padding:10px 8px}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:5px;background:#6d6f73;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;min-height:32px;display:flex;align-items:center;justify-content:center;flex:1;box-shadow:0 1px 2px #0000000d}.compact-button.primary.active{background:#f7b528;box-shadow:0 8px 25px #667eea4d;color:#fff}.compact-button.primary.active:hover{box-shadow:0 12px 35px #667eea66}.compact-button.secondary{background:color-mix(in srgb,#000 20%,transparent);color:#fff}.compact-button.secondary:hover{background:color-mix(in srgb,#5a6268 60%,transparent)}.compact-input{padding:8px 10px;border-radius:5px;font-size:13px;transition:all .2s ease;background:#6d6f73;border:none;color:#fff}.compact-input:focus{outline:none;background:#6d6f73;border:1px solid #97989b}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:transparent;border:none;border-radius:8px;animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:#6d6f73;border:none;color:#fff;border-radius:6px;font-size:12px;height:32px;min-height:32px;padding:0 10px}.print-config select:focus,.print-config input:focus,.print-draw-config select:focus,.print-draw-config input:focus{outline:none}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:#6d6f73!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:#6ccb78;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s ease}.print-config button:hover,.print-draw-config button:hover{box-shadow:0 4px 12px #10b9814d}.print-config .icon-separator,.print-draw-config .icon-separator{color:#fff}.geometry-search-panel{position:absolute;right:0;z-index:1000;width:380px}.geometry-search-panel .delete-all-icon{color:#fff;margin-left:315px}.geometry-search-panel::-webkit-scrollbar{width:12px}.geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.search-result-option{display:block!important;padding:0!important;margin:0!important;background:transparent!important}.search-result-option:last-child{border-bottom:none}.search-result-option .mdc-list-item__primary-text{width:100%!important;margin:0!important;padding:0!important}.result-title{display:block;top:0;z-index:1;font-weight:600;color:#bdc1c3cc}.search-result-item{display:flex;align-items:center;padding:4px 14px;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.item-left{flex:1;width:100%}.item-header{color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.search-empty-state{padding:32px 16px;text-align:center;color:#757575}.search-empty-state .empty-icon{font-size:40px;width:40px;height:40px;color:#bdbdbd;margin-bottom:12px}.search-empty-state .empty-title{font-size:14px;font-weight:500;margin-bottom:4px}.search-empty-state .empty-subtitle{font-size:12px;color:#9e9e9e}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px}::ng-deep .metadata-panel .feature-item{padding:8px 12px;margin:4px 0;background:#ffffff0d;border-radius:5px;transition:all .2s ease}::ng-deep .metadata-panel .feature-item:hover{background:#ffffff1a;box-shadow:0 2px 8px #00000026}::ng-deep .metadata-panel .feature-item:first-child{margin-top:0}::ng-deep .metadata-panel .feature-item:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title{color:#bdc1c3cc;font-size:13px;line-height:1.6;display:flex;align-items:center;gap:6px;letter-spacing:.2px}::ng-deep .metadata-panel .feature-title:first-child{margin-top:0}::ng-deep .metadata-panel .feature-title:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title img{border-radius:4px;margin-top:4px;box-shadow:0 2px 6px #0003}::ng-deep .metadata-panel .feature-title a{color:#6ccb78;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:color .2s ease}::ng-deep .metadata-panel .feature-title a:hover{color:#85d990;text-decoration:underline}::ng-deep .metadata-panel .feature-title a .link-icon{font-size:16px;width:16px;height:16px}::ng-deep .metadata-panel .secondary-item{color:#fff;font-weight:400}::ng-deep .geometry-search-panel{max-height:360px!important;overflow-y:auto!important;max-width:430px;background:#4c4d51!important;border:1px solid rgba(255,255,255,.07);border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:0 8px 24px #00000026!important}::ng-deep .geometry-search-panel::-webkit-scrollbar{width:4px}::ng-deep .geometry-search-panel::-webkit-scrollbar-track{background:transparent}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#fff3}::ng-deep .geometry-search-panel .buffer-item{display:flex;align-items:center;gap:8px;padding:10px 14px 8px;background:#0003;border-bottom:1px solid rgba(255,255,255,.06)}::ng-deep .geometry-search-panel .buffer-item mat-label{color:#9ca3af;font-size:12px;font-weight:500;letter-spacing:.3px}::ng-deep .geometry-search-panel .buffer-item input{width:52px;margin:0;background:#3a3d42;border:1px solid rgba(255,255,255,.1);border-radius:5px;color:#fff;font-size:12px;padding:4px 8px;text-align:center;outline:none;transition:border-color .15s ease}::ng-deep .geometry-search-panel .buffer-item input:focus{border-color:#f7b528}::ng-deep .geometry-search-panel .result-title{display:flex;align-items:center;gap:8px;padding:8px 14px 4px;font-size:14px;font-weight:600;color:#bdc1c3cc;position:sticky;top:0;z-index:1}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-direction:column;gap:5px;padding:8px 14px;cursor:pointer;border-left:2px solid transparent;transition:background .12s ease,border-color .12s ease}::ng-deep .geometry-search-panel .search-result-item+.search-result-item{border-top:1px solid rgba(255,255,255,.04)}::ng-deep .geometry-search-panel .search-result-item:hover{background:#ffffff09}::ng-deep .geometry-search-panel .search-result-item:hover .item-header{color:#fff}::ng-deep .geometry-search-panel .search-result-item:last-child{border-radius:0 0 10px 10px}::ng-deep .geometry-search-panel .item-header{color:#d1d5db;font-size:14px;font-weight:500;line-height:1.4;display:block;word-wrap:break-word;overflow-wrap:break-word;transition:color .12s ease}::ng-deep .geometry-search-panel .item-right{display:flex;align-items:center;gap:3px;flex-wrap:wrap;width:100%}::ng-deep .geometry-search-panel .item-right .custom-image-icon{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff!important;border:1px solid rgba(255,255,255,0);border-radius:5px;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease!important}::ng-deep .geometry-search-panel .item-right .custom-image-icon:hover{background:#ffffff0d!important;box-shadow:0 0 0 1px #f7b5282e}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;padding:4px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff}::ng-deep .geometry-search-panel mat-label{color:#fff}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px}@media (max-width: 768px){.toolbox-wrapper{left:.5em;top:8em;max-width:calc(100vw - 2.5em)}.drag-handle-toolbox{padding:3px 6px;gap:6px}.drag-handle-toolbox mat-icon{font-size:16px;width:16px;height:16px}.toggle-icon{font-size:16px!important;width:16px!important;height:16px!important}.toolbox-container{padding:8px;min-width:28px;max-width:calc(100vw - 3em)}:host{padding:8px;min-width:32px}:host.expanded{min-width:280px;padding:10px}.all-tools-container{flex-wrap:wrap;gap:6px;max-height:50vh;overflow-y:auto;padding:0;-ms-overflow-style:none;scrollbar-width:none}.all-tools-container::-webkit-scrollbar{display:none}.main-tools,.geometry-tools,.measurement-print-tools,.print-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.compact-icon{width:28px;height:28px;flex-shrink:0}.measurement-print-tools{padding:3px 0}.geometry-selector{width:30%;margin-bottom:8px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:28px;min-height:28px;padding:0 8px;font-size:12px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:12px}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 2em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config,.print-draw-config{flex-direction:column;align-items:stretch;gap:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:11px;padding:4px 8px;height:28px;min-height:28px}.print-config input,.print-draw-config input{width:50px}.print-config button,.print-draw-config button{padding:4px 8px;font-size:11px;height:28px}.wkt-section .compact-input{font-size:12px;padding:6px 8px}.wkt-section .compact-button{font-size:11px;padding:5px 8px;min-height:28px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:11px!important}.geometry-search-panel{width:calc(100vw - 40px);max-width:400px;left:50%;max-height:70vh}.search-result-item{padding:8px 12px}.item-header{font-size:13px}.result-title{padding:10px 12px;font-size:13px}}.geometry-search-result-item{display:flex;padding:4px 14px;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.geometry-search-result-item .item-header{width:260px}@media (max-width: 480px){.toolbox-wrapper{left:.25em;top:6em;transform-origin:left top;max-width:calc(100vw - .5em)}.drag-handle-toolbox{padding:2px 4px;gap:4px}.drag-handle-toolbox mat-icon{font-size:14px;width:14px;height:14px}.toggle-icon{font-size:14px!important;width:14px!important;height:14px!important}.toolbox-container{padding:2px;min-width:24px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}.geometry-search-panel{width:calc(100vw - 32px);max-height:60vh}.search-result-item{padding:6px 10px}.item-header{font-size:12px;-webkit-line-clamp:1}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$2.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: 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"] }] });
|
|
4293
4295
|
}
|
|
4294
4296
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToolboxComponent, decorators: [{
|
|
4295
4297
|
type: Component,
|
|
4296
|
-
args: [{ selector: 'map-toolbox', imports: [FormsModule, CommonModule, MatIconModule, MatOptionModule, MatSelectModule, DragDropModule, MatTooltipModule], template: "<div class=\"toolbox-wrapper global-wrapper-container\" \n cdkDrag \n cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle-toolbox\" cdkDragHandle>\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"V\u00E6rkt\u00F8jskasse\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n handyman\n </mat-icon> \n <div class=\"right-icons\"> \n <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n \n <div class=\"toolbox-container\">\n @if(!collapsed) {\n <div class=\"toolbox-content\">\n <div class=\"all-tools-container\">\n <div class=\"main-tools\">\n @if(!settings?.undoDisabled) {\n <img \n [src]=\"undoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"undo()\" \n matTooltip=\"Fortryd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Undo\">\n\n <img \n [src]=\"redoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"redo()\" \n matTooltip=\"Gendan\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Redo\">\n }\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleShowInfo()\" \n [class.active]=\"activeMode === 'show-info'\"\n matTooltip=\"Vis info om geometri\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Vis info for flader\">\n <img \n [src]=\"downloadFileBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startDownloadAddresses()\" \n [class.active]=\"activeMode === 'download-addresses'\"\n matTooltip=\"Download addresser\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Download addresser\">\n <img \n [src]=\"downloadMatriklerBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startDownloadCasdatres()\" \n [class.active]=\"activeMode === 'download-cadastres'\"\n matTooltip=\"Download matrikler\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Download matrikler\">\n\n <img \n [src]=\"splitIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"togglePointPolygonSearch()\"\n [class.active]=\"activeMode === 'search-point' || activeMode === 'search-polygon'\"\n matTooltip=\"S\u00F8g punkt / polygon\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"S\u00F8g\">\n @if (settings.showDocumentSearch) {\n\n <img \n [src]=\"documentSearchBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startDocumentPointSearch()\"\n [class.active]=\"activeMode === 'document-search-by-point'\"\n matTooltip=\"Dokument fra punkt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Dokument fra punkt\">\n\n <img \n [src]=\"documentSearchBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startDocumentPolygonSearch()\"\n [class.active]=\"activeMode === 'document-search-by-polygon'\"\n matTooltip=\"Dokumenter fra polygon\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Dokumenter fra polygon\">\n }\n @if (settings.cowiUrlTemplate) {\n <img \n [src]=\"openCowiPageBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'cowi'\"\n (click)=\"toggleCowiPage()\" \n matTooltip=\"COWI\u00B4s Gadefoto\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"COWI\u00B4s Gadefoto\">\n }\n @if (settings.skraaFotoUrlTemplate) {\n <img \n [src]=\"skrafotoBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'skrafoto'\"\n (click)=\"toggleSkraafotoPage()\" \n matTooltip=\"Opslag p\u00E5 Skr\u00E5fotos\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Skr\u00E5foto\">\n }\n <img \n [src]=\"streetViewBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'streetview'\"\n (click)=\"toggleGoogleStreetviewPage()\" \n matTooltip=\"Google Streetview\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Google Streetview\">\n <img \n [src]=\"fremhaevBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'select-highlight'\"\n (click)=\"startSelectFeatureHighlight()\" \n matTooltip=\"Fremh\u00E6v aktivt objekt i listen\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fremh\u00E6v\">\n @if (activeMode === 'draw' || activeMode === 'edit' || activeMode === 'edit-remove' || activeMode === 'search-feature' ||\n activeMode === 'clip-hole' || activeMode === 'split' || activeMode === 'merge-features') {\n <label class=\"snap-toggle\">\n <input type=\"checkbox\" [checked]=\"snap\" (change)=\"onSnapChange($event)\">\n Snap\n </label> \n } \n @if(settings.editEnabled) {\n <img \n [src]=\"editBase64\" \n [class.active]=\"activeMode === 'edit'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEdit()\" \n matTooltip=\"Inds\u00E6t eller flyt punkter i flade\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Inds\u00E6t eller flyt punkter i flade\">\n <img \n [src]=\"deleteIconBase64\" \n [class.active]=\"activeMode === 'edit-remove'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEditRemovePoints()\" \n matTooltip=\"Slet punkter i flade/linje\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Slet punkter i flade/linje\">\n }\n @if(settings.cutHoleEnabled) {\n <img \n [src]=\"clipHoleBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'clip-hole'\" \n (click)=\"clipHole()\" \n matTooltip=\"Klip hul i flade\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Klip hul i flade\">\n }\n @if(settings.splitEnabled) {\n <img \n [src]=\"splitBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'split'\"\n (click)=\"split()\" \n matTooltip=\"Del et element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Del et element\">\n }\n @if(settings.changeTypeEnabled) {\n <img \n [src]=\"changeTypeBase64\" \n class=\"compact-icon custom-image-icon\" \n [class.active]=\"activeMode === 'change-type'\" \n (click)=\"startChangeType()\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"Skift status p\u00E5 element\" \n alt=\"Skift status p\u00E5 element\" \n matTooltipPosition=\"below\">\n }\n @if(settings.mergeEnabled) {\n <img \n [src]=\"mergeBase64\"\n class=\"compact-icon custom-image-icon\" \n (click)=\"startMergeFeatures()\" \n matTooltipPosition=\"below\"\n [matTooltipShowDelay]=\"200\"\n matTooltipClass=\"custom-tooltip\"\n [matTooltipHideDelay]=\"300\" \n matTooltip=\"Saml flader\" \n [class.active]=\"activeMode === 'merge-features'\">\n }\n @if(settings.centerPoint) {\n <img \n [src]=\"setCenterBase64\" \n [class.active]=\"activeMode === 'center-point'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"setCenterPoint()\" \n matTooltip=\"S\u00E6t centerpunkt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"S\u00E6t centerpunkt\">\n }\n </div>\n <div class=\"geometry-tools\">\n <img \n [src]=\"sogPolygonBase64\" \n [class.active]=\"activeMode === 'search-feature'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleFeatureSearch()\" \n matTooltip=\"V\u00E6lg og vis emner i listen\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"V\u00E6lg og vis emner i listen\">\n\n <img \n [src]=\"drawBase64\" \n [class.active]=\"activeMode === 'draw'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDraw()\"\n matTooltip=\"Tegn element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Tegn element\">\n @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 </div>\n <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n <div class=\"measurement-print-tools\">\n <div class=\"measurement-tools\">\n @if (deleteEnabled) {\n <img \n [src]=\"deleteIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'delete'\"\n (click)=\"startDelete()\" \n matTooltip=\"Slet element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Slet element\">\n }\n <img \n [src]=\"measureDistanceIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleMeasure()\"\n [class.active]=\"activeMode === 'measure-distance' || activeMode === 'measure-area'\"\n matTooltip=\"M\u00E5l afstand / areal\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"M\u00E5l\">\n </div>\n @if(profile.showPrint) {\n <div class=\"tool-separator print-separator\"></div>\n <div class=\"print-tools\">\n <img \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'Print'\"\n (click)=\"startPrintMode()\" \n matTooltip=\"Sk\u00E6rmprint af kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Sk\u00E6rmprint af kortet\">\n <img \n [src]=\"drawPrintBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'PrintDraw'\"\n (click)=\"startDrawMode()\" \n matTooltip=\"Tegnev\u00E6rkt\u00F8j til print\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Tegnev\u00E6rkt\u00F8j til print\">\n </div>\n }\n </div>\n </div>\n @if(showInputWKT && activeMode === 'wkt-input') {\n <div class=\"wkt-section\">\n <input class=\"compact-input\" [(ngModel)]=\"WKTString\">\n <div class=\"wkt-actions\">\n <button class=\"compact-button primary\" (click)=\"ReadWKT()\">Indl\u00E6s WKT</button>\n <button class=\"compact-button\" (click)=\"cancelWKT()\">Annuller</button>\n </div>\n </div>\n }\n @if(profile.showPrint) {\n @if(active === \"Print\") {\n <div class=\"print-config\">\n <img \n matTooltip=\"Sk\u00E6rmprint af kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"doPrint()\" \n alt=\"Udskriv\"> \n <span class=\"icon-separator\">i</span>\n <select id=\"formatSelector\" [(ngModel)]=\"format\">\n <option value=\"image/png\" selected>.PNG</option>\n <option value=\"image/jpeg\">.JPG</option>\n </select>\n <select id=\"dimensionSelector\" [(ngModel)]=\"dimId\" (change)=\"handleDimensionSelected()\">\n <option value=\"99\" selected></option>\n <option value=\"0\">1920 X 1080</option>\n <option value=\"1\">1680 X 1050</option>\n <option value=\"2\">1280 X 800</option>\n <option value=\"3\">800 X 600</option>\n </select>\n <input type=\"text\" [(ngModel)]=\"mapWidth\"/> \n <span class=\"icon-separator\">x</span>\n <input type=\"text\" [(ngModel)]=\"mapHeight\"/>\n <button (click)=\"setNewMapDimensions()\">V\u00E6lg</button>\n </div>\n }\n @if(active === \"PrintDraw\") {\n <div class=\"print-draw-config\">\n <span class=\"icon-separator\">Label</span>\n <input type=\"text\" [(ngModel)]=\"printDrawLabel\"/>\n <select id=\"drawToolSelector\" [(ngModel)]=\"printDrawTool\" (change)=\"handlePrintDrawToolChanged()\">\n <option value=\"Arrow\" selected>Pil</option>\n <option value=\"Point\">Punkt</option>\n <option value=\"LineString\">Linje</option>\n <option value=\"Polygon\">Polygon</option>\n <option value=\"Circle\">Cirkel</option>\n <option value=\"Square\">Kvadrat</option>\n <option value=\"Rectangle\">Firkant</option>\n </select>\n <button class=\"compact-button\" (click)=\"handleClearPrintDrawFeatures()\">Ryd</button>\n </div>\n }\n }\n </div>\n @if (activeMode === 'draw' || activeMode === 'search-feature' || activeMode === 'wkt-input'\n || activeMode === 'change-type' || activeMode === 'merge-features') {\n <mat-select class=\"geometry-selector\" (selectionChange)=\"drawItemChanged($event)\" [(ngModel)]=\"selectedDrawItem\"> \n @for (drawItem of drawItems; track drawItem) {\n @if(activeMode !== 'merge-features' || drawItem.geomType === 'Polygon') {\n <mat-option [value]=\"drawItem\">{{drawItem.name}} <img *ngIf=\"drawItem.iconUrl\" class=\"compact-icon custom-image-icon\" [src]=\"drawItem.iconUrl\"></mat-option>\n }\n }\n </mat-select> \n }\n\n @if (activeMode === 'search-point' || activeMode === 'search-polygon') {\n <mat-select \n class=\"search-point-polygon-selector\" \n [(ngModel)]=\"selectedSearchMode\"\n (selectionChange)=\"onSearchModeChanged($event)\">\n <mat-option value=\"search-point\">S\u00F8g med punkt</mat-option>\n <mat-option value=\"search-polygon\">S\u00F8g med polygon</mat-option>\n </mat-select>\n }\n \n @if (activeMode === 'measure-distance' || activeMode === 'measure-area') {\n <mat-select \n class=\"geometry-selector\"\n [(ngModel)]=\"selectedMeasureMode\"\n (selectionChange)=\"onMeasureModeChanged($event)\">\n <mat-option value=\"measure-distance\">M\u00E5l afstand</mat-option>\n <mat-option value=\"measure-area\">M\u00E5l areal</mat-option>\n </mat-select>\n }\n }\n </div>\n @if (activeMode === 'search-feature' && filteredResults.length > 0) {\n <div class=\"geometry-search-panel\">\n <div class=\"buffer-item\">\n <mat-label>Buffer</mat-label>\n <input matInput type=\"number\" name=\"buffer\" [(ngModel)]=\"bufferInMeters\">\n <mat-label>m</mat-label>\n </div>\n <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n <div class=\"item-right\">\n <img \n [src]=\"objectSearchCopyIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event)\" \n matTooltip=\"Kopier\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier\">\n <img \n [src]=\"objectSearchCutIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"cutBySearchedObject(item, $event)\" \n matTooltip=\"Fjern\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fjern\">\n <img \n [src]=\"objectSearchCutIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"splitBySearchedObject(item, $event)\" \n matTooltip=\"Opsk\u00E6r\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Opsk\u00E6r\">\n <img \n [src]=\"objectSearchCopyWithBufferIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event, true)\" \n matTooltip=\"Kopier med buffer\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier med buffer\">\n <img \n [src]=\"objectSearchZoomIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"zoomSearchedObject(item, $event)\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Zoom\">\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleItemInfo(item, $event)\" \n matTooltip=\"Info\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Info\">\n </div> \n @if (item.showMetadata) {\n <div class=\"metadata-panel\">\n @for(feature of item.metadata; track feature) {\n <div class=\"feature-item\">\n <div *ngFor=\"let kv of (feature | keyvalue)\" class=\"feature-title\">\n {{ kv.value.name }}:\n <ng-container [ngSwitch]=\"kv.value.kind\">\n <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n {{ kv.key }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n <span *ngSwitchDefault class=\"secondary-item\">{{ kv.value.data }}</span>\n </ng-container>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </mat-option>\n </div>\n }\n @if ((activeMode === \"search-point\" || activeMode === \"search-polygon\") && geometrySearchResult.length > 0) {\n <div class=\"geometry-search-panel\">\n <mat-icon (click)=\"deleteAllGeometrySearchItem()\" class=\"delete-all-icon\" matTooltip=\"Ryd\">delete</mat-icon>\n <mat-option *ngFor=\"let result of geometrySearchResult\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"geometry-search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n <div class=\"item-right\">\n @if (item.url) {\n <mat-icon \n class=\"search-item-external\"\n matTooltip=\"\u00C5bn i ny tab\"\n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n (click)=\"openUrl(item.url, $event)\"\n matTooltipPosition=\"above\"\n >info</mat-icon>\n }\n <mat-icon (click)=\"deleteGeometrySearchItem(result, item.id, $event)\" >delete</mat-icon>\n </div>\n </div>\n </mat-option>\n </div>\n }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:10;max-width:95vw;box-shadow:0 2px 10px #0000001a;border-radius:5px;transition:width .3s ease,max-width .3s ease}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.search-item-external{cursor:pointer}.drag-handle-toolbox mat-icon{font-size:18px}.drag-handle-toolbox mat-icon:first-child{display:flex;align-items:center;justify-content:center}.drag-handle-toolbox .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.toggle-icon{cursor:pointer!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}:host{position:relative;display:flex;justify-content:center}:host.expanded{width:auto;min-width:320px;padding:12px}.toolbox-container{display:flex;flex-direction:column;align-items:center;width:100%;min-width:32px;transition:all .3s ease;cursor:default;border-radius:0 0 5px 5px}.toolbox-content{display:flex;flex-direction:column;width:100%;gap:3px;animation:slideDown .3s cubic-bezier(.4,0,.2,1)}.all-tools-container{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;width:100%;justify-content:flex-start;overflow-x:hidden;padding:2px 8px}.all-tools-container::-webkit-scrollbar{height:4px}.all-tools-container::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}.main-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.main-tools .snap-toggle{display:flex;align-items:center;gap:5px;color:#fff;font-size:12px;font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none}.main-tools .snap-toggle input[type=checkbox]{appearance:none;width:18px;height:18px;border:1.5px solid rgba(255,255,255,.6);border-radius:3px;background:transparent;cursor:pointer;position:relative;flex-shrink:0}.main-tools .snap-toggle input[type=checkbox]:checked{background:#f7b528;border-color:#f7b528}.main-tools .snap-toggle input[type=checkbox]:checked:after{content:\"\";position:absolute;left:4px;top:0;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.geometry-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;background:none;border-radius:8px;padding:3px 0}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-tools .compact-icon,.print-tools .compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.print-tools .compact-icon{background:none;color:#fff}.print-tools .compact-icon.active{background:#f7b528!important;border-color:transparent}.print-tools .compact-icon.active:hover{background:#ffffff1a}.print-tools .compact-icon:hover:not(.active){box-shadow:0 4px 12px #0000004d;opacity:.9}.tool-separator{width:1px;height:24px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.3),transparent)}.tool-separator.print-separator{height:28px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent)}.compact-icon{cursor:pointer;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}.compact-icon.active{color:#fff;background:#f7b528!important;border-color:transparent;box-shadow:0 8px 25px #667eea4d}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon:hover:not(.active){color:#fff;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:2px;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease,transform .2s ease}.compact-icon.custom-image-icon.active{background:#ffffff1a;border-color:none;box-shadow:none}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon.custom-image-icon:hover:not(.active){box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.search-point-polygon-selector{width:24%;margin-right:auto;padding:6px}.search-point-polygon-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.search-point-polygon-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.search-point-polygon-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.geometry-selector{width:34%;margin-left:15em;padding:6px}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.geometry-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.geometry-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.geometry-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-select-panel{min-width:fit-content!important;max-width:320px!important;background:#4c4d51!important;border:none!important;border-radius:8px!important;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014!important;margin-top:6px!important;padding:4px 0!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:14px!important;min-height:30px!important;padding:0 14px!important;transition:all .15s ease!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover:not(.mat-mdc-option-disabled){background:#444849!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-active{background:color-mix(in srgb,#000 60%,transparent)!important;color:#fff!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.wkt-section{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease;padding:10px 8px}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:5px;background:#6d6f73;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;min-height:32px;display:flex;align-items:center;justify-content:center;flex:1;box-shadow:0 1px 2px #0000000d}.compact-button.primary.active{background:#f7b528;box-shadow:0 8px 25px #667eea4d;color:#fff}.compact-button.primary.active:hover{box-shadow:0 12px 35px #667eea66}.compact-button.secondary{background:color-mix(in srgb,#000 20%,transparent);color:#fff}.compact-button.secondary:hover{background:color-mix(in srgb,#5a6268 60%,transparent)}.compact-input{padding:8px 10px;border-radius:5px;font-size:13px;transition:all .2s ease;background:#6d6f73;border:none;color:#fff}.compact-input:focus{outline:none;background:#6d6f73;border:1px solid #97989b}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:transparent;border:none;border-radius:8px;animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:#6d6f73;border:none;color:#fff;border-radius:6px;font-size:12px;height:32px;min-height:32px;padding:0 10px}.print-config select:focus,.print-config input:focus,.print-draw-config select:focus,.print-draw-config input:focus{outline:none}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:#6d6f73!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:#6ccb78;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s ease}.print-config button:hover,.print-draw-config button:hover{box-shadow:0 4px 12px #10b9814d}.print-config .icon-separator,.print-draw-config .icon-separator{color:#fff}.geometry-search-panel{position:absolute;right:0;z-index:1000;width:380px}.geometry-search-panel .delete-all-icon{color:#fff;margin-left:315px}.geometry-search-panel::-webkit-scrollbar{width:12px}.geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.search-result-option{display:block!important;padding:0!important;margin:0!important;background:transparent!important}.search-result-option:last-child{border-bottom:none}.search-result-option .mdc-list-item__primary-text{width:100%!important;margin:0!important;padding:0!important}.result-title{display:block;top:0;z-index:1;font-weight:600;color:#bdc1c3cc}.search-result-item{display:flex;align-items:center;padding:4px 14px;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.item-left{flex:1;width:100%}.item-header{color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.search-empty-state{padding:32px 16px;text-align:center;color:#757575}.search-empty-state .empty-icon{font-size:40px;width:40px;height:40px;color:#bdbdbd;margin-bottom:12px}.search-empty-state .empty-title{font-size:14px;font-weight:500;margin-bottom:4px}.search-empty-state .empty-subtitle{font-size:12px;color:#9e9e9e}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px}::ng-deep .metadata-panel .feature-item{padding:8px 12px;margin:4px 0;background:#ffffff0d;border-radius:5px;transition:all .2s ease}::ng-deep .metadata-panel .feature-item:hover{background:#ffffff1a;box-shadow:0 2px 8px #00000026}::ng-deep .metadata-panel .feature-item:first-child{margin-top:0}::ng-deep .metadata-panel .feature-item:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title{color:#bdc1c3cc;font-size:13px;line-height:1.6;display:flex;align-items:center;gap:6px;letter-spacing:.2px}::ng-deep .metadata-panel .feature-title:first-child{margin-top:0}::ng-deep .metadata-panel .feature-title:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title img{border-radius:4px;margin-top:4px;box-shadow:0 2px 6px #0003}::ng-deep .metadata-panel .feature-title a{color:#6ccb78;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:color .2s ease}::ng-deep .metadata-panel .feature-title a:hover{color:#85d990;text-decoration:underline}::ng-deep .metadata-panel .feature-title a .link-icon{font-size:16px;width:16px;height:16px}::ng-deep .metadata-panel .secondary-item{color:#fff;font-weight:400}::ng-deep .geometry-search-panel{max-height:360px!important;overflow-y:auto!important;max-width:430px;background:#4c4d51!important;border:1px solid rgba(255,255,255,.07);border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:0 8px 24px #00000026!important}::ng-deep .geometry-search-panel::-webkit-scrollbar{width:4px}::ng-deep .geometry-search-panel::-webkit-scrollbar-track{background:transparent}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#fff3}::ng-deep .geometry-search-panel .buffer-item{display:flex;align-items:center;gap:8px;padding:10px 14px 8px;background:#0003;border-bottom:1px solid rgba(255,255,255,.06)}::ng-deep .geometry-search-panel .buffer-item mat-label{color:#9ca3af;font-size:12px;font-weight:500;letter-spacing:.3px}::ng-deep .geometry-search-panel .buffer-item input{width:52px;margin:0;background:#3a3d42;border:1px solid rgba(255,255,255,.1);border-radius:5px;color:#fff;font-size:12px;padding:4px 8px;text-align:center;outline:none;transition:border-color .15s ease}::ng-deep .geometry-search-panel .buffer-item input:focus{border-color:#f7b528}::ng-deep .geometry-search-panel .result-title{display:flex;align-items:center;gap:8px;padding:8px 14px 4px;font-size:14px;font-weight:600;color:#bdc1c3cc;position:sticky;top:0;z-index:1}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-direction:column;gap:5px;padding:8px 14px;cursor:pointer;border-left:2px solid transparent;transition:background .12s ease,border-color .12s ease}::ng-deep .geometry-search-panel .search-result-item+.search-result-item{border-top:1px solid rgba(255,255,255,.04)}::ng-deep .geometry-search-panel .search-result-item:hover{background:#ffffff09}::ng-deep .geometry-search-panel .search-result-item:hover .item-header{color:#fff}::ng-deep .geometry-search-panel .search-result-item:last-child{border-radius:0 0 10px 10px}::ng-deep .geometry-search-panel .item-header{color:#d1d5db;font-size:14px;font-weight:500;line-height:1.4;display:block;word-wrap:break-word;overflow-wrap:break-word;transition:color .12s ease}::ng-deep .geometry-search-panel .item-right{display:flex;align-items:center;gap:3px;flex-wrap:wrap;width:100%}::ng-deep .geometry-search-panel .item-right .custom-image-icon{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff!important;border:1px solid rgba(255,255,255,0);border-radius:5px;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease!important}::ng-deep .geometry-search-panel .item-right .custom-image-icon:hover{background:#ffffff0d!important;box-shadow:0 0 0 1px #f7b5282e}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;padding:4px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff}::ng-deep .geometry-search-panel mat-label{color:#fff}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px}@media (max-width: 768px){.toolbox-wrapper{left:.5em;top:8em;max-width:calc(100vw - 2.5em)}.drag-handle-toolbox{padding:3px 6px;gap:6px}.drag-handle-toolbox mat-icon{font-size:16px;width:16px;height:16px}.toggle-icon{font-size:16px!important;width:16px!important;height:16px!important}.toolbox-container{padding:8px;min-width:28px;max-width:calc(100vw - 3em)}:host{padding:8px;min-width:32px}:host.expanded{min-width:280px;padding:10px}.all-tools-container{flex-wrap:wrap;gap:6px;max-height:50vh;overflow-y:auto;padding:0;-ms-overflow-style:none;scrollbar-width:none}.all-tools-container::-webkit-scrollbar{display:none}.main-tools,.geometry-tools,.measurement-print-tools,.print-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.compact-icon{width:28px;height:28px;flex-shrink:0}.measurement-print-tools{padding:3px 0}.geometry-selector{width:30%;margin-bottom:8px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:28px;min-height:28px;padding:0 8px;font-size:12px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:12px}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 2em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config,.print-draw-config{flex-direction:column;align-items:stretch;gap:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:11px;padding:4px 8px;height:28px;min-height:28px}.print-config input,.print-draw-config input{width:50px}.print-config button,.print-draw-config button{padding:4px 8px;font-size:11px;height:28px}.wkt-section .compact-input{font-size:12px;padding:6px 8px}.wkt-section .compact-button{font-size:11px;padding:5px 8px;min-height:28px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:11px!important}.geometry-search-panel{width:calc(100vw - 40px);max-width:400px;left:50%;max-height:70vh}.search-result-item{padding:8px 12px}.item-header{font-size:13px}.result-title{padding:10px 12px;font-size:13px}}.geometry-search-result-item{display:flex;padding:4px 14px;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.geometry-search-result-item .item-header{width:260px}@media (max-width: 480px){.toolbox-wrapper{left:.25em;top:6em;transform-origin:left top;max-width:calc(100vw - .5em)}.drag-handle-toolbox{padding:2px 4px;gap:4px}.drag-handle-toolbox mat-icon{font-size:14px;width:14px;height:14px}.toggle-icon{font-size:14px!important;width:14px!important;height:14px!important}.toolbox-container{padding:2px;min-width:24px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}.geometry-search-panel{width:calc(100vw - 32px);max-height:60vh}.search-result-item{padding:6px 10px}.item-header{font-size:12px;-webkit-line-clamp:1}}\n"] }]
|
|
4298
|
+
args: [{ selector: 'map-toolbox', imports: [FormsModule, CommonModule, MatIconModule, MatOptionModule, MatSelectModule, DragDropModule, MatTooltipModule], template: "<div class=\"toolbox-wrapper global-wrapper-container\" \n cdkDrag \n cdkDragBoundary=\".map-container\"\n [cdkDragFreeDragPosition]=\"dragPosition\"\n (cdkDragEnded)=\"onDragEnded($event)\"\n [class.collapsed]=\"collapsed\">\n <div class=\"drag-handle-toolbox\" cdkDragHandle>\n <mat-icon \n class=\"icon-left\" \n matTooltip=\"V\u00E6rkt\u00F8jskasse\" \n [matTooltipShowDelay]=\"500\"\n [matTooltipHideDelay]=\"100\" \n matTooltipPosition=\"above\">\n handyman\n </mat-icon> \n <div class=\"right-icons\"> \n <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n {{ collapsed ? 'flip_to_front' : 'remove' }}\n </mat-icon>\n </div>\n </div>\n \n <div class=\"toolbox-container\">\n @if(!collapsed) {\n <div class=\"toolbox-content\">\n <div class=\"all-tools-container\">\n <div class=\"main-tools\">\n @if(!settings?.undoDisabled) {\n <img \n [src]=\"undoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"undo()\" \n matTooltip=\"Fortryd\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Undo\">\n\n <img \n [src]=\"redoIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"redo()\" \n matTooltip=\"Gendan\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Redo\">\n }\n @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 <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 <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 <img \n [src]=\"downloadMatriklerBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startDownloadCasdatres()\" \n [class.active]=\"activeMode === 'download-cadastres'\"\n matTooltip=\"Download matrikler\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Download matrikler\">\n\n <img \n [src]=\"splitIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"togglePointPolygonSearch()\"\n [class.active]=\"activeMode === 'search-point' || activeMode === 'search-polygon'\"\n matTooltip=\"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 @if (settings.showDocumentSearch) {\n\n <img \n [src]=\"documentSearchBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startDocumentPointSearch()\"\n [class.active]=\"activeMode === 'document-search-by-point'\"\n matTooltip=\"Dokument fra punkt\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Dokument fra punkt\">\n\n <img \n [src]=\"documentSearchBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startDocumentPolygonSearch()\"\n [class.active]=\"activeMode === 'document-search-by-polygon'\"\n matTooltip=\"Dokumenter fra polygon\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Dokumenter fra polygon\">\n }\n @if (settings.cowiUrlTemplate) {\n <img \n [src]=\"openCowiPageBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'cowi'\"\n (click)=\"toggleCowiPage()\" \n matTooltip=\"COWI\u00B4s Gadefoto\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"COWI\u00B4s Gadefoto\">\n }\n @if (settings.skraaFotoUrlTemplate) {\n <img \n [src]=\"skrafotoBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'skrafoto'\"\n (click)=\"toggleSkraafotoPage()\" \n matTooltip=\"Opslag p\u00E5 Skr\u00E5fotos\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Skr\u00E5foto\">\n }\n <img \n [src]=\"streetViewBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'streetview'\"\n (click)=\"toggleGoogleStreetviewPage()\" \n matTooltip=\"Google Streetview\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Google Streetview\">\n <img \n [src]=\"fremhaevBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'select-highlight'\"\n (click)=\"startSelectFeatureHighlight()\" \n matTooltip=\"Fremh\u00E6v aktivt objekt i listen\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fremh\u00E6v\">\n @if (activeMode === 'draw' || activeMode === 'edit' || activeMode === 'edit-remove' || activeMode === 'search-feature' ||\n activeMode === 'clip-hole' || activeMode === 'split' || activeMode === 'merge-features') {\n <label class=\"snap-toggle\">\n <input type=\"checkbox\" [checked]=\"snap\" (change)=\"onSnapChange($event)\">\n Snap\n </label> \n } \n @if(settings.editEnabled) {\n <img \n [src]=\"editBase64\" \n [class.active]=\"activeMode === 'edit'\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"startEdit()\" \n matTooltip=\"Inds\u00E6t eller flyt punkter i flade/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 <img \n [src]=\"sogPolygonBase64\" \n [class.active]=\"activeMode === 'search-feature'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleFeatureSearch()\" \n matTooltip=\"V\u00E6lg og vis emner i listen\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"V\u00E6lg og vis emner i listen\">\n\n <img \n [src]=\"drawBase64\" \n [class.active]=\"activeMode === 'draw'\"\n class=\"compact-icon custom-image-icon\"\n (click)=\"startDraw()\"\n matTooltip=\"Tegn element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Tegn element\">\n @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 </div>\n <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n <div class=\"measurement-print-tools\">\n <div class=\"measurement-tools\">\n @if (deleteEnabled) {\n <img \n [src]=\"deleteIconBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"activeMode === 'delete'\"\n (click)=\"startDelete()\" \n matTooltip=\"Slet element\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Slet element\">\n }\n <img \n [src]=\"measureDistanceIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleMeasure()\"\n [class.active]=\"activeMode === 'measure-distance' || activeMode === 'measure-area'\"\n matTooltip=\"M\u00E5l afstand / areal\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"M\u00E5l\">\n </div>\n @if(profile.showPrint) {\n <div class=\"tool-separator print-separator\"></div>\n <div class=\"print-tools\">\n <img \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'Print'\"\n (click)=\"startPrintMode()\" \n matTooltip=\"Sk\u00E6rmprint af kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Sk\u00E6rmprint af kortet\">\n <img \n [src]=\"drawPrintBase64\" \n class=\"compact-icon custom-image-icon\"\n [class.active]=\"active === 'PrintDraw'\"\n (click)=\"startDrawMode()\" \n matTooltip=\"Tegnev\u00E6rkt\u00F8j til print\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Tegnev\u00E6rkt\u00F8j til print\">\n </div>\n }\n </div>\n </div>\n @if(showInputWKT && activeMode === 'wkt-input') {\n <div class=\"wkt-section\">\n <input class=\"compact-input\" [(ngModel)]=\"WKTString\">\n <div class=\"wkt-actions\">\n <button class=\"compact-button primary\" (click)=\"ReadWKT()\">Indl\u00E6s WKT</button>\n <button class=\"compact-button\" (click)=\"cancelWKT()\">Annuller</button>\n </div>\n </div>\n }\n @if(profile.showPrint) {\n @if(active === \"Print\") {\n <div class=\"print-config\">\n <img \n matTooltip=\"Sk\u00E6rmprint af kortet\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n [src]=\"printBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"doPrint()\" \n alt=\"Udskriv\"> \n <span class=\"icon-separator\">i</span>\n <select id=\"formatSelector\" [(ngModel)]=\"format\">\n <option value=\"image/png\" selected>.PNG</option>\n <option value=\"image/jpeg\">.JPG</option>\n </select>\n <select id=\"dimensionSelector\" [(ngModel)]=\"dimId\" (change)=\"handleDimensionSelected()\">\n <option value=\"99\" selected></option>\n <option value=\"0\">1920 X 1080</option>\n <option value=\"1\">1680 X 1050</option>\n <option value=\"2\">1280 X 800</option>\n <option value=\"3\">800 X 600</option>\n </select>\n <input type=\"text\" [(ngModel)]=\"mapWidth\"/> \n <span class=\"icon-separator\">x</span>\n <input type=\"text\" [(ngModel)]=\"mapHeight\"/>\n <button (click)=\"setNewMapDimensions()\">V\u00E6lg</button>\n </div>\n }\n @if(active === \"PrintDraw\") {\n <div class=\"print-draw-config\">\n <span class=\"icon-separator\">Label</span>\n <input type=\"text\" [(ngModel)]=\"printDrawLabel\"/>\n <select id=\"drawToolSelector\" [(ngModel)]=\"printDrawTool\" (change)=\"handlePrintDrawToolChanged()\">\n <option value=\"Arrow\" selected>Pil</option>\n <option value=\"Point\">Punkt</option>\n <option value=\"LineString\">Linje</option>\n <option value=\"Polygon\">Polygon</option>\n <option value=\"Circle\">Cirkel</option>\n <option value=\"Square\">Kvadrat</option>\n <option value=\"Rectangle\">Firkant</option>\n </select>\n <button class=\"compact-button\" (click)=\"handleClearPrintDrawFeatures()\">Ryd</button>\n </div>\n }\n }\n </div>\n @if (activeMode === 'draw' || activeMode === 'search-feature' || activeMode === 'wkt-input'\n || activeMode === 'change-type' || activeMode === 'merge-features') {\n <mat-select class=\"geometry-selector\" (selectionChange)=\"drawItemChanged($event)\" [(ngModel)]=\"selectedDrawItem\"> \n @for (drawItem of drawItems; track drawItem) {\n @if(activeMode !== 'merge-features' || drawItem.geomType === 'Polygon') {\n <mat-option [value]=\"drawItem\">{{drawItem.name}} <img *ngIf=\"drawItem.iconUrl\" class=\"compact-icon custom-image-icon\" [src]=\"drawItem.iconUrl\"></mat-option>\n }\n }\n </mat-select> \n }\n\n @if (activeMode === 'search-point' || activeMode === 'search-polygon') {\n <mat-select \n class=\"search-point-polygon-selector\" \n [(ngModel)]=\"selectedSearchMode\"\n (selectionChange)=\"onSearchModeChanged($event)\">\n <mat-option value=\"search-point\">S\u00F8g med punkt</mat-option>\n <mat-option value=\"search-polygon\">S\u00F8g med polygon</mat-option>\n </mat-select>\n }\n \n @if (activeMode === 'measure-distance' || activeMode === 'measure-area') {\n <mat-select \n class=\"geometry-selector\"\n [(ngModel)]=\"selectedMeasureMode\"\n (selectionChange)=\"onMeasureModeChanged($event)\">\n <mat-option value=\"measure-distance\">M\u00E5l afstand</mat-option>\n <mat-option value=\"measure-area\">M\u00E5l areal</mat-option>\n </mat-select>\n }\n }\n </div>\n @if (activeMode === 'search-feature' && filteredResults.length > 0) {\n <div class=\"geometry-search-panel\">\n <div class=\"buffer-item\">\n <mat-label>Buffer</mat-label>\n <input matInput type=\"number\" name=\"buffer\" [(ngModel)]=\"bufferInMeters\">\n <mat-label>m</mat-label>\n </div>\n <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n <div class=\"item-right\">\n <img \n [src]=\"objectSearchCopyIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event)\" \n matTooltip=\"Kopier\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier\">\n <img \n [src]=\"objectSearchCutIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"cutBySearchedObject(item, $event)\" \n matTooltip=\"Fjern\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Fjern\">\n <img \n [src]=\"objectSearchCutIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"splitBySearchedObject(item, $event)\" \n matTooltip=\"Opsk\u00E6r\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Opsk\u00E6r\">\n <img \n [src]=\"objectSearchCopyWithBufferIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"addToActiveObjectsList(item, $event, true)\" \n matTooltip=\"Kopier med buffer\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Kopier med buffer\">\n <img \n [src]=\"objectSearchZoomIconBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"zoomSearchedObject(item, $event)\" \n matTooltip=\"Zoom\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Zoom\">\n <img \n [src]=\"infoBase64\" \n class=\"compact-icon custom-image-icon\"\n (click)=\"toggleItemInfo(item, $event)\" \n matTooltip=\"Info\" \n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n matTooltipClass=\"custom-tooltip\"\n matTooltipPosition=\"below\"\n alt=\"Info\">\n </div> \n @if (item.showMetadata) {\n <div class=\"metadata-panel\">\n @for(feature of item.metadata; track feature) {\n <div class=\"feature-item\">\n <div *ngFor=\"let kv of (feature | keyvalue)\" class=\"feature-title\">\n {{ kv.value.name }}:\n <ng-container [ngSwitch]=\"kv.value.kind\">\n <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n {{ kv.key }}\n <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n </a>\n <span *ngSwitchDefault class=\"secondary-item\">{{ kv.value.data }}</span>\n </ng-container>\n </div>\n </div>\n }\n </div>\n }\n </div>\n </mat-option>\n </div>\n }\n @if ((activeMode === \"search-point\" || activeMode === \"search-polygon\") && geometrySearchResult.length > 0) {\n <div class=\"geometry-search-panel\">\n <mat-icon (click)=\"deleteAllGeometrySearchItem()\" class=\"delete-all-icon\" matTooltip=\"Ryd\">delete</mat-icon>\n <mat-option *ngFor=\"let result of geometrySearchResult\" [value]=\"result\" class=\"search-result-option\">\n <span class=\"result-title\">\n {{ result.title }} ({{result.items.length}} af {{ result.total }})\n </span>\n <div (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"geometry-search-result-item\">\n <div class=\"item-left\">\n <span class=\"item-header\"> {{item.header}} </span> \n </div>\n <div class=\"item-right\">\n @if (item.url) {\n <mat-icon \n class=\"search-item-external\"\n matTooltip=\"\u00C5bn i ny tab\"\n [matTooltipShowDelay]=\"200\"\n [matTooltipHideDelay]=\"300\" \n (click)=\"openUrl(item.url, $event)\"\n matTooltipPosition=\"above\"\n >info</mat-icon>\n }\n <mat-icon (click)=\"deleteGeometrySearchItem(result, item.id, $event)\" >delete</mat-icon>\n </div>\n </div>\n </mat-option>\n </div>\n }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;top:0!important;left:0!important;margin:0!important;z-index:10;max-width:95vw;box-shadow:0 2px 10px #0000001a;border-radius:5px;transition:width .3s ease,max-width .3s ease}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;z-index:1001}.search-item-external{cursor:pointer}.drag-handle-toolbox mat-icon{font-size:18px}.drag-handle-toolbox mat-icon:first-child{display:flex;align-items:center;justify-content:center}.drag-handle-toolbox .icon-left{cursor:default!important}.right-icons{display:flex;align-items:center;gap:6px}.toggle-icon{cursor:pointer!important;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toggle-icon:hover{color:#d3d3d3}:host{position:relative;display:flex;justify-content:center}:host.expanded{width:auto;min-width:320px;padding:12px}.toolbox-container{display:flex;flex-direction:column;align-items:center;width:100%;min-width:32px;transition:all .3s ease;cursor:default;border-radius:0 0 5px 5px}.toolbox-content{display:flex;flex-direction:column;width:100%;gap:3px;animation:slideDown .3s cubic-bezier(.4,0,.2,1)}.all-tools-container{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;width:100%;justify-content:flex-start;overflow-x:hidden;padding:2px 8px}.all-tools-container::-webkit-scrollbar{height:4px}.all-tools-container::-webkit-scrollbar-thumb{background:#ccc;border-radius:2px}.main-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.main-tools .snap-toggle{display:flex;align-items:center;gap:5px;color:#fff;font-size:12px;font-weight:500;cursor:pointer;-webkit-user-select:none;user-select:none}.main-tools .snap-toggle input[type=checkbox]{appearance:none;width:18px;height:18px;border:1.5px solid rgba(255,255,255,.6);border-radius:3px;background:transparent;cursor:pointer;position:relative;flex-shrink:0}.main-tools .snap-toggle input[type=checkbox]:checked{background:#f7b528;border-color:#f7b528}.main-tools .snap-toggle input[type=checkbox]:checked:after{content:\"\";position:absolute;left:4px;top:0;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg)}.geometry-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;background:none;border-radius:8px;padding:3px 0}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap}.measurement-tools .compact-icon,.print-tools .compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.print-tools .compact-icon{background:none;color:#fff}.print-tools .compact-icon.active{background:#f7b528!important;border-color:transparent}.print-tools .compact-icon.active:hover{background:#ffffff1a}.print-tools .compact-icon:hover:not(.active){box-shadow:0 4px 12px #0000004d;opacity:.9}.tool-separator{width:1px;height:24px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.3),transparent)}.tool-separator.print-separator{height:28px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent)}.compact-icon{cursor:pointer;color:#fff;transition:all .3s cubic-bezier(.4,0,.2,1);width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0}.compact-icon.active{color:#fff;background:#f7b528!important;border-color:transparent;box-shadow:0 8px 25px #667eea4d}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon:hover:not(.active){color:#fff;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:2px;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease,transform .2s ease}.compact-icon.custom-image-icon.active{background:#ffffff1a;border-color:none;box-shadow:none}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.compact-icon.custom-image-icon.active:hover{box-shadow:0 12px 35px #667eea66}.compact-icon.custom-image-icon:hover:not(.active){box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.search-point-polygon-selector{width:24%;margin-right:auto;padding:6px}.search-point-polygon-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.search-point-polygon-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.search-point-polygon-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.search-point-polygon-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.search-point-polygon-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.geometry-selector{width:34%;margin-left:15em;padding:6px}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:5px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:#6d6f73;transition:all .2s ease}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:#6d6f73}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:14px;font-weight:500;color:#fff}.geometry-selector ::ng-deep .mat-mdc-select-arrow-wrapper{height:16px}.geometry-selector ::ng-deep .mat-mdc-form-field-infix{min-height:32px;padding:6px 0}.geometry-selector ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-select-panel{min-width:fit-content!important;max-width:320px!important;background:#4c4d51!important;border:none!important;border-radius:8px!important;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014!important;margin-top:6px!important;padding:4px 0!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:14px!important;min-height:30px!important;padding:0 14px!important;transition:all .15s ease!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover:not(.mat-mdc-option-disabled){background:#444849!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-active{background:color-mix(in srgb,#000 60%,transparent)!important;color:#fff!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.wkt-section{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease;padding:10px 8px}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:5px;background:#6d6f73;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;min-height:32px;display:flex;align-items:center;justify-content:center;flex:1;box-shadow:0 1px 2px #0000000d}.compact-button.primary.active{background:#f7b528;box-shadow:0 8px 25px #667eea4d;color:#fff}.compact-button.primary.active:hover{box-shadow:0 12px 35px #667eea66}.compact-button.secondary{background:color-mix(in srgb,#000 20%,transparent);color:#fff}.compact-button.secondary:hover{background:color-mix(in srgb,#5a6268 60%,transparent)}.compact-input{padding:8px 10px;border-radius:5px;font-size:13px;transition:all .2s ease;background:#6d6f73;border:none;color:#fff}.compact-input:focus{outline:none;background:#6d6f73;border:1px solid #97989b}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:transparent;border:none;border-radius:8px;animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:#6d6f73;border:none;color:#fff;border-radius:6px;font-size:12px;height:32px;min-height:32px;padding:0 10px}.print-config select:focus,.print-config input:focus,.print-draw-config select:focus,.print-draw-config input:focus{outline:none}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:#6d6f73!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:#6ccb78;color:#fff;border:none;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s ease}.print-config button:hover,.print-draw-config button:hover{box-shadow:0 4px 12px #10b9814d}.print-config .icon-separator,.print-draw-config .icon-separator{color:#fff}.geometry-search-panel{position:absolute;right:0;z-index:1000;width:380px}.geometry-search-panel .delete-all-icon{color:#fff;margin-left:315px}.geometry-search-panel::-webkit-scrollbar{width:12px}.geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}.geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}.geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}.search-result-option{display:block!important;padding:0!important;margin:0!important;background:transparent!important}.search-result-option:last-child{border-bottom:none}.search-result-option .mdc-list-item__primary-text{width:100%!important;margin:0!important;padding:0!important}.result-title{display:block;top:0;z-index:1;font-weight:600;color:#bdc1c3cc}.search-result-item{display:flex;align-items:center;padding:4px 14px;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.item-left{flex:1;width:100%}.item-header{color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.search-empty-state{padding:32px 16px;text-align:center;color:#757575}.search-empty-state .empty-icon{font-size:40px;width:40px;height:40px;color:#bdbdbd;margin-bottom:12px}.search-empty-state .empty-title{font-size:14px;font-weight:500;margin-bottom:4px}.search-empty-state .empty-subtitle{font-size:12px;color:#9e9e9e}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px}::ng-deep .metadata-panel .feature-item{padding:8px 12px;margin:4px 0;background:#ffffff0d;border-radius:5px;transition:all .2s ease}::ng-deep .metadata-panel .feature-item:hover{background:#ffffff1a;box-shadow:0 2px 8px #00000026}::ng-deep .metadata-panel .feature-item:first-child{margin-top:0}::ng-deep .metadata-panel .feature-item:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title{color:#bdc1c3cc;font-size:13px;line-height:1.6;display:flex;align-items:center;gap:6px;letter-spacing:.2px}::ng-deep .metadata-panel .feature-title:first-child{margin-top:0}::ng-deep .metadata-panel .feature-title:last-child{margin-bottom:0}::ng-deep .metadata-panel .feature-title img{border-radius:4px;margin-top:4px;box-shadow:0 2px 6px #0003}::ng-deep .metadata-panel .feature-title a{color:#6ccb78;text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:color .2s ease}::ng-deep .metadata-panel .feature-title a:hover{color:#85d990;text-decoration:underline}::ng-deep .metadata-panel .feature-title a .link-icon{font-size:16px;width:16px;height:16px}::ng-deep .metadata-panel .secondary-item{color:#fff;font-weight:400}::ng-deep .geometry-search-panel{max-height:360px!important;overflow-y:auto!important;max-width:430px;background:#4c4d51!important;border:1px solid rgba(255,255,255,.07);border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:0 8px 24px #00000026!important}::ng-deep .geometry-search-panel::-webkit-scrollbar{width:4px}::ng-deep .geometry-search-panel::-webkit-scrollbar-track{background:transparent}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#fff3}::ng-deep .geometry-search-panel .buffer-item{display:flex;align-items:center;gap:8px;padding:10px 14px 8px;background:#0003;border-bottom:1px solid rgba(255,255,255,.06)}::ng-deep .geometry-search-panel .buffer-item mat-label{color:#9ca3af;font-size:12px;font-weight:500;letter-spacing:.3px}::ng-deep .geometry-search-panel .buffer-item input{width:52px;margin:0;background:#3a3d42;border:1px solid rgba(255,255,255,.1);border-radius:5px;color:#fff;font-size:12px;padding:4px 8px;text-align:center;outline:none;transition:border-color .15s ease}::ng-deep .geometry-search-panel .buffer-item input:focus{border-color:#f7b528}::ng-deep .geometry-search-panel .result-title{display:flex;align-items:center;gap:8px;padding:8px 14px 4px;font-size:14px;font-weight:600;color:#bdc1c3cc;position:sticky;top:0;z-index:1}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-direction:column;gap:5px;padding:8px 14px;cursor:pointer;border-left:2px solid transparent;transition:background .12s ease,border-color .12s ease}::ng-deep .geometry-search-panel .search-result-item+.search-result-item{border-top:1px solid rgba(255,255,255,.04)}::ng-deep .geometry-search-panel .search-result-item:hover{background:#ffffff09}::ng-deep .geometry-search-panel .search-result-item:hover .item-header{color:#fff}::ng-deep .geometry-search-panel .search-result-item:last-child{border-radius:0 0 10px 10px}::ng-deep .geometry-search-panel .item-header{color:#d1d5db;font-size:14px;font-weight:500;line-height:1.4;display:block;word-wrap:break-word;overflow-wrap:break-word;transition:color .12s ease}::ng-deep .geometry-search-panel .item-right{display:flex;align-items:center;gap:3px;flex-wrap:wrap;width:100%}::ng-deep .geometry-search-panel .item-right .custom-image-icon{width:26px;height:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff!important;border:1px solid rgba(255,255,255,0);border-radius:5px;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease!important}::ng-deep .geometry-search-panel .item-right .custom-image-icon:hover{background:#ffffff0d!important;box-shadow:0 0 0 1px #f7b5282e}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;padding:4px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{color:#fff}::ng-deep .geometry-search-panel mat-label{color:#fff}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px}@media (max-width: 768px){.toolbox-wrapper{left:.5em;top:8em;max-width:calc(100vw - 2.5em)}.drag-handle-toolbox{padding:3px 6px;gap:6px}.drag-handle-toolbox mat-icon{font-size:16px;width:16px;height:16px}.toggle-icon{font-size:16px!important;width:16px!important;height:16px!important}.toolbox-container{padding:8px;min-width:28px;max-width:calc(100vw - 3em)}:host{padding:8px;min-width:32px}:host.expanded{min-width:280px;padding:10px}.all-tools-container{flex-wrap:wrap;gap:6px;max-height:50vh;overflow-y:auto;padding:0;-ms-overflow-style:none;scrollbar-width:none}.all-tools-container::-webkit-scrollbar{display:none}.main-tools,.geometry-tools,.measurement-print-tools,.print-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}.compact-icon{width:28px;height:28px;flex-shrink:0}.measurement-print-tools{padding:3px 0}.geometry-selector{width:30%;margin-bottom:8px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:28px;min-height:28px;padding:0 8px;font-size:12px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:12px}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 2em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config,.print-draw-config{flex-direction:column;align-items:stretch;gap:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:11px;padding:4px 8px;height:28px;min-height:28px}.print-config input,.print-draw-config input{width:50px}.print-config button,.print-draw-config button{padding:4px 8px;font-size:11px;height:28px}.wkt-section .compact-input{font-size:12px;padding:6px 8px}.wkt-section .compact-button{font-size:11px;padding:5px 8px;min-height:28px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:11px!important}.geometry-search-panel{width:calc(100vw - 40px);max-width:400px;left:50%;max-height:70vh}.search-result-item{padding:8px 12px}.item-header{font-size:13px}.result-title{padding:10px 12px;font-size:13px}}.geometry-search-result-item{display:flex;padding:4px 14px;cursor:pointer;transition:background-color .15s ease;border-radius:5px}.geometry-search-result-item .item-header{width:260px}@media (max-width: 480px){.toolbox-wrapper{left:.25em;top:6em;transform-origin:left top;max-width:calc(100vw - .5em)}.drag-handle-toolbox{padding:2px 4px;gap:4px}.drag-handle-toolbox mat-icon{font-size:14px;width:14px;height:14px}.toggle-icon{font-size:14px!important;width:14px!important;height:14px!important}.toolbox-container{padding:2px;min-width:24px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}.geometry-search-panel{width:calc(100vw - 32px);max-height:60vh}.search-result-item{padding:6px 10px}.item-header{font-size:12px;-webkit-line-clamp:1}}\n"] }]
|
|
4297
4299
|
}], ctorParameters: () => [], propDecorators: { map: [{
|
|
4298
4300
|
type: Input,
|
|
4299
4301
|
args: [{ required: true }]
|