@esri/solutions-components 0.8.4 → 0.8.6

package/dist/components/create-feature2.js

@@ -3,11 +3,11 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
-import { a as getAllLayers } from './mapViewUtils.js';
+import { a as getAllLayers, g as getLayerOrTable } from './mapViewUtils.js';
 
-const createFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !important}.esri-editor__update-actions{display:none !important}.esri-editor__panel-content{padding-block:0px !important}.esri-editor .esri-item-list__group__header{display:none !important}.esri-editor__panel-content__section .esri-widget__heading{display:none !important}.esri-editor .esri-item-list__filter-container--sticky{padding-block:0px !important;padding-inline:10px !important}";
+const createFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !important}.esri-editor__update-actions{display:none !important}.esri-editor__panel-content{padding-block:0px !important}.esri-editor .esri-item-list__group__header{display:none !important}.esri-editor__panel-content__section .esri-widget__heading{display:none !important}.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}";
 
 const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature extends HTMLElement {
     constructor() {
@@ -20,6 +20,8 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         this.mapView = undefined;
         this.selectedLayerId = undefined;
         this.customizeSubmit = false;
+        this.searchConfiguration = undefined;
+        this.showSearchWidget = undefined;
     }
     //--------------------------------------------------------------------------
     //
@@ -79,7 +81,8 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * 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" })));
     }
     //--------------------------------------------------------------------------
     //
@@ -87,11 +90,12 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
     //
     //--------------------------------------------------------------------------
     /**
-     * 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();
         }
     }
     /**
@@ -100,12 +104,14 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * @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
@@ -159,6 +165,13 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
             }
         });
         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
@@ -177,6 +190,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
                     //on sketch complete emit the event
                     this._editor.viewModel.sketchViewModel.on("create", (evt) => {
                         if (evt.state === "complete") {
+                            this.showSearchWidget = false;
                             this.drawComplete.emit();
                         }
                     });
@@ -193,6 +207,94 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
             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
@@ -255,6 +357,8 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         "mapView": [16],
         "selectedLayerId": [1, "selected-layer-id"],
         "customizeSubmit": [4, "customize-submit"],
+        "searchConfiguration": [16],
+        "showSearchWidget": [32],
         "close": [64],
         "submit": [64]
     }, undefined, {

package/dist/components/crowdsource-manager.js

@@ -91,6 +91,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
          * MapView.when is not fired when mapView is not currently visible
          */
         this._shouldSetMapView = false;
+        this.appProxies = undefined;
         this.defaultCenter = "";
         this.defaultGlobalId = "";
         this.defaultLayer = "";
@@ -378,7 +379,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     _getMapNode(panelOpen) {
         var _a;
         const mapContainerClass = this._layoutMode === ELayoutMode.HORIZONTAL && (!this._isMobile || panelOpen) ? "" : "adjusted-height-50";
-        return (h("div", { class: `${mapContainerClass} overflow-hidden` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: true, hidden: this._expandPopup && !this._isMobile, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
+        return (h("div", { class: `${mapContainerClass} overflow-hidden` }, h("map-card", { appProxies: this.appProxies, basemapConfig: this.basemapConfig, class: "width-full", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: true, hidden: this._expandPopup && !this._isMobile, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
     }
     /**
      * Get the expand node for the popup information
@@ -544,6 +545,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     }; }
     static get style() { return crowdsourceManagerCss; }
 }, [0, "crowdsource-manager", {
+        "appProxies": [8, "app-proxies"],
         "defaultCenter": [1, "default-center"],
         "defaultGlobalId": [1, "default-global-id"],
         "defaultLayer": [1, "default-layer"],

package/dist/components/crowdsource-reporter.js

@@ -6,7 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { l as loadModules } from './loadModules.js';
-import { a as getAllLayers, e as getFeatureLayerView, h as highlightFeatures, g as getLayerOrTable } from './mapViewUtils.js';
+import { a as getAllLayers, e as getFeatureLayerView, h as highlightFeatures, c as getMapLayerHash, g as getLayerOrTable } from './mapViewUtils.js';
 import { q as queryFeaturesByID } from './queryUtils.js';
 import { d as defineCustomElement$w } from './action.js';
 import { d as defineCustomElement$v } from './action-menu.js';
@@ -40,7 +40,7 @@ import { d as defineCustomElement$4 } from './info-card2.js';
 import { d as defineCustomElement$3 } from './instant-apps-social-share2.js';
 import { d as defineCustomElement$2 } from './layer-list2.js';
 
-const crowdsourceReporterCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100% !important}.width-0{width:0}.height-full{height:100% !important}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.notice-msg{padding:10px;width:calc(100% - 20px)}.footer-top-button{padding-bottom:7px}.footer-button{height:35px}";
+const crowdsourceReporterCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100% !important}.width-0{width:0}.height-full{height:100% !important}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.notice-msg{padding:10px;width:calc(100% - 20px)}.footer-top-button{padding-bottom:7px}.footer-button{height:35px}.report-submitted-msg{position:absolute;z-index:1000}";
 
 const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceReporter extends HTMLElement {
     constructor() {
@@ -75,7 +75,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this.theme = "light";
         this.enableZoom = true;
         this._mapInfo = undefined;
-        this._flowItems = ["layer-list"];
+        this._flowItems = [];
         this._sidePanelCollapsed = false;
         this._translations = undefined;
         this._hasValidLayers = false;
@@ -114,16 +114,20 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -193,8 +197,9 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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
@@ -202,7 +207,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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
@@ -210,7 +215,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.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
@@ -260,13 +265,13 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     onReportSubmitted() {
         this._reportSubmitted = true;
-        this.navigateToHomePage();
+        void this.navigateToHomePage();
     }
     /**
      * Navigates to layer-list
      * @protected
      */
-    navigateToHomePage() {
+    async navigateToHomePage() {
         if (this._createFeature) {
             this._createFeature.close();
         }
@@ -274,21 +279,23 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             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"];
     }
@@ -341,8 +348,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         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];
@@ -372,7 +379,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     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
@@ -400,7 +407,9 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             this._currentFeatureId = selectedFeature.attributes[layer.objectIdField];
         }
         else {
-            this.setSelectedLayer('', '');
+            if (this._editableLayerIds.length > 1) {
+                this.setSelectedLayer('', '');
+            }
             this._currentFeatureId = '';
         }
         this._updateShareURL();
@@ -423,6 +432,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         // 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);
         }
     }
@@ -448,6 +459,15 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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({
@@ -471,7 +491,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         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
@@ -479,12 +499,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     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) {
@@ -493,16 +509,35 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
                     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);
             }
         }
     }
@@ -515,10 +550,57 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         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;