@esri/solutions-components 0.7.25 → 0.7.27

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 (53) hide show
  1. package/dist/cjs/calcite-alert_4.cjs.entry.js +2 -2
  2. package/dist/cjs/calcite-flow_4.cjs.entry.js +43 -12
  3. package/dist/cjs/card-manager_3.cjs.entry.js +3 -1
  4. package/dist/cjs/crowdsource-reporter.cjs.entry.js +11 -22
  5. package/dist/cjs/loader.cjs.js +1 -1
  6. package/dist/cjs/{popupUtils-a73902a6.js → popupUtils-7755782a.js} +9 -12
  7. package/dist/cjs/solutions-components.cjs.js +1 -1
  8. package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.css +0 -21
  9. package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js +27 -21
  10. package/dist/collection/components/feature-list/feature-list.js +43 -10
  11. package/dist/collection/components/info-card/info-card.js +1 -1
  12. package/dist/collection/components/layer-list/layer-list.js +2 -1
  13. package/dist/collection/components/layer-table/layer-table.js +3 -1
  14. package/dist/collection/demos/crowdsource-reporter.html +92 -58
  15. package/dist/collection/demos/feature-list.html +65 -17
  16. package/dist/collection/demos/layer-list.html +43 -3
  17. package/dist/collection/utils/interfaces.ts +1 -1
  18. package/dist/collection/utils/popupUtils.js +9 -12
  19. package/dist/collection/utils/popupUtils.ts +30 -32
  20. package/dist/components/crowdsource-reporter.js +12 -23
  21. package/dist/components/feature-list2.js +42 -10
  22. package/dist/components/info-card2.js +1 -1
  23. package/dist/components/layer-list2.js +2 -1
  24. package/dist/components/layer-table2.js +3 -1
  25. package/dist/components/popupUtils.js +9 -12
  26. package/dist/esm/calcite-alert_4.entry.js +2 -2
  27. package/dist/esm/calcite-flow_4.entry.js +43 -12
  28. package/dist/esm/card-manager_3.entry.js +3 -1
  29. package/dist/esm/crowdsource-reporter.entry.js +12 -23
  30. package/dist/esm/loader.js +1 -1
  31. package/dist/esm/{popupUtils-a593bd78.js → popupUtils-d75edf93.js} +9 -12
  32. package/dist/esm/solutions-components.js +1 -1
  33. package/dist/solutions-components/demos/crowdsource-reporter.html +92 -58
  34. package/dist/solutions-components/demos/feature-list.html +65 -17
  35. package/dist/solutions-components/demos/layer-list.html +43 -3
  36. package/dist/solutions-components/p-515a319e.js +21 -0
  37. package/dist/solutions-components/p-6a452a84.entry.js +17 -0
  38. package/dist/solutions-components/p-8756eebb.entry.js +6 -0
  39. package/dist/solutions-components/{p-29f661f5.entry.js → p-934cbe40.entry.js} +2 -2
  40. package/dist/solutions-components/{p-5af99fd8.entry.js → p-9549b5b1.entry.js} +1 -1
  41. package/dist/solutions-components/solutions-components.esm.js +1 -1
  42. package/dist/solutions-components/utils/interfaces.ts +1 -1
  43. package/dist/solutions-components/utils/popupUtils.ts +30 -32
  44. package/dist/types/components/crowdsource-reporter/crowdsource-reporter.d.ts +5 -1
  45. package/dist/types/components/feature-list/feature-list.d.ts +8 -0
  46. package/dist/types/components.d.ts +19 -0
  47. package/dist/types/preact.d.ts +3 -1
  48. package/dist/types/utils/interfaces.d.ts +1 -1
  49. package/dist/types/utils/popupUtils.d.ts +3 -2
  50. package/package.json +1 -1
  51. package/dist/solutions-components/p-0b619197.entry.js +0 -17
  52. package/dist/solutions-components/p-db868283.js +0 -21
  53. package/dist/solutions-components/p-e88a64be.entry.js +0 -6
@@ -44,27 +44,6 @@
44
44
  border: 1px solid var(--calcite-color-border-3);
45
45
  }
46
46
 
