@esri/solutions-components 0.3.2 → 0.3.4

package/dist/components/map-layer-picker2.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { g as getMapLayerNames } from './mapViewUtils.js';
+import { a as queryExtent } from './queryUtils.js';
 import { s as state } from './publicNotificationStore.js';
 import { d as defineCustomElement$6 } from './chip.js';
 import { d as defineCustomElement$5 } from './combobox.js';
@@ -13,6 +13,141 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './option.js';
 import { d as defineCustomElement$1 } from './select.js';
 
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Gets the layer names from the current map
+ *
+ * @param mapView the map view to fetch the layer names from
+ *
+ * @returns Promise resolving with an array of layer names
+ *
+ */
+async function getMapLayerHash(mapView) {
+  let layerHash = {};
+  await mapView.when(() => {
+    layerHash = mapView.map.layers.toArray().reduce((prev, cur) => {
+      prev[cur.id] = cur.title;
+      return prev;
+    }, {});
+  });
+  return layerHash;
+}
+/**
+ * Gets the layer names from the current map
+ *
+ * @param mapView the map view to fetch the layer names from
+ *
+ * @returns Promise resolving with an array of layer names
+ *
+ */
+async function getMapLayerIds(mapView) {
+  let layerIds = [];
+  await mapView.when(() => {
+    layerIds = mapView.map.layers.toArray().map((l) => {
+      return l.id;
+    });
+  });
+  return layerIds;
+}
+/**
+ * Get a layer view by id
+ *
+ * @param mapView the map view to fetch the layer from
+ * @param id the id if the layer to fetch
+ *
+ * @returns Promise resolving with the fetched layer view
+ *
+ */
+async function getMapLayerView(mapView, id) {
+  const layer = await getMapLayer(mapView, id);
+  return layer ? await mapView.whenLayerView(layer) : undefined;
+}
+/**
+ * Get a layer by id
+ *
+ * @param mapView the map view to fetch the layer from
+ * @param id the id if the layer to fetch
+ *
+ * @returns Promise resolving with the fetched layer
+ *
+ */
+async function getMapLayer(mapView, id) {
+  let layers = [];
+  await mapView.when(() => {
+    layers = mapView.map.layers.toArray().filter((l) => {
+      return l.id === id;
+    });
+  });
+  return layers.length > 0 ? layers[0] : undefined;
+}
+/**
+ * Highlight features by OID
+ *
+ * @param ids the OIDs from the layer to highlight
+ * @param layerView the layer view to highlight
+ * @param mapView the map view used if updateExtent is true
+ * @param updateExtent optional (default false) boolean to indicate if we should zoom to the extent
+ *
+ * @returns Promise resolving with the highlight handle
+ *
+ */
+async function highlightFeatures(ids, layerView, mapView, updateExtent = false) {
+  if (updateExtent) {
+    await goToSelection(ids, layerView, mapView, false);
+  }
+  return layerView.highlight(ids);
+}
+/**
+ * Flash features by OID
+ *
+ * @param ids the OIDs from the layer to highlight
+ * @param layerView the layer view to highlight
+ *
+ * @returns Promise resolving when the operation is complete
+ *
+ */
+async function flashSelection(ids, layerView, featureEffect) {
+  const filter = {
+    objectIds: ids
+  };
+  layerView.featureEffect = Object.assign(Object.assign({}, featureEffect), { filter });
+  setTimeout(() => {
+    layerView.featureEffect = undefined;
+  }, 1300);
+}
+/**
+ * Zoom to features based on OID
+ *
+ * @param ids the OIDs from the layer to go to
+ * @param layerView the layer view that contains the OIDs
+ * @param mapView the map view to show the extent change
+ * @param flashFeatures optional (default true) boolean to indicate if we should flash the features
+ *
+ * @returns Promise resolving when the operation is complete
+ *
+ */
+async function goToSelection(ids, layerView, mapView, flashFeatures = true, featureEffect = undefined) {
+  const result = await queryExtent(ids, layerView.layer);
+  await mapView.goTo(result.extent);
+  if (flashFeatures) {
+    await flashSelection(ids, layerView, featureEffect);
+  }
+}
+
 const mapLayerPickerCss = ":host{display:block}.map-layer-picker-container{width:100%}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}";
 
 const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
