@esri/solutions-components 0.5.9 → 0.5.11

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

@@ -24,8 +24,14 @@ import { loadModules } from "../../utils/loadModules";
 import { goToSelection, highlightFeatures } from "../../utils/mapViewUtils";
 import state from "../../utils/publicNotificationStore";
 import { getLocaleComponentStrings } from "../../utils/locale";
+import { consolidateLabels, removeDuplicateLabels } from "../../utils/downloadUtils";
+import { getAssetPath } from "@stencil/core";
 export class PublicNotification {
   constructor() {
+    /**
+     * string: The url to the onboarding image
+     */
+    this._onboardingImageUrl = "";
     /**
      * number: The number of selected features
      */
@@ -51,6 +57,7 @@ export class PublicNotification {
     this._addTitle = false;
     this._downloadActive = true;
     this._exportType = EExportType.PDF;
+    this._numDuplicates = 0;
     this._pageType = EPageType.LIST;
     this._saveEnabled = false;
     this._selectionSets = [];
@@ -117,6 +124,9 @@ export class PublicNotification {
     if ((_a = this.mapView) === null || _a === void 0 ? void 0 : _a.popup) {
       this.mapView.popup.autoOpenEnabled = pageType !== EPageType.LIST ? false : this._popupsEnabled;
     }
+    if (pageType === EPageType.EXPORT) {
+      this._numDuplicates = await this._getNumDuplicates();
+    }
     this._clearHighlight();
     if (oldPageType === EPageType.SELECT || oldPageType === EPageType.REFINE) {
       // clear any draw shapes or buffers
@@ -144,6 +154,7 @@ export class PublicNotification {
     await this._getTranslations();
     await this._initModules();
     this._initSymbols();
+    this._onboardingImageUrl = getAssetPath(`../assets/data/images/onboarding.png`);
   }
   /**
    * Renders the component.
@@ -302,7 +313,16 @@ export class PublicNotification {
    */
   _getListPage() {
     const hasSets = this._hasSelections();
-    return (h("calcite-panel", null, this._getLabel(this._translations.myLists), this._getNotice(hasSets ? this._translations.listHasSetsTip : this._translations.selectLayerAndAdd, "padding-sides-1 padding-bottom-1"), hasSets ? this._getSelectionSetList() : (null), h("div", { class: "display-flex padding-1" }, h("calcite-button", { onClick: () => { this._setPageType(EPageType.SELECT); }, width: "full" }, this._translations.add))));
+    return (h("calcite-panel", null, this._getLabel(this._translations.myLists), this._getNotice(hasSets ? this._translations.listHasSetsTip : this._translations.selectLayerAndAdd, "padding-sides-1 padding-bottom-1"), hasSets ? this._getSelectionSetList() : (this._getOnboardingImage()), h("div", { class: "display-flex padding-1" }, h("calcite-button", { onClick: () => { this._setPageType(EPageType.SELECT); }, width: "full" }, this._translations.add))));
+  }
+  /**
+   * Display an image to help illustrate the basic workflow of the widget
+   *
+   * @returns the image node to display
+   * @protected
+   */
+  _getOnboardingImage() {
+    return (h("div", { class: "display-flex padding-sides-1" }, h("img", { class: "img-container", src: this._onboardingImageUrl })));
   }
   /**
    * Create the selection sets list node for the List page
@@ -324,7 +344,7 @@ export class PublicNotification {
         validSet = numIds > 0;
       }
       if (validSet) {
-        prev.push((h("calcite-list-item", { description: this._translations.selectedFeatures.replace("{{n}}", ids.length.toString()), label: cur.label, onClick: () => this._gotoSelection(cur, this.mapView) }, h("div", { slot: "content" }, h("div", { class: "list-label" }, cur.label), h("div", { class: "list-description" }, (_a = cur === null || cur === void 0 ? void 0 : cur.layerView) === null || _a === void 0 ? void 0 : _a.layer.title), h("div", { class: "list-description" }, this._translations.selectedFeatures.replace("{{n}}", ids.length.toString()))), this._getAction(true, "pencil", "", (evt) => this._openSelection(cur, evt), false, "actions-end"), this._getAction(true, "x", "", (evt) => this._deleteSelection(i, evt), false, "actions-end"))));
+        prev.push((h("calcite-list-item", { label: cur.label, onClick: () => this._gotoSelection(cur, this.mapView) }, h("div", { slot: "content" }, h("div", { class: "list-label" }, cur.label), h("div", { class: "list-description" }, (_a = cur === null || cur === void 0 ? void 0 : cur.layerView) === null || _a === void 0 ? void 0 : _a.layer.title), h("div", { class: "list-description" }, this._translations.selectedFeatures.replace("{{n}}", ids.length.toString()))), this._getAction(true, "pencil", "", (evt) => this._openSelection(cur, evt), false, "actions-end"), this._getAction(true, "x", "", (evt) => this._deleteSelection(i, evt), false, "actions-end"))));
       }
       return prev;
     }, []))));
@@ -360,39 +380,67 @@ export class PublicNotification {
     return validateRefineSet && hasRefineSet ? ids.length > 0 || this._selectionSets.length > 1 : this._selectionSets.length > 0;
   }
   /**
-   * Check if any duplicates exist
+   * Check if any duplicate labels exist
    *
    * @returns true if duplicates are found
    *
    * @protected
    */
-  _hasDuplicates() {
-    const selectedIds = this._getSelectedIds();
-    return this._getNumDuplicates(selectedIds) > 0;
+  async _getNumDuplicates() {
+    const exportInfos = this._getExportInfos();
+    const labels = await consolidateLabels(exportInfos);
+    const duplicatesRemoved = removeDuplicateLabels(labels);
+    return labels.length - duplicatesRemoved.length;
   }
   /**
-   * Return the number of duplicates
-   *
-   * @param ids the list of currently selected ids
+   * Get key details about what to export
    *
-   * @returns the number of duplicates
+   * @returns IExportInfos that contain ids and layer
    *
    * @protected
    */
-  _getNumDuplicates(ids) {
-    return ids.length - new Set(ids).size;
+  _getExportInfos() {
+    return this._selectionSets.reduce((prev, cur) => {
+      if (cur.download) {
+        if (cur.workflowType !== EWorkflowType.REFINE) {
+          const id = cur.layerView.layer.id;
+          this._updateIds(id, cur.layerView, cur.selectedIds, prev);
+        }
+        else {
+          // REFINE stores ids differently as it can contain ids from multiple layers
+          // REFINE will only ever be 1 ISelectionSet
+          Object.keys(cur.refineInfos).forEach(k => {
+            const refineIds = cur.refineInfos[k];
+            this._updateIds(k, refineIds.layerView, refineIds.addIds, prev);
+          });
+        }
+      }
+      return prev;
+    }, {});
   }
   /**
-   * Get the complete list of selected ids
+   * Consolidate ids for each layer
+   *
+   * @param id the layer id from the selectionSet
+   * @param layerView the layerView from the selectionSet
+   * @param ids the selectedIds from the selectionSet
+   * @param obj the object that will store the consolidated ids and layer info
    *
-   * @returns all currently selected IDs
+   * @returns IExportInfo key details that will be used for export
    *
    * @protected
    */
-  _getSelectedIds() {
-    return this._selectionSets.reduce((prev, cur) => {
-      return prev.concat(cur.download ? cur.selectedIds : []);
-    }, []);
+  _updateIds(id, layerView, ids, obj) {
+    if (obj[id]) {
+      obj[id].ids = obj[id].ids.concat(ids);
+    }
+    else {
+      obj[id] = {
+        layerView,
+        ids
+      };
+    }
+    return obj;
   }
   /**
    * Create the Select page that shows the selection workflows
@@ -402,7 +450,7 @@ export class PublicNotification {
    */
   _getSelectPage() {
     const noticeText = this._translations.selectSearchTip;
-    return (h("calcite-panel", null, this._getLabel(this._translations.stepTwoFull, true), this._getNotice(noticeText), h("div", null, h("map-select-tools", { bufferColor: this.bufferColor, bufferOutlineColor: this.bufferOutlineColor, class: "font-bold", customLabelEnabled: this.customLabelEnabled, defaultBufferDistance: this.defaultBufferDistance, defaultBufferUnit: this.defaultBufferUnit, enabledLayerIds: this.selectionLayerIds, isUpdate: !!this._activeSelection, mapView: this.mapView, noResultText: this.noResultText, onSelectionSetChange: (evt) => this._updateForSelection(evt), ref: (el) => { this._selectTools = el; }, searchConfiguration: this._searchConfiguration, selectionSet: this._activeSelection, sketchLineSymbol: this.sketchLineSymbol, sketchPointSymbol: this.sketchPointSymbol, sketchPolygonSymbol: this.sketchPolygonSymbol })), this._getPageNavButtons(this._translations.done, this._numSelected === 0, () => { void this._saveSelection(); }, this._translations.cancel, false, () => { void this._home(); })));
+    return (h("calcite-panel", null, this._getLabel(this._translations.stepTwoFull, true), this._getNotice(noticeText), h("div", null, h("map-select-tools", { bufferColor: this.bufferColor, bufferOutlineColor: this.bufferOutlineColor, class: "font-bold", customLabelEnabled: this.customLabelEnabled, defaultBufferDistance: this.defaultBufferDistance, defaultBufferUnit: this.defaultBufferUnit, enabledLayerIds: this.addresseeLayerIds, isUpdate: !!this._activeSelection, mapView: this.mapView, noResultText: this.noResultText, onSelectionSetChange: (evt) => this._updateForSelection(evt), ref: (el) => { this._selectTools = el; }, searchConfiguration: this._searchConfiguration, selectionLayerIds: this.selectionLayerIds, selectionSet: this._activeSelection, sketchLineSymbol: this.sketchLineSymbol, sketchPointSymbol: this.sketchPointSymbol, sketchPolygonSymbol: this.sketchPolygonSymbol })), this._getPageNavButtons(this._translations.done, this._numSelected === 0, () => { void this._saveSelection(); }, this._translations.cancel, false, () => { void this._home(); })));
   }
   /**
    * Create the main download page that has the shared aspects of both PDF and CSV
@@ -413,8 +461,8 @@ export class PublicNotification {
    */
   _getExportPage() {
     const hasSelections = this._hasSelections(this.showRefineSelection);
-    const numDuplicates = this._getNumDuplicates(this._getSelectedIds());
-    return (h("calcite-panel", null, h("div", null, this._getLabel(this._translations.export, false), hasSelections ? (h("div", null, this._getNotice(this._translations.exportTip, "padding-sides-1"), this._getLabel(this._translations.exportListsLabel), this._getExportSelectionLists(), h("div", { class: "padding-sides-1" }, h("div", { class: "display-flex" }, h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { ref: (el) => { this._removeDuplicates = el; } }), h("div", { class: "display-flex" }, this._translations.removeDuplicate, h("div", { class: "info-message padding-start-1-2" }, h("calcite-input-message", { class: "info-blue margin-top-0", scale: "m" }, ` ${this._translations.numDuplicates.replace("{{n}}", numDuplicates.toString())}`)))), h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "remove-duplicates-icon", scale: "s" })), h("calcite-popover", { closable: true, label: "", referenceElement: "remove-duplicates-icon" }, h("span", { class: "tooltip-message" }, this._translations.duplicatesTip))), h("div", { class: "border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("calcite-segmented-control", { class: "w-100", onCalciteSegmentedControlChange: (evt) => this._exportTypeChange(evt) }, h("calcite-segmented-control-item", { checked: this._exportType === EExportType.PDF, class: "w-50 end-border", value: EExportType.PDF }, this._translations.pdf), h("calcite-segmented-control-item", { checked: this._exportType === EExportType.CSV, class: "w-50", value: EExportType.CSV }, this._translations.csv))), h("div", { class: "padding-bottom-1" }, this._getExportOptions()), h("div", { class: "padding-1 display-flex" }, h("calcite-button", { disabled: !this._downloadActive, onClick: () => void this._export(), width: "full" }, this._translations.export)))) : (this._getNotice(this._translations.downloadNoLists, "padding-sides-1 padding-bottom-1")))));
+    const displayDuplicatesClass = this._numDuplicates > 0 ? "display-block" : "display-none";
+    return (h("calcite-panel", null, h("div", null, this._getLabel(this._translations.export, false), hasSelections ? (h("div", null, this._getNotice(this._translations.exportTip, "padding-sides-1"), this._getLabel(this._translations.exportListsLabel), this._getExportSelectionLists(), h("div", { class: "padding-sides-1 " + displayDuplicatesClass }, h("div", { class: "display-flex" }, h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { ref: (el) => { this._removeDuplicates = el; } }), h("div", { class: "display-flex" }, this._translations.removeDuplicate, h("div", { class: "info-message padding-start-1-2" }, h("calcite-input-message", { class: "info-blue margin-top-0", scale: "m" }, ` ${this._translations.numDuplicates.replace("{{n}}", this._numDuplicates.toString())}`)))), h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "remove-duplicates-icon", scale: "s" })), h("calcite-popover", { closable: true, label: "", referenceElement: "remove-duplicates-icon" }, h("span", { class: "tooltip-message" }, this._translations.duplicatesTip))), h("div", { class: "border-bottom" }), h("div", { class: "padding-top-sides-1" }, h("calcite-segmented-control", { class: "w-100", onCalciteSegmentedControlChange: (evt) => this._exportTypeChange(evt) }, h("calcite-segmented-control-item", { checked: this._exportType === EExportType.PDF, class: "w-50 end-border", value: EExportType.PDF }, this._translations.pdf), h("calcite-segmented-control-item", { checked: this._exportType === EExportType.CSV, class: "w-50", value: EExportType.CSV }, this._translations.csv))), h("div", { class: "padding-bottom-1" }, this._getExportOptions()), h("div", { class: "padding-1 display-flex" }, h("calcite-button", { disabled: !this._downloadActive, onClick: () => void this._export(), width: "full" }, this._translations.export)))) : (this._getNotice(this._translations.downloadNoLists, "padding-sides-1 padding-bottom-1")))));
   }
   /**
    * Store the user selected export type CSV || PDF
@@ -494,13 +542,14 @@ export class PublicNotification {
    */
   _getExportSelectionLists() {
     return this._selectionSets.reduce((prev, cur) => {
+      var _a;
       const ids = this._getSelectionSetIds(cur);
       const validSet = cur.workflowType !== EWorkflowType.REFINE || ids.length > 0;
       if (!this._downloadActive && cur.download && validSet) {
         this._downloadActive = true;
       }
       if (validSet) {
-        prev.push((h("div", { class: "display-flex padding-sides-1 padding-bottom-1" }, h("calcite-checkbox", { checked: cur.download, class: "align-center", onClick: () => { void this._toggleDownload(cur.id); } }), h("calcite-list", { class: "list-border margin-start-1-2 width-full", id: "download-list" }, h("calcite-list-item", { description: this._translations.selectedFeatures.replace("{{n}}", ids.length.toString()), disabled: !cur.download, label: cur.label, onClick: () => { void this._toggleDownload(cur.id); } })))));
+        prev.push((h("div", { class: "display-flex padding-sides-1 padding-bottom-1" }, h("calcite-checkbox", { checked: cur.download, class: "align-center", onClick: () => { void this._toggleDownload(cur.id); } }), h("calcite-list", { class: "list-border margin-start-1-2 width-full", id: "download-list" }, h("calcite-list-item", { disabled: !cur.download, label: cur.label, onClick: () => { void this._toggleDownload(cur.id); } }, h("div", { slot: "content" }, h("div", { class: "list-label" }, cur.label), h("div", { class: "list-description" }, (_a = cur === null || cur === void 0 ? void 0 : cur.layerView) === null || _a === void 0 ? void 0 : _a.layer.title), h("div", { class: "list-description" }, this._translations.selectedFeatures.replace("{{n}}", ids.length.toString()))))))));
       }
       return prev;
     }, []) || (h("div", null));
@@ -520,6 +569,7 @@ export class PublicNotification {
       return ss;
     });
     this._downloadActive = isActive;
+    this._numDuplicates = await this._getNumDuplicates();
     await this._highlightFeatures();
   }
   /**
@@ -1087,6 +1137,7 @@ export class PublicNotification {
       "_addTitle": {},
       "_downloadActive": {},
       "_exportType": {},
+      "_numDuplicates": {},
       "_pageType": {},
       "_saveEnabled": {},
       "_selectionSets": {},

package/dist/collection/demos/new-public-notification.html

@@ -55,12 +55,12 @@
 
     <link
       rel="stylesheet"
-      href="https://js.arcgis.com/4.25/esri/themes/light/main.css"
+      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
     />
     <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../solutions-components.css" type="text/css">
 
-    <script src="https://js.arcgis.com/4.25/"></script>
+    <script src="https://js.arcgis.com/4.27/"></script>
     <script type="module" src="../solutions-components.esm.js"></script>
 
     <script>
@@ -90,7 +90,8 @@
           });
           demo.mapView.ui.add(legend, "top-left");
         });
-        //demo.addresseeLayerIds = ["18434515eb8-layer-12"];
+        // solutions layer id
+        //demo.addresseeLayerIds = ["TaxParcels_3419"];
         //demo.defaultBufferDistance = 100;
         //demo.defaultBufferUnit = "kilometers";
         demo.featureEffect = {
@@ -99,7 +100,8 @@
         };
         demo.featureHighlightEnabled = true;
         demo.noResultText = "No results found";
-        //demo.selectionLayerIds = ["1843422bf6b-layer-7"];
+        // solutions layer id
+        //demo.selectionLayerIds = ["SiteAddresses_8878"];
         demo.showSearchSettings = true;
         demo.customLabelEnabled = true;
         // demo.bufferColor = [227, 0, 0, 0.8];

package/dist/collection/utils/downloadUtils.js

@@ -30,39 +30,52 @@ const lineSeparatorChar = "|";
 /**
  * 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 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 removeDuplicates When true a single label is generated when multiple featues have a shared address value
  * @param addColumnTitle Indicates if column headings should be included in output
  * @returns Promise resolving when function is done
  */
-export async function downloadCSV(selectionSetNames, layer, ids, formatUsingLayerPopup, removeDuplicates = false, addColumnTitle = false) {
-  const labels = await _prepareLabels(layer, ids, removeDuplicates, formatUsingLayerPopup, addColumnTitle);
-  exportCSV(_createFilename(selectionSetNames), labels);
+export async function downloadCSV(exportInfos, formatUsingLayerPopup, removeDuplicates = false, addColumnTitle = false) {
+  let labels = await consolidateLabels(exportInfos, formatUsingLayerPopup, addColumnTitle, true);
+  labels = removeDuplicates ? removeDuplicateLabels(labels) : labels;
+  const layerIds = Object.keys(exportInfos);
+  let layerLabels = [];
+  labels.forEach(label => {
+    const id = label[0];
+    // layerIds are stored as value separator at the end of the values for a given layer
+    if (layerIds.indexOf(id) < 0) {
+      layerLabels.push(label);
+    }
+    else {
+      const selectionSetNames = _getSelectionSetNames(exportInfos, new RegExp(`\\b${id}\\b`));
+      // once we see the layerId we have reached the end of it's values and should export
+      exportCSV(_createFilename(selectionSetNames), layerLabels);
+      layerLabels = [];
+    }
+  });
   return Promise.resolve();
 }
 /**
  * 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 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
  * @param title Title for each page
  * @param initialImageDataUrl Data URL of image for first page
  * @returns Promise resolving when function is done
  */
-export async function downloadPDF(selectionSetNames, layer, ids, labelPageDescription, removeDuplicates = false, title = "", initialImageDataUrl = "") {
-  let labels = await _prepareLabels(layer, ids, removeDuplicates);
+export async function downloadPDF(exportInfos, labelPageDescription, removeDuplicates = false, title = "", initialImageDataUrl = "") {
+  let labels = await consolidateLabels(exportInfos);
+  const selectionSetNames = _getSelectionSetNames(exportInfos);
   labels =
     // Remove empty lines in labels
     labels.map(labelLines => labelLines.filter(line => line.length > 0))
       // Remove empty labels
       .filter(label => label.length > 0);
+  labels = removeDuplicates ? removeDuplicateLabels(labels) : labels;
   exportPDF(_createFilename(selectionSetNames), labels, labelPageDescription, title, initialImageDataUrl);
   return Promise.resolve();
 }
@@ -281,13 +294,12 @@ function _prepareAttributeValue(attributeValue, attributeType, attributeDomain,
  *
  * @param layer Layer from which to fetch features
  * @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 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 Promise resolving when function is done
  */
-async function _prepareLabels(layer, ids, removeDuplicates = true, formatUsingLayerPopup = true, includeHeaderNames = false) {
+async function _prepareLabels(layer, ids, formatUsingLayerPopup = true, includeHeaderNames = false) {
   var _a, _b, _c, _d, _e, _f;
   const [intl] = await loadModules(["esri/intl"]);
   // Get the features to export
@@ -412,12 +424,6 @@ async function _prepareLabels(layer, ids, removeDuplicates = true, formatUsingLa
       });
     });
   }
-  // Remove duplicates
-  if (removeDuplicates) {
-    const labelsAsStrings = labels.map(label => JSON.stringify(label));
-    const uniqueLabels = new Set(labelsAsStrings);
-    labels = Array.from(uniqueLabels, labelString => JSON.parse(labelString));
-  }
   // Add header names
   if (includeHeaderNames) {
     let headerNames = [];
@@ -434,4 +440,53 @@ async function _prepareLabels(layer, ids, removeDuplicates = true, formatUsingLa
   }
   return Promise.resolve(labels);
 }
+/**
+ * Remove any duplicate labels
+ *
+ * @param labels Labels to evaluate for duplicates
+ * @returns labels with duplicates removed
+ */
+export function removeDuplicateLabels(labels) {
+  const labelsAsStrings = labels.map(label => JSON.stringify(label));
+  const uniqueLabels = new Set(labelsAsStrings);
+  return Array.from(uniqueLabels, labelString => JSON.parse(labelString));
+}
+/**
+ * Extract selectionSetNames from the provided exportInfos
+ *
+ * @param exportInfos Key details about what to export (ids, layer, and selectionSetNames)
+ * @returns selectionSetNames that will be used for export filenames
+ */
+function _getSelectionSetNames(exportInfos, id = /.+/) {
+  let selectionSetNames = [];
+  Object.keys(exportInfos).forEach(k => {
+    const exportInfo = exportInfos[k];
+    if (id.test(k)) {
+      selectionSetNames = selectionSetNames.concat(exportInfo.selectionSetNames);
+    }
+  });
+  return selectionSetNames;
+}
+/**
+ * Create and consolidate labels from all layers
+ *
+ * @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
+ */
+export async function consolidateLabels(exportInfos, formatUsingLayerPopup = true, includeHeaderNames = false, isCSVExport = false) {
+  const labelRequests = [];
+  Object.keys(exportInfos).forEach(k => {
+    const labelInfo = exportInfos[k];
+    labelRequests.push(_prepareLabels(labelInfo.layerView.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]]));
+    }
+  });
+  const labels = await Promise.all(labelRequests);
+  return labels.reduce((prev, cur) => prev.concat(cur), []);
+}
 //#endregion

package/dist/collection/utils/downloadUtils.ts

@@ -20,6 +20,7 @@ import { exportCSV } from "./csvUtils";
 import { ILabel, exportPDF } from "./pdfUtils";
 import { loadModules } from "./loadModules";
 import { queryFeaturesByID } from "./queryUtils";
+import { IExportInfo, IExportInfos } from "../utils/interfaces";
 
 export { ILabel } from "./pdfUtils";
 
@@ -70,9 +71,7 @@ const lineSeparatorChar = "|";
 /**
  * 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 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 removeDuplicates When true a single label is generated when multiple featues have a shared address value
@@ -80,16 +79,30 @@ const lineSeparatorChar = "|";
  * @returns Promise resolving when function is done
  */
 export async function downloadCSV(
-  selectionSetNames: string[],
-  layer: __esri.FeatureLayer,
-  ids: number[],
+  exportInfos: IExportInfos,
   formatUsingLayerPopup: boolean,
   removeDuplicates = false,
   addColumnTitle = false
 ): Promise<void> {
-  const labels = await _prepareLabels(layer, ids, removeDuplicates, formatUsingLayerPopup, addColumnTitle);
+  let labels = await consolidateLabels(exportInfos, formatUsingLayerPopup, addColumnTitle, true);
+  labels = removeDuplicates ? removeDuplicateLabels(labels) : labels;
+
+  const layerIds = Object.keys(exportInfos);
+
+  let layerLabels = [];
+  labels.forEach(label => {
+    const id = label[0];
+    // layerIds are stored as value separator at the end of the values for a given layer
+    if (layerIds.indexOf(id) < 0) {
+      layerLabels.push(label);
+    } else {
+      const selectionSetNames = _getSelectionSetNames(exportInfos, new RegExp(`\\b${id}\\b`));
 
-  exportCSV(_createFilename(selectionSetNames), labels);
+      // once we see the layerId we have reached the end of it's values and should export
+      exportCSV(_createFilename(selectionSetNames), layerLabels);
+      layerLabels = [];
+    }
+  });
 
   return Promise.resolve();
 }
@@ -97,9 +110,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 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
  * @param title Title for each page
@@ -107,15 +118,14 @@ export async function downloadCSV(
  * @returns Promise resolving when function is done
  */
 export async function downloadPDF(
-  selectionSetNames: string[],
-  layer: __esri.FeatureLayer,
-  ids: number[],
+  exportInfos: IExportInfos,
   labelPageDescription: ILabel,
   removeDuplicates = false,
   title = "",
   initialImageDataUrl = ""
 ): Promise<void> {
-  let labels = await _prepareLabels(layer, ids, removeDuplicates);
+  let labels = await consolidateLabels(exportInfos);
+  const selectionSetNames = _getSelectionSetNames(exportInfos);
 
   labels =
     // Remove empty lines in labels
@@ -123,6 +133,8 @@ export async function downloadPDF(
     // Remove empty labels
     .filter(label => label.length > 0);
 
+  labels = removeDuplicates ? removeDuplicateLabels(labels) : labels;
+
   exportPDF(_createFilename(selectionSetNames), labels, labelPageDescription, title, initialImageDataUrl);
 
   return Promise.resolve();
@@ -395,7 +407,6 @@ function _prepareAttributeValue(
  *
  * @param layer Layer from which to fetch features
  * @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 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
@@ -404,7 +415,6 @@ function _prepareAttributeValue(
 async function _prepareLabels(
   layer: __esri.FeatureLayer,
   ids: number[],
-  removeDuplicates = true,
   formatUsingLayerPopup = true,
   includeHeaderNames = false
 ): Promise<string[][]> {
@@ -584,15 +594,6 @@ async function _prepareLabels(
     );
   }
 
-  // Remove duplicates
-  if (removeDuplicates) {
-    const labelsAsStrings: string[] = labels.map(label => JSON.stringify(label));
-    const uniqueLabels = new Set(labelsAsStrings);
-    labels = Array.from(uniqueLabels,
-      labelString => JSON.parse(labelString)
-    );
-  }
-
   // Add header names
   if (includeHeaderNames) {
     let headerNames = [];
@@ -613,4 +614,70 @@ async function _prepareLabels(
   return Promise.resolve(labels);
 }
 
+/**
+ * Remove any duplicate labels
+ *
+ * @param labels Labels to evaluate for duplicates
+ * @returns labels with duplicates removed
+ */
+export function removeDuplicateLabels(
+  labels: string[][]
+): string[][] {
+  const labelsAsStrings: string[] = labels.map(label => JSON.stringify(label));
+  const uniqueLabels = new Set(labelsAsStrings);
+  return Array.from(uniqueLabels,
+    labelString => JSON.parse(labelString)
+  );
+}
+
+/**
+ * Extract selectionSetNames from the provided exportInfos
+ *
+ * @param exportInfos Key details about what to export (ids, layer, and selectionSetNames)
+ * @returns selectionSetNames that will be used for export filenames
+ */
+function _getSelectionSetNames(
+  exportInfos: IExportInfos,
+  id = /.+/
+): string[] {
+  let selectionSetNames: string[] = [];
+  Object.keys(exportInfos).forEach(k => {
+    const exportInfo: IExportInfo = exportInfos[k];
+    if (id.test(k)) {
+      selectionSetNames = selectionSetNames.concat(exportInfo.selectionSetNames);
+    }
+  });
+  return selectionSetNames;
+}
+
+/**
+ * Create and consolidate labels from all layers
+ *
+ * @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
+ */
+export async function consolidateLabels(
+  exportInfos: IExportInfos,
+  formatUsingLayerPopup = true,
+  includeHeaderNames = false,
+  isCSVExport = false
+): Promise<string[][]> {
+  const labelRequests = [];
+
+  Object.keys(exportInfos).forEach(k => {
+    const labelInfo: IExportInfo = exportInfos[k];
+    labelRequests.push(_prepareLabels(labelInfo.layerView.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]]));
+    }
+  });
+
+  const labels = await Promise.all(labelRequests);
+  return labels.reduce((prev, cur) => prev.concat(cur), []);
+}
+
 //#endregion

package/dist/collection/utils/interfaces.ts

@@ -437,10 +437,10 @@ export interface IMapInfo {
 }
 
 export interface IExportInfos {
-  [key: string]: IExportLayerInfo;
+  [key: string]: IExportInfo;
 }
 
-export interface IExportLayerInfo {
+export interface IExportInfo {
   ids: number[],
   layerView: __esri.FeatureLayerView
   selectionSetNames: string[]

package/dist/components/buffer-tools2.js

@@ -14,7 +14,7 @@ import { d as defineCustomElement$3 } from './progress.js';
 import { d as defineCustomElement$2 } from './select.js';
 import { d as defineCustomElement$1 } from './slider.js';
 
-const bufferToolsCss = ":host{display:block}.c-container{display:inline-flex}.flex-1{flex:\"1\"}.padding-end-1{-webkit-padding-end:1rem;padding-inline-end:1rem}";
+const bufferToolsCss = ":host{display:block}.c-container{display:inline-flex}.flex-1{flex:\"1\"}.padding-end-1{-webkit-padding-end:1rem;padding-inline-end:1rem}.w-50{width:50%}";
 
 const BufferTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -175,7 +175,7 @@ const BufferTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
    * @protected
    */
   _getTextBoxDisplay() {
-    return (h("div", { class: "c-container" }, h("calcite-input", { class: "padding-end-1", max: this.max && this.max > 0 ? this.max : undefined, min: this.min, "number-button-type": "vertical", onCalciteInputInput: (evt) => this._setDistance(evt), placeholder: "0", type: "number", value: this.distance ? this.distance.toString() : undefined }), h("calcite-select", { class: "flex-1", label: "label", onCalciteSelectChange: () => this._setUnit(this._unitElement.value), ref: (el) => { this._unitElement = el; } }, this._getUnits())));
+    return (h("div", { class: "c-container" }, h("calcite-input", { class: "padding-end-1 w-50", max: this.max && this.max > 0 ? this.max : undefined, min: this.min, "number-button-type": "vertical", onCalciteInputInput: (evt) => this._setDistance(evt), placeholder: "0", type: "number", value: this.distance ? this.distance.toString() : undefined }), h("calcite-select", { class: "flex-1 w-50", label: "label", onCalciteSelectChange: () => this._setUnit(this._unitElement.value), ref: (el) => { this._unitElement = el; } }, this._getUnits())));
   }
   /**
    * Render distance control as a slider