@esri/solutions-components 0.8.33 → 0.8.34

package/dist/cjs/calcite-flow_6.cjs.entry.js

@@ -522,14 +522,23 @@ const CreateFeature = class {
             }
         });
         this._editor.viewModel.addHandles(handle);
+        //Add handle to watch featureFormViewModel ready state
+        const formHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
+            if (state === 'ready') {
+                this._showSearchWidget = false;
+                this.progressStatus.emit(1);
+                this.drawComplete.emit();
+            }
+        });
+        this._editor.viewModel.addHandles(formHandle);
         //Add handle to watch editor viewmodel state and then show the search widget
-        const formHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
+        const createFeatureHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
             if (state === 'creating-features') {
                 this._editorLoading = true;
                 this._showSearchWidget = true;
             }
         });
-        this._editor.viewModel.addHandles(formHandle);
+        this._editor.viewModel.addHandles(createFeatureHandle);
     }
     /**
      * Start creating the feature
@@ -547,14 +556,6 @@ const CreateFeature = class {
                     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._showSearchWidget = false;
-                                this.progressStatus.emit(1);
-                                this.drawComplete.emit();
-                            }
-                        });
                         //hides the header and footer elements in editor widget
                         this.hideEditorsElements().then(() => {
                             resolve({});
@@ -668,13 +669,13 @@ const CreateFeature = class {
      * @protected
      */
     async hideEditorsElements() {
-        var _a;
+        var _a, _b;
         if (!this.customizeSubmit) {
             return;
         }
         await this.timeout(700);
         //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) => {
+        (_b = (_a = this.el.querySelector('.esri-editor')) === null || _a === void 0 ? void 0 : _a.querySelectorAll('calcite-flow-item')) === null || _b === void 0 ? void 0 : _b.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
@@ -742,6 +743,7 @@ const CreateRelatedFeature = class {
         this.success = index.createEvent(this, "success", 7);
         this.fail = index.createEvent(this, "fail", 7);
         this.isActionPending = index.createEvent(this, "isActionPending", 7);
+        this.formReady = index.createEvent(this, "formReady", 7);
         /**
          * boolean: Flag to maintain form submission using submit button
          */
@@ -834,7 +836,7 @@ const CreateRelatedFeature = class {
     }
     render() {
         const loaderClass = this._editorLoading ? "" : "display-none";
-        return (index.h("calcite-loader", { key: 'a8fd1e83a4a9614779be19a11e6028b3a402cbd2', class: loaderClass, label: "", scale: "s" }));
+        return (index.h("calcite-loader", { key: '5302b1166a175b0605604792cd40b9d3fbfabd02', class: loaderClass, label: "", scale: "s" }));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -882,6 +884,13 @@ const CreateRelatedFeature = class {
             }
         });
         this._editor.viewModel.addHandles(attachmentHandle);
+        //Add handle to watch featureFormViewModel ready state
+        const formHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
+            if (state === 'ready') {
+                this.formReady.emit();
+            }
+        });
+        this._editor.viewModel.addHandles(formHandle);
     }
     /**
      * Start creating the feature feature form
@@ -907,8 +916,6 @@ const CreateRelatedFeature = class {
         await this._editor.startCreateFeaturesWorkflowAtFeatureCreation(creationInfo);
         //hides the header and footer elements in editor widget
         await this.hideEditorsElements();
-        // Emit an event to show submit cancel buttons
-        this.isActionPending.emit(false);
         this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
     }
     /**
@@ -1316,10 +1323,6 @@ const FeatureDetails = class {
         const param = { updateFeatures: [newGraphicInstance] };
         await selectedLayer.applyEdits(param).then(() => {
             this._selectedGraphic = selectFeatureAttr;
-            //update the current graphics in info card so that, the updated values are reflected in popup content
-            if (this._infoCard) {
-                void this._infoCard.updateCurrentGraphic(this._selectedGraphic);
-            }
             //store the like dislike value for the current selected graphic in local storage
             this.setInLocalStorage();
             this._updating = false;

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

@@ -113,7 +113,7 @@ const CrowdsourceReporter = class {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (index.h(index.Host, { key: '119bb8b1c9115dca4e15c45ddd8e7fbed500b4d7' }, this._reportSubmitted && index.h("calcite-alert", { key: 'ef85c61fb5c9eaac9391c1e37494ef5e4244dadb', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, index.h("div", { key: '616a75103a227cf1b50d9e43fea129afc3fee4f9', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && index.h("calcite-alert", { key: '2faf9a9729bf90b87e044bfe8958571735f2cbf5', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, index.h("div", { key: '66cdf81166042ff4efddd4cc5801d790463d75fc', slot: "title" }, this._translations.error), index.h("div", { key: 'ad289b06742d2159d6fcfbdc42ecc9fb6d81f362', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && index.h("calcite-alert", { key: '27aee542bfd2cae8972035d17167407b35b5eb76', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, index.h("div", { key: '70a8a21de05b00d409adb226d6393817f7514930', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && index.h("calcite-alert", { key: '107ab01eca03500faeb4db5a2ac0e9dc7261e6fc', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, index.h("div", { key: '31e6fba8c28489f87897a13ebb4e7b8956452191', slot: "title" }, this._translations.error), index.h("div", { key: '6f0868946ef6e04490ba1e0806a03e26c756760b', slot: "message" }, this._translations.addingCommentFailedMsg)), index.h("div", { key: 'e169b7b466023010d45151ca9b7dfb900d8d7f9f' }, index.h("calcite-shell", { key: '72899b8eff6622233224df91223ee5d59539905b', "content-behind": true }, this._getReporter())), this.filterModal()));
+        return (index.h(index.Host, { key: 'e512e2693a586f8a6da7bcfa171feb60da26aee3' }, this._reportSubmitted && index.h("calcite-alert", { key: 'e5805ba948f1dc43eba2a78716af452cf71a8222', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, index.h("div", { key: '95b9accf1f09186c09c81cfb02a8939c4869ae8d', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && index.h("calcite-alert", { key: 'cab7f0e0f0d882612b4fa6f00799be9870aea6c5', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, index.h("div", { key: 'b9453672d85e26cf7bdeae0923cd36020d259d49', slot: "title" }, this._translations.error), index.h("div", { key: '5084315857bc88b8f80aaa411ac3fd5e4493e918', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && index.h("calcite-alert", { key: '62b7d9818913c3331ca9c8e4ed23c7f0c48a7946', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, index.h("div", { key: '5f18444fd375657db0c2a403cb453ead75536181', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && index.h("calcite-alert", { key: '732f08960095fc9fefcc79fc8df387a5a4c3f781', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, index.h("div", { key: '16415430cf33ce53c0d49cab19dce2c3e34257d6', slot: "title" }, this._translations.error), index.h("div", { key: '83e5918e00902bd49512165f4aa62813cecb4619', slot: "message" }, this._translations.addingCommentFailedMsg)), index.h("div", { key: '3e9dadd880319708e64e717ba7e7adaddf97b935' }, index.h("calcite-shell", { key: 'c72664d361b3904bc191668207c3ad31ff1f98c9', "content-behind": true }, this._getReporter())), this.filterModal()));
     }
     //--------------------------------------------------------------------------
     //
@@ -290,7 +290,7 @@ const CrowdsourceReporter = class {
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this._showSubmitCancelButton && index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("div", { class: "progress-bar" }, index.h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), index.h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, index.h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), index.h("create-feature", { customizeSubmit: true, mapView: this.mapView, onDrawComplete: this.onDrawComplete.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
+        return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this._showSubmitCancelButton && index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("div", { class: "progress-bar" }, index.h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), index.h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, index.h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), index.h("create-feature", { customizeSubmit: true, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
     }
     /**
      * Update the progress bar status when editor panel changes
@@ -301,10 +301,12 @@ const CrowdsourceReporter = class {
         this._updatedProgressBarStatus = evt.detail;
     }
     /**
-     * When drawing of incident location completed on map show the submit and cancel button
+     * When form is ready then show submit and cancel button
      * @protected
      */
-    onDrawComplete() {
+    onFormReady() {
+        // update the form state when form is ready
+        this.updateFormState(true);
         this._showSubmitCancelButton = true;
     }
     /**
@@ -331,6 +333,10 @@ const CrowdsourceReporter = class {
         if (this._createFeature) {
             void this._createFeature.close();
         }
+        //on back form will be closed, so update the form state
+        if (this.isFormOpen) {
+            this.updateFormState(false);
+        }
         this.backFromSelectedPanel();
     }
     /**
@@ -351,6 +357,10 @@ const CrowdsourceReporter = class {
             void this._createRelatedFeature.close();
             this._showSubmitCancelButton = false;
         }
+        //on back form will be closed, so update the form state
+        if (this.isFormOpen) {
+            this.updateFormState(false);
+        }
         this.backFromSelectedPanel();
     }
     /**
@@ -367,6 +377,10 @@ const CrowdsourceReporter = class {
      * @protected
      */
     onReportSubmitted() {
+        //on report submit form will be closed, so update the form state
+        if (this.isFormOpen) {
+            this.updateFormState(false);
+        }
         this._reportSubmitted = true;
         void this.navigateToHomePage();
     }
@@ -503,7 +517,16 @@ const CrowdsourceReporter = class {
      */
     toggleSidePanel() {
         this._sidePanelCollapsed = !this._sidePanelCollapsed;
-        this.togglePanel.emit(this._sidePanelCollapsed);
+        this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this.isFormOpen });
+    }
+    /**
+     * Hide map when form open in case of mobile
+     * @param isFormOpen updated form state
+     * @protected
+     */
+    updateFormState(isFormOpen) {
+        this.isFormOpen = isFormOpen;
+        this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this.isFormOpen });
     }
     /**
      * When feature is selected from list store that and show feature details
@@ -598,7 +621,7 @@ const CrowdsourceReporter = class {
      * @returns Node
      */
     getAddCommentFlowItem() {
-        return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), index.h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), index.h("calcite-panel", null, index.h("create-related-feature", { customizeSubmit: true, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
+        return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), index.h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), index.h("calcite-panel", null, index.h("create-related-feature", { customizeSubmit: true, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onFormReady: this.onFormReady.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
     }
     /**
      * Sets the selected features and updates the first feature as the current selected feature

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

@@ -194,14 +194,23 @@ export class CreateFeature {
             }
         });
         this._editor.viewModel.addHandles(handle);
+        //Add handle to watch featureFormViewModel ready state
+        const formHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
+            if (state === 'ready') {
+                this._showSearchWidget = false;
+                this.progressStatus.emit(1);
+                this.drawComplete.emit();
+            }
+        });
+        this._editor.viewModel.addHandles(formHandle);
         //Add handle to watch editor viewmodel state and then show the search widget
-        const formHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
+        const createFeatureHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
             if (state === 'creating-features') {
                 this._editorLoading = true;
                 this._showSearchWidget = true;
             }
         });
-        this._editor.viewModel.addHandles(formHandle);
+        this._editor.viewModel.addHandles(createFeatureHandle);
     }
     /**
      * Start creating the feature
@@ -219,14 +228,6 @@ export class CreateFeature {
                     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._showSearchWidget = false;
-                                this.progressStatus.emit(1);
-                                this.drawComplete.emit();
-                            }
-                        });
                         //hides the header and footer elements in editor widget
                         this.hideEditorsElements().then(() => {
                             resolve({});
@@ -340,13 +341,13 @@ export class CreateFeature {
      * @protected
      */
     async hideEditorsElements() {
-        var _a;
+        var _a, _b;
         if (!this.customizeSubmit) {
             return;
         }
         await this.timeout(700);
         //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) => {
+        (_b = (_a = this.el.querySelector('.esri-editor')) === null || _a === void 0 ? void 0 : _a.querySelectorAll('calcite-flow-item')) === null || _b === void 0 ? void 0 : _b.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

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

@@ -114,7 +114,7 @@ export class CreateRelatedFeature {
     }
     render() {
         const loaderClass = this._editorLoading ? "" : "display-none";
-        return (h("calcite-loader", { key: 'a8fd1e83a4a9614779be19a11e6028b3a402cbd2', class: loaderClass, label: "", scale: "s" }));
+        return (h("calcite-loader", { key: '5302b1166a175b0605604792cd40b9d3fbfabd02', class: loaderClass, label: "", scale: "s" }));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -162,6 +162,13 @@ export class CreateRelatedFeature {
             }
         });
         this._editor.viewModel.addHandles(attachmentHandle);
+        //Add handle to watch featureFormViewModel ready state
+        const formHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
+            if (state === 'ready') {
+                this.formReady.emit();
+            }
+        });
+        this._editor.viewModel.addHandles(formHandle);
     }
     /**
      * Start creating the feature feature form
@@ -187,8 +194,6 @@ export class CreateRelatedFeature {
         await this._editor.startCreateFeaturesWorkflowAtFeatureCreation(creationInfo);
         //hides the header and footer elements in editor widget
         await this.hideEditorsElements();
-        // Emit an event to show submit cancel buttons
-        this.isActionPending.emit(false);
         this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
     }
     /**
@@ -422,6 +427,21 @@ export class CreateRelatedFeature {
                     "resolved": "boolean",
                     "references": {}
                 }
+            }, {
+                "method": "formReady",
+                "name": "formReady",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when form is ready"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

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

@@ -118,7 +118,7 @@ export class CrowdsourceReporter {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: '119bb8b1c9115dca4e15c45ddd8e7fbed500b4d7' }, this._reportSubmitted && h("calcite-alert", { key: 'ef85c61fb5c9eaac9391c1e37494ef5e4244dadb', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '616a75103a227cf1b50d9e43fea129afc3fee4f9', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '2faf9a9729bf90b87e044bfe8958571735f2cbf5', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '66cdf81166042ff4efddd4cc5801d790463d75fc', slot: "title" }, this._translations.error), h("div", { key: 'ad289b06742d2159d6fcfbdc42ecc9fb6d81f362', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '27aee542bfd2cae8972035d17167407b35b5eb76', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '70a8a21de05b00d409adb226d6393817f7514930', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '107ab01eca03500faeb4db5a2ac0e9dc7261e6fc', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '31e6fba8c28489f87897a13ebb4e7b8956452191', slot: "title" }, this._translations.error), h("div", { key: '6f0868946ef6e04490ba1e0806a03e26c756760b', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: 'e169b7b466023010d45151ca9b7dfb900d8d7f9f' }, h("calcite-shell", { key: '72899b8eff6622233224df91223ee5d59539905b', "content-behind": true }, this._getReporter())), this.filterModal()));
+        return (h(Host, { key: 'e512e2693a586f8a6da7bcfa171feb60da26aee3' }, this._reportSubmitted && h("calcite-alert", { key: 'e5805ba948f1dc43eba2a78716af452cf71a8222', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '95b9accf1f09186c09c81cfb02a8939c4869ae8d', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: 'cab7f0e0f0d882612b4fa6f00799be9870aea6c5', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'b9453672d85e26cf7bdeae0923cd36020d259d49', slot: "title" }, this._translations.error), h("div", { key: '5084315857bc88b8f80aaa411ac3fd5e4493e918', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '62b7d9818913c3331ca9c8e4ed23c7f0c48a7946', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '5f18444fd375657db0c2a403cb453ead75536181', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '732f08960095fc9fefcc79fc8df387a5a4c3f781', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '16415430cf33ce53c0d49cab19dce2c3e34257d6', slot: "title" }, this._translations.error), h("div", { key: '83e5918e00902bd49512165f4aa62813cecb4619', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '3e9dadd880319708e64e717ba7e7adaddf97b935' }, h("calcite-shell", { key: 'c72664d361b3904bc191668207c3ad31ff1f98c9', "content-behind": true }, this._getReporter())), this.filterModal()));
     }
     //--------------------------------------------------------------------------
     //
@@ -295,7 +295,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.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("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), 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), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, 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.onCreateFeatureSubmitButtonClick.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("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), 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.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
     }
     /**
      * Update the progress bar status when editor panel changes
@@ -306,10 +306,12 @@ export class CrowdsourceReporter {
         this._updatedProgressBarStatus = evt.detail;
     }
     /**
-     * When drawing of incident location completed on map show the submit and cancel button
+     * When form is ready then show submit and cancel button
      * @protected
      */
-    onDrawComplete() {
+    onFormReady() {
+        // update the form state when form is ready
+        this.updateFormState(true);
         this._showSubmitCancelButton = true;
     }
     /**
@@ -336,6 +338,10 @@ export class CrowdsourceReporter {
         if (this._createFeature) {
             void this._createFeature.close();
         }
+        //on back form will be closed, so update the form state
+        if (this.isFormOpen) {
+            this.updateFormState(false);
+        }
         this.backFromSelectedPanel();
     }
     /**
@@ -356,6 +362,10 @@ export class CrowdsourceReporter {
             void this._createRelatedFeature.close();
             this._showSubmitCancelButton = false;
         }
+        //on back form will be closed, so update the form state
+        if (this.isFormOpen) {
+            this.updateFormState(false);
+        }
         this.backFromSelectedPanel();
     }
     /**
@@ -372,6 +382,10 @@ export class CrowdsourceReporter {
      * @protected
      */
     onReportSubmitted() {
+        //on report submit form will be closed, so update the form state
+        if (this.isFormOpen) {
+            this.updateFormState(false);
+        }
         this._reportSubmitted = true;
         void this.navigateToHomePage();
     }
@@ -508,7 +522,16 @@ export class CrowdsourceReporter {
      */
     toggleSidePanel() {
         this._sidePanelCollapsed = !this._sidePanelCollapsed;
-        this.togglePanel.emit(this._sidePanelCollapsed);
+        this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this.isFormOpen });
+    }
+    /**
+     * Hide map when form open in case of mobile
+     * @param isFormOpen updated form state
+     * @protected
+     */
+    updateFormState(isFormOpen) {
+        this.isFormOpen = isFormOpen;
+        this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this.isFormOpen });
     }
     /**
      * When feature is selected from list store that and show feature details
@@ -603,7 +626,7 @@ export class CrowdsourceReporter {
      * @returns Node
      */
     getAddCommentFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), h("calcite-panel", null, h("create-related-feature", { customizeSubmit: true, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), h("calcite-panel", null, h("create-related-feature", { customizeSubmit: true, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onFormReady: this.onFormReady.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
     }
     /**
      * Sets the selected features and updates the first feature as the current selected feature
@@ -1425,8 +1448,8 @@ export class CrowdsourceReporter {
                     "text": "Emitted when toggle panel button is clicked in reporter"
                 },
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "{panelState: boolean, isFormOpen: boolean}",
+                    "resolved": "{ panelState: boolean; isFormOpen: boolean; }",
                     "references": {}
                 }
             }];

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

@@ -329,10 +329,6 @@ export class FeatureDetails {
         const param = { updateFeatures: [newGraphicInstance] };
         await selectedLayer.applyEdits(param).then(() => {
             this._selectedGraphic = selectFeatureAttr;
-            //update the current graphics in info card so that, the updated values are reflected in popup content
-            if (this._infoCard) {
-                void this._infoCard.updateCurrentGraphic(this._selectedGraphic);
-            }
             //store the like dislike value for the current selected graphic in local storage
             this.setInLocalStorage();
             this._updating = false;

package/dist/collection/demos/crowdsource-reporter.html

@@ -40,6 +40,7 @@
       }
       .over-map[dir="rtl"] {
         right: 0px;
+        left: auto;
       }
       .column {
         width: 360px;
@@ -72,6 +73,13 @@
           top: calc(100% - 100px);
           height: 100px;
         }
+      
+        .map-collapsed {
+          height: 100%;
+          top: 0;
+          width: 100%;
+          z-index: 1000;
+        }
       }
     </style>
 
@@ -295,22 +303,38 @@
         //on change update the prop for is mobile
         mediaQueryList.onchange = (e) => {
           demo.isMobile = e.matches;
-          togglePanel({ detail: false })
+          togglePanel({ detail: { panelState: false, isFormOpen: false } })
         }
         //listen to togglePanel event
         demo.addEventListener('togglePanel', togglePanel);
       });
 
-      function togglePanel(evt) {
-        const state = evt.detail;
+    function togglePanel(evt) {
+        const panelState = evt.detail.panelState;
+        const hideMap = evt.detail.isFormOpen;
         const viewDiv = document.getElementById("viewDiv");
         const demo = document.getElementById("demo");
-        if (state) {
-          demo.classList.add("column-collapsed");
-          viewDiv.classList.add("map-with-panel-collapsed");
+        // in case of form is open then collapse the map
+        if (hideMap) {
+          if (panelState) {
+            demo.classList.remove("map-collapsed");
+            demo.classList.add("column-collapsed");
+            viewDiv.classList.add("map-with-panel-collapsed");
+          } else {
+            demo.classList.add("map-collapsed");
+            demo.classList.remove("column-collapsed");
+            viewDiv.classList.remove("map-with-panel-collapsed");
+          }
         } else {
-          demo.classList.remove("column-collapsed");
-          viewDiv.classList.remove("map-with-panel-collapsed");
+          if (panelState) {
+            demo.classList.add("column-collapsed");
+            viewDiv.classList.add("map-with-panel-collapsed");
+            demo.classList.remove("map-collapsed");
+          } else {
+            demo.classList.remove("column-collapsed");
+            viewDiv.classList.remove("map-with-panel-collapsed");
+            demo.classList.remove("map-collapsed");
+          }
         }
       }
     </script>

package/dist/components/create-feature2.js

@@ -191,14 +191,23 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
             }
         });
         this._editor.viewModel.addHandles(handle);
+        //Add handle to watch featureFormViewModel ready state
+        const formHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
+            if (state === 'ready') {
+                this._showSearchWidget = false;
+                this.progressStatus.emit(1);
+                this.drawComplete.emit();
+            }
+        });
+        this._editor.viewModel.addHandles(formHandle);
         //Add handle to watch editor viewmodel state and then show the search widget
-        const formHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
+        const createFeatureHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
             if (state === 'creating-features') {
                 this._editorLoading = true;
                 this._showSearchWidget = true;
             }
         });
-        this._editor.viewModel.addHandles(formHandle);
+        this._editor.viewModel.addHandles(createFeatureHandle);
     }
     /**
      * Start creating the feature
@@ -216,14 +225,6 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
                     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._showSearchWidget = false;
-                                this.progressStatus.emit(1);
-                                this.drawComplete.emit();
-                            }
-                        });
                         //hides the header and footer elements in editor widget
                         this.hideEditorsElements().then(() => {
                             resolve({});
@@ -337,13 +338,13 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * @protected
      */
     async hideEditorsElements() {
-        var _a;
+        var _a, _b;
         if (!this.customizeSubmit) {
             return;
         }
         await this.timeout(700);
         //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) => {
+        (_b = (_a = this.el.querySelector('.esri-editor')) === null || _a === void 0 ? void 0 : _a.querySelectorAll('calcite-flow-item')) === null || _b === void 0 ? void 0 : _b.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

package/dist/components/create-related-feature2.js

@@ -17,6 +17,7 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
         this.success = createEvent(this, "success", 7);
         this.fail = createEvent(this, "fail", 7);
         this.isActionPending = createEvent(this, "isActionPending", 7);
+        this.formReady = createEvent(this, "formReady", 7);
         /**
          * boolean: Flag to maintain form submission using submit button
          */
@@ -109,7 +110,7 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
     }
     render() {
         const loaderClass = this._editorLoading ? "" : "display-none";
-        return (h("calcite-loader", { key: 'a8fd1e83a4a9614779be19a11e6028b3a402cbd2', class: loaderClass, label: "", scale: "s" }));
+        return (h("calcite-loader", { key: '5302b1166a175b0605604792cd40b9d3fbfabd02', class: loaderClass, label: "", scale: "s" }));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -157,6 +158,13 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
             }
         });
         this._editor.viewModel.addHandles(attachmentHandle);
+        //Add handle to watch featureFormViewModel ready state
+        const formHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
+            if (state === 'ready') {
+                this.formReady.emit();
+            }
+        });
+        this._editor.viewModel.addHandles(formHandle);
     }
     /**
      * Start creating the feature feature form
@@ -182,8 +190,6 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
         await this._editor.startCreateFeaturesWorkflowAtFeatureCreation(creationInfo);
         //hides the header and footer elements in editor widget
         await this.hideEditorsElements();
-        // Emit an event to show submit cancel buttons
-        this.isActionPending.emit(false);
         this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
     }
     /**