47
- .map-container {
48
- position: absolute;
49
- width: calc(100% - 390px);
50
- left: 390px;
51
- }
52
-
53
- .side-panel {
54
- padding: 2px;
55
- width: 390px;
56
- height: 100%;
57
- position: absolute;
58
- top: 0;
59
- left: 0;
60
- z-index: 60;
61
- }
62
-
63
47
  .error-msg{
64
48
  padding: 10px;
65
49
  }
66
-
67
- .collapsed-side-panel {
68
- top: calc(100% - 55px);
69
- height: 54px;
70
- }
@@ -58,9 +58,7 @@ export class CrowdsourceReporter {
58
58
  * Called each time the mapView prop is changed.
59
59
  */
60
60
  async isMobileWatchHandler() {
61
- if (this.isMobile) {
62
- this._sidePanelCollapsed = false;
63
- }
61
+ this._sidePanelCollapsed = false;
64
62
  }
65
63
  /**
66
64
  * Called each time the mapView prop is changed.
@@ -72,16 +70,6 @@ export class CrowdsourceReporter {
72
70
  }
73
71
  //--------------------------------------------------------------------------
74
72
  //
75
- // Methods (public)
76
- //
77
- //--------------------------------------------------------------------------
78
- //--------------------------------------------------------------------------
79
- //
80
- // Events (public)
81
- //
82
- //--------------------------------------------------------------------------
83
- //--------------------------------------------------------------------------
84
- //
85
73
  // Functions (lifecycle)
86
74
  //
87
75
  //--------------------------------------------------------------------------
@@ -123,13 +111,8 @@ export class CrowdsourceReporter {
123
111
  break;
124
112
  }
125
113
  });
126
- let sidePanelClass = "side-panel";
127
- //in case of mobile handle for collapsed styles of the panel
128
- if (this.isMobile && this._sidePanelCollapsed) {
129
- sidePanelClass += " collapsed-side-panel";
130
- }
131
114
  const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
132
- return (h("calcite-panel", { class: sidePanelClass + " width-full " + themeClass }, this.mapView
115
+ return (h("calcite-panel", { class: "width-full " + themeClass }, this.mapView
133
116
  ? h("calcite-flow", null, (renderLists === null || renderLists === void 0 ? void 0 : renderLists.length) > 0 && renderLists)
134
117
  : h("calcite-loader", { scale: "m" })));
135
118
  }
@@ -139,7 +122,10 @@ export class CrowdsourceReporter {
139
122
  * @protected
140
123
  */
141
124
  getLayerListFlowItem() {
142
- return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this._hasValidLayers && h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), this._hasValidLayers && h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports && h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._translations.noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this) }))));
125
+ return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this._hasValidLayers &&
126
+ h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), this._hasValidLayers &&
127
+ h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
128
+ h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._translations.noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this) }))));
143
129
  }
144
130
  /**
145
131
  * When layer list is loaded, we will receive the list of layers, if its means we don't have any valid layer to be listed
@@ -174,6 +160,7 @@ export class CrowdsourceReporter {
174
160
  */
175
161
  toggleSidePanel() {
176
162
  this._sidePanelCollapsed = !this._sidePanelCollapsed;
163
+ this.togglePanel.emit(this._sidePanelCollapsed);
177
164
  }
178
165
  /**
179
166
  * When feature is selected from list store that and show feature details
@@ -190,7 +177,8 @@ export class CrowdsourceReporter {
190
177
  * @protected
191
178
  */
192
179
  getFeatureListFlowItem(layerId, layerName) {
193
- return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromFeatureList.bind(this) }, h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { class: "height-full", highlightOnMap: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 100, selectedLayerId: layerId }))));
180
+ return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromFeatureList.bind(this) }, h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports &&
181
+ h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { class: "height-full", highlightOnMap: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, selectedLayerId: layerId }))));
194
182
  }
