@esri/solutions-components 0.7.31 → 0.7.32

package/dist/components/create-feature2.js

@@ -5,9 +5,9 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
-import { g as getLayerOrTable } from './mapViewUtils.js';
+import { a as getAllLayers } from './mapViewUtils.js';
 
-const createFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !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}";
 
 const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature extends HTMLElement {
     constructor() {
@@ -16,8 +16,10 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         this.success = createEvent(this, "success", 7);
         this.fail = createEvent(this, "fail", 7);
         this.drawComplete = createEvent(this, "drawComplete", 7);
+        this.editingAttachment = createEvent(this, "editingAttachment", 7);
         this.mapView = undefined;
         this.selectedLayerId = undefined;
+        this.customizeSubmit = false;
     }
     //--------------------------------------------------------------------------
     //
@@ -88,18 +90,8 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * Init Editor widget and starts the create workflow
      */
     async init() {
-        if (this.mapView) {
-            if (this.mapView && this.selectedLayerId) {
-                await getLayerOrTable(this.mapView, this.selectedLayerId);
-                await this.createEditorWidget();
-                await this.startCreate();
-                this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
-                setTimeout(() => {
-                    var _a, _b;
-                    this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')[1].shadowRoot.querySelector('calcite-panel').shadowRoot.querySelector('article').querySelector('header').setAttribute('style', 'display: none');
-                    (_b = (_a = this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')[1].shadowRoot.querySelector('calcite-panel').shadowRoot.querySelector('article')) === null || _a === void 0 ? void 0 : _a.querySelector('footer')) === null || _b === void 0 ? void 0 : _b.setAttribute('style', 'display: none');
-                }, 700);
-            }
+        if (this.mapView && this.selectedLayerId) {
+            await this.createEditorWidget();
         }
     }
     /**
@@ -108,10 +100,12 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * @protected
      */
     async initModules() {
-        const [Editor] = await loadModules([
-            "esri/widgets/Editor"
+        const [Editor, reactiveUtils] = await loadModules([
+            "esri/widgets/Editor",
+            "esri/core/reactiveUtils"
         ]);
         this.Editor = Editor;
+        this.reactiveUtils = reactiveUtils;
     }
     /**
      * Display editor widget to create the new feature
@@ -121,51 +115,105 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         if (this._editor) {
             this._editor.destroy();
         }
+        const layerInfos = [];
         const container = document.createElement("div");
-        const layer = await getLayerOrTable(this.mapView, this.selectedLayerId);
-        const selectedLayer = {
-            layer: layer
-        };
+        const allMapLayers = await getAllLayers(this.mapView);
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        allMapLayers.forEach(async (eachLayer) => {
+            layerInfos.push({
+                layer: eachLayer,
+                enabled: (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.type) === "feature" && (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.id) === this.selectedLayerId,
+                addEnabled: true,
+                updateEnabled: false,
+                deleteEnabled: false // default is true, set to false to disable the ability to delete features
+            });
+        });
         this._editor = new this.Editor({
             allowedWorkflows: "create-features",
             view: this.mapView,
-            layerInfos: [selectedLayer],
+            layerInfos: layerInfos,
             visibleElements: {
-                snappingControls: false,
-                snappingControlsElements: {
-                    featureEnabledToggle: false,
-                    layerList: false,
-                    enabledToggle: false
-                }
+                snappingControls: false
             },
-            container,
+            container
         });
         this.el.appendChild(container);
+        //Add handle to watch if attachments are added/edited
+        const attachmentHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
+            if (state === 'adding-attachment' || state === 'editing-attachment') {
+                this._addingAttachment = true;
+                this.editingAttachment.emit(true);
+            }
+            else {
+                if (this._addingAttachment) {
+                    this.editingAttachment.emit(false);
+                    this._addingAttachment = false;
+                }
+            }
+        });
+        this._editor.viewModel.addHandles(attachmentHandle);
+        //Add handle to watch featureTemplatesViewModel ready state and then start the creation
+        const handle = this.reactiveUtils.watch(() => this._editor.viewModel.featureTemplatesViewModel.state, (state) => {
+            if (state === 'ready') {
+                void this.startCreate();
+            }
+        });
+        this._editor.viewModel.addHandles(handle);
     }
     /**
      * Start creating the feature
      * @protected
      */
     async startCreate() {
-        var _a, _b;
-        const layer = await getLayerOrTable(this.mapView, this.selectedLayerId);
-        if (layer) {
-            let template = layer.templates && layer.templates.length ? layer.templates[0] : {};
-            if (((_a = layer.sourceJSON) === null || _a === void 0 ? void 0 : _a.types.length) && ((_b = layer.sourceJSON.types[0].templates) === null || _b === void 0 ? void 0 : _b.length)) {
-                template = layer.sourceJSON.types[0].templates[0];
-            }
-            const creationInfo = {
-                layer: layer,
-                template: template
-            };
-            await this._editor.startCreateFeaturesWorkflowAtFeatureCreation(creationInfo);
-            this._editor.viewModel.sketchViewModel.on("create", (evt) => {
-                if (evt.state === "complete") {
-                    this.drawComplete.emit();
-                }
+        var _a;
+        if ((_a = this._editor.viewModel.featureTemplatesViewModel.items) === null || _a === void 0 ? void 0 : _a.length) {
+            const items = this._editor.viewModel.featureTemplatesViewModel.items[0].get("items");
+            //once the feature template is selected handle the event for formSubmit and sketch complete
+            //also, hide the headers and footer in the editor as we will be showing our own submit and cancel button
+            this._editor.viewModel.featureTemplatesViewModel.on('select', () => {
+                setTimeout(() => {
+                    //on form submit 
+                    this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
+                    //on sketch complete emit the event
+                    this._editor.viewModel.sketchViewModel.on("create", (evt) => {
+                        if (evt.state === "complete") {
+                            this.drawComplete.emit();
+                        }
+                    });
+                    this.hideEditorsElements();
+                }, 700);
+                this.hideEditorsElements();
             });
+            //if only one feature template then directly start geometry creation for that
+            //else allow feature template selection to user
+            if (items.length === 1) {
+                this._editor.viewModel.featureTemplatesViewModel.select(items[0]);
+            }
+            //hides the header and footer elements in editor widget
+            this.hideEditorsElements();
         }
     }
+    /**
+     * Hides the elements of editor widget
+     * @protected
+     */
+    hideEditorsElements() {
+        if (!this.customizeSubmit) {
+            return;
+        }
+        setTimeout(() => {
+            var _a;
+            //hides the header and footer on the featureForm
+            (_a = this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')) === null || _a === void 0 ? void 0 : _a.forEach((flowItem) => {
+                var _a, _b, _c, _d, _e;
+                const article = (_c = (_b = (_a = flowItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('calcite-panel')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('article');
+                //hide the header
+                (_d = article === null || article === void 0 ? void 0 : article.querySelector('header')) === null || _d === void 0 ? void 0 : _d.setAttribute('style', 'display: none');
+                //hide the footer
+                (_e = article === null || article === void 0 ? void 0 : article.querySelector('footer')) === null || _e === void 0 ? void 0 : _e.setAttribute('style', 'display: none');
+            });
+        }, 700);
+    }
     /**
      * On creation of feature emit the event that the feature is created
      * @param evt feature submit event
@@ -173,9 +221,12 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      */
     async submitted(evt) {
         var _a;
+        //return if any attribute is invalid , focus will be shifted to the invalid attribute in feature form
         if (evt.invalid.length) {
             return;
         }
+        //Submit only when valid attributes
+        //emit success or fail based on the result
         if (evt.valid.length) {
             try {
                 await this._editor.activeWorkflow.commit();
@@ -203,6 +254,7 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
 }, [0, "create-feature", {
         "mapView": [16],
         "selectedLayerId": [1, "selected-layer-id"],
+        "customizeSubmit": [4, "customize-submit"],
         "close": [64],
         "submit": [64]
     }, undefined, {

package/dist/components/crowdsource-reporter.js

@@ -110,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();
     }
@@ -146,6 +147,11 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     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
@@ -202,15 +208,22 @@ 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: "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", { mapView: this.mapView, onDrawComplete: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onSuccess: this.navigateHomePage.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: "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
      */
-    showSubmitCancelButton() {
+    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
@@ -243,11 +256,22 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * On submit report navigate to the layer list home page and refresh the layer list
      * @protected
      */
-    navigateHomePage() {
+    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"];
     }
     /**
@@ -293,7 +317,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         //update the has valid layer state
         this._hasValidLayers = layersListed.length > 0;
         //navigate to the feature details if URL params found
-        await this.loadFeatureFromURLParams();
+        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
@@ -310,10 +337,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     backFromSelectedPanel() {
         const updatedFlowItems = [...this._flowItems];
         updatedFlowItems.pop();
-        //clear the selected layer and feature when back to layer list
+        //Back to layer list, and return as the flowItems will be reset in navigateToHomePage
         if (updatedFlowItems.length === 1) {
-            this.setSelectedLayer('', '');
-            this.setSelectedFeatures([]);
+            this.navigateToHomePage();
+            return;
         }
         this._flowItems = [...updatedFlowItems];
     }
@@ -462,7 +489,6 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     }
     /**
      * Updates the share url for current selected feature
-     * @returns
      * @protected
     */
     _updateShareURL() {
@@ -491,6 +517,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     }
     /**
      * Navigates to selected features detail based on the URL params
+     * @protected
      */
     async loadFeatureFromURLParams() {
         if (this.layerId && this.objectId) {

package/dist/esm/calcite-flow_5.entry.js

@@ -12,7 +12,7 @@ import { c as connectLocalized, d as disconnectLocalized } from './locale-6107ef
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-f16911e7.js';
 import { S as SLOTS$1 } from './resources-649a0f91.js';
 import { l as loadModules, g as getLocaleComponentStrings, f as formatNumber } from './locale-731e75a8.js';
-import { g as getLayerOrTable, c as getFeatureLayerView, h as highlightFeatures, d as getMapLayerHash, a as getAllLayers } from './mapViewUtils-cf05e880.js';
+import { a as getAllLayers, g as getLayerOrTable, c as getFeatureLayerView, h as highlightFeatures, d as getMapLayerHash } from './mapViewUtils-cf05e880.js';
 import { P as PopupUtils } from './popupUtils-d75edf93.js';
 import './guid-36c6c6a5.js';
 import './resources-cdc36705.js';
@@ -335,7 +335,7 @@ const FlowItem = class {
 };
 FlowItem.style = flowItemCss;
 
-const createFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !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}";
 
 const CreateFeature = class {
     constructor(hostRef) {
@@ -343,8 +343,10 @@ const CreateFeature = class {
         this.success = createEvent(this, "success", 7);
         this.fail = createEvent(this, "fail", 7);
         this.drawComplete = createEvent(this, "drawComplete", 7);
+        this.editingAttachment = createEvent(this, "editingAttachment", 7);
         this.mapView = undefined;
         this.selectedLayerId = undefined;
+        this.customizeSubmit = false;
     }
     //--------------------------------------------------------------------------
     //
@@ -415,18 +417,8 @@ const CreateFeature = class {
      * Init Editor widget and starts the create workflow
      */
     async init() {
-        if (this.mapView) {
-            if (this.mapView && this.selectedLayerId) {
-                await getLayerOrTable(this.mapView, this.selectedLayerId);
-                await this.createEditorWidget();
-                await this.startCreate();
-                this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
-                setTimeout(() => {
-                    var _a, _b;
-                    this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')[1].shadowRoot.querySelector('calcite-panel').shadowRoot.querySelector('article').querySelector('header').setAttribute('style', 'display: none');
-                    (_b = (_a = this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')[1].shadowRoot.querySelector('calcite-panel').shadowRoot.querySelector('article')) === null || _a === void 0 ? void 0 : _a.querySelector('footer')) === null || _b === void 0 ? void 0 : _b.setAttribute('style', 'display: none');
-                }, 700);
-            }
+        if (this.mapView && this.selectedLayerId) {
+            await this.createEditorWidget();
         }
     }
     /**
@@ -435,10 +427,12 @@ const CreateFeature = class {
      * @protected
      */
     async initModules() {
-        const [Editor] = await loadModules([
-            "esri/widgets/Editor"
+        const [Editor, reactiveUtils] = await loadModules([
+            "esri/widgets/Editor",
+            "esri/core/reactiveUtils"
         ]);
         this.Editor = Editor;
+        this.reactiveUtils = reactiveUtils;
     }
     /**
      * Display editor widget to create the new feature
@@ -448,50 +442,104 @@ const CreateFeature = class {
         if (this._editor) {
             this._editor.destroy();
         }
+        const layerInfos = [];
         const container = document.createElement("div");
-        const layer = await getLayerOrTable(this.mapView, this.selectedLayerId);
-        const selectedLayer = {
-            layer: layer
-        };
+        const allMapLayers = await getAllLayers(this.mapView);
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        allMapLayers.forEach(async (eachLayer) => {
+            layerInfos.push({
+                layer: eachLayer,
+                enabled: (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.type) === "feature" && (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.id) === this.selectedLayerId,
+                addEnabled: true,
+                updateEnabled: false,
+                deleteEnabled: false // default is true, set to false to disable the ability to delete features
+            });
+        });
         this._editor = new this.Editor({
             allowedWorkflows: "create-features",
             view: this.mapView,
-            layerInfos: [selectedLayer],
+            layerInfos: layerInfos,
             visibleElements: {
-                snappingControls: false,
-                snappingControlsElements: {
-                    featureEnabledToggle: false,
-                    layerList: false,
-                    enabledToggle: false
-                }
+                snappingControls: false
             },
-            container,
+            container
         });
         this.el.appendChild(container);
+        //Add handle to watch if attachments are added/edited
+        const attachmentHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
+            if (state === 'adding-attachment' || state === 'editing-attachment') {
+                this._addingAttachment = true;
+                this.editingAttachment.emit(true);
+            }
+            else {
+                if (this._addingAttachment) {
+                    this.editingAttachment.emit(false);
+                    this._addingAttachment = false;
+                }
+            }
+        });
+        this._editor.viewModel.addHandles(attachmentHandle);
+        //Add handle to watch featureTemplatesViewModel ready state and then start the creation
+        const handle = this.reactiveUtils.watch(() => this._editor.viewModel.featureTemplatesViewModel.state, (state) => {
+            if (state === 'ready') {
+                void this.startCreate();
+            }
+        });
+        this._editor.viewModel.addHandles(handle);
     }
     /**
      * Start creating the feature
      * @protected
      */
     async startCreate() {
-        var _a, _b;
-        const layer = await getLayerOrTable(this.mapView, this.selectedLayerId);
-        if (layer) {
-            let template = layer.templates && layer.templates.length ? layer.templates[0] : {};
-            if (((_a = layer.sourceJSON) === null || _a === void 0 ? void 0 : _a.types.length) && ((_b = layer.sourceJSON.types[0].templates) === null || _b === void 0 ? void 0 : _b.length)) {
-                template = layer.sourceJSON.types[0].templates[0];
-            }
-            const creationInfo = {
-                layer: layer,
-                template: template
-            };
-            await this._editor.startCreateFeaturesWorkflowAtFeatureCreation(creationInfo);
-            this._editor.viewModel.sketchViewModel.on("create", (evt) => {
-                if (evt.state === "complete") {
-                    this.drawComplete.emit();
-                }
+        var _a;
+        if ((_a = this._editor.viewModel.featureTemplatesViewModel.items) === null || _a === void 0 ? void 0 : _a.length) {
+            const items = this._editor.viewModel.featureTemplatesViewModel.items[0].get("items");
+            //once the feature template is selected handle the event for formSubmit and sketch complete
+            //also, hide the headers and footer in the editor as we will be showing our own submit and cancel button
+            this._editor.viewModel.featureTemplatesViewModel.on('select', () => {
+                setTimeout(() => {
+                    //on form submit 
+                    this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
+                    //on sketch complete emit the event
+                    this._editor.viewModel.sketchViewModel.on("create", (evt) => {
+                        if (evt.state === "complete") {
+                            this.drawComplete.emit();
+                        }
+                    });
+                    this.hideEditorsElements();
+                }, 700);
+                this.hideEditorsElements();
             });
+            //if only one feature template then directly start geometry creation for that
+            //else allow feature template selection to user
+            if (items.length === 1) {
+                this._editor.viewModel.featureTemplatesViewModel.select(items[0]);
+            }
+            //hides the header and footer elements in editor widget
+            this.hideEditorsElements();
+        }
+    }
+    /**
+     * Hides the elements of editor widget
+     * @protected
+     */
+    hideEditorsElements() {
+        if (!this.customizeSubmit) {
+            return;
         }
+        setTimeout(() => {
+            var _a;
+            //hides the header and footer on the featureForm
+            (_a = this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')) === null || _a === void 0 ? void 0 : _a.forEach((flowItem) => {
+                var _a, _b, _c, _d, _e;
+                const article = (_c = (_b = (_a = flowItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('calcite-panel')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('article');
+                //hide the header
+                (_d = article === null || article === void 0 ? void 0 : article.querySelector('header')) === null || _d === void 0 ? void 0 : _d.setAttribute('style', 'display: none');
+                //hide the footer
+                (_e = article === null || article === void 0 ? void 0 : article.querySelector('footer')) === null || _e === void 0 ? void 0 : _e.setAttribute('style', 'display: none');
+            });
+        }, 700);
     }
     /**
      * On creation of feature emit the event that the feature is created
@@ -500,9 +548,12 @@ const CreateFeature = class {
      */
     async submitted(evt) {
         var _a;
+        //return if any attribute is invalid , focus will be shifted to the invalid attribute in feature form
         if (evt.invalid.length) {
             return;
         }
+        //Submit only when valid attributes
+        //emit success or fail based on the result
         if (evt.valid.length) {
             try {
                 await this._editor.activeWorkflow.commit();

package/dist/esm/crowdsource-reporter.entry.js

@@ -79,6 +79,7 @@ const CrowdsourceReporter = class {
      * @returns Promise when complete
      */
     async componentWillLoad() {
+        this._urlParamsLoaded = false;
         await this._initModules();
         await this._getTranslations();
     }
@@ -115,6 +116,11 @@ const CrowdsourceReporter = class {
     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
@@ -171,15 +177,22 @@ const CrowdsourceReporter = class {
      * @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", { mapView: this.mapView, onDrawComplete: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onSuccess: this.navigateHomePage.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: "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
      */
-    showSubmitCancelButton() {
+    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
@@ -212,11 +225,22 @@ const CrowdsourceReporter = class {
      * On submit report navigate to the layer list home page and refresh the layer list
      * @protected
      */
-    navigateHomePage() {
+    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"];
     }
     /**
@@ -262,7 +286,10 @@ const CrowdsourceReporter = class {
         //update the has valid layer state
         this._hasValidLayers = layersListed.length > 0;
         //navigate to the feature details if URL params found
-        await this.loadFeatureFromURLParams();
+        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
@@ -279,10 +306,10 @@ const CrowdsourceReporter = class {
     backFromSelectedPanel() {
         const updatedFlowItems = [...this._flowItems];
         updatedFlowItems.pop();
-        //clear the selected layer and feature when back to layer list
+        //Back to layer list, and return as the flowItems will be reset in navigateToHomePage
         if (updatedFlowItems.length === 1) {
-            this.setSelectedLayer('', '');
-            this.setSelectedFeatures([]);
+            this.navigateToHomePage();
+            return;
         }
         this._flowItems = [...updatedFlowItems];
     }
@@ -431,7 +458,6 @@ const CrowdsourceReporter = class {
     }
     /**
      * Updates the share url for current selected feature
-     * @returns
      * @protected
     */
     _updateShareURL() {
@@ -460,6 +486,7 @@ const CrowdsourceReporter = class {
     }
     /**
      * Navigates to selected features detail based on the URL params
+     * @protected
      */
     async loadFeatureFromURLParams() {
         if (this.layerId && this.objectId) {