@regionerne/gis-komponent 0.0.28 → 0.0.29

package/fesm2022/regionerne-gis-komponent.mjs

@@ -417,14 +417,11 @@ class LayoutService {
         }
         return dragPosition;
     }
-    bringElementIntoViewIfNeeded(elementClass, offsetValue, collapsed, map) {
+    bringElementIntoViewIfNeeded(elementClass, offsetValue, collapsed) {
         const element = document.querySelector(elementClass);
-        const mapControls = map.getControls();
-        console.log('map controls', mapControls);
         if (!element)
             return;
         const left = parseInt(element.style.left || '0', 10);
-        console.log('bringToolboxIntoViewIfNeeded left ', left, element, element.style);
         if (collapsed) {
             // Widget minimized, remove the style for left
             element.style.left = '0em';
@@ -631,6 +628,9 @@ class LayerSelectorComponent {
             this.searchText = '';
             this.filterChanged();
         }
+        if (this.profile.layerSelectorInitialPosition.includes('højre')) {
+            this._layoutService.bringElementIntoViewIfNeeded('.layer-selector-body-wrapper', -13, this.collapsed);
+        }
     }
     updateOpacity(layer) {
         this._layerHelper.updateLayerOpacityInMap(this.map, layer);
@@ -2804,7 +2804,7 @@ class ToolboxComponent {
             this.stopMeasureLength();
         }
         if (this.profile.toolboxInitialPosition.includes('højre')) {
-            this._layoutService.bringElementIntoViewIfNeeded('.toolbox-wrapper', -57, this.collapsed, this.map);
+            this._layoutService.bringElementIntoViewIfNeeded('.toolbox-wrapper', -57, this.collapsed);
         }
     }
     startMeasureArea() {
@@ -3068,11 +3068,11 @@ class ToolboxComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToolboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToolboxComponent, isStandalone: true, selector: "map-toolbox", inputs: { map: "map", showMeasureDistance: "showMeasureDistance", showMeasureArea: "showMeasureArea", collapsed: "collapsed", settings: "settings", profile: "profile", WKTInputEnabled: "WKTInputEnabled", deleteEnabled: "deleteEnabled" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toolbox-wrapper\" \n     cdkDrag \n     cdkDragBoundary=\".map-container\"\n     [cdkDragFreeDragPosition]=\"dragPosition\"\n     (cdkDragEnded)=\"onDragEnded($event)\">\n     <div class=\"drag-handle-toolbox\" cdkDragHandle>\n        <mat-icon class=\"left-icon\">handyman</mat-icon>\n    \n        <div class=\"right-icons\">\n            <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n            <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n                {{ collapsed ? 'flip_to_front' : 'remove' }}\n            </mat-icon>\n        </div>\n    </div>\n    \n    <div class=\"toolbox-container\" [class.collapsed]=\"collapsed\">\n        @if(!collapsed) {\n            <div class=\"toolbox-content\">\n                @if (showGeometryTypes && filteredGeometryTypeSettings.length > 0) {\n                    <mat-select class=\"geometry-selector\" (selectionChange)=\"settingsChanged($event)\" [(ngModel)]=\"selectedGeometrySetting\" [compareWith]=\"compareGeometrySetting\">\n                        @for (setting of filteredGeometryTypeSettings; track setting) {\n                            <mat-option [value]=\"setting\">{{setting.typeName}}</mat-option>\n                        }\n                    </mat-select>            \n                }\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                        <mat-icon \n                            class=\"compact-icon\"                             \n                            (click)=\"startShowInfo()\"\n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"Vis info\" \n                            matTooltipPosition=\"below\">\n                            info\n                        </mat-icon>\n                        <mat-icon \n                            class=\"compact-icon\" \n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"S\u00F8g punkt\" \n                            matTooltipPosition=\"below\"\n                            (click)=\"togglePointSearch()\">adjust\n                        </mat-icon>\n                        <mat-icon \n                            class=\"compact-icon\" \n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"S\u00F8g polygon\" \n                            matTooltipPosition=\"below\"\n                            (click)=\"togglePolygonSearch()\">crop_din\n                        </mat-icon>\n                        <mat-icon\n                            class=\"compact-icon\"                             \n                            (click)=\"startSelectFeatureHighlight()\"\n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"Fremh\u00E6v\" \n                            matTooltipPosition=\"below\"\n                        >star</mat-icon> // TODO: set correct icon for this\n\n                        <mat-slide-toggle [(ngModel)]=\"snap\" (change)=\"onSnapChange()\">Snap</mat-slide-toggle>\n                        @if(settings.editEnabled) {\n                            <img \n                                [src]=\"editIconBase64\" \n                                [class.active]=\"activeMode === 'edit'\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startEdit()\" \n                                matTooltip=\"Rediger\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Rediger\">\n\n                            <img \n                                [src]=\"removePointsIconBase64\" \n                                [class.active]=\"activeMode === 'edit-remove'\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startEditRemovePoints()\" \n                                matTooltip=\"Fjern punkter\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Fjern punkter\">\n                        }\n                        @if(settings.cutHoleEnabled) {\n                            <img \n                                [src]=\"trimIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'clip-hole'\" \n                                (click)=\"clipHole()\" \n                                matTooltip=\"Klip hul\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Klip hul\">\n                        }\n                        @if(settings.splitEnabled) {\n                            <img \n                                [src]=\"splitIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'split'\"\n                                (click)=\"split()\" \n                                matTooltip=\"Sk\u00E6r over\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Sk\u00E6r over\">\n                        }\n                        @if(settings.changeTypeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                [class.active]=\"activeMode === 'change-type'\" \n                                (click)=\"startChangeType()\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Skift type\" \n                                matTooltipPosition=\"below\">\n                                find_replace\n                            </mat-icon>\n                        }\n                        @if(settings.mergeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                (click)=\"startMergeFeatures()\" \n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Saml flader\" \n                                [class.active]=\"activeMode === 'merge-features'\">\n                                merge\n                            </mat-icon>\n                        }\n                        @if(settings.centerPoint) {\n                            <mat-icon\n                                (click)=\"setCenterPoint()\"\n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"S\u00E6t centerpunkt\" \n                                [class.active]=\"activeMode === 'center-point'\"\n                            >adjust</mat-icon>\n                        }\n                    </div>\n                    <div class=\"geometry-tools\">\n                        <img \n                            [src]=\"featureSearchIconBase64\" \n                            [class.active]=\"activeMode === 'search-feature'\"\n                            class=\"compact-icon primary custom-image-icon\"\n                            (click)=\"toggleFeatureSearch()\" \n                            matTooltip=\"Udpegede objekter\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Punkt\">\n\n                        <img \n                            [src]=\"polygonIconBase64\" \n                            [class.active]=\"activeMode === 'draw-polygon'\"\n                            class=\"compact-icon primary custom-image-icon\"\n                            (click)=\"startDrawPolygon()\" \n                            matTooltip=\"Polygon\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Polygon\">\n                        <img \n                            [src]=\"lineStringIconBase64\" \n                            [class.active]=\"activeMode === 'draw-linestring'\"\n                            class=\"compact-icon primary custom-image-icon\"\n                            (click)=\"startDrawLineString()\" \n                            matTooltip=\"LineString\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"LineString\">\n                        \n                        @if(selectedGeometrySetting && selectedGeometrySetting.icons && selectedGeometrySetting.icons.length > 0) {\n                            @for(iconUrl of selectedGeometrySetting.icons;track iconUrl) {\n                                <img \n                                    [src]=\"iconUrl\" \n                                    [class.active]=\"activeMode === 'draw-point'\"\n                                    class=\"compact-icon primary custom-image-icon\"\n                                    (click)=\"startDrawPointUrl(iconUrl)\" \n                                    matTooltip=\"Punkter\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Punkter\">}\n                        } @else {\n                            <img \n                                [src]=\"pointIconBase64\" \n                                [class.active]=\"activeMode === 'draw-point'\"\n                                class=\"compact-icon primary custom-image-icon\"\n                                (click)=\"startDrawPoint()\" \n                                matTooltip=\"Punkter\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Punkter\">\n                        }\n                        <img \n                            [src]=\"wktIconBase64\" \n                            class=\"compact-icon secondary custom-image-icon\"\n                            (click)=\"activateShowInputWKT()\" \n                            matTooltip=\"WKT\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"WKT\">\n                    </div>\n                    <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n                    <div class=\"measurement-print-tools\">\n                        <div class=\"measurement-tools\">\n                            @if (deleteEnabled) {\n                                <img \n                                    [src]=\"deleteIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'delete'\"\n                                    (click)=\"startDelete()\" \n                                    matTooltip=\"Slet\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Slet\">\n                            }\n                            @if (showMeasureDistance) {\n                                <img \n                                    [src]=\"measureDistanceIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'measure-distance'\"\n                                    (click)=\"startMeasureLength()\" \n                                    matTooltip=\"M\u00E5le afstand\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"M\u00E5le afstand\">\n                            }\n                            @if(showMeasureArea) {\n                                <img \n                                    [src]=\"measureAreaIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'measure-area'\"\n                                    (click)=\"startMeasureArea()\" \n                                    matTooltip=\"M\u00E5le areal\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"M\u00E5le areal\">\n                            }\n                        </div>\n                        @if(profile.showPrint) {\n                            <div class=\"tool-separator print-separator\"></div>\n                            <div class=\"print-tools\">\n                                <img \n                                    [src]=\"printBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"active === 'Print'\"\n                                    (click)=\"startPrintMode()\" \n                                    matTooltip=\"Udskriv\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Udskriv\">\n                                <img \n                                    [src]=\"drawBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"active === 'Draw'\"\n                                    (click)=\"startDrawMode()\" \n                                    matTooltip=\"Tegn\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Tegn\">\n                            </div>\n                        }\n                    </div>\n                </div>\n                @if(showInputWKT) {\n                    <div class=\"wkt-section\">\n                        <input class=\"compact-input\" [(ngModel)]=\"WKTString\">\n                            <div class=\"wkt-actions\">\n                                <button class=\"compact-button primary\" (click)=\"ReadWKT()\">Indl\u00E6s WKT</button>\n                                <button class=\"compact-button\" (click)=\"cancelWKT()\">Annuller</button>\n                            </div>\n                    </div>\n                }\n                @if(profile.showPrint) {\n                    @if(active === \"Print\") {\n                        <div class=\"print-config\">\n                            <img \n                                [src]=\"printBase64\" \n                                class=\"compact-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        }\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                        <button\n                            (click)=\"toggleItemInfo(item, $event)\">\n                            <mat-icon class=\"button-icon\">info_outline</mat-icon>\n                        </button>\n                    </div>     \n                    @if (item.showMetadata) {\n                        <div class=\"metadata-panel\">\n                            @for(feature of item.metadata; track feature) {\n                                <div class=\"feature-item\">\n                                    <div *ngFor=\"let kv of (feature | keyvalue)\">\n                                        {{ kv.value.name }}:\n                                        <ng-container [ngSwitch]=\"kv.value.kind\">\n                                            <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n                                            <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n                                                {{ kv.key }}\n                                                <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                                            </a>\n                                            <span *ngSwitchDefault>{{ kv.value.data }}</span>\n                                        </ng-container>\n                                    </div>\n                                </div>\n                            }\n                        </div>\n                    }\n                </div>\n            </mat-option>\n        </div>\n    }\n    @if ((activeMode === \"search-point\" || activeMode === \"search-polygon\") && filteredResults.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n                <span class=\"result-title\">\n                {{ result.title }} ({{result.items.length}} af {{ result.total }})\n                </span>\n                <div  (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                 </div>\n            </mat-option>\n        </div>\n    }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;left:1em;top:10em;z-index:10;cursor:grab;max-width:95vw}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px;border:white;border-width:2px}::ng-deep .geometry-search-panel{border-radius:5px!important;max-height:320px!important;background:color-mix(in srgb,#000 85%,transparent)!important;box-shadow:0 8px 24px #00000026!important;margin-top:10px;overflow-y:auto!important;padding:8px!important;max-width:430px}::ng-deep .geometry-search-panel .buffer-item{align-items:end}::ng-deep .geometry-search-panel .buffer-item input{width:45px;margin:5px}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-wrap:wrap;margin:5px}::ng-deep .geometry-search-panel .search-result-item .item-left{display:flex;align-items:center;gap:3px;flex:1;min-width:0}::ng-deep .geometry-search-panel .search-result-item .item-right{display:flex;align-items:center;flex:1;justify-content:flex-end;min-width:0;margin-left:10px}::ng-deep .geometry-search-panel .search-result-item .item-right .custom-image-icon{background:#fff!important;margin-left:5px}::ng-deep .geometry-search-panel .search-result-item .item-right button{width:38px;margin-left:5px}::ng-deep .geometry-search-panel .search-result-item .metadata-panel{flex-basis:98%}::ng-deep .geometry-search-panel::-webkit-scrollbar{width:12px}::ng-deep .geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .geometry-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:#fff;line-height:1.5}::ng-deep .geometry-search-panel mat-label{color:#fff}.drag-handle-toolbox{display:flex;align-items:center;justify-content:space-between;background:#292a2d;padding:2px 8px;cursor:grab;gap:8px;border-radius:5px 5px 0 0;color:#fff}.drag-handle-toolbox mat-icon{color:#fff;font-size:18px;width:18px;height:18px}.drag-handle-toolbox mat-icon:first-child{flex:1;text-align:left}.right-icons{display:flex;align-items:center;gap:6px}.left-icon{flex-shrink:0}.toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.toggle-icon:hover{color:#fff;background:#ffffff26}.toggle-icon:active{background:#ffffff40}: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%;gap:10px;background:#292a2d;box-shadow:#0000004d 0 1px 4px -1px;padding:10px;width:auto;min-width:32px;transition:all .3s ease;cursor:default;border-radius:0 0 5px 5px}.toolbox-container.collapsed{display:none}.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}.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;gap:6px;flex-wrap:nowrap}.main-tools ::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:12px;font-weight:500;color:#fff}.geometry-selector{width:100%}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:6px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:color-mix(in srgb,#000 60%,transparent);transition:all .2s ease}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:color-mix(in srgb,#000 70%,transparent);border-color:#667eea;box-shadow:0 4px 12px #0003}.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;transform:scale(.85)}.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:color-mix(in srgb,#000 100%,transparent)!important;border:none!important;border-radius:8px!important;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014!important;margin-top:6px!important;padding:4px 0!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:14px!important;min-height:36px!important;padding:8px 14px!important;transition:all .15s ease!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover:not(.mat-mdc-option-disabled){background:#444849!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-active{background:color-mix(in srgb,#000 60%,transparent)!important;color:#fff!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;font-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.geometry-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap;background:color-mix(in srgb,#000 20%,transparent);border-radius:8px;padding:4px 8px;border:1px solid rgba(255,255,255,.1)}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}.measurement-tools .compact-icon,.print-tools .compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.measurement-tools .compact-icon.custom-image-icon,.print-tools .compact-icon.custom-image-icon{padding:4px;background:none;border:1px solid rgba(255,255,255,.2)}.measurement-tools .compact-icon.custom-image-icon img,.print-tools .compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.measurement-tools .compact-icon.custom-image-icon.active,.print-tools .compact-icon.custom-image-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985);border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.measurement-tools .compact-icon.custom-image-icon.active img,.print-tools .compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.measurement-tools .compact-icon.custom-image-icon.active:hover,.print-tools .compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active),.print-tools .compact-icon.custom-image-icon:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e94d}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active) img,.print-tools .compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.print-tools .compact-icon{background:linear-gradient(147.38deg,#4f46e5,#3730a3);color:#fff;border:1px solid rgba(255,255,255,.2)}.print-tools .compact-icon.print-icon{background:linear-gradient(147.38deg,#10b981,#047857)}.print-tools .compact-icon.draw-icon{background:linear-gradient(147.38deg,#f59e0b,#d97706)}.print-tools .compact-icon.active{background:linear-gradient(147.38deg,#ef4444,#dc2626);box-shadow:0 4px 12px #ef444466;border-color:transparent;transform:scale(1.05)}.print-tools .compact-icon.active:hover{box-shadow:0 6px 20px #ef444480;transform:scale(1.08)}.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);margin:0 4px}.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:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:color-mix(in srgb,#000 40%,transparent);border:1px solid rgba(255,255,255,.2);box-shadow:0 1px 2px #0000001a;flex-shrink:0}.compact-icon.active{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;box-shadow:0 8px 25px #667eea4d;transform:scale(1.05)}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66;transform:scale(1.08)}.compact-icon:hover:not(.active){color:#fff;background:color-mix(in srgb,#000 70%,transparent);border-color:#667eea;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:0;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:transform .2s ease}.compact-icon.custom-image-icon.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1);transform:scale(1.1)}.compact-icon.custom-image-icon:hover:not(.active) img{transform:scale(1.05)}.wkt-section{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:6px;background:color-mix(in srgb,#000 60%,transparent);color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;letter-spacing:.4px;min-height:32px;display:flex;align-items:center;justify-content:center;flex:1;box-shadow:0 1px 2px #0000000d}.compact-button.primary.active{background:linear-gradient(135deg,#667eea,#764ba2);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:none;border-radius:6px;font-size:13px;transition:all .2s ease;background:color-mix(in srgb,#000 60%,transparent);color:#fff}.compact-input:focus{outline:none;border-color:#1976d2;background:color-mix(in srgb,#000 70%,transparent);box-shadow:0 0 0 3px #1976d233}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:color-mix(in srgb,#000 40%,transparent);border-radius:8px;border:1px solid rgba(255,255,255,.1);animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:color-mix(in srgb,#000 60%,transparent);border:1px solid rgba(255,255,255,.2);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;border-color:#0ea5e9;box-shadow:0 0 0 2px #0ea5e933}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:color-mix(in srgb,#000 98%,transparent)!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:linear-gradient(147.38deg,#10b981,#047857);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}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%{box-shadow:0 0 #667eeab3}70%{box-shadow:0 0 0 6px #667eea00}to{box-shadow:0 0 #667eea00}}.compact-icon.active{animation:pulse 2s infinite}@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 6px}.geometry-selector{width:100%;margin-bottom:8px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:28px;min-height:28px;padding:0 8px;font-size:12px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:12px}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 2em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config,.print-draw-config{flex-direction:column;align-items:stretch;gap:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:11px;padding:4px 8px;height:28px;min-height:28px}.print-config input,.print-draw-config input{width:50px}.print-config button,.print-draw-config button{padding:4px 8px;font-size:11px;height:28px}.wkt-section .compact-input{font-size:12px;padding:6px 8px}.wkt-section .compact-button{font-size:11px;padding:5px 8px;min-height:28px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:11px!important}}@media (max-width: 480px){.toolbox-wrapper{left:.25em;top:6em;transform-origin:left top;max-width:calc(100vw - .5em)}.drag-handle-toolbox{padding:2px 4px;gap:4px}.drag-handle-toolbox mat-icon{font-size:14px;width:14px;height:14px}.toggle-icon{font-size:14px!important;width:14px!important;height:14px!important}.toolbox-container{padding:6px;min-width:24px}.toolbox-content{gap:8px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;letter-spacing:.2px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle{transform:scale(.9)}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToolboxComponent, isStandalone: true, selector: "map-toolbox", inputs: { map: "map", showMeasureDistance: "showMeasureDistance", showMeasureArea: "showMeasureArea", collapsed: "collapsed", settings: "settings", profile: "profile", WKTInputEnabled: "WKTInputEnabled", deleteEnabled: "deleteEnabled" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toolbox-wrapper\" \n     cdkDrag \n     cdkDragBoundary=\".map-container\"\n     [cdkDragFreeDragPosition]=\"dragPosition\"\n     (cdkDragEnded)=\"onDragEnded($event)\">\n     <div class=\"drag-handle-toolbox\" cdkDragHandle>\n        <mat-icon class=\"left-icon\">handyman</mat-icon>\n    \n        <div class=\"right-icons\">\n            <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n            <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n                {{ collapsed ? 'flip_to_front' : 'remove' }}\n            </mat-icon>\n        </div>\n    </div>\n    \n    <div class=\"toolbox-container\" [class.collapsed]=\"collapsed\">\n        @if(!collapsed) {\n            <div class=\"toolbox-content\">\n                <div class=\"all-tools-container\">\n                    <div class=\"main-tools\">\n                        @if(!settings?.undoDisabled) {\n                            <img \n                                [src]=\"undoIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"undo()\" \n                                matTooltip=\"Fortryd\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Undo\">\n\n                            <img \n                                [src]=\"redoIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"redo()\" \n                                matTooltip=\"Gendan\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Redo\">\n                        }\n                        <mat-icon \n                            class=\"compact-icon\"                             \n                            (click)=\"startShowInfo()\"\n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"Vis info\" \n                            matTooltipPosition=\"below\">\n                            info\n                        </mat-icon>\n                        <mat-icon \n                            class=\"compact-icon\" \n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"S\u00F8g punkt\" \n                            matTooltipPosition=\"below\"\n                            (click)=\"togglePointSearch()\">adjust\n                        </mat-icon>\n                        <mat-icon \n                            class=\"compact-icon\" \n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"S\u00F8g polygon\" \n                            matTooltipPosition=\"below\"\n                            (click)=\"togglePolygonSearch()\">crop_din\n                        </mat-icon>\n                        <mat-icon\n                            class=\"compact-icon\"                             \n                            (click)=\"startSelectFeatureHighlight()\"\n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"Fremh\u00E6v\" \n                            matTooltipPosition=\"below\"\n                        >star</mat-icon> // TODO: set correct icon for this\n\n                        <mat-slide-toggle [(ngModel)]=\"snap\" (change)=\"onSnapChange()\">Snap</mat-slide-toggle>\n                        @if(settings.editEnabled) {\n                            <img \n                                [src]=\"editIconBase64\" \n                                [class.active]=\"activeMode === 'edit'\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startEdit()\" \n                                matTooltip=\"Rediger\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Rediger\">\n\n                            <img \n                                [src]=\"removePointsIconBase64\" \n                                [class.active]=\"activeMode === 'edit-remove'\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startEditRemovePoints()\" \n                                matTooltip=\"Fjern punkter\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Fjern punkter\">\n                        }\n                        @if(settings.cutHoleEnabled) {\n                            <img \n                                [src]=\"trimIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'clip-hole'\" \n                                (click)=\"clipHole()\" \n                                matTooltip=\"Klip hul\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Klip hul\">\n                        }\n                        @if(settings.splitEnabled) {\n                            <img \n                                [src]=\"splitIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'split'\"\n                                (click)=\"split()\" \n                                matTooltip=\"Sk\u00E6r over\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Sk\u00E6r over\">\n                        }\n                        @if(settings.changeTypeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                [class.active]=\"activeMode === 'change-type'\" \n                                (click)=\"startChangeType()\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Skift type\" \n                                matTooltipPosition=\"below\">\n                                find_replace\n                            </mat-icon>\n                        }\n                        @if(settings.mergeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                (click)=\"startMergeFeatures()\" \n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Saml flader\" \n                                [class.active]=\"activeMode === 'merge-features'\">\n                                merge\n                            </mat-icon>\n                        }\n                        @if(settings.centerPoint) {\n                            <mat-icon\n                                (click)=\"setCenterPoint()\"\n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"S\u00E6t centerpunkt\" \n                                [class.active]=\"activeMode === 'center-point'\"\n                            >adjust</mat-icon>\n                        }\n                    </div>\n                    <div class=\"geometry-tools\">\n                        <img \n                            [src]=\"featureSearchIconBase64\" \n                            [class.active]=\"activeMode === 'search-feature'\"\n                            class=\"compact-icon primary custom-image-icon\"\n                            (click)=\"toggleFeatureSearch()\" \n                            matTooltip=\"Udpegede objekter\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Punkt\">\n\n                        <img \n                            [src]=\"polygonIconBase64\" \n                            [class.active]=\"activeMode === 'draw-polygon'\"\n                            class=\"compact-icon primary custom-image-icon\"\n                            (click)=\"startDrawPolygon()\" \n                            matTooltip=\"Polygon\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Polygon\">\n                        <img \n                            [src]=\"lineStringIconBase64\" \n                            [class.active]=\"activeMode === 'draw-linestring'\"\n                            class=\"compact-icon primary custom-image-icon\"\n                            (click)=\"startDrawLineString()\" \n                            matTooltip=\"LineString\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"LineString\">\n                        \n                        @if(selectedGeometrySetting && selectedGeometrySetting.icons && selectedGeometrySetting.icons.length > 0) {\n                            @for(iconUrl of selectedGeometrySetting.icons;track iconUrl) {\n                                <img \n                                    [src]=\"iconUrl\" \n                                    [class.active]=\"activeMode === 'draw-point'\"\n                                    class=\"compact-icon primary custom-image-icon\"\n                                    (click)=\"startDrawPointUrl(iconUrl)\" \n                                    matTooltip=\"Punkter\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Punkter\">}\n                        } @else {\n                            <img \n                                [src]=\"pointIconBase64\" \n                                [class.active]=\"activeMode === 'draw-point'\"\n                                class=\"compact-icon primary custom-image-icon\"\n                                (click)=\"startDrawPoint()\" \n                                matTooltip=\"Punkter\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Punkter\">\n                        }\n                        <img \n                            [src]=\"wktIconBase64\" \n                            class=\"compact-icon secondary custom-image-icon\"\n                            (click)=\"activateShowInputWKT()\" \n                            matTooltip=\"WKT\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"WKT\">\n                    </div>\n                    <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n                    <div class=\"measurement-print-tools\">\n                        <div class=\"measurement-tools\">\n                            @if (deleteEnabled) {\n                                <img \n                                    [src]=\"deleteIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'delete'\"\n                                    (click)=\"startDelete()\" \n                                    matTooltip=\"Slet\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Slet\">\n                            }\n                            @if (showMeasureDistance) {\n                                <img \n                                    [src]=\"measureDistanceIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'measure-distance'\"\n                                    (click)=\"startMeasureLength()\" \n                                    matTooltip=\"M\u00E5le afstand\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"M\u00E5le afstand\">\n                            }\n                            @if(showMeasureArea) {\n                                <img \n                                    [src]=\"measureAreaIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'measure-area'\"\n                                    (click)=\"startMeasureArea()\" \n                                    matTooltip=\"M\u00E5le areal\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"M\u00E5le areal\">\n                            }\n                        </div>\n                        @if(profile.showPrint) {\n                            <div class=\"tool-separator print-separator\"></div>\n                            <div class=\"print-tools\">\n                                <img \n                                    [src]=\"printBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"active === 'Print'\"\n                                    (click)=\"startPrintMode()\" \n                                    matTooltip=\"Udskriv\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Udskriv\">\n                                <img \n                                    [src]=\"drawBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"active === 'Draw'\"\n                                    (click)=\"startDrawMode()\" \n                                    matTooltip=\"Tegn\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Tegn\">\n                            </div>\n                        }\n                    </div>\n                </div>\n                @if(showInputWKT) {\n                    <div class=\"wkt-section\">\n                        <input class=\"compact-input\" [(ngModel)]=\"WKTString\">\n                            <div class=\"wkt-actions\">\n                                <button class=\"compact-button primary\" (click)=\"ReadWKT()\">Indl\u00E6s WKT</button>\n                                <button class=\"compact-button\" (click)=\"cancelWKT()\">Annuller</button>\n                            </div>\n                    </div>\n                }\n                @if(profile.showPrint) {\n                    @if(active === \"Print\") {\n                        <div class=\"print-config\">\n                            <img \n                                [src]=\"printBase64\" \n                                class=\"compact-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 (showGeometryTypes && filteredGeometryTypeSettings.length > 0) {\n                <mat-select class=\"geometry-selector\" (selectionChange)=\"settingsChanged($event)\" [(ngModel)]=\"selectedGeometrySetting\" [compareWith]=\"compareGeometrySetting\">\n                    @for (setting of filteredGeometryTypeSettings; track setting) {\n                        <mat-option [value]=\"setting\">{{setting.typeName}}</mat-option>\n                    }\n                </mat-select>            \n            }\n        }\n    </div>\n    @if (activeMode === 'search-feature' && filteredResults.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <div class=\"buffer-item\">\n                <mat-label>Buffer</mat-label>\n                <input matInput type=\"number\" name=\"buffer\" [(ngModel)]=\"bufferInMeters\">\n                <mat-label>m</mat-label>\n            </div>\n            <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n                <span class=\"result-title\">\n                {{ result.title }} ({{result.items.length}} af {{ result.total }})\n                </span>\n                <div  (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                    <div class=\"item-right\">\n                        <img \n                            [src]=\"objectSearchCopyIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"addToActiveObjectsList(item, $event)\" \n                            matTooltip=\"Kopier\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Kopier\">\n                        <img \n                            [src]=\"objectSearchCutIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"cutBySearchedObject(item, $event)\" \n                            matTooltip=\"Fjern\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Fjern\">\n                        <img \n                            [src]=\"objectSearchCutIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"splitBySearchedObject(item, $event)\" \n                            matTooltip=\"Opsk\u00E6r\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Opsk\u00E6r\">\n                        <img \n                            [src]=\"objectSearchCopyWithBufferIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"addToActiveObjectsList(item, $event, true)\" \n                            matTooltip=\"Kopier med buffer\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Kopier med buffer\">\n                        <img \n                            [src]=\"objectSearchZoomIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"zoomSearchedObject(item, $event)\" \n                            matTooltip=\"Zoom\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Zoom\">\n                        <button\n                            (click)=\"toggleItemInfo(item, $event)\">\n                            <mat-icon class=\"button-icon\">info_outline</mat-icon>\n                        </button>\n                    </div>     \n                    @if (item.showMetadata) {\n                        <div class=\"metadata-panel\">\n                            @for(feature of item.metadata; track feature) {\n                                <div class=\"feature-item\">\n                                    <div *ngFor=\"let kv of (feature | keyvalue)\">\n                                        {{ kv.value.name }}:\n                                        <ng-container [ngSwitch]=\"kv.value.kind\">\n                                            <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n                                            <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n                                                {{ kv.key }}\n                                                <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                                            </a>\n                                            <span *ngSwitchDefault>{{ kv.value.data }}</span>\n                                        </ng-container>\n                                    </div>\n                                </div>\n                            }\n                        </div>\n                    }\n                </div>\n            </mat-option>\n        </div>\n    }\n    @if ((activeMode === \"search-point\" || activeMode === \"search-polygon\") && filteredResults.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n                <span class=\"result-title\">\n                {{ result.title }} ({{result.items.length}} af {{ result.total }})\n                </span>\n                <div  (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                 </div>\n            </mat-option>\n        </div>\n    }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;left:1em;top:10em;z-index:10;cursor:grab;max-width:95vw}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px;border:white;border-width:2px}::ng-deep .geometry-search-panel{border-radius:5px!important;max-height:320px!important;background:color-mix(in srgb,#000 85%,transparent)!important;box-shadow:0 8px 24px #00000026!important;margin-top:10px;overflow-y:auto!important;padding:8px!important;max-width:430px}::ng-deep .geometry-search-panel .buffer-item{align-items:end}::ng-deep .geometry-search-panel .buffer-item input{width:45px;margin:5px}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-wrap:wrap;margin:5px}::ng-deep .geometry-search-panel .search-result-item .item-left{display:flex;align-items:center;gap:3px;flex:1;min-width:0}::ng-deep .geometry-search-panel .search-result-item .item-right{display:flex;align-items:center;flex:1;justify-content:flex-end;min-width:0;margin-left:10px}::ng-deep .geometry-search-panel .search-result-item .item-right .custom-image-icon{background:#fff!important;margin-left:5px}::ng-deep .geometry-search-panel .search-result-item .item-right button{width:38px;margin-left:5px}::ng-deep .geometry-search-panel .search-result-item .metadata-panel{flex-basis:98%}::ng-deep .geometry-search-panel::-webkit-scrollbar{width:12px}::ng-deep .geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .geometry-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:#fff;line-height:1.5}::ng-deep .geometry-search-panel mat-label{color:#fff}.drag-handle-toolbox{display:flex;align-items:center;justify-content:space-between;background:#292a2d;padding:2px 8px;cursor:grab;gap:8px;border-radius:5px 5px 0 0;color:#fff}.drag-handle-toolbox mat-icon{color:#fff;font-size:18px;width:18px;height:18px}.drag-handle-toolbox mat-icon:first-child{flex:1;text-align:left}.right-icons{display:flex;align-items:center;gap:6px}.left-icon{flex-shrink:0}.toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.toggle-icon:hover{color:#fff;background:#ffffff26}.toggle-icon:active{background:#ffffff40}: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%;gap:10px;background:#292a2d;box-shadow:#0000004d 0 1px 4px -1px;padding:10px;width:auto;min-width:32px;transition:all .3s ease;cursor:default;border-radius:0 0 5px 5px}.toolbox-container.collapsed{display:none}.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}.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;gap:6px;flex-wrap:nowrap}.main-tools ::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:12px;font-weight:500;color:#fff}.geometry-selector{width:100%}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:6px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:color-mix(in srgb,#000 60%,transparent);transition:all .2s ease}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:color-mix(in srgb,#000 70%,transparent);border-color:#667eea;box-shadow:0 4px 12px #0003}.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;transform:scale(.85)}.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:color-mix(in srgb,#000 100%,transparent)!important;border:none!important;border-radius:8px!important;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014!important;margin-top:6px!important;padding:4px 0!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:14px!important;min-height:36px!important;padding:8px 14px!important;transition:all .15s ease!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover:not(.mat-mdc-option-disabled){background:#444849!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-active{background:color-mix(in srgb,#000 60%,transparent)!important;color:#fff!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;font-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.geometry-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap;background:color-mix(in srgb,#000 20%,transparent);border-radius:8px;padding:4px 8px;border:1px solid rgba(255,255,255,.1)}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}.measurement-tools .compact-icon,.print-tools .compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.measurement-tools .compact-icon.custom-image-icon,.print-tools .compact-icon.custom-image-icon{padding:4px;background:none;border:1px solid rgba(255,255,255,.2)}.measurement-tools .compact-icon.custom-image-icon img,.print-tools .compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.measurement-tools .compact-icon.custom-image-icon.active,.print-tools .compact-icon.custom-image-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985);border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.measurement-tools .compact-icon.custom-image-icon.active img,.print-tools .compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.measurement-tools .compact-icon.custom-image-icon.active:hover,.print-tools .compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active),.print-tools .compact-icon.custom-image-icon:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e94d}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active) img,.print-tools .compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.print-tools .compact-icon{background:linear-gradient(147.38deg,#4f46e5,#3730a3);color:#fff;border:1px solid rgba(255,255,255,.2)}.print-tools .compact-icon.print-icon{background:linear-gradient(147.38deg,#10b981,#047857)}.print-tools .compact-icon.draw-icon{background:linear-gradient(147.38deg,#f59e0b,#d97706)}.print-tools .compact-icon.active{background:linear-gradient(147.38deg,#ef4444,#dc2626);box-shadow:0 4px 12px #ef444466;border-color:transparent;transform:scale(1.05)}.print-tools .compact-icon.active:hover{box-shadow:0 6px 20px #ef444480;transform:scale(1.08)}.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);margin:0 4px}.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:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:color-mix(in srgb,#000 40%,transparent);border:1px solid rgba(255,255,255,.2);box-shadow:0 1px 2px #0000001a;flex-shrink:0}.compact-icon.active{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;box-shadow:0 8px 25px #667eea4d;transform:scale(1.05)}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66;transform:scale(1.08)}.compact-icon:hover:not(.active){color:#fff;background:color-mix(in srgb,#000 70%,transparent);border-color:#667eea;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:0;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:transform .2s ease}.compact-icon.custom-image-icon.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1);transform:scale(1.1)}.compact-icon.custom-image-icon:hover:not(.active) img{transform:scale(1.05)}.wkt-section{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:6px;background:color-mix(in srgb,#000 60%,transparent);color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;letter-spacing:.4px;min-height:32px;display:flex;align-items:center;justify-content:center;flex:1;box-shadow:0 1px 2px #0000000d}.compact-button.primary.active{background:linear-gradient(135deg,#667eea,#764ba2);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:none;border-radius:6px;font-size:13px;transition:all .2s ease;background:color-mix(in srgb,#000 60%,transparent);color:#fff}.compact-input:focus{outline:none;border-color:#1976d2;background:color-mix(in srgb,#000 70%,transparent);box-shadow:0 0 0 3px #1976d233}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:color-mix(in srgb,#000 40%,transparent);border-radius:8px;border:1px solid rgba(255,255,255,.1);animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:color-mix(in srgb,#000 60%,transparent);border:1px solid rgba(255,255,255,.2);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;border-color:#0ea5e9;box-shadow:0 0 0 2px #0ea5e933}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:color-mix(in srgb,#000 98%,transparent)!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:linear-gradient(147.38deg,#10b981,#047857);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}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%{box-shadow:0 0 #667eeab3}70%{box-shadow:0 0 0 6px #667eea00}to{box-shadow:0 0 #667eea00}}.compact-icon.active{animation:pulse 2s infinite}@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 6px}.geometry-selector{width:100%;margin-bottom:8px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:28px;min-height:28px;padding:0 8px;font-size:12px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:12px}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 2em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config,.print-draw-config{flex-direction:column;align-items:stretch;gap:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:11px;padding:4px 8px;height:28px;min-height:28px}.print-config input,.print-draw-config input{width:50px}.print-config button,.print-draw-config button{padding:4px 8px;font-size:11px;height:28px}.wkt-section .compact-input{font-size:12px;padding:6px 8px}.wkt-section .compact-button{font-size:11px;padding:5px 8px;min-height:28px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:11px!important}}@media (max-width: 480px){.toolbox-wrapper{left:.25em;top:6em;transform-origin:left top;max-width:calc(100vw - .5em)}.drag-handle-toolbox{padding:2px 4px;gap:4px}.drag-handle-toolbox mat-icon{font-size:14px;width:14px;height:14px}.toggle-icon{font-size:14px!important;width:14px!important;height:14px!important}.toolbox-container{padding:6px;min-width:24px}.toolbox-content{gap:8px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;letter-spacing:.2px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle{transform:scale(.9)}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "component", type: i6$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i5.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i9.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToolboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'map-toolbox', imports: [FormsModule, CommonModule, MatIconModule, MatOptionModule, MatSelectModule, DragDropModule, MatTooltipModule, MatSlideToggleModule], template: "<div class=\"toolbox-wrapper\" \n     cdkDrag \n     cdkDragBoundary=\".map-container\"\n     [cdkDragFreeDragPosition]=\"dragPosition\"\n     (cdkDragEnded)=\"onDragEnded($event)\">\n     <div class=\"drag-handle-toolbox\" cdkDragHandle>\n        <mat-icon class=\"left-icon\">handyman</mat-icon>\n    \n        <div class=\"right-icons\">\n            <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n            <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n                {{ collapsed ? 'flip_to_front' : 'remove' }}\n            </mat-icon>\n        </div>\n    </div>\n    \n    <div class=\"toolbox-container\" [class.collapsed]=\"collapsed\">\n        @if(!collapsed) {\n            <div class=\"toolbox-content\">\n                @if (showGeometryTypes && filteredGeometryTypeSettings.length > 0) {\n                    <mat-select class=\"geometry-selector\" (selectionChange)=\"settingsChanged($event)\" [(ngModel)]=\"selectedGeometrySetting\" [compareWith]=\"compareGeometrySetting\">\n                        @for (setting of filteredGeometryTypeSettings; track setting) {\n                            <mat-option [value]=\"setting\">{{setting.typeName}}</mat-option>\n                        }\n                    </mat-select>            \n                }\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                        <mat-icon \n                            class=\"compact-icon\"                             \n                            (click)=\"startShowInfo()\"\n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"Vis info\" \n                            matTooltipPosition=\"below\">\n                            info\n                        </mat-icon>\n                        <mat-icon \n                            class=\"compact-icon\" \n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"S\u00F8g punkt\" \n                            matTooltipPosition=\"below\"\n                            (click)=\"togglePointSearch()\">adjust\n                        </mat-icon>\n                        <mat-icon \n                            class=\"compact-icon\" \n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"S\u00F8g polygon\" \n                            matTooltipPosition=\"below\"\n                            (click)=\"togglePolygonSearch()\">crop_din\n                        </mat-icon>\n                        <mat-icon\n                            class=\"compact-icon\"                             \n                            (click)=\"startSelectFeatureHighlight()\"\n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"Fremh\u00E6v\" \n                            matTooltipPosition=\"below\"\n                        >star</mat-icon> // TODO: set correct icon for this\n\n                        <mat-slide-toggle [(ngModel)]=\"snap\" (change)=\"onSnapChange()\">Snap</mat-slide-toggle>\n                        @if(settings.editEnabled) {\n                            <img \n                                [src]=\"editIconBase64\" \n                                [class.active]=\"activeMode === 'edit'\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startEdit()\" \n                                matTooltip=\"Rediger\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Rediger\">\n\n                            <img \n                                [src]=\"removePointsIconBase64\" \n                                [class.active]=\"activeMode === 'edit-remove'\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startEditRemovePoints()\" \n                                matTooltip=\"Fjern punkter\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Fjern punkter\">\n                        }\n                        @if(settings.cutHoleEnabled) {\n                            <img \n                                [src]=\"trimIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'clip-hole'\" \n                                (click)=\"clipHole()\" \n                                matTooltip=\"Klip hul\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Klip hul\">\n                        }\n                        @if(settings.splitEnabled) {\n                            <img \n                                [src]=\"splitIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'split'\"\n                                (click)=\"split()\" \n                                matTooltip=\"Sk\u00E6r over\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Sk\u00E6r over\">\n                        }\n                        @if(settings.changeTypeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                [class.active]=\"activeMode === 'change-type'\" \n                                (click)=\"startChangeType()\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Skift type\" \n                                matTooltipPosition=\"below\">\n                                find_replace\n                            </mat-icon>\n                        }\n                        @if(settings.mergeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                (click)=\"startMergeFeatures()\" \n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Saml flader\" \n                                [class.active]=\"activeMode === 'merge-features'\">\n                                merge\n                            </mat-icon>\n                        }\n                        @if(settings.centerPoint) {\n                            <mat-icon\n                                (click)=\"setCenterPoint()\"\n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"S\u00E6t centerpunkt\" \n                                [class.active]=\"activeMode === 'center-point'\"\n                            >adjust</mat-icon>\n                        }\n                    </div>\n                    <div class=\"geometry-tools\">\n                        <img \n                            [src]=\"featureSearchIconBase64\" \n                            [class.active]=\"activeMode === 'search-feature'\"\n                            class=\"compact-icon primary custom-image-icon\"\n                            (click)=\"toggleFeatureSearch()\" \n                            matTooltip=\"Udpegede objekter\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Punkt\">\n\n                        <img \n                            [src]=\"polygonIconBase64\" \n                            [class.active]=\"activeMode === 'draw-polygon'\"\n                            class=\"compact-icon primary custom-image-icon\"\n                            (click)=\"startDrawPolygon()\" \n                            matTooltip=\"Polygon\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Polygon\">\n                        <img \n                            [src]=\"lineStringIconBase64\" \n                            [class.active]=\"activeMode === 'draw-linestring'\"\n                            class=\"compact-icon primary custom-image-icon\"\n                            (click)=\"startDrawLineString()\" \n                            matTooltip=\"LineString\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"LineString\">\n                        \n                        @if(selectedGeometrySetting && selectedGeometrySetting.icons && selectedGeometrySetting.icons.length > 0) {\n                            @for(iconUrl of selectedGeometrySetting.icons;track iconUrl) {\n                                <img \n                                    [src]=\"iconUrl\" \n                                    [class.active]=\"activeMode === 'draw-point'\"\n                                    class=\"compact-icon primary custom-image-icon\"\n                                    (click)=\"startDrawPointUrl(iconUrl)\" \n                                    matTooltip=\"Punkter\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Punkter\">}\n                        } @else {\n                            <img \n                                [src]=\"pointIconBase64\" \n                                [class.active]=\"activeMode === 'draw-point'\"\n                                class=\"compact-icon primary custom-image-icon\"\n                                (click)=\"startDrawPoint()\" \n                                matTooltip=\"Punkter\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Punkter\">\n                        }\n                        <img \n                            [src]=\"wktIconBase64\" \n                            class=\"compact-icon secondary custom-image-icon\"\n                            (click)=\"activateShowInputWKT()\" \n                            matTooltip=\"WKT\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"WKT\">\n                    </div>\n                    <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n                    <div class=\"measurement-print-tools\">\n                        <div class=\"measurement-tools\">\n                            @if (deleteEnabled) {\n                                <img \n                                    [src]=\"deleteIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'delete'\"\n                                    (click)=\"startDelete()\" \n                                    matTooltip=\"Slet\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Slet\">\n                            }\n                            @if (showMeasureDistance) {\n                                <img \n                                    [src]=\"measureDistanceIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'measure-distance'\"\n                                    (click)=\"startMeasureLength()\" \n                                    matTooltip=\"M\u00E5le afstand\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"M\u00E5le afstand\">\n                            }\n                            @if(showMeasureArea) {\n                                <img \n                                    [src]=\"measureAreaIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'measure-area'\"\n                                    (click)=\"startMeasureArea()\" \n                                    matTooltip=\"M\u00E5le areal\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"M\u00E5le areal\">\n                            }\n                        </div>\n                        @if(profile.showPrint) {\n                            <div class=\"tool-separator print-separator\"></div>\n                            <div class=\"print-tools\">\n                                <img \n                                    [src]=\"printBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"active === 'Print'\"\n                                    (click)=\"startPrintMode()\" \n                                    matTooltip=\"Udskriv\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Udskriv\">\n                                <img \n                                    [src]=\"drawBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"active === 'Draw'\"\n                                    (click)=\"startDrawMode()\" \n                                    matTooltip=\"Tegn\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Tegn\">\n                            </div>\n                        }\n                    </div>\n                </div>\n                @if(showInputWKT) {\n                    <div class=\"wkt-section\">\n                        <input class=\"compact-input\" [(ngModel)]=\"WKTString\">\n                            <div class=\"wkt-actions\">\n                                <button class=\"compact-button primary\" (click)=\"ReadWKT()\">Indl\u00E6s WKT</button>\n                                <button class=\"compact-button\" (click)=\"cancelWKT()\">Annuller</button>\n                            </div>\n                    </div>\n                }\n                @if(profile.showPrint) {\n                    @if(active === \"Print\") {\n                        <div class=\"print-config\">\n                            <img \n                                [src]=\"printBase64\" \n                                class=\"compact-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        }\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                        <button\n                            (click)=\"toggleItemInfo(item, $event)\">\n                            <mat-icon class=\"button-icon\">info_outline</mat-icon>\n                        </button>\n                    </div>     \n                    @if (item.showMetadata) {\n                        <div class=\"metadata-panel\">\n                            @for(feature of item.metadata; track feature) {\n                                <div class=\"feature-item\">\n                                    <div *ngFor=\"let kv of (feature | keyvalue)\">\n                                        {{ kv.value.name }}:\n                                        <ng-container [ngSwitch]=\"kv.value.kind\">\n                                            <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n                                            <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n                                                {{ kv.key }}\n                                                <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                                            </a>\n                                            <span *ngSwitchDefault>{{ kv.value.data }}</span>\n                                        </ng-container>\n                                    </div>\n                                </div>\n                            }\n                        </div>\n                    }\n                </div>\n            </mat-option>\n        </div>\n    }\n    @if ((activeMode === \"search-point\" || activeMode === \"search-polygon\") && filteredResults.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n                <span class=\"result-title\">\n                {{ result.title }} ({{result.items.length}} af {{ result.total }})\n                </span>\n                <div  (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                 </div>\n            </mat-option>\n        </div>\n    }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;left:1em;top:10em;z-index:10;cursor:grab;max-width:95vw}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px;border:white;border-width:2px}::ng-deep .geometry-search-panel{border-radius:5px!important;max-height:320px!important;background:color-mix(in srgb,#000 85%,transparent)!important;box-shadow:0 8px 24px #00000026!important;margin-top:10px;overflow-y:auto!important;padding:8px!important;max-width:430px}::ng-deep .geometry-search-panel .buffer-item{align-items:end}::ng-deep .geometry-search-panel .buffer-item input{width:45px;margin:5px}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-wrap:wrap;margin:5px}::ng-deep .geometry-search-panel .search-result-item .item-left{display:flex;align-items:center;gap:3px;flex:1;min-width:0}::ng-deep .geometry-search-panel .search-result-item .item-right{display:flex;align-items:center;flex:1;justify-content:flex-end;min-width:0;margin-left:10px}::ng-deep .geometry-search-panel .search-result-item .item-right .custom-image-icon{background:#fff!important;margin-left:5px}::ng-deep .geometry-search-panel .search-result-item .item-right button{width:38px;margin-left:5px}::ng-deep .geometry-search-panel .search-result-item .metadata-panel{flex-basis:98%}::ng-deep .geometry-search-panel::-webkit-scrollbar{width:12px}::ng-deep .geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .geometry-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:#fff;line-height:1.5}::ng-deep .geometry-search-panel mat-label{color:#fff}.drag-handle-toolbox{display:flex;align-items:center;justify-content:space-between;background:#292a2d;padding:2px 8px;cursor:grab;gap:8px;border-radius:5px 5px 0 0;color:#fff}.drag-handle-toolbox mat-icon{color:#fff;font-size:18px;width:18px;height:18px}.drag-handle-toolbox mat-icon:first-child{flex:1;text-align:left}.right-icons{display:flex;align-items:center;gap:6px}.left-icon{flex-shrink:0}.toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.toggle-icon:hover{color:#fff;background:#ffffff26}.toggle-icon:active{background:#ffffff40}: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%;gap:10px;background:#292a2d;box-shadow:#0000004d 0 1px 4px -1px;padding:10px;width:auto;min-width:32px;transition:all .3s ease;cursor:default;border-radius:0 0 5px 5px}.toolbox-container.collapsed{display:none}.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}.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;gap:6px;flex-wrap:nowrap}.main-tools ::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:12px;font-weight:500;color:#fff}.geometry-selector{width:100%}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:6px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:color-mix(in srgb,#000 60%,transparent);transition:all .2s ease}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:color-mix(in srgb,#000 70%,transparent);border-color:#667eea;box-shadow:0 4px 12px #0003}.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;transform:scale(.85)}.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:color-mix(in srgb,#000 100%,transparent)!important;border:none!important;border-radius:8px!important;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014!important;margin-top:6px!important;padding:4px 0!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:14px!important;min-height:36px!important;padding:8px 14px!important;transition:all .15s ease!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover:not(.mat-mdc-option-disabled){background:#444849!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-active{background:color-mix(in srgb,#000 60%,transparent)!important;color:#fff!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;font-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.geometry-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap;background:color-mix(in srgb,#000 20%,transparent);border-radius:8px;padding:4px 8px;border:1px solid rgba(255,255,255,.1)}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}.measurement-tools .compact-icon,.print-tools .compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.measurement-tools .compact-icon.custom-image-icon,.print-tools .compact-icon.custom-image-icon{padding:4px;background:none;border:1px solid rgba(255,255,255,.2)}.measurement-tools .compact-icon.custom-image-icon img,.print-tools .compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.measurement-tools .compact-icon.custom-image-icon.active,.print-tools .compact-icon.custom-image-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985);border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.measurement-tools .compact-icon.custom-image-icon.active img,.print-tools .compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.measurement-tools .compact-icon.custom-image-icon.active:hover,.print-tools .compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active),.print-tools .compact-icon.custom-image-icon:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e94d}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active) img,.print-tools .compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.print-tools .compact-icon{background:linear-gradient(147.38deg,#4f46e5,#3730a3);color:#fff;border:1px solid rgba(255,255,255,.2)}.print-tools .compact-icon.print-icon{background:linear-gradient(147.38deg,#10b981,#047857)}.print-tools .compact-icon.draw-icon{background:linear-gradient(147.38deg,#f59e0b,#d97706)}.print-tools .compact-icon.active{background:linear-gradient(147.38deg,#ef4444,#dc2626);box-shadow:0 4px 12px #ef444466;border-color:transparent;transform:scale(1.05)}.print-tools .compact-icon.active:hover{box-shadow:0 6px 20px #ef444480;transform:scale(1.08)}.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);margin:0 4px}.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:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:color-mix(in srgb,#000 40%,transparent);border:1px solid rgba(255,255,255,.2);box-shadow:0 1px 2px #0000001a;flex-shrink:0}.compact-icon.active{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;box-shadow:0 8px 25px #667eea4d;transform:scale(1.05)}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66;transform:scale(1.08)}.compact-icon:hover:not(.active){color:#fff;background:color-mix(in srgb,#000 70%,transparent);border-color:#667eea;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:0;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:transform .2s ease}.compact-icon.custom-image-icon.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1);transform:scale(1.1)}.compact-icon.custom-image-icon:hover:not(.active) img{transform:scale(1.05)}.wkt-section{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:6px;background:color-mix(in srgb,#000 60%,transparent);color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;letter-spacing:.4px;min-height:32px;display:flex;align-items:center;justify-content:center;flex:1;box-shadow:0 1px 2px #0000000d}.compact-button.primary.active{background:linear-gradient(135deg,#667eea,#764ba2);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:none;border-radius:6px;font-size:13px;transition:all .2s ease;background:color-mix(in srgb,#000 60%,transparent);color:#fff}.compact-input:focus{outline:none;border-color:#1976d2;background:color-mix(in srgb,#000 70%,transparent);box-shadow:0 0 0 3px #1976d233}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:color-mix(in srgb,#000 40%,transparent);border-radius:8px;border:1px solid rgba(255,255,255,.1);animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:color-mix(in srgb,#000 60%,transparent);border:1px solid rgba(255,255,255,.2);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;border-color:#0ea5e9;box-shadow:0 0 0 2px #0ea5e933}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:color-mix(in srgb,#000 98%,transparent)!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:linear-gradient(147.38deg,#10b981,#047857);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}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%{box-shadow:0 0 #667eeab3}70%{box-shadow:0 0 0 6px #667eea00}to{box-shadow:0 0 #667eea00}}.compact-icon.active{animation:pulse 2s infinite}@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 6px}.geometry-selector{width:100%;margin-bottom:8px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:28px;min-height:28px;padding:0 8px;font-size:12px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:12px}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 2em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config,.print-draw-config{flex-direction:column;align-items:stretch;gap:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:11px;padding:4px 8px;height:28px;min-height:28px}.print-config input,.print-draw-config input{width:50px}.print-config button,.print-draw-config button{padding:4px 8px;font-size:11px;height:28px}.wkt-section .compact-input{font-size:12px;padding:6px 8px}.wkt-section .compact-button{font-size:11px;padding:5px 8px;min-height:28px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:11px!important}}@media (max-width: 480px){.toolbox-wrapper{left:.25em;top:6em;transform-origin:left top;max-width:calc(100vw - .5em)}.drag-handle-toolbox{padding:2px 4px;gap:4px}.drag-handle-toolbox mat-icon{font-size:14px;width:14px;height:14px}.toggle-icon{font-size:14px!important;width:14px!important;height:14px!important}.toolbox-container{padding:6px;min-width:24px}.toolbox-content{gap:8px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;letter-spacing:.2px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle{transform:scale(.9)}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px}\n"] }]
+            args: [{ selector: 'map-toolbox', imports: [FormsModule, CommonModule, MatIconModule, MatOptionModule, MatSelectModule, DragDropModule, MatTooltipModule, MatSlideToggleModule], template: "<div class=\"toolbox-wrapper\" \n     cdkDrag \n     cdkDragBoundary=\".map-container\"\n     [cdkDragFreeDragPosition]=\"dragPosition\"\n     (cdkDragEnded)=\"onDragEnded($event)\">\n     <div class=\"drag-handle-toolbox\" cdkDragHandle>\n        <mat-icon class=\"left-icon\">handyman</mat-icon>\n    \n        <div class=\"right-icons\">\n            <mat-icon class=\"drag-indicator-right\">open_with</mat-icon>\n            <mat-icon class=\"toggle-icon\" (click)=\"toggleCollapsed($event)\">\n                {{ collapsed ? 'flip_to_front' : 'remove' }}\n            </mat-icon>\n        </div>\n    </div>\n    \n    <div class=\"toolbox-container\" [class.collapsed]=\"collapsed\">\n        @if(!collapsed) {\n            <div class=\"toolbox-content\">\n                <div class=\"all-tools-container\">\n                    <div class=\"main-tools\">\n                        @if(!settings?.undoDisabled) {\n                            <img \n                                [src]=\"undoIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"undo()\" \n                                matTooltip=\"Fortryd\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Undo\">\n\n                            <img \n                                [src]=\"redoIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"redo()\" \n                                matTooltip=\"Gendan\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Redo\">\n                        }\n                        <mat-icon \n                            class=\"compact-icon\"                             \n                            (click)=\"startShowInfo()\"\n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"Vis info\" \n                            matTooltipPosition=\"below\">\n                            info\n                        </mat-icon>\n                        <mat-icon \n                            class=\"compact-icon\" \n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"S\u00F8g punkt\" \n                            matTooltipPosition=\"below\"\n                            (click)=\"togglePointSearch()\">adjust\n                        </mat-icon>\n                        <mat-icon \n                            class=\"compact-icon\" \n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"S\u00F8g polygon\" \n                            matTooltipPosition=\"below\"\n                            (click)=\"togglePolygonSearch()\">crop_din\n                        </mat-icon>\n                        <mat-icon\n                            class=\"compact-icon\"                             \n                            (click)=\"startSelectFeatureHighlight()\"\n                            [matTooltipShowDelay]=\"200\"\n                            matTooltipClass=\"custom-tooltip\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltip=\"Fremh\u00E6v\" \n                            matTooltipPosition=\"below\"\n                        >star</mat-icon> // TODO: set correct icon for this\n\n                        <mat-slide-toggle [(ngModel)]=\"snap\" (change)=\"onSnapChange()\">Snap</mat-slide-toggle>\n                        @if(settings.editEnabled) {\n                            <img \n                                [src]=\"editIconBase64\" \n                                [class.active]=\"activeMode === 'edit'\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startEdit()\" \n                                matTooltip=\"Rediger\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Rediger\">\n\n                            <img \n                                [src]=\"removePointsIconBase64\" \n                                [class.active]=\"activeMode === 'edit-remove'\" \n                                class=\"compact-icon custom-image-icon\"\n                                (click)=\"startEditRemovePoints()\" \n                                matTooltip=\"Fjern punkter\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Fjern punkter\">\n                        }\n                        @if(settings.cutHoleEnabled) {\n                            <img \n                                [src]=\"trimIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'clip-hole'\" \n                                (click)=\"clipHole()\" \n                                matTooltip=\"Klip hul\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Klip hul\">\n                        }\n                        @if(settings.splitEnabled) {\n                            <img \n                                [src]=\"splitIconBase64\" \n                                class=\"compact-icon custom-image-icon\"\n                                [class.active]=\"activeMode === 'split'\"\n                                (click)=\"split()\" \n                                matTooltip=\"Sk\u00E6r over\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Sk\u00E6r over\">\n                        }\n                        @if(settings.changeTypeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                [class.active]=\"activeMode === 'change-type'\" \n                                (click)=\"startChangeType()\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Skift type\" \n                                matTooltipPosition=\"below\">\n                                find_replace\n                            </mat-icon>\n                        }\n                        @if(settings.mergeEnabled) {\n                            <mat-icon \n                                class=\"compact-icon\" \n                                (click)=\"startMergeFeatures()\" \n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"Saml flader\" \n                                [class.active]=\"activeMode === 'merge-features'\">\n                                merge\n                            </mat-icon>\n                        }\n                        @if(settings.centerPoint) {\n                            <mat-icon\n                                (click)=\"setCenterPoint()\"\n                                matTooltipPosition=\"below\"\n                                [matTooltipShowDelay]=\"200\"\n                                matTooltipClass=\"custom-tooltip\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltip=\"S\u00E6t centerpunkt\" \n                                [class.active]=\"activeMode === 'center-point'\"\n                            >adjust</mat-icon>\n                        }\n                    </div>\n                    <div class=\"geometry-tools\">\n                        <img \n                            [src]=\"featureSearchIconBase64\" \n                            [class.active]=\"activeMode === 'search-feature'\"\n                            class=\"compact-icon primary custom-image-icon\"\n                            (click)=\"toggleFeatureSearch()\" \n                            matTooltip=\"Udpegede objekter\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Punkt\">\n\n                        <img \n                            [src]=\"polygonIconBase64\" \n                            [class.active]=\"activeMode === 'draw-polygon'\"\n                            class=\"compact-icon primary custom-image-icon\"\n                            (click)=\"startDrawPolygon()\" \n                            matTooltip=\"Polygon\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Polygon\">\n                        <img \n                            [src]=\"lineStringIconBase64\" \n                            [class.active]=\"activeMode === 'draw-linestring'\"\n                            class=\"compact-icon primary custom-image-icon\"\n                            (click)=\"startDrawLineString()\" \n                            matTooltip=\"LineString\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"LineString\">\n                        \n                        @if(selectedGeometrySetting && selectedGeometrySetting.icons && selectedGeometrySetting.icons.length > 0) {\n                            @for(iconUrl of selectedGeometrySetting.icons;track iconUrl) {\n                                <img \n                                    [src]=\"iconUrl\" \n                                    [class.active]=\"activeMode === 'draw-point'\"\n                                    class=\"compact-icon primary custom-image-icon\"\n                                    (click)=\"startDrawPointUrl(iconUrl)\" \n                                    matTooltip=\"Punkter\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Punkter\">}\n                        } @else {\n                            <img \n                                [src]=\"pointIconBase64\" \n                                [class.active]=\"activeMode === 'draw-point'\"\n                                class=\"compact-icon primary custom-image-icon\"\n                                (click)=\"startDrawPoint()\" \n                                matTooltip=\"Punkter\" \n                                [matTooltipShowDelay]=\"200\"\n                                [matTooltipHideDelay]=\"300\" \n                                matTooltipClass=\"custom-tooltip\"\n                                matTooltipPosition=\"below\"\n                                alt=\"Punkter\">\n                        }\n                        <img \n                            [src]=\"wktIconBase64\" \n                            class=\"compact-icon secondary custom-image-icon\"\n                            (click)=\"activateShowInputWKT()\" \n                            matTooltip=\"WKT\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"WKT\">\n                    </div>\n                    <div class=\"tool-separator\" *ngIf=\"deleteEnabled || showMeasureDistance || showMeasureArea || profile.showPrint\"></div>\n                    <div class=\"measurement-print-tools\">\n                        <div class=\"measurement-tools\">\n                            @if (deleteEnabled) {\n                                <img \n                                    [src]=\"deleteIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'delete'\"\n                                    (click)=\"startDelete()\" \n                                    matTooltip=\"Slet\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Slet\">\n                            }\n                            @if (showMeasureDistance) {\n                                <img \n                                    [src]=\"measureDistanceIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'measure-distance'\"\n                                    (click)=\"startMeasureLength()\" \n                                    matTooltip=\"M\u00E5le afstand\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"M\u00E5le afstand\">\n                            }\n                            @if(showMeasureArea) {\n                                <img \n                                    [src]=\"measureAreaIconBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"activeMode === 'measure-area'\"\n                                    (click)=\"startMeasureArea()\" \n                                    matTooltip=\"M\u00E5le areal\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"M\u00E5le areal\">\n                            }\n                        </div>\n                        @if(profile.showPrint) {\n                            <div class=\"tool-separator print-separator\"></div>\n                            <div class=\"print-tools\">\n                                <img \n                                    [src]=\"printBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"active === 'Print'\"\n                                    (click)=\"startPrintMode()\" \n                                    matTooltip=\"Udskriv\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Udskriv\">\n                                <img \n                                    [src]=\"drawBase64\" \n                                    class=\"compact-icon custom-image-icon\"\n                                    [class.active]=\"active === 'Draw'\"\n                                    (click)=\"startDrawMode()\" \n                                    matTooltip=\"Tegn\" \n                                    [matTooltipShowDelay]=\"200\"\n                                    [matTooltipHideDelay]=\"300\" \n                                    matTooltipClass=\"custom-tooltip\"\n                                    matTooltipPosition=\"below\"\n                                    alt=\"Tegn\">\n                            </div>\n                        }\n                    </div>\n                </div>\n                @if(showInputWKT) {\n                    <div class=\"wkt-section\">\n                        <input class=\"compact-input\" [(ngModel)]=\"WKTString\">\n                            <div class=\"wkt-actions\">\n                                <button class=\"compact-button primary\" (click)=\"ReadWKT()\">Indl\u00E6s WKT</button>\n                                <button class=\"compact-button\" (click)=\"cancelWKT()\">Annuller</button>\n                            </div>\n                    </div>\n                }\n                @if(profile.showPrint) {\n                    @if(active === \"Print\") {\n                        <div class=\"print-config\">\n                            <img \n                                [src]=\"printBase64\" \n                                class=\"compact-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 (showGeometryTypes && filteredGeometryTypeSettings.length > 0) {\n                <mat-select class=\"geometry-selector\" (selectionChange)=\"settingsChanged($event)\" [(ngModel)]=\"selectedGeometrySetting\" [compareWith]=\"compareGeometrySetting\">\n                    @for (setting of filteredGeometryTypeSettings; track setting) {\n                        <mat-option [value]=\"setting\">{{setting.typeName}}</mat-option>\n                    }\n                </mat-select>            \n            }\n        }\n    </div>\n    @if (activeMode === 'search-feature' && filteredResults.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <div class=\"buffer-item\">\n                <mat-label>Buffer</mat-label>\n                <input matInput type=\"number\" name=\"buffer\" [(ngModel)]=\"bufferInMeters\">\n                <mat-label>m</mat-label>\n            </div>\n            <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n                <span class=\"result-title\">\n                {{ result.title }} ({{result.items.length}} af {{ result.total }})\n                </span>\n                <div  (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                    <div class=\"item-right\">\n                        <img \n                            [src]=\"objectSearchCopyIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"addToActiveObjectsList(item, $event)\" \n                            matTooltip=\"Kopier\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Kopier\">\n                        <img \n                            [src]=\"objectSearchCutIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"cutBySearchedObject(item, $event)\" \n                            matTooltip=\"Fjern\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Fjern\">\n                        <img \n                            [src]=\"objectSearchCutIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"splitBySearchedObject(item, $event)\" \n                            matTooltip=\"Opsk\u00E6r\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Opsk\u00E6r\">\n                        <img \n                            [src]=\"objectSearchCopyWithBufferIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"addToActiveObjectsList(item, $event, true)\" \n                            matTooltip=\"Kopier med buffer\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Kopier med buffer\">\n                        <img \n                            [src]=\"objectSearchZoomIconBase64\" \n                            class=\"compact-icon custom-image-icon\"\n                            (click)=\"zoomSearchedObject(item, $event)\" \n                            matTooltip=\"Zoom\" \n                            [matTooltipShowDelay]=\"200\"\n                            [matTooltipHideDelay]=\"300\" \n                            matTooltipClass=\"custom-tooltip\"\n                            matTooltipPosition=\"below\"\n                            alt=\"Zoom\">\n                        <button\n                            (click)=\"toggleItemInfo(item, $event)\">\n                            <mat-icon class=\"button-icon\">info_outline</mat-icon>\n                        </button>\n                    </div>     \n                    @if (item.showMetadata) {\n                        <div class=\"metadata-panel\">\n                            @for(feature of item.metadata; track feature) {\n                                <div class=\"feature-item\">\n                                    <div *ngFor=\"let kv of (feature | keyvalue)\">\n                                        {{ kv.value.name }}:\n                                        <ng-container [ngSwitch]=\"kv.value.kind\">\n                                            <img *ngSwitchCase=\"'img'\" [src]=\"kv.value.data\" alt=\"{{ kv.key }}\" style=\"max-width:240px;\" />\n                                            <a *ngSwitchCase=\"'url'\" [href]=\"kv.value.data\" target=\"_blank\" rel=\"noopener noreferrer\">\n                                                {{ kv.key }}\n                                                <mat-icon class=\"link-icon\">open_in_new</mat-icon>\n                                            </a>\n                                            <span *ngSwitchDefault>{{ kv.value.data }}</span>\n                                        </ng-container>\n                                    </div>\n                                </div>\n                            }\n                        </div>\n                    }\n                </div>\n            </mat-option>\n        </div>\n    }\n    @if ((activeMode === \"search-point\" || activeMode === \"search-polygon\") && filteredResults.length > 0) {\n        <div class=\"geometry-search-panel\">\n            <mat-option *ngFor=\"let result of filteredResults\" [value]=\"result\" class=\"search-result-option\">\n                <span class=\"result-title\">\n                {{ result.title }} ({{result.items.length}} af {{ result.total }})\n                </span>\n                <div  (click)=\"highlight(item.wkt, $event)\" *ngFor=\"let item of result.items\" class=\"search-result-item\">\n                    <div class=\"item-left\">\n                        <span class=\"item-header\"> {{item.header}} </span> \n                    </div>\n                 </div>\n            </mat-option>\n        </div>\n    }\n</div>\n", styles: [".toolbox-wrapper{position:absolute;left:1em;top:10em;z-index:10;cursor:grab;max-width:95vw}.toolbox-wrapper.cdk-drag-dragging{opacity:.8;cursor:grab;z-index:1001}::ng-deep .metadata-panel{margin-top:5px;margin-bottom:5px;border:white;border-width:2px}::ng-deep .geometry-search-panel{border-radius:5px!important;max-height:320px!important;background:color-mix(in srgb,#000 85%,transparent)!important;box-shadow:0 8px 24px #00000026!important;margin-top:10px;overflow-y:auto!important;padding:8px!important;max-width:430px}::ng-deep .geometry-search-panel .buffer-item{align-items:end}::ng-deep .geometry-search-panel .buffer-item input{width:45px;margin:5px}::ng-deep .geometry-search-panel .search-result-item{display:flex;flex-wrap:wrap;margin:5px}::ng-deep .geometry-search-panel .search-result-item .item-left{display:flex;align-items:center;gap:3px;flex:1;min-width:0}::ng-deep .geometry-search-panel .search-result-item .item-right{display:flex;align-items:center;flex:1;justify-content:flex-end;min-width:0;margin-left:10px}::ng-deep .geometry-search-panel .search-result-item .item-right .custom-image-icon{background:#fff!important;margin-left:5px}::ng-deep .geometry-search-panel .search-result-item .item-right button{width:38px;margin-left:5px}::ng-deep .geometry-search-panel .search-result-item .metadata-panel{flex-basis:98%}::ng-deep .geometry-search-panel::-webkit-scrollbar{width:12px}::ng-deep .geometry-search-panel::-webkit-scrollbar-track{background:#757474;border-radius:8px}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb{background:#1a1c1f;border-radius:8px;border:2px solid #2a2c30}::ng-deep .geometry-search-panel::-webkit-scrollbar-thumb:hover{background:#0f1012}::ng-deep .geometry-search-panel::-webkit-scrollbar-button{width:12px;height:16px;background:#2a2c30;border:1px solid #1a1c1f}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:decrement{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 4l-4 4h8z'/%3E%3C/svg%3E\") no-repeat center;border-radius:8px 8px 0 0}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:decrement:hover{background-color:#1a1c1f}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:increment{background:#2a2c30 url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 8l4-4H2z'/%3E%3C/svg%3E\") no-repeat center;border-radius:0 0 8px 8px}::ng-deep .geometry-search-panel::-webkit-scrollbar-button:vertical:increment:hover{background-color:#1a1c1f}::ng-deep .geometry-search-panel .mat-mdc-option{min-height:30px!important;border-radius:5px!important;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:auto;margin-bottom:6px!important;padding:8px 0!important}::ng-deep .geometry-search-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px;font-weight:400;color:#fff;line-height:1.5}::ng-deep .geometry-search-panel mat-label{color:#fff}.drag-handle-toolbox{display:flex;align-items:center;justify-content:space-between;background:#292a2d;padding:2px 8px;cursor:grab;gap:8px;border-radius:5px 5px 0 0;color:#fff}.drag-handle-toolbox mat-icon{color:#fff;font-size:18px;width:18px;height:18px}.drag-handle-toolbox mat-icon:first-child{flex:1;text-align:left}.right-icons{display:flex;align-items:center;gap:6px}.left-icon{flex-shrink:0}.toggle-icon{cursor:pointer;color:#fff;transition:all .2s ease;-webkit-user-select:none;user-select:none;font-size:18px!important;width:18px!important;height:18px!important;display:flex;align-items:center;justify-content:center;border-radius:4px;padding:2px;flex-shrink:0}.toggle-icon:hover{color:#fff;background:#ffffff26}.toggle-icon:active{background:#ffffff40}: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%;gap:10px;background:#292a2d;box-shadow:#0000004d 0 1px 4px -1px;padding:10px;width:auto;min-width:32px;transition:all .3s ease;cursor:default;border-radius:0 0 5px 5px}.toolbox-container.collapsed{display:none}.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}.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;gap:6px;flex-wrap:nowrap}.main-tools ::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:12px;font-weight:500;color:#fff}.geometry-selector{width:100%}.geometry-selector ::ng-deep .mat-mdc-select{font-size:14px;line-height:1.4;border-radius:6px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:32px;min-height:32px;padding:0 10px;border:none;border-radius:6px;background:color-mix(in srgb,#000 60%,transparent);transition:all .2s ease}.geometry-selector ::ng-deep .mat-mdc-select-trigger:hover{background:color-mix(in srgb,#000 70%,transparent);border-color:#667eea;box-shadow:0 4px 12px #0003}.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;transform:scale(.85)}.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:color-mix(in srgb,#000 100%,transparent)!important;border:none!important;border-radius:8px!important;box-shadow:0 8px 24px #0000001f,0 2px 6px #00000014!important;margin-top:6px!important;padding:4px 0!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:14px!important;min-height:36px!important;padding:8px 14px!important;transition:all .15s ease!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover:not(.mat-mdc-option-disabled){background:#444849!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option.mat-active{background:color-mix(in srgb,#000 60%,transparent)!important;color:#fff!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important;font-weight:500!important;color:#fff!important}::ng-deep .cdk-overlay-pane{z-index:1001}::ng-deep .cdk-overlay-backdrop{z-index:1000}.geometry-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}.measurement-print-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap;background:color-mix(in srgb,#000 20%,transparent);border-radius:8px;padding:4px 8px;border:1px solid rgba(255,255,255,.1)}.measurement-tools,.print-tools{display:flex;flex-direction:row;align-items:center;gap:6px;flex-wrap:nowrap}.measurement-tools .compact-icon,.print-tools .compact-icon{transition:all .3s cubic-bezier(.4,0,.2,1)}.measurement-tools .compact-icon.custom-image-icon,.print-tools .compact-icon.custom-image-icon{padding:4px;background:none;border:1px solid rgba(255,255,255,.2)}.measurement-tools .compact-icon.custom-image-icon img,.print-tools .compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:filter .2s ease}.measurement-tools .compact-icon.custom-image-icon.active,.print-tools .compact-icon.custom-image-icon.active{background:linear-gradient(147.38deg,#0ea5e9,#075985);border-color:transparent;box-shadow:0 4px 12px #0ea5e966}.measurement-tools .compact-icon.custom-image-icon.active img,.print-tools .compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1)}.measurement-tools .compact-icon.custom-image-icon.active:hover,.print-tools .compact-icon.custom-image-icon.active:hover{box-shadow:0 6px 20px #0ea5e980}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active),.print-tools .compact-icon.custom-image-icon:hover:not(.active){background:color-mix(in srgb,#000 70%,transparent);border-color:#0ea5e9;box-shadow:0 2px 8px #0ea5e94d}.measurement-tools .compact-icon.custom-image-icon:hover:not(.active) img,.print-tools .compact-icon.custom-image-icon:hover:not(.active) img{filter:brightness(0) invert(.8)}.print-tools .compact-icon{background:linear-gradient(147.38deg,#4f46e5,#3730a3);color:#fff;border:1px solid rgba(255,255,255,.2)}.print-tools .compact-icon.print-icon{background:linear-gradient(147.38deg,#10b981,#047857)}.print-tools .compact-icon.draw-icon{background:linear-gradient(147.38deg,#f59e0b,#d97706)}.print-tools .compact-icon.active{background:linear-gradient(147.38deg,#ef4444,#dc2626);box-shadow:0 4px 12px #ef444466;border-color:transparent;transform:scale(1.05)}.print-tools .compact-icon.active:hover{box-shadow:0 6px 20px #ef444480;transform:scale(1.08)}.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);margin:0 4px}.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:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:color-mix(in srgb,#000 40%,transparent);border:1px solid rgba(255,255,255,.2);box-shadow:0 1px 2px #0000001a;flex-shrink:0}.compact-icon.active{color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent;box-shadow:0 8px 25px #667eea4d;transform:scale(1.05)}.compact-icon.active:hover{box-shadow:0 12px 35px #667eea66;transform:scale(1.08)}.compact-icon:hover:not(.active){color:#fff;background:color-mix(in srgb,#000 70%,transparent);border-color:#667eea;box-shadow:0 4px 12px #0003}.compact-icon.custom-image-icon{padding:0;background:none;border:none}.compact-icon.custom-image-icon img{width:100%;height:100%;object-fit:contain;transition:transform .2s ease}.compact-icon.custom-image-icon.active{background:linear-gradient(135deg,#667eea,#764ba2);border-color:transparent}.compact-icon.custom-image-icon.active img{filter:brightness(0) invert(1);transform:scale(1.1)}.compact-icon.custom-image-icon:hover:not(.active) img{transform:scale(1.05)}.wkt-section{display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);animation:fadeIn .2s ease}.wkt-actions{display:flex;gap:6px;justify-content:space-between}.compact-button{padding:6px 10px;border:none;border-radius:6px;background:color-mix(in srgb,#000 60%,transparent);color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);text-transform:uppercase;letter-spacing:.4px;min-height:32px;display:flex;align-items:center;justify-content:center;flex:1;box-shadow:0 1px 2px #0000000d}.compact-button.primary.active{background:linear-gradient(135deg,#667eea,#764ba2);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:none;border-radius:6px;font-size:13px;transition:all .2s ease;background:color-mix(in srgb,#000 60%,transparent);color:#fff}.compact-input:focus{outline:none;border-color:#1976d2;background:color-mix(in srgb,#000 70%,transparent);box-shadow:0 0 0 3px #1976d233}.print-config,.print-draw-config{display:flex;align-items:center;gap:8px;padding:5px;background:color-mix(in srgb,#000 40%,transparent);border-radius:8px;border:1px solid rgba(255,255,255,.1);animation:slideDown .3s ease}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{background:color-mix(in srgb,#000 60%,transparent);border:1px solid rgba(255,255,255,.2);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;border-color:#0ea5e9;box-shadow:0 0 0 2px #0ea5e933}.print-config select,.print-draw-config select{cursor:pointer}.print-config option,.print-draw-config option{background:color-mix(in srgb,#000 98%,transparent)!important;border:none!important}.print-config input,.print-draw-config input{width:60px;text-align:center}.print-config button,.print-draw-config button{background:linear-gradient(147.38deg,#10b981,#047857);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}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%{box-shadow:0 0 #667eeab3}70%{box-shadow:0 0 0 6px #667eea00}to{box-shadow:0 0 #667eea00}}.compact-icon.active{animation:pulse 2s infinite}@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 6px}.geometry-selector{width:100%;margin-bottom:8px}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:28px;min-height:28px;padding:0 8px;font-size:12px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:12px}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 2em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:13px!important;min-height:32px!important;padding:6px 12px!important}.print-config,.print-draw-config{flex-direction:column;align-items:stretch;gap:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:11px;padding:4px 8px;height:28px;min-height:28px}.print-config input,.print-draw-config input{width:50px}.print-config button,.print-draw-config button{padding:4px 8px;font-size:11px;height:28px}.wkt-section .compact-input{font-size:12px;padding:6px 8px}.wkt-section .compact-button{font-size:11px;padding:5px 8px;min-height:28px}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:11px!important}}@media (max-width: 480px){.toolbox-wrapper{left:.25em;top:6em;transform-origin:left top;max-width:calc(100vw - .5em)}.drag-handle-toolbox{padding:2px 4px;gap:4px}.drag-handle-toolbox mat-icon{font-size:14px;width:14px;height:14px}.toggle-icon{font-size:14px!important;width:14px!important;height:14px!important}.toolbox-container{padding:6px;min-width:24px}.toolbox-content{gap:8px}.all-tools-container{flex-direction:row;align-items:center;max-height:60vh}.main-tools,.geometry-tools{gap:3px;flex-wrap:wrap;justify-content:center}.measurement-print-tools{gap:3px;flex-wrap:wrap;padding:2px 4px;width:100%;justify-content:center}.measurement-tools,.print-tools{gap:3px}.compact-icon{width:26px;height:26px}.tool-separator{display:none}.geometry-selector ::ng-deep .mat-mdc-select-trigger{height:26px;min-height:26px;padding:0 6px;font-size:11px}.geometry-selector ::ng-deep .mat-mdc-select-value{font-size:11px}.compact-button{font-size:10px;letter-spacing:.2px;padding:4px 6px;min-height:26px}.compact-input{font-size:11px;padding:4px 6px}.print-config,.print-draw-config{gap:4px;padding:6px}.print-config select,.print-config input,.print-draw-config select,.print-draw-config input{font-size:10px;height:26px;min-height:26px;padding:2px 6px}.print-config input,.print-draw-config input{width:45px}.print-config button,.print-draw-config button{flex:1;min-width:60px;font-size:10px;padding:3px 6px;height:26px}.print-config .icon-separator,.print-draw-config .icon-separator{font-size:10px}.wkt-section{gap:6px;padding-top:8px}::ng-deep .mat-mdc-slide-toggle{transform:scale(.9)}::ng-deep .mat-mdc-slide-toggle .mdc-label{font-size:10px!important}::ng-deep .mat-mdc-select-panel{max-width:calc(100vw - 1em)!important}::ng-deep .mat-mdc-select-panel .mat-mdc-option{font-size:12px!important;min-height:28px!important;padding:4px 10px!important}}::ng-deep .mat-mdc-simple-snack-bar{background-color:#fff!important}::ng-deep .mat-mdc-tooltip{--mdc-plain-tooltip-container-color: #050505 !important;--mdc-plain-tooltip-supporting-text-color: white !important;border-radius:6px}::ng-deep .mat-mdc-tooltip .mdc-tooltip__surface{background-color:#050505!important;color:#fff!important;border-radius:6px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { map: [{
                 type: Input,
                 args: [{ required: true }]
@@ -3246,6 +3246,9 @@ class ActiveObjectsComponent {
     }
     togglePanel() {
         this.collapsed = !this.collapsed;
+        if (this.profile.activeObjectsInitialPosition.includes('højre')) {
+            this._layoutService.bringElementIntoViewIfNeeded('.active-objects-wrapper', -6, this.collapsed);
+        }
     }
     onDragEnded(event) {
         const position = event.source.getFreeDragPosition();
@@ -3444,6 +3447,9 @@ class MapSearchComponent {
             this.searchAddress = '';
             this.filterResults();
         }
+        if (this.profile.searchInitialPosition.includes('højre')) {
+            this._layoutService.bringElementIntoViewIfNeeded('.search-container', -3, this.collapsed);
+        }
     }
     highlight(wkt, event) {
         event.stopPropagation();
@@ -3545,6 +3551,9 @@ class LegendsListComponent {
     }
     toggleLegendsList() {
         this.collapsed = !this.collapsed;
+        if (this.profile.legendsListInitialPosition.includes('højre')) {
+            this._layoutService.bringElementIntoViewIfNeeded('.legends-list-body-wrapper', -8, this.collapsed);
+        }
     }
     onDragEnded(event) {
         const position = event.source.getFreeDragPosition();