@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
@@ -22,12 +22,13 @@ import { loadModules } from "./loadModules";
22
22
  export class PopupUtils {
23
23
  /**
24
24
  * Get the popup title that honors arcade expressions
25
- *
25
+ * @param graphic selected graphic
26
+ * @param map __esri.Map
26
27
  * @returns Promise resolving with the popup title
27
28
  *
28
29
  * @protected
29
30
  */
30
- async getPopupTitle(graphic) {
31
+ async getPopupTitle(graphic, map) {
31
32
  var _a, _b, _c;
32
33
  if (!this.arcade) {
33
34
  await this._initModules();
@@ -41,22 +42,18 @@ export class PopupUtils {
41
42
  if (popupTitle.includes("{expression/expr") && ((_b = layer === null || layer === void 0 ? void 0 : layer.popupTemplate) === null || _b === void 0 ? void 0 : _b.expressionInfos) != null) {
42
43
  for (let i = 0; i < ((_c = layer.popupTemplate) === null || _c === void 0 ? void 0 : _c.expressionInfos.length); i++) {
43
44
  const info = layer.popupTemplate.expressionInfos[i];
44
- const profile = {
45
- variables: [
46
- {
47
- name: "$feature",
48
- type: "feature"
49
- }
50
- ]
51
- };
45
+ //create arcade profile for popup
46
+ const profile = this.arcade.createArcadeProfile('popup');
52
47
  try {
53
48
  const arcadeExecutor = await this.arcade.createArcadeExecutor(info.expression, profile);
54
- const arcadeTitle = arcadeExecutor.execute({ $feature: graphic });
49
+ const arcadeTitle = await arcadeExecutor.executeAsync({ $feature: graphic, $layer: layer, $map: map });
55
50
  if (arcadeTitle != null || arcadeTitle !== "") {
56
51
  attributes[`{expression/${info.name}}`.toUpperCase()] = arcadeTitle;
57
52
  }
58
53
  }
59
- catch (_d) {
54
+ catch (e) {
55
+ //log error in console to understand if the arcade expressions are failing
56
+ console.error(e);
60
57
  continue;
61
58
  }
62
59
  }
@@ -23,15 +23,17 @@ export class PopupUtils {
23
23
  */
24
24
  arcade: typeof import("esri/arcade");
25
25
 
26
- /**
27
- * Get the popup title that honors arcade expressions
28
- *
29
- * @returns Promise resolving with the popup title
30
- *
31
- * @protected
32
- */
26
+ /**
27
+ * Get the popup title that honors arcade expressions
28
+ * @param graphic selected graphic
29
+ * @param map __esri.Map
30
+ * @returns Promise resolving with the popup title
31
+ *
32
+ * @protected
33
+ */
33
34
  public async getPopupTitle(
34
- graphic: __esri.Graphic
35
+ graphic: __esri.Graphic,
36
+ map: __esri.Map
35
37
  ): Promise<string> {
36
38
  if (!this.arcade) {
37
39
  await this._initModules()
@@ -48,21 +50,17 @@ export class PopupUtils {
48
50
  if (popupTitle.includes("{expression/expr") && layer?.popupTemplate?.expressionInfos != null) {
49
51
  for (let i = 0; i < layer.popupTemplate?.expressionInfos.length; i++) {
50
52
  const info = layer.popupTemplate.expressionInfos[i];
51
- const profile = {
52
- variables: [
53
- {
54
- name: "$feature",
55
- type: "feature"
56
- }
57
- ]
58
- } as __esri.Profile;
53
+ //create arcade profile for popup
54
+ const profile = this.arcade.createArcadeProfile('popup');
59
55
  try {
60
56
  const arcadeExecutor = await this.arcade.createArcadeExecutor(info.expression, profile);
61
- const arcadeTitle = arcadeExecutor.execute({ $feature: graphic });
57
+ const arcadeTitle = await arcadeExecutor.executeAsync({ $feature: graphic, $layer: layer, $map: map });
62
58
  if (arcadeTitle != null || arcadeTitle !== "") {
63
59
  attributes[`{expression/${info.name}}`.toUpperCase()] = arcadeTitle;
64
60
  }
65
- } catch {
61
+ } catch (e) {
62
+ //log error in console to understand if the arcade expressions are failing
63
+ console.error(e);
66
64
  continue;
67
65
  }
68
66
  }
@@ -73,13 +71,13 @@ export class PopupUtils {
73
71
  });
74
72
  }
75
73
 
76
- /**
77
- * Remove any tags from the title
78
- *
79
- * @returns title string without tags
80
- *
81
- * @protected
82
- */
74
+ /**
75
+ * Remove any tags from the title
76
+ *
77
+ * @returns title string without tags
78
+ *
79
+ * @protected
80
+ */
83
81
  protected _removeTags(str: string): string {
84
82
  if (str == null || str === "") {
85
83
  return "";
@@ -87,13 +85,13 @@ export class PopupUtils {
87
85
  return str.toString().replace(/(<([^>]+)>)/gi, "");
88
86
  }
89
87
 
90
- /**
91
- * Load esri javascript api modules
92
- *
93
- * @returns Promise resolving when function is done
94
- *
95
- * @protected
96
- */
88
+ /**
89
+ * Load esri javascript api modules
90
+ *
91
+ * @returns Promise resolving when function is done
92
+ *
93
+ * @protected
94
+ */
97
95
  protected async _initModules(): Promise<void> {
98
96
  const [arcade] = await loadModules([
99
97
  "esri/arcade"
@@ -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 { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
6
+ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
7
7
  import { g as getLocaleComponentStrings } from './locale.js';
8
8
  import { d as defineCustomElement$u } from './action.js';
9
9
  import { d as defineCustomElement$t } from './action-menu.js';
@@ -35,12 +35,13 @@ import { d as defineCustomElement$4 } from './feature-list2.js';
35
35
  import { d as defineCustomElement$3 } from './info-card2.js';
36
36
  import { d as defineCustomElement$2 } from './layer-list2.js';
37
37
 
38
- const crowdsourceReporterCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100% !important}.width-0{width:0}.height-full{height:100% !important}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.map-container{position:absolute;width:calc(100% - 390px);left:390px}.side-panel{padding:2px;width:390px;height:100%;position:absolute;top:0;left:0;z-index:60}.error-msg{padding:10px}.collapsed-side-panel{top:calc(100% - 55px);height:54px}";
38
+ const crowdsourceReporterCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100% !important}.width-0{width:0}.height-full{height:100% !important}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.error-msg{padding:10px}";
39
39
 
40
40
  const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceReporter extends HTMLElement {
41
41
  constructor() {
42
42
  super();
43
43
  this.__registerHost();
44
+ this.togglePanel = createEvent(this, "togglePanel", 7);
44
45
  this.description = undefined;
45
46
  this.isMobile = undefined;
46
47
  this.enableAnonymousAccess = undefined;
@@ -77,9 +78,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
77
78
  * Called each time the mapView prop is changed.
78
79
  */
79
80
  async isMobileWatchHandler() {
80
- if (this.isMobile) {
81
- this._sidePanelCollapsed = false;
82
- }
81
+ this._sidePanelCollapsed = false;
83
82
  }
84
83
  /**
85
84
  * Called each time the mapView prop is changed.
@@ -91,16 +90,6 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
91
90
  }
92
91
  //--------------------------------------------------------------------------
93
92
  //
94
- // Methods (public)
95
- //
96
- //--------------------------------------------------------------------------
97
- //--------------------------------------------------------------------------
98
- //
99
- // Events (public)
100
- //
101
- //--------------------------------------------------------------------------
102
- //--------------------------------------------------------------------------
103
- //
104
93
  // Functions (lifecycle)
105
94
  //
106
95
  //--------------------------------------------------------------------------
@@ -142,13 +131,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
142
131
  break;
143
132
  }
144
133
  });
145
- let sidePanelClass = "side-panel";
146
- //in case of mobile handle for collapsed styles of the panel
147
- if (this.isMobile && this._sidePanelCollapsed) {
148
- sidePanelClass += " collapsed-side-panel";
149
- }
150
134
  const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
151
- return (h("calcite-panel", { class: sidePanelClass + " width-full " + themeClass }, this.mapView
135
+ return (h("calcite-panel", { class: "width-full " + themeClass }, this.mapView
152
136
  ? h("calcite-flow", null, (renderLists === null || renderLists === void 0 ? void 0 : renderLists.length) > 0 && renderLists)
153
137
  : h("calcite-loader", { scale: "m" })));
154
138
  }
@@ -158,7 +142,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
158
142
  * @protected
159
143
  */
160
144
  getLayerListFlowItem() {
161
- 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) }))));
145
+ return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this._hasValidLayers &&
146
+ 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 &&
147
+ 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 &&
148
+ 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) }))));
162
149
  }
163
150
  /**
164
151
  * 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
@@ -193,6 +180,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
193
180
  */
194
181
  toggleSidePanel() {
195
182
  this._sidePanelCollapsed = !this._sidePanelCollapsed;
183
+ this.togglePanel.emit(this._sidePanelCollapsed);
196
184
  }
197
185
  /**
198
186
  * When feature is selected from list store that and show feature details
@@ -209,7 +197,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
209
197
  * @protected
210
198
  */
211
199
  getFeatureListFlowItem(layerId, layerName) {
212
- 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 }))));
200
+ 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 &&
201
+ 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 }))));
213
202
  }
