@esri/solutions-components 0.4.1 → 0.4.3

package/dist/collection/components/public-notification/public-notification.js

@@ -24,7 +24,7 @@ import { loadModules } from "../../utils/loadModules";
 import { goToSelection, getMapLayerView, highlightFeatures } from "../../utils/mapViewUtils";
 import { getSelectionSetQuery } from "../../utils/queryUtils";
 import state from "../../utils/publicNotificationStore";
-import { getLocaleComponentStrings } from "../../utils/locale";
+import { getComponentClosestLanguage, getLocaleComponentStrings } from "../../utils/locale";
 import * as utils from "../../utils/publicNotificationUtils";
 export class PublicNotification {
   constructor() {
@@ -47,6 +47,7 @@ export class PublicNotification {
     this._numSelected = 0;
     this._pageType = EPageType.LIST;
     this._saveEnabled = false;
+    this._selectionLoading = false;
     this._selectionSets = [];
     this._sketchType = ESketchType.INTERACTIVE;
     this._selectionWorkflowType = EWorkflowType.SEARCH;
@@ -82,7 +83,8 @@ export class PublicNotification {
     console.log(oldValue);
     if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
       console.log("Emit event from parent");
-      this.searchConfigurationChange.emit(newValue);
+      this._searchConfiguration = Object.assign({}, newValue);
+      this.searchConfigurationChange.emit(this._searchConfiguration);
     }
   }
   /**
@@ -117,6 +119,12 @@ export class PublicNotification {
     this._updateLabel(event, "distance");
     this._distance = event.detail.newValue;
   }
+  /**
+   * Handle changes when selection is loading
+   */
+  selectionLoadingChange(event) {
+    this._selectionLoading = event.detail;
+  }
   /**
    * Handle changes to the selection sets
    */
@@ -152,8 +160,7 @@ export class PublicNotification {
    * Renders the component.
    */
   render() {
-    const hasSelections = this._selectionSets.length > 0;
-    return (h(Host, null, h("calcite-shell", null, h("calcite-action-bar", { class: "border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: "header" }, this._getActionGroup("list-check", false, EPageType.LIST, this._translations.myLists), this.showRefineSelection ? this._getActionGroup("test-data", !hasSelections, EPageType.REFINE, this._translations.refineSelection) : undefined, this._getActionGroup("file-pdf", !hasSelections, EPageType.PDF, this._translations.downloadPDF), this._getActionGroup("file-csv", !hasSelections, EPageType.CSV, this._translations.downloadCSV)), this._getPage(this._pageType))));
+    return (h(Host, null, h("calcite-shell", null, h("calcite-action-bar", { class: "border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: "header" }, this._getActionGroup("list-check", EPageType.LIST, this._translations.myLists), this.showRefineSelection ? this._getActionGroup("test-data", EPageType.REFINE, this._translations.refineSelection) : undefined, this._getActionGroup("file-pdf", EPageType.PDF, this._translations.downloadPDF), this._getActionGroup("file-csv", EPageType.CSV, this._translations.downloadCSV)), this._getPage(this._pageType))));
   }
   //--------------------------------------------------------------------------
   //
@@ -183,9 +190,9 @@ export class PublicNotification {
    *
    * @protected
    */
-  _getActionGroup(icon, disabled, pageType, tip) {
+  _getActionGroup(icon, pageType, tip) {
     const groupClass = this.showRefineSelection ? "action-center w-1-4" : "action-center w-1-3";
-    return (h("calcite-action-group", { class: groupClass, layout: "horizontal" }, h("calcite-action", { active: this._pageType === pageType, alignment: "center", class: "width-full height-full", compact: false, disabled: disabled, icon: icon, id: icon, onClick: () => { this._setPageType(pageType); }, text: "" }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, tip))));
+    return (h("calcite-action-group", { class: groupClass, layout: "horizontal" }, h("calcite-action", { active: this._pageType === pageType, alignment: "center", class: "width-full height-full", compact: false, icon: icon, id: icon, onClick: () => { this._setPageType(pageType); }, text: "" }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, tip))));
   }
   /**
    * Navigate to the defined page type
@@ -299,6 +306,16 @@ export class PublicNotification {
       this._layerSelectionChangeEvt.detail[0] : "";
     await this._updateAddresseeLayer(id);
   }
+  /**
+   * Check if any selection sets exist.
+   *
+   * @returns true if selection sets exist
+   *
+   * @protected
+   */
+  _hasSelections() {
+    return this._selectionSets.length > 0;
+  }
   /**
    * Create the Select page that shows the selection workflows
    *
@@ -315,8 +332,13 @@ export class PublicNotification {
     const noticeText = this._selectionWorkflowType === EWorkflowType.SELECT ? selectTip :
       this._selectionWorkflowType === EWorkflowType.SKETCH ? sketchTip : searchTip;
     const nameLabelClass = this.customLabelEnabled ? "" : "display-none";
-    return (h("calcite-panel", null, this._getLabel(this._translations.stepTwoFull.replace("{{layer}}", (_a = this.addresseeLayer) === null || _a === void 0 ? void 0 : _a.layer.title)), this._getNotice(noticeText), h("div", { class: "padding-top-sides-1" }, h("map-select-tools", { bufferColor: this.bufferColor, bufferOutlineColor: this.bufferOutlineColor, class: "font-bold", defaultBufferDistance: this.defaultBufferDistance, defaultBufferUnit: this.defaultBufferUnit, enabledLayerIds: this.selectionLayerIds, isUpdate: !!this._activeSelection, mapView: this.mapView, onSelectionSetChange: (evt) => this._updateForSelection(evt), onWorkflowTypeChange: (evt) => this._updateForWorkflowType(evt), ref: (el) => { this._selectTools = el; }, searchConfiguration: this.searchConfiguration, selectLayerView: this.addresseeLayer, selectionSet: this._activeSelection, showBufferTools: this.showSearchSettings })), h("div", { class: "padding-sides-1 padding-bottom-1", style: { "align-items": "end", "display": "flex" } }, h("calcite-icon", { class: "info-blue padding-end-1-2", icon: "feature-layer", scale: "s" }), h("calcite-input-message", { active: true, class: "info-blue", scale: "m" }, this.noResultText && this._numSelected === 0 ? this.noResultText :
-      this._translations.selectedAddresses.replace("{{n}}", this._numSelected.toString()).replace("{{layer}}", ((_b = this.addresseeLayer) === null || _b === void 0 ? void 0 : _b.layer.title) || ""))), h("div", { class: "padding-sides-1 " + nameLabelClass }, h("calcite-label", { class: "font-bold" }, "List name", h("calcite-input", { onInput: () => {
+    // TODO find out if ... is appropriate for other languages
+    const locale = getComponentClosestLanguage(this.el);
+    const selectionLoading = locale && locale === "en" ?
+      `${this._translations.selectionLoading}...` : this._translations.selectionLoading;
+    return (h("calcite-panel", null, this._getLabel(this._translations.stepTwoFull.replace("{{layer}}", (_a = this.addresseeLayer) === null || _a === void 0 ? void 0 : _a.layer.title)), this._getNotice(noticeText), h("div", { class: "padding-top-sides-1" }, h("map-select-tools", { bufferColor: this.bufferColor, bufferOutlineColor: this.bufferOutlineColor, class: "font-bold", defaultBufferDistance: this.defaultBufferDistance, defaultBufferUnit: this.defaultBufferUnit, enabledLayerIds: this.selectionLayerIds, isUpdate: !!this._activeSelection, mapView: this.mapView, onSelectionSetChange: (evt) => this._updateForSelection(evt), onWorkflowTypeChange: (evt) => this._updateForWorkflowType(evt), ref: (el) => { this._selectTools = el; }, searchConfiguration: this._searchConfiguration, selectLayerView: this.addresseeLayer, selectionSet: this._activeSelection, showBufferTools: this.showSearchSettings })), h("div", { class: "padding-sides-1 padding-bottom-1", style: { "align-items": "end", "display": "flex" } }, this._selectionLoading ? (h("div", null, h("calcite-loader", { active: true, class: "info-blue", inline: true, label: selectionLoading, scale: "m", type: "indeterminate" }))) : (h("calcite-icon", { class: "info-blue padding-end-1-2", icon: "feature-layer", scale: "s" })), h("calcite-input-message", { active: true, class: "info-blue", scale: "m" }, this._selectionLoading ? selectionLoading :
+      this.noResultText && this._numSelected === 0 ? this.noResultText :
+        this._translations.selectedAddresses.replace("{{n}}", this._numSelected.toString()).replace("{{layer}}", ((_b = this.addresseeLayer) === null || _b === void 0 ? void 0 : _b.layer.title) || ""))), h("div", { class: "padding-sides-1 " + nameLabelClass }, h("calcite-label", { class: "font-bold" }, "List name", h("calcite-input", { onInput: () => {
         this.labelChange.emit(this._labelName.value);
       }, placeholder: "Insert label here...", ref: (el) => { this._labelName = el; }, value: this._customLabel || "" }))), this._getPageNavButtons(this._translations.done, this._numSelected === 0, () => { void this._saveSelection(); }, this._translations.cancel, false, () => { void this._home(); })));
   }
@@ -327,7 +349,9 @@ export class PublicNotification {
    * @protected
    */
   _getRefinePage() {
-    return (h("calcite-panel", null, this._getLabel(this._translations.refineSelection), this._getNotice(this._translations.refineTip, "padding-sides-1"), h("refine-selection", { addresseeLayer: this.addresseeLayer, enabledLayerIds: this.selectionLayerIds, mapView: this.mapView, selectionSets: this._selectionSets })));
+    const hasSelections = this._hasSelections();
+    return (h("calcite-panel", null, this._getLabel(this._translations.refineSelection), hasSelections ? (h("div", null, this._getNotice(this._translations.refineTip, "padding-sides-1"), h("refine-selection", { addresseeLayer: this.addresseeLayer, enabledLayerIds: this.selectionLayerIds, mapView: this.mapView, selectionSets: this._selectionSets }))) :
+      this._getNotice(this._translations.refineTipNoSelections, "padding-sides-1")));
   }
   /**
    * Create the PDF download page that shows the download options
@@ -358,7 +382,8 @@ export class PublicNotification {
    */
   _getDownloadPage(type) {
     const isPdf = type === EExportType.PDF;
-    return (h("calcite-panel", null, h("div", null, h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "font-bold" }, isPdf ? this._translations.downloadPDF : this._translations.downloadCSV), h("calcite-label", null, this._translations.notifications)), this._getSelectionLists(), h("div", { class: "margin-side-1 padding-top-1 border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { disabled: !this._downloadActive, ref: (el) => { this._removeDuplicates = el; } }), this._translations.removeDuplicate)), h("div", { class: isPdf ? "" : "display-none" }, this._getLabel(this._translations.selectPDFLabelOption, false), h("div", { class: "padding-sides-1" }, h("pdf-download", { disabled: !this._downloadActive, layerView: this.addresseeLayer, ref: (el) => { this._downloadTools = el; } }))), h("div", { class: "padding-1 display-flex" }, h("calcite-button", { disabled: !this._downloadActive, onClick: isPdf ? () => this._downloadPDF() : () => this._downloadCSV(), width: "full" }, isPdf ? this._translations.downloadPDF : this._translations.downloadCSV)))));
+    const hasSelections = this._hasSelections();
+    return (h("calcite-panel", null, h("div", null, h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "font-bold" }, isPdf ? this._translations.downloadPDF : this._translations.downloadCSV)), hasSelections ? (h("div", null, h("calcite-label", null, this._translations.notifications), this._getSelectionLists(), h("div", { class: "margin-side-1 padding-top-1 border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { disabled: !this._downloadActive, ref: (el) => { this._removeDuplicates = el; } }), this._translations.removeDuplicate)), h("div", { class: isPdf ? "" : "display-none" }, this._getLabel(this._translations.selectPDFLabelOption, false), h("div", { class: "padding-sides-1" }, h("pdf-download", { disabled: !this._downloadActive, layerView: this.addresseeLayer, ref: (el) => { this._downloadTools = el; } }))), h("div", { class: "padding-1 display-flex" }, h("calcite-button", { disabled: !this._downloadActive, onClick: isPdf ? () => this._downloadPDF() : () => this._downloadCSV(), width: "full" }, isPdf ? this._translations.downloadPDF : this._translations.downloadCSV)))) : (this._getNotice(this._translations.downloadNoLists, "padding-sides-1 padding-bottom-1")))));
   }
   /**
    * Create the stacked navigation buttons for a page
@@ -441,7 +466,8 @@ export class PublicNotification {
    */
   _downloadPDF() {
     const ids = utils.getSelectionIds(this._getDownloadSelectionSets());
-    void this._downloadTools.downloadPDF(ids, this._removeDuplicates.checked);
+    const selectionSetNames = this._selectionSets.map(set => set.label);
+    void this._downloadTools.downloadPDF(selectionSetNames, ids, this._removeDuplicates.checked);
   }
   /**
    * Download all selection sets as CSV
@@ -450,7 +476,8 @@ export class PublicNotification {
    */
   _downloadCSV() {
     const ids = utils.getSelectionIds(this._getDownloadSelectionSets());
-    void this._downloadTools.downloadCSV(ids, this._removeDuplicates.checked);
+    const selectionSetNames = this._selectionSets.map(set => set.label);
+    void this._downloadTools.downloadCSV(selectionSetNames, ids, this._removeDuplicates.checked);
   }
   /**
    * Get all enabled selection sets
@@ -976,6 +1003,7 @@ export class PublicNotification {
       "_numSelected": {},
       "_pageType": {},
       "_saveEnabled": {},
+      "_selectionLoading": {},
       "_selectionSets": {},
       "_sketchType": {},
       "_selectionWorkflowType": {},
@@ -1044,6 +1072,12 @@ export class PublicNotification {
         "target": "window",
         "capture": false,
         "passive": false
+      }, {
+        "name": "selectionLoadingChange",
+        "method": "selectionLoadingChange",
+        "target": "window",
+        "capture": false,
+        "passive": false
       }, {
         "name": "selectionSetsChanged",
         "method": "selectionSetsChanged",

package/dist/collection/components/refine-selection-tools/refine-selection-tools.js

@@ -300,11 +300,13 @@ export class RefineSelectionTools {
    * @protected
    */
   async _selectFeatures(geom) {
+    this.selectionLoadingChange.emit(true);
     const queryFeaturePromises = this.layerViews.map(layerView => {
       this._featuresCollection[layerView.layer.id] = [];
       return queryFeaturesByGeometry(0, layerView.layer, geom, this._featuresCollection);
     });
     return Promise.all(queryFeaturePromises).then(async (response) => {
+      this.selectionLoadingChange.emit(false);
       let graphics = [];
       response.forEach(r => {
         Object.keys(r).forEach(k => {
@@ -660,6 +662,21 @@ export class RefineSelectionTools {
   }
   static get events() {
     return [{
+        "method": "selectionLoadingChange",
+        "name": "selectionLoadingChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted on demand when selection starts or ends."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }, {
         "method": "refineSelectionGraphicsChange",
         "name": "refineSelectionGraphicsChange",
         "bubbles": true,

package/dist/collection/utils/downloadUtils.js

@@ -29,6 +29,7 @@ export { ILabel } from "./pdfUtils";
 /**
  * Downloads csv of mailing labels for the provided list of ids
  *
+ * @param selectionSetNames Names of the selection sets used to provide ids
  * @param layer Layer providing features and attributes for download
  * @param ids List of ids to download
  * @param formatUsingLayerPopup When true, the layer's popup is used to choose attributes for each column; when false,
@@ -37,7 +38,8 @@ export { ILabel } from "./pdfUtils";
  * @param addColumnTitle Indicates if column headings should be included in output
  * @returns Promise resolving when function is done
  */
-export async function downloadCSV(layer, ids, formatUsingLayerPopup, removeDuplicates = false, addColumnTitle = false) {
+export async function downloadCSV(selectionSetNames, layer, ids, formatUsingLayerPopup, removeDuplicates = false, addColumnTitle = false) {
+  console.log("downloadCSV using selectionSetNames " + JSON.stringify(selectionSetNames)); //???
   const labels = await _prepareLabels(layer, ids, removeDuplicates, formatUsingLayerPopup, addColumnTitle);
   exportCSV(labels);
   return Promise.resolve();
@@ -45,13 +47,15 @@ export async function downloadCSV(layer, ids, formatUsingLayerPopup, removeDupli
 /**
  * Downloads csv of mailing labels for the provided list of ids
  *
+ * @param selectionSetNames Names of the selection sets used to provide ids
  * @param layer Layer providing features and attributes for download
  * @param ids List of ids to download
  * @param removeDuplicates When true a single label is generated when multiple featues have a shared address value
  * @param labelPageDescription Provides PDF page layout info
  * @returns Promise resolving when function is done
  */
-export async function downloadPDF(layer, ids, removeDuplicates, labelPageDescription) {
+export async function downloadPDF(selectionSetNames, layer, ids, removeDuplicates, labelPageDescription) {
+  console.log("downloadPDF using selectionSetNames " + JSON.stringify(selectionSetNames)); //???
   const labels = await _prepareLabels(layer, ids, removeDuplicates);
   exportPDF(labels, labelPageDescription);
   return Promise.resolve();
@@ -62,13 +66,14 @@ export async function downloadPDF(layer, ids, removeDuplicates, labelPageDescrip
  * Converts a set of fieldInfos into template lines.
  *
  * @param fieldInfos Layer's fieldInfos structure
+ * @param bypassFieldVisiblity Indicates if the configured fieldInfo visibility property should be ignored
  * @return Label spec
  */
-function _convertPopupFieldsToLabelSpec(fieldInfos) {
+function _convertPopupFieldsToLabelSpec(fieldInfos, bypassFieldVisiblity = false) {
   const labelSpec = [];
   // Every visible attribute is used
   fieldInfos.forEach(fieldInfo => {
-    if (fieldInfo.visible) {
+    if (fieldInfo.visible || bypassFieldVisiblity) {
       labelSpec.push(`{${fieldInfo.fieldName}}`);
     }
   });
@@ -100,6 +105,49 @@ function _convertPopupTextToLabelSpec(popupInfo) {
   return labelSpec;
 }
 ;
+/**
+ * Extracts Arcade expressions from the lines of a label format and creates an Arcade executor for each
+ * referenced expression name.
+ *
+ * @param labelFormat Label to examine
+ * @param layer Layer from which to fetch features
+ * @return Promise resolving to a set of executors keyed using the expression name
+ */
+async function _createArcadeExecutors(labelFormat, layer) {
+  const arcadeExecutors = {};
+  // Are any Arcade expressions in the layer?
+  if (!Array.isArray(layer.popupTemplate.expressionInfos) || layer.popupTemplate.expressionInfos.length === 0) {
+    return Promise.resolve(arcadeExecutors);
+  }
+  // Are there any Arcade expressions in the label format?
+  const arcadeExpressionRegExp = /\{expression\/\w+\}/g;
+  const arcadeExpressionsMatches = labelFormat.join("|").match(arcadeExpressionRegExp);
+  if (!arcadeExpressionsMatches) {
+    return Promise.resolve(arcadeExecutors);
+  }
+  // Generate an Arcade executor for each match
+  const [arcade] = await loadModules(["esri/arcade"]);
+  const labelingProfile = arcade.createArcadeProfile("popup");
+  const createArcadeExecutorPromises = {};
+  arcadeExpressionsMatches.forEach((match) => {
+    const expressionName = match.substring(match.indexOf("/") + 1, match.length - 1);
+    (layer.popupTemplate.expressionInfos || []).forEach(expressionInfo => {
+      if (expressionInfo.name === expressionName) {
+        createArcadeExecutorPromises[expressionName] =
+          arcade.createArcadeExecutor(expressionInfo.expression, labelingProfile);
+      }
+    });
+  });
+  const promises = Object.values(createArcadeExecutorPromises);
+  return Promise.all(promises)
+    .then(executors => {
+    const expressionNames = Object.keys(createArcadeExecutorPromises);
+    for (let i = 0; i < expressionNames.length; ++i) {
+      arcadeExecutors[expressionNames[i]] = executors[i].valueOf();
+    }
+    return arcadeExecutors;
+  });
+}
 /**
  * Creates labels from items.
  *
@@ -113,33 +161,57 @@ function _convertPopupTextToLabelSpec(popupInfo) {
  */
 async function _prepareLabels(layer, ids, removeDuplicates = true, formatUsingLayerPopup = true, includeHeaderNames = false) {
   var _a, _b, _c, _d;
-  const [intl] = await loadModules([
-    "esri/intl"
-  ]);
-  // Get the attributes of the features to export
+  const [intl] = await loadModules(["esri/intl"]);
+  // Get the features to export
   const featureSet = await queryFeaturesByID(ids, layer);
-  const featuresAttrs = featureSet.features.map(f => f.attributes);
   // Get the label formatting, if any
   let labelFormat;
+  let arcadeExecutors = {};
   if (layer.popupEnabled) {
     // What data fields are used in the labels?
     // Example labelFormat: ['{NAME}', '{STREET}', '{CITY}, {STATE} {ZIP}']
     if (formatUsingLayerPopup && ((_b = (_a = layer.popupTemplate) === null || _a === void 0 ? void 0 : _a.content[0]) === null || _b === void 0 ? void 0 : _b.type) === "fields") {
       labelFormat = _convertPopupFieldsToLabelSpec(layer.popupTemplate.fieldInfos);
+      // If popup is configured with "no attribute information", then no fields will visible
+      if (labelFormat.length === 0) {
+        // Can we use the popup title?
+        // eslint-disable-next-line unicorn/prefer-ternary
+        if (typeof layer.popupTemplate.title === "string") {
+          labelFormat = [layer.popupTemplate.title];
+          // Otherwise revert to using attributes
+        }
+        else {
+          labelFormat = _convertPopupFieldsToLabelSpec(layer.popupTemplate.fieldInfos, true);
+        }
+      }
     }
     else if (formatUsingLayerPopup && ((_d = (_c = layer.popupTemplate) === null || _c === void 0 ? void 0 : _c.content[0]) === null || _d === void 0 ? void 0 : _d.type) === "text") {
       labelFormat = _convertPopupTextToLabelSpec(layer.popupTemplate.content[0].text);
+      // Do we need any Arcade executors?
+      arcadeExecutors = await _createArcadeExecutors(labelFormat, layer);
     }
   }
   // Apply the label format
   let labels;
   // eslint-disable-next-line unicorn/prefer-ternary
   if (labelFormat) {
+    const arcadeExpressionRegExp = /\{expression\/\w+\}/g;
     // Convert attributes into an array of labels
-    labels = featuresAttrs.map(featureAttributes => {
+    labels = featureSet.features.map(feature => {
       const label = [];
       labelFormat.forEach(labelLineTemplate => {
-        const labelLine = intl.substitute(labelLineTemplate, featureAttributes).trim();
+        let labelLine = labelLineTemplate;
+        // Replace Arcade expressions
+        const arcadeExpressionsMatches = labelLine.match(arcadeExpressionRegExp);
+        if (arcadeExpressionsMatches) {
+          arcadeExpressionsMatches.forEach((match) => {
+            const expressionName = match.substring(match.indexOf("/") + 1, match.length - 1);
+            const replacement = arcadeExecutors[expressionName].execute({ "$feature": feature });
+            labelLine = labelLine.replace(match, replacement);
+          });
+        }
+        // Replace fields; must be done after Arcade check because `substitute` will discard Arcade expressions!
+        labelLine = intl.substitute(labelLine, feature.attributes).trim();
         if (labelLine.length > 0) {
           label.push(labelLine);
         }
@@ -151,8 +223,8 @@ async function _prepareLabels(layer, ids, removeDuplicates = true, formatUsingLa
   }
   else {
     // Export all attributes
-    labels = featuresAttrs.map(featureAttributes => {
-      return Object.values(featureAttributes).map(attribute => `${attribute}`);
+    labels = featureSet.features.map(feature => {
+      return Object.values(feature.attributes).map(attribute => `${attribute}`);
     });
   }
   // Remove duplicates
@@ -168,7 +240,8 @@ async function _prepareLabels(layer, ids, removeDuplicates = true, formatUsingLa
       headerNames = labelFormat.map(labelFormatLine => labelFormatLine.replace(/\{/g, "").replace(/\}/g, ""));
     }
     else {
-      Object.keys(featuresAttrs[0]).forEach(k => {
+      const featuresAttrs = featureSet.features[0].attributes;
+      Object.keys(featuresAttrs).forEach(k => {
         if (featuresAttrs[0].hasOwnProperty(k)) {
           headerNames.push(k);
         }

package/dist/collection/utils/downloadUtils.ts

@@ -23,12 +23,21 @@ import { queryFeaturesByID } from "./queryUtils";
 
 export { ILabel } from "./pdfUtils";
 
+interface IArcadeExecutors {
+  [expressionName: string]: __esri.ArcadeExecutor;
+}
+
+interface IArcadeExecutorPromises {
+  [expressionName: string]: Promise<__esri.ArcadeExecutor>;
+}
+
 //#endregion
 //#region Public functions
 
 /**
  * Downloads csv of mailing labels for the provided list of ids
  *
+ * @param selectionSetNames Names of the selection sets used to provide ids
  * @param layer Layer providing features and attributes for download
  * @param ids List of ids to download
  * @param formatUsingLayerPopup When true, the layer's popup is used to choose attributes for each column; when false,
@@ -38,12 +47,14 @@ export { ILabel } from "./pdfUtils";
  * @returns Promise resolving when function is done
  */
 export async function downloadCSV(
+  selectionSetNames: string[],
   layer: __esri.FeatureLayer,
   ids: number[],
   formatUsingLayerPopup: boolean,
   removeDuplicates = false,
   addColumnTitle = false
 ): Promise<void> {
+  console.log("downloadCSV using selectionSetNames " + JSON.stringify(selectionSetNames));//???
   const labels = await _prepareLabels(layer, ids, removeDuplicates, formatUsingLayerPopup, addColumnTitle);
 
   exportCSV(labels);
@@ -54,6 +65,7 @@ export async function downloadCSV(
 /**
  * Downloads csv of mailing labels for the provided list of ids
  *
+ * @param selectionSetNames Names of the selection sets used to provide ids
  * @param layer Layer providing features and attributes for download
  * @param ids List of ids to download
  * @param removeDuplicates When true a single label is generated when multiple featues have a shared address value
@@ -61,11 +73,13 @@ export async function downloadCSV(
  * @returns Promise resolving when function is done
  */
 export async function downloadPDF(
+  selectionSetNames: string[],
   layer: __esri.FeatureLayer,
   ids: number[],
   removeDuplicates: boolean,
   labelPageDescription: ILabel
 ): Promise<void> {
+  console.log("downloadPDF using selectionSetNames " + JSON.stringify(selectionSetNames));//???
   const labels = await _prepareLabels(layer, ids, removeDuplicates);
 
   exportPDF(labels, labelPageDescription);
@@ -80,17 +94,19 @@ export async function downloadPDF(
  * Converts a set of fieldInfos into template lines.
  *
  * @param fieldInfos Layer's fieldInfos structure
+ * @param bypassFieldVisiblity Indicates if the configured fieldInfo visibility property should be ignored
  * @return Label spec
  */
 function _convertPopupFieldsToLabelSpec(
-  fieldInfos: __esri.FieldInfo[]
+  fieldInfos: __esri.FieldInfo[],
+  bypassFieldVisiblity = false
 ): string[] {
   const labelSpec: string[] = [];
 
   // Every visible attribute is used
   fieldInfos.forEach(
     fieldInfo => {
-      if (fieldInfo.visible) {
+      if (fieldInfo.visible || bypassFieldVisiblity) {
         labelSpec.push(`{${fieldInfo.fieldName}}`);
       }
     }
@@ -129,6 +145,67 @@ function _convertPopupTextToLabelSpec(
   return labelSpec;
 };
 
+/**
+ * Extracts Arcade expressions from the lines of a label format and creates an Arcade executor for each
+ * referenced expression name.
+ *
+ * @param labelFormat Label to examine
+ * @param layer Layer from which to fetch features
+ * @return Promise resolving to a set of executors keyed using the expression name
+ */
+async function _createArcadeExecutors(
+  labelFormat: string[],
+  layer: __esri.FeatureLayer
+): Promise<IArcadeExecutors> {
+  const arcadeExecutors: IArcadeExecutors = {};
+
+  // Are any Arcade expressions in the layer?
+  if (!Array.isArray(layer.popupTemplate.expressionInfos) || layer.popupTemplate.expressionInfos.length === 0) {
+    return Promise.resolve(arcadeExecutors);
+  }
+
+  // Are there any Arcade expressions in the label format?
+  const arcadeExpressionRegExp = /\{expression\/\w+\}/g;
+  const arcadeExpressionsMatches = labelFormat.join("|").match(arcadeExpressionRegExp);
+  if (!arcadeExpressionsMatches) {
+    return Promise.resolve(arcadeExecutors);
+  }
+
+  // Generate an Arcade executor for each match
+  const [arcade] = await loadModules(["esri/arcade"]);
+  const labelingProfile: __esri.Profile = arcade.createArcadeProfile("popup");
+
+  const createArcadeExecutorPromises: IArcadeExecutorPromises = {};
+  arcadeExpressionsMatches.forEach(
+    (match: string) => {
+      const expressionName = match.substring(match.indexOf("/") + 1, match.length - 1);
+
+      (layer.popupTemplate.expressionInfos || []).forEach(
+        expressionInfo => {
+          if (expressionInfo.name === expressionName) {
+            createArcadeExecutorPromises[expressionName] =
+              arcade.createArcadeExecutor(expressionInfo.expression, labelingProfile);
+          }
+        }
+      );
+    }
+  );
+
+  const promises = Object.values(createArcadeExecutorPromises);
+  return Promise.all(promises)
+  .then(
+    executors => {
+      const expressionNames = Object.keys(createArcadeExecutorPromises);
+
+      for (let i = 0; i < expressionNames.length; ++i) {
+        arcadeExecutors[expressionNames[i]] = executors[i].valueOf() as __esri.ArcadeExecutor;
+      }
+
+      return arcadeExecutors;
+    }
+  );
+}
+
 /**
  * Creates labels from items.
  *
@@ -147,25 +224,38 @@ async function _prepareLabels(
   formatUsingLayerPopup = true,
   includeHeaderNames = false
 ): Promise<string[][]> {
-  const [intl] = await loadModules([
-    "esri/intl"
-  ]);
+  const [intl] = await loadModules(["esri/intl"]);
 
-  // Get the attributes of the features to export
+  // Get the features to export
   const featureSet = await queryFeaturesByID(ids, layer);
-  const featuresAttrs = featureSet.features.map(f => f.attributes);
 
   // Get the label formatting, if any
   let labelFormat: string[];
+  let arcadeExecutors: IArcadeExecutors = {};
   if (layer.popupEnabled) {
     // What data fields are used in the labels?
     // Example labelFormat: ['{NAME}', '{STREET}', '{CITY}, {STATE} {ZIP}']
     if (formatUsingLayerPopup && layer.popupTemplate?.content[0]?.type === "fields") {
       labelFormat = _convertPopupFieldsToLabelSpec(layer.popupTemplate.fieldInfos);
 
+      // If popup is configured with "no attribute information", then no fields will visible
+      if (labelFormat.length === 0) {
+        // Can we use the popup title?
+        // eslint-disable-next-line unicorn/prefer-ternary
+        if (typeof layer.popupTemplate.title === "string") {
+          labelFormat = [layer.popupTemplate.title];
+
+        // Otherwise revert to using attributes
+        } else {
+          labelFormat = _convertPopupFieldsToLabelSpec(layer.popupTemplate.fieldInfos, true);
+        }
+      }
+
     } else if (formatUsingLayerPopup && layer.popupTemplate?.content[0]?.type === "text") {
       labelFormat = _convertPopupTextToLabelSpec(layer.popupTemplate.content[0].text);
 
+      // Do we need any Arcade executors?
+      arcadeExecutors = await _createArcadeExecutors(labelFormat, layer);
     }
   }
 
@@ -173,13 +263,31 @@ async function _prepareLabels(
   let labels: string[][];
   // eslint-disable-next-line unicorn/prefer-ternary
   if (labelFormat) {
+    const arcadeExpressionRegExp = /\{expression\/\w+\}/g;
+
     // Convert attributes into an array of labels
-    labels = featuresAttrs.map(
-      featureAttributes => {
+    labels = featureSet.features.map(
+      feature => {
         const label: string[] = [];
         labelFormat.forEach(
           labelLineTemplate => {
-            const labelLine = intl.substitute(labelLineTemplate, featureAttributes).trim();
+            let labelLine = labelLineTemplate;
+
+            // Replace Arcade expressions
+            const arcadeExpressionsMatches = labelLine.match(arcadeExpressionRegExp);
+            if (arcadeExpressionsMatches) {
+              arcadeExpressionsMatches.forEach(
+                (match: string) => {
+                  const expressionName = match.substring(match.indexOf("/") + 1, match.length - 1);
+                  const replacement = arcadeExecutors[expressionName].execute({"$feature": feature});
+                  labelLine = labelLine.replace(match, replacement);
+                }
+              )
+            }
+
+            // Replace fields; must be done after Arcade check because `substitute` will discard Arcade expressions!
+            labelLine = intl.substitute(labelLine, feature.attributes).trim();
+
             if (labelLine.length > 0) {
               label.push(labelLine);
             }
@@ -193,9 +301,9 @@ async function _prepareLabels(
 
   } else {
     // Export all attributes
-    labels = featuresAttrs.map(
-      featureAttributes => {
-        return Object.values(featureAttributes).map(
+    labels = featureSet.features.map(
+      feature => {
+        return Object.values(feature.attributes).map(
           attribute => `${attribute}`
         );
       }
@@ -219,7 +327,8 @@ async function _prepareLabels(
       headerNames = labelFormat.map(labelFormatLine => labelFormatLine.replace(/\{/g, "").replace(/\}/g, ""));
 
     } else {
-      Object.keys(featuresAttrs[0]).forEach(k => {
+      const featuresAttrs = featureSet.features[0].attributes;
+      Object.keys(featuresAttrs).forEach(k => {
         if (featuresAttrs[0].hasOwnProperty(k)) {
           headerNames.push(k);
         }

package/dist/collection/utils/locale.js

@@ -21,7 +21,7 @@
 // https://medium.com/stencil-tricks/implementing-internationalisation-i18n-with-stencil-5e6559554117
 import { languageMap } from "./languageUtil";
 import { getAssetPath } from "@stencil/core";
-function getComponentClosestLanguage(element) {
+export function getComponentClosestLanguage(element) {
   var _a, _b, _c;
   const closestElement = (_a = (element.closest("[lang]"))) !== null && _a !== void 0 ? _a : (_c = (_b = element.shadowRoot) === null || _b === void 0 ? void 0 : _b.ownerDocument) === null || _c === void 0 ? void 0 : _c.documentElement;
   // language set by the calling application or browser. defaults to english.

package/dist/collection/utils/locale.ts

@@ -18,7 +18,7 @@
 import { languageMap } from "./languageUtil";
 import { getAssetPath } from "@stencil/core";
 
-function getComponentClosestLanguage(element: HTMLElement): string | undefined {
+export function getComponentClosestLanguage(element: HTMLElement): string | undefined {
   const closestElement = (element.closest("[lang]") ) ?? element.shadowRoot?.ownerDocument?.documentElement as any;
   // language set by the calling application or browser. defaults to english.
   const lang = (closestElement?.lang || navigator?.language || "en").toLowerCase() ;