@esri/solutions-components 0.10.17 → 0.10.19

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

@@ -46,7 +46,7 @@
 
 .search-widget {
   width: 92% !important;
-  margin: 5px 0 20px 14px;
+  margin: 5px 14px 20px 14px;
 }
 
 .display-none {
@@ -66,6 +66,11 @@
   height: 50%;
 }
 
+.notice-msg {
+  padding: 10px;
+  width: calc(100% - 20px);
+}
+
 /* override the padding of the feature form */
 .esri-editor__panel-content {
   padding-block: 10px !important;

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

@@ -21,6 +21,7 @@
 import { Fragment, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 import { getAllLayers, getLayerOrTable } from "../../utils/mapViewUtils";
+import { getLocaleComponentStrings } from "../../utils/locale";
 export class CreateFeature {
     constructor() {
         this.mapView = undefined;
@@ -31,8 +32,10 @@ export class CreateFeature {
         this.floorLevel = undefined;
         this.formElements = undefined;
         this.enableSearch = false;
+        this.showGuidingMsg = true;
         this._editorLoading = false;
         this._showSearchWidget = undefined;
+        this._translations = undefined;
     }
     //--------------------------------------------------------------------------
     //
@@ -118,6 +121,10 @@ export class CreateFeature {
      * __esri.FeatureLayer: selected feature layer;
      */
     _selectedLayer;
+    /**
+     * boolean: flag to maintain if user is on template picker page
+     */
+    _isTemplatePickerPage = true;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -232,6 +239,7 @@ export class CreateFeature {
      * @returns Promise when complete
      */
     async componentWillLoad() {
+        await this._getTranslations();
         await this.initModules();
     }
     /**
@@ -248,7 +256,14 @@ export class CreateFeature {
         const loaderClass = this._editorLoading ? "" : "display-none";
         const featureFormClass = this._editorLoading ? "display-none" : "";
         const mobileMapClass = this.isMobile ? "show-map" : "display-none";
-        return (h(Fragment, { key: 'df6ae442c5d339f1cd0922ac32c646e819cc5a0e' }, h("calcite-loader", { key: 'f5d23d229486da63e6fef61edc96af549344985a', class: loaderClass, label: "", scale: "s" }), h("div", { key: '3e33def6c7f9fed3c503c239c46a05e3cad13915', class: featureFormClass, id: "feature-form" }), this.enableSearch && h("div", { key: '77f674b79cf54e9f84fac68bcc4294df3727c6e2', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" }), h("div", { key: '8babe32f8d3ad74130ba538f202f896d546f6913', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
+        let guidingMsg = this._translations.provideDetailsMsg;
+        if (this._isTemplatePickerPage) {
+            guidingMsg = this._translations.chooseCategoryMsg;
+        }
+        else if (this._showSearchWidget) {
+            guidingMsg = this._translations.provideLocationMsg;
+        }
+        return (h(Fragment, { key: '133234456f7ed2e79da7fa78f2e7dce9b760ffe0' }, this.showGuidingMsg && h("calcite-notice", { key: 'ba137886151c619694596fab63a737ba8172d6b2', class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { key: '8cda13ee2dfc2a29b0296bad845ac630e6f9c809', slot: "message" }, guidingMsg)), h("calcite-loader", { key: 'ea62147a93ace75c6ba2c5d139c726c9ae39da2b', class: loaderClass, label: "", scale: "s" }), h("div", { key: '746486adf9ab6776644d9c653faee7fe14c7d0c0', class: featureFormClass, id: "feature-form" }), this.enableSearch && h("div", { key: 'c9935155a8f48dc5ae517f75e83a60bddd860bfe', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" }), h("div", { key: '8743be66d70b08247f5209665ffafb808f78c5c2', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -385,6 +400,7 @@ export class CreateFeature {
                 this._mapViewContainer?.classList?.replace("show-map", "hide-map");
                 this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
                 void this._setFloorLevel(this.floorLevel);
+                this._isTemplatePickerPage = false;
                 this._showSearchWidget = false;
                 this.progressStatus.emit(1);
                 this.drawComplete.emit();
@@ -395,7 +411,10 @@ export class CreateFeature {
         const createFeatureHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
             if (state === 'creating-features') {
                 this._mapViewContainer?.classList?.replace("hide-map", "show-map");
-                this._showSearchWidget = true;
+                this._isTemplatePickerPage = false;
+                if (this._selectedLayer && !this._selectedLayer.isTable) {
+                    this._showSearchWidget = true;
+                }
             }
         });
         this._editor.viewModel.addHandles(createFeatureHandle);
@@ -636,6 +655,15 @@ export class CreateFeature {
     timeout(delay) {
         return new Promise(resolve => setTimeout(resolve, delay));
     }
+    /**
+     * Fetches the component's translations
+     * @returns Promise when complete
+     * @protected
+     */
+    async _getTranslations() {
+        const messages = await getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
+    }
     static get is() { return "create-feature"; }
     static get originalStyleUrls() {
         return {
@@ -793,13 +821,32 @@ export class CreateFeature {
                 "attribute": "enable-search",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "showGuidingMsg": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: When true the notice message with the current state should be shown"
+                },
+                "attribute": "show-guiding-msg",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }
     static get states() {
         return {
             "_editorLoading": {},
-            "_showSearchWidget": {}
+            "_showSearchWidget": {},
+            "_translations": {}
         };
     }
     static get events() {

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

@@ -9,4 +9,14 @@
 
 .display-none {
   display: none !important;
+}
+
+/* override the padding of the feature form */
+.esri-editor__panel-content {
+  padding-block: 10px !important;
+}
+
+.notice-msg {
+  padding: 10px;
+  width: calc(100% - 20px);
 }

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

@@ -18,15 +18,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { h } from "@stencil/core";
+import { h, Fragment } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
+import { getLocaleComponentStrings } from "../../utils/locale";
 export class CreateRelatedFeature {
     constructor() {
         this.mapView = undefined;
         this.table = undefined;
         this.selectedFeature = undefined;
         this.customizeSubmit = false;
+        this.showGuidingMsg = true;
         this._editorLoading = false;
+        this._translations = undefined;
     }
     //--------------------------------------------------------------------------
     //
@@ -142,6 +145,7 @@ export class CreateRelatedFeature {
      * @returns Promise when complete
      */
     async componentWillLoad() {
+        await this._getTranslations();
         await this.initModules();
     }
     /**
@@ -167,7 +171,7 @@ export class CreateRelatedFeature {
     }
     render() {
         const loaderClass = this._editorLoading ? "" : "display-none";
-        return (h("calcite-loader", { key: '1238dfb67ae2c92cf4ca901b004421275921d7e4', class: loaderClass, label: "", scale: "s" }));
+        return (h(Fragment, { key: '707536f66fc4de711e3f519a8869507bf2d6f566' }, this.showGuidingMsg && h("calcite-notice", { key: 'c3fb5a706d250b6db7dac9ab20b949a81eeb0c5f', class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { key: 'a9aa0a8137a256240c5e8d0c77dc364b31b5b2a1', slot: "message" }, this._translations.provideDetailsMsg)), h("calcite-loader", { key: '4e1295a1a867da2c9f1fe4428bdc115bd8643f75', class: loaderClass, label: "", scale: "s" })));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -336,6 +340,15 @@ export class CreateRelatedFeature {
     timeout(delay) {
         return new Promise(resolve => setTimeout(resolve, delay));
     }
+    /**
+     * Fetches the component's translations
+     * @returns Promise when complete
+     * @protected
+     */
+    async _getTranslations() {
+        const messages = await getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
+    }
     static get is() { return "create-related-feature"; }
     static get originalStyleUrls() {
         return {
@@ -426,12 +439,31 @@ export class CreateRelatedFeature {
                 "attribute": "customize-submit",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "showGuidingMsg": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: When true the notice message should be shown"
+                },
+                "attribute": "show-guiding-msg",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }
     static get states() {
         return {
-            "_editorLoading": {}
+            "_editorLoading": {},
+            "_translations": {}
         };
     }
     static get events() {

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

@@ -213,7 +213,7 @@ export class CrowdsourceManager {
     render() {
         // only avoid border when we have a header color that is not white
         const borderClass = this.popupHeaderColor && this.popupHeaderColor !== "#FFFFFF" ? "border-width-0" : "";
-        return (h(Host, { key: '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/collection/components/crowdsource-reporter/crowdsource-reporter.js

@@ -188,6 +188,10 @@ export class CrowdsourceReporter {
      * __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
      */
@@ -259,6 +263,22 @@ export class CrowdsourceReporter {
             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)
@@ -300,7 +320,7 @@ export class CrowdsourceReporter {
      */
     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()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -334,7 +354,10 @@ export class CrowdsourceReporter {
         //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));
+            }
         });
     }
     /**
@@ -405,7 +428,7 @@ export class CrowdsourceReporter {
     _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" })))));
     }
     /**
@@ -430,6 +453,7 @@ export class CrowdsourceReporter {
         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
@@ -440,6 +464,7 @@ export class CrowdsourceReporter {
         //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
@@ -467,7 +492,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this._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
@@ -507,6 +532,7 @@ export class CrowdsourceReporter {
     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();
@@ -550,6 +576,7 @@ export class CrowdsourceReporter {
         if (this._showFullPanel) {
             this.updatePanelState(this._sidePanelCollapsed, false);
         }
+        void this.updateNonVisibleLayersOnMap(false);
         this._reportSubmitted = true;
         this._updatedProgressBarStatus = 0.25;
         void this.navigateToHomePage();
@@ -606,6 +633,7 @@ export class CrowdsourceReporter {
         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;
@@ -620,6 +648,16 @@ export class CrowdsourceReporter {
         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
@@ -631,9 +669,13 @@ export class CrowdsourceReporter {
         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);
@@ -670,7 +712,6 @@ export class CrowdsourceReporter {
      */
     async backFromFilterPanel() {
         this._filterInitState = await this._filterList.getFilterInitState();
-        void this._featureList.refresh();
         this.backFromSelectedPanel();
     }
     /**
@@ -690,10 +731,6 @@ export class CrowdsourceReporter {
             (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') {
@@ -736,10 +773,10 @@ export class CrowdsourceReporter {
      */
     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
@@ -761,6 +798,12 @@ export class CrowdsourceReporter {
         //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
@@ -791,16 +834,16 @@ export class CrowdsourceReporter {
      */
     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
@@ -949,7 +992,7 @@ export class CrowdsourceReporter {
                 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) {
@@ -1033,15 +1076,16 @@ export class CrowdsourceReporter {
     /**
      * 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;
@@ -1084,12 +1128,16 @@ export class CrowdsourceReporter {
     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;
     }
     /**
@@ -1823,6 +1871,9 @@ export class CrowdsourceReporter {
             }, {
                 "propName": "floorLevel",
                 "methodName": "floorLevelWatchHandler"
+            }, {
+                "propName": "showMyReportsOnly",
+                "methodName": "showMyReportsOnlyWatchHandler"
             }];
     }
 }

package/dist/collection/components/deduct-calculator/deduct-calculator.js

@@ -93,7 +93,7 @@ export 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/collection/components/delete-button/delete-button.js

@@ -92,7 +92,7 @@ export class DeleteButton {
      * 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/collection/components/edit-card/edit-card.js

@@ -194,7 +194,7 @@ export class EditCard {
             !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/collection/components/feature-comments/feature-comments.js

@@ -62,7 +62,7 @@ export class FeatureComments {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: '0d714e6be492d8df6ef9a1b9aec14ec4860ccbfd' }, h("slot", { key: '378655639849dd98f172b8a54cd23b0fb5f52079' })));
+        return (h(Host, { key: '0d44fcf94820417e984a3496f7fdea7ec63104d9' }, h("slot", { key: '7a41443ca673bb37f4271c86013695a270d8a276' })));
     }
     static get is() { return "feature-comments"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,11 +11,3 @@
   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;
-}