@esri/solutions-components 0.8.32 → 0.8.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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
  /**