@esri/solutions-components 0.6.13 → 0.6.15

package/dist/collection/components/crowdsource-manager/crowdsource-manager.js

@@ -30,10 +30,18 @@ export class CrowdsourceManager {
     this._shouldSetMapView = false;
     this.classicGrid = false;
     this.enableAutoRefresh = true;
+    this.enableFullscreen = true;
     this.enableInlineEdit = false;
+    this.enableLegend = true;
+    this.enableSearch = true;
+    this.enableHome = true;
+    this.enableZoom = true;
+    this.enableBasemap = true;
+    this.basemapConfig = undefined;
     this.showNewestFirst = true;
     this.hideMap = false;
     this.mapInfos = [];
+    this.onlyShowUpdatableLayers = true;
     this.searchConfiguration = undefined;
     this.zoomAndScrollToSelected = false;
     this._expandPopup = false;
@@ -68,13 +76,18 @@ export class CrowdsourceManager {
    */
   async mapChanged(evt) {
     this._mapChange = evt.detail;
+    await this._mapChange.mapView.when(() => {
+      this._setMapView();
+    });
+  }
+  /**
+   * Listen for beforeMapChanged and minimize the popup if it's expanded
+   */
+  async beforeMapChanged() {
     if (this._expandPopup) {
       this._shouldSetMapView = true;
       this._expandPopup = false;
     }
-    else {
-      this._setMapView();
-    }
   }
   //--------------------------------------------------------------------------
   //
@@ -233,7 +246,7 @@ export class CrowdsourceManager {
     const mapDisplayClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "display-flex height-full width-1-2" :
       layoutMode === ELayoutMode.GRID && !hideMap ? "" : "display-none";
     const mapContainerClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "width-full" : this._expandPopup ? "height-50-px" : "adjusted-height-50";
-    return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { class: "width-full", mapInfos: this.mapInfos })));
+    return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", enableBasemap: this.enableBasemap, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, mapInfos: this.mapInfos })));
   }
   /**
    * Get the expand node for the popup information
@@ -287,7 +300,7 @@ export class CrowdsourceManager {
     const toggleSlot = this.classicGrid && layoutMode !== ELayoutMode.VERTICAL ? "footer" :
       this.classicGrid && layoutMode === ELayoutMode.VERTICAL ? "panel-end" :
         layoutMode === ELayoutMode.HORIZONTAL ? "header" : "panel-start";
-    return (h("calcite-shell", { class: tableSizeClass + " border-bottom" }, h("calcite-action-bar", { class: "border", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip))), h("div", { class: "width-full height-full position-relative" }, h("layer-table", { enableAutoRefresh: this.enableAutoRefresh, enableInlineEdit: this.enableInlineEdit, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
+    return (h("calcite-shell", { class: tableSizeClass + " border-bottom" }, h("calcite-action-bar", { class: "border", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip))), h("div", { class: "width-full height-full position-relative" }, h("layer-table", { enableAutoRefresh: this.enableAutoRefresh, enableInlineEdit: this.enableInlineEdit, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
   }
   /**
    * Open/Close the appropriate panel.
@@ -384,6 +397,24 @@ export class CrowdsourceManager {
         "reflect": false,
         "defaultValue": "true"
       },
+      "enableFullscreen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the fullscreen widget will be available"
+        },
+        "attribute": "enable-fullscreen",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "enableInlineEdit": {
         "type": "boolean",
         "mutable": false,
@@ -402,6 +433,117 @@ export class CrowdsourceManager {
         "reflect": false,
         "defaultValue": "false"
       },
+      "enableLegend": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the legend widget will be available"
+        },
+        "attribute": "enable-legend",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "enableSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the search widget will be available"
+        },
+        "attribute": "enable-search",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "enableHome": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the home widget will be available"
+        },
+        "attribute": "enable-home",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "enableZoom": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the zoom widget will be available"
+        },
+        "attribute": "enable-zoom",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "enableBasemap": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the basemap widget will be available"
+        },
+        "attribute": "enable-basemap",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "basemapConfig": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IBasemapConfig",
+          "resolved": "IBasemapConfig",
+          "references": {
+            "IBasemapConfig": {
+              "location": "import",
+              "path": "../../utils/interfaces",
+              "id": "src/utils/interfaces.ts::IBasemapConfig"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "IBasemapConfig: List of any basemaps to filter out from the basemap widget"
+        }
+      },
       "showNewestFirst": {
         "type": "boolean",
         "mutable": false,
@@ -460,6 +602,24 @@ export class CrowdsourceManager {
         },
         "defaultValue": "[]"
       },
+      "onlyShowUpdatableLayers": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: When true only editable layers that support the update capability will be available"
+        },
+        "attribute": "only-show-updatable-layers",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "searchConfiguration": {
         "type": "unknown",
         "mutable": false,
@@ -524,6 +684,12 @@ export class CrowdsourceManager {
         "target": "window",
         "capture": false,
         "passive": false
+      }, {
+        "name": "beforeMapChanged",
+        "method": "beforeMapChanged",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }];
   }
 }

package/dist/collection/components/edit-card/edit-card.js

@@ -41,20 +41,25 @@ export class EditCard {
   /**
    * Watch for changes to the graphics and update the feature widget
    */