214
203
  /**
215
204
  * Returns the calcite-flow item for feature details
@@ -43,6 +43,18 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
43
43
  }
44
44
  //--------------------------------------------------------------------------
45
45
  //
46
+ // Watch handlers
47
+ //
48
+ //--------------------------------------------------------------------------
49
+ /**
50
+ * Watch for selectedLayerId change and update layer instance and features list for new layerId
51
+ */
52
+ async selectedLayerWatchHandler() {
53
+ this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
54
+ await this.initializeFeatureItems();
55
+ }
56
+ //--------------------------------------------------------------------------
57
+ //
46
58
  // Functions (lifecycle)
47
59
  //
48
60
  //--------------------------------------------------------------------------
@@ -54,23 +66,22 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
54
66
  await this._getTranslations();
55
67
  this._isLoading = true;
56
68
  this._popupUtils = new PopupUtils();
57
- this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
69
+ if (this.mapView && this.selectedLayerId) {
70
+ this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
71
+ }
58
72
  }
59
73
  /**
60
74
  * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
61
75
  */
62
76
  async componentDidLoad() {
63
- if (this._selectedLayer) {
64
- this._featureItems = await this.queryPage(0);
65
- this._featuresCount = await this._selectedLayer.queryFeatureCount();
66
- this._isLoading = false;
67
- }
77
+ await this.initializeFeatureItems();
68
78
  }
