@foodmarketmaker/mapag 0.0.40 → 0.0.42

package/fesm2022/foodmarketmaker-mapag.mjs

@@ -15679,19 +15679,31 @@ class BackgroundMaskMapper {
                 ...settings,
             });
         }
-        const _ = effect(() => {
-            const settings = this.settings();
-            this._update(settings);
-        }, ...(ngDevMode ? [{ debugName: "_" }] : []));
+        // const _ = effect(() => {
+        //   const settings = this.settings();
+        //   this._update(settings);
+        // });
     }
     update(settings) {
+        if (!settings) {
+            return;
+        }
         this.settings.set({ ...this.settings(), ...settings });
+        if (Object.hasOwn(settings, 'mask')) {
+            // Generate
+            this.load({ ...this.settings(), ...settings });
+        }
+        // Update existing layer
+        this._update({ ...this.settings(), ...settings });
     }
     _update(settings) {
         if (!this.map) {
             return;
         }
-        this.load(settings);
+        const map = this.map;
+        map.setLayoutProperty(this.layer, 'visibility', settings.visible ? 'visible' : 'none');
+        map.setPaintProperty(this.layer, 'fill-color', settings.fillColor);
+        map.setPaintProperty(this.layer, 'fill-opacity', settings.fillOpacity);
     }
     onReady(map) {
         this.map = map;
@@ -21589,7 +21601,6 @@ class NAASMapper {
         }
     }
     onClick = async (e) => {
-        e.preventDefault();
         if (!this.map) {
             return;
         }
@@ -21603,6 +21614,7 @@ class NAASMapper {
             layers: [this.LAYER_ID],
         });
         if (features.length > 0) {
+            e.preventDefault();
             if (this.current) {
                 this.current.remove();
                 this.current = null;
@@ -21823,6 +21835,7 @@ class NaicsMapper {
     ICON_LAYER_ID;
     HEATMAP_LAYER_ID;
     settings = signal(new NaicsMapperSettings(), ...(ngDevMode ? [{ debugName: "settings" }] : []));
+    current = null;
     constructor(settings, id = undefined) {
         if (id) {
             this.id = id;
@@ -22184,7 +22197,7 @@ class NaicsMapper {
     getSettings() {
         return { ...this.settings() };
     }
-    onClick = (e) => {
+    onClick = async (e) => {
         if (!this.map) {
             return;
         }
@@ -22204,17 +22217,14 @@ class NaicsMapper {
         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);
-                this.renderPopup(item).then((html) => {
-                    if (!html) {
-                        return;
-                    }
-                    new Popup().setLngLat(e.lngLat).setHTML(html).addTo(map);
-                });
-            }
+        e.preventDefault();
+        if (this.current) {
+            this.current.remove();
+            this.current = null;
+        }
+        const html = await this.renderPopup(features[0]);
+        if (html) {
+            this.current = new Popup().setLngLat(e.lngLat).setHTML(html).addTo(this.map);
         }
     };
     async renderPopup(f) {
@@ -23703,6 +23713,7 @@ class PointDataMapper {
     CLUSTER_LABEL_LAYER_ID;
     settings = signal(new PointDataMapperSettings(), ...(ngDevMode ? [{ debugName: "settings" }] : []));
     svc = signal(null, ...(ngDevMode ? [{ debugName: "svc" }] : []));
+    current = null;
     constructor(popupRenderer, settings) {
         this.id = 'points-' + Math.random().toString(36).substring(2, 15);
         this.popupRenderer = popupRenderer;
@@ -24090,7 +24101,7 @@ class PointDataMapper {
             }, StandardLayersMapper.POINTS);
         });
     }
-    onClick = (e) => {
+    onClick = async (e) => {
         if (!this.map) {
             return;
         }
@@ -24102,12 +24113,18 @@ class PointDataMapper {
         else if (settings.type == 'icon') {
             features = this.map.queryRenderedFeatures(e.point, { layers: [this.ICON_LAYER_ID] });
         }
-        if (features.length > 0 && features[0] && this.popupRenderer) {
-            this.popupRenderer.RenderPopup(features[0]).then((html) => {
-                if (html && this.map) {
-                    new Popup().setLngLat(e.lngLat).setHTML(html).addTo(this.map);
-                }
-            });
+        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() {
@@ -24933,7 +24950,7 @@ class MapagDetails {
         <ng-content></ng-content>
       </div>
     </div>
-  `, isInline: true, styles: [".mapag-details{display:block}.summary{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;font-size:1em;font-weight:600;color:#000;padding:4px 0;// border-bottom: 2px solid gray;margin-bottom:0;margin-top:4px}.marker{display:inline-block;transition:transform .15s ease-out}.marker.open{transform:rotate(90deg);transform-origin:center}.content{max-height:0;overflow:hidden;transition:max-height .15s ease-out}.content.open{max-height:100vh;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
+  `, isInline: true, styles: [".mapag-details{display:block}.summary{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;font-size:1em;font-weight:600;color:#000;padding:4px 0;margin-bottom:0;margin-top:4px}.marker{display:inline-block;transition:transform .15s ease-out}.marker.open{transform:rotate(90deg);transform-origin:center}.content{max-height:0;overflow:hidden;transition:max-height .15s ease-out}.content.open{max-height:100vh;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MapagDetails, decorators: [{
             type: Component,
@@ -24947,7 +24964,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
         <ng-content></ng-content>
       </div>
     </div>
-  `, styles: [".mapag-details{display:block}.summary{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;font-size:1em;font-weight:600;color:#000;padding:4px 0;// border-bottom: 2px solid gray;margin-bottom:0;margin-top:4px}.marker{display:inline-block;transition:transform .15s ease-out}.marker.open{transform:rotate(90deg);transform-origin:center}.content{max-height:0;overflow:hidden;transition:max-height .15s ease-out}.content.open{max-height:100vh;overflow:visible}\n"] }]
+  `, styles: [".mapag-details{display:block}.summary{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:8px;font-size:1em;font-weight:600;color:#000;padding:4px 0;margin-bottom:0;margin-top:4px}.marker{display:inline-block;transition:transform .15s ease-out}.marker.open{transform:rotate(90deg);transform-origin:center}.content{max-height:0;overflow:hidden;transition:max-height .15s ease-out}.content.open{max-height:100vh;overflow:visible}\n"] }]
         }], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }] } });
 
 class PaletteDisplay {
@@ -25890,7 +25907,7 @@ class FilterPanel {
         const _mapInit = effect(() => {
             const mapComp = this.map();
             if (mapComp) {
-                mapComp.mapper().set("filter-mask", this.mapper);
+                mapComp.mapper().set('filter-mask', this.mapper);
             }
         }, ...(ngDevMode ? [{ debugName: "_mapInit" }] : []));
         const _globalFilter = effect(async () => {
@@ -25900,7 +25917,7 @@ class FilterPanel {
             if (stCo.length == 0) {
                 untracked(() => {
                     this.mapper.update({
-                        mask: undefined
+                        mask: undefined,
                     });
                 });
                 return;
@@ -25931,8 +25948,8 @@ class FilterPanel {
         }
         // Return a single mutlipolygon
         return {
-            type: "MultiPolygon",
-            coordinates: polys.flatMap(p => p.coordinates)
+            type: 'MultiPolygon',
+            coordinates: polys.flatMap((p) => p.coordinates),
         };
     }
     async loadMasks(codes) {
@@ -25979,6 +25996,11 @@ class FilterPanel {
         this.svc.stateCountyFilter.set([]);
         this.toggleDialog();
     }
+    update(field, value) {
+        this.mapper.update({
+            [field]: value,
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FilterPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: FilterPanel, isStandalone: true, selector: "mapag-filter-panel", inputs: { map: { classPropertyName: "map", publicName: "map", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "customizeDialog", first: true, predicate: ["customizeDialog"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div>
@@ -25986,48 +26008,106 @@ class FilterPanel {
         <fa-icon [icon]="faFilter"></fa-icon>
         Filters
       </button>
-    <div>
-    <dialog draggable mapagBringToFront onBody #customizeDialog>
-      <h2>Global Filters</h2>
-      
-      <div class="dlg-body">
-        <p>Apply global filters to the map data by selecting states or counties below.</p>
-        <label>States or Counties</label>
-        <mapag-state-county-select
-          [(ngModel)]="svc.stateCountyFilter"
-        ></mapag-state-county-select>
-      </div>
-      <div class="dlg-buttons">
-        <button class="btn" (click)="reset()">Reset</button>
-        <button class="btn" (click)="toggleDialog()">Close</button>
+      <div>
+        <dialog draggable mapagBringToFront onBody #customizeDialog>
+          <h2>Global Filters</h2>
+
+          <div class="dlg-body">
+            <p>Apply global filters to the map data by selecting states or counties below.</p>
+            <div class="zones">
+              <h3>Filters</h3>
+              <div class="ctrl-group">
+                <div class="ctrl-row">
+                  <label>States or Counties</label>
+                  <mapag-state-county-select [(ngModel)]="svc.stateCountyFilter"></mapag-state-county-select>
+                </div>
+              </div>
+
+              <h3>Mask</h3>
+              <div class="ctrl-group">
+                <div class="ctrl-row">
+                  <label for="mask">Highlighted Filtered Area</label>
+                  <input type="checkbox" id="mask" name="mask" [ngModel]="mapper.settings().visible" (ngModelChange)="update('visible', $event)" />
+                  <div></div>
+                  <div></div>
+
+                  <label for="maskColor">Mask Color</label>
+                  <input type="color" id="maskColor" name="maskColor" [ngModel]="mapper.settings().fillColor" (ngModelChange)="update('fillColor', $event)" />
+                  <div></div>
+                  <div></div>
+        
+                  <label for="mask-opacity">Mask Opacity</label>
+                  <input type="range" id="mask-opacity" name="mask-opacity" min="0" max="1" step="0.1" [ngModel]="mapper.settings().fillOpacity" (ngModelChange)="update('fillOpacity', $event)" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="dlg-buttons">
+            <button class="btn" (click)="reset()">Reset</button>
+            <button class="btn" (click)="toggleDialog()">Close</button>
+          </div>
+        </dialog>
       </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}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: StateCountySelectComponent, selector: "mapag-state-county-select", inputs: ["selection"], outputs: ["selectionChange"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: OnBodyDirective, selector: "dialog[onBody]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    </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}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: StateCountySelectComponent, selector: "mapag-state-county-select", inputs: ["selection"], outputs: ["selectionChange"] }, { kind: "directive", type: DraggableDialogDirective, selector: "dialog[draggable]" }, { kind: "directive", type: BringToFrontDirective, selector: "[mapagBringToFront]" }, { kind: "component", type: FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: OnBodyDirective, selector: "dialog[onBody]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FilterPanel, decorators: [{
             type: Component,
-            args: [{ selector: 'mapag-filter-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, StateCountySelectComponent, DraggableDialogDirective, BringToFrontDirective, FaIconComponent, OnBodyDirective], template: `
+            args: [{ selector: 'mapag-filter-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CommonModule,
+                        FormsModule,
+                        StateCountySelectComponent,
+                        DraggableDialogDirective,
+                        BringToFrontDirective,
+                        FaIconComponent,
+                        OnBodyDirective,
+                    ], template: `
     <div>
       <button class="mgr-btn" (click)="toggleDialog()">
         <fa-icon [icon]="faFilter"></fa-icon>
         Filters
       </button>
-    <div>
-    <dialog draggable mapagBringToFront onBody #customizeDialog>
-      <h2>Global Filters</h2>
-      
-      <div class="dlg-body">
-        <p>Apply global filters to the map data by selecting states or counties below.</p>
-        <label>States or Counties</label>
-        <mapag-state-county-select
-          [(ngModel)]="svc.stateCountyFilter"
-        ></mapag-state-county-select>
-      </div>
-      <div class="dlg-buttons">
-        <button class="btn" (click)="reset()">Reset</button>
-        <button class="btn" (click)="toggleDialog()">Close</button>
+      <div>
+        <dialog draggable mapagBringToFront onBody #customizeDialog>
+          <h2>Global Filters</h2>
+
+          <div class="dlg-body">
+            <p>Apply global filters to the map data by selecting states or counties below.</p>
+            <div class="zones">
+              <h3>Filters</h3>
+              <div class="ctrl-group">
+                <div class="ctrl-row">
+                  <label>States or Counties</label>
+                  <mapag-state-county-select [(ngModel)]="svc.stateCountyFilter"></mapag-state-county-select>
+                </div>
+              </div>
+
+              <h3>Mask</h3>
+              <div class="ctrl-group">
+                <div class="ctrl-row">
+                  <label for="mask">Highlighted Filtered Area</label>
+                  <input type="checkbox" id="mask" name="mask" [ngModel]="mapper.settings().visible" (ngModelChange)="update('visible', $event)" />
+                  <div></div>
+                  <div></div>
+
+                  <label for="maskColor">Mask Color</label>
+                  <input type="color" id="maskColor" name="maskColor" [ngModel]="mapper.settings().fillColor" (ngModelChange)="update('fillColor', $event)" />
+                  <div></div>
+                  <div></div>
+        
+                  <label for="mask-opacity">Mask Opacity</label>
+                  <input type="range" id="mask-opacity" name="mask-opacity" min="0" max="1" step="0.1" [ngModel]="mapper.settings().fillOpacity" (ngModelChange)="update('fillOpacity', $event)" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="dlg-buttons">
+            <button class="btn" (click)="reset()">Reset</button>
+            <button class="btn" (click)="toggleDialog()">Close</button>
+          </div>
+        </dialog>
       </div>
-    </dialog>
+    </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}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { map: [{ type: i0.Input, args: [{ isSignal: true, alias: "map", required: false }] }], customizeDialog: [{ type: i0.ViewChild, args: ['customizeDialog', { isSignal: true }] }] } });