@esri/solutions-components 0.3.5 → 0.3.7

package/dist/collection/components/public-notification/public-notification.css

@@ -19,6 +19,10 @@
     --calcite-input-message-spacing-value: 0;
   }
 
+  .align-center {
+    align-items: center;
+  }
+
   .border-bottom-1 {
     border-width: 0px;
     border-bottom-width: 1px;
@@ -179,24 +183,20 @@
             margin-inline-start: 0.5rem;
   }
 
-  .position-right {
-    position: absolute;
-    right: 1rem;
+  .float-right {
+    float: right;
   }
 
-  .position-right[dir="rtl"] {
-    position: absolute;
-    left: 1rem;
+  .float-right[dir="rtl"] {
+    float: left;
   }
 
-  .position-left {
-    position: absolute;
-    left: 1rem;
+  .float-left {
+    float: left;
   }
 
-  .position-left[dir="rtl"] {
-    position: absolute;
-    right: 1rem;
+  .float-left[dir="rtl"] {
+    float: right;
   }
 
   .margin-top-0 {

package/dist/collection/components/public-notification/public-notification.js

@@ -92,6 +92,13 @@ export class PublicNotification {
       return this._highlightFeatures();
     }
   }
+  /**
+   * Handle changes to the buffer distance value
+   */
+  distanceChanged(event) {
+    this._updateLabel(event, "distance");
+    this._distance = event.detail.newValue;
+  }
   /**
    * Handle changes to the selection sets
    */
@@ -104,6 +111,13 @@ export class PublicNotification {
   sketchTypeChange(event) {
     this._sketchType = event.detail;
   }
+  /**
+   * Handle changes to the buffer unit
+   */
+  unitChanged(event) {
+    this._updateLabel(event, "unit");
+    this._unit = event.detail.newValue;
+  }
   //--------------------------------------------------------------------------
   //
   //  Functions (lifecycle)
@@ -209,7 +223,7 @@ export class PublicNotification {
   _getListPage() {
     const hasSets = this._selectionSets.filter(ss => ss.workflowType !== EWorkflowType.REFINE).length > 0;
     const total = utils.getTotal(this._selectionSets);
-    return hasSets ? (h("calcite-panel", null, h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "font-bold" }, this._translations.myLists)), this._getNotice(this._translations.listHasSetsTip, "padding-sides-1 padding-bottom-1"), this._getMapLayerPicker(), h("div", { class: "padding-sides-1 height-1-1-2" }, h("div", { class: "position-left" }, h("calcite-label", { alignment: "start", class: "font-bold" }, this._translations.notifications)), h("div", { class: "position-right" }, h("calcite-input-message", { active: true, class: "info-blue margin-top-0", scale: "m" }, this._translations.uniqueCout.replace("{{n}}", total.toString())))), hasSets ? this._getSelectionSetList() : (h("div", { class: "info-message" }, h("calcite-input-message", { active: true, class: "info-blue", scale: "m" }, this._translations.noNotifications))), h("div", { class: "display-flex padding-1" }, h("calcite-button", { onClick: () => { this._setPageType(EPageType.SELECT); }, width: "full" }, this._translations.add)), this._showModal(this._showLayerSelectionChangeModal))) : (h("calcite-panel", null, h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "font-bold" }, this._translations.myLists)), h("div", { class: "padding-sides-1" }, h("calcite-label", null, this._translations.notifications)), h("div", { class: "info-message padding-bottom-1" }, h("calcite-input-message", { active: true, class: "info-blue", scale: "m" }, this._translations.noNotifications)), this._getNotice(this._translations.selectLayerAndAdd, "padding-sides-1 padding-bottom-1"), this._getMapLayerPicker(), h("div", { class: "display-flex padding-1" }, h("calcite-button", { onClick: () => { this._setPageType(EPageType.SELECT); }, width: "full" }, this._translations.add))));
+    return hasSets ? (h("calcite-panel", null, h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "font-bold" }, this._translations.myLists)), this._getNotice(this._translations.listHasSetsTip, "padding-sides-1 padding-bottom-1"), this._getMapLayerPicker(), h("div", { class: "display-block padding-sides-1 height-1-1-2" }, h("div", { class: "display-block float-left" }, h("calcite-label", { alignment: "start", class: "font-bold" }, this._translations.notifications)), h("div", { class: "display-block float-right" }, h("calcite-input-message", { active: true, class: "info-blue margin-top-0", scale: "m" }, this._translations.uniqueCout.replace("{{n}}", total.toString())))), hasSets ? this._getSelectionSetList() : (h("div", { class: "info-message" }, h("calcite-input-message", { active: true, class: "info-blue", scale: "m" }, this._translations.noNotifications))), h("div", { class: "display-flex padding-1" }, h("calcite-button", { onClick: () => { this._setPageType(EPageType.SELECT); }, width: "full" }, this._translations.add)), this._showModal(this._showLayerSelectionChangeModal))) : (h("calcite-panel", null, h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "font-bold" }, this._translations.myLists)), h("div", { class: "padding-sides-1" }, h("calcite-label", null, this._translations.notifications)), h("div", { class: "info-message padding-bottom-1" }, h("calcite-input-message", { active: true, class: "info-blue", scale: "m" }, this._translations.noNotifications)), this._getNotice(this._translations.selectLayerAndAdd, "padding-sides-1 padding-bottom-1"), this._getMapLayerPicker(), h("div", { class: "display-flex padding-1" }, h("calcite-button", { onClick: () => { this._setPageType(EPageType.SELECT); }, width: "full" }, this._translations.add))));
   }
   /**
    * Create the UI element that will expose the addressee layers
@@ -279,7 +293,7 @@ export class PublicNotification {
    * @protected
    */
   _getSelectPage() {
-    var _a, _b, _c;
+    var _a, _b;
     const searchTip = this._translations.selectSearchTip;
     const selectTip = this._translations.selectLayerTip;
     const sketchTip = this._sketchType === ESketchType.INTERACTIVE ?
@@ -291,7 +305,7 @@ export class PublicNotification {
     return (h("calcite-panel", null, this._getLabel(this._translations.stepTwoFull.replace("{{layer}}", (_a = this.addresseeLayer) === null || _a === void 0 ? void 0 : _a.layer.title)), this._getNotice(noticeText), h("div", { class: "padding-top-sides-1" }, h("map-select-tools", { bufferColor: this.bufferColor, bufferOutlineColor: this.bufferOutlineColor, class: "font-bold", defaultBufferDistance: this.defaultBufferDistance, defaultBufferUnit: this.defaultBufferUnit, enabledLayerIds: this.selectionLayerIds, isUpdate: !!this._activeSelection, mapView: this.mapView, onSelectionSetChange: (evt) => this._updateForSelection(evt), onWorkflowTypeChange: (evt) => this._updateForWorkflowType(evt), ref: (el) => { this._selectTools = el; }, searchConfiguration: this.searchConfiguration, selectLayerView: this.addresseeLayer, selectionSet: this._activeSelection, showBufferTools: this.showSearchSettings })), h("div", { class: "padding-sides-1 padding-bottom-1", style: { "align-items": "end", "display": "flex" } }, h("calcite-icon", { class: "info-blue padding-end-1-2", icon: "feature-layer", scale: "s" }), h("calcite-input-message", { active: true, class: "info-blue", scale: "m" }, this.noResultText && this._numSelected === 0 ? this.noResultText :
       this._translations.selectedAddresses.replace("{{n}}", this._numSelected.toString()).replace("{{layer}}", ((_b = this.addresseeLayer) === null || _b === void 0 ? void 0 : _b.layer.title) || ""))), h("div", { class: "padding-sides-1 " + nameLabelClass }, h("calcite-label", { class: "font-bold" }, "Name label", h("calcite-input", { onInput: () => {
         this.labelChange.emit(this._labelName.value);
-      }, placeholder: "Insert label here...", ref: (el) => { this._labelName = el; }, value: ((_c = this._activeSelection) === null || _c === void 0 ? void 0 : _c.label) || "" }))), this._getPageNavButtons(this._translations.done, this._numSelected === 0, () => { void this._saveSelection(); }, this._translations.cancel, false, () => { void this._home(); })));
+      }, placeholder: "Insert label here...", ref: (el) => { this._labelName = el; }, value: this._customLabel || "" }))), this._getPageNavButtons(this._translations.done, this._numSelected === 0, () => { void this._saveSelection(); }, this._translations.cancel, false, () => { void this._home(); })));
   }
   /**
    * Create the Refine page that users can interactively add/remove features from existing selection sets
@@ -387,7 +401,7 @@ export class PublicNotification {
         if (!this._downloadActive && cur.download) {
           this._downloadActive = true;
         }
-        prev.push((h("div", { class: "display-flex padding-sides-1 padding-bottom-1" }, h("calcite-checkbox", { checked: cur.download, onClick: () => { void this._toggleDownload(cur.id); } }), h("calcite-list", { class: "list-border margin-start-1-2 w-100", id: "download-list" }, h("calcite-list-item", { description: this._translations.selectedFeatures.replace("{{n}}", cur.selectedIds.length.toString()), disabled: !cur.download, label: cur.label, onClick: () => { void this._toggleDownload(cur.id); } })))));
+        prev.push((h("div", { class: "display-flex padding-sides-1 padding-bottom-1" }, h("calcite-checkbox", { checked: cur.download, class: "align-center", onClick: () => { void this._toggleDownload(cur.id); } }), h("calcite-list", { class: "list-border margin-start-1-2 w-100", id: "download-list" }, h("calcite-list-item", { description: this._translations.selectedFeatures.replace("{{n}}", cur.selectedIds.length.toString()), disabled: !cur.download, label: cur.label, onClick: () => { void this._toggleDownload(cur.id); } })))));
       }
       return prev;
     }, []) || (h("div", null));
@@ -439,6 +453,20 @@ export class PublicNotification {
       return ss.download || ss.workflowType === EWorkflowType.REFINE;
     });
   }
+  /**
+   * Update custom label UI with buffer values
+   *
+   * @protected
+   */
+  _updateLabel(evt, type) {
+    if (this._customLabel) {
+      const oldV = type === "unit" ? `${this._distance} ${evt.detail.oldValue}` : `${evt.detail.oldValue} ${this._unit}`;
+      const newV = type === "unit" ? `${this._distance} ${evt.detail.newValue}` : `${evt.detail.newValue} ${this._unit}`;
+      this._customLabel = this._customLabel.replace(oldV, newV);
+      this._labelName.value = this._customLabel;
+      this.labelChange.emit(this._labelName.value);
+    }
+  }
   /**
    * Store the current workflow type
    *
@@ -577,6 +605,9 @@ export class PublicNotification {
     await ((_a = this._selectTools) === null || _a === void 0 ? void 0 : _a.clearSelection());
     this._numSelected = 0;
     this._activeSelection = undefined;
+    this._customLabel = undefined;
+    this._distance = undefined;
+    this._unit = undefined;
   }
   /**
    * Delete the selection at the defined index
@@ -613,6 +644,9 @@ export class PublicNotification {
   _openSelection(selectionSet, evt) {
     evt.stopPropagation();
     this._activeSelection = selectionSet;
+    this._distance = this._activeSelection.distance;
+    this._unit = this._activeSelection.unit;
+    this._customLabel = this._activeSelection.label;
     this._pageType = EPageType.SELECT;
   }
   /**
@@ -992,6 +1026,12 @@ export class PublicNotification {
   }
   static get listeners() {
     return [{
+        "name": "distanceChanged",
+        "method": "distanceChanged",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
         "name": "selectionSetsChanged",
         "method": "selectionSetsChanged",
         "target": "window",
@@ -1003,6 +1043,12 @@ export class PublicNotification {
         "target": "window",
         "capture": false,
         "passive": false
+      }, {
+        "name": "unitChanged",
+        "method": "unitChanged",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }];
   }
 }

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

@@ -19,7 +19,7 @@
  * limitations under the License.
  */
 import { Host, h } from "@stencil/core";
-import { ESelectionMode, EWorkflowType } from "../../utils/interfaces";
+import { ERefineMode, ESelectionMode, EWorkflowType } from "../../utils/interfaces";
 import * as utils from "../../utils/publicNotificationUtils";
 import { getLocaleComponentStrings } from "../../utils/locale";
 export class RefineSelection {
@@ -67,7 +67,7 @@ export class RefineSelection {
    * 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: utils.getSelectionIds(this.selectionSets), layerViews: [this.addresseeLayer], mapView: this.mapView, mode: this._addEnabled ? ESelectionMode.ADD : ESelectionMode.REMOVE, ref: (el) => { this._refineTools = el; }, 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: utils.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())))));
   }
   //--------------------------------------------------------------------------
   //
@@ -97,6 +97,7 @@ export class RefineSelection {
    * @protected
    */
   _getRefineSelectionSetList() {
+    console.log("_getRefineSelectionSetList");
     const total = utils.getTotal(this.selectionSets);
     const refineSet = this._getRefineSelectionSet(this.selectionSets);
     const numAdded = (refineSet === null || refineSet === void 0 ? void 0 : refineSet.refineIds.addIds.length) || 0;
@@ -168,6 +169,7 @@ export class RefineSelection {
    * @protected
    */
   _updateRefineIds(selectionSet, addIds, removeIds) {
+    console.log("_updateRefineIds");
     // remove ids if they exist in the current add or remove list
     selectionSet.refineIds.addIds = selectionSet.refineIds.addIds.filter(id => removeIds.indexOf(id) < 0);
     selectionSet.refineIds.removeIds = selectionSet.refineIds.removeIds.filter(id => addIds.indexOf(id) < 0);

package/dist/collection/components/refine-selection-tools/refine-selection-tools.css

@@ -60,6 +60,7 @@ html[dir="rtl"] .main-label {
   font-size: 14px;
   font-family: "Avenir Next","Helvetica Neue",Helvetica,Arial,sans-serif;
   line-height: 1.3em;
+  background-color: var(--calcite-ui-foreground-1);
 }
 
 /* DIV CHILD */

package/dist/collection/components/refine-selection-tools/refine-selection-tools.js

@@ -131,7 +131,8 @@ export class RefineSelectionTools {
   render() {
     const showLayerPickerClass = this.useLayerPicker ? "div-visible" : "div-not-visible";
     const drawClass = this.border ? " border" : "";
-    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: "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 }))))))));
+    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 }))))))));
   }
   //--------------------------------------------------------------------------
   //
