@esri/solutions-components 0.6.33 → 0.6.35

package/dist/components/layer-table2.js

@@ -6,7 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
 import { g as getLocaleComponentStrings } from './locale.js';
-import { a as goToSelection, g as getLayerOrTable } from './mapViewUtils.js';
+import { b as goToSelection, g as getLayerOrTable } from './mapViewUtils.js';
 import { b as queryAllIds } from './queryUtils.js';
 import { d as downloadCSV } from './downloadUtils.js';
 import { d as defineCustomElement$n } from './action.js';
@@ -63,6 +63,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     this.enableAutoRefresh = undefined;
     this.enableCSV = undefined;
     this.enableInlineEdit = undefined;
+    this.enableZoom = undefined;
     this.mapInfo = undefined;
     this.mapView = undefined;
     this.onlyShowUpdatableLayers = undefined;
@@ -83,6 +84,32 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
   //  Watch handlers
   //
   //--------------------------------------------------------------------------
+  /**
+   * Reset the toolInfos when zoom tool is enabled/disabled
+   */
+  enableZoomWatchHandler() {
+    var _a;
+    if (((_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this._initToolInfos();
+    }
+  }
+  /**
+   * Reset the toolInfos when export csv is enabled/disabled
+   */
+  enableCSVWatchHandler() {
+    var _a;
+    if (((_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this._initToolInfos();
+    }
+  }
+  /**
+   * Update the table when enableInlineEdit is enabled/disabled
+   */
+  enableInlineEditWatchHandler() {
+    if (this._table) {
+      this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
+    }
+  }
   /**
    * watch for changes to the list of controls that will currently fit in the display
    */
@@ -286,7 +313,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    * @returns void
    */
   _validateEnabledActions() {
-    const featuresSelected = this._selectedIndexes.length > 0;
+    const featuresSelected = this._featuresSelected();
     const selectionDependant = [
       "zoom-to-object",
       "trash",
@@ -308,14 +335,16 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    */
   _initToolInfos() {
     var _a;
-    const featuresSelected = this._selectedIndexes.length > 0;
-    this._toolInfos = [{
+    const featuresSelected = this._featuresSelected();
+    const featuresEmpty = this._featuresEmpty();
+    this._toolInfos = [this.enableZoom ? {
         icon: "zoom-to-object",
         label: this._translations.zoom,
         func: () => this._zoom(),
         disabled: !featuresSelected,
         isOverflow: false
-      }, ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? {
+      } : undefined,
+      ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? {
         icon: "filter",
         label: this._translations.filters,
         func: () => this._filter(),
@@ -345,13 +374,13 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         icon: "list-check-all",
         func: () => this._selectAll(),
         label: this._translations.selectAll,
-        disabled: false,
+        disabled: featuresEmpty,
         isOverflow: false
       }, {
         icon: "compare",
         func: () => this._switchSelected(),
         label: this._translations.switchSelected,
-        disabled: false,
+        disabled: featuresEmpty,
         isOverflow: false
       }, {
         icon: "refresh",
@@ -364,11 +393,27 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         icon: "export",
         func: () => void this._exportToCSV(),
         label: this._translations.exportCSV,
-        disabled: false,
+        disabled: featuresEmpty,
         isOverflow: false
       } : undefined];
     this._defaultVisibleToolSizeInfos = undefined;
   }
+  /**
+   * Returns true when one ore more features are selected
+   *
+   * @returns boolean
+   */
+  _featuresSelected() {
+    return this._selectedIndexes.length > 0;
+  }
+  /**
+   * Return true when we have no features
+   *
+   * @returns boolean
+   */
+  _featuresEmpty() {
+    return this._allIds.length === 0;
+  }
   /**
    * Add/Remove tools from the action bar and dropdown based on available size
    *
@@ -597,7 +642,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
           // https://github.com/Esri/solutions-components/issues/365
           this._selectedIndexes = this._table.highlightIds.toArray().reverse();
           if (this._showOnlySelected) {
-            if (this._selectedIndexes.length > 0) {
+            if (this._featuresSelected()) {
               this._table.filterBySelection();
             }
             else {
@@ -847,7 +892,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
   async _layerSelectionChanged(evt) {
     var _a;
     const id = evt.detail[0];
-    if (id !== ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id) || this._allIds.length === 0) {
+    if (id !== ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id) || this._featuresEmpty()) {
       this._fetchingData = true;
       const layer = await getLayerOrTable(this.mapView, id);
       await layer.when(() => {
@@ -904,6 +949,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
   }
   get el() { return this; }
   static get watchers() { return {
+    "enableZoom": ["enableZoomWatchHandler"],
+    "enableCSV": ["enableCSVWatchHandler"],
+    "enableInlineEdit": ["enableInlineEditWatchHandler"],
     "_controlsThatFit": ["_controlsThatFitWatchHandler"],
     "mapView": ["mapViewWatchHandler"],
     "_layer": ["_layerWatchHandler"],
@@ -915,6 +963,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     "enableAutoRefresh": [4, "enable-auto-refresh"],
     "enableCSV": [4, "enable-c-s-v"],
     "enableInlineEdit": [4, "enable-inline-edit"],
+    "enableZoom": [4, "enable-zoom"],
     "mapInfo": [16],
     "mapView": [16],
     "onlyShowUpdatableLayers": [4, "only-show-updatable-layers"],
@@ -930,6 +979,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     "_sortActive": [32],
     "_translations": [32]
   }, [[8, "selectionChanged", "selectionChanged"], [8, "editsComplete", "editsComplete"], [8, "noLayersFound", "noLayersFound"]], {
+    "enableZoom": ["enableZoomWatchHandler"],
+    "enableCSV": ["enableCSVWatchHandler"],
+    "enableInlineEdit": ["enableInlineEditWatchHandler"],
     "_controlsThatFit": ["_controlsThatFitWatchHandler"],
     "mapView": ["mapViewWatchHandler"],
     "_layer": ["_layerWatchHandler"],

package/dist/components/map-card2.js

@@ -42,6 +42,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
      * string: the id of map currently displayed
      */
     this._loadedId = "";
+    this.enableHome = undefined;
     this.enableLegend = undefined;
     this.enableFloorFilter = undefined;
     this.enableFullscreen = undefined;
@@ -54,6 +55,17 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
     this._searchConfiguration = undefined;
     this._webMapInfo = undefined;
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Add/remove home widget
+   */
+  enableHomeWatchHandler() {
+    this._initHome();
+  }
   /**
    * Listen for changes to map info and load the appropriate map
    */
@@ -128,10 +140,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
       this._searchConfiguration = this._webMapInfo.searchConfiguration;
       this.beforeMapChanged.emit();
       await this.mapView.when(() => {
-        const home = new this.Home({
-          view: this.mapView
-        });
-        this.mapView.ui.add(home, { position: "top-left", index: 3 });
+        this._initHome();
         this.mapView.ui.add(this._mapTools, { position: "top-right", index: 0 });
         this.mapChanged.emit({
           id: id,
@@ -140,9 +149,29 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
       });
     }
   }
+  /**
+   * Add/remove the home widget base on enableHome prop
+   *
+   * @protected
+   */
+  _initHome() {
+    if (this.enableHome) {
+      this._homeWidget = new this.Home({
+        view: this.mapView
+      });
+      this.mapView.ui.add(this._homeWidget, { position: "top-left", index: 3 });
+    }
+    else if (this._homeWidget) {
+      this.mapView.ui.remove(this._homeWidget);
+    }
+  }
   get el() { return this; }
+  static get watchers() { return {
+    "enableHome": ["enableHomeWatchHandler"]
+  }; }
   static get style() { return mapCardCss; }
 }, [0, "map-card", {
+    "enableHome": [4, "enable-home"],
     "enableLegend": [4, "enable-legend"],
     "enableFloorFilter": [4, "enable-floor-filter"],
     "enableFullscreen": [4, "enable-fullscreen"],
@@ -154,7 +183,9 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
     "mapView": [16],
     "_searchConfiguration": [32],
     "_webMapInfo": [32]
-  }, [[8, "mapInfoChange", "mapInfoChange"]]]);
+  }, [[8, "mapInfoChange", "mapInfoChange"]], {
+    "enableHome": ["enableHomeWatchHandler"]
+  }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

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

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
-import { b as getMapLayerHash, c as getMapTableHash } from './mapViewUtils.js';
+import { c as getMapLayerHash, d as getMapTableHash } from './mapViewUtils.js';
 import { s as state } from './publicNotificationStore.js';
 import { d as defineCustomElement$e } from './action.js';
 import { d as defineCustomElement$d } from './button.js';

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

@@ -5,7 +5,7 @@
  */
 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, d as getFeatureLayerView } from './mapViewUtils.js';
+import { b as goToSelection, h as highlightFeatures, e 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';

package/dist/components/mapViewUtils.js

@@ -131,6 +131,23 @@ async function getLayerOrTable(mapView, id) {
   });
   return layers.length > 0 ? layers[0] : undefined;
 }
+/**
+ * Gets all of the layers from the current map when the map and their layerView is ready
+ *
+ * @param mapView the map view to fetch the layer names from
+ *
+ * @returns Promise resolving with an array of all layers
+ *
+ */
+async function getAllLayers(mapView) {
+  const layers = mapView.map.allLayers.toArray();
+  let layerViewPromises;
+  await mapView.when(() => {
+    layerViewPromises = layers.map(l => mapView.whenLayerView(l));
+  });
+  await Promise.allSettled(layerViewPromises);
+  return layers;
+}
 /**
  * Highlight features by OID
  *
@@ -239,4 +256,4 @@ async function goToSelection(ids, layerView, mapView, flashFeatures = true, feat
   }
 }
 
-export { goToSelection as a, getMapLayerHash as b, getMapTableHash as c, getFeatureLayerView as d, getIdSets as e, highlightAllFeatures as f, getLayerOrTable as g, highlightFeatures as h };
+export { getAllLayers as a, goToSelection as b, getMapLayerHash as c, getMapTableHash as d, getFeatureLayerView as e, getIdSets as f, getLayerOrTable as g, highlightFeatures as h, highlightAllFeatures as i };

package/dist/components/public-notification.js

@@ -6,7 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, getAssetPath, h, Host } from '@stencil/core/internal/client';
 import { c as EExportType, d as EPageType, E as EWorkflowType } from './interfaces.js';
 import { l as loadModules } from './loadModules.js';
-import { a as goToSelection, h as highlightFeatures } from './mapViewUtils.js';
+import { b as goToSelection, h as highlightFeatures } from './mapViewUtils.js';
 import { s as state } from './publicNotificationStore.js';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { c as consolidateLabels, r as removeDuplicateLabels } from './downloadUtils.js';

package/dist/components/refine-selection2.js

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { e as ESelectionMode, b as EDrawMode, E as EWorkflowType } from './interfaces.js';
-import { d as getFeatureLayerView, e as getIdSets, f as highlightAllFeatures } from './mapViewUtils.js';
+import { e as getFeatureLayerView, f as getIdSets, i as highlightAllFeatures } from './mapViewUtils.js';
 import { d as queryFeaturesByGeometry } from './queryUtils.js';
 import { s as state } from './publicNotificationStore.js';
 import { g as getLocaleComponentStrings } from './locale.js';

package/dist/esm/calcite-alert_3.entry.js

@@ -14,10 +14,12 @@ import { g as getBreakpoints } from './responsive-4d7ef153.js';
 import { c as createObserver } from './observers-115d1b4b.js';
 import { l as loadModules } from './loadModules-687a30c5.js';
 import { g as getLocaleComponentStrings } from './locale-6be4e8f0.js';
+import { k as getAllLayers } from './mapViewUtils-08f6cfce.js';
 import './guid-99d025c6.js';
 import './resources-bb8600a6.js';
 import './key-5ab69c42.js';
 import './_commonjsHelpers-d5f9d613.js';
+import './interfaces-7470d906.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
@@ -354,7 +356,7 @@ const EditCard = class {
     var _a;
     if (v && ((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.graphicIndex > -1) {
       this._editorLoading = true;
-      this._initEditorWidget();
+      await this._initEditorWidget();
       if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
         await this._startUpdate();
       }
@@ -436,19 +438,24 @@ const EditCard = class {
    *
    * @returns void
    */
-  _initEditorWidget() {
+  async _initEditorWidget() {
     if (this.mapView && this.graphics && this.graphics.length > 0 && this.graphics[0]) {
       if (this._editor) {
         this._editor.destroy();
       }
       const container = document.createElement("div");
+      const layers = await getAllLayers(this.mapView);
+      const layerInfos = layers.map(layer => {
+        return {
+          layer,
+          geometryUpdatesEnabled: false,
+          addEnabled: false
+        };
+      });
       this._editor = new this.Editor({
         allowedWorkflows: "update",
         view: this.mapView,
-        layerInfos: [{
-            layer: this._layer,
-            geometryUpdatesEnabled: false
-          }],
+        layerInfos,
         visibleElements: {
           snappingControls: false,
           sketchTooltipControls: false
@@ -459,6 +466,7 @@ const EditCard = class {
         this._editHandle.remove();
         this._attachmentHandle.remove();
         this._activeWorkflowHandle.remove();
+        this._addRelatedRecordHandle.remove();
       }
       this._attachmentHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "adding-attachment" ||
         this._editor.viewModel.state === "editing-attachment" ||
@@ -478,6 +486,12 @@ const EditCard = class {
           this._shouldClose = false;
         }
       });
+      // Temp workaround until a new prop is added at 4.29
+      this._addRelatedRecordHandle = this.reactiveUtils.when(() => !!this._editor.viewModel.featureFormViewModel.relatedRecordCallbacks, () => {
+        this._editor.viewModel.featureFormViewModel.relatedRecordCallbacks.addRelatedRecord = null;
+      }, {
+        once: true
+      });
       // had issues with destroy before adding like this
       this._editContainer.appendChild(container);
     }

package/dist/esm/calcite-combobox_6.entry.js

@@ -21,7 +21,7 @@ import { d as debounce } from './debounce-229b1a22.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-94095778.js';
 import { i as isActivationKey } from './key-5ab69c42.js';
 import { g as getLocaleComponentStrings } from './locale-6be4e8f0.js';
-import { k as getMapLayerHash, l as getMapTableHash } from './mapViewUtils-43c930f1.js';
+import { l as getMapLayerHash, m as getMapTableHash } from './mapViewUtils-08f6cfce.js';
 import { s as state } from './publicNotificationStore-f25d1e95.js';
 import './resources-bb8600a6.js';
 import './browser-b8a2c2d7.js';

package/dist/esm/card-manager_3.entry.js

@@ -5,9 +5,9 @@
  */
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-0740c914.js';
 import { g as getLocaleComponentStrings } from './locale-6be4e8f0.js';
-import { q as queryFeaturesByID, a as getLayerOrTable, g as goToSelection, b as queryAllIds } from './mapViewUtils-43c930f1.js';
+import { q as queryFeaturesByID, a as getLayerOrTable, g as goToSelection, b as queryAllIds } from './mapViewUtils-08f6cfce.js';
 import { l as loadModules } from './loadModules-687a30c5.js';
-import { d as downloadCSV } from './downloadUtils-ddd7eeb7.js';
+import { d as downloadCSV } from './downloadUtils-76379e4a.js';
 import './_commonjsHelpers-d5f9d613.js';
 import './interfaces-7470d906.js';
 import './clean-url-bce022e6.js';
@@ -128,6 +128,7 @@ const LayerTable = class {
     this.enableAutoRefresh = undefined;
     this.enableCSV = undefined;
     this.enableInlineEdit = undefined;
+    this.enableZoom = undefined;
     this.mapInfo = undefined;
     this.mapView = undefined;
     this.onlyShowUpdatableLayers = undefined;
@@ -148,6 +149,32 @@ const LayerTable = class {
   //  Watch handlers
   //
   //--------------------------------------------------------------------------
+  /**
+   * Reset the toolInfos when zoom tool is enabled/disabled
+   */
+  enableZoomWatchHandler() {
+    var _a;
+    if (((_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this._initToolInfos();
+    }
+  }
+  /**
+   * Reset the toolInfos when export csv is enabled/disabled
+   */
+  enableCSVWatchHandler() {
+    var _a;
+    if (((_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this._initToolInfos();
+    }
+  }
+  /**
+   * Update the table when enableInlineEdit is enabled/disabled
+   */
+  enableInlineEditWatchHandler() {
+    if (this._table) {
+      this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
+    }
+  }
   /**
    * watch for changes to the list of controls that will currently fit in the display
    */
@@ -351,7 +378,7 @@ const LayerTable = class {
    * @returns void
    */
   _validateEnabledActions() {
-    const featuresSelected = this._selectedIndexes.length > 0;
+    const featuresSelected = this._featuresSelected();
     const selectionDependant = [
       "zoom-to-object",
       "trash",
@@ -373,14 +400,16 @@ const LayerTable = class {
    */
   _initToolInfos() {
     var _a;
-    const featuresSelected = this._selectedIndexes.length > 0;
-    this._toolInfos = [{
+    const featuresSelected = this._featuresSelected();
+    const featuresEmpty = this._featuresEmpty();
+    this._toolInfos = [this.enableZoom ? {
         icon: "zoom-to-object",
         label: this._translations.zoom,
         func: () => this._zoom(),
         disabled: !featuresSelected,
         isOverflow: false
-      }, ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? {
+      } : undefined,
+      ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? {
         icon: "filter",
         label: this._translations.filters,
         func: () => this._filter(),
@@ -410,13 +439,13 @@ const LayerTable = class {
         icon: "list-check-all",
         func: () => this._selectAll(),
         label: this._translations.selectAll,
-        disabled: false,
+        disabled: featuresEmpty,
         isOverflow: false
       }, {
         icon: "compare",
         func: () => this._switchSelected(),
         label: this._translations.switchSelected,
-        disabled: false,
+        disabled: featuresEmpty,
         isOverflow: false
       }, {
         icon: "refresh",
@@ -429,11 +458,27 @@ const LayerTable = class {
         icon: "export",
         func: () => void this._exportToCSV(),
         label: this._translations.exportCSV,
-        disabled: false,
+        disabled: featuresEmpty,
         isOverflow: false
       } : undefined];
     this._defaultVisibleToolSizeInfos = undefined;
   }
+  /**
+   * Returns true when one ore more features are selected
+   *
+   * @returns boolean
+   */
+  _featuresSelected() {
+    return this._selectedIndexes.length > 0;
+  }
+  /**
+   * Return true when we have no features
+   *
+   * @returns boolean
+   */
+  _featuresEmpty() {
+    return this._allIds.length === 0;
+  }
   /**
    * Add/Remove tools from the action bar and dropdown based on available size
    *
@@ -662,7 +707,7 @@ const LayerTable = class {
           // https://github.com/Esri/solutions-components/issues/365
           this._selectedIndexes = this._table.highlightIds.toArray().reverse();
           if (this._showOnlySelected) {
-            if (this._selectedIndexes.length > 0) {
+            if (this._featuresSelected()) {
               this._table.filterBySelection();
             }
             else {
@@ -912,7 +957,7 @@ const LayerTable = class {
   async _layerSelectionChanged(evt) {
     var _a;
     const id = evt.detail[0];
-    if (id !== ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id) || this._allIds.length === 0) {
+    if (id !== ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id) || this._featuresEmpty()) {
       this._fetchingData = true;
       const layer = await getLayerOrTable(this.mapView, id);
       await layer.when(() => {
@@ -969,6 +1014,9 @@ const LayerTable = class {
   }
   get el() { return getElement(this); }
   static get watchers() { return {
+    "enableZoom": ["enableZoomWatchHandler"],
+    "enableCSV": ["enableCSVWatchHandler"],
+    "enableInlineEdit": ["enableInlineEditWatchHandler"],
     "_controlsThatFit": ["_controlsThatFitWatchHandler"],
     "mapView": ["mapViewWatchHandler"],
     "_layer": ["_layerWatchHandler"],
@@ -989,6 +1037,7 @@ const MapCard = class {
      * string: the id of map currently displayed
      */
     this._loadedId = "";
+    this.enableHome = undefined;
     this.enableLegend = undefined;
     this.enableFloorFilter = undefined;
     this.enableFullscreen = undefined;
@@ -1001,6 +1050,17 @@ const MapCard = class {
     this._searchConfiguration = undefined;
     this._webMapInfo = undefined;
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Add/remove home widget
+   */
+  enableHomeWatchHandler() {
+    this._initHome();
+  }
   /**
    * Listen for changes to map info and load the appropriate map
    */
@@ -1075,10 +1135,7 @@ const MapCard = class {
       this._searchConfiguration = this._webMapInfo.searchConfiguration;
       this.beforeMapChanged.emit();
       await this.mapView.when(() => {
-        const home = new this.Home({
-          view: this.mapView
-        });
-        this.mapView.ui.add(home, { position: "top-left", index: 3 });
+        this._initHome();
         this.mapView.ui.add(this._mapTools, { position: "top-right", index: 0 });
         this.mapChanged.emit({
           id: id,
@@ -1087,7 +1144,26 @@ const MapCard = class {
       });
     }
   }
+  /**
+   * Add/remove the home widget base on enableHome prop
+   *
+   * @protected
+   */
+  _initHome() {
+    if (this.enableHome) {
+      this._homeWidget = new this.Home({
+        view: this.mapView
+      });
+      this.mapView.ui.add(this._homeWidget, { position: "top-left", index: 3 });
+    }
+    else if (this._homeWidget) {
+      this.mapView.ui.remove(this._homeWidget);
+    }
+  }
   get el() { return getElement(this); }
+  static get watchers() { return {
+    "enableHome": ["enableHomeWatchHandler"]
+  }; }
 };
 MapCard.style = mapCardCss;