@esri/solutions-components 0.6.12 → 0.6.14

package/dist/components/crowdsource-manager.js

@@ -23,10 +23,10 @@ import { d as defineCustomElement$u } from './filter2.js';
 import { d as defineCustomElement$t } from './handle.js';
 import { d as defineCustomElement$s } from './icon.js';
 import { d as defineCustomElement$r } from './input.js';
-import { d as defineCustomElement$q } from './link.js';
-import { d as defineCustomElement$p } from './list.js';
-import { d as defineCustomElement$o } from './list-item2.js';
-import { d as defineCustomElement$n } from './loader.js';
+import { d as defineCustomElement$q } from './list.js';
+import { d as defineCustomElement$p } from './list-item2.js';
+import { d as defineCustomElement$o } from './loader.js';
+import { d as defineCustomElement$n } from './modal.js';
 import { d as defineCustomElement$m } from './notice.js';
 import { d as defineCustomElement$l } from './option.js';
 import { d as defineCustomElement$k } from './panel.js';
@@ -49,7 +49,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}.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-ui-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 0.5rem - 25px)}.adjusted-height-100{height:calc(100% - 1rem - 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-49-px{height:49px}.height-50-px{height:50px}.padding-inline-end-75{padding-inline-end:0.75rem}.align-items-center{align-items:center}";
+const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px}.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-ui-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-ui-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-49-px{height:49px}.height-50-px{height:50px}.padding-inline-end-75{padding-inline-end:0.75rem}.align-items-center{align-items:center}";
 
 const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceManager extends HTMLElement {
   constructor() {
@@ -61,9 +61,19 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      */
     this._shouldSetMapView = false;
     this.classicGrid = false;
+    this.enableAutoRefresh = true;
+    this.enableFullscreen = true;
+    this.enableInlineEdit = false;
+    this.enableLegend = true;
+    this.enableSearch = true;
+    this.enableHome = true;
+    this.enableZoom = true;
+    this.enableBasemap = true;
+    this.basemapConfig = undefined;
     this.showNewestFirst = true;
     this.hideMap = false;
     this.mapInfos = [];
+    this.onlyShowUpdatableLayers = true;
     this.searchConfiguration = undefined;
     this.zoomAndScrollToSelected = false;
     this._expandPopup = false;
@@ -98,13 +108,18 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
    */
   async mapChanged(evt) {
     this._mapChange = evt.detail;
+    await this._mapChange.mapView.when(() => {
+      this._setMapView();
+    });
+  }
+  /**
+   * Listen for beforeMapChanged and minimize the popup if it's expanded
+   */
+  async beforeMapChanged() {
     if (this._expandPopup) {
       this._shouldSetMapView = true;
       this._expandPopup = false;
     }
-    else {
-      this._setMapView();
-    }
   }
   //--------------------------------------------------------------------------
   //
@@ -263,7 +278,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     const mapDisplayClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "display-flex height-full width-1-2" :
       layoutMode === ELayoutMode.GRID && !hideMap ? "" : "display-none";
     const mapContainerClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "width-full" : this._expandPopup ? "height-50-px" : "adjusted-height-50";
-    return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { class: "width-full", mapInfos: this.mapInfos })));
+    return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", enableBasemap: this.enableBasemap, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, mapInfos: this.mapInfos })));
   }
   /**
    * Get the expand node for the popup information
@@ -297,7 +312,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
       layoutMode === ELayoutMode.GRID && !this._expandPopup && !hideMap ? "adjusted-height-50" : "adjusted-height-100";
     const cardManagerContainer = this.classicGrid && layoutMode === ELayoutMode.GRID ?
       "width-full adjusted-height-100" : this._expandPopup ? "width-50 adjusted-height-100-50" : "width-50 height-full";
-    return (h("div", { class: `padding-1-2 ${cardManagerContainer}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
+    return (h("div", { class: `${cardManagerContainer}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
   }
   /**
    * Get the table node based for the current layout
@@ -317,7 +332,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     const toggleSlot = this.classicGrid && layoutMode !== ELayoutMode.VERTICAL ? "footer" :
       this.classicGrid && layoutMode === ELayoutMode.VERTICAL ? "panel-end" :
         layoutMode === ELayoutMode.HORIZONTAL ? "header" : "panel-start";
-    return (h("calcite-shell", { class: tableSizeClass + " border-bottom" }, h("calcite-action-bar", { class: "border", 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))), h("div", { class: "width-full height-full position-relative" }, h("layer-table", { mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
+    return (h("calcite-shell", { class: tableSizeClass + " border-bottom" }, h("calcite-action-bar", { class: "border", 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))), h("div", { class: "width-full height-full position-relative" }, h("layer-table", { enableAutoRefresh: this.enableAutoRefresh, enableInlineEdit: this.enableInlineEdit, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
   }
   /**
    * Open/Close the appropriate panel.
@@ -369,9 +384,19 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
   static get style() { return crowdsourceManagerCss; }
 }, [0, "crowdsource-manager", {
     "classicGrid": [4, "classic-grid"],
+    "enableAutoRefresh": [4, "enable-auto-refresh"],
+    "enableFullscreen": [4, "enable-fullscreen"],
+    "enableInlineEdit": [4, "enable-inline-edit"],
+    "enableLegend": [4, "enable-legend"],
+    "enableSearch": [4, "enable-search"],
+    "enableHome": [4, "enable-home"],
+    "enableZoom": [4, "enable-zoom"],
+    "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],
     "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
     "_expandPopup": [32],
@@ -379,12 +404,12 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     "_layoutMode": [32],
     "_mapView": [32],
     "_panelOpen": [32]
-  }, [[8, "layoutChanged", "layoutChanged"], [8, "mapChanged", "mapChanged"]]]);
+  }, [[8, "layoutChanged", "layoutChanged"], [8, "mapChanged", "mapChanged"], [8, "beforeMapChanged", "beforeMapChanged"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["crowdsource-manager", "basemap-gallery", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-alert", "calcite-button", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-link", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-notice", "calcite-option", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-select", "calcite-shell", "calcite-stack", "calcite-tooltip", "card-manager", "edit-card", "info-card", "layer-table", "map-card", "map-fullscreen", "map-layer-picker", "map-legend", "map-picker", "map-search", "map-tools"];
+  const components = ["crowdsource-manager", "basemap-gallery", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-alert", "calcite-button", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-option", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-select", "calcite-shell", "calcite-stack", "calcite-tooltip", "card-manager", "edit-card", "info-card", "layer-table", "map-card", "map-fullscreen", "map-layer-picker", "map-legend", "map-picker", "map-search", "map-tools"];
   components.forEach(tagName => { switch (tagName) {
     case "crowdsource-manager":
       if (!customElements.get(tagName)) {
@@ -476,22 +501,22 @@ function defineCustomElement$1() {
         defineCustomElement$r();
       }
       break;
-    case "calcite-link":
+    case "calcite-list":
       if (!customElements.get(tagName)) {
         defineCustomElement$q();
       }
       break;
-    case "calcite-list":
+    case "calcite-list-item":
       if (!customElements.get(tagName)) {
         defineCustomElement$p();
       }
       break;
-    case "calcite-list-item":
+    case "calcite-loader":
       if (!customElements.get(tagName)) {
         defineCustomElement$o();
       }
       break;
-    case "calcite-loader":
+    case "calcite-modal":
       if (!customElements.get(tagName)) {
         defineCustomElement$n();
       }

package/dist/components/downloadUtils.js

@@ -7,6 +7,7 @@ import { c as createCommonjsModule, g as getDefaultExportFromCjs } from './_comm
 import { getAssetPath } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
 import { q as queryFeaturesByID } from './queryUtils.js';
+import { _ as __assign$1, r as request, c as cleanUrl } from './clean-url.js';
 
 /** @license
  * Copyright 2022 Esri
@@ -2240,6 +2241,94 @@ function downloadPDFFile(filename, labels, labelPageDescription, title = "", ini
 }
 //#endregion
 
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+/* Copyright (c) 2017-2018 Environmental Systems Research Institute, Inc.
+ * Apache-2.0 */
+/**
+ * Helper for methods with lots of first order request options to pass through as request parameters.
+ */
+function appendCustomParams(customOptions, keys, baseOptions) {
+    var requestOptionsKeys = [
+        "params",
+        "httpMethod",
+        "rawResponse",
+        "authentication",
+        "portal",
+        "fetch",
+        "maxUrlLength",
+        "headers"
+    ];
+    var options = __assign$1(__assign$1({ params: {} }, baseOptions), customOptions);
+    // merge all keys in customOptions into options.params
+    options.params = keys.reduce(function (value, key) {
+        if (customOptions[key] || typeof customOptions[key] === "boolean") {
+            value[key] = customOptions[key];
+        }
+        return value;
+    }, options.params);
+    // now remove all properties in options that don't exist in IRequestOptions
+    return requestOptionsKeys.reduce(function (value, key) {
+        if (options[key]) {
+            value[key] = options[key];
+        }
+        return value;
+    }, {});
+}
+
+/* Copyright (c) 2018 Environmental Systems Research Institute, Inc.
+ * Apache-2.0 */
+/**
+ *
+ * ```js
+ * import { queryRelated } from '@esri/arcgis-rest-feature-layer'
+ * //
+ * queryRelated({
+ *  url: "http://services.myserver/OrgID/ArcGIS/rest/services/Petroleum/KSPetro/FeatureServer/0",
+ *  relationshipId: 1,
+ *  params: { returnCountOnly: true }
+ * })
+ *  .then(response) // response.relatedRecords
+ * ```
+ * Query the related records for a feature service. See the [REST Documentation](https://developers.arcgis.com/rest/services-reference/query-related-records-feature-service-.htm) for more information.
+ *
+ * @param requestOptions
+ * @returns A Promise that will resolve with the query response
+ */
+function queryRelated(requestOptions) {
+    var options = appendCustomParams(requestOptions, ["objectIds", "relationshipId", "definitionExpression", "outFields"], {
+        httpMethod: "GET",
+        params: __assign({ 
+            // set default query parameters
+            definitionExpression: "1=1", outFields: "*", relationshipId: 0 }, requestOptions.params)
+    });
+    return request(cleanUrl(requestOptions.url) + "/queryRelatedRecords", options);
+}
+
 /** @license
  * Copyright 2022 Esri
  *
@@ -2256,24 +2345,40 @@ function downloadPDFFile(filename, labels, labelPageDescription, title = "", ini
  * limitations under the License.
  */
 const lineSeparatorChar = "|";
