@esri/solutions-components 0.11.21 → 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/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/layer-list2.js

@@ -6,6 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 import { d as getMapLayerHash, a as getAllLayers, c as getFeatureLayerView } from './mapViewUtils.js';
 import { f as formatNumber, g as getLocaleComponentStrings } from './locale.js';
+import { e as esriLoader } from './esri-loader.js';
 
 const layerListCss = ":host{display:block}.error-msg{padding:10px}.layer-name{font-weight:500;word-break:break-word}.feature-count{padding:0 10px}";
 const LayerListStyle0 = layerListCss;
@@ -22,6 +23,7 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
         this.showFeatureCount = true;
         this.showNextIcon = false;
         this.applyLayerViewFilter = false;
+        this.filterByMapExtent = false;
         this._noLayersToDisplay = false;
         this._mapLayerIds = [];
         this._isLoading = false;
@@ -37,6 +39,14 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
      * ILayerItemHash: id/name lookup
      */
     _layerItemsHash;
+    /**
+     * esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
+     */
+    reactiveUtils;
+    /**
+     * __esri.Handle: Handle for filter by map extent
+     */
+    _filterByMapExtentHandle;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -50,6 +60,17 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
         this.el.lang = this.locale;
         await this._getTranslations();
     }
+    /**
+     * Watch for filterByMapExtent change and update the layer list
+     */
+    filterByMapExtentWatchHandler(enabled) {
+        if (enabled) {
+            this.initializeMapExtentFilter();
+        }
+        else if (this._filterByMapExtentHandle) {
+            this._filterByMapExtentHandle.remove();
+        }
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -86,7 +107,11 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
      * @returns Promise when complete
      */
     async componentWillLoad() {
+        await this.initModules();
         await this._getTranslations();
+        if (this.filterByMapExtent) {
+            this.initializeMapExtentFilter();
+        }
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -98,15 +123,37 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
      * Renders the component.
      */
     render() {
-        return (h(Fragment, { key: 'a151c8fd65c50aacb23dcd0c858e52c0c7cd7e5e' }, this._isLoading && h("calcite-loader", { key: '544a134bccc29048ca80b996844cc944bcd97a24', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
-            h("calcite-notice", { key: '7557f91c8c3349c120c043ea59458b4c834dce2e', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: 'ea8b20f8c7da5053641cfad56e3395ae3c6286f5', slot: "title" }, this._translations.error), h("div", { key: '38aaed7b456aba0b1dd70183be03e9133834dfb4', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
-            h("calcite-list", { key: '547b0681145fd8d8663b786472be9e5161cbd693', label: "", "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
+        return (h(Fragment, { key: 'ac83dce884ea72ee461cc628efb51bce08cf4ce5' }, this._isLoading && h("calcite-loader", { key: '77d15458f7a081acdae63f26ffaf7b2a5ca143ec', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
+            h("calcite-notice", { key: 'd48169628cdaf271a1263f1ef3218a98e64897f1', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { key: 'e5568829b5c90524f0d9313e4812d30837609db2', slot: "title" }, this._translations.error), h("div", { key: '13f04655936656439c1119c56a0f7f919994f402', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
+            h("calcite-list", { key: 'b20eeb9052c5f75a2bf798e797ec928d37729484', label: "", "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------
     //
     //  Functions (protected)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Load esri javascript api modules
+     * @returns Promise resolving when function is done
+     * @protected
+     */
+    async initModules() {
+        const [reactiveUtils] = await esriLoader.exports.loadModules([
+            "esri/core/reactiveUtils"
+        ]);
+        this.reactiveUtils = reactiveUtils;
+    }
+    /**
+     * Updates the layer list based on map view extent
+     * @protected
+     */
+    initializeMapExtentFilter() {
+        this._filterByMapExtentHandle = this.reactiveUtils.when(() => this.mapView.stationary, () => {
+            void this.setLayers();
+        }, {
+            initial: true
+        });
+    }
     /**
      * Fetch the ids of the layers from the map
      * @returns Promise when the operation has completed
@@ -143,6 +190,7 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
                             q.where = q.where ? q.where + ' AND ' + featureLayerView.filter.where : featureLayerView.filter.where;
                         }
                     }
+                    q.geometry = this.filterByMapExtent ? this.mapView.extent : null;
                     const result = eachLayer.queryFeatureCount(q);
                     def.push(result);
                     void result.then(async (resCount) => {
@@ -227,7 +275,8 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
         this._translations = messages[0];
     }
     static get watchers() { return {
-        "locale": ["localeWatchHandler"]
+        "locale": ["localeWatchHandler"],
+        "filterByMapExtent": ["filterByMapExtentWatchHandler"]
     }; }
     static get style() { return LayerListStyle0; }
 }, [0, "layer-list", {
@@ -237,13 +286,15 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
         "showFeatureCount": [4, "show-feature-count"],
         "showNextIcon": [4, "show-next-icon"],
         "applyLayerViewFilter": [4, "apply-layer-view-filter"],
+        "filterByMapExtent": [4, "filter-by-map-extent"],
         "_noLayersToDisplay": [32],
         "_mapLayerIds": [32],
         "_isLoading": [32],
         "_translations": [32],
         "refresh": [64]
     }, undefined, {
-        "locale": ["localeWatchHandler"]
+        "locale": ["localeWatchHandler"],
+        "filterByMapExtent": ["filterByMapExtentWatchHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {