@esri/solutions-components 0.7.4 → 0.7.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 (46) hide show
  1. package/dist/assets/t9n/map-tools/resources.json +2 -2
  2. package/dist/assets/t9n/map-tools/resources_en.json +2 -2
  3. package/dist/cjs/basemap-gallery_7.cjs.entry.js +38 -20
  4. package/dist/cjs/calcite-alert_3.cjs.entry.js +17 -13
  5. package/dist/cjs/card-manager_3.cjs.entry.js +11 -9
  6. package/dist/cjs/crowdsource-manager.cjs.entry.js +33 -6
  7. package/dist/cjs/loader.cjs.js +1 -1
  8. package/dist/cjs/solutions-components.cjs.js +1 -1
  9. package/dist/collection/components/crowdsource-manager/crowdsource-manager.js +107 -6
  10. package/dist/collection/components/edit-card/edit-card.js +30 -13
  11. package/dist/collection/components/info-card/info-card.js +12 -0
  12. package/dist/collection/components/layer-table/layer-table.css +7 -1
  13. package/dist/collection/components/layer-table/layer-table.js +43 -7
  14. package/dist/collection/components/map-card/map-card.js +1 -1
  15. package/dist/collection/components/map-fullscreen/map-fullscreen.js +33 -17
  16. package/dist/collection/components/map-tools/map-tools.js +22 -3
  17. package/dist/components/crowdsource-manager.js +39 -6
  18. package/dist/components/edit-card2.js +11 -13
  19. package/dist/components/info-card2.js +7 -1
  20. package/dist/components/layer-table2.js +12 -8
  21. package/dist/components/map-card2.js +1 -1
  22. package/dist/components/map-fullscreen2.js +17 -18
  23. package/dist/components/map-tools2.js +22 -3
  24. package/dist/esm/basemap-gallery_7.entry.js +38 -20
  25. package/dist/esm/calcite-alert_3.entry.js +17 -13
  26. package/dist/esm/card-manager_3.entry.js +11 -9
  27. package/dist/esm/crowdsource-manager.entry.js +33 -6
  28. package/dist/esm/loader.js +1 -1
  29. package/dist/esm/solutions-components.js +1 -1
  30. package/dist/solutions-components/{p-3272b303.entry.js → p-14236e25.entry.js} +1 -1
  31. package/dist/solutions-components/p-3c3b48c7.entry.js +6 -0
  32. package/dist/solutions-components/p-4b3ebd24.entry.js +6 -0
  33. package/dist/solutions-components/p-7e9449c5.entry.js +6 -0
  34. package/dist/solutions-components/solutions-components.esm.js +1 -1
  35. package/dist/types/components/crowdsource-manager/crowdsource-manager.d.ts +35 -2
  36. package/dist/types/components/edit-card/edit-card.d.ts +5 -0
  37. package/dist/types/components/info-card/info-card.d.ts +4 -0
  38. package/dist/types/components/layer-table/layer-table.d.ts +9 -1
  39. package/dist/types/components/map-fullscreen/map-fullscreen.d.ts +14 -1
  40. package/dist/types/components/map-tools/map-tools.d.ts +8 -0
  41. package/dist/types/components.d.ts +72 -0
  42. package/dist/types/preact.d.ts +5 -2
  43. package/package.json +1 -1
  44. package/dist/solutions-components/p-089dc6bf.entry.js +0 -6
  45. package/dist/solutions-components/p-dfb33c83.entry.js +0 -6
  46. package/dist/solutions-components/p-ed254530.entry.js +0 -6