@@ -360,6 +361,7 @@ export class RefineSelectionTools {
    * @protected
    */
   async _updateIds(oids, mode, operationStack, operationMode) {
+    console.log("_updateIds");
     const idUpdates = { addIds: [], removeIds: [] };
     if (mode === ESelectionMode.ADD) {
       idUpdates.addIds = oids.filter(id => this.ids.indexOf(id) < 0);

package/dist/collection/demos/new-public-notification.html

@@ -27,10 +27,10 @@
         top: 0px;
         left: 0px;
         bottom: 0px;
-        right: 334px;
+        right: 354px;
       }
       #viewDiv[dir="rtl"] {
-        left: 334px;
+        left: 354px;
         right: 0px;
       }
       .over-map {
@@ -42,7 +42,7 @@
         left: 0px;
       }
       .column {
-        width: 300px;
+        width: 320px;
         padding: 1rem;
         border: 1px solid var(--calcite-ui-border-2);
         height: -webkit-fill-available;
@@ -111,9 +111,10 @@
         demo.noResultText = "No results found";
         //demo.selectionLayerIds = ["1843422bf6b-layer-7"];
         demo.showSearchSettings = true;
-        demo.customLabelEnabled = true;
-        demo.bufferColor = [227, 0, 0, 0.8];
-        demo.bufferOutlineColor = [0, 255, 0];
+        demo.customLabelEnabled = false;
+        // demo.bufferColor = [227, 0, 0, 0.8];
+        // demo.bufferOutlineColor = [0, 255, 0];
+        demo.showRefineSelection = true;
       });
     </script>
   </head>

