@esri/solutions-components 0.8.32 → 0.8.34

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. package/dist/cjs/basemap-gallery_7.cjs.entry.js +23 -7
  2. package/dist/cjs/calcite-flow_6.cjs.entry.js +22 -19
  3. package/dist/cjs/crowdsource-manager.cjs.entry.js +3 -1
  4. package/dist/cjs/crowdsource-reporter.cjs.entry.js +29 -6
  5. package/dist/collection/components/create-feature/create-feature.js +13 -12
  6. package/dist/collection/components/create-related-feature/create-related-feature.js +23 -3
  7. package/dist/collection/components/crowdsource-manager/crowdsource-manager.js +3 -1
  8. package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js +31 -8
  9. package/dist/collection/components/feature-details/feature-details.js +0 -4
  10. package/dist/collection/components/floor-filter/floor-filter.js +23 -7
  11. package/dist/collection/demos/crowdsource-reporter.html +32 -8
  12. package/dist/components/create-feature2.js +13 -12
  13. package/dist/components/create-related-feature2.js +9 -3
  14. package/dist/components/crowdsource-manager.js +3 -1
  15. package/dist/components/crowdsource-reporter.js +29 -6
  16. package/dist/components/feature-details2.js +0 -4
  17. package/dist/components/floor-filter2.js +23 -7
  18. package/dist/esm/basemap-gallery_7.entry.js +23 -7
  19. package/dist/esm/calcite-flow_6.entry.js +22 -19
  20. package/dist/esm/crowdsource-manager.entry.js +3 -1
  21. package/dist/esm/crowdsource-reporter.entry.js +29 -6
  22. package/dist/solutions-components/demos/crowdsource-reporter.html +32 -8
  23. package/dist/solutions-components/p-0ce36a4a.entry.js +17 -0
  24. package/dist/solutions-components/p-21cbb55d.entry.js +6 -0
  25. package/dist/solutions-components/p-5c5e3745.entry.js +6 -0
  26. package/dist/solutions-components/p-c91b2153.entry.js +6 -0
  27. package/dist/solutions-components/solutions-components.esm.js +1 -1
  28. package/dist/types/components/create-related-feature/create-related-feature.d.ts +4 -0
  29. package/dist/types/components/crowdsource-reporter/crowdsource-reporter.d.ts +16 -3
  30. package/dist/types/components.d.ts +7 -2
  31. package/dist/types/preact.d.ts +2 -1
  32. package/package.json +1 -1
  33. package/dist/solutions-components/p-1b096a8b.entry.js +0 -6
  34. package/dist/solutions-components/p-4ae34862.entry.js +0 -17
  35. package/dist/solutions-components/p-90c3bc54.entry.js +0 -6
  36. package/dist/solutions-components/p-a0616647.entry.js +0 -6
@@ -40,6 +40,7 @@
40
40
  }
41
41
  .over-map[dir="rtl"] {
42
42
  right: 0px;
43
+ left: auto;
43
44
  }
44
45
  .column {
45
46
  width: 360px;
@@ -72,6 +73,13 @@
72
73
  top: calc(100% - 100px);
73
74
  height: 100px;
74
75
  }
76
+
77
+ .map-collapsed {
78
+ height: 100%;
79
+ top: 0;
80
+ width: 100%;
81
+ z-index: 1000;
82
+ }
75
83
  }
76
84
  </style>
77
85
 
@@ -295,22 +303,38 @@
295
303
  //on change update the prop for is mobile
296
304
  mediaQueryList.onchange = (e) => {
297
305
  demo.isMobile = e.matches;
298
- togglePanel({ detail: false })
306
+ togglePanel({ detail: { panelState: false, isFormOpen: false } })
299
307
  }
300
308
  //listen to togglePanel event
301
309
  demo.addEventListener('togglePanel', togglePanel);
302
310
  });
303
311
 
