@foodmarketmaker/mapag 0.0.47 → 0.0.49

package/fesm2022/foodmarketmaker-mapag.mjs

@@ -7,16 +7,16 @@ 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, faChevronRight, faGear, faEye, faEyeSlash, faFill, faPaintBrush, faTimes, faImage, faFilter, faCircle, faFont, faFire, faThLarge, faPrint, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { faMousePointer, faList, faTrashAlt, faChevronRight, faGear, faTimes, faEye, faEyeSlash, faCircle, faFire, faThLarge, faFill, faPaintBrush, faImage, faFilter, faFont, 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';
 import { Subject, firstValueFrom, map } from 'rxjs';
+import maplibregl, { Popup } from 'maplibre-gl';
 import MapboxDraw from 'maplibre-gl-draw';
 import RectangleMode from 'mapbox-gl-draw-rectangle-mode';
 import { saveAs } from 'file-saver';
 import 'mapbox-gl-infobox/styles.css';
-import maplibregl, { Popup } from 'maplibre-gl';
 import bbox from '@turf/bbox';
 import bboxPolygon from '@turf/bbox-polygon';
 import buffer from '@turf/buffer';
@@ -26,6 +26,7 @@ import { BinaryWriter, BinaryReader } from '@bufbuild/protobuf/wire';
 import { featureFilter } from '@mapbox/mapbox-gl-style-spec';
 import { NgSelectComponent, NgLabelTemplateDirective, NgOptionTemplateDirective } from '@ng-select/ng-select';
 import { CdkVirtualScrollViewport, CdkVirtualForOf, CdkFixedSizeVirtualScroll } from '@angular/cdk/scrolling';
+import { DomSanitizer } from '@angular/platform-browser';
 
 function SaveMap(map) {
     var mapCanvas = map.getCanvas();
@@ -33,6 +34,19 @@ function SaveMap(map) {
     // here is the most important part because if you dont replace you will get a DOM 18 exception.
     window.location.href = image;
 }
+function flyToFeature(map, f, zoom = 12) {
+    if (!map) {
+        return;
+    }
+    if (!f.geometry || f.geometry.type !== 'Point') {
+        return;
+    }
+    const coords = f.geometry.coordinates;
+    map.flyTo({
+        center: [coords[0], coords[1]],
+        zoom: zoom,
+    });
+}
 function AddLayer(map, layer, afterId) {
     if (!map)
         return false;
@@ -48,6 +62,19 @@ function AddLayer(map, layer, afterId) {
         return false;
     }
 }
+function ToggleDialog(dialogSignal) {
+    const dialog = dialogSignal();
+    if (!dialog) {
+        return;
+    }
+    const dialogElement = dialog.nativeElement;
+    if (dialogElement.open) {
+        dialogElement.close();
+    }
+    else {
+        dialogElement.show();
+    }
+}
 function RemoveLayer(map, layerId) {
     if (!map)
         return;
@@ -181,9 +208,8 @@ async function sampleTilesForLayers(pmtiles) {
         return [];
     }
 }
-async function pmtilesPixelInfo(url, map, e) {
+async function pmtilesPixelInfo(url, map, lngLat) {
     const pmtiles = new PMTiles(url.replace('pmtiles://', ''));
-    const lngLat = e.lngLat; // {lng, lat}
     // Convert lat/lon to tile coordinates at a chosen zoom
     const zoom = 10; // pick a zoom level for sampling
     const x = Math.floor(((lngLat.lng + 180) / 360) * Math.pow(2, zoom));
@@ -13596,6 +13622,17 @@ class MapboxMapperGroup {
     clear() {
         this.mappers.forEach((mapper) => mapper.clear());
     }
+    renderPopup(f) {
+        for (const [name, mapper] of this.mappers) {
+            if (mapper.renderPopup) {
+                const result = mapper.renderPopup(f);
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        return undefined;
+    }
 }
 
 class StandardLayersMapper {
@@ -13797,8 +13834,14 @@ class AreaMapperMapper {
             this.map.setZoom(src.minZoom);
         }
     }
-    renderPopup(item) {
-        return 'NO POPUP';
+    renderPopup(feature) {
+        if (!this.map) {
+            return undefined;
+        }
+        if (feature.layer.id !== this.layer) {
+            return undefined;
+        }
+        return undefined;
     }
     useStat(id, stats) {
         const i = stats.findIndex((a) => a.id == id);
@@ -14179,6 +14222,31 @@ class MapService {
             this.map.getCanvas().style.cursor = 'pointer';
         }
     }
+    currentPopup = null;
+    handleMapClick(point, lngLat) {
+        if (!this.map)
+            return;
+        if (!this.mapper)
+            return;
+        // Get the features
+        const features = this.map.queryRenderedFeatures(point);
+        let html = undefined;
+        for (const feature of features) {
+            html = this.mapper.renderPopup(feature);
+            if (html) {
+                break;
+            }
+        }
+        if (html) {
+            if (this.currentPopup) {
+                this.currentPopup.remove();
+            }
+            this.currentPopup = new Popup()
+                .setLngLat(lngLat)
+                .setHTML(html)
+                .addTo(this.map);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MapService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MapService, providedIn: 'root' });
 }
@@ -15092,6 +15160,15 @@ class MapComponent {
                         this.mapper().onReady(map, this.svc);
                     });
                 });
+                map.on('click', (e) => {
+                    this.svc.handleMapClick(e.point, e.lngLat);
+                });
+                map.on('touchend', (e) => {
+                    // Ignore multi-touch events
+                    if (e.points && e.points.length == 1) {
+                        this.svc.handleMapClick(e.point, e.lngLat);
+                    }
+                });
             }
         });
     }
