@esri/solutions-components 5.1.0-next.11 → 5.1.0-next.110

package/dist/components/map-fullscreen/customElement.d.ts

@@ -1,12 +1,13 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type Fullscreen from "@arcgis/core/widgets/Fullscreen.js";
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
 export abstract class MapFullscreen extends LitElement {
   /** esri/widgets/Fullscreen: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Fullscreen.html */
-  accessor fullscreenWidget: __esri.Fullscreen | undefined;
+  accessor fullscreenWidget: Fullscreen | undefined;
   /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
   /** Emitted on demand when the fullscreen widget state has changed */
   readonly fullscreenStateChange: import("@arcgis/lumina").TargetedEvent<this, string>;
   readonly "@eventTypes": {

package/dist/components/map-fullscreen/customElement.js

@@ -3,8 +3,8 @@ import { c as t } from "../../chunks/runtime.js";
 import { css as i, html as s } from "lit";
 import { createRef as l, ref as a } from "lit-html/directives/ref.js";
 import { LitElement as n, createEvent as r } from "@arcgis/lumina";
-import c from "@arcgis/core/widgets/Fullscreen";
-import * as h from "@arcgis/core/core/reactiveUtils";
+import c from "@arcgis/core/widgets/Fullscreen.js";
+import * as h from "@arcgis/core/core/reactiveUtils.js";
 const d = i`:host{display:block}`;
 class m extends n {
   constructor() {

package/dist/components/map-layer-picker/customElement.d.ts

@@ -1,5 +1,5 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { IBeforeLayerSelectionChange } from "../../utils/interfaces.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Icon as Icon } from "@esri/calcite-components/components/calcite-icon";
@@ -67,7 +67,7 @@ export abstract class MapLayerPicker extends LitElement {
    */
   accessor isMobile: boolean;
   /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
   /** string: optional placeholder icon used with 'combobox' type */
   accessor placeholderIcon: Icon["icon"] | undefined;
   /**

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

@@ -1,19 +1,19 @@
 /* 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 { createRef as d, ref as o } 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";
 import { useContextConsumer as w } from "@arcgis/lumina/context";
 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 = d(), this._layerComboboxElement = d(), 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);
+    }), this._skipEditCheck = !1, this._popover = d(), this.beforeLayerSelectionChange = n(), this.idsFound = n(), this.noLayersFound = n(), this.layerSelectionChange = n(), this.listenOn(window, "mapChanged", this.mapChanged);
   }
   static {
     this.properties = { appearance: 1, configLayerOrderDefined: 5, defaultLayerId: 1, disabled: 5, display: 1, enabledLayerIds: 0, height: 9, isMobile: 5, mapView: 0, showOnlyUpdatableLayers: 5, placeholderIcon: 1, selectedIds: 0, scale: 1, showTables: 5, showTablesDisabled: 5, showSingleLayerAsLabel: 5, type: 1, showLayersListInPopover: 5, referenceElement: 1, force: 16, _hasMultipleLayers: 16, _hasValidLayers: 16, _isDropdownOpen: 16, ids: 16, selectedName: 16, _translations: 16 };
@@ -74,26 +74,26 @@ class $ extends g {
   }
   _getMapLayerPopOver() {
     const e = this.height && this.height > 0 ? { "max-height": `${this.height.toString()}px` } : {};
-    return i`<calcite-popover auto-close focus-trap-disabled .label=${this.referenceElement} placement=left .referenceElement=${this.referenceElement} scale=s ${d(this._popover)}><div class=popover-list style=${c(e)}>${this._getMapLayerOptions()}</div></calcite-popover>`;
+    return i`<calcite-popover auto-close focus-trap-disabled .label=${this.referenceElement} placement=left .referenceElement=${this.referenceElement} scale=s ${o(this._popover)}><div class=popover-list style=${c(e)}>${this._getMapLayerOptions()}</div></calcite-popover>`;
   }
   _getInvalidPlaceholder() {
     return i`<div><calcite-notice class="height-100" icon=exclamation-mark-triangle id=no-valid-layers kind=danger open><div slot=message>${this._translations.noLayersFound}</div></calcite-notice><calcite-tooltip .label=${this._translations.enableEditUpdate} placement=bottom reference-element=no-valid-layers><span>${this._translations.enableEditUpdate}</span></calcite-tooltip></div>`;
   }
   _getSingleLayerPlaceholder() {
     const e = this._getItemTypeIcon();
-    return i`<div class="layer-picker-label-container cursor-default"><calcite-icon .icon=${e} scale=s></calcite-icon><calcite-label class="no-bottom-margin padding-start-1">${this.selectedName}</calcite-label></div>`;
+    return i`<div class="layer-picker-label-container cursor-default"><calcite-icon aria-hidden=true .icon=${e} scale=s></calcite-icon><calcite-label class="no-bottom-margin padding-start-1">${this.selectedName}</calcite-label></div>`;
   }
   _getSelect(e) {
-    return i`<calcite-select .disabled=${this.disabled} id=${e ?? l} label @calciteSelectChange=${() => this._layerSelectionChange()} .scale=${this.scale} ${d(this._layerElement)}>${this._getMapLayerOptions()}</calcite-select>`;
+    return i`<calcite-select .disabled=${this.disabled} id=${e ?? l} label @calciteSelectChange=${() => this._layerSelectionChange()} .scale=${this.scale} ${o(this._layerElement)}>${this._getMapLayerOptions()}</calcite-select>`;
   }
   _getCombobox(e) {
-    return i`<calcite-combobox clear-disabled id=${e ?? l} label @calciteComboboxChange=${() => this._layerSelectionChange()} .placeholderIcon=${this.placeholderIcon} .scale=${this.scale} selection-mode=single ${d(this._layerElement)}>${this._getMapLayerOptions()}</calcite-combobox>`;
+    return i`<calcite-combobox clear-disabled id=${e ?? l} label @calciteComboboxChange=${() => this._layerSelectionChange()} .placeholderIcon=${this.placeholderIcon} .scale=${this.scale} selection-mode=single ${o(this._layerElement)}>${this._getMapLayerOptions()}</calcite-combobox>`;
   }
   _getDropdown(e) {
     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.selectedName}>${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-legend/customElement.d.ts

@@ -1,5 +1,6 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type Legend from "@arcgis/core/widgets/Legend.js";
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
 export abstract class MapLegend extends LitElement {
@@ -8,7 +9,7 @@ export abstract class MapLegend extends LitElement {
    *
    * Legend instance
    */
-  accessor legendWidget: __esri.Legend | undefined;
+  accessor legendWidget: Legend | undefined;
   /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
 }

package/dist/components/map-legend/customElement.js

@@ -3,7 +3,7 @@ import { c as t } from "../../chunks/runtime.js";
 import { css as i, html as s } from "lit";
 import { createRef as n, ref as a } from "lit-html/directives/ref.js";
 import { LitElement as r } from "@arcgis/lumina";
-import d from "@arcgis/core/widgets/Legend";
+import d from "@arcgis/core/widgets/Legend.js";
 const m = i`:host{display:block}`;
 class l extends r {
   constructor() {

package/dist/components/map-picker/customElement.d.ts

@@ -10,7 +10,13 @@ export abstract class MapPicker extends LitElement {
    *
    * @internal
    */
-  protected _translations: { switchMap: string; } & T9nMeta<{ switchMap: string; }>;
+  protected _translations: {
+      switchMap: string;
+      mapList: string;
+  } & T9nMeta<{
+      switchMap: string;
+      mapList: string;
+  }>;
   /**
    * number: optional fixed height value for the control.
    * Specified as pixel height.

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

@@ -4,7 +4,7 @@ import { u as h } from "../../chunks/useT9n.js";
 import { css as m, html as s } from "lit";
 import { createRef as n, ref as r } from "lit-html/directives/ref.js";
 import { LitElement as f, createEvent as p, safeClassMap as d, safeStyleMap as b } from "@arcgis/lumina";
-const u = m`:host{display:block;--solutions-theme-foreground-color: var(--calcite-color-foreground-1);width:100%}.width-full{width:100%}.height-full{height:100%}.display-flex{display:flex}.border-bottom-1{border-bottom-width:1px!important;border-width:0px}.border-bottom-2{border-bottom-width:2px!important;border-width:0px}.border-solid{border-style:solid;border-color:var(--calcite-color-border-3)}.border-left-right{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.action-bar-size{height:51px;width:100%}.map-list{display:flex;flex-direction:column;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-color-background);z-index:1000}.display-none{display:none}.adjusted-height{max-height:calc(100% - 68px);overflow-y:auto}.position-absolute{position:absolute}.position-relative{position:relative}.popover-map-list{overflow:auto;width:250px}.max-width-200{max-width:200px}.min-width-150{min-width:150px}calcite-action-bar{--calcite-internal-action-bar-gap: 0px;--calcite-internal-action-bar-padding: 0px}`;
+const u = m`:host{display:block;--solutions-theme-foreground-color: var(--calcite-color-surface-2);width:100%}.width-full{width:100%}.height-full{height:100%}.display-flex{display:flex}.border-bottom-1{border-bottom-width:1px!important;border-width:0px}.border-bottom-2{border-bottom-width:2px!important;border-width:0px}.border-solid{border-style:solid;border-color:var(--calcite-color-border-3)}.border-left-right{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.action-bar-size{height:51px;width:100%}.map-list{display:flex;flex-direction:column;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-color-surface-1);z-index:1000}.display-none{display:none}.adjusted-height{max-height:calc(100% - 68px);overflow-y:auto}.position-absolute{position:absolute}.position-relative{position:relative}.popover-map-list{overflow:auto;width:250px}.max-width-200{max-width:200px}.min-width-150{min-width:150px}calcite-action-bar{--calcite-internal-action-bar-gap: 0px;--calcite-internal-action-bar-padding: 0px}`;
 class _ extends f {
   constructor() {
     super(), this.mapInfos = [], this.isMapLayout = !1, this.showMapListInPopover = !1, this.referenceElement = "", this.selectedWebMapId = "", this._mapListExpanded = !1, this._isValidWebMap = !0, this._translations = h({ name: "map-picker", blocking: !0 }), this._list = n(), this._loadedId = "", this._skipEditCheck = !1, this._popover = n(), this._mapPickerButton = n(), this.beforeMapInfoChange = p(), this.mapInfoChange = p(), this.listenOn(window, "mapChanged", this.mapChanged);
@@ -73,11 +73,11 @@ class _ extends f {
   }
   _getMapNameList(t) {
     const e = this.showMapListInPopover ? "position-relative" : "position-absolute", i = this.isMapLayout ? "max-width-200 min-width-150" : "width-full", a = this.isMapLayout ? "border-bottom-1" : "border-bottom-2", l = t ? `map-list border-solid ${a} adjusted-height ${i} ${e}` : "display-none";
-    return s`<div class=${d(l)}><calcite-list id=mapList label selection-appearance=border selection-mode=single-persist ${r(this._list)}>${this.mapInfos.map((o) => s`<calcite-list-item .label=${o.name} @click=${() => this._webMapSelected(o)} .selected=${o.id === this._loadedId} .value=${o.id}></calcite-list-item>`)}</calcite-list></div>`;
+    return s`<div class=${d(l)}><calcite-list id=mapList .label=${this._translations.mapList} selection-appearance=border selection-mode=single-persist ${r(this._list)}>${this.mapInfos.map((o) => s`<calcite-list-item .label=${o.name} @click=${() => this._webMapSelected(o)} .selected=${o.id === this._loadedId} .value=${o.id}></calcite-list-item>`)}</calcite-list></div>`;
   }
   _getMapListPopover() {
     const t = this.height && this.height > 0 && this.showMapListInPopover ? { "max-height": `${this.height.toString()}px` } : {};
-    return s`<calcite-popover auto-close focus-trap-disabled .label=${this.referenceElement} placement=left .referenceElement=${this.referenceElement} ${r(this._popover)}><div style=${b(t)} class=popover-map-list>${this._getMapNameList(!0)}</div></calcite-popover>`;
+    return s`<calcite-popover auto-close .label=${this._translations.mapList} placement=left .referenceElement=${this.referenceElement} ${r(this._popover)}><div style=${b(t)} class=popover-map-list>${this._getMapNameList(!0)}</div></calcite-popover>`;
   }
   _getWebMapInfo() {
     let t = this.mapInfos.find((e) => this.selectedWebMapId === e.id);

package/dist/components/map-search/customElement.d.ts

@@ -1,11 +1,12 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type Search from "@arcgis/core/widgets/Search.js";
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { ISearchConfiguration } from "../../utils/interfaces.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
 export abstract class MapSearch extends LitElement {
   /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
   /**
    * boolean: When true the selected feature popup will be shown when serach result is found
    *
@@ -28,5 +29,5 @@ export abstract class MapSearch extends LitElement {
    */
   accessor searchTerm: string;
   /** esri/widgets/Search: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html */
-  accessor searchWidget: __esri.widgetsSearch | undefined;
+  accessor searchWidget: Search | undefined;
 }

package/dist/components/map-search/customElement.js

@@ -3,8 +3,8 @@ import { c as n } from "../../chunks/runtime.js";
 import { css as d, html as p } from "lit";
 import { createRef as u, ref as m } from "lit-html/directives/ref.js";
 import { LitElement as f } from "@arcgis/lumina";
-import g from "@arcgis/core/widgets/Search";
-import S from "@arcgis/core/layers/FeatureLayer";
+import g from "@arcgis/core/widgets/Search.js";
+import S from "@arcgis/core/layers/FeatureLayer.js";
 const w = d`:host{display:block}.search-widget{width:100%!important;border:1px solid var(--calcite-color-border-input)}`;
 class y extends f {
   constructor() {

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

@@ -1,5 +1,10 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+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";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
@@ -91,8 +96,8 @@ export abstract class MapSelectTools extends LitElement {
    * @default true
    */
   accessor enableSketchTools: boolean;
-  /** esri/geometry: https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry.html */
-  accessor geometries: __esri.Geometry[];
+  /** Geometry[]: List of geometries */
+  accessor geometries: Geometry[];
   /**
    * string: Header label class
    *
@@ -105,10 +110,10 @@ 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 */
-  accessor layerViews: __esri.FeatureLayerView[];
-  /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  /** FeatureLayerView[]: List of layer views */
+  accessor layerViews: FeatureLayerView[];
+  /** MapView: The view of the map */
+  accessor mapView: MapView | undefined;
   /**
    * string: The value to show for no results
    * when left empty the default text '0 selected features from {layerTitle}' will be shown
@@ -131,14 +136,14 @@ 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 */
-  accessor selectLayerView: __esri.FeatureLayerView | undefined;
+  /** 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: __esri.SimpleLineSymbol | undefined;
+  accessor sketchLineSymbol: SimpleLineSymbol | undefined;
   /** esri/symbols/SimpleMarkerSymbol | JSON representation: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleMarkerSymbol.html */
-  accessor sketchPointSymbol: __esri.SimpleMarkerSymbol | undefined;
+  accessor sketchPointSymbol: SimpleMarkerSymbol | undefined;
   /** esri/symbols/SimpleFillSymbol | JSON representation: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html */
-  accessor sketchPolygonSymbol: __esri.SimpleFillSymbol | undefined;
+  accessor sketchPolygonSymbol: SimpleFillSymbol | undefined;
   /**
    * boolean: when true drawn graphics will be used to select features
    *
@@ -146,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";
-import x from "@arcgis/core/layers/FeatureLayer";
-import b from "@arcgis/core/Graphic";
-import N from "@arcgis/core/layers/GraphicsLayer";
-import R from "@arcgis/core/widgets/Search";
-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 D from "@arcgis/core/request.js";
+import x from "@arcgis/core/layers/FeatureLayer.js";
+import b from "@arcgis/core/Graphic.js";
+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,22 +76,26 @@ 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() {
     this.enableSearchDistanceOnLoad && (this.searchDistanceEnabled = !0, this.enableSearchDistanceOnLoad = !1);
     const e = this.searchDistanceEnabled ? "search-distance" : "div-not-visible", t = typeof this.selectionSet?.distance == "number" ? this.selectionSet.distance : this.defaultBufferDistance;
-    return c`<div><div class="padding-top-1 display-flex"><calcite-label class="label-margin-0 w-100" layout=inline-space-between><div class="tooltip-container">${this._translations.searchDistance}<calcite-icon class="padding-start-1-2 icon" .flipRtl=${this._translations._lang?.toLowerCase() !== "he"} icon=question id=search-distance-icon scale=s></calcite-icon></div></calcite-label><calcite-popover closable label overlay-positioning=fixed reference-element=search-distance-icon><span class="tooltip-message">${this._translations.useSearchDistanceTootip}</span></calcite-popover><calcite-switch .checked=${this.searchDistanceEnabled} @calciteSwitchChange=${() => this.searchDistanceEnabled = !this.searchDistanceEnabled}></calcite-switch></div><div class=${f(e)}><buffer-tools .disabled=${!this.searchDistanceEnabled} .distance=${t} .geometries=${this.geometries} @bufferComplete=${(s) => {
+    return c`<div><div class="padding-top-1 display-flex"><calcite-label class="label-margin-0 w-100" layout=inline-space-between><div class="tooltip-container">${this._translations.searchDistance}<calcite-icon aria-hidden=true class="padding-start-1-2 icon" .flipRtl=${this._translations._lang?.toLowerCase() !== "he"} icon=question id=search-distance-icon scale=s></calcite-icon></div></calcite-label><calcite-popover closable label overlay-positioning=fixed reference-element=search-distance-icon><span class="tooltip-message">${this._translations.useSearchDistanceTootip}</span></calcite-popover><calcite-switch .checked=${this.searchDistanceEnabled} @calciteSwitchChange=${() => this.searchDistanceEnabled = !this.searchDistanceEnabled}></calcite-switch></div><div class=${f(e)}><buffer-tools .disabled=${!this.searchDistanceEnabled} .distance=${t} .geometries=${this.geometries} @bufferComplete=${(s) => {
       this._bufferComplete(s);
     }} .unit=${this.selectionSet?.unit || this.defaultBufferUnit} ${u(this._bufferTools)}></buffer-tools></div></div>`;
   }
   _getUseLayerFeaturesOptions() {
     this.enableLayerFeaturesOnLoad && (this.useLayerFeaturesEnabled = !0, this.enableLayerFeaturesOnLoad = !1);
     const e = this.useLayerFeaturesEnabled ? "div-visible" : "div-not-visible";
-    return c`<div><div class="padding-top-1 display-flex"><calcite-label class="label-margin-0 w-100" layout=inline-space-between><div class="tooltip-container">${this._translations.useLayerFeatures}<calcite-icon class="padding-start-1-2 icon" .flipRtl=${this._translations._lang?.toLowerCase() !== "he"} icon=question id=use-layer-features-icon scale=s></calcite-icon></div></calcite-label><calcite-popover closable label overlay-positioning=fixed reference-element=use-layer-features-icon><span class="tooltip-message">${this._translations.useLayerFeaturesTooltip}</span></calcite-popover><calcite-switch .checked=${this.useLayerFeaturesEnabled} @calciteSwitchChange=${() => {
+    return c`<div><div class="padding-top-1 display-flex"><calcite-label class="label-margin-0 w-100" layout=inline-space-between><div class="tooltip-container">${this._translations.useLayerFeatures}<calcite-icon aria-hidden=true class="padding-start-1-2 icon" .flipRtl=${this._translations._lang?.toLowerCase() !== "he"} icon=question id=use-layer-features-icon scale=s></calcite-icon></div></calcite-label><calcite-popover closable label overlay-positioning=fixed reference-element=use-layer-features-icon><span class="tooltip-message">${this._translations.useLayerFeaturesTooltip}</span></calcite-popover><calcite-switch .checked=${this.useLayerFeaturesEnabled} @calciteSwitchChange=${() => {
       this._useLayerFeaturesEnabledChanged();
     }}></calcite-switch></div><div class=${`${e} padding-top-1`}><map-layer-picker .enabledLayerIds=${this.selectionLayerIds} .mapView=${this.mapView} @layerSelectionChange=${(t) => {
       this._layerSelectionChange(t);
@@ -103,7 +103,7 @@ class U extends T {
   }
   _getNumSelected() {
     const e = this._translations._lang === "en" ? `${this._translations.selectionLoading}...` : this._translations.selectionLoading;
-    return c`<div class="padding-top-1 padding-bottom-1" style=${O({ "align-items": "end", display: "flex" })}>${this._selectionLoading ? c`<div><calcite-loader class="info-blue padding-end-1-2" inline .label=${e || ""} scale=m type=indeterminate></calcite-loader></div>` : c`<calcite-icon class="info-blue padding-end-1-2" icon=feature-layer scale=s></calcite-icon>`}<calcite-input-message class="info-blue" scale=m>${this._selectionLoading ? e : this.noResultText && this._numSelected === 0 ? this.noResultText : this._translations.selectedFeatures.replace("{{n}}", this._numSelected.toString())}</calcite-input-message></div>`;
+    return c`<div class="padding-top-1 padding-bottom-1" style=${O({ "align-items": "end", display: "flex" })}>${this._selectionLoading ? c`<div><calcite-loader class="info-blue padding-end-1-2" inline .label=${e || ""} scale=m type=indeterminate></calcite-loader></div>` : c`<calcite-icon aria-hidden=true class="info-blue padding-end-1-2" icon=feature-layer scale=s></calcite-icon>`}<calcite-input-message class="info-blue" scale=m>${this._selectionLoading ? e : this.noResultText && this._numSelected === 0 ? this.noResultText : this._translations.selectedFeatures.replace("{{n}}", this._numSelected.toString())}</calcite-input-message></div>`;
   }
   _getNameInput() {
     const e = this.customLabelEnabled ? "" : "display-none";
@@ -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);
     });

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

@@ -1,3 +1,4 @@
+import "@arcgis/map-components/components/arcgis-search";
 import "../map-draw-tools/index.js";
 import "@esri/calcite-components/components/calcite-label";
 import "@esri/calcite-components/components/calcite-icon";