@esri/solutions-components 0.6.29 → 0.6.32

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

@@ -60,14 +60,16 @@
 
 .bottom-left {
   position: absolute;
-  left: 5;
+  left: 0;
   bottom: 0;
+  padding-left: 5px;
 }
 
 html[dir="rtl"] .bottom-left {
   position: absolute;
-  right: 5;
+  right: 0;
   bottom: 0;
+  padding-right: 5px;
 }
 
 .height-19 {

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

@@ -599,33 +599,30 @@ export class LayerTable {
    * @returns void
    */
   async _resetTable() {
-    if (this._table) {
-      this._clearSelection();
-      this._allIds = [];
-      this.featureSelectionChange.emit(this._selectedIndexes);
-      if (this._layer) {
-        await this._layer.when(() => {
-          var _a, _b;
-          const columnTemplates = this._getColumnTemplates(this._layer.id, (_b = (_a = this._layer) === null || _a === void 0 ? void 0 : _a.popupTemplate) === null || _b === void 0 ? void 0 : _b.fieldInfos);
-          this._table.layer = this._layer;
-          this._table.tableTemplate.columnTemplates = columnTemplates;
-          this._table.view = this.mapView;
-          this._checkEditEnabled();
-          this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
-          this._initToolInfos();
-        });
-        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;
-      }
+    var _a, _b;
+    this._clearSelection();
+    this._allIds = [];
+    this.featureSelectionChange.emit(this._selectedIndexes);
+    const columnTemplates = this._getColumnTemplates(this._layer.id, (_b = (_a = this._layer) === null || _a === void 0 ? void 0 : _a.popupTemplate) === null || _b === void 0 ? void 0 : _b.fieldInfos);
+    this._allIds = await queryAllIds(this._layer);
+    if (!this._table) {
+      await this._getTable(this._tableNode, columnTemplates);
+    }
+    else if (columnTemplates) {
+      this._table.tableTemplate.columnTemplates = columnTemplates;
     }
+    this._table.layer = this._layer;
+    this._table.view = this.mapView;
+    this._checkEditEnabled();
+    this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
+    this._initToolInfos();
+    await this._table.when(() => {
+      this._table.highlightIds.removeAll();
+      this._table.clearSelectionFilter();
+    });
+    this._showOnlySelected = false;
+    this._sortActive = false;
+    await this._sortTable();
   }
   /**
    * Verify edit capabilities of the layer
@@ -827,28 +824,15 @@ export class LayerTable {
    * @returns a promise that will resolve when the operation is complete
    */
   async _layerSelectionChanged(evt) {
-    var _a, _b, _c;
+    var _a;
     const id = evt.detail[0];
     if (id !== ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id) || this._allIds.length === 0) {
       this._fetchingData = true;
-      this._layer = await getLayerOrTable(this.mapView, id);
-      const columnTemplates = this._getColumnTemplates(id, (_c = (_b = this._layer) === null || _b === void 0 ? void 0 : _b.popupTemplate) === null || _c === void 0 ? void 0 : _c.fieldInfos);
-      this._allIds = await queryAllIds(this._layer);
-      if (!this._table) {
-        await this._getTable(this._tableNode, columnTemplates);
-      }
-      else if (columnTemplates) {
-        this._table.tableTemplate.columnTemplates = columnTemplates;
-      }
-      await this._table.when(() => {
-        this._table.highlightIds.removeAll();
+      const layer = await getLayerOrTable(this.mapView, id);
+      await layer.when(() => {
+        this._layer = layer;
       });
-      this._selectedIndexes = [];
-      this._table.layer = this._layer;
-      this._table.render();
     }
-    this._sortActive = false;
-    await this._sortTable();
     this._fetchingData = false;
   }
   /**

package/dist/components/edit-card2.js

@@ -10,7 +10,7 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './loader.js';
 import { d as defineCustomElement$1 } from './notice.js';
 
-const editCardCss = ":host{display:block}.padding-bottom-1{padding-bottom:1rem}.font-bold{font-weight:var(--calcite-font-weight-bold)}.font-500{font-weight:var(--calcite-font-weight-medium)}.font-italic{font-style:italic}#feature-form{--calcite-ui-background:none;padding-top:0px}.padding-sides-bottom-1{padding:0 1rem 1rem 1rem}.position-relative{position:relative}.esri-editor__prompt--danger{position:relative !important;width:100% !important;background-color:var(--calcite-ui-foreground-1) !important}.esri-feature__content-node{background-color:var(--calcite-ui-foreground-1) !important}.esri-editor__panel-toolbar{display:none !important}";
+const editCardCss = ":host{display:block}.padding-bottom-1{padding-bottom:1rem}.font-bold{font-weight:var(--calcite-font-weight-bold)}.font-500{font-weight:var(--calcite-font-weight-medium)}.font-italic{font-style:italic}#feature-form{--calcite-ui-background:none;padding-top:0px}.padding-sides-bottom-1{padding:0 1rem 1rem 1rem}.position-relative{position:relative}.esri-editor__prompt--danger{position:relative !important;width:100% !important;background-color:var(--calcite-ui-foreground-1) !important}.esri-feature__content-node{background-color:var(--calcite-ui-foreground-1) !important}.esri-editor__panel-toolbar{display:none !important}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}";
 
 const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLElement {
   constructor() {
@@ -39,7 +39,7 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
    */
   async graphicsWatchHandler() {
     if (this.graphics.length === 0) {
-      this._closeEdit();
+      await this._closeEdit();
     }
   }
   async openWatchHandler(v) {
@@ -53,9 +53,12 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
       this._editorLoading = false;
     }
     if (!v) {
-      this._closeEdit();
+      await this._closeEdit();
     }
   }
+  async featureSelectionChange() {
+    await this._closeEdit();
+  }
   //--------------------------------------------------------------------------
   //
   //  Functions (lifecycle)
@@ -85,7 +88,7 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
       }
       this._layerEditHandle = this._layer.on("edits", () => {
         this.editsComplete.emit();
-        this._closeEdit();
+        void this._closeEdit();
       });
     }
   }
@@ -98,9 +101,9 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
     // when you use MULTI edit mode...is fine in SINGLE
     const editDisabled = ((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.graphics[0] ?
       !this.graphics[0].layer.editingEnabled : true;
-    const tableNodeClass = this._editorLoading ? "display-none" : "";
+    const tableNodeClass = this._editorLoading ? "display-none" : "position-absolute";
     const loadingClass = this._editorLoading ? "" : "display-none";
-    return (h(Host, null, h("div", { class: "position-relative" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { slot: "content" }, h("div", { class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { class: loadingClass, scale: "s" })))));
+    return (h(Host, null, h("div", { class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { class: "position-absolute", slot: "content" }, h("div", { class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { class: loadingClass, scale: "s" })))));
   }
   //--------------------------------------------------------------------------
   //
@@ -156,7 +159,7 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
       });
       this._editHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "ready", () => {
         if (this._shouldClose) {
-          this._closeEdit();
+          void this._closeEdit();
         }
         else if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
           void this._startUpdate();
@@ -176,7 +179,13 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
    *
    * @returns void
    */
-  _closeEdit() {
+  async _closeEdit() {
+    var _a, _b, _c;
+    this._shouldClose = true;
+    if ((_a = this._editor) === null || _a === void 0 ? void 0 : _a.activeWorkflow) {
+      await ((_b = this._editor) === null || _b === void 0 ? void 0 : _b.cancelWorkflow());
+    }
+    (_c = this._editor) === null || _c === void 0 ? void 0 : _c.destroy();
     this._shouldClose = false;
     this.closeEdit.emit();
   }
@@ -211,7 +220,7 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
     "graphicIndex": [2, "graphic-index"],
     "_editorLoading": [32],
     "_translations": [32]
-  }, undefined, {
+  }, [[8, "featureSelectionChange", "featureSelectionChange"]], {
     "graphics": ["graphicsWatchHandler"],
     "open": ["openWatchHandler"]
   }]);

package/dist/components/layer-table2.js

@@ -33,7 +33,7 @@ import { d as defineCustomElement$3 } from './shell.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 import { d as defineCustomElement$1 } from './map-layer-picker2.js';
 
