@esri/solutions-components 0.6.6 → 0.6.7

package/dist/components/layer-table2.js

@@ -6,8 +6,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
 import { g as getLocaleComponentStrings } from './locale.js';
-import { a as getMapLayerIds, g as getLayer, b as goToSelection } from './mapViewUtils.js';
-import { q as queryFeaturesByID, b as queryAllIds } from './queryUtils.js';
+import { b as getMapLayerIds, a as getLayer, g as goToSelection } from './mapViewUtils.js';
+import { q as queryFeaturesByID, a as queryAllIds } from './queryUtils.js';
 import { d as downloadCSV } from './downloadUtils.js';
 import { d as defineCustomElement$n } from './action.js';
 import { d as defineCustomElement$m } from './action-bar.js';
@@ -35,550 +35,551 @@ import { d as defineCustomElement$1 } from './map-layer-picker2.js';
 
 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 = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.featureSelectionChange = 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 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 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];
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "mapView": ["mapViewWatchHandler"],
-    "_layer": ["_layerWatchHandler"]
-  }; }
-  static get style() { return layerTableCss; }
-}, [0, "layer-table", {
-    "mapView": [16],
-    "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
-    "_alertOpen": [32],
-    "_fetchingData": [32],
-    "_layer": [32],
-    "_selectedIndexes": [32],
-    "_showOnlySelected": [32],
-    "_translations": [32],
-    "getSelectedGraphics": [64]
-  }, [[8, "selectionChanged", "selectionChanged"]]]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["layer-table", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-alert", "calcite-button", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-icon", "calcite-link", "calcite-loader", "calcite-option", "calcite-panel", "calcite-popover", "calcite-scrim", "calcite-select", "calcite-shell", "calcite-tooltip", "map-layer-picker"];
-  components.forEach(tagName => { switch (tagName) {
-    case "layer-table":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, LayerTable);
-      }
-      break;
-    case "calcite-action":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$n();
-      }
-      break;
-    case "calcite-action-bar":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$m();
-      }
-      break;
-    case "calcite-action-group":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$l();
-      }
-      break;
-    case "calcite-action-menu":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$k();
-      }
-      break;
-    case "calcite-alert":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$j();
-      }
-      break;
-    case "calcite-button":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$i();
-      }
-      break;
-    case "calcite-chip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$h();
-      }
-      break;
-    case "calcite-combobox":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$g();
-      }
-      break;
-    case "calcite-combobox-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$f();
-      }
-      break;
-    case "calcite-dropdown":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$e();
-      }
-      break;
-    case "calcite-dropdown-group":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$d();
-      }
-      break;
-    case "calcite-dropdown-item":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$c();
-      }
-      break;
-    case "calcite-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$b();
-      }
-      break;
-    case "calcite-link":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$a();
-      }
-      break;
-    case "calcite-loader":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$9();
-      }
-      break;
-    case "calcite-option":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$8();
-      }
-      break;
-    case "calcite-panel":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$7();
-      }
-      break;
-    case "calcite-popover":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "calcite-scrim":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "calcite-select":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "calcite-shell":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "calcite-tooltip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "map-layer-picker":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$1();
-      }
-      break;
-  } });
-}
+const LayerTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.featureSelectionChange = 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 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 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];
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "mapView": ["mapViewWatchHandler"],
+    "_layer": ["_layerWatchHandler"]
+  }; }
+  static get style() { return layerTableCss; }
+}, [0, "layer-table", {
+    "mapView": [16],
+    "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
+    "_alertOpen": [32],
+    "_fetchingData": [32],
+    "_layer": [32],
+    "_selectedIndexes": [32],
+    "_showOnlySelected": [32],
+    "_translations": [32],
+    "getSelectedGraphics": [64]
+  }, [[8, "selectionChanged", "selectionChanged"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["layer-table", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-alert", "calcite-button", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-icon", "calcite-link", "calcite-loader", "calcite-option", "calcite-panel", "calcite-popover", "calcite-scrim", "calcite-select", "calcite-shell", "calcite-tooltip", "map-layer-picker"];
+  components.forEach(tagName => { switch (tagName) {
+    case "layer-table":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, LayerTable);
+      }
+      break;
+    case "calcite-action":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$n();
+      }
+      break;
+    case "calcite-action-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$m();
+      }
+      break;
+    case "calcite-action-group":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$l();
+      }
+      break;
+    case "calcite-action-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
+    case "calcite-alert":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$j();
+      }
+      break;
+    case "calcite-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "calcite-chip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "calcite-combobox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "calcite-combobox-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "calcite-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "calcite-dropdown-group":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "calcite-dropdown-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "calcite-link":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "calcite-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "calcite-option":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "calcite-panel":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "calcite-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "calcite-scrim":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "calcite-select":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-shell":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "map-layer-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
 
 export { LayerTable as L, defineCustomElement as d };