@esri/solutions-components 0.6.2 → 0.6.3

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

@@ -4,223 +4,37 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as queryExtent } from './queryUtils.js';
-import { c as EWorkflowType } from './interfaces.js';
+import { b as getMapLayerIds, c as getMapLayerHash } from './mapViewUtils.js';
 import { s as state } from './publicNotificationStore.js';
-import { d as defineCustomElement$6 } from './chip.js';
-import { d as defineCustomElement$5 } from './combobox.js';
-import { d as defineCustomElement$4 } from './combobox-item.js';
-import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$c } from './action.js';
+import { d as defineCustomElement$b } from './button.js';
+import { d as defineCustomElement$a } from './chip.js';
+import { d as defineCustomElement$9 } from './combobox.js';
+import { d as defineCustomElement$8 } from './combobox-item.js';
+import { d as defineCustomElement$7 } from './dropdown.js';
+import { d as defineCustomElement$6 } from './dropdown-group.js';
+import { d as defineCustomElement$5 } from './dropdown-item.js';
+import { d as defineCustomElement$4 } from './icon.js';
+import { d as defineCustomElement$3 } from './loader.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.allLayers.toArray().reduce((prev, cur) => {
-      if (cur.type === "feature") {
-        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.allLayers.toArray().reduce((prev, cur) => {
-      if (cur.type === "feature") {
-        prev.push(cur.id);
-      }
-      return prev;
-    }, []);
-  });
-  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.allLayers.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);
-}
-/**
- * Highlights features from all sets including the refine set
- *
- * @param selectionSets The selection sets to highlight
- *
- * @returns Promise resolving with the highlight handles
- *
- */
-async function highlightAllFeatures(selectionSets) {
-  const highlightInfos = getIdSets(selectionSets);
-  return Object.keys(highlightInfos).reduce((prev, cur) => {
-    const highlightInfo = highlightInfos[cur];
-    prev.push(highlightInfo.layerView.highlight(highlightInfo.ids));
-    return prev;
-  }, []);
-}
-/**
- * Highlights features from all sets including the refine set
- *
- * @param selectionSets The selection sets to highlight
- *
- * @returns Promise resolving with the highlight handles
- *
- */
-function getIdSets(selectionSets) {
-  return selectionSets.reduce((prev, cur) => {
-    const lv = cur.layerView;
-    const id = lv === null || lv === void 0 ? void 0 : lv.layer.id;
-    if (id && Object.keys(prev).indexOf(id) > -1) {
-      prev[id].ids = [...new Set([
-          ...cur.selectedIds,
-          ...prev[id].ids
-        ])];
-    }
-    else if (id) {
-      prev[id] = {
-        layerView: lv,
-        ids: cur.selectedIds
-      };
-    }
-    if (cur.workflowType === EWorkflowType.REFINE) {
-      Object.keys(cur.refineInfos).forEach(k => {
-        const refineInfo = cur.refineInfos[k];
-        if (Object.keys(prev).indexOf(k) > -1) {
-          prev[k].ids = [...new Set([
-              ...refineInfo.addIds,
-              ...prev[k].ids
-            ])];
-          prev[k].ids = prev[k].ids.filter(_id => refineInfo.removeIds.indexOf(_id) < 0);
-        }
-      });
-    }
-    return prev;
-  }, {});
-}
-/**
- * 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 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}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}";
 
 const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.layerSelectionChange = createEvent(this, "layerSelectionChange", 7);
+    this.appearance = "transparent";
     this.enabledLayerIds = [];
     this.mapView = undefined;
+    this.placeholderIcon = "";
     this.selectedLayerIds = [];
-    this.selectionMode = "single";
+    this.scale = "m";
+    this.type = "select";
     this.layerIds = [];
+    this.selectedLayerName = "";
   }
   //--------------------------------------------------------------------------
   //
@@ -231,13 +45,9 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * Called each time the mapView prop is changed.
    *
    */