package/dist/collection/utils/interfaces.js

@@ -45,7 +45,7 @@ export var EPageType;
 export var ERefineMode;
 (function (ERefineMode) {
   ERefineMode["ALL"] = "ALL";
-  ERefineMode["SUBSET"] = "SUBSET";
+  ERefineMode["SUBSET"] = "SUBSET"; // Used as a part interactive selection "Use layer features"
 })(ERefineMode || (ERefineMode = {}));
 export var ESelectionMode;
 (function (ESelectionMode) {

package/dist/collection/utils/interfaces.ts

@@ -44,8 +44,8 @@ export enum EPageType {
 }
 
 export enum ERefineMode {
-  ALL="ALL",
-  SUBSET="SUBSET"
+  ALL="ALL", // Used for the refine selection workflow
+  SUBSET="SUBSET" // Used as a part interactive selection "Use layer features"
 }
 
 export enum ESelectionMode {
@@ -138,6 +138,11 @@ export interface ILayerSourceConfigItem extends ISearchSourceConfigItem {
   popupEnabled: boolean;
 }
 
+export interface IValueChange {
+  oldValue: number | string;
+  newValue: number | string;
+}
+
 /**
  * Layer id and title key value pair
  */

package/dist/components/buffer-tools2.js

@@ -22,6 +22,8 @@ const BufferTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.bufferComplete = createEvent(this, "bufferComplete", 7);
+    this.distanceChanged = createEvent(this, "distanceChanged", 7);
+    this.unitChanged = createEvent(this, "unitChanged", 7);
     this.appearance = "text";
     this.distance = 0;
     this.geometries = [];
@@ -111,6 +113,10 @@ const BufferTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @protected
    */
   _setDistance(event) {
+    this.distanceChanged.emit({
+      oldValue: this.distance,
+      newValue: event.detail.value
+    });
     this.distance = event.detail.value;
     if (this.distance > 0) {
       this._buffer();
@@ -125,6 +131,10 @@ const BufferTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @protected
    */
   _setUnit(unit) {
+    this.unitChanged.emit({
+      oldValue: this.unit,
+      newValue: unit
+    });
     this.unit = unit;
     this._buffer();
   }

package/dist/components/interfaces3.js

@@ -45,7 +45,7 @@ var EPageType;
 var ERefineMode;
 (function (ERefineMode) {
   ERefineMode["ALL"] = "ALL";
-  ERefineMode["SUBSET"] = "SUBSET";
+  ERefineMode["SUBSET"] = "SUBSET"; // Used as a part interactive selection "Use layer features"
 })(ERefineMode || (ERefineMode = {}));
 var ESelectionMode;
 (function (ESelectionMode) {

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

@@ -151,7 +151,7 @@ const MapDrawTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       layer: this._sketchGraphicsLayer,
       view: this.mapView,
       container: this._sketchElement,
-      creationMode: "update",
+      creationMode: "single",
       defaultCreateOptions: {
         "mode": "hybrid"
       }
@@ -164,9 +164,9 @@ const MapDrawTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         "lasso-selection": false,
         "rectangle-selection": false
       }, createTools: {
-        "circle": false,
-        "point": false
-      }
+        "circle": false
+      },
+      undoRedoMenu: false
     };
     this._sketchWidget.on("update", (evt) => {
       if (evt.state === "start") {
@@ -193,6 +193,12 @@ const MapDrawTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.graphics = evt.graphics;
       this.sketchGraphicsChange.emit(this.graphics);
     });
+    this._sketchWidget.on("create", (evt) => {
+      if (evt.state === "complete") {
+        this.graphics = [evt.graphic];
+        this.sketchGraphicsChange.emit(this.graphics);
+      }
+    });
   }
   /**
    * Clear any stored graphics and remove all graphics from the graphics layer

package/dist/components/public-notification.js

@@ -47,7 +47,7 @@ import { d as defineCustomElement$5 } from './map-select-tools2.js';
 import { d as defineCustomElement$4 } from './pdf-download2.js';
 import { d as defineCustomElement$2 } from './refine-selection-tools2.js';
 
-const publicNotificationCss = ":host{display:block;--calcite-input-message-spacing-value:0}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}.action-bar-size{height:3.5rem;width:100%}.w-1-3{width:33.3%}.w-1-4{width:25%}.action-center{-webkit-box-align:center;-webkit-align-items:center;-ms-grid-row-align:center;align-items:center;align-content:center;justify-content:center}.width-full{width:100%}.height-full{height:100%}.padding-1{padding:1rem}.padding-top-sides-1{-webkit-padding-before:1rem;padding-block-start:1rem;-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:1rem;padding-inline-end:1rem}.padding-sides-1{-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:1rem;padding-inline-end:1rem}.padding-end-1-2{-webkit-padding-end:.5rem;padding-inline-end:.5rem}.padding-top-1-2{-webkit-padding-before:.5rem;padding-block-start:.5rem}.padding-top-1{padding-top:1rem}.padding-bottom-1{padding-bottom:1rem}.info-blue{color:#00A0FF}.info-message{justify-content:center;display:grid}.font-bold{font-weight:bold}.display-flex{display:flex}.display-block{display:block}.display-none{display:none}.main-label{float:left}html[dir=\"rtl\"] .main-label{float:right}.back-label:hover{cursor:pointer;color:var(--calcite-ui-brand-hover)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.margin-side-1{-webkit-margin-start:1rem;margin-inline-start:1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}.border-top{border-top:1px solid var(--calcite-ui-border-2)}.w-100{width:100%}.w-50{width:50%}.padding-1-2{padding:0.5rem}.list-border{border:1px solid var(--calcite-ui-border-2)}.margin-sides-1{-webkit-margin-start:1rem;margin-inline-start:1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}.margin-start-1-2{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.position-right{position:absolute;right:1rem}.position-right[dir=\"rtl\"]{position:absolute;left:1rem}.position-left{position:absolute;left:1rem}.position-left[dir=\"rtl\"]{position:absolute;right:1rem}.margin-top-0{-webkit-margin-before:0 !important;margin-block-start:0 !important}.height-1-1-2{height:1.5rem}.main-background{background-color:var(--calcite-ui-foreground-2)}.num-selected{align-items:center;display:flex}";
+const publicNotificationCss = ":host{display:block;--calcite-input-message-spacing-value:0}.align-center{align-items:center}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}.action-bar-size{height:3.5rem;width:100%}.w-1-3{width:33.3%}.w-1-4{width:25%}.action-center{-webkit-box-align:center;-webkit-align-items:center;-ms-grid-row-align:center;align-items:center;align-content:center;justify-content:center}.width-full{width:100%}.height-full{height:100%}.padding-1{padding:1rem}.padding-top-sides-1{-webkit-padding-before:1rem;padding-block-start:1rem;-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:1rem;padding-inline-end:1rem}.padding-sides-1{-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:1rem;padding-inline-end:1rem}.padding-end-1-2{-webkit-padding-end:.5rem;padding-inline-end:.5rem}.padding-top-1-2{-webkit-padding-before:.5rem;padding-block-start:.5rem}.padding-top-1{padding-top:1rem}.padding-bottom-1{padding-bottom:1rem}.info-blue{color:#00A0FF}.info-message{justify-content:center;display:grid}.font-bold{font-weight:bold}.display-flex{display:flex}.display-block{display:block}.display-none{display:none}.main-label{float:left}html[dir=\"rtl\"] .main-label{float:right}.back-label:hover{cursor:pointer;color:var(--calcite-ui-brand-hover)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.margin-side-1{-webkit-margin-start:1rem;margin-inline-start:1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}.border-top{border-top:1px solid var(--calcite-ui-border-2)}.w-100{width:100%}.w-50{width:50%}.padding-1-2{padding:0.5rem}.list-border{border:1px solid var(--calcite-ui-border-2)}.margin-sides-1{-webkit-margin-start:1rem;margin-inline-start:1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}.margin-start-1-2{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.float-right{float:right}.float-right[dir=\"rtl\"]{float:left}.float-left{float:left}.float-left[dir=\"rtl\"]{float:right}.margin-top-0{-webkit-margin-before:0 !important;margin-block-start:0 !important}.height-1-1-2{height:1.5rem}.main-background{background-color:var(--calcite-ui-foreground-2)}.num-selected{align-items:center;display:flex}";
 
 const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -118,6 +118,13 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
       return this._highlightFeatures();
     }
   }
+  /**
+   * Handle changes to the buffer distance value
+   */
+  distanceChanged(event) {
+    this._updateLabel(event, "distance");
+    this._distance = event.detail.newValue;
+  }
   /**
    * Handle changes to the selection sets
    */
@@ -130,6 +137,13 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
   sketchTypeChange(event) {
     this._sketchType = event.detail;
   }
+  /**
+   * Handle changes to the buffer unit
+   */
+  unitChanged(event) {
+    this._updateLabel(event, "unit");
+    this._unit = event.detail.newValue;
+  }
   //--------------------------------------------------------------------------
   //
   //  Functions (lifecycle)
@@ -235,7 +249,7 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
   _getListPage() {
     const hasSets = this._selectionSets.filter(ss => ss.workflowType !== EWorkflowType.REFINE).length > 0;
     const total = getTotal(this._selectionSets);
-    return hasSets ? (h("calcite-panel", null, h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "font-bold" }, this._translations.myLists)), this._getNotice(this._translations.listHasSetsTip, "padding-sides-1 padding-bottom-1"), this._getMapLayerPicker(), h("div", { class: "padding-sides-1 height-1-1-2" }, h("div", { class: "position-left" }, h("calcite-label", { alignment: "start", class: "font-bold" }, this._translations.notifications)), h("div", { class: "position-right" }, h("calcite-input-message", { active: true, class: "info-blue margin-top-0", scale: "m" }, this._translations.uniqueCout.replace("{{n}}", total.toString())))), hasSets ? this._getSelectionSetList() : (h("div", { class: "info-message" }, h("calcite-input-message", { active: true, class: "info-blue", scale: "m" }, this._translations.noNotifications))), h("div", { class: "display-flex padding-1" }, h("calcite-button", { onClick: () => { this._setPageType(EPageType.SELECT); }, width: "full" }, this._translations.add)), this._showModal(this._showLayerSelectionChangeModal))) : (h("calcite-panel", null, h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "font-bold" }, this._translations.myLists)), h("div", { class: "padding-sides-1" }, h("calcite-label", null, this._translations.notifications)), h("div", { class: "info-message padding-bottom-1" }, h("calcite-input-message", { active: true, class: "info-blue", scale: "m" }, this._translations.noNotifications)), this._getNotice(this._translations.selectLayerAndAdd, "padding-sides-1 padding-bottom-1"), this._getMapLayerPicker(), h("div", { class: "display-flex padding-1" }, h("calcite-button", { onClick: () => { this._setPageType(EPageType.SELECT); }, width: "full" }, this._translations.add))));
+    return hasSets ? (h("calcite-panel", null, h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "font-bold" }, this._translations.myLists)), this._getNotice(this._translations.listHasSetsTip, "padding-sides-1 padding-bottom-1"), this._getMapLayerPicker(), h("div", { class: "display-block padding-sides-1 height-1-1-2" }, h("div", { class: "display-block float-left" }, h("calcite-label", { alignment: "start", class: "font-bold" }, this._translations.notifications)), h("div", { class: "display-block float-right" }, h("calcite-input-message", { active: true, class: "info-blue margin-top-0", scale: "m" }, this._translations.uniqueCout.replace("{{n}}", total.toString())))), hasSets ? this._getSelectionSetList() : (h("div", { class: "info-message" }, h("calcite-input-message", { active: true, class: "info-blue", scale: "m" }, this._translations.noNotifications))), h("div", { class: "display-flex padding-1" }, h("calcite-button", { onClick: () => { this._setPageType(EPageType.SELECT); }, width: "full" }, this._translations.add)), this._showModal(this._showLayerSelectionChangeModal))) : (h("calcite-panel", null, h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "font-bold" }, this._translations.myLists)), h("div", { class: "padding-sides-1" }, h("calcite-label", null, this._translations.notifications)), h("div", { class: "info-message padding-bottom-1" }, h("calcite-input-message", { active: true, class: "info-blue", scale: "m" }, this._translations.noNotifications)), this._getNotice(this._translations.selectLayerAndAdd, "padding-sides-1 padding-bottom-1"), this._getMapLayerPicker(), h("div", { class: "display-flex padding-1" }, h("calcite-button", { onClick: () => { this._setPageType(EPageType.SELECT); }, width: "full" }, this._translations.add))));
   }
   /**
    * Create the UI element that will expose the addressee layers
@@ -305,7 +319,7 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
    * @protected
    */
   _getSelectPage() {
-    var _a, _b, _c;
+    var _a, _b;
     const searchTip = this._translations.selectSearchTip;
     const selectTip = this._translations.selectLayerTip;
     const sketchTip = this._sketchType === ESketchType.INTERACTIVE ?
@@ -317,7 +331,7 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     return (h("calcite-panel", null, this._getLabel(this._translations.stepTwoFull.replace("{{layer}}", (_a = this.addresseeLayer) === null || _a === void 0 ? void 0 : _a.layer.title)), this._getNotice(noticeText), h("div", { class: "padding-top-sides-1" }, h("map-select-tools", { bufferColor: this.bufferColor, bufferOutlineColor: this.bufferOutlineColor, class: "font-bold", defaultBufferDistance: this.defaultBufferDistance, defaultBufferUnit: this.defaultBufferUnit, enabledLayerIds: this.selectionLayerIds, isUpdate: !!this._activeSelection, mapView: this.mapView, onSelectionSetChange: (evt) => this._updateForSelection(evt), onWorkflowTypeChange: (evt) => this._updateForWorkflowType(evt), ref: (el) => { this._selectTools = el; }, searchConfiguration: this.searchConfiguration, selectLayerView: this.addresseeLayer, selectionSet: this._activeSelection, showBufferTools: this.showSearchSettings })), h("div", { class: "padding-sides-1 padding-bottom-1", style: { "align-items": "end", "display": "flex" } }, h("calcite-icon", { class: "info-blue padding-end-1-2", icon: "feature-layer", scale: "s" }), h("calcite-input-message", { active: true, class: "info-blue", scale: "m" }, this.noResultText && this._numSelected === 0 ? this.noResultText :
       this._translations.selectedAddresses.replace("{{n}}", this._numSelected.toString()).replace("{{layer}}", ((_b = this.addresseeLayer) === null || _b === void 0 ? void 0 : _b.layer.title) || ""))), h("div", { class: "padding-sides-1 " + nameLabelClass }, h("calcite-label", { class: "font-bold" }, "Name label", h("calcite-input", { onInput: () => {
         this.labelChange.emit(this._labelName.value);
-      }, placeholder: "Insert label here...", ref: (el) => { this._labelName = el; }, value: ((_c = this._activeSelection) === null || _c === void 0 ? void 0 : _c.label) || "" }))), this._getPageNavButtons(this._translations.done, this._numSelected === 0, () => { void this._saveSelection(); }, this._translations.cancel, false, () => { void this._home(); })));
+      }, placeholder: "Insert label here...", ref: (el) => { this._labelName = el; }, value: this._customLabel || "" }))), this._getPageNavButtons(this._translations.done, this._numSelected === 0, () => { void this._saveSelection(); }, this._translations.cancel, false, () => { void this._home(); })));
   }
   /**
    * Create the Refine page that users can interactively add/remove features from existing selection sets
@@ -413,7 +427,7 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
         if (!this._downloadActive && cur.download) {
           this._downloadActive = true;
         }
-        prev.push((h("div", { class: "display-flex padding-sides-1 padding-bottom-1" }, h("calcite-checkbox", { checked: cur.download, onClick: () => { void this._toggleDownload(cur.id); } }), h("calcite-list", { class: "list-border margin-start-1-2 w-100", id: "download-list" }, h("calcite-list-item", { description: this._translations.selectedFeatures.replace("{{n}}", cur.selectedIds.length.toString()), disabled: !cur.download, label: cur.label, onClick: () => { void this._toggleDownload(cur.id); } })))));
+        prev.push((h("div", { class: "display-flex padding-sides-1 padding-bottom-1" }, h("calcite-checkbox", { checked: cur.download, class: "align-center", onClick: () => { void this._toggleDownload(cur.id); } }), h("calcite-list", { class: "list-border margin-start-1-2 w-100", id: "download-list" }, h("calcite-list-item", { description: this._translations.selectedFeatures.replace("{{n}}", cur.selectedIds.length.toString()), disabled: !cur.download, label: cur.label, onClick: () => { void this._toggleDownload(cur.id); } })))));
       }
       return prev;
     }, []) || (h("div", null));
@@ -465,6 +479,20 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
       return ss.download || ss.workflowType === EWorkflowType.REFINE;
     });
   }
+  /**
+   * Update custom label UI with buffer values
+   *
+   * @protected
+   */
+  _updateLabel(evt, type) {
+    if (this._customLabel) {
+      const oldV = type === "unit" ? `${this._distance} ${evt.detail.oldValue}` : `${evt.detail.oldValue} ${this._unit}`;
+      const newV = type === "unit" ? `${this._distance} ${evt.detail.newValue}` : `${evt.detail.newValue} ${this._unit}`;
+      this._customLabel = this._customLabel.replace(oldV, newV);
+      this._labelName.value = this._customLabel;
+      this.labelChange.emit(this._labelName.value);
+    }
+  }
   /**
    * Store the current workflow type
    *
@@ -603,6 +631,9 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     await ((_a = this._selectTools) === null || _a === void 0 ? void 0 : _a.clearSelection());
     this._numSelected = 0;
     this._activeSelection = undefined;
+    this._customLabel = undefined;
+    this._distance = undefined;
+    this._unit = undefined;
   }
   /**
    * Delete the selection at the defined index
@@ -639,6 +670,9 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
   _openSelection(selectionSet, evt) {
     evt.stopPropagation();
     this._activeSelection = selectionSet;
+    this._distance = this._activeSelection.distance;
+    this._unit = this._activeSelection.unit;
+    this._customLabel = this._activeSelection.label;
     this._pageType = EPageType.SELECT;
   }
   /**
@@ -717,7 +751,7 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     "_selectionWorkflowType": [32],
     "_showLayerSelectionChangeModal": [32],
     "_translations": [32]
-  }, [[8, "selectionSetsChanged", "selectionSetsChanged"], [8, "sketchTypeChange", "sketchTypeChange"]]]);
+  }, [[8, "distanceChanged", "distanceChanged"], [8, "selectionSetsChanged", "selectionSetsChanged"], [8, "sketchTypeChange", "sketchTypeChange"], [8, "unitChanged", "unitChanged"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

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

@@ -19,7 +19,7 @@ import { d as defineCustomElement$4 } from './loader.js';
 import { d as defineCustomElement$3 } from './option.js';
 import { d as defineCustomElement$2 } from './select.js';
 
-const refineSelectionToolsCss = ":host{display:block}.div-visible{display:inherit}.div-not-visible{display:none !important}.padding-top-1-2{padding-top:.5rem}.main-label{display:flex;float:left}html[dir=\"rtl\"] .main-label{display:flex;float:right}.border{outline:1px solid var(--calcite-ui-border-input)}.margin-top-1{margin-top:1rem}.esri-sketch{display:flex;flex-flow:column wrap}.esri-widget{box-sizing:border-box;color:#323232;font-size:14px;font-family:\"Avenir Next\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;line-height:1.3em}.esri-sketch__panel{align-items:center;display:flex;flex-flow:row nowrap;padding:0}*/ .esri-sketch__tool-section{border-right:1px solid rgba(110,110,110,.3)}.esri-sketch__section{align-items:center;display:flex;flex-flow:row nowrap;padding:0 7px;margin:6px 0;border-right:1px solid rgba(110,110,110,.3)}";
+const refineSelectionToolsCss = ":host{display:block}.div-visible{display:inherit}.div-not-visible{display:none !important}.padding-top-1-2{padding-top:.5rem}.main-label{display:flex;float:left}html[dir=\"rtl\"] .main-label{display:flex;float:right}.border{outline:1px solid var(--calcite-ui-border-input)}.margin-top-1{margin-top:1rem}.esri-sketch{display:flex;flex-flow:column wrap}.esri-widget{box-sizing:border-box;color:#323232;font-size:14px;font-family:\"Avenir Next\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;line-height:1.3em;background-color:var(--calcite-ui-foreground-1)}.esri-sketch__panel{align-items:center;display:flex;flex-flow:row nowrap;padding:0}*/ .esri-sketch__tool-section{border-right:1px solid rgba(110,110,110,.3)}.esri-sketch__section{align-items:center;display:flex;flex-flow:row nowrap;padding:0 7px;margin:6px 0;border-right:1px solid rgba(110,110,110,.3)}";
 
 const RefineSelectionTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -132,7 +132,8 @@ const RefineSelectionTools = /*@__PURE__*/ proxyCustomElement(class extends HTML
   render() {
     const showLayerPickerClass = this.useLayerPicker ? "div-visible" : "div-not-visible";
     const drawClass = this.border ? " border" : "";
-    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: "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 }))))))));
+    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 }))))))));
   }
   //--------------------------------------------------------------------------
   //
