@esri/solutions-components 0.7.30 → 0.7.32

package/dist/components/crowdsource-reporter.js

@@ -6,38 +6,41 @@
 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 } from './mapViewUtils.js';
-import { d as defineCustomElement$u } from './action.js';
-import { d as defineCustomElement$t } from './action-menu.js';
-import { d as defineCustomElement$s } from './alert.js';
-import { d as defineCustomElement$r } from './button.js';
-import { d as defineCustomElement$q } from './chip.js';
-import { d as defineCustomElement$p } from './filter2.js';
-import { d as defineCustomElement$o } from './flow.js';
-import { d as defineCustomElement$n } from './flow-item.js';
-import { d as defineCustomElement$m } from './handle.js';
-import { d as defineCustomElement$l } from './icon.js';
-import { d as defineCustomElement$k } from './input.js';
-import { d as defineCustomElement$j } from './list.js';
-import { d as defineCustomElement$i } from './list-item.js';
-import { d as defineCustomElement$h } from './loader.js';
-import { d as defineCustomElement$g } from './modal.js';
-import { d as defineCustomElement$f } from './notice.js';
-import { d as defineCustomElement$e } from './pagination.js';
-import { d as defineCustomElement$d } from './panel.js';
-import { d as defineCustomElement$c } from './popover.js';
-import { d as defineCustomElement$b } from './progress.js';
-import { d as defineCustomElement$a } from './scrim.js';
-import { d as defineCustomElement$9 } from './shell.js';
-import { d as defineCustomElement$8 } from './stack.js';
-import { d as defineCustomElement$7 } from './tooltip.js';
-import { d as defineCustomElement$6 } from './delete-button2.js';
-import { d as defineCustomElement$5 } from './edit-card2.js';
-import { d as defineCustomElement$4 } from './feature-list2.js';
-import { d as defineCustomElement$3 } from './info-card2.js';
+import { a as getAllLayers, 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';
+import { d as defineCustomElement$u } from './alert.js';
+import { d as defineCustomElement$t } from './button.js';
+import { d as defineCustomElement$s } from './chip.js';
+import { d as defineCustomElement$r } from './filter2.js';
+import { d as defineCustomElement$q } from './flow.js';
+import { d as defineCustomElement$p } from './flow-item.js';
+import { d as defineCustomElement$o } from './handle.js';
+import { d as defineCustomElement$n } from './icon.js';
+import { d as defineCustomElement$m } from './input.js';
+import { d as defineCustomElement$l } from './list.js';
+import { d as defineCustomElement$k } from './list-item.js';
+import { d as defineCustomElement$j } from './loader.js';
+import { d as defineCustomElement$i } from './modal.js';
+import { d as defineCustomElement$h } from './notice.js';
+import { d as defineCustomElement$g } from './pagination.js';
+import { d as defineCustomElement$f } from './panel.js';
+import { d as defineCustomElement$e } from './popover.js';
+import { d as defineCustomElement$d } from './progress.js';
+import { d as defineCustomElement$c } from './scrim.js';
+import { d as defineCustomElement$b } from './shell.js';
+import { d as defineCustomElement$a } from './stack.js';
+import { d as defineCustomElement$9 } from './tooltip.js';
+import { d as defineCustomElement$8 } from './create-feature2.js';
+import { d as defineCustomElement$7 } from './delete-button2.js';
+import { d as defineCustomElement$6 } from './edit-card2.js';
+import { d as defineCustomElement$5 } from './feature-list2.js';
+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)}.error-msg{padding:10px}";
+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 CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceReporter extends HTMLElement {
     constructor() {
@@ -54,6 +57,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this.layers = undefined;
         this.loginTitle = undefined;
         this.mapView = undefined;
+        this.layerId = undefined;
+        this.objectId = undefined;
         this.reportButtonText = undefined;
         this.reportsHeader = undefined;
         this.reportSubmittedMessage = undefined;
@@ -71,6 +76,9 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this._translations = undefined;
         this._hasValidLayers = false;
         this._selectedLayerName = undefined;
+        this._reportSubmitted = false;
+        this._showSubmitCancelButton = false;
+        this._featureCreationFailedErrorMsg = undefined;
     }
     //--------------------------------------------------------------------------
     //
@@ -102,6 +110,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @returns Promise when complete
      */
     async componentWillLoad() {
+        this._urlParamsLoaded = false;
         await this._initModules();
         await this._getTranslations();
     }
@@ -109,7 +118,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * Renders the component.
      */
     render() {
-        return (h(Host, null, h("div", null, h("calcite-shell", { "content-behind": true }, this._getReporter()))));
+        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, closable: true, icon: "check-circle", kind: "success", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { slot: "title" }, this._translations.reportSubmit), h("div", { slot: "message" }, this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { "auto-close": true, class: themeClass, closable: true, icon: "x-octagon", kind: "danger", 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()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -129,6 +139,20 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         ]);
         this.reactiveUtils = reactiveUtils;
     }
+    /**
+     * Set the selected layer id and layer name
+     * @param layerId string layerId of the selected layer
+     * @param layerName string layerName of the selected layer
+     */
+    setSelectedLayer(layerId, layerName) {
+        this._selectedLayerId = layerId;
+        this._selectedLayerName = layerName;
+        //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));
+        });
+    }
     /**
      * Get the reporter app functionality
      * @protected
@@ -146,6 +170,12 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
                 case "feature-details":
                     renderLists.push(this.getFeatureDetailsFlowItem());
                     break;
+                case "reporting-layer-list":
+                    renderLists.push(this.getChooseCategoryFlowItem());
+                    break;
+                case "feature-create":
+                    renderLists.push(this.getFeatureCreateFlowItem());
+                    break;
             }
         });
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
@@ -162,34 +192,156 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this._hasValidLayers &&
             h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), this._hasValidLayers &&
             h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
-            h("calcite-button", { appearance: "secondary", 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._translations.noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), showFeatureCount: true, showNextIcon: true }))));
+            h("calcite-button", { appearance: "secondary", 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._translations.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
+     * @returns Choose category flow item
+     * @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: "secondary", 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._translations.noLayerToDisplayErrorMsg, onLayerSelect: this.highlightSelectedLayer.bind(this), showFeatureCount: false, showNextIcon: false }))));
+    }
+    /**
+     * Get Feature create form of the selected feature layer
+     * @returns feature create form
+     * @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: "secondary", 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 }))));
+    }
+    /**
+     * When drawing of incident location completed on map show the submit and cancel button
+     * @protected
+     */
+    onDrawComplete() {
+        this._showSubmitCancelButton = true;
+    }
+    /**
+     * When Add attachment panel is enabled hide the submit and cancel button
+     * @protected
+     */
+    showSubmitCancelButton(evt) {
+        this._showSubmitCancelButton = !evt.detail;
+    }
+    /**
+     * On back from create feature, call submit editor to destroy the Editor widget instance
+     * @protected
+     */
+    onSubmitButtonClick() {
+        if (this._createFeature) {
+            this._createFeature.submit();
+        }
+    }
+    /**
+     * On back from create feature, call close editor to destroy the Editor widget instance
+     * @protected
+     */
+    backFromCreateFeaturePanel() {
+        if (this._createFeature) {
+            this._createFeature.close();
+        }
+        this.backFromSelectedPanel();
+    }
+    /**
+     * On creating the feature is failed, show the error message
+     * @param evt Event which has feature failed message
+     * @protected
+     */
+    createFeatureFailed(evt) {
+        console.error(evt.detail);
+        this._featureCreationFailedErrorMsg = evt.detail.message;
+    }
+    /**
+     * On submit report navigate to the layer list home page and refresh the layer list
+     * @protected
+     */
+    onReportSubmitted() {
+        this._reportSubmitted = true;
+        this.navigateToHomePage();
+    }
+    /**
+     * Navigates to layer-list
+     * @protected
+     */
+    navigateToHomePage() {
+        if (this._createFeature) {
+            this._createFeature.close();
+        }
+        if (this._layerList) {
+            this._layerList.refresh();
+        }
+        this.setSelectedFeatures([]);
+        this._flowItems = ["layer-list"];
+    }
+    /**
+     * Update the selected layer id and name
+     * @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() {
+        this._showSubmitCancelButton = false;
+        this._flowItems = [...this._flowItems, "feature-create"];
+    }
+    /**
+     * On report an incident button click open the create a report panel with the layer list
+     * @protected
+     */
+    navigateToChooseCategory() {
+        this._flowItems = [...this._flowItems, "reporting-layer-list"];
     }
     /**
      * 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
      * @protected
      */
-    layerListLoaded(evt) {
+    async layerListLoaded(evt) {
         const layersListed = evt.detail;
-        this.handleMapClick(layersListed);
+        //consider only the layers listed in the layer-list component  
+        const allMapLayers = await getAllLayers(this.mapView);
+        this._validLayers = [];
+        allMapLayers.forEach((eachLayer) => {
+            if (layersListed.includes(eachLayer.id)) {
+                this._validLayers.push(eachLayer);
+            }
+        });
+        //handleMap click on layer list loaded
+        this.handleMapClick();
+        //update the has valid layer state
         this._hasValidLayers = layersListed.length > 0;
+        //navigate to the feature details if URL params found
+        if (!this._urlParamsLoaded) {
+            this._urlParamsLoaded = true;
+            await this.loadFeatureFromURLParams();
+        }
     }
     /**On click of layer list item show feature list
      * @param evt Event which has details of selected layerId and layerName
      * @protected
      */
     displayFeaturesList(evt) {
-        this._selectedLayerId = evt.detail.layerId;
-        this._selectedLayerName = evt.detail.layerName;
+        this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
         this._flowItems = [...this._flowItems, "feature-list"];
     }
     /**
-     * On back from feature list navigate to the Layer list panel
+     * On back from selected panel navigate to the previous panel
      * @protected
      */
-    backFromFeatureList() {
+    backFromSelectedPanel() {
         const updatedFlowItems = [...this._flowItems];
         updatedFlowItems.pop();
+        //Back to layer list, and return as the flowItems will be reset in navigateToHomePage
+        if (updatedFlowItems.length === 1) {
+            this.navigateToHomePage();
+            return;
+        }
         this._flowItems = [...updatedFlowItems];
     }
     /**
@@ -205,7 +357,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @param evt Event which has details of selected feature
      */
     async onFeatureSelectFromList(evt) {
-        this._selectedFeature = [evt.detail];
+        this.setSelectedFeatures([evt.detail]);
         this._flowItems = [...this._flowItems, "feature-details"];
     }
     /**
@@ -216,26 +368,50 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     getFeatureListFlowItem(layerId, layerName) {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromFeatureList.bind(this) }, h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports &&
-            h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { class: "height-full", highlightOnMap: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, selectedLayerId: layerId }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports &&
+            h("calcite-button", { appearance: "secondary", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { class: "height-full", highlightOnMap: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, selectedLayerId: layerId }))));
     }
     /**
      * Returns the calcite-flow item for feature details
      * @returns Node
      */
     getFeatureDetailsFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromFeatureList.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-action", { icon: "share", slot: "header-actions-end", text: this._translations.share }), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedFeature, isLoading: false, isMobile: false, mapView: this.mapView, onSelectionChanged: this.featureDetailsChanged.bind(this), zoomAndScrollToSelected: true }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedFeature, isLoading: false, isMobile: false, mapView: this.mapView, onSelectionChanged: this.featureDetailsChanged.bind(this), zoomAndScrollToSelected: true }))));
+    }
+    /**
+     * Sets the selected features and updates the first feature as the current selected feature
+     * @param features Graphics array of the features selected
+     */
+    setSelectedFeatures(features) {
+        this._selectedFeature = features;
+        this.setCurrentFeature(this._selectedFeature.length ? this._selectedFeature[0] : null);
+    }
+    /**
+     * Set the object id of the current selected feature, and also updates the current selected layer details
+     * @param selectedFeature Graphic currently shown in feature details
+     */
+    setCurrentFeature(selectedFeature) {
+        if (selectedFeature && selectedFeature.layer) {
+            const layer = selectedFeature.layer;
+            this.setSelectedLayer(layer.id, layer.title);
+            this._currentFeatureId = selectedFeature.attributes[layer.objectIdField];
+        }
+        else {
+            this.setSelectedLayer('', '');
+            this._currentFeatureId = '';
+        }
+        this._updateShareURL();
     }
     /**
      * On Feature details change update the Layer title and the current selected layer id
      * @param evt Event hold the details of current feature graphic in the info-card
      */
     featureDetailsChanged(evt) {
-        this._selectedLayerId = evt.detail[0].layer.id;
-        this._selectedLayerName = evt.detail[0].layer.title;
+        this.setCurrentFeature(evt.detail[0]);
     }
     /**
      * Returns the action button to Expand/Collapse side panel in mobile mode
+     * @protected
      */
     getActionToExpandCollapsePanel() {
         return (h("calcite-action", { icon: this._sidePanelCollapsed ? "chevrons-up" : "chevrons-down", onClick: this.toggleSidePanel.bind(this), slot: "header-actions-end", text: this._sidePanelCollapsed ? this._translations.expand : this._translations.collapse }));
@@ -259,36 +435,26 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * Handle map click event
      * @param layers Array of layerIds
      *
-     *  @protected
+     * @protected
      */
-    handleMapClick(layers) {
+    handleMapClick() {
         if (this._mapClickHandle) {
             this._mapClickHandle.remove();
         }
-        this._mapClickHandle = this.reactiveUtils.on(() => this.mapView, "click", (event) => {
-            void this.onMapClick(event, layers);
-        });
+        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
-     * @param event
-     * @param layers
+     * @param event IMapClick map click event details
      *
      * @protected
      */
-    async onMapClick(event, layers) {
+    async onMapClick(event) {
         //disable map popup
         this.mapView.popupEnabled = false;
         // only include graphics from valid layers listed in the layer list widget
-        const allMapLayers = await getAllLayers(this.mapView);
-        const validLayers = [];
-        allMapLayers.forEach((eachLayer) => {
-            if (layers.includes(eachLayer.id)) {
-                validLayers.push(eachLayer);
-            }
-        });
         const opts = {
-            include: validLayers
+            include: this._validLayers
         };
         // Perform a hitTest on the View
         const hitTest = await this.mapView.hitTest(event, opts);
@@ -301,7 +467,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
                 }
             });
             //update the selectedFeature
-            this._selectedFeature = clickedGraphics;
+            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") {
@@ -321,6 +487,59 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         const messages = await getLocaleComponentStrings(this.el);
         this._translations = messages[0];
     }
+    /**
+     * 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;
+        if (!url) {
+            return;
+        }
+        const urlObj = new URL(url);
+        //set the selected layers id
+        if (this._selectedLayerId) {
+            urlObj.searchParams.set("layerid", this._selectedLayerId);
+        }
+        else {
+            urlObj.searchParams.delete("layerid");
+        }
+        //Set the selected features objectid
+        if ((_b = this._selectedFeature) === null || _b === void 0 ? void 0 : _b.length) {
+            urlObj.searchParams.set("oid", this._currentFeatureId);
+        }
+        else {
+            urlObj.searchParams.delete("oid");
+        }
+        //update the url in share component
+        this._shareNode.shareUrl = urlObj.href;
+    }
+    /**
+     * Navigates to selected features detail based on the URL params
+     * @protected
+     */
+    async loadFeatureFromURLParams() {
+        if (this.layerId && this.objectId) {
+            const layer = await getLayerOrTable(this.mapView, this.layerId);
+            if (layer) {
+                // only query if we have some ids...query with no ids will result in all features being returned
+                const featureSet = await queryFeaturesByID([Number(this.objectId)], layer, [], false, this.mapView.spatialReference);
+                if (featureSet.length) {
+                    //update the selectedFeature
+                    this._selectedFeature = featureSet;
+                    //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];
+                    }
+                }
+            }
+        }
+    }
     get el() { return this; }
     static get watchers() { return {
         "isMobile": ["isMobileWatchHandler"],
@@ -338,6 +557,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "layers": [16],
         "loginTitle": [1, "login-title"],
         "mapView": [16],
+        "layerId": [1, "layer-id"],
+        "objectId": [1, "object-id"],
         "reportButtonText": [1, "report-button-text"],
         "reportsHeader": [1, "reports-header"],
         "reportSubmittedMessage": [1, "report-submitted-message"],
@@ -354,7 +575,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "_sidePanelCollapsed": [32],
         "_translations": [32],
         "_hasValidLayers": [32],
-        "_selectedLayerName": [32]
+        "_selectedLayerName": [32],
+        "_reportSubmitted": [32],
+        "_showSubmitCancelButton": [32],
+        "_featureCreationFailedErrorMsg": [32]
     }, undefined, {
         "isMobile": ["isMobileWatchHandler"],
         "mapView": ["mapViewWatchHandler"]
@@ -363,7 +587,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["crowdsource-reporter", "calcite-action", "calcite-action-menu", "calcite-alert", "calcite-button", "calcite-chip", "calcite-filter", "calcite-flow", "calcite-flow-item", "calcite-handle", "calcite-icon", "calcite-input", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-pagination", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-shell", "calcite-stack", "calcite-tooltip", "delete-button", "edit-card", "feature-list", "info-card", "layer-list"];
+    const components = ["crowdsource-reporter", "calcite-action", "calcite-action-menu", "calcite-alert", "calcite-button", "calcite-chip", "calcite-filter", "calcite-flow", "calcite-flow-item", "calcite-handle", "calcite-icon", "calcite-input", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-pagination", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-shell", "calcite-stack", "calcite-tooltip", "create-feature", "delete-button", "edit-card", "feature-list", "info-card", "instant-apps-social-share", "layer-list"];
     components.forEach(tagName => { switch (tagName) {
         case "crowdsource-reporter":
             if (!customElements.get(tagName)) {
@@ -372,140 +596,150 @@ function defineCustomElement$1() {
             break;
         case "calcite-action":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$w();
             }
             break;
         case "calcite-action-menu":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$v();
             }
             break;
         case "calcite-alert":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$u();
             }
             break;
         case "calcite-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$t();
             }
             break;
         case "calcite-chip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$s();
             }
             break;
         case "calcite-filter":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$r();
             }
             break;
         case "calcite-flow":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$q();
             }
             break;
         case "calcite-flow-item":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$p();
             }
             break;
         case "calcite-handle":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$o();
             }
             break;
         case "calcite-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$n();
             }
             break;
         case "calcite-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$m();
             }
             break;
         case "calcite-list":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$l();
             }
             break;
         case "calcite-list-item":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$k();
             }
             break;
         case "calcite-loader":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$j();
             }
             break;
         case "calcite-modal":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$i();
             }
             break;
         case "calcite-notice":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$h();
             }
             break;
         case "calcite-pagination":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$g();
             }
             break;
         case "calcite-panel":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$f();
             }
             break;
         case "calcite-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$e();
             }
             break;
         case "calcite-progress":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$d();
             }
             break;
         case "calcite-scrim":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$c();
             }
             break;
         case "calcite-shell":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$b();
             }
             break;
         case "calcite-stack":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$a();
             }
             break;
         case "calcite-tooltip":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$9();
+            }
+            break;
+        case "create-feature":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
             }
             break;
         case "delete-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "edit-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "feature-list":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "info-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "instant-apps-social-share":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }