@esri/solutions-components 0.8.8 → 0.8.10

package/dist/components/crowdsource-reporter.js

@@ -8,39 +8,53 @@ import { g as getLocaleComponentStrings } from './locale.js';
 import { l as loadModules } from './loadModules.js';
 import { a as getAllLayers, e as getFeatureLayerView, h as highlightFeatures, c as getMapLayerHash, g as getLayerOrTable } from './mapViewUtils.js';
 import { q as queryFeaturesByID } from './queryUtils.js';
-import { d as defineCustomElement$w } from './action.js';
-import { d as defineCustomElement$v } from './action-menu.js';
-import { d as defineCustomElement$u } from './alert.js';
-import { d as defineCustomElement$t } from './button.js';
-import { d as defineCustomElement$s } from './chip.js';
-import { d as defineCustomElement$r } from './filter2.js';
-import { d as defineCustomElement$q } from './flow.js';
-import { d as defineCustomElement$p } from './flow-item.js';
-import { d as defineCustomElement$o } from './handle.js';
-import { d as defineCustomElement$n } from './icon.js';
-import { d as defineCustomElement$m } from './input.js';
-import { d as defineCustomElement$l } from './list.js';
-import { d as defineCustomElement$k } from './list-item.js';
-import { d as defineCustomElement$j } from './loader.js';
-import { d as defineCustomElement$i } from './modal.js';
-import { d as defineCustomElement$h } from './notice.js';
-import { d as defineCustomElement$g } from './pagination.js';
-import { d as defineCustomElement$f } from './panel.js';
-import { d as defineCustomElement$e } from './popover.js';
-import { d as defineCustomElement$d } from './progress.js';
-import { d as defineCustomElement$c } from './scrim.js';
-import { d as defineCustomElement$b } from './shell.js';
-import { d as defineCustomElement$a } from './stack.js';
-import { d as defineCustomElement$9 } from './tooltip.js';
-import { d as defineCustomElement$8 } from './create-feature2.js';
-import { d as defineCustomElement$7 } from './delete-button2.js';
-import { d as defineCustomElement$6 } from './edit-card2.js';
-import { d as defineCustomElement$5 } from './feature-list2.js';
-import { d as defineCustomElement$4 } from './info-card2.js';
+import { d as defineCustomElement$K } from './action.js';
+import { d as defineCustomElement$J } from './action-menu.js';
+import { d as defineCustomElement$I } from './alert.js';
+import { d as defineCustomElement$H } from './block.js';
+import { d as defineCustomElement$G } from './button.js';
+import { d as defineCustomElement$F } from './checkbox.js';
+import { d as defineCustomElement$E } from './chip.js';
+import { d as defineCustomElement$D } from './combobox.js';
+import { d as defineCustomElement$C } from './combobox-item.js';
+import { d as defineCustomElement$B } from './date-picker.js';
+import { d as defineCustomElement$A } from './date-picker-day.js';
+import { d as defineCustomElement$z } from './date-picker-month.js';
+import { d as defineCustomElement$y } from './date-picker-month-header.js';
+import { d as defineCustomElement$x } from './filter2.js';
+import { d as defineCustomElement$w } from './flow.js';
+import { d as defineCustomElement$v } from './flow-item.js';
+import { d as defineCustomElement$u } from './graph.js';
+import { d as defineCustomElement$t } from './handle.js';
+import { d as defineCustomElement$s } from './icon.js';
+import { d as defineCustomElement$r } from './input.js';
+import { d as defineCustomElement$q } from './input-date-picker.js';
+import { d as defineCustomElement$p } from './input-text.js';
+import { d as defineCustomElement$o } from './list.js';
+import { d as defineCustomElement$n } from './list-item.js';
+import { d as defineCustomElement$m } from './loader.js';
+import { d as defineCustomElement$l } from './modal.js';
+import { d as defineCustomElement$k } from './notice.js';
+import { d as defineCustomElement$j } from './pagination.js';
+import { d as defineCustomElement$i } from './panel.js';
+import { d as defineCustomElement$h } from './popover.js';
+import { d as defineCustomElement$g } from './progress.js';
+import { d as defineCustomElement$f } from './scrim.js';
+import { d as defineCustomElement$e } from './shell.js';
+import { d as defineCustomElement$d } from './slider.js';
+import { d as defineCustomElement$c } from './stack.js';
+import { d as defineCustomElement$b } from './tooltip.js';
+import { d as defineCustomElement$a } from './create-feature2.js';
+import { d as defineCustomElement$9 } from './delete-button2.js';
+import { d as defineCustomElement$8 } from './edit-card2.js';
+import { d as defineCustomElement$7 } from './feature-details2.js';
+import { d as defineCustomElement$6 } from './feature-list2.js';
+import { d as defineCustomElement$5 } from './info-card2.js';
+import { d as defineCustomElement$4 } from './instant-apps-filter-list2.js';
 import { d as defineCustomElement$3 } from './instant-apps-social-share2.js';
 import { d as defineCustomElement$2 } from './layer-list2.js';
 
