@esri/solutions-components 0.6.13 → 0.6.14

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

@@ -4,39 +4,46 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as getMapLayerIds, c as getMapTableIds, d as getMapLayerHash, e as getMapTableHash } from './mapViewUtils.js';
+import { g as getLocaleComponentStrings } from './locale.js';
+import { b as getMapLayerHash, c as getMapTableHash } from './mapViewUtils.js';
 import { s as state } from './publicNotificationStore.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';
+import { d as defineCustomElement$e } from './action.js';
+import { d as defineCustomElement$d } from './button.js';
+import { d as defineCustomElement$c } from './chip.js';
+import { d as defineCustomElement$b } from './combobox.js';
+import { d as defineCustomElement$a } from './combobox-item.js';
+import { d as defineCustomElement$9 } from './dropdown.js';
+import { d as defineCustomElement$8 } from './dropdown-group.js';
+import { d as defineCustomElement$7 } from './dropdown-item.js';
+import { d as defineCustomElement$6 } from './icon.js';
+import { d as defineCustomElement$5 } from './loader.js';
+import { d as defineCustomElement$4 } from './notice.js';
+import { d as defineCustomElement$3 } from './option.js';
+import { d as defineCustomElement$2 } from './select.js';
+import { d as defineCustomElement$1 } from './tooltip.js';
 
-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 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}.height-100{height:100%}";
 
 const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.noLayersFound = createEvent(this, "noLayersFound", 7);
     this.layerSelectionChange = createEvent(this, "layerSelectionChange", 7);
     this.appearance = "transparent";
     this.enabledLayerIds = [];
     this.enabledTableIds = [];
     this.mapView = undefined;
+    this.onlyShowUpdatableLayers = undefined;
     this.placeholderIcon = "";
     this.selectedIds = [];
     this.scale = "m";
     this.showTables = true;
     this.type = "select";
+    this._hasValidLayers = true;
     this.ids = [];
     this.selectedName = "";
+    this._translations = undefined;
   }
   //--------------------------------------------------------------------------
   //
@@ -49,10 +56,13 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
    */
   async mapViewWatchHandler() {
     await this._setLayers();
-    const hasLayers = Object.keys(state.layerNameHash).length > 0;
-    const hasTables = Object.keys(state.tableNameHash).length > 0 && this.showTables;
-    if (hasLayers || hasTables) {
-      this._setSelectedLayer(this.ids[0], hasLayers ? "layer" : "table");
+    if (this.ids.length > 0) {
+      this._hasValidLayers = true;
+      this._setSelectedLayer(this.ids[0]);
+    }
+    else {
+      this._hasValidLayers = false;
+      this.noLayersFound.emit();
     }
   }
   //--------------------------------------------------------------------------
@@ -64,6 +74,7 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
    * StencilJS: Called once just after the component is first connected to the DOM.
    */
   async componentWillLoad() {
+    await this._getTranslations();
     await this._setLayers();
     if (this.ids.length > 0 || this.selectedIds.length === 1) {
       this.layerSelectionChange.emit(this.selectedIds.length === 1 ? [this.selectedIds[0]] : [this.ids[0]]);
@@ -73,7 +84,7 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
    * Renders the component.
    */
   render() {
-    return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, this.type === "combobox" ? this._getCombobox() :
+    return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, !this._hasValidLayers ? this._getInvalidPlaceholder() : this.type === "combobox" ? this._getCombobox() :
       this.type === "select" ? this._getSelect() : this._getDropdown()))));
   }
   /**
@@ -86,9 +97,9 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
         this._layerElement.value = id;
       }
       else if (this.type === "dropdown") {
-        this.selectedName = Object.keys(state.layerNameHash).indexOf(id) > -1 ?
-          state.layerNameHash[id] : Object.keys(state.tableNameHash).indexOf(id) > -1 ?
-          state.tableNameHash[id] : "";
+        this.selectedName = Object.keys(this._layerNameHash).indexOf(id) > -1 ?
+          this._layerNameHash[id].name : Object.keys(this._tableNameHash).indexOf(id) > -1 ?
+          this._tableNameHash[id].name : "";
       }
     }
   }
@@ -97,6 +108,14 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
   //  Functions (protected)
   //
   //--------------------------------------------------------------------------
+  /**
+   * Create a notice to inform the user that no layers were found
+   *
+   * @returns Calcite Notice component with the message
+   */
+  _getInvalidPlaceholder() {
+    return (h("div", null, h("calcite-notice", { class: "height-100", icon: "exclamation-mark-triangle", id: "no-valid-layers", kind: "danger", open: true }, h("div", { slot: "message" }, this._translations.noLayersFound)), h("calcite-tooltip", { label: this._translations.enableEditUpdate, placement: "bottom", "reference-element": "no-valid-layers" }, h("span", null, this._translations.enableEditUpdate))));
+  }
   /**
    * Create a list of layers from the map
    *
@@ -147,16 +166,21 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
    * @returns A dom node with the name of the layer or table
    */
   _getItem(id, itemType) {
-    const name = itemType === "layer" ? state.layerNameHash[id] : state.tableNameHash[id];
-    return this.type === "combobox" ? (h("calcite-combobox-item", { textLabel: name, value: id })) :
-      this.type === "select" ? (h("calcite-option", { label: name, value: id })) :
-        (h("calcite-dropdown-item", { onClick: () => void this._setSelectedLayer(id, itemType) }, name));
+    const item = itemType === "layer" ? this._layerNameHash[id] : this._tableNameHash[id];
+    const disabled = this.onlyShowUpdatableLayers ? !item.supportsUpdate : false;
+    const name = item.name;
+    return this.type === "combobox" ? (h("calcite-combobox-item", { disabled: disabled, textLabel: name, value: id })) :
+      this.type === "select" ? (h("calcite-option", { disabled: disabled, label: name, value: id })) :
+        (h("calcite-dropdown-item", { disabled: disabled, onClick: disabled ? undefined : () => void this._setSelectedLayer(id) }, name));
   }
   /**
    * Store the layer name based on the user selection
    */
