@foodmarketmaker/mapag 0.0.38 → 0.0.39

package/fesm2022/foodmarketmaker-mapag.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, effect, input, Input, Component, viewChild, ChangeDetectionStrategy, inject, NgZone, Injectable, output, untracked, computed, HostListener, Directive, model, forwardRef, Renderer2, ElementRef, Pipe } from '@angular/core';
+import { signal, effect, input, Input, Component, Directive, viewChild, ChangeDetectionStrategy, inject, NgZone, Injectable, output, untracked, computed, HostListener, model, forwardRef, Renderer2, ElementRef, Pipe } from '@angular/core';
 import { PMTiles, Protocol } from 'pmtiles';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -7,7 +7,7 @@ import * as i1$1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { takeUntilDestroyed, rxResource } from '@angular/core/rxjs-interop';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
-import { faMousePointer, faList, faTrashAlt, faPrint, faChevronRight, faGear, faEye, faEyeSlash, faFill, faPaintBrush, faTimes, faImage, faCircle, faFont, faFire, faThLarge } from '@fortawesome/free-solid-svg-icons';
+import { faMousePointer, faList, faTrashAlt, faChevronRight, faGear, faEye, faEyeSlash, faFill, faPaintBrush, faTimes, faImage, faFilter, faCircle, faFont, faFire, faThLarge, faPrint, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import booleanContains from '@turf/boolean-contains';
 import booleanOverlap from '@turf/boolean-overlap';
 import { polygon, feature } from '@turf/helpers';
@@ -690,6 +690,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }], styles: [{ type: i0.Input, args: [{ isSignal: true, alias: "styles", required: false }] }] } });
 
