@esri/solutions-components 0.7.18 → 0.7.19

package/dist/collection/utils/downloadUtils.js

@@ -40,12 +40,12 @@ import { queryRelated } from "@esri/arcgis-rest-feature-layer";
  * @param includeHeaderNames Add the label format at the front of the list of generated labels
  * @returns selectionSetNames that will be used for export filenames
  */
-export async function consolidateLabels(webmap, exportInfos, formatUsingLayerPopup = true, includeHeaderNames = false, isCSVExport = false) {
+export async function consolidateLabels(webmap, exportInfos, formatUsingLayerPopup = true, includeHeaderNames = false, isCSVExport = false, fields = []) {
     const labelRequests = [];
     Object.keys(exportInfos).forEach(k => {
         var _a;
         const labelInfo = exportInfos[k];
-        labelRequests.push(_prepareLabels(webmap, ((_a = labelInfo.layerView) === null || _a === void 0 ? void 0 : _a.layer) || labelInfo.layer, labelInfo.ids, formatUsingLayerPopup, includeHeaderNames));
+        labelRequests.push(_prepareLabels(webmap, ((_a = labelInfo.layerView) === null || _a === void 0 ? void 0 : _a.layer) || labelInfo.layer, labelInfo.ids, formatUsingLayerPopup, includeHeaderNames, fields));
         if (isCSVExport) {
             // add the layer id as a temp value separator that we can use to split values for CSV export
             labelRequests.push(Promise.resolve([[k]]));
@@ -65,8 +65,8 @@ export async function consolidateLabels(webmap, exportInfos, formatUsingLayerPop
  * @param addColumnTitle Indicates if column headings should be included in output
  * @returns Promise resolving when function is done
  */
-export async function downloadCSV(webmap, exportInfos, formatUsingLayerPopup, removeDuplicates = false, addColumnTitle = false) {
-    let labels = await consolidateLabels(webmap, exportInfos, formatUsingLayerPopup, addColumnTitle, true);
+export async function downloadCSV(webmap, exportInfos, formatUsingLayerPopup, removeDuplicates = false, addColumnTitle = false, fields = []) {
+    let labels = await consolidateLabels(webmap, exportInfos, formatUsingLayerPopup, addColumnTitle, true, fields);
     labels = removeDuplicates ? removeDuplicateLabels(labels) : labels;
     const layerIds = Object.keys(exportInfos);
     let layerLabels = [];
@@ -605,7 +605,7 @@ export function _prepareAttributeValue(attributeValue, attributeType, attributeD
  * @param includeHeaderNames Add the label format at the front of the list of generated labels
  * @returns Promise resolving when function is done
  */
-export async function _prepareLabels(webmap, layer, ids, formatUsingLayerPopup = true, includeHeaderNames = false) {
+export async function _prepareLabels(webmap, layer, ids, formatUsingLayerPopup = true, includeHeaderNames = false, fields = []) {
     // Get the label formatting, if any
     const labelFormatProps = await _getLabelFormat(webmap, layer, formatUsingLayerPopup);
     // Because the label may actually come from a related layer, we'll use the layer that comes back from _getLabelFormat.
@@ -664,7 +664,8 @@ export async function _prepareLabels(webmap, layer, ids, formatUsingLayerPopup =
     }
     else {
         // Get the features to export
-        featureSet = await queryFeaturesByID(ids, featureLayer, [], false);
+        const outFields = fields.length > 0 ? fields : undefined;
+        featureSet = await queryFeaturesByID(ids, featureLayer, [], false, undefined, outFields);
     }
     // Get field data types. Do we have any domain-based fields?
     const attributeOrigNames = {};
@@ -672,17 +673,21 @@ export async function _prepareLabels(webmap, layer, ids, formatUsingLayerPopup =
     const attributeDomains = {};
     if (featureLayer.fields) {
         featureLayer.fields.forEach(field => {
-            const lowercaseFieldname = field.name.toLowerCase();
-            attributeOrigNames[lowercaseFieldname] = field.name;
-            attributeDomains[lowercaseFieldname] = field.domain;
-            attributeTypes[lowercaseFieldname] = field.type;
+            if (fields.indexOf(field.name.toLowerCase()) > -1) {
+                const lowercaseFieldname = field.name.toLowerCase();
+                attributeOrigNames[lowercaseFieldname] = field.name;
+                attributeDomains[lowercaseFieldname] = field.domain;
+                attributeTypes[lowercaseFieldname] = field.type;
+            }
         });
     }
     else {
         // Feature layer is missing fields, so get info from first feature
         Object.keys(featureSet[0]).forEach(fieldName => {
-            const lowercaseFieldname = fieldName.toLowerCase();
-            attributeOrigNames[lowercaseFieldname] = fieldName;
+            if (fields.indexOf(fieldName.toLowerCase()) > -1) {
+                const lowercaseFieldname = fieldName.toLowerCase();
+                attributeOrigNames[lowercaseFieldname] = fieldName;
+            }
         });
     }
     // Apply the label format

package/dist/collection/utils/downloadUtils.ts

@@ -125,14 +125,15 @@ export async function consolidateLabels(
   exportInfos: IExportInfos,
   formatUsingLayerPopup = true,
   includeHeaderNames = false,
-  isCSVExport = false
+  isCSVExport = false,
+  fields = []
 ): Promise<string[][]> {
   const labelRequests = [];
 
   Object.keys(exportInfos).forEach(k => {
     const labelInfo: IExportInfo = exportInfos[k];
     labelRequests.push(
-      _prepareLabels(webmap, labelInfo.layerView?.layer || labelInfo.layer, labelInfo.ids, formatUsingLayerPopup, includeHeaderNames)
+      _prepareLabels(webmap, labelInfo.layerView?.layer || labelInfo.layer, labelInfo.ids, formatUsingLayerPopup, includeHeaderNames, fields)
     );
     if (isCSVExport) {
       // add the layer id as a temp value separator that we can use to split values for CSV export
@@ -160,9 +161,10 @@ export async function downloadCSV(
   exportInfos: IExportInfos,
   formatUsingLayerPopup: boolean,
   removeDuplicates = false,
-  addColumnTitle = false
+  addColumnTitle = false,
+  fields = []
 ): Promise<void> {
-  let labels = await consolidateLabels(webmap, exportInfos, formatUsingLayerPopup, addColumnTitle, true);
+  let labels = await consolidateLabels(webmap, exportInfos, formatUsingLayerPopup, addColumnTitle, true, fields);
   labels = removeDuplicates ? removeDuplicateLabels(labels) : labels;
 
   const layerIds = Object.keys(exportInfos);
@@ -838,7 +840,8 @@ export async function _prepareLabels(
   layer: __esri.FeatureLayer,
   ids: number[],
   formatUsingLayerPopup = true,
-  includeHeaderNames = false
+  includeHeaderNames = false,
+  fields = []
 ): Promise<string[][]> {
   // Get the label formatting, if any
   const labelFormatProps: ILabelFormatProps = await _getLabelFormat(webmap, layer, formatUsingLayerPopup);
@@ -909,7 +912,8 @@ export async function _prepareLabels(
 
   } else {
     // Get the features to export
-    featureSet = await queryFeaturesByID(ids, featureLayer, [], false);
+    const outFields = fields.length > 0 ? fields : undefined;
+    featureSet = await queryFeaturesByID(ids, featureLayer, [], false, undefined, outFields);
   }
 
   // Get field data types. Do we have any domain-based fields?
@@ -920,18 +924,22 @@ export async function _prepareLabels(
   if (featureLayer.fields) {
     featureLayer.fields.forEach(
       field => {
-        const lowercaseFieldname = field.name.toLowerCase();
-        attributeOrigNames[lowercaseFieldname] = field.name;
-        attributeDomains[lowercaseFieldname] = field.domain;
-        attributeTypes[lowercaseFieldname] = field.type;
+        if (fields.indexOf(field.name.toLowerCase()) > -1) {
+          const lowercaseFieldname = field.name.toLowerCase();
+          attributeOrigNames[lowercaseFieldname] = field.name;
+          attributeDomains[lowercaseFieldname] = field.domain;
+          attributeTypes[lowercaseFieldname] = field.type;
+        }
       }
     );
   } else {
     // Feature layer is missing fields, so get info from first feature
     Object.keys(featureSet[0]).forEach(
       fieldName => {
-        const lowercaseFieldname = fieldName.toLowerCase();
-        attributeOrigNames[lowercaseFieldname] = fieldName;
+        if (fields.indexOf(fieldName.toLowerCase()) > -1) {
+          const lowercaseFieldname = fieldName.toLowerCase();
+          attributeOrigNames[lowercaseFieldname] = fieldName;
+        }
       }
     )
   }

package/dist/collection/utils/interfaces.ts

@@ -539,3 +539,8 @@ export interface ILayerAndTableIds {
   layerIds: string[];
   tableIds: string[];
 }
+
+export interface IPopupUtils {
+  arcade: typeof import("esri/arcade");
+  getPopupTitle(graphic: __esri.Graphic): Promise<string>;
+}

package/dist/collection/utils/popupUtils.js

@@ -0,0 +1,94 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/** @license
+ * Copyright 2022 Esri
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*    http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+import { loadModules } from "./loadModules";
+export class PopupUtils {
+    /**
+     * Get the popup title that honors arcade expressions
+     *
+     * @returns Promise resolving with the popup title
+     *
+     * @protected
+     */
+    async getPopupTitle(graphic) {
+        var _a, _b, _c;
+        if (!this.arcade) {
+            await this._initModules();
+        }
+        let attributes = {};
+        for (const [key, value] of Object.entries(graphic.attributes)) {
+            attributes = Object.assign(Object.assign({}, attributes), { [`{${key.toUpperCase()}}`]: value });
+        }
+        const layer = graphic.layer;
+        const popupTitle = this._removeTags((_a = layer === null || layer === void 0 ? void 0 : layer.popupTemplate) === null || _a === void 0 ? void 0 : _a.title);
+        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"
+                        }
+                    ]
+                };
+                try {
+                    const arcadeExecutor = await this.arcade.createArcadeExecutor(info.expression, profile);
+                    const arcadeTitle = arcadeExecutor.execute({ $feature: graphic });
+                    if (arcadeTitle != null || arcadeTitle !== "") {
+                        attributes[`{expression/${info.name}}`.toUpperCase()] = arcadeTitle;
+                    }
+                }
+                catch (_d) {
+                    continue;
+                }
+            }
+        }
+        return popupTitle === null || popupTitle === void 0 ? void 0 : popupTitle.replace(/{.*?}/g, (placeholder) => {
+            return attributes[placeholder.toUpperCase()] != null ? attributes[placeholder.toUpperCase()] : "";
+        });
+    }
+    /**
+     * Remove any tags from the title
+     *
+     * @returns title string without tags
+     *
+     * @protected
+     */
+    _removeTags(str) {
+        if (str == null || str === "") {
+            return "";
+        }
+        return str.toString().replace(/(<([^>]+)>)/gi, "");
+    }
+    /**
+     * Load esri javascript api modules
+     *
+     * @returns Promise resolving when function is done
+     *
+     * @protected
+     */
+    async _initModules() {
+        const [arcade] = await loadModules([
+            "esri/arcade"
+        ]);
+        this.arcade = arcade;
+    }
+}

package/dist/collection/utils/popupUtils.ts

@@ -0,0 +1,104 @@
+/** @license
+ * Copyright 2022 Esri
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*    http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+import { loadModules } from "./loadModules";
+
+export class PopupUtils {
+
+	/**
+	 * esri/arcade: https://developers.arcgis.com/javascript/latest/api-reference/esri-arcade.html
+	 */
+	arcade: typeof import("esri/arcade");
+
+  /**
+   * Get the popup title that honors arcade expressions
+   *
+   * @returns Promise resolving with the popup title
+   *
+   * @protected
+   */
+	public async getPopupTitle(
+		graphic: __esri.Graphic
+	): Promise<string> {
+		if (!this.arcade) {
+			await this._initModules()
+		}
+		let attributes = {};
+		for (const [key, value] of Object.entries(graphic.attributes)) {
+			attributes = {
+				...attributes,
+				[`{${key.toUpperCase()}}`]: value
+			};
+		}
+		const layer = graphic.layer as __esri.FeatureLayer;
+		const popupTitle = this._removeTags(layer?.popupTemplate?.title as string);
+		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;
+				try {
+					const arcadeExecutor = await this.arcade.createArcadeExecutor(info.expression, profile);
+					const arcadeTitle = arcadeExecutor.execute({ $feature: graphic });
+					if (arcadeTitle != null || arcadeTitle !== "") {
+						attributes[`{expression/${info.name}}`.toUpperCase()] = arcadeTitle;
+					}
+				} catch {
+					continue;
+				}
+			}
+		}
+
+		return popupTitle?.replace(/{.*?}/g, (placeholder: string) => {
+			return attributes[placeholder.toUpperCase()] != null ? (attributes[placeholder.toUpperCase()] as string) : "";
+		});
+	}
+
+  /**
+   * Remove any tags from the title
+   *
+   * @returns title string without tags
+   *
+   * @protected
+   */
+	protected _removeTags(str: string): string {
+		if (str == null || str === "") {
+			return "";
+		}
+		return str.toString().replace(/(<([^>]+)>)/gi, "");
+	}
+
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   *
+   * @protected
+   */
+	protected async _initModules(): Promise<void> {
+		const [arcade] = await loadModules([
+			"esri/arcade"
+		]);
+		this.arcade = arcade;
+	}
+
+}

package/dist/collection/utils/queryUtils.js

@@ -102,7 +102,7 @@ export async function queryObjectIds(geometries, layer) {
  *
  * @returns Promise with the featureSet from the layer that match the provided ids
  */
-export async function queryFeaturesByID(ids, layer, graphics, returnGeometry, outSpatialReference) {
+export async function queryFeaturesByID(ids, layer, graphics, returnGeometry, outSpatialReference, fields) {
     var _a;
     const num = (_a = layer.capabilities) === null || _a === void 0 ? void 0 : _a.query.maxRecordCount;
     const start = 0;
@@ -116,6 +116,9 @@ export async function queryFeaturesByID(ids, layer, graphics, returnGeometry, ou
     if (outSpatialReference) {
         q.outSpatialReference = outSpatialReference;
     }
+    if (fields) {
+        q.outFields = fields;
+    }
     const result = await layer.queryFeatures(q);
     graphics = graphics.concat(result.features);
     const remainingIds = ids.slice(num, ids.length);

package/dist/collection/utils/queryUtils.ts

@@ -126,7 +126,8 @@ export async function queryFeaturesByID(
   layer: __esri.FeatureLayer,
   graphics: __esri.Graphic[],
   returnGeometry: boolean,
-  outSpatialReference?: __esri.SpatialReference
+  outSpatialReference?: __esri.SpatialReference,
+  fields?: string[]
 ): Promise<__esri.Graphic[]> {
   const num = layer.capabilities?.query.maxRecordCount;
   const start = 0;
@@ -141,6 +142,9 @@ export async function queryFeaturesByID(
   if (outSpatialReference) {
     q.outSpatialReference = outSpatialReference;
   }
+  if (fields) {
+    q.outFields = fields;
+  }
 
   const result = await layer.queryFeatures(q);
 

package/dist/components/crowdsource-manager.js

@@ -63,7 +63,7 @@ import { d as defineCustomElement$4 } from './map-picker2.js';
 import { d as defineCustomElement$3 } from './map-search2.js';
 import { d as defineCustomElement$2 } from './map-tools2.js';
 
-const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-50{height:calc(100% - 50px)}.display-none{display:none}.height-53{height:53px}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}.position-absolute-50{position:absolute;top:50px;bottom:0px;left:0px;right:0px}.position-absolute-0{position:absolute;top:0px;bottom:0px;left:0px;right:0px}.visibility-hidden{visibility:hidden;height:0px}";
+const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-50{height:calc(100% - 50px)}.display-none{display:none}.height-53{height:53px}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}.position-absolute-50{position:absolute;top:50px;bottom:0px;left:0px;right:0px}.position-absolute-0{position:absolute;top:0px;bottom:0px;left:0px;right:0px}.visibility-hidden{visibility:hidden;height:0px}.position-fixed{position:fixed}";
 
 const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceManager extends HTMLElement {
     constructor() {
@@ -313,7 +313,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         let sizeClass = "";
         switch (layoutMode) {
             case ELayoutMode.HORIZONTAL:
-                sizeClass = `${this._isMobile && this._hideTable ? "height-full" : panelOpen ? "height-1-2" : "height-0"} width-full position-relative`;
+                sizeClass = `${this._isMobile && this.hideMap ? "height-0 " : panelOpen ? "height-1-2 display-grid" : "height-0"} width-full position-relative`;
                 break;
             case ELayoutMode.GRID:
                 sizeClass = this.classicGrid ? `${panelOpen ? "position-relative" : "position-absolute-53"} height-full width-full display-flex` :
@@ -413,7 +413,8 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         const popupNodeClass = !this._expandPopup ? "height-full" : ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) === 1 || this._isMobile ? "position-absolute-0" : "position-absolute-50";
         const headerClass = this._isMobile ? "display-none height-0" : "";
         const headerTheme = !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h("div", { class: `${headerTheme} ${popupNodeClass}` }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
+        const containerClass = this._isMobile && this._hideTable && this.hideMap ? "position-fixed width-full height-full" : this._isMobile ? "display-none height-0" : "";
+        return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}` }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
     }
     /**
      * Toggle the popup information

package/dist/components/downloadUtils.js

@@ -2360,12 +2360,12 @@ const lineSeparatorChar = "|";
  * @param includeHeaderNames Add the label format at the front of the list of generated labels
  * @returns selectionSetNames that will be used for export filenames
  */
-async function consolidateLabels(webmap, exportInfos, formatUsingLayerPopup = true, includeHeaderNames = false, isCSVExport = false) {
+async function consolidateLabels(webmap, exportInfos, formatUsingLayerPopup = true, includeHeaderNames = false, isCSVExport = false, fields = []) {
     const labelRequests = [];
     Object.keys(exportInfos).forEach(k => {
         var _a;
         const labelInfo = exportInfos[k];
-        labelRequests.push(_prepareLabels(webmap, ((_a = labelInfo.layerView) === null || _a === void 0 ? void 0 : _a.layer) || labelInfo.layer, labelInfo.ids, formatUsingLayerPopup, includeHeaderNames));
+        labelRequests.push(_prepareLabels(webmap, ((_a = labelInfo.layerView) === null || _a === void 0 ? void 0 : _a.layer) || labelInfo.layer, labelInfo.ids, formatUsingLayerPopup, includeHeaderNames, fields));
         if (isCSVExport) {
             // add the layer id as a temp value separator that we can use to split values for CSV export
             labelRequests.push(Promise.resolve([[k]]));
@@ -2385,8 +2385,8 @@ async function consolidateLabels(webmap, exportInfos, formatUsingLayerPopup = tr
  * @param addColumnTitle Indicates if column headings should be included in output
  * @returns Promise resolving when function is done
  */
-async function downloadCSV(webmap, exportInfos, formatUsingLayerPopup, removeDuplicates = false, addColumnTitle = false) {
-    let labels = await consolidateLabels(webmap, exportInfos, formatUsingLayerPopup, addColumnTitle, true);
+async function downloadCSV(webmap, exportInfos, formatUsingLayerPopup, removeDuplicates = false, addColumnTitle = false, fields = []) {
+    let labels = await consolidateLabels(webmap, exportInfos, formatUsingLayerPopup, addColumnTitle, true, fields);
     labels = removeDuplicates ? removeDuplicateLabels(labels) : labels;
     const layerIds = Object.keys(exportInfos);
     let layerLabels = [];
@@ -2922,7 +2922,7 @@ function _prepareAttributeValue(attributeValue, attributeType, attributeDomain,
  * @param includeHeaderNames Add the label format at the front of the list of generated labels
  * @returns Promise resolving when function is done
  */
-async function _prepareLabels(webmap, layer, ids, formatUsingLayerPopup = true, includeHeaderNames = false) {
+async function _prepareLabels(webmap, layer, ids, formatUsingLayerPopup = true, includeHeaderNames = false, fields = []) {
     // Get the label formatting, if any
     const labelFormatProps = await _getLabelFormat(webmap, layer, formatUsingLayerPopup);
     // Because the label may actually come from a related layer, we'll use the layer that comes back from _getLabelFormat.
@@ -2981,7 +2981,8 @@ async function _prepareLabels(webmap, layer, ids, formatUsingLayerPopup = true,
     }
     else {
         // Get the features to export
-        featureSet = await queryFeaturesByID(ids, featureLayer, [], false);
+        const outFields = fields.length > 0 ? fields : undefined;
+        featureSet = await queryFeaturesByID(ids, featureLayer, [], false, undefined, outFields);
     }
     // Get field data types. Do we have any domain-based fields?
     const attributeOrigNames = {};
@@ -2989,17 +2990,21 @@ async function _prepareLabels(webmap, layer, ids, formatUsingLayerPopup = true,
     const attributeDomains = {};
     if (featureLayer.fields) {
         featureLayer.fields.forEach(field => {
-            const lowercaseFieldname = field.name.toLowerCase();
-            attributeOrigNames[lowercaseFieldname] = field.name;
-            attributeDomains[lowercaseFieldname] = field.domain;
-            attributeTypes[lowercaseFieldname] = field.type;
+            if (fields.indexOf(field.name.toLowerCase()) > -1) {
+                const lowercaseFieldname = field.name.toLowerCase();
+                attributeOrigNames[lowercaseFieldname] = field.name;
+                attributeDomains[lowercaseFieldname] = field.domain;
+                attributeTypes[lowercaseFieldname] = field.type;
+            }
         });
     }
     else {
         // Feature layer is missing fields, so get info from first feature
         Object.keys(featureSet[0]).forEach(fieldName => {
-            const lowercaseFieldname = fieldName.toLowerCase();
-            attributeOrigNames[lowercaseFieldname] = fieldName;
+            if (fields.indexOf(fieldName.toLowerCase()) > -1) {
+                const lowercaseFieldname = fieldName.toLowerCase();
+                attributeOrigNames[lowercaseFieldname] = fieldName;
+            }
         });
     }
     // Apply the label format

package/dist/components/edit-card2.js

@@ -146,8 +146,7 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
                 view: this.mapView,
                 layerInfos,
                 visibleElements: {
-                    snappingControls: false,
-                    sketchTooltipControls: false
+                    snappingControls: false
                 },
                 container
             });

package/dist/components/info-card2.js

@@ -21,6 +21,95 @@ import { d as defineCustomElement$3 } from './shell.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 import { d as defineCustomElement$1 } from './edit-card2.js';
 
+/** @license
+ * Copyright 2022 Esri
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*    http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+class PopupUtils {
+    /**
+     * Get the popup title that honors arcade expressions
+     *
+     * @returns Promise resolving with the popup title
+     *
+     * @protected
+     */
+    async getPopupTitle(graphic) {
+        var _a, _b, _c;
+        if (!this.arcade) {
+            await this._initModules();
+        }
+        let attributes = {};
+        for (const [key, value] of Object.entries(graphic.attributes)) {
+            attributes = Object.assign(Object.assign({}, attributes), { [`{${key.toUpperCase()}}`]: value });
+        }
+        const layer = graphic.layer;
+        const popupTitle = this._removeTags((_a = layer === null || layer === void 0 ? void 0 : layer.popupTemplate) === null || _a === void 0 ? void 0 : _a.title);
+        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"
+                        }
+                    ]
+                };
+                try {
+                    const arcadeExecutor = await this.arcade.createArcadeExecutor(info.expression, profile);
+                    const arcadeTitle = arcadeExecutor.execute({ $feature: graphic });
+                    if (arcadeTitle != null || arcadeTitle !== "") {
+                        attributes[`{expression/${info.name}}`.toUpperCase()] = arcadeTitle;
+                    }
+                }
+                catch (_d) {
+                    continue;
+                }
+            }
+        }
+        return popupTitle === null || popupTitle === void 0 ? void 0 : popupTitle.replace(/{.*?}/g, (placeholder) => {
+            return attributes[placeholder.toUpperCase()] != null ? attributes[placeholder.toUpperCase()] : "";
+        });
+    }
+    /**
+     * Remove any tags from the title
+     *
+     * @returns title string without tags
+     *
+     * @protected
+     */
+    _removeTags(str) {
+        if (str == null || str === "") {
+            return "";
+        }
+        return str.toString().replace(/(<([^>]+)>)/gi, "");
+    }
+    /**
+     * Load esri javascript api modules
+     *
+     * @returns Promise resolving when function is done
+     *
+     * @protected
+     */
+    async _initModules() {
+        const [arcade] = await loadModules([
+            "esri/arcade"
+        ]);
+        this.arcade = arcade;
+    }
+}
+
 const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.esri-features__footer{display:none !important}.button-container{justify-content:space-between;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.min-width-100{min-width:100px}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.padding-top-46{padding-top:46px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}";
 
 const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLElement {
@@ -57,6 +146,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         if (this.graphics.length > 0) {
             const featureLayer = (_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer;
             this._editEnabled = featureLayer.editingEnabled && featureLayer.capabilities.operations.supportsUpdate;
+            this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0]);
             this._features.open({
                 features: this.graphics
             });
@@ -120,6 +210,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
     async componentWillLoad() {
         await this._initModules();
         await this._getTranslations();
+        this._popupUtils = new PopupUtils();
     }
     /**
      * Renders the component.
@@ -180,9 +271,6 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
                         this._showListView = isOpen;
                     }
                 });
-                this.reactiveUtils.watch(() => this._features.viewModel.title, (title) => {
-                    this._mobileTitle = title;
-                });
                 if (this.zoomAndScrollToSelected) {
                     this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
                         if (i > -1) {