@esri/solutions-components 0.8.13 → 0.8.15

package/dist/components/crowdsource-reporter.js

@@ -3,48 +3,49 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { l as loadModules } from './loadModules.js';
-import { a as getAllLayers, c as getFeatureLayerView, h as highlightFeatures, d as getMapLayerHash, g as getLayerOrTable } from './mapViewUtils.js';
+import { g as getLayerOrTable, a as getAllLayers, f as getAllTables, c as getFeatureLayerView, h as highlightFeatures, d as getMapLayerHash } from './mapViewUtils.js';
 import { q as queryFeaturesByID } from './queryUtils.js';
-import { d as defineCustomElement$K } from './action.js';
-import { d as defineCustomElement$J } from './action-menu.js';
-import { d as defineCustomElement$I } from './alert.js';
-import { d as defineCustomElement$H } from './block.js';
-import { d as defineCustomElement$G } from './button.js';
-import { d as defineCustomElement$F } from './checkbox.js';
-import { d as defineCustomElement$E } from './chip.js';
-import { d as defineCustomElement$D } from './combobox.js';
-import { d as defineCustomElement$C } from './combobox-item.js';
-import { d as defineCustomElement$B } from './date-picker.js';
-import { d as defineCustomElement$A } from './date-picker-day.js';
-import { d as defineCustomElement$z } from './date-picker-month.js';
-import { d as defineCustomElement$y } from './date-picker-month-header.js';
-import { d as defineCustomElement$x } from './filter2.js';
-import { d as defineCustomElement$w } from './flow.js';
-import { d as defineCustomElement$v } from './flow-item.js';
-import { d as defineCustomElement$u } from './graph.js';
-import { d as defineCustomElement$t } from './handle.js';
-import { d as defineCustomElement$s } from './icon.js';
-import { d as defineCustomElement$r } from './input.js';
-import { d as defineCustomElement$q } from './input-date-picker.js';
-import { d as defineCustomElement$p } from './input-text.js';
-import { d as defineCustomElement$o } from './list.js';
-import { d as defineCustomElement$n } from './list-item.js';
-import { d as defineCustomElement$m } from './loader.js';
-import { d as defineCustomElement$l } from './modal.js';
-import { d as defineCustomElement$k } from './notice.js';
-import { d as defineCustomElement$j } from './pagination.js';
-import { d as defineCustomElement$i } from './panel.js';
-import { d as defineCustomElement$h } from './popover.js';
-import { d as defineCustomElement$g } from './progress.js';
-import { d as defineCustomElement$f } from './scrim.js';
-import { d as defineCustomElement$e } from './shell.js';
-import { d as defineCustomElement$d } from './slider.js';
-import { d as defineCustomElement$c } from './stack.js';
-import { d as defineCustomElement$b } from './tooltip.js';
-import { d as defineCustomElement$a } from './create-feature2.js';
+import { d as defineCustomElement$L } from './action.js';
+import { d as defineCustomElement$K } from './action-menu.js';
+import { d as defineCustomElement$J } from './alert.js';
+import { d as defineCustomElement$I } from './block.js';
+import { d as defineCustomElement$H } from './button.js';
+import { d as defineCustomElement$G } from './checkbox.js';
+import { d as defineCustomElement$F } from './chip.js';
+import { d as defineCustomElement$E } from './combobox.js';
+import { d as defineCustomElement$D } from './combobox-item.js';
+import { d as defineCustomElement$C } from './date-picker.js';
+import { d as defineCustomElement$B } from './date-picker-day.js';
+import { d as defineCustomElement$A } from './date-picker-month.js';
+import { d as defineCustomElement$z } from './date-picker-month-header.js';
+import { d as defineCustomElement$y } from './filter2.js';
+import { d as defineCustomElement$x } from './flow.js';
+import { d as defineCustomElement$w } from './flow-item.js';
+import { d as defineCustomElement$v } from './graph.js';
+import { d as defineCustomElement$u } from './handle.js';
+import { d as defineCustomElement$t } from './icon.js';
+import { d as defineCustomElement$s } from './input.js';
+import { d as defineCustomElement$r } from './input-date-picker.js';
+import { d as defineCustomElement$q } from './input-text.js';
+import { d as defineCustomElement$p } from './list.js';
+import { d as defineCustomElement$o } from './list-item.js';
+import { d as defineCustomElement$n } from './loader.js';
+import { d as defineCustomElement$m } from './modal.js';
+import { d as defineCustomElement$l } from './notice.js';
+import { d as defineCustomElement$k } from './pagination.js';
+import { d as defineCustomElement$j } from './panel.js';
+import { d as defineCustomElement$i } from './popover.js';
+import { d as defineCustomElement$h } from './progress.js';
+import { d as defineCustomElement$g } from './scrim.js';
+import { d as defineCustomElement$f } from './shell.js';
+import { d as defineCustomElement$e } from './slider.js';
+import { d as defineCustomElement$d } from './stack.js';
+import { d as defineCustomElement$c } from './tooltip.js';
+import { d as defineCustomElement$b } from './create-feature2.js';
+import { d as defineCustomElement$a } from './create-related-feature2.js';
 import { d as defineCustomElement$9 } from './delete-button2.js';
 import { d as defineCustomElement$8 } from './edit-card2.js';
 import { d as defineCustomElement$7 } from './feature-details2.js';
