@esri/solutions-components 0.7.18 → 0.7.20

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() {
@@ -74,7 +74,6 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
          * MapView.when is not fired when mapView is not currently visible
          */
         this._shouldSetMapView = false;
-        this.classicGrid = false;
         this.defaultCenter = "";
         this.defaultGlobalId = "";
         this.defaultLayer = "";
@@ -95,7 +94,6 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this.enableBasemap = true;
         this.basemapConfig = undefined;
         this.showNewestFirst = true;
-        this.hideMap = false;
         this.mapInfos = [];
         this.onlyShowUpdatableLayers = true;
         this.searchConfiguration = undefined;
@@ -237,7 +235,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * Renders the component.
      */
     render() {
-        return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: "width-full height-full" }, this._getBody(this._layoutMode, this._panelOpen, this.hideMap, this._hideTable)), this._getFooter())));
+        return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: "width-full height-full" }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render
@@ -283,19 +281,13 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         let icon = "";
         switch (layoutMode) {
             case ELayoutMode.HORIZONTAL:
-                icon = this.classicGrid ?
-                    (panelOpen ? "chevrons-down" : "chevrons-up") :
-                    (panelOpen ? "chevrons-up" : "chevrons-down");
+                icon = (panelOpen ? "chevrons-up" : "chevrons-down");
                 break;
             case ELayoutMode.VERTICAL:
-                icon = this.classicGrid ?
-                    (panelOpen ? "chevrons-right" : "chevrons-left") :
-                    (panelOpen ? "chevrons-left" : "chevrons-right");
+                icon = (panelOpen ? "chevrons-left" : "chevrons-right");
                 break;
             case ELayoutMode.GRID:
-                icon = this.classicGrid ?
-                    (panelOpen ? "chevrons-up" : "chevrons-down") :
-                    (panelOpen ? "chevrons-left" : "chevrons-right");
+                icon = (panelOpen ? "chevrons-left" : "chevrons-right");
                 break;
         }
         return icon;
@@ -313,11 +305,10 @@ 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 = `${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` :
-                    `height-full position-relative ${panelOpen ? "width-1-3" : "width-0"}`;
+                sizeClass = `height-full position-relative ${panelOpen ? "width-1-3" : "width-0"}`;
                 break;
             case ELayoutMode.VERTICAL:
                 sizeClass = `height-full position-relative ${panelOpen ? "width-1-2" : "width-0"}`;
@@ -341,9 +332,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
                 sizeClass = `${panelOpen ? "height-1-2" : "height-full"} width-full display-flex flex-column`;
                 break;
             case ELayoutMode.GRID:
-                sizeClass = this.classicGrid ?
-                    `${panelOpen ? "height-full" : "height-53"} position-relative width-full display-flex` :
-                    `${panelOpen ? "width-2-3" : "width-full"} height-full display-flex`;
+                sizeClass = `${panelOpen ? "width-2-3" : "width-full"} height-full display-flex`;
                 break;
             case ELayoutMode.VERTICAL:
                 sizeClass = `${panelOpen ? "width-1-2" : "width-full"} height-full display-flex`;
@@ -356,47 +345,41 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      *
      * @param layoutMode ELayoutMode the current layout mode
      * @param panelOpen boolean indicates if all panels are open
-     * @param hideMap when true no map is displayed
      *
      * @returns the parent node that contains the table and map
      * @protected
      */
-    _getBody(layoutMode, panelOpen, hideMap, hideTable) {
-        const contentClass = this.classicGrid && layoutMode === ELayoutMode.GRID && panelOpen ? "display-grid" :
-            layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
-        return this.classicGrid ? (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getTable(layoutMode, panelOpen, hideTable), this._getMapAndCard(layoutMode, panelOpen, hideMap)))) : (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideMap), this._getTable(layoutMode, panelOpen, hideTable))));
+    _getBody(layoutMode, panelOpen, hideTable) {
+        const contentClass = layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
+        return (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen), this._getTable(layoutMode, panelOpen, hideTable))));
     }
     /**
      * Get the map and card nodes based for the current layout options
      *
      * @param layoutMode ELayoutMode the current layout mode
      * @param panelOpen boolean indicates if all panels are open
-     * @param hideMap when true no map is displayed
      *
      * @returns the map node
      * @protected
      */
