@esri/solutions-components 0.8.4 → 0.8.6

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 (98) hide show
  1. package/dist/assets/t9n/crowdsource-reporter/resources.json +5 -6
  2. package/dist/assets/t9n/crowdsource-reporter/resources_en.json +5 -6
  3. package/dist/assets/t9n/feature-list/resources.json +1 -1
  4. package/dist/assets/t9n/feature-list/resources_en.json +1 -1
  5. package/dist/assets/t9n/public-notification/resources.json +3 -1
  6. package/dist/assets/t9n/public-notification/resources_en.json +3 -1
  7. package/dist/cjs/buffer-tools_3.cjs.entry.js +2 -2
  8. package/dist/cjs/calcite-alert_4.cjs.entry.js +2 -2
  9. package/dist/cjs/calcite-combobox_5.cjs.entry.js +2 -2
  10. package/dist/cjs/calcite-flow_5.cjs.entry.js +163 -16
  11. package/dist/cjs/card-manager_3.cjs.entry.js +41 -2
  12. package/dist/cjs/crowdsource-manager.cjs.entry.js +2 -1
  13. package/dist/cjs/crowdsource-reporter.cjs.entry.js +120 -38
  14. package/dist/cjs/loader.cjs.js +1 -1
  15. package/dist/cjs/map-select-tools_3.cjs.entry.js +2 -2
  16. package/dist/cjs/public-notification.cjs.entry.js +110 -4
  17. package/dist/cjs/{publicNotificationStore-ef379d11.js → publicNotificationStore-e790601d.js} +2 -2
  18. package/dist/cjs/solutions-components.cjs.js +1 -1
  19. package/dist/collection/collection-manifest.json +1 -1
  20. package/dist/collection/components/create-feature/create-feature.css +9 -0
  21. package/dist/collection/components/create-feature/create-feature.js +134 -6
  22. package/dist/collection/components/crowdsource-manager/crowdsource-manager.js +19 -1
  23. package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.css +5 -0
  24. package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js +120 -38
  25. package/dist/collection/components/feature-list/feature-list.js +93 -5
  26. package/dist/collection/components/info-card/info-card.css +1 -1
  27. package/dist/collection/components/info-card/info-card.js +1 -1
  28. package/dist/collection/components/layer-list/layer-list.js +6 -6
  29. package/dist/collection/components/map-card/map-card.js +27 -2
  30. package/dist/collection/components/map-draw-tools/map-draw-tools.js +1 -1
  31. package/dist/collection/components/map-layer-picker/map-layer-picker.js +1 -1
  32. package/dist/collection/components/map-select-tools/map-select-tools.js +1 -1
  33. package/dist/collection/components/public-notification/public-notification.js +110 -3
  34. package/dist/collection/demos/crowdsource-reporter.html +1 -1
  35. package/dist/collection/utils/interfaces.ts +7 -0
  36. package/dist/collection/utils/publicNotificationStore.js +2 -2
  37. package/dist/collection/utils/publicNotificationStore.ts +3 -2
  38. package/dist/components/create-feature2.js +111 -7
  39. package/dist/components/crowdsource-manager.js +3 -1
  40. package/dist/components/crowdsource-reporter.js +121 -39
  41. package/dist/components/feature-list2.js +54 -6
  42. package/dist/components/info-card2.js +2 -2
  43. package/dist/components/layer-list2.js +6 -6
  44. package/dist/components/map-card2.js +42 -2
  45. package/dist/components/map-draw-tools2.js +1 -1
  46. package/dist/components/map-layer-picker2.js +1 -1
  47. package/dist/components/map-select-tools2.js +1 -1
  48. package/dist/components/public-notification.js +110 -3
  49. package/dist/components/publicNotificationStore.js +2 -2
  50. package/dist/esm/buffer-tools_3.entry.js +2 -2
  51. package/dist/esm/calcite-alert_4.entry.js +3 -3
  52. package/dist/esm/calcite-combobox_5.entry.js +3 -3
  53. package/dist/esm/calcite-flow_5.entry.js +164 -17
  54. package/dist/esm/card-manager_3.entry.js +43 -4
  55. package/dist/esm/crowdsource-manager.entry.js +3 -2
  56. package/dist/esm/crowdsource-reporter.entry.js +121 -39
  57. package/dist/esm/{downloadUtils-0c13073b.js → downloadUtils-0c1e4d7b.js} +2 -2
  58. package/dist/esm/{index.es-ad250bc6.js → index.es-286e3cfa.js} +2 -2
  59. package/dist/esm/loader.js +1 -1
  60. package/dist/esm/map-select-tools_3.entry.js +4 -4
  61. package/dist/esm/{mapViewUtils-20504620.js → mapViewUtils-253178f1.js} +1 -1
  62. package/dist/esm/public-notification.entry.js +112 -6
  63. package/dist/esm/{publicNotificationStore-3bf4de75.js → publicNotificationStore-223faed2.js} +2 -2
  64. package/dist/esm/solutions-components.js +1 -1
  65. package/dist/solutions-components/demos/crowdsource-reporter.html +1 -1
  66. package/dist/solutions-components/p-15f9624a.entry.js +6 -0
  67. package/dist/solutions-components/{p-955647ea.entry.js → p-1ea5e061.entry.js} +2 -2
  68. package/dist/solutions-components/{p-590a2a26.js → p-212b02e7.js} +1 -1
  69. package/dist/solutions-components/p-238d3b5f.entry.js +6 -0
  70. package/dist/solutions-components/p-273d833b.entry.js +6 -0
  71. package/dist/solutions-components/{p-cc280aa1.js → p-322868ec.js} +1 -1
  72. package/dist/solutions-components/{p-1d3a1794.js → p-331b5d1e.js} +2 -2
  73. package/dist/solutions-components/{p-c897e3eb.js → p-3af79063.js} +1 -1
  74. package/dist/solutions-components/p-45ed16d5.entry.js +6 -0
  75. package/dist/solutions-components/p-80b11ec1.entry.js +17 -0
  76. package/dist/solutions-components/{p-5c7e3941.entry.js → p-813fd8a4.entry.js} +2 -2
  77. package/dist/solutions-components/{p-ff302d95.entry.js → p-d136eab0.entry.js} +2 -2
  78. package/dist/solutions-components/p-e0446d5b.entry.js +6 -0
  79. package/dist/solutions-components/solutions-components.esm.js +1 -1
  80. package/dist/solutions-components/utils/interfaces.ts +7 -0
  81. package/dist/solutions-components/utils/publicNotificationStore.ts +3 -2
  82. package/dist/types/components/create-feature/create-feature.d.ts +43 -1
  83. package/dist/types/components/crowdsource-manager/crowdsource-manager.d.ts +4 -0
  84. package/dist/types/components/crowdsource-reporter/crowdsource-reporter.d.ts +31 -10
  85. package/dist/types/components/feature-list/feature-list.d.ts +31 -0
  86. package/dist/types/components/layer-list/layer-list.d.ts +3 -3
  87. package/dist/types/components/map-card/map-card.d.ts +8 -0
  88. package/dist/types/components/public-notification/public-notification.d.ts +48 -0
  89. package/dist/types/components.d.ts +37 -0
  90. package/dist/types/utils/interfaces.d.ts +6 -0
  91. package/dist/types/utils/publicNotificationStore.d.ts +2 -1
  92. package/package.json +2 -1
  93. package/dist/solutions-components/p-6512dc44.entry.js +0 -6
  94. package/dist/solutions-components/p-65ad1625.entry.js +0 -6
  95. package/dist/solutions-components/p-989bf0bf.entry.js +0 -6
  96. package/dist/solutions-components/p-a0611720.entry.js +0 -6
  97. package/dist/solutions-components/p-efe1694a.entry.js +0 -17
  98. package/dist/solutions-components/p-f3467807.entry.js +0 -6
@@ -19,6 +19,7 @@
19
19
  * limitations under the License.
20
20
  */
21
21
  import { h } from "@stencil/core";
22
+ import { loadModules } from "../../utils/loadModules";
22
23
  import { PopupUtils } from "../../utils/popupUtils";
23
24
  import { getFeatureLayerView, getLayerOrTable, highlightFeatures } from "../../utils/mapViewUtils";
24
25
  import { getLocaleComponentStrings } from "../../utils/locale";
@@ -29,6 +30,7 @@ export class FeatureList {
29
30
  this.noFeaturesFoundMsg = undefined;
30
31
  this.pageSize = 100;
31
32
  this.highlightOnMap = false;
33
+ this.highlightOnHover = false;
32
34
  this._featureItems = [];
33
35
  this._featuresCount = 0;
34
36
  this._isLoading = false;
@@ -48,6 +50,16 @@ export class FeatureList {
48
50
  }
49
51
  //--------------------------------------------------------------------------
50
52
  //
53
+ // Methods (public)
54
+ /**
55
+ * Refresh the feature list which will fetch the latest features and update the features list
56
+ * @returns Promise that resolves when the operation is complete
57
+ */
58
+ async refresh() {
59
+ await this.initializeFeatureItems();
60
+ }
61
+ //--------------------------------------------------------------------------
62
+ //
51
63
  // Functions (lifecycle)
52
64
  //
53
65
  //--------------------------------------------------------------------------
@@ -56,6 +68,7 @@ export class FeatureList {
56
68
  * @returns Promise when complete
57
69
  */
58
70
  async componentWillLoad() {
71
+ await this.initModules();
59
72
  await this._getTranslations();
60
73
  this._isLoading = true;
61
74
  this._popupUtils = new PopupUtils();
@@ -82,6 +95,17 @@ export class FeatureList {
82
95
  // Functions (protected)
83
96
  //
84
97
  //--------------------------------------------------------------------------
98
+ /**
99
+ * Load esri javascript api modules
100
+ * @returns Promise resolving when function is done
101
+ * @protected
102
+ */
103
+ async initModules() {
104
+ const [Color] = await loadModules([
105
+ "esri/Color"
106
+ ]);
107
+ this.Color = Color;
108
+ }
85
109
  /**
86
110
  * Initialize the features list using the selected layer
87
111
  * @protected
@@ -117,10 +141,7 @@ export class FeatureList {
117
141
  */
118
142
  async featureClicked(event, selectedFeature) {
119
143
  //clear previous highlight and remove the highlightHandle
120
- if (this.highlightOnMap && this._highlightHandle) {
121
- this._highlightHandle.remove();
122
- this._highlightHandle = null;
123
- }
144
+ this.clearHighlights();
124
145
  //highlight on map only if it is selected item
125
146
  if (this.highlightOnMap) {
126
147
  const selectedFeatureObjectId = Number(event.target.value);
@@ -129,6 +150,31 @@ export class FeatureList {
129
150
  }
130
151
  this.featureSelect.emit(selectedFeature);
131
152
  }
153
+ /**
154
+ * On feature hover in feature list highlight the feature on the map
155
+ * @param selectedFeature mouseovered feature graphic
156
+ * @protected
157
+ */
158
+ async onFeatureHover(selectedFeature) {
159
+ //clear previous highlight and remove the highlightHandle
160
+ this.clearHighlights();
161
+ if (this.highlightOnHover) {
162
+ const oId = selectedFeature.getObjectId();
163
+ const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayerId);
164
+ selectedLayerView.highlightOptions = { color: new this.Color("#FFFF00") };
165
+ this._highlightHandle = selectedLayerView.highlight([oId]);
166
+ }
167
+ }
168
+ /**
169
+ * Clears the highlight
170
+ * @protected
171
+ */
172
+ clearHighlights() {
173
+ //if a feature is already highlighted, then remove the highlight
174
+ if (this._highlightHandle) {
175
+ this._highlightHandle.remove();
176
+ }
177
+ }
132
178
  /**
133
179
  * Query the selected feature layer, in descending order of object id's
134
180
  * @param page 0th page number in the pagination item
@@ -179,7 +225,7 @@ export class FeatureList {
179
225
  const oId = selectedFeature.attributes[this._selectedLayer.objectIdField].toString();
180
226
  //use object id if popupTitle is null or undefined
181
227
  popupTitle = popupTitle !== null && popupTitle !== void 0 ? popupTitle : oId;
182
- return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, value: oId }, h("div", { class: "popup-title", slot: "content-start" }, popupTitle), h("calcite-icon", { icon: "chevron-right", scale: "s", slot: "content-end" })));
228
+ return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, h("div", { class: "popup-title", slot: "content-start" }, popupTitle), h("calcite-icon", { icon: "chevron-right", scale: "s", slot: "content-end" })));
183
229
  }
184
230
  /**
185
231
  * Fetches the component's translations
@@ -292,6 +338,24 @@ export class FeatureList {
292
338
  "attribute": "highlight-on-map",
293
339
  "reflect": false,
294
340
  "defaultValue": "false"
341
+ },
342
+ "highlightOnHover": {
343
+ "type": "boolean",
344
+ "mutable": false,
345
+ "complexType": {
346
+ "original": "boolean",
347
+ "resolved": "boolean",
348
+ "references": {}
349
+ },
350
+ "required": false,
351
+ "optional": true,
352
+ "docs": {
353
+ "tags": [],
354
+ "text": "boolean: Highlight feature on map optional (default false) boolean to indicate if we should highlight when hover on Feature in list"
355
+ },
356
+ "attribute": "highlight-on-hover",
357
+ "reflect": false,
358
+ "defaultValue": "false"
295
359
  }
296
360
  };
297
361
  }
@@ -326,6 +390,30 @@ export class FeatureList {
326
390
  }
327
391
  }];
328
392
  }
393
+ static get methods() {
394
+ return {
395
+ "refresh": {
396
+ "complexType": {
397
+ "signature": "() => Promise<void>",
398
+ "parameters": [],
399
+ "references": {
400
+ "Promise": {
401
+ "location": "global",
402
+ "id": "global::Promise"
403
+ }
404
+ },
405
+ "return": "Promise<void>"
406
+ },
407
+ "docs": {
408
+ "text": "Refresh the feature list which will fetch the latest features and update the features list",
409
+ "tags": [{
410
+ "name": "returns",
411
+ "text": "Promise that resolves when the operation is complete"
412
+ }]
413
+ }
414
+ }
415
+ };
416
+ }
329
417
  static get elementRef() { return "el"; }
330
418
  static get watchers() {
331
419
  return [{
@@ -40,7 +40,7 @@
40
40
  overflow: auto;
41
41
  }
42
42
 
43
- .esri-features__footer {
43
+ .feature-node .esri-features__footer {
44
44
  display: none !important;
45
45
  }
46
46
 
@@ -140,7 +140,7 @@ export class InfoCard {
140
140
  const id = (_d = (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeature) === null || _d === void 0 ? void 0 : _d.getObjectId();
141
141
  const ids = parseInt(id === null || id === void 0 ? void 0 : id.toString(), 10) > -1 ? [id] : [];
142
142
  const deleteEnabled = ((_e = this._layer) === null || _e === void 0 ? void 0 : _e.editingEnabled) && ((_h = (_g = (_f = this._layer) === null || _f === void 0 ? void 0 : _f.capabilities) === null || _g === void 0 ? void 0 : _g.operations) === null || _h === void 0 ? void 0 : _h.supportsDelete);
143
- return (h(Host, null, h("calcite-shell", null, this._getHeader(), h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
143
+ return (h(Host, null, h("calcite-shell", null, this._getHeader(), h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget feature-node " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
144
144
  h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), !nextBackDisabled && h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, h("calcite-action", { icon: "list", onClick: () => this._toggleListView(), scale: "s", text: this._count, textEnabled: true })), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
145
145
  }
146
146
  //--------------------------------------------------------------------------
@@ -79,7 +79,7 @@ export class LayerList {
79
79
  render() {
80
80
  return (h(Fragment, null, this._isLoading && h("calcite-loader", { label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
81
81
  h("calcite-notice", { class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
82
- h("calcite-list", { "selection-appearance": "border", "selection-mode": this.showNextIcon ? "none" : "single-persist" }, this.renderLayerList())));
82
+ h("calcite-list", { "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
83
83
  }
84
84
  //--------------------------------------------------------------------------
85
85
  //
@@ -127,7 +127,7 @@ export class LayerList {
127
127
  }
128
128
  });
129
129
  await Promise.all(def).then(() => {
130
- const editableLayerIds = this.getEditableIds(this._layerItemsHash);
130
+ const editableLayerIds = this.getLayersToBeShownInList(this._layerItemsHash);
131
131
  this._mapLayerIds = editableLayerIds.reverse();
132
132
  this.handleNoLayersToDisplay();
133
133
  }, () => {
@@ -143,17 +143,17 @@ export class LayerList {
143
143
  this.layersListLoaded.emit(this._mapLayerIds);
144
144
  }
145
145
  /**
146
- * Returns the ids of all OR configured layers that support edits with the update capability
146
+ * Returns the ids of all OR configured layers that needs to be shown in the list
147
147
  * @param hash each layer item details
148
148
  * @returns array of layer ids
149
149
  */
150
- getEditableIds(hash) {
150
+ getLayersToBeShownInList(hash) {
151
151
  var _a;
152
152
  const configuredLayers = ((_a = this.layers) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.layers : [];
153
153
  return Object.keys(hash).reduce((prev, cur) => {
154
- let showLayer = hash[cur].supportsAdd;
154
+ let showLayer = true;
155
155
  if ((configuredLayers === null || configuredLayers === void 0 ? void 0 : configuredLayers.length) > 0) {
156
- showLayer = configuredLayers.indexOf(cur) > -1 ? hash[cur].supportsAdd : false;
156
+ showLayer = configuredLayers.indexOf(cur) > -1;
157
157
  }
158
158
  if (showLayer) {
159
159
  prev.push(cur);
@@ -20,6 +20,7 @@
20
20
  */
21
21
  import { Host, h } from "@stencil/core";
22
22
  import { loadModules } from "../../utils/loadModules";
23
+ import { joinAppProxies } from "templates-common-library-esm/functionality/proxy";
23
24
  // TODO navigation and accessability isn't right for the map list
24
25
  // tab does not go into the list when it's open
25
26
  // focus is not set when it opens
@@ -36,6 +37,7 @@ export class MapCard {
36
37
  * string: the id of map currently displayed
37
38
  */
38
39
  this._loadedId = "";
40
+ this.appProxies = undefined;
39
41
  this.defaultWebmapId = "";
40
42
  this.enableHome = undefined;
41
43
  this.enableLegend = undefined;
@@ -112,14 +114,16 @@ export class MapCard {
112
114
  * @protected
113
115
  */
114
116
  async _initModules() {
115
- const [WebMap, MapView, Home] = await loadModules([
117
+ const [WebMap, MapView, Home, esriConfig] = await loadModules([
116
118
  "esri/WebMap",
117
119
  "esri/views/MapView",
118
- "esri/widgets/Home"
120
+ "esri/widgets/Home",
121
+ "esri/config"
119
122
  ]);
120
123
  this.WebMap = WebMap;
121
124
  this.MapView = MapView;
122
125
  this.Home = Home;
126
+ this.esriConfig = esriConfig;
123
127
  }
124
128
  /**
125
129
  * Load the webmap for the provided webMapInfo
@@ -140,6 +144,10 @@ export class MapCard {
140
144
  const webMap = new this.WebMap({
141
145
  portalItem: { id }
142
146
  });
147
+ if (this.appProxies) {
148
+ await webMap.load();
149
+ await joinAppProxies(webMap, this.esriConfig, this.appProxies);
150
+ }
143
151
  this.mapView = new this.MapView({
144
152
  container: this._mapDiv,
145
153
  map: webMap,
@@ -204,6 +212,23 @@ export class MapCard {
204
212
  }
205
213
  static get properties() {
206
214
  return {
215
+ "appProxies": {
216
+ "type": "any",
217
+ "mutable": false,
218
+ "complexType": {
219
+ "original": "any",
220
+ "resolved": "any",
221
+ "references": {}
222
+ },
223
+ "required": false,
224
+ "optional": false,
225
+ "docs": {
226
+ "tags": [],
227
+ "text": "Array of objects containing proxy information for premium platform services."
228
+ },
229
+ "attribute": "app-proxies",
230
+ "reflect": false
231
+ },
207
232
  "defaultWebmapId": {
208
233
  "type": "string",
209
234
  "mutable": false,
@@ -170,7 +170,7 @@ export class MapDrawTools {
170
170
  }
171
171
  else {
172
172
  this._sketchGraphicsLayer = new this.GraphicsLayer({ title, listMode: "hide" });
173
- state.managedLayers.push(title);
173
+ state.managedLayers[title] = "sketch";
174
174
  this.mapView.map.layers.add(this._sketchGraphicsLayer);
175
175
  }
176
176
  if (this.graphics && this.graphics.length > 0) {
@@ -297,7 +297,7 @@ export class MapLayerPicker {
297
297
  _validLayer(id) {
298
298
  var _a;
299
299
  const name = (_a = this._layerNameHash[id]) === null || _a === void 0 ? void 0 : _a.name;
300
- return name && state.managedLayers.indexOf(name) < 0 && (this.enabledLayerIds.length > 0 ?
300
+ return name && Object.keys(state.managedLayers).indexOf(name) < 0 && (this.enabledLayerIds.length > 0 ?
301
301
  this.enabledLayerIds.indexOf(id) > -1 : true);
302
302
  }
303
303
  /**
@@ -427,7 +427,7 @@ export class MapSelectTools {
427
427
  }
428
428
  else {
429
429
  this._bufferGraphicsLayer = new this.GraphicsLayer({ title, listMode: "hide" });
430
- state.managedLayers.push(title);
430
+ state.managedLayers[title] = "buffer";
431
431
  const sketchIndex = this.mapView.map.layers.findIndex((l) => l.title === this._translations.sketchLayer);
432
432
  if (sketchIndex > -1) {
433
433
  this.mapView.map.layers.add(this._bufferGraphicsLayer, sketchIndex);
@@ -59,6 +59,7 @@ export class PublicNotification {
59
59
  this.sketchLineSymbol = undefined;
60
60
  this.sketchPointSymbol = undefined;
61
61
  this.sketchPolygonSymbol = undefined;
62
+ this._exportGraphics = false;
62
63
  this._addMap = false;
63
64
  this._addResults = true;
64
65
  this._addTitle = false;
@@ -137,6 +138,7 @@ export class PublicNotification {
137
138
  if (pageType === EPageType.EXPORT) {
138
139
  this._fetchingData = true;
139
140
  this._numDuplicates = await this._getNumDuplicates();
141
+ this._updateExportGraphics();
140
142
  this._fetchingData = false;
141
143
  }
142
144
  this._clearHighlight();
@@ -144,6 +146,9 @@ export class PublicNotification {
144
146
  // clear any draw shapes or buffers
145
147
  await this._clearSelection();
146
148
  }
149
+ if (oldPageType === EPageType.EXPORT) {
150
+ this._removeExportGraphics();
151
+ }
147
152
  if (pageType !== EPageType.SELECT) {
148
153
  return this._highlightFeatures();
149
154
  }
@@ -207,12 +212,14 @@ export class PublicNotification {
207
212
  * @protected
208
213
  */
209
214
  async _initModules() {
210
- const [geometryEngine, jsonUtils] = await loadModules([
215
+ const [geometryEngine, jsonUtils, graphic] = await loadModules([
211
216
  "esri/geometry/geometryEngine",
212
- "esri/symbols/support/jsonUtils"
217
+ "esri/symbols/support/jsonUtils",
218
+ "esri/Graphic"
213
219
  ]);
214
220
  this._geometryEngine = geometryEngine;
215
221
  this._jsonUtils = jsonUtils;
222
+ this.Graphic = graphic;
216
223
  }
217
224
  /**
218
225
  * Load the search configuration
@@ -540,9 +547,107 @@ export class PublicNotification {
540
547
  _getExportOptions() {
541
548
  const displayClass = this._exportType === EExportType.PDF ? "display-block" : "display-none";
542
549
  const titleOptionsClass = this._addTitle ? "display-block" : "display-none";
550
+ const graphicsOptionsClass = this._addMap ? "display-flex" : "display-none";
543
551
  const title = this._titleValue ? this._titleValue : this.defaultExportTitle ? this.defaultExportTitle : "";
544
552
  const formatOptionsClass = this._addResults ? "" : "display-none";
545
- return (h("div", { class: displayClass }, this._getLabel(this._translations.pdfOptions, true), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addResults, onCalciteCheckboxChange: () => this._addResults = !this._addResults }), this._translations.addResults)), h("div", { class: `padding-top-sides-1 ${formatOptionsClass}` }, h("calcite-label", { class: "label-margin-0" }, this._translations.selectPDFLabelOption)), h("div", { class: `padding-sides-1 ${formatOptionsClass}` }, h("pdf-download", { defaultNumLabelsPerPage: parseInt(this.defaultNumLabelsPerPage.toString(), 10), disabled: !this._downloadActive, ref: (el) => { this._downloadTools = el; } })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addTitle, onCalciteCheckboxChange: () => this._addTitle = !this._addTitle }), this._translations.title)), h("div", { class: titleOptionsClass }, this._getLabel(this._translations.title, true, ""), h("calcite-input-text", { class: "padding-sides-1", onCalciteInputTextInput: () => this._changeTitle(), placeholder: this._translations.titlePlaceholder, ref: (el) => { this._titleElement = el; }, value: title })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addMap, onCalciteCheckboxChange: () => this._addMap = !this._addMap }), this._translations.includeMap))));
553
+ return (h("div", { class: displayClass }, this._getLabel(this._translations.pdfOptions, true), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addResults, onCalciteCheckboxChange: () => this._addResults = !this._addResults }), this._translations.addResults)), h("div", { class: `padding-top-sides-1 ${formatOptionsClass}` }, h("calcite-label", { class: "label-margin-0" }, this._translations.selectPDFLabelOption)), h("div", { class: `padding-sides-1 ${formatOptionsClass}` }, h("pdf-download", { defaultNumLabelsPerPage: parseInt(this.defaultNumLabelsPerPage.toString(), 10), disabled: !this._downloadActive, ref: (el) => { this._downloadTools = el; } })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addTitle, onCalciteCheckboxChange: () => this._addTitle = !this._addTitle }), this._translations.title)), h("div", { class: titleOptionsClass }, this._getLabel(this._translations.title, true, ""), h("calcite-input-text", { class: "padding-sides-1", onCalciteInputTextInput: () => this._changeTitle(), placeholder: this._translations.titlePlaceholder, ref: (el) => { this._titleElement = el; }, value: title })), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._addMap, onCalciteCheckboxChange: () => this._handleAddMapChange() }), this._translations.includeMap)), h("div", { class: `padding-top-sides-1 ${graphicsOptionsClass}` }, h("calcite-label", { class: "label-margin-0", layout: "inline" }, h("calcite-checkbox", { checked: this._exportGraphics, onCalciteCheckboxChange: () => this._handleExportGraphicsChange() }), this._translations.listGraphics), h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "list-graphics-icon", scale: "s" }), h("calcite-popover", { closable: true, label: "", referenceElement: "list-graphics-icon" }, h("span", { class: "tooltip-message" }, this._translations.listGraphicsTip)))));
554
+ }
555
+ /**
556
+ * Toggle the _addMap state variable and update the graphics on the map
557
+ *
558
+ * @protected
559
+ */
560
+ _handleAddMapChange() {
561
+ this._addMap = !this._addMap;
562
+ this._updateExportGraphics();
563
+ }
564
+ /**
565
+ * Toggle the _exportGraphics state variable and update the graphics on the map
566
+ *
567
+ * @protected
568
+ */
569
+ _handleExportGraphicsChange() {
570
+ this._exportGraphics = !this._exportGraphics;
571
+ this._updateExportGraphics();
572
+ }
573
+ /**
574
+ * Get the "sketch" or "buffer" graphics layer
575
+ *
576
+ * @param type The type of managed layer to fetch "sketch" | "buffer"
577
+ *
578
+ * @protected
579
+ */
580
+ _getManagedLayer(type) {
581
+ let layer;
582
+ Object.keys(state.managedLayers).some((k) => {
583
+ const i = this.mapView.map.layers.findIndex((l) => l.title === k);
584
+ if (state.managedLayers[k] === type) {
585
+ layer = this.mapView.map.layers.getItemAt(i);
586
+ return true;
587
+ }
588
+ });
589
+ return layer;
590
+ }
591
+ /**
592
+ * Update the export graphics by adding or removeing them
593
+ *
594
+ * @param clear When true the graphics layers will be cleared prior to adding any new graphics, defaults to false
595
+ *
596
+ * @protected
597
+ */
598
+ _updateExportGraphics(clear = false) {
599
+ if (clear || !this._exportGraphics || !this._addMap) {
600
+ this._removeExportGraphics();
601
+ }
602
+ if (this._exportGraphics && this._addMap) {
603
+ this._addExportGraphics();
604
+ }
605
+ }
606
+ /**
607
+ * Remove all buffer and sketch graphics
608
+ *
609
+ * @protected
610
+ */
611
+ _removeExportGraphics() {
612
+ const sketchLayer = this._getManagedLayer("sketch");
613
+ const bufferLayer = this._getManagedLayer("buffer");
614
+ if (sketchLayer) {
615
+ sketchLayer.graphics.removeAll();
616
+ }
617
+ if (bufferLayer) {
618
+ bufferLayer.graphics.removeAll();
619
+ }
620
+ }
621
+ /**
622
+ * Add all buffer and sketch graphics that are flagged for download
623
+ *
624
+ * @protected
625
+ */
626
+ _addExportGraphics() {
627
+ const sketchLayer = this._getManagedLayer("sketch");
628
+ const bufferLayer = this._getManagedLayer("buffer");
629
+ this._selectionSets.forEach(ss => {
630
+ if (ss.download) {
631
+ if (sketchLayer) {
632
+ sketchLayer.graphics.add(ss.sketchGraphic);
633
+ }
634
+ if (bufferLayer) {
635
+ const symbol = {
636
+ type: "simple-fill",
637
+ color: this.bufferColor,
638
+ outline: {
639
+ color: this.bufferOutlineColor,
640
+ width: 1
641
+ }
642
+ };
643
+ const bufferGraphic = new this.Graphic({
644
+ geometry: ss.buffer,
645
+ symbol
646
+ });
647
+ bufferLayer.graphics.add(bufferGraphic);
648
+ }
649
+ }
650
+ });
546
651
  }
547
652
  /**
548
653
  * Render the refine page
@@ -636,6 +741,7 @@ export class PublicNotification {
636
741
  isActive = ss.download ? true : isActive;
637
742
  return ss;
638
743
  });
744
+ this._updateExportGraphics(true);
639
745
  this._downloadActive = isActive;
640
746
  this._fetchingData = true;
641
747
  this._numDuplicates = await this._getNumDuplicates();
@@ -1251,6 +1357,7 @@ export class PublicNotification {
1251
1357
  }
1252
1358
  static get states() {
1253
1359
  return {
1360
+ "_exportGraphics": {},
1254
1361
  "_addMap": {},
1255
1362
  "_addResults": {},
1256
1363
  "_addTitle": {},
@@ -163,7 +163,7 @@
163
163
  demo.reportButtonText = "Report an incident";
164
164
  demo.enableNewReports = true;
165
165
  demo.theme = "light";
166
- demo.reportSubmittedMessage = "Thank you";
166
+ demo.reportSubmittedMessage = "Thank you! Your request was successfully submitted";
167
167
  //Select reporting layers -
168
168
  //demo.layers = ['SE_field_mapping_9688', 'SE_field_mapping_5784', 'SE_field_mapping_1853']; //Se mapping
169
169
  //demo.layers = ['Three_Layers_nested_4042', 'SE_sort_2889', 'SE_sort_756']; //screening layers
@@ -565,3 +565,10 @@ export interface IPopupUtils {
565
565
  export interface IConsentResponse {
566
566
  granted: boolean;
567
567
  }
568
+
569
+ /**
570
+ * Key is the layer name and the value is the type of layer
571
+ */
572
+ export interface IManagedLayers {
573
+ [key: string]: "buffer" | "sketch";
574
+ }
@@ -20,8 +20,8 @@
20
20
  */
21
21
  import { createStore } from "@stencil/store";
22
22
  const { state, onChange } = createStore({
23
- // List of layers added and managed by the component
24
- managedLayers: [],
23
+ // Key Value pair whose Key is the layer name and the Value is the type of layer ("buffer" | "sketch")
24
+ managedLayers: {},
25
25
  // List of tables added and managed by the component
26
26
  managedTables: [],
27
27
  // Handle[]: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Handles.html#Handle
@@ -15,10 +15,11 @@
15
15
  */
16
16
 
17
17
  import { createStore } from "@stencil/store";
18
+ import { IManagedLayers } from "./interfaces";
18
19
 
19
20
  const { state, onChange } = createStore({
20
- // List of layers added and managed by the component
21
- managedLayers: [],
21
+ // Key Value pair whose Key is the layer name and the Value is the type of layer ("buffer" | "sketch")
22
+ managedLayers: {} as IManagedLayers,
22
23
  // List of tables added and managed by the component
23
24
  managedTables: [],
24
25
  // Handle[]: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Handles.html#Handle