@esri/solutions-components 0.11.20 → 0.11.22

package/dist/components/crowdsource-reporter.js

@@ -64,6 +64,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this.zoomToScale = undefined;
         this.floorLevel = undefined;
         this.showFullCommentTitle = true;
+        this.filterByMapExtent = false;
+        this.sortOption = "newest";
         this._featureCreationFailedErrorMsg = undefined;
         this._filterActive = false;
         this._flowItems = [];
@@ -77,9 +79,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this._translations = undefined;
         this._updatedProgressBarStatus = 25;
         this._updatedSorting = undefined;
-        this._updatedSortOption = "sortNewest";
+        this._updatedSortOption = "newest";
         this._commentSubmitted = false;
         this._addingCommentFailed = false;
+        this._filterOpen = false;
     }
     get el() { return this; }
     //--------------------------------------------------------------------------
@@ -236,8 +239,17 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     /**
      * Called each time the mapView prop is changed.
      */
-    async isMobileWatchHandler() {
+    async isMobileWatchHandler(isMobile) {
         this.updatePanelState(false, this._showFullPanel);
+        if (isMobile && this._flowItems[this._flowItems.length - 1] === "filter-panel") {
+            // while switching always first take back from filter panel to store currentLayerExpressions to restore the filter applied
+            await this.backFromFilterPanel();
+            this._filterOpen = true;
+        }
+        else if (!isMobile && this._filterOpen) {
+            await this._closeFilter();
+            this._flowItems = [...this._flowItems, "filter-panel"];
+        }
     }
     /**
      * Fetch translations when the locale is updated
@@ -287,17 +299,15 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     async showMyReportsOnlyWatchHandler() {
         if (this._editableLayerIds) {
             await this._updateFeatures();
-            setTimeout(() => {
-                // refresh layer list when user is on layer list panel
-                if (this._flowItems[this._flowItems.length - 1] === "layer-list" && this._layerList) {
-                    void this._layerList.refresh();
-                }
-                if (this._featureList) {
-                    void this._featureList.refresh();
-                }
-            }, 50);
+            this.refreshLists();
         }
     }
+    /**
+     * Called each time the filterByMapExtent prop is changed
+     */
+    filterByMapExtentChangeWatchHandler() {
+        this.refreshLists();
+    }
     /**
      * Called each time the layerExpressions prop is changed
     */
@@ -369,7 +379,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     * Update the filter list's initial definition expressions when the filter list component is available
     */
     componentWillRender() {
-        if (this._flowItems.includes('filter-panel')) {
+        if (this._flowItems.includes('filter-panel') || this._filterOpen) {
             void this._filterList?.updateInitDefExpressions({ initDefExpressions: this._initDefExpressions });
         }
     }
@@ -378,7 +388,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: 'b97883be773d948b75e6df1be453cde018a0dba1' }, this._reportSubmitted && h("calcite-alert", { key: '5fd17c13a0d4dc3c7fed1bb253e9196b83c20e1d', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '5c7a00cb3eaaaeb3a0501324c10b407746ecca46', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: 'd83c690d60c2e6f12a5ec356c5ae67185edc6a1e', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '9cbac1cf8698f1f918004764e4e43c25af766e4a', slot: "title" }, this._translations.error), h("div", { key: 'b4dbe07b4af7ab6c543596c6a3374b785fac4c7e', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: 'cde843955c6538ea857a0a187c995062efd777e7', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '86e3d820aa0d4362c07470bd60d8f0efd0614bc2', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: 'a0bdeec1bb3a33f3bfa938c0a1f4e631c6a76399', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: 'b161d8e42a078d961ec4e42888d26f4314e9d5a4', slot: "title" }, this._translations.error), h("div", { key: 'cf3908f91448dfbb7cf6ec78b413eaa3327372be', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '42e2c8abaf43d6a587729229347efb2836827b98' }, h("calcite-shell", { key: '9e3174a699c37be8f20f4609f52c94ecb95d599f', "content-behind": true }, this._getReporter()))));
+        return (h(Host, { key: 'e9a4807ce84ddb099c3f25f562b03c178b69d91f' }, this._reportSubmitted && h("calcite-alert", { key: '4eb1a05f3bdb3abb65d34a59e7452b1cbb2aa011', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: 'b6b1cb628e7a6695230e11c0320a60eb7ac8c77e', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '3e5b98d155cb91950989229c54b58166d4072ba9', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '3ec867d92d44fc808415dbcf11cc0d4f64410ca1', slot: "title" }, this._translations.error), h("div", { key: 'b08a281438504605b23236622decfc632f5e980b', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '700ce59b43b4bcf5b3b5f269a05b7916aab03119', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: 'e3a853126b97fe73275b2908b7735dae0d8bacc4', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: 'af903aa26896dfbbe1deeac12aee1a6777e2c352', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: 'c88a104fbe9f0266c77c25a7067cfd4836e4ac81', slot: "title" }, this._translations.error), h("div", { key: 'a34b0543199de865a65ae426e49aa3cd13128126', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '0bf41b76dcd6e0c6c26b7e4ac03b2a6a100aacfb' }, h("calcite-shell", { key: '0e7c0a7f15a15677c73ea8a087f77332b34583cc', "content-behind": true }, this._getReporter())), this.isMobile && this.filterModal()));
     }
     //--------------------------------------------------------------------------
     //