69
79
  /**
70
80
  * Renders the component.
71
81
  */
72
82
  render() {
73
- 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 &&
83
+ return (h("calcite-panel", { "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { scale: "m" }), this._featureItems.length === 0 && !this._isLoading &&
84
+ 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 &&
74
85
  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 }))));
75
86
  }
76
87
  //--------------------------------------------------------------------------
@@ -78,6 +89,17 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
78
89
  // Functions (protected)
79
90
  //
80
91
  //--------------------------------------------------------------------------
92
+ /**
93
+ * Initialize the features list using the selected layer
94
+ */
95
+ async initializeFeatureItems() {
96
+ if (this._selectedLayer) {
97
+ this._isLoading = true;
98
+ this._featureItems = await this.queryPage(0);
99
+ this._featuresCount = await this._selectedLayer.queryFeatureCount();
100
+ this._isLoading = false;
101
+ }
102
+ }
81
103
  /**
82
104
  * On page change get the next updated feature list
83
105
  * @param event page change event
@@ -122,14 +144,19 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
122
144
  */
123
145
  async queryPage(page) {
124
146
  const featureLayer = this._selectedLayer;
147
+ const objectIdField = featureLayer.objectIdField;
125
148
  const query = {
126
149
  start: page,
127
150
  num: this.pageSize,
128
151
  outFields: ["*"],
129
- orderByFields: [featureLayer.objectIdField + " DESC"],
130
152
  returnGeometry: true,
131
- where: featureLayer.definitionExpression
153
+ where: featureLayer.definitionExpression,
154
+ outSpatialReference: this.mapView.spatialReference.toJSON()
132
155
  };
156
+ //sort only when objectId field is found
157
+ if (objectIdField) {
158
+ query.orderByFields = [objectIdField.toString() + " DESC"];
159
+ }
133
160
  const featureSet = await featureLayer.queryFeatures(query);
134
161
  return await this.createFeatureItem(featureSet);
135
162
  }
