@esri/solutions-components 5.1.0-next.105 → 5.1.0-next.107

package/dist/components/map-draw-tools/customElement.d.ts

@@ -49,20 +49,20 @@ export abstract class MapDrawTools extends LitElement {
   accessor graphics: Graphic[];
   /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
   accessor mapView: MapView | undefined;
-  /** esri/symbols/SimpleMarkerSymbol: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleMarkerSymbol.html */
+  /** SimpleMarkerSymbol: Point symbol used for sketching and updating point graphics */
   accessor pointSymbol: SimpleMarkerSymbol | undefined;
-  /** esri/symbols/SimpleFillSymbol: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html */
+  /** SimpleFillSymbol: Polygon symbol used for sketching and updating polygon graphics */
   accessor polygonSymbol: SimpleFillSymbol | undefined;
-  /** esri/symbols/SimpleLineSymbol: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleLineSymbol.html */
+  /** SimpleLineSymbol: Polyline symbol used for sketching and updating polyline graphics */
   accessor polylineSymbol: SimpleLineSymbol | undefined;
   /**
-   * boolean: when eanbled the user can redo the previous operation
+   * boolean: when enabled the user can redo the previous operation
    *
    * @default false
    */
   accessor redoEnabled: boolean;
   /**
-   * boolean: when eanbled the user can undo the previous operation
+   * boolean: when enabled the user can undo the previous operation
    *
    * @default false
    */

package/dist/components/map-draw-tools/customElement.js

@@ -1,39 +1,78 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as r } from "../../chunks/runtime.js";
+import { c as h } from "../../chunks/runtime.js";
 import { u as c } from "../../chunks/useT9n.js";
