@esri/solutions-components 0.7.17 → 0.7.19

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

@@ -5,9 +5,9 @@
  */
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-7183ce4a.js';
 import { g as getLocaleComponentStrings } from './locale-834c52c6.js';
-import { q as queryFeaturesByID, a as getLayerOrTable, g as goToSelection, b as queryFeatureIds, c as queryAllIds, d as queryFeaturesByGlobalID } from './mapViewUtils-066602d5.js';
+import { q as queryFeaturesByID, a as getLayerOrTable, g as goToSelection, b as queryFeatureIds, c as queryAllIds, d as queryFeaturesByGlobalID } from './mapViewUtils-8fe70944.js';
 import { l as loadModules } from './loadModules-cea493da.js';
-import { d as downloadCSV } from './downloadUtils-9dee8bc0.js';
+import { d as downloadCSV } from './downloadUtils-a4bbdb1d.js';
 import './esri-loader-eda07632.js';
 import './_commonjsHelpers-d5f9d613.js';
 import './interfaces-341e3ab3.js';
@@ -20,6 +20,7 @@ const cardManagerCss = ":host{display:block !important}.display-flex{display:fle
 const CardManager = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.isMobile = undefined;
         this.layer = undefined;
         this.mapView = undefined;
         this.zoomAndScrollToSelected = undefined;
