@esri/solutions-components 0.10.6 → 0.10.8

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 (157) hide show
  1. package/dist/cjs/basemap-gallery_7.cjs.entry.js +24 -8
  2. package/dist/cjs/buffer-tools_3.cjs.entry.js +1 -1
  3. package/dist/cjs/calcite-combobox_3.cjs.entry.js +354 -967
  4. package/dist/cjs/calcite-graph_2.cjs.entry.js +1082 -0
  5. package/dist/cjs/calcite-shell-panel_14.cjs.entry.js +6 -6
  6. package/dist/cjs/calcite-tree_3.cjs.entry.js +1 -1
  7. package/dist/cjs/card-manager_3.cjs.entry.js +246 -18
  8. package/dist/cjs/crowdsource-manager.cjs.entry.js +169 -49
  9. package/dist/cjs/instant-apps-control-panel.cjs.entry.js +2 -1
  10. package/dist/cjs/instant-apps-time-filter.cjs.entry.js +40 -21
  11. package/dist/cjs/loader.cjs.js +1 -1
  12. package/dist/cjs/map-select-tools_3.cjs.entry.js +3 -3
  13. package/dist/cjs/pci-calculator.cjs.entry.js +1 -1
  14. package/dist/cjs/public-notification.cjs.entry.js +1 -1
  15. package/dist/cjs/refine-results-flow-item.cjs.entry.js +1 -1
  16. package/dist/cjs/share-item.cjs.entry.js +1 -1
  17. package/dist/cjs/solution-configuration.cjs.entry.js +3 -3
  18. package/dist/cjs/solution-contents_3.cjs.entry.js +3 -3
  19. package/dist/cjs/solutions-components.cjs.js +1 -1
  20. package/dist/cjs/spatial-ref.cjs.entry.js +1 -1
  21. package/dist/collection/assets/t9n/crowdsource-manager/resources.json +5 -1
  22. package/dist/collection/assets/t9n/crowdsource-manager/resources_en.json +5 -1
  23. package/dist/collection/assets/t9n/layer-table/resources.json +1 -0
  24. package/dist/collection/assets/t9n/layer-table/resources_en.json +1 -0
  25. package/dist/collection/assets/t9n/map-card/resources.json +6 -1
  26. package/dist/collection/assets/t9n/map-card/resources_en.json +6 -1
  27. package/dist/collection/components/card-manager/card-manager.js +34 -8
  28. package/dist/collection/components/crowdsource-manager/crowdsource-manager.js +173 -65
  29. package/dist/collection/components/layer-table/layer-table.js +175 -8
  30. package/dist/collection/components/map-card/map-card.css +4 -0
  31. package/dist/collection/components/map-card/map-card.js +368 -3
  32. package/dist/collection/components/map-draw-tools/map-draw-tools.js +1 -1
  33. package/dist/collection/components/map-fullscreen/map-fullscreen.js +1 -1
  34. package/dist/collection/components/map-layer-picker/map-layer-picker.js +9 -3
  35. package/dist/collection/components/map-legend/map-legend.js +1 -1
  36. package/dist/collection/components/map-picker/map-picker.css +8 -0
  37. package/dist/collection/components/map-picker/map-picker.js +74 -3
  38. package/dist/collection/components/map-search/map-search.js +1 -1
  39. package/dist/collection/components/map-select-tools/map-select-tools.js +1 -1
  40. package/dist/collection/components/map-tools/map-tools.js +1 -1
  41. package/dist/collection/components/pci-calculator/pci-calculator.js +1 -1
  42. package/dist/collection/components/pdf-download/pdf-download.js +1 -1
  43. package/dist/collection/components/public-notification/public-notification.js +1 -1
  44. package/dist/collection/components/refine-results-flow-item/refine-results-flow-item.js +1 -1
  45. package/dist/collection/components/refine-selection/refine-selection.js +1 -1
  46. package/dist/collection/components/share-item/share-item.js +1 -1
  47. package/dist/collection/components/solution-configuration/solution-configuration.js +3 -3
  48. package/dist/collection/components/solution-contents/solution-contents.js +1 -1
  49. package/dist/collection/components/solution-item/solution-item.js +1 -1
  50. package/dist/collection/components/solution-item-details/solution-item-details.js +1 -1
  51. package/dist/collection/components/solution-item-icon/solution-item-icon.js +1 -1
  52. package/dist/collection/components/solution-item-sharing/solution-item-sharing.js +1 -1
  53. package/dist/collection/components/solution-organization-variables/solution-organization-variables.js +1 -1
  54. package/dist/collection/components/solution-resource-item/solution-resource-item.js +1 -1
  55. package/dist/collection/components/solution-spatial-ref/solution-spatial-ref.js +1 -1
  56. package/dist/collection/components/solution-template-data/solution-template-data.js +1 -1
  57. package/dist/collection/components/solution-variables/solution-variables.js +1 -1
  58. package/dist/collection/components/spatial-ref/spatial-ref.js +1 -1
  59. package/dist/collection/demos/crowdsource-manager.html +1 -0
  60. package/dist/components/card-manager2.js +20 -8
  61. package/dist/components/crowdsource-manager.js +172 -53
  62. package/dist/components/instant-apps-control-panel.js +2 -1
  63. package/dist/components/instant-apps-time-filter.js +46 -23
  64. package/dist/components/layer-table2.js +72 -10
  65. package/dist/components/map-card2.js +288 -47
  66. package/dist/components/map-draw-tools2.js +1 -1
  67. package/dist/components/map-fullscreen2.js +1 -1
  68. package/dist/components/map-layer-picker2.js +9 -3
  69. package/dist/components/map-legend2.js +1 -1
  70. package/dist/components/map-picker2.js +24 -5
  71. package/dist/components/map-search2.js +1 -1
  72. package/dist/components/map-select-tools2.js +1 -1
  73. package/dist/components/map-tools2.js +1 -1
  74. package/dist/components/pci-calculator.js +1 -1
  75. package/dist/components/pdf-download2.js +1 -1
  76. package/dist/components/public-notification.js +1 -1
  77. package/dist/components/refine-results-flow-item.js +1 -1
  78. package/dist/components/refine-selection2.js +1 -1
  79. package/dist/components/share-item.js +1 -1
  80. package/dist/components/solution-configuration.js +3 -3
  81. package/dist/components/solution-contents2.js +1 -1
  82. package/dist/components/solution-item-details2.js +1 -1
  83. package/dist/components/solution-item-icon2.js +1 -1
  84. package/dist/components/solution-item-sharing2.js +1 -1
  85. package/dist/components/solution-item2.js +1 -1
  86. package/dist/components/solution-organization-variables2.js +1 -1
  87. package/dist/components/solution-resource-item2.js +1 -1
  88. package/dist/components/solution-spatial-ref2.js +1 -1
  89. package/dist/components/solution-template-data2.js +1 -1
  90. package/dist/components/solution-variables2.js +1 -1
  91. package/dist/components/spatial-ref.js +1 -1
  92. package/dist/esm/basemap-gallery_7.entry.js +24 -8
  93. package/dist/esm/buffer-tools_3.entry.js +1 -1
  94. package/dist/esm/calcite-combobox_3.entry.js +369 -982
  95. package/dist/esm/calcite-graph_2.entry.js +1077 -0
  96. package/dist/esm/calcite-shell-panel_14.entry.js +6 -6
  97. package/dist/esm/calcite-tree_3.entry.js +1 -1
  98. package/dist/esm/card-manager_3.entry.js +248 -20
  99. package/dist/esm/crowdsource-manager.entry.js +170 -50
  100. package/dist/esm/instant-apps-control-panel.entry.js +2 -1
  101. package/dist/esm/instant-apps-time-filter.entry.js +41 -22
  102. package/dist/esm/loader.js +1 -1
  103. package/dist/esm/map-select-tools_3.entry.js +3 -3
  104. package/dist/esm/pci-calculator.entry.js +1 -1
  105. package/dist/esm/public-notification.entry.js +1 -1
  106. package/dist/esm/refine-results-flow-item.entry.js +1 -1
  107. package/dist/esm/share-item.entry.js +1 -1
  108. package/dist/esm/solution-configuration.entry.js +3 -3
  109. package/dist/esm/solution-contents_3.entry.js +3 -3
  110. package/dist/esm/solutions-components.js +1 -1
  111. package/dist/esm/spatial-ref.entry.js +1 -1
  112. package/dist/solutions-components/assets/t9n/crowdsource-manager/resources.json +5 -1
  113. package/dist/solutions-components/assets/t9n/crowdsource-manager/resources_en.json +5 -1
  114. package/dist/solutions-components/assets/t9n/layer-table/resources.json +1 -0
  115. package/dist/solutions-components/assets/t9n/layer-table/resources_en.json +1 -0
  116. package/dist/solutions-components/assets/t9n/map-card/resources.json +6 -1
  117. package/dist/solutions-components/assets/t9n/map-card/resources_en.json +6 -1
  118. package/dist/solutions-components/demos/crowdsource-manager.html +1 -0
  119. package/dist/solutions-components/p-0abc1354.entry.js +6 -0
  120. package/dist/solutions-components/p-0f7b5d36.entry.js +6 -0
  121. package/dist/solutions-components/p-1867168b.entry.js +6 -0
  122. package/dist/solutions-components/{p-a9818be2.entry.js → p-20c465e9.entry.js} +1 -1
  123. package/dist/solutions-components/{p-db18bce8.entry.js → p-36b50b5b.entry.js} +1 -1
  124. package/dist/solutions-components/{p-85512ae3.entry.js → p-445213cf.entry.js} +1 -1
  125. package/dist/solutions-components/{p-d49f895d.entry.js → p-4a5f0a97.entry.js} +1 -1
  126. package/dist/solutions-components/{p-002c97df.entry.js → p-5d201016.entry.js} +1 -1
  127. package/dist/solutions-components/{p-b7cec3bd.entry.js → p-618bafec.entry.js} +1 -1
  128. package/dist/solutions-components/p-6a66d5a9.entry.js +6 -0
  129. package/dist/solutions-components/p-71a2d5b8.entry.js +6 -0
  130. package/dist/solutions-components/p-7a64b026.entry.js +17 -0
  131. package/dist/solutions-components/p-85c25564.entry.js +6 -0
  132. package/dist/solutions-components/{p-235bf02e.entry.js → p-913413c3.entry.js} +1 -1
  133. package/dist/solutions-components/p-9af1cb14.entry.js +6 -0
  134. package/dist/solutions-components/{p-49aa2929.entry.js → p-bebd4646.entry.js} +1 -1
  135. package/dist/solutions-components/{p-ab2adcaf.entry.js → p-cc092b22.entry.js} +1 -1
  136. package/dist/solutions-components/p-ce454f5a.entry.js +11 -0
  137. package/dist/solutions-components/solutions-components.esm.js +1 -1
  138. package/dist/types/components/card-manager/card-manager.d.ts +11 -0
  139. package/dist/types/components/crowdsource-manager/crowdsource-manager.d.ts +86 -20
  140. package/dist/types/components/layer-table/layer-table.d.ts +30 -0
  141. package/dist/types/components/map-card/map-card.d.ts +124 -0
  142. package/dist/types/components/map-layer-picker/map-layer-picker.d.ts +4 -0
  143. package/dist/types/components/map-picker/map-picker.d.ts +12 -0
  144. package/dist/types/components.d.ts +130 -0
  145. package/dist/types/preact.d.ts +4 -2
  146. package/package.json +2 -2
  147. package/dist/cjs/calcite-dropdown-group_2.cjs.entry.js +0 -453
  148. package/dist/esm/calcite-dropdown-group_2.entry.js +0 -448
  149. package/dist/solutions-components/p-129fd80e.entry.js +0 -6
  150. package/dist/solutions-components/p-3b426576.entry.js +0 -6
  151. package/dist/solutions-components/p-72b217f2.entry.js +0 -6
  152. package/dist/solutions-components/p-72f01088.entry.js +0 -6
  153. package/dist/solutions-components/p-8b999a2b.entry.js +0 -6
  154. package/dist/solutions-components/p-973ff7b2.entry.js +0 -23
  155. package/dist/solutions-components/p-a001f9c9.entry.js +0 -6
  156. package/dist/solutions-components/p-c683b3fe.entry.js +0 -6
  157. package/dist/solutions-components/p-e9d049bd.entry.js +0 -6