-  async watchStateHandler(newValue, oldValue) {
-    if (newValue !== oldValue) {
-      await this._setLayers();
-      if (this.selectionMode === "single") {
-        this.layerSelectionChange.emit([this.layerIds[0]]);
-      }
-    }
+  async mapViewWatchHandler() {
+    await this._setLayers();
+    this._setSelectedLayer(this.layerIds[0]);
   }
   //--------------------------------------------------------------------------
   //
@@ -249,7 +59,7 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    */
   async componentWillLoad() {
     await this._setLayers();
-    if (this.selectionMode === "single" && (this.layerIds.length > 0 || this.selectedLayerIds.length === 1)) {
+    if (this.layerIds.length > 0 || this.selectedLayerIds.length === 1) {
       this.layerSelectionChange.emit(this.selectedLayerIds.length === 1 ? [this.selectedLayerIds[0]] : [this.layerIds[0]]);
     }
   }
@@ -257,7 +67,22 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * Renders the component.
    */
   render() {
-    return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, this.selectionMode === "multi" ? this._getCombobox() : this._getSelect()))));
+    return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, this.type === "combobox" ? this._getCombobox() :
+      this.type === "select" ? this._getSelect() : this._getDropdown()))));
+  }
+  /**
+   * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+   */
+  async componentDidLoad() {
+    if (this.layerIds.length > 0 || this.selectedLayerIds.length === 1) {
+      const id = this.selectedLayerIds.length === 1 ? this.selectedLayerIds[0] : this.layerIds[0];
+      if (this.type === "select") {
+        this._layerElement.value = id;
+      }
+      else if (this.type === "dropdown") {
+        this.selectedLayerName = state.layerNameHash[id];
+      }
+    }
   }
   //--------------------------------------------------------------------------
   //
@@ -272,7 +97,7 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * @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()));
+    return (h("calcite-select", { label: "", onCalciteSelectChange: () => this._layerSelectionChange(), ref: (el) => { this._layerElement = el; }, scale: this.scale }, this._addSelectMapLayersOptions()));
   }
   /**
    * Create a list of layer ids from the map
@@ -282,23 +107,59 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * @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()));
+    return (h("calcite-combobox", { clearDisabled: true, label: "", onCalciteComboboxChange: () => this._layerSelectionChange(), "placeholder-icon": this.placeholderIcon, ref: (el) => { this._layerElement = el; }, scale: this.scale, "selection-mode": "single" }, this._addComboboxMapLayersOptions()));
+  }
+  /**
+   * Hydrate a dropdown component with items to display the layer names
+   *
+   * @returns Array of Dropdown items with layer names
+   */
+  _getDropdown() {
+    return (h("calcite-dropdown", { class: "layer-picker-dropdown" }, h("calcite-action", { slot: "trigger", text: "" }, h("calcite-button", { alignment: "icon-end-space-between", appearance: this.appearance, class: "max-width-350", iconEnd: "chevron-down", iconStart: "layers", kind: "neutral", width: "full" }, h("div", null, this.selectedLayerName))), h("calcite-dropdown-group", { "selection-mode": "single" }, this._getDropdownItems())));
+  }
+  /**
+   * Hydrate a dropdown component with items to display the layer names
+   *
+   * @returns Array of Dropdown items with layer names
+   */
+  _getDropdownItems() {
+    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((h("calcite-dropdown-item", { onClick: () => void this._setSelectedLayer(cur) }, state.layerNameHash[cur])));
+      }
+      return prev;
+    }, []);
+  }
+  /**
+   * Store the layer name based on the user selection
+   */
+  _setSelectedLayer(id) {
+    this.selectedLayerName = state.layerNameHash[id];
+    this.selectedLayerIds = [id];
+    this.layerSelectionChange.emit(this.selectedLayerIds);
+  }
+  /**
+   * Hydrate a select component with the ids of the layers in the map
+   *
+   * @returns Array of select options for the ids of the layers
+   */
+  _addSelectMapLayersOptions() {
+    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((h("calcite-option", { label: state.layerNameHash[cur], value: cur })));
+      }
+      return prev;
+    }, []);
   }
   /**
-   * Hydrate a select or combobox component with the ids of the layers in the map
+   * Hydrate a combobox component with the ids of the layers in the map
    *
-   * @returns Array of ComboBox items or Select options for the ids of the layers
+   * @returns Array of ComboBox items for the ids of the layers
    */
-  _addMapLayersOptions() {
+  _addComboboxMapLayersOptions() {
     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: 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 })));
+        prev.push((h("calcite-combobox-item", { textLabel: state.layerNameHash[cur], value: cur })));
       }
       return prev;
     }, []);
@@ -330,53 +191,86 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    *
    * @returns Promise when the operation has completed
    */
