@foodmarketmaker/mapag 0.0.44 → 0.0.46

package/fesm2022/foodmarketmaker-mapag.mjs

@@ -21,15 +21,15 @@ import bbox from '@turf/bbox';
 import bboxPolygon from '@turf/bbox-polygon';
 import buffer from '@turf/buffer';
 import difference from '@turf/difference';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, httpResource } from '@angular/common/http';
 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';
 
 function SaveMap(map) {
     var mapCanvas = map.getCanvas();
-    var image = mapCanvas
-        .toDataURL('image/png')
-        .replace('image/png', 'image/octet-stream');
+    var image = mapCanvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
     // here is the most important part because if you dont replace you will get a DOM 18 exception.
     window.location.href = image;
 }
@@ -187,37 +187,31 @@ async function pmtilesPixelInfo(url, map, e) {
     // 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));
-    const y = Math.floor(((1 -
-        Math.log(Math.tan((lngLat.lat * Math.PI) / 180) +
-            1 / Math.cos((lngLat.lat * Math.PI) / 180)) /
-            Math.PI) /
+    const y = Math.floor(((1 - Math.log(Math.tan((lngLat.lat * Math.PI) / 180) + 1 / Math.cos((lngLat.lat * Math.PI) / 180)) / Math.PI) /
         2) *
         Math.pow(2, zoom));
     // 5. Fetch the tile from PMTiles
     const tile = await pmtiles.getZxy(zoom, x, y);
     if (!tile) {
-        console.log("No tile found at this location");
+        console.log('No tile found at this location');
         return undefined;
     }
     // Decode the raster tile (PNG or WebP)
     const blob = new Blob([tile.data]);
     const bitmap = await createImageBitmap(blob);
     // Draw to canvas to read pixel
-    const canvas = document.createElement("canvas");
+    const canvas = document.createElement('canvas');
     canvas.width = bitmap.width;
     canvas.height = bitmap.height;
-    const ctx = canvas.getContext("2d");
+    const ctx = canvas.getContext('2d');
     if (!ctx) {
-        console.error("Failed to get canvas context");
+        console.error('Failed to get canvas context');
         return undefined;
     }
     ctx.drawImage(bitmap, 0, 0);
     // Convert lat/lon to pixel coordinates inside the tile
     const px = Math.floor(((lngLat.lng + 180) / 360) * (256 * Math.pow(2, zoom))) % 256;
-    const py = Math.floor(((1 -
-        Math.log(Math.tan((lngLat.lat * Math.PI) / 180) +
-            1 / Math.cos((lngLat.lat * Math.PI) / 180)) /
-            Math.PI) /
+    const py = Math.floor(((1 - Math.log(Math.tan((lngLat.lat * Math.PI) / 180) + 1 / Math.cos((lngLat.lat * Math.PI) / 180)) / Math.PI) /
         2) *
         (256 * Math.pow(2, zoom))) % 256;
     const pixel = ctx.getImageData(px, py, 1, 1).data;
@@ -255,7 +249,7 @@ class TableBuilder {
         return this;
     }
     toHtml() {
-        const rowHtml = this.rows.map(row => row.toHtml()).join('');
+        const rowHtml = this.rows.map((row) => row.toHtml()).join('');
         return `<table style="border-collapse: collapse; width: 100%; font-size: 9px;">${rowHtml}</table>`;
     }
 }
@@ -271,7 +265,7 @@ class TableRow {
     }
     toHtml() {
         if (this.isHeader) {
-            return `<tr>${this.cells.map(cell => `<th style="${this.headerStyle}">${cell}</th>`).join('\n')}</tr>`;
+            return `<tr>${this.cells.map((cell) => `<th style="${this.headerStyle}">${cell}</th>`).join('\n')}</tr>`;
         }
         return `<tr>${this.cells.map((cell, index) => `<td style="${index == 0 ? this.rowStyle1 : this.rowStyle2}">${cell}</td>`).join('')}</tr>`;
     }
@@ -279,7 +273,7 @@ class TableRow {
 function normalizeArray(values) {
     const min = Math.min(...values);
     const max = Math.max(...values);
-    return values.map(v => normalize(v, min, max));
+    return values.map((v) => normalize(v, min, max));
 }
 function normalize(value, min, max) {
     if (max - min == 0) {
@@ -298,16 +292,60 @@ function prefixMatch(matchExpression, prefixes) {
     if (!prefixes || prefixes.length === 0) {
         return null;
     }
-    const filter = [
-        "any",
-        ...prefixes.map(prefix => [
-            "==",
-            ["slice", matchExpression, 0, prefix.length],
-            prefix
-        ])
-    ];
+    const filter = ['any', ...prefixes.map((prefix) => ['==', ['slice', matchExpression, 0, prefix.length], prefix])];
     return filter;
 }
+class SourceLoadWatcher {
+    updated = signal(0, ...(ngDevMode ? [{ debugName: "updated" }] : []));
+    debounceTimer = null;
+    debounceMs;
+    sourceId;
+    map;
+    constructor(debounceMs = 30) {
+        this.debounceMs = debounceMs;
+    }
+    on(map, sourceId) {
+        this.map = map;
+        this.sourceId = sourceId;
+        this.map.on('sourcedata', this.handle);
+    }
+    off() {
+        if (!this.map)
+            return;
+        this.map.off('sourcedata', this.handle);
+    }
+    handle = (e) => {
+        if (!this.map)
+            return;
+        if (e.sourceId !== this.sourceId)
+            return;
+        // Ignore style/layout-only events (maplibre emits sourcedata for metadata/visibility changes)
+        if (e.dataType && e.dataType !== 'source')
+            return;
+        // Allow real data events; skip pure metadata/visibility
+        const sdt = e.sourceDataType;
+        const hasTile = Boolean(e.tile);
+        if (sdt === 'metadata')
+            return;
+        if (sdt && sdt !== 'content' && sdt !== 'tile')
+            return;
+        if (!sdt && !hasTile)
+            return; // unknown non-tile event (likely style/visibility)
+        // Only proceed when the map reports the source as fully loaded
+        if (!this.map.isSourceLoaded(e.sourceId))
+            return;
+        // Debounce to ensure we catch the *last* event
+        clearTimeout(this.debounceTimer);
+        this.debounceTimer = setTimeout(() => {
+            if (!this.map)
+                return;
+            // Wait for the map to finish rendering
+            this.map.once('idle', () => {
+                this.updated.update((n) => n + 1);
+            });
+        }, this.debounceMs);
+    };
+}
 
 const DEFAULT_GLYPHS2 = "https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf";
 const DEFAULT_GLYPHS = "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf";
@@ -21769,6 +21807,15 @@ class NAASSettings {
     showLegend = false;
 }
 
+function Filter(features, filter) {
+    if (!filter) {
+        return features;
+    }
+    const fn = featureFilter(filter);
+    const matched = features.filter((f) => fn.filter({ zoom: 12 }, f));
+    return matched;
+}
+
 const NaicsSalesOptions = [
     { key: 'Less Than $500,000'.toLowerCase(), value: 'Less Than $500,000' },
     { key: '$500,000 TO $1 Million'.toLowerCase(), value: '$500,000 TO $1 Million' },
@@ -21849,6 +21896,7 @@ class NaicsMapperSettings {
     filterState;
     filterStates = [];
     showLegend = false;
+    externalLoad = true;
 }
 class NaicsMapper {
     legends = [];
@@ -21864,6 +21912,16 @@ class NaicsMapper {
     HEATMAP_LAYER_ID;
     settings = signal(new NaicsMapperSettings(), ...(ngDevMode ? [{ debugName: "settings" }] : []));
     current = null;
+    watcher = new SourceLoadWatcher();
+    http = inject(HttpClient);
+    geoJsonUrl = computed(() => {
+        const settings = this.settings();
+        if (settings.externalLoad) {
+            return this.buildSourceUrl(settings);
+        }
+        return null;
+    }, ...(ngDevMode ? [{ debugName: "geoJsonUrl" }] : []));
+    geoJsonResource = httpResource(() => this.geoJsonUrl() || undefined);
     constructor(settings, id = undefined) {
         if (id) {
             this.id = id;
@@ -21896,6 +21954,42 @@ class NaicsMapper {
             this._update(this.settings());
         }, ...(ngDevMode ? [{ debugName: "_updateGlobal" }] : []));
     }
+    data = computed(() => {
+        this.watcher.updated(); // depend on source data changes
+        const settings = this.settings();
+        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" }] : []));
     update(settings) {
         this.settings.set({ ...this.settings(), ...settings });
     }
@@ -21919,7 +22013,7 @@ class NaicsMapper {
                 break;
             case 'icon':
                 if (map.getLayer(this.ICON_LAYER_ID)) {
-                    await this.loadIcon();
+                    await this.loadIcon(settings);
                     map.setLayoutProperty(this.ICON_LAYER_ID, 'visibility', settings.visible ? 'visible' : 'none');
                     map.setLayoutProperty(this.ICON_LAYER_ID, 'icon-image', mapboxImageName(settings.iconUrl));
                     map.setLayoutProperty(this.ICON_LAYER_ID, 'icon-size', settings.iconSize);
@@ -21945,6 +22039,7 @@ class NaicsMapper {
     onReady(map, svc) {
         this.map = map;
         this.svc.set(svc);
+        this.watcher.on(map, this.id);
         this.create(this.settings());
     }
     reset() {
@@ -22004,18 +22099,7 @@ class NaicsMapper {
             svc.UpdateLegend(this.id, legend);
         }
     }
-    // Method to create layers
-    async create(settings) {
-        if (!this.map) {
-            return;
-        }
-        const map = this.map;
-        if (!settings.ID) {
-            return;
-        }
-        // Create the data source url based on source type
-        //  'https://foodmarketmaker-upload-data.s3.us-west-2.amazonaws.com/tiles/naics/geojson/NAICS_CODE_111320.geojson'
-        // let sourceURL = 'https://foodmarketmaker-upload-data.s3.us-west-2.amazonaws.com/tiles/naics/geojson/NAICS_CODE_311211.geojson
+    buildSourceUrl(settings) {
         let sourceURL = 'https://foodmarketmaker-upload-data.s3.us-west-2.amazonaws.com/tiles/naics/';
         if (settings.source) {
             sourceURL += settings.source + '/';
@@ -22026,6 +22110,18 @@ class NaicsMapper {
         else {
             sourceURL += 'geojson/NAICS_CODE_' + settings?.ID + '.geojson';
         }
+        return sourceURL;
+    }
+    // Method to create layers
+    async create(settings) {
+        if (!this.map) {
+            return;
+        }
+        const map = this.map;
+        if (!settings.ID) {
+            return;
+        }
+        const sourceURL = this.buildSourceUrl(settings);
         // Update or add the source
         const currentSource = map.getSource(this.id);
         if (!currentSource) {
@@ -22034,15 +22130,16 @@ class NaicsMapper {
                 data: sourceURL,
             });
         }
-        else if (currentSource._data !== sourceURL) {
+        else {
             currentSource.setData(sourceURL);
         }
         // Add visualization layer based on type
-        await this.addVisualizationLayer(map);
+        await this.addVisualizationLayer(map, settings);
         // Add cluster layers if clustering is enabled
         if (settings.sourceType === 'geojson') {
             // 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);
@@ -22052,7 +22149,7 @@ class NaicsMapper {
         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);
+        this.filter(map, settings);
         untracked(() => this.updateLegend(settings));
     }
     getActiveLayerId() {
@@ -22068,12 +22165,11 @@ class NaicsMapper {
                 return this.CIRCLE_LAYER_ID;
         }
     }
-    async loadIcon() {
+    async loadIcon(settings) {
         if (!this.map) {
             return;
         }
         const map = this.map;
-        const settings = this.settings();
         const iconName = mapboxImageName(settings.iconUrl);
         if (settings.iconUrl && !map.hasImage(iconName)) {
             await mapboxloadImage(map, {
@@ -22083,15 +22179,11 @@ class NaicsMapper {
             });
         }
     }
-    async addVisualizationLayer(map) {
-        const settings = this.settings();
+    async addVisualizationLayer(map, settings) {
         // Remove existing layers that ar not needed
-        if (settings.type !== 'circle')
-            RemoveLayer(map, this.CIRCLE_LAYER_ID);
-        if (settings.type !== 'icon')
-            RemoveLayer(map, this.ICON_LAYER_ID);
-        if (settings.type !== 'heatmap')
-            RemoveLayer(map, this.HEATMAP_LAYER_ID);
+        // if (settings.type !== 'circle') RemoveLayer(map, this.CIRCLE_LAYER_ID);
+        // if (settings.type !== 'icon') RemoveLayer(map, this.ICON_LAYER_ID);
+        // if (settings.type !== 'heatmap') RemoveLayer(map, this.HEATMAP_LAYER_ID);
         // Add layer based on type
         switch (settings.type) {
             case 'circle':
@@ -22114,7 +22206,7 @@ class NaicsMapper {
                 break;
             case 'icon':
                 // Load icon image if URL is provided and not already loaded
-                await this.loadIcon();
+                await this.loadIcon(settings);
                 AddLayer(map, {
                     id: this.ICON_LAYER_ID,
                     type: 'symbol',
@@ -22155,8 +22247,7 @@ class NaicsMapper {
                 break;
         }
     }
-    getFipsFilter() {
-        const settings = this.settings();
+    getFipsFilter(settings) {
         if (settings.filterOverrideGlobal) {
             if (settings.filterStates && settings.filterStates.length > 0) {
                 return settings.filterStates;
@@ -22167,8 +22258,51 @@ class NaicsMapper {
         }
         return this.svc()?.stateCountyFilter();
     }
-    filter(map) {
-        const settings = this.settings();
+    getFilter(settings) {
+        // Build filter conditions for each field
+        const conditions = ['all'];
+        const fipsFilter = this.getFipsFilter(settings);
+        if (fipsFilter && fipsFilter.length > 0) {
+            const filter = [
+                "any",
+                ...fipsFilter.map(prefix => [
+                    "==",
+                    ["slice", ["get", "FIPS"], 0, prefix.length],
+                    prefix
+                ])
+            ];
+            // @ts-ignore
+            conditions.push(filter);
+        }
+        // Filter by Employees (if array has values)
+        if (settings.filterEmployees &&
+            settings.filterEmployees.length > 0 &&
+            settings.filterEmployees.length < Object.keys(NaicsEmployeesOptions).length) {
+            const employeeConditions = [
+                'in',
+                ['downcase', ['coalesce', ['get', 'NUMBER_OF_EMPLOYEES'], '']],
+                ['literal', settings.filterEmployees],
+            ];
+            conditions.push(employeeConditions);
+        }
+        // Filter by Sales (if array has values)
+        if (settings.filterSales &&
+            settings.filterSales.length > 0 &&
+            settings.filterSales.length < Object.keys(NaicsSalesOptions).length) {
+            const salesConditions = [
+                'in',
+                ['downcase', ['get', 'SALES_VOLUME']],
+                ['literal', settings.filterSales],
+            ];
+            conditions.push(salesConditions);
+        }
+        // Apply filter if we have any conditions, otherwise clear filter
+        if (conditions.length > 1) {
+            return conditions;
+        }
+        return undefined;
+    }
+    filter(map, settings) {
         const layerId = this.getActiveLayerId();
         if (!map.getLayer(layerId)) {
             console.warn('Layer not found:', layerId);
@@ -22176,7 +22310,7 @@ class NaicsMapper {
         }
         // 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",
@@ -22225,6 +22359,19 @@ class NaicsMapper {
     getSettings() {
         return { ...this.settings() };
     }
+    flyToFeature(f) {
+        if (!this.map) {
+            return;
+        }
+        if (!f.geometry || f.geometry.type !== 'Point') {
+            return;
+        }
+        const coords = f.geometry.coordinates;
+        this.map.flyTo({
+            center: [coords[0], coords[1]],
+            zoom: 12,
+        });
+    }
     onClick = async (e) => {
         if (!this.map) {
             return;
@@ -22250,12 +22397,12 @@ class NaicsMapper {
             this.current.remove();
             this.current = null;
         }
-        const html = await this.renderPopup(features[0]);
+        const html = this.renderPopup(features[0]);
         if (html) {
             this.current = new Popup().setLngLat(e.lngLat).setHTML(html).addTo(this.map);
         }
     };
-    async renderPopup(f) {
+    renderPopup(f) {
         if (!f || !f.properties) {
             return undefined;
         }
@@ -22287,9 +22434,12 @@ class NaicsMapper {
             html += `<b>SIC: </b>${item?.['SIC_CODE1']} ${item?.['SIC1_DESCRIPTION']}`;
         }
         html += `FIPS: ${item?.['FIPS']}`;
-        if (f.geometry.type === 'Point') {
+        if (f?.geometry?.type === 'Point') {
             html += `<br/><br/><small style="color: gray;">(${f.geometry.coordinates[1].toFixed(8)}, ${f.geometry.coordinates[0].toFixed(8)})</small>`;
         }
+        else {
+            console.warn('Feature geometry is not Point for popup coordinates display.', f);
+        }
         html += `<br/><small style="color: gray;">${item?.['DSO_ID']}</small>`;
         return html;
     }
@@ -23742,6 +23892,11 @@ class PointDataMapper {
     settings = signal(new PointDataMapperSettings(), ...(ngDevMode ? [{ debugName: "settings" }] : []));
     svc = signal(null, ...(ngDevMode ? [{ debugName: "svc" }] : []));
     current = null;
+    geoJsonUrl = computed(() => {
+        const settings = this.settings();
+        return settings.source;
+    }, ...(ngDevMode ? [{ debugName: "geoJsonUrl" }] : []));
+    geoJsonResource = httpResource(() => this.geoJsonUrl() || undefined);
     constructor(popupRenderer, settings) {
         this.id = 'points-' + Math.random().toString(36).substring(2, 15);
         this.popupRenderer = popupRenderer;
@@ -23777,6 +23932,34 @@ 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();
+        const features = geoJsonData?.features || [];
+        if (!features || features.length === 0) {
+            return [];
+        }
+        const filter = this.getFilter(settings);
+        const filtered = Filter(features, filter);
+        return filtered || [];
+    }, ...(ngDevMode ? [{ debugName: "data" }] : []));
     update(settings) {
         this.settings.set({ ...this.settings(), ...settings });
     }
@@ -23822,7 +24005,7 @@ class PointDataMapper {
                 }
                 break;
         }
-        this.filter(map);
+        this.filter(map, settings);
         this.updateLegend(settings);
     }
     async loadIcon() {
@@ -23841,8 +24024,7 @@ class PointDataMapper {
         }
     }
     updateLegend(settings) { }
-    getActiveLayerId() {
-        const settings = this.settings();
+    getActiveLayerId(settings) {
         switch (settings.type) {
             case 'circle':
                 return this.POINT_LAYER_ID;
@@ -23854,13 +24036,7 @@ class PointDataMapper {
                 return this.POINT_LAYER_ID;
         }
     }
-    filter(map) {
-        const settings = this.settings();
-        const layerId = this.getActiveLayerId();
-        if (!map.getLayer(layerId)) {
-            console.warn('Layer not found:', layerId);
-            return;
-        }
+    getFilter(settings) {
         // Build filter conditions for each field
         const conditions = ['all'];
         const fipsFilter = this.getFipsFilter();
@@ -23875,14 +24051,21 @@ class PointDataMapper {
         // We can add any other filters here in the future
         // Apply filter if we have any conditions, otherwise clear filter
         if (conditions.length > 1) {
-            map.setFilter(layerId, conditions);
-            console.debug('Applied filter on layer:', layerId, 'filter:', JSON.stringify(conditions));
+            return conditions;
         }
         else {
-            map.setFilter(layerId, null);
-            console.debug('Cleared filter on layer:', layerId);
+            return null;
         }
     }
+    filter(map, settings) {
+        const layerId = this.getActiveLayerId(settings);
+        if (!map.getLayer(layerId)) {
+            console.warn('Layer not found:', layerId);
+            return;
+        }
+        const filter = this.getFilter(settings);
+        map.setFilter(layerId, filter);
+    }
     onReady(map, svc) {
         this.map = map;
         this.svc.set(svc);
@@ -27158,6 +27341,92 @@ 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();
+        }
+    }
+    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 });
+}
+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 }] }] } });
+
 class MMPanel {
     // Icons and static data
     faCircle = faCircle;
@@ -27222,6 +27491,9 @@ class MMPanel {
             'justify-self': 'center',
         };
     }, ...(ngDevMode ? [{ debugName: "heatMapStyle" }] : []));
+    onSelect(f) {
+        // Handle feature selection from dialog
+    }
     constructor() {
         const _mapInit = effect(() => {
             const mapComp = this.map();
@@ -27283,6 +27555,9 @@ class MMPanel {
     ngOnDestroy() {
         this.mapper.clear();
     }
+    toggleData() {
+        // Implement dialog toggle logic here
+    }
     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: `
     <hub-data-layer [visible]="mapper.settings().visible" [name]="mapper.settings().name" 
@@ -27425,6 +27700,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)="remove()">Remove</button>
         <button class="btn" (click)="reset()">Reset</button>
         <button class="btn" (click)="toggleShowHide()">
@@ -27434,11 +27710,22 @@ class MMPanel {
         <button class="btn" (click)="toggleDialog()">Close</button>
       </div>
     </dialog>
-  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;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 });
+
+    <ng-template #dataTemplate let-feature>
+      <div [innerHTML]="mapper.popupRenderer?.RenderPopup(feature) | async"></div>
+    </ng-template>
+    <mapag-tile-dialog 
+      #dataDialog
+      [data]="mapper.data()" 
+      [name]="mapper.settings().name" 
+      [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]" }, { kind: "component", type: TileDialog, selector: "mapag-tile-dialog", inputs: ["data", "name", "contentTemplate"], outputs: ["onSelect"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], 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], template: `
+            args: [{ selector: 'mapag-mm-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubDataLayer, DraggableDialogDirective, FaIconComponent, BringToFrontDirective, TileDialog], 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()">
       
@@ -27579,6 +27866,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)="remove()">Remove</button>
         <button class="btn" (click)="reset()">Reset</button>
         <button class="btn" (click)="toggleShowHide()">
@@ -27588,6 +27876,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         <button class="btn" (click)="toggleDialog()">Close</button>
       </div>
     </dialog>
+
+    <ng-template #dataTemplate let-feature>
+      <div [innerHTML]="mapper.popupRenderer?.RenderPopup(feature) | async"></div>
+    </ng-template>
+    <mapag-tile-dialog 
+      #dataDialog
+      [data]="mapper.data()" 
+      [name]="mapper.settings().name" 
+      [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"] }] } });
 class MarketMakerPopupRenderer {
@@ -27677,6 +27976,7 @@ class HubNaicsPanel {
     map = input(...(ngDevMode ? [undefined, { debugName: "map" }] : []));
     mapper = new NaicsMapper();
     customizeDialog = viewChild('customizeDialog', ...(ngDevMode ? [{ debugName: "customizeDialog" }] : []));
+    dataDialog = viewChild('dataDialog', ...(ngDevMode ? [{ debugName: "dataDialog" }] : []));
     onRemove = output();
     style = computed(() => {
         const sel = this.mapper.settings().type;
@@ -27750,6 +28050,20 @@ class HubNaicsPanel {
         }
         // Implement dialog toggle logic here
     }
+    toggleData() {
+        const dialog = this.dataDialog();
+        if (!dialog) {
+            return;
+        }
+        const dialogElement = dialog.nativeElement;
+        if (dialogElement.open) {
+            dialogElement.close();
+        }
+        else {
+            dialogElement.show();
+        }
+        // Implement dialog toggle logic here
+    }
     toggleLegend() {
         if (!this.parent) {
             return;
@@ -27772,6 +28086,7 @@ class HubNaicsPanel {
     ngOnDestroy() {
         this.mapper.clear();
     }
+    trackById = (_, item) => item.id;
     updateFilter(filter, value, checked) {
         const settings = this.mapper.settings();
         let currentValues = [];
@@ -27798,8 +28113,12 @@ class HubNaicsPanel {
             this.update('filterEmployees', currentValues);
         }
     }
+    // Open the "data" dialog in a new window and keep it in sync with the main window by using
+    // broadcast channel
+    newWindow() {
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HubNaicsPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: HubNaicsPanel, isStandalone: true, selector: "hub-naics-panel", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, map: { classPropertyName: "map", publicName: "map", 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: HubNaicsPanel, isStandalone: true, selector: "hub-naics-panel", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, map: { classPropertyName: "map", publicName: "map", 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]="'NAICS Code ' + mapper.settings().ID" shape="point" (onCheck)="setVisible($event)" (onCustomize)="toggleDialog()">
       
@@ -27968,6 +28287,7 @@ class HubNaicsPanel {
         @if (parent) {
           <button class="btn" (click)="toggleLegend()">Legend</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()">
@@ -27977,11 +28297,28 @@ class HubNaicsPanel {
         <button class="btn" (click)="toggleDialog()">Close</button>
       </div>
     </dialog>
-  `, isInline: true, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;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]" }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "appearance", "ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd", "itemsChange"] }, { kind: "directive", type: OnBodyDirective, selector: "dialog[onBody]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+
+    <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]="10">
+          <div *cdkVirtualFor="let feature of mapper.data()" (click)="mapper.flyToFeature(feature)"
+          class="data-tile" [innerHTML]="mapper.renderPopup(feature)">
+          </div>
+          
+        </cdk-virtual-scroll-viewport>
+      </div>
+      <div class="dlg-buttons">
+        <button class="btn" (click)="toggleData()">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}}::deep .ng-select-container,::deep .ng-select{font-size:.8em}.dlg-body-list{display:grid;grid-template-rows:auto 1fr;row-gap:12px}.data-dialog{width:auto;max-width:min(450px,100vw);height:90dvh}.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}.data-viewport{height:360px;width:100%;border:1px solid #ccc;border-radius:6px;background:#fff}.data-tile{padding:6px;border:1px solid #ccc;margin:4px;font-size:10pt;box-shadow:0 2px 4px #0000001a}.data-tile:last-child{border-bottom:none}.tile-title{font-weight:600;color:#222}.tile-sub{color:#555;font-size:.85em}.svgicon{height:30px;width:30px;-webkit-mask-size:contain;mask-size:contain}h4,label{display:flex;align-items:center;gap:4px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: HubDataLayer, selector: "hub-data-layer", inputs: ["visible", "name", "desc", "icon", "shape"], outputs: ["onCustomize", "onCheck"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "appearance", "ariaLabelDropdown", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "tabFocusOnClearButton", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["bindLabelChange", "bindValueChange", "appearanceChange", "isOpenChange", "blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd", "itemsChange"] }, { kind: "directive", type: OnBodyDirective, selector: "dialog[onBody]" }, { 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: HubNaicsPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'hub-naics-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubDataLayer, DraggableDialogDirective, FaIconComponent, BringToFrontDirective, NgSelectComponent, OnBodyDirective], template: `
+            args: [{ selector: 'hub-naics-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, HubDataLayer, DraggableDialogDirective, FaIconComponent,
+                        BringToFrontDirective, NgSelectComponent, OnBodyDirective, CdkVirtualScrollViewport, CdkVirtualForOf, CdkFixedSizeVirtualScroll], template: `
     <hub-data-layer [visible]="mapper.settings().visible" [name]="mapper.settings().Name||' '" 
     [desc]="'NAICS Code ' + mapper.settings().ID" shape="point" (onCheck)="setVisible($event)" (onCustomize)="toggleDialog()">
       
@@ -28150,6 +28487,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         @if (parent) {
           <button class="btn" (click)="toggleLegend()">Legend</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()">
@@ -28159,8 +28497,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         <button class="btn" (click)="toggleDialog()">Close</button>
       </div>
     </dialog>
-  `, styles: ["dialog{font-size:14pt;width:100%;max-width:700px;border:none;border-radius:8px;box-shadow:0 2px 10px #0003;padding:16px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;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: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }], customizeDialog: [{ type: i0.ViewChild, args: ['customizeDialog', { isSignal: true }] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }] } });
+
+    <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]="10">
+          <div *cdkVirtualFor="let feature of mapper.data()" (click)="mapper.flyToFeature(feature)"
+          class="data-tile" [innerHTML]="mapper.renderPopup(feature)">
+          </div>
+          
+        </cdk-virtual-scroll-viewport>
+      </div>
+      <div class="dlg-buttons">
+        <button class="btn" (click)="toggleData()">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}}::deep .ng-select-container,::deep .ng-select{font-size:.8em}.dlg-body-list{display:grid;grid-template-rows:auto 1fr;row-gap:12px}.data-dialog{width:auto;max-width:min(450px,100vw);height:90dvh}.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}.data-viewport{height:360px;width:100%;border:1px solid #ccc;border-radius:6px;background:#fff}.data-tile{padding:6px;border:1px solid #ccc;margin:4px;font-size:10pt;box-shadow:0 2px 4px #0000001a}.data-tile:last-child{border-bottom:none}.tile-title{font-weight:600;color:#222}.tile-sub{color:#555;font-size:.85em}.svgicon{height:30px;width:30px;-webkit-mask-size:contain;mask-size:contain}h4,label{display:flex;align-items:center;gap:4px}@media (max-width: 600px){.zones{grid-template-columns:1fr}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }], customizeDialog: [{ type: i0.ViewChild, args: ['customizeDialog', { isSignal: true }] }], dataDialog: [{ type: i0.ViewChild, args: ['dataDialog', { isSignal: true }] }], onRemove: [{ type: i0.Output, args: ["onRemove"] }] } });
 
 class NaicsMgrPanel {
     faCircle = faCircle;
@@ -30492,6 +30846,12 @@ class WelcomePanel {
           be moved around the screen by dragging their title bars.
         </p>
 
+        <h3>Feedback</h3>
+        <p>
+          We value your feedback to improve this tool. Please reach out to us with any comments, questions, 
+          or suggestions by using the <a href=" https://forms.gle/b8DHfcEe44XPChE18" target="_blank" class="btn">feedback form.</a>
+        </p>
+
         <h3>References</h3>
         <div style="display: flex; flex-direction: column;">
           <a href="https://foodmarketmaker.com" target="_blank">Food MarketMaker</a>
@@ -30551,6 +30911,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
           be moved around the screen by dragging their title bars.
         </p>
 
+        <h3>Feedback</h3>
+        <p>
+          We value your feedback to improve this tool. Please reach out to us with any comments, questions, 
+          or suggestions by using the <a href=" https://forms.gle/b8DHfcEe44XPChE18" target="_blank" class="btn">feedback form.</a>
+        </p>
+
         <h3>References</h3>
         <div style="display: flex; flex-direction: column;">
           <a href="https://foodmarketmaker.com" target="_blank">Food MarketMaker</a>
@@ -30587,5 +30953,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, StandardLayersMapper, StateCountySelectComponent, Styles, TableBuilder, TableRow, VectorTileServerMapper, WatershedMapper, WatershedSettings, WelcomePanel, discoverLayers, fixText, isGeoloader, isMultiPolygon, isNumber2DArray, isNumber3DArray, isPolygon, mapboxImageName, mapboxLoadImages, mapboxloadImage, normalize, normalizeArray, pmtilesPixelInfo, prefixMatch, propertiesToTableHtml, randomColor, sampleTilesForLayers, simpleClone, toMultiPolygon, trySync };
+export { AddLayer, AddSource, AreaIcon, AreaMapperMapper, BackgroundMaskMapper, BackgroundMaskSettings, BaseMapLight, BasemapSelect, BasemapSelectMenu, BringToFrontDirective, BringToFrontService, CensusTractMapper, Codes, CropSequenceMapper, CropSequenceSettings, CroplandDataLayerMapper, CroplandDataLayerSettings, CroplandLegend, DEFAULT_GLYPHS, DEFAULT_GLYPHS2, DEFAULT_PIN_URL, DataSetFieldValue, DirectoryIndexPToTable, DirectoryIndexToTable, DraggableDialogDirective, DrawPolygon, DrawSquare, DrawingMapper, EsriMapper, EsriSettings, ExpandArrows, FilterPanel, FipsFromDataSet, FoodHubPanel, FoodhubMapper, FoodhubMapperSettings, HardinessMapper, HardinessSettings, HttpBoundaryLoader, HubCropSequencePanel, HubCroplandPanel, HubDataLayer, HubHardinessPanel, HubNaicsPanel, HubRailroadPanel, HubWatershedPanel, Icons, LineIcon, MMPanel, MapAreaSelectComponent, MapComponent, MapSelectionService, MapService, MapStyles, MapagDetails, MapboxMapperGroup, MarketMakerPopupRenderer, NAASMapper, NAASSettings, NASSInfo, NaicsEmployeesOptions, NaicsMapper, NaicsMapperSettings, NaicsMgrPanel, NaicsSalesOptions, NassIndex, NassInfoFromIndex, NassInfoFromIndexP, NassInfoFromPath, NassMgrPanel, NassPanel, NassService, NoOpMapper, PaletteDisplay, PaletteSelect, PointDataMapper, PointDataMapperSettings, PrintPanel, RailroadSettings, RailroadUsageSettings, RailroadsMapper, RasterIcon, ReferenceDataService, RemoveLayer, RemoveSource, SaveMap, SelectMode, SettingsPanel, SimpleMapper, 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 };
 //# sourceMappingURL=foodmarketmaker-mapag.mjs.map