@@ -3,7 +3,7 @@
3
3
  * Licensed under the Apache License, Version 2.0
4
4
  * http://www.apache.org/licenses/LICENSE-2.0
5
5
  */
6
- import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-e3f04fa1.js';
6
+ import { r as registerInstance, c as createEvent, g as getElement, h, H as Host, F as Fragment } from './index-e3f04fa1.js';
7
7
  import { g as getLocaleComponentStrings } from './locale-7162b55a.js';
8
8
  import { E as ELayoutMode } from './interfaces-659e3836.js';
9
9
  import { g as getLayerOrTable } from './mapViewUtils-3e3d33ea.js';
@@ -18,7 +18,7 @@ const CrowdsourceManager = class {
18
18
  registerInstance(this, hostRef);
19
19
  this.showIntroductionWindow = createEvent(this, "showIntroductionWindow", 7);
20
20
  this.showCoverPage = createEvent(this, "showCoverPage", 7);
21
- this.appLayout = undefined;
21
+ this.appLayout = 'splitView';
22
22
  this.appProxies = undefined;
23
23
  this.basemapConfig = undefined;
24
24
  this.coverPageEnabled = undefined;
@@ -55,7 +55,6 @@ const CrowdsourceManager = class {
55
55
  this.theme = "light";
56
56
  this.zoomAndScrollToSelected = false;
57
57
  this.zoomToScale = undefined;
58
- this._expandPopup = false;
59
58
  this._hideFooter = false;
60
59
  this._hideTable = false;
61
60
  this._isMobile = false;
@@ -66,7 +65,7 @@ const CrowdsourceManager = class {
66
65
  this._mapView = undefined;
67
66
  this._panelOpen = true;
68
67
  this._numSelected = 0;
69
- this._tableOnly = false;
68
+ this._filterOpen = false;
70
69
  }
71
70
  get el() { return getElement(this); }
72
71
  //--------------------------------------------------------------------------
@@ -105,6 +104,18 @@ const CrowdsourceManager = class {
105
104
  * MapView.when is not fired when mapView is not currently visible
106
105
  */
107
106
  _shouldSetMapView = false;
107
+ /**
108
+ * LayerExpression[]: All layer expressions from the current filter config for the currently selected layer
109
+ */
110
+ _layerExpressions;
111
+ /**
112
+ * HTMLInstantAppsFilterListElement: Component from Instant Apps that supports interacting with the current filter config
113
+ */
114
+ _filterList;
115
+ /**
116
+ * boolean: True when app is directly rendered to map view layout
117
+ */
118
+ _isMapViewOnLoad = false;
108
119
  //--------------------------------------------------------------------------
109
120
  //
110
121
  // Watch handlers
@@ -121,7 +132,6 @@ const CrowdsourceManager = class {
121
132
  */
122
133
  hideMapOnLoadWatchHandler() {
123
134
  this.showHideMapPopupAndTable(this.hideMapOnLoad && !this._isMobile);
124
- this._expandPopup = this.hideMapOnLoad && !this._isMobile;
125
135
  }
126
136
  //--------------------------------------------------------------------------
127
137
  //
@@ -155,16 +165,6 @@ const CrowdsourceManager = class {
155
165
  this.showHideMapPopupAndTable(false);
156
166
  }
157
167
  }
158
- /**
159
- * Listen for idsFound event to be fired so we can know that all layer ids have been fetched
160
- */
161
- async idsFound(evt) {
162
- const ids = evt.detail;
163
- this._tableOnly = ids.tableIds.length > 0 && ids.layerIds.length === 0;
164
- if (this._tableOnly) {
165
- this._expandPopup = true;
166
- }
167
- }
168
168
  /**
169
169
  * Listen for layoutChanged event to be fired so we can adjust the layout
170
170
  */
@@ -180,14 +180,6 @@ const CrowdsourceManager = class {
180
180
  await this._setMapView();
181
181
  });
182
182
  }
183
- /**
184
- * Listen for beforeMapChanged and minimize the popup if it's expanded
185
- */
186
- async beforeMapChanged() {
187
- if (this._expandPopup) {
188
- this._shouldSetMapView = true;
189
- }
190
- }
191
183
  /**
192
184
  * Get the layer for the provided layer id
193
185
  */
@@ -196,13 +188,13 @@ const CrowdsourceManager = class {
196
188
  const layer = await getLayerOrTable(this._mapView, id);
197
189
  await layer.when(() => {
198
190
  this._layer = layer;
191
+ this._initLayerExpressions();
199
192
  });
200
193
  }
201
194
  /**
202
195
  * Update the state expandPopup when mapInfoChange event occurs
203
196
  */
204
197
  async mapInfoChange() {
205
- this._expandPopup = this.hideMapOnLoad && !this._isMobile;
206
198
  this._hideMapOnLoadHonored = false;
207
199
  }
208
200
  //--------------------------------------------------------------------------
@@ -225,7 +217,7 @@ const CrowdsourceManager = class {
225
217
  render() {
226
218
  // only avoid border when we have a header color that is not white
227
219
  const borderClass = this.popupHeaderColor && this.popupHeaderColor !== "#FFFFFF" ? "border-width-0" : "";
228
- return (h(Host, { key: 'f434a8e24b111a32774e9d5683c2446ba35b504b' }, h("calcite-shell", { key: '017843c77fa2c52f0d957760ac3f57808d11d59f', class: "position-relative" }, h("calcite-panel", { key: 'bd8eeec3a013583789b9e1b251fed34e5896171e', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
220
+ return (h(Host, { key: 'bbe12b471976652c32fc0cb6277fdfc4171b2cd6' }, h("calcite-shell", { key: '00b85d8e681f5ab021e6efb63b603e3d2442f63c', class: "position-relative" }, h("calcite-panel", { key: 'f1a37f06f3023bb1c63b40eeca739e942c301e63', class: `width-full height-full ${borderClass}` }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal()));
229
221
  }
230
222
  /**
231
223
  * Called after each render
@@ -244,6 +236,12 @@ const CrowdsourceManager = class {
244
236
  */
245
237
  async componentDidLoad() {
246
238
  this._resizeObserver.observe(this.el);
239
+ // for backward compatibility if hidemaponload is true then render table layout as default
240
+ if (this.hideMapOnLoad) {
241
+ this.appLayout = 'tableView';
242
+ }
243
+ this._isMapViewOnLoad = this.appLayout === 'mapView';
244
+ this._setActiveLayout(this.appLayout);
247
245
  }
248
246
  //--------------------------------------------------------------------------
249
247
  //
@@ -261,6 +259,27 @@ const CrowdsourceManager = class {
261
259
  const deleteEnabled = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete;
262
260
  return this._isMobile && hasSelectedFeatures && !this._hideFooter ? (h("div", { class: `width-100`, slot: "footer" }, h("div", { class: "display-flex padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-show", onClick: () => this.showHideMapPopupAndTable(true), width: "full" }, this._translations.view.replace("{{n}}", this._numSelected.toString())), deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-full", id: "solutions-delete", ids: this._layerTable.selectedIds, layer: this._layer })) : undefined))) : undefined;
263
261
  }
262
+ /**
263
+ * sets the active layout to render
264
+ * @param appLayout new app layout
265
+ *
266
+ * @protected
267
+ */
268
+ _setActiveLayout(appLayout) {
269
+ //When going to splitView layout the panel should be open
270
+ if (appLayout === 'splitView' && !this._panelOpen) {
271
+ this._toggleLayout();
272
+ }
273
+ //Move the map node based on the selected layout
274
+ //for mapView layout show map in full view and or all other layout show in the card view
275
+ //for tableView the map will be hidden using css
276
+ if (appLayout === 'mapView') {
277
+ this._showMapInFullView();
278
+ }
279
+ else {
280
+ this._showMapInCardView();
281
+ }
282
+ }
264
283
  /**
265
284
  * Get the icon name to use for the divider icon based on the current layout
266
285
  *
@@ -386,8 +405,11 @@ const CrowdsourceManager = class {
386
405
  * @protected
387
406
  */
388
407
  _getMapNode(panelOpen) {
389
- const mapContainerClass = this._layoutMode === ELayoutMode.HORIZONTAL && (!this._isMobile || panelOpen) ? "" : "adjusted-height-50";
390
- return (h("div", { class: `${mapContainerClass} overflow-hidden` }, h("map-card", { appProxies: this.appProxies, basemapConfig: this.basemapConfig, class: "width-full", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: true, hidden: this._expandPopup && !this._isMobile, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: this.mapInfos?.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
408
+ const isMapLayout = this.appLayout === 'mapView';
409
+ const isTableLayout = this.appLayout === 'tableView';
410
+ const mapContainerClass = (isMapLayout || isTableLayout) ? "position-absolute-0" : this._layoutMode === ELayoutMode.HORIZONTAL && (!this._isMobile || panelOpen) ? "" : "adjusted-height-50";
411
+ const hasMapAndLayer = this.defaultWebmap && this.defaultLayer;
412
+ return (h("div", { class: `${mapContainerClass} overflow-hidden`, id: "card-mapView" }, h("map-card", { appProxies: this.appProxies, basemapConfig: this.basemapConfig, class: "width-full", defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: true, hidden: !this._isMobile && isTableLayout, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", isMapLayout: isMapLayout, isMobile: this._isMobile, mapInfo: this._mapInfo, mapInfos: this.mapInfos?.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", onToggleFilter: this._toggleFilter.bind(this), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, selectedFeaturesIds: this._layerTable?.selectedIds, selectedLayer: this._layer, stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"], zoomToScale: this.zoomToScale })));
391
413
  }
392
414
  /**
393
415
  * Get the expand node for the popup information
@@ -396,11 +418,7 @@ const CrowdsourceManager = class {
396
418
  * @protected
397
419
  */
398
420
  _getPopupExpandNode() {
399
- const icon = this._expandPopup ? "chevrons-down" : "chevrons-up";
400
- const id = "expand-popup";
401
- const tooltip = this._expandPopup ? this._translations.collapsePopup : this._translations.expandPopup;
402
- const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
403
- const popupNodeClass = !this._expandPopup ? "height-full" : this.mapInfos?.length === 1 || this._isMobile ? "position-absolute-0" : "position-absolute-50";
421
+ const popupNodeClass = "height-full";
404
422
  const headerClass = this._isMobile ? "display-none height-0" : "";
405
423
  const headerTheme = this.popupHeaderColor ? "" : !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
406
424
  const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
@@ -409,16 +427,7 @@ const CrowdsourceManager = class {
409
427
  '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* background color that will be displayed on button when hovered */
410
428
  '--calcite-color-text-3': this.popupHeaderTextColor, /* font color that will be displayed on button */
411
429
  '--calcite-color-text-2': this.popupHeaderTextColor, /* font color that will be displayed on popup header text*/
412
- } }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
413
- }
414
- /**
415
- * Toggle the popup information
416
- *
417
- * @protected
418
- */
419
- _togglePopup() {
420
- this._expandPopup = !this._expandPopup;
421
- this._hideMapOnLoadHonored = true;
430
+ } }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, this._getCardNode())));
422
431
  }
423
432
  /**
424
433
  * Get the card node
@@ -427,9 +436,11 @@ const CrowdsourceManager = class {
427
436
  * @protected
428
437
  */
429
438
  _getCardNode() {
430
- const cardManagerHeight = !this._expandPopup && !this._isMobile ? "height-50" : "height-full";
439
+ const isMapLayout = this.appLayout === 'mapView';
440
+ const isTableLayout = this.appLayout === 'tableView';
441
+ const cardManagerHeight = (isMapLayout || isTableLayout) ? "height-full" : !this._isMobile ? "height-50" : "height-full";
431
442
  const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
432
- return (h("div", { class: `width-50 height-full ${themeClass}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, enableEditGeometry: this?._mapInfo?.enableEditGeometry, isMobile: this._isMobile, mapView: this?._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
443
+ return (h("div", { class: `width-50 height-full ${themeClass}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, enableEditGeometry: this?._mapInfo?.enableEditGeometry, isMobile: this._isMobile, layer: this._layer, mapView: this?._mapView, selectedFeaturesIds: this._layerTable?.selectedIds, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
433
444
  }
434
445
  /**
435
446
  * Get the table node based for the current layout
@@ -441,11 +452,11 @@ const CrowdsourceManager = class {
441
452
  * @protected
442
453
  */
443
454
  _getTable(layoutMode, panelOpen, hideTable) {
444
- const tableClass = hideTable && this._isMobile ? "visibility-hidden" : "";
455
+ const isMapLayout = this.appLayout === 'mapView';
456
+ const isTableLayout = this.appLayout === 'tableView';
457
+ const tableClass = hideTable && this._isMobile ? "visibility-hidden" : isMapLayout ? "display-none" : "";
458
+ const mapClass = isMapLayout ? "height-full width-full" : "display-none";
445
459
  const tableSizeClass = this._getTableSizeClass(layoutMode, panelOpen);
446
- const icon = this._getDividerIcon(layoutMode, panelOpen);
447
- const tooltip = panelOpen ? this._translations.close : this._translations.open;
448
- const id = "toggle-layout";
449
460
  const toggleLayout = layoutMode === ELayoutMode.HORIZONTAL ? "horizontal" : "vertical";
450
461
  const toggleSlot = layoutMode === ELayoutMode.HORIZONTAL ? "header" : "panel-start";
451
462
  const hasMapAndLayer = this.defaultWebmap && this.defaultLayer;
@@ -453,10 +464,74 @@ const CrowdsourceManager = class {
453
464
  this.defaultGlobalId?.indexOf(",") > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId];
454
465
  const defaultOid = !this.defaultOid ? undefined :
455
466
  this.defaultOid?.indexOf(",") > -1 ? this.defaultOid.split(",").map(o => parseInt(o, 10)) : [parseInt(this.defaultOid, 10)];
456
- return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (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)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this?._mapInfo?.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapHidden: this._expandPopup, mapInfo: this._mapInfo, mapView: this?._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale }))));
467
+ return (h("calcite-shell", { class: `${tableSizeClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, this.getActions(layoutMode, panelOpen))) : undefined, h("div", { class: `width-full height-full position-relative ${tableClass}` }, h("layer-table", { createFilterModal: false, defaultGlobalId: hasMapAndLayer ? globalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !globalId ? defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this?._mapInfo?.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapHidden: isTableLayout, mapInfo: this._mapInfo, mapView: this?._mapView, onToggleFilter: this._toggleFilter.bind(this), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected, zoomToScale: this.zoomToScale })), h("div", { class: mapClass, id: "full-map-view" })));
468
+ }
469
+ /**
470
+ * Returns the Actions for table's node
471
+ *
472
+ * @returns Node
473
+ * @protected
474
+ */
475
+ getActions(layoutMode, panelOpen) {
476
+ const icon = this._getDividerIcon(layoutMode, panelOpen);
477
+ const tooltip = panelOpen ? this._translations.close : this._translations.open;
478
+ const id = "toggle-layout";
479
+ return (h(Fragment, null, h("calcite-action", { active: this.appLayout === 'splitView', class: "toggle-node", icon: "browser", id: "browser-action", onClick: () => { this._changeLayout('splitView'); }, text: "" }), h("calcite-tooltip", { placement: "right", "reference-element": "browser-action" }, h("span", null, this._translations.splitView)), h("calcite-action", { active: this.appLayout === 'tableView', class: "toggle-node", icon: "dock-left", id: "dock-left-action", onClick: () => { this._changeLayout('tableView'); }, text: "" }), h("calcite-tooltip", { placement: "right", "reference-element": "dock-left-action" }, h("span", null, this._translations.tableView)), h("calcite-action", { active: this.appLayout === 'mapView', class: "toggle-node", icon: "browser-map", id: "browser-map-action", onClick: () => { this._changeLayout('mapView'); }, text: "" }), h("calcite-tooltip", { placement: "right", "reference-element": "browser-map-action" }, h("span", null, this._translations.mapView)), h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), slot: "actions-end", text: "" }), h("calcite-tooltip", { placement: "bottom", "reference-element": id }, h("span", null, tooltip))));
480
+ }
481
+ /**
482
+ * Show filter component in modal
483
+ *
484
+ * @returns node to interact with any configured filters for the current layer
485
+ * @protected
486
+ */
487
+ _filterModal() {
488
+ return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.filter?.replace("{{title}}", this._layer?.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => void this._layerTable?.filterUpdate(), ref: (el) => this._filterList = el, view: this._mapView, zoomBtn: false }))));
489
+ }
490
+ /**
491
+ * Store any filters for the current layer.
492
+ * Should only occur on layer change
493
+ *
494
+ * @protected
495
+ */
496
+ _initLayerExpressions() {
497
+ const layerExpressions = this._mapInfo?.filterConfig?.layerExpressions;
498
+ this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer?.id) : [];
499
+ this._filterList.layerExpressions = this._layerExpressions;
500
+ this._layerExpressions.filter(lyrExp => {
501
+ return lyrExp.expressions.filter(exp => exp.active).length > 0;
502
+ }).length > 0;
503
+ }
504
+ /**
505
+ * Toggle the filter modal
506
+ *
507
+ * @protected
508
+ */
509
+ _toggleFilter() {
510
+ this._filterOpen = !this._filterOpen;
511
+ }
512
+ /**
513
+ * Reset the filter active prop
514
+ *
515
+ * @protected
516
+ */
517
+ _handleFilterListReset() {
518
+ void this._layerTable.filterReset();
519
+ }
520
+ /**
521
+ * Close the filter modal
522
+ *
523
+ * @protected
524
+ */
525
+ async _closeFilter() {
526
+ if (this._filterOpen) {
527
+ this._filterOpen = false;
528
+ void this._layerTable.closeFilter();
529
+ }
457
530
  }
458
531
  /**
459
532
  * Update the component layout when its size changes
533
+ *
534
+ * @protected
460
535
  */
461
536
  _onResize() {
462
537
  const isMobile = this.el.offsetWidth < 1024;
@@ -473,22 +548,67 @@ const CrowdsourceManager = class {
473
548
  /**
474
549
  * Open/Close the appropriate panel.
475
550
  * The panel that is toggled is dependent upon the layout mode and if using classic grid or not
551
+ *
552
+ * @protected
476
553
  */
477
554
  _toggleLayout() {
478
555
  this._panelOpen = !this._panelOpen;
479
556
  }
557
+ /**
558
+ * Changes the layout mode
559
+ * @param appLayout selected active app layout
560
+ *
561
+ * @protected
562
+ */
563
+ _changeLayout(appLayout) {
564
+ if (this.appLayout !== appLayout) {
565
+ this._setActiveLayout(appLayout);
566
+ this.appLayout = appLayout;
567
+ if (this._isMapViewOnLoad) {
568
+ void this._layerTable.refresh();
569
+ this._isMapViewOnLoad = false;
570
+ }
571
+ }
572
+ }
573
+ /**
574
+ * shows the map in card view
575
+ *
576
+ * @protected
577
+ */
578
+ _showMapInCardView() {
579
+ if (this.appLayout === 'mapView') {
580
+ const fullMapView = document.getElementById('full-map-view').childNodes[0];
581
+ const splitMapClass = document.getElementById('card-mapView');
582
+ if (fullMapView) {
583
+ splitMapClass.appendChild(fullMapView);
584
+ }
585
+ }
586
+ }
587
+ /**
588
+ * Shows the map in full view
589
+ *
590
+ * @protected
591
+ */
592
+ _showMapInFullView() {
593
+ const splitMap = document.getElementById('card-mapView').childNodes[0];
594
+ const fullMapViewClass = document.getElementById('full-map-view');
595
+ if (splitMap) {
596
+ fullMapViewClass.appendChild(splitMap);
597
+ }
598
+ }
480
599
  /**
481
600
  * Show/Hide the map, popup, and table
482
601
  *
483
602
  * @param show when true the map, popup, and table will be displayed
603
+ * @protected
484
604
  */
485
605
  showHideMapPopupAndTable(show) {
486
- this._expandPopup = false;
487
606
  this._hideTable = show;
488
607
  this._hideFooter = show;
489
608
  }
490
609
  /**
491
610
  * Get the current map info (configuration details) when maps change
611
+ * @param id map changed id
492
612
  *
493
613
  * @returns IMapInfo for the provided id
494
614
  * @protected
@@ -68,9 +68,10 @@ const InstantAppsControlPanel = class {
68
68
  };
69
69
  }
70
70
  _getExpand(component) {
71
+ var _a;
71
72
  const { view } = this;
72
73
  const { content } = component;
73
- const expanded = false;
74
+ const expanded = (_a = component === null || component === void 0 ? void 0 : component.expanded) !== null && _a !== void 0 ? _a : false;
74
75
  return new this.Expand({ content, view, expanded, mode: MODE, group: GROUP });
75
76
  }
76
77
  _getComponentsNode() {
@@ -3,7 +3,7 @@
3
3
  * Licensed under the Apache License, Version 2.0
4
4
  * http://www.apache.org/licenses/LICENSE-2.0
5
5
  */
6
- import { r as registerInstance, h as h$2, H as Host, F as Fragment, g as getElement } from './index-e3f04fa1.js';
6
+ import { r as registerInstance, h as h$2, H as Host, g as getElement } from './index-e3f04fa1.js';
7
7
  import { c as createStore } from './index-1dc14abf.js';
8
8
  import { l as loadModules } from './loadModules-03ba7abe.js';
9
9
  import { g as getMessages } from './locale-adb5ff0b.js';
@@ -19,6 +19,8 @@ const { state, onChange } = createStore({
19
19
  timeInfoItems: [],
20
20
  selectedTimeInfoItem: null,
21
21
  loading: true,
22
+ timeSliderConfig: {},
23
+ autoPlay: false,
22
24
  });
23
25
 
24
26
  /*
@@ -237,8 +239,8 @@ class InstantAppsTimeFilterViewModel {
237
239
  'esri/core/Handles',
238
240
  'esri/core/reactiveUtils',
239
241
  'esri/widgets/TimeSlider',
240
- 'esri/TimeExtent',
241
- 'esri/TimeInterval',
242
+ 'esri/time/TimeExtent',
243
+ 'esri/time/TimeInterval',
242
244
  'esri/layers/support/FeatureFilter',
243
245
  'esri/layers/support/FeatureEffect',
244
246
  ]);
@@ -253,8 +255,11 @@ class InstantAppsTimeFilterViewModel {
253
255
  catch (_a) { }
254
256
  }
255
257
  async init(timeSliderRef) {
258
+ var _a, _b;
256
259
  if (timeSliderRef)
257
260
  timeSliderRef.innerHTML = '';
261
+ if (((_b = (_a = state === null || state === void 0 ? void 0 : state.timeSlider) === null || _a === void 0 ? void 0 : _a.viewModel) === null || _b === void 0 ? void 0 : _b.state) === 'playing')
262
+ state.timeSlider.stop();
258
263
  const { view, timeInfoConfigItems } = state;
259
264
  if (!view)
260
265
  return;
@@ -266,7 +271,7 @@ class InstantAppsTimeFilterViewModel {
266
271
  this.setupFilterModeWatcher();
267
272
  return Promise.resolve();
268
273
  }
269
- catch (_a) { }
274
+ catch (_c) { }
270
275
  }
271
276
  destroy() {
272
277
  var _a, _b;
@@ -311,6 +316,8 @@ class InstantAppsTimeFilterViewModel {
311
316
  state.selectedTimeInfoItem = initialTimeInfoItem;
312
317
  const config = this.getTimeSliderConfig(timeSliderRef);
313
318
  state.timeSlider = new TimeSlider(config);
319
+ if (state.autoPlay)
320
+ state.timeSlider.play();
314
321
  if (((_b = state.view) === null || _b === void 0 ? void 0 : _b.type) === '2d')
315
322
  this.initialize2DView();
316
323
  }
@@ -325,23 +332,16 @@ class InstantAppsTimeFilterViewModel {
325
332
  var _a;
326
333
  const [{ timeExtent, rangeStart, rangeEnd, unit }] = state.timeInfoItems;
327
334
  const { TimeExtent, TimeInterval } = this;
328
- return {
329
- container: timeSliderRef,
330
- fullTimeExtent: timeExtent,
331
- timeExtent: new TimeExtent({
335
+ const config = Object.assign({ container: timeSliderRef, fullTimeExtent: timeExtent, timeExtent: new TimeExtent({
332
336
  start: rangeStart,
333
337
  end: rangeEnd,
334
- }),
335
- mode: 'time-window',
336
- loop: true,
337
- stops: {
338
+ }), mode: 'time-window', stops: {
338
339
  interval: new TimeInterval({
339
340
  unit,
340
341
  value: 1,
341
342
  }),
342
- },
343
- view: ((_a = state.view) === null || _a === void 0 ? void 0 : _a.type) === '3d' ? state.view : null,
344
- };
343
+ }, view: ((_a = state.view) === null || _a === void 0 ? void 0 : _a.type) === '3d' ? state.view : null }, state.timeSliderConfig);
344
+ return config;
345
345
  }
346
346
  initialize2DView() {
347
347
  state.timeInfoItems.forEach(timeInfoItem => this.applyTimeExtent(timeInfoItem.layerView, new this.TimeExtent({ start: timeInfoItem.rangeStart, end: timeInfoItem.rangeEnd })));
@@ -448,6 +448,8 @@ const InstantAppsTimeFilter = class {
448
448
  this.timeInfoConfigItems = [];
449
449
  this.filterMode = undefined;
450
450
  this.view = undefined;
451
+ this.timeSliderConfig = undefined;
452
+ this.autoPlay = false;
451
453
  }
452
454
  async updateTimeInfoConfigItems() {
453
455
  state.timeInfoConfigItems = this.timeInfoConfigItems;
@@ -456,10 +458,28 @@ const InstantAppsTimeFilter = class {
456
458
  async updateFilterMode() {
457
459
  state.filterMode = this.filterMode;
458
460
  }
461
+ async updateTimeSliderConfig() {
462
+ state.timeSliderConfig = this.timeSliderConfig;
463
+ await viewModel.init(this.timeSliderRef);
464
+ }
465
+ async updateAutoPlay() {
466
+ state.autoPlay = this.autoPlay;
467
+ if (state.timeSlider) {
468
+ if (state.autoPlay) {
469
+ state.timeSlider.play();
470
+ }
471
+ else {
472
+ state.timeSlider.stop();
473
+ }
474
+ }
475
+ }
459
476
  async componentWillLoad() {
460
477
  try {
461
478
  state.view = this.view;
462
479
  state.timeInfoConfigItems = this.timeInfoConfigItems;
480
+ state.autoPlay = !!this.autoPlay;
481
+ if (this.timeSliderConfig)
482
+ state.timeSliderConfig = this.timeSliderConfig;
463
483
  if (this.filterMode)
464
484
  state.filterMode = this.filterMode;
465
485
  await getMessages(this);
@@ -480,17 +500,14 @@ const InstantAppsTimeFilter = class {
480
500
  viewModel.destroy();
481
501
  }
482
502
  render() {
483
- return h$2(Host, { key: 'bf0887f83b19239ce1b81efad5c356c7edc05ba1' }, this._renderBase());
503
+ return h$2(Host, { key: '38a0569dba42d51846760bf75df36ee1c88d71b1' }, this._renderBase());
484
504
  }
485
505
  _renderBase() {
486
- return (h$2("div", { class: `${CSS.base}${this.view.type !== '2d' ? CSS.threeD : ''}` }, this._renderLoader(), this._renderMain()));
487
- }
488
- _renderMain() {
489
- return (h$2(Fragment, null, this.view.type === '2d' && this._renderTopEl(), h$2("div", { ref: (ref) => (this.timeSliderRef = ref) })));
506
+ return (h$2("div", { class: `${CSS.base}${this.view.type !== '2d' ? CSS.threeD : ''}` }, this._renderLoader(), this.view.type === '2d' && this._renderTopEl(), h$2("div", { key: "time-slider", ref: (ref) => (this.timeSliderRef = ref) })));
490
507
  }
491
508
  _renderLoader() {
492
509
  var _a, _b;
493
- return (state.loading && (h$2(Fragment, null, h$2("div", { class: CSS.background }), h$2("div", { class: CSS.loadingContainer }, h$2("calcite-loader", { scale: "m", label: (_a = this.messages) === null || _a === void 0 ? void 0 : _a.loading, text: (_b = this.messages) === null || _b === void 0 ? void 0 : _b.loading })))));
510
+ return (state.loading && (h$2("div", null, h$2("div", { class: CSS.background }), h$2("div", { class: CSS.loadingContainer }, h$2("calcite-loader", { scale: "m", label: (_a = this.messages) === null || _a === void 0 ? void 0 : _a.loading, text: (_b = this.messages) === null || _b === void 0 ? void 0 : _b.loading })))));
494
511
  }
495
512
  _renderTopEl() {
496
513
  const moreThanOneTimeLayer = this.timeInfoConfigItems.length > 1;
@@ -520,7 +537,9 @@ const InstantAppsTimeFilter = class {
520
537
  get el() { return getElement(this); }
521
538
  static get watchers() { return {
522
539
  "timeInfoConfigItems": ["updateTimeInfoConfigItems"],
523
- "filterMode": ["updateFilterMode"]
540
+ "filterMode": ["updateFilterMode"],
541
+ "timeSliderConfig": ["updateTimeSliderConfig"],
542
+ "autoPlay": ["updateAutoPlay"]
524
543
  }; }
525
544
  };
526
545
  InstantAppsTimeFilter.style = InstantAppsTimeFilterStyle0;