@esri/solutions-components 0.6.1 → 0.6.3

package/dist/collection/components/map-card/map-card.js

@@ -18,10 +18,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 import { getLocaleComponentStrings } from "../../utils/locale";
-import { EExpandType } from "../../utils/interfaces";
 // TODO navigation and accessability isn't right for the map list
 //   tab does not go into the list when it's open
 //   focus is not set when it opens
@@ -39,7 +38,7 @@ export class MapCard {
     this.mapView = undefined;
     this._mapListExpanded = false;
     this._translations = undefined;
-    this._webMapId = "";
+    this._webMapInfo = undefined;
   }
   //--------------------------------------------------------------------------
   //
@@ -47,9 +46,9 @@ export class MapCard {
   //
   //--------------------------------------------------------------------------
   /**
-   * Called each time the _webMapId prop is changed.
+   * Called each time the _webMapInfo prop is changed.
    */
-  _webMapIdWatchHandler(v, oldV) {
+  _webMapInfoWatchHandler(v, oldV) {
     if (v && JSON.stringify(v) !== JSON.stringify(oldV)) {
       this._loadMap(v);
     }
@@ -59,7 +58,7 @@ export class MapCard {
    */
   mapInfosWatchHandler(v, oldV) {
     if (v && JSON.stringify(v) !== JSON.stringify(oldV)) {
-      this._loadMap(v[0].id);
+      this._loadMap(v[0]);
     }
   }
   //--------------------------------------------------------------------------
@@ -79,13 +78,13 @@ export class MapCard {
    */
   componentDidRender() {
     // the container node for the map view needs to exist before the view is created
-    this._loadMap(this._webMapId);
+    this._loadMap(this._webMapInfo);
   }
   /**
    * Renders the component.
    */
   render() {
-    return (h(Host, null, this._getToolbar(), this._getMapNameList(this._mapListExpanded), h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) })));
+    return (h(Host, null, this._getToolbar(), this._getMapNameList(this._mapListExpanded), h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), h("map-tools", { class: "map-tools" })));
   }
   //--------------------------------------------------------------------------
   //
@@ -115,21 +114,22 @@ export class MapCard {
    * @protected
    */
   _getToolbar() {
-    return (h("div", { class: "display-flex" }, h("calcite-action-bar", { class: "border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: "header" }, this._getMapPicker(), this._getActionGroup("home", false, this._translations.home, () => this._goHome()), this._getActionGroup("list", false, this._translations.list, () => this._showList()), this._getActionGroup("magnifying-glass-plus", false, this._translations.search, () => this._search()), this._getActionGroup("plus", false, this._translations.zoomIn, () => this._zoomIn()), this._getActionGroup("minus", false, this._translations.zoomOut, () => this._zoomOut()), this._getActionGroup("expand", false, this._translations.expand, () => this._expand()))));
+    return (h("div", { class: "display-flex" }, h("calcite-action-bar", { class: "border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: "header" }, this._getMapPicker())));
   }
   /**
-   * Load the webmap for the provided id
+   * Load the webmap for the provided webMapInfo
    *
-   * @param id the webmap id to load
+   * @param webMapInfo the webmap id and name to load
    *
    * @returns void
    *
    * @protected
    */
-  _loadMap(id) {
+  _loadMap(webMapInfo) {
+    const id = webMapInfo === null || webMapInfo === void 0 ? void 0 : webMapInfo.id;
     // on the first render use the first child of the provided mapInfos
-    if (id === "" && this.mapInfos.length > 0) {
-      id = this.mapInfos[0].id;
+    if ((id === "" || !id) && this.mapInfos.length > 0) {
+      this._webMapInfo = this.mapInfos[0];
     }
     if (this._loadedId !== id) {
       const webMap = new this.WebMap({
@@ -145,21 +145,6 @@ export class MapCard {
       this.mapChanged.emit(this.mapView);
     }
   }
-  /**
-   * Get a calcite action group for the current action
-   *
-   * @param icon the icon to display for the current action
-   * @param disabled should the action be disabled
-   * @param tip information tip to display helpful details to end user
-   * @param func the associated onClick function to execute
-   *
-   * @returns the dom node for the action group
-   *
-   * @protected
-   */
-  _getActionGroup(icon, disabled, tip, func) {
-    return (h("calcite-action-group", { class: "action-center width-1-6", layout: "horizontal" }, h("calcite-action", { alignment: "center", class: "width-full height-full", compact: false, disabled: disabled, icon: icon, id: icon, onClick: func, text: "" }, h("calcite-icon", { icon: "cheveron-up", scale: "s", slot: "icon" })), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, tip))));
-  }
   /**
    * Get a calcite action group for the map list
    * Actions do not support multiple icons so this uses a block
@@ -169,8 +154,9 @@ export class MapCard {
    * @protected
    */
   _getMapPicker() {
+    var _a;
     const mapListIcon = this._mapListExpanded ? "chevron-up" : "chevron-down";
-    return (h("calcite-action-group", { class: "action-center width-1-6", layout: "horizontal" }, h("calcite-block", { class: "action-center block-button width-full height-full display-grid", heading: '', onClick: () => this._chooseMap() }, h("calcite-icon", { icon: "map", scale: "s", slot: "icon" }), h("calcite-icon", { icon: mapListIcon, scale: "s", slot: "icon" }), h("calcite-tooltip", { label: "", placement: "bottom" }, h("span", null, this._translations.mapName)))));
+    return (h("calcite-button", { alignment: "icon-end-space-between", appearance: "solid", class: "width-full height-full", iconEnd: mapListIcon, kind: "neutral", onClick: () => this._chooseMap(), width: "full" }, (_a = this._webMapInfo) === null || _a === void 0 ? void 0 : _a.name));
   }
   /**
    * Get a pick list for all maps in mapInfos
@@ -183,22 +169,22 @@ export class MapCard {
    */
   _getMapNameList(show) {
     const listClass = show ? "map-list" : "display-none";
-    return (h("div", { class: listClass }, h("calcite-pick-list", { id: "mapList" }, this.mapInfos.map(mapInfo => {
-      return (h("calcite-pick-list-item", { label: mapInfo.name, onClick: () => this._webMapSelected(mapInfo.id), selected: mapInfo.id === this._loadedId, value: mapInfo.id }));
+    return (h("div", { class: listClass }, h("calcite-list", { id: "mapList" }, this.mapInfos.map(mapInfo => {
+      return (h("calcite-list-item", { label: mapInfo.name, onClick: () => this._webMapSelected(mapInfo), selected: mapInfo.id === this._loadedId, value: mapInfo.id }));
     }))));
   }
   /**
    * Fired when the user clicks on the map list
    *
-   * @param id the web map id selected from the list
+   * @param webMapInfo the web map id and name selected from the list
    *
    * @returns void
    *
    * @protected
    */
-  _webMapSelected(id) {
+  _webMapSelected(webMapInfo) {
     this._mapListExpanded = false;
-    this._webMapId = id;
+    this._webMapInfo = webMapInfo;
   }
   /**
    * Toggles the open/close state of the map list
@@ -209,41 +195,6 @@ export class MapCard {
    */
   _chooseMap() {
     this._mapListExpanded = !this._mapListExpanded;
-    if (this._mapListExpanded) {
-      //const mapList = document.getElementById("mapList");
-      // TODO figure out why this doesn't work
-      //await (mapList.children[0] as HTMLCalcitePickListItemElement).setFocus();
-    }
-  }
-  // Need to discuss this with the team
-  _goHome() {
-    alert("go home");
-  }
-  // need to discuss this with the team
-  _showList() {
-    alert("show list");
-  }
-  // Need to discuss this with the team
-  _search() {
-    alert("search");
-  }
-  // Need to explore map fixed zoom in considerations
-  _zoomIn() {
-    alert("zoom in");
-  }
-  // Need to explore map fixed zoom out considerations
-  _zoomOut() {
-    alert("zoom out");
-  }
-  /**
-   * Emit the expand map event
-   *
-   * @returns void
-   *
-   * @protected
-   */
-  _expand() {
-    this.expandMap.emit(EExpandType.EXPAND);
   }
   /**
    * Fetches the component's translations
@@ -314,31 +265,11 @@ export class MapCard {
     return {
       "_mapListExpanded": {},
       "_translations": {},
-      "_webMapId": {}
+      "_webMapInfo": {}
     };
   }
   static get events() {
     return [{
-        "method": "expandMap",
-        "name": "expandMap",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the expand button is clicked"
-        },
-        "complexType": {
-          "original": "EExpandType",
-          "resolved": "EExpandType.COLLAPSE | EExpandType.EXPAND",
-          "references": {
-            "EExpandType": {
-              "location": "import",
-              "path": "../../utils/interfaces"
-            }
-          }
-        }
-      }, {
         "method": "mapChanged",
         "name": "mapChanged",
         "bubbles": true,
@@ -362,8 +293,8 @@ export class MapCard {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "_webMapId",
-        "methodName": "_webMapIdWatchHandler"
+        "propName": "_webMapInfo",
+        "methodName": "_webMapInfoWatchHandler"
       }, {
         "propName": "mapInfos",
         "methodName": "mapInfosWatchHandler"

package/dist/collection/components/map-layer-picker/map-layer-picker.css

@@ -31,3 +31,12 @@
 .padding-bottom-1 {
   padding-bottom: 1rem;
 }
+
+.layer-picker-dropdown {
+  height: 100%;
+  width: 100%;
+}
+
+.max-width-350 {
+  max-width: 350px;
+}

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

@@ -23,11 +23,15 @@ import { getMapLayerHash, getMapLayerIds } from "../../utils/mapViewUtils";
 import state from "../../utils/publicNotificationStore";
 export class MapLayerPicker {
   constructor() {
+    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 = "";
   }
   //--------------------------------------------------------------------------
   //
@@ -38,13 +42,9 @@ export class MapLayerPicker {
    * 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]);
   }
   //--------------------------------------------------------------------------
   //
@@ -56,7 +56,7 @@ export class MapLayerPicker {
    */
   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]]);
     }
   }
@@ -64,7 +64,22 @@ export class MapLayerPicker {
    * 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];
+      }
+    }
   }
   //--------------------------------------------------------------------------
   //
@@ -79,7 +94,7 @@ export class MapLayerPicker {
    * @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
@@ -89,23 +104,59 @@ export class MapLayerPicker {
    * @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 or combobox component with the ids of the layers in the map
+   * Hydrate a select 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 select options for the ids of the layers
    */
-  _addMapLayersOptions() {
+  _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(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-option", { label: state.layerNameHash[cur], value: cur })));
+      }
+      return prev;
+    }, []);
+  }
+  /**
+   * Hydrate a combobox component with the ids of the layers in the map
+   *
+   * @returns Array of ComboBox items for the ids of the layers
+   */
+  _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((h("calcite-combobox-item", { textLabel: state.layerNameHash[cur], value: cur })));
       }
       return prev;
     }, []);
@@ -137,13 +188,12 @@ export class MapLayerPicker {
    *
    * @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);
+    }
   }
   static get is() { return "map-layer-picker"; }
   static get originalStyleUrls() {
@@ -158,6 +208,24 @@ export class MapLayerPicker {
   }
   static get properties() {
     return {
+      "appearance": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"transparent\" | \"solid\"",
+          "resolved": "\"solid\" | \"transparent\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "\"transparent\" | \"solid\": controls the button appearance when using the \"dropdown\" type"
+        },
+        "attribute": "appearance",
+        "reflect": false,
+        "defaultValue": "\"transparent\""
+      },
       "enabledLayerIds": {
         "type": "unknown",
         "mutable": false,
@@ -193,6 +261,24 @@ export class MapLayerPicker {
           "text": "esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
         }
       },
+      "placeholderIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "string: optional placeholder icon used with \"combobox\" type"
+        },
+        "attribute": "placeholder-icon",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
       "selectedLayerIds": {
         "type": "unknown",
         "mutable": true,
@@ -209,34 +295,48 @@ export class MapLayerPicker {
         },
         "defaultValue": "[]"
       },
-      "selectionMode": {
+      "scale": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
-          "original": "SelectionMode",
-          "resolved": "\"multi\" | \"single\"",
-          "references": {
-            "SelectionMode": {
-              "location": "import",
-              "path": "../../utils/interfaces"
-            }
-          }
+          "original": "\"s\" | \"m\" | \"l\"",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "\"s\" | \"m\" | \"l\": scale to render the component"
+        },
+        "attribute": "scale",
+        "reflect": false,
+        "defaultValue": "\"m\""
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"select\" | \"combobox\" | \"dropdown\"",
+          "resolved": "\"combobox\" | \"dropdown\" | \"select\"",
+          "references": {}
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "SelectionMode: \"single\" | \"multi\"\r\n\r\nShould the component support selection against a single layer or multiple layers."
+          "text": "\"select\" | \"combobox\" | \"dropdown\": type of component to leverage"
         },
-        "attribute": "selection-mode",
-        "reflect": true,
-        "defaultValue": "\"single\""
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "\"select\""
       }
     };
   }
   static get states() {
     return {
-      "layerIds": {}
+      "layerIds": {},
+      "selectedLayerName": {}
     };
   }
   static get events() {
@@ -261,7 +361,7 @@ export class MapLayerPicker {
   static get watchers() {
     return [{
         "propName": "mapView",
-        "methodName": "watchStateHandler"
+        "methodName": "mapViewWatchHandler"
       }];
   }
 }

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

@@ -199,7 +199,7 @@ export class MapSelectTools {
    */
   _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
@@ -228,7 +228,7 @@ export class MapSelectTools {
    * @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] : [] }))));
   }
   //--------------------------------------------------------------------------
   //
@@ -332,7 +332,6 @@ export class MapSelectTools {
           const graphics = [searchResults.result.feature];
           this._updateSelection(graphics, useOIDs, oids);
           this._drawTools.graphics = graphics;
-          this._drawTools.updateGraphics();
           this._searchWidget.resultGraphic.visible = false;
         }
         else {
@@ -968,7 +967,7 @@ export class MapSelectTools {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
+          "text": "esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
         }
       },
       "noResultText": {

package/dist/collection/components/map-tools/map-tools.css

@@ -0,0 +1,31 @@
+/** @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.
+ */
+
+:host {
+  display: block;
+}
+
+.display-none {
+  display: none;
+}
+
+.border {
+  border: 1px solid var(--calcite-ui-border-3);
+}
+
+.margin-top-1-2 {
+  margin-top: 0.5rem;
+}