+class OnBodyDirective {
+    el;
+    host;
+    constructor(el) {
+        this.el = el;
+        this.host = this.el.nativeElement;
+    }
+    ngOnInit() {
+        document.body.appendChild(this.host);
+    }
+    ngOnDestroy() {
+        // Clean up if the component is destroyed
+        if (document.body.contains(this.host)) {
+            document.body.removeChild(this.host);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnBodyDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: OnBodyDirective, isStandalone: true, selector: "dialog[onBody]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: OnBodyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'dialog[onBody]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
+
 class BasemapSelectMenu {
     map = input.required(...(ngDevMode ? [{ debugName: "map" }] : []));
     styleDialog = viewChild.required('styleDialog');
@@ -732,7 +759,7 @@ class BasemapSelectMenu {
       </button>
     </div>
     
-    <dialog #styleDialog class="style-dialog">
+    <dialog onBody #styleDialog class="style-dialog">
       <div class="dialog-header">
         <h3>Select Basemap Style</h3>
         <button class="close-button" (click)="closeDialog()">✕</button>
@@ -745,11 +772,11 @@ class BasemapSelectMenu {
         </div>
       </div>
     </dialog>
-  `, isInline: true, styles: [":host{display:block;width:200px;height:60px;position:relative}.basemap-container{position:relative;width:100%;height:100%;border-radius:12px;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#f5f5f5;overflow:hidden;box-shadow:0 2px 8px #00000026;display:flex;align-items:center;justify-content:center}.basemap-title{position:relative;z-index:1;color:#fff;font-size:19px;font-weight:600;text-align:center;padding:8px 16px;background:#0000;border-radius:8px;-webkit-user-select:none;user-select:none;text-shadow:0 2px 4px rgba(0,0,0,.8);max-width:90%;word-wrap:break-word;line-height:1.2}.dialog-button{position:absolute;top:50%;transform:translateY(-50%);right:8px;background:#ffffffe6;border:none;border-radius:6px;padding:4px 10px;font-size:18px;font-weight:700;cursor:pointer;z-index:2;transition:background-color .2s ease,transform .2s ease;box-shadow:0 2px 4px #0003;letter-spacing:1px}.dialog-button:hover{background:#fff;transform:translateY(-50%) scale(1.1)}.dialog-button:active{transform:translateY(-50%) scale(.95)}.basemap-container:not([style*=\"background-image: url\"]){background:linear-gradient(135deg,#667eea,#764ba2)}.style-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;border:none;border-radius:12px;padding:0;max-width:90vw;max-height:80vh;box-shadow:0 8px 32px #00000040;background:#fff}.style-dialog::backdrop{background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(0,0,0,.1)}.dialog-header h3{margin:0;font-size:18px;font-weight:600;color:#333}.close-button{background:transparent;border:none;font-size:24px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:#666;transition:background-color .2s ease,color .2s ease}.close-button:hover{background-color:#0000000d;color:#333}.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding:20px;min-width:380px;max-width:600px;overflow-y:auto}.style-item{cursor:pointer;transition:transform .2s ease}.style-item:hover{transform:scale(1.05)}@media (max-width: 768px){.style-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));min-width:300px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BasemapSelect, selector: "mapag-basemap-select", inputs: ["styleData", "styles"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;width:200px;height:60px;position:relative}.basemap-container{position:relative;width:100%;height:100%;border-radius:12px;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#f5f5f5;overflow:hidden;box-shadow:0 2px 8px #00000026;display:flex;align-items:center;justify-content:center}.basemap-title{position:relative;z-index:1;color:#fff;font-size:19px;font-weight:600;text-align:center;padding:8px 16px;background:#0000;border-radius:8px;-webkit-user-select:none;user-select:none;text-shadow:0 2px 4px rgba(0,0,0,.8);max-width:90%;word-wrap:break-word;line-height:1.2}.dialog-button{position:absolute;top:50%;transform:translateY(-50%);right:8px;background:#ffffffe6;border:none;border-radius:6px;padding:4px 10px;font-size:18px;font-weight:700;cursor:pointer;z-index:2;transition:background-color .2s ease,transform .2s ease;box-shadow:0 2px 4px #0003;letter-spacing:1px}.dialog-button:hover{background:#fff;transform:translateY(-50%) scale(1.1)}.dialog-button:active{transform:translateY(-50%) scale(.95)}.basemap-container:not([style*=\"background-image: url\"]){background:linear-gradient(135deg,#667eea,#764ba2)}.style-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;border:none;border-radius:12px;padding:0;max-width:90vw;max-height:80vh;box-shadow:0 8px 32px #00000040;background:#fff}.style-dialog::backdrop{background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(0,0,0,.1)}.dialog-header h3{margin:0;font-size:18px;font-weight:600;color:#333}.close-button{background:transparent;border:none;font-size:24px;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;color:#666;transition:background-color .2s ease,color .2s ease}.close-button:hover{background-color:#0000000d;color:#333}.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;padding:20px;min-width:380px;max-width:600px;overflow-y:auto}.style-item{cursor:pointer;transition:transform .2s ease}.style-item:hover{transform:scale(1.05)}@media (max-width: 768px){.style-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));min-width:300px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: BasemapSelect, selector: "mapag-basemap-select", inputs: ["styleData", "styles"] }, { kind: "directive", type: OnBodyDirective, selector: "dialog[onBody]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: BasemapSelectMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'mapag-basemap-select-menu', imports: [CommonModule, BasemapSelect], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+            args: [{ selector: 'mapag-basemap-select-menu', imports: [CommonModule, BasemapSelect, OnBodyDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: `
     <div class="basemap-container" 
          [style.background-image]="getBackgroundImage()">
       <div class="basemap-title" [style.color]="currentStyle?.nameColor || '#ffffff'">
@@ -762,7 +789,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
       </button>
     </div>
     
-    <dialog #styleDialog class="style-dialog">
+    <dialog onBody #styleDialog class="style-dialog">
       <div class="dialog-header">
         <h3>Select Basemap Style</h3>
         <button class="close-button" (click)="closeDialog()">✕</button>
@@ -14960,9 +14987,6 @@ class MapComponent {
     id = input('mapid', ...(ngDevMode ? [{ debugName: "id" }] : []));
     onMapReady = output();
     mapReady = signal(undefined, ...(ngDevMode ? [{ debugName: "mapReady" }] : []));
-    // accessToken = input.required<string>();
-    // FontAwesome icons
-    faPrint = faPrint;
     map;
     svc = inject(MapService);
     selectionSvc = inject(MapSelectionService);
@@ -15066,18 +15090,13 @@ class MapComponent {
         } 
         </div>
       }
-      <div class="buttons">
-        <button class="map-btn" (click)="saveImage()" title="Save Image">
-          <fa-icon [icon]="faPrint" size="lg"></fa-icon>
-        </button>
-      </div>
     </div>
     <ng-content></ng-content>
-  `, isInline: true, styles: [":host{height:100%;position:relative;overflow:hidden}.mapcontainer{margin:0;padding:0;height:100%;width:100%}.legend{position:absolute;top:55px;left:10px;background:#fff;padding:10px;border-radius:5px;box-shadow:0 2px 4px #0003;z-index:1000;font-size:.8em}.buttons{position:absolute;top:10px;left:10px;z-index:1000}.buttons>button{border-radius:5px;border:1px solid #ccc;background:#fff;color:#333;padding:8px 12px;cursor:pointer;box-shadow:0 2px 4px #0003}.buttons>button:hover{background-color:#f0f0f0}\n"], dependencies: [{ kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{height:100%;position:relative;overflow:hidden}.mapcontainer{margin:0;padding:0;height:100%;width:100%}.legend{position:absolute;top:55px;left:10px;background:#fff;padding:10px;border-radius:5px;box-shadow:0 2px 4px #0003;z-index:1000;font-size:.8em}.buttons{position:absolute;top:10px;left:10px;z-index:1000}.buttons>button{border-radius:5px;border:1px solid #ccc;background:#fff;color:#333;padding:8px 12px;cursor:pointer;box-shadow:0 2px 4px #0003}.buttons>button:hover{background-color:#f0f0f0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MapComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mapag-map', changeDetection: ChangeDetectionStrategy.OnPush, imports: [FaIconComponent, CommonModule], template: `
+            args: [{ selector: 'mapag-map', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: `
     <div class="mapcontainer" #map>
       @if (svc.legends().size > 0)  {
         <div class="legend">
@@ -15094,11 +15113,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         } 
         </div>
       }
-      <div class="buttons">
-        <button class="map-btn" (click)="saveImage()" title="Save Image">
-          <fa-icon [icon]="faPrint" size="lg"></fa-icon>
-        </button>
-      </div>
     </div>
     <ng-content></ng-content>
   `, styles: [":host{height:100%;position:relative;overflow:hidden}.mapcontainer{margin:0;padding:0;height:100%;width:100%}.legend{position:absolute;top:55px;left:10px;background:#fff;padding:10px;border-radius:5px;box-shadow:0 2px 4px #0003;z-index:1000;font-size:.8em}.buttons{position:absolute;top:10px;left:10px;z-index:1000}.buttons>button{border-radius:5px;border:1px solid #ccc;background:#fff;color:#333;padding:8px 12px;cursor:pointer;box-shadow:0 2px 4px #0003}.buttons>button:hover{background-color:#f0f0f0}\n"] }]
@@ -24919,7 +24933,7 @@ class MapagDetails {
         <ng-content></ng-content>
       </div>
     </div>
-  `, isInline: true, styles: [".mapag-details{display:block}.summary{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;font-size:1em;font-weight:600;color:#000;padding:4px 0;border-bottom:2px solid gray;margin-bottom:8px}.marker{display:inline-block;transition:transform .15s ease-out}.marker.open{transform:rotate(90deg);transform-origin:center}.content{max-height:0;overflow:hidden;transition:max-height .15s ease-out}.content.open{max-height:100vh;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
+  `, isInline: true, styles: [".mapag-details{display:block}.summary{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;font-size:1em;font-weight:600;color:#000;padding:4px 0;// border-bottom: 2px solid gray;margin-bottom:0;margin-top:4px}.marker{display:inline-block;transition:transform .15s ease-out}.marker.open{transform:rotate(90deg);transform-origin:center}.content{max-height:0;overflow:hidden;transition:max-height .15s ease-out}.content.open{max-height:100vh;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MapagDetails, decorators: [{
             type: Component,
@@ -24933,7 +24947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         <ng-content></ng-content>
       </div>
     </div>
-  `, styles: [".mapag-details{display:block}.summary{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;font-size:1em;font-weight:600;color:#000;padding:4px 0;border-bottom:2px solid gray;margin-bottom:8px}.marker{display:inline-block;transition:transform .15s ease-out}.marker.open{transform:rotate(90deg);transform-origin:center}.content{max-height:0;overflow:hidden;transition:max-height .15s ease-out}.content.open{max-height:100vh;overflow:visible}\n"] }]
+  `, styles: [".mapag-details{display:block}.summary{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;font-size:1em;font-weight:600;color:#000;padding:4px 0;// border-bottom: 2px solid gray;margin-bottom:0;margin-top:4px}.marker{display:inline-block;transition:transform .15s ease-out}.marker.open{transform:rotate(90deg);transform-origin:center}.content{max-height:0;overflow:hidden;transition:max-height .15s ease-out}.content.open{max-height:100vh;overflow:visible}\n"] }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }] } });
 
 class PaletteDisplay {
@@ -25409,7 +25423,7 @@ class ShowHideBtn {
       <fa-icon [icon]="mapper().settings().visible ? faEyeSlash : faEye"></fa-icon>
       {{ mapper().settings().visible ? 'Hide' : 'Show' }}
     </button>
-`, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}:host{display:content}.btn{width:12ch}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
+`, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}:host{display:content}.btn{width:12ch}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ShowHideBtn, decorators: [{
             type: Component,
@@ -25418,7 +25432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
       <fa-icon [icon]="mapper().settings().visible ? faEyeSlash : faEye"></fa-icon>
       {{ mapper().settings().visible ? 'Hide' : 'Show' }}
     </button>
-`, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}:host{display:content}.btn{width:12ch}\n"] }]
+`, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}:host{display:content}.btn{width:12ch}\n"] }]
         }], propDecorators: { mapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapper", required: true }] }] } });
 
 class HubCropSequencePanel {
@@ -25474,7 +25488,7 @@ class HubCropSequencePanel {
     >
       <area-icon></area-icon>
     </hub-data-layer>
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
       <h2>USDA - NASS - Crop Sequence Boundaries</h2>
       <img src="https://foodmarketmaker-upload-data.s3.us-west-2.amazonaws.com/assets/mapag/csbbanner2025.png" alt="Crop Sequence Boundaries Sample Image" style="max-width: 100%; height: auto; margin-bottom: 6px; border-radius: 6px;" />
       <p>
@@ -25528,11 +25542,11 @@ class HubCropSequencePanel {
         <button class="btn" (click)="toggleDialog()">Close</button>
       </div>
     </dialog>
-  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}dialog{max-width:700px}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubDataLayer, selector: "hub-data-layer", inputs: ["visible", "name", "desc", "icon", "shape"], outputs: ["onCustomize", "onCheck"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "component", type: AreaIcon, selector: "area-icon" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: ShowHideBtn, selector: "mapag-show-hide-btn", inputs: ["mapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}dialog{max-width:700px}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubDataLayer, selector: "hub-data-layer", inputs: ["visible", "name", "desc", "icon", "shape"], outputs: ["onCustomize", "onCheck"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "component", type: AreaIcon, selector: "area-icon" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: ShowHideBtn, selector: "mapag-show-hide-btn", inputs: ["mapper"] }, { kind: "directive", type: OnBodyDirective, selector: "dialog[onBody]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HubCropSequencePanel, decorators: [{
             type: Component,
-            args: [{ selector: 'hub-crop-sequence-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubDataLayer, DraggableDialogDirective, AreaIcon, FaIconComponent, BringToFrontDirective, ShowHideBtn], template: `
+            args: [{ selector: 'hub-crop-sequence-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubDataLayer, DraggableDialogDirective, AreaIcon, FaIconComponent, BringToFrontDirective, ShowHideBtn, OnBodyDirective], template: `
     <hub-data-layer
       [visible]="mapper.settings().visible"
       [name]="'USDA - NASS - Crop Sequences'"
@@ -25543,7 +25557,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
     >
       <area-icon></area-icon>
     </hub-data-layer>
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
       <h2>USDA - NASS - Crop Sequence Boundaries</h2>
       <img src="https://foodmarketmaker-upload-data.s3.us-west-2.amazonaws.com/assets/mapag/csbbanner2025.png" alt="Crop Sequence Boundaries Sample Image" style="max-width: 100%; height: auto; margin-bottom: 6px; border-radius: 6px;" />
       <p>
@@ -25597,7 +25611,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         <button class="btn" (click)="toggleDialog()">Close</button>
       </div>
     </dialog>
-  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}dialog{max-width:700px}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
+  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}dialog{max-width:700px}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }], customizeDialog: [{ type: i0.ViewChild, args: ['customizeDialog', { isSignal: true }] }] } });
 
 class DialogHeader {
@@ -25614,14 +25628,14 @@ class DialogHeader {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: DialogHeader, isStandalone: true, selector: "mapag-dialog-header", inputs: { dialog: { classPropertyName: "dialog", publicName: "dialog", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <h2><ng-content></ng-content></h2>
     <button class="btn-icon" (click)="close()"><fa-icon [icon]="faTimes" size="lg"></fa-icon></button>
-  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}:host{display:flex;align-items:center}:host:first-child{flex-grow:1}:host h2{margin:0;flex-grow:1}.btn-icon{padding:2px;border:none;background:transparent;cursor:pointer;border-radius:4px;color:gray}.btn-icon:hover{color:#000;background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
+  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}:host{display:flex;align-items:center}:host:first-child{flex-grow:1}:host h2{margin:0;flex-grow:1}.btn-icon{padding:2px;border:none;background:transparent;cursor:pointer;border-radius:4px;color:gray}.btn-icon:hover{color:#000;background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DialogHeader, decorators: [{
             type: Component,
             args: [{ selector: 'mapag-dialog-header', imports: [CommonModule, FaIconComponent], template: `
     <h2><ng-content></ng-content></h2>
     <button class="btn-icon" (click)="close()"><fa-icon [icon]="faTimes" size="lg"></fa-icon></button>
-  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}:host{display:flex;align-items:center}:host:first-child{flex-grow:1}:host h2{margin:0;flex-grow:1}.btn-icon{padding:2px;border:none;background:transparent;cursor:pointer;border-radius:4px;color:gray}.btn-icon:hover{color:#000;background-color:transparent}\n"] }]
+  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}:host{display:flex;align-items:center}:host:first-child{flex-grow:1}:host h2{margin:0;flex-grow:1}.btn-icon{padding:2px;border:none;background:transparent;cursor:pointer;border-radius:4px;color:gray}.btn-icon:hover{color:#000;background-color:transparent}\n"] }]
         }], propDecorators: { dialog: [{ type: i0.Input, args: [{ isSignal: true, alias: "dialog", required: false }] }] } });
 
 class StdLegend {
@@ -25637,7 +25651,7 @@ class StdLegend {
       </div>
     }
     </div>
-  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}.legend{display:grid;column-gap:8px;font-size:.8em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}.legend{display:grid;column-gap:8px;font-size:.8em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: StdLegend, decorators: [{
             type: Component,
@@ -25650,7 +25664,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
       </div>
     }
     </div>
-  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}.legend{display:grid;column-gap:8px;font-size:.8em}\n"] }]
+  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}.legend{display:grid;column-gap:8px;font-size:.8em}\n"] }]
         }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }] } });
 
 class HubCroplandPanel {
@@ -25723,7 +25737,7 @@ class HubCroplandPanel {
     >
       <raster-icon></raster-icon>
     </hub-data-layer>
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
       <h2>USDA Cropland Data Layer (CDL)</h2>
       <p>
         The United States Department of Agriculture - National Agricultural Statistics Service (USDA-NASS) Cropland Data Layer (CDL) is an annual raster, geo-referenced,
@@ -25775,15 +25789,15 @@ class HubCroplandPanel {
       </div>
     </dialog>
 
-    <dialog class="legend" draggable mapagBringToFront #legendDialog>
+    <dialog class="legend" draggable mapagBringToFront onBody #legendDialog>
       <mapag-dialog-header class="drag-handle" [dialog]="legendDialog">Cropland Data Layer Legend</mapag-dialog-header>
       <mapag-std-legend [items]="mapper.legend.items" [columns]="3"></mapag-std-legend>
     </dialog>
-  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}dialog.legend h2{font-size:1em}.legend-content{margin-top:16px;display:grid;font-size:.7em;grid-template-columns:1fr 1fr 1fr;gap:4px}.legend-row{display:grid;gap:4px;grid-template-columns:auto 1fr}.legend-item{height:15px;width:15px}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubDataLayer, selector: "hub-data-layer", inputs: ["visible", "name", "desc", "icon", "shape"], outputs: ["onCustomize", "onCheck"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "component", type: RasterIcon, selector: "raster-icon" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: ShowHideBtn, selector: "mapag-show-hide-btn", inputs: ["mapper"] }, { kind: "component", type: DialogHeader, selector: "mapag-dialog-header", inputs: ["dialog"] }, { kind: "component", type: StdLegend, selector: "mapag-std-legend", inputs: ["items", "columns"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}dialog.legend h2{font-size:1em}.legend-content{margin-top:16px;display:grid;font-size:.7em;grid-template-columns:1fr 1fr 1fr;gap:4px}.legend-row{display:grid;gap:4px;grid-template-columns:auto 1fr}.legend-item{height:15px;width:15px}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubDataLayer, selector: "hub-data-layer", inputs: ["visible", "name", "desc", "icon", "shape"], outputs: ["onCustomize", "onCheck"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "component", type: RasterIcon, selector: "raster-icon" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: ShowHideBtn, selector: "mapag-show-hide-btn", inputs: ["mapper"] }, { kind: "component", type: DialogHeader, selector: "mapag-dialog-header", inputs: ["dialog"] }, { kind: "component", type: StdLegend, selector: "mapag-std-legend", inputs: ["items", "columns"] }, { kind: "directive", type: OnBodyDirective, selector: "dialog[onBody]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HubCroplandPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'hub-cropland-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubDataLayer, DraggableDialogDirective, RasterIcon, FaIconComponent, BringToFrontDirective, ShowHideBtn, DialogHeader, StdLegend], template: `
+            args: [{ selector: 'hub-cropland-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubDataLayer, DraggableDialogDirective, RasterIcon, FaIconComponent, BringToFrontDirective, ShowHideBtn, DialogHeader, StdLegend, OnBodyDirective], template: `
     <hub-data-layer
       [visible]="mapper.settings().visible"
       [name]="'Cropland Data Layer (CDL)'"
@@ -25794,7 +25808,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
     >
       <raster-icon></raster-icon>
     </hub-data-layer>
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
       <h2>USDA Cropland Data Layer (CDL)</h2>
       <p>
         The United States Department of Agriculture - National Agricultural Statistics Service (USDA-NASS) Cropland Data Layer (CDL) is an annual raster, geo-referenced,
@@ -25846,18 +25860,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
       </div>
     </dialog>
 
-    <dialog class="legend" draggable mapagBringToFront #legendDialog>
+    <dialog class="legend" draggable mapagBringToFront onBody #legendDialog>
       <mapag-dialog-header class="drag-handle" [dialog]="legendDialog">Cropland Data Layer Legend</mapag-dialog-header>
       <mapag-std-legend [items]="mapper.legend.items" [columns]="3"></mapag-std-legend>
     </dialog>
-  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}dialog.legend h2{font-size:1em}.legend-content{margin-top:16px;display:grid;font-size:.7em;grid-template-columns:1fr 1fr 1fr;gap:4px}.legend-row{display:grid;gap:4px;grid-template-columns:auto 1fr}.legend-item{height:15px;width:15px}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
+  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}dialog.legend h2{font-size:1em}.legend-content{margin-top:16px;display:grid;font-size:.7em;grid-template-columns:1fr 1fr 1fr;gap:4px}.legend-row{display:grid;gap:4px;grid-template-columns:auto 1fr}.legend-item{height:15px;width:15px}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }], customizeDialog: [{ type: i0.ViewChild, args: ['customizeDialog', { isSignal: true }] }], legendDialog: [{ type: i0.ViewChild, args: ['legendDialog', { isSignal: true }] }] } });
 
 class FilterPanel {
+    faFilter = faFilter;
     DefaultName = 'railroad';
     map = input(...(ngDevMode ? [undefined, { debugName: "map" }] : []));
     svc = inject(MapService);
     refSvc = inject(ReferenceDataService);
+    customizeDialog = viewChild('customizeDialog', ...(ngDevMode ? [{ debugName: "customizeDialog" }] : []));
     maskData = new Map();
     mapper = new BackgroundMaskMapper();
     constructor() {
@@ -25935,31 +25951,71 @@ class FilterPanel {
             return Promise.resolve(data);
         }
     }
+    toggleDialog() {
+        const dialog = this.customizeDialog();
+        if (!dialog) {
+            return;
+        }
+        const dialogElement = dialog.nativeElement;
+        if (dialogElement.open) {
+            dialogElement.close();
+        }
+        else {
+            dialogElement.show();
+        }
+        // Implement dialog toggle logic here
+    }
+    reset() {
+        this.svc.stateCountyFilter.set([]);
+        this.toggleDialog();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FilterPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: FilterPanel, isStandalone: true, selector: "mapag-filter-panel", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-     <mapag-details [open]="true" style="margin-top: 16px;">
-        <span summary>Filters</span>
-
-        <label>States or Counties</label>
-        <mapag-state-county-select
-          [(ngModel)]="svc.stateCountyFilter"
-        ></mapag-state-county-select>
-      </mapag-details>
-  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MapagDetails, selector: "mapag-details", inputs: ["open"] }, { kind: "component", type: StateCountySelectComponent, selector: "mapag-state-county-select", inputs: ["selection"], outputs: ["selectionChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: FilterPanel, isStandalone: true, selector: "mapag-filter-panel", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "customizeDialog", first: true, predicate: ["customizeDialog"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div>
+      <button class="mgr-btn" (click)="toggleDialog()">
+        <fa-icon [icon]="faFilter"></fa-icon>
+        Filters
+      </button>
+    <div>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
+      <h2>Global Filters</h2>
+      <p>Apply global filters to the map data by selecting states or counties below.</p>
+      <label>States or Counties</label>
+      <mapag-state-county-select
+        [(ngModel)]="svc.stateCountyFilter"
+      ></mapag-state-county-select>
+
+      <div class="dlg-buttons">
+        <button class="btn" (click)="reset()">Reset</button>
+        <button class="btn" (click)="toggleDialog()">Close</button>
+      </div>
+    </dialog>
+  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: StateCountySelectComponent, selector: "mapag-state-county-select", inputs: ["selection"], outputs: ["selectionChange"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: OnBodyDirective, selector: "dialog[onBody]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FilterPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'mapag-filter-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, MapagDetails, StateCountySelectComponent], template: `
-     <mapag-details [open]="true" style="margin-top: 16px;">
-        <span summary>Filters</span>
-
-        <label>States or Counties</label>
-        <mapag-state-county-select
-          [(ngModel)]="svc.stateCountyFilter"
-        ></mapag-state-county-select>
-      </mapag-details>
-  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }] } });
+            args: [{ selector: 'mapag-filter-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, StateCountySelectComponent, DraggableDialogDirective, BringToFrontDirective, FaIconComponent, OnBodyDirective], template: `
+    <div>
+      <button class="mgr-btn" (click)="toggleDialog()">
+        <fa-icon [icon]="faFilter"></fa-icon>
+        Filters
+      </button>
+    <div>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
+      <h2>Global Filters</h2>
+      <p>Apply global filters to the map data by selecting states or counties below.</p>
+      <label>States or Counties</label>
+      <mapag-state-county-select
+        [(ngModel)]="svc.stateCountyFilter"
+      ></mapag-state-county-select>
+
+      <div class="dlg-buttons">
+        <button class="btn" (click)="reset()">Reset</button>
+        <button class="btn" (click)="toggleDialog()">Close</button>
+      </div>
+    </dialog>
+  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }], customizeDialog: [{ type: i0.ViewChild, args: ['customizeDialog', { isSignal: true }] }] } });
 
 class FoodHubPanel {
     // Icons and static data
@@ -26084,7 +26140,7 @@ class FoodHubPanel {
 
     </hub-data-layer>
 
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
       <h2>{{mapper.name}}</h2>
       <p>
         A food hub is “a centrally located facility with a business management structure facilitating the aggregation, 
@@ -26221,11 +26277,11 @@ class FoodHubPanel {
         <button class="btn" (click)="toggleDialog()">Close</button>
       </div>
     </dialog>
-  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}::deep .ng-select-container,::deep .ng-select{font-size:.8em}.filter-row{display:flex;flex-direction:column;margin-bottom:8px;font-size:.8em}.filter-row-cols{display:block;column-count:2}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:8px;overflow-y:auto;max-height:420px;font-size:.8em}.svgicon{height:30px;width:30px;-webkit-mask-size:contain;mask-size:contain}h4,label{display:flex;align-items:center;gap:4px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubDataLayer, selector: "hub-data-layer", inputs: ["visible", "name", "desc", "icon", "shape"], outputs: ["onCustomize", "onCheck"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "appearance", "ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd", "itemsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}::deep .ng-select-container,::deep .ng-select{font-size:.8em}.filter-row{display:flex;flex-direction:column;margin-bottom:8px;font-size:.8em}.filter-row-cols{display:block;column-count:2}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:8px;overflow-y:auto;max-height:420px;font-size:.8em}.svgicon{height:30px;width:30px;-webkit-mask-size:contain;mask-size:contain}h4,label{display:flex;align-items:center;gap:4px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubDataLayer, selector: "hub-data-layer", inputs: ["visible", "name", "desc", "icon", "shape"], outputs: ["onCustomize", "onCheck"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "appearance", "ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd", "itemsChange"] }, { kind: "directive", type: OnBodyDirective, selector: "dialog[onBody]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FoodHubPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'foodhub-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubDataLayer, DraggableDialogDirective, FaIconComponent, BringToFrontDirective, NgSelectComponent], template: `
+            args: [{ selector: 'foodhub-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubDataLayer, DraggableDialogDirective, FaIconComponent, BringToFrontDirective, NgSelectComponent, OnBodyDirective], template: `
     <hub-data-layer [visible]="mapper.settings().visible" [name]="mapper.name" 
     [desc]="'All Registered Food Hubs'" shape="point" (onCheck)="setVisible($event)" (onCustomize)="toggleDialog()">
       
@@ -26240,7 +26296,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 
     </hub-data-layer>
 
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
       <h2>{{mapper.name}}</h2>
       <p>
         A food hub is “a centrally located facility with a business management structure facilitating the aggregation, 
@@ -26377,7 +26433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         <button class="btn" (click)="toggleDialog()">Close</button>
       </div>
     </dialog>
-  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}::deep .ng-select-container,::deep .ng-select{font-size:.8em}.filter-row{display:flex;flex-direction:column;margin-bottom:8px;font-size:.8em}.filter-row-cols{display:block;column-count:2}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:8px;overflow-y:auto;max-height:420px;font-size:.8em}.svgicon{height:30px;width:30px;-webkit-mask-size:contain;mask-size:contain}h4,label{display:flex;align-items:center;gap:4px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
+  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}::deep .ng-select-container,::deep .ng-select{font-size:.8em}.filter-row{display:flex;flex-direction:column;margin-bottom:8px;font-size:.8em}.filter-row-cols{display:block;column-count:2}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:8px;overflow-y:auto;max-height:420px;font-size:.8em}.svgicon{height:30px;width:30px;-webkit-mask-size:contain;mask-size:contain}h4,label{display:flex;align-items:center;gap:4px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }], customizeDialog: [{ type: i0.ViewChild, args: ['customizeDialog', { isSignal: true }] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }] } });
 
 class HubHardinessPanel {
@@ -26447,7 +26503,7 @@ class HubHardinessPanel {
     >
       <area-icon></area-icon>
     </hub-data-layer>
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
       <h2>USDA Hardiness Zones</h2>
       <p>
         The USDA Plant Hardiness Zones are a standardized map that helps gardeners and growers determine which perennial plants are most likely to thrive in a given location.
@@ -26575,15 +26631,15 @@ class HubHardinessPanel {
       </div>
     </dialog>
 
-    <dialog class="legend" draggable mapagBringToFront #legendDialog>
+    <dialog class="legend" draggable mapagBringToFront onBody #legendDialog>
       <mapag-dialog-header [dialog]="legendDialog">Hardiness</mapag-dialog-header>
       <mapag-std-legend [items]="mapper.legend()" [columns]="2"></mapag-std-legend>
     </dialog>
-  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}dialog{max-width:700px}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0;font-size:11pt}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubDataLayer, selector: "hub-data-layer", inputs: ["visible", "name", "desc", "icon", "shape"], outputs: ["onCustomize", "onCheck"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "component", type: AreaIcon, selector: "area-icon" }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: ShowHideBtn, selector: "mapag-show-hide-btn", inputs: ["mapper"] }, { kind: "component", type: DialogHeader, selector: "mapag-dialog-header", inputs: ["dialog"] }, { kind: "component", type: StdLegend, selector: "mapag-std-legend", inputs: ["items", "columns"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}dialog{max-width:700px}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0;font-size:11pt}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubDataLayer, selector: "hub-data-layer", inputs: ["visible", "name", "desc", "icon", "shape"], outputs: ["onCustomize", "onCheck"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "component", type: AreaIcon, selector: "area-icon" }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: ShowHideBtn, selector: "mapag-show-hide-btn", inputs: ["mapper"] }, { kind: "component", type: DialogHeader, selector: "mapag-dialog-header", inputs: ["dialog"] }, { kind: "component", type: StdLegend, selector: "mapag-std-legend", inputs: ["items", "columns"] }, { kind: "directive", type: OnBodyDirective, selector: "dialog[onBody]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HubHardinessPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'hub-hardiness-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubDataLayer, DraggableDialogDirective, AreaIcon, BringToFrontDirective, ShowHideBtn, DialogHeader, StdLegend], template: `
+            args: [{ selector: 'hub-hardiness-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubDataLayer, DraggableDialogDirective, AreaIcon, BringToFrontDirective, ShowHideBtn, DialogHeader, StdLegend, OnBodyDirective], template: `
     <hub-data-layer
       [visible]="mapper.settings().visible"
       [name]="'USDA Hardiness Zones'"
@@ -26594,7 +26650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
     >
       <area-icon></area-icon>
     </hub-data-layer>
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
       <h2>USDA Hardiness Zones</h2>
       <p>
         The USDA Plant Hardiness Zones are a standardized map that helps gardeners and growers determine which perennial plants are most likely to thrive in a given location.
@@ -26722,11 +26778,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
       </div>
     </dialog>
 
-    <dialog class="legend" draggable mapagBringToFront #legendDialog>
+    <dialog class="legend" draggable mapagBringToFront onBody #legendDialog>
       <mapag-dialog-header [dialog]="legendDialog">Hardiness</mapag-dialog-header>
       <mapag-std-legend [items]="mapper.legend()" [columns]="2"></mapag-std-legend>
     </dialog>
-  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}dialog{max-width:700px}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0;font-size:11pt}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
+  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}dialog{max-width:700px}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0;font-size:11pt}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }], customizeDialog: [{ type: i0.ViewChild, args: ['customizeDialog', { isSignal: true }] }], legendDialog: [{ type: i0.ViewChild, args: ['legendDialog', { isSignal: true }] }] } });
 
 class MMPanel {
@@ -27003,7 +27059,7 @@ class MMPanel {
         <button class="btn" (click)="toggleDialog()">Close</button>
       </div>
     </dialog>
-  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}::deep .ng-select-container,::deep .ng-select{font-size:.8em}.filter-row{display:flex;flex-direction:column;margin-bottom:8px;font-size:.8em}.filter-row-cols{display:block;column-count:2}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:8px;overflow-y:auto;max-height:420px;font-size:.8em}.svgicon{height:30px;width:30px;-webkit-mask-size:contain;mask-size:contain}h4,label{display:flex;align-items:center;gap:4px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubDataLayer, selector: "hub-data-layer", inputs: ["visible", "name", "desc", "icon", "shape"], outputs: ["onCustomize", "onCheck"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}::deep .ng-select-container,::deep .ng-select{font-size:.8em}.filter-row{display:flex;flex-direction:column;margin-bottom:8px;font-size:.8em}.filter-row-cols{display:block;column-count:2}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:8px;overflow-y:auto;max-height:420px;font-size:.8em}.svgicon{height:30px;width:30px;-webkit-mask-size:contain;mask-size:contain}h4,label{display:flex;align-items:center;gap:4px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubDataLayer, selector: "hub-data-layer", inputs: ["visible", "name", "desc", "icon", "shape"], outputs: ["onCustomize", "onCheck"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MMPanel, decorators: [{
             type: Component,
@@ -27155,7 +27211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         <button class="btn" (click)="toggleDialog()">Close</button>
       </div>
     </dialog>
-  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}::deep .ng-select-container,::deep .ng-select{font-size:.8em}.filter-row{display:flex;flex-direction:column;margin-bottom:8px;font-size:.8em}.filter-row-cols{display:block;column-count:2}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:8px;overflow-y:auto;max-height:420px;font-size:.8em}.svgicon{height:30px;width:30px;-webkit-mask-size:contain;mask-size:contain}h4,label{display:flex;align-items:center;gap:4px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
+  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}::deep .ng-select-container,::deep .ng-select{font-size:.8em}.filter-row{display:flex;flex-direction:column;margin-bottom:8px;font-size:.8em}.filter-row-cols{display:block;column-count:2}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:8px;overflow-y:auto;max-height:420px;font-size:.8em}.svgicon{height:30px;width:30px;-webkit-mask-size:contain;mask-size:contain}h4,label{display:flex;align-items:center;gap:4px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }], customizeDialog: [{ type: i0.ViewChild, args: ['customizeDialog', { isSignal: true }] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }] } });
 class MarketMakerPopupRenderer {
     RenderPopup(feature) {
@@ -27381,7 +27437,7 @@ class HubNaicsPanel {
 
     </hub-data-layer>
 
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
       <h2>{{mapper.settings().Name}} ({{mapper.settings().ID}})</h2>
       <p>
         NAICS (North American Industry Classification System) codes are used to classify businesses and industries in North America. They provide a standardized way to categorize
@@ -27542,11 +27598,11 @@ class HubNaicsPanel {
         <button class="btn" (click)="toggleDialog()">Close</button>
       </div>
     </dialog>
-  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}::deep .ng-select-container,::deep .ng-select{font-size:.8em}.filter-row{display:flex;flex-direction:column;margin-bottom:8px;font-size:.8em}.filter-row-cols{display:block;column-count:2}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:8px;overflow-y:auto;max-height:420px;font-size:.8em}.svgicon{height:30px;width:30px;-webkit-mask-size:contain;mask-size:contain}h4,label{display:flex;align-items:center;gap:4px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubDataLayer, selector: "hub-data-layer", inputs: ["visible", "name", "desc", "icon", "shape"], outputs: ["onCustomize", "onCheck"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "appearance", "ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd", "itemsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}::deep .ng-select-container,::deep .ng-select{font-size:.8em}.filter-row{display:flex;flex-direction:column;margin-bottom:8px;font-size:.8em}.filter-row-cols{display:block;column-count:2}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:8px;overflow-y:auto;max-height:420px;font-size:.8em}.svgicon{height:30px;width:30px;-webkit-mask-size:contain;mask-size:contain}h4,label{display:flex;align-items:center;gap:4px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubDataLayer, selector: "hub-data-layer", inputs: ["visible", "name", "desc", "icon", "shape"], outputs: ["onCustomize", "onCheck"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "appearance", "ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd", "itemsChange"] }, { kind: "directive", type: OnBodyDirective, selector: "dialog[onBody]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HubNaicsPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'hub-naics-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubDataLayer, DraggableDialogDirective, FaIconComponent, BringToFrontDirective, NgSelectComponent], template: `
+            args: [{ selector: 'hub-naics-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubDataLayer, DraggableDialogDirective, FaIconComponent, BringToFrontDirective, NgSelectComponent, OnBodyDirective], template: `
     <hub-data-layer [visible]="mapper.settings().visible" [name]="mapper.settings().Name||' '" 
     [desc]="'NAICS Code ' + mapper.settings().ID" shape="point" (onCheck)="setVisible($event)" (onCustomize)="toggleDialog()">
       
@@ -27561,7 +27617,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 
     </hub-data-layer>
 
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
       <h2>{{mapper.settings().Name}} ({{mapper.settings().ID}})</h2>
       <p>
         NAICS (North American Industry Classification System) codes are used to classify businesses and industries in North America. They provide a standardized way to categorize
@@ -27722,7 +27778,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         <button class="btn" (click)="toggleDialog()">Close</button>
       </div>
     </dialog>
-  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}::deep .ng-select-container,::deep .ng-select{font-size:.8em}.filter-row{display:flex;flex-direction:column;margin-bottom:8px;font-size:.8em}.filter-row-cols{display:block;column-count:2}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:8px;overflow-y:auto;max-height:420px;font-size:.8em}.svgicon{height:30px;width:30px;-webkit-mask-size:contain;mask-size:contain}h4,label{display:flex;align-items:center;gap:4px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
+  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}::deep .ng-select-container,::deep .ng-select{font-size:.8em}.filter-row{display:flex;flex-direction:column;margin-bottom:8px;font-size:.8em}.filter-row-cols{display:block;column-count:2}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:8px;overflow-y:auto;max-height:420px;font-size:.8em}.svgicon{height:30px;width:30px;-webkit-mask-size:contain;mask-size:contain}h4,label{display:flex;align-items:center;gap:4px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }], customizeDialog: [{ type: i0.ViewChild, args: ['customizeDialog', { isSignal: true }] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }] } });
 
 class NaicsMgrPanel {
@@ -27883,7 +27939,7 @@ class NaicsMgrPanel {
         <button class="mgr-btn" (click)="toggleDialog()" style="justify-self: center;">Add & Remove Layers</button>
       }
     </mapag-details>
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
       <h2>NAICS Businesses</h2>
       <p>
         Select the NAICS Businesses to the map. Each business type is a separate layer. The North American Industry 
@@ -27938,15 +27994,15 @@ class NaicsMgrPanel {
       </div>
     </dialog>
 
-    <dialog class="legend" draggable mapagBringToFront #legendDialog>
+    <dialog class="legend" draggable mapagBringToFront onBody #legendDialog>
       <mapag-dialog-header [dialog]="legendDialog">NAICS Businesses</mapag-dialog-header>
       <mapag-std-legend [items]="legend()"></mapag-std-legend>
     </dialog>
-  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}.search{display:flex;gap:4px;align-items:center;margin-bottom:8px;font-size:.8em}.search input[type=radio]{display:none}.search label{display:flex;align-items:center;gap:4px;padding:2px 4px;border:1px solid transparent;cursor:pointer}.search label:has(input[type=radio]:checked){border:1px solid #333;border-radius:4px;background-color:#f0f0f0}dialog h4{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;margin-top:4px}.ctrl-row{grid-template-columns:1fr;font-size:.8em}.zones{max-height:400px;height:400px;overflow-y:auto;margin-top:0}input[type=search]{width:100%;font-size:1em;padding:4px 8px;border-radius:4px;border:1px solid #ccc}label{display:flex;align-items:center;gap:4px}.svgicon{height:20px;width:20px;-webkit-mask-size:contain;mask-size:contain}.tiles{display:grid;grid-template-columns:repeat(auto-fit,115px);gap:8px;margin-top:8px;text-align:center;align-items:start}.tiles label{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;justify-items:center;height:100%;padding:2px;border:1px solid transparent;cursor:pointer}.tiles label:hover{background-color:#f0f0f0;border:1px solid #999;border-radius:4px}.tiles label:has(input[type=checkbox]:checked){border:1px solid #333;border-radius:4px}.tiles .svgicon{height:50px;width:50px;margin-bottom:4px}.tiles input[type=checkbox]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubNaicsPanel, selector: "hub-naics-panel", inputs: ["item", "map"], outputs: ["onRemove"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: MapagDetails, selector: "mapag-details", inputs: ["open"] }, { kind: "component", type: DialogHeader, selector: "mapag-dialog-header", inputs: ["dialog"] }, { kind: "component", type: StdLegend, selector: "mapag-std-legend", inputs: ["items", "columns"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}.search{display:flex;gap:4px;align-items:center;margin-bottom:8px;font-size:.8em}.search input[type=radio]{display:none}.search label{display:flex;align-items:center;gap:4px;padding:2px 4px;border:1px solid transparent;cursor:pointer}.search label:has(input[type=radio]:checked){border:1px solid #333;border-radius:4px;background-color:#f0f0f0}dialog h4{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;margin-top:4px}.ctrl-row{grid-template-columns:1fr;font-size:.8em}.zones{max-height:400px;height:400px;overflow-y:auto;margin-top:0}input[type=search]{width:100%;font-size:1em;padding:4px 8px;border-radius:4px;border:1px solid #ccc}label{display:flex;align-items:center;gap:4px}.svgicon{height:20px;width:20px;-webkit-mask-size:contain;mask-size:contain}.tiles{display:grid;grid-template-columns:repeat(auto-fit,115px);gap:8px;margin-top:8px;text-align:center;align-items:start}.tiles label{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;justify-items:center;height:100%;padding:2px;border:1px solid transparent;cursor:pointer}.tiles label:hover{background-color:#f0f0f0;border:1px solid #999;border-radius:4px}.tiles label:has(input[type=checkbox]:checked){border:1px solid #333;border-radius:4px}.tiles .svgicon{height:50px;width:50px;margin-bottom:4px}.tiles input[type=checkbox]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubNaicsPanel, selector: "hub-naics-panel", inputs: ["item", "map"], outputs: ["onRemove"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: MapagDetails, selector: "mapag-details", inputs: ["open"] }, { kind: "component", type: DialogHeader, selector: "mapag-dialog-header", inputs: ["dialog"] }, { kind: "component", type: StdLegend, selector: "mapag-std-legend", inputs: ["items", "columns"] }, { kind: "directive", type: OnBodyDirective, selector: "dialog[onBody]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NaicsMgrPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'mapag-naics-mgr-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubNaicsPanel, DraggableDialogDirective, FaIconComponent, BringToFrontDirective, MapagDetails, DialogHeader, StdLegend], template: `
+            args: [{ selector: 'mapag-naics-mgr-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubNaicsPanel, DraggableDialogDirective, FaIconComponent, BringToFrontDirective, MapagDetails, DialogHeader, StdLegend, OnBodyDirective], template: `
     <mapag-details [open]="true" style="margin-top: 16px;">
         <span summary>Data Layers</span>
   
@@ -27957,7 +28013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         <button class="mgr-btn" (click)="toggleDialog()" style="justify-self: center;">Add & Remove Layers</button>
       }
     </mapag-details>
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
       <h2>NAICS Businesses</h2>
       <p>
         Select the NAICS Businesses to the map. Each business type is a separate layer. The North American Industry 
@@ -28012,11 +28068,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
       </div>
     </dialog>
 
-    <dialog class="legend" draggable mapagBringToFront #legendDialog>
+    <dialog class="legend" draggable mapagBringToFront onBody #legendDialog>
       <mapag-dialog-header [dialog]="legendDialog">NAICS Businesses</mapag-dialog-header>
       <mapag-std-legend [items]="legend()"></mapag-std-legend>
     </dialog>
-  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}.search{display:flex;gap:4px;align-items:center;margin-bottom:8px;font-size:.8em}.search input[type=radio]{display:none}.search label{display:flex;align-items:center;gap:4px;padding:2px 4px;border:1px solid transparent;cursor:pointer}.search label:has(input[type=radio]:checked){border:1px solid #333;border-radius:4px;background-color:#f0f0f0}dialog h4{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;margin-top:4px}.ctrl-row{grid-template-columns:1fr;font-size:.8em}.zones{max-height:400px;height:400px;overflow-y:auto;margin-top:0}input[type=search]{width:100%;font-size:1em;padding:4px 8px;border-radius:4px;border:1px solid #ccc}label{display:flex;align-items:center;gap:4px}.svgicon{height:20px;width:20px;-webkit-mask-size:contain;mask-size:contain}.tiles{display:grid;grid-template-columns:repeat(auto-fit,115px);gap:8px;margin-top:8px;text-align:center;align-items:start}.tiles label{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;justify-items:center;height:100%;padding:2px;border:1px solid transparent;cursor:pointer}.tiles label:hover{background-color:#f0f0f0;border:1px solid #999;border-radius:4px}.tiles label:has(input[type=checkbox]:checked){border:1px solid #333;border-radius:4px}.tiles .svgicon{height:50px;width:50px;margin-bottom:4px}.tiles input[type=checkbox]{display:none}\n"] }]
+  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}.search{display:flex;gap:4px;align-items:center;margin-bottom:8px;font-size:.8em}.search input[type=radio]{display:none}.search label{display:flex;align-items:center;gap:4px;padding:2px 4px;border:1px solid transparent;cursor:pointer}.search label:has(input[type=radio]:checked){border:1px solid #333;border-radius:4px;background-color:#f0f0f0}dialog h4{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;margin-top:4px}.ctrl-row{grid-template-columns:1fr;font-size:.8em}.zones{max-height:400px;height:400px;overflow-y:auto;margin-top:0}input[type=search]{width:100%;font-size:1em;padding:4px 8px;border-radius:4px;border:1px solid #ccc}label{display:flex;align-items:center;gap:4px}.svgicon{height:20px;width:20px;-webkit-mask-size:contain;mask-size:contain}.tiles{display:grid;grid-template-columns:repeat(auto-fit,115px);gap:8px;margin-top:8px;text-align:center;align-items:start}.tiles label{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;justify-items:center;height:100%;padding:2px;border:1px solid transparent;cursor:pointer}.tiles label:hover{background-color:#f0f0f0;border:1px solid #999;border-radius:4px}.tiles label:has(input[type=checkbox]:checked){border:1px solid #333;border-radius:4px}.tiles .svgicon{height:50px;width:50px;margin-bottom:4px}.tiles input[type=checkbox]{display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { canAdd: [{ type: i0.Input, args: [{ isSignal: true, alias: "canAdd", required: false }] }], map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }], codes: [{ type: i0.Input, args: [{ isSignal: true, alias: "codes", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], currentChange: [{ type: i0.Output, args: ["currentChange"] }], customizeDialog: [{ type: i0.ViewChild, args: ['customizeDialog', { isSignal: true }] }], legendDialog: [{ type: i0.ViewChild, args: ['legendDialog', { isSignal: true }] }] } });
 
 class GradientLegend {
@@ -28211,7 +28267,7 @@ class NassPanel {
       <area-icon></area-icon>
     </hub-data-layer>
 
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
       <h2>{{ mapper.name() }}</h2>
       <p>
         The USDA NASS Quick Stats database is the most comprehensive public source of official U.S. agricultural
@@ -28378,7 +28434,7 @@ class NassPanel {
       </div>
     </dialog>
 
-    <dialog class="legend" #legendDialog draggable mapagBringToFront>
+    <dialog class="legend" #legendDialog draggable mapagBringToFront onbody>
       <mapag-dialog-header class="drag-handle"[dialog]="legendDialog">{{ mapper.name() }}</mapag-dialog-header>
       @switch (mapper.settings().fillType) { 
         @case ('solid') {
@@ -28392,7 +28448,7 @@ class NassPanel {
         } 
       }
     </dialog>
-  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}.ctrl-group{display:flex;flex-direction:column;gap:8px}.filter-row{display:flex;flex-direction:column;margin-bottom:8px;font-size:.8em}.filter-row-cols{display:block;column-count:2}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:8px;overflow-y:auto;max-height:420px}.svgicon{height:30px;width:30px;-webkit-mask-size:contain;mask-size:contain}h4,label{display:flex;align-items:center;gap:4px}.info-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px}.info{display:flex;flex-direction:column}.info-label{font-weight:600;font-size:.7em;color:#333}.info-value{font-size:.8em;color:#555}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubDataLayer, selector: "hub-data-layer", inputs: ["visible", "name", "desc", "icon", "shape"], outputs: ["onCustomize", "onCheck"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "component", type: AreaIcon, selector: "area-icon" }, { kind: "component", type: PaletteSelect, selector: "mapag-palette-select", inputs: ["palettes", "palette"], outputs: ["paletteChange"] }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "appearance", "ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd", "itemsChange"] }, { kind: "component", type: ShowHideBtn, selector: "mapag-show-hide-btn", inputs: ["mapper"] }, { kind: "component", type: GradientLegend, selector: "mapag-gradient-legend", inputs: ["settings"] }, { kind: "component", type: StdLegend, selector: "mapag-std-legend", inputs: ["items", "columns"] }, { kind: "component", type: DialogHeader, selector: "mapag-dialog-header", inputs: ["dialog"] }, { kind: "pipe", type: TextPipe, name: "text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}.ctrl-group{display:flex;flex-direction:column;gap:8px}.filter-row{display:flex;flex-direction:column;margin-bottom:8px;font-size:.8em}.filter-row-cols{display:block;column-count:2}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:8px;overflow-y:auto;max-height:420px}.svgicon{height:30px;width:30px;-webkit-mask-size:contain;mask-size:contain}h4,label{display:flex;align-items:center;gap:4px}.info-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px}.info{display:flex;flex-direction:column}.info-label{font-weight:600;font-size:.7em;color:#333}.info-value{font-size:.8em;color:#555}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubDataLayer, selector: "hub-data-layer", inputs: ["visible", "name", "desc", "icon", "shape"], outputs: ["onCustomize", "onCheck"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "component", type: AreaIcon, selector: "area-icon" }, { kind: "component", type: PaletteSelect, selector: "mapag-palette-select", inputs: ["palettes", "palette"], outputs: ["paletteChange"] }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "appearance", "ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd", "itemsChange"] }, { kind: "component", type: ShowHideBtn, selector: "mapag-show-hide-btn", inputs: ["mapper"] }, { kind: "component", type: GradientLegend, selector: "mapag-gradient-legend", inputs: ["settings"] }, { kind: "component", type: StdLegend, selector: "mapag-std-legend", inputs: ["items", "columns"] }, { kind: "component", type: DialogHeader, selector: "mapag-dialog-header", inputs: ["dialog"] }, { kind: "directive", type: OnBodyDirective, selector: "dialog[onBody]" }, { kind: "pipe", type: TextPipe, name: "text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NassPanel, decorators: [{
             type: Component,
@@ -28410,6 +28466,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         StdLegend,
                         DialogHeader,
                         TextPipe,
+                        OnBodyDirective
                     ], template: `
     <hub-data-layer
       [visible]="mapper.settings().visible"
@@ -28422,7 +28479,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
       <area-icon></area-icon>
     </hub-data-layer>
 
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
       <h2>{{ mapper.name() }}</h2>
       <p>
         The USDA NASS Quick Stats database is the most comprehensive public source of official U.S. agricultural
@@ -28589,7 +28646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
       </div>
     </dialog>
 
-    <dialog class="legend" #legendDialog draggable mapagBringToFront>
+    <dialog class="legend" #legendDialog draggable mapagBringToFront onbody>
       <mapag-dialog-header class="drag-handle"[dialog]="legendDialog">{{ mapper.name() }}</mapag-dialog-header>
       @switch (mapper.settings().fillType) { 
         @case ('solid') {
@@ -28603,7 +28660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         } 
       }
     </dialog>
-  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}.ctrl-group{display:flex;flex-direction:column;gap:8px}.filter-row{display:flex;flex-direction:column;margin-bottom:8px;font-size:.8em}.filter-row-cols{display:block;column-count:2}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:8px;overflow-y:auto;max-height:420px}.svgicon{height:30px;width:30px;-webkit-mask-size:contain;mask-size:contain}h4,label{display:flex;align-items:center;gap:4px}.info-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px}.info{display:flex;flex-direction:column}.info-label{font-weight:600;font-size:.7em;color:#333}.info-value{font-size:.8em;color:#555}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
+  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}.ctrl-group{display:flex;flex-direction:column;gap:8px}.filter-row{display:flex;flex-direction:column;margin-bottom:8px;font-size:.8em}.filter-row-cols{display:block;column-count:2}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:8px;overflow-y:auto;max-height:420px}.svgicon{height:30px;width:30px;-webkit-mask-size:contain;mask-size:contain}h4,label{display:flex;align-items:center;gap:4px}.info-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px}.info{display:flex;flex-direction:column}.info-label{font-weight:600;font-size:.7em;color:#333}.info-value{font-size:.8em;color:#555}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }], customizeDialog: [{ type: i0.ViewChild, args: ['customizeDialog', { isSignal: true }] }], legendDialog: [{ type: i0.ViewChild, args: ['legendDialog', { isSignal: true }] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }], settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }] } });
 
 class NassMgrPanel {
@@ -28788,7 +28845,7 @@ class NassMgrPanel {
       <button class="mgr-btn" (click)="toggleDialog()" style="justify-self: center;">Add & Remove Layers</button>
       }
     </mapag-details>
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
       <h2>NASS Data Layers</h2>
       <p>
         Select the NASS Data Layers to the map. Each data layer represents a specific agricultural statistic from the
@@ -28900,11 +28957,11 @@ class NassMgrPanel {
         <button class="btn" (click)="toggleDialog()">Close</button>
       </div>
     </dialog>
-  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}.zones{font-size:.8em}.filters{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap;flex-direction:row}.results{overflow-y:auto}.search{display:flex;gap:4px;align-items:center;margin-bottom:8px;font-size:.8em}.search input[type=radio]{display:none}.search label{display:flex;align-items:center;gap:4px;padding:2px 4px;border:1px solid transparent;cursor:pointer}.search label:has(input[type=radio]:checked){border:1px solid #333;border-radius:4px;background-color:#f0f0f0}.filters select{padding:3px;border:1px solid grey;border-radius:4px}.filters label{font-size:.8em;font-weight:600}dialog h4{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;margin-top:4px}.ctrl-row{grid-template-columns:1fr;font-size:.8em}.zones{max-height:400px;height:400px;overflow-y:auto;margin-top:0}input[type=search]{width:100%;font-size:1em;padding:4px 8px;border-radius:4px;border:1px solid #ccc}label{display:flex;align-items:center;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NassPanel, selector: "hub-nass-panel", inputs: ["map", "settings"], outputs: ["onRemove"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: MapagDetails, selector: "mapag-details", inputs: ["open"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}.zones{font-size:.8em}.filters{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap;flex-direction:row}.results{overflow-y:auto}.search{display:flex;gap:4px;align-items:center;margin-bottom:8px;font-size:.8em}.search input[type=radio]{display:none}.search label{display:flex;align-items:center;gap:4px;padding:2px 4px;border:1px solid transparent;cursor:pointer}.search label:has(input[type=radio]:checked){border:1px solid #333;border-radius:4px;background-color:#f0f0f0}.filters select{padding:3px;border:1px solid grey;border-radius:4px}.filters label{font-size:.8em;font-weight:600}dialog h4{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;margin-top:4px}.ctrl-row{grid-template-columns:1fr;font-size:.8em}.zones{max-height:400px;height:400px;overflow-y:auto;margin-top:0}input[type=search]{width:100%;font-size:1em;padding:4px 8px;border-radius:4px;border:1px solid #ccc}label{display:flex;align-items:center;gap:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: NassPanel, selector: "hub-nass-panel", inputs: ["map", "settings"], outputs: ["onRemove"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: MapagDetails, selector: "mapag-details", inputs: ["open"] }, { kind: "directive", type: OnBodyDirective, selector: "dialog[onBody]" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: NassMgrPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'mapag-nass-select-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, NassPanel, DraggableDialogDirective, BringToFrontDirective, MapagDetails], template: `
+            args: [{ selector: 'mapag-nass-select-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, NassPanel, DraggableDialogDirective, BringToFrontDirective, MapagDetails, OnBodyDirective], template: `
     <mapag-details [open]="true" style="margin-top: 16px;">
       <span summary>NASS</span>
 
@@ -28914,7 +28971,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
       <button class="mgr-btn" (click)="toggleDialog()" style="justify-self: center;">Add & Remove Layers</button>
       }
     </mapag-details>
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
       <h2>NASS Data Layers</h2>
       <p>
         Select the NASS Data Layers to the map. Each data layer represents a specific agricultural statistic from the
@@ -29026,9 +29083,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         <button class="btn" (click)="toggleDialog()">Close</button>
       </div>
     </dialog>
-  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}.zones{font-size:.8em}.filters{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap;flex-direction:row}.results{overflow-y:auto}.search{display:flex;gap:4px;align-items:center;margin-bottom:8px;font-size:.8em}.search input[type=radio]{display:none}.search label{display:flex;align-items:center;gap:4px;padding:2px 4px;border:1px solid transparent;cursor:pointer}.search label:has(input[type=radio]:checked){border:1px solid #333;border-radius:4px;background-color:#f0f0f0}.filters select{padding:3px;border:1px solid grey;border-radius:4px}.filters label{font-size:.8em;font-weight:600}dialog h4{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;margin-top:4px}.ctrl-row{grid-template-columns:1fr;font-size:.8em}.zones{max-height:400px;height:400px;overflow-y:auto;margin-top:0}input[type=search]{width:100%;font-size:1em;padding:4px 8px;border-radius:4px;border:1px solid #ccc}label{display:flex;align-items:center;gap:4px}\n"] }]
+  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}.zones{font-size:.8em}.filters{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap;flex-direction:row}.results{overflow-y:auto}.search{display:flex;gap:4px;align-items:center;margin-bottom:8px;font-size:.8em}.search input[type=radio]{display:none}.search label{display:flex;align-items:center;gap:4px;padding:2px 4px;border:1px solid transparent;cursor:pointer}.search label:has(input[type=radio]:checked){border:1px solid #333;border-radius:4px;background-color:#f0f0f0}.filters select{padding:3px;border:1px solid grey;border-radius:4px}.filters label{font-size:.8em;font-weight:600}dialog h4{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;margin-top:4px}.ctrl-row{grid-template-columns:1fr;font-size:.8em}.zones{max-height:400px;height:400px;overflow-y:auto;margin-top:0}input[type=search]{width:100%;font-size:1em;padding:4px 8px;border-radius:4px;border:1px solid #ccc}label{display:flex;align-items:center;gap:4px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { canAdd: [{ type: i0.Input, args: [{ isSignal: true, alias: "canAdd", required: false }] }], map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }, { type: i0.Output, args: ["currentChange"] }], customizeDialog: [{ type: i0.ViewChild, args: ['customizeDialog', { isSignal: true }] }] } });
 
+class PrintPanel {
+    faPrint = faPrint;
+    map = input(...(ngDevMode ? [undefined, { debugName: "map" }] : []));
+    print() {
+        this.map()?.saveImage();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PrintPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: PrintPanel, isStandalone: true, selector: "mapag-print-panel", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div>
+      <button class="mgr-btn" (click)="print()">
+        <fa-icon [icon]="faPrint"></fa-icon>
+        Print
+      </button>
+    <div>
+
+  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: PrintPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'mapag-print-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FaIconComponent], template: `
+    <div>
+      <button class="mgr-btn" (click)="print()">
+        <fa-icon [icon]="faPrint"></fa-icon>
+        Print
+      </button>
+    <div>
+
+  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}\n"] }]
+        }], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }] } });
+
 class HubRailroadPanel {
     DefaultName = 'railroad';
     map = input(...(ngDevMode ? [undefined, { debugName: "map" }] : []));
@@ -29090,7 +29177,7 @@ class HubRailroadPanel {
     >
       <line-icon></line-icon>
     </hub-data-layer>
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
       <h2>USA Railroads</h2>
       <!-- <img src="assets/images/csbbanner2025.png" alt="Crop Sequence Boundaries Sample Image" style="max-width: 100%; height: auto; margin-bottom: 6px; border-radius: 6px;" /> -->
       <p>
@@ -29207,15 +29294,15 @@ class HubRailroadPanel {
       </div>
     </dialog>
 
-    <dialog class="legend" draggable mapagBringToFront #legendDialog>
+    <dialog class="legend" draggable mapagBringToFront onBody #legendDialog>
       <mapag-dialog-header [dialog]="legendDialog">Railroads</mapag-dialog-header>
       <mapag-std-legend [items]="mapper.legend()"></mapag-std-legend>
     </dialog>
-  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}dialog{max-width:700px}.zones{display:grid;grid-template-columns:1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}.urow{display:grid;grid-template-columns:auto 1fr auto auto auto;column-gap:8px;align-items:center;font-size:.8em;row-gap:6px}input[type=range]{grid-column:unset}label{display:flex;align-items:center;gap:4px;cursor:pointer}.disabledTxt{color:gray}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubDataLayer, selector: "hub-data-layer", inputs: ["visible", "name", "desc", "icon", "shape"], outputs: ["onCustomize", "onCheck"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: LineIcon, selector: "line-icon" }, { kind: "component", type: ShowHideBtn, selector: "mapag-show-hide-btn", inputs: ["mapper"] }, { kind: "component", type: DialogHeader, selector: "mapag-dialog-header", inputs: ["dialog"] }, { kind: "component", type: StdLegend, selector: "mapag-std-legend", inputs: ["items", "columns"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}dialog{max-width:700px}.zones{display:grid;grid-template-columns:1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}.urow{display:grid;grid-template-columns:auto 1fr auto auto auto;column-gap:8px;align-items:center;font-size:.8em;row-gap:6px}input[type=range]{grid-column:unset}label{display:flex;align-items:center;gap:4px;cursor:pointer}.disabledTxt{color:gray}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubDataLayer, selector: "hub-data-layer", inputs: ["visible", "name", "desc", "icon", "shape"], outputs: ["onCustomize", "onCheck"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: LineIcon, selector: "line-icon" }, { kind: "component", type: ShowHideBtn, selector: "mapag-show-hide-btn", inputs: ["mapper"] }, { kind: "component", type: DialogHeader, selector: "mapag-dialog-header", inputs: ["dialog"] }, { kind: "component", type: StdLegend, selector: "mapag-std-legend", inputs: ["items", "columns"] }, { kind: "directive", type: OnBodyDirective, selector: "dialog[onBody]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HubRailroadPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'hub-railroad-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubDataLayer, DraggableDialogDirective, BringToFrontDirective, LineIcon, ShowHideBtn, DialogHeader, StdLegend], template: `
+            args: [{ selector: 'hub-railroad-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubDataLayer, DraggableDialogDirective, BringToFrontDirective, LineIcon, ShowHideBtn, DialogHeader, StdLegend, OnBodyDirective], template: `
     <hub-data-layer
       [visible]="mapper.settings().visible"
       [name]="'US Railroads'"
@@ -29226,7 +29313,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
     >
       <line-icon></line-icon>
     </hub-data-layer>
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
       <h2>USA Railroads</h2>
       <!-- <img src="assets/images/csbbanner2025.png" alt="Crop Sequence Boundaries Sample Image" style="max-width: 100%; height: auto; margin-bottom: 6px; border-radius: 6px;" /> -->
       <p>
@@ -29343,11 +29430,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
       </div>
     </dialog>
 
-    <dialog class="legend" draggable mapagBringToFront #legendDialog>
+    <dialog class="legend" draggable mapagBringToFront onBody #legendDialog>
       <mapag-dialog-header [dialog]="legendDialog">Railroads</mapag-dialog-header>
       <mapag-std-legend [items]="mapper.legend()"></mapag-std-legend>
     </dialog>
-  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}dialog{max-width:700px}.zones{display:grid;grid-template-columns:1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}.urow{display:grid;grid-template-columns:auto 1fr auto auto auto;column-gap:8px;align-items:center;font-size:.8em;row-gap:6px}input[type=range]{grid-column:unset}label{display:flex;align-items:center;gap:4px;cursor:pointer}.disabledTxt{color:gray}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
+  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}dialog{max-width:700px}.zones{display:grid;grid-template-columns:1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}.urow{display:grid;grid-template-columns:auto 1fr auto auto auto;column-gap:8px;align-items:center;font-size:.8em;row-gap:6px}input[type=range]{grid-column:unset}label{display:flex;align-items:center;gap:4px;cursor:pointer}.disabledTxt{color:gray}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }], customizeDialog: [{ type: i0.ViewChild, args: ['customizeDialog', { isSignal: true }] }], legendDialog: [{ type: i0.ViewChild, args: ['legendDialog', { isSignal: true }] }] } });
 
 class HubWatershedPanel {
@@ -29403,7 +29490,7 @@ class HubWatershedPanel {
     >
       <area-icon></area-icon>
     </hub-data-layer>
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
       <h2>USGS Watershed Boundary Dataset</h2>
       <p>
         The USGS Watershed Boundary Dataset (WBD) is a national, seamless geospatial dataset that defines the boundaries of surface water drainage areas (watersheds) across the
@@ -29506,11 +29593,11 @@ class HubWatershedPanel {
         <button class="btn" (click)="toggleDialog()">Close</button>
       </div>
     </dialog>
-  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0;font-size:.8em}.zones{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubDataLayer, selector: "hub-data-layer", inputs: ["visible", "name", "desc", "icon", "shape"], outputs: ["onCustomize", "onCheck"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: AreaIcon, selector: "area-icon" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: ShowHideBtn, selector: "mapag-show-hide-btn", inputs: ["mapper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0;font-size:.8em}.zones{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubDataLayer, selector: "hub-data-layer", inputs: ["visible", "name", "desc", "icon", "shape"], outputs: ["onCustomize", "onCheck"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: AreaIcon, selector: "area-icon" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "component", type: ShowHideBtn, selector: "mapag-show-hide-btn", inputs: ["mapper"] }, { kind: "directive", type: OnBodyDirective, selector: "dialog[onBody]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HubWatershedPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'hub-watershed-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubDataLayer, DraggableDialogDirective, BringToFrontDirective, AreaIcon, FaIconComponent, ShowHideBtn], template: `
+            args: [{ selector: 'hub-watershed-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubDataLayer, DraggableDialogDirective, BringToFrontDirective, AreaIcon, FaIconComponent, ShowHideBtn, OnBodyDirective], template: `
     <hub-data-layer
       [visible]="mapper.settings().visible"
       [name]="'USGS Watershed'"
@@ -29521,7 +29608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
     >
       <area-icon></area-icon>
     </hub-data-layer>
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
       <h2>USGS Watershed Boundary Dataset</h2>
       <p>
         The USGS Watershed Boundary Dataset (WBD) is a national, seamless geospatial dataset that defines the boundaries of surface water drainage areas (watersheds) across the
@@ -29624,10 +29711,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         <button class="btn" (click)="toggleDialog()">Close</button>
       </div>
     </dialog>
-  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0;font-size:.8em}.zones{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
+  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0;font-size:.8em}.zones{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }], customizeDialog: [{ type: i0.ViewChild, args: ['customizeDialog', { isSignal: true }] }] } });
 
 class WelcomePanel {
+    faIntro = faInfoCircle;
     displayOnLoad = true;
     customizeDialog = viewChild('customizeDialog', ...(ngDevMode ? [{ debugName: "customizeDialog" }] : []));
     closeButton = viewChild('closeButton', ...(ngDevMode ? [{ debugName: "closeButton" }] : []));
@@ -29663,8 +29751,11 @@ class WelcomePanel {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WelcomePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: WelcomePanel, isStandalone: true, selector: "welcome-panel", viewQueries: [{ propertyName: "customizeDialog", first: true, predicate: ["customizeDialog"], descendants: true, isSignal: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <button class="mgr-btn" (click)="toggleDialog()">Introducton</button>
-    <dialog draggable mapagBringToFront #customizeDialog>
+    <button class="mgr-btn" (click)="toggleDialog()">
+      <fa-icon [icon]="faIntro"></fa-icon>
+      Introduction
+    </button>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
        <div style="display: flex; justify-content: space-around; margin: 16px 0; ">
         <img src="https://static.foodmarketmaker.com/images/logo.png" alt="Food MarketMaker">
       </div>
@@ -29713,13 +29804,16 @@ class WelcomePanel {
         <button class="btn" (click)="toggleDialog(false)" #closeButton>Close</button>
       </div>
     </dialog>
-  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}dialog{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}img{max-height:60px}dialog::backdrop{background-color:#0009}.legend-content{margin-top:16px;display:grid;font-size:.7em;grid-template-columns:1fr 1fr 1fr;gap:4px}.legend-row{display:grid;gap:4px;grid-template-columns:auto 1fr}.legend-item{height:15px;width:15px}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}dialog{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}img{max-height:60px}dialog::backdrop{background-color:#0009}.legend-content{margin-top:16px;display:grid;font-size:.7em;grid-template-columns:1fr 1fr 1fr;gap:4px}.legend-row{display:grid;gap:4px;grid-template-columns:auto 1fr}.legend-item{height:15px;width:15px}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: OnBodyDirective, selector: "dialog[onBody]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WelcomePanel, decorators: [{
             type: Component,
-            args: [{ selector: 'welcome-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, DraggableDialogDirective, BringToFrontDirective], template: `
-    <button class="mgr-btn" (click)="toggleDialog()">Introducton</button>
-    <dialog draggable mapagBringToFront #customizeDialog>
+            args: [{ selector: 'welcome-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, DraggableDialogDirective, BringToFrontDirective, FaIconComponent, OnBodyDirective], template: `
+    <button class="mgr-btn" (click)="toggleDialog()">
+      <fa-icon [icon]="faIntro"></fa-icon>
+      Introduction
+    </button>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
        <div style="display: flex; justify-content: space-around; margin: 16px 0; ">
         <img src="https://static.foodmarketmaker.com/images/logo.png" alt="Food MarketMaker">
       </div>
@@ -29768,7 +29862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         <button class="btn" (click)="toggleDialog(false)" #closeButton>Close</button>
       </div>
     </dialog>
-  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#0a3773;text-align:center;width:100%;font-weight:600;cursor:pointer}.mgr-btn:hover{text-decoration:underline;background-color:transparent}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}dialog{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}img{max-height:60px}dialog::backdrop{background-color:#0009}.legend-content{margin-top:16px;display:grid;font-size:.7em;grid-template-columns:1fr 1fr 1fr;gap:4px}.legend-row{display:grid;gap:4px;grid-template-columns:auto 1fr}.legend-item{height:15px;width:15px}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
+  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog h2{color:#000}dialog h2:before{content:\"\\22ee\\22ee  \";padding-right:4px}dialog h3{color:#000;border-bottom:2px solid gray;font-weight:500;font-size:.9em;margin-top:16px;margin-bottom:8px}dialog h4{color:#000;font-weight:500;margin-bottom:8px;margin-top:12px;font-size:.85em;border:none}dialog p{font-size:.8em}dialog a{text-decoration:none;color:#0a3773;font-weight:500;font-size:.8em;padding-left:4px}dialog a:hover{text-decoration:underline;cursor:pointer}dialog a:before{content:\"\\1f517\";padding-right:2px}.ctrl-group{display:flex;flex-direction:column}.ctrl-row{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:4px;justify-items:start;padding-left:20px}.ctrl-first{grid-column:1}.ctrl-row label{font-size:.8em;margin:0;padding:0;font-weight:400}.ctrl.wide{grid-column:span 3}input[type=range]{grid-column:span 3;justify-self:stretch}input[type=color]{width:40px;height:24px;border-radius:4px;cursor:pointer}input[type=number]{width:6ch;font-size:.8em}.dlg-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}button{background-color:#0a3773;color:#fff;border:none;border-radius:4px;padding:8px 16px;cursor:pointer;font-size:.8em}button:hover{background-color:#083a5c}summary{font-size:1em;font-weight:600;color:#000;cursor:pointer;padding:8px 0;border-bottom:2px solid gray;list-style:none;-webkit-user-select:none;user-select:none;margin-bottom:8px}summary::-webkit-details-marker{display:none}summary:before{content:\"\\304f\";display:inline-block;margin-right:8px;transform:rotate(180deg);transition:transform .2s}details[open] summary:before{transform:rotate(270deg)}.radio-tabs{margin-bottom:12px;font-size:.8em;display:flex;flex-direction:row}.radio-tabs label{display:grid;grid-template-columns:auto 1fr;gap:4px;grid-template-rows:30px;align-items:center}.radio-tabs input[type=radio]{display:none}.radio-tabs label{padding:8px 12px;border:2px solid transparent;border-radius:6px;cursor:pointer;transition:all .2s ease}.radio-tabs label:has(input[type=radio]:checked){background-color:#fff;border-color:#333}.mgr-btn{justify-self:center;background-color:transparent;color:#4c4c4c;text-align:center;width:100%;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:4px 0;padding:6px;gap:4px;border:1px solid rgb(218,218,218)}.mgr-btn:hover{background-color:transparent;border-color:#4c4c4c}.legend-row{display:grid;grid-template-columns:auto 1fr;gap:8px;padding:4px 0;align-items:center}.legend-title{font-weight:700;text-align:center;margin-bottom:8px}.legend-item{height:15px;width:15px;border:1px solid #ccc}.maplibregl-popup-close-button{top:13px;right:15px}dialog{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}img{max-height:60px}dialog::backdrop{background-color:#0009}.legend-content{margin-top:16px;display:grid;font-size:.7em;grid-template-columns:1fr 1fr 1fr;gap:4px}.legend-row{display:grid;gap:4px;grid-template-columns:auto 1fr}.legend-item{height:15px;width:15px}.zone{display:flex;align-items:center;gap:8px;margin:0;padding:0}.zones{display:grid;grid-template-columns:1fr;column-gap:16px;row-gap:8px;overflow-y:auto;max-height:420px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
         }], propDecorators: { customizeDialog: [{ type: i0.ViewChild, args: ['customizeDialog', { isSignal: true }] }], closeButton: [{ type: i0.ViewChild, args: ['closeButton', { isSignal: true }] }] } });
 
 class SettingsPanel {
@@ -29793,5 +29887,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddLayer, AddSource, AreaIcon, AreaMapperMapper, BackgroundMaskMapper, BackgroundMaskSettings, BaseMapLight, BasemapSelect, BasemapSelectMenu, BringToFrontDirective, BringToFrontService, CensusTractMapper, Codes, CropSequenceMapper, CropSequenceSettings, CroplandDataLayerMapper, CroplandDataLayerSettings, CroplandLegend, DEFAULT_GLYPHS, DEFAULT_GLYPHS2, DEFAULT_PIN_URL, DataSetFieldValue, DirectoryIndexPToTable, DirectoryIndexToTable, DraggableDialogDirective, DrawPolygon, DrawSquare, DrawingMapper, EsriMapper, EsriSettings, ExpandArrows, FilterPanel, FipsFromDataSet, FoodHubPanel, FoodhubMapper, FoodhubMapperSettings, HardinessMapper, HardinessSettings, HttpBoundaryLoader, HubCropSequencePanel, HubCroplandPanel, HubDataLayer, HubHardinessPanel, HubNaicsPanel, HubRailroadPanel, HubWatershedPanel, Icons, LineIcon, MMPanel, MapAreaSelectComponent, MapComponent, MapSelectionService, MapService, MapStyles, MapagDetails, MapboxMapperGroup, MarketMakerPopupRenderer, NAASMapper, NAASSettings, NASSInfo, NaicsEmployeesOptions, NaicsMapper, NaicsMapperSettings, NaicsMgrPanel, NaicsSalesOptions, NassIndex, NassInfoFromIndex, NassInfoFromIndexP, NassInfoFromPath, NassMgrPanel, NassPanel, NassService, NoOpMapper, PaletteDisplay, PaletteSelect, PointDataMapper, PointDataMapperSettings, RailroadSettings, RailroadUsageSettings, RailroadsMapper, RasterIcon, ReferenceDataService, RemoveLayer, RemoveSource, SaveMap, SelectMode, SettingsPanel, SimpleMapper, StandardLayersMapper, StateCountySelectComponent, Styles, TableBuilder, TableRow, VectorTileServerMapper, WatershedMapper, WatershedSettings, WelcomePanel, discoverLayers, fixText, isGeoloader, isMultiPolygon, isNumber2DArray, isNumber3DArray, isPolygon, mapboxImageName, mapboxLoadImages, mapboxloadImage, normalize, normalizeArray, pmtilesPixelInfo, prefixMatch, propertiesToTableHtml, randomColor, sampleTilesForLayers, simpleClone, toMultiPolygon, trySync };
+export { AddLayer, AddSource, AreaIcon, AreaMapperMapper, BackgroundMaskMapper, BackgroundMaskSettings, BaseMapLight, BasemapSelect, BasemapSelectMenu, BringToFrontDirective, BringToFrontService, CensusTractMapper, Codes, CropSequenceMapper, CropSequenceSettings, CroplandDataLayerMapper, CroplandDataLayerSettings, CroplandLegend, DEFAULT_GLYPHS, DEFAULT_GLYPHS2, DEFAULT_PIN_URL, DataSetFieldValue, DirectoryIndexPToTable, DirectoryIndexToTable, DraggableDialogDirective, DrawPolygon, DrawSquare, DrawingMapper, EsriMapper, EsriSettings, ExpandArrows, FilterPanel, FipsFromDataSet, FoodHubPanel, FoodhubMapper, FoodhubMapperSettings, HardinessMapper, HardinessSettings, HttpBoundaryLoader, HubCropSequencePanel, HubCroplandPanel, HubDataLayer, HubHardinessPanel, HubNaicsPanel, HubRailroadPanel, HubWatershedPanel, Icons, LineIcon, MMPanel, MapAreaSelectComponent, MapComponent, MapSelectionService, MapService, MapStyles, MapagDetails, MapboxMapperGroup, MarketMakerPopupRenderer, NAASMapper, NAASSettings, NASSInfo, NaicsEmployeesOptions, NaicsMapper, NaicsMapperSettings, NaicsMgrPanel, NaicsSalesOptions, NassIndex, NassInfoFromIndex, NassInfoFromIndexP, NassInfoFromPath, NassMgrPanel, NassPanel, NassService, NoOpMapper, PaletteDisplay, PaletteSelect, PointDataMapper, PointDataMapperSettings, PrintPanel, RailroadSettings, RailroadUsageSettings, RailroadsMapper, RasterIcon, ReferenceDataService, RemoveLayer, RemoveSource, SaveMap, SelectMode, SettingsPanel, SimpleMapper, StandardLayersMapper, StateCountySelectComponent, Styles, TableBuilder, TableRow, VectorTileServerMapper, WatershedMapper, WatershedSettings, WelcomePanel, discoverLayers, fixText, isGeoloader, isMultiPolygon, isNumber2DArray, isNumber3DArray, isPolygon, mapboxImageName, mapboxLoadImages, mapboxloadImage, normalize, normalizeArray, pmtilesPixelInfo, prefixMatch, propertiesToTableHtml, randomColor, sampleTilesForLayers, simpleClone, toMultiPolygon, trySync };
 //# sourceMappingURL=foodmarketmaker-mapag.mjs.map