@esri/solutions-components 0.8.6-6.3 → 0.8.6

package/dist/esm/crowdsource-reporter.entry.js

@@ -3,65 +3,55 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, g as getElement } from './index-e3f04fa1.js';
-import { l as loadModules, g as getLocaleComponentStrings } from './locale-0f1cdb1f.js';
-import { g as getLayerOrTable, a as getAllLayers, b as getAllTables, c as getFeatureLayerView, h as highlightFeatures, d as getMapLayerHash, q as queryFeaturesByID } from './mapViewUtils-e3de60cc.js';
-import './esri-loader-c6842c6b.js';
-import './_commonjsHelpers-089957fe.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-164d485a.js';
+import { l as loadModules, g as getLocaleComponentStrings } from './locale-bcbea4ef.js';
+import { a as getAllLayers, b as getFeatureLayerView, h as highlightFeatures, c as getMapLayerHash, g as getLayerOrTable, q as queryFeaturesByID } from './mapViewUtils-253178f1.js';
+import './esri-loader-1b324844.js';
+import './_commonjsHelpers-0f74c230.js';
 import './interfaces-586e863c.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)}.progress-bar{padding:12px}.footer-top-button{padding-bottom:7px}.footer-button{height:35px}.feature-pagination{background-color:var(--calcite-color-foreground-1) !important;border-block-end:1px solid var(--calcite-color-border-3);display:flex;justify-content:center;padding:5px 0}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand);font-weight:bold}.report-submitted-msg{position:absolute;z-index:1000}.share-node{display:flex}";
-const CrowdsourceReporterStyle0 = crowdsourceReporterCss;
+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 CrowdsourceReporter = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.togglePanel = createEvent(this, "togglePanel", 7);
-        this.center = undefined;
-        this.defaultWebmap = "";
+        //HARDCODED IN EN
+        this._noLayerToDisplayErrorMsg = "Web map does not contain any editable layers.";
         this.description = undefined;
+        this.isMobile = undefined;
         this.enableAnonymousAccess = undefined;
         this.enableAnonymousComments = undefined;
         this.enableComments = undefined;
-        this.enableHome = true;
         this.enableLogin = undefined;
         this.enableNewReports = undefined;
-        this.enableSearch = true;
-        this.enableZoom = true;
-        this.isMobile = undefined;
-        this.layerExpressions = [];
-        this.layerId = undefined;
-        this.level = undefined;
+        this.layers = undefined;
         this.loginTitle = undefined;
-        this.mapInfos = [];
         this.mapView = undefined;
+        this.layerId = undefined;
         this.objectId = undefined;
+        this.center = undefined;
+        this.level = undefined;
         this.reportButtonText = undefined;
-        this.reportingOptions = undefined;
         this.reportsHeader = undefined;
         this.reportSubmittedMessage = undefined;
         this.searchConfiguration = undefined;
         this.showComments = undefined;
+        this.defaultWebmap = "";
+        this.enableSearch = true;
+        this.enableHome = true;
+        this.mapInfos = [];
         this.theme = "light";
-        this.zoomToScale = undefined;
-        this._featureCreationFailedErrorMsg = undefined;
-        this._filterActive = false;
-        this._filterOpen = false;
+        this.enableZoom = true;
+        this._mapInfo = undefined;
         this._flowItems = [];
+        this._sidePanelCollapsed = false;
+        this._translations = undefined;
         this._hasValidLayers = false;
-        this._loadingFeatureDetails = undefined;
-        this._mapInfo = undefined;
-        this._reportSubmitted = false;
         this._selectedLayerName = undefined;
+        this._reportSubmitted = false;
         this._showSubmitCancelButton = false;
-        this._showLoadingIndicator = false;
-        this._sidePanelCollapsed = false;
-        this._translations = undefined;
-        this._updatedProgressBarStatus = 0.25;
-        this._updatedSorting = undefined;
-        this._updatedSortOption = "sortNewest";
-        this._commentSubmitted = false;
-        this._addingCommentFailed = false;
+        this._featureCreationFailedErrorMsg = undefined;
     }
     //--------------------------------------------------------------------------
     //