-const crowdsourceReporterCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100% !important}.width-0{width:0}.height-full{height:100% !important}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.notice-msg{padding:10px;width:calc(100% - 20px)}.footer-top-button{padding-bottom:7px}.footer-button{height:35px}.report-submitted-msg{position:absolute;z-index:1000}";
+const crowdsourceReporterCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100% !important}.width-0{width:0}.height-full{height:100% !important}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.notice-msg{padding:10px;width:calc(100% - 20px)}.progress-bar{padding:12px}.footer-top-button{padding-bottom:7px}.footer-button{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}";
 
 const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceReporter extends HTMLElement {
     constructor() {
@@ -56,7 +70,6 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this.enableComments = undefined;
         this.enableLogin = undefined;
         this.enableNewReports = undefined;
-        this.layers = undefined;
         this.loginTitle = undefined;
         this.mapView = undefined;
         this.layerId = undefined;
@@ -76,6 +89,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this.theme = "light";
         this.enableZoom = true;
         this.zoomToScale = undefined;
+        this.layerExpressions = undefined;
         this._mapInfo = undefined;
         this._flowItems = [];
         this._sidePanelCollapsed = false;
@@ -84,7 +98,11 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         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;
     }
     //--------------------------------------------------------------------------
     //
@@ -105,6 +123,18 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             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)
@@ -121,6 +151,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         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();
         }));
     }
@@ -129,7 +163,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     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()));
     }
     //--------------------------------------------------------------------------
     //