+/**
+ * Get the related records for a feature service.
+ *
+ * @param url Feature service's URL, e.g., layer.url
+ * @param relationshipId Id of relationship
+ * @param objectIds Objects in the feature service whose related records are sought
+ */
+function getFeatureServiceRelatedRecords(url, relationshipId, objectIds) {
+  const options = {
+    url: url + `/${relationshipId}`,
+    relationshipId,
+    objectIds
+  };
+  return queryRelated(options);
+}
 //#endregion
 // ------------------------------------------------------------------------------------------------------------------ //
 //#region Public functions
 /**
  * Create and consolidate labels from all layers
  *
+ * @param webmap Webmap containing layer
  * @param exportInfos Key details about what to export (ids, layer, and selectionSetNames)
  * @param formatUsingLayerPopup When true, the layer's popup is used to choose attributes for each column; when false,
  * all attributes are exported
  * @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(exportInfos, formatUsingLayerPopup = true, includeHeaderNames = false, isCSVExport = false) {
+async function consolidateLabels(webmap, exportInfos, formatUsingLayerPopup = true, includeHeaderNames = false, isCSVExport = false) {
   const labelRequests = [];
   Object.keys(exportInfos).forEach(k => {
     var _a;
     const labelInfo = exportInfos[k];
-    labelRequests.push(_prepareLabels(((_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));
     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]]));
@@ -2285,6 +2390,7 @@ async function consolidateLabels(exportInfos, formatUsingLayerPopup = true, incl
 /**
  * Downloads csv of mailing labels for the provided list of ids
  *
+ * @param webmap Webmap containing layer
  * @param exportInfos Key details about what to export (ids, layer, and selectionSetNames)
  * @param formatUsingLayerPopup When true, the layer's popup is used to choose attributes for each column; when false,
  * all attributes are exported
@@ -2292,8 +2398,8 @@ async function consolidateLabels(exportInfos, formatUsingLayerPopup = true, incl
  * @param addColumnTitle Indicates if column headings should be included in output
  * @returns Promise resolving when function is done
  */