@@ -81,7 +82,7 @@ const CardManager = class {
         var _a, _b;
         const featuresClass = ((_a = this._graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "" : "display-none";
         const messageClass = ((_b = this._graphics) === null || _b === void 0 ? void 0 : _b.length) > 0 ? "display-none" : "";
-        return (h(Host, null, h("div", { class: "overflow-auto height-full" }, h("calcite-shell", { class: "position-relative " + featuresClass }, h("div", null, h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), h("calcite-shell", { class: "position-relative " + messageClass }, h("div", { class: "padding-1" }, h("calcite-notice", { icon: "table", open: true }, h("div", { slot: "message" }, this._translations.selectFeaturesToStart)))))));
+        return (h(Host, null, h("div", { class: "overflow-auto height-full" }, h("calcite-shell", { class: "position-relative " + featuresClass }, h("div", null, h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), h("calcite-shell", { class: "position-relative " + messageClass }, h("div", { class: "padding-1" }, h("calcite-notice", { icon: "table", open: true }, h("div", { slot: "message" }, this._translations.selectFeaturesToStart)))))));
     }
     //--------------------------------------------------------------------------
     //
@@ -102,7 +103,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-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)}.modal{--calcite-modal-content-padding:0}";
 
 const LayerTable = class {
     constructor(hostRef) {
@@ -124,6 +125,10 @@ const LayerTable = class {
          * 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
          */
@@ -141,8 +146,6 @@ const LayerTable = class {
          * 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;
@@ -155,7 +158,7 @@ const LayerTable = class {
         this.enableCSV = undefined;
         this.enableInlineEdit = undefined;
         this.enableShare = undefined;
-        this.enableZoom = undefined;
+        this.isMobile = undefined;
         this.mapInfo = undefined;
         this.mapView = undefined;
         this.onlyShowUpdatableLayers = undefined;
@@ -166,9 +169,11 @@ const LayerTable = class {
         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;
@@ -180,15 +185,6 @@ const LayerTable = class {
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
-    /**
-     * Reset the toolInfos when zoom tool is enabled/disabled
-     */
-    enableZoomWatchHandler() {
-        var _a;
-        if (((_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            this._initToolInfos();
-        }
-    }
     /**
      * Reset the toolInfos when export csv is enabled/disabled
      */
@@ -210,11 +206,12 @@ const LayerTable = class {
      * 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;
@@ -222,6 +219,14 @@ const LayerTable = class {
             }
         });
     }
+    /**
+     * 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
      */
@@ -250,6 +255,7 @@ const LayerTable = class {
      */
     async _layerWatchHandler() {
         this._fetchingData = true;
+        this._definitionExpression = this._layer.definitionExpression;
         await this._resetTable();
         this._updateShareUrl();
         this._initLayerExpressions();
@@ -261,6 +267,9 @@ const LayerTable = class {
     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
@@ -270,15 +279,28 @@ const LayerTable = class {
             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;
@@ -325,7 +347,9 @@ const LayerTable = class {
         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.
@@ -335,15 +359,20 @@ const LayerTable = class {
         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);
@@ -376,8 +405,6 @@ const LayerTable = class {
     }
     /**
      * Update the toolbar when its size changes
-     *
-     * @returns void
      */
     _onResize() {
         this._updateToolbar();
@@ -391,7 +418,7 @@ const LayerTable = class {
      */
     _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
@@ -401,7 +428,9 @@ const LayerTable = class {
      * @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
@@ -414,8 +443,8 @@ const LayerTable = class {
             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;
         }, []);
@@ -443,10 +472,9 @@ const LayerTable = class {
     }
     /**
      * Update actions enabled prop based on number of selected indexes
-     *
-     * @returns void
      */
     _validateEnabledActions() {
+        var _a;
         const featuresSelected = this._featuresSelected();
         const selectionDependant = [
             "zoom-to-object",
@@ -454,83 +482,121 @@ const LayerTable = class {
             "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,
@@ -570,70 +636,68 @@ const LayerTable = class {
     }
     /**
      * 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);
@@ -649,8 +713,6 @@ const LayerTable = class {
     }
     /**
      * Get the id and size for the toolbars current items
-     *
-     * @returns void
      */
     _setToolbarSizeInfos() {
         let hasWidth = false;
@@ -689,7 +751,8 @@ const LayerTable = class {
      * @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
@@ -710,7 +773,8 @@ const LayerTable = class {
      * @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
@@ -722,9 +786,9 @@ const LayerTable = class {
      *
      * @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
@@ -799,8 +863,6 @@ const LayerTable = class {
      * 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) {
@@ -851,6 +913,9 @@ const LayerTable = class {
                     if (newIndexes.length > 0) {
                         this._table.highlightIds.add(newIndexes[0]);
                     }
+                    else {
+                        this._skipOnChange = false;
+                    }
                 }
                 else {
                     // https://github.com/Esri/solutions-components/issues/365
@@ -910,8 +975,6 @@ const LayerTable = class {
     }
     /**
      * Handle any updates after a selection change has occured and emit the results
-     *
-     * @returns void
      */
     _finishOnChange() {
         if (this._showOnlySelected) {
@@ -926,8 +989,6 @@ const LayerTable = class {
     }
     /**
      * Reset basic table props
-     *
-     * @returns void
      */
     async _resetTable() {
         var _a;
@@ -971,8 +1032,6 @@ const LayerTable = class {
     }
     /**
      * 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) => {
@@ -982,8 +1041,6 @@ const LayerTable = class {
     }
     /**
      * Select the feature that was specified via url params
-     *
-     * @returns void
      */
     _selectDefaultFeature(oids) {
         if (oids.length > 0) {
@@ -996,8 +1053,6 @@ const LayerTable = class {
     }
     /**
      * Verify edit capabilities of the layer
-     *
-     * @returns void
      */
     _checkEditEnabled() {
         this._editEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsUpdate;
@@ -1005,8 +1060,6 @@ const LayerTable = class {
     }
     /**
      * Sort the objectid field in descending order
-     *
-     * @returns void
      */
     async _sortTable() {
         if (this._table && this._layer && !this._sortActive) {
@@ -1061,8 +1114,6 @@ const LayerTable = class {
     }
     /**
      * Keep track of key down for ctrl and shift
-     *
-     * @returns void
      */
     _handleKeyDown(e) {
         this._ctrlIsPressed = e.ctrlKey;
@@ -1070,8 +1121,6 @@ const LayerTable = class {
     }
     /**
      * Keep track of key up for ctrl and shift
-     *
-     * @returns void
      */
     _handleKeyUp(e) {
         this._ctrlIsPressed = e.ctrlKey;
@@ -1084,12 +1133,22 @@ const LayerTable = class {
      */
     _filterModal() {
         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, ref: (el) => this._filterList = el, view: this.mapView }))));
+        return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", 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) {
@@ -1108,8 +1167,6 @@ const LayerTable = class {
     }
     /**
      * Delete the currently selected features
-     *
-     * @returns void
      */
     async _deleteFeatures() {
         this._isDeleting = true;
@@ -1128,8 +1185,6 @@ const LayerTable = class {
      * 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 = {
@@ -1155,16 +1210,12 @@ const LayerTable = class {
     }
     /**
      * 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;
@@ -1173,12 +1224,11 @@ const LayerTable = class {
         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;
@@ -1191,8 +1241,6 @@ const LayerTable = class {
     }
     /**
      * Clears the selected indexes
-     *
-     * @returns void
      */
     _clearSelection() {
         var _a;
@@ -1201,8 +1249,6 @@ const LayerTable = class {
     }
     /**
      * When true the filter modal will be displayed
-     *
-     * @returns void
      */
     _toggleFilter() {
         this._filterOpen = !this._filterOpen;
@@ -1210,8 +1256,6 @@ const LayerTable = class {
     /**
      * Store any filters for the current layer.
      * Should only occur on layer change
-     *
-     * @returns void
      */
     _initLayerExpressions() {
         var _a, _b;
@@ -1220,8 +1264,6 @@ const LayerTable = class {
     }
     /**
      * Select all rows that are not currently selectd
-     *
-     * @returns void
      */
     _switchSelected() {
         const currentIndexes = [...this._selectedIndexes];
@@ -1250,15 +1292,20 @@ const LayerTable = class {
             ids,
             layer: this._layer
         };
+        const fields = this._table.columns.toArray().reduce((prev, cur) => {
+            if (!cur.hidden) {
+                prev.push(cur.name.toLocaleLowerCase());
+            }
+            return prev;
+        }, []);
         void downloadCSV(null, //???
         exportInfos, false, // formatUsingLayerPopup
         false, // removeDuplicates
-        true);
+        true, // addColumnTitle
+        fields);
     }
     /**
      * Refreshes the table and maintains the curent scroll position
-     *
-     * @returns void
      */
     async _refresh() {
         await this._table.refresh();
@@ -1339,9 +1386,6 @@ const LayerTable = class {
     }
     /**
      * Get the menu config that adds the ability to hide the current column
-     *
-     * @returns void
-     * @protected
      */
     _getMenuConfig(name) {
         return {
@@ -1359,9 +1403,6 @@ const LayerTable = class {
     }
     /**
      * Hide the table column for the provided name
-     *
-     * @returns void
-     * @protected
      */
     _handleHideClick(name) {
         this._columnsInfo[name] = false;
@@ -1384,10 +1425,10 @@ const LayerTable = class {
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "enableZoom": ["enableZoomWatchHandler"],
         "enableCSV": ["enableCSVWatchHandler"],
         "enableInlineEdit": ["enableInlineEditWatchHandler"],
         "_controlsThatFit": ["_controlsThatFitWatchHandler"],
+        "isMobile": ["isMobileWatchHandler"],
         "mapInfo": ["mapInfoWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
         "_layer": ["_layerWatchHandler"],
@@ -1501,10 +1542,6 @@ const MapCard = class {
      * Load the webmap for the provided webMapInfo
      *
      * @param webMapInfo the webmap id and name to load
-     *
-     * @returns void
-     *
-     * @protected
      */
     async _loadMap(webMapInfo) {
         var _a;