@esri/solutions-components 0.8.22 → 0.8.24

package/dist/components/calcite-navigation-user.js

@@ -3,105 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
-import { d as defineCustomElement$3 } from './avatar.js';
-import { d as defineCustomElement$2 } from './icon.js';
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
- */
-const CSS = {
-    textContainer: "text-container",
-    fullName: "full-name",
-    username: "username",
-    button: "button",
-};
-
-const navigationUserCss = ":host{display:inline-flex;outline:2px solid transparent;outline-offset:2px}:host .button{background-color:transparent;border:none;margin:0px;display:flex;cursor:pointer;align-items:center;justify-content:center;font-family:var(--calcite-font-family);font-size:var(--calcite-font-size-0);line-height:1.25rem;outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end:2px solid transparent}:host(:hover) .button,:host(:focus) .button{background-color:var(--calcite-color-foreground-2)}:host(:focus) .button{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host(:active) .button{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}:host([active]) .button{border-color:var(--calcite-color-brand);color:var(--calcite-color-text-1);--calcite-ui-icon-color:var(--calcite-color-brand)}.text-container{margin-block-start:0.125rem;display:flex;flex-direction:column;padding-inline:1rem;text-align:start}calcite-avatar{padding-inline:1rem}calcite-avatar~.text-container{padding-inline-start:0px}.full-name{margin-inline-start:0px;font-size:var(--calcite-font-size-0);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}.username{color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host([hidden]){display:none}[hidden]{display:none}";
-const CalciteNavigationUserStyle0 = navigationUserCss;
-
-const CalciteNavigationUser$1 = /*@__PURE__*/ proxyCustomElement(class CalciteNavigationUser extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.active = undefined;
-        this.fullName = undefined;
-        this.label = undefined;
-        this.textDisabled = false;
-        this.thumbnail = undefined;
-        this.userId = undefined;
-        this.username = undefined;
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Public Methods
-    //
-    //--------------------------------------------------------------------------
-    /** Sets focus on the component. */
-    async setFocus() {
-        await componentFocusable(this);
-        this.el.focus();
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    //--------------------------------------------------------------------------
-    componentWillLoad() {
-        setUpLoadableComponent(this);
-    }
-    componentDidLoad() {
-        setComponentLoaded(this);
-    }
-    // --------------------------------------------------------------------------
-    //
-    //  Render Methods
-    //
-    // --------------------------------------------------------------------------
-    render() {
-        return (h(Host, { key: '869bc0b518ff407bf3f110ebda48571f456229a8' }, h("button", { key: '0cb5497ebcbf9fad2bfb6ffdd3bfad151594460d', "aria-label": this.label, class: CSS.button }, h("calcite-avatar", { key: '6de54637d077afa83f7520636037b6da33b24334', "full-name": this.fullName, label: this.label, thumbnail: this.thumbnail, "user-id": this.userId, username: this.username }), (this.fullName || this.username) && !this.textDisabled && (h("div", { key: '0d0be3d6ba276d6c3e24a67b7085dd75e56b3e5b', class: CSS.textContainer }, this.fullName && (h("span", { class: CSS.fullName, key: CSS.fullName }, this.fullName)), this.username && (h("span", { class: CSS.username, key: CSS.username }, this.username)))))));
-    }
-    static get delegatesFocus() { return true; }
-    get el() { return this; }
-    static get style() { return CalciteNavigationUserStyle0; }
-}, [17, "calcite-navigation-user", {
-        "active": [516],
-        "fullName": [1, "full-name"],
-        "label": [1],
-        "textDisabled": [516, "text-disabled"],
-        "thumbnail": [1],
-        "userId": [1, "user-id"],
-        "username": [1],
-        "setFocus": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["calcite-navigation-user", "calcite-avatar", "calcite-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "calcite-navigation-user":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, CalciteNavigationUser$1);
-            }
-            break;
-        case "calcite-avatar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "calcite-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
+import { C as CalciteNavigationUser$1, d as defineCustomElement$1 } from './navigation-user.js';
 
 const CalciteNavigationUser = CalciteNavigationUser$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/card-manager2.js

@@ -94,7 +94,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
         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/components/consent-manager.js

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
-import { c as commonjsRequire, a as commonjsGlobal } from './esri-loader.js';
+import { a as commonjsRequire, c as commonjsGlobal } from './esri-loader.js';
 import { d as defineCustomElement$a } from './action.js';
 import { d as defineCustomElement$9 } from './action-menu.js';
 import { d as defineCustomElement$8 } from './button.js';

package/dist/components/create-feature2.js

@@ -84,7 +84,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      */
     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/components/create-related-feature2.js

@@ -89,7 +89,7 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
         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/components/crowdsource-manager.js

@@ -72,7 +72,8 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     constructor() {
         super();
         this.__registerHost();
-        this.infoIconButtonClick = createEvent(this, "infoIconButtonClick", 7);
+        this.showIntroductionWindow = createEvent(this, "showIntroductionWindow", 7);
+        this.showCoverPage = createEvent(this, "showCoverPage", 7);
         //--------------------------------------------------------------------------
         //
         //  Properties (protected)
@@ -102,7 +103,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this.defaultLevel = "";
         this.defaultOid = "";
         this.defaultWebmap = "";
-        this.introductionPageEnabled = false;
+        this.introductionWindowEnabled = false;
         this.enableAutoRefresh = false;
         this.enableBasemap = true;
         this.enableColumnReorder = true;
@@ -251,7 +252,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     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
@@ -372,13 +373,20 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         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
@@ -588,7 +596,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         "defaultLevel": [1, "default-level"],
         "defaultOid": [1, "default-oid"],
         "defaultWebmap": [1, "default-webmap"],
-        "introductionPageEnabled": [4, "introduction-page-enabled"],
+        "introductionWindowEnabled": [4, "introduction-window-enabled"],
         "enableAutoRefresh": [4, "enable-auto-refresh"],
         "enableBasemap": [4, "enable-basemap"],
         "enableColumnReorder": [4, "enable-column-reorder"],

package/dist/components/crowdsource-reporter.js

@@ -128,18 +128,6 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             await this.setMapView();
         });
     }
-    /**
-     * On Feature details change update the Layer title and the current selected layer id
-     * @param evt Event hold the details of current feature graphic in the info-card
-     */
-    async selectionChanged(evt) {
-        void this.updatingFeatureDetails(true);
-        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)
@@ -156,9 +144,9 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         await this._initModules();
         await this._getTranslations();
         await ((_a = this.mapView) === null || _a === void 0 ? void 0 : _a.when(async () => {
-            //set configured reporting layers array
+            //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();
         }));
@@ -168,7 +156,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     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()));
     }
     //--------------------------------------------------------------------------
     //