-  graphicIndexWatchHandler() {
-    this._initEditorWidget();
-  }
-  /**
-   * Watch for changes to the graphics and update the feature widget
-   */
-  graphicsWatchHandler() {
-    this._initEditorWidget();
+  async graphicsWatchHandler() {
+    if (this.graphics.length === 0) {
+      this._shouldClose = false;
+      this.closeEdit.emit();
+    }
   }
-  /**
-   * Watch for changes to the mapView and re-init the Feature widget
-   */
-  mapViewWatchHandler() {
-    this._initEditorWidget();
+  async openWatchHandler(v) {
+    var _a;
+    if (v && ((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.graphicIndex > -1) {
+      this._initEditorWidget();
+      if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
+        await this._editor.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]);
+        this._shouldClose = true;
+      }
+    }
+    if (!v) {
+      this._shouldClose = false;
+      this.closeEdit.emit();
+    }
   }
   //--------------------------------------------------------------------------
   //
@@ -85,6 +90,10 @@ export class EditCard {
     }
     if (((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = this.graphics[0]) === null || _b === void 0 ? void 0 : _b.layer)) {
       this._layer = this.graphics[0].layer;
+      if (this._layerEditHandle) {
+        this._layerEditHandle.remove();
+      }
+      this._layerEditHandle = this._layer.on("edits", () => this.editsComplete.emit());
     }
   }
   /**
@@ -141,15 +150,17 @@ export class EditCard {
         this._attachmentHandle.remove();
         this._activeWorkflowHandle.remove();
       }
-      this._attachmentHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "adding-attachment" || this._editor.viewModel.state === "editing-attachment", () => {
+      this._attachmentHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "adding-attachment" ||
+        this._editor.viewModel.state === "editing-attachment" ||
+        this._editor.viewModel.state === "creating-features", () => {
         this._shouldClose = false;
       });
       this._editHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "ready", () => {
         if (this._shouldClose) {
-          this.closeEdit.emit();
           this._shouldClose = false;
+          this.closeEdit.emit();
         }
-        if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
+        else if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
           void this._editor.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]);
           this._shouldClose = true;
         }
@@ -284,19 +295,31 @@ export class EditCard {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "editsComplete",
+        "name": "editsComplete",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted on demand when edits are completed on current edit layer"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }];
   }
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "graphicIndex",
-        "methodName": "graphicIndexWatchHandler"
-      }, {
         "propName": "graphics",
         "methodName": "graphicsWatchHandler"
       }, {
-        "propName": "mapView",
-        "methodName": "mapViewWatchHandler"
+        "propName": "open",
+        "methodName": "openWatchHandler"
       }];
   }
 }

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

@@ -21,7 +21,7 @@
 import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 import { getLocaleComponentStrings } from "../../utils/locale";
-import { getLayer, getMapLayerIds, goToSelection } from "../../utils/mapViewUtils";
+import { getLayerOrTable, goToSelection } from "../../utils/mapViewUtils";
 import { queryFeaturesByID, queryAllIds } from "../../utils/queryUtils";
 import * as downloadUtils from "../../utils/downloadUtils";
 export class LayerTable {
@@ -49,6 +49,7 @@ export class LayerTable {
     this.enableInlineEdit = undefined;
     this.mapInfo = undefined;
     this.mapView = undefined;
+    this.onlyShowUpdatableLayers = undefined;
     this.showNewestFirst = undefined;
     this.zoomAndScrollToSelected = undefined;
     this._alertOpen = false;
@@ -69,13 +70,12 @@ export class LayerTable {
    * 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) => {
+    if (this._mapClickHandle) {
+      this._mapClickHandle.remove();
+    }
+    this._mapClickHandle = this.reactiveUtils.on(() => this.mapView, "click", (event) => {
       void this._mapClicked(event);
     });
-    this._fetchingData = false;
   }
   /**
    * watch for changes in layer view and verify if it has editing enabled
@@ -132,6 +132,22 @@ export class LayerTable {
       }
     }
   }
+  /**
+   * Refresh the table when edits are completed
+   *
+   */
+  editsComplete() {
+    this._refresh();
+  }
+  /**
+   * Refresh the table when edits are completed
+   *
+   */
+  noLayersFound() {
+    this._layer = undefined;
+    this._allIds = [];
+    this._clearSelection();
+  }
   //--------------------------------------------------------------------------
   //
   //  Functions (lifecycle)
@@ -150,9 +166,6 @@ export class LayerTable {
    * Renders the component.
    */
   render() {
-    if (!this._layer) {
-      return null;
-    }
     const tableNodeClass = this._fetchingData ? "display-none" : "";
     const loadingClass = this._fetchingData ? "" : "display-none";
     const total = this._allIds.length.toString();
@@ -190,9 +203,37 @@ export class LayerTable {
    */
   _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 :
+    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), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", type: "dropdown" })), this._getAction("zoom-to-object", this._translations.zoom, () => this._zoom(), !featuresSelected), this._getAction("filter", this._translations.filters, () => this._filter(), false), this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !featuresSelected)), h("calcite-dropdown", { disabled: this._layer === undefined }, 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: "compare", 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)))));
   }
+  /**
+   * Get an action and tooltip
+   *
+   * @param icon string the name of the icon to display, will also be used as the id
+   * @param label string the text to display and label the action
+   * @param func any the function to execute
+   * @param disabled boolean when true the user will not be able to interact with the action
+   *
+   * @returns VNode The node representing the DOM element that will contain the action
+   */
+  _getAction(icon, label, func, disabled) {
+    const _disabled = this._layer === undefined ? true : disabled;
+    return (h("div", { class: "display-flex" }, h("calcite-action", { appearance: "solid", disabled: _disabled, icon: icon, id: icon, label: label, onClick: func, text: label, textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, label))));
+  }
+  /**
+   * Get an action with danger color icon and text
+   *
+   * @param icon string the name of the icon to display, will also be used as the id
+   * @param label string the text to display and label the action
+   * @param func any the function to execute
+   * @param disabled boolean when true the user will not be able to interact with the action
+   *
+   * @returns VNode The node representing the DOM element that will contain the action
+   */
+  _getDangerAction(icon, label, func, disabled) {
+    const _disabled = this._layer === undefined ? true : disabled;
+    return (h("div", { class: "display-flex" }, h("calcite-action", { appearance: "solid", disabled: _disabled, id: icon, onClick: func, text: "" }, h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label)), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, label))));
+  }
   /**
    * Initialize the FeatureTable
    *
@@ -202,7 +243,7 @@ export class LayerTable {
    */
   async _getTable(node, columnTemplates) {
     if (this._layer) {
-      await this._layer.when(async () => {
+      await this._layer.when(() => {
         this._table = new this.FeatureTable({
           autoRefreshEnabled: this.enableAutoRefresh,
           layer: this._layer,
@@ -219,25 +260,25 @@ export class LayerTable {
           },
           container: node
         });
-        this._checkEditEnabled();
-        await this._table.when(async () => {
-          this._table.highlightIds.on("change", () => {
-            this._selectedIndexes = this._table.highlightIds.toArray();
-            if (this._showOnlySelected) {
-              if (this._selectedIndexes.length > 0) {
-                this._table.filterBySelection();
-              }
-              else {
-                this._toggleShowSelected();
-              }
+      });
+      this._checkEditEnabled();
+      await this._table.when(() => {
+        this._table.highlightIds.on("change", () => {
+          this._selectedIndexes = this._table.highlightIds.toArray();
+          if (this._showOnlySelected) {
+            if (this._selectedIndexes.length > 0) {
+              this._table.filterBySelection();
+            }
+            else {
+              this._toggleShowSelected();
             }
-            this.featureSelectionChange.emit(this._selectedIndexes);
-          });
-          this.reactiveUtils.watch(() => this._table.activeSortOrders, (sortOrders) => {
-            var _a, _b, _c, _d;
-            this._sortActive = (sortOrders.length > 0 && ((_a = sortOrders[0]) === null || _a === void 0 ? void 0 : _a.direction) === "asc" || ((_b = sortOrders[0]) === null || _b === void 0 ? void 0 : _b.direction) === "desc") ||
-              ((_c = sortOrders[0]) === null || _c === void 0 ? void 0 : _c.direction) === null && ((_d = sortOrders[0]) === null || _d === void 0 ? void 0 : _d.fieldName) === this._layer.objectIdField;
-          });
+          }
+          this.featureSelectionChange.emit(this._selectedIndexes);
+        });
+        this.reactiveUtils.watch(() => this._table.activeSortOrders, (sortOrders) => {
+          var _a, _b, _c, _d;
+          this._sortActive = this._layer ? (sortOrders.length > 0 && ((_a = sortOrders[0]) === null || _a === void 0 ? void 0 : _a.direction) === "asc" || ((_b = sortOrders[0]) === null || _b === void 0 ? void 0 : _b.direction) === "desc") ||
+            ((_c = sortOrders[0]) === null || _c === void 0 ? void 0 : _c.direction) === null && ((_d = sortOrders[0]) === null || _d === void 0 ? void 0 : _d.fieldName) === this._layer.objectIdField : false;
         });
       });
     }
@@ -248,20 +289,30 @@ export class LayerTable {
    * @returns void
    */
   async _resetTable() {
-    if (this._layer && this._table) {
+    if (this._table) {
       this._clearSelection();
       this._allIds = [];
       this.featureSelectionChange.emit(this._selectedIndexes);
-      const columnTemplates = this._getColumnTemplates(this._layer.id);
-      this._table.layer = this._layer;
-      this._table.tableTemplate.columnTemplates = columnTemplates;
-      this._checkEditEnabled();
-      this._table.view = this.mapView;
-      this._table.editingEnabled = this._editEnabled;
-      this._table.clearSelectionFilter();
-      this._showOnlySelected = false;
-      this._sortActive = false;
-      await this._sortTable();
+      if (this._layer) {
+        await this._layer.when(() => {
+          const columnTemplates = this._getColumnTemplates(this._layer.id);
+          this._table.layer = this._layer;
+          this._table.tableTemplate.columnTemplates = columnTemplates;
+          this._table.view = this.mapView;
+          this._checkEditEnabled();
+          this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
+        });
+        await this._table.when(() => {
+          this._table.clearSelectionFilter();
+        });
+        this._showOnlySelected = false;
+        this._sortActive = false;
+        await this._sortTable();
+      }
+      else {
+        this._table.view = this.mapView;
+        this._table.layer = this._layer;
+      }
     }
   }
   /**
@@ -282,11 +333,10 @@ export class LayerTable {
     if (this._table && this._layer && !this._sortActive) {
       if (!this._tableSorting && this.showNewestFirst) {
         this._tableSorting = true;
-        await this._table.when(async () => {
-          await this._layer.when(async () => {
-            this._table.sortColumn(this._layer.objectIdField, "desc");
-            this._tableSorting = false;
-          });
+        await this._table.when();
+        await this._layer.when(() => {
+          this._table.sortColumn(this._layer.objectIdField, "desc");
+          this._tableSorting = false;
         });
       }
     }
@@ -484,11 +534,12 @@ export class LayerTable {
    * @returns a promise that will resolve when the operation is complete
    */
   async _layerSelectionChanged(evt) {
+    var _a;
     const id = evt.detail[0];
-    if (id !== this._layer.id || this._allIds.length === 0) {
+    if (id !== ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id) || this._allIds.length === 0) {
       this._fetchingData = true;
       const columnTemplates = this._getColumnTemplates(id);
-      this._layer = await getLayer(this.mapView, id);
+      this._layer = await getLayerOrTable(this.mapView, id);
       this._allIds = await queryAllIds(this._layer);
       if (!this._table) {
         await this._getTable(this._tableNode, columnTemplates);
@@ -623,6 +674,23 @@ export class LayerTable {
           "text": "esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
         }
       },
+      "onlyShowUpdatableLayers": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: When true only editable layers that support the update capability will be available"
+        },
+        "attribute": "only-show-updatable-layers",
+        "reflect": false
+      },
       "showNewestFirst": {
         "type": "boolean",
         "mutable": false,
@@ -737,6 +805,18 @@ export class LayerTable {
         "target": "window",
         "capture": false,
         "passive": false
+      }, {
+        "name": "editsComplete",
+        "method": "editsComplete",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "noLayersFound",
+        "method": "noLayersFound",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }];
   }
 }