@esri/solutions-components 0.7.16 → 0.7.18

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

@@ -3,23 +3,24 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-6b2dd90f.js';
-import { g as getLocaleComponentStrings } from './locale-5d32d5f4.js';
-import { q as queryFeaturesByID, a as getLayerOrTable, g as goToSelection, b as queryFeatureIds, c as queryAllIds, d as queryFeaturesByGlobalID } from './mapViewUtils-b21ca0ac.js';
-import { l as loadModules } from './loadModules-fdecaaec.js';
-import { d as downloadCSV } from './downloadUtils-14e503d3.js';
-import './esri-loader-bf16520d.js';
+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 { l as loadModules } from './loadModules-cea493da.js';
+import { d as downloadCSV } from './downloadUtils-9dee8bc0.js';
+import './esri-loader-eda07632.js';
 import './_commonjsHelpers-d5f9d613.js';
 import './interfaces-341e3ab3.js';
-import './solution-resource-342904db.js';
-import './index-37abc70f.js';
-import './restHelpersGet-57a51bca.js';
+import './solution-resource-7b8d302d.js';
+import './index-a1e91462.js';
+import './restHelpersGet-af032ab2.js';
 
 const cardManagerCss = ":host{display:block !important}.display-flex{display:flex}.display-none{display:none}.w-100{width:100%}.padding-bottom-1{padding-bottom:1rem}.padding-1{padding:1rem}.position-relative{position:relative}.focus-margin{margin:1px 1px 0px 1px}.overflow-auto{overflow:auto}.height-full{height:100%}card-manager{display:block}";
 
 const CardManager = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.isMobile = undefined;
         this.layer = undefined;
         this.mapView = undefined;
         this.zoomAndScrollToSelected = undefined;
@@ -78,9 +79,10 @@ const CardManager = class {
      * Renders the component.
      */
     render() {
-        const featuresClass = this._graphics?.length > 0 ? "" : "display-none";
-        const messageClass = this._graphics?.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)))))));
+        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, 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)))))));
     }
     //--------------------------------------------------------------------------
     //