304
- function togglePanel(evt) {
305
- const state = evt.detail;
312
+ function togglePanel(evt) {
313
+ const panelState = evt.detail.panelState;
314
+ const hideMap = evt.detail.isFormOpen;
306
315
  const viewDiv = document.getElementById("viewDiv");
307
316
  const demo = document.getElementById("demo");
308
- if (state) {
309
- demo.classList.add("column-collapsed");
310
- viewDiv.classList.add("map-with-panel-collapsed");
317
+ // in case of form is open then collapse the map
318
+ if (hideMap) {
319
+ if (panelState) {
320
+ demo.classList.remove("map-collapsed");
321
+ demo.classList.add("column-collapsed");
322
+ viewDiv.classList.add("map-with-panel-collapsed");
323
+ } else {
324
+ demo.classList.add("map-collapsed");
325
+ demo.classList.remove("column-collapsed");
326
+ viewDiv.classList.remove("map-with-panel-collapsed");
327
+ }
311
328
  } else {
312
- demo.classList.remove("column-collapsed");
313
- viewDiv.classList.remove("map-with-panel-collapsed");
329
+ if (panelState) {
330
+ demo.classList.add("column-collapsed");
331
+ viewDiv.classList.add("map-with-panel-collapsed");
332
+ demo.classList.remove("map-collapsed");
333
+ } else {
334
+ demo.classList.remove("column-collapsed");
335
+ viewDiv.classList.remove("map-with-panel-collapsed");
336
+ demo.classList.remove("map-collapsed");
337
+ }
314
338
  }
315
339
  }
316
340
  </script>
@@ -191,14 +191,23 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
191
191
  }
192
192
  });
193
193
  this._editor.viewModel.addHandles(handle);
194
+ //Add handle to watch featureFormViewModel ready state
195
+ const formHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
196
+ if (state === 'ready') {
197
+ this._showSearchWidget = false;
198
+ this.progressStatus.emit(1);
199
+ this.drawComplete.emit();
200
+ }
201
+ });
202
+ this._editor.viewModel.addHandles(formHandle);
194
203
  //Add handle to watch editor viewmodel state and then show the search widget
195
- const formHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
204
+ const createFeatureHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
196
205
  if (state === 'creating-features') {
197
206
  this._editorLoading = true;
198
207
  this._showSearchWidget = true;
199
208
  }
200
209
  });
201
- this._editor.viewModel.addHandles(formHandle);
210
+ this._editor.viewModel.addHandles(createFeatureHandle);
202
211
  }
203
212
  /**
204
213
  * Start creating the feature
@@ -216,14 +225,6 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
216
225
  setTimeout(() => {
217
226
  //on form submit
218
227
  this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
219
- //on sketch complete emit the event
220
- this._editor.viewModel.sketchViewModel.on("create", (evt) => {
221
- if (evt.state === "complete") {
222
- this._showSearchWidget = false;
223
- this.progressStatus.emit(1);
224
- this.drawComplete.emit();
225
- }
226
- });
227
228
  //hides the header and footer elements in editor widget
228
229
  this.hideEditorsElements().then(() => {
229
230
  resolve({});
@@ -337,13 +338,13 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
337
338
  * @protected
338
339
  */
339
340
  async hideEditorsElements() {
340
- var _a;
341
+ var _a, _b;
341
342
  if (!this.customizeSubmit) {
342
343
  return;
343
344
  }
344
345
  await this.timeout(700);
345
346
  //hides the header and footer on the featureForm
346
- (_a = this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')) === null || _a === void 0 ? void 0 : _a.forEach((flowItem) => {
347
+ (_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) => {
347
348
  var _a, _b, _c, _d, _e;
348
349
  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');
349
350
  //hide the header
@@ -17,6 +17,7 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
17
17
  this.success = createEvent(this, "success", 7);
18
18
  this.fail = createEvent(this, "fail", 7);
19
19
  this.isActionPending = createEvent(this, "isActionPending", 7);
20
+ this.formReady = createEvent(this, "formReady", 7);
20
21
  /**
21
22
  * boolean: Flag to maintain form submission using submit button
22
23
  */
@@ -109,7 +110,7 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
109
110
  }
110
111
  render() {
111
112
  const loaderClass = this._editorLoading ? "" : "display-none";
112
- return (h("calcite-loader", { key: 'a8fd1e83a4a9614779be19a11e6028b3a402cbd2', class: loaderClass, label: "", scale: "s" }));
113
+ return (h("calcite-loader", { key: '5302b1166a175b0605604792cd40b9d3fbfabd02', class: loaderClass, label: "", scale: "s" }));
113
114
  }
114
115
  /**
115
116
  * 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
157
158
  }
158
159
  });
159
160
  this._editor.viewModel.addHandles(attachmentHandle);
161
+ //Add handle to watch featureFormViewModel ready state
162
+ const formHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
163
+ if (state === 'ready') {
164
+ this.formReady.emit();
165
+ }
166
+ });
167
+ this._editor.viewModel.addHandles(formHandle);
160
168
  }
161
169
  /**
162
170
  * Start creating the feature feature form
@@ -182,8 +190,6 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
182
190
  await this._editor.startCreateFeaturesWorkflowAtFeatureCreation(creationInfo);
183
191
  //hides the header and footer elements in editor widget
184
192
  await this.hideEditorsElements();
185
- // Emit an event to show submit cancel buttons
186
- this.isActionPending.emit(false);
187
193
  this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
188
194
  }
189
195
  /**
@@ -261,7 +261,9 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
261
261
  async componentDidRender() {
262
262
  if (this._shouldSetMapView) {
263
263
  this._shouldSetMapView = false;
264
- await this._setMapView();
264
+ if (this._mapChange) {
265
+ await this._setMapView();
266
+ }
265
267
  }
266
268
  }
267
269
  /**
@@ -156,7 +156,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
156
156
  */
157
157
  render() {
158
158
  const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
159
- 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()));
159
+ 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()));
160
160
  }
