@esri/solutions-components 0.6.7 → 0.6.8

package/dist/collection/components/layer-table/layer-table.js

@@ -1,548 +1,620 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-/** @license
- * Copyright 2022 Esri
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import { Host, h } from "@stencil/core";
-import { loadModules } from "../../utils/loadModules";
-import { getLocaleComponentStrings } from "../../utils/locale";
-import { getLayer, getMapLayerIds, goToSelection } from "../../utils/mapViewUtils";
-import { queryFeaturesByID, queryAllIds } from "../../utils/queryUtils";
-import * as downloadUtils from "../../utils/downloadUtils";
-export class LayerTable {
-  constructor() {
-    /**
-     * 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 getMapLayerIds(this.mapView);
-    this._layer = await 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 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 (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: "height-full width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate }))), h("calcite-alert", { icon: this._alertIcon, kind: this._alertKind, label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._alertTitle), h("div", { slot: "message" }, this._alertMessage), 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([
-      "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 (h("div", { class: "display-flex table-border height-51", slot: slot }, h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, h("div", { class: "border-end" }, h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), placeholderIcon: "layers", scale: "l", type: "dropdown" })), 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 }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "magnifying-glass" }, h("span", null, this._translations.zoom)), h("calcite-action", { appearance: "solid", icon: "filter", id: "filter", onClick: () => this._filter(), text: this._translations.filters, "text-enabled": "true", textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "filter" }, h("span", null, this._translations.filters)), h("calcite-action", { appearance: "solid", disabled: !featuresSelected, id: "trash", onClick: () => this._delete(), text: "" }, h("calcite-button", { appearance: "transparent", iconStart: "trash", kind: "danger" }, this._translations.delete)), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "trash" }, h("span", null, this._translations.delete)), h("calcite-action", { appearance: "solid", disabled: !featuresSelected, icon: "erase", id: "erase", onClick: () => this._clearSelection(), text: this._translations.clearSelection, "text-enabled": "true", textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "erase" }, h("span", null, this._translations.clearSelection))), h("calcite-dropdown", null, h("calcite-action", { appearance: "solid", label: "", slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), h("calcite-dropdown-item", { iconStart: "selected-items-filter", onClick: () => this._toggleShowSelected() }, this._showOnlySelected ? this._translations.showAll :
-      this._translations.showSelected), h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._switchSelected() }, this._translations.switchSelected), h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._refresh() }, this._translations.refresh), 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 ? 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 getLayer(this.mapView, id);
-      this._allIds = await 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 getLocaleComponentStrings(this.el);
-    this._translations = messages[0];
-  }
-  static get is() { return "layer-table"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["layer-table.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["layer-table.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "mapView": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "__esri.MapView",
-          "resolved": "MapView",
-          "references": {
-            "___esri": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
-        }
-      },
-      "zoomAndScrollToSelected": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "boolean: When true the selected feature will zoomed to in the map and the row will be scrolled to within the table"
-        },
-        "attribute": "zoom-and-scroll-to-selected",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "_alertOpen": {},
-      "_fetchingData": {},
-      "_layer": {},
-      "_selectedIndexes": {},
-      "_showOnlySelected": {},
-      "_translations": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "featureSelectionChange",
-        "name": "featureSelectionChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted on demand when a layer is selected"
-        },
-        "complexType": {
-          "original": "number[]",
-          "resolved": "number[]",
-          "references": {}
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "getSelectedGraphics": {
-        "complexType": {
-          "signature": "() => Promise<__esri.Graphic[]>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            },
-            "___esri": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<Graphic[]>"
-        },
-        "docs": {
-          "text": "Get the selected graphics",
-          "tags": [{
-              "name": "returns",
-              "text": "Promise that resolves when the operation is complete"
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "mapView",
-        "methodName": "mapViewWatchHandler"
-      }, {
-        "propName": "_layer",
-        "methodName": "_layerWatchHandler"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "selectionChanged",
-        "method": "selectionChanged",
-        "target": "window",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Host, h } from "@stencil/core";
+import { loadModules } from "../../utils/loadModules";
+import { getLocaleComponentStrings } from "../../utils/locale";
+import { getLayer, getMapLayerIds, goToSelection } from "../../utils/mapViewUtils";
+import { queryFeaturesByID, queryAllIds } from "../../utils/queryUtils";
+import * as downloadUtils from "../../utils/downloadUtils";
+export class LayerTable {
+  constructor() {
+    /**
+     * 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 getMapLayerIds(this.mapView);
+    this._layer = await 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 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 (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: "height-full width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate }))), h("calcite-alert", { icon: this._alertIcon, kind: this._alertKind, label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._alertTitle), h("div", { slot: "message" }, this._alertMessage), 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([
+      "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 (h("div", { class: "display-flex table-border height-51", slot: slot }, h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, h("div", { class: "border-end" }, h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), placeholderIcon: "layers", scale: "l", type: "dropdown" })), 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 }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "magnifying-glass" }, h("span", null, this._translations.zoom)), h("calcite-action", { appearance: "solid", icon: "filter", id: "filter", onClick: () => this._filter(), text: this._translations.filters, "text-enabled": "true", textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "filter" }, h("span", null, this._translations.filters)), h("calcite-action", { appearance: "solid", disabled: !featuresSelected, id: "trash", onClick: () => this._delete(), text: "" }, h("calcite-button", { appearance: "transparent", iconStart: "trash", kind: "danger" }, this._translations.delete)), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "trash" }, h("span", null, this._translations.delete)), h("calcite-action", { appearance: "solid", disabled: !featuresSelected, icon: "erase", id: "erase", onClick: () => this._clearSelection(), text: this._translations.clearSelection, "text-enabled": "true", textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "erase" }, h("span", null, this._translations.clearSelection))), h("calcite-dropdown", null, h("calcite-action", { appearance: "solid", label: "", slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), h("calcite-dropdown-item", { iconStart: "selected-items-filter", onClick: () => this._toggleShowSelected() }, this._showOnlySelected ? this._translations.showAll :
+      this._translations.showSelected), h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._switchSelected() }, this._translations.switchSelected), h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._refresh() }, this._translations.refresh), 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 ? 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 getLayer(this.mapView, id);
+      this._allIds = await 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 getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
+  }
+  static get is() { return "layer-table"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["layer-table.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["layer-table.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "mapView": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "__esri.MapView",
+          "resolved": "MapView",
+          "references": {
+            "___esri": {
+              "location": "global",
+              "id": "global::___esri"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
+        }
+      },
+      "showNewestFirst": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the table will be sorted by objectid in descending order by default"
+        },
+        "attribute": "show-newest-first",
+        "reflect": false
+      },
+      "zoomAndScrollToSelected": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: When true the selected feature will zoomed to in the map and the row will be scrolled to within the table"
+        },
+        "attribute": "zoom-and-scroll-to-selected",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_alertOpen": {},
+      "_fetchingData": {},
+      "_layer": {},
+      "_selectedIndexes": {},
+      "_showOnlySelected": {},
+      "_sortActive": {},
+      "_translations": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "featureSelectionChange",
+        "name": "featureSelectionChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted on demand when a layer is selected"
+        },
+        "complexType": {
+          "original": "number[]",
+          "resolved": "number[]",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getSelectedGraphics": {
+        "complexType": {
+          "signature": "() => Promise<__esri.Graphic[]>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global",
+              "id": "global::Promise"
+            },
+            "___esri": {
+              "location": "global",
+              "id": "global::___esri"
+            }
+          },
+          "return": "Promise<Graphic[]>"
+        },
+        "docs": {
+          "text": "Get the selected graphics",
+          "tags": [{
+              "name": "returns",
+              "text": "Promise that resolves when the operation is complete"
+            }]
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "mapView",
+        "methodName": "mapViewWatchHandler"
+      }, {
+        "propName": "_layer",
+        "methodName": "_layerWatchHandler"
+      }, {
+        "propName": "_sortActive",
+        "methodName": "_sortActiveWatchHandler"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "selectionChanged",
+        "method": "selectionChanged",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}