@esri/solutions-components 0.8.7 → 0.8.9

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.js

@@ -67,6 +67,10 @@ export class CrowdsourceManager {
         this.hideMapOnLoad = undefined;
         this.mapInfos = [];
         this.onlyShowUpdatableLayers = true;
+        this.popupHeaderColor = undefined;
+        this.popupHeaderHoverColor = undefined;
+        this.popupHeaderHoverTextColor = undefined;
+        this.popupHeaderTextColor = undefined;
         this.searchConfiguration = undefined;
         this.shareIncludeEmbed = undefined;
         this.shareIncludeSocial = undefined;
@@ -926,6 +930,74 @@ export class CrowdsourceManager {
                 "reflect": false,
                 "defaultValue": "true"
             },
+            "popupHeaderColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: The background color to apply to the popup header"
+                },
+                "attribute": "popup-header-color",
+                "reflect": false
+            },
+            "popupHeaderHoverColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: The color that will be displayed on hover when expanding the popup header"
+                },
+                "attribute": "popup-header-hover-color",
+                "reflect": false
+            },
+            "popupHeaderHoverTextColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: The font color that will be displayed on hover when expanding the popup header"
+                },
+                "attribute": "popup-header-hover-text-color",
+                "reflect": false
+            },
+            "popupHeaderTextColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: The font color to apply to the popup header"
+                },
+                "attribute": "popup-header-text-color",
+                "reflect": false
+            },
             "searchConfiguration": {
                 "type": "unknown",
                 "mutable": 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,15 +34,12 @@ export class CrowdsourceReporter {
         this.enableComments = undefined;
         this.enableLogin = undefined;
         this.enableNewReports = undefined;
-        this.layers = undefined;
         this.loginTitle = undefined;
         this.mapView = undefined;
         this.layerId = undefined;
         this.objectId = undefined;
         this.center = undefined;
         this.level = undefined;
-        this.popupHeaderHoverColor = undefined;
-        this.popupHeaderColor = undefined;
         this.reportButtonText = undefined;
         this.reportsHeader = undefined;
         this.reportingOptions = undefined;
@@ -56,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;
@@ -64,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;
     }
     //--------------------------------------------------------------------------
     //
@@ -85,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)
@@ -101,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();
         }));
     }
@@ -109,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()));
     }
     //--------------------------------------------------------------------------
     //
@@ -173,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
@@ -189,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
@@ -197,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
@@ -219,7 +293,7 @@ export class CrowdsourceReporter {
      */
     onSubmitButtonClick() {
         if (this._createFeature) {
-            this._createFeature.submit();
+            void this._createFeature.submit();
         }
     }
     /**
@@ -228,7 +302,7 @@ export class CrowdsourceReporter {
      */
     backFromCreateFeaturePanel() {
         if (this._createFeature) {
-            this._createFeature.close();
+            void this._createFeature.close();
         }
         this.backFromSelectedPanel();
     }
@@ -255,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) {
@@ -326,6 +400,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     backFromSelectedPanel() {
+        this._updatedProgressBarStatus = 0.25;
         const updatedFlowItems = [...this._flowItems];
         updatedFlowItems.pop();
         this.clearHighlights();
@@ -352,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
@@ -360,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 }))));
     }
     /**
@@ -368,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
@@ -396,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
@@ -416,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
@@ -523,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
@@ -771,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,
@@ -891,40 +975,6 @@ export class CrowdsourceReporter {
                 "attribute": "level",
                 "reflect": false
             },
-            "popupHeaderHoverColor": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "string: The color that will be displayed on hover when expanding the popup header"
-                },
-                "attribute": "popup-header-hover-color",
-                "reflect": false
-            },
-            "popupHeaderColor": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "string: The background color to apply to the popup header"
-                },
-                "attribute": "popup-header-color",
-                "reflect": false
-            },
             "reportButtonText": {
                 "type": "string",
                 "mutable": false,
@@ -1169,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)"
+                }
             }
         };
     }
@@ -1182,7 +1253,11 @@ export class CrowdsourceReporter {
             "_selectedLayerName": {},
             "_reportSubmitted": {},
             "_showSubmitCancelButton": {},
-            "_featureCreationFailedErrorMsg": {}
+            "_loadingFeatureDetails": {},
+            "_featureCreationFailedErrorMsg": {},
+            "_updatedProgressBarStatus": {},
+            "_filterOpen": {},
+            "_filterActive": {}
         };
     }
     static get events() {
@@ -1213,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;
+}