@@ -193,6 +227,54 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             ? 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
@@ -209,7 +291,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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
@@ -217,7 +299,15 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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
@@ -239,7 +329,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     onSubmitButtonClick() {
         if (this._createFeature) {
-            this._createFeature.submit();
+            void this._createFeature.submit();
         }
     }
     /**
@@ -248,7 +338,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     backFromCreateFeaturePanel() {
         if (this._createFeature) {
-            this._createFeature.close();
+            void this._createFeature.close();
         }
         this.backFromSelectedPanel();
     }
@@ -275,10 +365,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     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) {
@@ -346,6 +436,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     backFromSelectedPanel() {
+        this._updatedProgressBarStatus = 0.25;
         const updatedFlowItems = [...this._flowItems];
         updatedFlowItems.pop();
         this.clearHighlights();
@@ -372,6 +463,13 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         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
@@ -380,7 +478,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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 }))));
     }
     /**
@@ -388,7 +489,15 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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
@@ -416,14 +525,6 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         }
         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
@@ -436,8 +537,9 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             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
@@ -543,6 +645,19 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             }
         }
     }
+    /**
+   * 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
@@ -673,7 +788,6 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "enableComments": [4, "enable-comments"],
         "enableLogin": [4, "enable-login"],
         "enableNewReports": [4, "enable-new-reports"],
-        "layers": [16],
         "loginTitle": [1, "login-title"],
         "mapView": [16],
         "layerId": [1, "layer-id"],
@@ -693,6 +807,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "theme": [1],
         "enableZoom": [4, "enable-zoom"],
         "zoomToScale": [2, "zoom-to-scale"],
+        "layerExpressions": [16],
         "_mapInfo": [32],
         "_flowItems": [32],
         "_sidePanelCollapsed": [32],
@@ -701,8 +816,12 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "_selectedLayerName": [32],
         "_reportSubmitted": [32],
         "_showSubmitCancelButton": [32],
-        "_featureCreationFailedErrorMsg": [32]
-    }, undefined, {
+        "_loadingFeatureDetails": [32],
+        "_featureCreationFailedErrorMsg": [32],
+        "_updatedProgressBarStatus": [32],
+        "_filterOpen": [32],
+        "_filterActive": [32]
+    }, [[8, "selectionChanged", "selectionChanged"]], {
         "isMobile": ["isMobileWatchHandler"],
         "mapView": ["mapViewWatchHandler"]
     }]);
@@ -710,7 +829,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["crowdsource-reporter", "calcite-action", "calcite-action-menu", "calcite-alert", "calcite-button", "calcite-chip", "calcite-filter", "calcite-flow", "calcite-flow-item", "calcite-handle", "calcite-icon", "calcite-input", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-pagination", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-shell", "calcite-stack", "calcite-tooltip", "create-feature", "delete-button", "edit-card", "feature-list", "info-card", "instant-apps-social-share", "layer-list"];
+    const components = ["crowdsource-reporter", "calcite-action", "calcite-action-menu", "calcite-alert", "calcite-block", "calcite-button", "calcite-checkbox", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-date-picker", "calcite-date-picker-day", "calcite-date-picker-month", "calcite-date-picker-month-header", "calcite-filter", "calcite-flow", "calcite-flow-item", "calcite-graph", "calcite-handle", "calcite-icon", "calcite-input", "calcite-input-date-picker", "calcite-input-text", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-pagination", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-shell", "calcite-slider", "calcite-stack", "calcite-tooltip", "create-feature", "delete-button", "edit-card", "feature-details", "feature-list", "info-card", "instant-apps-filter-list", "instant-apps-social-share", "layer-list"];
     components.forEach(tagName => { switch (tagName) {
         case "crowdsource-reporter":
             if (!customElements.get(tagName)) {
@@ -719,145 +838,215 @@ function defineCustomElement$1() {
             break;
         case "calcite-action":
             if (!customElements.get(tagName)) {
-                defineCustomElement$w();
+                defineCustomElement$K();
             }
             break;
         case "calcite-action-menu":
             if (!customElements.get(tagName)) {
-                defineCustomElement$v();
+                defineCustomElement$J();
             }
             break;
         case "calcite-alert":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$I();
+            }
+            break;
+        case "calcite-block":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$H();
             }
             break;
         case "calcite-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$G();
+            }
+            break;
+        case "calcite-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$F();
             }
             break;
         case "calcite-chip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$E();
+            }
+            break;
+        case "calcite-combobox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$D();
+            }
+            break;
+        case "calcite-combobox-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$C();
+            }
+            break;
+        case "calcite-date-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$B();
+            }
+            break;
+        case "calcite-date-picker-day":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$A();
+            }
+            break;
+        case "calcite-date-picker-month":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$z();
+            }
+            break;
+        case "calcite-date-picker-month-header":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$y();
             }
             break;
         case "calcite-filter":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$x();
             }
             break;
         case "calcite-flow":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$w();
             }
             break;
         case "calcite-flow-item":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$v();
+            }
+            break;
+        case "calcite-graph":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$u();
             }
             break;
         case "calcite-handle":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$t();
             }
             break;
         case "calcite-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$s();
             }
             break;
         case "calcite-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$r();
+            }
+            break;
+        case "calcite-input-date-picker":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$q();
+            }
+            break;
+        case "calcite-input-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$p();
             }
             break;
         case "calcite-list":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$o();
             }
             break;
         case "calcite-list-item":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$n();
             }
             break;
         case "calcite-loader":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$m();
             }
             break;
         case "calcite-modal":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$l();
             }
             break;
         case "calcite-notice":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$k();
             }
             break;
         case "calcite-pagination":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$j();
             }
             break;
         case "calcite-panel":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$i();
             }
             break;
         case "calcite-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$h();
             }
             break;
         case "calcite-progress":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$g();
             }
             break;
         case "calcite-scrim":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$f();
             }
             break;
         case "calcite-shell":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$e();
+            }
+            break;
+        case "calcite-slider":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
             }
             break;
         case "calcite-stack":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$c();
             }
             break;
         case "calcite-tooltip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$b();
             }
             break;
         case "create-feature":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$a();
             }
             break;
         case "delete-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$9();
             }
             break;
         case "edit-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$8();
+            }
+            break;
+        case "feature-details":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
             }
             break;
         case "feature-list":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "info-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "instant-apps-filter-list":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }