@esri/solutions-components 0.5.3 → 0.5.5

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

@@ -24,6 +24,7 @@ const MapDrawTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.drawRedo = createEvent(this, "drawRedo", 7);
     this.active = false;
     this.drawMode = EDrawMode.SKETCH;
+    this.editGraphicsEnabled = true;
     this.graphics = undefined;
     this.mapView = undefined;
     this.pointSymbol = undefined;
@@ -169,19 +170,21 @@ const MapDrawTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
    * @protected
    */
   _initSketch() {
-    this._sketchWidget = new this.Sketch({
+    const sketchOptions = {
       layer: this._sketchGraphicsLayer,
       view: this.mapView,
-      container: this._sketchElement,
-      defaultUpdateOptions: {
-        tool: "reshape",
-        toggleToolOnClick: false
-      },
-      creationMode: "single",
       defaultCreateOptions: {
         mode: "hybrid"
       },
-      visibleElements: {
+      defaultUpdateOptions: {
+        preserveAspectRatio: false,
+        enableScaling: false,
+        enableRotation: false,
+        tool: "reshape",
+        toggleToolOnClick: false
+      }
+    };
+    this._sketchWidget = new this.Sketch(Object.assign(Object.assign({}, sketchOptions), { container: this._sketchElement, creationMode: "single", visibleElements: {
         selectionTools: {
           "lasso-selection": false,
           "rectangle-selection": false
@@ -190,12 +193,8 @@ const MapDrawTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         },
         undoRedoMenu: false,
         settingsMenu: this.drawMode === EDrawMode.SKETCH
-      }
-    });
-    this._sketchViewModel = new this.SketchViewModel({
-      view: this.mapView,
-      layer: this._sketchGraphicsLayer
-    });
+      } }));
+    this._sketchViewModel = new this.SketchViewModel(Object.assign({}, sketchOptions));
     this._sketchWidget.viewModel.polylineSymbol = this.polylineSymbol;
     this._sketchWidget.viewModel.pointSymbol = this.pointSymbol;
     this._sketchWidget.viewModel.polygonSymbol = this.polygonSymbol;
@@ -210,13 +209,19 @@ const MapDrawTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     });
     this._sketchWidget.on("update", (evt) => {
       var _a;
-      const eventType = (_a = evt === null || evt === void 0 ? void 0 : evt.toolEventInfo) === null || _a === void 0 ? void 0 : _a.type;
-      if (eventType === "reshape-stop" || eventType === "move-stop") {
-        this.graphics = evt.graphics;
-        this.sketchGraphicsChange.emit({
-          graphics: this.graphics,
-          useOIDs: false
-        });
+      if (!this.editGraphicsEnabled) {
+        this._sketchWidget.viewModel.cancel();
+        this._sketchViewModel.cancel();
+      }
+      else {
+        const eventType = (_a = evt === null || evt === void 0 ? void 0 : evt.toolEventInfo) === null || _a === void 0 ? void 0 : _a.type;
+        if (eventType === "reshape-stop" || eventType === "move-stop") {
+          this.graphics = evt.graphics;
+          this.sketchGraphicsChange.emit({
+            graphics: this.graphics,
+            useOIDs: false
+          });
+        }
       }
     });
     this._sketchWidget.on("delete", () => {
@@ -306,6 +311,7 @@ const MapDrawTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
 }, [0, "map-draw-tools", {
     "active": [4],
     "drawMode": [1, "draw-mode"],
+    "editGraphicsEnabled": [4, "edit-graphics-enabled"],
     "graphics": [1040],
     "mapView": [1040],
     "pointSymbol": [1040],

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

@@ -10,25 +10,26 @@ import { b as queryObjectIds, g as getQueryGeoms, c as queryFeaturesByGeometry }
 import { c as EWorkflowType } from './interfaces.js';
 import { s as state } from './publicNotificationStore.js';
 import { a as getComponentClosestLanguage, g as getLocaleComponentStrings } from './locale.js';
-import { d as defineCustomElement$i } from './buffer-tools2.js';
-import { d as defineCustomElement$h } from './action.js';
-import { d as defineCustomElement$g } from './chip.js';
-import { d as defineCustomElement$f } from './combobox.js';
-import { d as defineCustomElement$e } from './combobox-item.js';
-import { d as defineCustomElement$d } from './graph.js';
-import { d as defineCustomElement$c } from './icon.js';
-import { d as defineCustomElement$b } from './input.js';
-import { d as defineCustomElement$a } from './input-message.js';
-import { d as defineCustomElement$9 } from './label.js';
-import { d as defineCustomElement$8 } from './loader.js';
-import { d as defineCustomElement$7 } from './option.js';
-import { d as defineCustomElement$6 } from './progress.js';
-import { d as defineCustomElement$5 } from './select.js';
-import { d as defineCustomElement$4 } from './slider.js';
-import { d as defineCustomElement$3 } from './switch.js';
+import { d as defineCustomElement$j } from './buffer-tools2.js';
+import { d as defineCustomElement$i } from './action.js';
+import { d as defineCustomElement$h } from './chip.js';
+import { d as defineCustomElement$g } from './combobox.js';
+import { d as defineCustomElement$f } from './combobox-item.js';
+import { d as defineCustomElement$e } from './graph.js';
+import { d as defineCustomElement$d } from './icon.js';
+import { d as defineCustomElement$c } from './input.js';
+import { d as defineCustomElement$b } from './input-message.js';
+import { d as defineCustomElement$a } from './label.js';
+import { d as defineCustomElement$9 } from './loader.js';
+import { d as defineCustomElement$8 } from './option.js';
+import { d as defineCustomElement$7 } from './progress.js';
+import { d as defineCustomElement$6 } from './select.js';
+import { d as defineCustomElement$5 } from './slider.js';
+import { d as defineCustomElement$4 } from './switch.js';
+import { d as defineCustomElement$3 } from './tooltip.js';
 import { d as defineCustomElement$2 } from './map-draw-tools2.js';
 
-const mapSelectToolsCss = ":host{display:block}.div-visible{display:inherit}.div-visible-search{display:flex;height:44px;align-items:center;padding-bottom:0}.div-not-visible{display:none}.padding-bottom-1{padding-bottom:1rem}.padding-top-1{padding-top:1rem}.search-widget{width:100% !important;border:1px solid var(--calcite-ui-border-input)}.w-100{width:100%}.w-50{width:50%}.search-distance-container{padding-top:\"1rem\" !important}.end-border{-webkit-border-end:1px solid var(--calcite-ui-border-2);border-inline-end:1px solid var(--calcite-ui-border-2)}.search-distance{display:flex;padding-top:1rem}.font-bold{font:bold}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}";
+const mapSelectToolsCss = ":host{display:block}.div-visible{display:inherit}.div-visible-search{display:flex;height:44px;align-items:center;padding-bottom:0}.div-not-visible{display:none}.padding-bottom-1{padding-bottom:1rem}.padding-top-1{padding-top:1rem}.search-widget{width:100% !important;border:1px solid var(--calcite-ui-border-input)}.w-100{width:100%}.w-50{width:50%}.search-distance-container{padding-top:\"1rem\" !important}.end-border{-webkit-border-end:1px solid var(--calcite-ui-border-2);border-inline-end:1px solid var(--calcite-ui-border-2)}.search-distance{display:flex;padding-top:1rem}.font-bold{font:bold}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.tooltip-container{justify-content:center;display:flex}.padding-start-1-2{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}.icon{--calcite-ui-icon-color:var(--calcite-ui-brand)}";
 
 const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -190,7 +191,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * Renders the component.
    */
   render() {
-    return (h(Host, null, this._getMapLayerPicker(), h("div", { class: "border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } }), h("div", { class: "padding-top-1" }, h("map-draw-tools", { active: true, graphics: this._graphics, mapView: this.mapView, onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, ref: (el) => { this._drawTools = el; } })), this._getBufferOptions(), this._getUseLayerFeaturesOptions(), this._getNumSelected()), h("div", { class: "border-bottom" }), this._getNameInput()));
+    return (h(Host, null, this._getMapLayerPicker(), h("div", { class: "border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } }), h("div", { class: "padding-top-1" }, h("map-draw-tools", { active: true, editGraphicsEnabled: !this._useLayerFeaturesEnabled, graphics: this._graphics, mapView: this.mapView, onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, ref: (el) => { this._drawTools = el; } })), this._getBufferOptions(), this._getUseLayerFeaturesOptions(), this._getNumSelected()), h("div", { class: "border-bottom" }), this._getNameInput()));
   }
   /**
    * Renders the buffer tools component.
@@ -199,14 +200,14 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     var _a, _b;
     const showBufferToolsClass = this._searchDistanceEnabled ? "search-distance" : "div-not-visible";
     const bufferDistance = typeof ((_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.distance) === "number" ? this.selectionSet.distance : this.defaultBufferDistance;
-    return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 " }, this._translations.searchDistance), h("calcite-switch", { checked: this._searchDistanceEnabled, class: "position-right", onCalciteSwitchChange: () => this._searchDistanceEnabled = !this._searchDistanceEnabled })), h("div", { class: showBufferToolsClass }, h("buffer-tools", { disabled: !this._searchDistanceEnabled, distance: bufferDistance, geometries: this.geometries, onBufferComplete: (evt) => this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.unit) || this.defaultBufferUnit }))));
+    return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.searchDistance, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "search-distance-icon", scale: "s" }), h("calcite-tooltip", { label: "Data disclaimer", placement: "auto", "reference-element": "search-distance-icon" }, h("span", null, this._translations.useSearchDistanceTootip))), h("calcite-switch", { checked: this._searchDistanceEnabled, onCalciteSwitchChange: () => this._searchDistanceEnabled = !this._searchDistanceEnabled }))), h("div", { class: showBufferToolsClass }, h("buffer-tools", { disabled: !this._searchDistanceEnabled, distance: bufferDistance, geometries: this.geometries, onBufferComplete: (evt) => this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.unit) || this.defaultBufferUnit }))));
   }
   /**
    * Renders the map layer picker component.
    */
   _getUseLayerFeaturesOptions() {
     const useLayerFeaturesClass = this._useLayerFeaturesEnabled ? "div-visible" : "div-not-visible";
-    return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 " }, this._translations.useLayerFeatures), h("calcite-switch", { checked: this._useLayerFeaturesEnabled, class: "position-right", onCalciteSwitchChange: () => { this._useLayerFeaturesEnabledChanged(); } })), h("div", { class: useLayerFeaturesClass + " padding-top-1" }, h("map-layer-picker", { enabledLayerIds: this.enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedLayerIds: this.layerViews.map(l => l.layer.id), selectionMode: "single" }))));
+    return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.useLayerFeatures, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "use-layer-features-icon", scale: "s" }), h("calcite-tooltip", { label: "Data disclaimer", placement: "auto", "reference-element": "use-layer-features-icon" }, h("span", null, this._translations.useLayerFeaturesTooltip))), h("calcite-switch", { checked: this._useLayerFeaturesEnabled, onCalciteSwitchChange: () => { this._useLayerFeaturesEnabledChanged(); } }))), h("div", { class: useLayerFeaturesClass + " padding-top-1" }, h("map-layer-picker", { enabledLayerIds: this.enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedLayerIds: this.layerViews.map(l => l.layer.id), selectionMode: "single" }))));
   }
   /**
    * Renders the number of selected features
@@ -279,7 +280,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * @protected
    */
   async _initSelectionSet() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     if (this.selectionSet) {
       this._searchTerm = (_a = this.selectionSet.searchResult) === null || _a === void 0 ? void 0 : _a.name;
       this._searchResult = this.selectionSet.searchResult;
@@ -300,6 +301,9 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
         ...((_c = this.selectionSet) === null || _c === void 0 ? void 0 : _c.graphics) || []
       ];
       this._selectionLabel = (_d = this.selectionSet) === null || _d === void 0 ? void 0 : _d.label;
+      if (!this._useLayerFeaturesEnabled) {
+        (_e = this._drawTools) === null || _e === void 0 ? void 0 : _e.updateGraphics();
+      }
       await goToSelection(this.selectionSet.selectedIds, this.selectionSet.layerView, this.mapView, false);
     }
   }
@@ -429,36 +433,42 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    */
   async _sketchGraphicsChanged(event, forceUpdate = false) {
     const graphics = event.detail.graphics;
-    if (!forceUpdate) {
-      this._sketchGraphic = graphics[0];
-    }
-    this._workflowType = this._useLayerFeaturesEnabled ? EWorkflowType.SELECT : EWorkflowType.SKETCH;
-    if (this._workflowType === EWorkflowType.SKETCH) {
-      this._drawTools.updateGraphics();
-    }
-    this._updateLabel();
-    this._clearSearchWidget();
-    if (this._useLayerFeaturesEnabled && !forceUpdate) {
-      const geometries = Array.isArray(graphics) && graphics.length > 0 && graphics[0] ? graphics.map(g => g.geometry) : this.geometries;
-      await this._selectLayerFeatures(geometries[0]);
-    }
-    else {
-      const oids = graphics.reduce((prev, cur) => {
-        var _a;
-        if ((_a = cur === null || cur === void 0 ? void 0 : cur.layer) === null || _a === void 0 ? void 0 : _a.objectIdField) {
-          prev.push(cur.attributes[cur.layer.objectIdField]);
-        }
-        else if (cur.getObjectId) {
-          prev.push(cur.getObjectId());
+    if (graphics.length > 0 && graphics[0]) {
+      if (!forceUpdate) {
+        this._sketchGraphic = graphics[0];
+      }
+      this._workflowType = this._useLayerFeaturesEnabled ? EWorkflowType.SELECT : EWorkflowType.SKETCH;
+      if (this._workflowType === EWorkflowType.SKETCH) {
+        this._drawTools.updateGraphics();
+      }
+      this._updateLabel();
+      this._clearSearchWidget();
+      if (this._useLayerFeaturesEnabled && !forceUpdate) {
+        // Will only ever be a single graphic
+        const geometries = Array.isArray(graphics) ? graphics.map(g => g.geometry) : this.geometries;
+        await this._selectLayerFeatures(geometries[0]);
+      }
+      else {
+        const oids = graphics.reduce((prev, cur) => {
+          var _a;
+          if ((_a = cur === null || cur === void 0 ? void 0 : cur.layer) === null || _a === void 0 ? void 0 : _a.objectIdField) {
+            prev.push(cur.attributes[cur.layer.objectIdField]);
+          }
+          else if (cur.getObjectId) {
+            prev.push(cur.getObjectId());
+          }
+          return prev;
+        }, []);
+        const useOIDs = event.detail.useOIDs && oids.length > 0;
+        this._updateSelection(graphics, useOIDs, oids);
+        if (useOIDs) {
+          await this._highlightFeatures(oids);
         }
-        return prev;
-      }, []);
-      const useOIDs = event.detail.useOIDs && oids.length > 0;
-      this._updateSelection(graphics, useOIDs, oids);
-      if (useOIDs) {
-        await this._highlightFeatures(oids);
       }
     }
+    else {
+      await this._clearResults(true, true);
+    }
   }
   /**
    * Highlight the features in the map based on OIDs when skipOIDs have been defined
@@ -578,7 +588,6 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this._selectedIds = [];
     this._distance = undefined;
     this._unit = undefined;
-    this._sketchGraphic = undefined;
     if (clearLabel) {
       this._selectionLabel = "";
       this._labelName.value = "";
@@ -800,7 +809,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["map-select-tools", "buffer-tools", "calcite-action", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-graph", "calcite-icon", "calcite-input", "calcite-input-message", "calcite-label", "calcite-loader", "calcite-option", "calcite-progress", "calcite-select", "calcite-slider", "calcite-switch", "map-draw-tools", "map-layer-picker"];
+  const components = ["map-select-tools", "buffer-tools", "calcite-action", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-graph", "calcite-icon", "calcite-input", "calcite-input-message", "calcite-label", "calcite-loader", "calcite-option", "calcite-progress", "calcite-select", "calcite-slider", "calcite-switch", "calcite-tooltip", "map-draw-tools", "map-layer-picker"];
   components.forEach(tagName => { switch (tagName) {
     case "map-select-tools":
       if (!customElements.get(tagName)) {
@@ -809,80 +818,85 @@ function defineCustomElement() {
       break;
     case "buffer-tools":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$j();
       }
       break;
     case "calcite-action":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$i();
       }
       break;
     case "calcite-chip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$h();
       }
       break;
     case "calcite-combobox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$g();
       }
       break;
     case "calcite-combobox-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$f();
       }
       break;
     case "calcite-graph":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$e();
       }
       break;
     case "calcite-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$d();
       }
       break;
     case "calcite-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$c();
       }
       break;
     case "calcite-input-message":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$b();
       }
       break;
     case "calcite-label":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "calcite-loader":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "calcite-option":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "calcite-progress":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "calcite-select":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "calcite-slider":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "calcite-switch":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-tooltip":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

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

@@ -1133,6 +1133,7 @@ const MapDrawTools = class {
     this.drawRedo = createEvent(this, "drawRedo", 7);
     this.active = false;
     this.drawMode = EDrawMode.SKETCH;
+    this.editGraphicsEnabled = true;
     this.graphics = undefined;
     this.mapView = undefined;
     this.pointSymbol = undefined;
@@ -1278,19 +1279,21 @@ const MapDrawTools = class {
    * @protected
    */
   _initSketch() {
-    this._sketchWidget = new this.Sketch({
+    const sketchOptions = {
       layer: this._sketchGraphicsLayer,
       view: this.mapView,
-      container: this._sketchElement,
-      defaultUpdateOptions: {
-        tool: "reshape",
-        toggleToolOnClick: false
-      },
-      creationMode: "single",
       defaultCreateOptions: {
         mode: "hybrid"
       },
-      visibleElements: {
+      defaultUpdateOptions: {
+        preserveAspectRatio: false,
+        enableScaling: false,
+        enableRotation: false,
+        tool: "reshape",
+        toggleToolOnClick: false
+      }
+    };
+    this._sketchWidget = new this.Sketch(Object.assign(Object.assign({}, sketchOptions), { container: this._sketchElement, creationMode: "single", visibleElements: {
         selectionTools: {
           "lasso-selection": false,
           "rectangle-selection": false
@@ -1299,12 +1302,8 @@ const MapDrawTools = class {
         },
         undoRedoMenu: false,
         settingsMenu: this.drawMode === EDrawMode.SKETCH
-      }
-    });
-    this._sketchViewModel = new this.SketchViewModel({
-      view: this.mapView,
-      layer: this._sketchGraphicsLayer
-    });
+      } }));
+    this._sketchViewModel = new this.SketchViewModel(Object.assign({}, sketchOptions));
     this._sketchWidget.viewModel.polylineSymbol = this.polylineSymbol;
     this._sketchWidget.viewModel.pointSymbol = this.pointSymbol;
     this._sketchWidget.viewModel.polygonSymbol = this.polygonSymbol;
@@ -1319,13 +1318,19 @@ const MapDrawTools = class {
     });
     this._sketchWidget.on("update", (evt) => {
       var _a;
-      const eventType = (_a = evt === null || evt === void 0 ? void 0 : evt.toolEventInfo) === null || _a === void 0 ? void 0 : _a.type;
-      if (eventType === "reshape-stop" || eventType === "move-stop") {
-        this.graphics = evt.graphics;
-        this.sketchGraphicsChange.emit({
-          graphics: this.graphics,
-          useOIDs: false
-        });
+      if (!this.editGraphicsEnabled) {
+        this._sketchWidget.viewModel.cancel();
+        this._sketchViewModel.cancel();
+      }
+      else {
+        const eventType = (_a = evt === null || evt === void 0 ? void 0 : evt.toolEventInfo) === null || _a === void 0 ? void 0 : _a.type;
+        if (eventType === "reshape-stop" || eventType === "move-stop") {
+          this.graphics = evt.graphics;
+          this.sketchGraphicsChange.emit({
+            graphics: this.graphics,
+            useOIDs: false
+          });
+        }
       }
     });
     this._sketchWidget.on("delete", () => {

package/dist/esm/calcite-input-text_5.entry.js

@@ -470,7 +470,7 @@ const Notice = class {
 };
 Notice.style = noticeCss;
 
-const mapSelectToolsCss = ":host{display:block}.div-visible{display:inherit}.div-visible-search{display:flex;height:44px;align-items:center;padding-bottom:0}.div-not-visible{display:none}.padding-bottom-1{padding-bottom:1rem}.padding-top-1{padding-top:1rem}.search-widget{width:100% !important;border:1px solid var(--calcite-ui-border-input)}.w-100{width:100%}.w-50{width:50%}.search-distance-container{padding-top:\"1rem\" !important}.end-border{-webkit-border-end:1px solid var(--calcite-ui-border-2);border-inline-end:1px solid var(--calcite-ui-border-2)}.search-distance{display:flex;padding-top:1rem}.font-bold{font:bold}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}";
+const mapSelectToolsCss = ":host{display:block}.div-visible{display:inherit}.div-visible-search{display:flex;height:44px;align-items:center;padding-bottom:0}.div-not-visible{display:none}.padding-bottom-1{padding-bottom:1rem}.padding-top-1{padding-top:1rem}.search-widget{width:100% !important;border:1px solid var(--calcite-ui-border-input)}.w-100{width:100%}.w-50{width:50%}.search-distance-container{padding-top:\"1rem\" !important}.end-border{-webkit-border-end:1px solid var(--calcite-ui-border-2);border-inline-end:1px solid var(--calcite-ui-border-2)}.search-distance{display:flex;padding-top:1rem}.font-bold{font:bold}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.tooltip-container{justify-content:center;display:flex}.padding-start-1-2{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}.icon{--calcite-ui-icon-color:var(--calcite-ui-brand)}";
 
 const MapSelectTools = class {
   constructor(hostRef) {
@@ -631,7 +631,7 @@ const MapSelectTools = class {
    * Renders the component.
    */
   render() {
-    return (h(Host, null, this._getMapLayerPicker(), h("div", { class: "border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } }), h("div", { class: "padding-top-1" }, h("map-draw-tools", { active: true, graphics: this._graphics, mapView: this.mapView, onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, ref: (el) => { this._drawTools = el; } })), this._getBufferOptions(), this._getUseLayerFeaturesOptions(), this._getNumSelected()), h("div", { class: "border-bottom" }), this._getNameInput()));
+    return (h(Host, null, this._getMapLayerPicker(), h("div", { class: "border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } }), h("div", { class: "padding-top-1" }, h("map-draw-tools", { active: true, editGraphicsEnabled: !this._useLayerFeaturesEnabled, graphics: this._graphics, mapView: this.mapView, onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, ref: (el) => { this._drawTools = el; } })), this._getBufferOptions(), this._getUseLayerFeaturesOptions(), this._getNumSelected()), h("div", { class: "border-bottom" }), this._getNameInput()));
   }
   /**
    * Renders the buffer tools component.
@@ -640,14 +640,14 @@ const MapSelectTools = class {
     var _a, _b;
     const showBufferToolsClass = this._searchDistanceEnabled ? "search-distance" : "div-not-visible";
     const bufferDistance = typeof ((_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.distance) === "number" ? this.selectionSet.distance : this.defaultBufferDistance;
-    return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 " }, this._translations.searchDistance), h("calcite-switch", { checked: this._searchDistanceEnabled, class: "position-right", onCalciteSwitchChange: () => this._searchDistanceEnabled = !this._searchDistanceEnabled })), h("div", { class: showBufferToolsClass }, h("buffer-tools", { disabled: !this._searchDistanceEnabled, distance: bufferDistance, geometries: this.geometries, onBufferComplete: (evt) => this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.unit) || this.defaultBufferUnit }))));
+    return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.searchDistance, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "search-distance-icon", scale: "s" }), h("calcite-tooltip", { label: "Data disclaimer", placement: "auto", "reference-element": "search-distance-icon" }, h("span", null, this._translations.useSearchDistanceTootip))), h("calcite-switch", { checked: this._searchDistanceEnabled, onCalciteSwitchChange: () => this._searchDistanceEnabled = !this._searchDistanceEnabled }))), h("div", { class: showBufferToolsClass }, h("buffer-tools", { disabled: !this._searchDistanceEnabled, distance: bufferDistance, geometries: this.geometries, onBufferComplete: (evt) => this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.unit) || this.defaultBufferUnit }))));
   }
   /**
    * Renders the map layer picker component.
    */
   _getUseLayerFeaturesOptions() {
     const useLayerFeaturesClass = this._useLayerFeaturesEnabled ? "div-visible" : "div-not-visible";
-    return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 " }, this._translations.useLayerFeatures), h("calcite-switch", { checked: this._useLayerFeaturesEnabled, class: "position-right", onCalciteSwitchChange: () => { this._useLayerFeaturesEnabledChanged(); } })), h("div", { class: useLayerFeaturesClass + " padding-top-1" }, h("map-layer-picker", { enabledLayerIds: this.enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedLayerIds: this.layerViews.map(l => l.layer.id), selectionMode: "single" }))));
+    return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.useLayerFeatures, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "use-layer-features-icon", scale: "s" }), h("calcite-tooltip", { label: "Data disclaimer", placement: "auto", "reference-element": "use-layer-features-icon" }, h("span", null, this._translations.useLayerFeaturesTooltip))), h("calcite-switch", { checked: this._useLayerFeaturesEnabled, onCalciteSwitchChange: () => { this._useLayerFeaturesEnabledChanged(); } }))), h("div", { class: useLayerFeaturesClass + " padding-top-1" }, h("map-layer-picker", { enabledLayerIds: this.enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedLayerIds: this.layerViews.map(l => l.layer.id), selectionMode: "single" }))));
   }
   /**
    * Renders the number of selected features
@@ -720,7 +720,7 @@ const MapSelectTools = class {
    * @protected
    */
   async _initSelectionSet() {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     if (this.selectionSet) {
       this._searchTerm = (_a = this.selectionSet.searchResult) === null || _a === void 0 ? void 0 : _a.name;
       this._searchResult = this.selectionSet.searchResult;
@@ -741,6 +741,9 @@ const MapSelectTools = class {
         ...((_c = this.selectionSet) === null || _c === void 0 ? void 0 : _c.graphics) || []
       ];
       this._selectionLabel = (_d = this.selectionSet) === null || _d === void 0 ? void 0 : _d.label;
+      if (!this._useLayerFeaturesEnabled) {
+        (_e = this._drawTools) === null || _e === void 0 ? void 0 : _e.updateGraphics();
+      }
       await goToSelection(this.selectionSet.selectedIds, this.selectionSet.layerView, this.mapView, false);
     }
   }
@@ -870,36 +873,42 @@ const MapSelectTools = class {
    */
   async _sketchGraphicsChanged(event, forceUpdate = false) {
     const graphics = event.detail.graphics;
-    if (!forceUpdate) {
-      this._sketchGraphic = graphics[0];
-    }
-    this._workflowType = this._useLayerFeaturesEnabled ? EWorkflowType.SELECT : EWorkflowType.SKETCH;
-    if (this._workflowType === EWorkflowType.SKETCH) {
-      this._drawTools.updateGraphics();
-    }
-    this._updateLabel();
-    this._clearSearchWidget();
-    if (this._useLayerFeaturesEnabled && !forceUpdate) {
-      const geometries = Array.isArray(graphics) && graphics.length > 0 && graphics[0] ? graphics.map(g => g.geometry) : this.geometries;
-      await this._selectLayerFeatures(geometries[0]);
-    }
-    else {
-      const oids = graphics.reduce((prev, cur) => {
-        var _a;
-        if ((_a = cur === null || cur === void 0 ? void 0 : cur.layer) === null || _a === void 0 ? void 0 : _a.objectIdField) {
-          prev.push(cur.attributes[cur.layer.objectIdField]);
-        }
-        else if (cur.getObjectId) {
-          prev.push(cur.getObjectId());
+    if (graphics.length > 0 && graphics[0]) {
+      if (!forceUpdate) {
+        this._sketchGraphic = graphics[0];
+      }
+      this._workflowType = this._useLayerFeaturesEnabled ? EWorkflowType.SELECT : EWorkflowType.SKETCH;
+      if (this._workflowType === EWorkflowType.SKETCH) {
+        this._drawTools.updateGraphics();
+      }
+      this._updateLabel();
+      this._clearSearchWidget();
+      if (this._useLayerFeaturesEnabled && !forceUpdate) {
+        // Will only ever be a single graphic
+        const geometries = Array.isArray(graphics) ? graphics.map(g => g.geometry) : this.geometries;
+        await this._selectLayerFeatures(geometries[0]);
+      }
+      else {
+        const oids = graphics.reduce((prev, cur) => {
+          var _a;
+          if ((_a = cur === null || cur === void 0 ? void 0 : cur.layer) === null || _a === void 0 ? void 0 : _a.objectIdField) {
+            prev.push(cur.attributes[cur.layer.objectIdField]);
+          }
+          else if (cur.getObjectId) {
+            prev.push(cur.getObjectId());
+          }
+          return prev;
+        }, []);
+        const useOIDs = event.detail.useOIDs && oids.length > 0;
+        this._updateSelection(graphics, useOIDs, oids);
+        if (useOIDs) {
+          await this._highlightFeatures(oids);
         }
-        return prev;
-      }, []);
-      const useOIDs = event.detail.useOIDs && oids.length > 0;
-      this._updateSelection(graphics, useOIDs, oids);
-      if (useOIDs) {
-        await this._highlightFeatures(oids);
       }
     }
+    else {
+      await this._clearResults(true, true);
+    }
   }
   /**
    * Highlight the features in the map based on OIDs when skipOIDs have been defined
@@ -1019,7 +1028,6 @@ const MapSelectTools = class {
     this._selectedIds = [];
     this._distance = undefined;
     this._unit = undefined;
-    this._sketchGraphic = undefined;
     if (clearLabel) {
       this._selectionLabel = "";
       this._labelName.value = "";