@esri/solutions-components 0.5.0 → 0.5.2

package/dist/collection/components/map-select-tools/map-select-tools.js

@@ -40,13 +40,16 @@ export class MapSelectTools {
     this.enabledLayerIds = [];
     this.defaultBufferDistance = undefined;
     this.defaultBufferUnit = undefined;
-    this.geometries = undefined;
+    this.geometries = [];
     this.isUpdate = false;
     this.mapView = undefined;
     this.searchConfiguration = undefined;
     this.selectionSet = undefined;
     this.selectLayerView = undefined;
     this.showBufferTools = true;
+    this.sketchLineSymbol = undefined;
+    this.sketchPointSymbol = undefined;
+    this.sketchPolygonSymbol = undefined;
     this._layerSelectChecked = undefined;
     this._searchTerm = undefined;
     this._translations = undefined;
@@ -193,7 +196,7 @@ export class MapSelectTools {
     const useDrawClass = !this._layerSelectChecked && !searchEnabled ? " div-visible" : " div-not-visible";
     const showLayerChoiceClass = searchEnabled ? "div-not-visible" : "div-visible";
     const bufferDistance = typeof ((_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.distance) === "number" ? this.selectionSet.distance : this.defaultBufferDistance;
-    return (h(Host, null, h("div", { class: "padding-bottom-1" }, h("calcite-radio-group", { class: "w-100", onCalciteRadioGroupChange: (evt) => this._workflowChange(evt) }, h("calcite-radio-group-item", { checked: searchEnabled, class: "w-50 end-border", value: EWorkflowType.SEARCH }, this._translations.search), h("calcite-radio-group-item", { checked: drawEnabled, class: "w-50", value: EWorkflowType.SKETCH }, this._translations.sketch))), h("div", { class: showSearchClass }, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } })), h("div", { class: showLayerChoiceClass }, h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { checked: this._layerSelectChecked, onCalciteCheckboxChange: () => this._layerSelectChanged(), ref: (el) => this._selectFromLayerElement = el }), "Use layer features")), h("div", { class: useDrawClass }, h("map-draw-tools", { active: true, border: true, mapView: this.mapView, ref: (el) => { this._drawTools = el; } })), h("div", { class: useSelectClass }, h("refine-selection-tools", { active: true, border: true, enabledLayerIds: this.enabledLayerIds, layerView: this.selectLayerView, layerViews: this._refineSelectLayers, mapView: this.mapView, mode: ESelectionMode.ADD, ref: (el) => { this._refineTools = el; }, refineMode: ERefineMode.SUBSET })), h("calcite-label", { class: showBufferToolsClass }, this._translations.searchDistance, h("buffer-tools", { distance: bufferDistance, geometries: this.geometries, onBufferComplete: (evt) => this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.unit) || this.defaultBufferUnit })), h("slot", null)));
+    return (h(Host, null, h("div", { class: "padding-bottom-1" }, h("calcite-radio-group", { class: "w-100", onCalciteRadioGroupChange: (evt) => this._workflowChange(evt) }, h("calcite-radio-group-item", { checked: searchEnabled, class: "w-50 end-border", value: EWorkflowType.SEARCH }, this._translations.search), h("calcite-radio-group-item", { checked: drawEnabled, class: "w-50", value: EWorkflowType.SKETCH }, this._translations.sketch))), h("div", { class: showSearchClass }, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } })), h("div", { class: showLayerChoiceClass }, h("calcite-label", { layout: "inline" }, h("calcite-checkbox", { checked: this._layerSelectChecked, onCalciteCheckboxChange: () => this._layerSelectChanged(), ref: (el) => this._selectFromLayerElement = el }), "Use layer features")), h("div", { class: useDrawClass }, h("map-draw-tools", { active: true, border: true, mapView: this.mapView, pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, ref: (el) => { this._drawTools = el; } })), h("div", { class: useSelectClass }, h("refine-selection-tools", { active: true, border: true, enabledLayerIds: this.enabledLayerIds, layerView: this.selectLayerView, layerViews: this._refineSelectLayers, mapView: this.mapView, mode: ESelectionMode.ADD, ref: (el) => { this._refineTools = el; }, refineMode: ERefineMode.SUBSET })), h("calcite-label", { class: showBufferToolsClass }, this._translations.searchDistance, h("buffer-tools", { distance: bufferDistance, geometries: this.geometries, onBufferComplete: (evt) => this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.unit) || this.defaultBufferUnit })), h("slot", null)));
   }
   //--------------------------------------------------------------------------
   //