-  _layerSelectionChange(evt) {
-    var _a;
-    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.selectedLayerIds);
+  _layerSelectionChange() {
+    const ids = Array.isArray(this._layerElement.value) ? this._layerElement.value : [this._layerElement.value];
+    if (JSON.stringify(ids) !== JSON.stringify([""])) {
+      this.selectedLayerIds = ids;
+      this.layerSelectionChange.emit(this.selectedLayerIds);
+    }
   }
   get el() { return this; }
   static get watchers() { return {
-    "mapView": ["watchStateHandler"]
+    "mapView": ["mapViewWatchHandler"]
   }; }
   static get style() { return mapLayerPickerCss; }
 }, [0, "map-layer-picker", {
+    "appearance": [1],
     "enabledLayerIds": [16],
     "mapView": [16],
+    "placeholderIcon": [1, "placeholder-icon"],
     "selectedLayerIds": [1040],
-    "selectionMode": [1537, "selection-mode"],
-    "layerIds": [32]
+    "scale": [1],
+    "type": [1],
+    "layerIds": [32],
+    "selectedLayerName": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["map-layer-picker", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-icon", "calcite-option", "calcite-select"];
+  const components = ["map-layer-picker", "calcite-action", "calcite-button", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-icon", "calcite-loader", "calcite-option", "calcite-select"];
   components.forEach(tagName => { switch (tagName) {
     case "map-layer-picker":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, MapLayerPicker);
       }
       break;
+    case "calcite-action":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "calcite-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
     case "calcite-chip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$a();
       }
       break;
     case "calcite-combobox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$9();
       }
       break;
     case "calcite-combobox-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$8();
+      }
+      break;
+    case "calcite-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "calcite-dropdown-group":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "calcite-dropdown-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
       }
       break;
     case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-loader":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }
@@ -395,4 +289,4 @@ function defineCustomElement() {
 }
 defineCustomElement();
 
-export { MapLayerPicker as M, getMapLayerIds as a, getMapLayerView as b, getIdSets as c, defineCustomElement as d, highlightAllFeatures as e, goToSelection as g, highlightFeatures as h };
+export { MapLayerPicker as M, defineCustomElement as d };

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

@@ -5,16 +5,20 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
-import { g as goToSelection, h as highlightFeatures, b as getMapLayerView, d as defineCustomElement$1 } from './map-layer-picker2.js';
+import { g as goToSelection, h as highlightFeatures, a as getMapLayerView } from './mapViewUtils.js';
 import { b as queryObjectIds, g as getQueryGeoms, c as queryFeaturesByGeometry } from './queryUtils.js';
 import { c as EWorkflowType } from './interfaces.js';
 import { s as state } from './publicNotificationStore.js';
 import { a as getComponentClosestLanguage, g as getLocaleComponentStrings } from './locale.js';
-import { d as defineCustomElement$j } from './buffer-tools2.js';
-import { d as defineCustomElement$i } from './action.js';
-import { d as defineCustomElement$h } from './chip.js';
-import { d as defineCustomElement$g } from './combobox.js';
-import { d as defineCustomElement$f } from './combobox-item.js';
+import { d as defineCustomElement$n } from './buffer-tools2.js';
+import { d as defineCustomElement$m } from './action.js';
+import { d as defineCustomElement$l } from './button.js';
+import { d as defineCustomElement$k } from './chip.js';
+import { d as defineCustomElement$j } from './combobox.js';
+import { d as defineCustomElement$i } from './combobox-item.js';
+import { d as defineCustomElement$h } from './dropdown.js';
+import { d as defineCustomElement$g } from './dropdown-group.js';
+import { d as defineCustomElement$f } from './dropdown-item.js';
 import { d as defineCustomElement$e } from './graph.js';
 import { d as defineCustomElement$d } from './icon.js';
 import { d as defineCustomElement$c } from './input.js';
@@ -28,6 +32,7 @@ import { d as defineCustomElement$5 } from './select.js';
 import { d as defineCustomElement$4 } from './slider.js';
 import { d as defineCustomElement$3 } from './switch.js';
 import { d as defineCustomElement$2 } from './map-draw-tools2.js';
+import { d as defineCustomElement$1 } from './map-layer-picker2.js';
 
 const mapSelectToolsCss = ":host{display:block}.div-visible{display:inherit}.div-visible-search{display:flex;height:44px;align-items:center;padding-bottom:0}.div-not-visible{display:none}.padding-bottom-1{padding-bottom:1rem}.padding-top-1{padding-top:1rem}.search-widget{width:100% !important;border:1px solid var(--calcite-ui-border-input)}.w-100{width:100%}.w-50{width:50%}.search-distance-container{padding-top:\"1rem\" !important}.end-border{-webkit-border-end:1px solid var(--calcite-ui-border-2);border-inline-end:1px solid var(--calcite-ui-border-2)}.search-distance{display:flex;padding-top:1rem}.font-bold{font:bold}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.tooltip-container{display:flex}.padding-start-1-2{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}.icon{--calcite-ui-icon-color:var(--calcite-ui-brand)}.tooltip-message{padding:5px 8px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}";
 
@@ -208,7 +213,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    */
   _getUseLayerFeaturesOptions() {
     const useLayerFeaturesClass = this._useLayerFeaturesEnabled ? "div-visible" : "div-not-visible";
-    return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.useLayerFeatures, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "use-layer-features-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "use-layer-features-icon" }, h("span", { class: "tooltip-message" }, this._translations.useLayerFeaturesTooltip)), h("calcite-switch", { checked: this._useLayerFeaturesEnabled, onCalciteSwitchChange: () => { this._useLayerFeaturesEnabledChanged(); } })), h("div", { class: useLayerFeaturesClass + " padding-top-1" }, h("map-layer-picker", { enabledLayerIds: this.selectionLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedLayerIds: this.layerViews.map(l => l.layer.id), selectionMode: "single" }))));
+    return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.useLayerFeatures, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "use-layer-features-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "use-layer-features-icon" }, h("span", { class: "tooltip-message" }, this._translations.useLayerFeaturesTooltip)), h("calcite-switch", { checked: this._useLayerFeaturesEnabled, onCalciteSwitchChange: () => { this._useLayerFeaturesEnabledChanged(); } })), h("div", { class: useLayerFeaturesClass + " padding-top-1" }, h("map-layer-picker", { enabledLayerIds: this.selectionLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedLayerIds: this.layerViews.map(l => l.layer.id) }))));
   }
   /**
    * Renders the number of selected features
@@ -237,7 +242,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * @protected
    */
   _getMapLayerPicker() {
-    return (h("div", { class: "display-flex padding-sides-1 padding-bottom-1" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, this._translations.inputLayer, h("map-layer-picker", { enabledLayerIds: this.enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => this._inputLayerSelectionChange(evt), selectedLayerIds: this.selectLayerView ? [this.selectLayerView.layer.id] : this.selectionSet ? [this.selectionSet.layerView.layer.id] : [], selectionMode: "single" }))));
+    return (h("div", { class: "display-flex padding-sides-1 padding-bottom-1" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, this._translations.inputLayer, h("map-layer-picker", { enabledLayerIds: this.enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => this._inputLayerSelectionChange(evt), selectedLayerIds: this.selectLayerView ? [this.selectLayerView.layer.id] : this.selectionSet ? [this.selectionSet.layerView.layer.id] : [] }))));
   }
   //--------------------------------------------------------------------------
   //
@@ -341,7 +346,6 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
           const graphics = [searchResults.result.feature];
           this._updateSelection(graphics, useOIDs, oids);
           this._drawTools.graphics = graphics;
-          this._drawTools.updateGraphics();
           this._searchWidget.resultGraphic.visible = false;
         }
         else {
@@ -820,7 +824,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["map-select-tools", "buffer-tools", "calcite-action", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-graph", "calcite-icon", "calcite-input", "calcite-input-message", "calcite-label", "calcite-loader", "calcite-option", "calcite-popover", "calcite-progress", "calcite-select", "calcite-slider", "calcite-switch", "map-draw-tools", "map-layer-picker"];
+  const components = ["map-select-tools", "buffer-tools", "calcite-action", "calcite-button", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-graph", "calcite-icon", "calcite-input", "calcite-input-message", "calcite-label", "calcite-loader", "calcite-option", "calcite-popover", "calcite-progress", "calcite-select", "calcite-slider", "calcite-switch", "map-draw-tools", "map-layer-picker"];
   components.forEach(tagName => { switch (tagName) {
     case "map-select-tools":
       if (!customElements.get(tagName)) {
@@ -829,25 +833,45 @@ function defineCustomElement() {
       break;
     case "buffer-tools":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$n();
       }
       break;
     case "calcite-action":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$m();
+      }
+      break;
+    case "calcite-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$l();
       }
       break;
     case "calcite-chip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$k();
       }
       break;
     case "calcite-combobox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$j();
       }
       break;
     case "calcite-combobox-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "calcite-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "calcite-dropdown-group":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "calcite-dropdown-item":
       if (!customElements.get(tagName)) {
         defineCustomElement$f();
       }

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MapTools extends Components.MapTools, HTMLElement {}
+export const MapTools: {
+  prototype: MapTools;
+  new (): MapTools;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/map-tools.js

@@ -0,0 +1,11 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { M as MapTools$1, d as defineCustomElement$1 } from './map-tools2.js';
+
+const MapTools = MapTools$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MapTools, defineCustomElement };