@esri/solutions-components 0.11.17 → 0.11.18

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

@@ -9,8 +9,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2c21082d.js');
 const locale = require('./locale-c09e93fb.js');
-const mapViewUtils = require('./mapViewUtils-319df9ec.js');
-const downloadUtils = require('./downloadUtils-88ec0e88.js');
+const mapViewUtils = require('./mapViewUtils-4ea7216c.js');
+const downloadUtils = require('./downloadUtils-9abff913.js');
 require('./esri-loader-08dc41bd.js');
 require('./_commonjsHelpers-baf43783.js');
 require('./interfaces-09c4c40e.js');
@@ -197,7 +197,7 @@ const CardManager = class {
         const heading = isTable ? this._translations.createRecord : this._translations.createFeature;
         const guideMsg = this.customInfoText ? this.customInfoText : this.selectingFeatureFromMap ? this._translations.selectFeaturesFromMapToStart : this._translations.selectFeaturesToStart;
         const showCreateFeatureOrRecordBtn = this.enableCreateFeatures && this.layer?.capabilities?.operations?.supportsAdd;
-        return (index.h(index.Host, { key: '5557aa4d80b859335e38db3f4255f4a61d00560f' }, index.h("div", { key: '6756e3314fc3444a982010a3cfa702d77f05f316', class: "overflow-auto height-full" }, index.h("calcite-shell", { key: '715eb7ed692a1d00347d44f20df370cf9a91ded5', class: "position-relative " + featuresClass }, index.h("div", { key: 'baf4e97c1884f477e4077a6dc8e59d98c77593a4', class: "position-static z-index-500" }, index.h("info-card", { key: 'e2ed262e2ebdf9b79ddd725f073f13d6a17909d2', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, locale: this.locale, mapView: this.mapView }))), index.h("calcite-shell", { key: '536b1dec2a539191f30b648f70a6bdcd447a6d6c', class: "position-relative " + messageClass }, index.h("calcite-panel", { key: '285eb9f07fcaf53c23ccecb44d68ec5bb85c9528' }, index.h("div", { key: 'dd180d0c21823d5cb3007c6078c9daa81a487101', class: "padding-1" }, index.h("calcite-notice", { key: 'b7d4ffb57b912c0424bef1c828608fd41d12d561', icon: this.selectingFeatureFromMap ? "map" : "table", iconFlipRtl: true, open: true }, index.h("div", { key: '642339477aa8b9e1cba106dcb410ef293363311f', slot: "message" }, guideMsg))), !this.isMobile && showCreateFeatureOrRecordBtn && index.h("calcite-button", { key: '835562b5a083e7fc6f558d19787d5fa2680c2938', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature))), index.h("calcite-shell", { key: '5aeb16a8b0e6e693b7fddd64bf1ec2fe6553f133', class: "position-relative " + createFeatureClass }, index.h("calcite-flow-item", { key: '20487f672aa32832c3b6a576976ad1bb12116814' }, index.h("calcite-panel", { key: '9cc5d827a20afbf3381be0739cc3cc6713af8d66', heading: heading }, index.h("calcite-action", { key: 'c441e24039efd9ec28471e6b66bfea2a4b5a8454', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "" }), this.getEditorComponent(), this._showSubmitBtn && index.h("calcite-button", { key: 'a858b7a2fb25e257b6c92ca5719fb3a7cc8aedbb', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
+        return (index.h(index.Host, { key: '5557aa4d80b859335e38db3f4255f4a61d00560f' }, index.h("div", { key: '6756e3314fc3444a982010a3cfa702d77f05f316', class: "overflow-auto height-full" }, index.h("calcite-shell", { key: '715eb7ed692a1d00347d44f20df370cf9a91ded5', class: "position-relative " + featuresClass }, index.h("div", { key: 'baf4e97c1884f477e4077a6dc8e59d98c77593a4', class: "position-static z-index-500" }, index.h("info-card", { key: '0b9b30182fbc3482e9edf49b79f68aec8cf86adc', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, showCloseBtn: true }))), index.h("calcite-shell", { key: '94b646061956a78dec4f96d9d1d9dedc5ad6aee7', class: "position-relative " + messageClass }, index.h("calcite-panel", { key: '00b660d474234f8156f3d4c627626f5891754051' }, index.h("div", { key: 'adb0732ff59c4fdedb19367a32ad9e3e060ddb60', class: "padding-1" }, index.h("calcite-notice", { key: 'a2c88bd4a0827111b0d1f3056ae571b47e5b380b', icon: this.selectingFeatureFromMap ? "map" : "table", iconFlipRtl: true, open: true }, index.h("div", { key: 'bffc2630de3f0376b6ea5827c89f65dc605a5356', slot: "message" }, guideMsg))), !this.isMobile && showCreateFeatureOrRecordBtn && index.h("calcite-button", { key: '08bef5c20d6b60e17abcfc9fc19d7d1eb5d04b1c', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature))), index.h("calcite-shell", { key: '833a8de60b491008006034c1696fcb29f1bb6a08', class: "position-relative " + createFeatureClass }, index.h("calcite-flow-item", { key: 'dd2ae4509e4bec5a90f33484f8a28f422c0eeee4' }, index.h("calcite-panel", { key: '8fa68650f1933a88cdaf1fee8391cf433b7b54e9', heading: heading }, index.h("calcite-action", { key: '2b205887ff8703e01ef356cae09ce5d15dbec7c6', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "" }), this.getEditorComponent(), this._showSubmitBtn && index.h("calcite-button", { key: '0977a3974583266f6d90e18c8fbbc3e18f803983', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
     }
     /**
    * Returns the editor component for adding feature
@@ -474,10 +474,6 @@ const LayerTable = class {
      * IColumnsInfo: Key/value pair with fieldname/(visible in table)
      */
     _columnsInfo;
-    /**
-     * boolean: When true the ctrl key is currently pressed
-     */
-    _ctrlIsPressed = false;
     /**
      * number: The id of the most recently selected row from the table
      */
@@ -583,18 +579,10 @@ const LayerTable = class {
      * HTMLInstantAppsSocialShareElement: Element to support app sharing to social media
      */
     _shareNode;
-    /**
-     * boolean: When true the shift key is currently pressed
-     */
-    _shiftIsPressed = false;
     /**
      * HTMLCalciteDropdownElement: Dropdown the will support show/hide of table columns
      */
     _showHideDropdown;
-    /**
-     * boolean: When true any onChange handeling will be skipped
-     */
-    _skipOnChange = false;
     /**
      * HTMLCalciteDropdownElement: Dropdown the will support overflow tools that won't fit in the current display
      */
@@ -627,10 +615,22 @@ const LayerTable = class {
      * boolean: When true we will not evaluate if the editor has any pending edits
      */
     _skipEditCheck = false;
+    /**
+     * __esri.Handle: handle for the filter by extent
+     */
+    _filterByExtentHandle;
     /**
      * number[]: selected features from table
      */
     _tempSelectedIds;
+    /**
+     * number[]: out of extent oids which are selected but now out of extent
+     */
+    _outOFExtentOids = [];
+    /**
+     * boolean: When true allow table to update the records
+     */
+    _shouldUpdateTableOnExtentChange = true;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -794,13 +794,35 @@ const LayerTable = class {
      * Reset the filter
      */
     async filterReset() {
+        if (this._filterByExtentHandle) {
+            this._table.filterGeometry = undefined;
+            this._filterByExtentHandle.remove();
+            this._filterByExtentHandle = undefined;
+        }
         await this._handleFilterListReset();
     }
     /**
      * Updates the filter
      */
-    async filterUpdate(active) {
-        await this._handleFilterUpdate(active);
+    async filterUpdate(filterActive, keepTableUpdatingOnMapExtentChange) {
+        await this._handleFilterUpdate(filterActive);
+        if (keepTableUpdatingOnMapExtentChange) {
+            this._shouldUpdateTableOnExtentChange = true;
+            this._handleTableOnMapExtent();
+        }
+        else if (keepTableUpdatingOnMapExtentChange === false) {
+            this._table.filterGeometry = undefined;
+            this._filterByExtentHandle.remove();
+            this._filterByExtentHandle = undefined;
+            // update all the ids when filter is unchecked or toggled off
+            await this._updateAllIds();
+        }
+    }
+    /**
+     * Validate if the table should update
+     */
+    async validateTableUpdate(shouldUpdateTableOnExtentChange) {
+        this._shouldUpdateTableOnExtentChange = shouldUpdateTableOnExtentChange;
     }
     /**
      * Validate if the editor has any pending edits
@@ -854,8 +876,20 @@ const LayerTable = class {
      * @returns a promise when the operation has completed
      */
     async editorInitialized(evt) {
+        this._shouldUpdateTableOnExtentChange = false;
         this._editor = evt.detail;
     }
+    /**
+     * Respond to and close the edit record display
+     *
+     * @returns a promise when the operation has completed
+     */
+    async closeEdit() {
+        this._shouldUpdateTableOnExtentChange = true;
+        if (this._filterByExtentHandle) {
+            this._handleTableOnMapExtent();
+        }
+    }
     /**
      * Scroll and zoom to the selected feature from the Features widget.
      *
@@ -916,7 +950,7 @@ const LayerTable = class {
     async editsComplete(evt) {
         const editType = evt.detail;
         if (editType === "delete" || editType === "add") {
-            this._allIds = await mapViewUtils.queryAllIds(this._layer);
+            this._allIds = await this.queryAllIds();
         }
         await this._refresh();
     }
@@ -988,8 +1022,8 @@ const LayerTable = class {
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         const showSearch = this._canShowFullTextSearch();
         this._validateActiveActions();
-        return (index.h(index.Host, { key: '68d6d57fbc9122b15340e0be3426ad00d398c7b2' }, index.h("div", { key: 'c4839ef8df0c5d3937b68c444264ce3bbb5c808d' }, index.h("calcite-scrim", { key: 'd4fa1a66ddcc5d0e83ee4ee43b2a3230e7f0298f', class: scrimClass, loading: this._queryingData }), index.h("calcite-shell", { key: '2ae1aee8a242902f3fbc9a1a19b62a8b721e5de7' }, this._getTableControlRow("header"), index.h("div", { key: '73d424f4bb07f56245c2c0858544d6cb7d9fcc74', class: `width-full ${tableHeightClass}` }, index.h("calcite-panel", { key: 'a2404478e2daf5ebac1ff3ac10378a98c868bcb2', class: "height-full width-full" }, showSearch &&
-            index.h("div", { key: 'e18c71ccab7853438c51fe7168b7a98087d215e2', class: "search-container" }, index.h("calcite-input", { key: '39ecb52bacd4560a94310a56faf084941aa44a2a', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), index.h("calcite-loader", { key: 'ce2aeb5e108b1d76da8694a071dcd46098e6bb28', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), index.h("div", { key: '78e596cb45427bb9d21a11368361f67e1ed306a5', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (index.h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (index.h(index.Host, { key: 'a0a998de3a1b29c311a9fdfa87f3bd836481ba5a' }, index.h("div", { key: 'aafaf9f925ed7321e1ca7f15fc7db369212dc1dc' }, index.h("calcite-scrim", { key: '86459aed994823dbf1d774aad01e8207a7df5f4f', class: scrimClass, loading: this._queryingData }), index.h("calcite-shell", { key: 'b29896a197cba444d2ac377779670394e29ecaf6' }, this._getTableControlRow("header"), index.h("div", { key: '0456651ac46f399eb04253387d7aae76995f4683', class: `width-full ${tableHeightClass}` }, index.h("calcite-panel", { key: '9ba484159832fea630bbb653bc2fc4e99e602674', class: "height-full width-full" }, showSearch &&
+            index.h("div", { key: 'bd4b72db51f44c2954e893e8ef7ec2a30efc4c45', class: "search-container" }, index.h("calcite-input", { key: '8811ff1dd71408fda37a0d7d2403671df24b5b7b', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), index.h("calcite-loader", { key: '44a419089cf1e207f52ce19015c2870ce956e261', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), index.h("div", { key: '096f4fc7f5cc9500e7982bbfaceb2fcc4c82a1dd', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (index.h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
             .replace("{{selected}}", selected))) : undefined), this.createFilterModal && this._filterModal())));
     }
@@ -1009,8 +1043,6 @@ const LayerTable = class {
     componentDidRender() {
         // need to be called after each render to get the clicked mouseEvent
         document.onclick = (e) => this._handleDocumentClick(e);
-        document.onkeydown = (e) => this._handleKeyDown(e);
-        document.onkeyup = (e) => this._handleKeyUp(e);
         this._updateToolbar();
     }
     //--------------------------------------------------------------------------
@@ -1271,6 +1303,7 @@ const LayerTable = class {
                 }
                 if (ti.icon === "selected-items-filter") {
                     ti.active = this._showOnlySelected;
+                    ti.label = this._showOnlySelected ? this._translations.showAll : this._translations.showSelected;
                 }
             }
         });
@@ -1285,7 +1318,6 @@ const LayerTable = class {
         // hide multiple edits for R03
         const showMultipleEdits = this.selectedIds.length > 1 && this._layer?.capabilities?.operations?.supportsUpdate && false;
         const featuresEmpty = this._featuresEmpty();
-        const hasFilterExpressions = this._hasFilterExpressions();
         if (this._translations) {
             this._toolInfos = [
                 !this.mapHidden ? {
@@ -1297,7 +1329,7 @@ const LayerTable = class {
                     disabled: !featuresSelected,
                     isOverflow: false
                 } : undefined,
-                hasFilterExpressions ? {
+                {
                     active: false,
                     icon: "filter",
                     indicator: false,
@@ -1305,7 +1337,7 @@ const LayerTable = class {
                     func: () => this.createFilterModal ? this._toggleFilter() : this.toggleFilter.emit(),
                     disabled: false,
                     isOverflow: false
-                } : undefined,
+                },
                 showMultipleEdits ? {
                     active: false,
                     icon: "pencil",
@@ -1707,6 +1739,7 @@ const LayerTable = class {
                     editingEnabled: this._editEnabled && this.enableInlineEdit,
                     highlightEnabled: true,
                     multiSortEnabled: false,
+                    attachmentsEnabled: true,
                     visibleElements: {
                         columnDescriptions: false,
                         header: false,
@@ -1738,88 +1771,9 @@ const LayerTable = class {
             return;
         }
         const ids = [...this._getIds()];
-        if (!this._skipOnChange) {
-            if ((!this._ctrlIsPressed && !this._shiftIsPressed) || (this._selectionFromMap && this._shiftIsPressed)) {
-                if (this.selectedIds.length > 0) {
-                    this._skipOnChange = true;
-                    // only readd in specific case where we have multiple selected and then click one of the currently selected
-                    const reAdd = this.selectedIds.length > 1 && evt.removed.length === 1;
-                    const newIds = reAdd ? evt.removed : ids.filter(id => this.selectedIds.indexOf(id) < 0);
-                    this._tempSelectedIds = newIds.length ? [...newIds] : [...this.selectedIds];
-                    this._clearSelection();
-                    this.selectedIds = [...newIds];
-                    if (newIds.length > 0) {
-                        this._table.highlightIds.add(newIds[0]);
-                    }
-                    else {
-                        this._skipOnChange = false;
-                    }
-                }
-                else {
-                    // https://github.com/Esri/solutions-components/issues/365
-                    this.selectedIds = ids.reverse();
-                    this._tempSelectedIds = [...this.selectedIds];
-                }
-            }
-            else if (this._ctrlIsPressed) {
-                this.selectedIds = ids.reverse();
-                this._tempSelectedIds = [...this.selectedIds];
-            }
-            else if (this._shiftIsPressed && ids?.length > 0) {
-                this._skipOnChange = true;
-                this._previousCurrentId = this._currentId;
-                this._currentId = [...ids].reverse()[0];
-                if (ids.length === 1) {
-                    this._skipOnChange = false;
-                }
-                else if (this._previousCurrentId !== this._currentId) {
-                    // query the layer based on current sort and filters then grab between the current id and previous id
-                    const orderBy = this._table.activeSortOrders.reduce((prev, cur) => {
-                        prev.push(`${cur.fieldName} ${cur.direction}`);
-                        return prev;
-                    }, []);
-                    // when dealing with a feature layer with many features shift-select can take a very long time.
-                    // don't allow the user to make additional interactions with the table if it takes more than 500 miliseconds
-                    let queryComplete = false;
-                    setTimeout(() => {
-                        if (!queryComplete) {
-                            this._queryingData = true;
-                        }
-                    }, 500);
-                    const oids = await mapViewUtils.queryAllOidsWithQueryFeatures(0, this._layer, [], orderBy);
-                    queryComplete = true;
-                    this._queryingData = false;
-                    let isBetween = false;
-                    const _start = this._table.viewModel.getObjectIdIndex(this._previousCurrentId);
-                    const _end = this._table.viewModel.getObjectIdIndex(this._currentId);
-                    const startIndex = _start < _end ? _start : _end;
-                    const endIndex = _end > _start ? _end : _start;
-                    this._skipOnChange = startIndex + 1 !== endIndex;
-                    const idsInRange = oids.reduce((prev, cur) => {
-                        const id = cur;
-                        if ((id === this._currentId || id === this._previousCurrentId)) {
-                            isBetween = !isBetween;
-                            if (prev.indexOf(id) < 0) {
-                                prev.push(id);
-                            }
-                        }
-                        else if (isBetween && prev.indexOf(id) < 0) {
-                            prev.push(id);
-                        }
-                        return prev;
-                    }, []);
-                    const selectedIds = _start < _end ? idsInRange.reverse() : idsInRange;
-                    this.selectedIds = [...new Set([...selectedIds, ...this.selectedIds])];
-                    this._tempSelectedIds = [...this.selectedIds];
-                    this._table.highlightIds.addMany(this.selectedIds.filter(i => ids.indexOf(i) < 0));
-                }
-            }
-            this._finishOnChange();
-        }
-        else {
-            this._skipOnChange = false;
-        }
-        this._currentId = [...this._getIds()].reverse()[0];
+        this.selectedIds = ids.reverse();
+        this._tempSelectedIds = [...this.selectedIds];
+        this._finishOnChange();
         this._selectionFromMap = false;
     }
     /**
@@ -1858,6 +1812,7 @@ const LayerTable = class {
             handleOnChange = !this._skipEditCheck;
             this._skipEditCheck = false;
         }
+        this._shouldUpdateTableOnExtentChange = handleOnChange;
         return handleOnChange;
     }
     /**
@@ -1874,7 +1829,7 @@ const LayerTable = class {
     _finishOnChange() {
         if (this._showOnlySelected) {
             if (this._featuresSelected()) {
-                this._table.filterBySelection();
+                this._table.filterBySelectionEnabled = true;
             }
             else {
                 this._toggleShowSelected();
@@ -1912,7 +1867,7 @@ const LayerTable = class {
     async _resetTable() {
         this._loaded = false;
         this._clearSelection();
-        this._allIds = await mapViewUtils.queryAllIds(this._layer);
+        this._allIds = await this.queryAllIds();
         if (!this._table) {
             const columnTemplates = this._getColumnTemplates(this._layer.id, this._layer?.fields);
             await this._getTable(this._tableNode, columnTemplates);
@@ -1966,7 +1921,6 @@ const LayerTable = class {
         }
         this._refreshHandle = this._layer.on("refresh", (evt) => {
             if (evt.dataChanged) {
-                this._skipOnChange = true;
                 void this._updateAllIds();
             }
         });
@@ -1975,7 +1929,7 @@ const LayerTable = class {
      * Reset _allIds when the layers data has changed and refresh the selection ids and table
      */
     async _updateAllIds() {
-        this._allIds = await mapViewUtils.queryAllIds(this._layer);
+        this._allIds = await this.queryAllIds();
         this.selectedIds = this.selectedIds.filter(id => this._allIds.indexOf(id) > -1);
         await this._refresh();
     }
@@ -2115,20 +2069,6 @@ const LayerTable = class {
             }
         }
     }
-    /**
-     * Keep track of key down for ctrl and shift
-     */
-    _handleKeyDown(e) {
-        this._ctrlIsPressed = e.ctrlKey;
-        this._shiftIsPressed = e.shiftKey;
-    }
-    /**
-     * Keep track of key up for ctrl and shift
-     */
-    _handleKeyUp(e) {
-        this._ctrlIsPressed = e.ctrlKey;
-        this._shiftIsPressed = e.shiftKey;
-    }
     /**
      * Show filter component in modal
      *
@@ -2164,6 +2104,40 @@ const LayerTable = class {
         this._updateShareUrl();
         await this._searchFullText();
     }
+    /**
+     * Update the table when extent is changed
+     */
+    _handleTableOnMapExtent() {
+        if (this._table) {
+            this._filterByExtentHandle = this.reactiveUtils.when(() => this.mapView.stationary, 
+            // eslint-disable-next-line @typescript-eslint/no-misused-promises
+            async () => {
+                if (this._shouldUpdateTableOnExtentChange) {
+                    //Added timeout while updating table records to avoid the issue in which we see empty table records when extent is changed
+                    await new Promise(resolve => setTimeout(resolve, 800));
+                    this._table.filterGeometry = this.mapView.extent;
+                    const query = {
+                        geometry: this.mapView.extent
+                    };
+                    const objectIdsInExtent = await this._layer.queryObjectIds(query);
+                    // remove the highlight of features which are not in the map extent
+                    const outOids = this.selectedIds.filter(id => !objectIdsInExtent.includes(id));
+                    const restoreOids = this._outOFExtentOids.filter(id => objectIdsInExtent.includes(id));
+                    if (outOids.length > 0) {
+                        this._table.highlightIds.removeMany(outOids);
+                        this._outOFExtentOids = [...this._outOFExtentOids, ...outOids];
+                    }
+                    if (restoreOids.length > 0) {
+                        this._table.highlightIds.addMany(restoreOids);
+                        this._outOFExtentOids = this._outOFExtentOids.filter(oid => !restoreOids.includes(oid));
+                    }
+                }
+                this._allIds = await this.queryAllIds();
+            }, {
+                initial: true
+            });
+        }
+    }
     /**
      * Close the filter modal
      * @protected
@@ -2171,10 +2145,20 @@ const LayerTable = class {
     async _closeFilter() {
         if (this._filterOpen) {
             // reset allIds
-            this._allIds = await mapViewUtils.queryAllIds(this._layer);
+            this._allIds = await this.queryAllIds();
             this._filterOpen = false;
         }
     }
+    /**
+     * Query the layer for applied filter
+     * @returns Promise with the featureSet from the layer that match the provided ids
+     */
+    async queryAllIds() {
+        const query = this._layer.createQuery();
+        query.geometry = this._filterByExtentHandle ? this.mapView.extent : null;
+        query.where = this._layer.definitionExpression || "1=1";
+        return await this._layer.queryObjectIds(query);
+    }
     /**
      * Handle map click events to keep table and map click selection in sync
      *
@@ -2196,7 +2180,7 @@ const LayerTable = class {
                 }
             });
             if (this._showOnlySelected) {
-                this._table.filterBySelection();
+                this._table.filterBySelectionEnabled = true;
             }
         }
         else {
@@ -2213,7 +2197,6 @@ const LayerTable = class {
         const editsDiscarded = await this._validateActiveEdits(addedIds, this.selectedIds);
         if (editsDiscarded) {
             this._table.highlightIds.removeAll();
-            this._skipOnChange = true;
             this._table.highlightIds.addMany(ids);
             this.selectedIds = ids;
             this._finishOnChange();
@@ -2230,12 +2213,7 @@ const LayerTable = class {
      */
     _toggleShowSelected() {
         this._showOnlySelected = !this._showOnlySelected;
-        if (this._showOnlySelected) {
-            this._table.filterBySelection();
-        }
-        else {
-            this._table.objectIds.removeAll();
-        }
+        this._table.filterBySelectionEnabled = this._showOnlySelected;
     }
     /**
      * Clears the selected indexes
@@ -2243,6 +2221,7 @@ const LayerTable = class {
      */
     _clearSelection() {
         this.selectedIds = [];
+        this._outOFExtentOids = [];
         this._table?.highlightIds.removeAll();
         this._table?.rowHighlightIds.removeAll();
         this._finishOnChange();
@@ -2282,7 +2261,6 @@ const LayerTable = class {
         const editsDiscarded = await this._validateActiveEdits(ids, currentIndexes);
         if (editsDiscarded) {
             this._table.highlightIds.removeAll();
-            this._skipOnChange = true;
             this._table.highlightIds.addMany(ids);
             this.selectedIds = ids;
             this._finishOnChange();
@@ -2340,8 +2318,8 @@ const LayerTable = class {
     async _refresh() {
         const editsDiscarded = await this._validateActiveEdits([], this.selectedIds);
         if (editsDiscarded) {
-            await this._table.refresh();
-            this._allIds = await mapViewUtils.queryAllIds(this._layer);
+            await this._table?.refresh();
+            this._allIds = await this.queryAllIds();
             this.featureSelectionChange.emit(this.selectedIds);
         }
     }
@@ -2371,6 +2349,7 @@ const LayerTable = class {
             this._fetchingData = true;
             const layer = await mapViewUtils.getLayerOrTable(this.mapView, id);
             layer && await layer.when(() => {
+                this._shouldUpdateTableOnExtentChange = true;
                 this._layer = layer;
                 this._getFullTextSearchInfo();
             });

package/dist/cjs/create-feature_4.cjs.entry.js

@@ -9,12 +9,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2c21082d.js');
 const locale = require('./locale-c09e93fb.js');
-const mapViewUtils = require('./mapViewUtils-319df9ec.js');
-const popupUtils = require('./popupUtils-ca1127aa.js');
+const mapViewUtils = require('./mapViewUtils-4ea7216c.js');
+const popupUtils = require('./popupUtils-fc7557da.js');
 require('./esri-loader-08dc41bd.js');
 require('./_commonjsHelpers-baf43783.js');
 require('./interfaces-09c4c40e.js');
-require('./downloadUtils-88ec0e88.js');
+require('./downloadUtils-9abff913.js');
 require('./typeof-2a7e2dec.js');
 require('./index-5d8d6ae2.js');
 require('./solution-resource-d0a2f7fe.js');
@@ -1286,6 +1286,7 @@ const InfoCard = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.popupClosed = index.createEvent(this, "popupClosed", 7);
+        this.clearSelection = index.createEvent(this, "clearSelection", 7);
         this.selectionChanged = index.createEvent(this, "selectionChanged", 7);
     }
     get el() { return index.getElement(this); }
@@ -1334,6 +1335,10 @@ const InfoCard = class {
      * string: Set the position of the feature info
      */
     position = 'absolute';
+    /**
+     * boolean: If true show close button on the feature info
+     */
+    showCloseBtn = false;
     //--------------------------------------------------------------------------
     //
     //  State (internal)
@@ -1366,6 +1371,10 @@ const InfoCard = class {
      * All UI strings should be defined here.
      */
     _translations;
+    /**
+     * boolean: When true user has been navigated to related feature
+     */
+    _navigatedToRelatedFeature;
     //--------------------------------------------------------------------------
     //
     //  Properties (protected)
@@ -1401,6 +1410,10 @@ const InfoCard = class {
      * esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
      */
     reactiveUtils;
+    /**
+     * __esri.Graphic: Related feature selected from the features widget
+     */
+    _relatedFeature;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -1410,6 +1423,14 @@ const InfoCard = class {
      * Watch for changes to the graphic and update the feature widget
      */
     async graphicsWatchHandler() {
+        // if user has been navigated to related record and graphics is changed then close the feature widget and then set graphics to avoid blank popup issue
+        // https://github.com/Esri/solutions-components/issues/1113
+        if (this._navigatedToRelatedFeature && this._features) {
+            this._features.clear();
+            this._features.close();
+            this._count = "";
+            this._navigatedToRelatedFeature = false;
+        }
         await this.setGraphics();
     }
     /**
@@ -1500,6 +1521,10 @@ const InfoCard = class {
      * Emitted on demand when the popup is closed
      */
     popupClosed;
+    /**
+     * Emitted on demand when close button is clicked
+     */
+    clearSelection;
     /**
      * Emitted on demand when the selected index changes
      */
@@ -1526,7 +1551,10 @@ const InfoCard = class {
      * Refresh the info-card graphics
      */
     async refreshGraphics(evt) {
-        this.graphics = [...evt.detail];
+        // if if user is not navigated to related feature then only update the graphics otherwise the related feature will shown instead of selected feature
+        if (!this._navigatedToRelatedFeature) {
+            this.graphics = [...evt.detail];
+        }
     }
     //--------------------------------------------------------------------------
     //
@@ -1560,13 +1588,16 @@ const InfoCard = class {
         const featureNodeClass = this.isLoading || this._editRecordOpen ? "visibility-hidden" : "position-absolute";
         const editClass = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none";
         const editButtonClass = (!this.isLoading && this._editRecordOpen) || this._showListView ? "display-none" : "";
-        const nextBackDisabled = this._features?.features?.length < 2;
+        const nextBackDisabled = this._features?.features?.length < 2 || this._navigatedToRelatedFeature;
         const nextBackClass = this.isMobile ? "display-none" : "";
         const id = this._features?.selectedFeature?.getObjectId();
         const ids = parseInt(id?.toString(), 10) > -1 ? [id] : [];
         const deleteEnabled = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete;
-        return (index.h(index.Host, { key: '66070d48134f89d9cf132572fe1adf790b6d3ec6' }, index.h("calcite-shell", { key: 'b77248dce176df940d8b0c347154b73738a5576d', style: { position: this.position } }, this._getHeader(), index.h("calcite-loader", { key: 'c1638ca8320a0ae12a9ccd1fd8841efde4236ba5', class: loadingClass, label: this._translations.fetchingData }), index.h("div", { key: 'cf5ee3be5c0ea3be36205dcf7c0747461802a5f1', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), index.h("div", { key: '6fbfa6947fa0fdb1b14a03217da60f07ecff2e1b', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
-            index.h("div", { key: 'fdcb078c3b3f183b06dc3a48d27fee46e3a4fffa', class: "display-flex top-border padding-1-2" }, index.h("calcite-button", { key: '7193bec80a40f353d24e5d327d99d94a2c5ff356', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (index.h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, locale: this.locale, onEditsComplete: () => this._closePopup() })) : undefined, index.h("calcite-tooltip", { key: '228a9691edd916a5d644cb19db24898cdf7cab3b', placement: "bottom", "reference-element": "solutions-edit" }, index.h("span", { key: '5c696df370bcf230d3fc06523ec3cb9d96f2fe2b' }, this._translations.edit)), this.isMobile && deleteEnabled ? (index.h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, index.h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && index.h("div", { key: 'e1b829a888913af6a9d777a2df0d65571ac3bec1', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, index.h("div", { key: '8746737a103266efe64a8f80c2359f9e170586d5' }, index.h("calcite-button", { key: 'ac6fc23dc2831608cc9c86fe384c0a927cd7d7ac', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), index.h("calcite-tooltip", { key: 'd4a1e2753c35e97064ca66d5c30deccd532fb158', placement: "top", "reference-element": "solutions-back" }, index.h("span", { key: 'caae32b5e32a0d89265293beccef157d227a7600' }, this._translations.back))), index.h("calcite-action", { key: 'a87f344a06896ad86886815254979793b057e4cd', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, index.h("span", { key: '6e6f84ebedb2540edb485fa0789fe8ea67e7188f', class: "pagination-count" }, this._count)), index.h("div", { key: '6acf22348a508c921865bb4c7e531f9a826a8eed' }, index.h("calcite-button", { key: 'f1d763e1747cff7e0b6bec08ec4fade3d1582379', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), index.h("calcite-tooltip", { key: 'def93e3d1f19b4e6eb3e54c5fbd918fed118cc0c', placement: "top", "reference-element": "solutions-next" }, index.h("span", { key: 'cb9b90a5b3129861b7f58fd0271c6120893dfd53' }, this._translations.next))))), index.h("edit-card", { key: '524819a6dc64775b88b22aaf24445fd5ebdeae24', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: this._features?.selectedFeatureIndex, graphics: this.graphics, locale: this.locale, mapView: this.mapView, open: this._editRecordOpen }), index.h("calcite-alert", { key: '394c3b416a5dc94381c8b93afd3308121fbebd81', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, index.h("div", { key: 'f4868bf3b710d91ed7e3f1e34b846bd408febac0', slot: "title" }, this._translations.editDisabled), index.h("div", { key: '457b7d0c76bfac52340bec73f5d1d2abbd10f25a', slot: "message" }, this._translations.enableEditing)))));
+        // if user has navigated to the related feature then pass the related feature to the graphics
+        const graphics = this._relatedFeature ? [this._relatedFeature] : this.graphics;
+        const selectedFeatureIndex = this._navigatedToRelatedFeature ? 0 : this._features?.selectedFeatureIndex;
+        return (index.h(index.Host, { key: '9f75eb2e7aba944474e85c34b2abe23982629558' }, index.h("calcite-shell", { key: '748f9e50cd3aa7a52dd7910b171c0d7f54d09203', style: { position: this.position } }, this._getHeader(), index.h("calcite-loader", { key: 'feced4d4a66df36958644436acaa53ddabdfc02a', class: loadingClass, label: this._translations.fetchingData }), index.h("div", { key: '3bb912c80d610a21a5e283c6bd19ab0c63023c45', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), index.h("div", { key: '479dcbda08f837b32bd19ed7f40856f081e92a6e', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            index.h("div", { key: 'dd78b02ba8506c391aada6c5233691ec9babcfbe', class: "display-flex top-border padding-1-2" }, index.h("calcite-button", { key: 'c5a807609c60151a433fa9c0055fbfdf20b2935f', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (index.h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, locale: this.locale, onEditsComplete: () => this._closePopup() })) : undefined, index.h("calcite-tooltip", { key: 'a4cd4c77e982e23675ec9eaf08e2135de6c83b65', placement: "bottom", "reference-element": "solutions-edit" }, index.h("span", { key: '22533608996d1c87b9b04e339506ec01176379b0' }, this._translations.edit)), this.isMobile && deleteEnabled ? (index.h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, index.h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && index.h("div", { key: '183ff7da57a06de8f5419edf5973f18b41c46097', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, index.h("div", { key: '77e59229d1d516ccdc8f7c5be2f89a5ad9d5004b' }, index.h("calcite-button", { key: '4b6a6f1f85e9199e14d626ba66b6b319283d0c32', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), index.h("calcite-tooltip", { key: '7056c5cb3c790c804194f09f2586864a28dce5e1', placement: "top", "reference-element": "solutions-back" }, index.h("span", { key: '923fc5425a9faced6952a1b9acff9b7d0f3da286' }, this._translations.back))), index.h("calcite-action", { key: 'a34bfb4ae71a91373fd476e7b704a6a2f8f23157', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, index.h("span", { key: '101a0fa592af65b540123c835e9031a18671ad8b', class: "pagination-count" }, this._count)), index.h("div", { key: 'c4f88f464a3091dfc77578470de4f42d05b9f5c7' }, index.h("calcite-button", { key: 'e4e35e539f0c7e01a31e0047db545d4d334ef2d8', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), index.h("calcite-tooltip", { key: '40244ecf5566fde448b311272d2ee00d70bc531a', placement: "top", "reference-element": "solutions-next" }, index.h("span", { key: 'db01e2a2b9da9a80f9a25caf49bf8beb872e6ad9' }, this._translations.next))))), index.h("edit-card", { key: 'cfa193b01b67f7709ea6a491caa0c647c536e9e3', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: selectedFeatureIndex, graphics: graphics, locale: this.locale, mapView: this.mapView, open: this._editRecordOpen }), index.h("calcite-alert", { key: '709fd6d681d32a03fcf5fba959e81a0153676e26', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, index.h("div", { key: 'bbdd9cc98fcda8ffba294a4322f08468072f6aef', slot: "title" }, this._translations.editDisabled), index.h("div", { key: 'd07e32e9cd54cc82ff005e7e696e13e1b8bdaa4e', slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -1626,7 +1657,7 @@ const InfoCard = class {
                     container: this._featuresNodeId,
                     visibleElements: {
                         actionBar: false,
-                        closeButton: false,
+                        closeButton: this.showCloseBtn,
                         heading: !this.isMobile
                     }
                 });
@@ -1642,11 +1673,26 @@ const InfoCard = class {
                         this.selectionChanged.emit({ selectedFeature: [this._features.selectedFeature], selectedFeatureIndex: this._features.selectedFeatureIndex });
                     }
                 });
+                this.reactiveUtils.watch(() => this._features.selectedDrillInFeature, (f) => {
+                    if (f) {
+                        this._relatedFeature = f;
+                        this._navigatedToRelatedFeature = true;
+                    }
+                    else {
+                        this._relatedFeature = null;
+                        this._navigatedToRelatedFeature = false;
+                    }
+                });
+                // get the info card node element and emit clear selection while clicking the close button
+                const infoCard = this.el.querySelector('#' + this._featuresNodeId);
+                infoCard.addEventListener('calciteFlowItemClose', () => {
+                    this.clearSelection.emit();
+                });
             }
             else {
                 this._features.view = this.mapView;
                 this._features.visibleElements.actionBar = false;
-                this._features.visibleElements.closeButton = false;
+                this._features.visibleElements.closeButton = this.showCloseBtn;
                 this._features.visibleElements.heading = !this.isMobile;
             }
         }) : Promise.resolve();