@esri/solutions-components 0.11.21 → 0.11.23

package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js

@@ -37,6 +37,7 @@ export class CrowdsourceReporter {
         this.enableLogin = undefined;
         this.enableNewReports = undefined;
         this.enableSearch = true;
+        this.enableSnapping = false;
         this.enableZoom = true;
         this.isMobile = undefined;
         this.layerExpressions = [];
@@ -61,6 +62,8 @@ export class CrowdsourceReporter {
         this.zoomToScale = undefined;
         this.floorLevel = undefined;
         this.showFullCommentTitle = true;
+        this.filterByMapExtent = false;
+        this.sortOption = "newest";
         this._featureCreationFailedErrorMsg = undefined;
         this._filterActive = false;
         this._flowItems = [];
@@ -74,9 +77,10 @@ export class CrowdsourceReporter {
         this._translations = undefined;
         this._updatedProgressBarStatus = 25;
         this._updatedSorting = undefined;
-        this._updatedSortOption = "sortNewest";
+        this._updatedSortOption = "newest";
         this._commentSubmitted = false;
         this._addingCommentFailed = false;
+        this._filterOpen = false;
     }
     //--------------------------------------------------------------------------
     //
@@ -238,8 +242,17 @@ export class CrowdsourceReporter {
     /**
      * 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
@@ -289,17 +302,15 @@ export class CrowdsourceReporter {
     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
     */
@@ -371,7 +382,7 @@ export class CrowdsourceReporter {
     * 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 });
         }
     }
