@esri/solutions-components 0.10.18 → 0.10.20

package/dist/cjs/card-manager_3.cjs.entry.js

@@ -10,12 +10,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-5a0af791.js');
 const locale = require('./locale-a09603ee.js');
 const mapViewUtils = require('./mapViewUtils-18c46b84.js');
-const downloadUtils = require('./downloadUtils-b1bc6031.js');
+const downloadUtils = require('./downloadUtils-470f6a27.js');
 require('./esri-loader-08dc41bd.js');
 require('./_commonjsHelpers-baf43783.js');
 require('./interfaces-09c4c40e.js');
-require('./solution-resource-16c7510c.js');
-require('./restHelpersGet-88ba0e25.js');
+require('./solution-resource-40e70253.js');
+require('./index-f052f656.js');
+require('./restHelpersGet-5c2245a3.js');
 
 const cardManagerCss = ":host{display:block !important}.display-flex{display:flex}.display-none{display:none}.w-100{width:100%}.padding-bottom-1{padding-bottom:1rem}.padding-1{padding:1rem}.position-relative{position:relative}.focus-margin{margin:1px 1px 0px 1px}.overflow-auto{overflow:auto}.height-full{height:100%}.position-static{position:static !important}.z-index-500{z-index:500 !important}card-manager{display:block}";
 const CardManagerStyle0 = cardManagerCss;