-  _setSelectedLayer(id, type) {
-    this.selectedName = type === "layer" ? state.layerNameHash[id] : state.tableNameHash[id];
+  _setSelectedLayer(id) {
+    const item = Object.keys(this._layerNameHash).indexOf(id) > -1 ?
+      this._layerNameHash[id] : Object.keys(this._tableNameHash).indexOf(id) > -1 ?
+      this._tableNameHash[id] : undefined;
+    this.selectedName = item === null || item === void 0 ? void 0 : item.name;
     this.selectedIds = [id];
     this.layerSelectionChange.emit(this.selectedIds);
   }
@@ -167,25 +191,38 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
    */
   async _setLayers() {
     if (this.mapView) {
-      const mapLayerIds = await getMapLayerIds(this.mapView);
-      const mapTableIds = this.showTables ? await getMapTableIds(this.mapView) : [];
+      await this._initLayerTableHash();
+      const mapLayerIds = this.onlyShowUpdatableLayers ?
+        this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash);
+      const mapTableIds = this.showTables ? this.onlyShowUpdatableLayers ?
+        this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
       this.ids = [
         ...mapLayerIds.filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.indexOf(n) > -1 : true; }),
         ...mapTableIds.filter(n => { var _a; return ((_a = this.enabledTableIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledTableIds.indexOf(n) > -1 : true; }),
       ];
-      await this._initStateHash();
     }
   }
+  /**
+   * Fetch the ids of all layers that support edits with the update capability
+   *
+   * @returns array of layer ids
+   */
+  _getEditableIds(hash) {
+    return Object.keys(hash).reduce((prev, cur) => {
+      if (hash[cur].supportsUpdate) {
+        prev.push(cur);
+      }
+      return prev;
+    }, []);
+  }
   /**
    * Create a layer id:title hash for layer name display
    *
    * @returns Promise when the operation has completed
    */
-  async _initStateHash() {
-    if (this.mapView) {
-      state.layerNameHash = await getMapLayerHash(this.mapView);
-      state.tableNameHash = this.showTables ? await getMapTableHash(this.mapView) : {};
-    }
+  async _initLayerTableHash() {
+    this._layerNameHash = await getMapLayerHash(this.mapView, this.onlyShowUpdatableLayers);
+    this._tableNameHash = this.showTables ? await getMapTableHash(this.mapView, this.onlyShowUpdatableLayers) : {};
   }
   /**
    * Evaluate if the id exists in the current hash and verify if it should be excluded
@@ -193,9 +230,10 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
    * @returns boolean when true the layer will be used in the current layer picker type
    */
   _validLayer(id) {
-    const name = state.layerNameHash[id];
+    var _a;
+    const name = (_a = this._layerNameHash[id]) === null || _a === void 0 ? void 0 : _a.name;
     return name && state.managedLayers.indexOf(name) < 0 && (this.enabledLayerIds.length > 0 ?
-      this.enabledLayerIds.indexOf(id) > -1 : name);
+      this.enabledLayerIds.indexOf(id) > -1 : true);
   }
   /**
    * Evaluate if the id exists in the current hash and verify if it should be excluded
@@ -203,7 +241,8 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
    * @returns boolean when true the table will be used in the current layer picker type
    */
   _validTable(id) {
-    const name = state.tableNameHash[id];
+    var _a;
+    const name = (_a = this._tableNameHash[id]) === null || _a === void 0 ? void 0 : _a.name;
     const validName = name && this.showTables;
     return validName ? state.managedTables.indexOf(name) < 0 &&
       (this.enabledTableIds.length > 0 ? this.enabledTableIds.indexOf(id) > -1 : true) : validName;
@@ -220,6 +259,16 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
       this.layerSelectionChange.emit(this.selectedIds);
     }
   }
+  /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   * @protected
+   */
+  async _getTranslations() {
+    const messages = await getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
+  }
   get el() { return this; }
   static get watchers() { return {
     "mapView": ["mapViewWatchHandler"]
@@ -230,19 +279,22 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
     "enabledLayerIds": [16],
     "enabledTableIds": [16],
     "mapView": [16],
+    "onlyShowUpdatableLayers": [4, "only-show-updatable-layers"],
     "placeholderIcon": [1, "placeholder-icon"],
     "selectedIds": [1040],
     "scale": [1],
     "showTables": [4, "show-tables"],
     "type": [1],
+    "_hasValidLayers": [32],
     "ids": [32],
-    "selectedName": [32]
+    "selectedName": [32],
+    "_translations": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  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"];
+  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-notice", "calcite-option", "calcite-select", "calcite-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "map-layer-picker":
       if (!customElements.get(tagName)) {
@@ -251,60 +303,70 @@ function defineCustomElement() {
       break;
     case "calcite-action":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$e();
       }
       break;
     case "calcite-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$d();
       }
       break;
     case "calcite-chip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$c();
       }
       break;
     case "calcite-combobox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$b();
       }
       break;
     case "calcite-combobox-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$a();
       }
       break;
     case "calcite-dropdown":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$9();
       }
       break;
     case "calcite-dropdown-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$8();
       }
       break;
     case "calcite-dropdown-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$7();
       }
       break;
     case "calcite-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$6();
       }
       break;
     case "calcite-loader":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$5();
+      }
+      break;
+    case "calcite-notice":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
       }
       break;
     case "calcite-option":
       if (!customElements.get(tagName)) {
-        defineCustomElement$2();
+        defineCustomElement$3();
       }
       break;
     case "calcite-select":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "calcite-tooltip":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }

package/dist/components/map-picker2.js

@@ -21,7 +21,7 @@ import { d as defineCustomElement$3 } from './progress.js';
 import { d as defineCustomElement$2 } from './scrim.js';
 import { d as defineCustomElement$1 } from './stack.js';
 