195
183
  /**
196
184
  * Returns the calcite-flow item for feature details
@@ -631,6 +619,24 @@ export class CrowdsourceReporter {
631
619
  "_hasValidLayers": {}
632
620
  };
633
621
  }
622
+ static get events() {
623
+ return [{
624
+ "method": "togglePanel",
625
+ "name": "togglePanel",
626
+ "bubbles": true,
627
+ "cancelable": true,
628
+ "composed": true,
629
+ "docs": {
630
+ "tags": [],
631
+ "text": "Emitted when toggle panel button is clicked in reporter"
632
+ },
633
+ "complexType": {
634
+ "original": "boolean",
635
+ "resolved": "boolean",
636
+ "references": {}
637
+ }
638
+ }];
639
+ }
634
640
  static get elementRef() { return "el"; }
635
641
  static get watchers() {
636
642
  return [{
@@ -36,6 +36,18 @@ export class FeatureList {
36
36
  }
37
37
  //--------------------------------------------------------------------------
38
38
  //
39
+ // Watch handlers
40
+ //
41
+ //--------------------------------------------------------------------------
42
+ /**
43
+ * Watch for selectedLayerId change and update layer instance and features list for new layerId
44
+ */
45
+ async selectedLayerWatchHandler() {
46
+ this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
47
+ await this.initializeFeatureItems();
48
+ }
49
+ //--------------------------------------------------------------------------
50
+ //
39
51
  // Functions (lifecycle)
40
52
  //
41
53
  //--------------------------------------------------------------------------
@@ -47,23 +59,22 @@ export class FeatureList {
47
59
  await this._getTranslations();
48
60
  this._isLoading = true;
49
61
  this._popupUtils = new PopupUtils();
50
- this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
62
+ if (this.mapView && this.selectedLayerId) {
63
+ this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
64
+ }
51
65
  }
52
66
  /**
53
67
  * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
54
68
  */
55
69
  async componentDidLoad() {
56
- if (this._selectedLayer) {
57
- this._featureItems = await this.queryPage(0);
58
- this._featuresCount = await this._selectedLayer.queryFeatureCount();
59
- this._isLoading = false;
60
- }
70
+ await this.initializeFeatureItems();
61
71
  }
62
72
  /**
63
73
  * Renders the component.
64
74
  */
