@esri/solutions-components 0.7.4 → 0.7.6

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