@esri/solutions-components 0.8.33 → 0.8.35

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));
     }
     /**

package/dist/components/crowdsource-reporter.js

@@ -156,7 +156,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     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()));
     }
     //--------------------------------------------------------------------------
     //
@@ -333,7 +333,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.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
@@ -344,10 +344,12 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         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;
     }
     /**
@@ -374,6 +376,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         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();
     }
     /**
@@ -394,6 +400,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             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();
     }
     /**
@@ -410,6 +420,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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();
     }
@@ -546,7 +560,16 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     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
@@ -641,7 +664,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @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

package/dist/components/feature-details2.js

@@ -349,10 +349,6 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
         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/components/floor-filter2.js

@@ -30,17 +30,12 @@ const FloorFilter = /*@__PURE__*/ proxyCustomElement(class FloorFilter extends H
      * Watch for changes to the mapView and re-init the floor filter
      */
     async mapViewWatchHandler() {
-        console.log("mapViewWatchHandler");
-        console.log(`this.mapView: ${this.mapView}`);
         await this._initFloorFilter(this.mapView);
     }
     /**
      * Watch for changes to the enabled property and re-init or destroy the floor filter
      */
     async enabledWatchHandler() {
-        console.log("enabledWatchHandler");
-        console.log(`this.enabled: ${this.enabled}`);
-        console.log(`this.mapView: ${this.mapView}`);
         if (this.enabled) {
             await this._initFloorFilter(this.mapView);
         }
@@ -63,9 +58,7 @@ const FloorFilter = /*@__PURE__*/ proxyCustomElement(class FloorFilter extends H
      * Renders the component.
      */
     render() {
-        console.log("render");
-        console.log(`this._floorFilterElement: ${this._floorFilterElement}`);
-        return (h(Host, { key: '01b71c71af2a183b85c8620c338512fd338f19ef' }, h("div", { key: '752d397c6e3b6a2257d0a8a05051ed821eca4b94', ref: (el) => { this._floorFilterElement = el; } })));
+        return (h(Host, { key: 'c80a8d46fb48f3789d9fa09c2400faad49e2e236' }, h("div", { key: '82919a3ba061a17c8aeaa0d2f6f4f13bc428b519', ref: (el) => { this._floorFilterElement = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -93,7 +86,6 @@ const FloorFilter = /*@__PURE__*/ proxyCustomElement(class FloorFilter extends H
      * @protected
      */
     _destroyWidget() {
-        console.log("_destroyWidget");
         if (this.floorFilterWidget) {
             this.floorFilterWidget.destroy();
             this.floorFilterWidget = undefined;
@@ -108,7 +100,6 @@ const FloorFilter = /*@__PURE__*/ proxyCustomElement(class FloorFilter extends H
      * @protected
      */
     _initContainer() {
-        console.log("_initContainer");
         this._destroyWidget();
         this._floorFilterElement = document.createElement("div");
     }
@@ -116,16 +107,9 @@ const FloorFilter = /*@__PURE__*/ proxyCustomElement(class FloorFilter extends H
      * Initialize the floor filter or reset the current view if it already exists
      */
     async _initFloorFilter(view) {
-        console.log("_initFloorFilter");
         const webMap = view === null || view === void 0 ? void 0 : view.map;
         await webMap.when(() => {
             var _a, _b, _c;
-            console.log("webMap.when");
-            console.log("_initFloorFilter");
-            console.log(`view: ${view}`);
-            console.log(`this.enabled: ${this.enabled}`);
-            console.log(`this.FloorFilter: ${this.FloorFilter}`);
-            console.log(`webMap?.floorInfo: ${webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo}`);
             if (view && this.enabled && this.FloorFilter && (webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo)) {
                 this._initContainer();
                 this.floorFilterWidget = new this.FloorFilter({

package/dist/esm/basemap-gallery_7.entry.js

@@ -136,17 +136,12 @@ const FloorFilter = class {
      * Watch for changes to the mapView and re-init the floor filter
      */
     async mapViewWatchHandler() {
-        console.log("mapViewWatchHandler");
-        console.log(`this.mapView: ${this.mapView}`);
         await this._initFloorFilter(this.mapView);
     }
     /**
      * Watch for changes to the enabled property and re-init or destroy the floor filter
      */
     async enabledWatchHandler() {
-        console.log("enabledWatchHandler");
-        console.log(`this.enabled: ${this.enabled}`);
-        console.log(`this.mapView: ${this.mapView}`);
         if (this.enabled) {
             await this._initFloorFilter(this.mapView);
         }
@@ -169,9 +164,7 @@ const FloorFilter = class {
      * Renders the component.
      */
     render() {
-        console.log("render");
-        console.log(`this._floorFilterElement: ${this._floorFilterElement}`);
-        return (h(Host, { key: '01b71c71af2a183b85c8620c338512fd338f19ef' }, h("div", { key: '752d397c6e3b6a2257d0a8a05051ed821eca4b94', ref: (el) => { this._floorFilterElement = el; } })));
+        return (h(Host, { key: 'c80a8d46fb48f3789d9fa09c2400faad49e2e236' }, h("div", { key: '82919a3ba061a17c8aeaa0d2f6f4f13bc428b519', ref: (el) => { this._floorFilterElement = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -199,7 +192,6 @@ const FloorFilter = class {
      * @protected
      */
     _destroyWidget() {
-        console.log("_destroyWidget");
         if (this.floorFilterWidget) {
             this.floorFilterWidget.destroy();
             this.floorFilterWidget = undefined;
@@ -214,7 +206,6 @@ const FloorFilter = class {
      * @protected
      */
     _initContainer() {
-        console.log("_initContainer");
         this._destroyWidget();
         this._floorFilterElement = document.createElement("div");
     }
@@ -222,16 +213,9 @@ const FloorFilter = class {
      * Initialize the floor filter or reset the current view if it already exists
      */
     async _initFloorFilter(view) {
-        console.log("_initFloorFilter");
         const webMap = view === null || view === void 0 ? void 0 : view.map;
         await webMap.when(() => {
             var _a, _b, _c;
-            console.log("webMap.when");
-            console.log("_initFloorFilter");
-            console.log(`view: ${view}`);
-            console.log(`this.enabled: ${this.enabled}`);
-            console.log(`this.FloorFilter: ${this.FloorFilter}`);
-            console.log(`webMap?.floorInfo: ${webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo}`);
             if (view && this.enabled && this.FloorFilter && (webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo)) {
                 this._initContainer();
                 this.floorFilterWidget = new this.FloorFilter({

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

@@ -518,14 +518,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
@@ -543,14 +552,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({});
@@ -664,13 +665,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
@@ -738,6 +739,7 @@ const CreateRelatedFeature = class {
         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
          */
@@ -830,7 +832,7 @@ const CreateRelatedFeature = class {
     }
     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.
@@ -878,6 +880,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
@@ -903,8 +912,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));
     }
     /**
@@ -1312,10 +1319,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/esm/crowdsource-reporter.entry.js

@@ -109,7 +109,7 @@ const CrowdsourceReporter = class {
      */
     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()));
     }
     //--------------------------------------------------------------------------
     //
@@ -286,7 +286,7 @@ 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: "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
@@ -297,10 +297,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;
     }
     /**
@@ -327,6 +329,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();
     }
     /**
@@ -347,6 +353,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();
     }
     /**
@@ -363,6 +373,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();
     }
@@ -499,7 +513,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
@@ -594,7 +617,7 @@ const CrowdsourceReporter = class {
      * @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