@@ -54,7 +55,7 @@ import { d as defineCustomElement$4 } from './instant-apps-filter-list2.js';
 import { d as defineCustomElement$3 } from './instant-apps-social-share2.js';
 import { d as defineCustomElement$2 } from './layer-list2.js';
 
-const crowdsourceReporterCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100% !important}.width-0{width:0}.height-full{height:100% !important}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.notice-msg{padding:10px;width:calc(100% - 20px)}.progress-bar{padding:12px}.footer-top-button{padding-bottom:7px}.footer-button{height:35px}.feature-pagination{align-items:center;margin:5% 124%;display:flex}.pagination-count{width:32px;color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand)}.report-submitted-msg{position:absolute;z-index:1000}";
+const crowdsourceReporterCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100% !important}.width-0{width:0}.height-full{height:100% !important}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.notice-msg{padding:10px;width:calc(100% - 20px)}.progress-bar{padding:12px}.footer-top-button{padding-bottom:7px}.footer-button{height:35px}.feature-pagination{align-items:center;margin:5% 124%;display:flex}.pagination-count{width:32px;color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand);font-weight:bold}.report-submitted-msg{position:absolute;z-index:1000}";
 const CrowdsourceReporterStyle0 = crowdsourceReporterCss;
 
 const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceReporter extends HTMLElement {
@@ -62,48 +63,52 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         super();
         this.__registerHost();
         this.togglePanel = createEvent(this, "togglePanel", 7);
-        //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;
     }
     //--------------------------------------------------------------------------
     //
@@ -130,10 +135,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     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]);
     }
     //--------------------------------------------------------------------------
@@ -153,7 +158,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         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();
@@ -164,7 +169,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     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()));
     }
     //--------------------------------------------------------------------------
     //
@@ -189,8 +194,9 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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
@@ -221,6 +227,12 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
                 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";