@@ -142,7 +169,7 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
142
169
  async createFeatureItem(featureSet) {
143
170
  const currentFeatures = featureSet === null || featureSet === void 0 ? void 0 : featureSet.features;
144
171
  const items = currentFeatures.map(async (feature) => {
145
- const popupTitle = await this._popupUtils.getPopupTitle(feature);
172
+ const popupTitle = await this._popupUtils.getPopupTitle(feature, this.mapView.map);
146
173
  return this.getFeatureItem(feature, popupTitle);
147
174
  });
148
175
  return Promise.all(items);
@@ -171,6 +198,9 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
171
198
  this._translations = messages[0];
172
199
  }
173
200
  get el() { return this; }
201
+ static get watchers() { return {
202
+ "selectedLayerId": ["selectedLayerWatchHandler"]
203
+ }; }
174
204
  static get style() { return featureListCss; }
175
205
  }, [0, "feature-list", {
176
206
  "selectedLayerId": [1, "selected-layer-id"],
@@ -182,6 +212,8 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
182
212
  "_featuresCount": [32],
183
213
  "_isLoading": [32],
184
214
  "_translations": [32]
215
+ }, undefined, {
216
+ "selectedLayerId": ["selectedLayerWatchHandler"]
185
217
  }]);
186
218
  function defineCustomElement() {
187
219
  if (typeof customElements === "undefined") {
@@ -184,7 +184,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
184
184
  if (this.graphics.length > 0) {
185
185
  this._layer = (_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer;
186
186
  this._editEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsUpdate;
187
- this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0]);
187
+ this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0], this.mapView.map);
188
188
  this._features.open({
189
189
  features: this.graphics
190
190
  });
@@ -59,7 +59,8 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
59
59
  * Renders the component.
60
60
  */
61
61
  render() {
62
- 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 &&
62
+ return (h(Fragment, null, this._isLoading && h("calcite-loader", { scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
63
+ 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 &&
63
64
  h("calcite-list", null, this.renderLayerList())));
64
65
  }
65
66
  //--------------------------------------------------------------------------
@@ -1138,7 +1138,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
1138
1138
  */
1139
1139
  _filterModal() {
1140
1140
  var _a, _b, _c;
1141
- 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 }))));
1141
+ 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 }))));
1142
1142
  }
1143
1143
  /**
1144
1144
  * Reset the filter active prop
@@ -1239,6 +1239,8 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
1239
1239
  var _a, _b;
1240
1240
  const layerExpressions = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions;
1241
1241
  this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer.id) : [];
1242
+ this._filterList.layerExpressions = this._layerExpressions;
1243
+ this._filterActive = false;
1242
1244
  }
1243
1245
  /**
1244
1246
  * Select all rows that are not currently selectd
@@ -23,12 +23,13 @@ import { l as loadModules } from './loadModules.js';
23
23
  class PopupUtils {
24
24
  /**
25
25
  * Get the popup title that honors arcade expressions
26
- *
26
+ * @param graphic selected graphic
27
+ * @param map __esri.Map
27
28
  * @returns Promise resolving with the popup title
28
29
  *
29
30
  * @protected
30
31
  */
