@esri/solutions-components 0.7.17 → 0.7.19

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

@@ -43,6 +43,10 @@ export class LayerTable {
          * 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
          */
@@ -60,8 +64,6 @@ export class LayerTable {
          * 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;
@@ -74,7 +76,7 @@ export class LayerTable {
         this.enableCSV = undefined;
         this.enableInlineEdit = undefined;
         this.enableShare = undefined;
-        this.enableZoom = undefined;
+        this.isMobile = undefined;
         this.mapInfo = undefined;
         this.mapView = undefined;
         this.onlyShowUpdatableLayers = undefined;
@@ -85,9 +87,11 @@ export class LayerTable {
         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;
@@ -99,15 +103,6 @@ export class LayerTable {
     //  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
      */
@@ -129,11 +124,12 @@ export class LayerTable {
      * 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;
@@ -141,6 +137,14 @@ export class LayerTable {
             }
         });
     }
+    /**
+     * 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
      */
@@ -169,6 +173,7 @@ export class LayerTable {
      */
     async _layerWatchHandler() {
         this._fetchingData = true;
+        this._definitionExpression = this._layer.definitionExpression;
         await this._resetTable();
         this._updateShareUrl();
         this._initLayerExpressions();
@@ -180,6 +185,9 @@ export class LayerTable {
     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
@@ -189,15 +197,28 @@ export class LayerTable {
             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;
@@ -244,7 +265,9 @@ export class LayerTable {
         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.
@@ -254,15 +277,20 @@ export class LayerTable {
         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);
@@ -295,8 +323,6 @@ export class LayerTable {
     }
     /**
      * Update the toolbar when its size changes
-     *
-     * @returns void
      */
     _onResize() {
         this._updateToolbar();
@@ -310,7 +336,7 @@ export class LayerTable {
      */
     _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
@@ -320,7 +346,9 @@ export class LayerTable {
      * @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
@@ -333,8 +361,8 @@ export class LayerTable {
             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;
         }, []);
@@ -362,10 +390,9 @@ export class LayerTable {
     }
     /**
      * Update actions enabled prop based on number of selected indexes
-     *
-     * @returns void
      */
     _validateEnabledActions() {
+        var _a;
         const featuresSelected = this._featuresSelected();
         const selectionDependant = [
             "zoom-to-object",
@@ -373,83 +400,121 @@ export class LayerTable {
             "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,
@@ -489,70 +554,68 @@ export class LayerTable {
     }
     /**
      * 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);
@@ -568,8 +631,6 @@ export class LayerTable {
     }
     /**
      * Get the id and size for the toolbars current items
-     *
-     * @returns void
      */
     _setToolbarSizeInfos() {
         let hasWidth = false;
@@ -608,7 +669,8 @@ export class LayerTable {
      * @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
@@ -629,7 +691,8 @@ export class LayerTable {
      * @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
@@ -641,9 +704,9 @@ export class LayerTable {
      *
      * @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
@@ -718,8 +781,6 @@ export class LayerTable {
      * 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) {
@@ -770,6 +831,9 @@ export class LayerTable {
                     if (newIndexes.length > 0) {
                         this._table.highlightIds.add(newIndexes[0]);
                     }
+                    else {
+                        this._skipOnChange = false;
+                    }
                 }
                 else {
                     // https://github.com/Esri/solutions-components/issues/365
@@ -829,8 +893,6 @@ export class LayerTable {
     }
     /**
      * Handle any updates after a selection change has occured and emit the results
-     *
-     * @returns void
      */
     _finishOnChange() {
         if (this._showOnlySelected) {
@@ -845,8 +907,6 @@ export class LayerTable {
     }
     /**
      * Reset basic table props
-     *
-     * @returns void
      */
     async _resetTable() {
         var _a;
@@ -890,8 +950,6 @@ export class LayerTable {
     }
     /**
      * 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) => {
@@ -901,8 +959,6 @@ export class LayerTable {
     }
     /**
      * Select the feature that was specified via url params
-     *
-     * @returns void
      */
     _selectDefaultFeature(oids) {
         if (oids.length > 0) {
@@ -915,8 +971,6 @@ export class LayerTable {
     }
     /**
      * Verify edit capabilities of the layer
-     *
-     * @returns void
      */
     _checkEditEnabled() {
         this._editEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsUpdate;
@@ -924,8 +978,6 @@ export class LayerTable {
     }
     /**
      * Sort the objectid field in descending order
-     *
-     * @returns void
      */
     async _sortTable() {
         if (this._table && this._layer && !this._sortActive) {
@@ -980,8 +1032,6 @@ export class LayerTable {
     }
     /**
      * Keep track of key down for ctrl and shift
-     *
-     * @returns void
      */
     _handleKeyDown(e) {
         this._ctrlIsPressed = e.ctrlKey;
@@ -989,8 +1039,6 @@ export class LayerTable {
     }
     /**
      * Keep track of key up for ctrl and shift
-     *
-     * @returns void
      */
     _handleKeyUp(e) {
         this._ctrlIsPressed = e.ctrlKey;
@@ -1003,12 +1051,22 @@ export class LayerTable {
      */
     _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) {
@@ -1027,8 +1085,6 @@ export class LayerTable {
     }
     /**
      * Delete the currently selected features
-     *
-     * @returns void
      */
     async _deleteFeatures() {
         this._isDeleting = true;
@@ -1047,8 +1103,6 @@ export class LayerTable {
      * 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 = {
@@ -1074,16 +1128,12 @@ export class LayerTable {
     }
     /**
      * 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;
@@ -1092,12 +1142,11 @@ export class LayerTable {
         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;
@@ -1110,8 +1159,6 @@ export class LayerTable {
     }
     /**
      * Clears the selected indexes
-     *
-     * @returns void
      */
     _clearSelection() {
         var _a;
@@ -1120,8 +1167,6 @@ export class LayerTable {
     }
     /**
      * When true the filter modal will be displayed
-     *
-     * @returns void
      */
     _toggleFilter() {
         this._filterOpen = !this._filterOpen;
@@ -1129,8 +1174,6 @@ export class LayerTable {
     /**
      * Store any filters for the current layer.
      * Should only occur on layer change
-     *
-     * @returns void
      */
     _initLayerExpressions() {
         var _a, _b;
@@ -1139,8 +1182,6 @@ export class LayerTable {
     }
     /**
      * Select all rows that are not currently selectd
-     *
-     * @returns void
      */
     _switchSelected() {
         const currentIndexes = [...this._selectedIndexes];
@@ -1169,15 +1210,20 @@ export class LayerTable {
             ids,
             layer: this._layer
         };
+        const fields = this._table.columns.toArray().reduce((prev, cur) => {
+            if (!cur.hidden) {
+                prev.push(cur.name.toLocaleLowerCase());
+            }
+            return prev;
+        }, []);
         void downloadUtils.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();
@@ -1258,9 +1304,6 @@ export class LayerTable {
     }
     /**
      * Get the menu config that adds the ability to hide the current column
-     *
-     * @returns void
-     * @protected
      */
     _getMenuConfig(name) {
         return {
@@ -1278,9 +1321,6 @@ export class LayerTable {
     }
     /**
      * Hide the table column for the provided name
-     *
-     * @returns void
-     * @protected
      */
     _handleHideClick(name) {
         this._columnsInfo[name] = false;
@@ -1447,7 +1487,7 @@ export class LayerTable {
                 "attribute": "enable-share",
                 "reflect": false
             },
-            "enableZoom": {
+            "isMobile": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -1459,9 +1499,9 @@ export class LayerTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "boolean: when true the zoom button will be enabled"
+                    "text": "When true the component will render an optimized view for mobile devices"
                 },
-                "attribute": "enable-zoom",
+                "attribute": "is-mobile",
                 "reflect": false
             },
             "mapInfo": {
@@ -1597,9 +1637,11 @@ export class LayerTable {
             "_confirmDelete": {},
             "_controlsThatFit": {},
             "_fetchingData": {},
+            "_filterActive": {},
             "_filterOpen": {},
             "_isDeleting": {},
             "_layer": {},
+            "_selectAllActive": {},
             "_selectedIndexes": {},
             "_showHideOpen": {},
             "_showOnlySelected": {},
@@ -1625,12 +1667,33 @@ export class LayerTable {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "deleteFeatures": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Delete currently selected features",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise resolving when the process is complete"
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
-                "propName": "enableZoom",
-                "methodName": "enableZoomWatchHandler"
-            }, {
                 "propName": "enableCSV",
                 "methodName": "enableCSVWatchHandler"
             }, {
@@ -1639,6 +1702,9 @@ export class LayerTable {
             }, {
                 "propName": "_controlsThatFit",
                 "methodName": "_controlsThatFitWatchHandler"
+            }, {
+                "propName": "isMobile",
+                "methodName": "isMobileWatchHandler"
             }, {
                 "propName": "mapInfo",
                 "methodName": "mapInfoWatchHandler"