@esri/solutions-components 5.1.0-next.99 → 5.1.0

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

@@ -1 +1,2 @@
+import "@arcgis/map-components/components/arcgis-legend";
 export * from "./customElement.js";

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

@@ -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,13 +1,15 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { ISearchConfiguration } from "../../utils/interfaces.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Ref } from "lit-html/directives/ref.js";
+import type { ArcgisSearch as ArcgisSearch2 } from "@arcgis/map-components/components/arcgis-search";
 
 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;
+  /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views/MapView.html */
+  accessor mapView: MapView | undefined;
   /**
-   * boolean: When true the selected feature popup will be shown when serach result is found
+   * boolean: When true the selected feature popup will be shown when search result is found
    *
    * @default false
    */
@@ -18,6 +20,8 @@ export abstract class MapSearch extends LitElement {
    * @default false
    */
   accessor resultGraphicEnabled: boolean;
+  /** ArcgisSearch: The search widget element */
+  accessor searchComponent: Ref<ArcgisSearch2>;
   /** ISearchConfiguration: Configuration details for the Search widget */
   accessor searchConfiguration: ISearchConfiguration | undefined;
   /**
@@ -27,6 +31,4 @@ export abstract class MapSearch extends LitElement {
    * @default ''
    */
   accessor searchTerm: string;
-  /** esri/widgets/Search: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html */
-  accessor searchWidget: __esri.widgetsSearch | undefined;
 }

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

