@esri/solutions-components 0.8.14 → 0.8.15

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

@@ -18,55 +18,59 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Host, h } from "@stencil/core";
+import { Host, h, Fragment } from "@stencil/core";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { loadModules } from "../../utils/loadModules";
-import { getAllLayers, getFeatureLayerView, getLayerOrTable, getMapLayerHash, highlightFeatures } from "../../utils/mapViewUtils";
+import { getAllLayers, getAllTables, getFeatureLayerView, getLayerOrTable, getMapLayerHash, highlightFeatures } from "../../utils/mapViewUtils";
 import { queryFeaturesByID } from "../../utils/queryUtils";
 export class CrowdsourceReporter {
     constructor() {
-        //HARDCODED IN EN
-        this._noLayerToDisplayErrorMsg = "Web map does not contain any editable layers.";
+        this.center = undefined;
+        this.coverPageEnabled = undefined;
+        this.defaultWebmap = "";
         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.loginTitle = undefined;
+        this.mapInfos = [];
         this.mapView = undefined;
-        this.layerId = undefined;
         this.objectId = undefined;
-        this.center = undefined;
-        this.level = undefined;
         this.reportButtonText = undefined;
-        this.reportsHeader = 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.enableZoom = true;
         this.zoomToScale = undefined;
-        this.layerExpressions = [];
-        this._mapInfo = undefined;
+        this._featureCreationFailedErrorMsg = undefined;
+        this._filterActive = false;
+        this._filterOpen = false;
         this._flowItems = [];
-        this._sidePanelCollapsed = false;
-        this._translations = undefined;
         this._hasValidLayers = false;
-        this._selectedLayerName = undefined;
+        this._loadingFeatureDetails = undefined;
+        this._mapInfo = undefined;
         this._reportSubmitted = false;
+        this._selectedLayerName = undefined;
         this._showSubmitCancelButton = false;
-        this._loadingFeatureDetails = undefined;
-        this._featureCreationFailedErrorMsg = undefined;
+        this._showLoadingIndicator = false;
+        this._sidePanelCollapsed = false;
+        this._translations = undefined;
         this._updatedProgressBarStatus = 0.25;
-        this._filterOpen = false;
-        this._filterActive = false;
+        this._updatedSorting = undefined;
+        this._updatedSortOption = "sortNewest";
+        this._commentSubmitted = false;
+        this._addingCommentFailed = false;
     }
     //--------------------------------------------------------------------------
     //
@@ -93,10 +97,10 @@ export class CrowdsourceReporter {
      */
     async selectionChanged(evt) {
         void this.updatingFeatureDetails(true);
-        this.setCurrentFeature(evt.detail.selectedFeature[0]);
+        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 values
+        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]);
     }
     //--------------------------------------------------------------------------
