@esri/solutions-components 0.8.4 → 0.8.6

package/dist/components/feature-list2.js

@@ -4,6 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { l as loadModules } from './loadModules.js';
 import { P as PopupUtils } from './popupUtils.js';
 import { g as getLayerOrTable, e as getFeatureLayerView, h as highlightFeatures } from './mapViewUtils.js';
 import { g as getLocaleComponentStrings } from './locale.js';
@@ -36,6 +37,7 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
         this.noFeaturesFoundMsg = undefined;
         this.pageSize = 100;
         this.highlightOnMap = false;
+        this.highlightOnHover = false;
         this._featureItems = [];
         this._featuresCount = 0;
         this._isLoading = false;
@@ -55,6 +57,16 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
     }
     //--------------------------------------------------------------------------
     //
+    //  Methods (public)
+    /**
+     * Refresh the feature list which will fetch the latest features and update the features list
+     * @returns Promise that resolves when the operation is complete
+     */
+    async refresh() {
+        await this.initializeFeatureItems();
+    }
+    //--------------------------------------------------------------------------
+    //
     //  Functions (lifecycle)
     //
     //--------------------------------------------------------------------------
@@ -63,6 +75,7 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
      * @returns Promise when complete
      */
     async componentWillLoad() {
+        await this.initModules();
         await this._getTranslations();
         this._isLoading = true;
         this._popupUtils = new PopupUtils();
@@ -89,6 +102,17 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
     //  Functions (protected)
     //
     //--------------------------------------------------------------------------
+    /**
+   * Load esri javascript api modules
+   * @returns Promise resolving when function is done
+   * @protected
+   */
+    async initModules() {
+        const [Color] = await loadModules([
+            "esri/Color"
+        ]);
+        this.Color = Color;
+    }
     /**
      * Initialize the features list using the selected layer
      * @protected
@@ -124,10 +148,7 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
      */
     async featureClicked(event, selectedFeature) {
         //clear previous highlight and remove the highlightHandle
-        if (this.highlightOnMap && this._highlightHandle) {
-            this._highlightHandle.remove();
-            this._highlightHandle = null;
-        }
+        this.clearHighlights();
         //highlight on map only if it is selected item
         if (this.highlightOnMap) {
             const selectedFeatureObjectId = Number(event.target.value);
@@ -136,6 +157,31 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
         }
         this.featureSelect.emit(selectedFeature);
     }
+    /**
+     * On feature hover in feature list highlight the feature on the map
+     * @param selectedFeature mouseovered feature graphic
+     * @protected
+     */
+    async onFeatureHover(selectedFeature) {
+        //clear previous highlight and remove the highlightHandle
+        this.clearHighlights();
+        if (this.highlightOnHover) {
+            const oId = selectedFeature.getObjectId();
+            const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayerId);
+            selectedLayerView.highlightOptions = { color: new this.Color("#FFFF00") };
+            this._highlightHandle = selectedLayerView.highlight([oId]);
+        }
+    }
+    /**
+     * Clears the highlight
+     * @protected
+     */
+    clearHighlights() {
+        //if a feature is already highlighted, then remove the highlight
+        if (this._highlightHandle) {
+            this._highlightHandle.remove();
+        }
+    }
     /**
      * Query the selected feature layer, in descending order of object id's
      * @param page 0th page number in the pagination item
@@ -186,7 +232,7 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
         const oId = selectedFeature.attributes[this._selectedLayer.objectIdField].toString();
         //use object id if popupTitle is null or undefined
         popupTitle = popupTitle !== null && popupTitle !== void 0 ? popupTitle : oId;
-        return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, value: oId }, h("div", { class: "popup-title", slot: "content-start" }, popupTitle), h("calcite-icon", { icon: "chevron-right", scale: "s", slot: "content-end" })));
+        return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, h("div", { class: "popup-title", slot: "content-start" }, popupTitle), h("calcite-icon", { icon: "chevron-right", scale: "s", slot: "content-end" })));
     }
     /**
      * Fetches the component's translations
@@ -208,10 +254,12 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
         "noFeaturesFoundMsg": [1, "no-features-found-msg"],
         "pageSize": [2, "page-size"],
         "highlightOnMap": [4, "highlight-on-map"],
+        "highlightOnHover": [4, "highlight-on-hover"],
         "_featureItems": [32],
         "_featuresCount": [32],
         "_isLoading": [32],
-        "_translations": [32]
+        "_translations": [32],
+        "refresh": [64]
     }, undefined, {
         "selectedLayerId": ["selectedLayerWatchHandler"]
     }]);

package/dist/components/info-card2.js

@@ -24,7 +24,7 @@ import { d as defineCustomElement$3 } from './tooltip.js';
 import { d as defineCustomElement$2 } from './delete-button2.js';
 import { d as defineCustomElement$1 } from './edit-card2.js';
 
-const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.esri-features__footer{display:none !important}.button-container{justify-content:space-between;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.min-width-100{min-width:100px}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}";
+const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.feature-node .esri-features__footer{display:none !important}.button-container{justify-content:space-between;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.min-width-100{min-width:100px}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}";
 
 const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLElement {
     constructor() {
@@ -148,7 +148,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         const id = (_d = (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeature) === null || _d === void 0 ? void 0 : _d.getObjectId();
         const ids = parseInt(id === null || id === void 0 ? void 0 : id.toString(), 10) > -1 ? [id] : [];
         const deleteEnabled = ((_e = this._layer) === null || _e === void 0 ? void 0 : _e.editingEnabled) && ((_h = (_g = (_f = this._layer) === null || _f === void 0 ? void 0 : _f.capabilities) === null || _g === void 0 ? void 0 : _g.operations) === null || _h === void 0 ? void 0 : _h.supportsDelete);
-        return (h(Host, null, h("calcite-shell", null, this._getHeader(), h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+        return (h(Host, null, h("calcite-shell", null, this._getHeader(), h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget feature-node " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
             h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), !nextBackDisabled && h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, h("calcite-action", { icon: "list", onClick: () => this._toggleListView(), scale: "s", text: this._count, textEnabled: true })), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------

package/dist/components/layer-list2.js

@@ -82,7 +82,7 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
     render() {
         return (h(Fragment, null, this._isLoading && h("calcite-loader", { label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
             h("calcite-notice", { class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
-            h("calcite-list", { "selection-appearance": "border", "selection-mode": this.showNextIcon ? "none" : "single-persist" }, this.renderLayerList())));
+            h("calcite-list", { "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //
@@ -130,7 +130,7 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
             }
         });
         await Promise.all(def).then(() => {
-            const editableLayerIds = this.getEditableIds(this._layerItemsHash);
+            const editableLayerIds = this.getLayersToBeShownInList(this._layerItemsHash);
             this._mapLayerIds = editableLayerIds.reverse();
             this.handleNoLayersToDisplay();
         }, () => {
@@ -146,17 +146,17 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
         this.layersListLoaded.emit(this._mapLayerIds);
     }
     /**
-     * Returns the ids of all OR configured layers that support edits with the update capability
+     * Returns the ids of all OR configured layers that needs to be shown in the list
      * @param hash each layer item details
      * @returns array of layer ids
      */
