@esri/solutions-components 0.7.25 → 0.7.27

package/dist/collection/utils/popupUtils.js

@@ -22,12 +22,13 @@ import { loadModules } from "./loadModules";
 export class PopupUtils {
     /**
      * Get the popup title that honors arcade expressions
-     *
+     * @param graphic selected graphic
+     * @param map __esri.Map
      * @returns Promise resolving with the popup title
      *
      * @protected
      */
-    async getPopupTitle(graphic) {
+    async getPopupTitle(graphic, map) {
         var _a, _b, _c;
         if (!this.arcade) {
             await this._initModules();
@@ -41,22 +42,18 @@ export class PopupUtils {
         if (popupTitle.includes("{expression/expr") && ((_b = layer === null || layer === void 0 ? void 0 : layer.popupTemplate) === null || _b === void 0 ? void 0 : _b.expressionInfos) != null) {
             for (let i = 0; i < ((_c = layer.popupTemplate) === null || _c === void 0 ? void 0 : _c.expressionInfos.length); i++) {
                 const info = layer.popupTemplate.expressionInfos[i];
-                const profile = {
-                    variables: [
-                        {
-                            name: "$feature",
-                            type: "feature"
-                        }
-                    ]
-                };
+                //create arcade profile for popup
+                const profile = this.arcade.createArcadeProfile('popup');
                 try {
                     const arcadeExecutor = await this.arcade.createArcadeExecutor(info.expression, profile);
-                    const arcadeTitle = arcadeExecutor.execute({ $feature: graphic });
+                    const arcadeTitle = await arcadeExecutor.executeAsync({ $feature: graphic, $layer: layer, $map: map });
                     if (arcadeTitle != null || arcadeTitle !== "") {
                         attributes[`{expression/${info.name}}`.toUpperCase()] = arcadeTitle;
                     }
                 }
-                catch (_d) {
+                catch (e) {
+                    //log error in console to understand if the arcade expressions are failing
+                    console.error(e);
                     continue;
                 }
             }

package/dist/collection/utils/popupUtils.ts

@@ -23,15 +23,17 @@ export class PopupUtils {
 	 */
 	arcade: typeof import("esri/arcade");
 
-  /**
-   * Get the popup title that honors arcade expressions
-   *
-   * @returns Promise resolving with the popup title
-   *
-   * @protected
-   */
+	/**
+	 * Get the popup title that honors arcade expressions
+	 * @param graphic selected graphic
+	 * @param map __esri.Map
+	 * @returns Promise resolving with the popup title
+	 *
+	 * @protected
+	 */
 	public async getPopupTitle(
-		graphic: __esri.Graphic
+		graphic: __esri.Graphic,
+		map: __esri.Map
 	): Promise<string> {
 		if (!this.arcade) {
 			await this._initModules()
@@ -48,21 +50,17 @@ export class PopupUtils {
 		if (popupTitle.includes("{expression/expr") && layer?.popupTemplate?.expressionInfos != null) {
 			for (let i = 0; i < layer.popupTemplate?.expressionInfos.length; i++) {
 				const info = layer.popupTemplate.expressionInfos[i];
-				const profile = {
-					variables: [
-						{
-							name: "$feature",
-							type: "feature"
-						}
-					]
-				} as __esri.Profile;
+				//create arcade profile for popup
+				const profile = this.arcade.createArcadeProfile('popup');
 				try {
 					const arcadeExecutor = await this.arcade.createArcadeExecutor(info.expression, profile);
-					const arcadeTitle = arcadeExecutor.execute({ $feature: graphic });
+					const arcadeTitle = await arcadeExecutor.executeAsync({ $feature: graphic, $layer: layer, $map: map });
 					if (arcadeTitle != null || arcadeTitle !== "") {
 						attributes[`{expression/${info.name}}`.toUpperCase()] = arcadeTitle;
 					}
-				} catch {
+				} catch (e) {
+					//log error in console to understand if the arcade expressions are failing
+					console.error(e);
 					continue;
 				}
 			}
@@ -73,13 +71,13 @@ export class PopupUtils {
 		});
 	}
 
-  /**
-   * Remove any tags from the title
-   *
-   * @returns title string without tags
-   *
-   * @protected
-   */
+	/**
+	 * Remove any tags from the title
+	 *
+	 * @returns title string without tags
+	 *
+	 * @protected
+	 */
 	protected _removeTags(str: string): string {
 		if (str == null || str === "") {
 			return "";
@@ -87,13 +85,13 @@ export class PopupUtils {
 		return str.toString().replace(/(<([^>]+)>)/gi, "");
 	}
 
-  /**
-   * Load esri javascript api modules
-   *
-   * @returns Promise resolving when function is done
-   *
-   * @protected
-   */
+	/**
+	 * Load esri javascript api modules
+	 *
+	 * @returns Promise resolving when function is done
+	 *
+	 * @protected
+	 */
 	protected async _initModules(): Promise<void> {
 		const [arcade] = await loadModules([
 			"esri/arcade"

package/dist/components/crowdsource-reporter.js

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { d as defineCustomElement$u } from './action.js';
 import { d as defineCustomElement$t } from './action-menu.js';
@@ -35,12 +35,13 @@ import { d as defineCustomElement$4 } from './feature-list2.js';
 import { d as defineCustomElement$3 } from './info-card2.js';
 import { d as defineCustomElement$2 } from './layer-list2.js';
 
-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}";
+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}";
 
 const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceReporter extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        this.togglePanel = createEvent(this, "togglePanel", 7);
         this.description = undefined;
         this.isMobile = undefined;
         this.enableAnonymousAccess = undefined;
@@ -77,9 +78,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * Called each time the mapView prop is changed.
      */
     async isMobileWatchHandler() {
-        if (this.isMobile) {
-            this._sidePanelCollapsed = false;
-        }
+        this._sidePanelCollapsed = false;
     }
     /**
      * Called each time the mapView prop is changed.
@@ -91,16 +90,6 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     }
     //--------------------------------------------------------------------------
     //
-    //  Methods (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
-    //  Events (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
     //  Functions (lifecycle)
     //
     //--------------------------------------------------------------------------
@@ -142,13 +131,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
                     break;
             }
         });
-        let sidePanelClass = "side-panel";
-        //in case of mobile handle for collapsed styles of the panel
-        if (this.isMobile && this._sidePanelCollapsed) {
-            sidePanelClass += " collapsed-side-panel";
-        }
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h("calcite-panel", { class: sidePanelClass + " width-full " + themeClass }, this.mapView
+        return (h("calcite-panel", { class: "width-full " + themeClass }, this.mapView
             ? h("calcite-flow", null, (renderLists === null || renderLists === void 0 ? void 0 : renderLists.length) > 0 && renderLists)
             : h("calcite-loader", { scale: "m" })));
     }
@@ -158,7 +142,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     getLayerListFlowItem() {
-        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) }))));
+        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) }))));
     }
     /**
      * 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
      */
     toggleSidePanel() {
         this._sidePanelCollapsed = !this._sidePanelCollapsed;
+        this.togglePanel.emit(this._sidePanelCollapsed);
     }
     /**
      * When feature is selected from list store that and show feature details
@@ -209,7 +197,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     getFeatureListFlowItem(layerId, layerName) {
-        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 }))));
+        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: 30, selectedLayerId: layerId }))));
     }
     /**
      * Returns the calcite-flow item for feature details

package/dist/components/feature-list2.js

@@ -43,6 +43,18 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
     }
     //--------------------------------------------------------------------------
     //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Watch for selectedLayerId change and update layer instance and features list for new layerId
+     */
+    async selectedLayerWatchHandler() {
+        this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
+        await this.initializeFeatureItems();
+    }
+    //--------------------------------------------------------------------------
+    //
     //  Functions (lifecycle)
     //
     //--------------------------------------------------------------------------
@@ -54,23 +66,22 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
         await this._getTranslations();
         this._isLoading = true;
         this._popupUtils = new PopupUtils();
-        this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
+        if (this.mapView && this.selectedLayerId) {
+            this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
+        }
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
      */
     async componentDidLoad() {
-        if (this._selectedLayer) {
-            this._featureItems = await this.queryPage(0);
-            this._featuresCount = await this._selectedLayer.queryFeatureCount();
-            this._isLoading = false;
-        }
+        await this.initializeFeatureItems();
     }
     /**
      * Renders the component.
      */
     render() {
-        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 &&
+        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 &&
             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 }))));
     }
     //--------------------------------------------------------------------------
@@ -78,6 +89,17 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
     //  Functions (protected)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Initialize the features list using the selected layer
+     */
+    async initializeFeatureItems() {
+        if (this._selectedLayer) {
+            this._isLoading = true;
+            this._featureItems = await this.queryPage(0);
+            this._featuresCount = await this._selectedLayer.queryFeatureCount();
+            this._isLoading = false;
+        }
+    }
     /**
      * On page change get the next updated feature list
      * @param event page change event
@@ -122,14 +144,19 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
      */
     async queryPage(page) {
         const featureLayer = this._selectedLayer;
+        const objectIdField = featureLayer.objectIdField;
         const query = {
             start: page,
             num: this.pageSize,
             outFields: ["*"],
-            orderByFields: [featureLayer.objectIdField + " DESC"],
             returnGeometry: true,
-            where: featureLayer.definitionExpression
+            where: featureLayer.definitionExpression,
+            outSpatialReference: this.mapView.spatialReference.toJSON()
         };
+        //sort only when objectId field is found
+        if (objectIdField) {
+            query.orderByFields = [objectIdField.toString() + " DESC"];
+        }
         const featureSet = await featureLayer.queryFeatures(query);
         return await this.createFeatureItem(featureSet);
     }
@@ -142,7 +169,7 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
     async createFeatureItem(featureSet) {
         const currentFeatures = featureSet === null || featureSet === void 0 ? void 0 : featureSet.features;
         const items = currentFeatures.map(async (feature) => {
-            const popupTitle = await this._popupUtils.getPopupTitle(feature);
+            const popupTitle = await this._popupUtils.getPopupTitle(feature, this.mapView.map);
             return this.getFeatureItem(feature, popupTitle);
         });
         return Promise.all(items);
@@ -171,6 +198,9 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
         this._translations = messages[0];
     }
     get el() { return this; }
+    static get watchers() { return {
+        "selectedLayerId": ["selectedLayerWatchHandler"]
+    }; }
     static get style() { return featureListCss; }
 }, [0, "feature-list", {
         "selectedLayerId": [1, "selected-layer-id"],
@@ -182,6 +212,8 @@ const FeatureList = /*@__PURE__*/ proxyCustomElement(class FeatureList extends H
         "_featuresCount": [32],
         "_isLoading": [32],
         "_translations": [32]
+    }, undefined, {
+        "selectedLayerId": ["selectedLayerWatchHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/info-card2.js

@@ -184,7 +184,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         if (this.graphics.length > 0) {
             this._layer = (_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer;
             this._editEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsUpdate;
-            this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0]);
+            this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0], this.mapView.map);
             this._features.open({
                 features: this.graphics
             });

package/dist/components/layer-list2.js

@@ -59,7 +59,8 @@ const LayerList = /*@__PURE__*/ proxyCustomElement(class LayerList extends HTMLE
      * Renders the component.
      */
     render() {
-        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 &&
+        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 &&
             h("calcite-list", null, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------

package/dist/components/layer-table2.js

@@ -1138,7 +1138,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      */
     _filterModal() {
         var _a, _b, _c;
-        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 }))));
+        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 }))));
     }
     /**
      * Reset the filter active prop
@@ -1239,6 +1239,8 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         var _a, _b;
         const layerExpressions = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions;
         this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer.id) : [];
+        this._filterList.layerExpressions = this._layerExpressions;
+        this._filterActive = false;
     }
     /**
      * Select all rows that are not currently selectd

package/dist/components/popupUtils.js

@@ -23,12 +23,13 @@ import { l as loadModules } from './loadModules.js';
 class PopupUtils {
     /**
      * Get the popup title that honors arcade expressions
-     *
+     * @param graphic selected graphic
+     * @param map __esri.Map
      * @returns Promise resolving with the popup title
      *
      * @protected
      */
-    async getPopupTitle(graphic) {
+    async getPopupTitle(graphic, map) {
         var _a, _b, _c;
         if (!this.arcade) {
             await this._initModules();
@@ -42,22 +43,18 @@ class PopupUtils {
         if (popupTitle.includes("{expression/expr") && ((_b = layer === null || layer === void 0 ? void 0 : layer.popupTemplate) === null || _b === void 0 ? void 0 : _b.expressionInfos) != null) {
             for (let i = 0; i < ((_c = layer.popupTemplate) === null || _c === void 0 ? void 0 : _c.expressionInfos.length); i++) {
                 const info = layer.popupTemplate.expressionInfos[i];
-                const profile = {
-                    variables: [
-                        {
-                            name: "$feature",
-                            type: "feature"
-                        }
-                    ]
-                };
+                //create arcade profile for popup
+                const profile = this.arcade.createArcadeProfile('popup');
                 try {
                     const arcadeExecutor = await this.arcade.createArcadeExecutor(info.expression, profile);
-                    const arcadeTitle = arcadeExecutor.execute({ $feature: graphic });
+                    const arcadeTitle = await arcadeExecutor.executeAsync({ $feature: graphic, $layer: layer, $map: map });
                     if (arcadeTitle != null || arcadeTitle !== "") {
                         attributes[`{expression/${info.name}}`.toUpperCase()] = arcadeTitle;
                     }
                 }
-                catch (_d) {
+                catch (e) {
+                    //log error in console to understand if the arcade expressions are failing
+                    console.error(e);
                     continue;
                 }
             }

package/dist/esm/calcite-alert_4.entry.js

@@ -13,7 +13,7 @@ import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as
 import { K as KindIcons } from './resources-6e00e0d1.js';
 import { g as getLocaleComponentStrings, l as loadModules } from './locale-731e75a8.js';
 import { d as getAllLayers } from './mapViewUtils-6daedef8.js';
-import { P as PopupUtils } from './popupUtils-a593bd78.js';
+import { P as PopupUtils } from './popupUtils-d75edf93.js';
 import './guid-36c6c6a5.js';
 import './resources-cdc36705.js';
 import './key-af303047.js';
@@ -809,7 +809,7 @@ const InfoCard = class {
         if (this.graphics.length > 0) {
             this._layer = (_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer;
             this._editEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsUpdate;
-            this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0]);
+            this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0], this.mapView.map);
             this._features.open({
                 features: this.graphics
             });

package/dist/esm/calcite-flow_4.entry.js

@@ -11,7 +11,7 @@ import { c as connectInteractive, u as updateHostInteraction, d as disconnectInt
 import { c as connectLocalized, d as disconnectLocalized } from './locale-6107ef11.js';
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-f16911e7.js';
 import { S as SLOTS$1 } from './resources-649a0f91.js';
-import { P as PopupUtils } from './popupUtils-a593bd78.js';
+import { P as PopupUtils } from './popupUtils-d75edf93.js';
 import { g as getLayerOrTable, b as getFeatureLayerView, h as highlightFeatures, c as getMapLayerHash, d as getAllLayers } from './mapViewUtils-6daedef8.js';
 import { g as getLocaleComponentStrings, f as formatNumber } from './locale-731e75a8.js';
 import './guid-36c6c6a5.js';
@@ -353,6 +353,18 @@ const FeatureList = class {
     }
     //--------------------------------------------------------------------------
     //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Watch for selectedLayerId change and update layer instance and features list for new layerId
+     */
+    async selectedLayerWatchHandler() {
+        this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
+        await this.initializeFeatureItems();
+    }
+    //--------------------------------------------------------------------------
+    //
     //  Functions (lifecycle)
     //
     //--------------------------------------------------------------------------
@@ -364,23 +376,22 @@ const FeatureList = class {
         await this._getTranslations();
         this._isLoading = true;
         this._popupUtils = new PopupUtils();
-        this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
+        if (this.mapView && this.selectedLayerId) {
+            this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
+        }
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
      */
     async componentDidLoad() {
-        if (this._selectedLayer) {
-            this._featureItems = await this.queryPage(0);
-            this._featuresCount = await this._selectedLayer.queryFeatureCount();
-            this._isLoading = false;
-        }
+        await this.initializeFeatureItems();
     }
     /**
      * Renders the component.
      */
     render() {
-        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 &&
+        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 &&
             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 }))));
     }
     //--------------------------------------------------------------------------
@@ -388,6 +399,17 @@ const FeatureList = class {
     //  Functions (protected)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Initialize the features list using the selected layer
+     */
+    async initializeFeatureItems() {
+        if (this._selectedLayer) {
+            this._isLoading = true;
+            this._featureItems = await this.queryPage(0);
+            this._featuresCount = await this._selectedLayer.queryFeatureCount();
+            this._isLoading = false;
+        }
+    }
     /**
      * On page change get the next updated feature list
      * @param event page change event
@@ -432,14 +454,19 @@ const FeatureList = class {
      */
     async queryPage(page) {
         const featureLayer = this._selectedLayer;
+        const objectIdField = featureLayer.objectIdField;
         const query = {
             start: page,
             num: this.pageSize,
             outFields: ["*"],
-            orderByFields: [featureLayer.objectIdField + " DESC"],
             returnGeometry: true,
-            where: featureLayer.definitionExpression
+            where: featureLayer.definitionExpression,
+            outSpatialReference: this.mapView.spatialReference.toJSON()
         };
+        //sort only when objectId field is found
+        if (objectIdField) {
+            query.orderByFields = [objectIdField.toString() + " DESC"];
+        }
         const featureSet = await featureLayer.queryFeatures(query);
         return await this.createFeatureItem(featureSet);
     }
@@ -452,7 +479,7 @@ const FeatureList = class {
     async createFeatureItem(featureSet) {
         const currentFeatures = featureSet === null || featureSet === void 0 ? void 0 : featureSet.features;
         const items = currentFeatures.map(async (feature) => {
-            const popupTitle = await this._popupUtils.getPopupTitle(feature);
+            const popupTitle = await this._popupUtils.getPopupTitle(feature, this.mapView.map);
             return this.getFeatureItem(feature, popupTitle);
         });
         return Promise.all(items);
@@ -481,6 +508,9 @@ const FeatureList = class {
         this._translations = messages[0];
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "selectedLayerId": ["selectedLayerWatchHandler"]
+    }; }
 };
 FeatureList.style = featureListCss;
 
@@ -523,7 +553,8 @@ const LayerList = class {
      * Renders the component.
      */
     render() {
-        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 &&
+        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 &&
             h("calcite-list", null, this.renderLayerList())));
     }
     //--------------------------------------------------------------------------

package/dist/esm/card-manager_3.entry.js

@@ -1190,7 +1190,7 @@ const LayerTable = class {
      */
     _filterModal() {
         var _a, _b, _c;
-        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 }))));
+        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 }))));
     }
     /**
      * Reset the filter active prop
@@ -1291,6 +1291,8 @@ const LayerTable = class {
         var _a, _b;
         const layerExpressions = (_b = (_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filterConfig) === null || _b === void 0 ? void 0 : _b.layerExpressions;
         this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer.id) : [];
+        this._filterList.layerExpressions = this._layerExpressions;
+        this._filterActive = false;
     }
     /**
      * Select all rows that are not currently selectd