@@ -101,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)}";
 
 const LayerTable = class {
     constructor(hostRef) {
@@ -123,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
          */
@@ -140,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;
@@ -154,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;
@@ -165,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;
@@ -179,19 +185,12 @@ const LayerTable = class {
     //  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();
         }
     }
@@ -207,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;
@@ -219,11 +219,20 @@ 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
      */
     async mapInfoWatchHandler() {
-        if (this._toolInfos?.length > 0) {
+        var _a;
+        if (((_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.length) > 0) {
             this._initToolInfos();
         }
     }
@@ -246,6 +255,7 @@ const LayerTable = class {
      */
     async _layerWatchHandler() {
         this._fetchingData = true;
+        this._definitionExpression = this._layer.definitionExpression;
         await this._resetTable();
         this._updateShareUrl();
         this._initLayerExpressions();
@@ -257,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
@@ -266,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;
@@ -321,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.
@@ -331,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);
@@ -372,8 +405,6 @@ const LayerTable = class {
     }
     /**
      * Update the toolbar when its size changes
-     *
-     * @returns void
      */
     _onResize() {
         this._updateToolbar();
@@ -387,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
@@ -397,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
@@ -410,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;
         }, []);
@@ -439,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",
@@ -450,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,
@@ -557,78 +627,77 @@ const LayerTable = class {
      * @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);
@@ -644,8 +713,6 @@ const LayerTable = class {
     }
     /**
      * Get the id and size for the toolbars current items
-     *
-     * @returns void
      */
     _setToolbarSizeInfos() {
         let hasWidth = false;
@@ -684,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
@@ -705,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
@@ -717,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
@@ -735,19 +804,20 @@ const LayerTable = class {
      * 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;
@@ -793,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) {
@@ -824,8 +892,9 @@ const LayerTable = class {
                     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;
                 });
             });
         }
@@ -844,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
@@ -903,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) {
@@ -919,14 +989,13 @@ const LayerTable = class {
     }
     /**
      * 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);
@@ -940,16 +1009,17 @@ const LayerTable = class {
         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);
                 }
@@ -962,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) => {
@@ -973,8 +1041,6 @@ const LayerTable = class {
     }
     /**
      * Select the feature that was specified via url params
-     *
-     * @returns void
      */
     _selectDefaultFeature(oids) {
         if (oids.length > 0) {
@@ -987,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;
@@ -996,8 +1060,6 @@ const LayerTable = class {
     }
     /**
      * Sort the objectid field in descending order
-     *
-     * @returns void
      */
     async _sortTable() {
         if (this._table && this._layer && !this._sortActive) {
@@ -1038,7 +1100,8 @@ const LayerTable = class {
      * 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) {
@@ -1051,8 +1114,6 @@ const LayerTable = class {
     }
     /**
      * Keep track of key down for ctrl and shift
-     *
-     * @returns void
      */
     _handleKeyDown(e) {
         this._ctrlIsPressed = e.ctrlKey;
@@ -1060,8 +1121,6 @@ const LayerTable = class {
     }
     /**
      * Keep track of key up for ctrl and shift
-     *
-     * @returns void
      */
     _handleKeyUp(e) {
         this._ctrlIsPressed = e.ctrlKey;
@@ -1073,12 +1132,23 @@ const LayerTable = class {
      * @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) {
@@ -1097,8 +1167,6 @@ const LayerTable = class {
     }
     /**
      * Delete the currently selected features
-     *
-     * @returns void
      */
     async _deleteFeatures() {
         this._isDeleting = true;
@@ -1117,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 = {
@@ -1144,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;
@@ -1162,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;
@@ -1180,17 +1241,14 @@ const LayerTable = class {
     }
     /**
      * 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;
@@ -1198,17 +1256,14 @@ const LayerTable = class {
     /**
      * 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];
@@ -1244,8 +1299,6 @@ const LayerTable = class {
     }
     /**
      * Refreshes the table and maintains the curent scroll position
-     *
-     * @returns void
      */
     async _refresh() {
         await this._table.refresh();
@@ -1275,8 +1328,9 @@ const LayerTable = class {
      * @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(() => {
@@ -1293,14 +1347,15 @@ const LayerTable = class {
      * @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 => {
@@ -1324,9 +1379,6 @@ const LayerTable = class {
     }
     /**
      * Get the menu config that adds the ability to hide the current column
-     *
-     * @returns void
-     * @protected
      */
     _getMenuConfig(name) {
         return {
@@ -1344,9 +1396,6 @@ const LayerTable = class {
     }
     /**
      * Hide the table column for the provided name
-     *
-     * @returns void
-     * @protected
      */
     _handleHideClick(name) {
         this._columnsInfo[name] = false;
@@ -1369,10 +1418,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"],
@@ -1453,10 +1502,11 @@ const MapCard = class {
      * Renders the component.
      */
     render() {
+        var _a, _b;
         const mapClass = this.hidden ? "visibility-hidden" : "";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        const mapPickerClass = this.mapInfos?.length > 1 ? "" : "display-none";
-        const mapHeightClass = this.mapInfos?.length > 1 ? "map-height" : "height-full";
+        const mapPickerClass = ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) > 1 ? "" : "display-none";
+        const mapHeightClass = ((_b = this.mapInfos) === null || _b === void 0 ? void 0 : _b.length) > 1 ? "map-height" : "height-full";
         return (h(Host, null, h("map-picker", { class: mapPickerClass, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableMapToolsExpand: this.enableMapToolsExpand, enableSearch: this.enableSearch, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
     }
     //--------------------------------------------------------------------------
@@ -1485,20 +1535,17 @@ 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;
         // on the first render use the default webmap id if provided otherwise use the first child of the provided mapInfos
         const loadDefaultMap = !this._defaultWebmapHonored && this.defaultWebmapId;
-        const defaultMap = this.mapInfos?.filter(i => i.id === this.defaultWebmapId);
+        const defaultMap = (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(i => i.id === this.defaultWebmapId);
         const mapConfigChanged = JSON.stringify(webMapInfo) !== JSON.stringify(this._webMapInfo);
         this._webMapInfo = loadDefaultMap && defaultMap ? defaultMap[0] :
-            !webMapInfo?.id && this.mapInfos.length > 0 ? this.mapInfos[0] : webMapInfo;
+            !(webMapInfo === null || webMapInfo === void 0 ? void 0 : webMapInfo.id) && this.mapInfos.length > 0 ? this.mapInfos[0] : webMapInfo;
         const id = this._webMapInfo.id;
-        const isDefaultMap = loadDefaultMap && webMapInfo?.id === this.defaultWebmapId;
+        const isDefaultMap = loadDefaultMap && (webMapInfo === null || webMapInfo === void 0 ? void 0 : webMapInfo.id) === this.defaultWebmapId;
         if ((this._loadedId !== id && !loadDefaultMap) || isDefaultMap) {
             const webMap = new this.WebMap({
                 portalItem: { id }