@esri/solutions-components 0.8.22 → 0.8.24

package/dist/collection/collection-manifest.json

@@ -1,5 +1,6 @@
 {
   "entries": [
+    "components/layer-list/layer-list.js",
     "components/arcgis-login/arcgis-login.js",
     "components/basemap-gallery/basemap-gallery.js",
     "components/buffer-tools/buffer-tools.js",
@@ -8,7 +9,6 @@
     "components/create-feature/create-feature.js",
     "components/create-related-feature/create-related-feature.js",
     "components/crowdsource-manager/crowdsource-manager.js",
-    "components/layer-list/layer-list.js",
     "components/crowdsource-reporter/crowdsource-reporter.js",
     "components/deduct-calculator/deduct-calculator.js",
     "components/delete-button/delete-button.js",
@@ -180,6 +180,7 @@
       "tags": [
         "instant-apps-ckeditor-wrapper",
         "instant-apps-control-panel",
+        "instant-apps-create",
         "instant-apps-export",
         "instant-apps-filter-list",
         "instant-apps-header",
@@ -204,6 +205,7 @@
         "instant-apps-popover",
         "instant-apps-popovers",
         "instant-apps-scoreboard",
+        "instant-apps-sign-in",
         "instant-apps-social-share",
         "instant-apps-splash"
       ]

package/dist/collection/components/arcgis-login/arcgis-login.js

@@ -56,7 +56,7 @@ export class ArcgisLogin {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: '7ef89062c15023c646a5134818900cc5b5ae2c43' }, h("slot", { key: 'a1698e009dd0e86591c4858f352186079e0299ed' })));
+        return (h(Host, { key: 'b71ecf635ef91c3604665890c3eec5c5bc51651c' }, h("slot", { key: '77c4af2284404bc351b1eb93a81b2151f8e8cce1' })));
     }
     static get is() { return "arcgis-login"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basemap-gallery/basemap-gallery.js

@@ -61,7 +61,7 @@ export class BasemapGallery {
      * StencilJS: Renders the component.
      */
     render() {
-        return (h(Host, { key: '9cef4efc85e1168ca8909f9e7d5cea48bf06b51c' }, h("div", { key: '837779b470b2170285fafeffa705d09f573dbfc6', ref: (el) => { this._basemapElement = el; } })));
+        return (h(Host, { key: '7fe5ef48d77de087f17498e2e1f3370a069e8629' }, h("div", { key: 'aca555c687352046a138343cab6f656234069644', ref: (el) => { this._basemapElement = el; } })));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.

package/dist/collection/components/buffer-tools/buffer-tools.js

@@ -84,7 +84,7 @@ export class BufferTools {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: 'b06e61d0e1cb18f0b7c34f51c74455a8d00c279b' }, this.appearance === "text" ? this._getTextBoxDisplay() : this._getSliderDisplay()));
+        return (h(Host, { key: '63b775eca8dd10785df7b58be3a79eaa6cf4c049' }, this.appearance === "text" ? this._getTextBoxDisplay() : this._getSliderDisplay()));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/card-manager/card-manager.js

@@ -86,7 +86,7 @@ export class CardManager {
         var _a, _b;
         const featuresClass = ((_a = this._graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "" : "display-none";
         const messageClass = ((_b = this._graphics) === null || _b === void 0 ? void 0 : _b.length) > 0 ? "display-none" : "";
-        return (h(Host, { key: 'c4b71cefeb5eec1e1312104c519dfb9ef1398d71' }, h("div", { key: '6c1539db40060f9295c8aa72af29eac5f9c67d8d', class: "overflow-auto height-full" }, h("calcite-shell", { key: '2a4f7b47e01e3f27528dbce5fe236187a0f57dab', class: "position-relative " + featuresClass }, h("div", { key: '4b226239c5b80210aa3d42d422bbc50a66bdcf59' }, h("info-card", { key: '23ec16e93def6ebf81ed86109a55aa3e667fb958', graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), h("calcite-shell", { key: '8b385e91e35cfa4dc14aa67f300badf627119c39', class: "position-relative " + messageClass }, h("div", { key: 'a4cca3a463dbe115638c3b15d4613f7d719f153f', class: "padding-1" }, h("calcite-notice", { key: '91047393ac4f19864179f97631ffcdf48aaa47c1', icon: "table", open: true }, h("div", { key: 'c81f06e628d2811c3cedbae6a3e38fb972d0a759', slot: "message" }, this._translations.selectFeaturesToStart)))))));
+        return (h(Host, { key: '343554e5408de156f1973f6d1e3daa8f1ba90675' }, h("div", { key: '1852562a795002314236052351cab7c29d36854e', class: "overflow-auto height-full" }, h("calcite-shell", { key: '684f013e4397bc50743526357384f782a88a5cd3', class: "position-relative " + featuresClass }, h("div", { key: 'db6d9f4be5448b5596b22f2a4f49c6baefa88466' }, h("info-card", { key: 'be5cec81cae7ca00a5b57c8d9590541f78b67fbd', graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView }))), h("calcite-shell", { key: 'df34e0ae6978298130970c60d21203f52fa32e4b', class: "position-relative " + messageClass }, h("div", { key: '9525a95dd21745e211ebf888da44eca6a6c17721', class: "padding-1" }, h("calcite-notice", { key: 'ade0e0a2f09bbe7b7bda6fdb2ce65ba81121e633', icon: "table", open: true }, h("div", { key: 'd6fce2d657e23738720e004177c510c3273017f4', slot: "message" }, this._translations.selectFeaturesToStart)))))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/create-feature/create-feature.js

@@ -88,7 +88,7 @@ export class CreateFeature {
      */
     render() {
         const showSearchWidget = this.showSearchWidget ? '' : 'display-none';
-        return (h(Fragment, { key: '66e42055c22a93c6d34440b65ac950a388639b9a' }, h("div", { key: 'fc4bf1fc039e4d914e416a394f0671712d116482', id: "feature-form" }), h("div", { key: 'aadd529366b2b85e60fdffc306cf41f37c2a6709', class: `search-widget ${showSearchWidget}`, id: "search-widget-ref" })));
+        return (h(Fragment, { key: 'e1427c13c0385279fcb0f122b50b891eac419ec4' }, h("div", { key: '039e8d8ff5792765c73cb23df37f37bacc0c9dda', id: "feature-form" }), h("div", { key: '94601056ec69000009f4b71b34a38cea28635d99', class: `search-widget ${showSearchWidget}`, id: "search-widget-ref" })));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/create-related-feature/create-related-feature.js

@@ -95,7 +95,7 @@ export class CreateRelatedFeature {
         this.reactiveUtils = reactiveUtils;
     }
     render() {
-        return (h(Host, { key: '9807b7dcad1f8305756e6098f1e64ef8caffcbac' }));
+        return (h(Host, { key: '579af77dcac88043b178e711e0b47d7982c1c87f' }));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.

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

@@ -53,7 +53,7 @@ export class CrowdsourceManager {
         this.defaultLevel = "";
         this.defaultOid = "";
         this.defaultWebmap = "";
-        this.introductionPageEnabled = false;
+        this.introductionWindowEnabled = false;
         this.enableAutoRefresh = false;
         this.enableBasemap = true;
         this.enableColumnReorder = true;
@@ -202,7 +202,7 @@ export class CrowdsourceManager {
     render() {
         // only avoid border when we have a header color that is not white
         const borderClass = this.popupHeaderColor && this.popupHeaderColor !== "#FFFFFF" ? "border-width-0" : "";
-        return (h(Host, { key: 'aa063ae3fc59a7f3969aaa5b569fbd0ef09a1766' }, h("calcite-shell", { key: 'd5d5cdb201c24f2123089c5cd5f70f973aa24e78', class: "position-relative" }, h("calcite-panel", { key: 'c95bb56946b85574825160acf1411fdf7308cc8c', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
+        return (h(Host, { key: '0f06df71cc424887b8dc4b4929670d94b6548085' }, h("calcite-shell", { key: 'c81a570fb771650de6193e45ffbebd03544eaf2e', class: "position-relative" }, h("calcite-panel", { key: '5e67c2bf9ed0df0080629989f93e89a145349abc', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render
@@ -323,13 +323,20 @@ export class CrowdsourceManager {
         const contentClass = layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
         return (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideTable), this._getTable(layoutMode, panelOpen, hideTable)), this.coverPageEnabled &&
+            h("div", { class: "floating-container", onClick: this.coverPageButtonClick.bind(this) }, h("calcite-button", { appearance: "solid", class: `floating-button ${themeClass}`, "icon-start": "content-minimal", kind: "neutral", label: "", round: true, scale: "l", "split-child": "primary", width: "auto" })), this.introductionWindowEnabled &&
             h("div", { class: "floating-container", onClick: this.infoButtonClick.bind(this) }, h("calcite-button", { appearance: "solid", class: `floating-button ${themeClass}`, "icon-start": "information-letter", kind: "neutral", label: "", round: true, scale: "l", "split-child": "primary", width: "auto" }))));
     }
     /**
      * Emit the event when info button clicked
      */
     infoButtonClick() {
-        this.infoIconButtonClick.emit();
+        this.showIntroductionWindow.emit();
+    }
+    /**
+   * Emit the event when cover page button clicked
+   */
+    coverPageButtonClick() {
+        this.showCoverPage.emit();
     }
     /**
      * Get the map and card nodes based for the current layout options
@@ -698,7 +705,7 @@ export class CrowdsourceManager {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
-            "introductionPageEnabled": {
+            "introductionWindowEnabled": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -710,9 +717,9 @@ export class CrowdsourceManager {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "boolean: When true a introduction 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 introduction page."
+                    "text": "boolean: When true a introduction window 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 introduction window."
                 },
-                "attribute": "introduction-page-enabled",
+                "attribute": "introduction-window-enabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
@@ -1210,8 +1217,8 @@ export class CrowdsourceManager {
     }
     static get events() {
         return [{
-                "method": "infoIconButtonClick",
-                "name": "infoIconButtonClick",
+                "method": "showIntroductionWindow",
+                "name": "showIntroductionWindow",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -1224,6 +1231,21 @@ export class CrowdsourceManager {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "showCoverPage",
+                "name": "showCoverPage",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when a cover page button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }

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

@@ -90,18 +90,6 @@ export class CrowdsourceReporter {
             await this.setMapView();
         });
     }
-    /**
-     * On Feature details change update the Layer title and the current selected layer id
-     * @param evt Event hold the details of current feature graphic in the info-card
-     */
-    async selectionChanged(evt) {
-        void this.updatingFeatureDetails(true);
-        await this.setCurrentFeature(evt.detail.selectedFeature[0]);
-        void this.highlightOnMap(evt.detail.selectedFeature[0]);
-        this._selectedFeatureIndex = evt.detail.selectedFeatureIndex;
-        //update the feature details to reflect the like, dislike and comment values
-        await this._featureDetails.refresh(evt.detail.selectedFeature[0]);
-    }
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -118,9 +106,9 @@ export class CrowdsourceReporter {
         await this._initModules();
         await this._getTranslations();
         await ((_a = this.mapView) === null || _a === void 0 ? void 0 : _a.when(async () => {
-            //set configured reporting layers array
+            //set configured layers array which are enabled for data collection
             this._layers = this.reportingOptions ? Object.keys(this.reportingOptions).filter((layerId) => {
-                return this.reportingOptions[layerId].reporting;
+                return this.reportingOptions[layerId].visible;
             }) : [];
             await this.setMapView();
         }));
@@ -130,7 +118,7 @@ export class CrowdsourceReporter {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: '530bb7e6dacde9109246733345157c95c1a50dcb' }, this._reportSubmitted && h("calcite-alert", { key: '52abbe347eb4adaf526a3194cb4d389326323d19', "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: '3251fcd334b449292d3597af996eb7eea08dd00e', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '0d0553df8133b8d20cc0f2d66a8462334117b5cf', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '81658d0eab5392cbddbcf42ccb0b79b0cebc22dd', slot: "title" }, this._translations.error), h("div", { key: 'e4a00bef08ca9121425fd4f3b8ac7bfffa70d371', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '97a200eebe63b3f6fb7515fa07c617d40f94815f', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: 'b9b01d82faded409059563840a4bc0ce3ef1faf7', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '3754d8a1d5d91ac3bf3b1bddc16f078170e61a80', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '977b632702e8dc176bd9a9c930c1492539689576', slot: "title" }, this._translations.error), h("div", { key: '45fa0ba61f3831a743b0cc7ae4aa10854b1a9ff5', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '57be499cc8fb87ca20c6efa65fbbe9cc47269906' }, h("calcite-shell", { key: '2ce48b4cdd0dc0dd52995cd7b32f476b14ddd49d', "content-behind": true }, this._getReporter())), this.filterModal()));
+        return (h(Host, { key: '25711a088216a3fcf2aa5d39b81ebd124f004306' }, this._reportSubmitted && h("calcite-alert", { key: 'b8cf62929599eb873a52c7e7a9b056e25fd86c2a', "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: '6411e0e7b57fd58f8ba7987331271f0494ba113b', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '67b28ad1e3493427227d2d59548a5eac80041dea', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '3ad206c32a217e6a9a5bb1e638ef3160fbff5db2', slot: "title" }, this._translations.error), h("div", { key: '7580dd6b3f81a9b0c4263fb9e71e2031e199b41d', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '7be4c3b5d07e9f30551d19990462bb3d1152b2a3', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '41c01a889ed6732cf7dabf0945fbfb261a0f3a3b', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '29bca2310f6877ec976fbe49ac39413593202a4d', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '8a7860934cebec53462c46e0d979268c75fb9705', slot: "title" }, this._translations.error), h("div", { key: 'd675ee393e81f5104d87391075a9ae89b4077a45', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '1fce11b73759bc751de763e040d15d85a3fb347d' }, h("calcite-shell", { key: '71634d0d1b0fcbe92813ff9b514ec4e752bd3fd1', "content-behind": true }, this._getReporter())), this.filterModal()));
     }
     //--------------------------------------------------------------------------
     //
@@ -165,6 +153,14 @@ export class CrowdsourceReporter {
             layer.set('visible', !layerId || (layer.id === layerId));
         });
     }
+    /**
+     * Returns the layers configuration
+     * @param layerId string layerId of the selected layer
+     * @returns Configuration for the layerId
+     */
+    _getLayersConfig(layerId) {
+        return this.reportingOptions && this.reportingOptions[layerId] ? this.reportingOptions[layerId] : null;
+    }
     /**
      * Get the reporter app functionality
      * @protected
@@ -288,7 +284,10 @@ 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, onLayerSelect: this.navigateToCreateFeature.bind(this), showFeatureCount: false, showNextIcon: false }))));
+        const onlyReportingLayers = this.reportingOptions ? Object.keys(this.reportingOptions).filter((layerId) => {
+            return this.reportingOptions[layerId].visible && this.reportingOptions[layerId].reporting && this._layerItemsHash[layerId] && this._layerItemsHash[layerId].supportsAdd;
+        }) : [];
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), h("layer-list", { class: "height-full", layers: onlyReportingLayers, mapView: this.mapView, onLayerSelect: this.navigateToCreateFeature.bind(this), showFeatureCount: false, showNextIcon: false }))));
     }
     /**
      * Get Feature create form of the selected feature layer
@@ -447,16 +446,22 @@ export class CrowdsourceReporter {
         const layersListed = evt.detail;
         //consider only the layers listed in the layer-list component
         const allMapLayers = await getAllLayers(this.mapView);
+        const reportingEnabledLayerIds = [];
         this._validLayers = [];
         allMapLayers.forEach((eachLayer) => {
+            var _a;
             if (layersListed.includes(eachLayer.id)) {
                 this._validLayers.push(eachLayer);
+                //create list of reporting enabled layers
+                if (((_a = this._getLayersConfig(eachLayer.id)) === null || _a === void 0 ? void 0 : _a.reporting) && this._layerItemsHash[eachLayer.id] && this._layerItemsHash[eachLayer.id].supportsAdd) {
+                    reportingEnabledLayerIds.push(eachLayer.id);
+                }
             }
         });
         //handleMap click on layer list loaded
         this.handleMapClick();
-        //update the has valid layer state
-        this._hasValidLayers = layersListed.length > 0;
+        //When we have any reporting layer then only show the create report button on layerList
+        this._hasValidLayers = reportingEnabledLayerIds.length > 0;
         //navigate to the feature details if URL params found
         if (!this._urlParamsLoaded) {
             this._urlParamsLoaded = true;
@@ -484,8 +489,9 @@ 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') {
+        // when back from comment details or add comment page don't clear the highlighted feature of map
+        if (!(updatedFlowItems[updatedFlowItems.length - 1] === 'comment-details' ||
+            updatedFlowItems[updatedFlowItems.length - 1] === 'add-comment')) {
             this.clearHighlights();
         }
         updatedFlowItems.pop();
@@ -530,6 +536,19 @@ export class CrowdsourceReporter {
     async updatingFeatureDetails(isLoading) {
         this._showLoadingIndicator = isLoading;
     }
+    /**
+   * On Feature details change update the Layer title and the current selected layer id
+   * @param evt Event hold the details of current feature graphic from the feature-details
+   * @protected
+   */
+    async selectionChanged(evt) {
+        void this.updatingFeatureDetails(true);
+        await this.setCurrentFeature(evt.detail.selectedFeature[0]);
+        void this.highlightOnMap(evt.detail.selectedFeature[0]);
+        this._selectedFeatureIndex = evt.detail.selectedFeatureIndex;
+        //update the feature details to reflect the like, dislike and comment values
+        await this._featureDetails.refresh(evt.detail.selectedFeature[0]);
+    }
     /**
      * When comment is selected from list store that and show comment details
      * @param evt Event which has details of selected feature
@@ -547,10 +566,11 @@ export class CrowdsourceReporter {
      * @protected
      */
     getFeatureListFlowItem(layerId, layerName) {
-        var _a;
+        var _a, _b;
         const layerExpressions = (_a = this.layerExpressions) === null || _a === void 0 ? void 0 : _a.filter((exp) => exp.id === this._selectedLayerId);
+        const canCreateReports = ((_b = this._getLayersConfig(this._selectedLayerId)) === null || _b === void 0 ? void 0 : _b.reporting) && this._layerItemsHash[this._selectedLayerId].supportsAdd;
         const showFilterIcon = (layerExpressions === null || layerExpressions === void 0 ? void 0 : layerExpressions.length) > 0;
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this._toggleSort(), h("calcite-action", { icon: "sort-ascending-arrow", id: "sort-popover", slot: "header-actions-end", text: this._translations.sort, title: this._translations.sort }), showFilterIcon && h("calcite-action", { icon: "filter", indicator: this._filterActive, onClick: this._toggleFilter.bind(this), slot: "header-actions-end", text: this._translations.filter, title: this._translations.filter }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports &&
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this._toggleSort(), h("calcite-action", { icon: "sort-ascending-arrow", id: "sort-popover", slot: "header-actions-end", text: this._translations.sort, title: this._translations.sort }), showFilterIcon && h("calcite-action", { icon: "filter", indicator: this._filterActive, onClick: this._toggleFilter.bind(this), slot: "header-actions-end", text: this._translations.filter, title: this._translations.filter }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && canCreateReports &&
             h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { class: "height-full", highlightOnHover: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, ref: el => this._featureList = el, selectedLayerId: layerId, sortingInfo: this._updatedSorting }))));
     }
     /**
@@ -558,8 +578,9 @@ export class CrowdsourceReporter {
      * @returns Node
      */
     getFeatureDetailsFlowItem() {
-        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 }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, 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 &&
+        var _a;
+        const showCommentBtn = ((_a = this._getLayersConfig(this._selectedLayerId)) === null || _a === void 0 ? void 0 : _a.comment) && this._selectedLayer.relationships.length > 0;
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, removePopoverOffset: true, scale: "s", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, h("feature-details", { class: 'full-height', graphics: this._selectedFeature, layerItemsHash: this._layerItemsHash, mapView: this.mapView, onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions }), showCommentBtn &&
             h("calcite-button", { appearance: "solid", onClick: () => this._flowItems = [...this._flowItems, "add-comment"], slot: "footer", width: "full" }, this._translations.comment))));
     }
     /**
@@ -575,7 +596,7 @@ export class CrowdsourceReporter {
      * @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 }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedRelatedFeature, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false }))));
     }
     /**
      * Returns the calcite-flow item for add comment
@@ -597,13 +618,14 @@ export class CrowdsourceReporter {
      * @param selectedFeature Graphic currently shown in feature details
      */
     async setCurrentFeature(selectedFeature) {
+        var _a;
         this._currentFeature = selectedFeature;
         if (selectedFeature && selectedFeature.layer) {
             const layer = selectedFeature.layer;
             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;
+            const isCommentTablePresent = ((_a = this._getLayersConfig(layer.id)) === null || _a === void 0 ? void 0 : _a.comment) && layer.relationships.length > 0;
             if (isCommentTablePresent) {
                 await this.getRelatedTable();
             }
@@ -717,12 +739,12 @@ export class CrowdsourceReporter {
                 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") {
-                    this._flowItems = [...this._flowItems, "feature-details"];
+                if (this._flowItems.length && this._flowItems.includes("feature-details")) {
+                    this._flowItems = [...this._flowItems.slice(0, this._flowItems.indexOf("feature-details") + 1)];
+                    await this.highlightOnMap(clickedGraphics[0]);
                 }
                 else {
-                    this._flowItems = [...this._flowItems];
-                    void this.highlightOnMap(clickedGraphics[0]);
+                    this._flowItems = [...this._flowItems, "feature-details"];
                 }
             }
             // if clicked graphic's layer is from non reporting layers then show popup on map
@@ -765,13 +787,10 @@ export class CrowdsourceReporter {
      * @returns array of editable layer ids
      */
     reduceToConfiguredLayers(hash) {
-        var _a;
-        const configuredLayers = ((_a = this._layers) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this._layers : [];
         return Object.keys(hash).reduce((prev, cur) => {
-            let showLayer = hash[cur].supportsAdd;
-            if ((configuredLayers === null || configuredLayers === void 0 ? void 0 : configuredLayers.length) > 0) {
-                showLayer = configuredLayers.indexOf(cur) > -1 ? hash[cur].supportsAdd : false;
-            }
+            // check if reporting options exists consider the visible prop if else just check the supports Add
+            const showLayer = this.reportingOptions ? this._getLayersConfig(cur).visible
+                : hash[cur].supportsAdd;
             if (showLayer) {
                 prev.push(cur);
             }
@@ -792,18 +811,19 @@ export class CrowdsourceReporter {
             }
         });
         this._editableLayerIds = this.reduceToConfiguredLayers(layerItemsHash);
+        this._layerItemsHash = layerItemsHash;
     }
     /**
      * renders feature list
      * @protected
      */
     async renderFeaturesList() {
+        this._flowItems = ['feature-list'];
         const evt = {
             detail: this._editableLayerIds
         };
         await this.layerListLoaded(evt);
         void this.setSelectedLayer(this._validLayers[0].id, this._validLayers[0].title);
-        this._flowItems = ['feature-list'];
     }
     /**
      * Updates the share url for current selected feature
@@ -1421,13 +1441,4 @@ export class CrowdsourceReporter {
                 "methodName": "mapViewWatchHandler"
             }];
     }
-    static get listeners() {
-        return [{
-                "name": "selectionChanged",
-                "method": "selectionChanged",
-                "target": "window",
-                "capture": false,
-                "passive": false
-            }];
-    }
 }

package/dist/collection/components/feature-details/feature-details.css

@@ -5,7 +5,7 @@
 .buttons-container{
   align-items: center;
   display: flex;
-  padding: 10px 0 10px 15px;
+  padding: 10px;
   color: var(--calcite-color-text-1) !important;
   background-color: var(--calcite-color-foreground-1) !important;
   border-block-start: 1px solid var(--calcite-color-border-3);
@@ -15,7 +15,7 @@
 .comment-btn{
   display: flex;
   gap: 5px;
-  width: 37px;
   font-size: var(--calcite-font-size--2);
   align-items: center;
+  padding: 0 0.5rem;
 }

package/dist/collection/components/feature-details/feature-details.js

@@ -30,6 +30,7 @@ export class FeatureDetails {
         this.mapView = undefined;
         this.graphics = undefined;
         this.reportingOptions = undefined;
+        this.layerItemsHash = undefined;
         this._likeFieldAvailable = false;
         this._likeCount = 0;
         this._disLikeCount = 0;
@@ -109,12 +110,12 @@ export class FeatureDetails {
         var _a, _b, _c, _d, _e;
         //When related features found show comments list of only those features else comments list will be empty
         const commentsListWhereClause = ((_a = this._relatedFeaturesOIDs) === null || _a === void 0 ? void 0 : _a.length) > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : '1=0';
-        return (h("calcite-panel", { key: 'b8d1cc9d4d9040665be3c892f5738a179ab64eaf', "full-height": true }, h("info-card", { key: '0a31a068a4e80e34ba2435a7d8d8faaea271dac8', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el, zoomAndScrollToSelected: true }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
-            h("div", { key: '8e27d13341a9b4ad37f87778e046a4e8e0b2778e', class: "buttons-container" }, this._commentsAvailable &&
-                h("div", { key: '3dd02fdbc107e7ce04e8aabb96a6748b68eeec6b', class: "comment-btn" }, h("span", { key: '5601fdb24ff385e0b6d2b9e5b86bde06b3c2d1b8' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: '97a517d117a4d5a8c6798da9c9c82e46c39c25f8', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
-                h("calcite-button", { key: '0d1ff14be9396ab3ff634e92208792f5fd3b8d36', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", onClick: this.onLikeButtonClick.bind(this), scale: 's' }, (_c = (_b = this._likeCount) !== null && _b !== void 0 ? _b : this._selectedGraphic.attributes[this._likeField]) !== null && _c !== void 0 ? _c : 0), this._dislikeFieldAvailable &&
-                h("calcite-button", { key: '34e362e083dbc13dffae7ad5544aa33a0421a51a', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", onClick: this.onDislikeButtonClick.bind(this), scale: 's' }, (_e = (_d = this._disLikeCount) !== null && _d !== void 0 ? _d : this._selectedGraphic.attributes[this._dislikeField]) !== null && _e !== void 0 ? _e : 0)), this.relatedTableId && this._commentsAvailable &&
-            h("feature-list", { key: '4abc53ab7679b07f0dd7413b97f447da736e5002', class: "height-full", mapView: this.mapView, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showInitialLoading: false, textSize: "small", whereClause: commentsListWhereClause })));
+        return (h("calcite-panel", { key: 'f8d1d282a6ebdb4d5a64efd96d88329d375b7fe1', "full-height": true }, h("info-card", { key: '3cfca85af149ab445973510ff1a9f94e22c5c833', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, onSelectionChanged: (e) => { this.featureSelectionChange.emit(e.detail); }, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
+            h("div", { key: 'a3242d417cef788f0f677bf21c65fb9aaa44f8b2', class: "buttons-container" }, this._commentsAvailable &&
+                h("div", { key: '9dcfccc0a48b719d14cb08737d654000a27e21cc', class: "comment-btn" }, h("span", { key: 'b68cafd0cebfa91c12f32f648ec2f71a51e3b9da' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: 'f2b9c34ac64a5cb7692f80cd73658f077525eee4', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
+                h("calcite-button", { key: '7a4ec79205b3eccceb7d43de2c227d8407c24a26', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", onClick: this.onLikeButtonClick.bind(this), scale: 's' }, (_c = (_b = this._likeCount) !== null && _b !== void 0 ? _b : this._selectedGraphic.attributes[this._likeField]) !== null && _c !== void 0 ? _c : 0), this._dislikeFieldAvailable &&
+                h("calcite-button", { key: '4634f8aeb114f97c9ceaae8eac5da86afa89f217', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", onClick: this.onDislikeButtonClick.bind(this), scale: 's' }, (_e = (_d = this._disLikeCount) !== null && _d !== void 0 ? _d : this._selectedGraphic.attributes[this._dislikeField]) !== null && _e !== void 0 ? _e : 0)), this.relatedTableId && this._commentsAvailable &&
+            h("feature-list", { key: '30559c6f28a741264972677cef1f182f1012f73f', class: "height-full", mapView: this.mapView, onFeatureSelect: (e) => { this.commentSelect.emit(e.detail); }, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showErrorWhenNoFeatures: false, showInitialLoading: false, textSize: "small", whereClause: commentsListWhereClause })));
     }
     /**
      * Load esri javascript api modules
@@ -151,7 +152,8 @@ export class FeatureDetails {
     async processComments() {
         var _a;
         const selectedLayer = this._selectedGraphic.layer;
-        const commentsConfigured = this.reportingOptions[selectedLayer.id].comment && ((_a = selectedLayer.relationships) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        const commentsConfigured = this.reportingOptions && this.reportingOptions[selectedLayer.id] &&
+            this.reportingOptions[selectedLayer.id].comment && ((_a = selectedLayer.relationships) === null || _a === void 0 ? void 0 : _a.length) > 0;
         if (commentsConfigured) {
             //Get comments table id from map
             const relatedTableIdFromRelnship = selectedLayer.relationships[0].relatedTableId;
@@ -216,7 +218,7 @@ export class FeatureDetails {
             }
             //Check if selected layer have the configured like and dislike field and it is of integer types
             selectedLayer.fields.forEach((eachField) => {
-                if (this._validFieldTypes.indexOf(eachField.type) > -1) {
+                if (this._validFieldTypes.indexOf(eachField.type) > -1 && this.layerItemsHash[selectedLayer.id].supportsUpdate) {
                     if (eachField.name === likeField && this.reportingOptions[selectedLayer.id].like) {
                         likeFieldAvailable = true;
                     }
@@ -251,12 +253,12 @@ export class FeatureDetails {
             //Check if selected layer have the configured like and dislike fields
             //also, get the current value for like and dislike field from the attributes
             selectedLayer.fields.forEach((eachField) => {
-                if (this._validFieldTypes.indexOf(eachField.type) > -1) {
-                    if (eachField.name === this._likeField && this.reportingOptions[this._selectedGraphic.layer.id].like) {
+                if (this._validFieldTypes.indexOf(eachField.type) > -1 && this.layerItemsHash[selectedLayer.id].supportsUpdate) {
+                    if (eachField.name === this._likeField && this.reportingOptions[selectedLayer.id].like) {
                         this._likeFieldAvailable = true;
                         this._likeCount = this._selectedGraphic.attributes[eachField.name];
                     }
-                    else if (eachField.name === this._dislikeField && this.reportingOptions[this._selectedGraphic.layer.id].dislike) {
+                    else if (eachField.name === this._dislikeField && this.reportingOptions[selectedLayer.id].dislike) {
                         this._dislikeFieldAvailable = true;
                         this._disLikeCount = this._selectedGraphic.attributes[eachField.name];
                     }
@@ -455,6 +457,27 @@ export class FeatureDetails {
                     "tags": [],
                     "text": "IReportingOptions: Key options for reporting"
                 }
+            },
+            "layerItemsHash": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ILayerItemsHash",
+                    "resolved": "ILayerItemsHash",
+                    "references": {
+                        "ILayerItemsHash": {
+                            "location": "import",
+                            "path": "../layer-list/layer-list",
+                            "id": "src/components/layer-list/layer-list.tsx::ILayerItemsHash"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ILayerItemsHash: LayerDetailsHash for each layer in the map"
+                }
             }
         };
     }
@@ -487,8 +510,8 @@ export class FeatureDetails {
                     "references": {}
                 }
             }, {
-                "method": "featureSelect",
-                "name": "featureSelect",
+                "method": "commentSelect",
+                "name": "commentSelect",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -506,6 +529,26 @@ export class FeatureDetails {
                         }
                     }
                 }
+            }, {
+                "method": "featureSelectionChange",
+                "name": "featureSelectionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when the selected index changes"
+                },
+                "complexType": {
+                    "original": "{ selectedFeature: __esri.Graphic[], selectedFeatureIndex: number }",
+                    "resolved": "{ selectedFeature: Graphic[]; selectedFeatureIndex: number; }",
+                    "references": {
+                        "___esri": {
+                            "location": "global",
+                            "id": "global::___esri"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {

package/dist/collection/components/feature-list/feature-list.css

@@ -38,6 +38,6 @@
 }
 
 .feature-list-popup-title-small {
-  font-size: x-small;
+  font-size: small;
   padding: 10px 12px;
 }