@@ -228,7 +231,7 @@ export class MapSelectTools {
    */
   async _init() {
     this._initGraphicsLayer();
-    this._initSelectionSet();
+    await this._initSelectionSet();
     this._initSearchWidget();
   }
   /**
@@ -236,7 +239,7 @@ export class MapSelectTools {
    *
    * @protected
    */
-  _initSelectionSet() {
+  async _initSelectionSet() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     if (this.selectionSet) {
       this._searchTerm = (_b = (_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.searchResult) === null || _b === void 0 ? void 0 : _b.name;
@@ -251,7 +254,7 @@ export class MapSelectTools {
       ];
       // reset selection label base
       this._selectionLabel = ((_k = this.selectionSet) === null || _k === void 0 ? void 0 : _k.label) || this._getSelectionBaseLabel();
-      void goToSelection(this.selectionSet.selectedIds, this.selectionSet.layerView, this.mapView, false);
+      await goToSelection(this.selectionSet.selectedIds, this.selectionSet.layerView, this.mapView, false);
     }
     else {
       this._workflowType = EWorkflowType.SEARCH;
@@ -358,7 +361,7 @@ export class MapSelectTools {
       this._bufferGraphicsLayer = this.mapView.map.layers.getItemAt(bufferIndex);
     }
     else {
-      this._bufferGraphicsLayer = new this.GraphicsLayer({ title });
+      this._bufferGraphicsLayer = new this.GraphicsLayer({ title, listMode: "hide" });
       state.managedLayers.push(title);
       const sketchIndex = this.mapView.map.layers.findIndex((l) => l.title === this._translations.sketchLayer);
       if (sketchIndex > -1) {
@@ -427,17 +430,16 @@ export class MapSelectTools {
     this.selectionLoadingChange.emit(false);
     // Add geometries used for selecting features as graphics
     this._drawTools.graphics = this.geometries.map(geom => {
-      var _a, _b, _c;
       const props = {
         "geometry": geom,
         "symbol": geom.type === "point" ?
-          (_a = this._drawTools) === null || _a === void 0 ? void 0 : _a.pointSymbol : geom.type === "polyline" ?
-          (_b = this._drawTools) === null || _b === void 0 ? void 0 : _b.polylineSymbol : geom.type === "polygon" ?
-          (_c = this._drawTools) === null || _c === void 0 ? void 0 : _c.polygonSymbol : undefined
+          this.sketchPointSymbol : geom.type === "polyline" ?
+          this.sketchLineSymbol : geom.type === "polygon" ?
+          this.sketchPolygonSymbol : undefined
       };
       return new this.Graphic(props);
     });
-    void this._highlightFeatures(this._selectedIds);
+    await this._highlightFeatures(this._selectedIds);
   }
   /**
    * Query the selectLayerView based on any user drawn geometries or buffers
@@ -466,8 +468,8 @@ export class MapSelectTools {
       });
       this._bufferGraphicsLayer.removeAll();
       this._bufferGraphicsLayer.add(polygonGraphic);
-      void this._selectFeatures([this._bufferGeometry]);
-      void this.mapView.goTo(polygonGraphic.geometry.extent);
+      await this._selectFeatures([this._bufferGeometry]);
+      await this.mapView.goTo(polygonGraphic.geometry.extent);
     }
     else {
       if (this._bufferGraphicsLayer) {
@@ -511,7 +513,7 @@ export class MapSelectTools {
     // for sketch
     // checking for clear as it would throw off tests
     if ((_b = this._drawTools) === null || _b === void 0 ? void 0 : _b.clear) {
-      void this._drawTools.clear();
+      await this._drawTools.clear();
     }
     this.selectionSetChange.emit(this._selectedIds.length);
   }
@@ -664,7 +666,8 @@ export class MapSelectTools {
         "docs": {
           "tags": [],
           "text": "esri/geometry: https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry.html"
-        }
+        },
+        "defaultValue": "[]"
       },
       "isUpdate": {
         "type": "boolean",
@@ -779,6 +782,63 @@ export class MapSelectTools {
         "attribute": "show-buffer-tools",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "sketchLineSymbol": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "__esri.SimpleLineSymbol",
+          "resolved": "SimpleLineSymbol",
+          "references": {
+            "___esri": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "esri/symbols/SimpleLineSymbol | JSON representation : https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleLineSymbol.html"
+        }
+      },
+      "sketchPointSymbol": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "__esri.SimpleMarkerSymbol",
+          "resolved": "SimpleMarkerSymbol",
+          "references": {
+            "___esri": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "esri/symbols/SimpleMarkerSymbol | JSON representation: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleMarkerSymbol.html"
+        }
+      },
+      "sketchPolygonSymbol": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "__esri.SimpleFillSymbol",
+          "resolved": "SimpleFillSymbol",
+          "references": {
+            "___esri": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "esri/symbols/SimpleFillSymbol | JSON representation: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html"
+        }
       }
     };
   }

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

@@ -42,6 +42,9 @@ export class PublicNotification {
     this.selectionLayerIds = [];
     this.showRefineSelection = false;
     this.showSearchSettings = true;
+    this.sketchLineSymbol = undefined;
+    this.sketchPointSymbol = undefined;
+    this.sketchPolygonSymbol = undefined;
     this.addresseeLayer = undefined;
     this._downloadActive = true;
     this._numSelected = 0;
@@ -83,14 +86,27 @@ export class PublicNotification {
     }
   }
   /**
-   * Called each time the selectionSets prop is changed.
+   * Called each time the sketchLineSymbol prop is changed.
    */
-  async selectionSetsWatchHandler(v, oldV) {
-    if (v && v !== oldV && v.length > 0) {
-      const nonRefineSets = v.filter(ss => ss.workflowType !== EWorkflowType.REFINE);
-      if (nonRefineSets.length === 0) {
-        this._selectionSets = [];
-      }
+  async sketchLineSymbolWatchHandler(v, oldV) {
+    if (v && JSON.stringify(v) !== JSON.stringify(oldV)) {
+      this._setLineSymbol(v);
+    }
+  }
+  /**
+   * Called each time the sketchPointSymbol prop is changed.
+   */
+  async sketchPointSymbolWatchHandler(v, oldV) {
+    if (v && JSON.stringify(v) !== JSON.stringify(oldV)) {
+      this._setPointSymbol(v);
+    }
+  }
+  /**
+   * Called each time the sketchPolygonSymbol prop is changed.
+   */
+  async sketchPolygonSymbolWatchHandler(v, oldV) {
+    if (v && JSON.stringify(v) !== JSON.stringify(oldV)) {
+      this._setPolygonSymbol(v);
     }
   }
   /**
@@ -150,6 +166,7 @@ export class PublicNotification {
   async componentWillLoad() {
     await this._getTranslations();
     await this._initModules();
+    this._initSymbols();
   }
   /**
    * Renders the component.
@@ -170,10 +187,84 @@ export class PublicNotification {
    * @protected
    */
   async _initModules() {
-    const [geometryEngine] = await loadModules([
-      "esri/geometry/geometryEngine"
+    const [geometryEngine, jsonUtils] = await loadModules([
+      "esri/geometry/geometryEngine",
+      "esri/symbols/support/jsonUtils"
     ]);
     this._geometryEngine = geometryEngine;
+    this._jsonUtils = jsonUtils;
+  }
+  /**
+   * Initialize the default symbols that will be used when creating new graphics
+   *
+   * @protected
+   */
+  _initSymbols() {
+    this._setLineSymbol(this.sketchLineSymbol);
+    this._setPointSymbol(this.sketchPointSymbol);
+    this._setPolygonSymbol(this.sketchPolygonSymbol);
+  }
+  /**
+   * Convert a JSON representation of a line symbol and/or set the line symbol
+   *
+   * @param v SimpleLineSymbol or a JSON representation of a line symbol
+   *
+   * @protected
+   */
+  _setLineSymbol(v) {
+    const isSymbol = (v === null || v === void 0 ? void 0 : v.type) === 'simple-line';
+    this.sketchLineSymbol = isSymbol ? v : this._jsonUtils.fromJSON(v ? v : {
+      "type": "esriSLS",
+      "color": [130, 130, 130, 255],
+      "width": 2,
+      "style": "esriSLSSolid"
+    });
+  }
+  /**
+   * Convert a JSON representation of a point symbol and/or set the point symbol
+   *
+   * @param v SimpleMarkerSymbol or a JSON representation of a point symbol
+   *
+   * @protected
+   */
+  _setPointSymbol(v) {
+    const isSymbol = (v === null || v === void 0 ? void 0 : v.type) === 'simple-marker';
+    this.sketchPointSymbol = isSymbol ? v : this._jsonUtils.fromJSON(v ? v : {
+      "type": "esriSMS",
+      "color": [255, 255, 255, 255],
+      "angle": 0,
+      "xoffset": 0,
+      "yoffset": 0,
+      "size": 6,
+      "style": "esriSMSCircle",
+      "outline": {
+        "type": "esriSLS",
+        "color": [50, 50, 50, 255],
+        "width": 1,
+        "style": "esriSLSSolid"
+      }
+    });
+  }
+  /**
+   * Convert a JSON representation of a polygon symbol and/or set the polygon symbol
+   *
+   * @param v SimpleFillSymbol or a JSON representation of a polygon symbol
+   *
+   * @protected
+   */
+  _setPolygonSymbol(v) {
+    const isSymbol = (v === null || v === void 0 ? void 0 : v.type) === 'simple-fill';
+    this.sketchPolygonSymbol = isSymbol ? v : this._jsonUtils.fromJSON(v ? v : {
+      "type": "esriSFS",
+      "color": [150, 150, 150, 51],
+      "outline": {
+        "type": "esriSLS",
+        "color": [50, 50, 50, 255],
+        "width": 2,
+        "style": "esriSLSSolid"
+      },
+      "style": "esriSFSSolid"
+    });
   }
   /**
    * Get a calcite action group for the current action
@@ -236,7 +327,7 @@ export class PublicNotification {
    * @protected
    */
   _getListPage() {
-    const hasSets = this._selectionSets.filter(ss => ss.workflowType !== EWorkflowType.REFINE).length > 0;
+    const hasSets = this._hasSelections();
     const total = utils.getTotal(this._selectionSets);
     return hasSets ? (h("calcite-panel", null, h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "font-bold" }, this._translations.myLists)), this._getNotice(this._translations.listHasSetsTip, "padding-sides-1 padding-bottom-1"), this._getMapLayerPicker(), h("div", { class: "display-block padding-sides-1 height-1-1-2" }, h("div", { class: "display-block float-left" }, h("calcite-label", { alignment: "start", class: "font-bold" }, this._translations.notifications)), h("div", { class: "display-block float-right" }, h("calcite-input-message", { active: true, class: "info-blue margin-top-0", scale: "m" }, this._translations.uniqueCout.replace("{{n}}", total.toString())))), hasSets ? this._getSelectionSetList() : (h("div", { class: "info-message" }, h("calcite-input-message", { active: true, class: "info-blue", scale: "m" }, this._translations.noNotifications))), h("div", { class: "display-flex padding-1" }, h("calcite-button", { onClick: () => { this._setPageType(EPageType.SELECT); }, width: "full" }, this._translations.add)), this._showModal(this._showLayerSelectionChangeModal))) : (h("calcite-panel", null, h("div", { class: "padding-top-sides-1" }, h("calcite-label", { class: "font-bold" }, this._translations.myLists)), h("div", { class: "padding-sides-1" }, h("calcite-label", null, this._translations.notifications)), h("div", { class: "info-message padding-bottom-1" }, h("calcite-input-message", { active: true, class: "info-blue", scale: "m" }, this._translations.noNotifications)), this._getNotice(this._translations.selectLayerAndAdd, "padding-sides-1 padding-bottom-1"), this._getMapLayerPicker(), h("div", { class: "display-flex padding-1" }, h("calcite-button", { onClick: () => { this._setPageType(EPageType.SELECT); }, width: "full" }, this._translations.add))));
   }
@@ -261,7 +352,8 @@ export class PublicNotification {
     // REFINE is handled seperately from the core selection sets
     // You can only access after clicking the refine action
     this._selectionSets.reduce((prev, cur, i) => {
-      if (cur.workflowType !== EWorkflowType.REFINE) {
+      const validSet = this._isValidSet(cur);
+      if (validSet) {
         prev.push((h("calcite-list-item", { description: this._translations.selectedFeatures.replace("{{n}}", cur.selectedIds.length.toString()), label: cur.label, onClick: () => this._gotoSelection(cur, this.mapView) }, 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;
@@ -302,14 +394,38 @@ export class PublicNotification {
     await this._updateAddresseeLayer(id);
   }
   /**
-   * Check if any selection sets exist.
+   * Check if any valid selection sets exist.
    *
-   * @returns true if selection sets exist
+   * @returns true if valid selection sets exist
    *
    * @protected
    */
   _hasSelections() {
-    return this._selectionSets.length > 0;
+    return this._selectionSets.filter(ss => this._isValidSet(ss)).length > 0;
+  }
+  /**
+   * Check if any duplicates exist
+   *
+   * @returns true if duplicates are found
+   *
+   * @protected
+   */
+  _hasDuplicates() {
+    const selectedIds = this._selectionSets.reduce((prev, cur) => {
+      return prev.concat(cur.download ? cur.selectedIds : []);
+    }, []);
+    return selectedIds.length > new Set(selectedIds).size;
+  }
+  /**
+   * Check if a selection set is valid (exists or has at least one added if its a refine set)
+   *
+   * @returns true if selection set is valid
+   *
+   * @protected
+   */
+  _isValidSet(ss) {
+    var _a, _b;
+    return ss.workflowType === EWorkflowType.REFINE ? ((_b = (_a = ss === null || ss === void 0 ? void 0 : ss.refineIds) === null || _a === void 0 ? void 0 : _a.addIds) === null || _b === void 0 ? void 0 : _b.length) > 0 : true;
   }
   /**
    * Create the Select page that shows the selection workflows
@@ -331,7 +447,7 @@ export class PublicNotification {
     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 :
+    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, sketchLineSymbol: this.sketchLineSymbol, sketchPointSymbol: this.sketchPointSymbol, sketchPolygonSymbol: this.sketchPolygonSymbol })), 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);
@@ -378,7 +494,8 @@ export class PublicNotification {
   _getDownloadPage(type) {
     const isPdf = type === EExportType.PDF;
     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("div", { class: "padding-top-sides-1" }, 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", { class: isPdf ? "display-none" : "", layout: "inline" }, h("calcite-checkbox", { disabled: !this._downloadActive, ref: (el) => { this._removeDuplicatesCSV = el; } }), this._translations.removeDuplicate), h("calcite-label", { class: isPdf ? "" : "display-none", layout: "inline" }, h("calcite-checkbox", { disabled: !this._downloadActive, ref: (el) => { this._removeDuplicatesPDF = 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")))));
+    const hasDuplicates = this._hasDuplicates();
+    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("div", { class: "padding-top-sides-1" }, 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", { class: isPdf ? "display-none" : "", disabled: !hasDuplicates, layout: "inline" }, h("calcite-checkbox", { disabled: !hasDuplicates, ref: (el) => { this._removeDuplicatesCSV = el; } }), this._translations.removeDuplicate), h("calcite-label", { class: isPdf ? "" : "display-none", disabled: !hasDuplicates, layout: "inline" }, h("calcite-checkbox", { disabled: !hasDuplicates, ref: (el) => { this._removeDuplicatesPDF = 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
@@ -428,7 +545,8 @@ export class PublicNotification {
    */
   _getSelectionLists() {
     return this._selectionSets.reduce((prev, cur) => {
-      if (cur.workflowType !== EWorkflowType.REFINE) {
+      const validSet = this._isValidSet(cur);
+      if (validSet) {
         if (!this._downloadActive && cur.download) {
           this._downloadActive = true;
         }
@@ -591,7 +709,7 @@ export class PublicNotification {
    * @protected
    */
   async _updateSelectionSets(layerView) {
-    const _selectionSets = this._selectionSets.filter(selectionSet => selectionSet.workflowType !== EWorkflowType.REFINE);
+    const _selectionSets = this._selectionSets;
     const oidDefs = [];
     _selectionSets.forEach(selectionSet => {
       selectionSet.layerView = layerView;
@@ -675,11 +793,16 @@ export class PublicNotification {
    */
   _openSelection(selectionSet, evt) {
     evt.stopPropagation();
-    this._activeSelection = selectionSet;
-    this._distance = this._activeSelection.distance;
-    this._unit = this._activeSelection.unit;
-    this._customLabel = this._activeSelection.label;
-    this._pageType = EPageType.SELECT;
+    if (selectionSet.workflowType === EWorkflowType.REFINE) {
+      this._pageType = EPageType.REFINE;
+    }
+    else {
+      this._activeSelection = selectionSet;
+      this._distance = this._activeSelection.distance;
+      this._unit = this._activeSelection.unit;
+      this._customLabel = this._activeSelection.label;
+      this._pageType = EPageType.SELECT;
+    }
   }
   /**
    * Highlight any selected features in the map
@@ -988,6 +1111,69 @@ export class PublicNotification {
         "attribute": "show-search-settings",
         "reflect": false,
         "defaultValue": "true"
+      },
+      "sketchLineSymbol": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "__esri.SimpleLineSymbol | any",
+          "resolved": "any",
+          "references": {
+            "___esri": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "esri/symbols/SimpleLineSymbol | JSON representation : https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleLineSymbol.html\r\n\r\nA JSON representation of the instance in the ArcGIS format.\r\nSee the ArcGIS REST API documentation for examples of the structure of various input JSON objects.\r\nhttps://developers.arcgis.com/documentation/common-data-types/symbol-objects.htm"
+        },
+        "attribute": "sketch-line-symbol",
+        "reflect": false
+      },
+      "sketchPointSymbol": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "__esri.SimpleMarkerSymbol | any",
+          "resolved": "any",
+          "references": {
+            "___esri": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "esri/symbols/SimpleMarkerSymbol | JSON representation: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleMarkerSymbol.html\r\n\r\nA JSON representation of the instance in the ArcGIS format.\r\nSee the ArcGIS REST API documentation for examples of the structure of various input JSON objects.\r\nhttps://developers.arcgis.com/documentation/common-data-types/symbol-objects.htm"
+        },
+        "attribute": "sketch-point-symbol",
+        "reflect": false
+      },
+      "sketchPolygonSymbol": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "__esri.SimpleFillSymbol | any",
+          "resolved": "any",
+          "references": {
+            "___esri": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "esri/symbols/SimpleFillSymbol | JSON representation: https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-SimpleFillSymbol.html\r\n\r\nA JSON representation of the instance in the ArcGIS format.\r\nSee the ArcGIS REST API documentation for examples of the structure of various input JSON objects.\r\nhttps://developers.arcgis.com/documentation/common-data-types/symbol-objects.htm"
+        },
+        "attribute": "sketch-polygon-symbol",
+        "reflect": false
       }
     };
   }
@@ -1053,8 +1239,14 @@ export class PublicNotification {
         "propName": "searchConfiguration",
         "methodName": "watchSearchConfigurationHandler"
       }, {
-        "propName": "_selectionSets",
-        "methodName": "selectionSetsWatchHandler"
+        "propName": "sketchLineSymbol",
+        "methodName": "sketchLineSymbolWatchHandler"
+      }, {
+        "propName": "sketchPointSymbol",
+        "methodName": "sketchPointSymbolWatchHandler"
+      }, {
+        "propName": "sketchPolygonSymbol",
+        "methodName": "sketchPolygonSymbolWatchHandler"
       }, {
         "propName": "_pageType",
         "methodName": "pageTypeWatchHandler"

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

@@ -205,7 +205,7 @@ export class RefineSelectionTools {
       this._sketchGraphicsLayer = this.mapView.map.layers.getItemAt(sketchIndex);
     }
     else {
-      this._sketchGraphicsLayer = new this.GraphicsLayer({ title });
+      this._sketchGraphicsLayer = new this.GraphicsLayer({ title, listMode: "hide" });
       state.managedLayers.push(title);
       this.mapView.map.layers.add(this._sketchGraphicsLayer);
     }

package/dist/collection/demos/crowdsource-manager.html

@@ -22,26 +22,9 @@
     | limitations under the License.
     -->
     <style>
-      #viewDiv {
-        padding: 0;
-        margin: 0;
-        height: 100%;
-        width: 100%;
-      }
-      .over-map {
-        position: absolute;
-        right: 0px;
-        background-color: var(--calcite-ui-foreground-1);
-      }
-      .column {
-        min-width: 300px;
-        padding: 1rem;
-        border: 1px solid var(--calcite-ui-border-2);
-        height: -webkit-fill-available;
-        height: 100%;
-      }
-      .column[dir="rtl"] {
-        float: left;
+      .crowdsource {
+        height: 100vh;
+        width: 100vw;
       }
     </style>
 
@@ -56,30 +39,20 @@
     <script type="module" src="../solutions-components.esm.js"></script>
 
     <script>
-      require(["esri/WebMap", "esri/views/MapView"], (
-        WebMap,
-        MapView
-      ) => {
-        var webMap = new WebMap({
-          portalItem: {
-            // solutions
-            // id: "3715f4899bea4b2a948347c5c2357e58"
-            // InstantApps
-            id: "863e4f6f2a7840db896cc1b1606d552d"
-          }
-        });
-
+      function addValues() {
         const demo = document.getElementById("demo");
-        demo.mapView = new MapView({
-          container: "viewDiv",
-          map: webMap
-        });
-      });
+        demo.mapInfos = [{
+          id: "863e4f6f2a7840db896cc1b1606d552d",
+          name: "Name of map 1"
+        }, {
+          id: "3715f4899bea4b2a948347c5c2357e58",
+          name: "Name of map 2"
+        }];
+      }
     </script>
   </head>
 
-  <body>
-    <div id="viewDiv"></div>
-    <crowdsource-manager id="demo" class="over-map column"></crowdsource-manager>
+  <body onload="addValues()">
+    <crowdsource-manager id="demo" class="crowdsource"/>
   </body>
 </html>

package/dist/collection/utils/csvDownload.js

@@ -0,0 +1,41 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+//#region Public functions
+/**
+ * Download the CSV file
+ *
+ * @param title Title (without file extension) to use for file; defaults to "export"
+ * @param outputLines Lines of output to write to file
+ *
+ * @see {@link https://medium.com/@danny.pule/export-json-to-csv-file-using-javascript-a0b7bc5b00d2}
+ */
+export function downloadCSVFile(title, outputLines) {
+  const link = document.createElement("a");
+  if (link.download !== undefined) {
+    link.href = URL.createObjectURL(new Blob(outputLines, { type: "text/csv;charset=utf-8;" }));
+    link.download = `${title}.csv` || "export.csv";
+    link.style.visibility = "hidden";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+}
+//#endregion