@esri/solutions-components 0.7.16 → 0.7.18

package/dist/components/layer-table2.js

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
+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 goToSelection, g as getLayerOrTable } from './mapViewUtils.js';
@@ -48,7 +48,7 @@ import { d as defineCustomElement$3 } from './instant-apps-filter-list2.js';
 import { d as defineCustomElement$2 } from './instant-apps-social-share2.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-color-border-2)}.border-end{border-inline-end:1px solid var(--calcite-color-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.height-50-px{height:50px}.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-color-background)}.text-color{color:var(--calcite-color-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-color-status-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{font-size:14px !important;color:var(--calcite-color-text-3) !important}.share-action{position:absolute;right:0}html[dir=\"rtl\"] .share-action{left:0}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.instant-app-share{height:50px !important;display:inline-flex}";
+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-color-border-2)}.border-end{border-inline-end:1px solid var(--calcite-color-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.height-50-px{height:50px}.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-color-background)}.text-color{color:var(--calcite-color-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-color-status-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{font-size:14px !important;color:var(--calcite-color-text-3) !important}.share-action{position:absolute;right:0}html[dir=\"rtl\"] .share-action{left:0}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.instant-app-share{height:50px !important;display:inline-flex}.border-top{border-top:1px solid var(--calcite-color-border-2)}";
 
 const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTMLElement {
     constructor() {
@@ -71,6 +71,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
          * boolean: When true the default OID provided via url param has been honored and should now be ignored
          */
         this._defaultOidHonored = false;
+        /**
+         * boolean: When true the observer has been set and we don't need to set it again
+         */
+        this._observerSet = false;
         /**
          * boolean: When true the shift key is currently pressed
          */
@@ -88,8 +92,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
          * 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;
@@ -102,7 +104,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this.enableCSV = undefined;
         this.enableInlineEdit = undefined;
         this.enableShare = undefined;
-        this.enableZoom = undefined;
+        this.isMobile = undefined;
         this.mapInfo = undefined;
         this.mapView = undefined;
         this.onlyShowUpdatableLayers = undefined;
@@ -113,9 +115,11 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this._confirmDelete = false;
         this._controlsThatFit = undefined;
         this._fetchingData = false;
+        this._filterActive = false;
         this._filterOpen = false;
         this._isDeleting = false;
         this._layer = undefined;
+        this._selectAllActive = false;
         this._selectedIndexes = [];
         this._showHideOpen = false;
         this._showOnlySelected = false;
@@ -127,19 +131,12 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
-    /**
-     * Reset the toolInfos when zoom tool is enabled/disabled
-     */
-    enableZoomWatchHandler() {
-        if (this._toolInfos?.length > 0) {
-            this._initToolInfos();
-        }
-    }
     /**
      * Reset the toolInfos when export csv is enabled/disabled
      */
     enableCSVWatchHandler() {
-        if (this._toolInfos?.length > 0) {
+        var _a;
+        if (((_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.length) > 0) {
             this._initToolInfos();
         }
     }
@@ -155,11 +152,12 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * watch for changes to the list of controls that will currently fit in the display
      */
     _controlsThatFitWatchHandler() {
+        var _a;
         const ids = this._controlsThatFit ? this._controlsThatFit.reduce((prev, cur) => {
             prev.push(cur.id);
             return prev;
         }, []) : [];
-        this._toolInfos = this._toolInfos.map(ti => {
+        this._toolInfos = (_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.map(ti => {
             if (ti && this._controlsThatFit) {
                 const id = this._getId(ti.icon);
                 ti.isOverflow = ids.indexOf(id) < 0;
@@ -167,11 +165,20 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             }
         });
     }
+    /**
+     * When isMobile is false we need to init the tool infos for the dynamic toolbar
+     */
+    isMobileWatchHandler() {
+        if (!this._toolInfos && !this.isMobile) {
+            this._initToolInfos();
+        }
+    }
     /**
      * watch for changes in map info and recheck the tool infos
      */
     async mapInfoWatchHandler() {
-        if (this._toolInfos?.length > 0) {
+        var _a;
+        if (((_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.length) > 0) {
             this._initToolInfos();
         }
     }
@@ -194,6 +201,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      */
     async _layerWatchHandler() {
         this._fetchingData = true;
+        this._definitionExpression = this._layer.definitionExpression;
         await this._resetTable();
         this._updateShareUrl();
         this._initLayerExpressions();
@@ -205,6 +213,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     async _selectedIndexesWatchHandler() {
         this._updateShareUrl();
         this._validateEnabledActions();
+        if (this._selectAllActive && this._selectedIndexes.length !== this._allIds.length) {
+            this._selectAllActive = false;
+        }
     }
     /**
      * When sortActive is false the user has not defined a sort and we should use the default sort
@@ -214,15 +225,28 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             await this._sortTable();
         }
     }
+    //--------------------------------------------------------------------------
+    //
+    //  Methods (public)
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Delete currently selected features
+     *
+     * @returns Promise resolving when the process is complete
+     */
+    async deleteFeatures() {
+        return this._delete();
+    }
     /**
      * Scroll and zoom to the selected feature from the Features widget.
      *
      * @param evt CustomEvent the graphic for the current selection
      */
     async selectionChanged(evt) {
+        const g = evt.detail[0];
+        const oid = g.getObjectId();
         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;
@@ -269,7 +293,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         await this._getTranslations();
         await this._initModules();
         this._initToolInfos();
-        this._resizeObserver = new ResizeObserver(() => this._onResize());
+        if (!this._resizeObserver) {
+            this._resizeObserver = new ResizeObserver(() => this._onResize());
+        }
     }
     /**
      * Renders the component.
@@ -279,15 +305,20 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         const loadingClass = this._fetchingData ? "" : "display-none";
         const total = this._allIds.length.toString();
         const selected = this._selectedIndexes.length.toString();
-        return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: "height-full-adjusted 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("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
+        this._validateActiveActions();
+        return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: `width-full ${tableHeightClass}` }, 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 })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
-            .replace("{{selected}}", selected)))), this._deleteMessage(), this._filterModal()));
+            .replace("{{selected}}", selected))) : undefined)), this._deleteMessage(), this._filterModal()));
     }
     /**
      * Called once after the component is loaded
      */
     async componentDidLoad() {
-        this._resizeObserver.observe(this._toolbar);
+        if (!this.isMobile && !this._observerSet) {
+            this._resizeObserver.observe(this._toolbar);
+            this._observerSet = true;
+        }
         document.onclick = (e) => this._handleDocumentClick(e);
         document.onkeydown = (e) => this._handleKeyDown(e);
         document.onkeyup = (e) => this._handleKeyUp(e);
@@ -320,8 +351,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Update the toolbar when its size changes
-     *
-     * @returns void
      */
     _onResize() {
         this._updateToolbar();
@@ -335,7 +364,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      */
     _getTableControlRow(slot) {
         const id = "more-table-options";
-        return (h("div", { class: "display-flex border-bottom height-51", ref: (el) => this._toolbar = el, slot: slot }, this._getActionBar(), this._getDropdown(id), this.enableShare ? this._getShare("share") : undefined));
+        return (h("div", { class: "display-flex border-bottom height-51", ref: (el) => this._toolbar = el, slot: slot }, this._getActionBar(), !this.isMobile ? this._getDropdown(id) : undefined, this.enableShare && !this.isMobile ? this._getShare("share") : undefined));
     }
     /**
      * Gets a row of controls that can be used for various interactions with the table
@@ -345,7 +374,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * @returns The dom node that contains the controls
      */
     _getActionBar() {
-        return (h("calcite-action-bar", { expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: "border-end", id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getActions()));
+        const containerClass = this.isMobile ? "width-full" : "";
+        const mobileClass = this.isMobile ? "border-top" : "";
+        return (h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), !this.isMobile ? this._getActions() : undefined));
     }
     /**
      * Get the actions that are used for various interactions with the table
@@ -358,8 +389,8 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             if (cur && !cur.isOverflow) {
                 prev.push(cur.isDanger ?
                     this._getDangerAction(cur.icon, cur.label, cur.func, cur.disabled) :
-                    cur.isSublist ? (h("calcite-dropdown", { closeOnSelectDisabled: true, id: this._getId(cur.icon), onCalciteDropdownBeforeClose: () => this._forceShowHide(), ref: (el) => this._showHideDropdown = el }, this._getAction(this._showHideOpen ? "chevron-down" : cur.icon, cur.label, cur.func, cur.disabled, "trigger"), this._showHideOpen ? this._getFieldlist() : undefined)) :
-                        this._getAction(cur.icon, cur.label, cur.func, cur.disabled));
+                    cur.isSublist ? (h("calcite-dropdown", { closeOnSelectDisabled: true, id: this._getId(cur.icon), onCalciteDropdownBeforeClose: () => this._forceShowHide(), ref: (el) => this._showHideDropdown = el }, this._getAction(cur.active, this._showHideOpen ? "chevron-down" : cur.icon, cur.indicator, cur.label, cur.func, cur.disabled, "trigger"), this._showHideOpen ? this._getFieldlist() : undefined)) :
+                        this._getAction(cur.active, cur.icon, cur.indicator, cur.label, cur.func, cur.disabled));
             }
             return prev;
         }, []);
@@ -387,10 +418,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Update actions enabled prop based on number of selected indexes
-     *
-     * @returns void
      */
     _validateEnabledActions() {
+        var _a;
         const featuresSelected = this._featuresSelected();
         const selectionDependant = [
             "zoom-to-object",
@@ -398,83 +428,121 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             "erase",
             "selected-items-filter"
         ];
-        this._toolInfos.forEach(ti => {
+        (_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.forEach(ti => {
             if (ti && selectionDependant.indexOf(ti.icon) > -1) {
                 ti.disabled = !featuresSelected;
             }
         });
     }
+    /**
+     * Update actions active prop based on a stored value
+     */
+    _validateActiveActions() {
+        var _a;
+        const activeDependant = [
+            "filter",
+            "list-check-all"
+        ];
+        (_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.forEach(ti => {
+            if (ti && activeDependant.indexOf(ti.icon) > -1) {
+                if (ti.icon === "filter") {
+                    ti.indicator = this._filterActive;
+                }
+                if (ti.icon === "list-check-all") {
+                    ti.active = this._selectAllActive;
+                }
+            }
+        });
+    }
     /**
      * Get the full list of toolInfos.
      * Order is important. They should be listed in the order they should display in the UI from
      * Left to Right for the action bar and Top to Bottom for the dropdown.
-     *
-     * @returns void
      */
     _initToolInfos() {
         const featuresSelected = this._featuresSelected();
         const featuresEmpty = this._featuresEmpty();
         const hasFilterExpressions = this._hasFilterExpressions();
-        this._toolInfos = [this.enableZoom ? {
+        this._toolInfos = [{
+                active: false,
                 icon: "zoom-to-object",
+                indicator: false,
                 label: this._translations.zoom,
                 func: () => this._zoom(),
                 disabled: !featuresSelected,
                 isOverflow: false
-            } : undefined,
+            },
             hasFilterExpressions ? {
+                active: false,
                 icon: "filter",
+                indicator: false,
                 label: this._translations.filters,
                 func: () => this._toggleFilter(),
                 disabled: false,
                 isOverflow: false
             } : undefined,
             this._deleteEnabled ? {
+                active: false,
                 icon: "trash",
+                indicator: false,
                 label: this._translations.delete,
                 func: () => this._delete(),
                 disabled: !featuresSelected,
                 isDanger: true,
                 isOverflow: false
             } : undefined, {
+                active: false,
                 icon: "erase",
+                indicator: false,
                 label: this._translations.clearSelection,
                 func: () => this._clearSelection(),
                 disabled: !featuresSelected,
                 isOverflow: false
             }, {
+                active: false,
                 icon: "selected-items-filter",
+                indicator: false,
                 label: this._showOnlySelected ? this._translations.showAll : this._translations.showSelected,
                 func: () => this._toggleShowSelected(),
                 disabled: !featuresSelected,
                 isOverflow: false
             }, {
+                active: false,
                 icon: "list-check-all",
+                indicator: false,
                 func: () => this._selectAll(),
                 label: this._translations.selectAll,
                 disabled: featuresEmpty,
                 isOverflow: false
             }, {
+                active: false,
                 icon: "compare",
+                indicator: false,
                 func: () => this._switchSelected(),
                 label: this._translations.switchSelected,
                 disabled: featuresEmpty,
                 isOverflow: false
             }, {
+                active: false,
                 icon: "refresh",
+                indicator: false,
                 func: () => this._refresh(),
                 label: this._translations.refresh,
                 disabled: false,
                 isOverflow: false
             },
             this.enableCSV ? {
+                active: false,
                 icon: "export",
+                indicator: false,
                 func: () => void this._exportToCSV(),
                 label: this._translations.exportCSV,
                 disabled: featuresEmpty,
                 isOverflow: false
             } : undefined, {
+                active: false,
                 icon: this._showHideOpen ? "chevron-down" : "chevron-right",
+                indicator: false,
                 func: () => this._toggleShowHide(),
                 label: this._translations.showHideColumns,
                 disabled: false,
@@ -505,78 +573,77 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * @returns boolean
      */
     _hasFilterExpressions() {
+        var _a, _b, _c;
         let layerExpressions;
-        if (this.mapInfo?.filterConfig?.layerExpressions && this._layer?.id) {
+        if (((_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions) && ((_c = this._layer) === null || _c === void 0 ? void 0 : _c.id)) {
             layerExpressions = this.mapInfo.filterConfig.layerExpressions.filter((exp) => exp.id === this._layer.id);
         }
-        return layerExpressions?.length > 0;
+        return (layerExpressions === null || layerExpressions === void 0 ? void 0 : layerExpressions.length) > 0;
     }
     /**
      * Add/Remove tools from the action bar and dropdown based on available size
-     *
-     * @returns void
      */
     _updateToolbar() {
         if (this._timeout) {
             clearTimeout(this._timeout);
         }
-        this._timeout = setTimeout(() => {
-            clearTimeout(this._timeout);
-            this._setToolbarSizeInfos();
-            const toolbarWidth = this._toolbar.offsetWidth;
-            let controlsWidth = this._toolbarSizeInfos.reduce((prev, cur) => {
-                prev += cur.width;
-                return prev;
-            }, 0);
-            const skipControls = ["solutions-more", "solutions-map-layer-picker-container", "solutions-action-share"];
-            if (controlsWidth > toolbarWidth) {
-                if (this._toolbarSizeInfos.length > 0) {
-                    const controlsThatFit = [...this._toolbarSizeInfos].reverse().reduce((prev, cur) => {
-                        if (skipControls.indexOf(cur.id) < 0) {
-                            if (controlsWidth > toolbarWidth) {
-                                controlsWidth -= cur.width;
+        if (!this.isMobile) {
+            this._timeout = setTimeout(() => {
+                clearTimeout(this._timeout);
+                this._setToolbarSizeInfos();
+                const toolbarWidth = this._toolbar.offsetWidth;
+                let controlsWidth = this._toolbarSizeInfos.reduce((prev, cur) => {
+                    prev += cur.width;
+                    return prev;
+                }, 0);
+                const skipControls = ["solutions-more", "solutions-map-layer-picker-container", "solutions-action-share"];
+                if (controlsWidth > toolbarWidth) {
+                    if (this._toolbarSizeInfos.length > 0) {
+                        const controlsThatFit = [...this._toolbarSizeInfos].reverse().reduce((prev, cur) => {
+                            if (skipControls.indexOf(cur.id) < 0) {
+                                if (controlsWidth > toolbarWidth) {
+                                    controlsWidth -= cur.width;
+                                }
+                                else {
+                                    prev.push(cur);
+                                }
                             }
-                            else {
+                            return prev;
+                        }, []).reverse();
+                        this._setControlsThatFit(controlsThatFit, skipControls);
+                    }
+                }
+                else {
+                    if (this._defaultVisibleToolSizeInfos) {
+                        const currentTools = this._toolbarSizeInfos.reduce((prev, cur) => {
+                            prev.push(cur.id);
+                            return prev;
+                        }, []);
+                        let forceFinish = false;
+                        const controlsThatFit = [...this._defaultVisibleToolSizeInfos].reduce((prev, cur) => {
+                            if (!forceFinish && skipControls.indexOf(cur.id) < 0 &&
+                                (currentTools.indexOf(cur.id) > -1 || (controlsWidth + cur.width) <= toolbarWidth)) {
+                                if (currentTools.indexOf(cur.id) < 0) {
+                                    controlsWidth += cur.width;
+                                }
                                 prev.push(cur);
                             }
-                        }
-                        return prev;
-                    }, []).reverse();
-                    this._setControlsThatFit(controlsThatFit, skipControls);
-                }
-            }
-            else {
-                if (this._defaultVisibleToolSizeInfos) {
-                    const currentTools = this._toolbarSizeInfos.reduce((prev, cur) => {
-                        prev.push(cur.id);
-                        return prev;
-                    }, []);
-                    let forceFinish = false;
-                    const controlsThatFit = [...this._defaultVisibleToolSizeInfos].reduce((prev, cur) => {
-                        if (!forceFinish && skipControls.indexOf(cur.id) < 0 &&
-                            (currentTools.indexOf(cur.id) > -1 || (controlsWidth + cur.width) <= toolbarWidth)) {
-                            if (currentTools.indexOf(cur.id) < 0) {
-                                controlsWidth += cur.width;
+                            else if (skipControls.indexOf(cur.id) < 0 && (controlsWidth + cur.width) > toolbarWidth) {
+                                // exit the first time we evalute this as true...otherwise it will add the next control that will fit
+                                // and not preserve the overall order of controls
+                                forceFinish = true;
                             }
-                            prev.push(cur);
-                        }
-                        else if (skipControls.indexOf(cur.id) < 0 && (controlsWidth + cur.width) > toolbarWidth) {
-                            // exit the first time we evalute this as true...otherwise it will add the next control that will fit
-                            // and not preserve the overall order of controls
-                            forceFinish = true;
-                        }
-                        return prev;
-                    }, []);
-                    this._setControlsThatFit(controlsThatFit, skipControls);
+                            return prev;
+                        }, []);
+                        this._setControlsThatFit(controlsThatFit, skipControls);
+                    }
                 }
-            }
-        }, 5);
+            }, 5);
+        }
     }
     /**
      * Validate if controls that fit the current display has changed or
      * is different from what is currently displayed
-     *
-     * @returns void
      */
     _setControlsThatFit(controlsThatFit, skipControls) {
         let update = JSON.stringify(controlsThatFit) !== JSON.stringify(this._controlsThatFit);
@@ -592,8 +659,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Get the id and size for the toolbars current items
-     *
-     * @returns void
      */
     _setToolbarSizeInfos() {
         let hasWidth = false;
@@ -632,7 +697,8 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * @returns IToolInfo[] the list of toolInfos that should not display in the overflow dropdown
      */
     _getActionItems() {
-        return this._toolInfos.filter(toolInfo => toolInfo && !toolInfo.isOverflow);
+        var _a;
+        return (_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.filter(toolInfo => toolInfo && !toolInfo.isOverflow);
     }
     /**
      * Get a list of toolInfos that should display in the dropdown
@@ -653,7 +719,8 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * @returns IToolInfo[] the list of toolInfos that should display in the dropdown
      */
     _getDropdownItems() {
-        return this._toolInfos.filter(toolInfo => toolInfo && toolInfo.isOverflow);
+        var _a;
+        return (_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.filter(toolInfo => toolInfo && toolInfo.isOverflow);
     }
     /**
      * Get an action and tooltip
@@ -665,9 +732,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      *
      * @returns VNode The node representing the DOM element that will contain the action
      */
-    _getAction(icon, label, func, disabled, slot) {
+    _getAction(active, icon, indicator, label, func, disabled, slot) {
         const _disabled = this._layer === undefined ? true : disabled;
-        return (h("div", { class: "display-flex", id: this._getId(icon), slot: slot }, h("calcite-action", { appearance: "solid", disabled: _disabled, icon: icon, id: icon, label: label, onClick: func, text: label, textEnabled: true }), this._getToolTip("bottom", icon, label)));
+        return (h("div", { class: "display-flex", id: this._getId(icon), slot: slot }, h("calcite-action", { active: active, appearance: "solid", disabled: _disabled, icon: icon, id: icon, indicator: indicator, label: label, onClick: func, text: label, textEnabled: true }), this._getToolTip("bottom", icon, label)));
     }
     /**
      * Get an action and tooltip for share
@@ -683,19 +750,20 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * Called each time the values that are used for custom url params change
      */
     _updateShareUrl() {
-        const url = this._shareNode?.shareUrl;
+        var _a, _b, _c, _d;
+        const url = (_a = this._shareNode) === null || _a === void 0 ? void 0 : _a.shareUrl;
         if (!url) {
             return;
         }
         const urlObj = new URL(url);
         //set the additional search params
-        if (this.mapInfo?.id) {
+        if ((_b = this.mapInfo) === null || _b === void 0 ? void 0 : _b.id) {
             urlObj.searchParams.set("webmap", this.mapInfo.id);
         }
-        if (this._layer?.id) {
+        if ((_c = this._layer) === null || _c === void 0 ? void 0 : _c.id) {
             urlObj.searchParams.set("layer", this._layer.id);
         }
-        if (this._selectedIndexes?.length > 0) {
+        if (((_d = this._selectedIndexes) === null || _d === void 0 ? void 0 : _d.length) > 0) {
             urlObj.searchParams.set("oid", this._selectedIndexes.join(","));
         }
         this._shareNode.shareUrl = urlObj.href;
@@ -741,8 +809,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * Initialize the FeatureTable
      *
      * @param node HTMLDivElement The node representing the DOM element that will contain the widget.
-     *
-     * @returns void
      */
     async _getTable(node, columnTemplates) {
         if (this._layer) {
@@ -772,8 +838,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
                     void this._handleOnChange(evt);
                 });
                 this.reactiveUtils.watch(() => this._table.activeSortOrders, (sortOrders) => {
-                    this._sortActive = this._layer ? (sortOrders.length > 0 && sortOrders[0]?.direction === "asc" || sortOrders[0]?.direction === "desc") ||
-                        sortOrders[0]?.direction === null && sortOrders[0]?.fieldName === this._layer.objectIdField : false;
+                    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;
                 });
             });
         }
@@ -792,6 +859,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
                     if (newIndexes.length > 0) {
                         this._table.highlightIds.add(newIndexes[0]);
                     }
+                    else {
+                        this._skipOnChange = false;
+                    }
                 }
                 else {
                     // https://github.com/Esri/solutions-components/issues/365
@@ -851,8 +921,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Handle any updates after a selection change has occured and emit the results
-     *
-     * @returns void
      */
     _finishOnChange() {
         if (this._showOnlySelected) {
@@ -867,14 +935,13 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Reset basic table props
-     *
-     * @returns void
      */
     async _resetTable() {
+        var _a;
         this._clearSelection();
         this._allIds = [];
         this.featureSelectionChange.emit(this._selectedIndexes);
-        const columnTemplates = this._getColumnTemplates(this._layer.id, this._layer?.fields);
+        const columnTemplates = this._getColumnTemplates(this._layer.id, (_a = this._layer) === null || _a === void 0 ? void 0 : _a.fields);
         this._allIds = await queryAllIds(this._layer);
         if (!this._table) {
             await this._getTable(this._tableNode, columnTemplates);
@@ -888,16 +955,17 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
         this._initToolInfos();
         await this._table.when(async () => {
+            var _a, _b;
             this._table.highlightIds.removeAll();
             this._table.clearSelectionFilter();
             this._initColumnsInfo();
-            if (!this._defaultOidHonored && this.defaultOid?.length > 0 && this.defaultOid[0] > -1) {
+            if (!this._defaultOidHonored && ((_a = this.defaultOid) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.defaultOid[0] > -1) {
                 this._selectDefaultFeature(this.defaultOid);
                 this._defaultOidHonored = true;
             }
-            if (!this._defaultGlobalIdHonored && this.defaultGlobalId?.length > 0) {
+            if (!this._defaultGlobalIdHonored && ((_b = this.defaultGlobalId) === null || _b === void 0 ? void 0 : _b.length) > 0) {
                 const features = await queryFeaturesByGlobalID(this.defaultGlobalId, this._layer);
-                const oids = features?.length > 0 ? features.map(f => f.getObjectId()) : undefined;
+                const oids = (features === null || features === void 0 ? void 0 : features.length) > 0 ? features.map(f => f.getObjectId()) : undefined;
                 if (oids) {
                     this._selectDefaultFeature(oids);
                 }
@@ -910,8 +978,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Store the column names and current hidden status to support show/hide of columns
-     *
-     * @returns void
      */
     _initColumnsInfo() {
         this._columnsInfo = this._table.columns.reduce((prev, cur) => {
@@ -921,8 +987,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Select the feature that was specified via url params
-     *
-     * @returns void
      */
     _selectDefaultFeature(oids) {
         if (oids.length > 0) {
@@ -935,8 +999,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Verify edit capabilities of the layer
-     *
-     * @returns void
      */
     _checkEditEnabled() {
         this._editEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsUpdate;
@@ -944,8 +1006,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Sort the objectid field in descending order
-     *
-     * @returns void
      */
     async _sortTable() {
         if (this._table && this._layer && !this._sortActive) {
@@ -986,7 +1046,8 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * Close show/hide dropdown when the user clicks outside of it
      */
     _handleDocumentClick(e) {
-        const id = e.target?.id;
+        var _a;
+        const id = (_a = e.target) === null || _a === void 0 ? void 0 : _a.id;
         if (this._showHideOpen && Object.keys(this._columnsInfo).indexOf(id) < 0 && id !== "solutions-subset-list" && id !== "chevron-right") {
             this._closeShowHide();
             if (this._moreDropdown) {
@@ -999,8 +1060,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Keep track of key down for ctrl and shift
-     *
-     * @returns void
      */
     _handleKeyDown(e) {
         this._ctrlIsPressed = e.ctrlKey;
@@ -1008,8 +1067,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Keep track of key up for ctrl and shift
-     *
-     * @returns void
      */
     _handleKeyUp(e) {
         this._ctrlIsPressed = e.ctrlKey;
@@ -1021,12 +1078,23 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * @returns node to interact with any configured filters for the current layer
      */
     _filterModal() {
-        return (h("calcite-modal", { "aria-labelledby": "modal-title", kind: "brand", onCalciteModalClose: async () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.filter?.replace("{{title}}", this._layer?.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), layerExpressions: this._layerExpressions, ref: (el) => this._filterList = el, view: this.mapView }))));
+        var _a, _b, _c;
+        return (h("calcite-modal", { "aria-labelledby": "modal-title", kind: "brand", onCalciteModalClose: async () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView }))));
+    }
+    /**
+     * Reset the filter active prop
+     */
+    _handleFilterListReset() {
+        this._filterActive = false;
+    }
+    /**
+     * Check if the layers definitionExpression has been modified
+     */
+    _handleFilterUpdate() {
+        this._filterActive = this._definitionExpression !== this._layer.definitionExpression;
     }
     /**
      * Close the filter modal
-     *
-     * @returns void
      */
     async _closeFilter() {
         if (this._filterOpen) {
@@ -1045,8 +1113,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Delete the currently selected features
-     *
-     * @returns void
      */
     async _deleteFeatures() {
         this._isDeleting = true;
@@ -1065,8 +1131,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * 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 = {
@@ -1092,16 +1156,12 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Set the alertOpen member to false when the alert is closed
-     *
-     * @returns void
      */
     _deleteClosed() {
         this._confirmDelete = false;
     }
     /**
      * Select or deselect all rows
-     *
-     * @returns void
      */
     _selectAll() {
         const ids = this._allIds;
@@ -1110,12 +1170,11 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         this._table.highlightIds.addMany(ids);
         this._selectedIndexes = ids;
         this._finishOnChange();
+        this._selectAllActive = true;
     }
     /**
      * 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;
@@ -1128,17 +1187,14 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Clears the selected indexes
-     *
-     * @returns void
      */
     _clearSelection() {
+        var _a;
         this._selectedIndexes = [];
-        this._table?.highlightIds.removeAll();
+        (_a = this._table) === null || _a === void 0 ? void 0 : _a.highlightIds.removeAll();
     }
     /**
      * When true the filter modal will be displayed
-     *
-     * @returns void
      */
     _toggleFilter() {
         this._filterOpen = !this._filterOpen;
@@ -1146,17 +1202,14 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     /**
      * Store any filters for the current layer.
      * Should only occur on layer change
-     *
-     * @returns void
      */
     _initLayerExpressions() {
-        const layerExpressions = this.mapInfo?.filterConfig?.layerExpressions;
+        var _a, _b;
+        const layerExpressions = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions;
         this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer.id) : [];
     }
     /**
      * Select all rows that are not currently selectd
-     *
-     * @returns void
      */
     _switchSelected() {
         const currentIndexes = [...this._selectedIndexes];
@@ -1192,8 +1245,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Refreshes the table and maintains the curent scroll position
-     *
-     * @returns void
      */
     async _refresh() {
         await this._table.refresh();
@@ -1223,8 +1274,9 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * @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._featuresEmpty()) {
+        if (id !== ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id) || this._featuresEmpty()) {
             this._fetchingData = true;
             const layer = await getLayerOrTable(this.mapView, id);
             await layer.when(() => {
@@ -1241,14 +1293,15 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * @returns a list of column templates if they exist
      */
     _getColumnTemplates(id, fieldInfos) {
+        var _a;
         let layerInfo;
-        this.mapInfo.layerInfos?.some(li => {
+        (_a = this.mapInfo.layerInfos) === null || _a === void 0 ? void 0 : _a.some(li => {
             if (li.id === id) {
                 layerInfo = li;
                 return true;
             }
         });
-        let columnTemplates = layerInfo?.columnTemplates;
+        let columnTemplates = layerInfo === null || layerInfo === void 0 ? void 0 : layerInfo.columnTemplates;
         if (fieldInfos) {
             columnTemplates = columnTemplates ? columnTemplates.map(columnTemplate => {
                 fieldInfos.some(fieldInfo => {
@@ -1272,9 +1325,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Get the menu config that adds the ability to hide the current column
-     *
-     * @returns void
-     * @protected
      */
     _getMenuConfig(name) {
         return {
@@ -1292,9 +1342,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     /**
      * Hide the table column for the provided name
-     *
-     * @returns void
-     * @protected
      */
     _handleHideClick(name) {
         this._columnsInfo[name] = false;
@@ -1317,10 +1364,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     }
     get el() { return this; }
     static get watchers() { return {
-        "enableZoom": ["enableZoomWatchHandler"],
         "enableCSV": ["enableCSVWatchHandler"],
         "enableInlineEdit": ["enableInlineEditWatchHandler"],
         "_controlsThatFit": ["_controlsThatFitWatchHandler"],
+        "isMobile": ["isMobileWatchHandler"],
         "mapInfo": ["mapInfoWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
         "_layer": ["_layerWatchHandler"],
@@ -1337,7 +1384,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         "enableCSV": [4, "enable-c-s-v"],
         "enableInlineEdit": [4, "enable-inline-edit"],
         "enableShare": [4, "enable-share"],
-        "enableZoom": [4, "enable-zoom"],
+        "isMobile": [4, "is-mobile"],
         "mapInfo": [16],
         "mapView": [16],
         "onlyShowUpdatableLayers": [4, "only-show-updatable-layers"],
@@ -1348,19 +1395,22 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         "_confirmDelete": [32],
         "_controlsThatFit": [32],
         "_fetchingData": [32],
+        "_filterActive": [32],
         "_filterOpen": [32],
         "_isDeleting": [32],
         "_layer": [32],
+        "_selectAllActive": [32],
         "_selectedIndexes": [32],
         "_showHideOpen": [32],
         "_showOnlySelected": [32],
         "_sortActive": [32],
-        "_translations": [32]
+        "_translations": [32],
+        "deleteFeatures": [64]
     }, [[8, "selectionChanged", "selectionChanged"], [8, "editsComplete", "editsComplete"], [8, "noLayersFound", "noLayersFound"]], {
-        "enableZoom": ["enableZoomWatchHandler"],
         "enableCSV": ["enableCSVWatchHandler"],
         "enableInlineEdit": ["enableInlineEditWatchHandler"],
         "_controlsThatFit": ["_controlsThatFitWatchHandler"],
+        "isMobile": ["isMobileWatchHandler"],
         "mapInfo": ["mapInfoWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
         "_layer": ["_layerWatchHandler"],