@@ -203,6 +191,14 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             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
@@ -326,7 +322,10 @@ 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, 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
@@ -485,16 +484,22 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         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;
@@ -522,8 +527,9 @@ 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') {
+        // 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();
@@ -568,6 +574,19 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     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
@@ -585,10 +604,11 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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 }))));
     }
     /**
@@ -596,8 +616,9 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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))));
     }
     /**
@@ -613,7 +634,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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
@@ -635,13 +656,14 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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();
             }
@@ -755,12 +777,12 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
                 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
@@ -803,13 +825,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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);
             }
@@ -830,18 +849,19 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             }
         });
         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
@@ -955,7 +975,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "_updatedSortOption": [32],
         "_commentSubmitted": [32],
         "_addingCommentFailed": [32]
-    }, [[8, "selectionChanged", "selectionChanged"]], {
+    }, undefined, {
         "isMobile": ["isMobileWatchHandler"],
         "mapView": ["mapViewWatchHandler"]
     }]);

package/dist/components/downloadUtils.js

@@ -3155,4 +3155,4 @@ async function _prepareLabelsUsingExecutor(featureSet, labelFormat) {
 }
 //#endregion
 
-export { _typeof as _, downloadPDF as a, consolidateLabels as c, downloadCSV as d, removeDuplicateLabels as r };
+export { _prepareAttributeValue as _, downloadPDF as a, _typeof as b, consolidateLabels as c, downloadCSV as d, removeDuplicateLabels as r };

package/dist/components/esri-loader.js

@@ -308,4 +308,4 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 }(esriLoader, esriLoader.exports));
 
-export { commonjsGlobal as a, commonjsRequire as c, esriLoader as e, getDefaultExportFromCjs as g };
+export { commonjsRequire as a, commonjsGlobal as c, esriLoader as e, getDefaultExportFromCjs as g };

package/dist/components/feature-details2.js

@@ -33,7 +33,7 @@ import { d as defineCustomElement$3 } from './edit-card2.js';
 import { d as defineCustomElement$2 } from './feature-list2.js';
 import { d as defineCustomElement$1 } from './info-card2.js';
 
-const featureDetailsCss = ":host{display:block}.buttons-container{align-items:center;display:flex;padding:10px 0 10px 15px;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);border-block-end:1px solid var(--calcite-color-border-3)}.comment-btn{display:flex;gap:5px;width:37px;font-size:var(--calcite-font-size--2);align-items:center}";
+const featureDetailsCss = ":host{display:block}.buttons-container{align-items:center;display:flex;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);border-block-end:1px solid var(--calcite-color-border-3)}.comment-btn{display:flex;gap:5px;font-size:var(--calcite-font-size--2);align-items:center;padding:0 0.5rem}";
 const FeatureDetailsStyle0 = featureDetailsCss;
 
 const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails extends HTMLElement {
@@ -41,7 +41,8 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
         super();
         this.__registerHost();
         this.loadingStatus = createEvent(this, "loadingStatus", 7);
-        this.featureSelect = createEvent(this, "featureSelect", 7);
+        this.commentSelect = createEvent(this, "commentSelect", 7);
+        this.featureSelectionChange = createEvent(this, "featureSelectionChange", 7);
         /**
          * string[]: Valid field types for like and dislike
          */
@@ -49,6 +50,7 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
         this.mapView = undefined;
         this.graphics = undefined;
         this.reportingOptions = undefined;
+        this.layerItemsHash = undefined;
         this._likeFieldAvailable = false;
         this._likeCount = 0;
         this._disLikeCount = 0;
@@ -128,12 +130,12 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
         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
@@ -170,7 +172,8 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
     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;
@@ -235,7 +238,7 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
             }
             //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;
                     }
@@ -270,12 +273,12 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
             //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];
                     }
@@ -410,6 +413,7 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
         "mapView": [16],
         "graphics": [16],
         "reportingOptions": [16],
+        "layerItemsHash": [16],
         "_likeFieldAvailable": [32],
         "_likeCount": [32],
         "_disLikeCount": [32],