@@ -380,7 +391,7 @@ export class CrowdsourceReporter {
      */
     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: '11cf5f3a1674460c6ab9d2979d621417431e7130' }, this._reportSubmitted && h("calcite-alert", { key: 'ab40068608e235cbbeda293d62f501c1bcc2a123', "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: '91e436fa80c41457465f0816b66e205793f5a91d', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '6dbcd02898e6328f343af94985f069d8261dce1f', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'fc97e5f02b5241af076243b7fa8bb19f29c3dad6', slot: "title" }, this._translations.error), h("div", { key: '9583f6bd62f2a36c50e8309a353dd634300aa835', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '0d216fc75481b249ee63468b2c0145ed7f09d09e', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '700a788d9f0f12200bee0625576571a8c352a6a1', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '28ef0e56c42d3d366e33374368461eba9bb5e896', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '90e8757ee650b3f55c456d0fd56a45dac6df263e', slot: "title" }, this._translations.error), h("div", { key: 'b819d951be7340af388767b40e423a279b33ea85', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '167d0cb576feaaa77279110ab40df63e1a6146ae' }, h("calcite-shell", { key: 'b4d83790aa3a47a9c336821c54bc3e0fa1d9e308', "content-behind": true }, this._getReporter())), this.isMobile && this.filterModal()));
     }
     //--------------------------------------------------------------------------
     //
@@ -467,6 +478,36 @@ export class CrowdsourceReporter {
             ? 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
@@ -487,8 +528,8 @@ export class CrowdsourceReporter {
     _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
@@ -515,7 +556,7 @@ export class CrowdsourceReporter {
      */
     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
@@ -534,7 +575,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-create" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("create-feature", { customizeSubmit: true, enableSearch: true, floorLevel: this.floorLevel, formElements: this._formElements.find(elm => elm.id === this._selectedLayerId), isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onModeChanged: this.backFromCreateFeaturePanel.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId, submitNewReportsMessage: this.submitNewReportsMessage }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-create" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("create-feature", { customizeSubmit: true, enableSearch: true, enableSnapping: this.enableSnapping, floorLevel: this.floorLevel, formElements: this._formElements.find(elm => elm.id === this._selectedLayerId), isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onModeChanged: this.backFromCreateFeaturePanel.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId, submitNewReportsMessage: this.submitNewReportsMessage }))));
     }
     /**
      * Update the progress bar status when editor panel changes
@@ -702,32 +743,36 @@ export class CrowdsourceReporter {
      * @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();
         }
     }
     /**
@@ -736,16 +781,27 @@ export class CrowdsourceReporter {
      * @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
@@ -870,8 +926,8 @@ export class CrowdsourceReporter {
     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
@@ -879,7 +935,7 @@ export class CrowdsourceReporter {
      * @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
@@ -887,7 +943,7 @@ export class CrowdsourceReporter {
      */
     getFeatureDetailsFlowItem() {
         const showCommentBtn = this._getLayersConfig(this._selectedLayerId)?.comment && this._selectedLayer.relationships.length > 0 && this._relatedTable;
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-details" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "share-node", embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, removePopoverOffset: true, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, h("feature-details", { class: 'full-height', graphics: this._selectedFeature, layerItemsHash: this._layerItemsHash, locale: this.locale, mapView: this.mapView, onAddComment: this.showAddCommentsPanel.bind(this), onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLikeOrDislikeClicked: () => { void this._featureList.refresh(true); }, onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions, showFullCommentTitle: this.showFullCommentTitle, showUserImageInCommentsList: this.showUserImageInCommentsList }), showCommentBtn &&
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-details" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "share-node", embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, removePopoverOffset: true, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, h("feature-details", { class: 'full-height', enableSnapping: this.enableSnapping, graphics: this._selectedFeature, layerItemsHash: this._layerItemsHash, locale: this.locale, mapView: this.mapView, onAddComment: this.showAddCommentsPanel.bind(this), onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLikeOrDislikeClicked: () => { void this._featureList.refresh(true); }, onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions, showFullCommentTitle: this.showFullCommentTitle, showUserImageInCommentsList: this.showUserImageInCommentsList }), showCommentBtn &&
             h("calcite-button", { appearance: "solid", onClick: this.showAddCommentsPanel.bind(this), slot: "footer", width: "full" }, this.commentButtonText || this._translations.comment))));
     }
     /**
@@ -903,14 +959,14 @@ export class CrowdsourceReporter {
      * @returns Node
      */
     getCommentDetailsFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "comment-details" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedRelatedFeature, highlightEnabled: false, isLoading: false, isMobile: false, locale: this.locale, mapView: this.mapView, paginationEnabled: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "comment-details" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, enableSnapping: this.enableSnapping, graphics: this._selectedRelatedFeature, highlightEnabled: false, isLoading: false, isMobile: false, locale: this.locale, mapView: this.mapView, paginationEnabled: false }))));
     }
     /**
      * Returns the calcite-flow item for add comment
      * @returns Node
      */
     getAddCommentFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "add-comment" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), h("calcite-panel", null, h("create-related-feature", { customizeSubmit: true, locale: this.locale, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onFormReady: this.onFormReady.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "add-comment" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), h("calcite-panel", null, h("create-related-feature", { customizeSubmit: true, enableSnapping: this.enableSnapping, locale: this.locale, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onFormReady: this.onFormReady.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
     }
     /**
      * Sets the selected features and updates the first feature as the current selected feature
@@ -1137,6 +1193,22 @@ export class CrowdsourceReporter {
             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
@@ -1197,6 +1269,7 @@ export class CrowdsourceReporter {
         };
         await this.layerListLoaded(evt);
         await this.setSelectedLayer(this._validLayers[0].id, this._validLayers[0].title);
+        void this.updateSortingOptions();
         void this.handleSelectedLayersFilter();
     }
     /**
@@ -1608,6 +1681,26 @@ export class CrowdsourceReporter {
                 "reflect": false,
                 "defaultValue": "true"
             },
+            "enableSnapping": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true the snapping options will be exposed"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-snapping",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "enableZoom": {
                 "type": "boolean",
                 "mutable": false,
@@ -2096,6 +2189,46 @@ export class CrowdsourceReporter {
                 "attribute": "show-full-comment-title",
                 "reflect": false,
                 "defaultValue": "true"
+            },
+            "filterByMapExtent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: When true only the features from current extent will be shown"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "filter-by-map-extent",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "sortOption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: sorting option to show the feature list"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "sort-option",
+                "reflect": false,
+                "defaultValue": "\"newest\""
             }
         };
     }
@@ -2116,7 +2249,8 @@ export class CrowdsourceReporter {
             "_updatedSorting": {},
             "_updatedSortOption": {},
             "_commentSubmitted": {},
-            "_addingCommentFailed": {}
+            "_addingCommentFailed": {},
+            "_filterOpen": {}
         };
     }
     static get events() {
@@ -2184,6 +2318,9 @@ export class CrowdsourceReporter {
             }, {
                 "propName": "showMyReportsOnly",
                 "methodName": "showMyReportsOnlyWatchHandler"
+            }, {
+                "propName": "filterByMapExtent",
+                "methodName": "filterByMapExtentChangeWatchHandler"
             }, {
                 "propName": "layerExpressions",
                 "methodName": "layerExpressionsWatchHandler"

package/dist/collection/components/edit-card/edit-card.css

@@ -56,7 +56,7 @@
   background-color: var(--calcite-color-foreground-1) !important;
 }
 
-.esri-editor__panel-toolbar {
+.hide-editor-toolbar .esri-editor__panel-toolbar {
   display: none !important;
 }
 

package/dist/collection/components/edit-card/edit-card.js

@@ -25,11 +25,12 @@ import { getAllLayers } from "../../utils/mapViewUtils";
 export class EditCard {
     constructor() {
         this.enableEditGeometry = false;
+        this.enableSnapping = false;
+        this.graphicIndex = 0;
         this.graphics = undefined;
         this.locale = undefined;
         this.mapView = undefined;
         this.open = false;
-        this.graphicIndex = 0;
         this._editorLoading = false;
         this._translations = undefined;
     }
@@ -211,7 +212,7 @@ export class EditCard {
             !this.graphics[0].layer.editingEnabled : true;
         const tableNodeClass = this._editorLoading ? "display-none" : "position-absolute";
         const loadingClass = this._editorLoading ? "" : "display-none";
-        return (h(Host, { key: 'e181f65e7218ce0350de5dcab9049ff63a5d39c1' }, h("div", { key: '44bf2b5cf31c5acc7f65fb7ec50fd84e77c95470', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: '97119476aa2a992ccadc1d61119f2640d195e7b1', class: "position-absolute" }, h("div", { key: 'f429decea684a6a22db89de89da3755bdbff19cc', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '3ea908ef8dadd2f1c85bfac1b344f8b4441b8706', class: loadingClass, label: "", scale: "s" })))));
+        return (h(Host, { key: 'bf9a2cc632deb0cc203f6a2fa837008f8e809482' }, h("div", { key: 'fa2ad6208c2274fe2982b71502d52694e3838162', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: '98c1d2cb3dce8855b0c792328c893b6947e01f4c', class: "position-absolute" }, h("div", { key: 'ebf21d9145dabcc3b91a4fc44d3a3ae92a6ef5ea', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: 'd3da2a76b0dda07540ca6f65a2f671e825af211a', class: loadingClass, label: "", scale: "s" })))));
     }
     //--------------------------------------------------------------------------
     //
@@ -252,7 +253,8 @@ export class EditCard {
                 layerInfos,
                 visibleElements: {
                     flow: true,
-                    snappingControls: false
+                    settingsMenu: this.enableSnapping,
+                    snappingControls: this.enableSnapping,
                 },
                 container
             });
@@ -275,6 +277,9 @@ export class EditCard {
                     this.open = false;
                 }
             });
+            if (!this.enableSnapping) {
+                container.classList.add("hide-editor-toolbar");
+            }
             // had issues with destroy before adding like this
             this._editContainer.appendChild(container);
             this.editorInitialized.emit(this._editor);
@@ -349,6 +354,46 @@ export class EditCard {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "enableSnapping": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true the snapping options will be exposed"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "enable-snapping",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "graphicIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The index of the current graphic"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "graphic-index",
+                "reflect": false,
+                "defaultValue": "0"
+            },
             "graphics": {
                 "type": "unknown",
                 "mutable": true,
@@ -431,26 +476,6 @@ export class EditCard {
                 "attribute": "open",
                 "reflect": false,
                 "defaultValue": "false"
-            },
-            "graphicIndex": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The index of the current graphic"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "graphic-index",
-                "reflect": false,
-                "defaultValue": "0"
             }
         };
     }