-const mapPickerCss = ":host{display:block}.width-full{width:100%}.height-full{height:100%}.display-flex{display:flex}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}.action-bar-size{height:51px;width:100%}.map-list{position:absolute;display:flex;flex-direction:column;overflow:hidden;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-scrim-background);z-index:1000;width:100%;height:-moz-fit-content;height:fit-content}.display-none{display:none}.action-bar-color{background-color:var(--calcite-ui-border-3) !important}";
+const mapPickerCss = ":host{display:block}.width-full{width:100%}.height-full{height:100%}.display-flex{display:flex}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}.action-bar-size{height:51px;width:100%}.map-list{position:absolute;display:flex;flex-direction:column;overflow:hidden;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-ui-background);z-index:1000;width:100%;height:-moz-fit-content;height:fit-content}.display-none{display:none}.action-bar-color{background-color:var(--calcite-ui-border-3) !important}.align-center{align-items:center}";
 
 const MapPicker = /*@__PURE__*/ proxyCustomElement(class MapPicker extends HTMLElement {
   constructor() {
@@ -54,9 +54,9 @@ const MapPicker = /*@__PURE__*/ proxyCustomElement(class MapPicker extends HTMLE
   /**
    * Called each time the mapInfos prop is changed.
    */
-  mapInfosWatchHandler(v, oldV) {
+  async mapInfosWatchHandler(v, oldV) {
     if (v && JSON.stringify(v) !== JSON.stringify(oldV)) {
-      this.mapInfoChange.emit(v[0]);
+      this._webMapSelected(v[0]);
     }
   }
   //--------------------------------------------------------------------------
@@ -81,7 +81,7 @@ const MapPicker = /*@__PURE__*/ proxyCustomElement(class MapPicker extends HTMLE
   /**
    * Called once after the component has loaded
    */
-  componentDidLoad() {
+  async componentDidLoad() {
     const webMapInfo = this.mapInfos && this.mapInfos.length > 0 ? this.mapInfos[0] : undefined;
     if (webMapInfo) {
       this._webMapSelected(webMapInfo);

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

@@ -5,32 +5,34 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
-import { b as goToSelection, h as highlightFeatures, f as getFeatureLayerView } from './mapViewUtils.js';
+import { a as goToSelection, h as highlightFeatures, d as getFeatureLayerView } from './mapViewUtils.js';
 import { c as queryObjectIds, g as getQueryGeoms, d as queryFeaturesByGeometry } from './queryUtils.js';
 import { E 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$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';
-import { d as defineCustomElement$b } from './input-message.js';
-import { d as defineCustomElement$a } from './label2.js';
-import { d as defineCustomElement$9 } from './loader.js';
-import { d as defineCustomElement$8 } from './option.js';
-import { d as defineCustomElement$7 } from './popover.js';
-import { d as defineCustomElement$6 } from './progress.js';
-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$p } from './buffer-tools2.js';
+import { d as defineCustomElement$o } from './action.js';
+import { d as defineCustomElement$n } from './button.js';
+import { d as defineCustomElement$m } from './chip.js';
+import { d as defineCustomElement$l } from './combobox.js';
+import { d as defineCustomElement$k } from './combobox-item.js';
+import { d as defineCustomElement$j } from './dropdown.js';
+import { d as defineCustomElement$i } from './dropdown-group.js';
+import { d as defineCustomElement$h } from './dropdown-item.js';
+import { d as defineCustomElement$g } from './graph.js';
+import { d as defineCustomElement$f } from './icon.js';
+import { d as defineCustomElement$e } from './input.js';
+import { d as defineCustomElement$d } from './input-message.js';
+import { d as defineCustomElement$c } from './label2.js';
+import { d as defineCustomElement$b } from './loader.js';
+import { d as defineCustomElement$a } from './notice.js';
+import { d as defineCustomElement$9 } from './option.js';
+import { d as defineCustomElement$8 } from './popover.js';
+import { d as defineCustomElement$7 } from './progress.js';
+import { d as defineCustomElement$6 } from './select.js';
+import { d as defineCustomElement$5 } from './slider.js';
+import { d as defineCustomElement$4 } from './switch.js';
+import { d as defineCustomElement$3 } from './tooltip.js';
 import { d as defineCustomElement$2 } from './map-draw-tools2.js';
 import { d as defineCustomElement$1 } from './map-layer-picker2.js';
 
@@ -830,7 +832,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  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"];
+  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-notice", "calcite-option", "calcite-popover", "calcite-progress", "calcite-select", "calcite-slider", "calcite-switch", "calcite-tooltip", "map-draw-tools", "map-layer-picker"];
   components.forEach(tagName => { switch (tagName) {
     case "map-select-tools":
       if (!customElements.get(tagName)) {
@@ -839,105 +841,115 @@ function defineCustomElement() {
       break;
     case "buffer-tools":
       if (!customElements.get(tagName)) {
-        defineCustomElement$n();
+        defineCustomElement$p();
       }
       break;
     case "calcite-action":
       if (!customElements.get(tagName)) {
-        defineCustomElement$m();
+        defineCustomElement$o();
       }
       break;
     case "calcite-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$l();
+        defineCustomElement$n();
       }
       break;
     case "calcite-chip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$m();
       }
       break;
     case "calcite-combobox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$l();
       }
       break;
     case "calcite-combobox-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$k();
       }
       break;
     case "calcite-dropdown":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$j();
       }
       break;
     case "calcite-dropdown-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$i();
       }
       break;
     case "calcite-dropdown-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$h();
       }
       break;
     case "calcite-graph":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$g();
       }
       break;
     case "calcite-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$f();
       }
       break;
     case "calcite-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$e();
       }
       break;
     case "calcite-input-message":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$d();
       }
       break;
     case "calcite-label":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$c();
       }
       break;
     case "calcite-loader":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$b();
+      }
+      break;
+    case "calcite-notice":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
       }
       break;
     case "calcite-option":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "calcite-popover":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "calcite-progress":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "calcite-select":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "calcite-slider":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "calcite-switch":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-tooltip":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/map-tools2.js

