@esri/solutions-components 0.8.4 → 0.8.6

Sign up to get free protection for your applications and to get access to all the features.
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