@@ -694,8 +695,8 @@ const LayerTable = class {
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         const showSearch = this._canShowFullTextSearch();
         this._validateActiveActions();
-        return (index.h(index.Host, { key: '3bdcab95ec86da387ae93e62a0b87856010c6f8c' }, index.h("calcite-shell", { key: 'cbf48d44ae4d480e904093e320331bdf714ed1cd' }, this._getTableControlRow("header"), index.h("div", { key: '96a1806648eb3edaecae575088873d1a8e255e0d', class: `width-full ${tableHeightClass}` }, index.h("calcite-panel", { key: '085137217d77556344bb47e34279e0f16434e268', class: "height-full width-full" }, showSearch &&
-            index.h("calcite-input", { key: '5defb981e7a5299e9f9d2a17bb9bf2040c68fdc7', clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" }), index.h("calcite-loader", { key: '432073ef427c020b822d804b36213fe969f4754c', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), index.h("div", { key: '1e987a9ecf5779c901f96abc092ad4944a80a4ab', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (index.h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (index.h(index.Host, { key: '0e14ca1d140deaad1b6b1c299a29b160c983a84f' }, index.h("calcite-shell", { key: '6da3feca55877d2ca3ac4df044ece161964c5b30' }, this._getTableControlRow("header"), index.h("div", { key: '987267204fadb58d10741586adf9c2603a2c782d', class: `width-full ${tableHeightClass}` }, index.h("calcite-panel", { key: '3d8fb99e75c7456082846a1876460514d3b36cc3', class: "height-full width-full" }, showSearch &&
+            index.h("calcite-input", { key: '2251920546d0948bd67eb705ea68a4cdf7c735c1', clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" }), index.h("calcite-loader", { key: '8c9deefa9aef65838e93171505c1b4a5bc34d7d9', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), index.h("div", { key: '376ad6c086b24157533054c027a9738738625630', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (index.h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
             .replace("{{selected}}", selected))) : undefined), this.createFilterModal && this._filterModal()));
     }
@@ -788,7 +789,7 @@ const LayerTable = class {
     }
     /**
      * Update the search expression in layer
-     * @param searchedIds
+     * @param searchedIds Array of objectIds satisfying the full search text
      */
     _updateSearchDefinitionExpression(searchedIds) {
         const defExp = this._layer.definitionExpression;
@@ -2285,7 +2286,7 @@ const MapCard = class {
         const containerClass = this.isMobile ? "width-full" : "";
         const mobileClass = this.isMobile ? "border-top" : "";
         const headerElements = this.isMapLayout ? "" : "display-none";
-        return (index.h(index.Host, { key: 'd1320ec774cfaf0df3df6a2b53098251f55eb576' }, index.h("div", { key: 'b9180291be4c0ff0827a8fae263e98d6dd9e68aa', class: `${mapContainerClass}` }, index.h("map-picker", { key: '4aa3be4bfd15a311177aaa079e09d4e3c26f2051', class: mapPickerClass, isMapLayout: this.isMapLayout, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), index.h("div", { key: '0f29b0b33f46155b3e281a0adc92ecb21ebf4cee', class: `mapView-header display-flex ${headerElements}` }, index.h("div", { key: '4243b5cf75c46de7959d2c36af395e0042ae4dbc', class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, this.mapView && index.h("map-layer-picker", { key: '8e2670134ba293b3e09bbae80c317aa52ebd701c', appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", selectedIds: this.selectedLayer ? [this.selectedLayer.id] : [], showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getDropDownItem())), index.h("div", { key: '400443a5ffe15a4be9ec14c952cbdd911eeeaaec', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), index.h("map-tools", { key: 'f423bb21ba69daa086cad359240c6c7f8622eb7b', basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: this.enableSingleExpand, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
+        return (index.h(index.Host, { key: '6f827d045d920101c70f55e80a422383f94bae56' }, index.h("div", { key: '50215e8f899cf6321b228b0ee5b8a0ba9e1911c4', class: `${mapContainerClass}` }, index.h("map-picker", { key: '46dd475d52684cc239963160ab79019970fa13d2', class: mapPickerClass, isMapLayout: this.isMapLayout, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), index.h("div", { key: '8a8f260bb3a22b5bc2b933f94ab940e8750a9757', class: `mapView-header display-flex ${headerElements}` }, index.h("div", { key: 'a8ceb2a88432fbc052f00961a03d43cbf61dc076', class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, this.mapView && index.h("map-layer-picker", { key: '0c0c3e24b05491044d5bb42f460152eeb003dec2', appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", selectedIds: this.selectedLayer ? [this.selectedLayer.id] : [], showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getDropDownItem())), index.h("div", { key: '6091fdd6540a8eda0df227251a581347c734369c', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), index.h("map-tools", { key: 'eb0823b1b1babd12822e0d8ee91bc76169a51476', basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: this.enableSingleExpand, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
     }
     /**
      * Called each time after the component is loaded

package/dist/cjs/common-eee0c33f.js

@@ -0,0 +1,38 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+require('./solution-resource-40e70253.js');
+require('./index-f052f656.js');
+require('./interfaces-09c4c40e.js');
+
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Get an array from a list of nodes
+ *
+ * @param nodeList list of nodes
+ *
+ * @returns array of nodes
+ */
+function nodeListToArray(nodeList) {
+    return Array.isArray(nodeList) ? nodeList : Array.from(nodeList);
+}
+
+exports.nodeListToArray = nodeListToArray;

package/dist/cjs/component-7f2bd646.js

@@ -0,0 +1,33 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+/*!
+ * 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.2
+ */
+function getIconScale(componentScale) {
+    return componentScale === "l" ? "m" : "s";
+}
+/**
+ * This util helps us wait for a component to be ready for both lazy-loading (`dist` output) and non-lazy-loading (`components` output) components.
+ *
+ * Based on https://github.com/ionic-team/ionic-framework/blob/1a8bd6d/core/src/utils/helpers.ts#L60C1-L79C3
+ *
+ * @param el - the host element to wait for
+ */
+async function componentOnReady(el) {
+    await (isStencilEl(el)
+        ? el.componentOnReady()
+        : new Promise((resolve) => requestAnimationFrame(() => resolve())));
+}
+function isStencilEl(el) {
+    return typeof el.componentOnReady === "function";
+}
+
+exports.componentOnReady = componentOnReady;
+exports.getIconScale = getIconScale;

package/dist/cjs/conditionalSlot-2d2541f4.js

@@ -0,0 +1,54 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+const index = require('./index-5a0af791.js');
+const observers = require('./observers-5f9f67ee.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.2
+ */
+let mutationObserver;
+const observerOptions = { childList: true };
+/**
+ * Helper to set up a conditional slot component on connectedCallback.
+ *
+ * @param component
+ * @deprecated Use `onSlotchange` event with `slotChangeHasAssignedElement` DOM utility instead.
+ *
+ * ```
+ * <slot onSlotchange={(event) => this.mySlotHasElement = slotChangeHasAssignedElement(event)} />}
+ * ```
+ */
+function connectConditionalSlotComponent(component) {
+    if (!mutationObserver) {
+        mutationObserver = observers.createObserver("mutation", processMutations);
+    }
+    mutationObserver.observe(component.el, observerOptions);
+}
+/**
+ * Helper to tear down a conditional slot component on disconnectedCallback.
+ *
+ * @param component
+ * @deprecated Use `onSlotchange` event with `slotChangeHasAssignedElement` DOM utility instead.
+ *
+ * ```
+ * <slot onSlotchange={(event) => this.mySlotHasElement = slotChangeHasAssignedElement(event)} />}
+ * ```
+ */
+function disconnectConditionalSlotComponent(component) {
+    mutationObserver.unobserve(component.el);
+}
+function processMutations(mutations) {
+    mutations.forEach(({ target }) => {
+        index.forceUpdate(target);
+    });
+}
+
+exports.connectConditionalSlotComponent = connectConditionalSlotComponent;
+exports.disconnectConditionalSlotComponent = disconnectConditionalSlotComponent;

package/dist/cjs/config-7c16c710.js

@@ -0,0 +1,40 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+require('./index-5a0af791.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.2
+ */
+const existingConfig = globalThis["calciteConfig"];
+const focusTrapStack = existingConfig?.focusTrapStack || [];
+const logLevel = existingConfig?.logLevel || ("info");
+// the following placeholders are replaced by the build
+const version = "__CALCITE_VERSION__";
+const buildDate = "__CALCITE_BUILD_DATE__";
+const revision = "__CALCITE_REVISION__";
+/**
+ * Stamp the version onto the global config.
+ */
+function stampVersion() {
+    if (existingConfig && existingConfig.version) {
+        return;
+    }
+    console.info(`Using Calcite Components ${version} [Date: ${buildDate}, Revision: ${revision}]`);
+    const target = existingConfig || globalThis["calciteConfig"] || {};
+    Object.defineProperty(target, "version", {
+        value: version,
+        writable: false,
+    });
+    globalThis["calciteConfig"] = target;
+}
+
+exports.focusTrapStack = focusTrapStack;
+exports.logLevel = logLevel;
+exports.stampVersion = stampVersion;

package/dist/cjs/crowdsource-manager.cjs.entry.js

@@ -206,7 +206,7 @@ const CrowdsourceManager = class {
     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 (index.h(index.Host, { key: 'aad237254c4f5e906be19ff79f8ed3507d4ab0f2' }, index.h("calcite-shell", { key: '2bbc2a426acc37d31fe21a5204f57c6cdccaebf6', class: "position-relative" }, index.h("calcite-panel", { key: 'cb53df81f589988dadb84f8b40ce74e0a05ffb50', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal()));
+        return (index.h(index.Host, { key: '113737d5d1c315a85d7fd72f2f79aa1ad4acd03d' }, index.h("calcite-shell", { key: 'b5e9653ecc35019333ed8a7d7f91c7b4c4930fcc', class: "position-relative" }, index.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/cjs/crowdsource-reporter.cjs.entry.js

@@ -179,6 +179,10 @@ const CrowdsourceReporter = class {
      * __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
      */
@@ -250,6 +254,22 @@ const CrowdsourceReporter = class {
             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)
@@ -291,7 +311,7 @@ const CrowdsourceReporter = class {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (index.h(index.Host, { key: '9e2fc7137b28852f7f22c47fda4693e5659db631' }, this._reportSubmitted && index.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" }, index.h("div", { key: 'd1d9b947bc0f1e91a07deb800b764fd6b81e2ab8', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && index.h("calcite-alert", { key: '92fa0cb53cf5525e19c9308f3d3e68bf7af741ff', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, index.h("div", { key: 'ebe0683e73f6b7d9b3293c21b674fbfb67aedba5', slot: "title" }, this._translations.error), index.h("div", { key: '06d8a126f285011d74f88807cc6c5d51b1ed8ac4', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && index.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" }, index.h("div", { key: '4cb649130c819cc9643b31c9e7533e1ef68fc626', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && index.h("calcite-alert", { key: '0f960660c43e17b9e7d71d41e4f573f5aff9a6f8', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, index.h("div", { key: 'b4777d4d0d1035d0b5abb51196854cda47bebb20', slot: "title" }, this._translations.error), index.h("div", { key: '12ae974db56c10d5edf5e8cee3d55eb2c69979cf', slot: "message" }, this._translations.addingCommentFailedMsg)), index.h("div", { key: 'd1b53057f95b9eb734c7263dcb7334196e84fb30' }, index.h("calcite-shell", { key: '62fb7d7fb784645334f99053f7453583e0f90fc0', "content-behind": true }, this._getReporter()))));
+        return (index.h(index.Host, { key: '16e9300d50c0f297e8907faa6d1b5d0d29db7b5a' }, this._reportSubmitted && index.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" }, index.h("div", { key: '3920ae43163250762cb06218832a040b3b59ada3', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && index.h("calcite-alert", { key: '7d0351ebe3b7e44e98bd832ce6f1ce8ae0bd375c', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, index.h("div", { key: '9cf77e454f532f79af03fea75b164193260a828a', slot: "title" }, this._translations.error), index.h("div", { key: '5876f176b1f6eaf0cf48ef9ea6a87ee00d9970d5', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && index.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" }, index.h("div", { key: '959a7ae5c5636c16480f8a5b9c260d2d422aef92', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && index.h("calcite-alert", { key: '4601ba02cfd8effe6826f8615529046df48f688b', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, index.h("div", { key: '08c880690050a6796b772c8d740fba1491987e43', slot: "title" }, this._translations.error), index.h("div", { key: 'e1e4feb46b19f061bc0f4daeede7daa8eff5f51a', slot: "message" }, this._translations.addingCommentFailedMsg)), index.h("div", { key: '558b7ccf3ed3acc72bf6b9a8d26523021aed0960' }, index.h("calcite-shell", { key: '73992f9a17f5723f9da27350a16555edc56dca46', "content-behind": true }, this._getReporter()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -325,7 +345,10 @@ const CrowdsourceReporter = class {
         //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));
+            }
         });
     }
     /**
@@ -396,7 +419,7 @@ const CrowdsourceReporter = class {
     _toggleSort() {
         const canSortByVotes = this.reportingOptions && this.reportingOptions[this._selectedLayerId] &&
             this.reportingOptions[this._selectedLayerId].like && this.reportingOptions[this._selectedLayerId].likeField;
-        return (index.h("calcite-popover", { autoClose: true, label: "", offsetDistance: 0, placement: this.isMobile ? "leading-start" : "auto", pointerDisabled: true, referenceElement: "sort-popover" }, index.h("calcite-list", { "selection-mode": "single" }, index.h("calcite-list-item", { label: this._translations.sortNewest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "desc", "sortNewest"); }, selected: this._updatedSortOption === "sortNewest", value: "sortNewest" }), index.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 (index.h("calcite-popover", { autoClose: true, label: "", offsetDistance: 0, placement: this.isMobile ? "leading-start" : "bottom-start", pointerDisabled: true, referenceElement: "sort-popover" }, index.h("calcite-list", { "selection-mode": "single" }, index.h("calcite-list-item", { label: this._translations.sortNewest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "desc", "sortNewest"); }, selected: this._updatedSortOption === "sortNewest", value: "sortNewest" }), index.h("calcite-list-item", { label: this._translations.sortOldest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "asc", "sortOldest"); }, selected: this._updatedSortOption === "sortOldest", value: "sortOldest" }), canSortByVotes &&
             index.h(index.Fragment, null, index.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" }), index.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" })))));
     }
     /**
@@ -421,6 +444,7 @@ const CrowdsourceReporter = class {
         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
@@ -431,6 +455,7 @@ const CrowdsourceReporter = class {
         //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
@@ -458,7 +483,7 @@ const CrowdsourceReporter = class {
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this._showSubmitCancelButton && index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("div", { class: "progress-bar" }, index.h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), index.h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, index.h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), index.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 (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this._showSubmitCancelButton && index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("div", { class: "progress-bar" }, index.h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), index.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
@@ -498,6 +523,7 @@ const CrowdsourceReporter = class {
     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();
@@ -541,6 +567,7 @@ const CrowdsourceReporter = class {
         if (this._showFullPanel) {
             this.updatePanelState(this._sidePanelCollapsed, false);
         }
+        void this.updateNonVisibleLayersOnMap(false);
         this._reportSubmitted = true;
         this._updatedProgressBarStatus = 0.25;
         void this.navigateToHomePage();
@@ -597,6 +624,7 @@ const CrowdsourceReporter = class {
         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;
@@ -611,6 +639,16 @@ const CrowdsourceReporter = class {
         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
@@ -622,9 +660,13 @@ const CrowdsourceReporter = class {
         const allMapLayers = await mapViewUtils.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);
@@ -661,7 +703,6 @@ const CrowdsourceReporter = class {
      */
     async backFromFilterPanel() {
         this._filterInitState = await this._filterList.getFilterInitState();
-        void this._featureList.refresh();
         this.backFromSelectedPanel();
     }
     /**
@@ -681,10 +722,6 @@ const CrowdsourceReporter = class {
             (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') {
@@ -727,10 +764,10 @@ const CrowdsourceReporter = class {
      */
     async getRelatedTable() {
         const selectedLayer = this._currentFeature.layer;
-        const relatedTableIdFromRelnship = selectedLayer.relationships[0].relatedTableId;
+        const allRelatedTableIds = selectedLayer.relationships.map(a => a.relatedTableId);
         const allTables = await mapViewUtils.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
@@ -752,6 +789,12 @@ const CrowdsourceReporter = class {
         //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
@@ -782,16 +825,16 @@ const CrowdsourceReporter = class {
      */
     getFilterPanel() {
         const currentLayersExpressions = this.layerExpressions ? this.layerExpressions.filter((exp) => exp.id === this._selectedLayerId) : [];
-        return (index.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(), index.h("div", { class: "width-full", slot: "footer" }, index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: () => { void this._filterList?.forceReset(); }, width: "full" }, this._translations.resetFilter), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromFilterPanel.bind(this), width: "full" }, this._translations.close))), index.h("calcite-panel", { "full-height": true }, index.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 (index.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(), index.h("div", { class: "width-full", slot: "footer" }, index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: () => { void this._filterList?.forceReset(); }, width: "full" }, this._translations.resetFilter), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromFilterPanel.bind(this), width: "full" }, this._translations.close))), index.h("calcite-panel", { "full-height": true }, index.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 (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), index.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(), index.h("calcite-panel", null, index.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 &&
-            index.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 (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), index.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(), index.h("calcite-panel", null, index.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 &&
+            index.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
@@ -880,21 +923,11 @@ const CrowdsourceReporter = class {
     getActionToExpandCollapsePanel() {
         return (index.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();
@@ -950,7 +983,7 @@ const CrowdsourceReporter = class {
                 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) {
@@ -1034,15 +1067,16 @@ const CrowdsourceReporter = class {
     /**
      * 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;
@@ -1085,12 +1119,16 @@ const CrowdsourceReporter = class {
     async getLayersToShowInList() {
         const layerItemsHash = await mapViewUtils.getMapLayerHash(this.mapView, true);
         const allMapLayers = await mapViewUtils.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;
     }
     /**
@@ -1166,7 +1204,8 @@ const CrowdsourceReporter = class {
     static get watchers() { return {
         "isMobile": ["isMobileWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
-        "floorLevel": ["floorLevelWatchHandler"]
+        "floorLevel": ["floorLevelWatchHandler"],
+        "showMyReportsOnly": ["showMyReportsOnlyWatchHandler"]
     }; }
 };
 CrowdsourceReporter.style = CrowdsourceReporterStyle0;