-import { css as l, html as n } from "lit";
-import { createRef as d, ref as p } from "lit-html/directives/ref.js";
-import { LitElement as g, createEvent as o, noShadowRoot as m, safeClassMap as h } from "@arcgis/lumina";
-import { useContextConsumer as f } from "@arcgis/lumina/context";
-import { p as y } from "../../chunks/publicNotificationContext.js";
-import _ from "@arcgis/core/layers/GraphicsLayer.js";
-import k from "@arcgis/core/widgets/Sketch/SketchViewModel.js";
-import w from "@arcgis/core/widgets/Sketch.js";
-const u = l`@layer{:host{display:block}.border{outline:1px solid var(--calcite-color-border-input)}.border-left{border-left:1px solid rgba(110,110,110,.3)}.border-left[dir=rtl]{border-right:1px solid rgba(110,110,110,.3)}.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:#fff;--esri-widget-padding-v: 12px;--esri-widget-padding-h: 15px;--esri-widget-padding: var(--esri-widget-padding-v) var(--esri-widget-padding-h)}.esri-sketch__panel{align-items:center;display:flex;flex-flow:row wrap;padding:0;justify-content:flex-start!important}.esri-sketch__section{align-items:center;display:flex;flex-flow:row wrap;padding:0 7px;margin:6px 0}.esri-responsive-toolbar__bar--horizontal{--calcite-action-group-border-color: var(--calcite-color-border-3) !important}}`;
-class b extends g {
+import { css as n, html as l } from "lit";
+import { createRef as p, ref as d } from "lit-html/directives/ref.js";
+import { LitElement as m, createEvent as a, noShadowRoot as g, safeClassMap as o } from "@arcgis/lumina";
+import { useContextConsumer as _ } from "@arcgis/lumina/context";
+import { p as u } from "../../chunks/publicNotificationContext.js";
+import y from "@arcgis/core/layers/GraphicsLayer.js";
+const f = n`@layer{:host{display:block}.border{outline:1px solid var(--calcite-color-border-input)}.border-left{border-left:1px solid rgba(110,110,110,.3)}.border-left[dir=rtl]{border-right:1px solid rgba(110,110,110,.3)}.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:#fff;--esri-widget-padding-v: 12px;--esri-widget-padding-h: 15px;--esri-widget-padding: var(--esri-widget-padding-v) var(--esri-widget-padding-h)}.esri-sketch__panel{align-items:center;display:flex;flex-flow:row wrap;padding:0;justify-content:flex-start!important}.esri-sketch__section{align-items:center;display:flex;flex-flow:row wrap;padding:0 7px;margin:6px 0}.esri-responsive-toolbar__bar--horizontal{--calcite-action-group-border-color: var(--calcite-color-border-3) !important}}`;
+class k extends m {
   constructor() {
-    super(...arguments), this.active = !1, this.drawMode = "SKETCH", this.editGraphicsEnabled = !0, this.graphics = [], this.redoEnabled = !1, this.undoEnabled = !1, this._translations = c({ name: "map-draw-tools", blocking: !0 }), this._pnContextConsumer = f({
-      context: y,
+    super(...arguments), this.active = !1, this.drawMode = "SKETCH", this.editGraphicsEnabled = !0, this.graphics = [], this.redoEnabled = !1, this.undoEnabled = !1, this._translations = c({ name: "map-draw-tools", blocking: !0 }), this._pnContextConsumer = _({
+      context: u,
       subscribe: !0
-    }), this._sketchElement = d(), this.selectionLoadingChange = o(), this.sketchGraphicsChange = o(), this.drawUndo = o(), this.drawRedo = o();
+    }), this._sketchComponent = p(), this._forceCreate = !1, this.selectionLoadingChange = a(), this.sketchGraphicsChange = a(), this.drawUndo = a(), this.drawRedo = a(), this._onSketchReady = async () => {
+      await new Promise((t) => setTimeout(t, 50)), this._sketchComponent.value?.getElementsByTagName("calcite-popover")[0]?.setAttribute("placement", "auto");
+    }, this._onSketchCreate = (e) => {
+      const t = e.detail;
+      t.state === "complete" && (this.graphics = t.graphic ? [t.graphic] : [], this.sketchGraphicsChange.emit({
+        graphics: this.graphics,
+        useOIDs: !1
+      }), this.drawMode === "REFINE" && (this._forceCreate = !0, this._sketchComponent.value?.create(t.tool))), t.state === "cancel" && this.drawMode === "REFINE" && this._forceCreate && (this._forceCreate = !this._forceCreate, this._sketchComponent.value?.create(t.tool));
+    }, this._onSketchUpdate = (e) => {
+      if (!this.editGraphicsEnabled) {
+        this._sketchComponent.value?.cancel();
+        return;
+      }
+      const t = e.detail, i = t.toolEventInfo?.type;
+      (t.state === "active" && i === "update" || i === "move" || i === "reshape-stop" || i === "move-stop") && (clearTimeout(this._debounceTimer), this._debounceTimer = window.setTimeout(() => {
+        this.graphics = t.graphics, this.sketchGraphicsChange.emit({
+          graphics: this.graphics,
+          useOIDs: !1
+        });
+      }, 1e3));
+    }, this._onSketchDelete = () => {
+      this.graphics = [], this.sketchGraphicsChange.emit({
+        graphics: this.graphics,
+        useOIDs: !1
+      });
+    }, this._onSketchUndo = (e) => {
+      if (this._sketchComponent.value?.state === "active")
+        return;
+      const t = e.detail;
+      this.graphics = t.graphics, this.sketchGraphicsChange.emit({
+        graphics: this.graphics,
+        useOIDs: !1
+      });
+    }, this._onSketchRedo = (e) => {
+      if (this._sketchComponent.value?.state === "active")
+        return;
+      const t = e.detail;
+      t.graphics[0].geometry && (this.graphics = t.graphics, this.sketchGraphicsChange.emit({
+        graphics: this.graphics,
+        useOIDs: !1
+      }));
+    };
   }
   static {
     this.properties = { active: 5, drawMode: 1, editGraphicsEnabled: 5, graphics: 0, mapView: 0, pointSymbol: 0, polylineSymbol: 0, polygonSymbol: 0, redoEnabled: 5, undoEnabled: 5, _translations: 16, _selectionMode: 16 };
   }
   static {
-    this.styles = u;
+    this.styles = f;
   }
   static {
-    this.shadowRootOptions = m;
+    this.shadowRootOptions = g;
   }
   willUpdate(e) {
     e.has("graphics") && this.graphicsWatchHandler(this.graphics, e.get("graphics")), e.has("mapView") && this.mapView && this.mapViewWatchHandler(this.mapView, e.get("mapView"));
   }
-  graphicsWatchHandler(e, i) {
-    e && e.length > 0 && JSON.stringify(e) !== JSON.stringify(i) && this._sketchGraphicsLayer && (this._updateGraphicsSymbols(e), this._sketchGraphicsLayer.removeAll(), this._sketchGraphicsLayer.addMany(e));
+  graphicsWatchHandler(e, t) {
+    e && e.length > 0 && JSON.stringify(e) !== JSON.stringify(t) && this._sketchGraphicsLayer && (this._updateGraphicsSymbols(e), this._sketchGraphicsLayer.removeAll(), this._sketchGraphicsLayer.addMany(e));
   }
-  mapViewWatchHandler(e, i) {
-    e && e !== i && this._init();
+  mapViewWatchHandler(e, t) {
+    e && e !== t && this._init();
   }
   async clear() {
     this._clearSketch();
@@ -45,101 +84,34 @@ class b extends g {
     this._init();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._sketchWidget?.cancel(), this._clearSketch();
+    super.disconnectedCallback(), this._sketchComponent.value?.cancel(), this._clearSketch();
   }
   render() {
-    const e = this.drawMode === "SKETCH" ? "border" : "border esri-widget esri-sketch__panel", i = this.drawMode === "SKETCH" ? "display-none" : "esri-widget esri-sketch__panel border-left esri-sketch__section";
-    return n`<div class=${h(e)}><div ${p(this._sketchElement)}></div><div class=${h(i)}><calcite-action appearance=solid .disabled=${!this.undoEnabled} icon=undo @click=${() => this._undo()} scale=s .text=${this._translations.undo}></calcite-action><calcite-action appearance=solid .disabled=${!this.redoEnabled} icon=redo @click=${() => this._redo()} scale=s .text=${this._translations.redo}></calcite-action></div></div>`;
+    const e = this.drawMode === "SKETCH" ? "border" : "border esri-widget esri-sketch__panel", t = this.drawMode === "SKETCH" ? "display-none" : "esri-widget esri-sketch__panel border-left esri-sketch__section";
+    return l`<div class=${o(e)}><arcgis-sketch @arcgisReady=${this._onSketchReady} @arcgisCreate=${this._onSketchCreate} @arcgisUpdate=${this._onSketchUpdate} @arcgisDelete=${this._onSketchDelete} @arcgisUndo=${this._onSketchUndo} @arcgisRedo=${this._onSketchRedo} ${d(this._sketchComponent)}></arcgis-sketch><div class=${o(t)}><calcite-action .disabled=${!this.undoEnabled} icon=undo @click=${() => this._undo()} scale=s .text=${this._translations.undo}></calcite-action><calcite-action .disabled=${!this.redoEnabled} icon=redo @click=${() => this._redo()} scale=s .text=${this._translations.redo}></calcite-action></div></div>`;
   }
   _init() {
-    this.mapView && this._sketchElement.value && (this._initGraphicsLayer(), this._initSketch());
+    this.mapView && (this._initGraphicsLayer(), this._initSketch());
   }
   _initGraphicsLayer() {
-    const e = this._pnContextConsumer.value, i = this._translations.sketchLayer;
+    const e = this._pnContextConsumer.value, t = this._translations.sketchLayer;
     if (this.mapView) {
-      const s = this.mapView.map.layers.findIndex((t) => t.title === i);
-      s > -1 ? this._sketchGraphicsLayer = this.mapView.map.layers.getItemAt(s) : (this._sketchGraphicsLayer = new _({ title: i, listMode: "hide" }), this._sketchGraphicsLayer && (e.managedLayers[i] = "sketch", this.mapView.map.layers.add(this._sketchGraphicsLayer))), this.graphics && this.graphics.length > 0 && this._sketchGraphicsLayer && this._sketchGraphicsLayer.addMany(this.graphics);
+      const i = this.mapView.map.layers.findIndex((s) => s.title === t);
+      i > -1 ? this._sketchGraphicsLayer = this.mapView.map.layers.getItemAt(i) : (this._sketchGraphicsLayer = new y({ title: t, listMode: "hide" }), this._sketchGraphicsLayer && (e.managedLayers[t] = "sketch", this.mapView.map.layers.add(this._sketchGraphicsLayer))), this.graphics && this.graphics.length > 0 && this._sketchGraphicsLayer && this._sketchGraphicsLayer.addMany(this.graphics);
     }
   }
   _initSketch() {
-    const e = {
-      layer: this._sketchGraphicsLayer,
-      view: this.mapView,
-      defaultCreateOptions: {
-        mode: "hybrid"
-      },
-      defaultUpdateOptions: {
-        preserveAspectRatio: !1,
-        enableScaling: !1,
-        enableRotation: !1,
-        tool: "reshape",
-        toggleToolOnClick: !1
-      }
-    };
-    if (this._sketchWidget = new w({
-      ...e,
-      container: this._sketchElement.value,
-      creationMode: "single",
-      toolbarKind: "docked",
-      useLegacyCreateTools: !0,
-      visibleElements: {
-        duplicateButton: !1,
-        selectionTools: {
-          "lasso-selection": !1,
-          "rectangle-selection": !1
-        },
-        createTools: {
-          circle: !1
-        },
-        undoRedoMenu: !1,
-        settingsMenu: this.drawMode === "SKETCH"
-      }
-    }), this._sketchWidget && this._sketchWidget.viewModel) {
-      this._sketchViewModel = new k({
-        ...e
-      }), this.polylineSymbol && (this._sketchWidget.viewModel.polylineSymbol = this.polylineSymbol), this.pointSymbol && (this._sketchWidget.viewModel.pointSymbol = this.pointSymbol), this.polygonSymbol && (this._sketchWidget.viewModel.polygonSymbol = this.polygonSymbol), this._sketchWidget?.when(async () => {
-        await new Promise((a) => setTimeout(a, 50)), this._sketchElement.value?.getElementsByTagName("calcite-popover")[0]?.setAttribute("placement", "auto");
-      });
-      let i = !1;
-      this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("create", (t) => {
-        t.state === "complete" && (this.graphics = t.graphic ? [t.graphic] : [], this.sketchGraphicsChange.emit({
-          graphics: this.graphics,
-          useOIDs: !1
-        }), this.drawMode === "REFINE" && (i = !0, this._sketchWidget?.viewModel.create(t.tool))), t.state === "cancel" && this.drawMode === "REFINE" && i && (i = !i, this._sketchWidget?.viewModel.create(t.tool));
-      }));
-      let s;
-      this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("update", (t) => {
-        if (!this.editGraphicsEnabled)
-          this._sketchWidget?.viewModel.cancel(), this._sketchViewModel?.cancel();
-        else {
-          const a = t?.toolEventInfo?.type;
-          (a === "move" || a === "reshape-stop" || a === "move-stop") && (clearTimeout(s), s = window.setTimeout(async () => {
-            this.graphics = t.graphics, this.sketchGraphicsChange.emit({
-              graphics: this.graphics,
-              useOIDs: !1
-            });
-          }, 1e3));
-        }
-      })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("delete", () => {
-        this.graphics = [], this.sketchGraphicsChange.emit({
-          graphics: this.graphics,
-          useOIDs: !1
-        });
-      })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("undo", (t) => {
-        this.graphics = t.graphics, this.sketchGraphicsChange.emit({
-          graphics: this.graphics,
-          useOIDs: !1
-        });
-      })), this._sketchWidget.viewModel.addHandles(this._sketchWidget.on("redo", (t) => {
-        this.graphics = t.graphics, this.sketchGraphicsChange.emit({
-          graphics: this.graphics,
-          useOIDs: !1
-        });
-      }));
-    }
+    const e = this._sketchComponent.value;
+    e && (e.view = this.mapView, e.layer = this._sketchGraphicsLayer, e.creationMode = "single", e.toolbarKind = "docked", e.defaultCreateOptions = { mode: "hybrid" }, e.defaultUpdateOptions = {
+      preserveAspectRatio: !1,
+      enableScaling: !1,
+      enableRotation: !1,
+      tool: "reshape",
+      toggleToolOnClick: !1
+    }, e.hideDuplicateButton = !0, e.hideSelectionToolsLassoSelection = !0, e.hideSelectionToolsRectangleSelection = !0, e.hideCreateToolsCircle = !0, e.hideUndoRedoMenu = !0, e.hideSettingsMenu = this.drawMode !== "SKETCH", this.pointSymbol ? e.pointSymbol = this.pointSymbol : this.polylineSymbol ? e.polylineSymbol = this.polylineSymbol : this.polygonSymbol && (e.polygonSymbol = this.polygonSymbol));
   }
   _clearSketch() {
-    this._sketchWidget?.viewModel.cancel(), this.graphics = [], this._sketchGraphicsLayer?.removeAll();
+    this._sketchComponent.value?.cancel(), this.graphics = [], this._sketchGraphicsLayer?.removeAll();
   }
   _undo() {
     this.drawUndo.emit();
@@ -149,21 +121,15 @@ class b extends g {
   }
   _updateGraphics() {
     setTimeout(() => {
-      this.graphics.length === 1 && this._sketchWidget && this._sketchWidget.update(this.graphics, {
-        tool: "reshape",
-        enableRotation: !1,
-        enableScaling: !1,
-        preserveAspectRatio: !1,
-        toggleToolOnClick: !1
-      });
+      this.graphics.length === 1 && this.graphics[0].geometry && this._sketchComponent.value && this._sketchComponent.value.triggerUpdate(this.graphics);
     }, 100);
   }
   _updateGraphicsSymbols(e) {
-    const s = e[0]?.geometry?.type, t = s === "point" ? this.pointSymbol : s === "polyline" ? this.polylineSymbol : s === "polygon" ? this.polygonSymbol : void 0;
-    t && e.forEach((a) => a.symbol = t);
+    const i = e[0]?.geometry?.type, s = i === "point" ? this.pointSymbol : i === "polyline" ? this.polylineSymbol : i === "polygon" ? this.polygonSymbol : void 0;
+    s && e.forEach((r) => r.symbol = s);
   }
 }
-r("map-draw-tools", b);
+h("map-draw-tools", k);
 export {
-  b as MapDrawTools
+  k as MapDrawTools
 };

package/dist/components/map-draw-tools/index.js

@@ -1,2 +1,3 @@
+import "@arcgis/map-components/components/arcgis-sketch";
 import "@esri/calcite-components/components/calcite-action";
 export * from "./customElement.js";

package/dist/components/map-layer-picker/customElement.js

@@ -1,7 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as m } from "../../chunks/runtime.js";
-import { g as y, d as b, f as _ } from "../../chunks/mapViewUtils.js";
-import { u as f } from "../../chunks/useT9n.js";
+import { g as y, d as b, f } from "../../chunks/mapViewUtils.js";
+import { u as _ } from "../../chunks/useT9n.js";
 import { css as u, html as i, nothing as l } from "lit";
 import { createRef as o, ref as d } from "lit-html/directives/ref.js";
 import { LitElement as g, createEvent as n, noShadowRoot as L, safeStyleMap as c, safeClassMap as p } from "@arcgis/lumina";
@@ -10,7 +10,7 @@ import { p as v } from "../../chunks/publicNotificationContext.js";
 const I = u`@layer{:host{display:block}.map-layer-picker-container{width:100%;align-items:center}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}.disabled{cursor:default!important;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.no-bottom-margin{--calcite-label-margin-bottom: 0px}.layer-picker-label-container{align-items:center;display:inline-flex;height:100%;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.cursor-default{cursor:default}.popover-list{overflow:auto;width:250px}}`;
 class $ extends g {
   constructor() {
-    super(), this.appearance = "transparent", this.configLayerOrderDefined = !1, this.defaultLayerId = "", this.disabled = !1, this.display = "inline-block", this.enabledLayerIds = [], this.isMobile = !1, this.showOnlyUpdatableLayers = !1, this.selectedIds = [], this.scale = "m", this.showTables = !1, this.showTablesDisabled = !1, this.showSingleLayerAsLabel = !1, this.type = "select", this.showLayersListInPopover = !1, this.referenceElement = "", this.force = !1, this._hasMultipleLayers = !0, this._hasValidLayers = !0, this._isDropdownOpen = !1, this.ids = [], this.selectedName = "", this._translations = f({ name: "map-layer-picker", blocking: !0 }), this.defaultLayerHonored = !1, this._layerSelectElement = o(), this._layerComboboxElement = o(), this._pnContextConsumer = w({
+    super(), this.appearance = "transparent", this.configLayerOrderDefined = !1, this.defaultLayerId = "", this.disabled = !1, this.display = "inline-block", this.enabledLayerIds = [], this.isMobile = !1, this.showOnlyUpdatableLayers = !1, this.selectedIds = [], this.scale = "m", this.showTables = !1, this.showTablesDisabled = !1, this.showSingleLayerAsLabel = !1, this.type = "select", this.showLayersListInPopover = !1, this.referenceElement = "", this.force = !1, this._hasMultipleLayers = !0, this._hasValidLayers = !0, this._isDropdownOpen = !1, this.ids = [], this.selectedName = "", this._translations = _({ name: "map-layer-picker", blocking: !0 }), this.defaultLayerHonored = !1, this._layerSelectElement = o(), this._layerComboboxElement = o(), this._pnContextConsumer = w({
       context: v,
       subscribe: !0
     }), this._skipEditCheck = !1, this._popover = o(), this.beforeLayerSelectionChange = n(), this.idsFound = n(), this.noLayersFound = n(), this.layerSelectionChange = n(), this.listenOn(window, "mapChanged", this.mapChanged);
@@ -93,7 +93,7 @@ class $ extends g {
     return i`<calcite-dropdown class="layer-picker-dropdown" @calciteDropdownBeforeClose=${() => this._isDropdownOpen = !1} @calciteDropdownBeforeOpen=${() => this._isDropdownOpen = !0}>${this.isMobile ? this._getDropdownButton() : this._getActionDropdownButton(e)}<calcite-dropdown-group selection-mode=single>${this._getMapLayerOptions()}</calcite-dropdown-group></calcite-dropdown>`;
   }
   _getActionDropdownButton(e) {
-    return i`<calcite-action appearance=solid id=${e ?? l} slot=trigger text>${this._getDropdownButton()}</calcite-action>`;
+    return i`<calcite-action id=${e ?? l} slot=trigger text>${this._getDropdownButton()}</calcite-action>`;
   }
   _getDropdownButton() {
     const e = this._getItemTypeIcon(), t = this.isMobile ? "" : "max-width-350", s = this.isMobile ? "trigger" : "", a = this._isDropdownOpen ? "chevron-up" : "chevron-down";
@@ -107,10 +107,10 @@ class $ extends g {
     return this.ids.reduce((e, t) => (this._validLayer(t) ? e.push(this._getItem(t, "layer")) : this._validTable(t) && e.push(this._getItem(t, "table")), e), []);
   }
   _getItem(e, t) {
-    const s = t === "layer" && this._layerNameHash ? this._layerNameHash[e] : this._tableNameHash ? this._tableNameHash[e] : void 0, a = this.showOnlyUpdatableLayers ? s && !s.supportsUpdate : !1, h = s?.name || "", r = this.selectedIds.indexOf(e) > -1;
-    return this.type === "combobox" ? i`<calcite-combobox-item .disabled=${a} .heading=${h} .selected=${r} .value=${e}></calcite-combobox-item>` : this.type === "select" ? i`<calcite-option .disabled=${a} .label=${h} .selected=${r} .value=${e}></calcite-option>` : this.force && r || !this.force ? i`<calcite-dropdown-group class=${p(a ? "disabled" : "")} id=${h ?? l} .selectionMode=${a ? "none" : "single"}><calcite-dropdown-item .disabled=${!!(t === "table" && this.showTablesDisabled)} .iconStart=${t} @click=${a ? void 0 : () => {
+    const s = t === "layer" && this._layerNameHash ? this._layerNameHash[e] : this._tableNameHash ? this._tableNameHash[e] : void 0, a = this.showOnlyUpdatableLayers ? s && !s.supportsUpdate : !1, r = s?.name || "", h = this.selectedIds.indexOf(e) > -1;
+    return this.type === "combobox" ? i`<calcite-combobox-item .disabled=${a} .heading=${r} .selected=${h} .value=${e}></calcite-combobox-item>` : this.type === "select" ? i`<calcite-option .disabled=${a} .label=${r} .selected=${h} .value=${e}></calcite-option>` : this.force && h || !this.force ? i`<calcite-dropdown-group class=${p(a ? "disabled" : "")} id=${r ?? l} .selectionMode=${a ? "none" : "single"}><calcite-dropdown-item .disabled=${!!(t === "table" && this.showTablesDisabled)} .iconStart=${t} @click=${a ? void 0 : () => {
       this._setSelectedLayer(e);
-    }} .selected=${r}>${h}</calcite-dropdown-item></calcite-dropdown-group>` : null;
+    }} .selected=${h}>${r}</calcite-dropdown-item></calcite-dropdown-group>` : null;
   }
   async _setSelectedLayer(e) {
     if (e !== this.selectedIds[0]) {
@@ -151,7 +151,7 @@ class $ extends g {
     return Object.keys(e).filter((t) => e[t].supportsUpdate);
   }
   async _initLayerTableHash() {
-    this._layerNameHash = this.mapView && await b(this.mapView, this.showOnlyUpdatableLayers), this._tableNameHash = this.showTables && this.mapView ? await _(this.mapView, this.showOnlyUpdatableLayers) : {};
+    this._layerNameHash = this.mapView && await b(this.mapView, this.showOnlyUpdatableLayers), this._tableNameHash = this.showTables && this.mapView ? await f(this.mapView, this.showOnlyUpdatableLayers) : {};
   }
   _validLayer(e) {
     const t = this._pnContextConsumer.value, s = this._layerNameHash && this._layerNameHash[e]?.name;
@@ -165,7 +165,7 @@ class $ extends g {
     if (this._layerElement.value) {
       const t = e || (Array.isArray(this._layerElement.value.value) ? this._layerElement.value.value : [this._layerElement.value.value]);
       if (JSON.stringify(t) !== JSON.stringify([""])) {
-        if (!this._skipEditCheck && this.beforeLayerSelectionChange.emit({
+        if (JSON.stringify(t) === JSON.stringify(this.selectedIds) || !this._skipEditCheck && this.beforeLayerSelectionChange.emit({
           currentIds: this.selectedIds,
           newIds: t,
           ref: this.el

package/dist/components/map-select-tools/customElement.d.ts

@@ -1,9 +1,9 @@
 /// <reference path="../../index.d.ts" />
-import type Geometry from "@arcgis/core/geometry/Geometry.js";
-import type FeatureLayerView from "@arcgis/core/views/layers/FeatureLayerView.js";
 import type MapView from "@arcgis/core/views/MapView.js";
 import type SimpleFillSymbol from "@arcgis/core/symbols/SimpleFillSymbol.js";
 import type SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol.js";
+import type Geometry from "@arcgis/core/geometry/Geometry.js";
+import type FeatureLayerView from "@arcgis/core/views/layers/FeatureLayerView.js";
 import type SimpleLineSymbol from "@arcgis/core/symbols/SimpleLineSymbol.js";
 import type { DistanceUnit, ISearchConfiguration, ISelectionSet } from "../../utils/interfaces.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
@@ -96,7 +96,7 @@ export abstract class MapSelectTools extends LitElement {
    * @default true
    */
   accessor enableSketchTools: boolean;
-  /** esri/geometry: https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry.html */
+  /** Geometry[]: List of geometries */
   accessor geometries: Geometry[];
   /**
    * string: Header label class
@@ -110,9 +110,9 @@ export abstract class MapSelectTools extends LitElement {
    * @default false
    */
   accessor isUpdate: boolean;
-  /** esri/views/layers/FeatureLayerView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-layers-FeatureLayerView.html */
+  /** FeatureLayerView[]: List of layer views */
   accessor layerViews: FeatureLayerView[];
-  /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
+  /** MapView: The view of the map */
   accessor mapView: MapView | undefined;
   /**
    * string: The value to show for no results
@@ -136,7 +136,7 @@ export abstract class MapSelectTools extends LitElement {
   accessor selectionLayerIds: string[];
   /** utils/interfaces/ISelectionSet: Used to store key details about any selections that have been made. */
   accessor selectionSet: ISelectionSet | undefined;
-  /** esri/views/layers/FeatureLayerView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-layers-FeatureLayerView.html */
+  /** FeatureLayerView: The view of the selected layer */
   accessor selectLayerView: FeatureLayerView | undefined;
   /** esri/symbols/SimpleLineSymbol | JSON representation : https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleLineSymbol.html */
   accessor sketchLineSymbol: SimpleLineSymbol | undefined;
@@ -151,6 +151,13 @@ export abstract class MapSelectTools extends LitElement {
    */
   accessor useLayerFeaturesEnabled: boolean;
   /**
+   * //--------------------------------------------------------------------------
+   * //
+   * //  Methods (public)
+   * //
+   * //--------------------------------------------------------------------------
+   *
+   * /**
    * Clear any selection results
    *
    * @returns Promise when the results have been cleared

package/dist/components/map-select-tools/customElement.js

@@ -2,36 +2,35 @@
 import { c as w } from "../../chunks/runtime.js";
 import { e as L, h as S, c as m } from "../../chunks/mapViewUtils.js";
 import { c as v, g as C, d as V } from "../../chunks/queryUtils.js";
-import { u as k } from "../../chunks/useT9n.js";
-import { css as G, html as c } from "lit";
+import { u as $ } from "../../chunks/useT9n.js";
+import { css as k, html as c } from "lit";
 import { createRef as d, ref as u } from "lit-html/directives/ref.js";
-import { LitElement as T, createEvent as $, noShadowRoot as I, safeClassMap as f, safeStyleMap as O } from "@arcgis/lumina";
+import { LitElement as I, createEvent as G, noShadowRoot as T, safeClassMap as f, safeStyleMap as O } from "@arcgis/lumina";
 import { useContextConsumer as E } from "@arcgis/lumina/context";
 import { p as F } from "../../chunks/publicNotificationContext.js";
 import D from "@arcgis/core/request.js";
 import x from "@arcgis/core/layers/FeatureLayer.js";
 import b from "@arcgis/core/Graphic.js";
-import N from "@arcgis/core/layers/GraphicsLayer.js";
-import R from "@arcgis/core/widgets/Search.js";
-const W = G`@layer{:host{display:block}.div-visible{display:inherit}.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-color-border-input)}.w-100{width:100%}.search-distance{display:flex;padding-top:1rem}.font-bold{font:bold}.border-bottom{border-bottom:1px solid var(--calcite-color-border-2)}.tooltip-container{display:flex}.padding-start-1-2{padding-inline-start:.5rem}.padding-end-1-2{padding-inline-end:.5rem}.icon{--calcite-color-icon-color: var(--calcite-color-brand)}.tooltip-message{padding:5px 8px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2);max-width:400px}}`;
-class U extends T {
+import R from "@arcgis/core/layers/GraphicsLayer.js";
+const N = k`@layer{:host{display:block}.div-visible{display:inherit}.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-color-border-input)}.w-100{width:100%}.search-distance{display:flex;padding-top:1rem}.font-bold{font:bold}.border-bottom{border-bottom:1px solid var(--calcite-color-border-2)}.tooltip-container{display:flex}.padding-start-1-2{padding-inline-start:.5rem}.padding-end-1-2{padding-inline-end:.5rem}.icon{--calcite-color-icon-color: var(--calcite-color-brand)}.tooltip-message{padding:5px 8px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2);max-width:400px}}`;
+class U extends I {
   constructor() {
-    super(), this.bufferColor = [227, 139, 79, 0.8], this.bufferOutlineColor = [255, 255, 255], this.customLabelEnabled = !1, this.enabledLayerIds = [], this.enableLayerFeatures = !0, this.enableLayerFeaturesOnLoad = !1, this.enableSearchDistance = !0, this.enableSearchDistanceOnLoad = !1, this.enableSketchTools = !0, this.geometries = [], this.headerLabelClass = "font-bold", this.isUpdate = !1, this.layerViews = [], this.noResultText = "", this.selectionLayerIds = [], this.searchDistanceEnabled = !1, this.useLayerFeaturesEnabled = !1, this._numSelected = 0, this._searchTerm = "", this._selectionLoading = !1, this._translations = k({ name: "map-select-tools", blocking: !0 }), this._bufferTools = d(), this._drawTools = d(), this._labelName = d(), this._pnContextConsumer = E({
+    super(), this.bufferColor = [227, 139, 79, 0.8], this.bufferOutlineColor = [255, 255, 255], this.customLabelEnabled = !1, this.enabledLayerIds = [], this.enableLayerFeatures = !0, this.enableLayerFeaturesOnLoad = !1, this.enableSearchDistance = !0, this.enableSearchDistanceOnLoad = !1, this.enableSketchTools = !0, this.geometries = [], this.headerLabelClass = "font-bold", this.isUpdate = !1, this.layerViews = [], this.noResultText = "", this.selectionLayerIds = [], this.searchDistanceEnabled = !1, this.useLayerFeaturesEnabled = !1, this._numSelected = 0, this._searchTerm = "", this._selectionLoading = !1, this._translations = $({ name: "map-select-tools", blocking: !0 }), this._bufferTools = d(), this._drawTools = d(), this._labelName = d(), this._pnContextConsumer = E({
       context: F,
       subscribe: !0
-    }), this._searchElement = d(), this._selectedIds = [], this._selectionLabel = "", this._graphics = [], this._featuresCollection = {}, this.selectionSetChange = $(), this.listenOn(window, "searchConfigurationChange", this.searchConfigurationChangeChanged), this.listenOn(window, "distanceChanged", this.distanceChanged), this.listenOn(window, "unitChanged", this.unitChanged);
+    }), this._searchElement = d(), this._selectedIds = [], this._selectionLabel = "", this._graphics = [], this._featuresCollection = {}, this.selectionSetChange = G(), this.listenOn(window, "searchConfigurationChange", this.searchConfigurationChangeChanged), this.listenOn(window, "distanceChanged", this.distanceChanged), this.listenOn(window, "unitChanged", this.unitChanged);
   }
   static {
     this.properties = { bufferColor: 1, bufferOutlineColor: 1, customLabelEnabled: 5, enabledLayerIds: 0, enableLayerFeatures: 5, enableLayerFeaturesOnLoad: 5, enableSearchDistance: 5, enableSearchDistanceOnLoad: 5, enableSketchTools: 5, defaultBufferDistance: 9, defaultBufferUnit: 1, geometries: 0, headerLabelClass: 1, isUpdate: 5, layerViews: 0, mapView: 0, noResultText: 1, searchConfiguration: 0, selectionSet: 0, selectionLayerIds: 0, selectLayerView: 0, sketchLineSymbol: 0, sketchPointSymbol: 0, sketchPolygonSymbol: 0, searchDistanceEnabled: 5, useLayerFeaturesEnabled: 5, _numSelected: 16, _searchTerm: 16, _selectionLoading: 16, _translations: 16 };
   }
   static {
-    this.styles = W;
+    this.styles = N;
   }
   static {
-    this.shadowRootOptions = I;
+    this.shadowRootOptions = T;
   }
   willUpdate(e) {
-    e.has("geometries") && (this.hasUpdated || this.geometries?.length > 0) && this.watchGeometriesHandler(this.geometries, e.get("geometries")), e.has("mapView") && this.mapView && this.mapViewWatchHandler(this.mapView, e.get("mapView")), e.has("searchConfiguration") && this.searchConfiguration && this.watchSearchConfigurationHandler(this.searchConfiguration, e.get("searchConfiguration")), e.has("defaultBufferUnit") && this.hasUpdated && (this.selectionSet && (this.selectionSet.unit = this.defaultBufferUnit), this._bufferTools.value && this.defaultBufferUnit !== void 0 && (this._bufferTools.value.unit = this.defaultBufferUnit), this._updateLabel()), e.has("defaultBufferDistance") && this.hasUpdated && (this.selectionSet && (this.selectionSet.distance = this.defaultBufferDistance), this._updateLabel());
+    e.has("geometries") && (this.hasUpdated || this.geometries?.length > 0) && this.watchGeometriesHandler(this.geometries, e.get("geometries")), e.has("mapView") && this.mapView && this.mapViewWatchHandler(this.mapView, e.get("mapView")), e.has("defaultBufferUnit") && this.hasUpdated && (this.selectionSet && (this.selectionSet.unit = this.defaultBufferUnit), this._bufferTools.value && this.defaultBufferUnit !== void 0 && (this._bufferTools.value.unit = this.defaultBufferUnit), this._updateLabel()), e.has("defaultBufferDistance") && this.hasUpdated && (this.selectionSet && (this.selectionSet.distance = this.defaultBufferDistance), this._updateLabel());
   }
   async watchGeometriesHandler(e, t) {
     if (e !== t && e.length > 0)
@@ -40,9 +39,6 @@ class U extends T {
   async mapViewWatchHandler(e, t) {
     e && e !== t && await this._init();
   }
-  async watchSearchConfigurationHandler(e, t) {
-    JSON.stringify(e) !== JSON.stringify(t) && await this._initSearchWidget();
-  }
   async clearSelection() {
     return this._clearResults(!0, !0);
   }
@@ -80,9 +76,13 @@ class U extends T {
     await this._init();
   }
   render() {
-    const e = this.enableSketchTools ? "" : "display-none", t = this.enableSketchTools ? "padding-top-1" : "";
-    return c`${this._getMapLayerPicker()}<div class="border-bottom"></div><div class="padding-top-sides-1"><div class="search-widget" ${u(this._searchElement)}></div><div class=${f(t)}><map-draw-tools active class=${f(e)} .editGraphicsEnabled=${!this.useLayerFeaturesEnabled} .graphics=${this._graphics} .mapView=${this.mapView} @sketchGraphicsChange=${(s) => {
-      this._sketchGraphicsChanged(s);
+    const e = this.enableSketchTools ? "" : "display-none", t = this.enableSketchTools ? "padding-top-1" : "", s = this.searchConfiguration && this.mapView ? this._getSearchConfig(this.searchConfiguration, this.mapView) : void 0, i = this.searchConfiguration?.allPlaceholder && this.searchConfiguration.allPlaceholder.toLowerCase() !== "find address or place" ? this.searchConfiguration.allPlaceholder : this._translations.placeholder;
+    return c`${this._getMapLayerPicker()}<div class="border-bottom"></div><div class="padding-top-sides-1"><arcgis-search class="search-widget" .activeSourceIndex=${s?.activeSourceIndex} .allPlaceholder=${i} .includeDefaultSourcesDisabled=${s?.includeDefaultSources === !1} @arcgisSearchClear=${() => {
+      this._handleSearchClear();
+    }} @arcgisSelectResult=${(a) => {
+      this._handleSearchSelectResult(a);
+    }} popup-disabled result-graphic-disabled .searchAllDisabled=${s?.searchAllEnabled === !1} .searchTerm=${this._searchTerm} .sources=${s?.sources} .view=${this.mapView} ${u(this._searchElement)}></arcgis-search><div class=${f(t)}><map-draw-tools active class=${f(e)} .editGraphicsEnabled=${!this.useLayerFeaturesEnabled} .graphics=${this._graphics} .mapView=${this.mapView} @sketchGraphicsChange=${(a) => {
+      this._sketchGraphicsChanged(a);
     }} .pointSymbol=${this.sketchPointSymbol} .polygonSymbol=${this.sketchPolygonSymbol} .polylineSymbol=${this.sketchLineSymbol} ${u(this._drawTools)}></map-draw-tools></div>${this.enableSearchDistance ? this._getBufferOptions() : void 0}${this.enableLayerFeatures ? this._getUseLayerFeaturesOptions() : void 0}${this._getNumSelected()}</div><div class="border-bottom"></div>${this._getNameInput()}`;
   }
   _getBufferOptions() {
@@ -118,7 +118,7 @@ class U extends T {
     }} .selectedIds=${this.selectLayerView ? [this.selectLayerView.layer.id] : this.selectionSet && e !== void 0 ? [e] : []}></map-layer-picker></calcite-label></div>`;
   }
   async _init() {
-    this._initGraphicsLayer(), await this._initSelectionSet(), await this._initSearchWidget();
+    this._initGraphicsLayer(), await this._initSelectionSet();
   }
   async _initSelectionSet() {
     this.selectionSet && (this._searchTerm = this.selectionSet.searchResult?.name, this._searchResult = this.selectionSet.searchResult, this._selectedIds = this.selectionSet.selectedIds, this._skipGeomOIDs = this.selectionSet.skipGeomOIDs || [], this.searchDistanceEnabled = this.selectionSet.searchDistanceEnabled, this.useLayerFeaturesEnabled = this.selectionSet.useLayerFeaturesEnabled, this._distance = this.selectionSet.searchDistanceEnabled ? this.selectionSet.distance : 0, this._unit = this.selectionSet.unit, this._workflowType = this.selectionSet.workflowType, this.selectLayerView = this.selectionSet.layerView, this._sketchGraphic = this.selectionSet.sketchGraphic, this.geometries = [...this.selectionSet?.geometries || []], this._graphics = this.geometries.reduce((e, t) => {
@@ -129,23 +129,12 @@ class U extends T {
       })), e;
     }, []), this._selectionLabel = this.selectionSet?.label, this.useLayerFeaturesEnabled || await this._drawTools.value?.updateGraphics(), this.selectionSet.layerView && this.mapView && await L(this.selectionSet.selectedIds, this.selectionSet.layerView, this.mapView, !1));
   }
-  async _initSearchWidget() {
-    if (this.mapView && this._searchElement.value) {
-      const e = this.searchConfiguration && this._getSearchConfig(this.searchConfiguration, this.mapView), t = {
-        view: this.mapView,
-        container: this._searchElement.value,
-        searchTerm: this._searchTerm,
-        ...e
-      };
-      this._searchWidget ? (this._searchWidget.view = this.mapView, this._searchWidget.searchTerm = this._searchTerm) : this._searchWidget = new R(t), this._searchWidget && (this._searchWidget.popupEnabled = !1, this._searchWidget.resultGraphicEnabled = !1, this._searchWidget.viewModel.addHandles(this._searchWidget.on("search-clear", () => {
-        const s = this._searchClearLabel();
-        this._searchResult?.name && this._clearResults(!1, s);
-      })), this._searchWidget.viewModel.addHandles(this._searchWidget.on("select-result", (s) => {
-        this._selectResult(s.result);
-      })), await this._searchWidget.when(() => {
-        this._searchWidget && (this._searchWidget.allPlaceholder = this.searchConfiguration?.allPlaceholder && this.searchConfiguration.allPlaceholder.toLowerCase() !== "find address or place" ? this.searchConfiguration.allPlaceholder : this._translations.placeholder);
-      }));
-    }
+  async _handleSearchClear() {
+    const e = this._searchClearLabel();
+    this._searchResult?.name && await this._clearResults(!1, e);
+  }
+  async _handleSearchSelectResult(e) {
+    await this._selectResult(e.detail.result);
   }
   async _selectResult(e) {
     if (e) {
@@ -155,10 +144,10 @@ class U extends T {
       s?.sourceJSON?.isView && s.url && (l = await this._getViewSourceUrl(s.url));
       let r;
       i?.sourceJSON?.isView && i.url && (r = await this._getViewSourceUrl(i.url));
-      const n = s?.url?.toLowerCase(), h = l?.toLowerCase(), o = i?.url?.toLowerCase(), p = r?.toLowerCase(), _ = n && o && (n === o || n === p || h === o || h === p) && !Number.isNaN(a), g = _ ? [a] : void 0;
+      const h = s?.url?.toLowerCase(), o = l?.toLowerCase(), n = i?.url?.toLowerCase(), p = r?.toLowerCase(), y = h && n && (h === n || h === p || o === n || o === p) && !Number.isNaN(a), g = y ? [a] : void 0;
       this._workflowType = "SEARCH", this._updateLabel();
-      const y = [e.feature];
-      this._updateSelection(y, _, g), this._drawTools.value && (this._drawTools.value.graphics = y), this._searchWidget?.resultGraphic && (this._searchWidget.resultGraphic.visible = !1);
+      const _ = [e.feature];
+      this._updateSelection(_, y, g), this._drawTools.value && (this._drawTools.value.graphics = _);
     } else {
       const t = this._searchClearLabel();
       this._clearResults(!1, t);
@@ -189,8 +178,8 @@ class U extends T {
       includeDefaultSources: !1
     }, s.forEach((i) => {
       if (i.hasOwnProperty("layer")) {
-        const l = i, r = l.layer?.id, n = r ? t.map?.findLayerById(r) : null, h = l?.layer?.url;
-        n && l ? l.layer = n : h && (l.layer = new x(h));
+        const l = i, r = l.layer?.id, h = r ? t.map?.findLayerById(r) : null, o = l?.layer?.url;
+        h && l ? l.layer = h : o && (l.layer = new x(o));
       }
     }), s?.forEach((i) => {
       if (i.hasOwnProperty("locator")) {
@@ -212,7 +201,7 @@ class U extends T {
       const s = this.mapView.map.layers.findIndex((i) => i.title === t);
       if (s > -1)
         this._bufferGraphicsLayer = this.mapView.map.layers.getItemAt(s);
-      else if (this._bufferGraphicsLayer = new N({ title: t, listMode: "hide" }), this._bufferGraphicsLayer) {
+      else if (this._bufferGraphicsLayer = new R({ title: t, listMode: "hide" }), this._bufferGraphicsLayer) {
         e.managedLayers[t] = "buffer";
         const i = this.mapView.map.layers.findIndex((a) => a.title === this._translations.sketchLayer);
         i > -1 ? this.mapView.map.layers.add(this._bufferGraphicsLayer, i) : this.mapView.map.layers.add(this._bufferGraphicsLayer);
@@ -261,7 +250,7 @@ class U extends T {
         geometry: this._bufferGeometry,
         symbol: i
       });
-      this._bufferGraphicsLayer && a && this.mapView && (this._bufferGraphicsLayer.removeAll(), this._bufferGraphicsLayer.add(a), await this._selectFeatures([this._bufferGeometry]), a.geometry?.extent && await this.mapView.goTo(a.geometry.extent)), s = t, t = 0;
+      this._bufferGraphicsLayer && this.mapView && (this._bufferGraphicsLayer.removeAll(), this._bufferGraphicsLayer.add(a), await this._selectFeatures([this._bufferGeometry]), a.geometry?.extent && await this.mapView.goTo(a.geometry.extent)), s = t, t = 0;
     } else
       this._bufferGraphicsLayer && this._bufferGraphicsLayer.removeAll(), await this._highlightWithOIDsOrGeoms();
     await this._distanceChanged({
@@ -269,15 +258,15 @@ class U extends T {
       newValue: s
     });
   }
-  _geomQuery(e) {
+  async _geomQuery(e) {
     const t = C(e);
     return t ? this._selectFeatures(t) : Promise.resolve();
   }
   async _clearResults(e = !0, t = !1) {
-    this._selectedIds = [], this._distance = void 0, this._unit = void 0, t && (this._selectionLabel = "", this._labelName.value && (this._labelName.value.value = "")), this._bufferGraphicsLayer && this._bufferGraphicsLayer.removeAll(), e && this._searchWidget && this._clearSearchWidget(), this._pnContextConsumer.value.removeHandles(), this._drawTools.value?.clear && (this._graphics = [], await this._drawTools.value.clear()), this._numSelected = this._selectedIds.length, this.selectionSetChange.emit(this._numSelected);
+    this._selectedIds = [], this._distance = void 0, this._unit = void 0, t && (this._selectionLabel = "", this._labelName.value && (this._labelName.value.value = "")), this._bufferGraphicsLayer && this._bufferGraphicsLayer.removeAll(), e && this._clearSearchWidget(), this._pnContextConsumer.value.removeHandles(), this._drawTools.value?.clear && (this._graphics = [], this.geometries = [], await this._drawTools.value.clear()), this._numSelected = this._selectedIds.length, this.selectionSetChange.emit(this._numSelected);
   }
   _clearSearchWidget() {
-    this._searchWidget?.clear(), this._searchResult = void 0;
+    this._searchElement.value?.clear(), this._searchResult = void 0;
   }
   _updateSelection(e, t, s) {
     this._selectedIds = t && s ? s : this._selectedIds, this._skipGeomOIDs = t ? s : void 0, this.geometries = Array.isArray(e) ? e.reduce((i, a) => (a.geometry && i.push(a.geometry), i), []) : this.geometries, this._graphics = e;
@@ -314,21 +303,21 @@ class U extends T {
     return Promise.all(t).then(async (s) => {
       this._selectionLoading = !1;
       let i = [];
-      s.forEach((h) => {
-        Object.keys(h).forEach((o) => {
-          i = i.concat(h[o]);
+      s.forEach((o) => {
+        Object.keys(o).forEach((n) => {
+          i = i.concat(o[n]);
         });
       });
       let a = !1;
-      i.forEach((h) => {
-        const o = h.geometry;
-        h.symbol = o && o.type === "point" ? this.sketchPointSymbol : o && o.type === "polyline" ? this.sketchLineSymbol : o && o.type === "polygon" ? this.sketchPolygonSymbol : void 0, a = h?.layer?.hasOwnProperty("objectIdField") || h.hasOwnProperty("getObjectId");
+      i.forEach((o) => {
+        const n = o.geometry;
+        o.symbol = n && n.type === "point" ? this.sketchPointSymbol : n && n.type === "polyline" ? this.sketchLineSymbol : n && n.type === "polygon" ? this.sketchPolygonSymbol : void 0, a = o?.layer?.hasOwnProperty("objectIdField") || o.hasOwnProperty("getObjectId");
       });
-      const l = this.layerViews[0].layer, r = this.selectLayerView?.layer, n = a && l.url === r?.url && r?.layerId === l.layerId;
+      const l = this.layerViews[0].layer, r = this.selectLayerView?.layer, h = a && l.url === r?.url && r?.layerId === l.layerId;
       await this._sketchGraphicsChanged({
         detail: {
           graphics: i,
-          useOIDs: n
+          useOIDs: h
         }
       }, !0);
     });