-async function downloadCSV(exportInfos, formatUsingLayerPopup, removeDuplicates = false, addColumnTitle = false) {
-  let labels = await consolidateLabels(exportInfos, formatUsingLayerPopup, addColumnTitle, true);
+async function downloadCSV(webmap, exportInfos, formatUsingLayerPopup, removeDuplicates = false, addColumnTitle = false) {
+  let labels = await consolidateLabels(webmap, exportInfos, formatUsingLayerPopup, addColumnTitle, true);
   labels = removeDuplicates ? removeDuplicateLabels(labels) : labels;
   const layerIds = Object.keys(exportInfos);
   let layerLabels = [];
@@ -2315,6 +2421,7 @@ async function downloadCSV(exportInfos, formatUsingLayerPopup, removeDuplicates
 /**
  * Downloads csv of mailing labels for the provided list of ids
  *
+ * @param webmap Webmap containing layer
  * @param exportInfos Key details about what to export (ids, layer, and selectionSetNames)
  * @param labelPageDescription Provides PDF page layout info
  * @param removeDuplicates When true a single label is generated when multiple featues have a shared address value
@@ -2322,8 +2429,8 @@ async function downloadCSV(exportInfos, formatUsingLayerPopup, removeDuplicates
  * @param initialImageDataUrl Data URL of image for first page
  * @returns Promise resolving when function is done
  */
-async function downloadPDF(exportInfos, labelPageDescription, removeDuplicates = false, title = "", initialImageDataUrl = "") {
-  let labels = await consolidateLabels(exportInfos);
+async function downloadPDF(webmap, exportInfos, labelPageDescription, removeDuplicates = false, title = "", initialImageDataUrl = "") {
+  let labels = await consolidateLabels(webmap, exportInfos);
   const selectionSetNames = _getSelectionSetNames(exportInfos);
   labels =
     // Remove empty lines in labels
@@ -2452,6 +2559,87 @@ async function _convertPopupArcadeToLabelSpec(expressionInfo) {
     format: executor
   });
 }
+/**
+ * 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.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 = {
+    variables: [
+      {
+        name: "$feature",
+        type: "feature"
+      },
+      {
+        name: "$layer",
+        type: "featureSet"
+      },
+      {
+        name: "$datastore",
+        type: "featureSetCollection"
+      },
+      {
+        name: "$map",
+        type: "featureSetCollection"
+      }
+    ]
+  };
+
+  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 a title from a list of selection set names.
  *
@@ -2515,52 +2703,73 @@ function _getFieldNamesFromFieldExpressions(fieldExpressions) {
 /**
  * Extracts the label format from the layer.
  *
+ * @param webmap Webmap containing layer
  * @param layer Layer with label format
  * @param formatUsingLayerPopup When true, the layer's popup is used to choose attributes for each column; when false,
  * all attributes are exported
- * @param attributeFormats Empty object to hold the formats for each attribute in a feature; the object is filled
- * with formats by this function
  * @returns A Promise resolving to the format of a single label with fields coerced to lowercase, e.g.,
- * for ILabelFormat type "pattern": "{name}|{street}|{city}, {state} {zip}"
+ * for ILabelFormatProps type "pattern": "{name}|{street}|{city}, {state} {zip}"
  */
-async function _getLabelFormat(layer, formatUsingLayerPopup, attributeFormats) {
-  var _a, _b, _c, _d, _e, _f;
-  let labelFormat = {
-    type: "unsupported",
-    format: undefined
+async function _getLabelFormat(webmap, layer, formatUsingLayerPopup) {
+  var _a, _b;
+  let labelFormatProps = {
+    layer,
+    attributeFormats: {},
+    relationshipId: undefined,
+    labelFormat: {
+      type: "unsupported",
+      format: undefined
+    }
   };
   if (layer.popupEnabled) {
     layer.popupTemplate.fieldInfos.forEach(
     // Extract any format info that we have
     fieldInfo => {
       if (fieldInfo.format) {
-        attributeFormats[fieldInfo.fieldName.toLowerCase()] = fieldInfo.format;
+        labelFormatProps.attributeFormats[fieldInfo.fieldName.toLowerCase()] = fieldInfo.format;
       }
     });
     // What is the nature of the label content?
     // Fields list
-    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.format.length === 0) {
-        // Can we use the popup title?
-        labelFormat = layer.popupTemplate.title && typeof layer.popupTemplate.title === "string" ?
-          { type: "pattern", format: layer.popupTemplate.title }
-          :
-            // Otherwise revert to using attributes
-            _convertPopupFieldsToLabelSpec(layer.popupTemplate.fieldInfos, true);
+    if (formatUsingLayerPopup) {
+      const labelFormatType = (_b = (_a = layer.popupTemplate) === null || _a === void 0 ? void 0 : _a.content[0]) === null || _b === void 0 ? void 0 : _b.type;
+      if (labelFormatType === "relationship") {
+        const relationshipId = layer.popupTemplate.content[0].relationshipId;
+        const webmapLayers = webmap.layers.toArray().concat(webmap.tables.toArray())
+          .filter((entry) => entry.type === "feature"
+          && entry.id !== layer.id
+          && entry.relationships
+          && entry.relationships.some(relationship => relationship.id === relationshipId));
+        labelFormatProps = await _getLabelFormat(webmap, webmapLayers[0], formatUsingLayerPopup);
+        labelFormatProps.relationshipId = relationshipId;
+      }
+      else if (labelFormatType === "fields") {
+        labelFormatProps.labelFormat = _convertPopupFieldsToLabelSpec(layer.popupTemplate.fieldInfos);
+        // If popup is configured with "no attribute information", then no fields will visible
+        if (labelFormatProps.labelFormat.format.length === 0) {
+          // Can we use the popup title?
+          labelFormatProps.labelFormat = layer.popupTemplate.title && typeof layer.popupTemplate.title === "string" ?
+            { type: "pattern", format: layer.popupTemplate.title }
+            :
+              // Otherwise revert to using attributes
+              _convertPopupFieldsToLabelSpec(layer.popupTemplate.fieldInfos, true);
+        }
+        // Example text: '<p>{name} {age} years &nbsp;</p><p>started: {start}</p>'
+      }
+      else if (labelFormatType === "text") {
+        labelFormatProps.labelFormat = _convertPopupTextToLabelSpec(layer.popupTemplate.content[0].text);
+        // Example expression: 'var feat = $feature\nvar label = `\n\t${feat["name"]} ${feat["age"]} years <br>\n\tstarted: ${feat["start"]}\n`\n\nreturn { \n  type : \'text\', \n  text : label\n}',
+      }
+      else if (labelFormatType === "expression") {
+        labelFormatProps.labelFormat = await _convertPopupArcadeToLabelSpec(layer.popupTemplate.content[0].expressionInfo);
+        // Fallback to all fields
+      }
+      else {
+        labelFormatProps.labelFormat = _convertPopupFieldsToLabelSpec(layer.popupTemplate.fieldInfos);
       }
-      // Example text: '<p>{name} {age} years &nbsp;</p><p>started: {start}</p>'
-    }
-    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);
-      // Example expression: 'var feat = $feature\nvar label = `\n\t${feat["name"]} ${feat["age"]} years <br>\n\tstarted: ${feat["start"]}\n`\n\nreturn { \n  type : \'text\', \n  text : label\n}',
-    }
-    else if (formatUsingLayerPopup && ((_f = (_e = layer.popupTemplate) === null || _e === void 0 ? void 0 : _e.content[0]) === null || _f === void 0 ? void 0 : _f.type) === "expression") {
-      labelFormat = await _convertPopupArcadeToLabelSpec(layer.popupTemplate.content[0].expressionInfo);
     }
   }
-  return Promise.resolve(labelFormat);
+  return Promise.resolve(labelFormatProps);
 }
 /**
  * Extract selectionSetNames from the provided exportInfos
@@ -2632,6 +2841,7 @@ function _prepareAttributeValue(attributeValue, attributeType, attributeDomain,
 /**
  * Creates labels from items.
  *
+ * @param webmap Webmap containing layer
  * @param layer Layer from which to fetch features
  * @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,
@@ -2639,32 +2849,51 @@ 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(layer, ids, formatUsingLayerPopup = true, includeHeaderNames = false) {
-  // Get the features to export
-  const featureSet = await queryFeaturesByID(ids, layer, [], false);
+async function _prepareLabels(webmap, layer, ids, formatUsingLayerPopup = true, includeHeaderNames = false) {
+  // 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.
+  // That function returns the supplied layer in all cases except for a "relationship" type of popup.
+  const featureLayer = labelFormatProps.layer;
+  let featureSet = [];
+  if (typeof (labelFormatProps.relationshipId) !== "undefined") {
+    // Get the related items for each id
+    const relatedRecResponse = await getFeatureServiceRelatedRecords(layer.url, labelFormatProps.relationshipId, ids);
+    const objectIdField = layer.objectIdField;
+    let relatedFeatureIds = [];
+    relatedRecResponse.relatedRecordGroups.forEach((relatedRecGroup) => {
+      relatedFeatureIds = relatedFeatureIds.concat(relatedRecGroup.relatedRecords.map((rec) => rec.attributes[objectIdField]));
+    });
+    // Remove duplicates
+    relatedFeatureIds.sort();
+    relatedFeatureIds = relatedFeatureIds.filter((id, i) => i === 0 ? true : id !== relatedFeatureIds[i - 1]);
+    // Get the full items
+    featureSet = await queryFeaturesByID(relatedFeatureIds, featureLayer, [], false);
+  }
+  else {
+    // Get the features to export
+    featureSet = await queryFeaturesByID(ids, featureLayer, [], false);
+  }
   // Get field data types. Do we have any domain-based fields?
   const attributeOrigNames = {};
   const attributeTypes = {};
   const attributeDomains = {};
-  layer.fields.forEach(field => {
+  featureLayer.fields.forEach(field => {
     const lowercaseFieldname = field.name.toLowerCase();
     attributeOrigNames[lowercaseFieldname] = field.name;
     attributeDomains[lowercaseFieldname] = field.domain;
     attributeTypes[lowercaseFieldname] = field.type;
   });
-  const attributeFormats = {};
-  // Get the label formatting, if any
-  const labelFormat = await _getLabelFormat(layer, formatUsingLayerPopup, attributeFormats);
   // Apply the label format
-  const labels = labelFormat.type === "unsupported" ?
-    // Export all attributes
-    await _prepareLabelsFromAll(featureSet, attributeTypes, attributeDomains, includeHeaderNames)
-    : labelFormat.type == "pattern" ?
-      // Export attributes in format
-      await _prepareLabelsFromPattern(featureSet, attributeOrigNames, attributeTypes, attributeDomains, attributeFormats, labelFormat.format, includeHeaderNames)
+  const labels = labelFormatProps.labelFormat.type === "pattern" ?
+    // Export attributes in format
+    await _prepareLabelsFromPattern(/*layer,*/ featureSet, attributeOrigNames, attributeTypes, attributeDomains, labelFormatProps.attributeFormats, labelFormatProps.labelFormat.format, includeHeaderNames)
+    : labelFormatProps.labelFormat.type === "executor" ?
+      // Export attributes in expression
+      await _prepareLabelsUsingExecutor(featureSet, labelFormatProps.labelFormat.format)
       :
-        // Export attributes in expression
-        await _prepareLabelsUsingExecutor(featureSet, labelFormat.format);
+        // Export all attributes
+        await _prepareLabelsFromAll(featureSet, attributeTypes, attributeDomains, includeHeaderNames);
   return Promise.resolve(labels);
 }
 /**
@@ -2708,14 +2937,30 @@ async function _prepareLabelsFromAll(featureSet, attributeTypes, attributeDomain
  * @param includeHeaderNames Add the label format at the front of the list of generated labels
  * @returns Promise resolving with list of labels, each of which is a list of label lines
  */
-async function _prepareLabelsFromPattern(featureSet, attributeOrigNames, attributeTypes, attributeDomains, attributeFormats, labelFormat, includeHeaderNames = false) {
+async function _prepareLabelsFromPattern(
+//layer: __esri.FeatureLayer,
+featureSet, attributeOrigNames, attributeTypes, attributeDomains, attributeFormats, labelFormat, includeHeaderNames = false) {
   const [intl] = await loadModules(["esri/intl"]);
   // Find the label fields that we need to replace with values
   const attributeExpressionMatches = _getFieldExpressionsFromLabel(labelFormat);
   const attributeNames = _getFieldNamesFromFieldExpressions(attributeExpressionMatches);
+  // Do we need any Arcade executors?
+  //const arcadeExecutors = await _createArcadeExecutors(labelFormat, layer);
+  //const arcadeExpressionRegExp = /\{expression\/\w+\}/g;
+  // Find the label fields that we need to replace with values
+  //const arcadeExpressionMatches = labelFormat.match(arcadeExpressionRegExp) ?? [];
   // Convert feature attributes into an array of labels
   const labels = await Promise.all(featureSet.map(async (feature) => {
     let labelPrep = labelFormat;
+    /*
+    // Replace Arcade expressions in this feature
+    for (let i = 0; i < arcadeExpressionMatches.length; i++) {
+      const match: string = arcadeExpressionMatches[i];
+      const expressionName = match.substring(match.indexOf("/") + 1, match.length - 1);
+      const value = await arcadeExecutors[expressionName].executeAsync({"$feature": feature, "$layer", layer});
+      labelPrep = labelPrep.replace(match, value);
+    }
+    */
     // Replace non-Arcade fields in this feature
     attributeNames.forEach((attributeName, i) => {
       const lowercaseFieldname = attributeName.toLowerCase();