@esri/solutions-components 0.10.18 → 0.10.20

package/dist/components/crowdsource-manager.js

@@ -260,7 +260,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: 'aad237254c4f5e906be19ff79f8ed3507d4ab0f2' }, h("calcite-shell", { key: '2bbc2a426acc37d31fe21a5204f57c6cdccaebf6', class: "position-relative" }, h("calcite-panel", { key: 'cb53df81f589988dadb84f8b40ce74e0a05ffb50', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal()));
+        return (h(Host, { key: '113737d5d1c315a85d7fd72f2f79aa1ad4acd03d' }, h("calcite-shell", { key: 'b5e9653ecc35019333ed8a7d7f91c7b4c4930fcc', class: "position-relative" }, h("calcite-panel", { key: '45cd232c8ea8706315e9fc15bb35f99698c33467', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal()));
     }
     /**
      * Called after each render

package/dist/components/crowdsource-reporter.js

@@ -222,6 +222,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * __esri.FeatureLayer[]: Valid layers from the current map
      */
     _validLayers;
+    /**
+     * __esri.FeatureLayer[]: layer from map whom visibility is disabled
+     */
+    _nonVisibleValidLayers;
     /**
      * __esri.FeatureLayer: Selected feature layer from the layer list
      */
@@ -293,6 +297,22 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             void this._createFeature.refresh(this.floorLevel);
         }
     }
+    /**
+     * Called each time the my reports toggle is changed
+     */
+    async showMyReportsOnlyWatchHandler() {
+        if (this._editableLayerIds) {
+            await this._updateFeatures();
+            setTimeout(() => {
+                if (this._layerList) {
+                    void this._layerList.refresh();
+                }
+                if (this._featureList) {
+                    void this._featureList.refresh();
+                }
+            }, 50);
+        }
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -334,7 +354,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: '9e2fc7137b28852f7f22c47fda4693e5659db631' }, this._reportSubmitted && h("calcite-alert", { key: 'ab818755ae126dad344cf7639d9b67048154447f', "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: 'd1d9b947bc0f1e91a07deb800b764fd6b81e2ab8', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '92fa0cb53cf5525e19c9308f3d3e68bf7af741ff', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'ebe0683e73f6b7d9b3293c21b674fbfb67aedba5', slot: "title" }, this._translations.error), h("div", { key: '06d8a126f285011d74f88807cc6c5d51b1ed8ac4', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: 'ab2aa9d399570fb0897dccd2f5d16ac62c8e5529', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '4cb649130c819cc9643b31c9e7533e1ef68fc626', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '0f960660c43e17b9e7d71d41e4f573f5aff9a6f8', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: 'b4777d4d0d1035d0b5abb51196854cda47bebb20', slot: "title" }, this._translations.error), h("div", { key: '12ae974db56c10d5edf5e8cee3d55eb2c69979cf', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: 'd1b53057f95b9eb734c7263dcb7334196e84fb30' }, h("calcite-shell", { key: '62fb7d7fb784645334f99053f7453583e0f90fc0', "content-behind": true }, this._getReporter()))));
+        return (h(Host, { key: '16e9300d50c0f297e8907faa6d1b5d0d29db7b5a' }, this._reportSubmitted && h("calcite-alert", { key: '20ce64b9b92b16ddc401c5fef1c98fe41f1ffd6a', "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: '3920ae43163250762cb06218832a040b3b59ada3', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '7d0351ebe3b7e44e98bd832ce6f1ce8ae0bd375c', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '9cf77e454f532f79af03fea75b164193260a828a', slot: "title" }, this._translations.error), h("div", { key: '5876f176b1f6eaf0cf48ef9ea6a87ee00d9970d5', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '220c51839d4317ccf2c74c1dbf5f38da38463b31', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '959a7ae5c5636c16480f8a5b9c260d2d422aef92', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '4601ba02cfd8effe6826f8615529046df48f688b', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '08c880690050a6796b772c8d740fba1491987e43', slot: "title" }, this._translations.error), h("div", { key: 'e1e4feb46b19f061bc0f4daeede7daa8eff5f51a', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '558b7ccf3ed3acc72bf6b9a8d26523021aed0960' }, h("calcite-shell", { key: '73992f9a17f5723f9da27350a16555edc56dca46', "content-behind": true }, this._getReporter()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -368,7 +388,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         //show only current layer on map and hide other valid editable layers
         //if layerId is empty then show all the layers on map
         this._validLayers.forEach(layer => {
-            layer.set('visible', !layerId || (layer.id === layerId));
+            const nonVisibileValidLayer = this._nonVisibleValidLayers.find((l) => l.id === layer.id);
+            if (!nonVisibileValidLayer) {
+                layer.set('visible', !layerId || (layer.id === layerId));
+            }
         });
     }
     /**
@@ -439,7 +462,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     _toggleSort() {
         const canSortByVotes = this.reportingOptions && this.reportingOptions[this._selectedLayerId] &&
             this.reportingOptions[this._selectedLayerId].like && this.reportingOptions[this._selectedLayerId].likeField;
-        return (h("calcite-popover", { autoClose: true, label: "", offsetDistance: 0, placement: this.isMobile ? "leading-start" : "auto", pointerDisabled: true, referenceElement: "sort-popover" }, h("calcite-list", { "selection-mode": "single" }, h("calcite-list-item", { label: this._translations.sortNewest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "desc", "sortNewest"); }, selected: this._updatedSortOption === "sortNewest", value: "sortNewest" }), h("calcite-list-item", { label: this._translations.sortOldest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "asc", "sortOldest"); }, selected: this._updatedSortOption === "sortOldest", value: "sortOldest" }), canSortByVotes &&
+        return (h("calcite-popover", { autoClose: true, label: "", offsetDistance: 0, placement: this.isMobile ? "leading-start" : "bottom-start", pointerDisabled: true, referenceElement: "sort-popover" }, h("calcite-list", { "selection-mode": "single" }, h("calcite-list-item", { label: this._translations.sortNewest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "desc", "sortNewest"); }, selected: this._updatedSortOption === "sortNewest", value: "sortNewest" }), h("calcite-list-item", { label: this._translations.sortOldest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "asc", "sortOldest"); }, selected: this._updatedSortOption === "sortOldest", value: "sortOldest" }), canSortByVotes &&
             h(Fragment, null, h("calcite-list-item", { label: this._translations.sortHighestVoted, onCalciteListItemSelect: () => { void this.sortOptionClick(this.reportingOptions[this._selectedLayerId].likeField, "desc", "sortHighestVoted"); }, selected: this._updatedSortOption === "sortHighestVoted", value: "sortHighestVoted" }), h("calcite-list-item", { label: this._translations.sortLowestVoted, onCalciteListItemSelect: () => { void this.sortOptionClick(this.reportingOptions[this._selectedLayerId].likeField, "asc", "sortLowestVoted"); }, selected: this._updatedSortOption === "sortLowestVoted", value: "sortLowestVoted" })))));
     }
     /**
@@ -464,6 +487,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this._filterActive = false;
         this._filterUrlParams = null;
         this._filterInitState = null;
+        void this._featureList.refresh();
     }
     /**
      * Check if the layers definitionExpression has been modified and update the feature list depending on the applied filters
@@ -474,6 +498,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         //set the filter active state based on the length of applied filters
         this._filterActive = this._filterList.urlParams.getAll('filter').length > 0;
         this._filterUrlParams = this._filterList.urlParams.getAll('filter');
+        void this._featureList.refresh();
     }
     /**
      * Get the feature layer list
@@ -501,7 +526,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), h("create-feature", { customizeSubmit: true, enableSearch: true, floorLevel: this.floorLevel, formElements: this._formElements.find(elm => elm.id === this._selectedLayerId), isMobile: this.isMobile, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onModeChanged: this.backFromCreateFeaturePanel.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("create-feature", { customizeSubmit: true, enableSearch: true, floorLevel: this.floorLevel, formElements: this._formElements.find(elm => elm.id === this._selectedLayerId), isMobile: this.isMobile, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onModeChanged: this.backFromCreateFeaturePanel.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
     }
     /**
      * Update the progress bar status when editor panel changes
@@ -541,6 +566,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     backFromCreateFeaturePanel() {
         if (this._createFeature) {
             void this._createFeature.close();
+            void this.updateNonVisibleLayersOnMap(false);
         }
         //on back form will be closed, so update the form state
         this.backFromSelectedPanel();
@@ -584,6 +610,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         if (this._showFullPanel) {
             this.updatePanelState(this._sidePanelCollapsed, false);
         }
+        void this.updateNonVisibleLayersOnMap(false);
         this._reportSubmitted = true;
         this._updatedProgressBarStatus = 0.25;
         void this.navigateToHomePage();
@@ -640,6 +667,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         if (evt.detail.layerId && evt.detail.layerName) {
             await this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
         }
+        void this.updateNonVisibleLayersOnMap(true);
         // get the form template elements to pass in create-feature to create a LEVELID field in feature-form
         this._getFormElements();
         this._showSubmitCancelButton = false;
@@ -654,6 +682,16 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this.updatePanelState(false, true);
         this._flowItems = [...this._flowItems, "reporting-layer-list"];
     }
+    /**
+     * updates the non visible layer visibility
+     * @param visible boolean value to set the layers visibility
+     */
+    updateNonVisibleLayersOnMap(visible) {
+        const isNonVisibleValidLayerSelected = this._nonVisibleValidLayers.find((layer) => layer.id === this._selectedLayerId);
+        if (isNonVisibleValidLayerSelected) {
+            this._selectedLayer.set('visible', visible);
+        }
+    }
     /**
      * When layer list is loaded, we will receive the list of layers, if its  means we don't have any valid layer to be listed
      * @param evt Event which has list of layers
@@ -665,9 +703,13 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         const allMapLayers = await getAllLayers(this.mapView);
         const reportingEnabledLayerIds = [];
         this._validLayers = [];
+        this._nonVisibleValidLayers = [];
         allMapLayers.forEach((eachLayer) => {
             if (layersListed.includes(eachLayer.id)) {
                 this._validLayers.push(eachLayer);
+                if (!eachLayer.visible) {
+                    this._nonVisibleValidLayers.push(eachLayer);
+                }
                 //create list of reporting enabled layers
                 if (this._getLayersConfig(eachLayer.id)?.reporting && this._layerItemsHash[eachLayer.id] && this._layerItemsHash[eachLayer.id].supportsAdd) {
                     reportingEnabledLayerIds.push(eachLayer.id);
@@ -704,7 +746,6 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     async backFromFilterPanel() {
         this._filterInitState = await this._filterList.getFilterInitState();
-        void this._featureList.refresh();
         this.backFromSelectedPanel();
     }
     /**
@@ -724,10 +765,6 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             (updatedFlowItems[0] === 'feature-list' || updatedFlowItems[updatedFlowItems.length - 2] === 'feature-list'))) {
             this.updatePanelState(this._sidePanelCollapsed, false);
         }
-        // Coming back from feature details refresh the feature list to update the like count
-        if (this.reportingOptions && this.reportingOptions[this._selectedLayerId]?.like && updatedFlowItems[updatedFlowItems.length - 1] === 'feature-details') {
-            void this._featureList.refresh();
-        }
         updatedFlowItems.pop();
         //Back to layer list, and return as the flowItems will be reset in navigateToHomePage
         if (updatedFlowItems.length === 1 && updatedFlowItems[0] === 'layer-list') {
@@ -770,10 +807,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     async getRelatedTable() {
         const selectedLayer = this._currentFeature.layer;
-        const relatedTableIdFromRelnship = selectedLayer.relationships[0].relatedTableId;
+        const allRelatedTableIds = selectedLayer.relationships.map(a => a.relatedTableId);
         const allTables = await getAllTables(this.mapView);
-        const relatedTable = allTables.filter((table) => selectedLayer.url === table.url && relatedTableIdFromRelnship === table.layerId);
-        this._relatedTable = relatedTable[0];
+        const relatedTables = allTables.filter((table) => selectedLayer.url === table.url && allRelatedTableIds.includes(table.layerId));
+        this._relatedTable = relatedTables[0];
     }
     /**
      * Show loading indicator while updating the feature details component
@@ -795,6 +832,12 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         //update the feature details to reflect the like, dislike and comment values
         await this._featureDetails.refresh(evt.detail.selectedFeature[0]);
     }
+    /**
+     * Shows the add comments panel
+     */
+    showAddCommentsPanel() {
+        this._flowItems = [...this._flowItems, "add-comment"];
+    }
     /**
      * When comment is selected from list store that and show comment details
      * @param evt Event which has details of selected feature
@@ -825,16 +868,16 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     getFilterPanel() {
         const currentLayersExpressions = this.layerExpressions ? this.layerExpressions.filter((exp) => exp.id === this._selectedLayerId) : [];
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName), loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromFilterPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: () => { void this._filterList?.forceReset(); }, width: "full" }, this._translations.resetFilter), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromFilterPanel.bind(this), width: "full" }, this._translations.close))), h("calcite-panel", { "full-height": true }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtnOnClick: () => undefined, comboboxOverlayPositioning: "fixed", layerExpressions: currentLayersExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName), loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromFilterPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: () => { void this._filterList?.forceReset(); }, width: "full" }, this._translations.resetFilter), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromFilterPanel.bind(this), width: "full" }, this._translations.close))), h("calcite-panel", { "full-height": true }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtnOnClick: () => undefined, comboboxOverlayPositioning: "fixed", layerExpressions: currentLayersExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, resetBtn: false, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
     }
     /**
      * Returns the calcite-flow item for feature details
      * @returns Node
      */
     getFeatureDetailsFlowItem() {
-        const showCommentBtn = this._getLayersConfig(this._selectedLayerId)?.comment && this._selectedLayer.relationships.length > 0;
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "share-node", embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, removePopoverOffset: true, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, h("feature-details", { class: 'full-height', graphics: this._selectedFeature, layerItemsHash: this._layerItemsHash, mapView: this.mapView, onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions, showUserImageInCommentsList: this.showUserImageInCommentsList }), showCommentBtn &&
-            h("calcite-button", { appearance: "solid", onClick: () => this._flowItems = [...this._flowItems, "add-comment"], slot: "footer", width: "full" }, this.commentButtonText || this._translations.comment))));
+        const showCommentBtn = this._getLayersConfig(this._selectedLayerId)?.comment && this._selectedLayer.relationships.length > 0 && this._relatedTable;
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "share-node", embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, removePopoverOffset: true, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, h("feature-details", { class: 'full-height', graphics: this._selectedFeature, layerItemsHash: this._layerItemsHash, mapView: this.mapView, onAddComment: this.showAddCommentsPanel.bind(this), onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLikeOrDislikeClicked: () => { void this._featureList.refresh(true); }, onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions, showUserImageInCommentsList: this.showUserImageInCommentsList }), showCommentBtn &&
+            h("calcite-button", { appearance: "solid", onClick: this.showAddCommentsPanel.bind(this), slot: "footer", width: "full" }, this.commentButtonText || this._translations.comment))));
     }
     /**
      * Returns the pagination for the multiple features
@@ -923,21 +966,11 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     getActionToExpandCollapsePanel() {
         return (h("calcite-action", { icon: this._sidePanelCollapsed ? "chevrons-up" : "chevrons-down", onClick: this.toggleSidePanel.bind(this), slot: "header-actions-end", text: this._sidePanelCollapsed ? this._translations.expand : this._translations.collapse }));
     }
-    _updatingHandle;
     /**
      * Set the current map info when maps change
      * @protected
      */
     async setMapView() {
-        console.log("setMapView see if we can find the floor filter widget from the app");
-        if (this._updatingHandle) {
-            this._updatingHandle.remove();
-        }
-        this._updatingHandle = this.reactiveUtils.watch(() => this.mapView.updating, () => {
-            console.log("mapView.updating");
-            console.log(this.mapView.ui.getComponents());
-            console.log(this.mapView.ui.find("esri-floor-filter"));
-        });
         await this.getLayersToShowInList();
         // filter/update the feature(s) if any filter/condition is already applied
         await this._updateFeatures();
@@ -993,7 +1026,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
                 return this._validLayers.includes(graphic.layer);
             });
             const nonReportingLayerGraphics = clickedGraphics.filter((graphic) => {
-                return !this._validLayers.includes(graphic.layer) && graphic?.layer?.id;
+                return !this._validLayers.includes(graphic.layer) && graphic?.layer?.popupEnabled && graphic?.layer?.id;
             });
             // if clicked graphic's layer is one of the reporting layers then show details in layer panel
             if (reportingLayerGraphics.length > 0) {
@@ -1077,15 +1110,16 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     /**
      * Returns the ids of all OR configured layers that support edits with the update capability
      * @param hash each layer item details
-     * @param layers list of layers id
+     * @param layersEditingDisabled list layer ids for which editing is disabled
      * @returns array of editable layer ids
      */
-    reduceToConfiguredLayers(hash) {
+    reduceToConfiguredLayers(hash, layersEditingDisabled) {
         return Object.keys(hash).reduce((prev, cur) => {
             // 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) {
+            //show layer only when editing is enabled
+            if (!layersEditingDisabled.includes(cur) && showLayer) {
                 prev.push(cur);
             }
             return prev;
@@ -1128,12 +1162,16 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     async getLayersToShowInList() {
         const layerItemsHash = await getMapLayerHash(this.mapView, true);
         const allMapLayers = await getAllLayers(this.mapView);
+        const layersEditingDisabled = [];
         allMapLayers.forEach((eachLayer) => {
             if (eachLayer?.type === "feature" && eachLayer?.editingEnabled && eachLayer?.capabilities?.operations?.supportsAdd) {
                 layerItemsHash[eachLayer.id].supportsAdd = true;
             }
+            if (!eachLayer?.editingEnabled) {
+                layersEditingDisabled.push(eachLayer.id);
+            }
         });
-        this._editableLayerIds = this.reduceToConfiguredLayers(layerItemsHash);
+        this._editableLayerIds = this.reduceToConfiguredLayers(layerItemsHash, layersEditingDisabled);
         this._layerItemsHash = layerItemsHash;
     }
     /**
@@ -1209,7 +1247,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     static get watchers() { return {
         "isMobile": ["isMobileWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
-        "floorLevel": ["floorLevelWatchHandler"]
+        "floorLevel": ["floorLevelWatchHandler"],
+        "showMyReportsOnly": ["showMyReportsOnlyWatchHandler"]
     }; }
     static get style() { return CrowdsourceReporterStyle0; }
 }, [0, "crowdsource-reporter", {
@@ -1266,7 +1305,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     }, undefined, {
         "isMobile": ["isMobileWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
-        "floorLevel": ["floorLevelWatchHandler"]
+        "floorLevel": ["floorLevelWatchHandler"],
+        "showMyReportsOnly": ["showMyReportsOnlyWatchHandler"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/date-picker-month-header.js

@@ -15,7 +15,7 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.1
+ * v2.12.2
  */
 const CSS = {
     header: "header",

package/dist/components/date-picker.js

@@ -17,7 +17,7 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.1
+ * v2.12.2
  */
 const HEADING_LEVEL = 2;
 const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
@@ -25,7 +25,7 @@ const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.1
+ * v2.12.2
  */
 /**
  * CLDR cache.

package/dist/components/date.js

@@ -8,7 +8,7 @@ import { n as numberStringFormatter } from './locale2.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.1
+ * v2.12.2
  */
 /**
  * Check if date is within a min and max

package/dist/components/deduct-calculator2.js

@@ -923,7 +923,7 @@ const DeductCalculator = /*@__PURE__*/ proxyCustomElement(class DeductCalculator
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '5b8a88501e1b2c09ae02f284534a125a9eca2e1c' }, h("div", { key: 'a6cc13e4226710271b29de34d450e8bbe01133eb', class: "label-display" }, h("calcite-label", { key: 'edec19bc63ce834d9020ab118b31a7cb44acbc4d', class: "label-display" }, "Density %", this._getDensityInput()), h("calcite-label", { key: '733ff46213314e3c768a64d5c3547e5a3d769b80', class: "label-display" }, "Type", this._getTypeInput()), h("calcite-label", { key: 'd6b7142611e565530068b64da727e58a6de0aefe', class: "label-display" }, "Severity", this._getSeverityInput())), h("div", { key: '5eab9293683cdaaab7ddb40eea5127dd5061e60d' }, this._getCalculateInput())));
+        return (h(Host, { key: '3053ca7a4e457a5259622c3fd72c04f2f68c21be' }, h("div", { key: 'f6d4ffbd6811f4eae23a950afac0fd1c68b24c9d', class: "label-display" }, h("calcite-label", { key: 'acaa80f5f10a3343e7e73d9cb33948ae4481e09e', class: "label-display" }, "Density %", this._getDensityInput()), h("calcite-label", { key: '577ce996676878f7e7236308a191ea9db073d88e', class: "label-display" }, "Type", this._getTypeInput()), h("calcite-label", { key: '626db25056ce49eb7b4160aee3e9cf898dd5400a', class: "label-display" }, "Severity", this._getSeverityInput())), h("div", { key: 'fa95eac25a03f7e30770ebc9ac7df02cba8cd187' }, this._getCalculateInput())));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/delete-button2.js

@@ -86,7 +86,7 @@ const DeleteButton = /*@__PURE__*/ proxyCustomElement(class DeleteButton extends
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '9f2d463fab02c9081fea71102634bacd3ac57ac2' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage()));
+        return (h(Host, { key: '23936d6981c9779f5a21951c6667e3cba86e5d82' }, this.buttonType === "button" ? (h("calcite-button", { appearance: "outline", disabled: !this._deleteEndabled, id: "solutions-delete", kind: "danger", onClick: () => this._delete(), width: "full" }, this._translations.deleteCount.replace("{{n}}", this.ids.length.toString()))) : (h("calcite-action", { appearance: "solid", compact: true, disabled: !this._deleteEndabled, id: this.icon, onClick: () => this._delete(), scale: "s", text: this._translations.delete }, h("calcite-button", { appearance: "transparent", iconStart: this.icon, kind: "danger" }, this._translations.delete))), this._deleteMessage()));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.

package/dist/components/dom.js

@@ -578,7 +578,7 @@ var isFocusable = function isFocusable(node, options) {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.1
+ * v2.12.2
  */
 /**
  * The default `focus-trap/tabbable` options.

package/dist/components/downloadUtils.js

@@ -8,6 +8,7 @@ import { getAssetPath } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
 import { q as queryFeaturesByID } from './queryUtils.js';
 import './solution-resource.js';
+import './index2.js';
 import { _ as __assign$1, r as request, c as cleanUrl, g as getJson } from './restHelpersGet.js';
 
 /** @license
@@ -2211,7 +2212,7 @@ async function downloadPDFFile(filename, labels, labelPageDescription, title = "
     const pdfLib = new PDFCreator_jsPDF();
     await pdfLib.initialize({
         pageType: "ANSI_A"
-    }, getAssetPath(`../solutions-components/assets/arcgis-pdf-creator/`), "en", filename // filename without ".pdf"
+    }, getAssetPath(`assets/arcgis-pdf-creator/`), "en", filename // filename without ".pdf"
     );
     const labeller = new PDFLabels();
     await labeller.initialize(pdfLib);
@@ -2242,32 +2243,6 @@ async function downloadPDFFile(filename, labels, labelPageDescription, title = "
 }
 //#endregion
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
 /* Copyright (c) 2017-2018 Environmental Systems Research Institute, Inc.
  * Apache-2.0 */
 /**
@@ -2301,6 +2276,32 @@ function appendCustomParams(customOptions, keys, baseOptions) {
     }, {});
 }
 
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
 /* Copyright (c) 2018 Environmental Systems Research Institute, Inc.
  * Apache-2.0 */
 /**

package/dist/components/dropdown.js

@@ -16,7 +16,7 @@ import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.12.1
+ * v2.12.2
  */
 const SLOTS = {
     dropdownTrigger: "trigger",

package/dist/components/edit-card2.js

@@ -186,7 +186,7 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
             !this.graphics[0].layer.editingEnabled : true;
         const tableNodeClass = this._editorLoading ? "display-none" : "position-absolute";
         const loadingClass = this._editorLoading ? "" : "display-none";
-        return (h(Host, { key: '702d90ff413f7559cfc85b1e8e709e1076ec00d6' }, h("div", { key: '8a2469c080aee5cc466e587ede8de7a60e6db7bb', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: 'f9fce7512f023aed9151f8f6022202819e9378cd', class: "position-absolute" }, h("div", { key: '4f5e6afd20e6adb5f34a3940a193c0d858212d88', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '437c74efd97d1cbea536fc33fabab9b46ff2812b', class: loadingClass, label: "", scale: "s" })))));
+        return (h(Host, { key: '1520951922ca98ee92ccc8f7119d7fa3666eddfa' }, h("div", { key: 'd436d1660fd46bba90dd5dadc6962c619b99143e', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: 'cff16539fd7b4a85234e0d15d2170470d95d0ad9', class: "position-absolute" }, h("div", { key: '0b96a2d27a5df344da9192a01d5c42496e057cd1', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '49cadf3456d1f3289abde18c35b726471ac551cd', class: loadingClass, label: "", scale: "s" })))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/feature-comments.js

@@ -51,7 +51,7 @@ const FeatureComments$1 = /*@__PURE__*/ proxyCustomElement(class FeatureComments
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: '0d714e6be492d8df6ef9a1b9aec14ec4860ccbfd' }, h("slot", { key: '378655639849dd98f172b8a54cd23b0fb5f52079' })));
+        return (h(Host, { key: '0d44fcf94820417e984a3496f7fdea7ec63104d9' }, h("slot", { key: '7a41443ca673bb37f4271c86013695a270d8a276' })));
     }
     static get style() { return FeatureCommentsStyle0; }
 }, [1, "feature-comments"]);