161
161
  //--------------------------------------------------------------------------
162
162
  //
@@ -333,7 +333,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
333
333
  * @protected
334
334
  */
335
335
  getFeatureCreateFlowItem() {
336
- 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 }))));
336
+ 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 }))));
337
337
  }
338
338
  /**
339
339
  * Update the progress bar status when editor panel changes
@@ -344,10 +344,12 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
344
344
  this._updatedProgressBarStatus = evt.detail;
345
345
  }
346
346
  /**
347
- * When drawing of incident location completed on map show the submit and cancel button
347
+ * When form is ready then show submit and cancel button
348
348
  * @protected
349
349
  */
350
- onDrawComplete() {
350
+ onFormReady() {
351
+ // update the form state when form is ready
352
+ this.updateFormState(true);
351
353
  this._showSubmitCancelButton = true;
352
354
  }
353
355
  /**
@@ -374,6 +376,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
374
376
  if (this._createFeature) {
375
377
  void this._createFeature.close();
376
378
  }
379
+ //on back form will be closed, so update the form state
380
+ if (this.isFormOpen) {
381
+ this.updateFormState(false);
382
+ }
377
383
  this.backFromSelectedPanel();
378
384
  }
379
385
  /**
@@ -394,6 +400,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
394
400
  void this._createRelatedFeature.close();
395
401
  this._showSubmitCancelButton = false;
396
402
  }
403
+ //on back form will be closed, so update the form state
404
+ if (this.isFormOpen) {
405
+ this.updateFormState(false);
406
+ }
397
407
  this.backFromSelectedPanel();
398
408
  }
399
409
  /**
@@ -410,6 +420,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
410
420
  * @protected
411
421
  */
412
422
  onReportSubmitted() {
423
+ //on report submit form will be closed, so update the form state
424
+ if (this.isFormOpen) {
425
+ this.updateFormState(false);
426
+ }
413
427
  this._reportSubmitted = true;
414
428
  void this.navigateToHomePage();
415
429
  }
@@ -546,7 +560,16 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
546
560
  */
547
561
  toggleSidePanel() {
548
562
  this._sidePanelCollapsed = !this._sidePanelCollapsed;
549
- this.togglePanel.emit(this._sidePanelCollapsed);
563
+ this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this.isFormOpen });
564
+ }
565
+ /**
566
+ * Hide map when form open in case of mobile
567
+ * @param isFormOpen updated form state
568
+ * @protected
569
+ */
570
+ updateFormState(isFormOpen) {
571
+ this.isFormOpen = isFormOpen;
572
+ this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this.isFormOpen });
550
573
  }
551
574
  /**
552
575
  * When feature is selected from list store that and show feature details
@@ -641,7 +664,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
641
664
  * @returns Node
642
665
  */
643
666
  getAddCommentFlowItem() {
644
- 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 }))));
667
+ 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 }))));
645
668
  }
646
669
  /**
647
670
  * Sets the selected features and updates the first feature as the current selected feature
@@ -349,10 +349,6 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
349
349
  const param = { updateFeatures: [newGraphicInstance] };
350
350
  await selectedLayer.applyEdits(param).then(() => {
351
351
  this._selectedGraphic = selectFeatureAttr;
352
- //update the current graphics in info card so that, the updated values are reflected in popup content
353
- if (this._infoCard) {
354
- void this._infoCard.updateCurrentGraphic(this._selectedGraphic);
355
- }
356
352
  //store the like dislike value for the current selected graphic in local storage
357
353
  this.setInLocalStorage();
358
354
  this._updating = false;
@@ -30,12 +30,17 @@ const FloorFilter = /*@__PURE__*/ proxyCustomElement(class FloorFilter extends H
30
30
  * Watch for changes to the mapView and re-init the floor filter
31
31
  */
32
32
  async mapViewWatchHandler() {
33
+ console.log("mapViewWatchHandler");
34
+ console.log(`this.mapView: ${this.mapView}`);
33
35
  await this._initFloorFilter(this.mapView);
34
36
  }
35
37
  /**
36
38
  * Watch for changes to the enabled property and re-init or destroy the floor filter
37
39
  */
38
40
  async enabledWatchHandler() {
41
+ console.log("enabledWatchHandler");
42
+ console.log(`this.enabled: ${this.enabled}`);
43
+ console.log(`this.mapView: ${this.mapView}`);
39
44
  if (this.enabled) {
40
45
  await this._initFloorFilter(this.mapView);
41
46
  }
@@ -58,7 +63,9 @@ const FloorFilter = /*@__PURE__*/ proxyCustomElement(class FloorFilter extends H
58
63
  * Renders the component.
59
64
  */
60
65
  render() {
61
- return (h(Host, { key: 'c80a8d46fb48f3789d9fa09c2400faad49e2e236' }, h("div", { key: '82919a3ba061a17c8aeaa0d2f6f4f13bc428b519', ref: (el) => { this._floorFilterElement = el; } })));
66
+ console.log("render");
67
+ console.log(`this._floorFilterElement: ${this._floorFilterElement}`);
68
+ return (h(Host, { key: '01b71c71af2a183b85c8620c338512fd338f19ef' }, h("div", { key: '752d397c6e3b6a2257d0a8a05051ed821eca4b94', ref: (el) => { this._floorFilterElement = el; } })));
62
69
  }
63
70
  //--------------------------------------------------------------------------
64
71
  //
@@ -86,6 +93,7 @@ const FloorFilter = /*@__PURE__*/ proxyCustomElement(class FloorFilter extends H
86
93
  * @protected
87
94
  */
88
95
  _destroyWidget() {
96
+ console.log("_destroyWidget");
89
97
  if (this.floorFilterWidget) {
90
98
  this.floorFilterWidget.destroy();
91
99
  this.floorFilterWidget = undefined;
@@ -100,6 +108,7 @@ const FloorFilter = /*@__PURE__*/ proxyCustomElement(class FloorFilter extends H
100
108
  * @protected
101
109
  */
102
110
  _initContainer() {
111
+ console.log("_initContainer");
103
112
  this._destroyWidget();
104
113
  this._floorFilterElement = document.createElement("div");
105
114
  }
@@ -107,11 +116,18 @@ const FloorFilter = /*@__PURE__*/ proxyCustomElement(class FloorFilter extends H
107
116
  * Initialize the floor filter or reset the current view if it already exists
108
117
  */
109
118
  async _initFloorFilter(view) {
119
+ console.log("_initFloorFilter");
110
120
  const webMap = view === null || view === void 0 ? void 0 : view.map;
111
- if (view && this.enabled && this.FloorFilter && (webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo)) {
112
- this._initContainer();
113
- await webMap.when(() => {
114
- var _a, _b, _c;
121
+ await webMap.when(() => {
122
+ var _a, _b, _c;
123
+ console.log("webMap.when");
124
+ console.log("_initFloorFilter");
125
+ console.log(`view: ${view}`);
126
+ console.log(`this.enabled: ${this.enabled}`);
127
+ console.log(`this.FloorFilter: ${this.FloorFilter}`);
128
+ console.log(`webMap?.floorInfo: ${webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo}`);
129
+ if (view && this.enabled && this.FloorFilter && (webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo)) {
130
+ this._initContainer();
115
131
  this.floorFilterWidget = new this.FloorFilter({
116
132
  container: this._floorFilterElement,
117
133
  view
@@ -128,8 +144,8 @@ const FloorFilter = /*@__PURE__*/ proxyCustomElement(class FloorFilter extends H
128
144
  this._siteHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.site, (site) => {
129
145
  this.siteChanged.emit(site);
130
146
  });
131
- });
132
- }
147
+ }
148
+ });
133
149
  }
134
150
  get el() { return this; }
135
151
  static get watchers() { return {
@@ -136,12 +136,17 @@ const FloorFilter = class {
136
136
  * Watch for changes to the mapView and re-init the floor filter
137
137
  */
138
138
  async mapViewWatchHandler() {
139
+ console.log("mapViewWatchHandler");
140
+ console.log(`this.mapView: ${this.mapView}`);
139
141
  await this._initFloorFilter(this.mapView);
140
142
  }
141
143
  /**
142
144
  * Watch for changes to the enabled property and re-init or destroy the floor filter
143
145
  */
144
146
  async enabledWatchHandler() {
147
+ console.log("enabledWatchHandler");
148
+ console.log(`this.enabled: ${this.enabled}`);
149
+ console.log(`this.mapView: ${this.mapView}`);
145
150
  if (this.enabled) {
146
151
  await this._initFloorFilter(this.mapView);
147
152
  }
@@ -164,7 +169,9 @@ const FloorFilter = class {
164
169
  * Renders the component.
165
170
  */
166
171
  render() {
167
- return (h(Host, { key: 'c80a8d46fb48f3789d9fa09c2400faad49e2e236' }, h("div", { key: '82919a3ba061a17c8aeaa0d2f6f4f13bc428b519', ref: (el) => { this._floorFilterElement = el; } })));
172
+ console.log("render");
173
+ console.log(`this._floorFilterElement: ${this._floorFilterElement}`);
174
+ return (h(Host, { key: '01b71c71af2a183b85c8620c338512fd338f19ef' }, h("div", { key: '752d397c6e3b6a2257d0a8a05051ed821eca4b94', ref: (el) => { this._floorFilterElement = el; } })));
168
175
  }
169
176
  //--------------------------------------------------------------------------
170
177
  //
@@ -192,6 +199,7 @@ const FloorFilter = class {
192
199
  * @protected
193
200
  */
194
201
  _destroyWidget() {
202
+ console.log("_destroyWidget");
195
203
  if (this.floorFilterWidget) {
196
204
  this.floorFilterWidget.destroy();
197
205
  this.floorFilterWidget = undefined;
@@ -206,6 +214,7 @@ const FloorFilter = class {
206
214
  * @protected
207
215
  */
208
216
  _initContainer() {
217
+ console.log("_initContainer");
209
218
  this._destroyWidget();
210
219
  this._floorFilterElement = document.createElement("div");
211
220
  }
@@ -213,11 +222,18 @@ const FloorFilter = class {
213
222
  * Initialize the floor filter or reset the current view if it already exists
214
223
  */
215
224
  async _initFloorFilter(view) {
225
+ console.log("_initFloorFilter");
216
226
  const webMap = view === null || view === void 0 ? void 0 : view.map;
217
- if (view && this.enabled && this.FloorFilter && (webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo)) {
218
- this._initContainer();
219
- await webMap.when(() => {
220
- var _a, _b, _c;
227
+ await webMap.when(() => {
228
+ var _a, _b, _c;
229
+ console.log("webMap.when");
230
+ console.log("_initFloorFilter");
231
+ console.log(`view: ${view}`);
232
+ console.log(`this.enabled: ${this.enabled}`);
233
+ console.log(`this.FloorFilter: ${this.FloorFilter}`);
234
+ console.log(`webMap?.floorInfo: ${webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo}`);
235
+ if (view && this.enabled && this.FloorFilter && (webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo)) {
236
+ this._initContainer();
221
237
  this.floorFilterWidget = new this.FloorFilter({
222
238
  container: this._floorFilterElement,
223
239
  view
@@ -234,8 +250,8 @@ const FloorFilter = class {
234
250
  this._siteHandle = this.reactiveUtils.watch(() => this.floorFilterWidget.site, (site) => {
235
251
  this.siteChanged.emit(site);
236
252
  });
237
- });
238
- }
253
+ }
254
+ });
239
255
  }
240
256
  get el() { return getElement(this); }
241
257
  static get watchers() { return {
@@ -518,14 +518,23 @@ const CreateFeature = class {
518
518
  }
519
519
  });
520
520
  this._editor.viewModel.addHandles(handle);
521
+ //Add handle to watch featureFormViewModel ready state
522
+ const formHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
523
+ if (state === 'ready') {
524
+ this._showSearchWidget = false;
525
+ this.progressStatus.emit(1);
526
+ this.drawComplete.emit();
527
+ }
528
+ });
529
+ this._editor.viewModel.addHandles(formHandle);
521
530
  //Add handle to watch editor viewmodel state and then show the search widget
522
- const formHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
531
+ const createFeatureHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
523
532
  if (state === 'creating-features') {
524
533
  this._editorLoading = true;
525
534
  this._showSearchWidget = true;
526
535
  }
527
536
  });
528
- this._editor.viewModel.addHandles(formHandle);
537
+ this._editor.viewModel.addHandles(createFeatureHandle);
529
538
  }
530
539
  /**
531
540
  * Start creating the feature
@@ -543,14 +552,6 @@ const CreateFeature = class {
543
552
  setTimeout(() => {
544
553
  //on form submit
545
554
  this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
546
- //on sketch complete emit the event
547
- this._editor.viewModel.sketchViewModel.on("create", (evt) => {
548
- if (evt.state === "complete") {
549
- this._showSearchWidget = false;
550
- this.progressStatus.emit(1);
551
- this.drawComplete.emit();
552
- }
553
- });
554
555
  //hides the header and footer elements in editor widget
555
556
  this.hideEditorsElements().then(() => {
556
557
  resolve({});
@@ -664,13 +665,13 @@ const CreateFeature = class {
664
665
  * @protected
665
666
  */
666
667
  async hideEditorsElements() {
667
- var _a;
668
+ var _a, _b;
668
669
  if (!this.customizeSubmit) {
669
670
  return;
670
671
  }
671
672
  await this.timeout(700);
672
673
  //hides the header and footer on the featureForm
673
- (_a = this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')) === null || _a === void 0 ? void 0 : _a.forEach((flowItem) => {
674
+ (_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) => {
674
675
  var _a, _b, _c, _d, _e;
675
676
  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');
676
677
  //hide the header
@@ -738,6 +739,7 @@ const CreateRelatedFeature = class {
738
739
  this.success = createEvent(this, "success", 7);
739
740
  this.fail = createEvent(this, "fail", 7);
740
741
  this.isActionPending = createEvent(this, "isActionPending", 7);
742
+ this.formReady = createEvent(this, "formReady", 7);
741
743
  /**
742
744
  * boolean: Flag to maintain form submission using submit button
743
745
  */
@@ -830,7 +832,7 @@ const CreateRelatedFeature = class {
830
832
  }
831
833
  render() {
832
834
  const loaderClass = this._editorLoading ? "" : "display-none";
833
- return (h("calcite-loader", { key: 'a8fd1e83a4a9614779be19a11e6028b3a402cbd2', class: loaderClass, label: "", scale: "s" }));
835
+ return (h("calcite-loader", { key: '5302b1166a175b0605604792cd40b9d3fbfabd02', class: loaderClass, label: "", scale: "s" }));
834
836
  }
835
837
  /**
836
838
  * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -878,6 +880,13 @@ const CreateRelatedFeature = class {
878
880
  }
879
881
  });
880
882
  this._editor.viewModel.addHandles(attachmentHandle);
883
+ //Add handle to watch featureFormViewModel ready state
884
+ const formHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
885
+ if (state === 'ready') {
886
+ this.formReady.emit();
887
+ }
888
+ });
889
+ this._editor.viewModel.addHandles(formHandle);
881
890
  }
882
891
  /**
883
892
  * Start creating the feature feature form
@@ -903,8 +912,6 @@ const CreateRelatedFeature = class {
903
912
  await this._editor.startCreateFeaturesWorkflowAtFeatureCreation(creationInfo);
904
913
  //hides the header and footer elements in editor widget
905
914
  await this.hideEditorsElements();
906
- // Emit an event to show submit cancel buttons
907
- this.isActionPending.emit(false);
908
915
  this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
909
916
  }
910
917
  /**
@@ -1312,10 +1319,6 @@ const FeatureDetails = class {
1312
1319
  const param = { updateFeatures: [newGraphicInstance] };
1313
1320
  await selectedLayer.applyEdits(param).then(() => {
1314
1321
  this._selectedGraphic = selectFeatureAttr;
1315
- //update the current graphics in info card so that, the updated values are reflected in popup content
1316
- if (this._infoCard) {
1317
- void this._infoCard.updateCurrentGraphic(this._selectedGraphic);
1318
- }
1319
1322
  //store the like dislike value for the current selected graphic in local storage
1320
1323
  this.setInLocalStorage();
1321
1324
  this._updating = false;
@@ -204,7 +204,9 @@ const CrowdsourceManager = class {
204
204
  async componentDidRender() {
205
205
  if (this._shouldSetMapView) {
206
206
  this._shouldSetMapView = false;
207
- await this._setMapView();
207
+ if (this._mapChange) {
208
+ await this._setMapView();
209
+ }
208
210
  }
209
211
  }
210
212
  /**