@@ -98,10 +88,6 @@ const CrowdsourceReporter = class {
         await this._initModules();
         await this._getTranslations();
         await ((_a = this.mapView) === null || _a === void 0 ? void 0 : _a.when(async () => {
-            //set configured layers array which are enabled for data collection
-            this._layers = this.reportingOptions ? Object.keys(this.reportingOptions).filter((layerId) => {
-                return this.reportingOptions[layerId].visible;
-            }) : [];
             await this.setMapView();
         }));
     }
@@ -110,7 +96,7 @@ const CrowdsourceReporter = class {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: 'e512e2693a586f8a6da7bcfa171feb60da26aee3' }, this._reportSubmitted && h("calcite-alert", { key: 'e5805ba948f1dc43eba2a78716af452cf71a8222', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '95b9accf1f09186c09c81cfb02a8939c4869ae8d', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: 'cab7f0e0f0d882612b4fa6f00799be9870aea6c5', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'b9453672d85e26cf7bdeae0923cd36020d259d49', slot: "title" }, this._translations.error), h("div", { key: '5084315857bc88b8f80aaa411ac3fd5e4493e918', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '62b7d9818913c3331ca9c8e4ed23c7f0c48a7946', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '5f18444fd375657db0c2a403cb453ead75536181', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '732f08960095fc9fefcc79fc8df387a5a4c3f781', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '16415430cf33ce53c0d49cab19dce2c3e34257d6', slot: "title" }, this._translations.error), h("div", { key: '83e5918e00902bd49512165f4aa62813cecb4619', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '3e9dadd880319708e64e717ba7e7adaddf97b935' }, h("calcite-shell", { key: 'c72664d361b3904bc191668207c3ad31ff1f98c9', "content-behind": true }, this._getReporter())), this.filterModal()));
+        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()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -135,9 +121,8 @@ const CrowdsourceReporter = class {
      * @param layerId string layerId of the selected layer
      * @param layerName string layerName of the selected layer
      */
-    async setSelectedLayer(layerId, layerName) {
+    setSelectedLayer(layerId, layerName) {
         this._selectedLayerId = layerId;
-        this._selectedLayer = await getLayerOrTable(this.mapView, layerId);
         this._selectedLayerName = layerName;
         //show only current layer on map and hide other valid editable layers
         //if layerId is empty then show all the layers on map
@@ -145,14 +130,6 @@ const CrowdsourceReporter = class {
             layer.set('visible', !layerId || (layer.id === layerId));
         });
     }
-    /**
-     * Returns the layers configuration
-     * @param layerId string layerId of the selected layer
-     * @returns Configuration for the layerId
-     */
-    _getLayersConfig(layerId) {
-        return this.reportingOptions && this.reportingOptions[layerId] ? this.reportingOptions[layerId] : null;
-    }
     /**
      * Get the reporter app functionality
      * @protected
@@ -176,12 +153,6 @@ const CrowdsourceReporter = class {
                 case "feature-create":
                     renderLists.push(this.getFeatureCreateFlowItem());
                     break;
-                case "comment-details":
-                    renderLists.push(this.getCommentDetailsFlowItem());
-                    break;
-                case "add-comment":
-                    renderLists.push(this.getAddCommentFlowItem());
-                    break;
             }
         });
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
@@ -189,77 +160,6 @@ const CrowdsourceReporter = class {
             ? 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: () => void 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;
-    }
-    /**
-     * On sort option click update the sort field and sort order
-     * @param sortField sort field
-     * @param sortOrder sort order
-     * @param sortOption selected sort option (Newest/Oldest/Highest Voted/Lowest Voted)
-     */
-    async sortOptionClick(sortField, sortOrder, sortOption) {
-        this._updatedSorting = {
-            field: sortField,
-            order: sortOrder
-        };
-        this._updatedSortOption = sortOption;
-    }
-    /**
-     * On sort button click, display the sorting options
-     * @returns Sort options list
-     */
-    _toggleSort() {
-        const canSortByVotes = this.reportingOptions && this.reportingOptions[this._selectedLayerId] &&
-            this.reportingOptions[this._selectedLayerId].like && this.reportingOptions[this._selectedLayerId].likeField;
-        return (h("calcite-popover", { autoClose: true, label: "", offsetDistance: 0, placement: this.isMobile ? "leading-start" : "auto", pointerDisabled: true, referenceElement: "sort-popover" }, h("calcite-list", { "selection-mode": "single" }, h("calcite-list-item", { label: this._translations.sortNewest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "desc", "sortNewest"); }, selected: this._updatedSortOption === "sortNewest", value: "sortNewest" }), h("calcite-list-item", { label: this._translations.sortOldest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "asc", "sortOldest"); }, selected: this._updatedSortOption === "sortOldest", value: "sortOldest" }), canSortByVotes &&
-            h(Fragment, null, h("calcite-list-item", { label: this._translations.sortHighestVoted, onCalciteListItemSelect: () => { void this.sortOptionClick(this.reportingOptions[this._selectedLayerId].likeField, "desc", "sortHighestVoted"); }, selected: this._updatedSortOption === "sortHighestVoted", value: "sortHighestVoted" }), h("calcite-list-item", { label: this._translations.sortLowestVoted, onCalciteListItemSelect: () => { void this.sortOptionClick(this.reportingOptions[this._selectedLayerId].likeField, "asc", "sortLowestVoted"); }, selected: this._updatedSortOption === "sortLowestVoted", value: "sortLowestVoted" })))));
-    }
-    /**
-     * 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 and update the feature list depending on the applied filters
-     * @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
@@ -268,7 +168,7 @@ const CrowdsourceReporter = class {
     getLayerListFlowItem() {
         var _a;
         return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
-            h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { class: "height-full", layers: ((_a = this._editableLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this._editableLayerIds : this._layers, mapView: this.mapView, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
+            h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { class: "height-full", layers: ((_a = this._editableLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this._editableLayerIds : this.layers, mapView: this.mapView, noLayerErrorMsg: this._noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
     }
     /**
      * Get the layer list for creating a report
@@ -276,10 +176,7 @@ const CrowdsourceReporter = class {
      * @protected
      */
     getChooseCategoryFlowItem() {
-        const onlyReportingLayers = this.reportingOptions ? Object.keys(this.reportingOptions).filter((layerId) => {
-            return this.reportingOptions[layerId].visible && this.reportingOptions[layerId].reporting && this._layerItemsHash[layerId] && this._layerItemsHash[layerId].supportsAdd;
-        }) : [];
-        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: onlyReportingLayers, mapView: this.mapView, 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("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
@@ -287,23 +184,13 @@ const CrowdsourceReporter = class {
      * @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.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("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.onFormReady.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 }))));
+        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 }))));
     }
     /**
-     * Update the progress bar status when editor panel changes
-     * @param evt Event which has progress bar status
+     * When drawing of incident location completed on map show the submit and cancel button
      * @protected
      */
