@esri/solutions-components 0.6.7 → 0.6.8

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

@@ -7,674 +7,728 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-6654298b.js');
-const locale = require('./locale-b113c6b2.js');
-const mapViewUtils = require('./mapViewUtils-77a1ff88.js');
-const loadModules = require('./loadModules-ae7715f2.js');
-const downloadUtils = require('./downloadUtils-6eb59363.js');
-const interfaces = require('./interfaces-ad03ec39.js');
+const index = require('./index-0e50040c.js');
+const locale = require('./locale-d15cd743.js');
+const mapViewUtils = require('./mapViewUtils-9da2dddd.js');
+const loadModules = require('./loadModules-31cab7ac.js');
+const downloadUtils = require('./downloadUtils-a8c530f7.js');
+const interfaces = require('./interfaces-d539e30c.js');
 require('./_commonjsHelpers-384729db.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 CardManager = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.layer = undefined;
-    this.mapView = undefined;
-    this.zoomAndScrollToSelected = undefined;
-    this._cardLoading = false;
-    this._graphics = undefined;
-    this._translations = undefined;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Watch handlers
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  Methods (public)
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  Events (public)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Query the layer for the provided ids and store the result graphics
-   */
-  async featureSelectionChange(evt) {
-    const ids = evt.detail;
-    this._cardLoading = true;
-    // only query if we have some ids...query with no ids will result in all features being returned
-    const featureSet = ids.length > 0 ? await mapViewUtils.queryFeaturesByID(ids, this.layer, [], false, this.mapView.spatialReference) : [];
-    this._graphics = featureSet;
-    this._cardLoading = false;
-  }
-  /**
-   * Get the layer view for the provided layer id
-   */
-  async layerSelectionChange(evt) {
-    const id = evt.detail[0];
-    this.layer = await mapViewUtils.getLayer(this.mapView, id);
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (lifecycle)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * StencilJS: Called once just after the component is first connected to the DOM.
-   *
-   * @returns Promise when complete
-   */
-  async componentWillLoad() {
-    await this._getTranslations();
-  }
-  /**
-   * Renders the component.
-   */
-  render() {
-    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 padding-1 " + 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))))));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (protected)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Fetches the component's translations
-   *
-   * @returns Promise when complete
-   * @protected
-   */
-  async _getTranslations() {
-    const messages = await locale.getLocaleComponentStrings(this.el);
-    this._translations = messages[0];
-  }
-  get el() { return index.getElement(this); }
-};
+const CardManager = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.layer = undefined;
+    this.mapView = undefined;
+    this.zoomAndScrollToSelected = undefined;
+    this._cardLoading = false;
+    this._graphics = undefined;
+    this._translations = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events (public)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Query the layer for the provided ids and store the result graphics
+   */
+  async featureSelectionChange(evt) {
+    const ids = evt.detail;
+    this._cardLoading = true;
+    // only query if we have some ids...query with no ids will result in all features being returned
+    const featureSet = ids.length > 0 ? await mapViewUtils.queryFeaturesByID(ids, this.layer, [], false, this.mapView.spatialReference) : [];
+    this._graphics = featureSet;
+    this._cardLoading = false;
+  }
+  /**
+   * Get the layer view for the provided layer id
+   */
+  async layerSelectionChange(evt) {
+    const id = evt.detail[0];
+    this.layer = await mapViewUtils.getLayer(this.mapView, id);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   *
+   * @returns Promise when complete
+   */
+  async componentWillLoad() {
+    await this._getTranslations();
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    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 padding-1 " + 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))))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   * @protected
+   */
+  async _getTranslations() {
+    const messages = await locale.getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
+  }
+  get el() { return index.getElement(this); }
+};
 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}";
 
-const LayerTable = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.featureSelectionChange = index.createEvent(this, "featureSelectionChange", 7);
-    /**
-     * number[]: A list of all IDs for the current layer
-     */
-    this._allIds = [];
-    /**
-     * Store a reference to the table node after it's first created
-     * and initializes the FeatureTable
-     *
-     * @param node HTMLDivElement The node representing the DOM element that will contain the widget.
-     *
-     * @returns void
-     */
-    this.onTableNodeCreate = (node) => {
-      this._tableNode = node;
-      this._getTable(node);
-    };
-    this.mapView = undefined;
-    this.zoomAndScrollToSelected = undefined;
-    this._alertOpen = false;
-    this._fetchingData = false;
-    this._layer = undefined;
-    this._selectedIndexes = [];
-    this._showOnlySelected = false;
-    this._translations = undefined;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Watch handlers
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * 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._resetTable();
-    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
-   */
-  async _layerWatchHandler() {
-    this._fetchingData = true;
-    this._resetTable();
-    this._fetchingData = false;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Methods (public)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Get the selected graphics
-   *
-   * @returns Promise that resolves when the operation is complete
-   */
-  async getSelectedGraphics() {
-    return this._selectedIndexes.length > 0 ?
-      await this._getGraphics(this._selectedIndexes) : [];
-  }
-  /**
-   * Scroll and zoom to the selected feature from the Features widget.
-   *
-   * @param evt CustomEvent the graphic for the current selection
-   */
-  async selectionChanged(evt) {
-    if (this.zoomAndScrollToSelected) {
-      const g = evt.detail;
-      const oid = g.getObjectId();
-      const i = this._table.viewModel.getObjectIdIndex(oid);
-      this._table.scrollToIndex(i);
-      const layer = g.layer;
-      const layerViews = this.mapView.allLayerViews.toArray();
-      let layerView;
-      layerViews.some(lv => {
-        if (lv.layer.title === layer.title && lv.layer.type === 'feature') {
-          layerView = lv;
-          return true;
-        }
-      });
-      if (layerView) {
-        await mapViewUtils.goToSelection([oid], layerView, this.mapView, true);
-      }
-    }
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (lifecycle)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * StencilJS: Called once just after the component is first connected to the DOM.
-   *
-   * @returns Promise when complete
-   */
-  async componentWillLoad() {
-    await this._getTranslations();
-    await this._initModules();
-  }
-  /**
-   * 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";
-    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("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)))));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (protected)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Load esri javascript api modules
-   *
-   * @returns Promise resolving when function is done
-   *
-   * @protected
-   */
-  async _initModules() {
-    const [FeatureTable, reactiveUtils] = await loadModules.loadModules([
-      "esri/widgets/FeatureTable",
-      "esri/core/reactiveUtils"
-    ]);
-    this.FeatureTable = FeatureTable;
-    this.reactiveUtils = reactiveUtils;
-  }
-  /**
-   * Gets a row of controls that can be used for various interactions with the table
-   *
-   * @param slot string optional slot to display the control within
-   *
-   * @returns The dom node that contains the controls
-   */
-  _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 :
-      this._translations.showSelected), index.h("calcite-dropdown-item", { iconStart: "refresh", 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)))));
-  }
-  /**
-   * Initialize the FeatureTable
-   *
-   * @param node HTMLDivElement The node representing the DOM element that will contain the widget.
-   *
-   * @returns void
-   */
-  _getTable(node) {
-    if (this._layer) {
-      this._table = new this.FeatureTable({
-        layer: this._layer,
-        view: this.mapView,
-        //editingEnabled: this._editEnabled,
-        highlightEnabled: true,
-        multiSortEnabled: false,
-        visibleElements: {
-          header: false,
-          menu: false
-        },
-        container: node
-      });
-      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.featureSelectionChange.emit(this._selectedIndexes);
-      });
-    }
-  }
-  /**
-   * Reset basic table props
-   *
-   * @returns void
-   */
-  _resetTable() {
-    if (this._layer && this._table) {
-      this._clearSelection();
-      this.featureSelectionChange.emit(this._selectedIndexes);
-      this._table.layer = this._layer;
-      this._editEnabled = this._layer.editingEnabled;
-      this._table.view = this.mapView;
-      this._table.editingEnabled = this._editEnabled;
-      this._table.clearSelectionFilter();
-      this._showOnlySelected = false;
-    }
-  }
-  /**
-   * Handle map click events to keep table and map click selection in sync
-   *
-   * @param evt IMapClick map click event details
-   *
-   * @returns void
-   */
-  async _mapClicked(evt) {
-    const opts = {
-      include: this._layer
-    };
-    const hitTestResult = await this.mapView.hitTest(evt.screenPoint, opts);
-    if (hitTestResult.results.length > 0) {
-      hitTestResult.results.forEach((result) => {
-        const id = result.graphic.getObjectId();
-        const index = this._table.highlightIds.indexOf(id);
-        if (index > -1) {
-          this._table.highlightIds.removeAt(index);
-        }
-        else {
-          this._table.highlightIds.add(id);
-        }
-      });
-      if (this._showOnlySelected) {
-        this._table.filterBySelection();
-      }
-    }
-  }
-  /**
-   * Set the alertOpen member to false when the alert is closed
-   *
-   * @returns void
-   */
-  _alertClosed() {
-    this._alertOpen = false;
-  }
-  /**
-   * Select or deselect all rows
-   *
-   * @returns void
-   */
-  _selectAll() {
-    const ids = this._allIds;
-    this._table.highlightIds.addMany(ids);
-    this._selectedIndexes = ids;
-  }
-  /**
-   * Toggle the show only selected flag
-   *  When showOnly is true only the selected features will be shown in the table
-   *
-   * @returns void
-   */
-  _toggleShowSelected() {
-    this._showOnlySelected = !this._showOnlySelected;
-    if (this._showOnlySelected) {
-      this._table.filterBySelection();
-    }
-    else {
-      this._table.clearSelectionFilter();
-    }
-  }
-  /**
-   * Clears the selected indexes
-   *
-   * @returns void
-   */
-  _clearSelection() {
-    this._selectedIndexes = [];
-    this._table.highlightIds.removeAll();
-  }
-  /**
-   * Show the filter options
-   *
-   * @returns void
-   */
-  _filter() {
-    alert("do whatever this button is supposed to do");
-  }
-  /**
-   * Select all rows that are not currently selectd
-   *
-   * @returns void
-   */
-  _switchSelected() {
-    const currentIndexes = [...this._selectedIndexes];
-    this._selectedIndexes = this._allIds.reduce((prev, _cur, i) => {
-      if (currentIndexes.indexOf(i) < 0) {
-        prev.push(i);
-      }
-      return prev;
-    }, []);
-    this._table.highlightIds.removeAll();
-    this._table.highlightIds.addMany(this._selectedIndexes);
-  }
-  /**
-   * Export all selected rows as CSV
-   *
-   * @returns a promise that will resolve when the operation is complete
-   */
-  async _exportToCSV() {
-    const exportInfos = {};
-    const ids = this._table.highlightIds.toArray();
-    exportInfos[this._layer.id] = {
-      selectionSetNames: [],
-      ids,
-      layer: this._layer
-    };
-    void downloadUtils.downloadCSV(exportInfos, false, // formatUsingLayerPopup
-    true);
-  }
-  /**
-   * Refreshes the table and maintains the curent scroll position
-   *
-   * @returns void
-   */
-  _refresh() {
-    void this._table.refresh();
-  }
-  /**
-   * Zoom to all selected features
-   *
-   * @returns a promise that will resolve when the operation is complete
-   */
-  _zoom() {
-    this._table.zoomToSelection();
-  }
-  /**
-   * Delete all selected records or shows an alert if the layer does not have editing enabled
-   *
-   * @returns a promise that will resolve when the operation is complete
-   */
-  _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._alertOpen = true;
-  }
-  /**
-   * Get the graphics for all selected indexes
-   *
-   * @param ids the ids for the graphics to fetch
-   *
-   * @returns An array of selected graphics
-   */
-  async _getGraphics(ids) {
-    return ids.length > 0 ? mapViewUtils.queryFeaturesByID(ids, this._table.layer, [], false, this.mapView.spatialReference) : [];
-  }
-  /**
-   * Handles layer selection change to show new table
-   *
-   * @param evt CustomEvent the id for the current layer
-   *
-   * @returns a promise that will resolve when the operation is complete
-   */
-  async _layerSelectionChanged(evt) {
-    const id = evt.detail[0];
-    if (id !== this._layer.id || this._allIds.length === 0) {
-      this._fetchingData = true;
-      this._table.highlightIds.removeAll();
-      this._layer = await mapViewUtils.getLayer(this.mapView, id);
-      this._allIds = await mapViewUtils.queryAllIds(this._layer);
-      this._selectedIndexes = [];
-      this._table.layer = this._layer;
-      this._table.render();
-      this._fetchingData = false;
-    }
-  }
-  /**
-   * Fetches the component's translations
-   *
-   * @returns Promise when complete
-   * @protected
-   */
-  async _getTranslations() {
-    const messages = await locale.getLocaleComponentStrings(this.el);
-    this._translations = messages[0];
-  }
-  get el() { return index.getElement(this); }
-  static get watchers() { return {
-    "mapView": ["mapViewWatchHandler"],
-    "_layer": ["_layerWatchHandler"]
-  }; }
-};
+const LayerTable = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.featureSelectionChange = index.createEvent(this, "featureSelectionChange", 7);
+    /**
+     * number[]: A list of all IDs for the current layer
+     */
+    this._allIds = [];
+    /**
+     * bool: When true the table is being sorted
+     */
+    this._tableSorting = false;
+    /**
+     * Store a reference to the table node after it's first created
+     * and initializes the FeatureTable
+     *
+     * @param node HTMLDivElement The node representing the DOM element that will contain the widget.
+     *
+     * @returns void
+     */
+    this.onTableNodeCreate = (node) => {
+      this._tableNode = node;
+    };
+    this.mapView = undefined;
+    this.showNewestFirst = undefined;
+    this.zoomAndScrollToSelected = undefined;
+    this._alertOpen = false;
+    this._fetchingData = false;
+    this._layer = undefined;
+    this._selectedIndexes = [];
+    this._showOnlySelected = false;
+    this._sortActive = false;
+    this._translations = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * 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) => {
+      void this._mapClicked(event);
+    });
+    this._fetchingData = false;
+  }
+  /**
+   * watch for changes in layer view and verify if it has editing enabled
+   */
+  async _layerWatchHandler() {
+    this._fetchingData = true;
+    await this._resetTable();
+    this._fetchingData = false;
+  }
+  /**
+   * When sortActive is false the user has not defined a sort and we should use the default sort
+   */
+  async _sortActiveWatchHandler() {
+    if (!this._sortActive) {
+      await this._sortTable();
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Get the selected graphics
+   *
+   * @returns Promise that resolves when the operation is complete
+   */
+  async getSelectedGraphics() {
+    return this._selectedIndexes.length > 0 ?
+      await this._getGraphics(this._selectedIndexes) : [];
+  }
+  /**
+   * Scroll and zoom to the selected feature from the Features widget.
+   *
+   * @param evt CustomEvent the graphic for the current selection
+   */
+  async selectionChanged(evt) {
+    if (this.zoomAndScrollToSelected) {
+      const g = evt.detail;
+      const oid = g.getObjectId();
+      const i = this._table.viewModel.getObjectIdIndex(oid);
+      this._table.scrollToIndex(i);
+      const layer = g.layer;
+      const layerViews = this.mapView.allLayerViews.toArray();
+      let layerView;
+      layerViews.some(lv => {
+        if (lv.layer.title === layer.title && lv.layer.type === 'feature') {
+          layerView = lv;
+          return true;
+        }
+      });
+      if (layerView) {
+        await mapViewUtils.goToSelection([oid], layerView, this.mapView, true);
+      }
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   *
+   * @returns Promise when complete
+   */
+  async componentWillLoad() {
+    await this._getTranslations();
+    await this._initModules();
+  }
+  /**
+   * 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";
+    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("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)))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   *
+   * @protected
+   */
+  async _initModules() {
+    const [FeatureTable, reactiveUtils] = await loadModules.loadModules([
+      "esri/widgets/FeatureTable",
+      "esri/core/reactiveUtils"
+    ]);
+    this.FeatureTable = FeatureTable;
+    this.reactiveUtils = reactiveUtils;
+  }
+  /**
+   * Gets a row of controls that can be used for various interactions with the table
+   *
+   * @param slot string optional slot to display the control within
+   *
+   * @returns The dom node that contains the controls
+   */
+  _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 :
+      this._translations.showSelected), index.h("calcite-dropdown-item", { iconStart: "refresh", 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)))));
+  }
+  /**
+   * Initialize the FeatureTable
+   *
+   * @param node HTMLDivElement The node representing the DOM element that will contain the widget.
+   *
+   * @returns void
+   */
+  async _getTable(node) {
+    if (this._layer) {
+      await this._layer.when(async () => {
+        this._table = new this.FeatureTable({
+          layer: this._layer,
+          view: this.mapView,
+          //editingEnabled: this._editEnabled,
+          highlightEnabled: true,
+          multiSortEnabled: false,
+          visibleElements: {
+            header: false,
+            menu: false
+          },
+          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.featureSelectionChange.emit(this._selectedIndexes);
+          });
+          this.reactiveUtils.watch(() => this._table.activeSortOrders, (sortOrders) => {
+            var _a, _b;
+            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";
+          });
+        });
+      });
+    }
+  }
+  /**
+   * Reset basic table props
+   *
+   * @returns void
+   */
+  async _resetTable() {
+    if (this._layer && this._table) {
+      this._clearSelection();
+      this._allIds = [];
+      this.featureSelectionChange.emit(this._selectedIndexes);
+      this._table.layer = this._layer;
+      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();
+    }
+  }
+  /**
+   * Sort the objectid field in descending order
+   *
+   * @returns void
+   */
+  async _sortTable() {
+    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;
+          });
+        });
+      }
+    }
+  }
+  /**
+   * Handle map click events to keep table and map click selection in sync
+   *
+   * @param evt IMapClick map click event details
+   *
+   * @returns void
+   */
+  async _mapClicked(evt) {
+    const opts = {
+      include: this._layer
+    };
+    const hitTestResult = await this.mapView.hitTest(evt.screenPoint, opts);
+    if (hitTestResult.results.length > 0) {
+      hitTestResult.results.forEach((result) => {
+        const id = result.graphic.getObjectId();
+        const index = this._table.highlightIds.indexOf(id);
+        if (index > -1) {
+          this._table.highlightIds.removeAt(index);
+        }
+        else {
+          this._table.highlightIds.add(id);
+        }
+      });
+      if (this._showOnlySelected) {
+        this._table.filterBySelection();
+      }
+    }
+  }
+  /**
+   * Set the alertOpen member to false when the alert is closed
+   *
+   * @returns void
+   */
+  _alertClosed() {
+    this._alertOpen = false;
+  }
+  /**
+   * Select or deselect all rows
+   *
+   * @returns void
+   */
+  _selectAll() {
+    const ids = this._allIds;
+    this._table.highlightIds.addMany(ids);
+    this._selectedIndexes = ids;
+  }
+  /**
+   * Toggle the show only selected flag
+   *  When showOnly is true only the selected features will be shown in the table
+   *
+   * @returns void
+   */
+  _toggleShowSelected() {
+    this._showOnlySelected = !this._showOnlySelected;
+    if (this._showOnlySelected) {
+      this._table.filterBySelection();
+    }
+    else {
+      this._table.clearSelectionFilter();
+    }
+  }
+  /**
+   * Clears the selected indexes
+   *
+   * @returns void
+   */
+  _clearSelection() {
+    this._selectedIndexes = [];
+    this._table.highlightIds.removeAll();
+  }
+  /**
+   * Show the filter options
+   *
+   * @returns void
+   */
+  _filter() {
+    alert("do whatever this button is supposed to do");
+  }
+  /**
+   * Select all rows that are not currently selectd
+   *
+   * @returns void
+   */
+  _switchSelected() {
+    const currentIndexes = [...this._selectedIndexes];
+    this._selectedIndexes = this._allIds.reduce((prev, _cur, i) => {
+      if (currentIndexes.indexOf(i) < 0) {
+        prev.push(i);
+      }
+      return prev;
+    }, []);
+    this._table.highlightIds.removeAll();
+    this._table.highlightIds.addMany(this._selectedIndexes);
+  }
+  /**
+   * Export all selected rows as CSV
+   *
+   * @returns a promise that will resolve when the operation is complete
+   */
+  async _exportToCSV() {
+    const exportInfos = {};
+    const ids = this._table.highlightIds.toArray();
+    exportInfos[this._layer.id] = {
+      selectionSetNames: [],
+      ids,
+      layer: this._layer
+    };
+    void downloadUtils.downloadCSV(exportInfos, false, // formatUsingLayerPopup
+    true);
+  }
+  /**
+   * Refreshes the table and maintains the curent scroll position
+   *
+   * @returns void
+   */
+  _refresh() {
+    void this._table.refresh();
+  }
+  /**
+   * Zoom to all selected features
+   *
+   * @returns a promise that will resolve when the operation is complete
+   */
+  _zoom() {
+    this._table.zoomToSelection();
+  }
+  /**
+   * Delete all selected records or shows an alert if the layer does not have editing enabled
+   *
+   * @returns a promise that will resolve when the operation is complete
+   */
+  _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._alertOpen = true;
+  }
+  /**
+   * Get the graphics for all selected indexes
+   *
+   * @param ids the ids for the graphics to fetch
+   *
+   * @returns An array of selected graphics
+   */
+  async _getGraphics(ids) {
+    return ids.length > 0 ? mapViewUtils.queryFeaturesByID(ids, this._table.layer, [], false, this.mapView.spatialReference) : [];
+  }
+  /**
+   * Handles layer selection change to show new table
+   *
+   * @param evt CustomEvent the id for the current layer
+   *
+   * @returns a promise that will resolve when the operation is complete
+   */
+  async _layerSelectionChanged(evt) {
+    const id = evt.detail[0];
+    if (id !== this._layer.id || this._allIds.length === 0) {
+      this._fetchingData = true;
+      this._layer = await mapViewUtils.getLayer(this.mapView, id);
+      this._allIds = await mapViewUtils.queryAllIds(this._layer);
+      if (!this._table) {
+        await this._getTable(this._tableNode);
+      }
+      await this._table.when(() => {
+        this._table.highlightIds.removeAll();
+      });
+      this._selectedIndexes = [];
+      this._table.layer = this._layer;
+      this._table.render();
+    }
+    this._sortActive = false;
+    await this._sortTable();
+    this._fetchingData = false;
+  }
+  /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   * @protected
+   */
+  async _getTranslations() {
+    const messages = await locale.getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "mapView": ["mapViewWatchHandler"],
+    "_layer": ["_layerWatchHandler"],
+    "_sortActive": ["_sortActiveWatchHandler"]
+  }; }
+};
 LayerTable.style = layerTableCss;
 
 const layoutManagerCss = ":host{display:block}.action-center{-webkit-box-align:center;-webkit-align-items:center;-ms-grid-row-align:center;align-items:center;align-content:center;justify-content:center}.display-flex{display:flex}.icon-color{--calcite-ui-icon-color:var(--calcite-ui-brand)}.icon{cursor:pointer}.tooltip-message{padding:5px 8px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}.header-text{font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);padding-inline:0.75rem;padding-block:0.875rem;line-height:1.25rem}.img-background{background-repeat:no-repeat;background-size:100% 100%;width:38px;height:26px}.grid-background{background-image:url('../../assets/data/images/grid.png')}.horizontal-background{background-image:url('../../assets/data/images/horizontal.png')}.vertical-background{background-image:url('../../assets/data/images/vertical.png')}";
 
-const LayoutManager = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.layoutChanged = index.createEvent(this, "layoutChanged", 7);
-    //--------------------------------------------------------------------------
-    //
-    //  Properties (protected)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * Controls the layout of the application
-     */
-    this._layoutMode = interfaces.ELayoutMode.GRID;
-    this._translations = undefined;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (lifecycle)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * StencilJS: Called once just after the component is first connected to the DOM.
-   *
-   * @returns Promise when complete
-   */
-  async componentWillLoad() {
-    await this._getTranslations();
-  }
-  /**
-   * Renders the component.
-   */
-  render() {
-    return (index.h(index.Host, null, index.h("div", { class: "display-flex" }, index.h("div", { class: "display-flex action-center" }, index.h("calcite-icon", { class: "icon icon-color", icon: "information", id: "app-information-icon", scale: "s" }), index.h("calcite-popover", { closable: true, label: "", referenceElement: "app-information-icon" }, index.h("span", { class: "tooltip-message" }, this._translations.appInfo))), index.h("div", { class: "header-text" }, this._translations.layout), this._getAction("grid-background", interfaces.ELayoutMode.GRID, this._translations.grid), this._getAction("vertical-background", interfaces.ELayoutMode.VERTICAL, this._translations.vertical), this._getAction("horizontal-background", interfaces.ELayoutMode.HORIZONTAL, this._translations.horizontal))));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (protected)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Store and emit the current layout mode
-   *
-   * @param imgClass string the css class to use
-   * @param layoutMode ELayoutMode the associated layout mode for the current action
-   * @param tip string the value to display as the tooltip for the action
-   *
-   * @protected
-   */
-  _getAction(imgClass, layoutMode, tip) {
-    return (index.h("div", null, index.h("calcite-action", { alignment: "center", appearance: "transparent", compact: false, id: imgClass, indicator: layoutMode === this._layoutMode, onClick: () => { this._setLayoutMode(layoutMode); }, text: "" }, index.h("div", { class: imgClass + " img-background" })), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": imgClass }, index.h("span", null, tip))));
-  }
-  /**
-   * Store and emit the current layout mode
-   *
-   * @param layoutMode ELayoutMode the current layout mode
-   *
-   * @protected
-   */
-  _setLayoutMode(layoutMode) {
-    this._layoutMode = layoutMode;
-    this.layoutChanged.emit(this._layoutMode);
-  }
-  /**
-   * Fetches the component's translations
-   *
-   * @returns Promise when complete
-   * @protected
-   */
-  async _getTranslations() {
-    const messages = await locale.getLocaleComponentStrings(this.el);
-    this._translations = messages[0];
-  }
-  get el() { return index.getElement(this); }
-};
+const LayoutManager = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.layoutChanged = index.createEvent(this, "layoutChanged", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties (protected)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Controls the layout of the application
+     */
+    this._layoutMode = interfaces.ELayoutMode.GRID;
+    this._translations = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   *
+   * @returns Promise when complete
+   */
+  async componentWillLoad() {
+    await this._getTranslations();
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "display-flex" }, index.h("div", { class: "display-flex action-center" }, index.h("calcite-icon", { class: "icon icon-color", icon: "information", id: "app-information-icon", scale: "s" }), index.h("calcite-popover", { closable: true, label: "", referenceElement: "app-information-icon" }, index.h("span", { class: "tooltip-message" }, this._translations.appInfo))), index.h("div", { class: "header-text" }, this._translations.layout), this._getAction("grid-background", interfaces.ELayoutMode.GRID, this._translations.grid), this._getAction("vertical-background", interfaces.ELayoutMode.VERTICAL, this._translations.vertical), this._getAction("horizontal-background", interfaces.ELayoutMode.HORIZONTAL, this._translations.horizontal))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Store and emit the current layout mode
+   *
+   * @param imgClass string the css class to use
+   * @param layoutMode ELayoutMode the associated layout mode for the current action
+   * @param tip string the value to display as the tooltip for the action
+   *
+   * @protected
+   */
+  _getAction(imgClass, layoutMode, tip) {
+    return (index.h("div", null, index.h("calcite-action", { alignment: "center", appearance: "transparent", compact: false, id: imgClass, indicator: layoutMode === this._layoutMode, onClick: () => { this._setLayoutMode(layoutMode); }, text: "" }, index.h("div", { class: imgClass + " img-background" })), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": imgClass }, index.h("span", null, tip))));
+  }
+  /**
+   * Store and emit the current layout mode
+   *
+   * @param layoutMode ELayoutMode the current layout mode
+   *
+   * @protected
+   */
+  _setLayoutMode(layoutMode) {
+    this._layoutMode = layoutMode;
+    this.layoutChanged.emit(this._layoutMode);
+  }
+  /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   * @protected
+   */
+  async _getTranslations() {
+    const messages = await locale.getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
+  }
+  get el() { return index.getElement(this); }
+};
 LayoutManager.style = layoutManagerCss;
 
-const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.map-height{height:calc(100% - 58px)}.esri-zoom{display:none !important}.map-tools{position:absolute;top:40px;right:0px;padding:1rem}";
+const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.map-height{height:calc(100% - 58px)}.esri-zoom{display:none !important}";
 
-const MapCard = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.mapChanged = index.createEvent(this, "mapChanged", 7);
-    /**
-     * string: the id of map currently displayed
-     */
-    this._loadedId = "";
-    this.mapInfos = [];
-    this.mapView = undefined;
-    this._webMapInfo = undefined;
-  }
-  /**
-   * Listen for changes to map info and load the appropriate map
-   */
-  async mapInfoChange(evt) {
-    this._loadMap(evt.detail);
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (lifecycle)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * StencilJS: Called once just after the component is first connected to the DOM.
-   */
-  async componentWillLoad() {
-    await this._initModules();
-  }
-  /**
-   * 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: "map-tools" })));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (protected)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * Load esri javascript api modules
-   *
-   * @returns Promise resolving when function is done
-   *
-   * @protected
-   */
-  async _initModules() {
-    const [WebMap, MapView] = await loadModules.loadModules([
-      "esri/WebMap",
-      "esri/views/MapView"
-    ]);
-    this.WebMap = WebMap;
-    this.MapView = MapView;
-  }
-  /**
-   * Load the webmap for the provided webMapInfo
-   *
-   * @param webMapInfo the webmap id and name to load
-   *
-   * @returns void
-   *
-   * @protected
-   */
-  _loadMap(webMapInfo) {
-    let id = webMapInfo === null || webMapInfo === void 0 ? void 0 : webMapInfo.id;
-    // on the first render use the first child of the provided mapInfos
-    this._webMapInfo = (id === "" || !id) && this.mapInfos.length > 0 ?
-      this.mapInfos[0] : webMapInfo;
-    id = this._webMapInfo.id;
-    if (this._loadedId !== id) {
-      const webMap = new this.WebMap({
-        portalItem: { id }
-      });
-      this.mapView = new this.MapView({
-        container: this._mapDiv,
-        map: webMap,
-        resizeAlign: "top-left"
-      });
-      this._loadedId = id;
-      this.mapChanged.emit(this.mapView);
-    }
-  }
-  get el() { return index.getElement(this); }
-};
+const MapCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.mapChanged = index.createEvent(this, "mapChanged", 7);
+    /**
+     * string: the id of map currently displayed
+     */
+    this._loadedId = "";
+    this.mapInfos = [];
+    this.mapView = undefined;
+    this._searchConfiguration = undefined;
+    this._webMapInfo = undefined;
+  }
+  /**
+   * Listen for changes to map info and load the appropriate map
+   */
+  async mapInfoChange(evt) {
+    await this._loadMap(evt.detail);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   */
+  async componentWillLoad() {
+    await this._initModules();
+  }
+  /**
+   * 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", { mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   *
+   * @protected
+   */
+  async _initModules() {
+    const [WebMap, MapView] = await loadModules.loadModules([
+      "esri/WebMap",
+      "esri/views/MapView"
+    ]);
+    this.WebMap = WebMap;
+    this.MapView = MapView;
+  }
+  /**
+   * Load the webmap for the provided webMapInfo
+   *
+   * @param webMapInfo the webmap id and name to load
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  async _loadMap(webMapInfo) {
+    let id = webMapInfo === null || webMapInfo === void 0 ? void 0 : webMapInfo.id;
+    // on the first render use the first child of the provided mapInfos
+    this._webMapInfo = (id === "" || !id) && this.mapInfos.length > 0 ?
+      this.mapInfos[0] : webMapInfo;
+    id = this._webMapInfo.id;
+    if (this._loadedId !== id) {
+      const webMap = new this.WebMap({
+        portalItem: { id }
+      });
+      this.mapView = new this.MapView({
+        container: this._mapDiv,
+        map: webMap,
+        resizeAlign: "top-left"
+      });
+      await this.mapView.when(() => {
+        this._loadedId = id;
+        this._searchConfiguration = this._webMapInfo.searchConfiguration;
+        this.mapChanged.emit(this.mapView);
+        this.mapView.ui.add(this._mapTools, { position: "top-right", index: 0 });
+      });
+    }
+  }
+  get el() { return index.getElement(this); }
+};
 MapCard.style = mapCardCss;
 
 exports.card_manager = CardManager;