-    _getMapAndCard(layoutMode, panelOpen, hideMap) {
+    _getMapAndCard(layoutMode, panelOpen) {
         const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen);
-        return this.classicGrid ? (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getCardNode(), this._getMapNode(layoutMode, hideMap))) : (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, hideMap), this._getPopupExpandNode()));
+        return (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, panelOpen), this._getPopupExpandNode()));
     }
     /**
      * Get the map node based for the current layout options
      *
      * @param layoutMode ELayoutMode the current layout mode
-     * @param hideMap when true no map is displayed
+     * @param panelOpen boolean indicates if all panels are open
      *
      * @returns the map node
      * @protected
      */
-    _getMapNode(layoutMode, hideMap) {
+    _getMapNode(layoutMode, panelOpen) {
         var _a;
-        const mapDisplayClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "display-flex height-full width-1-2" :
-            layoutMode === ELayoutMode.HORIZONTAL && !hideMap ? "" : layoutMode === ELayoutMode.GRID && !hideMap ? "" : "visibility-hidden";
-        const mapContainerClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "width-full" :
-            this._layoutMode === ELayoutMode.HORIZONTAL && !hideMap ? "" :
-                this._layoutMode === ELayoutMode.HORIZONTAL && this._isMobile && this.hideMap ? "height-0" : "adjusted-height-50";
-        return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableMapToolsExpand: true, enableSearch: this.enableSearch, hidden: this._expandPopup, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
+        const mapDisplayClass = layoutMode === ELayoutMode.HORIZONTAL ? "" : layoutMode === ELayoutMode.GRID ? "" : "visibility-hidden";
+        const mapContainerClass = this._layoutMode === ELayoutMode.HORIZONTAL && (!this._isMobile || panelOpen) ? "" : "adjusted-height-50";
+        return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: true, hidden: this._expandPopup, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
     }
     /**
      * Get the expand node for the popup information
@@ -413,7 +396,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 ? "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
@@ -449,10 +433,8 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         const icon = this._getDividerIcon(layoutMode, panelOpen);
         const tooltip = panelOpen ? this._translations.close : this._translations.open;
         const id = "toggle-layout";
-        const toggleLayout = layoutMode === ELayoutMode.HORIZONTAL || this.classicGrid ? "horizontal" : "vertical";
-        const toggleSlot = this.classicGrid && layoutMode !== ELayoutMode.VERTICAL ? "footer" :
-            this.classicGrid && layoutMode === ELayoutMode.VERTICAL ? "panel-end" :
-                layoutMode === ELayoutMode.HORIZONTAL ? "header" : "panel-start";
+        const toggleLayout = layoutMode === ELayoutMode.HORIZONTAL ? "horizontal" : "vertical";
+        const toggleSlot = layoutMode === ELayoutMode.HORIZONTAL ? "header" : "panel-start";
         const hasMapAndLayer = this.defaultWebmap && this.defaultLayer;
         return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? this._defaultGlobalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !this.defaultGlobalId ? this._defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
     }
@@ -477,7 +459,6 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * @param show when true the map, popup, and table will be displayed
      */
     showHideMapPopupAndTable(show) {
-        this.hideMap = show;
         this._expandPopup = false;
         this._hideTable = show;
         this._hideFooter = show;
@@ -555,7 +536,6 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     }; }
     static get style() { return crowdsourceManagerCss; }
 }, [0, "crowdsource-manager", {
-        "classicGrid": [4, "classic-grid"],
         "defaultCenter": [1, "default-center"],
         "defaultGlobalId": [1, "default-global-id"],
         "defaultLayer": [1, "default-layer"],
@@ -576,7 +556,6 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         "enableBasemap": [4, "enable-basemap"],
         "basemapConfig": [16],
         "showNewestFirst": [4, "show-newest-first"],
-        "hideMap": [4, "hide-map"],
         "mapInfos": [16],
         "onlyShowUpdatableLayers": [4, "only-show-updatable-layers"],
         "searchConfiguration": [16],

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
             });