@@ -16083,7 +16160,7 @@ class CroplandDataLayerMapper {
             if (!this.settings().visible) {
                 return;
             }
-            const pixel = await pmtilesPixelInfo(CroplandDataLayerMapper.PMTILES, map, e);
+            const pixel = await pmtilesPixelInfo(CroplandDataLayerMapper.PMTILES, map, e.lngLat);
             if (!pixel) {
                 console.error('No pixel data returned');
                 return;
@@ -16614,53 +16691,40 @@ class CropSequenceMapper {
             type: 'line',
         }, StandardLayersMapper.POLYGONS_BACKGROUND);
         this._update(this.settings());
-        if (!addedFill) {
-            return;
+    }
+    renderPopup(feature) {
+        if (!this.map) {
+            return undefined;
         }
-        map.on('mousemove', this.FILL_LAYER_ID, (e) => {
-            this.over.set(e.features && e.features.length > 0 ? e.features[0] : null);
-        });
-        map.on('click', this.FILL_LAYER_ID, (e) => {
-            // Publish
-            this.over.set(e.features && e.features.length > 0 ? e.features[0] : null);
-            if (e.features && e.features.length > 0) {
-                const feature = e.features[0];
-                const coordinates = e.lngLat;
-                if (this.popup) {
-                    this.popup.remove();
-                }
-                const tb = new TableBuilder();
-                const crop2017 = this.lookupClass(feature.properties ? feature.properties['CDL2017'] : null);
-                const crop2018 = this.lookupClass(feature.properties ? feature.properties['CDL2018'] : null);
-                const crop2019 = this.lookupClass(feature.properties ? feature.properties['CDL2019'] : null);
-                const crop2020 = this.lookupClass(feature.properties ? feature.properties['CDL2020'] : null);
-                const crop2021 = this.lookupClass(feature.properties ? feature.properties['CDL2021'] : null);
-                const crop2022 = this.lookupClass(feature.properties ? feature.properties['CDL2022'] : null);
-                const crop2023 = this.lookupClass(feature.properties ? feature.properties['CDL2023'] : null);
-                const crop2024 = this.lookupClass(feature.properties ? feature.properties['CDL2024'] : null);
-                tb.addHeader('Year', 'Crop Type');
-                tb.add('2024', crop2024 ?? 'Unknown');
-                tb.add('2023', crop2023 ?? 'Unknown');
-                tb.add('2022', crop2022 ?? 'Unknown');
-                tb.add('2021', crop2021 ?? 'Unknown');
-                tb.add('2020', crop2020 ?? 'Unknown');
-                tb.add('2019', crop2019 ?? 'Unknown');
-                tb.add('2018', crop2018 ?? 'Unknown');
-                tb.add('2017', crop2017 ?? 'Unknown');
-                tb.addHeader('Location', "");
-                tb.add('State FIPS', feature.properties ? feature.properties['STATEFIPS'] : 'Unknown');
-                tb.add('County', feature.properties ? feature.properties['CNTY'] : 'Unknown');
-                tb.add('County FIPS', feature.properties ? feature.properties['CNTYFIPS'] : 'Unknown');
-                tb.add('ASD', feature.properties ? feature.properties['ASD'] : 'Unknown');
-                tb.add('Area (M²)', feature.properties ? feature.properties['Shape_Area'] : 'Unknown');
-                const fieldsHtml = tb.toHtml();
-                this.currentFeatureID = feature?.properties?.['globalid'];
-                this.popup = new Popup({ maxWidth: '400px' })
-                    .setLngLat(coordinates)
-                    .setHTML(`<strong>Crop Sequence</strong><br/>${fieldsHtml}`)
-                    .addTo(map);
-            }
-        });
+        if (feature.layer.id !== this.FILL_LAYER_ID && feature.layer.id !== this.LINE_LAYER_ID) {
+            return undefined;
+        }
+        const tb = new TableBuilder();
+        const crop2017 = this.lookupClass(feature.properties ? feature.properties['CDL2017'] : null);
+        const crop2018 = this.lookupClass(feature.properties ? feature.properties['CDL2018'] : null);
+        const crop2019 = this.lookupClass(feature.properties ? feature.properties['CDL2019'] : null);
+        const crop2020 = this.lookupClass(feature.properties ? feature.properties['CDL2020'] : null);
+        const crop2021 = this.lookupClass(feature.properties ? feature.properties['CDL2021'] : null);
+        const crop2022 = this.lookupClass(feature.properties ? feature.properties['CDL2022'] : null);
+        const crop2023 = this.lookupClass(feature.properties ? feature.properties['CDL2023'] : null);
+        const crop2024 = this.lookupClass(feature.properties ? feature.properties['CDL2024'] : null);
+        tb.addHeader('Year', 'Crop Type');
+        tb.add('2024', crop2024 ?? 'Unknown');
+        tb.add('2023', crop2023 ?? 'Unknown');
+        tb.add('2022', crop2022 ?? 'Unknown');
+        tb.add('2021', crop2021 ?? 'Unknown');
+        tb.add('2020', crop2020 ?? 'Unknown');
+        tb.add('2019', crop2019 ?? 'Unknown');
+        tb.add('2018', crop2018 ?? 'Unknown');
+        tb.add('2017', crop2017 ?? 'Unknown');
+        tb.addHeader('Location', "");
+        tb.add('State FIPS', feature.properties ? feature.properties['STATEFIPS'] : 'Unknown');
+        tb.add('County', feature.properties ? feature.properties['CNTY'] : 'Unknown');
+        tb.add('County FIPS', feature.properties ? feature.properties['CNTYFIPS'] : 'Unknown');
+        tb.add('ASD', feature.properties ? feature.properties['ASD'] : 'Unknown');
+        tb.add('Area (M²)', feature.properties ? feature.properties['Shape_Area'] : 'Unknown');
+        const fieldsHtml = tb.toHtml();
+        return fieldsHtml;
     }
     lookupClass(code) {
         const found = CroplandLegend.find((item) => {
@@ -16693,7 +16757,6 @@ class CropSequenceMapper {
     count = 0;
     total = 0;
     map;
-    popup = null;
 }
 class CropSequenceSettings {
     visible = true;
@@ -16951,10 +17014,10 @@ class FoodhubMapper {
         RemoveLayer(this.map, this.CIRCLE_LAYER_ID);
         RemoveLayer(this.map, this.ICON_LAYER_ID);
         RemoveLayer(this.map, this.HEATMAP_LAYER_ID);
-        this.map.off('click', this.CIRCLE_LAYER_ID, this.onClick);
-        this.map.off('click', this.ICON_LAYER_ID, this.onClick);
-        this.map.off('touchend', this.CIRCLE_LAYER_ID, this.onClick);
-        this.map.off('touchend', this.ICON_LAYER_ID, this.onClick);
+        // this.map.off('click', this.CIRCLE_LAYER_ID, this.onClick);
+        // this.map.off('click', this.ICON_LAYER_ID, this.onClick);
+        // this.map.off('touchend', this.CIRCLE_LAYER_ID, this.onClick);
+        // this.map.off('touchend', this.ICON_LAYER_ID, this.onClick);
         this.count = 0;
     }
     updateLegend(settings) {
@@ -16993,14 +17056,14 @@ class FoodhubMapper {
             // this.addClusterLayers(map);
         }
         // Add popup on click
-        this.map.off('click', this.CIRCLE_LAYER_ID, this.onClick);
-        this.map.off('click', this.ICON_LAYER_ID, this.onClick);
-        this.map.off('touchend', this.CIRCLE_LAYER_ID, this.onClick);
-        this.map.off('touchend', this.ICON_LAYER_ID, this.onClick);
-        map.on('click', this.CIRCLE_LAYER_ID, this.onClick);
-        map.on('click', this.ICON_LAYER_ID, this.onClick);
-        map.on('touchend', this.CIRCLE_LAYER_ID, this.onClick);
-        map.on('touchend', this.ICON_LAYER_ID, this.onClick);
+        // this.map.off('click', this.CIRCLE_LAYER_ID, this.onClick);
+        // this.map.off('click', this.ICON_LAYER_ID, this.onClick);
+        // this.map.off('touchend', this.CIRCLE_LAYER_ID, this.onClick);
+        // this.map.off('touchend', this.ICON_LAYER_ID, this.onClick);
+        // map.on('click', this.CIRCLE_LAYER_ID, this.onClick);
+        // map.on('click', this.ICON_LAYER_ID, this.onClick);
+        // map.on('touchend', this.CIRCLE_LAYER_ID, this.onClick);
+        // map.on('touchend', this.ICON_LAYER_ID, this.onClick);
         this.filter(map);
         untracked(() => this.updateLegend(settings));
     }
@@ -17159,40 +17222,44 @@ class FoodhubMapper {
     getSettings() {
         return { ...this.settings() };
     }
-    onClick = (e) => {
+    // onClick = (e: MapLayerMouseEvent | MapLayerTouchEvent) => {
+    //   if (!this.map) {
+    //     return;
+    //   }
+    //   const map = this.map;
+    //   let features;
+    //   const settings = this.settings();
+    //   if (settings.type == 'circle') {
+    //     features = this.map.queryRenderedFeatures(e.point, {
+    //       layers: [this.CIRCLE_LAYER_ID],
+    //     });
+    //   } else if (settings.type == 'icon') {
+    //     features = this.map.queryRenderedFeatures(e.point, {
+    //       layers: [this.ICON_LAYER_ID],
+    //     });
+    //   }
+    //   if (!features || features.length == 0) {
+    //     return;
+    //   }
+    //   if (features.length > 0) {
+    //     const item = features[0];
+    //     if (item) {
+    //       console.debug('Rendering Popup for ' + item.id + ' in ' + this.ICON_LAYER_ID);
+    //       const html = this.renderPopup(item);
+    //       if (!html) {
+    //         return;
+    //       }
+    //       new Popup().setLngLat(e.lngLat).setHTML(html).addTo(map);
+    //     }
+    //   }
+    // };
+    renderPopup(f) {
         if (!this.map) {
-            return;
-        }
-        const map = this.map;
-        let features;
-        const settings = this.settings();
-        if (settings.type == 'circle') {
-            features = this.map.queryRenderedFeatures(e.point, {
-                layers: [this.CIRCLE_LAYER_ID],
-            });
-        }
-        else if (settings.type == 'icon') {
-            features = this.map.queryRenderedFeatures(e.point, {
-                layers: [this.ICON_LAYER_ID],
-            });
-        }
-        if (!features || features.length == 0) {
-            return;
+            return undefined;
         }
-        if (features.length > 0) {
-            const item = features[0];
-            if (item) {
-                console.debug('Rendering Popup for ' + item.id + ' in ' + this.ICON_LAYER_ID);
-                this.renderPopup(item).then((html) => {
-                    if (!html) {
-                        return;
-                    }
-                    new Popup().setLngLat(e.lngLat).setHTML(html).addTo(map);
-                });
-            }
+        if (f.layer.id !== this.CIRCLE_LAYER_ID && f.layer.id !== this.ICON_LAYER_ID && f.layer.id !== this.HEATMAP_LAYER_ID) {
+            return undefined;
         }
-    };
-    async renderPopup(f) {
         if (!f || !f.properties) {
             return undefined;
         }
@@ -17286,36 +17353,27 @@ class HardinessMapper {
             type: 'fill',
         }, StandardLayersMapper.POLYGONS_BACKGROUND);
         this._update(this.settings());
-        if (added) {
-            map.on('mousemove', this.LAYER_ID, (e) => {
-                this.over.set(e.features && e.features.length > 0 ? e.features[0] : null);
-            });
-            map.on('click', this.LAYER_ID, (e) => {
-                // Publish
-                this.over.set(e.features && e.features.length > 0 ? e.features[0] : null);
-                if (e.features && e.features.length > 0) {
-                    const feature = e.features[0];
-                    const coordinates = e.lngLat;
-                    const name = feature.properties
-                        ? feature.properties['zone']
-                        : 'Unknown';
-                    // Ensure that if the popup is already open, we don't create a new one
-                    if (this.popup) {
-                        this.popup.remove();
-                    }
-                    const fields = feature.properties
-                        ? Object.entries(feature.properties)
-                            .map(([key, value]) => `<strong>${key}:</strong> ${value}`)
-                            .join('<br/>')
-                        : '';
-                    this.currentFeatureID = feature?.properties?.['globalid'];
-                    this.popup = new Popup({ maxWidth: '400px' })
-                        .setLngLat(coordinates)
-                        .setHTML(`<strong>Hardiness:</strong> ${name}<hr /><br/>${fields}`)
-                        .addTo(map);
-                }
-            });
+    }
+    renderPopup(feature) {
+        if (!this.map) {
+            return undefined;
+        }
+        if (feature.layer.id !== this.LAYER_ID) {
+            return undefined;
+        }
+        const name = feature.properties
+            ? feature.properties['zone']
+            : 'Unknown';
+        // Ensure that if the popup is already open, we don't create a new one
+        if (this.popup) {
+            this.popup.remove();
         }
+        const fields = feature.properties
+            ? Object.entries(feature.properties)
+                .map(([key, value]) => `<strong>${key}:</strong> ${value}`)
+                .join('<br/>')
+            : '';
+        return `<strong>Hardiness:</strong> ${name}<hr /><br/>${fields}`;
     }
     update(newSettings) {
         this.settings.set({ ...this.settings(), ...newSettings });
@@ -21357,8 +21415,8 @@ class NAASMapper {
             return ds.name;
         }
         if (ds) {
-            const commodity = DataSetFieldValue(ds, -1, "COMMODITY_DESC") || 'UNKNOWN';
-            const year = DataSetFieldValue(ds, -1, "YEAR");
+            const commodity = DataSetFieldValue$1(ds, -1, "COMMODITY_DESC") || 'UNKNOWN';
+            const year = DataSetFieldValue$1(ds, -1, "YEAR");
             if (year) {
                 return `${commodity} (${year})`;
             }
@@ -21378,8 +21436,8 @@ class NAASMapper {
             return ds.name;
         }
         if (ds) {
-            const commodity = DataSetFieldValue(ds, -1, "PRODN_PRACTICE_DESC") || '';
-            const units = DataSetFieldValue(ds, -1, "UNIT_DESC") || '';
+            const commodity = DataSetFieldValue$1(ds, -1, "PRODN_PRACTICE_DESC") || '';
+            const units = DataSetFieldValue$1(ds, -1, "UNIT_DESC") || '';
             return `${commodity} (${units})`;
         }
         return 'NASS Data';
@@ -21418,7 +21476,7 @@ class NAASMapper {
             if (!row || !row.cells) {
                 continue;
             }
-            const fips = FipsFromDataSet(dataSet, i);
+            const fips = FipsFromDataSet$1(dataSet, i);
             if (!fips || fips.endsWith("998") || fips.endsWith("999")) {
                 // Skip invalid or unknown FIPS
                 continue;
@@ -21541,8 +21599,6 @@ class NAASMapper {
                 visibility: 'none',
             },
         }, StandardLayersMapper.POLYGONS_BACKGROUND);
-        map.off('click', this.LAYER_ID, this.onClick);
-        map.on('click', this.LAYER_ID, this.onClick);
     }
     setFeatureStates(settings, fs) {
         if (!this.map) {
@@ -21661,76 +21717,72 @@ class NAASMapper {
     }
     clear() {
         if (this.map) {
-            this.map.off('click', this.LAYER_ID, this.onClick);
             RemoveLayer(this.map, this.LAYER_ID);
             RemoveLayer(this.map, this.SOURCE_ID);
         }
     }
-    onClick = async (e) => {
+    renderPopup(feature) {
+        // Determine if this is mine
         if (!this.map) {
-            return;
+            return undefined;
+        }
+        if (feature.layer.id !== this.LAYER_ID) {
+            return undefined;
         }
         const settings = this.settings();
         const src = Layers.FindVector(settings.areaType);
         if (!src) {
             console.warn('ChoroplethMapper: No source found for area type ', settings.areaType);
-            return;
+            return undefined;
         }
-        const features = this.map.queryRenderedFeatures(e.point, {
-            layers: [this.LAYER_ID],
+        const state = this.map.getFeatureState({
+            source: this.SOURCE_ID,
+            sourceLayer: src.Source,
+            id: feature.id
         });
-        if (features.length > 0) {
-            e.preventDefault();
-            if (this.current) {
-                this.current.remove();
-                this.current = null;
-            }
-            const f = features[0];
-            const state = this.map.getFeatureState({
-                source: this.SOURCE_ID,
-                sourceLayer: src.Source,
-                id: f.id
-            });
-            const html = await this.RenderPopup(f, state);
-            if (html) {
-                this.current = new Popup().setLngLat(e.lngLat).setHTML(html).addTo(this.map);
-            }
-        }
-    };
+        return this.RenderPopup(feature, state);
+    }
     RenderPopup(feature, state) {
         const nState = state;
         if (!nState) {
-            return Promise.resolve(undefined);
+            return undefined;
         }
         const ds = nState.dataset;
         if (!ds) {
-            return Promise.resolve(undefined);
+            return undefined;
         }
         const tab = new TableBuilder();
-        tab.add("Source", DataSetFieldValue(ds, nState.row, "SOURCE_DESC") || "");
-        tab.add("Sector", DataSetFieldValue(ds, nState.row, "SECTOR_DESC") || "");
-        tab.add("Group", DataSetFieldValue(ds, nState.row, "GROUP_DESC") || "");
-        tab.add("Commodity", DataSetFieldValue(ds, nState.row, "COMMODITY_DESC") || "");
-        tab.add("Production", DataSetFieldValue(ds, nState.row, "PRODN_PRACTICE_DESC") || "");
-        tab.add("Utilization", DataSetFieldValue(ds, nState.row, "UTIL_PRACTICE_DESC") || "");
-        tab.add("Statistic", DataSetFieldValue(ds, nState.row, "STATISTICCAT_DESC") || "");
-        tab.add("Unit", DataSetFieldValue(ds, nState.row, "UNIT_DESC") || "");
-        tab.add("State", DataSetFieldValue(ds, nState.row, "STATE_ABBR") || "");
-        tab.add("County", DataSetFieldValue(ds, nState.row, "COUNTY_CODE") || "");
-        tab.add("Year", DataSetFieldValue(ds, nState.row, "YEAR") || "");
-        tab.add("Value", nState?.value);
-        tab.add("RAW Value", nState?.raw);
-        tab.add("MIN Value", nState?.min || "");
-        tab.add("MAX Value", nState?.max || "");
-        return Promise.resolve(tab.toHtml());
+        tab.add("Source", DataSetFieldValue$1(ds, nState.row, "SOURCE_DESC") || "");
+        tab.add("Sector", DataSetFieldValue$1(ds, nState.row, "SECTOR_DESC") || "");
+        tab.add("Group", DataSetFieldValue$1(ds, nState.row, "GROUP_DESC") || "");
+        tab.add("Commodity", DataSetFieldValue$1(ds, nState.row, "COMMODITY_DESC") || "");
+        tab.add("Production", DataSetFieldValue$1(ds, nState.row, "PRODN_PRACTICE_DESC") || "");
+        tab.add("Utilization", DataSetFieldValue$1(ds, nState.row, "UTIL_PRACTICE_DESC") || "");
+        tab.add("Statistic", DataSetFieldValue$1(ds, nState.row, "STATISTICCAT_DESC") || "");
+        tab.add("Unit", DataSetFieldValue$1(ds, nState.row, "UNIT_DESC") || "");
+        // tab.add("State", DataSetFieldValue(ds, nState.row, "STATE_ABBR") || "")
+        // tab.add("County", DataSetFieldValue(ds, nState.row, "COUNTY_CODE") || "")
+        // tab.add("Year", DataSetFieldValue(ds, nState.row, "YEAR") || "")
+        // tab.add("Value", nState?.value)
+        if (nState.raw !== undefined) {
+            tab.add("Value", nState.raw.toLocaleString());
+        }
+        if (nState.min !== undefined) {
+            tab.add("MIN Value", nState.min.toLocaleString());
+        }
+        if (nState.max !== undefined) {
+            tab.add("MAX Value", nState.max.toLocaleString());
+        }
+        tab.add("GEOID", nState.id);
+        return tab.toHtml();
     }
 }
-function FipsFromDataSet(ds, rowIndex) {
+function FipsFromDataSet$1(ds, rowIndex) {
     if (!ds.schema || !ds.schema.fields) {
         return null;
     }
-    const state = DataSetFieldValue(ds, rowIndex, "STATE_FIPS_CODE");
-    const county = DataSetFieldValue(ds, rowIndex, "COUNTY_CODE");
+    const state = DataSetFieldValue$1(ds, rowIndex, "STATE_FIPS_CODE");
+    const county = DataSetFieldValue$1(ds, rowIndex, "COUNTY_CODE");
     if (county) {
         return county;
     }
@@ -21739,7 +21791,7 @@ function FipsFromDataSet(ds, rowIndex) {
     }
     return null;
 }
-function DataSetFieldValue(ds, rowIndex, field) {
+function DataSetFieldValue$1(ds, rowIndex, field) {
     if (!ds.schema || !ds.data) {
         return null;
     }
@@ -22059,10 +22111,6 @@ class NaicsMapper {
         RemoveLayer(this.map, this.CIRCLE_LAYER_ID);
         RemoveLayer(this.map, this.ICON_LAYER_ID);
         RemoveLayer(this.map, this.HEATMAP_LAYER_ID);
-        this.map.off('click', this.CIRCLE_LAYER_ID, this.onClick);
-        this.map.off('click', this.ICON_LAYER_ID, this.onClick);
-        this.map.off('touchend', this.CIRCLE_LAYER_ID, this.onClick);
-        this.map.off('touchend', this.ICON_LAYER_ID, this.onClick);
         const svc = this.svc();
         if (svc) {
             svc.UpdateLegend(this.id, undefined);
@@ -22140,15 +22188,6 @@ class NaicsMapper {
             // this.addClusterLayers(map);
         }
         console.log('NAICS Mapper created/updated:', this.id, settings);
-        // Add popup on click
-        this.map.off('click', this.CIRCLE_LAYER_ID, this.onClick);
-        this.map.off('click', this.ICON_LAYER_ID, this.onClick);
-        this.map.off('touchend', this.CIRCLE_LAYER_ID, this.onClick);
-        this.map.off('touchend', this.ICON_LAYER_ID, this.onClick);
-        map.on('click', this.CIRCLE_LAYER_ID, this.onClick);
-        map.on('click', this.ICON_LAYER_ID, this.onClick);
-        map.on('touchend', this.CIRCLE_LAYER_ID, this.onClick);
-        map.on('touchend', this.ICON_LAYER_ID, this.onClick);
         this.filter(map, settings);
         untracked(() => this.updateLegend(settings));
     }
@@ -22372,37 +22411,16 @@ class NaicsMapper {
             zoom: 12,
         });
     }
-    onClick = async (e) => {
-        if (!this.map) {
-            return;
-        }
-        const map = this.map;
-        let features;
-        const settings = this.settings();
-        if (settings.type == 'circle') {
-            features = this.map.queryRenderedFeatures(e.point, {
-                layers: [this.CIRCLE_LAYER_ID],
-            });
-        }
-        else if (settings.type == 'icon') {
-            features = this.map.queryRenderedFeatures(e.point, {
-                layers: [this.ICON_LAYER_ID],
-            });
-        }
-        if (!features || features.length == 0) {
-            return;
-        }
-        e.preventDefault();
-        if (this.current) {
-            this.current.remove();
-            this.current = null;
+    renderPopup(f) {
+        if (!this.map || !f || !f.layer) {
+            return undefined;
         }
-        const html = this.renderPopup(features[0]);
-        if (html) {
-            this.current = new Popup().setLngLat(e.lngLat).setHTML(html).addTo(this.map);
+        if (f.layer.id !== this.CIRCLE_LAYER_ID && f.layer.id !== this.ICON_LAYER_ID && f.layer.id !== this.HEATMAP_LAYER_ID) {
+            return undefined;
         }
-    };
-    renderPopup(f) {
+        return this.renderInfo(f);
+    }
+    renderInfo(f) {
         if (!f || !f.properties) {
             return undefined;
         }
@@ -23845,6 +23863,7 @@ class PointDataMapperSettings {
     filterState;
     filterStates = [];
     showLegend = false;
+    externalLoad = true; // If true, the mapper will load data from the provided source URL instead of relying on mapbox source loading. This allows for better handling of large datasets and loading states.
 }
 class PointDataMapper {
     static CLUSTERS = [
@@ -23885,6 +23904,7 @@ class PointDataMapper {
     itemsFC;
     popupRenderer;
     id;
+    watcher = new SourceLoadWatcher();
     POINT_LAYER_ID;
     HEAT_LAYER_ID;
     ICON_LAYER_ID;
@@ -23897,6 +23917,7 @@ class PointDataMapper {
         return settings.source;
     }, ...(ngDevMode ? [{ debugName: "geoJsonUrl" }] : []));
     geoJsonResource = httpResource(() => this.geoJsonUrl() || undefined);
+    dataCnt = 0;
     constructor(popupRenderer, settings) {
         this.id = 'points-' + Math.random().toString(36).substring(2, 15);
         this.popupRenderer = popupRenderer;
@@ -23932,34 +23953,56 @@ class PointDataMapper {
             this._update(this.settings());
         }, ...(ngDevMode ? [{ debugName: "_updateGlobal" }] : []));
     }
-    // data = computed(() => {
-    //   // Check if data is still loading or has an error
-    //   const settings = this.settings();
-    //   if (this.geoJsonResource.isLoading()) {
-    //     return [];
-    //   }
-    //   if (this.geoJsonResource.error()) {
-    //     console.error('Failed to load GeoJSON:', this.geoJsonResource.error());
-    //     return [];
-    //   }
-    //   // Check if we have loaded data
-    //   if (!this.geoJsonResource.hasValue()) {
-    //     return [];
-    //   }
-    //   const svc = this.svc();
-    //   if (!svc) {
-    //     return [];
-    //   }
-    //   svc.stateCountyFilter(); // depend
-    //   const geoJsonData = this.geoJsonResource.value() as FeatureCollection;
-    //   const features = geoJsonData?.features || [];
-    //   if (!features || features.length === 0) {
-    //     return [];
-    //   }
-    //   const filter = this.getFilter(settings);
-    //   const filtered = Filter(features, filter as any);
-    //   return filtered || [];
-    // })
+    data = computed(() => {
+        this.dataCnt++;
+        this.watcher.updated(); // depend on source data changes
+        const settings = this.settings();
+        console.log('Data computed for', this.id, 'count', this.dataCnt);
+        if (!this.map) {
+            return [];
+        }
+        const map = this.map;
+        const filter = this.getFilter(settings);
+        if (settings.externalLoad) {
+            // Check if data is still loading or has an error
+            if (this.geoJsonResource.isLoading()) {
+                return [];
+            }
+            if (this.geoJsonResource.error()) {
+                console.error('Failed to load GeoJSON:', this.geoJsonResource.error());
+                return [];
+            }
+            // Check if we have loaded data
+            if (!this.geoJsonResource.hasValue()) {
+                return [];
+            }
+            const geoJsonData = this.geoJsonResource.value();
+            const features = geoJsonData?.features || [];
+            if (!features || features.length === 0) {
+                return [];
+            }
+            const filtered = Filter(features, filter);
+            return filtered || [];
+        }
+        else {
+            const features = map.querySourceFeatures(this.id, {
+                filter: filter ? filter : undefined,
+            });
+            return features || [];
+        }
+    }, ...(ngDevMode ? [{ debugName: "data" }] : []));
+    renderPopup(f) {
+        if (!this.map) {
+            return undefined;
+        }
+        if (f.layer.id !== this.HEAT_LAYER_ID && f.layer.id !== this.ICON_LAYER_ID && f.layer.id !== this.POINT_LAYER_ID) {
+            return undefined;
+        }
+        if (this.popupRenderer) {
+            return this.popupRenderer.RenderPopup(f);
+        }
+        return undefined;
+    }
     update(settings) {
         this.settings.set({ ...this.settings(), ...settings });
     }
@@ -24039,7 +24082,7 @@ class PointDataMapper {
     getFilter(settings) {
         // Build filter conditions for each field
         const conditions = ['all'];
-        const fipsFilter = this.getFipsFilter();
+        const fipsFilter = this.getFipsFilter(settings);
         if (fipsFilter && fipsFilter.length > 0) {
             const filter = [
                 'any',
@@ -24068,6 +24111,7 @@ class PointDataMapper {
     }
     onReady(map, svc) {
         this.map = map;
+        this.watcher.on(map, this.id);
         this.svc.set(svc);
         this.loadSource();
     }
@@ -24094,10 +24138,10 @@ class PointDataMapper {
                 RemoveLayer(this.map, c.iconLayer);
             }
         }
-        this.map.off('click', this.POINT_LAYER_ID, this.onClick);
-        this.map.off('touchend', this.POINT_LAYER_ID, this.onClick);
-        this.map.off('click', this.ICON_LAYER_ID, this.onClick);
-        this.map.off('touchend', this.ICON_LAYER_ID, this.onClick);
+        // this.map.off('click', this.POINT_LAYER_ID, this.onClick);
+        // this.map.off('touchend', this.POINT_LAYER_ID, this.onClick);
+        // this.map.off('click', this.ICON_LAYER_ID, this.onClick);
+        // this.map.off('touchend', this.ICON_LAYER_ID, this.onClick);
         RemoveSource(this.map, `${this.id}-source`);
     }
     loadSource() {
@@ -24117,17 +24161,16 @@ class PointDataMapper {
                 type: 'geojson',
                 data: sourceURL,
             });
-            map.on('click', this.POINT_LAYER_ID, this.onClick);
-            map.on('touchend', this.POINT_LAYER_ID, this.onClick);
-            map.on('click', this.ICON_LAYER_ID, this.onClick);
-            map.on('touchend', this.ICON_LAYER_ID, this.onClick);
+            // map.on('click', this.POINT_LAYER_ID, this.onClick);
+            // map.on('touchend', this.POINT_LAYER_ID, this.onClick);
+            // map.on('click', this.ICON_LAYER_ID, this.onClick);
+            // map.on('touchend', this.ICON_LAYER_ID, this.onClick);
         }
         else if (currentSource._data !== sourceURL) {
             currentSource.setData(sourceURL);
         }
     }
-    getFipsFilter() {
-        const settings = this.settings();
+    getFipsFilter(settings) {
         if (settings.filterOverrideGlobal) {
             if (settings.filterStates && settings.filterStates.length > 0) {
                 return settings.filterStates;
@@ -24312,32 +24355,31 @@ class PointDataMapper {
             }, StandardLayersMapper.POINTS);
         });
     }
-    onClick = async (e) => {
-        if (!this.map) {
-            return;
-        }
-        let features = [];
-        const settings = this.settings();
-        if (settings.type == 'circle') {
-            features = this.map.queryRenderedFeatures(e.point, { layers: [this.POINT_LAYER_ID] });
-        }
-        else if (settings.type == 'icon') {
-            features = this.map.queryRenderedFeatures(e.point, { layers: [this.ICON_LAYER_ID] });
-        }
-        if (!features || features.length == 0) {
-            return;
-        }
-        if (this.current) {
-            this.current.remove();
-            this.current = null;
-        }
-        if (this.popupRenderer) {
-            const html = await this.popupRenderer.RenderPopup(features[0]);
-            if (html) {
-                this.current = new Popup().setLngLat(e.lngLat).setHTML(html).addTo(this.map);
-            }
-        }
-    };
+    // onClick = async (e: MapLayerMouseEvent | MapLayerTouchEvent) => {
+    //   if (!this.map) {
+    //     return;
+    //   }
+    //   let features: GeoJSON.Feature[] = [];
+    //   const settings = this.settings();
+    //   if (settings.type == 'circle') {
+    //     features = this.map.queryRenderedFeatures(e.point, { layers: [this.POINT_LAYER_ID] });
+    //   } else if (settings.type == 'icon') {
+    //     features = this.map.queryRenderedFeatures(e.point, { layers: [this.ICON_LAYER_ID] });
+    //   }
+    //   if (!features || features.length == 0) {
+    //     return;
+    //   }
+    //   if (this.current) {
+    //       this.current.remove();
+    //       this.current = null;
+    //   }  
+    //   if (this.popupRenderer) {
+    //     const html = await this.popupRenderer.RenderPopup(features[0]);
+    //     if (html) {
+    //       this.current = new Popup().setLngLat(e.lngLat).setHTML(html).addTo(this.map);
+    //     }
+    //   }
+    // };
     getSettings() {
         return { ...this.settings() };
     }
@@ -24442,40 +24484,30 @@ class RailroadsMapper {
             console.warn('RailroadsMapper: style has no `glyphs` URL — skipping labels layer to avoid PBF/glyph parse errors. Switch to a style with glyphs to enable labels.');
         }
         this._update(this.settings());
-        if (!added) {
-            return;
+    }
+    renderPopup(feature) {
+        if (!this.map) {
+            return undefined;
         }
-        map.on('click', this.LINE_LAYER_ID, (e) => {
-            // Publish
-            this.over.set(e.features && e.features.length > 0 ? e.features[0] : null);
-            if (e.features && e.features.length > 0) {
-                const feature = e.features[0];
-                const coordinates = e.lngLat;
-                if (this.popup) {
-                    this.popup.remove();
-                }
-                const name = feature.properties['name'];
-                const tb = new TableBuilder();
-                tb.add('Length', this.fmtDistance(feature.properties['lengthkm']));
-                tb.add('Owner', feature.properties['railowner'] ?? '');
-                tb.add('Owner Code', feature.properties['railownercode'] ?? '');
-                tb.add('Usage', this.usageLabel(feature.properties['railusage'] ?? 0));
-                tb.add('Source', feature.properties['source_datadesc'] ?? '');
-                tb.add('Originator', feature.properties['source_originator'] ?? '');
-                tb.add('Load Date', feature.properties['loaddate'] ?? '');
-                const fieldsHtml = tb.toHtml();
-                let html = "";
-                if (name) {
-                    html += `<strong>${name}</strong><br/>`;
-                }
-                html += fieldsHtml;
-                this.currentFeatureID = feature?.properties?.['globalid'];
-                this.popup = new Popup({ maxWidth: '400px' })
-                    .setLngLat(coordinates)
-                    .setHTML(html)
-                    .addTo(map);
-            }
-        });
+        if (feature.layer.id !== this.LINE_LAYER_ID && feature.layer.id !== this.LABEL_LAYER_ID) {
+            return undefined;
+        }
+        const name = feature.properties['name'];
+        const tb = new TableBuilder();
+        tb.add('Length', this.fmtDistance(feature.properties['lengthkm']));
+        tb.add('Owner', feature.properties['railowner'] ?? '');
+        tb.add('Owner Code', feature.properties['railownercode'] ?? '');
+        tb.add('Usage', this.usageLabel(feature.properties['railusage'] ?? 0));
+        tb.add('Source', feature.properties['source_datadesc'] ?? '');
+        tb.add('Originator', feature.properties['source_originator'] ?? '');
+        tb.add('Load Date', feature.properties['loaddate'] ?? '');
+        const fieldsHtml = tb.toHtml();
+        let html = "";
+        if (name) {
+            html += `<strong>${name}</strong><br/>`;
+        }
+        html += fieldsHtml;
+        return html;
     }
     fmtDistance(km) {
         if (!km) {
@@ -25023,42 +25055,34 @@ class WatershedMapper {
                 }
             }
         });
-        map.on('mousemove', this.FILL_LAYER_ID, (e) => {
-            this.over.set(e.features && e.features.length > 0 ? e.features[0] : null);
-        });
-        map.on('click', this.FILL_LAYER_ID, (e) => {
-            // Publish
-            this.over.set(e.features && e.features.length > 0 ? e.features[0] : null);
-            if (e.features && e.features.length > 0) {
-                const feature = e.features[0];
-                const coordinates = e.lngLat;
-                console.log('Feature properties:', feature.properties);
-                const name = feature.properties
-                    ? feature.properties['name']
-                    : 'Unknown';
-                // Ensure that if the popup is already open, we don't create a new one
-                if (this.popup) {
-                    this.popup.remove();
-                }
-                const fields = feature.properties
-                    ? Object.entries(feature.properties)
-                        .map(([key, value]) => `<strong>${key}:</strong> ${value}`)
-                        .join('<br/>')
-                    : '';
-                this.currentFeatureID = feature?.properties?.['globalid'];
-                this.popup = new Popup({ maxWidth: '400px' })
-                    .setLngLat(coordinates)
-                    .setHTML(`<strong>Watershed:</strong> ${name}<hr /><br/>${fields}`)
-                    .addTo(map);
-            }
-        });
-    }
-    async onReady(map, svc) {
-        this.map = map;
-        this.create();
     }
-    reset() { }
-    clear() {
+    renderPopup(feature) {
+        if (!this.map) {
+            return undefined;
+        }
+        if (feature.layer.id !== this.FILL_LAYER_ID && feature.layer.id !== this.LINE_LAYER_ID && feature.layer.id !== this.LABEL_LAYER_ID) {
+            return undefined;
+        }
+        const name = feature.properties
+            ? feature.properties['name']
+            : 'Unknown';
+        // Ensure that if the popup is already open, we don't create a new one
+        if (this.popup) {
+            this.popup.remove();
+        }
+        const fields = feature.properties
+            ? Object.entries(feature.properties)
+                .map(([key, value]) => `<strong>${key}:</strong> ${value}`)
+                .join('<br/>')
+            : '';
+        return `<strong>Watershed:</strong> ${name}<hr /><br/>${fields}`;
+    }
+    async onReady(map, svc) {
+        this.map = map;
+        this.create();
+    }
+    reset() { }
+    clear() {
         if (this.map) {
             this.map.removeLayer(this.FILL_LAYER_ID);
             this.map.removeLayer(this.LINE_LAYER_ID);
@@ -25637,31 +25661,1491 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
   ` }]
         }] });
 
-class ShowHideBtn {
-    faEye = faEye;
-    faEyeSlash = faEyeSlash;
-    mapper = input.required(...(ngDevMode ? [{ debugName: "mapper" }] : []));
-    toggleShowHide() {
-        const current = this.mapper().settings().visible;
-        this.mapper().update({ visible: !current });
+function ConsumerSpendingFromPath(path) {
+    const parts = path.split('/');
+    if (parts.length < 3) {
+        throw new Error('Invalid path format');
+    }
+    const year = parts[0];
+    const measure = parts[1];
+    const valueType = parts[2];
+    // A = Avgerage Spending, T = Total Spending, I = Index
+    // Year/Measure/(A|T|I)
+    return { measure, year, valueType };
+}
+
+/**
+ * The DataSetMapper is responsible for making a Choropleth Map with
+ * a single DataSet dataset.
+ */
+class DataSetMapper {
+    http = inject(HttpClient);
+    ID = Math.random().toString(36).substring(2, 15);
+    LAYER_ID = 'naas-layer-fill-' + this.ID;
+    SOURCE_ID = 'naas-source-' + this.ID;
+    settings = signal(new DataSetSettings(), ...(ngDevMode ? [{ debugName: "settings" }] : []));
+    current = null;
+    currentFeatureID = undefined;
+    over = signal(null, ...(ngDevMode ? [{ debugName: "over" }] : []));
+    map = undefined;
+    svc = signal(null, ...(ngDevMode ? [{ debugName: "svc" }] : []));
+    legends;
+    count = 0;
+    total = 0;
+    // Resource to download and parse the PBF file
+    dataResource = rxResource({
+        params: () => this.settings().path,
+        stream: ({ params }) => {
+            const url = `https://static.foodmarketmaker.com/${params}.pbf`;
+            return this.http.get(url, { responseType: 'arraybuffer' }).pipe(map((buffer) => TabularDataSetP.decode(new Uint8Array(buffer))));
+        }
+    });
+    info = computed(() => {
+        const path = this.settings().path;
+        return this.InfoFromPath(path);
+    }, ...(ngDevMode ? [{ debugName: "info" }] : []));
+    name = computed(() => {
+        if (this.dataResource.isLoading()) {
+            return 'DataSet Loading...';
+        }
+        if (this.dataResource.error()) {
+            return 'DataSet Error...';
+        }
+        const ds = this.dataResource.value();
+        if (ds?.name) {
+            return ds.name;
+        }
+        if (ds) {
+            return this.NameFrom(ds);
+        }
+        return 'Unknown';
+    }, ...(ngDevMode ? [{ debugName: "name" }] : []));
+    desc = computed(() => {
+        if (this.dataResource.isLoading()) {
+            return ' ';
+        }
+        if (this.dataResource.error()) {
+            return ' ';
+        }
+        const ds = this.dataResource.value();
+        if (ds?.description) {
+            return ds.name;
+        }
+        if (ds) {
+            const commodity = DataSetFieldValue(ds, -1, "PRODN_PRACTICE_DESC") || '';
+            const units = DataSetFieldValue(ds, -1, "UNIT_DESC") || '';
+            return `${commodity} (${units})`;
+        }
+        return 'NASS Data';
+    }, ...(ngDevMode ? [{ debugName: "desc" }] : []));
+    // Generate the availble feature states
+    featureStates = computed(() => {
+        const dataSet = this.dataResource.value();
+        if (!dataSet) {
+            return {
+                states: [],
+                min: 0,
+                max: 1,
+            };
+        }
+        const filters = this.svc()?.stateCountyFilter() || [];
+        const fieldState = this.findFirstType(dataSet, TabularFieldUsage.TABULAR_USAGE_FIPS_STATE);
+        const fieldCounty = this.findFirstType(dataSet, TabularFieldUsage.TABULAR_USAGE_FIPS_COUNTY);
+        const fieldValue = this.findFirstType(dataSet, TabularFieldUsage.TABULAR_USAGE_VALUE);
+        let maxV = Number.NEGATIVE_INFINITY;
+        let minV = Number.POSITIVE_INFINITY;
+        // Caclulate min/max if not provided and filter out the rows that are necessary
+        const keep = [];
+        for (let i = 0; i < (dataSet.data?.length || 0); i++) {
+            const row = dataSet.data ? dataSet.data[i] : undefined;
+            if (!row || !row.cells) {
+                continue;
+            }
+            const fips = FipsFromDataSet(dataSet, i);
+            if (!fips || fips.endsWith("998") || fips.endsWith("999")) {
+                // Skip invalid or unknown FIPS
+                continue;
+            }
+            let found = false;
+            for (let f of filters) {
+                if (fips.startsWith(f)) {
+                    // Match filter
+                    found = true;
+                    break;
+                }
+            }
+            if (!found && filters.length > 0) {
+                continue;
+            }
+            const value = row.cells[fieldValue?.index || 0].floatValue || NaN;
+            if (!isNaN(value)) {
+                maxV = Math.max(maxV, value);
+                minV = Math.min(minV, value);
+                keep.push(row);
+            }
+        }
+        // handle edge case
+        if (maxV === Number.NEGATIVE_INFINITY) {
+            maxV = 1;
+        }
+        if (minV === Number.POSITIVE_INFINITY) {
+            minV = 0;
+        }
+        // Set the min max
+        // Feature state is an object with id and value
+        const states = [];
+        for (let i = 0; i < keep.length; i++) {
+            const row = keep[i];
+            if (!row || !row.cells) {
+                continue;
+            }
+            const state = row.cells[fieldState?.index || 0].stringValue;
+            const county = row.cells[fieldCounty?.index || 0].stringValue;
+            const value = row.cells[fieldValue?.index || 0].floatValue || 0.0;
+            const normValue = normalize(value, minV, maxV);
+            const fs = {
+                id: county || state || "UNKNOWN",
+                raw: value || 0.0,
+                value: normValue,
+                row: i,
+                dataset: dataSet,
+                state: state || '',
+                max: maxV,
+                min: minV,
+            };
+            states.push(fs);
+        }
+        return {
+            states: states,
+            min: minV,
+            max: maxV,
+        };
+    }, ...(ngDevMode ? [{ debugName: "featureStates" }] : []));
+    constructor(settings) {
+        if (settings) {
+            this.settings.update(current => ({
+                ...current,
+                ...settings,
+            }));
+        }
+        const _ = effect(() => {
+            const settings = this.settings();
+            const dataset = this.dataResource.value();
+            const features = this.featureStates();
+            this._update(settings, dataset, features.states);
+        }, ...(ngDevMode ? [{ debugName: "_" }] : []));
+        const _updateGlobal = effect(() => {
+            const svc = this.svc();
+            if (!svc) {
+                return;
+            }
+            const _ = svc.stateCountyFilter(); // depend
+            this._update(this.settings(), this.dataResource.value(), this.featureStates().states);
+        }, ...(ngDevMode ? [{ debugName: "_updateGlobal" }] : []));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ShowHideBtn, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: ShowHideBtn, isStandalone: true, selector: "mapag-show-hide-btn", inputs: { mapper: { classPropertyName: "mapper", publicName: "mapper", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    <button class="btn" (click)="toggleShowHide()">
-      <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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}: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"] }] });
+    update(settings) {
+        this.settings.update(current => ({ ...current, ...settings }));
+    }
+    _update(settings, dataSet, featureStates) {
+        if (!this.map) {
+            return;
+        }
+        const map = this.map;
+        this.create();
+        this.setFeatureStates(this.settings(), featureStates);
+        this.updateStyle(settings);
+    }
+    create() {
+        if (!this.map) {
+            return;
+        }
+        const map = this.map;
+        const area = Layers.FindVector(this.settings().areaType);
+        if (!area) {
+            console.error('NAASMapper: Unknown area type ' + this.settings().areaType);
+            return;
+        }
+        AddSource(this.map, this.SOURCE_ID, {
+            type: area.SourceType || 'vector',
+            tiles: [area.URL],
+            promoteId: area.IDField || "GEOID", // promote field to be used as a foreign key
+        });
+        const addedFill = AddLayer(this.map, {
+            id: this.LAYER_ID,
+            type: 'fill',
+            source: this.SOURCE_ID,
+            'source-layer': area.Source,
+            paint: {
+                'fill-outline-color': '#e5541c',
+                'fill-opacity': this.settings().fillOpacity,
+                'fill-color': this.settings().fillColor,
+            },
+            layout: {
+                visibility: 'none',
+            },
+        }, StandardLayersMapper.POLYGONS_BACKGROUND);
+        map.off('click', this.LAYER_ID, this.onClick);
+        map.on('click', this.LAYER_ID, this.onClick);
+    }
+    setFeatureStates(settings, fs) {
+        if (!this.map) {
+            return;
+        }
+        const map = this.map;
+        const states = fs || [];
+        const dataSet = this.dataResource.value();
+        const src = Layers.FindVector(settings.areaType);
+        if (!src) {
+            console.error('NAASMapper: Unknown area type ' + settings.areaType);
+            return;
+        }
+        // Remove all the previous feature states
+        map.removeFeatureState({
+            source: this.SOURCE_ID,
+            sourceLayer: src.Source,
+        });
+        if (!dataSet || !fs) {
+            return;
+        }
+        for (let state of states) {
+            try {
+                map.setFeatureState({
+                    source: this.SOURCE_ID,
+                    sourceLayer: src.Source,
+                    id: state.id,
+                }, state);
+            }
+            catch (e) {
+                console.warn('NAASMapper: Failed to set feature state for id ' + state.id, e);
+            }
+        }
+    }
+    getFipsFilter() {
+        const settings = this.settings();
+        if (settings.filterOverrideGlobal) {
+            if (settings.filterStates && settings.filterStates.length > 0) {
+                return settings.filterStates;
+            }
+            else if (settings.filterState) {
+                return [settings.filterState];
+            }
+        }
+        return this.svc()?.stateCountyFilter();
+    }
+    updateStyle(settings) {
+        if (!this.map) {
+            return;
+        }
+        const map = this.map;
+        if (settings.visible) {
+            map.setLayoutProperty(this.LAYER_ID, 'visibility', 'visible');
+        }
+        else {
+            map.setLayoutProperty(this.LAYER_ID, 'visibility', 'none');
+        }
+        if (settings.fillType === 'palette') {
+            this.map.setPaintProperty(this.LAYER_ID, 'fill-color', [
+                'interpolate',
+                ['linear'],
+                ['feature-state', 'value'],
+                ...ColorPalettes.fromPalette(settings.fillPalette)
+            ]);
+        }
+        else if (settings.fillType === 'gradient') {
+            this.map.setPaintProperty(this.LAYER_ID, 'fill-color', fromGradient(settings.fillGradient, ['feature-state', 'value']));
+        }
+        else if (settings.fillType === 'solid') {
+            this.map.setPaintProperty(this.LAYER_ID, 'fill-color', settings.fillColor);
+        }
+        const filterExpr = prefixMatch(["feature-state", "id"], this.getFipsFilter());
+        if (filterExpr && filterExpr.length > 0) {
+            const conditions = ['all'];
+            conditions.push(['!=', ['feature-state', 'value'], null]),
+                conditions.push(filterExpr);
+            map.setPaintProperty(this.LAYER_ID, 'fill-opacity', [
+                'case',
+                conditions,
+                settings.fillOpacity,
+                0
+            ]);
+        }
+        else {
+            map.setPaintProperty(this.LAYER_ID, 'fill-opacity', [
+                'case',
+                ['!=', ['feature-state', 'value'], null],
+                settings.fillOpacity,
+                0
+            ]);
+        }
+        map.setPaintProperty(this.LAYER_ID, 'fill-outline-color', settings.borderColor);
+    }
+    findFirstType(dataset, usage) {
+        if (!dataset.schema) {
+            return null;
+        }
+        if (!dataset.schema.fields) {
+            return null;
+        }
+        for (let field of Object.keys(dataset.schema?.fields)) {
+            const fieldDef = dataset.schema?.fields[field];
+            if (fieldDef.usage == usage) {
+                return fieldDef;
+            }
+        }
+        return null;
+    }
+    onReady(map, svc) {
+        this.map = map;
+        this.svc.set(svc);
+        this._update(this.settings(), this.dataResource.value(), this.featureStates().states);
+    }
+    reset() {
+        this.clear();
+    }
+    clear() {
+        if (this.map) {
+            this.map.off('click', this.LAYER_ID, this.onClick);
+            RemoveLayer(this.map, this.LAYER_ID);
+            RemoveLayer(this.map, this.SOURCE_ID);
+        }
+    }
+    onClick = async (e) => {
+        if (!this.map) {
+            return;
+        }
+        const settings = this.settings();
+        const src = Layers.FindVector(settings.areaType);
+        if (!src) {
+            console.warn('ChoroplethMapper: No source found for area type ', settings.areaType);
+            return;
+        }
+        const features = this.map.queryRenderedFeatures(e.point, {
+            layers: [this.LAYER_ID],
+        });
+        if (features.length > 0) {
+            e.preventDefault();
+            if (this.current) {
+                this.current.remove();
+                this.current = null;
+            }
+            const f = features[0];
+            const state = this.map.getFeatureState({
+                source: this.SOURCE_ID,
+                sourceLayer: src.Source,
+                id: f.id
+            });
+            const html = await this.RenderPopup(f, state);
+            if (html) {
+                this.current = new Popup().setLngLat(e.lngLat).setHTML(html).addTo(this.map);
+            }
+        }
+    };
+}
+function FipsFromDataSet(ds, rowIndex) {
+    if (!ds.schema || !ds.schema.fields) {
+        return null;
+    }
+    const state = DataSetFieldValue(ds, rowIndex, "STATE_FIPS_CODE");
+    const county = DataSetFieldValue(ds, rowIndex, "COUNTY_CODE");
+    if (county) {
+        return county;
+    }
+    if (state) {
+        return state;
+    }
+    return null;
+}
+function DataSetFieldValue(ds, rowIndex, field) {
+    if (!ds.schema || !ds.data) {
+        return null;
+    }
+    const fieldDef = ds.schema.fields ? ds.schema.fields[field] : null;
+    if (!fieldDef) {
+        return null;
+    }
+    if (fieldDef.staticvalue) {
+        switch (fieldDef.datatype || 0) {
+            case TabularDatatype.TABULAR_DATATYPE_STRING:
+                return fieldDef.staticvalue.stringValue || null;
+            case TabularDatatype.TABULAR_DATATYPE_FLOAT:
+                return fieldDef.staticvalue.floatValue || null;
+            case TabularDatatype.TABULAR_DATATYPE_INTEGER:
+                return fieldDef.staticvalue.intValue || null;
+            default:
+                return null;
+        }
+    }
+    if (rowIndex < 0) {
+        return null;
+    }
+    const index = fieldDef.index || -1;
+    if (index < 0 || rowIndex < 0 || rowIndex >= ds.data.length) {
+        return null;
+    }
+    const row = ds.data[rowIndex];
+    const cell = row.cells ? row.cells[index] : null;
+    if (!cell) {
+        return null;
+    }
+    switch (fieldDef.datatype || 0) {
+        case TabularDatatype.TABULAR_DATATYPE_STRING:
+            return cell.stringValue || null;
+        case TabularDatatype.TABULAR_DATATYPE_FLOAT:
+            return cell.floatValue || null;
+        case TabularDatatype.TABULAR_DATATYPE_INTEGER:
+            return cell.intValue || null;
+        default:
+            return null;
+    }
+}
+class DataSetSettings {
+    path = "";
+    areaType = "county";
+    visible = true;
+    palette = allColors['Spectral']['10'];
+    fillType = 'gradient';
+    fillColor = '#e5541c';
+    fillPalette = ColorPalettes.find('Spectral.10') || ColorPalettes.default();
+    fillGradient = [{ "value": 0.0, "color": "#ffffcc" }, { "value": 1.0, "color": "#000000" }];
+    fillOpacity = 1;
+    filterState = '';
+    filterStates = [];
+    filterOverrideGlobal = false;
+    borderColor = '#e5541c';
+    labelsVisible = true;
+    labelsSize = 10;
+    labelsColor = '#000000';
+    labelsHaloColor = '#ffffff';
+    labelsHaloWidth = 1;
+    labelsOpacity = 1.0;
+    labelOverlap = false;
+    showLegend = false;
+    fipsExcludeSuffixes = ['999', '998', '000'];
+}
+
+class ConsumerSpendingMapper extends DataSetMapper {
+    RenderPopup(feature, state) {
+        if (!state.dataset)
+            return undefined;
+        const data = state.dataset;
+        const name = feature.properties?.['name'] || 'Unknown';
+        const totalSpending = 0;
+        const avgSpending = 0;
+        return `
+      <div>
+        <h3>${name}</h3>
+        <p>Total Spending: $${totalSpending.toLocaleString()}</p>
+        <p>Average Spending: $${avgSpending.toLocaleString()}</p>
+      </div>
+    `;
+    }
+    InfoFromPath(path) {
+        return ConsumerSpendingFromPath(path);
+    }
+    NameFrom(ds) {
+        return ds.name || 'Unknown';
+    }
+}
+
+class DialogHeader {
+    faTimes = faTimes;
+    dialog = input(...(ngDevMode ? [undefined, { debugName: "dialog" }] : []));
+    close() {
+        // Close the dialog by finding the closest dialog element and calling its close method
+        const d = this.dialog();
+        if (d) {
+            d.close();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}: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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}: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 GradientLegend {
+    topStyle = signal({}, ...(ngDevMode ? [{ debugName: "topStyle" }] : []));
+    bottomStyle = signal({}, ...(ngDevMode ? [{ debugName: "bottomStyle" }] : []));
+    gradientStyle = signal({}, ...(ngDevMode ? [{ debugName: "gradientStyle" }] : []));
+    settings = input(new GradientSettings(), ...(ngDevMode ? [{ debugName: "settings" }] : []));
+    renderer = inject(Renderer2);
+    host = inject((ElementRef));
+    constructor() {
+        const onUpdateSettings = effect(() => {
+            const settings = this.settings();
+            this.topStyle.set({
+                background: settings.minTop ? settings.minColor : settings.maxColor,
+                value: settings.minValue
+            });
+            this.bottomStyle.set({
+                background: settings.minTop ? settings.maxColor : settings.minColor,
+                value: settings.maxValue
+            });
+            this.gradientStyle.set({
+                background: `linear-gradient(${settings.dir === 'horizontal' ? 'to right' : 'to top'}, ${settings.minColor}, ${settings.maxColor})`,
+                height: settings.dir === 'horizontal' ? '30px' : '100%',
+                width: settings.dir === 'horizontal' ? '100%' : '30px'
+            });
+        }, ...(ngDevMode ? [{ debugName: "onUpdateSettings" }] : []));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GradientLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: GradientLegend, isStandalone: true, selector: "mapag-gradient-legend", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="top" [ngStyle]="topStyle()"></div>
+    <div>{{settings().unitPrefix}}{{ settings().maxValue | number:"1.0-2" }}{{settings().unitSuffix}}</div>
+    <div class="gradient" [ngStyle]="gradientStyle()"></div>
+    <div></div>
+    <div class="bottom" [ngStyle]="bottomStyle()"></div>
+    <div>{{settings().unitPrefix}}{{ settings().minValue | number:"1.0-2" }}{{settings().unitSuffix}}</div>
+  `, isInline: true, styles: [":host{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:auto max-content;align-items:center;font-size:.8em;height:var(--legend-height, 150px);column-gap:4px}.h2{margin-bottom:8px}.top,.bottom{height:50%}.top{background:var(--top-color, green);align-self:end}.bottom{background:var(--bottom-color, black);align-self:start}.gradient{width:20px;flex-grow:1;height:100%;align-self:center;justify-self:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GradientLegend, decorators: [{
+            type: Component,
+            args: [{ selector: 'mapag-gradient-legend', imports: [CommonModule, FormsModule], template: `
+    <div class="top" [ngStyle]="topStyle()"></div>
+    <div>{{settings().unitPrefix}}{{ settings().maxValue | number:"1.0-2" }}{{settings().unitSuffix}}</div>
+    <div class="gradient" [ngStyle]="gradientStyle()"></div>
+    <div></div>
+    <div class="bottom" [ngStyle]="bottomStyle()"></div>
+    <div>{{settings().unitPrefix}}{{ settings().minValue | number:"1.0-2" }}{{settings().unitSuffix}}</div>
+  `, styles: [":host{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:auto max-content;align-items:center;font-size:.8em;height:var(--legend-height, 150px);column-gap:4px}.h2{margin-bottom:8px}.top,.bottom{height:50%}.top{background:var(--top-color, green);align-self:end}.bottom{background:var(--bottom-color, black);align-self:start}.gradient{width:20px;flex-grow:1;height:100%;align-self:center;justify-self:center}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }] } });
+class GradientSettings {
+    minColor = "#000000";
+    maxColor = "#FFFFFF";
+    minValue = 0.0;
+    maxValue = 1.0;
+    height = "100px";
+    width = "30px";
+    minTop = false;
+    dir = 'vertical';
+    unitPrefix = '';
+    unitSuffix = '';
+}
+
+class ShowHideBtn {
+    faEye = faEye;
+    faEyeSlash = faEyeSlash;
+    mapper = input.required(...(ngDevMode ? [{ debugName: "mapper" }] : []));
+    toggleShowHide() {
+        const current = this.mapper().settings().visible;
+        this.mapper().update({ visible: !current });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ShowHideBtn, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: ShowHideBtn, isStandalone: true, selector: "mapag-show-hide-btn", inputs: { mapper: { classPropertyName: "mapper", publicName: "mapper", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    <button class="btn" (click)="toggleShowHide()">
+      <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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}: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,
+            args: [{ selector: 'mapag-show-hide-btn', imports: [CommonModule, FaIconComponent], template: `
+    <button class="btn" (click)="toggleShowHide()">
+      <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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}:host{display:content}.btn{width:12ch}\n"] }]
+        }], propDecorators: { mapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapper", required: true }] }] } });
+
+class StdLegend {
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    columns = input(1, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: StdLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: StdLegend, isStandalone: true, selector: "mapag-std-legend", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="legend" [style.grid-template-columns]="'repeat(' + columns() + ',1fr)'">
+    @for (item of items(); track item) {
+      <div class="legend-row">
+        <div class="legend-item" [style.background-color]="item.value" [ngStyle]="item.style"></div>
+        <div>{{ item.label }}</div>
+      </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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}.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,
+            args: [{ selector: 'mapag-std-legend', imports: [CommonModule], template: `
+    <div class="legend" [style.grid-template-columns]="'repeat(' + columns() + ',1fr)'">
+    @for (item of items(); track item) {
+      <div class="legend-row">
+        <div class="legend-item" [style.background-color]="item.value" [ngStyle]="item.style"></div>
+        <div>{{ item.label }}</div>
+      </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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}.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 TextPipe {
+    transform(value, ...args) {
+        if (value === null || value === undefined) {
+            return '';
+        }
+        if (typeof value === 'string') {
+            return fixText(value);
+        }
+        return value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TextPipe, isStandalone: true, name: "text" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TextPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'text'
+                }]
+        }] });
+
+class ConsumerSpendingPanel {
+    map = input(...(ngDevMode ? [undefined, { debugName: "map" }] : []));
+    mapper = new ConsumerSpendingMapper();
+    customizeDialog = viewChild('customizeDialog', ...(ngDevMode ? [{ debugName: "customizeDialog" }] : []));
+    legendDialog = viewChild('legendDialog', ...(ngDevMode ? [{ debugName: "legendDialog" }] : []));
+    onRemove = output();
+    settings = input(new DataSetSettings(), ...(ngDevMode ? [{ debugName: "settings" }] : []));
+    USStates = states;
+    constructor() {
+        const _mapInit = effect(() => {
+            const mapComp = this.map();
+            if (mapComp) {
+                mapComp.mapper().set(this.mapper.ID, this.mapper);
+            }
+        }, ...(ngDevMode ? [{ debugName: "_mapInit" }] : []));
+        const _item = effect(() => {
+            const item = this.settings();
+            untracked(() => this.mapper.update(item));
+        }, ...(ngDevMode ? [{ debugName: "_item" }] : []));
+    }
+    setVisible(visible) {
+        this.mapper.update({ visible: visible });
+    }
+    updateGradient(v1, v2) {
+        const current = this.mapper.settings().fillGradient;
+        if (v1) {
+            current[0].color = v1;
+        }
+        if (v2) {
+            current[1].color = v2;
+        }
+        this.mapper.update({
+            fillGradient: current,
+        });
+    }
+    paletteLegend = computed(() => {
+        const info = this.mapper.info();
+        const minmax = this.mapper.featureStates();
+        const palette = this.mapper.settings().fillPalette;
+        return ColorPalettes.ToLegend(palette, minmax.min || 0, minmax.max || 1, { unitSuffix: " " + fixText(info.Unit) });
+    }, ...(ngDevMode ? [{ debugName: "paletteLegend" }] : []));
+    gradientSettings = computed(() => {
+        const info = this.mapper.info();
+        const minmax = this.mapper.featureStates();
+        return {
+            minColor: this.mapper.settings().fillGradient[0].color,
+            maxColor: this.mapper.settings().fillGradient[1].color,
+            minValue: minmax.min || 0,
+            maxValue: minmax.max || 1,
+            dir: 'vertical',
+            height: '150px',
+            width: '30px',
+            unitPrefix: " ",
+            unitSuffix: " " + fixText(info.Unit)
+        };
+    }, ...(ngDevMode ? [{ debugName: "gradientSettings" }] : []));
+    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
+    }
+    toggleLegend() {
+        const dialog = this.legendDialog();
+        if (!dialog) {
+            return;
+        }
+        const dialogElement = dialog.nativeElement;
+        if (dialogElement.open) {
+            dialogElement.close();
+        }
+        else {
+            dialogElement.show();
+        }
+        // Implement dialog toggle logic here
+    }
+    update(field, value) {
+        this.mapper.update({
+            [field]: value,
+        });
+    }
+    reset() {
+        this.mapper.update(new DataSetSettings());
+    }
+    remove() {
+        this.mapper.update({ visible: false });
+        this.toggleDialog();
+        this.onRemove.emit();
+    }
+    ngOnDestroy() {
+        this.mapper.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConsumerSpendingPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConsumerSpendingPanel, isStandalone: true, selector: "mapag-consumer-spending-panel", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRemove: "onRemove" }, viewQueries: [{ propertyName: "customizeDialog", first: true, predicate: ["customizeDialog"], descendants: true, isSignal: true }, { propertyName: "legendDialog", first: true, predicate: ["legendDialog"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <hub-data-layer
+      [visible]="mapper.settings().visible"
+      [name]="mapper.info().Commodity + ' (' + mapper.info().Year + ')'"
+      [desc]="mapper.desc()"
+      shape="area"
+      (onCheck)="setVisible($event)"
+      (onCustomize)="toggleDialog()"
+    >
+      <area-icon></area-icon>
+    </hub-data-layer>
+
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
+      <h2>{{ mapper.name() }}</h2>
+      
+      <div class="dlg-body">
+        <p>
+          The Consumer Spending dataset from Esri provides a rigorously modeled representation of how U.S. households
+          allocate their budgets across a wide spectrum of goods and services, integrating source data from the U.S. 
+          Bureau of Labor Statistics’ Consumer Expenditure and Diary Surveys to estimate both current spending patterns 
+          and five‑year forecasts. It offers detailed, category‑level insights into consumer purchasing behavior, 
+          enabling analysts to understand market demand, evaluate economic conditions, and support data‑driven 
+          decision‑making within geographic contexts.
+        </p>
+        <h3>Information</h3>
+        <div class="info-grid">
+          <div class="info">
+            <div class="info-label">Source</div>
+            <div class="info-value">{{ mapper.info().Source | text }}</div>
+          </div>
+          <div class="info">
+            <div class="info-label">Sector</div>
+            <div class="info-value">{{ mapper.info().Sector | text }}</div>
+          </div>
+          <div class="info">
+            <div class="info-label">Group</div>
+            <div class="info-value">{{ mapper.info().Group | text }}</div>
+          </div>
+          <div class="info">
+            <div class="info-label">Commodity</div>
+            <div class="info-value">{{ mapper.info().Commodity | text }}</div>
+          </div>
+          <div class="info">
+            <div class="info-label">Class</div>
+            <div class="info-value">{{ mapper.info().Class | text }}</div>
+          </div>
+          <div class="info">
+            <div class="info-label">Statistic</div>
+            <div class="info-value">{{ mapper.info().Statistic | text }}</div>
+          </div>
+          <div class="info">
+            <div class="info-label">Production</div>
+            <div class="info-value">{{ mapper.info().Production | text }}</div>
+          </div>
+          <div class="info">
+            <div class="info-label">Utilization</div>
+            <div class="info-value">{{ mapper.info().Utilization | text }}</div>
+          </div>
+          <div class="info">
+            <div class="info-label">Unit</div>
+            <div class="info-value">{{ mapper.info().Unit | text }}</div>
+          </div>
+        </div>
+        <h3>Customize Display Settings</h3>
+        <div class="zones">
+          <div class="ctrl-group">
+            <div class="radio-tabs">
+              <label>
+                <input
+                  type="radio"
+                  name="fillType"
+                  value="solid"
+                  [checked]="mapper.settings().fillType == 'solid'"
+                  (change)="update('fillType', 'solid')"
+                />
+                Solid
+              </label>
+              <label>
+                <input
+                  type="radio"
+                  name="fillType"
+                  value="gradient"
+                  [checked]="mapper.settings().fillType == 'gradient'"
+                  (change)="update('fillType', 'gradient')"
+                />
+                Gradient
+              </label>
+              <label>
+                <input
+                  type="radio"
+                  name="fillType"
+                  value="palette"
+                  [checked]="mapper.settings().fillType == 'palette'"
+                  (change)="update('fillType', 'palette')"
+                />
+                Palette
+              </label>
+            </div>
+            <div class="ctrl-row">
+              @switch (mapper.settings().fillType) { @case ('solid') {
+              <label for="colorPicker">Color:</label>
+              <input
+                type="color"
+                id="colorPicker"
+                [ngModel]="mapper.settings().fillColor"
+                (ngModelChange)="update('fillColor', $event)"
+              />
+              } @case ('gradient') {
+              <label for="gradientSelect">Gradient:</label>
+              <input
+                type="color"
+                [ngModel]="mapper.settings().fillGradient[0].color"
+                (ngModelChange)="updateGradient($event, undefined)"
+              />
+              <input
+                type="color"
+                [ngModel]="mapper.settings().fillGradient[1].color"
+                (ngModelChange)="updateGradient(undefined, $event)"
+              />
+              } @case ('palette') {
+              <label for="paletteSelect">Palette:</label>
+              <mapag-palette-select
+                [palette]="mapper.settings().fillPalette"
+                (paletteChange)="update('fillPalette', $event)"
+              >
+              </mapag-palette-select>
+              } }
+            </div>
+            <div class="ctrl-row">
+              <label for="fillOpacity">Opacity:</label>
+              <input
+                type="range"
+                id="fillOpacity"
+                min="0"
+                max="1"
+                step="0.01"
+                [ngModel]="mapper.settings().fillOpacity"
+                (ngModelChange)="update('fillOpacity', $event)"
+              />
+            </div>
+            <div class="ctrl-row">
+              <label for="borderColor">Border Color:</label>
+              <input
+                type="color"
+                id="borderColor"
+                [ngModel]="mapper.settings().borderColor"
+                (ngModelChange)="update('borderColor', $event)"
+              />
+            </div>
+          </div>
+          <div class="ctrl-group">
+            <h4>Filters</h4>
+            <h5>State</h5>
+            <div class="filter-row" style="padding: 3px;">
+              <ng-select
+                [items]="USStates"
+                bindLabel="Name"
+                bindValue="Abbr"
+                [ngModel]="mapper.settings().filterStates"
+                [multiple]="true"
+                appendTo="body"
+                (ngModelChange)="update('filterStates', $event)"
+              >
+              </ng-select>
+            </div>
+          </div>
+        </div>
+
+        <h3>References</h3>
+        <div style="display: flex; flex-direction: column;">
+          <a href="https://www.nass.usda.gov/" target="_blank">USDA NASS</a>
+          <a href="https://quickstats.nass.usda.gov/" target="_blank">USDA NASS Quick Stats</a>
+        </div>
+      </div>
+      <div class="dlg-buttons">
+        <button class="btn" (click)="toggleLegend()">Legend</button>
+        <button class="btn" (click)="remove()">Remove</button>
+        <button class="btn" (click)="reset()">Reset</button>
+          <mapag-show-hide-btn [mapper]="mapper"></mapag-show-hide-btn>
+        <button class="btn" (click)="toggleDialog()">Close</button>
+      </div>
+    </dialog>
+
+    <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') {
+          <div style="width: 30px; height: 30px; background-color: {{ mapper.settings().fillColor }}; border: 1px solid #000;"></div>
+        } 
+        @case ('gradient') {
+          <mapag-gradient-legend [settings]="gradientSettings()"> </mapag-gradient-legend>
+        } 
+        @case ('palette') {
+          <mapag-std-legend [items]="paletteLegend()"></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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}.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: ConsumerSpendingPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'mapag-consumer-spending-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        FormsModule,
+                        HubDataLayer,
+                        DraggableDialogDirective,
+                        AreaIcon,
+                        PaletteSelect,
+                        BringToFrontDirective,
+                        NgSelectComponent,
+                        ShowHideBtn,
+                        GradientLegend,
+                        StdLegend,
+                        DialogHeader,
+                        TextPipe,
+                        OnBodyDirective
+                    ], template: `
+    <hub-data-layer
+      [visible]="mapper.settings().visible"
+      [name]="mapper.info().Commodity + ' (' + mapper.info().Year + ')'"
+      [desc]="mapper.desc()"
+      shape="area"
+      (onCheck)="setVisible($event)"
+      (onCustomize)="toggleDialog()"
+    >
+      <area-icon></area-icon>
+    </hub-data-layer>
+
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
+      <h2>{{ mapper.name() }}</h2>
+      
+      <div class="dlg-body">
+        <p>
+          The Consumer Spending dataset from Esri provides a rigorously modeled representation of how U.S. households
+          allocate their budgets across a wide spectrum of goods and services, integrating source data from the U.S. 
+          Bureau of Labor Statistics’ Consumer Expenditure and Diary Surveys to estimate both current spending patterns 
+          and five‑year forecasts. It offers detailed, category‑level insights into consumer purchasing behavior, 
+          enabling analysts to understand market demand, evaluate economic conditions, and support data‑driven 
+          decision‑making within geographic contexts.
+        </p>
+        <h3>Information</h3>
+        <div class="info-grid">
+          <div class="info">
+            <div class="info-label">Source</div>
+            <div class="info-value">{{ mapper.info().Source | text }}</div>
+          </div>
+          <div class="info">
+            <div class="info-label">Sector</div>
+            <div class="info-value">{{ mapper.info().Sector | text }}</div>
+          </div>
+          <div class="info">
+            <div class="info-label">Group</div>
+            <div class="info-value">{{ mapper.info().Group | text }}</div>
+          </div>
+          <div class="info">
+            <div class="info-label">Commodity</div>
+            <div class="info-value">{{ mapper.info().Commodity | text }}</div>
+          </div>
+          <div class="info">
+            <div class="info-label">Class</div>
+            <div class="info-value">{{ mapper.info().Class | text }}</div>
+          </div>
+          <div class="info">
+            <div class="info-label">Statistic</div>
+            <div class="info-value">{{ mapper.info().Statistic | text }}</div>
+          </div>
+          <div class="info">
+            <div class="info-label">Production</div>
+            <div class="info-value">{{ mapper.info().Production | text }}</div>
+          </div>
+          <div class="info">
+            <div class="info-label">Utilization</div>
+            <div class="info-value">{{ mapper.info().Utilization | text }}</div>
+          </div>
+          <div class="info">
+            <div class="info-label">Unit</div>
+            <div class="info-value">{{ mapper.info().Unit | text }}</div>
+          </div>
+        </div>
+        <h3>Customize Display Settings</h3>
+        <div class="zones">
+          <div class="ctrl-group">
+            <div class="radio-tabs">
+              <label>
+                <input
+                  type="radio"
+                  name="fillType"
+                  value="solid"
+                  [checked]="mapper.settings().fillType == 'solid'"
+                  (change)="update('fillType', 'solid')"
+                />
+                Solid
+              </label>
+              <label>
+                <input
+                  type="radio"
+                  name="fillType"
+                  value="gradient"
+                  [checked]="mapper.settings().fillType == 'gradient'"
+                  (change)="update('fillType', 'gradient')"
+                />
+                Gradient
+              </label>
+              <label>
+                <input
+                  type="radio"
+                  name="fillType"
+                  value="palette"
+                  [checked]="mapper.settings().fillType == 'palette'"
+                  (change)="update('fillType', 'palette')"
+                />
+                Palette
+              </label>
+            </div>
+            <div class="ctrl-row">
+              @switch (mapper.settings().fillType) { @case ('solid') {
+              <label for="colorPicker">Color:</label>
+              <input
+                type="color"
+                id="colorPicker"
+                [ngModel]="mapper.settings().fillColor"
+                (ngModelChange)="update('fillColor', $event)"
+              />
+              } @case ('gradient') {
+              <label for="gradientSelect">Gradient:</label>
+              <input
+                type="color"
+                [ngModel]="mapper.settings().fillGradient[0].color"
+                (ngModelChange)="updateGradient($event, undefined)"
+              />
+              <input
+                type="color"
+                [ngModel]="mapper.settings().fillGradient[1].color"
+                (ngModelChange)="updateGradient(undefined, $event)"
+              />
+              } @case ('palette') {
+              <label for="paletteSelect">Palette:</label>
+              <mapag-palette-select
+                [palette]="mapper.settings().fillPalette"
+                (paletteChange)="update('fillPalette', $event)"
+              >
+              </mapag-palette-select>
+              } }
+            </div>
+            <div class="ctrl-row">
+              <label for="fillOpacity">Opacity:</label>
+              <input
+                type="range"
+                id="fillOpacity"
+                min="0"
+                max="1"
+                step="0.01"
+                [ngModel]="mapper.settings().fillOpacity"
+                (ngModelChange)="update('fillOpacity', $event)"
+              />
+            </div>
+            <div class="ctrl-row">
+              <label for="borderColor">Border Color:</label>
+              <input
+                type="color"
+                id="borderColor"
+                [ngModel]="mapper.settings().borderColor"
+                (ngModelChange)="update('borderColor', $event)"
+              />
+            </div>
+          </div>
+          <div class="ctrl-group">
+            <h4>Filters</h4>
+            <h5>State</h5>
+            <div class="filter-row" style="padding: 3px;">
+              <ng-select
+                [items]="USStates"
+                bindLabel="Name"
+                bindValue="Abbr"
+                [ngModel]="mapper.settings().filterStates"
+                [multiple]="true"
+                appendTo="body"
+                (ngModelChange)="update('filterStates', $event)"
+              >
+              </ng-select>
+            </div>
+          </div>
+        </div>
+
+        <h3>References</h3>
+        <div style="display: flex; flex-direction: column;">
+          <a href="https://www.nass.usda.gov/" target="_blank">USDA NASS</a>
+          <a href="https://quickstats.nass.usda.gov/" target="_blank">USDA NASS Quick Stats</a>
+        </div>
+      </div>
+      <div class="dlg-buttons">
+        <button class="btn" (click)="toggleLegend()">Legend</button>
+        <button class="btn" (click)="remove()">Remove</button>
+        <button class="btn" (click)="reset()">Reset</button>
+          <mapag-show-hide-btn [mapper]="mapper"></mapag-show-hide-btn>
+        <button class="btn" (click)="toggleDialog()">Close</button>
+      </div>
+    </dialog>
+
+    <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') {
+          <div style="width: 30px; height: 30px; background-color: {{ mapper.settings().fillColor }}; border: 1px solid #000;"></div>
+        } 
+        @case ('gradient') {
+          <mapag-gradient-legend [settings]="gradientSettings()"> </mapag-gradient-legend>
+        } 
+        @case ('palette') {
+          <mapag-std-legend [items]="paletteLegend()"></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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}.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 ConsumerSpendingGroups {
+    static DairyFruitVegetables = [
+        { ID: "X1053", Name: "Dairy Products", Level: 0 },
+        { ID: "X1054", Name: "Fresh Milk (All Types)", Level: 1 },
+        { ID: "X1055", Name: "Cream", Level: 1 },
+        { ID: "X1056", Name: "Butter", Level: 1 },
+        { ID: "X1057", Name: "Cheese", Level: 1 },
+        { ID: "X1058", Name: "Ice Cream & Rel Prod", Level: 1 },
+        { ID: "X1059", Name: "Other Dairy Products", Level: 1 },
+        { ID: "X1060", Name: "Fruit & Vegetables", Level: 0 },
+        { ID: "X1061", Name: "Fresh Fruit", Level: 1 },
+        { ID: "X1062", Name: "Apples", Level: 2 },
+        { ID: "X1063", Name: "Bananas", Level: 2 },
+        { ID: "X1064", Name: "Oranges", Level: 2 },
+        { ID: "X1065", Name: "Citrus Fruit excluding Oranges", Level: 2 },
+        { ID: "X1066", Name: "Other Fresh Fruit", Level: 2 },
+        { ID: "X1067", Name: "Fresh Vegetables", Level: 1 },
+        { ID: "X1068", Name: "Potatoes", Level: 2 },
+        { ID: "X1069", Name: "Lettuce", Level: 2 },
+        { ID: "X1070", Name: "Tomatoes", Level: 2 },
+        { ID: "X1071", Name: "Other Fresh Vegetables", Level: 2 },
+        { ID: "X1072", Name: "Processed Fruit", Level: 1 },
+        { ID: "X1073", Name: "Frozen Fruit & Juice", Level: 2 },
+        { ID: "X1074", Name: "Frozen Orange Juice", Level: 2 },
+        { ID: "X1075", Name: "Frozen Fruit", Level: 2 },
+        { ID: "X1076", Name: "Frozen Fruit Juice", Level: 2 },
+        { ID: "X1077", Name: "Canned Fruit", Level: 2 },
+        { ID: "X1078", Name: "Dried Fruit", Level: 2 },
+        { ID: "X1079", Name: "Fresh Fruit Juice", Level: 2 },
+        { ID: "X1080", Name: "Canned/Bottled Fruit Juice", Level: 2 },
+        { ID: "X1081", Name: "Processed Vegetables", Level: 2 },
+        { ID: "X1082", Name: "Frozen Vegetables", Level: 2 },
+        { ID: "X1083", Name: "Vegetables: Canned/Dried/Juice", Level: 2 },
+        { ID: "X1084", Name: "Canned Beans", Level: 3 },
+        { ID: "X1085", Name: "Canned Corn", Level: 3 },
+        { ID: "X1086", Name: "Misc Canned Vegetables", Level: 3 },
+        { ID: "X1087", Name: "Dried Beans & Peas", Level: 3 },
+        { ID: "X1088", Name: "Misc Dried Vegetables", Level: 3 },
+        { ID: "X1089", Name: "Vegetable Juice", Level: 3 },
+    ];
+    static Alcoholic = [
+        { ID: "X2001", Name: "Alcoholic Beverages" },
+        { ID: "X2002", Name: "Alcoholic Beverage at Home", Level: 1 },
+        { ID: "X2003", Name: "Beer & Ale", Level: 2 },
+        { ID: "X2004", Name: "Whiskey", Level: 2 },
+        { ID: "X2005", Name: "Wine", Level: 2 },
+        { ID: "X2006", Name: "Other Alcoholic Beverages", Level: 2 },
+        { ID: "X2007", Name: "Alcoholic Beverage Away from Home", Level: 1 },
+        { ID: "X2008", Name: "Beer & Ale Away from Home", Level: 2 },
+        { ID: "X2009", Name: "Beer at Full Service Restaurants", Level: 3 },
+        { ID: "X2010", Name: "Beer at Fast Food Restaurants/Other", Level: 3 },
+        { ID: "X2011", Name: "Wine Away from Home", Level: 2 },
+        { ID: "X2012", Name: "Wine at Full Service Restaurants", Level: 3 },
+        { ID: "X2013", Name: "Wine at Fast Food Restaurants", Level: 3 },
+        { ID: "X2014", Name: "Other Alcohol  Away from Home", Level: 2 },
+        { ID: "X2015", Name: "Other Alcohol at Full Service Restaurants", Level: 3 },
+        { ID: "X2016", Name: "Other Alcohol at Fast Food Restaurants", Level: 3 },
+    ];
+    static BakedGoods = [
+        { ID: "X1004", Name: "Bakery & Cereal Prod" },
+        { ID: "X1005", Name: "Flour" },
+        { ID: "X1006", Name: "Prepared Flour Mixes" },
+        { ID: "X1007", Name: "Ready-to-eat & Cooked Cereal" },
+        { ID: "X1008", Name: "Rice" },
+        { ID: "X1009", Name: "Pasta/Cornmeal/Other Cereal" },
+        { ID: "X1010", Name: "Bread" },
+        { ID: "X1011", Name: "White Bread" },
+        { ID: "X1012", Name: "Bread excluding White" },
+        { ID: "X1013", Name: "Crackers & Cookies" },
+        { ID: "X1014", Name: "Cookies" },
+        { ID: "X1015", Name: "Crackers" },
+        { ID: "X1016", Name: "Frozen & Refrigerated Bakery Goods" },
+        { ID: "X1017", Name: "Other Bakery Products" },
+        { ID: "X1018", Name: "Fresh Biscuits/Rolls/Muffins" },
+        { ID: "X1019", Name: "Fresh Cakes & Cupcakes" },
+        { ID: "X1020", Name: "Bread & Cracker Products" },
+        { ID: "X1021", Name: "Sweet Rolls/Coffee Cakes/Donuts" },
+        { ID: "X1022", Name: "Fresh Pies/Tarts/Turnovers" },
+    ];
+    static MeatPoultryFishEggs = [
+        { ID: "X1023", Name: "Meat/Poultry/Fish/Eggs" },
+        { ID: "X1024", Name: "Beef", Level: 1 },
+        { ID: "X1025", Name: "Ground Beef", Level: 2 },
+        { ID: "X1026", Name: "Chuck Roast", Level: 2 },
+        { ID: "X1027", Name: "Round Roast", Level: 2 },
+        { ID: "X1028", Name: "Other Roast", Level: 2 },
+        { ID: "X1029", Name: "Round Steak", Level: 2 },
+        { ID: "X1030", Name: "Sirloin Steak", Level: 2 },
+        { ID: "X1031", Name: "Other Steak", Level: 2 },
+        { ID: "X1032", Name: "Other Beef", Level: 2 },
+        { ID: "X1033", Name: "Pork", Level: 1 },
+        { ID: "X1034", Name: "Bacon", Level: 2 },
+        { ID: "X1035", Name: "Pork Chops", Level: 2 },
+        { ID: "X1036", Name: "Ham", Level: 2 },
+        { ID: "X1037", Name: "Pork Sausage", Level: 2 },
+        { ID: "X1038", Name: "Other Pork", Level: 2 },
+        { ID: "X1039", Name: "Other Meat", Level: 1 },
+        { ID: "X1040", Name: "Frankfurters", Level: 2 },
+        { ID: "X1041", Name: "Bologna/Liverwurst/Salami", Level: 2 },
+        { ID: "X1042", Name: "Other Lunchmeat", Level: 2 },
+        { ID: "X1043", Name: "Lamb & Other Meat", Level: 2 },
+        { ID: "X1044", Name: "Poultry", Level: 1 },
+        { ID: "X1045", Name: "Whole Chickens", Level: 2 },
+        { ID: "X1046", Name: "Chicken Parts", Level: 2 },
+        { ID: "X1047", Name: "Other Poultry", Level: 2 },
+        { ID: "X1048", Name: "Seafood", Level: 1 },
+        { ID: "X1049", Name: "Canned Fish & Shellfish", Level: 2 },
+        { ID: "X1050", Name: "Fresh Fish & Shellfish", Level: 2 },
+        { ID: "X1051", Name: "Frozen Fish & Shellfish", Level: 2 },
+        { ID: "X1052", Name: "Eggs", Level: 1 },
+    ];
+    static Groups = [
+        { ID: "dairy", Name: "Dairy / Fruit and Vegetables", Children: ConsumerSpendingGroups.DairyFruitVegetables },
+        { ID: "alcholoic", Name: "Alcoholic Beverages", Children: ConsumerSpendingGroups.Alcoholic },
+        { ID: "baked", Name: "Bakery & Cereal Prod", Children: ConsumerSpendingGroups.BakedGoods },
+        { ID: "meat", Name: "Meat / Poultry / Fish / Eggs", Children: ConsumerSpendingGroups.MeatPoultryFishEggs }
+    ];
+    static All() {
+        const all = [];
+        const dairy = ConsumerSpendingGroups.DairyFruitVegetables.map(i => {
+            return {
+                ID: i.ID,
+                Name: i.Name,
+                Level: i.Level,
+                Parent: "Dairy / Fruit and Vegetables"
+            };
+        });
+        const alcholoic = ConsumerSpendingGroups.Alcoholic.map(i => {
+            return {
+                ID: i.ID,
+                Name: i.Name,
+                Level: i.Level,
+                Parent: "Alcoholic Beverages"
+            };
+        });
+        const baked = ConsumerSpendingGroups.BakedGoods.map(i => {
+            return {
+                ID: i.ID,
+                Name: i.Name,
+                Level: i.Level,
+                Parent: "Bakery & Cereal Prod"
+            };
+        });
+        const meat = ConsumerSpendingGroups.MeatPoultryFishEggs.map(i => {
+            return {
+                ID: i.ID,
+                Name: i.Name,
+                Level: i.Level,
+                Parent: "Meat / Poultry / Fish / Eggs"
+            };
+        });
+        return [...dairy, ...alcholoic, ...baked, ...meat];
+    }
+}
+
+class ConsumerSpendingSelectPanel {
+    faCircle = faCircle;
+    faFire = faFire;
+    faThLarge = faThLarge;
+    faList = faList;
+    options = ConsumerSpendingGroups.Groups;
+    nassSvc = inject(NassService);
+    canAdd = input(true, ...(ngDevMode ? [{ debugName: "canAdd" }] : []));
+    // Map Component
+    map = input(...(ngDevMode ? [undefined, { debugName: "map" }] : []));
+    // Currently selected NAICS codes
+    current = model([], ...(ngDevMode ? [{ debugName: "current" }] : []));
+    customizeDialog = viewChild('customizeDialog', ...(ngDevMode ? [{ debugName: "customizeDialog" }] : []));
+    // Mapper group to hold NAICS layers
+    mappers = new MapboxMapperGroup();
+    constructor() {
+        const _mapInit = effect(() => {
+            const mapComp = this.map();
+            if (mapComp) {
+                mapComp.mapper().set('naicsmgr', this.mappers);
+            }
+        }, ...(ngDevMode ? [{ debugName: "_mapInit" }] : []));
+    }
+    isSelected(code) {
+        return this.current().some((c) => c.ID === code.ID);
+    }
+    selectInfo(info) {
+        const currentInfos = this.current();
+        const index = currentInfos.findIndex((c) => c.ID === info.ID);
+        if (index >= 0) {
+            // Remove if already selected
+            this.current.set(currentInfos.filter((c) => c.ID !== info.ID));
+        }
+        else {
+            // Add if not selected - ensure no duplicates
+            const newInfos = [...currentInfos, info];
+            // Remove any potential duplicates by creating a Map
+            const uniqueMap = new Map(newInfos.map((c) => [c.ID, c]));
+            this.current.set(Array.from(uniqueMap.values()));
+        }
+    }
+    removeInfo(info) {
+        const currentInfos = this.current();
+        this.current.set(currentInfos.filter((c) => c.ID !== info.ID));
+    }
+    toggleDialog() {
+        const dialog = this.customizeDialog();
+        if (!dialog) {
+            return;
+        }
+        const dialogElement = dialog.nativeElement;
+        if (dialogElement.open) {
+            dialogElement.close();
+        }
+        else {
+            dialogElement.show();
+        }
+    }
+    fixTextSet(input) {
+        const output = [];
+        input.forEach((text) => {
+            output.push({ key: text, value: this.fixText(text) });
+        });
+        return output;
+    }
+    fixText(text) {
+        const parts = text
+            .toLocaleLowerCase()
+            .split('_')
+            .map((part) => part.charAt(0).toUpperCase() + part.slice(1));
+        return parts.join(' ');
+    }
+    reset() {
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConsumerSpendingSelectPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: ConsumerSpendingSelectPanel, isStandalone: true, selector: "mapag-consumer-spending-select-panel", inputs: { canAdd: { classPropertyName: "canAdd", publicName: "canAdd", isSignal: true, isRequired: false, transformFunction: null }, map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { current: "currentChange" }, viewQueries: [{ propertyName: "customizeDialog", first: true, predicate: ["customizeDialog"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <mapag-details [open]="true" style="margin-top: 16px;">
+      <span summary>Consumer Spending</span>
+
+      <!-- @for (info of current(); track info.ID) {
+      <hub-nass-panel [map]="map()" [settings]="inf" (onRemove)="removeInfo(info)"></hub-nass-panel>
+      }  -->
+      
+      @if (canAdd()) {
+      <button class="mgr-btn" (click)="toggleDialog()" style="justify-self: center;">Add & Remove Layers</button>
+      }
+    </mapag-details>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
+      <h2>Consumer Spending Layers</h2>
+      
+      <div class="dlg-body">
+      <p>
+        Select a consumer spending category from the list below to add it as a layer on the map. You can select multiple 
+        categories to compare them. Use the filters to narrow down the options. The data is sourced from the USDA Economic 
+        Research Service and represents average annual consumer spending in the United States for various food categories.
+      </p>
+
+      <div class="zones results">
+        @for (group of options; track group.ID) {
+          <h3>{{group.Name}}</h3>
+          @for (item of group.Children; track item.ID) {
+            <label>
+              <input type="checkbox" [checked]="isSelected(item)" (change)="selectInfo(item)" [ngClass]="'indent-' + (item.Level || 0)">
+              {{item.Name}}
+            </label>
+          }
+        }
+      </div>
+
+      <h3>References</h3>
+      <div style="display: flex; flex-direction: column;">
+          <a href="https://doc.arcgis.com/en/esri-demographics/latest/esri-demographics/consumer-spending.htm" target="_blank">ESRi Consumer Spending Data</a>
+      </div>
+      </div>  
+      <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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}.zones{font-size:.8em}.indent-1{margin-left:16px}.indent-2{margin-left:32px}.filters{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap;flex-direction:row}.results{overflow-y:auto}.resultcont{display:flex;flex-direction:column;flex-grow:1}.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}@media (max-width: 600px){.dlg-body{display:flex;flex-direction:column}.zones{max-height:unset;height:auto;flex-grow:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ShowHideBtn, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ConsumerSpendingSelectPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'mapag-show-hide-btn', imports: [CommonModule, FaIconComponent], template: `
-    <button class="btn" (click)="toggleShowHide()">
-      <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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}:host{display:content}.btn{width:12ch}\n"] }]
-        }], propDecorators: { mapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapper", required: true }] }] } });
+            args: [{ selector: 'mapag-consumer-spending-select-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, DraggableDialogDirective, BringToFrontDirective, MapagDetails, OnBodyDirective], template: `
+    <mapag-details [open]="true" style="margin-top: 16px;">
+      <span summary>Consumer Spending</span>
+
+      <!-- @for (info of current(); track info.ID) {
+      <hub-nass-panel [map]="map()" [settings]="inf" (onRemove)="removeInfo(info)"></hub-nass-panel>
+      }  -->
+      
+      @if (canAdd()) {
+      <button class="mgr-btn" (click)="toggleDialog()" style="justify-self: center;">Add & Remove Layers</button>
+      }
+    </mapag-details>
+    <dialog draggable mapagBringToFront onBody #customizeDialog>
+      <h2>Consumer Spending Layers</h2>
+      
+      <div class="dlg-body">
+      <p>
+        Select a consumer spending category from the list below to add it as a layer on the map. You can select multiple 
+        categories to compare them. Use the filters to narrow down the options. The data is sourced from the USDA Economic 
+        Research Service and represents average annual consumer spending in the United States for various food categories.
+      </p>
+
+      <div class="zones results">
+        @for (group of options; track group.ID) {
+          <h3>{{group.Name}}</h3>
+          @for (item of group.Children; track item.ID) {
+            <label>
+              <input type="checkbox" [checked]="isSelected(item)" (change)="selectInfo(item)" [ngClass]="'indent-' + (item.Level || 0)">
+              {{item.Name}}
+            </label>
+          }
+        }
+      </div>
+
+      <h3>References</h3>
+      <div style="display: flex; flex-direction: column;">
+          <a href="https://doc.arcgis.com/en/esri-demographics/latest/esri-demographics/consumer-spending.htm" target="_blank">ESRi Consumer Spending Data</a>
+      </div>
+      </div>  
+      <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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}.zones{font-size:.8em}.indent-1{margin-left:16px}.indent-2{margin-left:32px}.filters{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap;flex-direction:row}.results{overflow-y:auto}.resultcont{display:flex;flex-direction:column;flex-grow:1}.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}@media (max-width: 600px){.dlg-body{display:flex;flex-direction:column}.zones{max-height:unset;height:auto;flex-grow:1}}\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 HubCropSequencePanel {
     DefaultName = 'cropsequence';
@@ -25846,59 +27330,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
   `, 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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}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 {
-    faTimes = faTimes;
-    dialog = input(...(ngDevMode ? [undefined, { debugName: "dialog" }] : []));
-    close() {
-        // Close the dialog by finding the closest dialog element and calling its close method
-        const d = this.dialog();
-        if (d) {
-            d.close();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DialogHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}: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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}: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 {
-    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
-    columns = input(1, ...(ngDevMode ? [{ debugName: "columns" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: StdLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: StdLegend, isStandalone: true, selector: "mapag-std-legend", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="legend" [style.grid-template-columns]="'repeat(' + columns() + ',1fr)'">
-    @for (item of items(); track item) {
-      <div class="legend-row">
-        <div class="legend-item" [style.background-color]="item.value" [ngStyle]="item.style"></div>
-        <div>{{ item.label }}</div>
-      </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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}.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,
-            args: [{ selector: 'mapag-std-legend', imports: [CommonModule], template: `
-    <div class="legend" [style.grid-template-columns]="'repeat(' + columns() + ',1fr)'">
-    @for (item of items(); track item) {
-      <div class="legend-row">
-        <div class="legend-item" [style.background-color]="item.value" [ngStyle]="item.style"></div>
-        <div>{{ item.label }}</div>
-      </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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}.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 {
     DefaultName = 'cropland';
     faImage = faImage;
@@ -27341,91 +28772,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
   `, 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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}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}@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 TileDialog {
-    data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
-    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
-    contentTemplate = input(null, ...(ngDevMode ? [{ debugName: "contentTemplate" }] : []));
-    selection = signal(null, ...(ngDevMode ? [{ debugName: "selection" }] : []));
-    onSelect = output();
-    dataDialog = viewChild('dataDialog', ...(ngDevMode ? [{ debugName: "dataDialog" }] : []));
-    defaultTemplate = viewChild('defaultTemplate', ...(ngDevMode ? [{ debugName: "defaultTemplate" }] : []));
-    toggle() {
-        const dialog = this.dataDialog();
-        if (!dialog) {
-            return;
-        }
-        const dialogElement = dialog.nativeElement;
-        if (dialogElement.open) {
-            dialogElement.close();
-        }
-        else {
-            dialogElement.show();
+class SafeHtmlPipe {
+    sanitizer = inject(DomSanitizer);
+    transform(url) {
+        if (!url) {
+            return undefined;
         }
+        return this.sanitizer.bypassSecurityTrustHtml(url);
     }
-    onClick(feature) {
-        this.selection.set(feature);
-        this.onSelect.emit(feature);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TileDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TileDialog, isStandalone: true, selector: "mapag-tile-dialog", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, viewQueries: [{ propertyName: "dataDialog", first: true, predicate: ["dataDialog"], descendants: true, isSignal: true }, { propertyName: "defaultTemplate", first: true, predicate: ["defaultTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <ng-template #defaultTemplate let-feature>
-      <div>{{ feature }}</div>
-    </ng-template>
-    <dialog draggable mapagBringToFront onBody #dataDialog class="data-dialog">
-      <h2>{{ name() }}</h2>
-      <div class="dlg-body dlg-body-list ">
-        {{ data()?.length }} records matching current filters.
-        @if (data()?.length === 0) {
-          <p>No data to display.</p>
-        } @else {
-          <cdk-virtual-scroll-viewport [itemSize]="10">
-            <div *cdkVirtualFor="let feature of data()" (click)="onClick(feature)">
-              <ng-container *ngTemplateOutlet="contentTemplate() || defaultTemplate; context: { $implicit: feature }"></ng-container>
-            </div>
-          </cdk-virtual-scroll-viewport>
-        }
-      </div>
-      <div class="dlg-buttons">
-        <button class="btn" (click)="toggle()">Close</button>
-      </div>
-    </dialog>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "directive", type: OnBodyDirective, selector: "dialog[onBody]" }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SafeHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TileDialog, decorators: [{
-            type: Component,
-            args: [{ selector: 'mapag-tile-dialog', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
-                        FormsModule,
-                        DraggableDialogDirective,
-                        BringToFrontDirective,
-                        OnBodyDirective,
-                        CdkVirtualScrollViewport,
-                        CdkVirtualForOf,
-                        CdkFixedSizeVirtualScroll,
-                    ], template: `
-    <ng-template #defaultTemplate let-feature>
-      <div>{{ feature }}</div>
-    </ng-template>
-    <dialog draggable mapagBringToFront onBody #dataDialog class="data-dialog">
-      <h2>{{ name() }}</h2>
-      <div class="dlg-body dlg-body-list ">
-        {{ data()?.length }} records matching current filters.
-        @if (data()?.length === 0) {
-          <p>No data to display.</p>
-        } @else {
-          <cdk-virtual-scroll-viewport [itemSize]="10">
-            <div *cdkVirtualFor="let feature of data()" (click)="onClick(feature)">
-              <ng-container *ngTemplateOutlet="contentTemplate() || defaultTemplate; context: { $implicit: feature }"></ng-container>
-            </div>
-          </cdk-virtual-scroll-viewport>
-        }
-      </div>
-      <div class="dlg-buttons">
-        <button class="btn" (click)="toggle()">Close</button>
-      </div>
-    </dialog>
-  ` }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], contentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplate", required: false }] }], onSelect: [{ type: i0.Output, args: ["onSelect"] }], dataDialog: [{ type: i0.ViewChild, args: ['dataDialog', { isSignal: true }] }], defaultTemplate: [{ type: i0.ViewChild, args: ['defaultTemplate', { isSignal: true }] }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'safeHtml' }]
+        }] });
 
 class MMPanel {
     // Icons and static data
@@ -27439,8 +28800,10 @@ class MMPanel {
     USStates = states;
     map = input(...(ngDevMode ? [undefined, { debugName: "map" }] : []));
     settings = input(new PointDataMapperSettings(), ...(ngDevMode ? [{ debugName: "settings" }] : []));
-    mapper = new PointDataMapper(new MarketMakerPopupRenderer());
+    popupRenderer = new MarketMakerPopupRenderer();
+    mapper = new PointDataMapper(this.popupRenderer);
     customizeDialog = viewChild('customizeDialog', ...(ngDevMode ? [{ debugName: "customizeDialog" }] : []));
+    dataDialog = viewChild('dataDialog', ...(ngDevMode ? [{ debugName: "dataDialog" }] : []));
     onRemove = output();
     style = computed(() => {
         const sel = this.mapper.settings().type;
@@ -27556,10 +28919,17 @@ class MMPanel {
         this.mapper.clear();
     }
     toggleData() {
-        // Implement dialog toggle logic here
+        ToggleDialog(this.dataDialog);
+    }
+    onTileClick(feature) {
+        const comp = this.map();
+        if (!comp) {
+            return;
+        }
+        flyToFeature(comp.map, feature);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MMPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MMPanel, isStandalone: true, selector: "mapag-mm-panel", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRemove: "onRemove" }, viewQueries: [{ propertyName: "customizeDialog", first: true, predicate: ["customizeDialog"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MMPanel, isStandalone: true, selector: "mapag-mm-panel", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onRemove: "onRemove" }, viewQueries: [{ propertyName: "customizeDialog", first: true, predicate: ["customizeDialog"], descendants: true, isSignal: true }, { propertyName: "dataDialog", first: true, predicate: ["dataDialog"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <hub-data-layer [visible]="mapper.settings().visible" [name]="mapper.settings().name" 
     [desc]="mapper.settings().description  || 'MarketMaker Business'" shape="point" (onCheck)="setVisible($event)" (onCustomize)="toggleDialog()">
       
@@ -27700,7 +29070,7 @@ class MMPanel {
       </div>      
       <div class="dlg-buttons">
         <button class="btn" (click)="toggleLegend()">Legend</button>
-        <!-- <button class="btn" (click)="dataDialog.toggle()">Data</button> -->
+        <button class="btn" (click)="toggleData()">Data</button>
         <button class="btn" (click)="remove()">Remove</button>
         <button class="btn" (click)="reset()">Reset</button>
         <button class="btn" (click)="toggleShowHide()">
@@ -27711,6 +29081,21 @@ class MMPanel {
       </div>
     </dialog>
 
+    <dialog draggable mapagBringToFront onBody #dataDialog class="data-dialog">
+      <h2>{{mapper.settings().name}}</h2>
+      <div class="dlg-body dlg-body-list ">
+        {{ mapper.data().length }} records matching current filters.
+
+        <cdk-virtual-scroll-viewport [itemSize]="40">
+          <div *cdkVirtualFor="let feature of mapper.data()" (click)="onTileClick(feature)"
+          class="data-tile" [innerHTML]="popupRenderer.RenderPopupSync(feature) | safeHtml"></div>
+        </cdk-virtual-scroll-viewport>
+      </div>
+      <div class="dlg-buttons">
+        <button class="btn" (click)="toggleData()">Close</button>
+      </div>
+    </dialog>
+
     <!-- <ng-template #dataTemplate let-feature>
       <div [innerHTML]="mapper.popupRenderer?.RenderPopup(feature) | async"></div>
     </ng-template>
@@ -27721,11 +29106,12 @@ class MMPanel {
       [contentTemplate]="dataTemplate"
       (onSelect)="onSelect($event)">
     </mapag-tile-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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}::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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}::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}.dlg-body-list{display:grid;grid-template-rows:auto 1fr;row-gap:12px}.data-dialog{width:auto;max-width:min(450px,100vw);height:90dvh}.data-tile{padding:6px;border:1px solid #ccc;margin:4px;font-size:10pt;box-shadow:0 2px 4px #0000001a;cursor:pointer}.data-tile:hover{background-color:#f0f0f0}.data-tile:last-child{border-bottom:none}.tile-title{font-weight:600;color:#222}.tile-sub{color:#555;font-size:.85em}@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: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MMPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'mapag-mm-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubDataLayer, DraggableDialogDirective, FaIconComponent, BringToFrontDirective, TileDialog], template: `
+            args: [{ selector: 'mapag-mm-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubDataLayer, DraggableDialogDirective, FaIconComponent,
+                        BringToFrontDirective, CdkVirtualScrollViewport, CdkVirtualForOf, CdkFixedSizeVirtualScroll, SafeHtmlPipe], template: `
     <hub-data-layer [visible]="mapper.settings().visible" [name]="mapper.settings().name" 
     [desc]="mapper.settings().description  || 'MarketMaker Business'" shape="point" (onCheck)="setVisible($event)" (onCustomize)="toggleDialog()">
       
@@ -27866,7 +29252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
       </div>      
       <div class="dlg-buttons">
         <button class="btn" (click)="toggleLegend()">Legend</button>
-        <!-- <button class="btn" (click)="dataDialog.toggle()">Data</button> -->
+        <button class="btn" (click)="toggleData()">Data</button>
         <button class="btn" (click)="remove()">Remove</button>
         <button class="btn" (click)="reset()">Reset</button>
         <button class="btn" (click)="toggleShowHide()">
@@ -27877,6 +29263,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
       </div>
     </dialog>
 
+    <dialog draggable mapagBringToFront onBody #dataDialog class="data-dialog">
+      <h2>{{mapper.settings().name}}</h2>
+      <div class="dlg-body dlg-body-list ">
+        {{ mapper.data().length }} records matching current filters.
+
+        <cdk-virtual-scroll-viewport [itemSize]="40">
+          <div *cdkVirtualFor="let feature of mapper.data()" (click)="onTileClick(feature)"
+          class="data-tile" [innerHTML]="popupRenderer.RenderPopupSync(feature) | safeHtml"></div>
+        </cdk-virtual-scroll-viewport>
+      </div>
+      <div class="dlg-buttons">
+        <button class="btn" (click)="toggleData()">Close</button>
+      </div>
+    </dialog>
+
     <!-- <ng-template #dataTemplate let-feature>
       <div [innerHTML]="mapper.popupRenderer?.RenderPopup(feature) | async"></div>
     </ng-template>
@@ -27887,13 +29288,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
       [contentTemplate]="dataTemplate"
       (onSelect)="onSelect($event)">
     </mapag-tile-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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}::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"] }] } });
+  `, 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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}::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}.dlg-body-list{display:grid;grid-template-rows:auto 1fr;row-gap:12px}.data-dialog{width:auto;max-width:min(450px,100vw);height:90dvh}.data-tile{padding:6px;border:1px solid #ccc;margin:4px;font-size:10pt;box-shadow:0 2px 4px #0000001a;cursor:pointer}.data-tile:hover{background-color:#f0f0f0}.data-tile:last-child{border-bottom:none}.tile-title{font-weight:600;color:#222}.tile-sub{color:#555;font-size:.85em}@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 }] }], dataDialog: [{ type: i0.ViewChild, args: ['dataDialog', { isSignal: true }] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }] } });
 class MarketMakerPopupRenderer {
-    RenderPopup(feature) {
+    RenderPopupSync(feature) {
         const props = feature.properties;
         if (!props) {
-            return Promise.resolve(undefined);
+            return undefined;
         }
         let html = `<div>`;
         html += `<h3>${props.Name || 'MarketMaker Business'}</h3>`;
@@ -27925,7 +29326,10 @@ class MarketMakerPopupRenderer {
         onclick="window.open('https://foodmarketmaker.com/business/${props.ID}', '_blank')">Learn More...</button>
     `;
         html += `</div>`;
-        return Promise.resolve(html);
+        return html;
+    }
+    RenderPopup(feature) {
+        return this.RenderPopupSync(feature);
     }
     getArrayProperty(value) {
         const arr = this.parseArrayProperty(value) || [];
@@ -28304,7 +29708,7 @@ class HubNaicsPanel {
         {{ mapper.data().length }} records matching current filters.
         <cdk-virtual-scroll-viewport [itemSize]="10">
           <div *cdkVirtualFor="let feature of mapper.data()" (click)="mapper.flyToFeature(feature)"
-          class="data-tile" [innerHTML]="mapper.renderPopup(feature)">
+          class="data-tile" [innerHTML]="mapper.renderInfo(feature)">
           </div>
           
         </cdk-virtual-scroll-viewport>
@@ -28504,7 +29908,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         {{ mapper.data().length }} records matching current filters.
         <cdk-virtual-scroll-viewport [itemSize]="10">
           <div *cdkVirtualFor="let feature of mapper.data()" (click)="mapper.flyToFeature(feature)"
-          class="data-tile" [innerHTML]="mapper.renderPopup(feature)">
+          class="data-tile" [innerHTML]="mapper.renderInfo(feature)">
           </div>
           
         </cdk-virtual-scroll-viewport>
@@ -28808,85 +30212,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
   `, 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;flex-direction:column}dialog:open{display:flex}dialog .dlg-body{flex-grow:1;overflow-y:auto}dialog.legend{width:fit-content}dialog.legend h2{font-size:smaller}dialog select{max-width:90vw}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}@media screen and (max-width: 600px){dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:none;box-shadow:none;overflow:hidden}.dlg-buttons{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}dialog h2:before{content:\"\";padding-right:0}}.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}@media (max-width: 600px){.dlg-body{display:flex;flex-direction:column}.zones{max-height:unset;flex-grow:1}}\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 {
-    topStyle = signal({}, ...(ngDevMode ? [{ debugName: "topStyle" }] : []));
-    bottomStyle = signal({}, ...(ngDevMode ? [{ debugName: "bottomStyle" }] : []));
-    gradientStyle = signal({}, ...(ngDevMode ? [{ debugName: "gradientStyle" }] : []));
-    settings = input(new GradientSettings(), ...(ngDevMode ? [{ debugName: "settings" }] : []));
-    renderer = inject(Renderer2);
-    host = inject((ElementRef));
-    constructor() {
-        const onUpdateSettings = effect(() => {
-            const settings = this.settings();
-            this.topStyle.set({
-                background: settings.minTop ? settings.minColor : settings.maxColor,
-                value: settings.minValue
-            });
-            this.bottomStyle.set({
-                background: settings.minTop ? settings.maxColor : settings.minColor,
-                value: settings.maxValue
-            });
-            this.gradientStyle.set({
-                background: `linear-gradient(${settings.dir === 'horizontal' ? 'to right' : 'to top'}, ${settings.minColor}, ${settings.maxColor})`,
-                height: settings.dir === 'horizontal' ? '30px' : '100%',
-                width: settings.dir === 'horizontal' ? '100%' : '30px'
-            });
-        }, ...(ngDevMode ? [{ debugName: "onUpdateSettings" }] : []));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GradientLegend, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: GradientLegend, isStandalone: true, selector: "mapag-gradient-legend", inputs: { settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div class="top" [ngStyle]="topStyle()"></div>
-    <div>{{settings().unitPrefix}}{{ settings().maxValue | number:"1.0-2" }}{{settings().unitSuffix}}</div>
-    <div class="gradient" [ngStyle]="gradientStyle()"></div>
-    <div></div>
-    <div class="bottom" [ngStyle]="bottomStyle()"></div>
-    <div>{{settings().unitPrefix}}{{ settings().minValue | number:"1.0-2" }}{{settings().unitSuffix}}</div>
-  `, isInline: true, styles: [":host{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:auto max-content;align-items:center;font-size:.8em;height:var(--legend-height, 150px);column-gap:4px}.h2{margin-bottom:8px}.top,.bottom{height:50%}.top{background:var(--top-color, green);align-self:end}.bottom{background:var(--bottom-color, black);align-self:start}.gradient{width:20px;flex-grow:1;height:100%;align-self:center;justify-self:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: GradientLegend, decorators: [{
-            type: Component,
-            args: [{ selector: 'mapag-gradient-legend', imports: [CommonModule, FormsModule], template: `
-    <div class="top" [ngStyle]="topStyle()"></div>
-    <div>{{settings().unitPrefix}}{{ settings().maxValue | number:"1.0-2" }}{{settings().unitSuffix}}</div>
-    <div class="gradient" [ngStyle]="gradientStyle()"></div>
-    <div></div>
-    <div class="bottom" [ngStyle]="bottomStyle()"></div>
-    <div>{{settings().unitPrefix}}{{ settings().minValue | number:"1.0-2" }}{{settings().unitSuffix}}</div>
-  `, styles: [":host{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:auto max-content;align-items:center;font-size:.8em;height:var(--legend-height, 150px);column-gap:4px}.h2{margin-bottom:8px}.top,.bottom{height:50%}.top{background:var(--top-color, green);align-self:end}.bottom{background:var(--bottom-color, black);align-self:start}.gradient{width:20px;flex-grow:1;height:100%;align-self:center;justify-self:center}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { settings: [{ type: i0.Input, args: [{ isSignal: true, alias: "settings", required: false }] }] } });
-class GradientSettings {
-    minColor = "#000000";
-    maxColor = "#FFFFFF";
-    minValue = 0.0;
-    maxValue = 1.0;
-    height = "100px";
-    width = "30px";
-    minTop = false;
-    dir = 'vertical';
-    unitPrefix = '';
-    unitSuffix = '';
-}
-
-class TextPipe {
-    transform(value, ...args) {
-        if (value === null || value === undefined) {
-            return '';
-        }
-        if (typeof value === 'string') {
-            return fixText(value);
-        }
-        return value;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TextPipe, isStandalone: true, name: "text" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TextPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'text'
-                }]
-        }] });
-
 class NassPanel {
     map = input(...(ngDevMode ? [undefined, { debugName: "map" }] : []));
     mapper = new NAASMapper();
@@ -30935,13 +32260,13 @@ class SettingsPanel {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SettingsPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: SettingsPanel, isStandalone: true, selector: "app-settings-panel", ngImport: i0, template: `
     <ng-content></ng-content>
-  `, isInline: true, styles: [":host{position:fixed;padding:16px;border:1px solid #ccc;border-radius:8px;background-color:#efe9e1;right:16px;top:16px;bottom:16px;width:300px;box-shadow:0 2px 8px #0000001a;overflow-y:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{position:fixed;padding:16px;border:1px solid #ccc;border-radius:8px;background-color:#efe9e1;right:16px;top:16px;bottom:16px;width:320px;box-shadow:0 2px 8px #0000001a;overflow-y:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SettingsPanel, decorators: [{
             type: Component,
             args: [{ selector: 'app-settings-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: `
     <ng-content></ng-content>
-  `, styles: [":host{position:fixed;padding:16px;border:1px solid #ccc;border-radius:8px;background-color:#efe9e1;right:16px;top:16px;bottom:16px;width:300px;box-shadow:0 2px 8px #0000001a;overflow-y:auto}\n"] }]
+  `, styles: [":host{position:fixed;padding:16px;border:1px solid #ccc;border-radius:8px;background-color:#efe9e1;right:16px;top:16px;bottom:16px;width:320px;box-shadow:0 2px 8px #0000001a;overflow-y:auto}\n"] }]
         }] });
 
 /*
@@ -30953,5 +32278,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, PrintPanel, RailroadSettings, RailroadUsageSettings, RailroadsMapper, RasterIcon, ReferenceDataService, RemoveLayer, RemoveSource, SaveMap, SelectMode, SettingsPanel, SimpleMapper, SourceLoadWatcher, 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, ConsumerSpendingPanel, ConsumerSpendingSelectPanel, CropSequenceMapper, CropSequenceSettings, CroplandDataLayerMapper, CroplandDataLayerSettings, CroplandLegend, DEFAULT_GLYPHS, DEFAULT_GLYPHS2, DEFAULT_PIN_URL, DataSetFieldValue$1 as DataSetFieldValue, DirectoryIndexPToTable, DirectoryIndexToTable, DraggableDialogDirective, DrawPolygon, DrawSquare, DrawingMapper, EsriMapper, EsriSettings, ExpandArrows, FilterPanel, FipsFromDataSet$1 as 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, SourceLoadWatcher, StandardLayersMapper, StateCountySelectComponent, Styles, TableBuilder, TableRow, ToggleDialog, VectorTileServerMapper, WatershedMapper, WatershedSettings, WelcomePanel, discoverLayers, fixText, flyToFeature, isGeoloader, isMultiPolygon, isNumber2DArray, isNumber3DArray, isPolygon, mapboxImageName, mapboxLoadImages, mapboxloadImage, normalize, normalizeArray, pmtilesPixelInfo, prefixMatch, propertiesToTableHtml, randomColor, sampleTilesForLayers, simpleClone, toMultiPolygon, trySync };
 //# sourceMappingURL=foodmarketmaker-mapag.mjs.map