@esri/solutions-components 0.8.8 → 0.8.10

package/dist/collection/collection-manifest.json

@@ -13,6 +13,7 @@
     "components/delete-button/delete-button.js",
     "components/edit-card/edit-card.js",
     "components/feature-comments/feature-comments.js",
+    "components/feature-details/feature-details.js",
     "components/feature-form-flow-item/feature-form-flow-item.js",
     "components/feature-list/feature-list.js",
     "components/features-flow-item/features-flow-item.js",

package/dist/collection/components/create-feature/create-feature.js

@@ -167,6 +167,7 @@ export class CreateFeature {
         //Add handle to watch featureTemplatesViewModel ready state and then start the creation
         const handle = this.reactiveUtils.watch(() => this._editor.viewModel.featureTemplatesViewModel.state, (state) => {
             if (state === 'ready') {
+                this.progressStatus.emit(0.5);
                 void this.startCreate();
             }
         });
@@ -190,6 +191,7 @@ export class CreateFeature {
             //once the feature template is selected handle the event for formSubmit and sketch complete
             //also, hide the headers and footer in the editor as we will be showing our own submit and cancel button
             this._editor.viewModel.featureTemplatesViewModel.on('select', () => {
+                this.progressStatus.emit(0.75);
                 setTimeout(() => {
                     //on form submit 
                     this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
@@ -197,6 +199,7 @@ export class CreateFeature {
                     this._editor.viewModel.sketchViewModel.on("create", (evt) => {
                         if (evt.state === "complete") {
                             this.showSearchWidget = false;
+                            this.progressStatus.emit(1);
                             this.drawComplete.emit();
                         }
                     });
@@ -516,6 +519,21 @@ export class CreateFeature {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "progressStatus",
+                "name": "progressStatus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when editor panel changes"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/crowdsource-manager/crowdsource-manager.css

@@ -186,3 +186,18 @@
 .border-bottom-width-0 {
   border-bottom-width: 0px;
 }
+
+.floating-container {
+  position: fixed;
+  width: 100px;
+  height: 10px;
+  bottom: 0;
+  right: 0;
+  margin: 100px 0px;
+}
+
+.floating-container .floating-button {
+  box-shadow: 0 10px 25px rgb(92 93 94 / 60%);
+  transform: translatey(5px);
+  transition: all 0.3s;
+}

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

@@ -64,7 +64,7 @@ export class CrowdsourceManager {
         this.enableSearch = true;
         this.enableShare = false;
         this.enableZoom = true;
-        this.hideMapOnLoad = undefined;
+        this.hideMapOnLoad = false;
         this.mapInfos = [];
         this.onlyShowUpdatableLayers = true;
         this.popupHeaderColor = undefined;
@@ -78,7 +78,7 @@ export class CrowdsourceManager {
         this.theme = "light";
         this.zoomAndScrollToSelected = false;
         this.zoomToScale = undefined;
-        this._expandPopup = false;
+        this._expandPopup = this.hideMapOnLoad;
         this._hideFooter = false;
         this._hideTable = false;
         this._isMobile = undefined;
@@ -102,16 +102,6 @@ export class CrowdsourceManager {
     enableZoomWatchHandler() {
         this._initMapZoom();
     }
-    //--------------------------------------------------------------------------
-    //
-    //  Methods (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
-    //  Events (public)
-    //
-    //--------------------------------------------------------------------------
     /**
      * Listen for changes in feature selection and show or hide the map, popup, and table
      */
@@ -158,7 +148,6 @@ export class CrowdsourceManager {
     async beforeMapChanged() {
         if (this._expandPopup) {
             this._shouldSetMapView = true;
-            this._expandPopup = false;
         }
     }
     /**
@@ -171,6 +160,12 @@ export class CrowdsourceManager {
             this._layer = layer;
         });
     }
+    /**
+     * Update the state expandPopup when mapInfoChange event occurs
+     */
+    async mapInfoChange() {
+        this._expandPopup = this.hideMapOnLoad;
+    }
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -310,7 +305,14 @@ export class CrowdsourceManager {
      */
     _getBody(layoutMode, panelOpen, hideTable) {
         const contentClass = layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
-        return (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideTable), this._getTable(layoutMode, panelOpen, hideTable))));
+        const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
+        return (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideTable), this._getTable(layoutMode, panelOpen, hideTable)), h("div", { class: "floating-container", onClick: this.infoButtonClick.bind(this) }, h("calcite-button", { appearance: "solid", class: `floating-button ${themeClass}`, "icon-start": "information-letter", kind: "neutral", label: "", round: true, scale: "l", "split-child": "primary", width: "auto" }))));
+    }
+    /**
+     * Emit the event when info button clicked
+     */
+    infoButtonClick() {
+        this.infoIconButtonClick.emit();
     }
     /**
      * Get the map and card nodes based for the current layout options
@@ -356,7 +358,12 @@ export class CrowdsourceManager {
         const headerClass = this._isMobile ? "display-none height-0" : "";
         const headerTheme = !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
         const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
-        return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}` }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
+        return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}`, style: {
+                '--calcite-color-foreground-1': this.popupHeaderColor,
+                '--calcite-color-foreground-2': this.popupHeaderHoverColor,
+                '--calcite-color-text-3': this.popupHeaderHoverTextColor,
+                '--calcite-color-text-2': this.popupHeaderTextColor, /* font color to apply to the popup header */
+            } }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
     }
     /**
      * Toggle the popup information
@@ -888,7 +895,8 @@ export class CrowdsourceManager {
                     "text": "boolean: when true the map will be hidden on load"
                 },
                 "attribute": "hide-map-on-load",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             },
             "mapInfos": {
                 "type": "unknown",
@@ -1148,6 +1156,24 @@ export class CrowdsourceManager {
             "_tableOnly": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "infoIconButtonClick",
+                "name": "infoIconButtonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when a info button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
@@ -1198,6 +1224,12 @@ export class CrowdsourceManager {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "mapInfoChange",
+                "method": "mapInfoChange",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }];
     }
 }

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

@@ -49,6 +49,10 @@
   width: calc(100% - 20px);
 }
 
+.progress-bar {
+  padding: 12px;
+}
+
 .footer-top-button {
   padding-bottom: 7px;
 }
@@ -57,6 +61,18 @@
   height: 35px;
 }
 
+.feature-pagination {
+  align-items: center;
+  margin: 5% 124%;
+  display: flex;
+}
+
+.pagination-count {
+  width: 32px;
+  color: var(--calcite-color-brand);
+  border-bottom: 1px solid var(--calcite-color-brand);
+}
+
 .report-submitted-msg {
   position: absolute;
   z-index: 1000;

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

@@ -34,7 +34,6 @@ export class CrowdsourceReporter {
         this.enableComments = undefined;
         this.enableLogin = undefined;
         this.enableNewReports = undefined;
-        this.layers = undefined;
         this.loginTitle = undefined;
         this.mapView = undefined;
         this.layerId = undefined;
@@ -54,6 +53,7 @@ export class CrowdsourceReporter {
         this.theme = "light";
         this.enableZoom = true;
         this.zoomToScale = undefined;
+        this.layerExpressions = undefined;
         this._mapInfo = undefined;
         this._flowItems = [];
         this._sidePanelCollapsed = false;
@@ -62,7 +62,11 @@ export class CrowdsourceReporter {
         this._selectedLayerName = undefined;
         this._reportSubmitted = false;
         this._showSubmitCancelButton = false;
+        this._loadingFeatureDetails = undefined;
         this._featureCreationFailedErrorMsg = undefined;
+        this._updatedProgressBarStatus = 0.25;
+        this._filterOpen = false;
+        this._filterActive = false;
     }
     //--------------------------------------------------------------------------
     //
@@ -83,6 +87,18 @@ export class CrowdsourceReporter {
             await this.setMapView();
         });
     }
+    /**
+     * On Feature details change update the Layer title and the current selected layer id
+     * @param evt Event hold the details of current feature graphic in the info-card
+     */
+    async selectionChanged(evt) {
+        void this.updatingFeatureDetails(true);
+        this.setCurrentFeature(evt.detail.selectedFeature[0]);
+        void this.highlightOnMap(evt.detail.selectedFeature[0]);
+        this.selectedFeatureIndex = evt.detail.selectedFeatureIndex;
+        //update the feature details to reflect the like dislike values 
+        await this._featureDetails.refresh(evt.detail.selectedFeature[0]);
+    }
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -99,6 +115,10 @@ export class CrowdsourceReporter {
         await this._initModules();
         await this._getTranslations();
         await ((_a = this.mapView) === null || _a === void 0 ? void 0 : _a.when(async () => {
+            //set configured reporting layers array
+            this.layers = this.reportingOptions ? Object.keys(this.reportingOptions).filter((layerId) => {
+                return this.reportingOptions[layerId].reporting;
+            }) : [];
             await this.setMapView();
         }));
     }
@@ -107,7 +127,7 @@ export class CrowdsourceReporter {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, null, this._reportSubmitted && h("calcite-alert", { "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this._featureCreationFailedErrorMsg)), h("div", null, h("calcite-shell", { "content-behind": true }, this._getReporter()))));
+        return (h(Host, null, this._reportSubmitted && h("calcite-alert", { "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this._featureCreationFailedErrorMsg)), h("div", null, h("calcite-shell", { "content-behind": true }, this._getReporter())), this.filterModal()));
     }
     //--------------------------------------------------------------------------
     //
@@ -171,6 +191,54 @@ export class CrowdsourceReporter {
             ? h("calcite-flow", null, (renderLists === null || renderLists === void 0 ? void 0 : 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() {
+        var _a, _b;
+        //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" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filterLayerTitle) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", this._selectedLayerName)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: currentLayersExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
+    }
+    /**
+     * Close the filter modal
+     * @protected
+     */
+    _closeFilter() {
+        if (this._filterOpen) {
+            this._filterOpen = false;
+        }
+    }
+    /**
+     * When true the filter modal will be displayed
+     * @protected
+     */
+    _toggleFilter() {
+        this._filterOpen = !this._filterOpen;
+    }
+    /**
+     * Reset the filter active prop
+     * @protected
+     */
+    _handleFilterListReset() {
+        //on reset filter list reset the filter active state
+        this._filterActive = false;
+        //reset the features list to reflect the applied filters
+        void this._featureList.refresh();
+    }
+    /**
+     * Check if the layers definitionExpression has been modified
+     * @protected
+     */
+    _handleFilterUpdate() {
+        //if filter are applied the url params will be generated
+        //set the filter active state based on the length of applied filters
+        this._filterActive = this._filterList.urlParams.getAll('filter').length > 0;
+        //reset the features list to reflect the applied filters
+        void this._featureList.refresh();
+    }
     /**
      * Get the feature layer list
      * @returns the layer list items
@@ -187,7 +255,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     getChooseCategoryFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true, "full-width": true }, h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._noLayerToDisplayErrorMsg, onLayerSelect: this.navigateToCreateFeature.bind(this), showFeatureCount: false, showNextIcon: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._noLayerToDisplayErrorMsg, onLayerSelect: this.navigateToCreateFeature.bind(this), showFeatureCount: false, showNextIcon: false }))));
     }
     /**
      * Get Feature create form of the selected feature layer
@@ -195,7 +263,15 @@ export class CrowdsourceReporter {
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onSubmitButtonClick.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("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), h("create-feature", { customizeSubmit: true, mapView: this.mapView, onDrawComplete: this.onDrawComplete.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onSubmitButtonClick.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("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), h("create-feature", { customizeSubmit: true, mapView: this.mapView, onDrawComplete: this.onDrawComplete.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
+    }
+    /**
+     * Update the progress bar status when editor panel changes
+     * @param evt Event which has progress bar status
+     * @protected
+     */
+    updatedProgressStatus(evt) {
+        this._updatedProgressBarStatus = evt.detail;
     }
     /**
      * When drawing of incident location completed on map show the submit and cancel button
@@ -217,7 +293,7 @@ export class CrowdsourceReporter {
      */
     onSubmitButtonClick() {
         if (this._createFeature) {
-            this._createFeature.submit();
+            void this._createFeature.submit();
         }
     }
     /**
@@ -226,7 +302,7 @@ export class CrowdsourceReporter {
      */
     backFromCreateFeaturePanel() {
         if (this._createFeature) {
-            this._createFeature.close();
+            void this._createFeature.close();
         }
         this.backFromSelectedPanel();
     }
@@ -253,10 +329,10 @@ export class CrowdsourceReporter {
      */
     async navigateToHomePage() {
         if (this._createFeature) {
-            this._createFeature.close();
+            void this._createFeature.close();
         }
         if (this._layerList) {
-            this._layerList.refresh();
+            void this._layerList.refresh();
         }
         this.setSelectedFeatures([]);
         if (this._editableLayerIds.length === 1) {
@@ -324,6 +400,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     backFromSelectedPanel() {
+        this._updatedProgressBarStatus = 0.25;
         const updatedFlowItems = [...this._flowItems];
         updatedFlowItems.pop();
         this.clearHighlights();
@@ -350,6 +427,13 @@ export class CrowdsourceReporter {
         this.setSelectedFeatures([evt.detail]);
         this._flowItems = [...this._flowItems, "feature-details"];
     }
+    /**
+     * Show loading indicator while updating the feature details component
+     * @param isLoading is feature detail component loading
+     */
+    async updatingFeatureDetails(isLoading) {
+        this._loadingFeatureDetails = isLoading;
+    }
     /**
      * Get feature list of the selected feature layer
      * @param layerId Layer id
@@ -358,7 +442,10 @@ export class CrowdsourceReporter {
      * @protected
      */
     getFeatureListFlowItem(layerId, layerName) {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports &&
+        var _a;
+        const layerExpressions = (_a = this.layerExpressions) === null || _a === void 0 ? void 0 : _a.filter((exp) => exp.id === this._selectedLayerId);
+        const showFilterIcon = layerExpressions.length > 0;
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, showFilterIcon && h("calcite-action", { icon: "filter", indicator: this._filterActive, onClick: this._toggleFilter.bind(this), slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports &&
             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", { class: "height-full", highlightOnHover: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, ref: el => this._featureList = el, selectedLayerId: layerId }))));
     }
     /**
@@ -366,7 +453,15 @@ export class CrowdsourceReporter {
      * @returns Node
      */
     getFeatureDetailsFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedFeature, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, onSelectionChanged: this.featureDetailsChanged.bind(this), zoomAndScrollToSelected: true }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._loadingFeatureDetails, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), h("calcite-panel", null, this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("feature-details", { class: 'full-height', graphics: this._selectedFeature, mapView: this.mapView, onLoadingStatus: (evt) => { void this.updatingFeatureDetails(evt.detail); }, ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions }))));
+    }
+    /**
+     * Returns the pagination for the multiple features
+     * Create pagination to avoid the overlap of like, dislike and comment section
+     * @returns Node
+     */
+    getFeaturesPagination() {
+        return (h("div", { class: "feature-pagination", slot: "header-actions-start" }, h("div", null, h("calcite-button", { appearance: 'transparent', disabled: false, iconStart: "chevron-left", id: "solutions-back", onClick: () => void this._featureDetails.back(), scale: "s", width: "full" }), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("calcite-button", { appearance: 'transparent', class: 'pagination-action', onClick: () => void this._featureDetails.toggleListView(), scale: "s" }, h("span", { class: "pagination-count" }, this._getCount())), h("div", null, h("calcite-button", { appearance: "transparent", disabled: false, iconStart: "chevron-right", id: "solutions-next", onClick: () => void this._featureDetails.next(), scale: "s", width: "full" }), h("calcite-tooltip", { placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next)))));
     }
     /**
      * Sets the selected features and updates the first feature as the current selected feature
@@ -394,14 +489,6 @@ export class CrowdsourceReporter {
         }
         this._updateShareURL();
     }
-    /**
-     * On Feature details change update the Layer title and the current selected layer id
-     * @param evt Event hold the details of current feature graphic in the info-card
-     */
-    featureDetailsChanged(evt) {
-        this.setCurrentFeature(evt.detail[0]);
-        void this.highlightOnMap(evt.detail[0]);
-    }
     /**
      * Highlights the feature on map
      * @param selectedFeature Graphic currently shown in feature details
@@ -414,8 +501,9 @@ export class CrowdsourceReporter {
             const selectedLayerView = await getFeatureLayerView(this.mapView, selectedFeature.layer.id);
             // remove previous highlight options (if any) to highlight the feature by default color
             selectedLayerView.highlightOptions = null;
-            this._highlightHandle = await highlightFeatures([selectedFeature.getObjectId()], selectedLayerView, this.mapView, true);
+            this._highlightHandle = await highlightFeatures([selectedFeature.getObjectId()], selectedLayerView, this.mapView, true, this.zoomToScale);
         }
+        void this.updatingFeatureDetails(false);
     }
     /**
      * Clears the highlight
@@ -521,6 +609,19 @@ export class CrowdsourceReporter {
             }
         }
     }
+    /**
+   * Get the current index of total string
+   *
+   * @returns the index of total string
+   * @protected
+   */
+    _getCount() {
+        const index = (this.selectedFeatureIndex + 1).toString();
+        const total = this._selectedFeature.length.toString();
+        return this._translations.indexOfTotal
+            .replace("{{index}}", index)
+            .replace("{{total}}", total);
+    }
     /**
      * Fetches the component's translations
      * @returns Promise when complete
@@ -769,21 +870,6 @@ export class CrowdsourceReporter {
                 "attribute": "enable-new-reports",
                 "reflect": false
             },
-            "layers": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "string[]",
-                    "resolved": "string[]",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "string[]: list of layer ids"
-                }
-            },
             "loginTitle": {
                 "type": "string",
                 "mutable": false,
@@ -1133,6 +1219,27 @@ export class CrowdsourceReporter {
                 },
                 "attribute": "zoom-to-scale",
                 "reflect": false
+            },
+            "layerExpressions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ILayerExpression[]",
+                    "resolved": "ILayerExpression[]",
+                    "references": {
+                        "ILayerExpression": {
+                            "location": "import",
+                            "path": "../../utils/interfaces",
+                            "id": "src/utils/interfaces.ts::ILayerExpression"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ILayerExpression[]: Array of layer expressions for layers (filter configuration)"
+                }
             }
         };
     }
@@ -1146,7 +1253,11 @@ export class CrowdsourceReporter {
             "_selectedLayerName": {},
             "_reportSubmitted": {},
             "_showSubmitCancelButton": {},
-            "_featureCreationFailedErrorMsg": {}
+            "_loadingFeatureDetails": {},
+            "_featureCreationFailedErrorMsg": {},
+            "_updatedProgressBarStatus": {},
+            "_filterOpen": {},
+            "_filterActive": {}
         };
     }
     static get events() {
@@ -1177,4 +1288,13 @@ export class CrowdsourceReporter {
                 "methodName": "mapViewWatchHandler"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "selectionChanged",
+                "method": "selectionChanged",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/feature-details/feature-details.css

@@ -0,0 +1,18 @@
+:host {
+  display: block;
+}
+
+.buttons{
+  align-items: center;
+  background-color: white;
+  display: flex;
+  padding: 10px 0 10px 15px;
+  border-block-start: 1px solid var(--calcite-color-border-3);
+  border-block-end: 1px solid var(--calcite-color-border-3);
+}
+
+.comment-btn{
+  display: flex;
+  gap: 5px;
+  width: 35px;
+}