@@ -21,6 +21,11 @@ const MapTools = /*@__PURE__*/ proxyCustomElement(class MapTools extends HTMLEle
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.enableLegend = undefined;
+    this.enableFullscreen = undefined;
+    this.enableSearch = undefined;
+    this.enableBasemap = undefined;
+    this.basemapConfig = undefined;
     this.layout = "vertical";
     this.mapView = undefined;
     this.searchConfiguration = undefined;
@@ -124,7 +129,16 @@ const MapTools = /*@__PURE__*/ proxyCustomElement(class MapTools extends HTMLEle
     const fullscreenIcon = this._showFullscreen ? "full-screen-exit" : "full-screen";
     const fullscreenTip = this._showFullscreen ? this._translations.exitFullscreen : this._translations.enterFullscreen;
     const expandTip = this._showTools ? this._translations.collapse : this._translations.expand;
-    return (h(Host, null, h("div", null, h("div", { class: "box-shadow" }, this._getActionGroup(toggleIcon, false, expandTip, () => this._toggleTools())), h("div", { class: `margin-top-1-2 box-shadow ${toolsClass}` }, this._getActionGroup("legend", false, this._translations.legend, () => this._showLegend()), this._getActionGroup("magnifying-glass", false, this._translations.search, () => this._search()), this._getActionGroup(fullscreenIcon, false, fullscreenTip, () => this._expand()), this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker()))), h("basemap-gallery", { class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, ref: (el) => { this._fullscreenElement = el; } })));
+    const containerClass = !this.enableBasemap && !this.enableFullscreen && !this.enableLegend && !this.enableSearch ? "display-none" : "";
+    return (h(Host, null, h("div", { class: containerClass }, h("div", { class: "box-shadow" }, this._getActionGroup(toggleIcon, false, expandTip, () => this._toggleTools())), h("div", { class: `margin-top-1-2 box-shadow ${toolsClass}` }, this.enableLegend ?
+      this._getActionGroup("legend", false, this._translations.legend, () => this._showLegend()) :
+      undefined, this.enableSearch ?
+      this._getActionGroup("magnifying-glass", false, this._translations.search, () => this._search()) :
+      undefined, this.enableFullscreen ?
+      this._getActionGroup(fullscreenIcon, false, fullscreenTip, () => this._expand()) :
+      undefined, this.enableBasemap ?
+      this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker()) :
+      undefined)), h("basemap-gallery", { basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, ref: (el) => { this._fullscreenElement = el; } })));
   }
   //--------------------------------------------------------------------------
   //
@@ -211,6 +225,11 @@ const MapTools = /*@__PURE__*/ proxyCustomElement(class MapTools extends HTMLEle
   }; }
   static get style() { return mapToolsCss; }
 }, [1, "map-tools", {
+    "enableLegend": [4, "enable-legend"],
+    "enableFullscreen": [4, "enable-fullscreen"],
+    "enableSearch": [4, "enable-search"],
+    "enableBasemap": [4, "enable-basemap"],
+    "basemapConfig": [16],
     "layout": [1],
     "mapView": [16],
     "searchConfiguration": [16],