@@ -237,7 +249,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         //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
@@ -255,6 +267,28 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     _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
@@ -266,7 +300,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         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() {
@@ -284,7 +318,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     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
@@ -292,7 +326,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     getChooseCategoryFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true, "full-width": true }, h("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
@@ -300,7 +334,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("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
@@ -328,7 +362,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * On back from create feature, call submit editor to destroy the Editor widget instance
      * @protected
      */
-    onSubmitButtonClick() {
+    onCreateFeatureSubmitButtonClick() {
         if (this._createFeature) {
             void this._createFeature.submit();
         }
@@ -343,6 +377,26 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         }
         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
@@ -360,6 +414,29 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         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
@@ -371,7 +448,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         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"];
@@ -387,7 +464,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     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"];
@@ -429,7 +506,13 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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"];
     }
     /**
@@ -439,8 +522,11 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     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();
@@ -461,15 +547,35 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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
@@ -481,16 +587,18 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     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
@@ -500,27 +608,47 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     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 = '';
         }
@@ -624,7 +752,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             // 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") {
@@ -653,7 +781,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
    * @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)
@@ -676,7 +804,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     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) {
@@ -712,7 +840,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             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'];
     }
     /**
@@ -782,46 +910,52 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     }; }
     static get style() { return CrowdsourceReporterStyle0; }
 }, [0, "crowdsource-reporter", {
+        "center": [1],
+        "coverPageEnabled": [1, "cover-page-enabled"],
+        "defaultWebmap": [1, "default-webmap"],
         "description": [1],
-        "isMobile": [4, "is-mobile"],
         "enableAnonymousAccess": [4, "enable-anonymous-access"],
         "enableAnonymousComments": [4, "enable-anonymous-comments"],
         "enableComments": [4, "enable-comments"],
+        "enableHome": [4, "enable-home"],
         "enableLogin": [4, "enable-login"],
         "enableNewReports": [4, "enable-new-reports"],
+        "enableSearch": [4, "enable-search"],
+        "enableZoom": [4, "enable-zoom"],
+        "isMobile": [4, "is-mobile"],
+        "layerExpressions": [16],
+        "layerId": [1, "layer-id"],
+        "level": [1],
         "loginTitle": [1, "login-title"],
+        "mapInfos": [16],
         "mapView": [16],
-        "layerId": [1, "layer-id"],
         "objectId": [1, "object-id"],
-        "center": [1],
-        "level": [1],
         "reportButtonText": [1, "report-button-text"],
-        "reportsHeader": [1, "reports-header"],
         "reportingOptions": [16],
+        "reportsHeader": [1, "reports-header"],
         "reportSubmittedMessage": [1, "report-submitted-message"],
         "searchConfiguration": [16],
         "showComments": [4, "show-comments"],
-        "defaultWebmap": [1, "default-webmap"],
-        "enableSearch": [4, "enable-search"],
-        "enableHome": [4, "enable-home"],
-        "mapInfos": [16],
         "theme": [1],
-        "enableZoom": [4, "enable-zoom"],
         "zoomToScale": [2, "zoom-to-scale"],
-        "layerExpressions": [16],
-        "_mapInfo": [32],
+        "_featureCreationFailedErrorMsg": [32],
+        "_filterActive": [32],
+        "_filterOpen": [32],
         "_flowItems": [32],
-        "_sidePanelCollapsed": [32],
-        "_translations": [32],
         "_hasValidLayers": [32],
-        "_selectedLayerName": [32],
+        "_loadingFeatureDetails": [32],
+        "_mapInfo": [32],
         "_reportSubmitted": [32],
+        "_selectedLayerName": [32],
         "_showSubmitCancelButton": [32],
-        "_loadingFeatureDetails": [32],
-        "_featureCreationFailedErrorMsg": [32],
+        "_showLoadingIndicator": [32],
+        "_sidePanelCollapsed": [32],
+        "_translations": [32],
         "_updatedProgressBarStatus": [32],
-        "_filterOpen": [32],
-        "_filterActive": [32]
+        "_updatedSorting": [32],
+        "_updatedSortOption": [32],
+        "_commentSubmitted": [32],
+        "_addingCommentFailed": [32]
     }, [[8, "selectionChanged", "selectionChanged"]], {
         "isMobile": ["isMobileWatchHandler"],
         "mapView": ["mapViewWatchHandler"]
@@ -830,7 +964,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["crowdsource-reporter", "calcite-action", "calcite-action-menu", "calcite-alert", "calcite-block", "calcite-button", "calcite-checkbox", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-date-picker", "calcite-date-picker-day", "calcite-date-picker-month", "calcite-date-picker-month-header", "calcite-filter", "calcite-flow", "calcite-flow-item", "calcite-graph", "calcite-handle", "calcite-icon", "calcite-input", "calcite-input-date-picker", "calcite-input-text", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-pagination", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-shell", "calcite-slider", "calcite-stack", "calcite-tooltip", "create-feature", "delete-button", "edit-card", "feature-details", "feature-list", "info-card", "instant-apps-filter-list", "instant-apps-social-share", "layer-list"];
+    const components = ["crowdsource-reporter", "calcite-action", "calcite-action-menu", "calcite-alert", "calcite-block", "calcite-button", "calcite-checkbox", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-date-picker", "calcite-date-picker-day", "calcite-date-picker-month", "calcite-date-picker-month-header", "calcite-filter", "calcite-flow", "calcite-flow-item", "calcite-graph", "calcite-handle", "calcite-icon", "calcite-input", "calcite-input-date-picker", "calcite-input-text", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-pagination", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-shell", "calcite-slider", "calcite-stack", "calcite-tooltip", "create-feature", "create-related-feature", "delete-button", "edit-card", "feature-details", "feature-list", "info-card", "instant-apps-filter-list", "instant-apps-social-share", "layer-list"];
     components.forEach(tagName => { switch (tagName) {
         case "crowdsource-reporter":
             if (!customElements.get(tagName)) {
@@ -839,185 +973,190 @@ function defineCustomElement$1() {
             break;
         case "calcite-action":
             if (!customElements.get(tagName)) {
-                defineCustomElement$K();
+                defineCustomElement$L();
             }
             break;
         case "calcite-action-menu":
             if (!customElements.get(tagName)) {
-                defineCustomElement$J();
+                defineCustomElement$K();
             }
             break;
         case "calcite-alert":
             if (!customElements.get(tagName)) {
-                defineCustomElement$I();
+                defineCustomElement$J();
             }
             break;
         case "calcite-block":
             if (!customElements.get(tagName)) {
-                defineCustomElement$H();
+                defineCustomElement$I();
             }
             break;
         case "calcite-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$G();
+                defineCustomElement$H();
             }
             break;
         case "calcite-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$F();
+                defineCustomElement$G();
             }
             break;
         case "calcite-chip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$E();
+                defineCustomElement$F();
             }
             break;
         case "calcite-combobox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$D();
+                defineCustomElement$E();
             }
             break;
         case "calcite-combobox-item":
             if (!customElements.get(tagName)) {
-                defineCustomElement$C();
+                defineCustomElement$D();
             }
             break;
         case "calcite-date-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$B();
+                defineCustomElement$C();
             }
             break;
         case "calcite-date-picker-day":
             if (!customElements.get(tagName)) {
-                defineCustomElement$A();
+                defineCustomElement$B();
             }
             break;
         case "calcite-date-picker-month":
             if (!customElements.get(tagName)) {
-                defineCustomElement$z();
+                defineCustomElement$A();
             }
             break;
         case "calcite-date-picker-month-header":
             if (!customElements.get(tagName)) {
-                defineCustomElement$y();
+                defineCustomElement$z();
             }
             break;
         case "calcite-filter":
             if (!customElements.get(tagName)) {
-                defineCustomElement$x();
+                defineCustomElement$y();
             }
             break;
         case "calcite-flow":
             if (!customElements.get(tagName)) {
-                defineCustomElement$w();
+                defineCustomElement$x();
             }
             break;
         case "calcite-flow-item":
             if (!customElements.get(tagName)) {
-                defineCustomElement$v();
+                defineCustomElement$w();
             }
             break;
         case "calcite-graph":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$v();
             }
             break;
         case "calcite-handle":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$u();
             }
             break;
         case "calcite-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "calcite-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "calcite-input-date-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "calcite-input-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "calcite-list":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "calcite-list-item":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "calcite-loader":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "calcite-modal":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "calcite-notice":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "calcite-pagination":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$k();
             }
             break;
         case "calcite-panel":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$j();
             }
             break;
         case "calcite-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$i();
             }
             break;
         case "calcite-progress":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$h();
             }
             break;
         case "calcite-scrim":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$g();
             }
             break;
         case "calcite-shell":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$f();
             }
             break;
         case "calcite-slider":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "calcite-stack":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "calcite-tooltip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "create-feature":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "create-related-feature":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }