@esri/solutions-components 0.6.12 → 0.6.14

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

@@ -9,13 +9,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ee37804b.js');
 const locale = require('./locale-67f5f6b6.js');
-const mapViewUtils = require('./mapViewUtils-a4dd36ec.js');
+const mapViewUtils = require('./mapViewUtils-a2884698.js');
 const loadModules = require('./loadModules-f6df8d6a.js');
-const downloadUtils = require('./downloadUtils-43f5be48.js');
+const downloadUtils = require('./downloadUtils-34a515ad.js');
 require('./_commonjsHelpers-384729db.js');
 require('./interfaces-000be6de.js');
+require('./clean-url-d5326abb.js');
 
-const cardManagerCss = ":host{display:block !important}.display-flex{display:flex}.display-none{display:none}.w-100{width:100%}.padding-bottom-1{padding-bottom:1rem}.padding-1{padding:1rem}.position-relative{position:relative}.focus-margin{margin:1px 1px 0px 1px}.overflow-auto{overflow:auto}.border-rounded{border:1px solid var(--calcite-ui-border-2);border-radius:5px}.height-full{height:100%}card-manager{display:block}";
+const cardManagerCss = ":host{display:block !important}.display-flex{display:flex}.display-none{display:none}.w-100{width:100%}.padding-bottom-1{padding-bottom:1rem}.padding-1{padding:1rem}.position-relative{position:relative}.focus-margin{margin:1px 1px 0px 1px}.overflow-auto{overflow:auto}.height-full{height:100%}card-manager{display:block}";
 
 const CardManager = class {
   constructor(hostRef) {
@@ -58,7 +59,7 @@ const CardManager = class {
    */
   async layerSelectionChange(evt) {
     const id = evt.detail[0];
-    this.layer = await mapViewUtils.getLayer(this.mapView, id);
+    this.layer = await mapViewUtils.getLayerOrTable(this.mapView, id);
   }
   //--------------------------------------------------------------------------
   //
@@ -80,7 +81,7 @@ const CardManager = class {
     var _a, _b;
     const featuresClass = ((_a = this._graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "" : "display-none";
     const messageClass = ((_b = this._graphics) === null || _b === void 0 ? void 0 : _b.length) > 0 ? "display-none" : "";
-    return (index.h(index.Host, null, index.h("div", { class: "border-rounded overflow-auto height-full" }, index.h("calcite-shell", { class: "position-relative " + featuresClass }, index.h("div", null, index.h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), index.h("div", { class: "padding-1 " + messageClass }, index.h("calcite-notice", { icon: "table", open: true }, index.h("div", { slot: "message" }, this._translations.selectFeaturesToStart))))));
+    return (index.h(index.Host, null, index.h("div", { class: "overflow-auto height-full" }, index.h("calcite-shell", { class: "position-relative " + featuresClass }, index.h("div", null, index.h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), index.h("div", { class: "padding-1 " + messageClass }, index.h("calcite-notice", { icon: "table", open: true }, index.h("div", { slot: "message" }, this._translations.selectFeaturesToStart))))));
   }
   //--------------------------------------------------------------------------
   //
@@ -101,7 +102,7 @@ const CardManager = class {
 };
 CardManager.style = cardManagerCss;
 
-const layerTableCss = ":host{display:block}.height-full{height:100%}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.border-end{border-inline-end:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.height-51{height:51px}.bottom-left{position:absolute;left:0;bottom:0}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0}.background{background-color:var(--calcite-ui-background)}.text-color{color:var(--calcite-ui-text-1)}";
+const layerTableCss = ":host{display:block}.height-full{height:100%}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.border-end{border-inline-end:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.bottom-left{position:absolute;left:0;bottom:0}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0}.background{background-color:var(--calcite-ui-background)}.text-color{color:var(--calcite-ui-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-ui-danger)}";
 
 const LayerTable = class {
   constructor(hostRef) {
@@ -126,12 +127,16 @@ const LayerTable = class {
     this.onTableNodeCreate = (node) => {
       this._tableNode = node;
     };
+    this.enableAutoRefresh = undefined;
+    this.enableInlineEdit = undefined;
     this.mapInfo = undefined;
     this.mapView = undefined;
+    this.onlyShowUpdatableLayers = undefined;
     this.showNewestFirst = undefined;
     this.zoomAndScrollToSelected = undefined;
     this._alertOpen = false;
     this._fetchingData = false;
+    this._isDeleting = false;
     this._layer = undefined;
     this._selectedIndexes = [];
     this._showOnlySelected = false;
@@ -147,13 +152,12 @@ const LayerTable = class {
    * watch for changes in map view and get the first layer
    */
   async mapViewWatchHandler() {
-    this._fetchingData = true;
-    const mapLayerIds = await mapViewUtils.getMapLayerIds(this.mapView);
-    this._layer = await mapViewUtils.getLayer(this.mapView, mapLayerIds[0]);
-    this.reactiveUtils.on(() => this.mapView, "click", (event) => {
+    if (this._mapClickHandle) {
+      this._mapClickHandle.remove();
+    }
+    this._mapClickHandle = this.reactiveUtils.on(() => this.mapView, "click", (event) => {
       void this._mapClicked(event);
     });
-    this._fetchingData = false;
   }
   /**
    * watch for changes in layer view and verify if it has editing enabled
@@ -210,6 +214,22 @@ const LayerTable = class {
       }
     }
   }
+  /**
+   * Refresh the table when edits are completed
+   *
+   */
+  editsComplete() {
+    this._refresh();
+  }
+  /**
+   * Refresh the table when edits are completed
+   *
+   */
+  noLayersFound() {
+    this._layer = undefined;
+    this._allIds = [];
+    this._clearSelection();
+  }
   //--------------------------------------------------------------------------
   //
   //  Functions (lifecycle)
@@ -228,17 +248,13 @@ const LayerTable = class {
    * Renders the component.
    */
   render() {
-    if (!this._layer) {
-      return null;
-    }
     const tableNodeClass = this._fetchingData ? "display-none" : "";
     const loadingClass = this._fetchingData ? "" : "display-none";
-    const alertActionClass = this._alertShowAction ? "" : "display-none";
     const total = this._allIds.length.toString();
     const selected = this._selectedIndexes.length.toString();
     return (index.h(index.Host, null, index.h("calcite-shell", null, this._getTableControlRow("header"), index.h("div", { class: "height-full width-full" }, index.h("calcite-panel", { class: "height-full width-full" }, index.h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), index.h("div", { class: tableNodeClass, ref: this.onTableNodeCreate })), index.h("div", { class: "bottom-left background text-color" }, this._translations.recordsSelected
       .replace("{{total}}", total)
-      .replace("{{selected}}", selected))), index.h("calcite-alert", { icon: this._alertIcon, kind: this._alertKind, label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, index.h("div", { slot: "title" }, this._alertTitle), index.h("div", { slot: "message" }, this._alertMessage), index.h("calcite-link", { class: alertActionClass, onClick: this._alertActionFunction, slot: "link" }, this._alertActionText)))));
+      .replace("{{selected}}", selected))), this._getEditDisabledWarning()), this._deleteMessage()));
   }
   //--------------------------------------------------------------------------
   //
@@ -269,9 +285,37 @@ const LayerTable = class {
    */
   _getTableControlRow(slot) {
     const featuresSelected = this._selectedIndexes.length > 0;
-    return (index.h("div", { class: "display-flex table-border height-51", slot: slot }, index.h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, index.h("div", { class: "border-end" }, index.h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), placeholderIcon: "layers", scale: "l", type: "dropdown" })), index.h("calcite-action", { appearance: "solid", disabled: !featuresSelected, icon: "magnifying-glass", id: "magnifying-glass", label: this._translations.zoom, onClick: () => this._zoom(), text: this._translations.zoom, textEnabled: true }), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "magnifying-glass" }, index.h("span", null, this._translations.zoom)), index.h("calcite-action", { appearance: "solid", icon: "filter", id: "filter", onClick: () => this._filter(), text: this._translations.filters, "text-enabled": "true", textEnabled: true }), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "filter" }, index.h("span", null, this._translations.filters)), index.h("calcite-action", { appearance: "solid", disabled: !featuresSelected, id: "trash", onClick: () => this._delete(), text: "" }, index.h("calcite-button", { appearance: "transparent", iconStart: "trash", kind: "danger" }, this._translations.delete)), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "trash" }, index.h("span", null, this._translations.delete)), index.h("calcite-action", { appearance: "solid", disabled: !featuresSelected, icon: "erase", id: "erase", onClick: () => this._clearSelection(), text: this._translations.clearSelection, "text-enabled": "true", textEnabled: true }), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "erase" }, index.h("span", null, this._translations.clearSelection))), index.h("calcite-dropdown", null, index.h("calcite-action", { appearance: "solid", label: "", slot: "trigger", text: "" }, index.h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), index.h("calcite-dropdown-group", { "selection-mode": "none" }, index.h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), index.h("calcite-dropdown-item", { iconStart: "selected-items-filter", onClick: () => this._toggleShowSelected() }, this._showOnlySelected ? this._translations.showAll :
+    return (index.h("div", { class: "display-flex table-border height-51", slot: slot }, index.h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, index.h("div", { class: "border-end" }, index.h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", type: "dropdown" })), this._getAction("zoom-to-object", this._translations.zoom, () => this._zoom(), !featuresSelected), this._getAction("filter", this._translations.filters, () => this._filter(), false), this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !featuresSelected)), index.h("calcite-dropdown", { disabled: this._layer === undefined }, index.h("calcite-action", { appearance: "solid", label: "", slot: "trigger", text: "" }, index.h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), index.h("calcite-dropdown-group", { "selection-mode": "none" }, index.h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), index.h("calcite-dropdown-item", { iconStart: "selected-items-filter", onClick: () => this._toggleShowSelected() }, this._showOnlySelected ? this._translations.showAll :
       this._translations.showSelected), index.h("calcite-dropdown-item", { iconStart: "compare", onClick: () => this._switchSelected() }, this._translations.switchSelected), index.h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._refresh() }, this._translations.refresh), index.h("calcite-dropdown-item", { iconStart: "export", onClick: () => void this._exportToCSV() }, this._translations.exportCSV)))));
   }
+  /**
+   * Get an action and tooltip
+   *
+   * @param icon string the name of the icon to display, will also be used as the id
+   * @param label string the text to display and label the action
+   * @param func any the function to execute
+   * @param disabled boolean when true the user will not be able to interact with the action
+   *
+   * @returns VNode The node representing the DOM element that will contain the action
+   */
+  _getAction(icon, label, func, disabled) {
+    const _disabled = this._layer === undefined ? true : disabled;
+    return (index.h("div", { class: "display-flex" }, index.h("calcite-action", { appearance: "solid", disabled: _disabled, icon: icon, id: icon, label: label, onClick: func, text: label, textEnabled: true }), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, index.h("span", null, label))));
+  }
+  /**
+   * Get an action with danger color icon and text
+   *
+   * @param icon string the name of the icon to display, will also be used as the id
+   * @param label string the text to display and label the action
+   * @param func any the function to execute
+   * @param disabled boolean when true the user will not be able to interact with the action
+   *
+   * @returns VNode The node representing the DOM element that will contain the action
+   */
+  _getDangerAction(icon, label, func, disabled) {
+    const _disabled = this._layer === undefined ? true : disabled;
+    return (index.h("div", { class: "display-flex" }, index.h("calcite-action", { appearance: "solid", disabled: _disabled, id: icon, onClick: func, text: "" }, index.h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label)), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, index.h("span", null, label))));
+  }
   /**
    * Initialize the FeatureTable
    *
@@ -281,11 +325,12 @@ const LayerTable = class {
    */
   async _getTable(node, columnTemplates) {
     if (this._layer) {
-      await this._layer.when(async () => {
+      await this._layer.when(() => {
         this._table = new this.FeatureTable({
+          autoRefreshEnabled: this.enableAutoRefresh,
           layer: this._layer,
           view: this.mapView,
-          //editingEnabled: this._editEnabled,
+          editingEnabled: this._editEnabled && this.enableInlineEdit,
           highlightEnabled: true,
           multiSortEnabled: false,
           visibleElements: {
@@ -297,24 +342,25 @@ const LayerTable = class {
           },
           container: node
         });
-        await this._table.when(async () => {
-          this._table.highlightIds.on("change", () => {
-            this._selectedIndexes = this._table.highlightIds.toArray();
-            if (this._showOnlySelected) {
-              if (this._selectedIndexes.length > 0) {
-                this._table.filterBySelection();
-              }
-              else {
-                this._toggleShowSelected();
-              }
+      });
+      this._checkEditEnabled();
+      await this._table.when(() => {
+        this._table.highlightIds.on("change", () => {
+          this._selectedIndexes = this._table.highlightIds.toArray();
+          if (this._showOnlySelected) {
+            if (this._selectedIndexes.length > 0) {
+              this._table.filterBySelection();
             }
-            this.featureSelectionChange.emit(this._selectedIndexes);
-          });
-          this.reactiveUtils.watch(() => this._table.activeSortOrders, (sortOrders) => {
-            var _a, _b, _c, _d;
-            this._sortActive = (sortOrders.length > 0 && ((_a = sortOrders[0]) === null || _a === void 0 ? void 0 : _a.direction) === "asc" || ((_b = sortOrders[0]) === null || _b === void 0 ? void 0 : _b.direction) === "desc") ||
-              ((_c = sortOrders[0]) === null || _c === void 0 ? void 0 : _c.direction) === null && ((_d = sortOrders[0]) === null || _d === void 0 ? void 0 : _d.fieldName) === this._layer.objectIdField;
-          });
+            else {
+              this._toggleShowSelected();
+            }
+          }
+          this.featureSelectionChange.emit(this._selectedIndexes);
+        });
+        this.reactiveUtils.watch(() => this._table.activeSortOrders, (sortOrders) => {
+          var _a, _b, _c, _d;
+          this._sortActive = this._layer ? (sortOrders.length > 0 && ((_a = sortOrders[0]) === null || _a === void 0 ? void 0 : _a.direction) === "asc" || ((_b = sortOrders[0]) === null || _b === void 0 ? void 0 : _b.direction) === "desc") ||
+            ((_c = sortOrders[0]) === null || _c === void 0 ? void 0 : _c.direction) === null && ((_d = sortOrders[0]) === null || _d === void 0 ? void 0 : _d.fieldName) === this._layer.objectIdField : false;
         });
       });
     }
@@ -325,22 +371,41 @@ const LayerTable = class {
    * @returns void
    */
   async _resetTable() {
-    if (this._layer && this._table) {
+    if (this._table) {
       this._clearSelection();
       this._allIds = [];
       this.featureSelectionChange.emit(this._selectedIndexes);
-      const columnTemplates = this._getColumnTemplates(this._layer.id);
-      this._table.layer = this._layer;
-      this._table.tableTemplate.columnTemplates = columnTemplates;
-      this._editEnabled = this._layer.editingEnabled;
-      this._table.view = this.mapView;
-      this._table.editingEnabled = this._editEnabled;
-      this._table.clearSelectionFilter();
-      this._showOnlySelected = false;
-      this._sortActive = false;
-      await this._sortTable();
+      if (this._layer) {
+        await this._layer.when(() => {
+          const columnTemplates = this._getColumnTemplates(this._layer.id);
+          this._table.layer = this._layer;
+          this._table.tableTemplate.columnTemplates = columnTemplates;
+          this._table.view = this.mapView;
+          this._checkEditEnabled();
+          this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
+        });
+        await this._table.when(() => {
+          this._table.clearSelectionFilter();
+        });
+        this._showOnlySelected = false;
+        this._sortActive = false;
+        await this._sortTable();
+      }
+      else {
+        this._table.view = this.mapView;
+        this._table.layer = this._layer;
+      }
     }
   }
+  /**
+   * Verify edit capabilities of the layer
+   *
+   * @returns void
+   */
+  _checkEditEnabled() {
+    this._editEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsUpdate;
+    this._deleteEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsDelete;
+  }
   /**
    * Sort the objectid field in descending order
    *
@@ -350,15 +415,48 @@ const LayerTable = class {
     if (this._table && this._layer && !this._sortActive) {
       if (!this._tableSorting && this.showNewestFirst) {
         this._tableSorting = true;
-        await this._table.when(async () => {
-          await this._layer.when(async () => {
-            this._table.sortColumn(this._layer.objectIdField, "desc");
-            this._tableSorting = false;
-          });
+        await this._table.when();
+        await this._layer.when(() => {
+          this._table.sortColumn(this._layer.objectIdField, "desc");
+          this._tableSorting = false;
         });
       }
     }
   }
+  /**
+   * Show warning when editing is disabled
+   *
+   * @returns node with warning message
+   */
+  _getEditDisabledWarning() {
+    return (index.h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen && !this._confirmDelete, placement: "top" }, index.h("div", { slot: "title" }, this._translations.deleteDisabled), index.h("div", { slot: "message" }, this._translations.enableEditing)));
+  }
+  /**
+   * Show delete confirmation message
+   *
+   * @returns node to confirm or deny the delete operation
+   */
+  _deleteMessage() {
+    return (index.h("calcite-modal", { "aria-labelledby": "modal-title", kind: "danger", open: this._confirmDelete }, index.h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, index.h("calcite-icon", { "aria-hidden": "true", class: "padding-end-1 danger-color", icon: "exclamation-mark-triangle", scale: "m" }), this._translations.deleteFeature), index.h("div", { slot: "content" }, this._translations.confirm), index.h("calcite-button", { appearance: "outline", kind: "danger", onClick: () => this._alertClosed(), slot: "secondary", width: "full" }, this._translations.cancel), index.h("calcite-button", { kind: "danger", loading: this._isDeleting, onClick: () => void this._deleteFeatures(), slot: "primary", width: "full" }, this._translations.delete)));
+  }
+  /**
+   * Delete the currently selected features
+   *
+   * @returns void
+   */
+  async _deleteFeatures() {
+    this._isDeleting = true;
+    const deleteFeatures = this._table.highlightIds.toArray().map((objectId) => {
+      return { objectId };
+    });
+    await this._layer.applyEdits({
+      deleteFeatures
+    });
+    await this._table.refresh();
+    this._allIds = await mapViewUtils.queryAllIds(this._layer);
+    this._isDeleting = false;
+    this._alertClosed();
+  }
   /**
    * Handle map click events to keep table and map click selection in sync
    *
@@ -394,6 +492,7 @@ const LayerTable = class {
    */
   _alertClosed() {
     this._alertOpen = false;
+    this._confirmDelete = false;
   }
   /**
    * Select or deselect all rows
@@ -467,7 +566,8 @@ const LayerTable = class {
       ids,
       layer: this._layer
     };
-    void downloadUtils.downloadCSV(exportInfos, false, // formatUsingLayerPopup
+    void downloadUtils.downloadCSV(null, //???
+    exportInfos, false, // formatUsingLayerPopup
     false, // removeDuplicates
     true);
   }
@@ -494,25 +594,7 @@ const LayerTable = class {
    */
   _delete() {
     if (this._editEnabled) {
-      this._alertIcon = "trash";
-      this._alertTitle = this._translations.deleteRows;
-      this._alertActionText = this._translations.delete;
-      this._alertShowAction = true;
-      this._alertMessage = this._translations.confirm;
-      this._alertKind = "danger";
-      this._alertActionFunction = () => {
-        void this._layer.applyEdits({
-          deleteFeatures: this._table.highlightIds.toArray()
-        });
-        this._alertOpen = false;
-      };
-    }
-    else {
-      this._alertIcon = "layer-broken";
-      this._alertTitle = this._translations.deleteDisabled;
-      this._alertShowAction = false;
-      this._alertMessage = this._translations.enableEditing;
-      this._alertKind = "warning";
+      this._confirmDelete = true;
     }
     this._alertOpen = true;
   }
@@ -534,11 +616,12 @@ const LayerTable = class {
    * @returns a promise that will resolve when the operation is complete
    */
   async _layerSelectionChanged(evt) {
+    var _a;
     const id = evt.detail[0];
-    if (id !== this._layer.id || this._allIds.length === 0) {
+    if (id !== ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id) || this._allIds.length === 0) {
       this._fetchingData = true;
       const columnTemplates = this._getColumnTemplates(id);
-      this._layer = await mapViewUtils.getLayer(this.mapView, id);
+      this._layer = await mapViewUtils.getLayerOrTable(this.mapView, id);
       this._allIds = await mapViewUtils.queryAllIds(this._layer);
       if (!this._table) {
         await this._getTable(this._tableNode, columnTemplates);
@@ -600,10 +683,16 @@ const MapCard = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.mapChanged = index.createEvent(this, "mapChanged", 7);
+    this.beforeMapChanged = index.createEvent(this, "beforeMapChanged", 7);
     /**
      * string: the id of map currently displayed
      */
     this._loadedId = "";
+    this.enableLegend = undefined;
+    this.enableFullscreen = undefined;
+    this.enableSearch = undefined;
+    this.enableBasemap = undefined;
+    this.basemapConfig = undefined;
     this.mapInfos = [];
     this.mapView = undefined;
     this._searchConfiguration = undefined;
@@ -630,7 +719,7 @@ const MapCard = class {
    * Renders the component.
    */
   render() {
-    return (index.h(index.Host, null, index.h("map-picker", { mapInfos: this.mapInfos }), index.h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), index.h("map-tools", { class: "box-shadow", mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
+    return (index.h(index.Host, null, index.h("map-picker", { mapInfos: this.mapInfos }), index.h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), index.h("map-tools", { basemapConfig: this.basemapConfig, class: "box-shadow", enableBasemap: this.enableBasemap, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
   }
   //--------------------------------------------------------------------------
   //
@@ -680,16 +769,17 @@ const MapCard = class {
       });
       this._loadedId = id;
       this._searchConfiguration = this._webMapInfo.searchConfiguration;
-      this.mapChanged.emit({
-        id: id,
-        mapView: this.mapView
-      });
+      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.mapView.ui.add(this._mapTools, { position: "top-right", index: 0 });
+        this.mapChanged.emit({
+          id: id,
+          mapView: this.mapView
+        });
       });
     }
   }