@@ -29,8 +29,10 @@ export class CrowdsourceManager {
29
29
  */
30
30
  this._shouldSetMapView = false;
31
31
  this.classicGrid = false;
32
+ this.defaultCenter = "";
32
33
  this.defaultGlobalId = "";
33
34
  this.defaultLayer = "";
35
+ this.defaultLevel = "";
34
36
  this.defaultOid = "";
35
37
  this.defaultWebmap = "";
36
38
  this.enableAutoRefresh = false;
@@ -51,6 +53,8 @@ export class CrowdsourceManager {
51
53
  this.mapInfos = [];
52
54
  this.onlyShowUpdatableLayers = true;
53
55
  this.searchConfiguration = undefined;
56
+ this.shareIncludeEmbed = undefined;
57
+ this.shareIncludeSocial = undefined;
54
58
  this.theme = "light";
55
59
  this.zoomAndScrollToSelected = false;
56
60
  this._expandPopup = false;
@@ -64,6 +68,13 @@ export class CrowdsourceManager {
64
68
  // Watch handlers
65
69
  //
66
70
  //--------------------------------------------------------------------------
71
+ /**
72
+ * Watch for center url param to be set
73
+ */
74
+ defaultCenterWatchHandler() {
75
+ this._defaultCenter = !this.defaultCenter ? undefined :
76
+ this.defaultCenter.split(";").map(v => parseFloat(v));
77
+ }
67
78
  /**
68
79
  * Watch for globalid url param to be set
69
80
  */
@@ -78,6 +89,12 @@ export class CrowdsourceManager {
78
89
  this._defaultOid = !this.defaultOid ? undefined :
79
90
  this.defaultOid.indexOf(",") > -1 ? this.defaultOid.split(",").map(o => parseInt(o, 10)) : [parseInt(this.defaultOid, 10)];
80
91
  }
92
+ /**
93
+ * Watch for zoom level param to be set
94
+ */
95
+ defaultLevelWatchHandler() {
96
+ this._defaultLevel = !this.defaultLevel ? undefined : parseInt(this.defaultLevel, 10);
97
+ }
81
98
  /**
82
99
  * When true the map zoom tools will be available
83
100
  */
@@ -105,8 +122,8 @@ export class CrowdsourceManager {
105
122
  */
106
123
  async mapChanged(evt) {
107
124
  this._mapChange = evt.detail;
108
- await this._mapChange.mapView.when(() => {
109
- this._setMapView();
125
+ await this._mapChange.mapView.when(async () => {
126
+ await this._setMapView();
110
127
  });
111
128
  }
112
129
  /**
@@ -141,10 +158,10 @@ export class CrowdsourceManager {
141
158
  * Called after each render
142
159
  * Used to delay the setting of the mapView when the popup is expaneded and obstructs the view
143
160
  */
144
- componentDidRender() {
161
+ async componentDidRender() {
145
162
  if (this._shouldSetMapView) {
146
163
  this._shouldSetMapView = false;
147
- this._setMapView();
164
+ await this._setMapView();
148
165
  }
149
166
  }
150
167
  //--------------------------------------------------------------------------
@@ -333,7 +350,7 @@ export class CrowdsourceManager {
333
350
  this.classicGrid && layoutMode === ELayoutMode.VERTICAL ? "panel-end" :
334
351
  layoutMode === ELayoutMode.HORIZONTAL ? "header" : "panel-start";
335
352
  const hasMapAndLayer = this.defaultWebmap && this.defaultLayer;
336
- return (h("calcite-shell", { class: tableSizeClass + " border-bottom" }, h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip))), h("div", { class: "width-full height-full position-relative" }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? this._defaultGlobalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !this.defaultGlobalId ? this._defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, enableZoom: this.enableZoom, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
353
+ return (h("calcite-shell", { class: tableSizeClass + " border-bottom" }, h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip))), h("div", { class: "width-full height-full position-relative" }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? this._defaultGlobalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !this.defaultGlobalId ? this._defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, enableZoom: this.enableZoom, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
337
354
  }
338
355
  /**
339
356
  * Open/Close the appropriate panel.
@@ -366,11 +383,19 @@ export class CrowdsourceManager {
366
383
  *
367
384
  * @protected
368
385
  */
369
- _setMapView() {
386
+ async _setMapView() {
370
387
  this._mapInfo = this._getMapInfo(this._mapChange.id);
371
388
  this._mapView = this._mapChange.mapView;
372
389
  this._initMapZoom();
373
390
  this._mapView.popupEnabled = false;
391
+ if (this._defaultCenter && this._defaultLevel) {
392
+ await this._mapView.goTo({
393
+ center: this._defaultCenter,
394
+ zoom: this._defaultLevel
395
+ });
396
+ this._defaultCenter = undefined;
397
+ this._defaultLevel = undefined;
398
+ }
374
399
  }
375
400
  /**
376
401
  * Add/remove zoom tools based on enableZoom prop
@@ -430,6 +455,24 @@ export class CrowdsourceManager {
430
455
  "reflect": false,
431
456
  "defaultValue": "false"
432
457
  },
458
+ "defaultCenter": {
459
+ "type": "string",
460
+ "mutable": false,
461
+ "complexType": {
462
+ "original": "string",
463
+ "resolved": "string",
464
+ "references": {}
465
+ },
466
+ "required": false,
467
+ "optional": false,
468
+ "docs": {
469
+ "tags": [],
470
+ "text": "string: default center point values for the map\r\n; delimited x;y pair"
471
+ },
472
+ "attribute": "default-center",
473
+ "reflect": false,
474
+ "defaultValue": "\"\""
475
+ },
433
476
  "defaultGlobalId": {
434
477
  "type": "string",
435
478
  "mutable": false,
@@ -466,6 +509,24 @@ export class CrowdsourceManager {
466
509
  "reflect": false,
467
510
  "defaultValue": "\"\""
468
511
  },
512
+ "defaultLevel": {
513
+ "type": "string",
514
+ "mutable": false,
515
+ "complexType": {
516
+ "original": "string",
517
+ "resolved": "string",
518
+ "references": {}
519
+ },
520
+ "required": false,
521
+ "optional": false,
522
+ "docs": {
523
+ "tags": [],
524
+ "text": "string: default zoom level"
525
+ },
526
+ "attribute": "default-level",
527
+ "reflect": false,
528
+ "defaultValue": "\"\""
529
+ },
469
530
  "defaultOid": {
470
531
  "type": "string",
471
532
  "mutable": false,
@@ -836,6 +897,40 @@ export class CrowdsourceManager {
836
897
  "text": "ISearchConfiguration: Configuration details for the Search widget"
837
898
  }
838
899
  },
900
+ "shareIncludeEmbed": {
901
+ "type": "boolean",
902
+ "mutable": false,
903
+ "complexType": {
904
+ "original": "boolean",
905
+ "resolved": "boolean",
906
+ "references": {}
907
+ },
908
+ "required": false,
909
+ "optional": false,
910
+ "docs": {
911
+ "tags": [],
912
+ "text": "boolean: When true the share options will include embed option"
913
+ },
914
+ "attribute": "share-include-embed",
915
+ "reflect": false
916
+ },
917
+ "shareIncludeSocial": {
918
+ "type": "boolean",
919
+ "mutable": false,
920
+ "complexType": {
921
+ "original": "boolean",
922
+ "resolved": "boolean",
923
+ "references": {}
924
+ },
925
+ "required": false,
926
+ "optional": false,
927
+ "docs": {
928
+ "tags": [],
929
+ "text": "boolean: When true the share options will include social media sharing"
930
+ },
931
+ "attribute": "share-include-social",
932
+ "reflect": false
933
+ },
839
934
  "theme": {
840
935
  "type": "string",
841
936
  "mutable": false,
@@ -892,11 +987,17 @@ export class CrowdsourceManager {
892
987
  static get elementRef() { return "el"; }
893
988
  static get watchers() {
894
989
  return [{
990
+ "propName": "defaultCenter",
991
+ "methodName": "defaultCenterWatchHandler"
992
+ }, {
895
993
  "propName": "defaultGlobalId",
896
994
  "methodName": "defaultGlobalIdWatchHandler"
897
995
  }, {
898
996
  "propName": "defaultOid",
899
997
  "methodName": "defaultOidWatchHandler"
998
+ }, {
999
+ "propName": "defaultLevel",
1000
+ "methodName": "defaultLevelWatchHandler"
900
1001
  }, {
901
1002
  "propName": "enableZoom",
902
1003
  "methodName": "enableZoomWatchHandler"
@@ -94,7 +94,7 @@ export class EditCard {
94
94
  }
95
95
  this._layerEditHandle = this._layer.on("edits", () => {
96
96
  this.editsComplete.emit();
97
- void this._closeEdit();
97
+ this.open = false;
98
98
  });
99
99
  }
100
100
  }
@@ -157,8 +157,7 @@ export class EditCard {
157
157
  },
158
158
  container
159
159
  });
160
- if (this._editHandle && this._attachmentHandle && this._activeWorkflowHandle) {
161
- this._editHandle.remove();
160
+ if (this._attachmentHandle && this._activeWorkflowHandle) {
162
161
  this._attachmentHandle.remove();
163
162
  this._activeWorkflowHandle.remove();
164
163
  }
@@ -167,18 +166,13 @@ export class EditCard {
167
166
  this._editor.viewModel.state === "creating-features", () => {
168
167
  this._shouldClose = false;
169
168
  });
170
- this._editHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "ready", () => {
171
- if (this._shouldClose) {
172
- void this._closeEdit();
173
- }
174
- else if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
175
- void this._startUpdate();
176
- }
177
- });
178
169
  this._activeWorkflowHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.activeWorkflow) === null || _a === void 0 ? void 0 : _a.activeWorkflow; }, (activeWorkflow) => {
179
170
  if ((activeWorkflow === null || activeWorkflow === void 0 ? void 0 : activeWorkflow.type) === "update-table-record" || (activeWorkflow === null || activeWorkflow === void 0 ? void 0 : activeWorkflow.type) === "create-features") {
180
171
  this._shouldClose = false;
181
172
  }
173
+ if (!(activeWorkflow === null || activeWorkflow === void 0 ? void 0 : activeWorkflow.type) && !(activeWorkflow === null || activeWorkflow === void 0 ? void 0 : activeWorkflow.hasPendingEdits)) {
174
+ this.open = false;
175
+ }
182
176
  });
183
177
  // had issues with destroy before adding like this
184
178
  this._editContainer.appendChild(container);
@@ -190,12 +184,15 @@ export class EditCard {
190
184
  * @returns void
191
185
  */
192
186
  async _closeEdit() {
193
- var _a, _b, _c;
187
+ var _a, _b, _c, _d;
194
188
  this._shouldClose = true;
195
189
  if ((_a = this._editor) === null || _a === void 0 ? void 0 : _a.activeWorkflow) {
196
190
  await ((_b = this._editor) === null || _b === void 0 ? void 0 : _b.cancelWorkflow());
197
191
  }
198
- (_c = this._editor) === null || _c === void 0 ? void 0 : _c.destroy();
192
+ if (this.graphicIndex > -1 && ((_c = this.graphics) === null || _c === void 0 ? void 0 : _c.length) > 0) {
193
+ this.refreshGraphics.emit(this.graphics);
194
+ }
195
+ (_d = this._editor) === null || _d === void 0 ? void 0 : _d.destroy();
199
196
  this._shouldClose = false;
200
197
  this.closeEdit.emit();
201
198
  }
@@ -345,6 +342,26 @@ export class EditCard {
345
342
  "resolved": "void",
346
343
  "references": {}
347
344
  }
345
+ }, {
346
+ "method": "refreshGraphics",
347
+ "name": "refreshGraphics",
348
+ "bubbles": true,
349
+ "cancelable": true,
350
+ "composed": true,
351
+ "docs": {
352
+ "tags": [],
353
+ "text": "Emitted on demand when the editor is closed to handle\r\nthings like attachment updates that don't fire the standard edit update event when complete"
354
+ },
355
+ "complexType": {
356
+ "original": "__esri.Graphic[]",
357
+ "resolved": "Graphic[]",
358
+ "references": {
359
+ "___esri": {
360
+ "location": "global",
361
+ "id": "global::___esri"
362
+ }
363
+ }
364
+ }
348
365
  }];
349
366
  }
350
367
  static get elementRef() { return "el"; }
@@ -85,6 +85,12 @@ export class InfoCard {
85
85
  async closeEdit() {
86
86
  this._editRecordOpen = false;
87
87
  }
88
+ /**
89
+ * Refresh the info-card graphics
90
+ */
91
+ async refreshGraphics(evt) {
92
+ this.graphics = [...evt.detail];
93
+ }
88
94
  //--------------------------------------------------------------------------
89
95
  //
90
96
  // Functions (lifecycle)
@@ -413,6 +419,12 @@ export class InfoCard {
413
419
  "target": "window",
414
420
  "capture": false,
415
421
  "passive": false
422
+ }, {
423
+ "name": "refreshGraphics",
424
+ "method": "refreshGraphics",
425
+ "target": "window",
426
+ "capture": false,
427
+ "passive": false
416
428
  }];
417
429
  }
418
430
  }
@@ -108,8 +108,9 @@ vaadin-grid-cell-content {
108
108
  .share-action {
109
109
  position: absolute;
110
110
  right: 0;
111
- margin-top: 9px;
111
+ margin-top: 4px;
112
112
  margin-inline-end: 4px;
113
+ margin-bottom: 4px;
113
114
  }
114
115
 
115
116
  html[dir="rtl"] .share-action {
@@ -124,3 +125,8 @@ html[dir="rtl"] .share-action {
124
125
  opacity: var(--calcite-ui-opacity-disabled);
125
126
  pointer-events: none;
126
127
  }
128
+
129
+ .instant-app-share {
130
+ height: 42px !important;
131
+ display: inline-flex;
132
+ }
@@ -66,6 +66,8 @@ export class LayerTable {
66
66
  this.mapInfo = undefined;
67
67
  this.mapView = undefined;
68
68
  this.onlyShowUpdatableLayers = undefined;
69
+ this.shareIncludeEmbed = undefined;
70
+ this.shareIncludeSocial = undefined;
69
71
  this.showNewestFirst = undefined;
70
72
  this.zoomAndScrollToSelected = undefined;
71
73
  this._confirmDelete = false;
@@ -613,7 +615,7 @@ export class LayerTable {
613
615
  * @returns VNode The node representing the DOM element that will contain the action
614
616
  */
615
617
  _getShare(icon) {
616
- return (h("div", { class: "share-action", id: this._getId(icon) }, h("instant-apps-social-share", { autoUpdateShareUrl: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, scale: "m", shareButtonColor: "neutral", socialMedia: true, view: this.mapView }), this._getToolTip("bottom", icon, this._translations.share)));
618
+ return (h("div", { class: "share-action", id: this._getId(icon) }, h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "instant-app-share", embed: this.shareIncludeEmbed, popoverButtonIconScale: "s", ref: el => this._shareNode = el, scale: "m", shareButtonColor: "neutral", socialMedia: this.shareIncludeSocial, view: this.mapView }), this._getToolTip("bottom", icon, this._translations.share)));
617
619
  }
618
620
  /**
619
621
  * Called each time the values that are used for custom url params change
@@ -732,11 +734,11 @@ export class LayerTable {
732
734
  * @returns void
733
735
  */
734
736
  async _resetTable() {
735
- var _a, _b;
737
+ var _a;
736
738
  this._clearSelection();
737
739
  this._allIds = [];
738
740
  this.featureSelectionChange.emit(this._selectedIndexes);
739
- const columnTemplates = this._getColumnTemplates(this._layer.id, (_b = (_a = this._layer) === null || _a === void 0 ? void 0 : _a.popupTemplate) === null || _b === void 0 ? void 0 : _b.fieldInfos);
741
+ const columnTemplates = this._getColumnTemplates(this._layer.id, (_a = this._layer) === null || _a === void 0 ? void 0 : _a.fields);
740
742
  this._allIds = await queryAllIds(this._layer);
741
743
  if (!this._table) {
742
744
  await this._getTable(this._tableNode, columnTemplates);
@@ -1067,8 +1069,8 @@ export class LayerTable {
1067
1069
  if (fieldInfos) {
1068
1070
  columnTemplates = columnTemplates ? columnTemplates.map(columnTemplate => {
1069
1071
  fieldInfos.some(fieldInfo => {
1070
- if (fieldInfo.fieldName === columnTemplate.fieldName) {
1071
- columnTemplate.label = fieldInfo.label;
1072
+ if (fieldInfo.name === columnTemplate.fieldName) {
1073
+ columnTemplate.label = fieldInfo.alias;
1072
1074
  return true;
1073
1075
  }
1074
1076
  });
@@ -1076,8 +1078,8 @@ export class LayerTable {
1076
1078
  }) : fieldInfos.map(fieldInfo => {
1077
1079
  return {
1078
1080
  type: "field",
1079
- fieldName: fieldInfo.fieldName,
1080
- label: fieldInfo.label
1081
+ fieldName: fieldInfo.name,
1082
+ label: fieldInfo.alias
1081
1083
  };
1082
1084
  });
1083
1085
  }
@@ -1314,6 +1316,40 @@ export class LayerTable {
1314
1316
  "attribute": "only-show-updatable-layers",
1315
1317
  "reflect": false
1316
1318
  },
1319
+ "shareIncludeEmbed": {
1320
+ "type": "boolean",
1321
+ "mutable": false,
1322
+ "complexType": {
1323
+ "original": "boolean",
1324
+ "resolved": "boolean",
1325
+ "references": {}
1326
+ },
1327
+ "required": false,
1328
+ "optional": false,
1329
+ "docs": {
1330
+ "tags": [],
1331
+ "text": "boolean: When true the share options will include embed option"
1332
+ },
1333
+ "attribute": "share-include-embed",
1334
+ "reflect": false
1335
+ },
1336
+ "shareIncludeSocial": {
1337
+ "type": "boolean",
1338
+ "mutable": false,
1339
+ "complexType": {
1340
+ "original": "boolean",
1341
+ "resolved": "boolean",
1342
+ "references": {}
1343
+ },
1344
+ "required": false,
1345
+ "optional": false,
1346
+ "docs": {
1347
+ "tags": [],
1348
+ "text": "boolean: When true the share options will include social media sharing"
1349
+ },
1350
+ "attribute": "share-include-social",
1351
+ "reflect": false
1352
+ },
1317
1353
  "showNewestFirst": {
1318
1354
  "type": "boolean",
1319
1355
  "mutable": false,
@@ -134,7 +134,7 @@ export class MapCard {
134
134
  this.mapView = new this.MapView({
135
135
  container: this._mapDiv,
136
136
  map: webMap,
137
- resizeAlign: "top-left"
137
+ resizeAlign: "center"
138
138
  });
139
139
  this._loadedId = id;
140
140
  this._searchConfiguration = this._webMapInfo.searchConfiguration;
@@ -36,22 +36,12 @@ export class MapFullscreen {
36
36
  * @returns Promise when complete
37
37
  */
38
38
  async mapViewWatchHandler() {
39
- await this.mapView.when(() => {
40
- this._initFullscreenWidget();
39
+ await this.mapView.when(async () => {
40
+ await this._initFullscreenWidget();
41
41
  });
42
42
  }
43
43
  //--------------------------------------------------------------------------
44
44
  //
45
- // Methods (public)
46
- //
47
- //--------------------------------------------------------------------------
48
- //--------------------------------------------------------------------------
49
- //
50
- // Events (public)
51
- //
52
- //--------------------------------------------------------------------------
53
- //--------------------------------------------------------------------------
54
- //
55
45
  // Functions (lifecycle)
56
46
  //
57
47
  //--------------------------------------------------------------------------
@@ -72,13 +62,13 @@ export class MapFullscreen {
72
62
  * It's never called during the first render().
73
63
  */
74
64
  async componentDidUpdate() {
75
- this._initFullscreenWidget();
65
+ await this._initFullscreenWidget();
76
66
  }
77
67
  /**
78
68
  * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
79
69
  */
80
70
  async componentDidLoad() {
81
- this._initFullscreenWidget();
71
+ await this._initFullscreenWidget();
82
72
  }
83
73
  //--------------------------------------------------------------------------
84
74
  //
@@ -93,21 +83,29 @@ export class MapFullscreen {
93
83
  * @protected
94
84
  */
95
85
  async _initModules() {
96
- const [Fullscreen] = await loadModules([
97
- "esri/widgets/Fullscreen"
86
+ const [Fullscreen, reactiveUtils] = await loadModules([
87
+ "esri/widgets/Fullscreen",
88
+ "esri/core/reactiveUtils"
98
89
  ]);
99
90
  this.Fullscreen = Fullscreen;
91
+ this.reactiveUtils = reactiveUtils;
100
92
  }
101
93
  /**
102
94
  * Initialize the search widget
103
95
  *
104
96
  * @protected
105
97
  */
106
- _initFullscreenWidget() {
98
+ async _initFullscreenWidget() {
107
99
  if (this.mapView && this._fullscreenElement && !this.fullscreenWidget) {
108
100
  this.fullscreenWidget = new this.Fullscreen({
109
101
  view: this.mapView
110
102
  });
103
+ await this.fullscreenWidget.when(() => {
104
+ if (this._fullscreenStateChangeHandle) {
105
+ this._fullscreenStateChangeHandle.remove();
106
+ }
107
+ this._fullscreenStateChangeHandle = this.reactiveUtils.watch(() => this.fullscreenWidget.viewModel.state, (state) => this.fullscreenStateChange.emit(state));
108
+ });
111
109
  }
112
110
  else if (this.fullscreenWidget) {
113
111
  this.fullscreenWidget.view = this.mapView;
@@ -169,6 +167,24 @@ export class MapFullscreen {
169
167
  }
170
168
  };
171
169
  }
170
+ static get events() {
171
+ return [{
172
+ "method": "fullscreenStateChange",
173
+ "name": "fullscreenStateChange",
174
+ "bubbles": true,
175
+ "cancelable": true,
176
+ "composed": true,
177
+ "docs": {
178
+ "tags": [],
179
+ "text": "Emitted on demand when the fullscreen widget state has changed"
180
+ },
181
+ "complexType": {
182
+ "original": "string",
183
+ "resolved": "string",
184
+ "references": {}
185
+ }
186
+ }];
187
+ }
172
188
  static get watchers() {
173
189
  return [{
174
190
  "propName": "mapView",
@@ -89,10 +89,14 @@ export class MapTools {
89
89
  async _showFullscreenWatchHandler(v) {
90
90
  const fs = this._fullscreenElement.fullscreenWidget;
91
91
  if (v) {
92
- fs.viewModel.enter();
92
+ if (fs.viewModel.state === "ready") {
93
+ fs.viewModel.enter();
94
+ }
93
95
  }
94
96
  else {
95
- fs.viewModel.exit();
97
+ if (fs.viewModel.state === "active") {
98
+ fs.viewModel.exit();
99
+ }
96
100
  }
97
101
  }
98
102
  /**
@@ -169,7 +173,22 @@ export class MapTools {
169
173
  this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker()) :
170
174
  undefined, this.enableFloorFilter && this._hasFloorInfo ?
171
175
  this._getActionGroup("urban-model", false, this._translations.floorFilter, () => this._toggleFloorFilter()) :
172
- undefined)), h("basemap-gallery", { basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, resultGraphicEnabled: true, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, ref: (el) => { this._fullscreenElement = el; } }), h("floor-filter", { class: floorFilterClass, enabled: this.enableFloorFilter, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
176
+ undefined)), h("basemap-gallery", { basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, resultGraphicEnabled: true, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, onFullscreenStateChange: (evt) => this._fullscreenStateChange(evt.detail), ref: (el) => { this._fullscreenElement = el; } }), h("floor-filter", { class: floorFilterClass, enabled: this.enableFloorFilter, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
177
+ }
178
+ /**
179
+ * Respond to fullscreen state change and ensure our state var is in sync
180
+ *
181
+ * @param state The fullscreen view model's state.
182
+ *
183
+ * @protected
184
+ */
185
+ _fullscreenStateChange(state) {
186
+ if (state === "ready" && this._showFullscreen) {
187
+ this._showFullscreen = false;
188
+ }
189
+ else if (state === "active" && !this._showFullscreen) {
190
+ this._showFullscreen = true;
191
+ }
173
192
  }
174
193
  //--------------------------------------------------------------------------
175
194
  //