@@ -20,10 +155,11 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     super();
     this.__registerHost();
     this.layerSelectionChange = createEvent(this, "layerSelectionChange", 7);
-    this.layerNames = [];
+    this.enabledLayerIds = [];
     this.mapView = undefined;
-    this.selectedLayers = [];
+    this.selectedLayerIds = [];
     this.selectionMode = "single";
+    this.layerIds = [];
   }
   //--------------------------------------------------------------------------
   //
@@ -38,7 +174,7 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     if (newValue !== oldValue) {
       await this._setLayers();
       if (this.selectionMode === "single") {
-        this.layerSelectionChange.emit([this.layerNames[0]]);
+        this.layerSelectionChange.emit([this.layerIds[0]]);
       }
     }
   }
@@ -52,8 +188,8 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    */
   async componentWillLoad() {
     await this._setLayers();
-    if (this.selectionMode === "single" && (this.layerNames.length > 0 || this.selectedLayers.length === 1)) {
-      this.layerSelectionChange.emit(this.selectedLayers.length === 1 ? [this.selectedLayers[0]] : [this.layerNames[0]]);
+    if (this.selectionMode === "single" && (this.layerIds.length > 0 || this.selectedLayerIds.length === 1)) {
+      this.layerSelectionChange.emit(this.selectedLayerIds.length === 1 ? [this.selectedLayerIds[0]] : [this.layerIds[0]]);
     }
   }
   /**
@@ -72,62 +208,74 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    *
    * Used for selecting a single layer.
    *
-   * @returns Calcite Select component with the names of the layers from the map
+   * @returns Calcite Select component with the ids of the layers from the map
    */
   _getSelect() {
     return (h("calcite-select", { label: "", onCalciteSelectChange: (evt) => this._layerSelectionChange(evt), ref: (el) => { this._layerElement = el; } }, this._addMapLayersOptions()));
   }
   /**
-   * Create a list of layers from the map
+   * Create a list of layer ids from the map
    *
    * Used for selecting multiple layers
    *
-   * @returns Calcite ComboBox component with the names of the layers from the map
+   * @returns Calcite ComboBox component with the ids of the layers from the map
    */
   _getCombobox() {
     return (h("calcite-combobox", { label: "", onCalciteComboboxChange: (evt) => this._layerSelectionChange(evt), "selection-mode": this.selectionMode }, this._addMapLayersOptions()));
   }
   /**
-   * Hydrate a select or combobox component with the names of the layers in the map
+   * Hydrate a select or combobox component with the ids of the layers in the map
    *
-   * @returns Array of ComboBox items or Select options for the names of the layers
+   * @returns Array of ComboBox items or Select options for the ids of the layers
    */
   _addMapLayersOptions() {
-    return this.layerNames.reduce((prev, cur) => {
-      if (state.managedLayers.indexOf(cur) < 0) {
-        prev.push(this.selectionMode === "multi" && this.selectedLayers.indexOf(cur) > -1 ?
-          (h("calcite-combobox-item", { selected: true, textLabel: cur, value: cur })) :
+    return this.layerIds.reduce((prev, cur) => {
+      if (state.managedLayers.indexOf(state.layerNameHash[cur]) < 0 && (this.enabledLayerIds.length > 0 ? this.enabledLayerIds.indexOf(cur) > -1 : true)) {
+        prev.push(this.selectionMode === "multi" && this.selectedLayerIds.indexOf(cur) > -1 ?
+          (h("calcite-combobox-item", { selected: true, textLabel: state.layerNameHash[cur], value: cur })) :
           this.selectionMode === "multi" ?
-            (h("calcite-combobox-item", { textLabel: cur, value: cur })) :
-            this.selectedLayers.indexOf(cur) > -1 ?
-              (h("calcite-option", { label: cur, selected: true, value: cur })) :
-              (h("calcite-option", { label: cur, value: cur })));
+            (h("calcite-combobox-item", { textLabel: state.layerNameHash[cur], value: cur })) :
+            this.selectedLayerIds.indexOf(cur) > -1 ?
+              (h("calcite-option", { label: state.layerNameHash[cur], selected: true, value: cur })) :
+              (h("calcite-option", { label: state.layerNameHash[cur], value: cur })));
       }
       return prev;
     }, []);
   }
   /**
-   * Fetch the names of the layers from the map
+   * Fetch the ids of the layers from the map
    *
    * @returns Promise when the operation has completed
    */
   async _setLayers() {
     if (this.mapView) {
-      this.layerNames = await getMapLayerNames(this.mapView);
+      const mapLayerIds = await getMapLayerIds(this.mapView);
+      this.layerIds = mapLayerIds.filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.indexOf(n) > -1 : true; });
+      await this._initLayerHashState();
+    }
+  }
+  /**
+   * Create a layer id:title hash for layer name display
+   *
+   * @returns Promise when the operation has completed
+   */
+  async _initLayerHashState() {
+    if (this.mapView) {
+      state.layerNameHash = await getMapLayerHash(this.mapView);
     }
   }
   /**
-   * Fetch the names of the layers from the map
+   * Fetch the ids of the layers from the map
    *
    * @returns Promise when the operation has completed
    */
   _layerSelectionChange(evt) {
     var _a;
-    this.selectedLayers = this.selectionMode === "single" ?
+    this.selectedLayerIds = this.selectionMode === "single" ?
       [this._layerElement.value] : ((_a = evt.detail) === null || _a === void 0 ? void 0 : _a.selectedItems.map((item) => {
       return item.value;
     })) || [];
-    this.layerSelectionChange.emit(this.selectedLayers);
+    this.layerSelectionChange.emit(this.selectedLayerIds);
   }
   get el() { return this; }
   static get watchers() { return {
@@ -135,10 +283,11 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   }; }
   static get style() { return mapLayerPickerCss; }
 }, [0, "map-layer-picker", {
-    "layerNames": [1040],
+    "enabledLayerIds": [16],
     "mapView": [16],
-    "selectedLayers": [1040],
-    "selectionMode": [1537, "selection-mode"]
+    "selectedLayerIds": [1040],
+    "selectionMode": [1537, "selection-mode"],
+    "layerIds": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -185,4 +334,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { MapLayerPicker as M, defineCustomElement as d };
+export { MapLayerPicker as M, getMapLayerView as a, defineCustomElement as d, goToSelection as g, highlightFeatures as h };

package/dist/components/map-search.js

@@ -15,6 +15,7 @@ const MapSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.__registerHost();
     this.searchChange = createEvent(this, "searchChange", 7);
     this.mapView = undefined;
+    this.searchConfiguration = undefined;
     this._searchTerm = undefined;
     this._translations = undefined;
   }
@@ -75,10 +76,12 @@ const MapSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @protected
    */
   async _initModules() {
-    const [Search] = await loadModules([
-      "esri/widgets/Search"
+    const [Search, FeatureLayer] = await loadModules([
+      "esri/widgets/Search",
+      "esri/layers/FeatureLayer"
     ]);
     this.Search = Search;
+    this.FeatureLayer = FeatureLayer;
   }
   /**
    * Initialize the search widget
@@ -95,11 +98,8 @@ const MapSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    */
   _initSearchWidget() {
     if (this.mapView && this._searchElement) {
-      const searchOptions = {
-        view: this.mapView,
-        container: this._searchElement,
-        searchTerm: this._searchTerm
-      };
+      const searchConfiguration = this._getSearchConfig(this.searchConfiguration, this.mapView);
+      const searchOptions = Object.assign({ view: this.mapView, container: this._searchElement, searchTerm: this._searchTerm }, searchConfiguration);
       this._searchWidget = new this.Search(searchOptions);
       this._searchWidget.on("search-clear", () => {
         this._searchResult = undefined;
@@ -117,6 +117,45 @@ const MapSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       });
     }
   }
+  /**
+   * Initialize the search widget based on user defined configuration
+   *
+   * @param searchConfiguration search configuration defined by the user
+   * @param view the current map view
+   *
+   * @protected
+   */
+  _getSearchConfig(searchConfiguration, view) {
+    var _a;
+    const sources = searchConfiguration === null || searchConfiguration === void 0 ? void 0 : searchConfiguration.sources;
+    if (sources) {
+      sources.forEach(source => {
+        var _a, _b, _c;
+        const isLayerSource = source.hasOwnProperty("layer");
+        if (isLayerSource) {
+          const layerSource = source;
+          const layerFromMap = ((_a = layerSource.layer) === null || _a === void 0 ? void 0 : _a.id)
+            ? view.map.findLayerById(layerSource.layer.id)
+            : null;
+          if (layerFromMap) {
+            layerSource.layer = layerFromMap;
+          }
+          else if ((_b = layerSource === null || layerSource === void 0 ? void 0 : layerSource.layer) === null || _b === void 0 ? void 0 : _b.url) {
+            layerSource.layer = new this.FeatureLayer((_c = layerSource === null || layerSource === void 0 ? void 0 : layerSource.layer) === null || _c === void 0 ? void 0 : _c.url);
+          }
+        }
+      });
+    }
+    (_a = searchConfiguration === null || searchConfiguration === void 0 ? void 0 : searchConfiguration.sources) === null || _a === void 0 ? void 0 : _a.forEach(source => {
+      const isLocatorSource = source.hasOwnProperty("locator");
+      if (isLocatorSource) {
+        const locatorSource = source;
+        locatorSource.url = locatorSource.url;
+        delete locatorSource.url;
+      }
+    });
+    return searchConfiguration;
+  }
   /**
    * Fetches the component's translations
    *
@@ -130,6 +169,7 @@ const MapSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   static get style() { return mapSearchCss; }
 }, [0, "map-search", {
     "mapView": [16],
+    "searchConfiguration": [16],
     "_searchTerm": [32],
     "_translations": [32],
     "clear": [64]

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

@@ -5,8 +5,8 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
-import { a as goToSelection, h as highlightFeatures } from './mapViewUtils.js';
-import { a as queryObjectIds, b as getQueryGeoms } from './queryUtils.js';
+import { g as goToSelection, h as highlightFeatures, d as defineCustomElement$2 } from './map-layer-picker2.js';
+import { b as queryObjectIds, c as getQueryGeoms } from './queryUtils.js';
 import { c as EWorkflowType, e as ESelectionMode, f as ERefineMode, b as ESketchType } from './interfaces3.js';
 import { s as state } from './publicNotificationStore.js';
 import { g as getLocaleComponentStrings } from './locale.js';
@@ -28,7 +28,6 @@ import { d as defineCustomElement$6 } from './radio-group-item.js';
 import { d as defineCustomElement$5 } from './select.js';
 import { d as defineCustomElement$4 } from './slider.js';
 import { d as defineCustomElement$3 } from './map-draw-tools2.js';
-import { d as defineCustomElement$2 } from './map-layer-picker2.js';
 import { d as defineCustomElement$1 } from './refine-selection-tools2.js';
 
 const mapSelectToolsCss = ":host{display:block}.div-visible{display:inherit}.div-visible-search{display:flex;height:44px;align-items:center;padding-bottom:0}.div-not-visible{display:none}.padding-bottom-1{padding-bottom:1rem}.search-widget{width:100% !important;border:1px solid var(--calcite-ui-border-input)}.w-100{width:100%}.w-50{width:50%}.search-distance-container{padding-top:\"1rem\" !important}.end-border{-webkit-border-end:1px solid var(--calcite-ui-border-2);border-inline-end:1px solid var(--calcite-ui-border-2)}.search-distance{display:flex;padding-top:1rem}";
@@ -48,9 +47,13 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
      * string: A label to help uniquely identify the selection set
      */
     this._selectionLabel = "";
+    this.enabledLayerIds = [];
+    this.defaultBufferDistance = undefined;
+    this.defaultBufferUnit = undefined;
     this.geometries = undefined;
     this.isUpdate = false;
     this.mapView = undefined;
+    this.searchConfiguration = undefined;
     this.selectionSet = undefined;
     this.selectLayerView = undefined;
     this.showBufferTools = true;
@@ -176,7 +179,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     const useSelectClass = this._layerSelectChecked && !searchEnabled ? " div-visible" : " div-not-visible";
     const useDrawClass = !this._layerSelectChecked && !searchEnabled ? " div-visible" : " div-not-visible";
     const showLayerChoiceClass = searchEnabled ? "div-not-visible" : "div-visible";
-    return (h(Host, null, h("div", { class: "padding-bottom-1" }, h("calcite-radio-group", { class: "w-100", onCalciteRadioGroupChange: (evt) => this._workflowChange(evt) }, h("calcite-radio-group-item", { checked: searchEnabled, class: "w-50 end-border", value: EWorkflowType.SEARCH }, this._translations.search), h("calcite-radio-group-item", { checked: drawEnabled, class: "w-50", value: EWorkflowType.SKETCH }, this._translations.sketch))), h("div", { class: showSearchClass }, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } })), h("div", { class: showLayerChoiceClass }, h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { onCalciteCheckboxChange: () => this._layerSelectChanged(), ref: (el) => this._selectFromLayerElement = el }), "Use layer features")), h("div", { class: useDrawClass }, h("map-draw-tools", { active: true, border: true, mapView: this.mapView, ref: (el) => { this._drawTools = el; } })), h("div", { class: useSelectClass }, h("refine-selection-tools", { active: true, border: true, layerViews: this._refineSelectLayers, mapView: this.mapView, mode: ESelectionMode.ADD, ref: (el) => { this._refineTools = el; }, refineMode: ERefineMode.SUBSET })), h("calcite-label", { class: showBufferToolsClass }, this._translations.searchDistance, h("buffer-tools", { distance: (_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.distance, geometries: this.geometries, onBufferComplete: (evt) => this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: (_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.unit })), h("slot", null)));
+    return (h(Host, null, h("div", { class: "padding-bottom-1" }, h("calcite-radio-group", { class: "w-100", onCalciteRadioGroupChange: (evt) => this._workflowChange(evt) }, h("calcite-radio-group-item", { checked: searchEnabled, class: "w-50 end-border", value: EWorkflowType.SEARCH }, this._translations.search), h("calcite-radio-group-item", { checked: drawEnabled, class: "w-50", value: EWorkflowType.SKETCH }, this._translations.sketch))), h("div", { class: showSearchClass }, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } })), h("div", { class: showLayerChoiceClass }, h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { onCalciteCheckboxChange: () => this._layerSelectChanged(), ref: (el) => this._selectFromLayerElement = el }), "Use layer features")), h("div", { class: useDrawClass }, h("map-draw-tools", { active: true, border: true, mapView: this.mapView, ref: (el) => { this._drawTools = el; } })), h("div", { class: useSelectClass }, h("refine-selection-tools", { active: true, border: true, enabledLayerIds: this.enabledLayerIds, layerViews: this._refineSelectLayers, mapView: this.mapView, mode: ESelectionMode.ADD, ref: (el) => { this._refineTools = el; }, refineMode: ERefineMode.SUBSET })), h("calcite-label", { class: showBufferToolsClass }, this._translations.searchDistance, h("buffer-tools", { distance: ((_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.distance) || this.defaultBufferDistance, geometries: this.geometries, onBufferComplete: (evt) => this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.unit) || this.defaultBufferUnit })), h("slot", null)));
   }
   //--------------------------------------------------------------------------
   //