@@ -1,74 +1,47 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as n } from "../../chunks/runtime.js";
-import { css as d, html as p } from "lit";
+import { c as h } from "../../chunks/runtime.js";
+import { css as p, html as d } 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";
-const w = d`:host{display:block}.search-widget{width:100%!important;border:1px solid var(--calcite-color-border-input)}`;
-class y extends f {
+import y from "@arcgis/core/layers/FeatureLayer.js";
+const S = p`:host{display:block}.search-widget{width:100%!important;border:1px solid var(--calcite-color-border-input)}`;
+class E extends f {
   constructor() {
-    super(...arguments), this.popupEnabled = !1, this.resultGraphicEnabled = !1, this.searchTerm = "", this._searchElement = u();
+    super(...arguments), this.popupEnabled = !1, this.resultGraphicEnabled = !1, this.searchTerm = "", this.searchComponent = u();
   }
   static {
-    this.properties = { mapView: 0, popupEnabled: 5, resultGraphicEnabled: 5, searchConfiguration: 0, searchTerm: 1, searchWidget: 0 };
+    this.properties = { mapView: 0, popupEnabled: 5, resultGraphicEnabled: 5, searchConfiguration: 0, searchTerm: 1, searchComponent: 0 };
   }
   static {
-    this.styles = w;
-  }
-  willUpdate(t) {
-    t.has("searchConfiguration") && this.watchSearchConfigurationHandler(), t.has("mapView") && this.mapViewWatchHandler();
-  }
-  async watchSearchConfigurationHandler() {
-    this._initSearchWidget();
-  }
-  async mapViewWatchHandler() {
-    await this.mapView?.when(() => {
-      this._initSearchWidget();
-    });
-  }
-  loaded() {
-    return this._initSearchWidget();
+    this.styles = S;
   }
   render() {
-    return p`<div class="search-widget" ${m(this._searchElement)}></div>`;
-  }
-  _initSearchWidget() {
-    if (this.mapView && this._searchElement.value && !this.searchWidget) {
-      let t = {
-        view: this.mapView,
-        container: this._searchElement.value,
-        searchTerm: this.searchTerm
-      };
-      this.searchConfiguration && (t = {
-        ...this._getSearchConfig(this.searchConfiguration, this.mapView)
-      }), this.searchWidget = new g(t), this.searchWidget && (this.searchWidget.popupEnabled = this.popupEnabled, this.searchWidget.resultGraphicEnabled = this.resultGraphicEnabled);
-    } else
-      this.searchWidget && (this.searchWidget.view = this.mapView);
-  }
-  _getSearchConfig(t, s) {
-    const o = "includeDefaultSources", r = t.sources;
-    return r && r?.length > 0 ? (t[o] = !1, r.forEach((i) => {
-      if (i.hasOwnProperty("layer")) {
-        const e = i, a = e.layer?.id, c = a ? s.map?.findLayerById(a) : null, h = e?.layer?.url;
-        c ? e.layer = c : h && (e.layer = new S(h));
+    const r = this.searchConfiguration && this.mapView ? this._getSearchConfig(this.searchConfiguration, this.mapView) : void 0;
+    return this.mapView && d`<arcgis-search auto-destroy-disabled class="search-widget" .view=${this.mapView} .popupDisabled=${!this.popupEnabled} .resultGraphicDisabled=${!this.resultGraphicEnabled} .sources=${r?.sources} .searchTerm=${this.searchTerm} ${m(this.searchComponent)}></arcgis-search>` || "";
+  }
+  _getSearchConfig(r, c) {
+    const l = "includeDefaultSources", t = r.sources;
+    return t && t?.length > 0 ? (r[l] = !1, t.forEach((s) => {
+      if (s.hasOwnProperty("layer")) {
+        const e = s, a = e.layer?.id, o = a ? c.map?.findLayerById(a) : null, i = e?.layer?.url;
+        o ? e.layer = o : i && (e.layer = new y(i));
       }
-    }), r?.forEach((i) => {
-      if (i.hasOwnProperty("locator")) {
-        const e = i;
+    }), t?.forEach((s) => {
+      if (s.hasOwnProperty("locator")) {
+        const e = s;
         if (e?.name === "ArcGIS World Geocoding Service") {
           const a = e.outFields || ["Addr_type", "Match_addr", "StAddr", "City"];
           e.outFields = a, e.singleLineFieldName = "SingleLine";
         }
         e.url = e.url, delete e.url;
       }
-    })) : t = {
-      ...t,
+    })) : r = {
+      ...r,
       includeDefaultSources: !0
-    }, t;
+    }, r;
   }
 }
-n("map-search", y);
+h("map-search", E);
 export {
-  y as MapSearch
+  E as MapSearch
 };

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

@@ -1 +1,2 @@
+import "@arcgis/map-components/components/arcgis-search";
 export * from "./customElement.js";

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";

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

@@ -1,7 +1,9 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { IBasemapConfig, IMapInfo, ISearchConfiguration, VisibilityIconType } from "../../utils/interfaces.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { UIPosition } from "@arcgis/core/views/ui/types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 export abstract class MapTools extends LitElement {
@@ -44,6 +46,12 @@ export abstract class MapTools extends LitElement {
   }>;
   /** IBasemapConfig: List of any basemaps to filter out from the basemap widget */
   accessor basemapConfig: IBasemapConfig | undefined;
+  /**
+   * boolean: when true the layer order should be defined in the enabledLayerIds, when false we will use the older logic of layers first then tables
+   *
+   * @default false
+   */
+  accessor configLayerOrderDefined: boolean;
   /**
    * string: when provided this layer ID will be used when the app loads
    *
@@ -139,30 +147,30 @@ export abstract class MapTools extends LitElement {
   /** IMapInfo[]: array of map infos (name and id) */
   accessor mapInfos: IMapInfo[];
   /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
   /**
    * 's' | 'm' | 'l': Used for optional map tool widget
    *
    * @default 'm'
    */
   accessor mapWidgetsSize: "l" | "m" | "s";
-  /** component height */
+  /** Parent component height */
   accessor parentComponentHeight: number | undefined;
   /** Parent component width */
   accessor parentComponentWidth: number | undefined;
   /**
-   * __esri.UIPosition: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-UI.html#UIPosition
+   * UIPosition: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-UI.html#UIPosition
    * The position details for the tools
    *
    * @default 'top-leading'
    */
-  accessor position: __esri.UIPosition;
+  accessor position: UIPosition;
   /** ISearchConfiguration: Configuration details for the Search widget */
   accessor searchConfiguration: ISearchConfiguration | undefined;
   /** number[]: A list of ids that are currently selected */
   accessor selectedFeaturesIds: (number | string)[];
-  /** __esri.FeatureLayer: Selected feature layer */
-  accessor selectedLayer: __esri.FeatureLayer | undefined;
+  /** FeatureLayer: Selected feature layer */
+  accessor selectedLayer: FeatureLayer | undefined;
   /**
    * string: selected web map
    *