-const layerTableCss = ":host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.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)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.bottom-left{position:absolute;left:5;bottom:0}html[dir=\"rtl\"] .bottom-left{position:absolute;right:5;bottom:0}.height-19{height:19px}.background{background-color:var(--calcite-ui-background)}.text-color{color:var(--calcite-ui-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-ui-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{padding:var(--lumo-space-xs) var(--lumo-space-m) !important;font-size:14px !important}";
+const layerTableCss = ":host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.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)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.bottom-left{position:absolute;left:0;bottom:0;padding-left:5px}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0;padding-right:5px}.height-19{height:19px}.background{background-color:var(--calcite-ui-background)}.text-color{color:var(--calcite-ui-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-ui-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{padding:var(--lumo-space-xs) var(--lumo-space-m) !important;font-size:14px !important}";
 
 const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTMLElement {
   constructor() {
@@ -614,33 +614,30 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    * @returns void
    */
   async _resetTable() {
-    if (this._table) {
-      this._clearSelection();
-      this._allIds = [];
-      this.featureSelectionChange.emit(this._selectedIndexes);
-      if (this._layer) {
-        await this._layer.when(() => {
-          var _a, _b;
-          const columnTemplates = this._getColumnTemplates(this._layer.id, (_b = (_a = this._layer) === null || _a === void 0 ? void 0 : _a.popupTemplate) === null || _b === void 0 ? void 0 : _b.fieldInfos);
-          this._table.layer = this._layer;
-          this._table.tableTemplate.columnTemplates = columnTemplates;
-          this._table.view = this.mapView;
-          this._checkEditEnabled();
-          this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
-          this._initToolInfos();
-        });
-        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;
-      }
+    var _a, _b;
+    this._clearSelection();
+    this._allIds = [];
+    this.featureSelectionChange.emit(this._selectedIndexes);
+    const columnTemplates = this._getColumnTemplates(this._layer.id, (_b = (_a = this._layer) === null || _a === void 0 ? void 0 : _a.popupTemplate) === null || _b === void 0 ? void 0 : _b.fieldInfos);
+    this._allIds = await queryAllIds(this._layer);
+    if (!this._table) {
+      await this._getTable(this._tableNode, columnTemplates);
+    }
+    else if (columnTemplates) {
+      this._table.tableTemplate.columnTemplates = columnTemplates;
     }
+    this._table.layer = this._layer;
+    this._table.view = this.mapView;
+    this._checkEditEnabled();
+    this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
+    this._initToolInfos();
+    await this._table.when(() => {
+      this._table.highlightIds.removeAll();
+      this._table.clearSelectionFilter();
+    });
+    this._showOnlySelected = false;
+    this._sortActive = false;
+    await this._sortTable();
   }
   /**
    * Verify edit capabilities of the layer
@@ -842,28 +839,15 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    * @returns a promise that will resolve when the operation is complete
    */
   async _layerSelectionChanged(evt) {
-    var _a, _b, _c;
+    var _a;
     const id = evt.detail[0];
     if (id !== ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id) || this._allIds.length === 0) {
       this._fetchingData = true;
-      this._layer = await getLayerOrTable(this.mapView, id);
-      const columnTemplates = this._getColumnTemplates(id, (_c = (_b = this._layer) === null || _b === void 0 ? void 0 : _b.popupTemplate) === null || _c === void 0 ? void 0 : _c.fieldInfos);
-      this._allIds = await queryAllIds(this._layer);
-      if (!this._table) {
-        await this._getTable(this._tableNode, columnTemplates);
-      }
-      else if (columnTemplates) {
-        this._table.tableTemplate.columnTemplates = columnTemplates;
-      }
-      await this._table.when(() => {
-        this._table.highlightIds.removeAll();
+      const layer = await getLayerOrTable(this.mapView, id);
+      await layer.when(() => {
+        this._layer = layer;
       });
-      this._selectedIndexes = [];
-      this._table.layer = this._layer;
-      this._table.render();
     }
-    this._sortActive = false;
-    await this._sortTable();
     this._fetchingData = false;
   }
   /**

package/dist/esm/calcite-alert_3.entry.js

@@ -319,7 +319,7 @@ const Alert = class {
 };
 Alert.style = alertCss;
 
-const editCardCss = ":host{display:block}.padding-bottom-1{padding-bottom:1rem}.font-bold{font-weight:var(--calcite-font-weight-bold)}.font-500{font-weight:var(--calcite-font-weight-medium)}.font-italic{font-style:italic}#feature-form{--calcite-ui-background:none;padding-top:0px}.padding-sides-bottom-1{padding:0 1rem 1rem 1rem}.position-relative{position:relative}.esri-editor__prompt--danger{position:relative !important;width:100% !important;background-color:var(--calcite-ui-foreground-1) !important}.esri-feature__content-node{background-color:var(--calcite-ui-foreground-1) !important}.esri-editor__panel-toolbar{display:none !important}";
+const editCardCss = ":host{display:block}.padding-bottom-1{padding-bottom:1rem}.font-bold{font-weight:var(--calcite-font-weight-bold)}.font-500{font-weight:var(--calcite-font-weight-medium)}.font-italic{font-style:italic}#feature-form{--calcite-ui-background:none;padding-top:0px}.padding-sides-bottom-1{padding:0 1rem 1rem 1rem}.position-relative{position:relative}.esri-editor__prompt--danger{position:relative !important;width:100% !important;background-color:var(--calcite-ui-foreground-1) !important}.esri-feature__content-node{background-color:var(--calcite-ui-foreground-1) !important}.esri-editor__panel-toolbar{display:none !important}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}";
 
 const EditCard = class {
   constructor(hostRef) {
@@ -347,7 +347,7 @@ const EditCard = class {
    */
   async graphicsWatchHandler() {
     if (this.graphics.length === 0) {
-      this._closeEdit();
+      await this._closeEdit();
     }
   }
   async openWatchHandler(v) {
@@ -361,9 +361,12 @@ const EditCard = class {
       this._editorLoading = false;
     }
     if (!v) {
-      this._closeEdit();
+      await this._closeEdit();
     }
   }
+  async featureSelectionChange() {
+    await this._closeEdit();
+  }
   //--------------------------------------------------------------------------
   //
   //  Functions (lifecycle)
@@ -393,7 +396,7 @@ const EditCard = class {
       }
       this._layerEditHandle = this._layer.on("edits", () => {
         this.editsComplete.emit();
-        this._closeEdit();
+        void this._closeEdit();
       });
     }
   }
@@ -406,9 +409,9 @@ const EditCard = class {
     // when you use MULTI edit mode...is fine in SINGLE
     const editDisabled = ((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.graphics[0] ?
       !this.graphics[0].layer.editingEnabled : true;
-    const tableNodeClass = this._editorLoading ? "display-none" : "";
+    const tableNodeClass = this._editorLoading ? "display-none" : "position-absolute";
     const loadingClass = this._editorLoading ? "" : "display-none";
-    return (h(Host, null, h("div", { class: "position-relative" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { slot: "content" }, h("div", { class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { class: loadingClass, scale: "s" })))));
+    return (h(Host, null, h("div", { class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { class: "position-absolute", slot: "content" }, h("div", { class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { class: loadingClass, scale: "s" })))));
   }
   //--------------------------------------------------------------------------
   //
@@ -464,7 +467,7 @@ const EditCard = class {
       });
       this._editHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "ready", () => {
         if (this._shouldClose) {
-          this._closeEdit();
+          void this._closeEdit();
         }
         else if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
           void this._startUpdate();
@@ -484,7 +487,13 @@ const EditCard = class {
    *
    * @returns void
    */
-  _closeEdit() {
+  async _closeEdit() {
+    var _a, _b, _c;
+    this._shouldClose = true;
+    if ((_a = this._editor) === null || _a === void 0 ? void 0 : _a.activeWorkflow) {
+      await ((_b = this._editor) === null || _b === void 0 ? void 0 : _b.cancelWorkflow());
+    }
+    (_c = this._editor) === null || _c === void 0 ? void 0 : _c.destroy();
     this._shouldClose = false;
     this.closeEdit.emit();
   }

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

@@ -99,7 +99,7 @@ const CardManager = class {
 };
 CardManager.style = cardManagerCss;
 
-const layerTableCss = ":host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.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)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.bottom-left{position:absolute;left:5;bottom:0}html[dir=\"rtl\"] .bottom-left{position:absolute;right:5;bottom:0}.height-19{height:19px}.background{background-color:var(--calcite-ui-background)}.text-color{color:var(--calcite-ui-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-ui-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{padding:var(--lumo-space-xs) var(--lumo-space-m) !important;font-size:14px !important}";
+const layerTableCss = ":host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.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)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.bottom-left{position:absolute;left:0;bottom:0;padding-left:5px}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0;padding-right:5px}.height-19{height:19px}.background{background-color:var(--calcite-ui-background)}.text-color{color:var(--calcite-ui-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-ui-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{padding:var(--lumo-space-xs) var(--lumo-space-m) !important;font-size:14px !important}";
 
 const LayerTable = class {
   constructor(hostRef) {
@@ -679,33 +679,30 @@ const LayerTable = class {
    * @returns void
    */
   async _resetTable() {
-    if (this._table) {
-      this._clearSelection();
-      this._allIds = [];
-      this.featureSelectionChange.emit(this._selectedIndexes);
-      if (this._layer) {
-        await this._layer.when(() => {
-          var _a, _b;
-          const columnTemplates = this._getColumnTemplates(this._layer.id, (_b = (_a = this._layer) === null || _a === void 0 ? void 0 : _a.popupTemplate) === null || _b === void 0 ? void 0 : _b.fieldInfos);
-          this._table.layer = this._layer;
-          this._table.tableTemplate.columnTemplates = columnTemplates;
-          this._table.view = this.mapView;
-          this._checkEditEnabled();
-          this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
-          this._initToolInfos();
-        });
-        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;
-      }
+    var _a, _b;
+    this._clearSelection();
+    this._allIds = [];
+    this.featureSelectionChange.emit(this._selectedIndexes);
+    const columnTemplates = this._getColumnTemplates(this._layer.id, (_b = (_a = this._layer) === null || _a === void 0 ? void 0 : _a.popupTemplate) === null || _b === void 0 ? void 0 : _b.fieldInfos);
+    this._allIds = await queryAllIds(this._layer);
+    if (!this._table) {
+      await this._getTable(this._tableNode, columnTemplates);
+    }
+    else if (columnTemplates) {
+      this._table.tableTemplate.columnTemplates = columnTemplates;
     }
+    this._table.layer = this._layer;
+    this._table.view = this.mapView;
+    this._checkEditEnabled();
+    this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
+    this._initToolInfos();
+    await this._table.when(() => {
+      this._table.highlightIds.removeAll();
+      this._table.clearSelectionFilter();
+    });
+    this._showOnlySelected = false;
+    this._sortActive = false;
+    await this._sortTable();
   }
   /**
    * Verify edit capabilities of the layer
@@ -907,28 +904,15 @@ const LayerTable = class {
    * @returns a promise that will resolve when the operation is complete
    */
   async _layerSelectionChanged(evt) {
-    var _a, _b, _c;
+    var _a;
     const id = evt.detail[0];
     if (id !== ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id) || this._allIds.length === 0) {
       this._fetchingData = true;
-      this._layer = await getLayerOrTable(this.mapView, id);
-      const columnTemplates = this._getColumnTemplates(id, (_c = (_b = this._layer) === null || _b === void 0 ? void 0 : _b.popupTemplate) === null || _c === void 0 ? void 0 : _c.fieldInfos);
-      this._allIds = await queryAllIds(this._layer);
-      if (!this._table) {
-        await this._getTable(this._tableNode, columnTemplates);
-      }
-      else if (columnTemplates) {
-        this._table.tableTemplate.columnTemplates = columnTemplates;
-      }
-      await this._table.when(() => {
-        this._table.highlightIds.removeAll();
+      const layer = await getLayerOrTable(this.mapView, id);
+      await layer.when(() => {
+        this._layer = layer;
       });
-      this._selectedIndexes = [];
-      this._table.layer = this._layer;
-      this._table.render();
     }
-    this._sortActive = false;
-    await this._sortTable();
     this._fetchingData = false;
   }
   /**