@@ -65,6 +155,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
             this._features.clear();
             this._features.close();
         }
+        this._count = this._getCount();
     }
     /**
      * Watch for changes to the isMobile prop then init the Features widget
@@ -101,6 +192,14 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
     async closeEdit() {
         this._editRecordOpen = false;
     }
+    /**
+     * Reset key properties when the layer selection changes
+     */
+    async layerSelectionChange() {
+        this._showListView = false;
+        this._features.viewModel.featureMenuOpen = false;
+        this._features.close();
+    }
     /**
      * Refresh the info-card graphics
      */
@@ -120,6 +219,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
     async componentWillLoad() {
         await this._initModules();
         await this._getTranslations();
+        this._popupUtils = new PopupUtils();
     }
     /**
      * Renders the component.
@@ -133,7 +233,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         const nextBackDisabled = ((_b = (_a = this._features) === null || _a === void 0 ? void 0 : _a.features) === null || _b === void 0 ? void 0 : _b.length) < 2;
         const nextBackClass = this.isMobile ? "display-none" : "";
         const shellClass = this.isMobile && !this._editRecordOpen ? "padding-top-46" : "";
-        return (h(Host, null, this.isMobile && !this._editRecordOpen ? (h("calcite-panel", null, h("calcite-action", { class: "end-border", icon: "chevron-left", iconFlipRtl: true, onClick: () => this._closePopup(), scale: "s", slot: "header-actions-start", text: "" }), h("span", { class: "font-bold", slot: "header-content" }, this._mobileTitle))) : undefined, h("calcite-shell", { class: shellClass }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile ? (h("calcite-button", { appearance: "outline", class: "padding-inline-start-1", id: "solutions-cancel", onClick: () => this._closePopup(), width: "full" }, this._translations.cancel)) : undefined, h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-cancel" }, h("span", null, this._translations.cancel))) : undefined), h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, h("calcite-action", { icon: "list", onClick: () => this._toggleListView(), scale: "s", text: this._getCount(), textEnabled: true })), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
+        return (h(Host, null, this.isMobile && !this._editRecordOpen ? (h("calcite-panel", null, h("calcite-action", { class: "end-border", icon: "chevron-left", iconFlipRtl: true, onClick: () => this._closePopup(), scale: "s", slot: "header-actions-start", text: "" }), h("span", { class: "font-bold", slot: "header-content" }, this._mobileTitle))) : undefined, h("calcite-shell", { class: shellClass }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile ? (h("calcite-button", { appearance: "outline", class: "padding-inline-start-1", id: "solutions-cancel", onClick: () => this._closePopup(), width: "full" }, this._translations.cancel)) : undefined, h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-cancel" }, h("span", null, this._translations.cancel))) : undefined), h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, h("calcite-action", { icon: "list", onClick: () => this._toggleListView(), scale: "s", text: this._count, textEnabled: true })), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -180,9 +280,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) {
@@ -291,7 +388,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         "_showListView": [32],
         "_translations": [32],
         "getSelectedFeature": [64]
-    }, [[8, "closeEdit", "closeEdit"], [8, "refreshGraphics", "refreshGraphics"]], {
+    }, [[8, "closeEdit", "closeEdit"], [8, "layerSelectionChange", "layerSelectionChange"], [8, "refreshGraphics", "refreshGraphics"]], {
         "graphics": ["graphicsWatchHandler"],
         "isMobile": ["isMobileWatchHandler"],
         "mapView": ["mapViewWatchHandler"]