31
- async getPopupTitle(graphic) {
32
+ async getPopupTitle(graphic, map) {
32
33
  var _a, _b, _c;
33
34
  if (!this.arcade) {
34
35
  await this._initModules();
@@ -42,22 +43,18 @@ class PopupUtils {
42
43
  if (popupTitle.includes("{expression/expr") && ((_b = layer === null || layer === void 0 ? void 0 : layer.popupTemplate) === null || _b === void 0 ? void 0 : _b.expressionInfos) != null) {
43
44
  for (let i = 0; i < ((_c = layer.popupTemplate) === null || _c === void 0 ? void 0 : _c.expressionInfos.length); i++) {
44
45
  const info = layer.popupTemplate.expressionInfos[i];
45
- const profile = {
46
- variables: [
47
- {
48
- name: "$feature",
49
- type: "feature"
50
- }
51
- ]
52
- };
46
+ //create arcade profile for popup
47
+ const profile = this.arcade.createArcadeProfile('popup');
53
48
  try {
54
49
  const arcadeExecutor = await this.arcade.createArcadeExecutor(info.expression, profile);
55
- const arcadeTitle = arcadeExecutor.execute({ $feature: graphic });
50
+ const arcadeTitle = await arcadeExecutor.executeAsync({ $feature: graphic, $layer: layer, $map: map });
56
51
  if (arcadeTitle != null || arcadeTitle !== "") {
57
52
  attributes[`{expression/${info.name}}`.toUpperCase()] = arcadeTitle;
58
53
  }
59
54
  }
60
- catch (_d) {
55
+ catch (e) {
56
+ //log error in console to understand if the arcade expressions are failing
57
+ console.error(e);
61
58
  continue;
62
59
  }
63
60
  }
@@ -13,7 +13,7 @@ import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as
13
13
  import { K as KindIcons } from './resources-6e00e0d1.js';
14
14
  import { g as getLocaleComponentStrings, l as loadModules } from './locale-731e75a8.js';
15
15
  import { d as getAllLayers } from './mapViewUtils-6daedef8.js';
16
- import { P as PopupUtils } from './popupUtils-a593bd78.js';
16
+ import { P as PopupUtils } from './popupUtils-d75edf93.js';
17
17
  import './guid-36c6c6a5.js';
18
18
  import './resources-cdc36705.js';
19
19
  import './key-af303047.js';
@@ -809,7 +809,7 @@ const InfoCard = class {
809
809
  if (this.graphics.length > 0) {
810
810
  this._layer = (_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer;
811
811
  this._editEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsUpdate;
812
- this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0]);
812
+ this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0], this.mapView.map);
813
813
  this._features.open({
814
814
  features: this.graphics
815
815
  });
@@ -11,7 +11,7 @@ import { c as connectInteractive, u as updateHostInteraction, d as disconnectInt
11
11
  import { c as connectLocalized, d as disconnectLocalized } from './locale-6107ef11.js';
12
12
  import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-f16911e7.js';
13
13
  import { S as SLOTS$1 } from './resources-649a0f91.js';
14
- import { P as PopupUtils } from './popupUtils-a593bd78.js';
14
+ import { P as PopupUtils } from './popupUtils-d75edf93.js';
15
15
  import { g as getLayerOrTable, b as getFeatureLayerView, h as highlightFeatures, c as getMapLayerHash, d as getAllLayers } from './mapViewUtils-6daedef8.js';
16
16
  import { g as getLocaleComponentStrings, f as formatNumber } from './locale-731e75a8.js';
17
17
  import './guid-36c6c6a5.js';
@@ -353,6 +353,18 @@ const FeatureList = class {
353
353
  }
354
354
  //--------------------------------------------------------------------------
355
355
  //
356
+ // Watch handlers
357
+ //
358
+ //--------------------------------------------------------------------------
359
+ /**
360
+ * Watch for selectedLayerId change and update layer instance and features list for new layerId
361
+ */
362
+ async selectedLayerWatchHandler() {
363
+ this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
364
+ await this.initializeFeatureItems();
365
+ }
366
+ //--------------------------------------------------------------------------
367
+ //
356
368
  // Functions (lifecycle)
357
369
  //
358
370
  //--------------------------------------------------------------------------
@@ -364,23 +376,22 @@ const FeatureList = class {
364
376
  await this._getTranslations();
365
377
  this._isLoading = true;
366
378
  this._popupUtils = new PopupUtils();
367
- this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
379
+ if (this.mapView && this.selectedLayerId) {
380
+ this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
381
+ }
368
382
  }
369
383
  /**
370
384
  * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
371
385
  */
372
386
  async componentDidLoad() {
373
- if (this._selectedLayer) {
374
- this._featureItems = await this.queryPage(0);
375
- this._featuresCount = await this._selectedLayer.queryFeatureCount();
376
- this._isLoading = false;
377
- }
387
+ await this.initializeFeatureItems();
378
388
  }
379
389
  /**
380
390
  * Renders the component.
381
391
  */
382
392
  render() {
383
- 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 &&
393
+ return (h("calcite-panel", { "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { scale: "m" }), this._featureItems.length === 0 && !this._isLoading &&
394
+ 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 &&
384
395
  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 }))));
385
396
  }
386
397
  //--------------------------------------------------------------------------
@@ -388,6 +399,17 @@ const FeatureList = class {
388
399
  // Functions (protected)
389
400
  //
390
401
  //--------------------------------------------------------------------------
402
+ /**
403
+ * Initialize the features list using the selected layer
404
+ */
405
+ async initializeFeatureItems() {
406
+ if (this._selectedLayer) {
407
+ this._isLoading = true;
408
+ this._featureItems = await this.queryPage(0);
409
+ this._featuresCount = await this._selectedLayer.queryFeatureCount();
410
+ this._isLoading = false;
411
+ }
412
+ }
391
413
  /**
392
414
  * On page change get the next updated feature list
393
415
  * @param event page change event
@@ -432,14 +454,19 @@ const FeatureList = class {
432
454
  */
433
455
  async queryPage(page) {
434
456
  const featureLayer = this._selectedLayer;
457
+ const objectIdField = featureLayer.objectIdField;
435
458
  const query = {
436
459
  start: page,
437
460
  num: this.pageSize,
438
461
  outFields: ["*"],
439
- orderByFields: [featureLayer.objectIdField + " DESC"],
440
462
  returnGeometry: true,
441
- where: featureLayer.definitionExpression
463
+ where: featureLayer.definitionExpression,
464
+ outSpatialReference: this.mapView.spatialReference.toJSON()
442
465
  };
466
+ //sort only when objectId field is found
467
+ if (objectIdField) {
468
+ query.orderByFields = [objectIdField.toString() + " DESC"];
469
+ }
443
470
  const featureSet = await featureLayer.queryFeatures(query);
444
471
  return await this.createFeatureItem(featureSet);
445
472
  }
@@ -452,7 +479,7 @@ const FeatureList = class {
452
479
  async createFeatureItem(featureSet) {
453
480
  const currentFeatures = featureSet === null || featureSet === void 0 ? void 0 : featureSet.features;
454
481
  const items = currentFeatures.map(async (feature) => {
455
- const popupTitle = await this._popupUtils.getPopupTitle(feature);
482
+ const popupTitle = await this._popupUtils.getPopupTitle(feature, this.mapView.map);
456
483
  return this.getFeatureItem(feature, popupTitle);
457
484
  });
458
485
  return Promise.all(items);
@@ -481,6 +508,9 @@ const FeatureList = class {
481
508
  this._translations = messages[0];
482
509
  }
483
510
  get el() { return getElement(this); }
511
+ static get watchers() { return {
512
+ "selectedLayerId": ["selectedLayerWatchHandler"]
513
+ }; }
484
514
  };
485
515
  FeatureList.style = featureListCss;
486
516
 
@@ -523,7 +553,8 @@ const LayerList = class {
523
553
  * Renders the component.
524
554
  */
525
555
  render() {
526
- 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 &&
556
+ return (h(Fragment, null, this._isLoading && h("calcite-loader", { scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
557
+ 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 &&
527
558
  h("calcite-list", null, this.renderLayerList())));
528
559
  }
529
560
  //--------------------------------------------------------------------------
@@ -1190,7 +1190,7 @@ const LayerTable = class {
1190
1190
  */
1191
1191
  _filterModal() {
1192
1192
  var _a, _b, _c;
1193
- 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 }))));
1193
+ 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 }))));
1194
1194
  }
1195
1195
  /**
1196
1196
  * Reset the filter active prop
@@ -1291,6 +1291,8 @@ const LayerTable = class {
1291
1291
  var _a, _b;
1292
1292
  const layerExpressions = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions;
1293
1293
  this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer.id) : [];
1294
+ this._filterList.layerExpressions = this._layerExpressions;
1295
+ this._filterActive = false;
1294
1296
  }
1295
1297
  /**
1296
1298
  * Select all rows that are not currently selectd