@@ -361,6 +362,7 @@ const RefineSelectionTools = /*@__PURE__*/ proxyCustomElement(class extends HTML
    * @protected
    */
   async _updateIds(oids, mode, operationStack, operationMode) {
+    console.log("_updateIds");
     const idUpdates = { addIds: [], removeIds: [] };
     if (mode === ESelectionMode.ADD) {
       idUpdates.addIds = oids.filter(id => this.ids.indexOf(id) < 0);

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, c as EWorkflowType } from './interfaces3.js';
+import { e as ESelectionMode, f as ERefineMode, c as EWorkflowType } 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';
@@ -98,7 +98,7 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
    * 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; }, 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, useLayerPicker: false })), h("br", null), (h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
   }
   //--------------------------------------------------------------------------
   //
@@ -128,6 +128,7 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
    * @protected
    */
   _getRefineSelectionSetList() {
+    console.log("_getRefineSelectionSetList");
     const total = getTotal(this.selectionSets);
     const refineSet = this._getRefineSelectionSet(this.selectionSets);
     const numAdded = (refineSet === null || refineSet === void 0 ? void 0 : refineSet.refineIds.addIds.length) || 0;
@@ -199,6 +200,7 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
    * @protected
    */
   _updateRefineIds(selectionSet, addIds, removeIds) {
+    console.log("_updateRefineIds");
     // remove ids if they exist in the current add or remove list
     selectionSet.refineIds.addIds = selectionSet.refineIds.addIds.filter(id => removeIds.indexOf(id) < 0);
     selectionSet.refineIds.removeIds = selectionSet.refineIds.removeIds.filter(id => addIds.indexOf(id) < 0);