@@ -191,16 +194,18 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * @protected
    */
   async _initModules() {
-    const [GraphicsLayer, Graphic, Search, geometryEngine] = await loadModules([
+    const [GraphicsLayer, Graphic, Search, geometryEngine, FeatureLayer] = await loadModules([
       "esri/layers/GraphicsLayer",
       "esri/Graphic",
       "esri/widgets/Search",
-      "esri/geometry/geometryEngine"
+      "esri/geometry/geometryEngine",
+      "esri/layers/FeatureLayer"
     ]);
     this.GraphicsLayer = GraphicsLayer;
     this.Graphic = Graphic;
     this.Search = Search;
     this._geometryEngine = geometryEngine;
+    this.FeatureLayer = FeatureLayer;
   }
   /**
    * Initialize the graphics layer, selection set, and search widget
@@ -244,11 +249,8 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    */
   _initSearchWidget() {
     if (this.mapView && this._searchElement) {
-      const searchOptions = {
-        view: this.mapView,
-        container: this._searchElement,
-        searchTerm: this._searchTerm
-      };
+      const searchConfiguration = this._getSearchConfig(this.searchConfiguration, this.mapView);
+      const searchOptions = Object.assign({ view: this.mapView, container: this._searchElement, searchTerm: this._searchTerm }, searchConfiguration);
       this._searchWidget = new this.Search(searchOptions);
       this._searchWidget.on("search-clear", () => {
         void this._clearResults(false);
@@ -263,6 +265,45 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       });
     }
   }
+  /**
+   * Initialize the search widget based on user defined configuration
+   *
+   * @param searchConfiguration search configuration defined by the user
+   * @param view the current map view
+   *
+   * @protected
+   */
+  _getSearchConfig(searchConfiguration, view) {
+    var _a;
+    const sources = searchConfiguration === null || searchConfiguration === void 0 ? void 0 : searchConfiguration.sources;
+    if (sources) {
+      sources.forEach(source => {
+        var _a, _b, _c;
+        const isLayerSource = source.hasOwnProperty("layer");
+        if (isLayerSource) {
+          const layerSource = source;
+          const layerFromMap = ((_a = layerSource.layer) === null || _a === void 0 ? void 0 : _a.id)
+            ? view.map.findLayerById(layerSource.layer.id)
+            : null;
+          if (layerFromMap) {
+            layerSource.layer = layerFromMap;
+          }
+          else if ((_b = layerSource === null || layerSource === void 0 ? void 0 : layerSource.layer) === null || _b === void 0 ? void 0 : _b.url) {
+            layerSource.layer = new this.FeatureLayer((_c = layerSource === null || layerSource === void 0 ? void 0 : layerSource.layer) === null || _c === void 0 ? void 0 : _c.url);
+          }
+        }
+      });
+    }
+    (_a = searchConfiguration === null || searchConfiguration === void 0 ? void 0 : searchConfiguration.sources) === null || _a === void 0 ? void 0 : _a.forEach(source => {
+      const isLocatorSource = source.hasOwnProperty("locator");
+      if (isLocatorSource) {
+        const locatorSource = source;
+        locatorSource.url = locatorSource.url;
+        delete locatorSource.url;
+      }
+    });
+    return searchConfiguration;
+  }
   /**
    * Initialize the graphics layer used to store any buffer grapghics
    *
@@ -445,9 +486,13 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   }; }
   static get style() { return mapSelectToolsCss; }
 }, [4, "map-select-tools", {
+    "enabledLayerIds": [16],
+    "defaultBufferDistance": [2, "default-buffer-distance"],
+    "defaultBufferUnit": [1, "default-buffer-unit"],
     "geometries": [16],
     "isUpdate": [4, "is-update"],
     "mapView": [16],
+    "searchConfiguration": [16],
     "selectionSet": [16],
     "selectLayerView": [16],
     "showBufferTools": [4, "show-buffer-tools"],