@@ -465,6 +475,36 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             ? h("calcite-flow", null, renderLists?.length > 0 && renderLists)
             : h("calcite-loader", { label: "", scale: "m" })));
     }
+    /**
+     * Show filter component in modal
+     * @returns node to interact with any configured filters for the current layer
+     */
+    filterModal() {
+        //get layer expression for current selected layer
+        const currentLayersExpressions = this.layerExpressions ? this.layerExpressions.filter((exp) => exp.id === this._selectedLayerId) : [];
+        return (currentLayersExpressions.length > 0 &&
+            h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: () => void this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._currentLayerExpressions, onFilterListReset: () => {
+                    this._filterActive = false;
+                    void this._featureList.refresh();
+                }, onFilterUpdate: () => this._handleFilterUpdate(this._filterList?.filterCount > 0), ref: (el) => this._filterList = el, resetBtn: true, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
+    }
+    /**
+     * When true the filter modal will be displayed
+     * @protected
+     */
+    _toggleFilter() {
+        this._filterOpen = !this._filterOpen;
+    }
+    /**
+     * Close the filter modal
+     * @protected
+     */
+    async _closeFilter() {
+        this._filterOpen = false;
+        if (this._filterList != null) {
+            this._currentLayerExpressions = await this._filterList.getCurrentLayerExpressions();
+        }
+    }
     /**
      * On sort option click update the sort field and sort order
      * @param sortField sort field
@@ -485,8 +525,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     _toggleSort() {
         const canSortByVotes = this.reportingOptions && this.reportingOptions[this._selectedLayerId] &&
             this.reportingOptions[this._selectedLayerId].like && this.reportingOptions[this._selectedLayerId].likeField;
-        return (h("calcite-popover", { autoClose: true, label: "", offsetDistance: 0, placement: this.isMobile ? "leading-start" : "bottom-start", pointerDisabled: true, referenceElement: "sort-popover" }, h("calcite-list", { label: "", "selection-mode": "single" }, h("calcite-list-item", { label: this._translations.sortNewest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "desc", "sortNewest"); }, selected: this._updatedSortOption === "sortNewest", value: "sortNewest" }), h("calcite-list-item", { label: this._translations.sortOldest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "asc", "sortOldest"); }, selected: this._updatedSortOption === "sortOldest", value: "sortOldest" }), canSortByVotes &&
-            h(Fragment, null, h("calcite-list-item", { label: this._translations.sortHighestVoted, onCalciteListItemSelect: () => { void this.sortOptionClick(this.reportingOptions[this._selectedLayerId].likeField, "desc", "sortHighestVoted"); }, selected: this._updatedSortOption === "sortHighestVoted", value: "sortHighestVoted" }), h("calcite-list-item", { label: this._translations.sortLowestVoted, onCalciteListItemSelect: () => { void this.sortOptionClick(this.reportingOptions[this._selectedLayerId].likeField, "asc", "sortLowestVoted"); }, selected: this._updatedSortOption === "sortLowestVoted", value: "sortLowestVoted" })))));
+        return (h("calcite-popover", { autoClose: true, label: "", offsetDistance: 0, placement: this.isMobile ? "leading-start" : "bottom-start", pointerDisabled: true, referenceElement: "sort-popover" }, h("calcite-list", { label: "", "selection-mode": "single-persist" }, h("calcite-list-item", { label: this._translations.sortNewest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "desc", "newest"); }, selected: this._updatedSortOption === "newest", value: "newest" }), h("calcite-list-item", { label: this._translations.sortOldest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "asc", "oldest"); }, selected: this._updatedSortOption === "oldest", value: "oldest" }), canSortByVotes &&
+            h(Fragment, null, h("calcite-list-item", { label: this._translations.sortHighestVoted, onCalciteListItemSelect: () => { void this.sortOptionClick(this.reportingOptions[this._selectedLayerId].likeField, "desc", "highestVoted"); }, selected: this._updatedSortOption === "highestVoted", value: "highestVoted" }), h("calcite-list-item", { label: this._translations.sortLowestVoted, onCalciteListItemSelect: () => { void this.sortOptionClick(this.reportingOptions[this._selectedLayerId].likeField, "asc", "lowestVoted"); }, selected: this._updatedSortOption === "lowestVoted", value: "lowestVoted" })))));
     }
     /**
      * Reset the filter
@@ -513,7 +553,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     getLayerListFlowItem() {
         return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader, selected: this._flowItems[this._flowItems.length - 1] === "layer-list" }, this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
-            h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", layers: this._editableLayerIds?.length > 0 ? this._editableLayerIds : this._layers, locale: this.locale, mapView: this.mapView, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
+            h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", filterByMapExtent: this.filterByMapExtent, layers: this._editableLayerIds?.length > 0 ? this._editableLayerIds : this._layers, locale: this.locale, mapView: this.mapView, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
     }
     /**
      * Get the layer list for creating a report
@@ -700,32 +740,36 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     async layerListLoaded(evt) {
-        const layersListed = evt.detail;
-        //consider only the layers listed in the layer-list component
-        const allMapLayers = await getAllLayers(this.mapView);
-        const reportingEnabledLayerIds = [];
-        this._validLayers = [];
-        this._nonVisibleValidLayers = [];
-        allMapLayers.forEach((eachLayer) => {
-            if (layersListed.includes(eachLayer.id)) {
-                this._validLayers.push(eachLayer);
-                if (!eachLayer.visible) {
-                    this._nonVisibleValidLayers.push(eachLayer);
-                }
-                //create list of reporting enabled layers
-                if (this._getLayersConfig(eachLayer.id)?.reporting && this._layerItemsHash[eachLayer.id] && this._layerItemsHash[eachLayer.id].supportsAdd) {
-                    reportingEnabledLayerIds.push(eachLayer.id);
+        // Check if user is present on the layer panel or if first component is feature list then only allow to store the non-reporting valid layers to avoid the feature visbility issue on map 
+        const presentOnLayerListPanel = this._layerList && this._flowItems[this._flowItems.length - 1] === "layer-list" || this._flowItems[0] === "feature-list";
+        if (presentOnLayerListPanel) {
+            const layersListed = evt.detail;
+            //consider only the layers listed in the layer-list component
+            const allMapLayers = await getAllLayers(this.mapView);
+            const reportingEnabledLayerIds = [];
+            this._validLayers = [];
+            this._nonVisibleValidLayers = [];
+            allMapLayers.forEach((eachLayer) => {
+                if (layersListed.includes(eachLayer.id)) {
+                    this._validLayers.push(eachLayer);
+                    if (!eachLayer.visible) {
+                        this._nonVisibleValidLayers.push(eachLayer);
+                    }
+                    //create list of reporting enabled layers
+                    if (this._getLayersConfig(eachLayer.id)?.reporting && this._layerItemsHash[eachLayer.id] && this._layerItemsHash[eachLayer.id].supportsAdd) {
+                        reportingEnabledLayerIds.push(eachLayer.id);
+                    }
                 }
+            });
+            //handleMap click on layer list loaded
+            this.handleMapClick();
+            //When we have any reporting layer then only show the create report button on layerList
+            this._hasValidLayers = reportingEnabledLayerIds.length > 0;
+            //navigate to the feature details if URL params found
+            if (!this._urlParamsLoaded) {
+                this._urlParamsLoaded = true;
+                await this.loadFeatureFromURLParams();
             }
-        });
-        //handleMap click on layer list loaded
-        this.handleMapClick();
-        //When we have any reporting layer then only show the create report button on layerList
-        this._hasValidLayers = reportingEnabledLayerIds.length > 0;
-        //navigate to the feature details if URL params found
-        if (!this._urlParamsLoaded) {
-            this._urlParamsLoaded = true;
-            await this.loadFeatureFromURLParams();
         }
     }
     /**
@@ -734,16 +778,27 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     async displayFeaturesList(evt) {
-        this._updatedSorting = {
-            field: '',
-            order: 'desc'
-        };
-        this._updatedSortOption = "sortNewest";
         await this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
+        void this.updateSortingOptions();
         void this.handleSelectedLayersFilter();
         this._flowItems = [...this._flowItems, "feature-list"];
         this._prevSelectedLayerId = this._selectedLayerId;
     }
+    /**
+     * Updates the sorting options based on the selected sort preference.
+     * @protected
+     */
+    updateSortingOptions() {
+        const sortingOption = this.sortOption === "" ? "newest" : this.sortOption;
+        const sortOrder = sortingOption === "oldest" || sortingOption === "lowestVoted" ? "asc" : "desc";
+        const likeField = this.reportingOptions?.[this._selectedLayerId]?.like ? this.reportingOptions?.[this._selectedLayerId]?.likeField : "";
+        const sortField = (sortingOption === "newest" || sortingOption === "oldest") ? this._selectedLayer.objectIdField : likeField;
+        this._updatedSorting = {
+            field: sortField,
+            order: sortOrder
+        };
+        this._updatedSortOption = !likeField && (sortingOption === "highestVoted" || sortingOption === "lowestVoted") ? "newest" : sortingOption;
+    }
     /**
      * On back from filter panel get the filter's init state
      * @protected
@@ -868,8 +923,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     getFeatureListFlowItem(layerId, layerName) {
         const canCreateReports = this._getLayersConfig(this._selectedLayerId)?.reporting && this._layerItemsHash[this._selectedLayerId].supportsAdd;
         const showFilterIcon = this._currentLayerExpressions?.length > 0;
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-list" }, this._toggleSort(), h("calcite-action", { icon: "sort-ascending-arrow", id: "sort-popover", slot: "header-actions-end", text: this._translations.sort, title: this._translations.sort }), showFilterIcon && h("calcite-action", { icon: "filter", indicator: this._filterActive, onClick: () => { this._flowItems = [...this._flowItems, "filter-panel"]; }, slot: "header-actions-end", text: this._translations.filter, title: this._translations.filter }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && canCreateReports &&
-            h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", highlightOnHover: true, locale: this.locale, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, ref: el => this._featureList = el, reportingOptions: this.reportingOptions, selectedLayerId: layerId, showFeatureSymbol: this.showFeatureSymbol, sortingInfo: this._updatedSorting }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: !this.isMobile && this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-list" }, this._toggleSort(), h("calcite-action", { icon: "sort-ascending-arrow", id: "sort-popover", slot: "header-actions-end", text: this._translations.sort, title: this._translations.sort }), showFilterIcon && h("calcite-action", { icon: "filter", indicator: this._filterActive, onClick: () => { this.isMobile ? this._toggleFilter() : this._flowItems = [...this._flowItems, "filter-panel"]; }, slot: "header-actions-end", text: this._translations.filter, title: this._translations.filter }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && canCreateReports &&
+            h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", filterByMapExtent: this.filterByMapExtent, highlightOnHover: true, locale: this.locale, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, ref: el => this._featureList = el, reportingOptions: this.reportingOptions, selectedLayerId: layerId, showFeatureSymbol: this.showFeatureSymbol, sortingInfo: this._updatedSorting }))));
     }
     /**
      * Returns the calcite-flow item for filter
@@ -877,7 +932,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     getFilterPanel() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName), loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromFilterPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "filter-panel" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", disabled: !this._filterActive, onClick: this.resetFilterList.bind(this), width: "full" }, this._translations.resetFilter), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromFilterPanel.bind(this), width: "full" }, this._translations.close))), h("calcite-panel", { "full-height": true }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtnOnClick: () => undefined, comboboxOverlayPositioning: "fixed", layerExpressions: this._currentLayerExpressions, onFilterListReset: () => void this._handleFilterListReset(), onFilterUpdate: () => void this._handleFilterUpdate(this._filterList.filterCount > 0), ref: (el) => this._filterList = el, resetBtn: false, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName), loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromFilterPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "filter-panel" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", disabled: !this._filterActive, onClick: this.resetFilterList.bind(this), width: "full" }, this._translations.resetFilter), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromFilterPanel.bind(this), width: "full" }, this._translations.close))), h("calcite-panel", { "full-height": true }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtnOnClick: () => undefined, comboboxOverlayPositioning: "fixed", layerExpressions: this._currentLayerExpressions, onFilterListReset: () => void this._handleFilterListReset(), onFilterUpdate: () => void this._handleFilterUpdate(this._filterList?.filterCount > 0), ref: (el) => this._filterList = el, resetBtn: false, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
     }
     /**
      * Returns the calcite-flow item for feature details
@@ -1135,6 +1190,22 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             return prev;
         }, []);
     }
+    /**
+     * Refreshes the layer and feature list
+     * @protected
+     */
+    refreshLists() {
+        // added setTimeout for when the value of prop is updated then refresh the lists
+        setTimeout(() => {
+            // refresh layer list when user is on layer list panel
+            if (this._layerList && this._flowItems[this._flowItems.length - 1] === "layer-list") {
+                void this._layerList.refresh();
+            }
+            if (this._featureList) {
+                void this._featureList.refresh();
+            }
+        }, 50);
+    }
     /**
      * updates the features for layer/feature list
      * @protected
@@ -1195,6 +1266,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         };
         await this.layerListLoaded(evt);
         await this.setSelectedLayer(this._validLayers[0].id, this._validLayers[0].title);
+        void this.updateSortingOptions();
         void this.handleSelectedLayersFilter();
     }
     /**
@@ -1368,6 +1440,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "mapView": ["mapViewWatchHandler"],
         "floorLevel": ["floorLevelWatchHandler"],
         "showMyReportsOnly": ["showMyReportsOnlyWatchHandler"],
+        "filterByMapExtent": ["filterByMapExtentChangeWatchHandler"],
         "layerExpressions": ["layerExpressionsWatchHandler"],
         "showFeatureSymbol": ["showFeatureSymbolWatchHandler"]
     }; }
@@ -1409,6 +1482,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "zoomToScale": [2, "zoom-to-scale"],
         "floorLevel": [1, "floor-level"],
         "showFullCommentTitle": [4, "show-full-comment-title"],
+        "filterByMapExtent": [4, "filter-by-map-extent"],
+        "sortOption": [1, "sort-option"],
         "_featureCreationFailedErrorMsg": [32],
         "_filterActive": [32],
         "_flowItems": [32],
@@ -1425,6 +1500,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "_updatedSortOption": [32],
         "_commentSubmitted": [32],
         "_addingCommentFailed": [32],
+        "_filterOpen": [32],
         "updateLayerExpressionsT9n": [64]
     }, undefined, {
         "isMobile": ["isMobileWatchHandler"],
@@ -1432,6 +1508,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "mapView": ["mapViewWatchHandler"],
         "floorLevel": ["floorLevelWatchHandler"],
         "showMyReportsOnly": ["showMyReportsOnlyWatchHandler"],
+        "filterByMapExtent": ["filterByMapExtentChangeWatchHandler"],
         "layerExpressions": ["layerExpressionsWatchHandler"],
         "showFeatureSymbol": ["showFeatureSymbolWatchHandler"]
     }]);

package/dist/components/edit-card2.js

@@ -241,6 +241,7 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
                 view: this.mapView,
                 layerInfos,
                 visibleElements: {
+                    flow: true,
                     snappingControls: false
                 },
                 container

package/dist/components/feature-list2.js

@@ -34,6 +34,7 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
         this.applyLayerViewFilter = false;
         this.reportingOptions = undefined;
         this.showFullTitle = true;
+        this.filterByMapExtent = false;
         this._featureItems = [];
         this._featuresCount = 0;
         this._isLoading = false;
@@ -62,6 +63,10 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
      * Symbol utils
      */
     symbolUtils;
+    /**
+     * esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
+     */
+    reactiveUtils;
     /**
      * IPopupUtils: To fetch the list label using popup titles
      */
@@ -74,6 +79,10 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
      * __esri.Handle: Highlight handle of the selections
      */
     _highlightHandle;
+    /**
+     * __esri.Handle: Handle for filter by map extent
+     */
+    _filterByMapExtentHandle;
     /**
      * __esri.Collection: Highlight options for the selected layer
      */
@@ -134,6 +143,17 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
     async whereClauseHandler() {
         await this.initializeFeatureItems();
     }
+    /**
+     * Watch for filterByMapExtent change and update the features list
+     */
+    async filterByMapExtentHandler(enabled) {
+        if (enabled) {
+            this.initializeMapExtentFilter();
+        }
+        else if (this._filterByMapExtentHandle) {
+            this._filterByMapExtentHandle.remove();
+        }
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -187,6 +207,9 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
             this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
             this._getFullTextSearchInfo();
         }
+        if (this.filterByMapExtent) {
+            this.initializeMapExtentFilter();
+        }
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -199,10 +222,10 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
      */
     render() {
         const showSearch = this._canShowFullTextSearch();
-        return (h("calcite-panel", { key: '56599be334eec65be00681d415db28917133b0c1', "full-height": true, "full-width": true }, showSearch &&
-            h("calcite-input", { key: '6de9873f6b7ab961dffe1334d2fc20b4322d8ea8', class: "search", clearable: true, icon: "search", onCalciteInputChange: this._searchTextChanged.bind(this), placeholder: this._searchPlaceHolder, title: '', type: "search" }), this._isLoading && h("calcite-loader", { key: '4189b0d6c2a85116d529f5b7844c1f2d41657350', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
-            h("calcite-notice", { key: '7f2e8276ad5345e21667b2dedc7e23f5c34672f5', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '63d44ac906c8d5584aac2cfbeec4cf0962d61abe', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: '5843f8d7ca994cb799a9be0ab2f43a8f1e407e9a', class: this.textSize === 'small' && !this.showFullTitle ? 'overflow-hidden' : '', label: "", ref: el => this._calciteList = el, "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            h("div", { key: '288364bc505fe6bce8b1260dce5173163a795330', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: 'e30e2d46a0005dd3e0d289deb4721b9155d4df29', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
+        return (h("calcite-panel", { key: '465989fd2befec544d5a49a355a70dc13b6962dc', "full-height": true, "full-width": true }, showSearch &&
+            h("calcite-input", { key: 'b09776016a6d854336b44bbfcb98eabbd50d1e95', class: "search", clearable: true, icon: "search", onCalciteInputChange: this._searchTextChanged.bind(this), placeholder: this._searchPlaceHolder, title: '', type: "search" }), this._isLoading && h("calcite-loader", { key: 'ac945c628e55c6dff43701c39d33c6a3a9ff8874', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
+            h("calcite-notice", { key: '00cb64af86c8cd8600cdf435f918131cc3e66a38', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '29b8bd85b3cb55c6bfb6adc282f8e69a7f9ea2ce', slot: "message" }, this.filterByMapExtent ? this._translations.featureErrorMsgInCurrentMapView : this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: '002f3171e10af68d189c71dbd9fa86d3106f13a2', class: this.textSize === 'small' && !this.showFullTitle ? 'overflow-hidden' : '', label: "", ref: el => this._calciteList = el, "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            h("div", { key: '3df744fa6f86db8c092e10dee631907516985fc5', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: '0221928e0266e4b57c7ce5a34aa8ec758864312f', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -215,14 +238,16 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
      * @protected
      */
     async initModules() {
-        const [Color, esriConfig, symbolUtils] = await loadModules([
+        const [Color, esriConfig, symbolUtils, reactiveUtils] = await loadModules([
             "esri/Color",
             "esri/config",
-            "esri/symbols/support/symbolUtils"
+            "esri/symbols/support/symbolUtils",
+            "esri/core/reactiveUtils"
         ]);
         this.Color = Color;
         this.esriConfig = esriConfig;
         this.symbolUtils = symbolUtils;
+        this.reactiveUtils = reactiveUtils;
     }
     /**
      * Return the where condition string considering the defined where clause and layer's definition expression
@@ -259,12 +284,23 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
             this._featureItems = await this.queryPage(0);
             const whereCondition = await this.getWhereCondition();
             const query = {
-                where: whereCondition
+                where: whereCondition,
+                geometry: this.filterByMapExtent ? this.mapView.extent : null
             };
             this._featuresCount = await this._selectedLayer.queryFeatureCount(query);
             this._isLoading = false;
         }
     }
+    /**
+     * Updates the feature list based on map view extent
+     */
+    initializeMapExtentFilter() {
+        this._filterByMapExtentHandle = this.reactiveUtils.when(() => this.mapView.stationary, () => {
+            void this.initializeFeatureItems();
+        }, {
+            initial: true
+        });
+    }
     /**
      * On page change get the next updated feature list
      * @param event page change event
@@ -463,7 +499,8 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
             outFields: ["*"],
             returnGeometry: true,
             where: whereCondition,
-            outSpatialReference: this.mapView.spatialReference.toJSON()
+            outSpatialReference: this.mapView.spatialReference.toJSON(),
+            geometry: this.filterByMapExtent ? this.mapView.extent : null
         };
         //sort only when sort field and order is valid
         if (sortField && sortOrder) {
@@ -599,8 +636,8 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
                     if (width > 30) {
                         imgOrSvgElm.setAttribute('width', '30');
                     }
-                    else if (width < 19) {
-                        imgOrSvgElm.setAttribute('width', '20');
+                    if (height > 30) {
+                        imgOrSvgElm.setAttribute('height', '30');
                     }
                     imgOrSvgElm.setAttribute('viewBox', `0 0 ${width} ${height}`);
                 }
@@ -621,7 +658,8 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
         "locale": ["localeWatchHandler"],
         "selectedLayerId": ["selectedLayerWatchHandler"],
         "sortingInfo": ["sortingInfoWatchHandler"],
-        "whereClause": ["whereClauseHandler"]
+        "whereClause": ["whereClauseHandler"],
+        "filterByMapExtent": ["filterByMapExtentHandler"]
     }; }
     static get style() { return FeatureListStyle0; }
 }, [0, "feature-list", {
@@ -642,6 +680,7 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
         "applyLayerViewFilter": [4, "apply-layer-view-filter"],
         "reportingOptions": [16],
         "showFullTitle": [4, "show-full-title"],
+        "filterByMapExtent": [4, "filter-by-map-extent"],
         "_featureItems": [32],
         "_featuresCount": [32],
         "_isLoading": [32],
@@ -653,7 +692,8 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
         "locale": ["localeWatchHandler"],
         "selectedLayerId": ["selectedLayerWatchHandler"],
         "sortingInfo": ["sortingInfoWatchHandler"],
-        "whereClause": ["whereClauseHandler"]
+        "whereClause": ["whereClauseHandler"],
+        "filterByMapExtent": ["filterByMapExtentHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/info-card2.js

@@ -262,8 +262,8 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         // 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 (h(Host, { key: '9f75eb2e7aba944474e85c34b2abe23982629558' }, h("calcite-shell", { key: '748f9e50cd3aa7a52dd7910b171c0d7f54d09203', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: 'feced4d4a66df36958644436acaa53ddabdfc02a', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: '3bb912c80d610a21a5e283c6bd19ab0c63023c45', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '479dcbda08f837b32bd19ed7f40856f081e92a6e', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
-            h("div", { key: 'dd78b02ba8506c391aada6c5233691ec9babcfbe', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: 'c5a807609c60151a433fa9c0055fbfdf20b2935f', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (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, h("calcite-tooltip", { key: 'a4cd4c77e982e23675ec9eaf08e2135de6c83b65', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '22533608996d1c87b9b04e339506ec01176379b0' }, this._translations.edit)), this.isMobile && deleteEnabled ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: '183ff7da57a06de8f5419edf5973f18b41c46097', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: '77e59229d1d516ccdc8f7c5be2f89a5ad9d5004b' }, h("calcite-button", { key: '4b6a6f1f85e9199e14d626ba66b6b319283d0c32', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: '7056c5cb3c790c804194f09f2586864a28dce5e1', placement: "top", "reference-element": "solutions-back" }, h("span", { key: '923fc5425a9faced6952a1b9acff9b7d0f3da286' }, this._translations.back))), h("calcite-action", { key: 'a34bfb4ae71a91373fd476e7b704a6a2f8f23157', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: '101a0fa592af65b540123c835e9031a18671ad8b', class: "pagination-count" }, this._count)), h("div", { key: 'c4f88f464a3091dfc77578470de4f42d05b9f5c7' }, h("calcite-button", { key: 'e4e35e539f0c7e01a31e0047db545d4d334ef2d8', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '40244ecf5566fde448b311272d2ee00d70bc531a', placement: "top", "reference-element": "solutions-next" }, h("span", { key: 'db01e2a2b9da9a80f9a25caf49bf8beb872e6ad9' }, this._translations.next))))), h("edit-card", { key: 'cfa193b01b67f7709ea6a491caa0c647c536e9e3', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: selectedFeatureIndex, graphics: graphics, locale: this.locale, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: '709fd6d681d32a03fcf5fba959e81a0153676e26', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: 'bbdd9cc98fcda8ffba294a4322f08468072f6aef', slot: "title" }, this._translations.editDisabled), h("div", { key: 'd07e32e9cd54cc82ff005e7e696e13e1b8bdaa4e', slot: "message" }, this._translations.enableEditing)))));
+        return (h(Host, { key: '7662ad49543f574bbcb58f2b9611efefc0420259' }, h("calcite-shell", { key: '10075ee9cdf4d9e8a6dee615755c53eaaece8c21', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: 'fc668f26163e1135d37a5dee1c08d72d7feee9d5', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: '73faf27901ae65feaf4faae8227aa21bfb1fb0a3', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: 'ced1edadc747dd7a087fed7b0a8e378def491381', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { key: '3f1ab07a2d197730d03497d0c5c5a2970e0f42ec', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: '946cb64983426ce95c8a209aa7ae59405124709f', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (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, h("calcite-tooltip", { key: '4123a740f077f6d203ae75338655a3e4f988b3dd', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '6968a12b2f41737cb221bc7ddbcab834f990fe3c' }, this._translations.edit)), this.isMobile && deleteEnabled ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: '31d228643a734df28880c009f8d9a989f07acedb', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: 'f1dd88d8e5359e8acfc3508890185f8769365ec8' }, h("calcite-button", { key: '86190bfd8442bcf327c8aa60272a4071dead2dbc', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: '6cf40e219e228547636a228d306dc6fc2929d186', placement: "top", "reference-element": "solutions-back" }, h("span", { key: '39a43c0568c3d9e71587d3e3a38970a97f16efa4' }, this._translations.back))), h("calcite-action", { key: '373330d9385477e7b8701bff969d93ccf992f8b6', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: 'badd298438061c4c61b5f5561d0883fd063d1434', class: "pagination-count" }, this._count)), h("div", { key: '501d8970243fa398721c9db04cff5491f59fe045' }, h("calcite-button", { key: '9118e14df5f7932e91e823a5bd35fe6292af1c07', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '29a22347603b730ab160023667bb1fc7654e69d4', placement: "top", "reference-element": "solutions-next" }, h("span", { key: '2404d5b018b0e6478a366d995c61e6ec40e9e486' }, this._translations.next))))), h("edit-card", { key: 'cad638e12cf79d7efbc8d4fa05da14ddd1140197', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: selectedFeatureIndex, graphics: graphics, locale: this.locale, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: 'b0ce00184f525e8156d282e5efd30962b018e226', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: '35f655f6dc9c274b07ccafe769e8e9af357862d1', slot: "title" }, this._translations.editDisabled), h("div", { key: 'e2b8de0fdb5eac8b37e5bb2a872fd390d9b42d29', slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -324,6 +324,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
                     visibleElements: {
                         actionBar: false,
                         closeButton: this.showCloseBtn,
+                        featureMenuHeading: false,
                         heading: !this.isMobile
                     }
                 });