@esri/solutions-components 0.6.3 → 0.6.4

package/dist/collection/utils/interfaces.ts

@@ -167,9 +167,9 @@ export interface IValueChange {
 }
 
 /**
- * Layer id and title key value pair
+ * Layer or table id and title key value pair
  */
-export interface ILayerHash {
+export interface IMapItemHash {
   [key: string]: string;
 }
 
@@ -453,7 +453,8 @@ export interface IExportInfos {
 }
 
 export interface IExportInfo {
-  ids: number[],
-  layerView: __esri.FeatureLayerView
-  selectionSetNames: string[]
+  ids: number[];
+  layer?: __esri.FeatureLayer;
+  layerView?: __esri.FeatureLayerView;
+  selectionSetNames: string[];
 }

package/dist/collection/utils/mapViewUtils.js

@@ -40,6 +40,24 @@ export async function getMapLayerHash(mapView) {
   });
   return layerHash;
 }
+/**
+ * Gets the table names from the current map
+ *
+ * @param mapView the map view to fetch the table names from
+ *
+ * @returns Promise resolving with an array of table names
+ *
+ */
+export async function getMapTableHash(mapView) {
+  let tableHash = {};
+  await mapView.when(() => {
+    tableHash = mapView.map.allTables.toArray().reduce((prev, cur) => {
+      prev[cur.id] = cur.title;
+      return prev;
+    }, {});
+  });
+  return tableHash;
+}
 /**
  * Gets the layer names from the current map
  *
@@ -60,6 +78,25 @@ export async function getMapLayerIds(mapView) {
   });
   return layerIds;
 }
+/**
+ * Gets the table names from the current map
+ *
+ * @param mapView the map view to fetch the table names from
+ *
+ * @returns Promise resolving with an array of table names
+ *
+ */
+export async function getMapTableIds(mapView) {
+  // TODO...seems like its the same as the hash...see if I can remove this
+  let tableIds = [];
+  await mapView.when(() => {
+    tableIds = mapView.map.allTables.toArray().reduce((prev, cur) => {
+      prev.push(cur.id);
+      return prev;
+    }, []);
+  });
+  return tableIds;
+}
 /**
  * Get a layer view by id
  *
@@ -69,8 +106,8 @@ export async function getMapLayerIds(mapView) {
  * @returns Promise resolving with the fetched layer view
  *
  */