@@ -116,7 +120,7 @@ export class CrowdsourceReporter {
         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) => {
+            this._layers = this.reportingOptions ? Object.keys(this.reportingOptions).filter((layerId) => {
                 return this.reportingOptions[layerId].reporting;
             }) : [];
             await this.setMapView();
@@ -127,7 +131,7 @@ export class CrowdsourceReporter {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: '197ae2c1b96231124830a044c5a3642107987c85' }, this._reportSubmitted && h("calcite-alert", { key: '2cbdbc22994787e0ac1c204d5043c6c0409503e8', "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: '88ae73773b51678409fa69e68931714b5fdd951a', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '4b0fa9ae2e597d4a44fe2624debe20b2bbeed037', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '108c6a3b06c3f9c52ff15e158d20a39422bb2ad8', slot: "title" }, this._translations.error), h("div", { key: 'c0e54e5665480a5cbe9e4f4b8a05e3c56c20d825', slot: "message" }, this._featureCreationFailedErrorMsg)), h("div", { key: 'c3417032902e0fc8a6fc33909b2f2eb71ba72650' }, h("calcite-shell", { key: 'e5ac5faedf24bd22aa62f0d0f5a4925b2c5e06d4', "content-behind": true }, this._getReporter())), this.filterModal()));
+        return (h(Host, { key: 'b57e18eee85093b3829573a33806b81d8e5b9021' }, this._reportSubmitted && h("calcite-alert", { key: '6f45d4435c53c7fbed850098efebf77346f17c12', "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: '7eaecb6ba69aa0b6b45b90e7b751fb580e8557b2', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '2997fdcdf9615ef1cea758111f50903740d863d8', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '4e8f89c2e26b37507b6fd7047096e8f68355bbd2', slot: "title" }, this._translations.error), h("div", { key: 'e514439bb6f88f1405d4a1c5618d0579b08210b9', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '97a51ea4a07a897f071c9c2c34abcf5332aff76b', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '05f552f67f2d7da099aa317c3e60841570a8dbfc', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: 'fc78f2f7fb3c501e999c9783e199e732fdb5626d', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '617dbf2afc438481409e3a8ca268b95d77969499', slot: "title" }, this._translations.error), h("div", { key: '5da78c288010c03114c88841fbd9fc97c7366de0', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: 'ded738076efa1f334dc26dc39b3fb57b1ac33de2' }, h("calcite-shell", { key: 'fa2a7c6c3dcd761a7517b9922c255459258fbec9', "content-behind": true }, this._getReporter())), this.filterModal()));
     }
     //--------------------------------------------------------------------------
     //
@@ -152,8 +156,9 @@ export class CrowdsourceReporter {
      * @param layerId string layerId of the selected layer
      * @param layerName string layerName of the selected layer
      */
-    setSelectedLayer(layerId, layerName) {
+    async 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
@@ -184,6 +189,12 @@ export class CrowdsourceReporter {
                 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";
@@ -200,7 +211,7 @@ export class CrowdsourceReporter {
         //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 }))));
+            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
@@ -218,6 +229,28 @@ export class CrowdsourceReporter {
     _toggleFilter() {
         this._filterOpen = !this._filterOpen;
     }
+    /**
+     * On sort option click update the sort field and sort order
+     * @param sortField sort field
+     * @param sortOrder sort order
+     */
+    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
@@ -229,7 +262,7 @@ export class CrowdsourceReporter {
         void this._featureList.refresh();
     }
     /**
-     * Check if the layers definitionExpression has been modified
+     * Check if the layers definitionExpression has been modified and update the feature list depending on the applied filters
      * @protected
      */
     _handleFilterUpdate() {
@@ -247,7 +280,7 @@ export class CrowdsourceReporter {
     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, noLayerErrorMsg: this._noLayerToDisplayErrorMsg, 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, 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
@@ -255,7 +288,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("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 }))));
+        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, onLayerSelect: this.navigateToCreateFeature.bind(this), showFeatureCount: false, showNextIcon: false }))));
     }
     /**
      * Get Feature create form of the selected feature layer
@@ -263,7 +296,7 @@ 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("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 }))));
+        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.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
@@ -291,7 +324,7 @@ export class CrowdsourceReporter {
      * On back from create feature, call submit editor to destroy the Editor widget instance
      * @protected
      */
-    onSubmitButtonClick() {
+    onCreateFeatureSubmitButtonClick() {
         if (this._createFeature) {
             void this._createFeature.submit();
         }
@@ -306,6 +339,26 @@ export class CrowdsourceReporter {
         }
         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;
+        }
+        this.backFromSelectedPanel();
+    }
     /**
      * On creating the feature is failed, show the error message
      * @param evt Event which has feature failed message
@@ -323,6 +376,29 @@ export class CrowdsourceReporter {
         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
@@ -334,7 +410,7 @@ export class CrowdsourceReporter {
         if (this._layerList) {
             void this._layerList.refresh();
         }
-        this.setSelectedFeatures([]);
+        await this.setSelectedFeatures([]);
         if (this._editableLayerIds.length === 1) {
             await this._featureList.refresh();
             this._flowItems = ["feature-list"];
@@ -350,7 +426,7 @@ export class CrowdsourceReporter {
      */
     async navigateToCreateFeature(evt) {
         if (evt.detail.layerId && evt.detail.layerName) {
-            this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
+            void this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
         }
         this._showSubmitCancelButton = false;
         this._flowItems = [...this._flowItems, "feature-create"];
@@ -392,7 +468,13 @@ export class CrowdsourceReporter {
      * @protected
      */
     displayFeaturesList(evt) {
-        this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
+        this._updatedSorting = {
+            field: '',
+            order: 'desc'
+        };
+        this._filterActive = false;
+        this._updatedSortOption = "sortNewest";
+        void this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
         this._flowItems = [...this._flowItems, "feature-list"];
     }
     /**
@@ -402,8 +484,11 @@ export class CrowdsourceReporter {
     backFromSelectedPanel() {
         this._updatedProgressBarStatus = 0.25;
         const updatedFlowItems = [...this._flowItems];
+        // when coming back from comment details page don't clear the highlighted feature of map
+        if (updatedFlowItems[updatedFlowItems.length - 1] !== 'comment-details') {
+            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();
@@ -424,15 +509,35 @@ export class CrowdsourceReporter {
      * @param evt Event which has details of selected feature
      */
     async onFeatureSelectFromList(evt) {
-        this.setSelectedFeatures([evt.detail]);
+        this._showLoadingIndicator = true;
+        await this.setSelectedFeatures([evt.detail]);
         this._flowItems = [...this._flowItems, "feature-details"];
     }
+    /**
+     * Gets related table id of the selected feature's layer
+     * @protected
+     */
+    async getRelatedTable() {
+        const relatedTableIdFromRelnship = this._currentFeature.layer.relationships[0].relatedTableId;
+        const allTables = await getAllTables(this.mapView);
+        const relatedTable = allTables.filter((table) => 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._loadingFeatureDetails = isLoading;
+        this._showLoadingIndicator = isLoading;
+    }
+    /**
+     * 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
@@ -444,16 +549,18 @@ export class CrowdsourceReporter {
     getFeatureListFlowItem(layerId, layerName) {
         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 }))));
+        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 &&
+            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 }))));
     }
     /**
      * Returns the calcite-flow item for feature details
      * @returns Node
      */
     getFeatureDetailsFlowItem() {
-        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 }))));
+        const showCommentBtn = this.reportingOptions[this._currentFeature.layer.id].comment && this._currentFeature.layer.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, 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, onFeatureSelect: this.onCommentSelectFromList.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
@@ -463,27 +570,47 @@ export class CrowdsourceReporter {
     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)))));
     }
+    /**
+     * 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, zoomAndScrollToSelected: 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), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
+    }
     /**
      * Sets the selected features and updates the first feature as the current selected feature
      * @param features Graphics array of the features selected
      */
-    setSelectedFeatures(features) {
+    async setSelectedFeatures(features) {
         this._selectedFeature = features;
-        this.setCurrentFeature(this._selectedFeature.length ? this._selectedFeature[0] : null);
+        await 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
      */
-    setCurrentFeature(selectedFeature) {
+    async setCurrentFeature(selectedFeature) {
+        this._currentFeature = selectedFeature;
         if (selectedFeature && selectedFeature.layer) {
             const layer = selectedFeature.layer;
-            this.setSelectedLayer(layer.id, layer.title);
+            void 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 = this.reportingOptions[selectedFeature.layer.id].comment && selectedFeature.layer.relationships.length > 0;
+            if (isCommentTablePresent) {
+                await this.getRelatedTable();
+            }
         }
         else {
             if (this._editableLayerIds.length > 1) {
-                this.setSelectedLayer('', '');
+                void this.setSelectedLayer('', '');
             }
             this._currentFeatureId = '';
         }
@@ -587,7 +714,7 @@ export class CrowdsourceReporter {
             // if clicked graphic's layer is one of the reporting layers then show details in layer panel
             if (reportingLayerGraphics.length > 0) {
                 //update the selectedFeature
-                this.setSelectedFeatures(reportingLayerGraphics);
+                await 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[this._flowItems.length - 1] !== "feature-details") {
@@ -616,7 +743,7 @@ export class CrowdsourceReporter {
    * @protected
    */
     _getCount() {
-        const index = (this.selectedFeatureIndex + 1).toString();
+        const index = (this._selectedFeatureIndex + 1).toString();
         const total = this._selectedFeature.length.toString();
         return this._translations.indexOfTotal
             .replace("{{index}}", index)
@@ -639,7 +766,7 @@ export class CrowdsourceReporter {
      */
     reduceToConfiguredLayers(hash) {
         var _a;
-        const configuredLayers = ((_a = this.layers) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.layers : [];
+        const configuredLayers = ((_a = this._layers) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this._layers : [];
         return Object.keys(hash).reduce((prev, cur) => {
             let showLayer = hash[cur].supportsAdd;
             if ((configuredLayers === null || configuredLayers === void 0 ? void 0 : configuredLayers.length) > 0) {
@@ -675,7 +802,7 @@ export class CrowdsourceReporter {
             detail: this._editableLayerIds
         };
         await this.layerListLoaded(evt);
-        this.setSelectedLayer(this._validLayers[0].id, this._validLayers[0].title);
+        void this.setSelectedLayer(this._validLayers[0].id, this._validLayers[0].title);
         this._flowItems = ['feature-list'];
     }
     /**
@@ -751,7 +878,7 @@ export class CrowdsourceReporter {
     }
     static get properties() {
         return {
-            "description": {
+            "center": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -763,26 +890,61 @@ export class CrowdsourceReporter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "string: The text that will display under the title on the landing page"
+                    "text": "string: Semicolon delimited numbers that will be used as the maps center point from URL params"
                 },
-                "attribute": "description",
+                "attribute": "center",
                 "reflect": false
             },
-            "isMobile": {
-                "type": "boolean",
+            "coverPageEnabled": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "boolean: When true the application will be in mobile mode, controls the mobile or desktop view"
+                    "text": "boolean: When true a cover page has been enabled in the consuming application.\r\nAlso when true a floating button will be shown in the lower right of the window that\r\nwill emit an event when clicked that the consuming application can respond to that will open the cover page."
                 },
-                "attribute": "is-mobile",
+                "attribute": "cover-page-enabled",
+                "reflect": false
+            },
+            "defaultWebmap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: Item ID of the web map that should be selected by default"
+                },
+                "attribute": "default-webmap",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: The text that will display under the title on the landing page"
+                },
+                "attribute": "description",
                 "reflect": false
             },
             "enableAnonymousAccess": {
@@ -836,6 +998,24 @@ export class CrowdsourceReporter {
                 "attribute": "enable-comments",
                 "reflect": false
             },
+            "enableHome": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: when true the home widget will be available"
+                },
+                "attribute": "enable-home",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "enableLogin": {
                 "type": "boolean",
                 "mutable": false,
@@ -870,33 +1050,70 @@ export class CrowdsourceReporter {
                 "attribute": "enable-new-reports",
                 "reflect": false
             },
-            "loginTitle": {
-                "type": "string",
+            "enableSearch": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "string: The text that will display at the top of the landing page"
+                    "text": "boolean: when true the search widget will be available"
                 },
-                "attribute": "login-title",
+                "attribute": "enable-search",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "enableZoom": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: when true the zoom widget will be available"
+                },
+                "attribute": "enable-zoom",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: When true the application will be in mobile mode, controls the mobile or desktop view"
+                },
+                "attribute": "is-mobile",
                 "reflect": false
             },
-            "mapView": {
+            "layerExpressions": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "__esri.MapView",
-                    "resolved": "MapView",
+                    "original": "ILayerExpression[]",
+                    "resolved": "ILayerExpression[]",
                     "references": {
-                        "___esri": {
-                            "location": "global",
-                            "id": "global::___esri"
+                        "ILayerExpression": {
+                            "location": "import",
+                            "path": "../../utils/interfaces",
+                            "id": "src/utils/interfaces.ts::ILayerExpression"
                         }
                     }
                 },
@@ -904,8 +1121,9 @@ export class CrowdsourceReporter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
-                }
+                    "text": "ILayerExpression[]: Array of layer expressions for layers (filter configuration)"
+                },
+                "defaultValue": "[]"
             },
             "layerId": {
                 "type": "string",
@@ -924,7 +1142,7 @@ export class CrowdsourceReporter {
                 "attribute": "layer-id",
                 "reflect": false
             },
-            "objectId": {
+            "level": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -936,12 +1154,12 @@ export class CrowdsourceReporter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "string: Object id of the feature from URL params"
+                    "text": "string: Id of the zoom level from URL params"
                 },
-                "attribute": "object-id",
+                "attribute": "level",
                 "reflect": false
             },
-            "center": {
+            "loginTitle": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -953,29 +1171,54 @@ export class CrowdsourceReporter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "string: Semicolon delimited numbers that will be used as the maps center point from URL params"
+                    "text": "string: The text that will display at the top of the landing page"
                 },
-                "attribute": "center",
+                "attribute": "login-title",
                 "reflect": false
             },
-            "level": {
-                "type": "string",
+            "mapInfos": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "IMapInfo[]",
+                    "resolved": "IMapInfo[]",
+                    "references": {
+                        "IMapInfo": {
+                            "location": "import",
+                            "path": "../../utils/interfaces",
+                            "id": "src/utils/interfaces.ts::IMapInfo"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "string: Id of the zoom level from URL params"
+                    "text": "IMapInfo[]: array of map infos (name and id)"
                 },
-                "attribute": "level",
-                "reflect": false
+                "defaultValue": "[]"
             },
-            "reportButtonText": {
+            "mapView": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "__esri.MapView",
+                    "resolved": "MapView",
+                    "references": {
+                        "___esri": {
+                            "location": "global",
+                            "id": "global::___esri"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
+                }
+            },
+            "objectId": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -987,12 +1230,12 @@ export class CrowdsourceReporter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "string: The word(s) to display in the reports submit button"
+                    "text": "string: Object id of the feature from URL params"
                 },
-                "attribute": "report-button-text",
+                "attribute": "object-id",
                 "reflect": false
             },
-            "reportsHeader": {
+            "reportButtonText": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -1004,9 +1247,9 @@ export class CrowdsourceReporter {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "string: The word(s) to display in the reports header"
+                    "text": "string: The word(s) to display in the reports submit button"
                 },
-                "attribute": "reports-header",
+                "attribute": "report-button-text",
                 "reflect": false
             },
             "reportingOptions": {
@@ -1030,6 +1273,23 @@ export class CrowdsourceReporter {
                     "text": "IReportingOptions: Key options for reporting"
                 }
             },
+            "reportsHeader": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: The word(s) to display in the reports header"
+                },
+                "attribute": "reports-header",
+                "reflect": false
+            },
             "reportSubmittedMessage": {
                 "type": "string",
                 "mutable": false,
@@ -1085,82 +1345,6 @@ export class CrowdsourceReporter {
                 "attribute": "show-comments",
                 "reflect": false
             },
-            "defaultWebmap": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "string: Item ID of the web map that should be selected by default"
-                },
-                "attribute": "default-webmap",
-                "reflect": false,
-                "defaultValue": "\"\""
-            },
-            "enableSearch": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "boolean: when true the search widget will be available"
-                },
-                "attribute": "enable-search",
-                "reflect": false,
-                "defaultValue": "true"
-            },
-            "enableHome": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "boolean: when true the home widget will be available"
-                },
-                "attribute": "enable-home",
-                "reflect": false,
-                "defaultValue": "true"
-            },
-            "mapInfos": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "IMapInfo[]",
-                    "resolved": "IMapInfo[]",
-                    "references": {
-                        "IMapInfo": {
-                            "location": "import",
-                            "path": "../../utils/interfaces",
-                            "id": "src/utils/interfaces.ts::IMapInfo"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "IMapInfo[]: array of map infos (name and id)"
-                },
-                "defaultValue": "[]"
-            },
             "theme": {
                 "type": "string",
                 "mutable": false,
@@ -1185,24 +1369,6 @@ export class CrowdsourceReporter {
                 "reflect": false,
                 "defaultValue": "\"light\""
             },
-            "enableZoom": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "boolean: when true the zoom widget will be available"
-                },
-                "attribute": "enable-zoom",
-                "reflect": false,
-                "defaultValue": "true"
-            },
             "zoomToScale": {
                 "type": "number",
                 "mutable": false,
@@ -1219,46 +1385,29 @@ 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)"
-                },
-                "defaultValue": "[]"
             }
         };
     }
     static get states() {
         return {
-            "_mapInfo": {},
+            "_featureCreationFailedErrorMsg": {},
+            "_filterActive": {},
+            "_filterOpen": {},
             "_flowItems": {},
-            "_sidePanelCollapsed": {},
-            "_translations": {},
             "_hasValidLayers": {},
-            "_selectedLayerName": {},
+            "_loadingFeatureDetails": {},
+            "_mapInfo": {},
             "_reportSubmitted": {},
+            "_selectedLayerName": {},
             "_showSubmitCancelButton": {},
-            "_loadingFeatureDetails": {},
-            "_featureCreationFailedErrorMsg": {},
+            "_showLoadingIndicator": {},
+            "_sidePanelCollapsed": {},
+            "_translations": {},
             "_updatedProgressBarStatus": {},
-            "_filterOpen": {},
-            "_filterActive": {}
+            "_updatedSorting": {},
+            "_updatedSortOption": {},
+            "_commentSubmitted": {},
+            "_addingCommentFailed": {}
         };
     }
     static get events() {