65
75
  render() {
66
- return (h("calcite-panel", { "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { scale: "m" }), this._featureItems.length === 0 && !this._isLoading && h("calcite-notice", { class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { "selection-appearance": "border", "selection-mode": "single" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
76
+ return (h("calcite-panel", { "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { scale: "m" }), this._featureItems.length === 0 && !this._isLoading &&
77
+ h("calcite-notice", { class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { "selection-appearance": "border", "selection-mode": "single" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
67
78
  h("div", { class: "width-full", slot: "footer" }, h("calcite-pagination", { class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, "start-item": "1", "total-items": this._featuresCount }))));
68
79
  }
69
80
  //--------------------------------------------------------------------------
@@ -71,6 +82,17 @@ export class FeatureList {
71
82
  // Functions (protected)
72
83
  //
73
84
  //--------------------------------------------------------------------------
85
+ /**
86
+ * Initialize the features list using the selected layer
87
+ */
88
+ async initializeFeatureItems() {
89
+ if (this._selectedLayer) {
90
+ this._isLoading = true;
91
+ this._featureItems = await this.queryPage(0);
92
+ this._featuresCount = await this._selectedLayer.queryFeatureCount();
93
+ this._isLoading = false;
94
+ }
95
+ }
74
96
  /**
75
97
  * On page change get the next updated feature list
76
98
  * @param event page change event
@@ -115,14 +137,19 @@ export class FeatureList {
115
137
  */
116
138
  async queryPage(page) {
117
139
  const featureLayer = this._selectedLayer;
140
+ const objectIdField = featureLayer.objectIdField;
118
141
  const query = {
119
142
  start: page,
120
143
  num: this.pageSize,
121
144
  outFields: ["*"],
122
- orderByFields: [featureLayer.objectIdField + " DESC"],
123
145
  returnGeometry: true,
124
- where: featureLayer.definitionExpression
146
+ where: featureLayer.definitionExpression,
147
+ outSpatialReference: this.mapView.spatialReference.toJSON()
125
148
  };
149
+ //sort only when objectId field is found
150
+ if (objectIdField) {
151
+ query.orderByFields = [objectIdField.toString() + " DESC"];
152
+ }
126
153
  const featureSet = await featureLayer.queryFeatures(query);
127
154
  return await this.createFeatureItem(featureSet);
128
155
  }
@@ -135,7 +162,7 @@ export class FeatureList {
135
162
  async createFeatureItem(featureSet) {
136
163
  const currentFeatures = featureSet === null || featureSet === void 0 ? void 0 : featureSet.features;
137
164
  const items = currentFeatures.map(async (feature) => {
138
- const popupTitle = await this._popupUtils.getPopupTitle(feature);
165
+ const popupTitle = await this._popupUtils.getPopupTitle(feature, this.mapView.map);
139
166
  return this.getFeatureItem(feature, popupTitle);
140
167
  });
141
168
  return Promise.all(items);
@@ -300,4 +327,10 @@ export class FeatureList {
300
327
  }];
301
328
  }
302
329
  static get elementRef() { return "el"; }
330
+ static get watchers() {
331
+ return [{
332
+ "propName": "selectedLayerId",
333
+ "methodName": "selectedLayerWatchHandler"
334
+ }];
335
+ }
303
336
  }
@@ -176,7 +176,7 @@ export class InfoCard {
176
176
  if (this.graphics.length > 0) {
177
177
  this._layer = (_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer;
178
178
  this._editEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsUpdate;
179
- this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0]);
179
+ this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0], this.mapView.map);
180
180
  this._features.open({
181
181
  features: this.graphics
182
182
  });
@@ -56,7 +56,8 @@ export class LayerList {
56
56
  * Renders the component.
57
57
  */
58
58
  render() {
59
- return (h(Fragment, null, this._isLoading && h("calcite-loader", { scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay && h("calcite-notice", { class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
59
+ return (h(Fragment, null, this._isLoading && h("calcite-loader", { scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
60
+ h("calcite-notice", { class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, h("div", { slot: "title" }, this._translations.error), h("div", { slot: "message" }, this.noLayerErrorMsg ? this.noLayerErrorMsg : this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
60
61
  h("calcite-list", null, this.renderLayerList())));
61
62
  }
62
63
  //--------------------------------------------------------------------------
@@ -1109,7 +1109,7 @@ export class LayerTable {
1109
1109
  */
1110
1110
  _filterModal() {
1111
1111
  var _a, _b, _c;
1112
- return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: async () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: true, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
1112
+ return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: async () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
1113
1113
  }
1114
1114
  /**
1115
1115
  * Reset the filter active prop
@@ -1210,6 +1210,8 @@ export class LayerTable {
1210
1210
  var _a, _b;
1211
1211
  const layerExpressions = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions;
1212
1212
  this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer.id) : [];
1213
+ this._filterList.layerExpressions = this._layerExpressions;
1214
+ this._filterActive = false;
1213
1215
  }
1214
1216
  /**
1215
1217
  * Select all rows that are not currently selectd
@@ -27,10 +27,10 @@
27
27
  top: 0px;
28
28
  right: 0px;
29
29
  bottom: 0px;
30
- left: 390px;
30
+ left: 361px;
31
31
  }
32
32
  #viewDiv[dir="rtl"] {
33
- right: 390px;
33
+ right: 361px;
34
34
  left: 0px;
35
35
  }
36
36
  .over-map {
@@ -43,7 +43,6 @@
43
43
  }
44
44
  .column {
45
45
  width: 360px;
46
- padding: 1rem;
47
46
  border: 1px solid var(--calcite-color-border-2);
48
47
  height: -webkit-fill-available;
49
48
  height: 100%;
@@ -51,6 +50,29 @@
51
50
  .column[dir="rtl"] {
52
51
  float: right;
53
52
  }
53
+
54
+ @media screen and (max-width: 600px) {
55
+ #viewDiv {
56
+ left: 0;
57
+ height: 50%;
58
+ width: 100%;
59
+ }
60
+
61
+ .column {
62
+ height: 50%;
63
+ top: 50%;
64
+ width: calc(100% - 2px);
65
+ }
66
+
67
+ .map-with-panel-collapsed {
68
+ height: calc(100% - 100px) !important;
69
+ }
70
+
71
+ .column-collapsed {
72
+ top: calc(100% - 100px);
73
+ height: 100px;
74
+ }
75
+ }
54
76
  </style>
55
77
 
56
78
  <link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css"/>
@@ -69,52 +91,44 @@
69
91
  esriConfig
70
92
  ) => {
71
93
  const demo = document.getElementById("demo");
72
-
73
- // let headerSet = false;
74
- // let custom = [];
75
- // let portal;
76
- // //Support id and portal URL parameter
77
- // var vars = window.location.search.substring(1).split("&");
78
- // vars.forEach((param) => {
79
- // let vals = param.split("=");
80
- // const v = vals[1];
81
- // switch (vals[0]) {
82
- // case "id":
83
- // custom = [{
84
- // id: v,
85
- // name: "Map from URL"
86
- // }];
87
- // break;
88
- // case "portal":
89
- // portal = v;
90
- // default:
91
- // break;
92
- // }
93
- // });
94
-
95
- // if (portal) {
96
- // esriConfig.portalUrl = portal;
97
- // }
98
-
99
- // demo.mapInfos = [{
100
- // //id: "f8c4d99deb3c483cac296cc261e18a25", //blank no layers
101
- // //id: "a7e880f7afbb471991d43c8c4f1438ac" // Se mapping
102
- // //id: "c720e337ff814fe4a83bc244c46f8e43" //15 Layers
103
- // //id: "f5186c798b9e40dab1078658ddbc28cf" // 30K features
104
- // //id: "dda88d905a6748a5ab46bea5be795f33" // screening layers
105
- // id: "b5bdcb1e5d684dd3b21a2d44b8e4f928" //Popup content
106
- // }];
107
- // //if id is passed in the url parameter use that mapInfos
108
- // if (custom?.length > 0) {
109
- // demo.mapInfos = custom;
110
- // }
111
-
112
- //esriConfig.portalUrl = "https://solutions.mapsdevext.arcgis.com";
113
- var webMap = new WebMap({
114
- portalItem: {
115
- id: "b5bdcb1e5d684dd3b21a2d44b8e4f928"
94
+ let custom = null;
95
+ let portal;
96
+ //Support webmap and portal URL parameter
97
+ var vars = window.location.search.substring(1).split("&");
98
+ vars.forEach((param) => {
99
+ let vals = param.split("=");
100
+ const v = vals[1];
101
+ switch (vals[0]) {
102
+ case "webmap":
103
+ custom = {
104
+ id: v
105
+ };
106
+ break;
107
+ case "portal":
108
+ portal = v;
109
+ default:
110
+ break;
116
111
  }
117
112
  });
113
+ //update the portalUrl if found in urlParams
114
+ //esriConfig.portalUrl = "https://solutions.mapsdevext.arcgis.com";
115
+ if (portal) {
116
+ esriConfig.portalUrl = portal;
117
+ }
118
+
119
+ let portalItem = {
120
+ //id: "b5bdcb1e5d684dd3b21a2d44b8e4f928"
121
+ //id: "f8c4d99deb3c483cac296cc261e18a25", //blank no layers
122
+ //id: "a7e880f7afbb471991d43c8c4f1438ac" // Se mapping
123
+ //id: "c720e337ff814fe4a83bc244c46f8e43" //15 Layers
124
+ //id: "f5186c798b9e40dab1078658ddbc28cf" // 30K features
125
+ //id: "dda88d905a6748a5ab46bea5be795f33" // screening layers
126
+ id: "b5bdcb1e5d684dd3b21a2d44b8e4f928" //Popup content
127
+ //id: "d399ec39959a4aac8617ae4f05dd6785" //Arcade
128
+ }
129
+ const webMap = new WebMap({
130
+ portalItem: custom ?? portalItem
131
+ });
118
132
 
119
133
  demo.mapView = new MapView({
120
134
  container: "viewDiv",
@@ -122,24 +136,44 @@
122
136
  });
123
137
 
124
138
  demo.mapView.when(() => {
125
- // const legend = new Legend({
126
- // view: demo.mapView
127
- // });
128
- // demo.mapView.ui.add(legend, "top-left");
139
+ // const legend = new Legend({
140
+ // view: demo.mapView
141
+ // });
142
+ // demo.mapView.ui.add(legend, "top-left");
129
143
  });
130
-
131
- // demo.enableHome = true;
132
- // demo.enableSearch = true;
133
- // demo.enableZoom = true;
134
144
  demo.reportsHeader = "Reports";
135
145
  demo.reportButtonText = "Report an incident";
136
146
  demo.enableNewReports = true;
137
- //Select reporting layers -
138
- //demo.layers = ['SE_field_mapping_9688', 'SE_field_mapping_5784', 'SE_field_mapping_1853'];
139
- //demo.layers = ['Three_Layers_nested_4042', 'SE_sort_2889', 'SE_sort_756']; //screening layers
140
147
  demo.theme = "light";
141
148
  demo.reportSubmittedMessage = "Thank you";
149
+ //Select reporting layers -
150
+ //demo.layers = ['SE_field_mapping_9688', 'SE_field_mapping_5784', 'SE_field_mapping_1853']; //Se mapping
151
+ //demo.layers = ['Three_Layers_nested_4042', 'SE_sort_2889', 'SE_sort_756']; //screening layers
152
+
153
+ //Update isMobile property of the reporter component
154
+ const mediaQueryList = window.matchMedia("screen and (max-width: 600px)");
155
+ demo.isMobile = mediaQueryList.matches;
156
+ //on change update the prop for is mobile
157
+ mediaQueryList.onchange = (e) => {
158
+ demo.isMobile = e.matches;
159
+ togglePanel({detail:false})
160
+ }
161
+ //listen to togglePanel event
162
+ demo.addEventListener('togglePanel', togglePanel);
142
163
  });
164
+
165
+ function togglePanel(evt){
166
+ const state = evt.detail;
167
+ const viewDiv = document.getElementById("viewDiv");
168
+ const demo = document.getElementById("demo");
169
+ if(state){
170
+ demo.classList.add("column-collapsed");
171
+ viewDiv.classList.add("map-with-panel-collapsed");
172
+ } else{
173
+ demo.classList.remove("column-collapsed");
174
+ viewDiv.classList.remove("map-with-panel-collapsed");
175
+ }
176
+ }
143
177
  </script>
144
178
  </head>
145
179
 
@@ -7,24 +7,51 @@
7
7
  />
8
8
  <title>Feature list</title>
9
9
  <!--
10
- | Copyright 2022 Esri
11
- |
12
- | Licensed under the Apache License, Version 2.0 (the "License");
13
- | you may not use this file except in compliance with the License.
14
- | You may obtain a copy of the License at
15
- |
16
- | http://www.apache.org/licenses/LICENSE-2.0
17
- |
18
- | Unless required by applicable law or agreed to in writing, software
19
- | distributed under the License is distributed on an "AS IS" BASIS,
20
- | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
21
- | See the License for the specific language governing permissions and
22
- | limitations under the License.
23
- -->
10
+ | Copyright 2022 Esri
11
+ |
12
+ | Licensed under the Apache License, Version 2.0 (the "License");
13
+ | you may not use this file except in compliance with the License.
14
+ | You may obtain a copy of the License at
15
+ |
16
+ | http://www.apache.org/licenses/LICENSE-2.0
17
+ |
18
+ | Unless required by applicable law or agreed to in writing, software
19
+ | distributed under the License is distributed on an "AS IS" BASIS,
20
+ | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
21
+ | See the License for the specific language governing permissions and
22
+ | limitations under the License.
23
+ -->
24
24
  <style>
25
+ #viewDiv {
26
+ padding: 0;
27
+ margin: 0;
28
+ height: 100%;
29
+ width: calc(50% - 2px);
30
+ }
31
+
32
+ .over-map {
33
+ position: absolute;
34
+ top: 0;
35
+ right: 0px;
36
+ background-color: var(--calcite-color-foreground-1);
37
+ }
38
+
39
+ .column {
40
+ width: 50%;
41
+ height: 100%;
42
+ border: 1px solid var(--calcite-color-border-2);
43
+ }
44
+
45
+ .column[dir="rtl"] {
46
+ float: left;
47
+ }
48
+
49
+ .full-height {
50
+ height: 100%;
51
+ }
25
52
  </style>
26
53
 
27
- <link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css"/>
54
+ <link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css" />
28
55
  <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
29
56
  <link rel="stylesheet" href="../solutions-components.css" type="text/css">
30
57
  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.0.0/calcite.css" />
@@ -33,11 +60,32 @@
33
60
  <script type="module" src="../solutions-components.esm.js"></script>
34
61
 
35
62
  <script>
63
+ require(["esri/WebMap", "esri/views/MapView"], (
64
+ WebMap,
65
+ MapView
66
+ ) => {
67
+ var webMap = new WebMap({
68
+ portalItem: {
69
+ id: "7377412d3bd7400cbd5b355404285682"
70
+ }
71
+ });
72
+ var view = new MapView({
73
+ container: "viewDiv",
74
+ map: webMap
75
+ });
76
+
77
+ view.when(function () {
78
+ const demo = document.getElementById("demo");
79
+ demo.mapView = view;
80
+ demo.selectedLayerId = 'BirdObservationTryItLive_2797'
81
+ demo.pageSize = 30;
82
+ })
83
+ });
36
84
  </script>
37
85
  </head>
38
86
 
39
- <!-- <body class="calcite-mode-dark"> -->
40
87
  <body>
41
- <feature-list/>
88
+ <div id="viewDiv"></div>
89
+ <feature-list id="demo" class="over-map column full-height"></feature-list>
42
90
  </body>
43
91
  </html>
@@ -22,9 +22,32 @@
22
22
  | limitations under the License.
23
23
  -->
24
24
  <style>
25
+ #viewDiv {
26
+ padding: 0;
27
+ margin: 0;
28
+ height: 100%;
29
+ width: calc(50% - 2px);
30
+ }
31
+ .over-map {
32
+ position: absolute;
33
+ top:0;
34
+ right: 0px;
35
+ background-color: var(--calcite-color-foreground-1);
36
+ }
37
+ .column {
38
+ width: 50%;
39
+ height: 100%;
40
+ border: 1px solid var(--calcite-color-border-2);
41
+ }
42
+ .column[dir="rtl"] {
43
+ float: left;
44
+ }
45
+ .full-height {
46
+ height: 100%;
47
+ }
25
48
  </style>
26
49
 
27
- <link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css"/>
50
+ <link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css" />
28
51
  <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
29
52
  <link rel="stylesheet" href="../solutions-components.css" type="text/css">
30
53
  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.0.0/calcite.css" />
@@ -33,11 +56,28 @@
33
56
  <script type="module" src="../solutions-components.esm.js"></script>
34
57
 
35
58
  <script>
59
+ require(["esri/WebMap", "esri/views/MapView"], (
60
+ WebMap,
61
+ MapView
62
+ ) => {
63
+ var webMap = new WebMap({
64
+ portalItem: {
65
+ id: "b5bdcb1e5d684dd3b21a2d44b8e4f928"
66
+ }
67
+ });
68
+
69
+ const demo = document.getElementById("demo");
70
+ demo.mapView = new MapView({
71
+ container: "viewDiv",
72
+ map: webMap
73
+ });
74
+ });
36
75
  </script>
37
76
  </head>
38
77
 
39
- <!-- <body class="calcite-mode-dark"> -->
40
78
  <body>
41
- <layer-list/>
79
+ <div id="viewDiv"></div>
80
+ <layer-list id="demo" class="over-map column full-height">
81
+ </layer-list>
42
82
  </body>
43
83
  </html>
@@ -546,5 +546,5 @@ export interface ILayerAndTableIds {
546
546
 
547
547
  export interface IPopupUtils {
548
548
  arcade: typeof import("esri/arcade");
549
- getPopupTitle(graphic: __esri.Graphic): Promise<string>;
549
+ getPopupTitle(graphic: __esri.Graphic, map: __esri.Map): Promise<string>;
550
550
  }