package/dist/components/feature-details2.js

@@ -34,7 +34,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:4px;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:10px;font-size:var(--calcite-font-size--1);align-items:center;padding:7px 0.75rem}";
+const featureDetailsCss = ":host{display:block}.buttons-container{align-items:center;display:flex;padding:4px;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)}";
 const FeatureDetailsStyle0 = featureDetailsCss;
 
 const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails extends HTMLElement {
@@ -43,6 +43,8 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
         this.__registerHost();
         this.loadingStatus = createEvent(this, "loadingStatus", 7);
         this.commentSelect = createEvent(this, "commentSelect", 7);
+        this.addComment = createEvent(this, "addComment", 7);
+        this.likeOrDislikeClicked = createEvent(this, "likeOrDislikeClicked", 7);
         this.featureSelectionChange = createEvent(this, "featureSelectionChange", 7);
         this.mapView = undefined;
         this.graphics = undefined;
@@ -169,6 +171,14 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
      * Emitted on demand when comment is selected using the feature-list
      */
     commentSelect;
+    /**
+     * Emitted on demand when comment icon is clicked
+     */
+    addComment;
+    /**
+     * Emitted on demand when like or dislike button is clicked
+     */
+    likeOrDislikeClicked;
     /**
      * Emitted on demand when the selected index changes
      */
@@ -188,12 +198,12 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
     render() {
         //When related features found show comments list of only those features else comments list will be empty
         const commentsListWhereClause = this._relatedFeaturesOIDs?.length > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : '1=0';
-        return (h("calcite-panel", { key: '78ec0511a7742789b79b74014bb5f75e6730d03c', "full-height": true }, h("info-card", { key: '79e5e23332c59b7ba069f7c0f9e61f58b8ffa247', 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: '338d23e04cfe6c5ddc9b6c4aaedd0206fff700cd', class: "buttons-container" }, this._commentsAvailable &&
-                h("div", { key: 'b62d2329ff2fe44ff55615e9b9dd7e39c9bf6a5d', class: "comment-btn" }, h("span", { key: '62788ce338216eda2d531457a2978cbd959a2ad9' }, this._relatedFeaturesOIDs.length), h("calcite-icon", { key: '84238a392ca1b96372882a1b40daf8969ab48338', icon: "speech-bubble", scale: 's' })), this._likeFieldAvailable &&
-                h("calcite-button", { key: '0662c0cb848b8c72085efb7ded35071cbf47a9a6', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, this._likeCount ?? this._selectedGraphic.attributes[this._likeField] ?? 0), this._dislikeFieldAvailable &&
-                h("calcite-button", { key: 'ef7c692a0e213c833cf3503441eb995afed02087', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, this._disLikeCount ?? this._selectedGraphic.attributes[this._dislikeField] ?? 0)), this.relatedTableId && this._commentsAvailable &&
-            h("feature-list", { key: '9f335cea513da6483f3a4fc18e7c678ae6fdde36', 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, showUserImageInList: this.showUserImageInCommentsList, textSize: "small", whereClause: commentsListWhereClause })));
+        return (h("calcite-panel", { key: '440e745ef61e578f88381920a3aeca1b54048612', "full-height": true }, h("info-card", { key: 'a1bb7f4809dbed25c34bd4307ad13b9a09c66b65', 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: '3caf1242f3c0f09b86ea146c9fb49bcea9306087', class: "buttons-container" }, this._commentsAvailable &&
+                h("calcite-button", { key: 'e8873a1d0bd7132ced40543a0e6a9c3a8c7c72e1', appearance: "transparent", iconEnd: "speech-bubble", kind: "neutral", onClick: () => { this.addComment.emit(); }, scale: 'm' }, this._relatedFeaturesOIDs.length), this._likeFieldAvailable &&
+                h("calcite-button", { key: 'cbbb6cf9c50cb360241d6e7f5d33c1713ec99017', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, this._likeCount ?? this._selectedGraphic.attributes[this._likeField] ?? 0), this._dislikeFieldAvailable &&
+                h("calcite-button", { key: '92f4c79093e6793d9b4036f99837a9ad19efb3be', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, this._disLikeCount ?? this._selectedGraphic.attributes[this._dislikeField] ?? 0)), this.relatedTableId && this._commentsAvailable &&
+            h("feature-list", { key: '95e25a9d10d7baea4a40c4fbbe5d9b19609d2790', 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, showUserImageInList: this.showUserImageInCommentsList, textSize: "small", whereClause: commentsListWhereClause })));
     }
     /**
      * Load esri javascript api modules
@@ -233,10 +243,19 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
             this.reportingOptions[selectedLayer.id].comment && selectedLayer.relationships?.length > 0;
         if (commentsConfigured) {
             //Get comments table id from map
-            const relatedTableIdFromRelnship = selectedLayer.relationships[0].relatedTableId;
             const allTables = await getAllTables(this.mapView);
-            const allRelatedTables = allTables.filter((table) => selectedLayer.url === table.url && relatedTableIdFromRelnship === table.layerId);
-            const relatedTable = allRelatedTables?.length > 0 ? allRelatedTables[0] : null;
+            let relatedTable = null;
+            let validRelationshipId = null;
+            allTables.some((table) => {
+                if (selectedLayer.url === table.url) {
+                    const relationship = selectedLayer.relationships.filter(a => table.layerId === a.relatedTableId);
+                    if (relationship?.length) {
+                        relatedTable = table;
+                        validRelationshipId = relationship[0].id;
+                        return true;
+                    }
+                }
+            });
             this.relatedTableId = relatedTable?.id ?? '';
             //**Get the related records for the current selected feature**
             if (this.relatedTableId) {
@@ -246,7 +265,7 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
                 const relationshipQuery = new this.RelationshipQuery({
                     objectIds: [objectId],
                     outFields: ['*'],
-                    relationshipId: selectedLayer.relationships[0].id
+                    relationshipId: validRelationshipId
                 });
                 const result = await selectedLayer.queryRelatedFeatures(relationshipQuery).catch((e) => {
                     console.error(e);
@@ -404,6 +423,7 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
             //store the like dislike value for the current selected graphic in local storage
             this.setInLocalStorage();
             this._updating = false;
+            this.likeOrDislikeClicked.emit();
         }, (err) => {
             this._updating = false;
             console.log(err);