@esri/solutions-components 0.8.30 → 0.8.31

Sign up to get free protection for your applications and to get access to all the features.
Files changed (37) hide show
  1. package/dist/cjs/calcite-alert_4.cjs.entry.js +1 -1
  2. package/dist/cjs/calcite-flow_6.cjs.entry.js +58 -34
  3. package/dist/cjs/crowdsource-reporter.cjs.entry.js +2 -2
  4. package/dist/cjs/feature-list.cjs.entry.js +1 -1
  5. package/dist/cjs/loader.cjs.js +1 -1
  6. package/dist/cjs/{popupUtils-e3fa775b.js → popupUtils-9ca69f8c.js} +1 -1
  7. package/dist/cjs/solutions-components.cjs.js +1 -1
  8. package/dist/collection/components/create-feature/create-feature.js +13 -8
  9. package/dist/collection/components/create-related-feature/create-related-feature.css +4 -0
  10. package/dist/collection/components/create-related-feature/create-related-feature.js +52 -26
  11. package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.css +4 -0
  12. package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js +1 -1
  13. package/dist/collection/utils/popupUtils.js +1 -1
  14. package/dist/collection/utils/popupUtils.ts +1 -1
  15. package/dist/components/create-feature2.js +13 -8
  16. package/dist/components/create-related-feature2.js +57 -30
  17. package/dist/components/crowdsource-reporter.js +2 -2
  18. package/dist/components/popupUtils.js +1 -1
  19. package/dist/esm/calcite-alert_4.entry.js +1 -1
  20. package/dist/esm/calcite-flow_6.entry.js +58 -34
  21. package/dist/esm/crowdsource-reporter.entry.js +2 -2
  22. package/dist/esm/feature-list.entry.js +1 -1
  23. package/dist/esm/loader.js +1 -1
  24. package/dist/esm/{popupUtils-17193415.js → popupUtils-8efd3cde.js} +1 -1
  25. package/dist/esm/solutions-components.js +1 -1
  26. package/dist/solutions-components/p-2455bcb0.js +21 -0
  27. package/dist/solutions-components/{p-bb90a138.entry.js → p-3365a6de.entry.js} +2 -2
  28. package/dist/solutions-components/p-4ae34862.entry.js +17 -0
  29. package/dist/solutions-components/{p-16fb8296.entry.js → p-628874a6.entry.js} +1 -1
  30. package/dist/solutions-components/{p-2f7bfd8d.entry.js → p-90c3bc54.entry.js} +1 -1
  31. package/dist/solutions-components/solutions-components.esm.js +1 -1
  32. package/dist/solutions-components/utils/popupUtils.ts +1 -1
  33. package/dist/types/components/create-feature/create-feature.d.ts +1 -1
  34. package/dist/types/components/create-related-feature/create-related-feature.d.ts +19 -1
  35. package/package.json +1 -1
  36. package/dist/solutions-components/p-2e23ac2c.js +0 -21
  37. package/dist/solutions-components/p-c21a6940.entry.js +0 -17
@@ -356,7 +356,7 @@ const CreateFeature = class {
356
356
  this.customizeSubmit = false;
357
357
  this.searchConfiguration = undefined;
358
358
  this._editorLoading = false;
359
- this.showSearchWidget = undefined;
359
+ this._showSearchWidget = undefined;
360
360
  }
361
361
  //--------------------------------------------------------------------------
362
362
  //
@@ -429,10 +429,10 @@ const CreateFeature = class {
429
429
  * Renders the component.
430
430
  */
431
431
  render() {
432
- const showSearchWidget = this.showSearchWidget ? '' : 'display-none';
432
+ const showSearchWidget = this._showSearchWidget ? '' : 'display-none';
433
433
  const loaderClass = this._editorLoading ? "" : "display-none";
434
434
  const featureFormClass = this._editorLoading ? "display-none" : "";
435
- return (h(Fragment, { key: '2e790defdd5592fed729853888ee06143c95c84d' }, h("calcite-loader", { key: 'a0f1de0064ea80305d4aaf83f78939c0236c955a', class: loaderClass, label: "", scale: "s" }), h("div", { key: '1af391d6d7fd0dffa2e8e4b43905f8081a5f9820', class: featureFormClass, id: "feature-form" }), h("div", { key: '88d12115c3c2e0d34a5d6fd8895fb60cec6e9b5d', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" })));
435
+ return (h(Fragment, { key: 'a4ccd565a52a4cde4e76439629425f19bd4c222e' }, h("calcite-loader", { key: '30e8a3753985a734dd7cba461f26691b51f49ab9', class: loaderClass, label: "", scale: "s" }), h("div", { key: '0845f1fa85a21b578fd18200b43d4a77c34e6808', class: featureFormClass, id: "feature-form" }), h("div", { key: 'af74b6337f5a0dcfdbd552145c88eae5282a3307', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" })));
436
436
  }
437
437
  //--------------------------------------------------------------------------
438
438
  //
@@ -522,7 +522,7 @@ const CreateFeature = class {
522
522
  const formHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
523
523
  if (state === 'creating-features') {
524
524
  this._editorLoading = true;
525
- this.showSearchWidget = true;
525
+ this._showSearchWidget = true;
526
526
  }
527
527
  });
528
528
  this._editor.viewModel.addHandles(formHandle);
@@ -546,11 +546,12 @@ const CreateFeature = class {
546
546
  //on sketch complete emit the event
547
547
  this._editor.viewModel.sketchViewModel.on("create", (evt) => {
548
548
  if (evt.state === "complete") {
549
- this.showSearchWidget = false;
549
+ this._showSearchWidget = false;
550
550
  this.progressStatus.emit(1);
551
551
  this.drawComplete.emit();
552
552
  }
553
553
  });
554
+ //hides the header and footer elements in editor widget
554
555
  this.hideEditorsElements().then(() => {
555
556
  resolve({});
556
557
  }, e => reject(e));
@@ -561,8 +562,12 @@ const CreateFeature = class {
561
562
  if (items.length === 1) {
562
563
  this._editor.viewModel.featureTemplatesViewModel.select(items[0]);
563
564
  }
564
- //hides the header and footer elements in editor widget
565
- void this.hideEditorsElements();
565
+ const resolvePromise = items.length > 1;
566
+ this.hideEditorsElements().then(() => {
567
+ if (resolvePromise) {
568
+ resolve({});
569
+ }
570
+ }, e => resolvePromise && reject(e));
566
571
  }
567
572
  });
568
573
  }
@@ -724,7 +729,7 @@ const CreateFeature = class {
724
729
  };
725
730
  CreateFeature.style = CreateFeatureStyle0;
726
731
 
727
- const createRelatedFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !important}";
732
+ const createRelatedFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !important}.display-none{display:none !important}";
728
733
  const CreateRelatedFeatureStyle0 = createRelatedFeatureCss;
729
734
 
730
735
  const CreateRelatedFeature = class {
@@ -741,6 +746,7 @@ const CreateRelatedFeature = class {
741
746
  this.table = undefined;
742
747
  this.selectedFeature = undefined;
743
748
  this.customizeSubmit = false;
749
+ this._editorLoading = false;
744
750
  }
745
751
  //--------------------------------------------------------------------------
746
752
  //
@@ -755,6 +761,18 @@ const CreateRelatedFeature = class {
755
761
  await this.init();
756
762
  });
757
763
  }
764
+ /**
765
+ * When _editorLoading is true the container node will be hidden while starting the create workflow
766
+ */
767
+ async _editorLoadingWatchHandler(v) {
768
+ var _a, _b;
769
+ if (v) {
770
+ (_a = this._container) === null || _a === void 0 ? void 0 : _a.classList.add("display-none");
771
+ await this.startCreate();
772
+ (_b = this._container) === null || _b === void 0 ? void 0 : _b.classList.remove("display-none");
773
+ this._editorLoading = false;
774
+ }
775
+ }
758
776
  //--------------------------------------------------------------------------
759
777
  //
760
778
  // Methods (public)
@@ -811,7 +829,8 @@ const CreateRelatedFeature = class {
811
829
  this.reactiveUtils = reactiveUtils;
812
830
  }
813
831
  render() {
814
- return (h(Host, { key: 'c8516898db79b35b7fba909810afdc56b0602ebd' }));
832
+ const loaderClass = this._editorLoading ? "" : "display-none";
833
+ return (h("calcite-loader", { key: 'a8fd1e83a4a9614779be19a11e6028b3a402cbd2', class: loaderClass, label: "", scale: "s" }));
815
834
  }
816
835
  /**
817
836
  * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -824,29 +843,24 @@ const CreateRelatedFeature = class {
824
843
  * @protected
825
844
  */
826
845
  async createEditorWidget() {
846
+ var _a;
827
847
  if (this._editor) {
828
848
  this._editor.destroy();
829
849
  }
830
- const container = document.createElement("div");
850
+ this._container = document.createElement("div");
851
+ (_a = this._container) === null || _a === void 0 ? void 0 : _a.classList.add("display-none");
831
852
  this._editor = new this.Editor({
832
853
  view: this.mapView,
833
854
  visibleElements: {
834
855
  snappingControls: false
835
856
  },
836
- container
837
- });
838
- this.el.appendChild(container);
839
- //Add handle to watch featureFormViewModel ready state and hide the editor elements
840
- const hideElementHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
841
- if (state === 'ready') {
842
- this.hideEditorsElements();
843
- }
857
+ container: this._container
844
858
  });
845
- this._editor.viewModel.addHandles(hideElementHandle);
859
+ this.el.appendChild(this._container);
846
860
  //Add handle to watch featureTemplatesViewModel ready state and then start the creation
847
861
  const handle = this.reactiveUtils.watch(() => this._editor.viewModel.featureTemplatesViewModel.state, (state) => {
848
862
  if (state === 'ready') {
849
- void this.startCreate();
863
+ this._editorLoading = true;
850
864
  }
851
865
  });
852
866
  this._editor.viewModel.addHandles(handle);
@@ -887,6 +901,8 @@ const CreateRelatedFeature = class {
887
901
  template,
888
902
  };
889
903
  await this._editor.startCreateFeaturesWorkflowAtFeatureCreation(creationInfo);
904
+ //hides the header and footer elements in editor widget
905
+ await this.hideEditorsElements();
890
906
  // Emit an event to show submit cancel buttons
891
907
  this.isActionPending.emit(false);
892
908
  this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
@@ -895,22 +911,21 @@ const CreateRelatedFeature = class {
895
911
  * Hides the elements of editor widget
896
912
  * @protected
897
913
  */
898
- hideEditorsElements() {
914
+ async hideEditorsElements() {
915
+ var _a, _b;
899
916
  if (!this.customizeSubmit) {
900
917
  return;
901
918
  }
902
- setTimeout(() => {
903
- var _a;
904
- //hides the header and footer on the featureForm
905
- (_a = this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')) === null || _a === void 0 ? void 0 : _a.forEach((flowItem) => {
906
- var _a, _b, _c, _d, _e;
907
- 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');
908
- //hide the header
909
- (_d = article === null || article === void 0 ? void 0 : article.querySelector('header')) === null || _d === void 0 ? void 0 : _d.setAttribute('style', 'display: none');
910
- //hide the footer
911
- (_e = article === null || article === void 0 ? void 0 : article.querySelector('footer')) === null || _e === void 0 ? void 0 : _e.setAttribute('style', 'display: none');
912
- });
913
- }, 700);
919
+ await this.timeout(700);
920
+ //hides the header and footer on the featureForm
921
+ (_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) => {
922
+ var _a, _b, _c, _d, _e;
923
+ 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');
924
+ //hide the header
925
+ (_d = article === null || article === void 0 ? void 0 : article.querySelector('header')) === null || _d === void 0 ? void 0 : _d.setAttribute('style', 'display: none');
926
+ //hide the footer
927
+ (_e = article === null || article === void 0 ? void 0 : article.querySelector('footer')) === null || _e === void 0 ? void 0 : _e.setAttribute('style', 'display: none');
928
+ });
914
929
  }
915
930
  /**
916
931
  * Makes attributes for related feature
@@ -966,9 +981,18 @@ const CreateRelatedFeature = class {
966
981
  this.success.emit();
967
982
  }
968
983
  }
984
+ /**
985
+ * call setTimeout in Promise wrapper
986
+ * @param delay The time, in milliseconds that the timer should wait before the promise is resolved
987
+ * @protected
988
+ */
989
+ timeout(delay) {
990
+ return new Promise(resolve => setTimeout(resolve, delay));
991
+ }
969
992
  get el() { return getElement(this); }
970
993
  static get watchers() { return {
971
- "mapView": ["mapViewWatchHandler"]
994
+ "mapView": ["mapViewWatchHandler"],
995
+ "_editorLoading": ["_editorLoadingWatchHandler"]
972
996
  }; }
973
997
  };
974
998
  CreateRelatedFeature.style = CreateRelatedFeatureStyle0;
@@ -9,7 +9,7 @@ import { g as getLayerOrTable, a as getAllLayers, b as getAllTables, c as getFea
9
9
  import './esri-loader-2bf735ed.js';
10
10
  import './interfaces-586e863c.js';
11
11
 
12
- const crowdsourceReporterCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100% !important}.width-0{width:0}.height-full{height:100% !important}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.notice-msg{padding:10px;width:calc(100% - 20px)}.progress-bar{padding:12px}.footer-top-button{padding-bottom:7px}.footer-button{height:35px}.feature-pagination{background-color:var(--calcite-color-foreground-1) !important;border-block-end:1px solid var(--calcite-color-border-3);display:flex;justify-content:center;padding:5px 0}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand);font-weight:bold}.report-submitted-msg{position:absolute;z-index:1000}";
12
+ const crowdsourceReporterCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100% !important}.width-0{width:0}.height-full{height:100% !important}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.notice-msg{padding:10px;width:calc(100% - 20px)}.progress-bar{padding:12px}.footer-top-button{padding-bottom:7px}.footer-button{height:35px}.feature-pagination{background-color:var(--calcite-color-foreground-1) !important;border-block-end:1px solid var(--calcite-color-border-3);display:flex;justify-content:center;padding:5px 0}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand);font-weight:bold}.report-submitted-msg{position:absolute;z-index:1000}.share-node{display:flex}";
13
13
  const CrowdsourceReporterStyle0 = crowdsourceReporterCss;
14
14
 
15
15
  const CrowdsourceReporter = class {
@@ -571,7 +571,7 @@ const CrowdsourceReporter = class {
571
571
  getFeatureDetailsFlowItem() {
572
572
  var _a;
573
573
  const showCommentBtn = ((_a = this._getLayersConfig(this._selectedLayerId)) === null || _a === void 0 ? void 0 : _a.comment) && this._selectedLayer.relationships.length > 0;
574
- return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, removePopoverOffset: true, scale: "s", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, h("feature-details", { class: 'full-height', graphics: this._selectedFeature, layerItemsHash: this._layerItemsHash, mapView: this.mapView, onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions }), showCommentBtn &&
574
+ return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "share-node", embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, removePopoverOffset: true, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, h("feature-details", { class: 'full-height', graphics: this._selectedFeature, layerItemsHash: this._layerItemsHash, mapView: this.mapView, onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions }), showCommentBtn &&
575
575
  h("calcite-button", { appearance: "solid", onClick: () => this._flowItems = [...this._flowItems, "add-comment"], slot: "footer", width: "full" }, this._translations.comment))));
576
576
  }
577
577
  /**
@@ -5,7 +5,7 @@
5
5
  */
6
6
  import { r as registerInstance, c as createEvent, h, g as getElement } from './index-ba5da2b0.js';
7
7
  import { l as loadModules, g as getLocaleComponentStrings } from './locale-a490c4f6.js';
8
- import { P as PopupUtils } from './popupUtils-17193415.js';
8
+ import { P as PopupUtils } from './popupUtils-8efd3cde.js';
9
9
  import { g as getLayerOrTable, c as getFeatureLayerView, h as highlightFeatures } from './mapViewUtils-b8deb4ae.js';
10
10
  import './esri-loader-2bf735ed.js';
11
11
  import './downloadUtils-571a502d.js';