-    updatedProgressStatus(evt) {
-        this._updatedProgressBarStatus = evt.detail;
-    }
-    /**
-     * When form is ready then show submit and cancel button
-     * @protected
-     */
-    onFormReady() {
-        // update the form state when form is ready
-        this.updateFormState(true);
+    onDrawComplete() {
         this._showSubmitCancelButton = true;
     }
     /**
@@ -317,9 +204,9 @@ const CrowdsourceReporter = class {
      * On back from create feature, call submit editor to destroy the Editor widget instance
      * @protected
      */
-    onCreateFeatureSubmitButtonClick() {
+    onSubmitButtonClick() {
         if (this._createFeature) {
-            void this._createFeature.submit();
+            this._createFeature.submit();
         }
     }
     /**
@@ -328,35 +215,7 @@ const CrowdsourceReporter = class {
      */
     backFromCreateFeaturePanel() {
         if (this._createFeature) {
-            void this._createFeature.close();
-        }
-        //on back form will be closed, so update the form state
-        if (this.isFormOpen) {
-            this.updateFormState(false);
-        }
-        this.backFromSelectedPanel();
-    }
-    /**
-     * On back from create realated feature, call submit editor to destroy the Editor widget instance
-     * @protected
-     */
-    onCreateRelatedFeatureSubmitButtonClick() {
-        if (this._createRelatedFeature) {
-            void this._createRelatedFeature.submit();
-        }
-    }
-    /**
-     * On back from create related feature, call close editor to destroy the Editor widget instance
-     * @protected
-     */
-    backFromCreateRelatedFeaturePanel() {
-        if (this._createRelatedFeature) {
-            void this._createRelatedFeature.close();
-            this._showSubmitCancelButton = false;
-        }
-        //on back form will be closed, so update the form state
-        if (this.isFormOpen) {
-            this.updateFormState(false);
+            this._createFeature.close();
         }
         this.backFromSelectedPanel();
     }
@@ -374,48 +233,21 @@ const CrowdsourceReporter = class {
      * @protected
      */
     onReportSubmitted() {
-        //on report submit form will be closed, so update the form state
-        if (this.isFormOpen) {
-            this.updateFormState(false);
-        }
         this._reportSubmitted = true;
         void this.navigateToHomePage();
     }
-    /**
-     * On adding the is failed, show the error message
-     * @param evt Event which has comment failed message
-     * @protected
-     */
-    addCommentFailed(evt) {
-        console.error(evt.detail);
-        this._addingCommentFailed = true;
-    }
-    /**
-     * On submit comment navigate to the feature list and refresh the feature details
-     * @protected
-     */
-    async onCommentSubmitted() {
-        this._commentSubmitted = true;
-        this.backFromSelectedPanel();
-        this._showLoadingIndicator = true;
-        //update the feature details to reflect the like, dislike and comment values
-        await this._featureDetails.refresh(this._currentFeature);
-        setTimeout(() => {
-            this._showLoadingIndicator = false;
-        }, 300);
-    }
     /**
      * Navigates to layer-list
      * @protected
      */
     async navigateToHomePage() {
         if (this._createFeature) {
-            void this._createFeature.close();
+            this._createFeature.close();
         }
         if (this._layerList) {
-            void this._layerList.refresh();
+            this._layerList.refresh();
         }
-        await this.setSelectedFeatures([]);
+        this.setSelectedFeatures([]);
         if (this._editableLayerIds.length === 1) {
             await this._featureList.refresh();
             this._flowItems = ["feature-list"];
@@ -431,7 +263,7 @@ const CrowdsourceReporter = class {
      */
     async navigateToCreateFeature(evt) {
         if (evt.detail.layerId && evt.detail.layerName) {
-            void this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
+            this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
         }
         this._showSubmitCancelButton = false;
         this._flowItems = [...this._flowItems, "feature-create"];
@@ -452,22 +284,16 @@ const CrowdsourceReporter = class {
         const layersListed = evt.detail;
         //consider only the layers listed in the layer-list component
         const allMapLayers = await getAllLayers(this.mapView);
-        const reportingEnabledLayerIds = [];
         this._validLayers = [];
         allMapLayers.forEach((eachLayer) => {
-            var _a;
             if (layersListed.includes(eachLayer.id)) {
                 this._validLayers.push(eachLayer);
-                //create list of reporting enabled layers
-                if (((_a = this._getLayersConfig(eachLayer.id)) === null || _a === void 0 ? void 0 : _a.reporting) && this._layerItemsHash[eachLayer.id] && this._layerItemsHash[eachLayer.id].supportsAdd) {
-                    reportingEnabledLayerIds.push(eachLayer.id);
-                }
             }
         });
         //handleMap click on layer list loaded
         this.handleMapClick();
-        //When we have any reporting layer then only show the create report button on layerList
-        this._hasValidLayers = reportingEnabledLayerIds.length > 0;
+        //update the has valid layer state
+        this._hasValidLayers = layersListed.length > 0;
         //navigate to the feature details if URL params found
         if (!this._urlParamsLoaded) {
             this._urlParamsLoaded = true;
@@ -479,13 +305,7 @@ const CrowdsourceReporter = class {
      * @protected
      */
     displayFeaturesList(evt) {
-        this._updatedSorting = {
-            field: '',
-            order: 'desc'
-        };
-        this._filterActive = false;
-        this._updatedSortOption = "sortNewest";
-        void this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
+        this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
         this._flowItems = [...this._flowItems, "feature-list"];
     }
     /**
@@ -493,14 +313,9 @@ const CrowdsourceReporter = class {
      * @protected
      */
     backFromSelectedPanel() {
-        this._updatedProgressBarStatus = 0.25;
         const updatedFlowItems = [...this._flowItems];
-        // when back from comment details or add comment page don't clear the highlighted feature of map
-        if (!(updatedFlowItems[updatedFlowItems.length - 1] === 'comment-details' ||
-            updatedFlowItems[updatedFlowItems.length - 1] === 'add-comment')) {
-            this.clearHighlights();
-        }
         updatedFlowItems.pop();
+        this.clearHighlights();
         //Back to layer list, and return as the flowItems will be reset in navigateToHomePage
         if (updatedFlowItems.length === 1 && updatedFlowItems[0] === 'layer-list') {
             void this.navigateToHomePage();
@@ -514,66 +329,16 @@ const CrowdsourceReporter = class {
      */
     toggleSidePanel() {
         this._sidePanelCollapsed = !this._sidePanelCollapsed;
-        this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this.isFormOpen });
-    }
-    /**
-     * Hide map when form open in case of mobile
-     * @param isFormOpen updated form state
-     * @protected
-     */
-    updateFormState(isFormOpen) {
-        this.isFormOpen = isFormOpen;
-        this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this.isFormOpen });
+        this.togglePanel.emit(this._sidePanelCollapsed);
     }
     /**
      * When feature is selected from list store that and show feature details
      * @param evt Event which has details of selected feature
      */
     async onFeatureSelectFromList(evt) {
-        this._showLoadingIndicator = true;
-        await this.setSelectedFeatures([evt.detail]);
+        this.setSelectedFeatures([evt.detail]);
         this._flowItems = [...this._flowItems, "feature-details"];
     }
-    /**
-     * Gets related table id of the selected feature's layer
-     * @protected
-     */
-    async getRelatedTable() {
-        const selectedLayer = this._currentFeature.layer;
-        const relatedTableIdFromRelnship = selectedLayer.relationships[0].relatedTableId;
-        const allTables = await getAllTables(this.mapView);
-        const relatedTable = allTables.filter((table) => selectedLayer.url === table.url && relatedTableIdFromRelnship === table.layerId);
-        this._relatedTable = relatedTable[0];
-    }
-    /**
-     * Show loading indicator while updating the feature details component
-     * @param isLoading is feature detail component loading
-     */
-    async updatingFeatureDetails(isLoading) {
-        this._showLoadingIndicator = isLoading;
-    }
-    /**
-   * On Feature details change update the Layer title and the current selected layer id
-   * @param evt Event hold the details of current feature graphic from the feature-details
-   * @protected
-   */
-    async selectionChanged(evt) {
-        void this.updatingFeatureDetails(true);
-        await 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 and comment values
-        await this._featureDetails.refresh(evt.detail.selectedFeature[0]);
-    }
-    /**
-     * When comment is selected from list store that and show comment details
-     * @param evt Event which has details of selected feature
-     * @protected
-     */
-    async onCommentSelectFromList(evt) {
-        this._selectedRelatedFeature = [evt.detail];
-        this._flowItems = [...this._flowItems, "comment-details"];
-    }
     /**
      * Get feature list of the selected feature layer
      * @param layerId Layer id
@@ -582,78 +347,50 @@ const CrowdsourceReporter = class {
      * @protected
      */
     getFeatureListFlowItem(layerId, layerName) {
-        var _a, _b;
-        const layerExpressions = (_a = this.layerExpressions) === null || _a === void 0 ? void 0 : _a.filter((exp) => exp.id === this._selectedLayerId);
-        const canCreateReports = ((_b = this._getLayersConfig(this._selectedLayerId)) === null || _b === void 0 ? void 0 : _b.reporting) && this._layerItemsHash[this._selectedLayerId].supportsAdd;
-        const showFilterIcon = (layerExpressions === null || layerExpressions === void 0 ? void 0 : layerExpressions.length) > 0;
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this._toggleSort(), h("calcite-action", { icon: "sort-ascending-arrow", id: "sort-popover", slot: "header-actions-end", text: this._translations.sort, title: this._translations.sort }), showFilterIcon && h("calcite-action", { icon: "filter", indicator: this._filterActive, onClick: this._toggleFilter.bind(this), slot: "header-actions-end", text: this._translations.filter, title: this._translations.filter }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && canCreateReports &&
-            h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { 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, sortingInfo: this._updatedSorting }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, 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 }))));
     }
     /**
      * Returns the calcite-flow item for feature details
      * @returns Node
      */
     getFeatureDetailsFlowItem() {
-        var _a;
-        const showCommentBtn = ((_a = this._getLayersConfig(this._selectedLayerId)) === null || _a === void 0 ? void 0 : _a.comment) && this._selectedLayer.relationships.length > 0;
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "share-node", embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, removePopoverOffset: true, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, h("feature-details", { class: 'full-height', graphics: this._selectedFeature, layerItemsHash: this._layerItemsHash, mapView: this.mapView, onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions }), showCommentBtn &&
-            h("calcite-button", { appearance: "solid", onClick: () => this._flowItems = [...this._flowItems, "add-comment"], slot: "footer", width: "full" }, this._translations.comment))));
-    }
-    /**
-     * 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" }, 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', 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)))));
-    }
-    /**
-     * Returns the calcite-flow item for comment details
-     * @returns Node
-     */
-    getCommentDetailsFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedRelatedFeature, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false }))));
-    }
-    /**
-     * Returns the calcite-flow item for add comment
-     * @returns Node
-     */
-    getAddCommentFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), h("calcite-panel", null, h("create-related-feature", { customizeSubmit: true, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onFormReady: this.onFormReady.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._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 }))));
     }
     /**
      * Sets the selected features and updates the first feature as the current selected feature
      * @param features Graphics array of the features selected
      */
