@esri/solutions-components 0.3.8 → 0.4.0

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

@@ -39,8 +39,10 @@ import { d as defineCustomElement$1 } from './select.js';
 async function getMapLayerHash(mapView) {
   let layerHash = {};
   await mapView.when(() => {
-    layerHash = mapView.map.layers.toArray().reduce((prev, cur) => {
-      prev[cur.id] = cur.title;
+    layerHash = mapView.map.allLayers.toArray().reduce((prev, cur) => {
+      if (cur.type === "feature") {
+        prev[cur.id] = cur.title;
+      }
       return prev;
     }, {});
   });
@@ -57,9 +59,12 @@ async function getMapLayerHash(mapView) {
 async function getMapLayerIds(mapView) {
   let layerIds = [];
   await mapView.when(() => {
-    layerIds = mapView.map.layers.toArray().map((l) => {
-      return l.id;
-    });
+    layerIds = mapView.map.allLayers.toArray().reduce((prev, cur) => {
+      if (cur.type === "feature") {
+        prev.push(cur.id);
+      }
+      return prev;
+    }, []);
   });
   return layerIds;
 }
@@ -88,7 +93,7 @@ async function getMapLayerView(mapView, id) {
 async function getMapLayer(mapView, id) {
   let layers = [];
   await mapView.when(() => {
-    layers = mapView.map.layers.toArray().filter((l) => {
+    layers = mapView.map.allLayers.toArray().filter((l) => {
       return l.id === id;
     });
   });

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

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
-import { g as goToSelection, h as highlightFeatures, d as defineCustomElement$2 } from './map-layer-picker2.js';
+import { h as highlightFeatures, g as goToSelection, d as defineCustomElement$2 } from './map-layer-picker2.js';
 import { c as queryObjectIds, d as getQueryGeoms } from './queryUtils.js';
 import { c as EWorkflowType, e as ESelectionMode, f as ERefineMode, b as ESketchType } from './interfaces3.js';
 import { s as state } from './publicNotificationStore.js';
@@ -47,6 +47,12 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
      * string: A label to help uniquely identify the selection set
      */
     this._selectionLabel = "";
+    /**
+     * boolean: When false the geometries will be used for selection
+     *          When true a list of OIDs will be used
+     *          see https://github.com/Esri/solutions-components/issues/148
+     */
+    this._skipGeomQuery = false;
     this.bufferColor = [227, 139, 79, 0.8];
     this.bufferOutlineColor = [255, 255, 255];
     this.enabledLayerIds = [];
@@ -77,13 +83,33 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   async watchGeometriesHandler(newValue, oldValue) {
     if (newValue !== oldValue) {
       if (newValue.length > 0) {
-        return this._geomQuery(this.geometries);
+        if (this._skipGeomQuery) {
+          void highlightFeatures(this._selectedIds, this.selectLayerView, this.mapView);
+        }
+        else {
+          return this._geomQuery(this.geometries);
+        }
       }
       else if (newValue.length === 0) {
         return this._clearResults(true, true);
       }
     }
   }
+  /**
+   * Called each time the searchConfiguration prop is changed.
+   *
+   * @returns Promise when complete
+   */
+  async watchSearchConfigurationHandler(newValue, oldValue) {
+    console.log("watchSearchConfigurationHandler");
+    console.log("newValue");
+    console.log(newValue);
+    console.log("oldValue");
+    console.log(oldValue);
+    if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
+      this._initSearchWidget();
+    }
+  }
   /**
    * Called each time the workflowType prop is changed and emits the workflowTypeChange event.
    *
@@ -132,7 +158,8 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       selectedIds: this._selectedIds,
       layerView: this.selectLayerView,
       geometries: this.geometries,
-      refineSelectLayers: this._refineTools.layerViews
+      refineSelectLayers: this._refineTools.layerViews,
+      skipGeomQuery: this._skipGeomQuery
     };
   }
   /**
@@ -141,22 +168,28 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   labelChange(event) {
     this._selectionLabel = event.detail;
   }
+  /**
+   * Handle changes to the search configuration
+   */
+  searchConfigurationChangeChanged(event) {
+    this.searchConfiguration = event.detail;
+  }
   /**
    * Listen to changes in the sketch graphics
    *
    */
   sketchGraphicsChange(event) {
-    this._updateSelection(EWorkflowType.SKETCH, event.detail, this._selectionLabel || this._translations.sketch);
+    this._updateSelection(EWorkflowType.SKETCH, event.detail, this._selectionLabel || this._translations.sketch, true);
   }
   /**
    * Listen to changes in the refine graphics
    *
    */
   refineSelectionGraphicsChange(event) {
-    const graphics = event.detail;
-    this._updateSelection(EWorkflowType.SELECT, graphics, this._selectionLabel || this._translations.select);
-    // Using OIDs to avoid issue with points
+    const graphics = event.detail.graphics;
+    this._skipGeomQuery = event.detail.useOIDs;
     const oids = Array.isArray(graphics) ? graphics.map(g => g.attributes[g.layer.objectIdField]) : [];
+    this._updateSelection(EWorkflowType.SELECT, graphics, this._selectionLabel || this._translations.select, !event.detail.useOIDs, oids);
     return this._highlightFeatures(oids);
   }
   //--------------------------------------------------------------------------
@@ -189,7 +222,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     const useSelectClass = this._layerSelectChecked && !searchEnabled ? " div-visible" : " div-not-visible";
     const useDrawClass = !this._layerSelectChecked && !searchEnabled ? " div-visible" : " div-not-visible";
     const showLayerChoiceClass = searchEnabled ? "div-not-visible" : "div-visible";
-    return (h(Host, null, h("div", { class: "padding-bottom-1" }, h("calcite-radio-group", { class: "w-100", onCalciteRadioGroupChange: (evt) => this._workflowChange(evt) }, h("calcite-radio-group-item", { checked: searchEnabled, class: "w-50 end-border", value: EWorkflowType.SEARCH }, this._translations.search), h("calcite-radio-group-item", { checked: drawEnabled, class: "w-50", value: EWorkflowType.SKETCH }, this._translations.sketch))), h("div", { class: showSearchClass }, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } })), h("div", { class: showLayerChoiceClass }, h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { checked: ((_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.workflowType) === EWorkflowType.SELECT, onCalciteCheckboxChange: () => this._layerSelectChanged(), ref: (el) => this._selectFromLayerElement = el }), "Use layer features")), h("div", { class: useDrawClass }, h("map-draw-tools", { active: true, border: true, mapView: this.mapView, ref: (el) => { this._drawTools = el; } })), h("div", { class: useSelectClass }, h("refine-selection-tools", { active: true, border: true, enabledLayerIds: this.enabledLayerIds, layerViews: this._refineSelectLayers, mapView: this.mapView, mode: ESelectionMode.ADD, ref: (el) => { this._refineTools = el; }, refineMode: ERefineMode.SUBSET })), h("calcite-label", { class: showBufferToolsClass }, this._translations.searchDistance, h("buffer-tools", { distance: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.distance) || this.defaultBufferDistance, geometries: this.geometries, onBufferComplete: (evt) => this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_c = this.selectionSet) === null || _c === void 0 ? void 0 : _c.unit) || this.defaultBufferUnit })), h("slot", null)));
+    return (h(Host, null, h("div", { class: "padding-bottom-1" }, h("calcite-radio-group", { class: "w-100", onCalciteRadioGroupChange: (evt) => this._workflowChange(evt) }, h("calcite-radio-group-item", { checked: searchEnabled, class: "w-50 end-border", value: EWorkflowType.SEARCH }, this._translations.search), h("calcite-radio-group-item", { checked: drawEnabled, class: "w-50", value: EWorkflowType.SKETCH }, this._translations.sketch))), h("div", { class: showSearchClass }, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } })), h("div", { class: showLayerChoiceClass }, h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { checked: ((_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.workflowType) === EWorkflowType.SELECT, onCalciteCheckboxChange: () => this._layerSelectChanged(), ref: (el) => this._selectFromLayerElement = el }), "Use layer features")), h("div", { class: useDrawClass }, h("map-draw-tools", { active: true, border: true, mapView: this.mapView, ref: (el) => { this._drawTools = el; } })), h("div", { class: useSelectClass }, h("refine-selection-tools", { active: true, border: true, enabledLayerIds: this.enabledLayerIds, layerView: this.selectLayerView, layerViews: this._refineSelectLayers, mapView: this.mapView, mode: ESelectionMode.ADD, ref: (el) => { this._refineTools = el; }, refineMode: ERefineMode.SUBSET })), h("calcite-label", { class: showBufferToolsClass }, this._translations.searchDistance, h("buffer-tools", { distance: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.distance) || this.defaultBufferDistance, geometries: this.geometries, onBufferComplete: (evt) => this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_c = this.selectionSet) === null || _c === void 0 ? void 0 : _c.unit) || this.defaultBufferUnit })), h("slot", null)));
   }
   //--------------------------------------------------------------------------
   //
@@ -233,17 +266,19 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * @protected
    */
   _initSelectionSet() {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     if (this.selectionSet) {
       this._searchTerm = (_b = (_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.searchResult) === null || _b === void 0 ? void 0 : _b.name;
       this._workflowType = (_c = this.selectionSet) === null || _c === void 0 ? void 0 : _c.workflowType;
       this._searchResult = (_d = this.selectionSet) === null || _d === void 0 ? void 0 : _d.searchResult;
       this._refineSelectLayers = (_e = this.selectionSet) === null || _e === void 0 ? void 0 : _e.refineSelectLayers;
+      this._selectedIds = (_f = this.selectionSet) === null || _f === void 0 ? void 0 : _f.selectedIds;
+      this._skipGeomQuery = (_g = this.selectionSet) === null || _g === void 0 ? void 0 : _g.skipGeomQuery;
       this.geometries = [
-        ...(_f = this.selectionSet) === null || _f === void 0 ? void 0 : _f.geometries
+        ...((_h = this.selectionSet) === null || _h === void 0 ? void 0 : _h.geometries) || []
       ];
       // reset selection label base
-      this._selectionLabel = ((_g = this.selectionSet) === null || _g === void 0 ? void 0 : _g.label) || this._getSelectionBaseLabel();
+      this._selectionLabel = ((_j = this.selectionSet) === null || _j === void 0 ? void 0 : _j.label) || this._getSelectionBaseLabel();
       void goToSelection(this.selectionSet.selectedIds, this.selectionSet.layerView, this.mapView, false);
     }
     else {
@@ -268,8 +303,16 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * @protected
    */
   _initSearchWidget() {
+    console.log("_initSearchWidget");
+    console.log("this.mapView");
+    console.log(this.mapView);
+    console.log("this._searchElement");
+    console.log(this._searchElement);
     if (this.mapView && this._searchElement) {
+      console.log("this._getSearchConfig");
       const searchConfiguration = this._getSearchConfig(this.searchConfiguration, this.mapView);
+      console.log("searchConfiguration");
+      console.log(searchConfiguration);
       const searchOptions = Object.assign({ view: this.mapView, container: this._searchElement, searchTerm: this._searchTerm }, searchConfiguration);
       this._searchWidget = new this.Search(searchOptions);
       this._searchWidget.on("search-clear", () => {
@@ -280,9 +323,10 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
         void this._clearResults(false);
         if (searchResults.result) {
           this._searchResult = searchResults.result;
-          this._updateSelection(EWorkflowType.SEARCH, [searchResults.result.feature], (_a = searchResults === null || searchResults === void 0 ? void 0 : searchResults.result) === null || _a === void 0 ? void 0 : _a.name);
+          this._updateSelection(EWorkflowType.SEARCH, [searchResults.result.feature], (_a = searchResults === null || searchResults === void 0 ? void 0 : searchResults.result) === null || _a === void 0 ? void 0 : _a.name, true);
         }
       });
+      console.log("END search widget init");
     }
   }
   /**
@@ -408,6 +452,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * @protected
    */
   async _bufferComplete(evt) {
+    var _a, _b;
     this._bufferGeometry = Array.isArray(evt.detail) ?
       evt.detail[0] : evt.detail;
     if (this._bufferGeometry) {
@@ -434,7 +479,13 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       if (this._bufferGraphicsLayer) {
         this._bufferGraphicsLayer.removeAll();
       }
-      void this._geomQuery(this.geometries);
+      if (this._skipGeomQuery || ((_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.skipGeomQuery)) {
+        this._selectedIds = (_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.selectedIds;
+        void this._highlightFeatures(this._selectedIds);
+      }
+      else {
+        void this._geomQuery(this.geometries);
+      }
     }
   }
   /**
@@ -482,10 +533,15 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * @param type worflow type
    * @param graphics graphics to be used for selection
    * @param label selection label
+   * @param useGeoms indicates if the geometries should be used directly for selections
+   * @param oids list of IDs to select when useGeoms is false
    *
    * @protected
    */
-  _updateSelection(type, graphics, label) {
+  _updateSelection(type, graphics, label, useGeoms, oids) {
+    this._selectedIds = oids ? oids : this._selectedIds;
+    // see https://github.com/Esri/solutions-components/issues/148
+    this._skipGeomQuery = !useGeoms;
     this.geometries = Array.isArray(graphics) ? graphics.map(g => g.geometry) : this.geometries;
     this._workflowType = type;
     this._selectionLabel = label;
@@ -502,6 +558,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   get el() { return this; }
   static get watchers() { return {
     "geometries": ["watchGeometriesHandler"],
+    "searchConfiguration": ["watchSearchConfigurationHandler"],
     "_workflowType": ["workflowTypeHandler"]
   }; }
   static get style() { return mapSelectToolsCss; }
@@ -524,7 +581,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     "_workflowType": [32],
     "clearSelection": [64],
     "getSelection": [64]
-  }, [[8, "labelChange", "labelChange"], [8, "sketchGraphicsChange", "sketchGraphicsChange"], [8, "refineSelectionGraphicsChange", "refineSelectionGraphicsChange"]]]);
+  }, [[8, "labelChange", "labelChange"], [8, "searchConfigurationChange", "searchConfigurationChangeChanged"], [8, "sketchGraphicsChange", "sketchGraphicsChange"], [8, "refineSelectionGraphicsChange", "refineSelectionGraphicsChange"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/pdf-download2.js

@@ -2262,7 +2262,6 @@ const PdfDownload = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.disabled = false;
-    this.enabledSizeValues = [];
     this.layerView = undefined;
     this._translations = undefined;
   }
@@ -2352,8 +2351,15 @@ const PdfDownload = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   _convertPopupToLabelSpec(popupInfo) {
     // Replace <br>, <br/> with |
     popupInfo = popupInfo.replace(/<br\s*\/?>/gi, "|");
-    // Remove remaining HTML tags and replace 0xA0 that popup uses for spaces
-    let labelSpec = popupInfo.replace(/<[\s.]*[^<>]*\/?>/gi, "").replace(/\xA0/gi, " ").split("|");
+    // Remove remaining HTML tags, replace 0xA0 that popup uses for spaces, replace some char representations,
+    // and split the label back into individual lines
+    let labelSpec = popupInfo
+      .replace(/<[\s.]*[^<>]*\/?>/gi, "")
+      .replace(/\xA0/gi, " ")
+      .replace(/&lt;/gi, "<")
+      .replace(/&gt;/gi, ">")
+      .replace(/&nbsp;/gi, " ")
+      .split("|");
     // Trim lines and remove empties
     labelSpec = labelSpec.map(line => line.trim()).filter(line => line.length > 0);
     return labelSpec;
@@ -2444,7 +2450,6 @@ const PdfDownload = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   static get style() { return pdfDownloadCss; }
 }, [1, "pdf-download", {
     "disabled": [4],
-    "enabledSizeValues": [16],
     "layerView": [16],
     "_translations": [32],
     "downloadCSV": [64],

package/dist/components/public-notification.js

@@ -54,13 +54,13 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     super();
     this.__registerHost();
     this.labelChange = createEvent(this, "labelChange", 7);
+    this.searchConfigurationChange = createEvent(this, "searchConfigurationChange", 7);
     this.addresseeLayerIds = [];
     this.bufferColor = [227, 139, 79, 0.8];
     this.bufferOutlineColor = [255, 255, 255];
     this.customLabelEnabled = undefined;
     this.defaultBufferDistance = undefined;
     this.defaultBufferUnit = undefined;
-    this.exportOptions = undefined;
     this.featureEffect = undefined;
     this.featureHighlightEnabled = undefined;
     this.mapView = undefined;
@@ -93,6 +93,25 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
       this._popupsEnabled = v === null || v === void 0 ? void 0 : v.popup.autoOpenEnabled;
     }
   }
+  /**
+   * Called each time the searchConfiguration prop is changed.
+   *
+   * @returns Promise when complete
+   */
+  async watchSearchConfigurationHandler(newValue, oldValue) {
+    //TODO adding this here to see if its any different than having in map-select-tools
+    // I would have thought that the prop would have made it through on the next render of map-select-tools
+    // however we are still seeing a broken search...need to understand why and don't see a clean way to debug in devext
+    console.log("PN watchSearchConfigurationHandler");
+    console.log("PN newValue");
+    console.log(newValue);
+    console.log("PN oldValue");
+    console.log(oldValue);
+    if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
+      console.log("Emit event from parent");
+      this.searchConfigurationChange.emit(newValue);
+    }
+  }
   /**
    * Called each time the selectionSets prop is changed.
    */
@@ -160,13 +179,8 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
    * Renders the component.
    */
   render() {
-    var _a, _b, _c, _d, _e, _f;
     const hasSelections = this._selectionSets.length > 0;
-    const csvEnabled = typeof ((_b = (_a = this.exportOptions) === null || _a === void 0 ? void 0 : _a.csvOptions) === null || _b === void 0 ? void 0 : _b.enabled) === "boolean" ?
-      (_c = this.exportOptions) === null || _c === void 0 ? void 0 : _c.csvOptions.enabled : true;
-    const pdfEnabled = typeof ((_e = (_d = this.exportOptions) === null || _d === void 0 ? void 0 : _d.pdfOptions) === null || _e === void 0 ? void 0 : _e.enabled) === "boolean" ?
-      (_f = this.exportOptions) === null || _f === void 0 ? void 0 : _f.pdfOptions.enabled : true;
-    return (h(Host, null, h("calcite-shell", null, h("calcite-action-bar", { class: "border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: "header" }, this._getActionGroup("list-check", false, EPageType.LIST, this._translations.myLists), this.showRefineSelection ? this._getActionGroup("test-data", !hasSelections, EPageType.REFINE, this._translations.refineSelection) : undefined, pdfEnabled ? this._getActionGroup("file-pdf", !hasSelections, EPageType.PDF, this._translations.downloadPDF) : undefined, csvEnabled ? this._getActionGroup("file-csv", !hasSelections, EPageType.CSV, this._translations.downloadCSV) : undefined), this._getPage(this._pageType))));
+    return (h(Host, null, h("calcite-shell", null, h("calcite-action-bar", { class: "border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: "header" }, this._getActionGroup("list-check", false, EPageType.LIST, this._translations.myLists), this.showRefineSelection ? this._getActionGroup("test-data", !hasSelections, EPageType.REFINE, this._translations.refineSelection) : undefined, this._getActionGroup("file-pdf", !hasSelections, EPageType.PDF, this._translations.downloadPDF), this._getActionGroup("file-csv", !hasSelections, EPageType.CSV, this._translations.downloadCSV)), this._getPage(this._pageType))));
   }
   //--------------------------------------------------------------------------
   //
@@ -370,10 +384,8 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
    * @protected
    */
   _getDownloadPage(type) {
-    var _a, _b;
     const isPdf = type === EExportType.PDF;
-    const multiPdfOptions = ((_a = this.exportOptions) === null || _a === void 0 ? void 0 : _a.pdfOptions.enabledSizeValues.length) > 1;
-    return (h("calcite-panel", null, h("div", null, h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "font-bold" }, isPdf ? this._translations.pdfDownloads : this._translations.csvDownloads), h("calcite-label", null, this._translations.notifications)), this._getSelectionLists(), h("div", { class: "margin-side-1 padding-top-1 border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { disabled: !this._downloadActive, ref: (el) => { this._removeDuplicates = el; } }), this._translations.removeDuplicate)), h("div", { class: isPdf && multiPdfOptions ? "" : "display-none" }, this._getLabel(this._translations.selectPDFLabelOption, false), h("div", { class: "padding-sides-1" }, h("pdf-download", { disabled: !this._downloadActive, enabledSizeValues: (_b = this.exportOptions) === null || _b === void 0 ? void 0 : _b.pdfOptions.enabledSizeValues, layerView: this.addresseeLayer, ref: (el) => { this._downloadTools = el; } }))), h("div", { class: "padding-1 display-flex" }, h("calcite-button", { disabled: !this._downloadActive, onClick: isPdf ? () => this._downloadPDF() : () => this._downloadCSV(), width: "full" }, isPdf ? this._translations.downloadPDF : this._translations.downloadCSV)))));
+    return (h("calcite-panel", null, h("div", null, h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "font-bold" }, isPdf ? this._translations.pdfDownloads : this._translations.csvDownloads), h("calcite-label", null, this._translations.notifications)), this._getSelectionLists(), h("div", { class: "margin-side-1 padding-top-1 border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { disabled: !this._downloadActive, ref: (el) => { this._removeDuplicates = el; } }), this._translations.removeDuplicate)), h("div", { class: isPdf ? "" : "display-none" }, this._getLabel(this._translations.selectPDFLabelOption, false), h("div", { class: "padding-sides-1" }, h("pdf-download", { disabled: !this._downloadActive, layerView: this.addresseeLayer, ref: (el) => { this._downloadTools = el; } }))), h("div", { class: "padding-1 display-flex" }, h("calcite-button", { disabled: !this._downloadActive, onClick: isPdf ? () => this._downloadPDF() : () => this._downloadCSV(), width: "full" }, isPdf ? this._translations.downloadPDF : this._translations.downloadCSV)))));
   }
   /**
    * Create the stacked navigation buttons for a page
@@ -720,6 +732,7 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
   get el() { return this; }
   static get watchers() { return {
     "mapView": ["mapViewWatchHandler"],
+    "searchConfiguration": ["watchSearchConfigurationHandler"],
     "_selectionSets": ["selectionSetsWatchHandler"],
     "_pageType": ["pageTypeWatchHandler"]
   }; }
@@ -731,7 +744,6 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     "customLabelEnabled": [4, "custom-label-enabled"],
     "defaultBufferDistance": [2, "default-buffer-distance"],
     "defaultBufferUnit": [1, "default-buffer-unit"],
-    "exportOptions": [16],
     "featureEffect": [16],
     "featureHighlightEnabled": [4, "feature-highlight-enabled"],
     "mapView": [16],

package/dist/components/refine-selection-tools2.js

@@ -32,14 +32,6 @@ const RefineSelectionTools = /*@__PURE__*/ proxyCustomElement(class extends HTML
      * {<layer id>: Graphic[]}: Collection of graphics returned from queries to the layer
      */
     this._featuresCollection = {};
-    /**
-     * IRefineOperation[]: Array to maintain the possible redo operations
-     */
-    this._redoStack = [];
-    /**
-     * IRefineOperation[]: Array to maintain the possible undo operations
-     */
-    this._undoStack = [];
     this.active = false;
     this.border = false;
     this.enabledLayerIds = [];
@@ -50,6 +42,7 @@ const RefineSelectionTools = /*@__PURE__*/ proxyCustomElement(class extends HTML
     this.mapView = undefined;
     this.mode = undefined;
     this.refineMode = undefined;
+    this.refineSelectionSet = undefined;
     this.useLayerPicker = true;
     this._selectEnabled = false;
     this._selectionMode = undefined;
@@ -130,10 +123,11 @@ const RefineSelectionTools = /*@__PURE__*/ proxyCustomElement(class extends HTML
    * Renders the component.
    */
   render() {
+    var _a, _b;
     const showLayerPickerClass = this.useLayerPicker ? "div-visible" : "div-not-visible";
     const drawClass = this.border ? " border" : "";
     const showUndoRedo = this.refineMode === ERefineMode.ALL ? "div-visible" : "div-not-visible";
-    return (h(Host, null, h("div", null, h("map-layer-picker", { class: showLayerPickerClass, enabledLayerIds: this.enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedLayerIds: this.layerViews.map(l => l.layer.id), selectionMode: "single" }), h("div", { class: "margin-top-1" + drawClass }, h("div", { class: "esri-sketch esri-widget" }, h("div", { class: "esri-sketch__panel" }, h("div", { class: "esri-sketch__tool-section esri-sketch__section" }, h("calcite-action", { disabled: !this._selectEnabled, icon: "select", onClick: () => this._setSelectionMode(ESelectionType.POINT), scale: "s", text: this._translations.select })), h("div", { class: "esri-sketch__tool-section esri-sketch__section" }, h("calcite-action", { disabled: !this._selectEnabled, icon: "line", onClick: () => this._setSelectionMode(ESelectionType.LINE), scale: "s", text: this._translations.selectLine }), h("calcite-action", { disabled: !this._selectEnabled, icon: "polygon", onClick: () => this._setSelectionMode(ESelectionType.POLY), scale: "s", text: this._translations.selectPolygon }), h("calcite-action", { disabled: !this._selectEnabled, icon: "rectangle", onClick: () => this._setSelectionMode(ESelectionType.RECT), scale: "s", text: this._translations.selectRectangle })), h("div", { class: showUndoRedo + " esri-sketch__tool-section esri-sketch__section" }, h("calcite-action", { disabled: this._undoStack.length === 0, icon: "undo", onClick: () => this._undo(), scale: "s", text: this._translations.undo }), h("calcite-action", { disabled: this._redoStack.length === 0, icon: "redo", onClick: () => this._redo(), scale: "s", text: this._translations.redo }))))))));
+    return (h(Host, null, h("div", null, h("map-layer-picker", { class: showLayerPickerClass, enabledLayerIds: this.enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedLayerIds: this.layerViews.map(l => l.layer.id), selectionMode: "single" }), h("div", { class: "margin-top-1" + drawClass }, h("div", { class: "esri-sketch esri-widget" }, h("div", { class: "esri-sketch__panel" }, h("div", { class: "esri-sketch__tool-section esri-sketch__section" }, h("calcite-action", { disabled: !this._selectEnabled, icon: "pin", onClick: () => this._setSelectionMode(ESelectionType.POINT), scale: "s", text: this._translations.select }), h("calcite-action", { disabled: !this._selectEnabled, icon: "line", onClick: () => this._setSelectionMode(ESelectionType.LINE), scale: "s", text: this._translations.selectLine }), h("calcite-action", { disabled: !this._selectEnabled, icon: "polygon", onClick: () => this._setSelectionMode(ESelectionType.POLY), scale: "s", text: this._translations.selectPolygon }), h("calcite-action", { disabled: !this._selectEnabled, icon: "rectangle", onClick: () => this._setSelectionMode(ESelectionType.RECT), scale: "s", text: this._translations.selectRectangle })), h("div", { class: showUndoRedo + " esri-sketch__tool-section esri-sketch__section" }, h("calcite-action", { disabled: ((_a = this.refineSelectionSet) === null || _a === void 0 ? void 0 : _a.undoStack) ? this.refineSelectionSet.undoStack.length === 0 : true, icon: "undo", onClick: () => this._undo(), scale: "s", text: this._translations.undo }), h("calcite-action", { disabled: ((_b = this.refineSelectionSet) === null || _b === void 0 ? void 0 : _b.redoStack) ? this.refineSelectionSet.redoStack.length === 0 : true, icon: "redo", onClick: () => this._redo(), scale: "s", text: this._translations.redo }))))))));
   }
   //--------------------------------------------------------------------------
   //
@@ -245,7 +239,7 @@ const RefineSelectionTools = /*@__PURE__*/ proxyCustomElement(class extends HTML
             return prev;
           }, []);
         }
-        this.refineSelectionGraphicsChange.emit(graphics);
+        this.refineSelectionGraphicsChange.emit({ graphics, useOIDs: false });
         this._clear();
       });
     });
@@ -319,11 +313,14 @@ const RefineSelectionTools = /*@__PURE__*/ proxyCustomElement(class extends HTML
         });
       });
       if (this.refineMode === ERefineMode.SUBSET) {
-        this.refineSelectionGraphicsChange.emit(graphics);
+        this.refineSelectionGraphicsChange.emit({
+          graphics,
+          useOIDs: this.layerViews[0].layer.title === this.layerView.layer.title
+        });
       }
       else {
         const oids = Array.isArray(graphics) ? graphics.map(g => { var _a; return g.attributes[(_a = g === null || g === void 0 ? void 0 : g.layer) === null || _a === void 0 ? void 0 : _a.objectIdField]; }) : [];
-        await this._updateIds(oids, this.mode, this._undoStack, this.mode);
+        await this._updateIds(oids, this.mode, this.refineSelectionSet.undoStack, this.mode);
       }
       this._clear();
     });
@@ -366,12 +363,16 @@ const RefineSelectionTools = /*@__PURE__*/ proxyCustomElement(class extends HTML
     if (mode === ESelectionMode.ADD) {
       idUpdates.addIds = oids.filter(id => this.ids.indexOf(id) < 0);
       this.ids = [...this.ids, ...idUpdates.addIds];
-      operationStack.push({ mode: operationMode, ids: idUpdates.addIds });
+      if (idUpdates.addIds.length > 0) {
+        operationStack.push({ mode: operationMode, ids: idUpdates.addIds });
+      }
     }
     else {
       idUpdates.removeIds = oids.filter(id => this.ids.indexOf(id) > -1);
       this.ids = this.ids.filter(id => idUpdates.removeIds.indexOf(id) < 0);
-      operationStack.push({ mode: operationMode, ids: idUpdates.removeIds });
+      if (idUpdates.removeIds.length > 0) {
+        operationStack.push({ mode: operationMode, ids: idUpdates.removeIds });
+      }
     }
     await this._highlightFeatures(this.ids).then(() => {
       this.refineSelectionIdsChange.emit(idUpdates);
@@ -385,8 +386,8 @@ const RefineSelectionTools = /*@__PURE__*/ proxyCustomElement(class extends HTML
    * @protected
    */
   _undo() {
-    const undoOp = this._undoStack.pop();
-    void this._updateIds(undoOp.ids, undoOp.mode === ESelectionMode.ADD ? ESelectionMode.REMOVE : ESelectionMode.ADD, this._redoStack, undoOp.mode);
+    const undoOp = this.refineSelectionSet.undoStack.pop();
+    void this._updateIds(undoOp.ids, undoOp.mode === ESelectionMode.ADD ? ESelectionMode.REMOVE : ESelectionMode.ADD, this.refineSelectionSet.redoStack, undoOp.mode);
   }
   /**
    * Redo the most current ADD or REMOVE operation
@@ -396,8 +397,8 @@ const RefineSelectionTools = /*@__PURE__*/ proxyCustomElement(class extends HTML
    * @protected
    */
   _redo() {
-    const redoOp = this._redoStack.pop();
-    void this._updateIds(redoOp.ids, redoOp.mode, this._undoStack, redoOp.mode);
+    const redoOp = this.refineSelectionSet.redoStack.pop();
+    void this._updateIds(redoOp.ids, redoOp.mode, this.refineSelectionSet.undoStack, redoOp.mode);
   }
   /**
    * Fetches the component's translations
@@ -424,6 +425,7 @@ const RefineSelectionTools = /*@__PURE__*/ proxyCustomElement(class extends HTML
     "mapView": [16],
     "mode": [1],
     "refineMode": [1, "refine-mode"],
+    "refineSelectionSet": [1040],
     "useLayerPicker": [4, "use-layer-picker"],
     "_selectEnabled": [32],
     "_selectionMode": [32],

package/dist/components/refine-selection2.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { e as ESelectionMode, f as ERefineMode, c as EWorkflowType } from './interfaces3.js';
+import { c as EWorkflowType, e as ESelectionMode, f as ERefineMode } from './interfaces3.js';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { d as defineCustomElement$e } from './action.js';
 import { d as defineCustomElement$d } from './chip.js';
@@ -72,6 +72,19 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.SketchViewModel = undefined;
     this._translations = undefined;
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Called each time the addresseeLayer is changed.
+   * Add a new clean refine set for the new addressee layer.
+   */
+  addresseeLayerWatchHandler() {
+    const selectionSets = this.selectionSets.filter(ss => ss.workflowType !== EWorkflowType.REFINE);
+    this.selectionSets = this._initRefineSelectionSet(selectionSets);
+  }
   /**
    * Handles changes to refine selection ids.
    *
@@ -93,12 +106,16 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
    */
   async componentWillLoad() {
     await this._getTranslations();
+    const refineSet = this._getRefineSelectionSet(this.selectionSets);
+    if (!refineSet) {
+      this.selectionSets = this._initRefineSelectionSet(this.selectionSets);
+    }
   }
   /**
    * Renders the component.
    */
   render() {
-    return (h(Host, null, h("div", { class: "padding-1" }, h("div", null, h("calcite-radio-group", { class: "w-100", onCalciteRadioGroupChange: (evt) => this._modeChanged(evt) }, h("calcite-radio-group-item", { checked: this._addEnabled, class: "w-50", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, this._translations.add), h("calcite-radio-group-item", { checked: !this._addEnabled, class: "w-50", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, this._translations.remove)), h("refine-selection-tools", { border: true, enabledLayerIds: this.enabledLayerIds, ids: getSelectionIds(this.selectionSets), layerViews: [this.addresseeLayer], mapView: this.mapView, mode: this._addEnabled ? ESelectionMode.ADD : ESelectionMode.REMOVE, ref: (el) => { this._refineTools = el; }, refineMode: ERefineMode.ALL, useLayerPicker: false })), h("br", null), (h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
+    return (h(Host, null, h("div", { class: "padding-1" }, h("div", null, h("calcite-radio-group", { class: "w-100", onCalciteRadioGroupChange: (evt) => this._modeChanged(evt) }, h("calcite-radio-group-item", { checked: this._addEnabled, class: "w-50", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, this._translations.add), h("calcite-radio-group-item", { checked: !this._addEnabled, class: "w-50", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, this._translations.remove)), h("refine-selection-tools", { border: true, enabledLayerIds: this.enabledLayerIds, ids: getSelectionIds(this.selectionSets), layerViews: [this.addresseeLayer], mapView: this.mapView, mode: this._addEnabled ? ESelectionMode.ADD : ESelectionMode.REMOVE, ref: (el) => { this._refineTools = el; }, refineMode: ERefineMode.ALL, refineSelectionSet: this._getRefineSelectionSet(this.selectionSets), useLayerPicker: false })), h("br", null), (h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
   }
   //--------------------------------------------------------------------------
   //
@@ -164,7 +181,7 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     if (removeIds.length > 0) {
       this.selectionSets = this.selectionSets.reduce((prev, cur) => {
         cur.selectedIds = cur.selectedIds.filter(id => removeIds.indexOf(id) < 0);
-        if (cur.selectedIds.length > 0) {
+        if (cur.selectedIds.length > 0 || cur.workflowType === EWorkflowType.REFINE) {
           prev.push(cur);
         }
         return prev;
@@ -183,9 +200,7 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
    */
   _updateRefineSelectionSet(addIds, removeIds) {
     const selectionSet = this._getRefineSelectionSet(this.selectionSets);
-    this.selectionSets = selectionSet ?
-      this._updateRefineIds(selectionSet, addIds, removeIds) :
-      this._addRefineSelectionSet(addIds, removeIds);
+    this._updateRefineIds(selectionSet, addIds, removeIds);
     this.selectionSetsChanged.emit(this.selectionSets);
   }
   /**
@@ -218,15 +233,12 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   /**
    * Add a new refine selection set
    *
-   * @param addIds any ids to add
-   * @param removeIds any ids to remove
-   *
    * @returns updated selection sets
    * @protected
    */
-  _addRefineSelectionSet(addIds, removeIds) {
+  _initRefineSelectionSet(selectionSets) {
     return [
-      ...this.selectionSets,
+      ...selectionSets,
       ({
         buffer: undefined,
         distance: 0,
@@ -237,13 +249,15 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
         layerView: this.addresseeLayer,
         refineSelectLayers: [],
         searchResult: undefined,
-        selectedIds: addIds,
+        selectedIds: [],
         unit: "feet",
         workflowType: EWorkflowType.REFINE,
         refineIds: {
-          addIds: addIds,
-          removeIds: removeIds
-        }
+          addIds: [],
+          removeIds: []
+        },
+        redoStack: [],
+        undoStack: []
       })
     ];
   }
@@ -284,6 +298,9 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     return null;
   }
   get el() { return this; }
+  static get watchers() { return {
+    "addresseeLayer": ["addresseeLayerWatchHandler"]
+  }; }
   static get style() { return refineSelectionCss; }
 }, [0, "refine-selection", {
     "addresseeLayer": [16],