@esri/solutions-components 0.8.5 → 0.8.6

package/dist/collection/collection-manifest.json

@@ -7,6 +7,7 @@
     "components/consent-manager/consent-manager.js",
     "components/create-feature/create-feature.js",
     "components/crowdsource-manager/crowdsource-manager.js",
+    "components/layer-list/layer-list.js",
     "components/crowdsource-reporter/crowdsource-reporter.js",
     "components/deduct-calculator/deduct-calculator.js",
     "components/delete-button/delete-button.js",
@@ -18,7 +19,6 @@
     "components/floor-filter/floor-filter.js",
     "components/info-card/info-card.js",
     "components/json-editor/json-editor.js",
-    "components/layer-list/layer-list.js",
     "components/layer-table/layer-table.js",
     "components/layout-manager/layout-manager.js",
     "components/list-flow-item/list-flow-item.js",

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

@@ -47,4 +47,13 @@
 .esri-editor .esri-item-list__filter-container--sticky {
   padding-block: 0px !important;
   padding-inline: 10px !important;
+}
+
+.search-widget {
+  width: 92% !important;
+  margin: 5px 0 20px 14px;
+}
+
+.display-none {
+  display: none !important;
 }

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

@@ -18,14 +18,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Host, h } from "@stencil/core";
+import { Fragment, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
-import { getAllLayers } from "../../utils/mapViewUtils";
+import { getAllLayers, getLayerOrTable } from "../../utils/mapViewUtils";
 export class CreateFeature {
     constructor() {
         this.mapView = undefined;
         this.selectedLayerId = undefined;
         this.customizeSubmit = false;
+        this.searchConfiguration = undefined;
+        this.showSearchWidget = undefined;
     }
     //--------------------------------------------------------------------------
     //
@@ -85,7 +87,8 @@ export class CreateFeature {
      * Renders the component.
      */
     render() {
-        return (h(Host, { id: "feature-form" }));
+        const showSearchWidget = this.showSearchWidget ? '' : 'display-none';
+        return (h(Fragment, null, h("div", { id: "feature-form" }), h("div", { class: `search-widget ${showSearchWidget}`, id: "search-widget-ref" })));
     }
     //--------------------------------------------------------------------------
     //
@@ -93,11 +96,12 @@ export class CreateFeature {
     //
     //--------------------------------------------------------------------------
     /**
-     * Init Editor widget and starts the create workflow
+     * Init Editor widget and Search widget
      */
     async init() {
         if (this.mapView && this.selectedLayerId) {
             await this.createEditorWidget();
+            await this.createSearchWidget();
         }
     }
     /**
@@ -106,12 +110,14 @@ export class CreateFeature {
      * @protected
      */
     async initModules() {
-        const [Editor, reactiveUtils] = await loadModules([
+        const [Editor, reactiveUtils, Search] = await loadModules([
             "esri/widgets/Editor",
-            "esri/core/reactiveUtils"
+            "esri/core/reactiveUtils",
+            "esri/widgets/Search"
         ]);
         this.Editor = Editor;
         this.reactiveUtils = reactiveUtils;
+        this.Search = Search;
     }
     /**
      * Display editor widget to create the new feature
@@ -165,6 +171,13 @@ export class CreateFeature {
             }
         });
         this._editor.viewModel.addHandles(handle);
+        //Add handle to watch editor viewmodel state and then show the search widget
+        const formHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
+            if (state === 'creating-features') {
+                this.showSearchWidget = true;
+            }
+        });
+        this._editor.viewModel.addHandles(formHandle);
     }
     /**
      * Start creating the feature
@@ -183,6 +196,7 @@ export class CreateFeature {
                     //on sketch complete emit the event
                     this._editor.viewModel.sketchViewModel.on("create", (evt) => {
                         if (evt.state === "complete") {
+                            this.showSearchWidget = false;
                             this.drawComplete.emit();
                         }
                     });
@@ -199,6 +213,94 @@ export class CreateFeature {
             this.hideEditorsElements();
         }
     }
+    /**
+     * Display search widget to search location
+     * @protected
+     */
+    async createSearchWidget() {
+        let searchOptions = {
+            view: this.mapView,
+        };
+        if (this.searchConfiguration) {
+            const searchConfiguration = this._getSearchConfig(this.searchConfiguration, this.mapView);
+            searchOptions = Object.assign({}, searchConfiguration);
+        }
+        this._search = new this.Search(searchOptions);
+        this._search.container = 'search-widget-ref';
+        this._search.popupEnabled = false;
+        this._search.resultGraphicEnabled = false;
+        const layer = await getLayerOrTable(this.mapView, this.selectedLayerId);
+        let pointGeometry = null;
+        // on search get the geometry of the searched location and pass it in sketchViewModel and go to featureForm page
+        this._search.on('search-complete', (e) => {
+            var _a;
+            void this.mapView.goTo(e.results[0].results[0].extent);
+            if (layer.geometryType === 'point') {
+                pointGeometry = (_a = e.results[0].results[0]) === null || _a === void 0 ? void 0 : _a.feature.geometry;
+            }
+        });
+        //Add handle to watch if search viewModel state is ready
+        const createFeatureHandle = this.reactiveUtils.watch(() => this._search.viewModel.state, (state) => {
+            if (state === 'ready') {
+                setTimeout(() => {
+                    if (this._editor.viewModel.sketchViewModel.createGraphic && pointGeometry) {
+                        this._editor.viewModel.sketchViewModel.createGraphic.set('geometry', pointGeometry);
+                        this._editor.viewModel.sketchViewModel.complete();
+                        this.hideEditorsElements();
+                    }
+                }, 100);
+            }
+        });
+        this._search.viewModel.addHandles(createFeatureHandle);
+    }
+    /**
+     * Initialize the search widget based on user defined configuration
+     *
+     * @param searchConfiguration search configuration defined by the user
+     * @param view the current map view
+     *
+     * @protected
+     */
+    _getSearchConfig(searchConfiguration, view) {
+        const INCLUDE_DEFAULT_SOURCES = "includeDefaultSources";
+        const sources = searchConfiguration.sources;
+        if ((sources === null || sources === void 0 ? void 0 : sources.length) > 0) {
+            searchConfiguration[INCLUDE_DEFAULT_SOURCES] = false;
+            sources.forEach((source) => {
+                var _a, _b;
+                const isLayerSource = source.hasOwnProperty("layer");
+                if (isLayerSource) {
+                    const layerSource = source;
+                    const layerId = (_a = layerSource.layer) === null || _a === void 0 ? void 0 : _a.id;
+                    const layerFromMap = layerId ? view.map.findLayerById(layerId) : null;
+                    const layerUrl = (_b = layerSource === null || layerSource === void 0 ? void 0 : layerSource.layer) === null || _b === void 0 ? void 0 : _b.url;
+                    if (layerFromMap) {
+                        layerSource.layer = layerFromMap;
+                    }
+                    else if (layerUrl) {
+                        layerSource.layer = new this.FeatureLayer(layerUrl);
+                    }
+                }
+            });
+            sources === null || sources === void 0 ? void 0 : sources.forEach((source) => {
+                const isLocatorSource = source.hasOwnProperty("locator");
+                if (isLocatorSource) {
+                    const locatorSource = source;
+                    if ((locatorSource === null || locatorSource === void 0 ? void 0 : locatorSource.name) === "ArcGIS World Geocoding Service") {
+                        const outFields = locatorSource.outFields || ["Addr_type", "Match_addr", "StAddr", "City"];
+                        locatorSource.outFields = outFields;
+                        locatorSource.singleLineFieldName = "SingleLine";
+                    }
+                    locatorSource.url = locatorSource.url;
+                    delete locatorSource.url;
+                }
+            });
+        }
+        else {
+            searchConfiguration = Object.assign(Object.assign({}, searchConfiguration), { includeDefaultSources: true });
+        }
+        return searchConfiguration;
+    }
     /**
      * Hides the elements of editor widget
      * @protected
@@ -319,9 +421,35 @@ export class CreateFeature {
                 "attribute": "customize-submit",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "searchConfiguration": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ISearchConfiguration",
+                    "resolved": "ISearchConfiguration",
+                    "references": {
+                        "ISearchConfiguration": {
+                            "location": "import",
+                            "path": "../../utils/interfaces",
+                            "id": "src/utils/interfaces.ts::ISearchConfiguration"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "ISearchConfiguration: Configuration details for the Search widget"
+                }
             }
         };
     }
+    static get states() {
+        return {
+            "showSearchWidget": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "success",

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

@@ -56,3 +56,8 @@
 .footer-button {
   height: 35px;
 }
+
+.report-submitted-msg {
+  position: absolute;
+  z-index: 1000;
+}

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

@@ -21,7 +21,7 @@
 import { Host, h } from "@stencil/core";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { loadModules } from "../../utils/loadModules";
-import { getAllLayers, getFeatureLayerView, getLayerOrTable, highlightFeatures } from "../../utils/mapViewUtils";
+import { getAllLayers, getFeatureLayerView, getLayerOrTable, getMapLayerHash, highlightFeatures } from "../../utils/mapViewUtils";
 import { queryFeaturesByID } from "../../utils/queryUtils";
 export class CrowdsourceReporter {
     constructor() {
@@ -53,7 +53,7 @@ export class CrowdsourceReporter {
         this.theme = "light";
         this.enableZoom = true;
         this._mapInfo = undefined;
-        this._flowItems = ["layer-list"];
+        this._flowItems = [];
         this._sidePanelCollapsed = false;
         this._translations = undefined;
         this._hasValidLayers = false;
@@ -92,16 +92,20 @@ export class CrowdsourceReporter {
      * @returns Promise when complete
      */
     async componentWillLoad() {
+        var _a;
         this._urlParamsLoaded = false;
         await this._initModules();
         await this._getTranslations();
+        await ((_a = this.mapView) === null || _a === void 0 ? void 0 : _a.when(async () => {
+            await this.setMapView();
+        }));
     }
     /**
      * Renders the component.
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, null, this._reportSubmitted && h("calcite-alert", { "auto-close": true, class: themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { slot: "title" }, this._translations.reportSubmit), h("div", { slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this._featureCreationFailedErrorMsg)), h("div", null, h("calcite-shell", { "content-behind": true }, this._getReporter()))));
+        return (h(Host, null, this._reportSubmitted && h("calcite-alert", { "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this._featureCreationFailedErrorMsg)), h("div", null, h("calcite-shell", { "content-behind": true }, this._getReporter()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -171,8 +175,9 @@ export class CrowdsourceReporter {
      * @protected
      */
     getLayerListFlowItem() {
+        var _a;
         return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
-            h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
+            h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { class: "height-full", layers: ((_a = this._editableLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this._editableLayerIds : this.layers, mapView: this.mapView, noLayerErrorMsg: this._noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
     }
     /**
      * Get the layer list for creating a report
@@ -180,7 +185,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     getChooseCategoryFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations.createReportHeader, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", disabled: !this._selectedLayerId, onClick: this.navigateToCreateFeature.bind(this), width: "full" }, this._translations.next), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromSelectedPanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._noLayerToDisplayErrorMsg, onLayerSelect: this.highlightSelectedLayer.bind(this), showFeatureCount: false, showNextIcon: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true, "full-width": true }, h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.chooseCategoryMsg)), h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._noLayerToDisplayErrorMsg, onLayerSelect: this.navigateToCreateFeature.bind(this), showFeatureCount: false, showNextIcon: false }))));
     }
     /**
      * Get Feature create form of the selected feature layer
@@ -188,7 +193,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.isMobile && this.getActionToExpandCollapsePanel(), this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onSubmitButtonClick.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("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), h("create-feature", { customizeSubmit: true, mapView: this.mapView, onDrawComplete: this.onDrawComplete.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, selectedLayerId: this._selectedLayerId }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onSubmitButtonClick.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("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), h("create-feature", { customizeSubmit: true, mapView: this.mapView, onDrawComplete: this.onDrawComplete.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
     }
     /**
      * When drawing of incident location completed on map show the submit and cancel button
@@ -238,13 +243,13 @@ export class CrowdsourceReporter {
      */
     onReportSubmitted() {
         this._reportSubmitted = true;
-        this.navigateToHomePage();
+        void this.navigateToHomePage();
     }
     /**
      * Navigates to layer-list
      * @protected
      */
-    navigateToHomePage() {
+    async navigateToHomePage() {
         if (this._createFeature) {
             this._createFeature.close();
         }
@@ -252,21 +257,23 @@ export class CrowdsourceReporter {
             this._layerList.refresh();
         }
         this.setSelectedFeatures([]);
-        this._flowItems = ["layer-list"];
+        if (this._editableLayerIds.length === 1) {
+            await this._featureList.refresh();
+            this._flowItems = ["feature-list"];
+        }
+        else {
+            this._flowItems = ["layer-list"];
+        }
     }
     /**
-     * Update the selected layer id and name
+     * On layer select open the feature create flow item
      * @param evt Event which has details of selected layerId and layerName
      * @protected
      */
-    highlightSelectedLayer(evt) {
-        this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
-    }
-    /**
-     * On next button click open the feature create flow item
-     * @protected
-     */
-    async navigateToCreateFeature() {
+    async navigateToCreateFeature(evt) {
+        if (evt.detail.layerId && evt.detail.layerName) {
+            this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
+        }
         this._showSubmitCancelButton = false;
         this._flowItems = [...this._flowItems, "feature-create"];
     }
@@ -319,8 +326,8 @@ export class CrowdsourceReporter {
         updatedFlowItems.pop();
         this.clearHighlights();
         //Back to layer list, and return as the flowItems will be reset in navigateToHomePage
-        if (updatedFlowItems.length === 1) {
-            this.navigateToHomePage();
+        if (updatedFlowItems.length === 1 && updatedFlowItems[0] === 'layer-list') {
+            void this.navigateToHomePage();
             return;
         }
         this._flowItems = [...updatedFlowItems];
@@ -350,7 +357,7 @@ export class CrowdsourceReporter {
      */
     getFeatureListFlowItem(layerId, layerName) {
         return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports &&
-            h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { class: "height-full", mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, selectedLayerId: layerId }))));
+            h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { class: "height-full", highlightOnHover: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, ref: el => this._featureList = el, selectedLayerId: layerId }))));
     }
     /**
      * Returns the calcite-flow item for feature details
@@ -378,7 +385,9 @@ export class CrowdsourceReporter {
             this._currentFeatureId = selectedFeature.attributes[layer.objectIdField];
         }
         else {
-            this.setSelectedLayer('', '');
+            if (this._editableLayerIds.length > 1) {
+                this.setSelectedLayer('', '');
+            }
             this._currentFeatureId = '';
         }
         this._updateShareURL();
@@ -401,6 +410,8 @@ export class CrowdsourceReporter {
         // highlight the newly selected feature only when it has valid geometry
         if (selectedFeature && selectedFeature.geometry && selectedFeature.layer) {
             const selectedLayerView = await getFeatureLayerView(this.mapView, selectedFeature.layer.id);
+            // remove previous highlight options (if any) to highlight the feature by default color 
+            selectedLayerView.highlightOptions = null;
             this._highlightHandle = await highlightFeatures([selectedFeature.getObjectId()], selectedLayerView, this.mapView, true);
         }
     }
@@ -426,6 +437,15 @@ export class CrowdsourceReporter {
      * @protected
      */
     async setMapView() {
+        var _a;
+        await this.getLayersToShowInList();
+        // if only one valid layer is present then directly render features list
+        if (((_a = this._editableLayerIds) === null || _a === void 0 ? void 0 : _a.length) === 1) {
+            await this.renderFeaturesList();
+        }
+        else {
+            this._flowItems = ['layer-list'];
+        }
         this.mapView.popupEnabled = false;
         if (this._defaultCenter && this._defaultLevel) {
             await this.mapView.goTo({
@@ -449,7 +469,7 @@ export class CrowdsourceReporter {
         this._mapClickHandle = this.reactiveUtils.on(() => this.mapView, "click", this.onMapClick.bind(this));
     }
     /**
-     * On map click do hitTest and get the clicked graphics of valid layers and show feature details
+     * On map click do hitTest and get the clicked graphics from both reporting and non-reporting layers, and show feature details
      * @param event IMapClick map click event details
      *
      * @protected
@@ -457,12 +477,8 @@ export class CrowdsourceReporter {
     async onMapClick(event) {
         //disable map popup
         this.mapView.popupEnabled = false;
-        // only include graphics from valid layers listed in the layer list widget
-        const opts = {
-            include: this._validLayers
-        };
         // Perform a hitTest on the View
-        const hitTest = await this.mapView.hitTest(event, opts);
+        const hitTest = await this.mapView.hitTest(event);
         if (hitTest.results.length > 0) {
             const clickedGraphics = [];
             hitTest.results.forEach(function (result) {
@@ -471,16 +487,35 @@ export class CrowdsourceReporter {
                     clickedGraphics.push(result.graphic);
                 }
             });
-            //update the selectedFeature
-            this.setSelectedFeatures(clickedGraphics);
-            //if featureDetails not open then add it to the list else just reInit flowItems which will update details with newly selected features
-            // eslint-disable-next-line unicorn/prefer-ternary
-            if (this._flowItems.length && this._flowItems[this._flowItems.length - 1] !== "feature-details") {
-                this._flowItems = [...this._flowItems, "feature-details"];
+            const reportingLayerGraphics = clickedGraphics.filter((graphic) => {
+                return this._validLayers.includes(graphic.layer);
+            });
+            const nonReportingLayerGraphics = clickedGraphics.filter((graphic) => {
+                var _a;
+                return !this._validLayers.includes(graphic.layer) && ((_a = graphic === null || graphic === void 0 ? void 0 : graphic.layer) === null || _a === void 0 ? void 0 : _a.id);
+            });
+            // if clicked graphic's layer is one of the reporting layers then show details in layer panel 
+            if (reportingLayerGraphics.length > 0) {
+                //update the selectedFeature
+                this.setSelectedFeatures(reportingLayerGraphics);
+                //if featureDetails not open then add it to the list else just reInit flowItems which will update details with newly selected features
+                // eslint-disable-next-line unicorn/prefer-ternary
+                if (this._flowItems.length && this._flowItems[this._flowItems.length - 1] !== "feature-details") {
+                    this._flowItems = [...this._flowItems, "feature-details"];
+                }
+                else {
+                    this._flowItems = [...this._flowItems];
+                    void this.highlightOnMap(clickedGraphics[0]);
+                }
             }
-            else {
-                this._flowItems = [...this._flowItems];
-                void this.highlightOnMap(clickedGraphics[0]);
+            // if clicked graphic's layer is from non reporting layers then show popup on map
+            if (nonReportingLayerGraphics.length > 0) {
+                this.mapView.popupEnabled = true;
+                const options = {
+                    features: nonReportingLayerGraphics,
+                    updateLocationEnabled: true
+                };
+                await this.mapView.openPopup(options);
             }
         }
     }
@@ -493,10 +528,57 @@ export class CrowdsourceReporter {
         const messages = await getLocaleComponentStrings(this.el);
         this._translations = messages[0];
     }
+    /**
+     * 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
+     * @returns array of editable layer ids
+     */
+    reduceToConfiguredLayers(hash) {
+        var _a;
+        const configuredLayers = ((_a = this.layers) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.layers : [];
+        return Object.keys(hash).reduce((prev, cur) => {
+            let showLayer = hash[cur].supportsAdd;
+            if ((configuredLayers === null || configuredLayers === void 0 ? void 0 : configuredLayers.length) > 0) {
+                showLayer = configuredLayers.indexOf(cur) > -1 ? hash[cur].supportsAdd : false;
+            }
+            if (showLayer) {
+                prev.push(cur);
+            }
+            return prev;
+        }, []);
+    }
+    /**
+     * Creates the list of layers to be listed in layer list
+     * @protected
+     */
+    async getLayersToShowInList() {
+        const layerItemsHash = await getMapLayerHash(this.mapView, true);
+        const allMapLayers = await getAllLayers(this.mapView);
+        allMapLayers.forEach((eachLayer) => {
+            var _a, _b;
+            if ((eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.type) === "feature" && (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.editingEnabled) && ((_b = (_a = eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.capabilities) === null || _a === void 0 ? void 0 : _a.operations) === null || _b === void 0 ? void 0 : _b.supportsAdd)) {
+                layerItemsHash[eachLayer.id].supportsAdd = true;
+            }
+        });
+        this._editableLayerIds = this.reduceToConfiguredLayers(layerItemsHash);
+    }
+    /**
+     * renders feature list
+     * @protected
+     */
+    async renderFeaturesList() {
+        const evt = {
+            detail: this._editableLayerIds
+        };
+        await this.layerListLoaded(evt);
+        this.setSelectedLayer(this._validLayers[0].id, this._validLayers[0].title);
+        this._flowItems = ['feature-list'];
+    }
     /**
      * Updates the share url for current selected feature
      * @protected
-    */
+     */
     _updateShareURL() {
         var _a, _b;
         const url = (_a = this._shareNode) === null || _a === void 0 ? void 0 : _a.shareUrl;