@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.
- package/dist/cjs/calcite-alert_4.cjs.entry.js +2 -2
- package/dist/cjs/calcite-flow_4.cjs.entry.js +43 -12
- package/dist/cjs/card-manager_3.cjs.entry.js +3 -1
- package/dist/cjs/crowdsource-reporter.cjs.entry.js +11 -22
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{popupUtils-a73902a6.js → popupUtils-7755782a.js} +9 -12
- package/dist/cjs/solutions-components.cjs.js +1 -1
- package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.css +0 -21
- package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js +27 -21
- package/dist/collection/components/feature-list/feature-list.js +43 -10
- package/dist/collection/components/info-card/info-card.js +1 -1
- package/dist/collection/components/layer-list/layer-list.js +2 -1
- package/dist/collection/components/layer-table/layer-table.js +3 -1
- package/dist/collection/demos/crowdsource-reporter.html +92 -58
- package/dist/collection/demos/feature-list.html +65 -17
- package/dist/collection/demos/layer-list.html +43 -3
- package/dist/collection/utils/interfaces.ts +1 -1
- package/dist/collection/utils/popupUtils.js +9 -12
- package/dist/collection/utils/popupUtils.ts +30 -32
- package/dist/components/crowdsource-reporter.js +12 -23
- package/dist/components/feature-list2.js +42 -10
- package/dist/components/info-card2.js +1 -1
- package/dist/components/layer-list2.js +2 -1
- package/dist/components/layer-table2.js +3 -1
- package/dist/components/popupUtils.js +9 -12
- package/dist/esm/calcite-alert_4.entry.js +2 -2
- package/dist/esm/calcite-flow_4.entry.js +43 -12
- package/dist/esm/card-manager_3.entry.js +3 -1
- package/dist/esm/crowdsource-reporter.entry.js +12 -23
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{popupUtils-a593bd78.js → popupUtils-d75edf93.js} +9 -12
- package/dist/esm/solutions-components.js +1 -1
- package/dist/solutions-components/demos/crowdsource-reporter.html +92 -58
- package/dist/solutions-components/demos/feature-list.html +65 -17
- package/dist/solutions-components/demos/layer-list.html +43 -3
- package/dist/solutions-components/p-515a319e.js +21 -0
- package/dist/solutions-components/p-6a452a84.entry.js +17 -0
- package/dist/solutions-components/p-8756eebb.entry.js +6 -0
- package/dist/solutions-components/{p-29f661f5.entry.js → p-934cbe40.entry.js} +2 -2
- package/dist/solutions-components/{p-5af99fd8.entry.js → p-9549b5b1.entry.js} +1 -1
- package/dist/solutions-components/solutions-components.esm.js +1 -1
- package/dist/solutions-components/utils/interfaces.ts +1 -1
- package/dist/solutions-components/utils/popupUtils.ts +30 -32
- package/dist/types/components/crowdsource-reporter/crowdsource-reporter.d.ts +5 -1
- package/dist/types/components/feature-list/feature-list.d.ts +8 -0
- package/dist/types/components.d.ts +19 -0
- package/dist/types/preact.d.ts +3 -1
- package/dist/types/utils/interfaces.d.ts +1 -1
- package/dist/types/utils/popupUtils.d.ts +3 -2
- package/package.json +1 -1
- package/dist/solutions-components/p-0b619197.entry.js +0 -17
- package/dist/solutions-components/p-db868283.js +0 -21
- 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
|
-
|
45
|
-
|
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.
|
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 (
|
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
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
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
|
-
|
52
|
-
|
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.
|
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
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
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
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
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)}.
|
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
|
-
|
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:
|
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 &&
|
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 &&
|
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
|
-
|
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
|
-
|
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 &&
|
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 &&
|
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:
|
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
|
-
|
46
|
-
|
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.
|
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 (
|
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-
|
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-
|
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
|
-
|
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
|
-
|
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 &&
|
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 &&
|
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:
|
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
|