-    getEditableIds(hash) {
+    getLayersToBeShownInList(hash) {
         var _a;
         const configuredLayers = ((_a = this.layers) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.layers : [];
         return Object.keys(hash).reduce((prev, cur) => {
-            let showLayer = hash[cur].supportsAdd;
+            let showLayer = true;
             if ((configuredLayers === null || configuredLayers === void 0 ? void 0 : configuredLayers.length) > 0) {
-                showLayer = configuredLayers.indexOf(cur) > -1 ? hash[cur].supportsAdd : false;
+                showLayer = configuredLayers.indexOf(cur) > -1;
             }
             if (showLayer) {
                 prev.push(cur);

package/dist/components/map-card2.js

@@ -30,6 +30,38 @@ import { d as defineCustomElement$3 } from './map-picker2.js';
 import { d as defineCustomElement$2 } from './map-search2.js';
 import { d as defineCustomElement$1 } from './map-tools2.js';
 
+function joinAppProxies(map, config, appProxies) {
+    if (appProxies) {
+        appProxies.forEach((proxy) => {
+            map.allLayers.forEach((layer) => {
+                if (layer && layer.url === proxy.sourceUrl) {
+                    // directly change the layer url to the proxy url
+                    layer.url = proxy.proxyUrl;
+                    // Replace the layer's portalItem's url with the proxy url too, otherwise anonymous viewers get a sign-in prompt.
+                    if (layer.portalItem) {
+                        layer.portalItem.when(() => {
+                            // layer.portalItem exists, see above. Not sure why typescript thinks it could be undefined here.
+                            layer.portalItem.url = proxy.proxyUrl;
+                        });
+                    }
+                    // also add a request interceptor in case we missed any requests to the original url, or the jsapi team adds new requests in the future.
+                    config.request?.interceptors?.push({
+                        // this interceptor only applies to requests made to this proxy's sourceUrl (the layer's original url).
+                        urls: proxy.sourceUrl,
+                        before: (params) => {
+                            // change requests from the original url to the proxy url
+                            if (params.url && params.url === proxy.sourceUrl) {
+                                params.url = proxy.proxyUrl;
+                            }
+                        },
+                    });
+                }
+            });
+        });
+    }
+    return map;
+}
+
 const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.map-height{height:calc(100% - 51px)}.height-full{height:100%}.box-shadow{box-shadow:none !important}.visibility-hidden-1{visibility:hidden;height:1px;}.display-none{display:none}";
 
 const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLElement {
@@ -46,6 +78,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
          * string: the id of map currently displayed
          */
         this._loadedId = "";
+        this.appProxies = undefined;
         this.defaultWebmapId = "";
         this.enableHome = undefined;
         this.enableLegend = undefined;
@@ -122,14 +155,16 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
      * @protected
      */
     async _initModules() {
-        const [WebMap, MapView, Home] = await loadModules([
+        const [WebMap, MapView, Home, esriConfig] = await loadModules([
             "esri/WebMap",
             "esri/views/MapView",
-            "esri/widgets/Home"
+            "esri/widgets/Home",
+            "esri/config"
         ]);
         this.WebMap = WebMap;
         this.MapView = MapView;
         this.Home = Home;
+        this.esriConfig = esriConfig;
     }
     /**
      * Load the webmap for the provided webMapInfo
@@ -150,6 +185,10 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
             const webMap = new this.WebMap({
                 portalItem: { id }
             });
+            if (this.appProxies) {
+                await webMap.load();
+                await joinAppProxies(webMap, this.esriConfig, this.appProxies);
+            }
             this.mapView = new this.MapView({
                 container: this._mapDiv,
                 map: webMap,
@@ -207,6 +246,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
     }; }
     static get style() { return mapCardCss; }
 }, [0, "map-card", {
+        "appProxies": [8, "app-proxies"],
         "defaultWebmapId": [1, "default-webmap-id"],
         "enableHome": [4, "enable-home"],
         "enableLegend": [4, "enable-legend"],

package/dist/components/map-draw-tools2.js

@@ -167,7 +167,7 @@ const MapDrawTools = /*@__PURE__*/ proxyCustomElement(class MapDrawTools extends
         }
         else {
             this._sketchGraphicsLayer = new this.GraphicsLayer({ title, listMode: "hide" });
-            state.managedLayers.push(title);
+            state.managedLayers[title] = "sketch";
             this.mapView.map.layers.add(this._sketchGraphicsLayer);
         }
         if (this.graphics && this.graphics.length > 0) {

package/dist/components/map-layer-picker2.js

@@ -305,7 +305,7 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
     _validLayer(id) {
         var _a;
         const name = (_a = this._layerNameHash[id]) === null || _a === void 0 ? void 0 : _a.name;
-        return name && state.managedLayers.indexOf(name) < 0 && (this.enabledLayerIds.length > 0 ?
+        return name && Object.keys(state.managedLayers).indexOf(name) < 0 && (this.enabledLayerIds.length > 0 ?
             this.enabledLayerIds.indexOf(id) > -1 : true);
     }
     /**

package/dist/components/map-select-tools2.js

@@ -443,7 +443,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class MapSelectTools ext
             }
             else {
                 this._bufferGraphicsLayer = new this.GraphicsLayer({ title, listMode: "hide" });
-                state.managedLayers.push(title);
+                state.managedLayers[title] = "buffer";
                 const sketchIndex = this.mapView.map.layers.findIndex((l) => l.title === this._translations.sketchLayer);
                 if (sketchIndex > -1) {
                     this.mapView.map.layers.add(this._bufferGraphicsLayer, sketchIndex);

package/dist/components/public-notification.js

@@ -92,6 +92,7 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class PublicNotifi
         this.sketchLineSymbol = undefined;
         this.sketchPointSymbol = undefined;
         this.sketchPolygonSymbol = undefined;
+        this._exportGraphics = false;
         this._addMap = false;
         this._addResults = true;
         this._addTitle = false;
@@ -170,6 +171,7 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class PublicNotifi
         if (pageType === EPageType.EXPORT) {
             this._fetchingData = true;
             this._numDuplicates = await this._getNumDuplicates();
+            this._updateExportGraphics();
             this._fetchingData = false;
         }
         this._clearHighlight();
@@ -177,6 +179,9 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class PublicNotifi
             // clear any draw shapes or buffers
             await this._clearSelection();
         }
+        if (oldPageType === EPageType.EXPORT) {
+            this._removeExportGraphics();
+        }
         if (pageType !== EPageType.SELECT) {
             return this._highlightFeatures();
         }
@@ -240,12 +245,14 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class PublicNotifi
      * @protected
      */
     async _initModules() {
-        const [geometryEngine, jsonUtils] = await loadModules([
+        const [geometryEngine, jsonUtils, graphic] = await loadModules([
             "esri/geometry/geometryEngine",
-            "esri/symbols/support/jsonUtils"
+            "esri/symbols/support/jsonUtils",
+            "esri/Graphic"
         ]);
         this._geometryEngine = geometryEngine;
         this._jsonUtils = jsonUtils;
+        this.Graphic = graphic;
     }
     /**
      * Load the search configuration
@@ -573,9 +580,107 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class PublicNotifi
     _getExportOptions() {
         const displayClass = this._exportType === EExportType.PDF ? "display-block" : "display-none";
         const titleOptionsClass = this._addTitle ? "display-block" : "display-none";
+        const graphicsOptionsClass = this._addMap ? "display-flex" : "display-none";
         const title = this._titleValue ? this._titleValue : this.defaultExportTitle ? this.defaultExportTitle : "";
         const formatOptionsClass = this._addResults ? "" : "display-none";
-        return (h("div", { class: displayClass }, this._getLabel(this._translations.pdfOptions, true), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addResults, onCalciteCheckboxChange: () => this._addResults = !this._addResults }), this._translations.addResults)), h("div", { class: `padding-top-sides-1 ${formatOptionsClass}` }, h("calcite-label", { class: "label-margin-0" }, this._translations.selectPDFLabelOption)), h("div", { class: `padding-sides-1 ${formatOptionsClass}` }, h("pdf-download", { defaultNumLabelsPerPage: parseInt(this.defaultNumLabelsPerPage.toString(), 10), disabled: !this._downloadActive, ref: (el) => { this._downloadTools = el; } })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addTitle, onCalciteCheckboxChange: () => this._addTitle = !this._addTitle }), this._translations.title)), h("div", { class: titleOptionsClass }, this._getLabel(this._translations.title, true, ""), h("calcite-input-text", { class: "padding-sides-1", onCalciteInputTextInput: () => this._changeTitle(), placeholder: this._translations.titlePlaceholder, ref: (el) => { this._titleElement = el; }, value: title })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addMap, onCalciteCheckboxChange: () => this._addMap = !this._addMap }), this._translations.includeMap))));
+        return (h("div", { class: displayClass }, this._getLabel(this._translations.pdfOptions, true), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addResults, onCalciteCheckboxChange: () => this._addResults = !this._addResults }), this._translations.addResults)), h("div", { class: `padding-top-sides-1 ${formatOptionsClass}` }, h("calcite-label", { class: "label-margin-0" }, this._translations.selectPDFLabelOption)), h("div", { class: `padding-sides-1 ${formatOptionsClass}` }, h("pdf-download", { defaultNumLabelsPerPage: parseInt(this.defaultNumLabelsPerPage.toString(), 10), disabled: !this._downloadActive, ref: (el) => { this._downloadTools = el; } })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addTitle, onCalciteCheckboxChange: () => this._addTitle = !this._addTitle }), this._translations.title)), h("div", { class: titleOptionsClass }, this._getLabel(this._translations.title, true, ""), h("calcite-input-text", { class: "padding-sides-1", onCalciteInputTextInput: () => this._changeTitle(), placeholder: this._translations.titlePlaceholder, ref: (el) => { this._titleElement = el; }, value: title })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addMap, onCalciteCheckboxChange: () => this._handleAddMapChange() }), this._translations.includeMap)), h("div", { class: `padding-top-sides-1 ${graphicsOptionsClass}` }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._exportGraphics, onCalciteCheckboxChange: () => this._handleExportGraphicsChange() }), this._translations.listGraphics), h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "list-graphics-icon", scale: "s" }), h("calcite-popover", { closable: true, label: "", referenceElement: "list-graphics-icon" }, h("span", { class: "tooltip-message" }, this._translations.listGraphicsTip)))));
+    }
+    /**
+     * Toggle the _addMap state variable and update the graphics on the map
+     *
+     * @protected
+     */
+    _handleAddMapChange() {
+        this._addMap = !this._addMap;
+        this._updateExportGraphics();
+    }
+    /**
+     * Toggle the _exportGraphics state variable and update the graphics on the map
+     *
+     * @protected
+     */
+    _handleExportGraphicsChange() {
+        this._exportGraphics = !this._exportGraphics;
+        this._updateExportGraphics();
+    }
+    /**
+     * Get the "sketch" or "buffer" graphics layer
+     *
+     * @param type The type of managed layer to fetch "sketch" | "buffer"
+     *
+     * @protected
+     */
+    _getManagedLayer(type) {
+        let layer;
+        Object.keys(state.managedLayers).some((k) => {
+            const i = this.mapView.map.layers.findIndex((l) => l.title === k);
+            if (state.managedLayers[k] === type) {
+                layer = this.mapView.map.layers.getItemAt(i);
+                return true;
+            }
+        });
+        return layer;
+    }
+    /**
+     * Update the export graphics by adding or removeing them
+     *
+     * @param clear When true the graphics layers will be cleared prior to adding any new graphics, defaults to false
+     *
+     * @protected
+     */
+    _updateExportGraphics(clear = false) {
+        if (clear || !this._exportGraphics || !this._addMap) {
+            this._removeExportGraphics();
+        }
+        if (this._exportGraphics && this._addMap) {
+            this._addExportGraphics();
+        }
+    }
+    /**
+     * Remove all buffer and sketch graphics
+     *
+     * @protected
+     */
+    _removeExportGraphics() {
+        const sketchLayer = this._getManagedLayer("sketch");
+        const bufferLayer = this._getManagedLayer("buffer");
+        if (sketchLayer) {
+            sketchLayer.graphics.removeAll();
+        }
+        if (bufferLayer) {
+            bufferLayer.graphics.removeAll();
+        }
+    }
+    /**
+     * Add all buffer and sketch graphics that are flagged for download
+     *
+     * @protected
+     */
+    _addExportGraphics() {
+        const sketchLayer = this._getManagedLayer("sketch");
+        const bufferLayer = this._getManagedLayer("buffer");
+        this._selectionSets.forEach(ss => {
+            if (ss.download) {
+                if (sketchLayer) {
+                    sketchLayer.graphics.add(ss.sketchGraphic);
+                }
+                if (bufferLayer) {
+                    const symbol = {
+                        type: "simple-fill",
+                        color: this.bufferColor,
+                        outline: {
+                            color: this.bufferOutlineColor,
+                            width: 1
+                        }
+                    };
+                    const bufferGraphic = new this.Graphic({
+                        geometry: ss.buffer,
+                        symbol
+                    });
+                    bufferLayer.graphics.add(bufferGraphic);
+                }
+            }
+        });
     }
     /**
      * Render the refine page
@@ -669,6 +774,7 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class PublicNotifi
             isActive = ss.download ? true : isActive;
             return ss;
         });
+        this._updateExportGraphics(true);
         this._downloadActive = isActive;
         this._fetchingData = true;
         this._numDuplicates = await this._getNumDuplicates();
@@ -939,6 +1045,7 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class PublicNotifi
         "sketchLineSymbol": [8, "sketch-line-symbol"],
         "sketchPointSymbol": [8, "sketch-point-symbol"],
         "sketchPolygonSymbol": [8, "sketch-polygon-symbol"],
+        "_exportGraphics": [32],
         "_addMap": [32],
         "_addResults": [32],
         "_addTitle": [32],

package/dist/components/publicNotificationStore.js

@@ -21,8 +21,8 @@ import { c as createStore } from './index4.js';
  * limitations under the License.
  */
 const { state, onChange } = createStore({
-    // List of layers added and managed by the component
-    managedLayers: [],
+    // Key Value pair whose Key is the layer name and the Value is the type of layer ("buffer" | "sketch")
+    managedLayers: {},
     // List of tables added and managed by the component
     managedTables: [],
     // Handle[]: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Handles.html#Handle

package/dist/esm/buffer-tools_3.entry.js

@@ -7,7 +7,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { l as loadModules, g as getLocaleComponentStrings } from './locale-bcbea4ef.js';
 import { x as setRequestedIcon } from './dom-38c6f027.js';
 import { f as EDrawMode } from './interfaces-586e863c.js';
-import { s as state } from './publicNotificationStore-3bf4de75.js';
+import { s as state } from './publicNotificationStore-223faed2.js';
 import './esri-loader-1b324844.js';
 import './_commonjsHelpers-0f74c230.js';
 import './guid-b75a5f7b.js';
@@ -464,7 +464,7 @@ const MapDrawTools = class {
         }
         else {
             this._sketchGraphicsLayer = new this.GraphicsLayer({ title, listMode: "hide" });
-            state.managedLayers.push(title);
+            state.managedLayers[title] = "sketch";
             this.mapView.map.layers.add(this._sketchGraphicsLayer);
         }
         if (this.graphics && this.graphics.length > 0) {

package/dist/esm/calcite-alert_4.entry.js

@@ -12,7 +12,7 @@ import { o as onToggleOpenCloseComponent } from './openCloseComponent-9f90f493.j
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-436fb2b1.js';
 import { K as KindIcons } from './resources-88a48c5c.js';
 import { g as getLocaleComponentStrings, l as loadModules } from './locale-bcbea4ef.js';
-import { a as getAllLayers } from './mapViewUtils-20504620.js';
+import { a as getAllLayers } from './mapViewUtils-253178f1.js';
 import { P as PopupUtils } from './popupUtils-af124b47.js';
 import './guid-b75a5f7b.js';
 import './resources-8834f920.js';
@@ -664,7 +664,7 @@ const EditCard = class {
 };
 EditCard.style = editCardCss;
 
-const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.esri-features__footer{display:none !important}.button-container{justify-content:space-between;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.min-width-100{min-width:100px}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}";
+const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.feature-node .esri-features__footer{display:none !important}.button-container{justify-content:space-between;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.min-width-100{min-width:100px}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}";
 
 const InfoCard = class {
     constructor(hostRef) {
@@ -787,7 +787,7 @@ const InfoCard = class {
         const id = (_d = (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeature) === null || _d === void 0 ? void 0 : _d.getObjectId();
         const ids = parseInt(id === null || id === void 0 ? void 0 : id.toString(), 10) > -1 ? [id] : [];
         const deleteEnabled = ((_e = this._layer) === null || _e === void 0 ? void 0 : _e.editingEnabled) && ((_h = (_g = (_f = this._layer) === null || _f === void 0 ? void 0 : _f.capabilities) === null || _g === void 0 ? void 0 : _g.operations) === null || _h === void 0 ? void 0 : _h.supportsDelete);
-        return (h(Host, null, h("calcite-shell", null, this._getHeader(), h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+        return (h(Host, null, h("calcite-shell", null, this._getHeader(), h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget feature-node " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
             h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), !nextBackDisabled && h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, h("calcite-action", { icon: "list", onClick: () => this._toggleListView(), scale: "s", text: this._count, textEnabled: true })), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------

package/dist/esm/calcite-combobox_5.entry.js

@@ -22,8 +22,8 @@ import { V as Validation } from './Validation-ea480265.js';
 import { d as debounce } from './debounce-229b1a22.js';
 import { i as isActivationKey } from './key-c83d835f.js';
 import { g as getLocaleComponentStrings } from './locale-bcbea4ef.js';
-import { d as getMapLayerHash, o as getMapTableHash } from './mapViewUtils-20504620.js';
-import { s as state } from './publicNotificationStore-3bf4de75.js';
+import { c as getMapLayerHash, o as getMapTableHash } from './mapViewUtils-253178f1.js';
+import { s as state } from './publicNotificationStore-223faed2.js';
 import './resources-8834f920.js';
 import './browser-d60104bd.js';
 import './esri-loader-1b324844.js';
@@ -2065,7 +2065,7 @@ const MapLayerPicker = class {
     _validLayer(id) {
         var _a;
         const name = (_a = this._layerNameHash[id]) === null || _a === void 0 ? void 0 : _a.name;
-        return name && state.managedLayers.indexOf(name) < 0 && (this.enabledLayerIds.length > 0 ?
+        return name && Object.keys(state.managedLayers).indexOf(name) < 0 && (this.enabledLayerIds.length > 0 ?
             this.enabledLayerIds.indexOf(id) > -1 : true);
     }
     /**