-    async setSelectedFeatures(features) {
+    setSelectedFeatures(features) {
         this._selectedFeature = features;
-        await this.setCurrentFeature(this._selectedFeature.length ? this._selectedFeature[0] : null);
+        this.setCurrentFeature(this._selectedFeature.length ? this._selectedFeature[0] : null);
     }
     /**
      * Set the object id of the current selected feature, and also updates the current selected layer details
      * @param selectedFeature Graphic currently shown in feature details
      */
-    async setCurrentFeature(selectedFeature) {
-        var _a;
-        this._currentFeature = selectedFeature;
+    setCurrentFeature(selectedFeature) {
         if (selectedFeature && selectedFeature.layer) {
             const layer = selectedFeature.layer;
-            void this.setSelectedLayer(layer.id, layer.title);
+            this.setSelectedLayer(layer.id, layer.title);
             this._currentFeatureId = selectedFeature.attributes[layer.objectIdField];
-            // check if comments are configured and relationship is present then only get the related table
-            const isCommentTablePresent = ((_a = this._getLayersConfig(layer.id)) === null || _a === void 0 ? void 0 : _a.comment) && layer.relationships.length > 0;
-            if (isCommentTablePresent) {
-                await this.getRelatedTable();
-            }
         }
         else {
             if (this._editableLayerIds.length > 1) {
-                void this.setSelectedLayer('', '');
+                this.setSelectedLayer('', '');
             }
             this._currentFeatureId = '';
         }
         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
@@ -664,11 +401,10 @@ const CrowdsourceReporter = class {
         // highlight the newly selected feature only when it has valid geometry
         if (selectedFeature && selectedFeature.geometry && selectedFeature.layer) {
             const selectedLayerView = await getFeatureLayerView(this.mapView, selectedFeature.layer.id);
-            // remove previous highlight options (if any) to highlight the feature by default color
+            // 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.zoomToScale);
+            this._highlightHandle = await highlightFeatures([selectedFeature.getObjectId()], selectedLayerView, this.mapView, true);
         }
-        void this.updatingFeatureDetails(false);
     }
     /**
      * Clears the highlight
@@ -749,18 +485,18 @@ const CrowdsourceReporter = class {
                 var _a;
                 return !this._validLayers.includes(graphic.layer) && ((_a = graphic === null || graphic === void 0 ? void 0 : graphic.layer) === null || _a === void 0 ? void 0 : _a.id);
             });
-            // if clicked graphic's layer is one of the reporting layers then show details in layer panel
+            // if clicked graphic's layer is one of the reporting layers then show details in layer panel 
             if (reportingLayerGraphics.length > 0) {
                 //update the selectedFeature
-                await this.setSelectedFeatures(reportingLayerGraphics);
+                this.setSelectedFeatures(reportingLayerGraphics);
                 //if featureDetails not open then add it to the list else just reInit flowItems which will update details with newly selected features
                 // eslint-disable-next-line unicorn/prefer-ternary
-                if (this._flowItems.length && this._flowItems.includes("feature-details")) {
-                    this._flowItems = [...this._flowItems.slice(0, this._flowItems.indexOf("feature-details") + 1)];
-                    await this.highlightOnMap(clickedGraphics[0]);
+                if (this._flowItems.length && this._flowItems[this._flowItems.length - 1] !== "feature-details") {
+                    this._flowItems = [...this._flowItems, "feature-details"];
                 }
                 else {
-                    this._flowItems = [...this._flowItems, "feature-details"];
+                    this._flowItems = [...this._flowItems];
+                    void this.highlightOnMap(clickedGraphics[0]);
                 }
             }
             // if clicked graphic's layer is from non reporting layers then show popup on map
@@ -774,19 +510,6 @@ const CrowdsourceReporter = class {
             }
         }
     }
-    /**
-   * 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
@@ -803,11 +526,13 @@ const CrowdsourceReporter = class {
      * @returns array of editable layer ids
      */
     reduceToConfiguredLayers(hash) {
+        var _a;
+        const configuredLayers = ((_a = this.layers) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.layers : [];
         return Object.keys(hash).reduce((prev, cur) => {
-            var _a;
-            // check if reporting options exists consider the visible prop if else just check the supports Add
-            const showLayer = this.reportingOptions ? (_a = this._getLayersConfig(cur)) === null || _a === void 0 ? void 0 : _a.visible
-                : hash[cur].supportsAdd;
+            let showLayer = hash[cur].supportsAdd;
+            if ((configuredLayers === null || configuredLayers === void 0 ? void 0 : configuredLayers.length) > 0) {
+                showLayer = configuredLayers.indexOf(cur) > -1 ? hash[cur].supportsAdd : false;
+            }
             if (showLayer) {
                 prev.push(cur);
             }
@@ -828,19 +553,18 @@ const CrowdsourceReporter = class {
             }
         });
         this._editableLayerIds = this.reduceToConfiguredLayers(layerItemsHash);
-        this._layerItemsHash = layerItemsHash;
     }
     /**
      * renders feature list
      * @protected
      */
     async renderFeaturesList() {
-        this._flowItems = ['feature-list'];
         const evt = {
             detail: this._editableLayerIds
         };
         await this.layerListLoaded(evt);
-        void this.setSelectedLayer(this._validLayers[0].id, this._validLayers[0].title);
+        this.setSelectedLayer(this._validLayers[0].id, this._validLayers[0].title);
+        this._flowItems = ['feature-list'];
     }
     /**
      * Updates the share url for current selected feature
@@ -888,7 +612,7 @@ const CrowdsourceReporter = class {
                 const featureSet = await queryFeaturesByID([Number(this.objectId)], layer, [], true, this.mapView.spatialReference);
                 if (featureSet.length) {
                     //update the selectedFeature
-                    await this.setSelectedFeatures(featureSet);
+                    this._selectedFeature = featureSet;
                     //if featureDetails not open then add it to the list else just reInit flowItems which will update details with newly selected features
                     // eslint-disable-next-line unicorn/prefer-ternary
                     if (this._flowItems.length && this._flowItems[this._flowItems.length - 1] !== "feature-details") {
@@ -897,6 +621,7 @@ const CrowdsourceReporter = class {
                     else {
                         this._flowItems = [...this._flowItems];
                     }
+                    await this.highlightOnMap(featureSet[0]);
                 }
             }
         }
@@ -907,6 +632,6 @@ const CrowdsourceReporter = class {
         "mapView": ["mapViewWatchHandler"]
     }; }
 };
-CrowdsourceReporter.style = CrowdsourceReporterStyle0;
+CrowdsourceReporter.style = crowdsourceReporterCss;
 
 export { CrowdsourceReporter as crowdsource_reporter };