-export async function getMapLayerView(mapView, id) {
-  const layer = await getMapLayer(mapView, id);
+export async function getFeatureLayerView(mapView, id) {
+  const layer = await getLayer(mapView, id);
   return layer ? await mapView.whenLayerView(layer) : undefined;
 }
 /**
@@ -82,10 +119,13 @@ export async function getMapLayerView(mapView, id) {
  * @returns Promise resolving with the fetched layer
  *
  */
-export async function getMapLayer(mapView, id) {
+export async function getLayer(mapView, id) {
   let layers = [];
   await mapView.when(() => {
-    layers = mapView.map.allLayers.toArray().filter((l) => {
+    layers = [
+      ...mapView.map.allLayers.toArray(),
+      ...mapView.map.allTables.toArray()
+    ].filter((l) => {
       return l.id === id;
     });
   });
@@ -100,7 +140,6 @@ export async function getMapLayer(mapView, id) {
  * @param updateExtent optional (default false) boolean to indicate if we should zoom to the extent
  *
  * @returns Promise resolving with the highlight handle
- *
  */
 export async function highlightFeatures(ids, layerView, mapView, updateExtent = false) {
   if (updateExtent) {

package/dist/collection/utils/mapViewUtils.ts

@@ -15,7 +15,7 @@
  */
 
 import { queryExtent } from "./queryUtils";
-import { EWorkflowType, ILayerHash, ISelectionSet } from "./interfaces";
+import { EWorkflowType, IMapItemHash, ISelectionSet } from "./interfaces";
 
 /**
  * Gets the layer names from the current map
@@ -27,7 +27,7 @@ import { EWorkflowType, ILayerHash, ISelectionSet } from "./interfaces";
  */
 export async function getMapLayerHash(
   mapView: __esri.MapView
-): Promise<ILayerHash> {
+): Promise<IMapItemHash> {
   let layerHash = {};
   await mapView.when(() => {
     layerHash = mapView.map.allLayers.toArray().reduce((prev, cur) => {
@@ -40,6 +40,27 @@ export async function getMapLayerHash(
   return layerHash;
 }
 
+/**
+ * Gets the table names from the current map
+ *
+ * @param mapView the map view to fetch the table names from
+ *
+ * @returns Promise resolving with an array of table names
+ *
+ */
+export async function getMapTableHash(
+  mapView: __esri.MapView
+): Promise<IMapItemHash> {
+  let tableHash = {};
+  await mapView.when(() => {
+    tableHash = mapView.map.allTables.toArray().reduce((prev, cur) => {
+      prev[cur.id] = cur.title;
+      return prev;
+    }, {});
+  });
+  return tableHash;
+}
+
 /**
  * Gets the layer names from the current map
  *
@@ -63,6 +84,28 @@ export async function getMapLayerIds(
   return layerIds;
 }
 
+/**
+ * Gets the table names from the current map
+ *
+ * @param mapView the map view to fetch the table names from
+ *
+ * @returns Promise resolving with an array of table names
+ *
+ */
+export async function getMapTableIds(
+  mapView: __esri.MapView
+): Promise<string[]> {
+  // TODO...seems like its the same as the hash...see if I can remove this
+  let tableIds = [];
+  await mapView.when(() => {
+    tableIds = mapView.map.allTables.toArray().reduce((prev, cur) => {
+      prev.push(cur.id);
+      return prev;
+    }, []);
+  });
+  return tableIds;
+}
+
 /**
  * Get a layer view by id
  *
@@ -72,11 +115,11 @@ export async function getMapLayerIds(
  * @returns Promise resolving with the fetched layer view
  *
  */
-export async function getMapLayerView(
+export async function getFeatureLayerView(
   mapView: __esri.MapView,
   id: string
 ): Promise<__esri.FeatureLayerView> {
-  const layer = await getMapLayer(mapView, id);
+  const layer = await getLayer(mapView, id);
   return layer ? await mapView.whenLayerView(layer) : undefined;
 }
 
@@ -89,13 +132,16 @@ export async function getMapLayerView(
  * @returns Promise resolving with the fetched layer
  *
  */
-export async function getMapLayer(
+export async function getLayer(
   mapView: __esri.MapView,
   id: string
 ): Promise<__esri.FeatureLayer> {
   let layers = [];
   await mapView.when(() => {
-    layers = mapView.map.allLayers.toArray().filter((l) => {
+    layers = [
+      ...mapView.map.allLayers.toArray(),
+      ...mapView.map.allTables.toArray()
+    ].filter((l) => {
       return l.id === id;
     });
   });
@@ -111,7 +157,6 @@ export async function getMapLayer(
  * @param updateExtent optional (default false) boolean to indicate if we should zoom to the extent
  *
  * @returns Promise resolving with the highlight handle
- *
  */
 export async function highlightFeatures(
   ids: number[],

package/dist/collection/utils/publicNotificationStore.js

@@ -22,10 +22,14 @@ import { createStore } from "@stencil/store";
 const { state, onChange } = createStore({
   // List of layers added and managed by the component
   managedLayers: [],
+  // List of tables added and managed by the component
+  managedTables: [],
   // Handle[]: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Handles.html#Handle
   highlightHandles: [],
-  // ILayerHash title: id lookup to be used across components
+  // IMapItemHash title: id lookup to be used across components
   layerNameHash: {},
+  // IMapItemHash title: id lookup to be used across components
+  tableNameHash: {},
   // remove all handles
   removeHandles: () => {
     state.highlightHandles.forEach(h => h === null || h === void 0 ? void 0 : h.remove());

package/dist/collection/utils/publicNotificationStore.ts

@@ -19,10 +19,14 @@ import { createStore } from "@stencil/store";
 const { state, onChange } = createStore({
 	// List of layers added and managed by the component
 	managedLayers: [],
+	// List of tables added and managed by the component
+	managedTables: [],
 	// Handle[]: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Handles.html#Handle
 	highlightHandles: [],
-	// ILayerHash title: id lookup to be used across components
+	// IMapItemHash title: id lookup to be used across components
 	layerNameHash: {},
+	// IMapItemHash title: id lookup to be used across components
+	tableNameHash: {},
 	// remove all handles
 	removeHandles: () => {
 		state.highlightHandles.forEach(h => h?.remove());

package/dist/components/card-manager2.js

@@ -6,7 +6,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { q as queryFeaturesByID } from './queryUtils.js';
-import { a as getMapLayerView } from './mapViewUtils.js';
+import { a as getLayer } from './mapViewUtils.js';
 import { d as defineCustomElement$a } from './alert.js';
 import { d as defineCustomElement$9 } from './button.js';
 import { d as defineCustomElement$8 } from './chip.js';
@@ -24,7 +24,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.layerView = undefined;
+    this.layer = undefined;
     this.mapView = undefined;
     this._cardLoading = false;
     this._graphics = undefined;
@@ -52,7 +52,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const ids = evt.detail;
     this._cardLoading = true;
     // only query if we have some ids...query with no ids will result in all features being returned
-    const featureSet = ids.length > 0 ? await queryFeaturesByID(ids, this.layerView.layer, [], false, this.mapView.spatialReference) : [];
+    const featureSet = ids.length > 0 ? await queryFeaturesByID(ids, this.layer, [], false, this.mapView.spatialReference) : [];
     this._graphics = featureSet;
     this._cardLoading = false;
   }
@@ -61,7 +61,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    */
   async layerSelectionChange(evt) {
     const id = evt.detail[0];
-    this.layerView = await getMapLayerView(this.mapView, id);
+    this.layer = await getLayer(this.mapView, id);
   }
   //--------------------------------------------------------------------------
   //
@@ -103,7 +103,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   get el() { return this; }
   static get style() { return cardManagerCss; }
 }, [0, "card-manager", {
-    "layerView": [16],
+    "layer": [16],
     "mapView": [16],
     "_cardLoading": [32],
     "_graphics": [32],

package/dist/components/crowdsource-manager.js

@@ -42,7 +42,7 @@ import { d as defineCustomElement$4 } from './map-card2.js';
 import { d as defineCustomElement$3 } from './map-layer-picker2.js';
 import { d as defineCustomElement$2 } from './map-tools2.js';
 
-const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px}.padding-1{padding:1rem}.padding-1-2{padding:0.5rem}.header-title{display:flex;float:left}.header-controls-label{display:flex;float:right}.header-controls{height:50px}.img-background{background-repeat:no-repeat;background-size:100% 100%;width:38px;height:26px}.grid-background{background-image:url('../../assets/data/images/grid.png')}.vertical-background{background-image:url('../../assets/data/images/horizontal.png')}.horizontal-background{background-image:url('../../assets/data/images/vertical.png')}.action-center{-webkit-box-align:center;-webkit-align-items:center;-ms-grid-row-align:center;align-items:center;align-content:center;justify-content:center}.background-transparent{background-color:transparent}.display-flex{display:flex}.header-text{font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);padding-inline:0.75rem;padding-block:0.875rem;line-height:1.25rem}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-ui-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 0.5rem)}.adjusted-height-100{height:calc(100% - 1rem)}.icon-color{--calcite-ui-icon-color:var(--calcite-ui-brand)}.icon{cursor:pointer}.tooltip-message{padding:5px 8px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}.display-none{display:none}";
+const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px}.padding-1{padding:1rem}.padding-1-2{padding:0.5rem}.header-title{display:flex;float:left}.header-controls-label{display:flex;float:right}.header-controls{height:50px}.img-background{background-repeat:no-repeat;background-size:100% 100%;width:38px;height:26px}.grid-background{background-image:url('../../assets/data/images/grid.png')}.horizontal-background{background-image:url('../../assets/data/images/horizontal.png')}.vertical-background{background-image:url('../../assets/data/images/vertical.png')}.action-center{-webkit-box-align:center;-webkit-align-items:center;-ms-grid-row-align:center;align-items:center;align-content:center;justify-content:center}.background-transparent{background-color:transparent}.display-flex{display:flex}.header-text{font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);padding-inline:0.75rem;padding-block:0.875rem;line-height:1.25rem}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-ui-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 0.5rem)}.adjusted-height-100{height:calc(100% - 1rem)}.icon-color{--calcite-ui-icon-color:var(--calcite-ui-brand)}.icon{cursor:pointer}.tooltip-message{padding:5px 8px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}.display-none{display:none}";
 
 const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -98,7 +98,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
    * Renders the component.
    */
   render() {
-    return (h(Host, null, h("calcite-shell", null, h("calcite-panel", { class: "width-full height-full", heading: this._translations.header }, h("div", { class: "display-flex", slot: "header-actions-end" }, h("div", { class: "display-flex action-center" }, h("calcite-icon", { class: "icon icon-color", icon: "information", id: "app-information-icon", scale: "s" }), h("calcite-popover", { closable: true, label: "", referenceElement: "app-information-icon" }, h("span", { class: "tooltip-message" }, this._translations.appInfo))), h("div", { class: "header-text" }, this._translations.layout), this._getAction("grid-background", ELayoutMode.GRID, this._translations.grid), this._getAction("horizontal-background", ELayoutMode.VERTICAL, this._translations.vertical), this._getAction("vertical-background", ELayoutMode.HORIZONTAL, this._translations.horizontal)), this._getBody(this._layoutMode, this._panelOpen)))));
+    return (h(Host, null, h("calcite-shell", null, h("calcite-panel", { class: "width-full height-full", heading: this._translations.header }, h("div", { class: "display-flex", slot: "header-actions-end" }, h("div", { class: "display-flex action-center" }, h("calcite-icon", { class: "icon icon-color", icon: "information", id: "app-information-icon", scale: "s" }), h("calcite-popover", { closable: true, label: "", referenceElement: "app-information-icon" }, h("span", { class: "tooltip-message" }, this._translations.appInfo))), h("div", { class: "header-text" }, this._translations.layout), this._getAction("grid-background", ELayoutMode.GRID, this._translations.grid), this._getAction("vertical-background", ELayoutMode.VERTICAL, this._translations.vertical), this._getAction("horizontal-background", ELayoutMode.HORIZONTAL, this._translations.horizontal)), this._getBody(this._layoutMode, this._panelOpen)))));
   }
   //--------------------------------------------------------------------------
   //

package/dist/components/downloadUtils.js

@@ -2708,8 +2708,9 @@ function _getSelectionSetNames(exportInfos, id = /.+/) {
 async function consolidateLabels(exportInfos, formatUsingLayerPopup = true, includeHeaderNames = false, isCSVExport = false) {
   const labelRequests = [];
   Object.keys(exportInfos).forEach(k => {
+    var _a;
     const labelInfo = exportInfos[k];
-    labelRequests.push(_prepareLabels(labelInfo.layerView.layer, labelInfo.ids, formatUsingLayerPopup, includeHeaderNames));
+    labelRequests.push(_prepareLabels(((_a = labelInfo.layerView) === null || _a === void 0 ? void 0 : _a.layer) || labelInfo.layer, labelInfo.ids, formatUsingLayerPopup, includeHeaderNames));
     if (isCSVExport) {
       // add the layer id as a temp value separator that we can use to split values for CSV export
       labelRequests.push(Promise.resolve([[k]]));

package/dist/components/edit-card2.js

@@ -129,9 +129,10 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         },
         container
       });
-      if (this._editHandle && this._attachmentHandle) {
+      if (this._editHandle && this._attachmentHandle && this._activeWorkflowHandle) {
         this._editHandle.remove();
         this._attachmentHandle.remove();
+        this._activeWorkflowHandle.remove();
       }
       this._attachmentHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "adding-attachment" || this._editor.viewModel.state === "editing-attachment", () => {
         this._shouldClose = false;
@@ -146,6 +147,11 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           this._shouldClose = true;
         }
       });
+      this._activeWorkflowHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.activeWorkflow) === null || _a === void 0 ? void 0 : _a.activeWorkflow; }, (activeWorkflow) => {
+        if ((activeWorkflow === null || activeWorkflow === void 0 ? void 0 : activeWorkflow.type) === "update-table-record" || (activeWorkflow === null || activeWorkflow === void 0 ? void 0 : activeWorkflow.type) === "create-features") {
+          this._shouldClose = false;
+        }
+      });
       // had issues with destroy before adding like this
       this._editContainer.appendChild(container);
     }

package/dist/components/info-card2.js

@@ -130,14 +130,13 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         visibleElements: {
           actionBar: false,
           closeButton: false,
-          heading: false
+          heading: true
         },
-        view: this.mapView
+        viewModel: {
+          view: this.mapView
+        }
       });
     }
-    else {
-      this._features.view = this.mapView;
-    }
   }
   /**
    * Set the alertOpen member to false when the alert is closed

package/dist/components/layer-table2.js

@@ -6,7 +6,7 @@
 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 { b as getMapLayerIds, a as getMapLayerView } from './mapViewUtils.js';
+import { b as getMapLayerIds, a as getLayer } 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';
@@ -57,7 +57,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.mapView = undefined;
     this._alertOpen = false;
     this._fetchingData = false;
-    this._layerView = undefined;
+    this._layer = undefined;
     this._selectedIndexes = [];
     this._showOnlySelected = false;
     this._translations = undefined;
@@ -73,7 +73,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   async mapViewWatchHandler() {
     this._fetchingData = true;
     const mapLayerIds = await getMapLayerIds(this.mapView);
-    this._layerView = await getMapLayerView(this.mapView, mapLayerIds[0]);
+    this._layer = await getLayer(this.mapView, mapLayerIds[0]);
     this._resetTable();
     this.reactiveUtils.on(() => this.mapView, "click", (event) => {
       void this._mapClicked(event);
@@ -83,7 +83,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   /**
    * watch for changes in layer view and verify if it has editing enabled
    */
-  async _layerViewWatchHandler() {
+  async _layerWatchHandler() {
     this._fetchingData = true;
     this._resetTable();
     this._fetchingData = false;
@@ -120,7 +120,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * Renders the component.
    */
   render() {
-    if (!this._layerView) {
+    if (!this._layer) {
       return null;
     }
     const tableNodeClass = this._fetchingData ? "display-none" : "";
@@ -155,8 +155,8 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    */
   _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-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._showSelected() }, this._showOnlySelected ? this._translations.showAll :
-      this._translations.showSelected), h("calcite-dropdown-item", { iconStart: "erase", onClick: () => this._clearSelection() }, this._translations.clearSelection), 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)))));
+    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
@@ -164,10 +164,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns void
    */
   _getTable(node) {
-    var _a;
-    if ((_a = this._layerView) === null || _a === void 0 ? void 0 : _a.layer) {
+    if (this._layer) {
       this._table = new this.FeatureTable({
-        layer: this._layerView.layer,
+        layer: this._layer,
         view: this.mapView,
         //editingEnabled: this._editEnabled,
         highlightOnRowSelectEnabled: true,
@@ -180,6 +179,14 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       });
       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);
       });
     }
@@ -190,10 +197,11 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns void
    */
   _resetTable() {
-    var _a;
-    if (((_a = this._layerView) === null || _a === void 0 ? void 0 : _a.layer) && this._table) {
-      this._table.layer = this._layerView.layer;
-      this._editEnabled = this._layerView.layer.editingEnabled;
+    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();
@@ -207,7 +215,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    */
   async _mapClicked(evt) {
     const opts = {
-      include: this._layerView.layer
+      include: this._layer
     };
     const hitTestResult = await this.mapView.hitTest(evt.screenPoint, opts);
     if (hitTestResult.results.length > 0) {
@@ -252,7 +260,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    *
    * @returns void
    */
-  _showSelected() {
+  _toggleShowSelected() {
     this._showOnlySelected = !this._showOnlySelected;
     if (this._showOnlySelected) {
       this._table.filterBySelection();
@@ -297,10 +305,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   async _exportToCSV() {
     const exportInfos = {};
     const ids = this._table.highlightIds.toArray();
-    exportInfos[this._layerView.layer.id] = {
+    exportInfos[this._layer.id] = {
       selectionSetNames: [],
       ids,
-      layerView: this._layerView
+      layer: this._layer
     };
     void downloadCSV(exportInfos, false, // formatUsingLayerPopup
     true);
@@ -335,7 +343,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this._alertMessage = this._translations.confirm;
       this._alertKind = "danger";
       this._alertActionFunction = () => {
-        void this._layerView.layer.applyEdits({
+        void this._layer.applyEdits({
           deleteFeatures: this._table.highlightIds.toArray()
         });
         this._alertOpen = false;
@@ -366,15 +374,14 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @returns a promise that will resolve when the operation is complete
    */
   async _layerSelectionChanged(evt) {
-    var _a;
     const id = evt.detail[0];
-    if (id !== ((_a = this._layerView) === null || _a === void 0 ? void 0 : _a.layer.id) || this._allIds.length === 0) {
+    if (id !== this._layer.id || this._allIds.length === 0) {
       this._fetchingData = true;
       this._table.highlightIds.removeAll();
-      this._layerView = await getMapLayerView(this.mapView, id);
-      this._allIds = await queryAllIds(this._layerView.layer);
+      this._layer = await getLayer(this.mapView, id);
+      this._allIds = await queryAllIds(this._layer);
       this._selectedIndexes = [];
-      this._table.layer = this._layerView.layer;
+      this._table.layer = this._layer;
       this._table.render();
       this._fetchingData = false;
     }
@@ -392,14 +399,14 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   get el() { return this; }
   static get watchers() { return {
     "mapView": ["mapViewWatchHandler"],
-    "_layerView": ["_layerViewWatchHandler"]
+    "_layer": ["_layerWatchHandler"]
   }; }
   static get style() { return layerTableCss; }
 }, [0, "layer-table", {
     "mapView": [16],
     "_alertOpen": [32],
     "_fetchingData": [32],
-    "_layerView": [32],
+    "_layer": [32],
     "_selectedIndexes": [32],
     "_showOnlySelected": [32],
     "_translations": [32],