@esri/solutions-components 0.3.4 → 0.3.5

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

@@ -29,6 +29,9 @@ import * as utils from "../../utils/publicNotificationUtils";
 export class PublicNotification {
   constructor() {
     this.addresseeLayerIds = [];
+    this.bufferColor = [227, 139, 79, 0.8];
+    this.bufferOutlineColor = [255, 255, 255];
+    this.customLabelEnabled = undefined;
     this.defaultBufferDistance = undefined;
     this.defaultBufferUnit = undefined;
     this.exportOptions = undefined;
@@ -89,16 +92,6 @@ export class PublicNotification {
       return this._highlightFeatures();
     }
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Methods (public)
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  Events (public)
-  //
-  //--------------------------------------------------------------------------
   /**
    * Handle changes to the selection sets
    */
@@ -286,21 +279,19 @@ export class PublicNotification {
    * @protected
    */
   _getSelectPage() {
-    var _a, _b;
-    // const searchTip = `${this._translations.selectSearchTip} ${this._translations.optionalSearchDistance}`;
+    var _a, _b, _c;
     const searchTip = this._translations.selectSearchTip;
-    // const selectTip = `${this._translations.selectLayerTip} ${this._translations.optionalSearchDistance}`;
     const selectTip = this._translations.selectLayerTip;
-    // const sketchTip = this._sketchType === ESketchType.INTERACTIVE ?
-    //   `${this._translations.selectSketchTip} ${this._translations.optionalSearchDistance}` :
-    //   `${this._translations.selectLayerTip} ${this._translations.optionalSearchDistance}`;
     const sketchTip = this._sketchType === ESketchType.INTERACTIVE ?
       this._translations.selectSketchTip :
       this._translations.selectLayerTip;
     const noticeText = this._selectionWorkflowType === EWorkflowType.SELECT ? selectTip :
       this._selectionWorkflowType === EWorkflowType.SKETCH ? sketchTip : searchTip;
-    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-1" }, h("map-select-tools", { class: "font-bold", enabledLayerIds: this.selectionLayerIds, isUpdate: !!this._activeSelection, mapView: this.mapView, onSelectionSetChange: (evt) => this._updateForSelection(evt), onWorkflowTypeChange: (evt) => this._updateForWorkflowType(evt), ref: (el) => { this._selectTools = el; }, searchConfiguration: this.searchConfiguration, selectLayerView: this.addresseeLayer, selectionSet: this._activeSelection, showBufferTools: this.showSearchSettings })), h("div", { class: "padding-sides-1 padding-bottom-1", style: { "align-items": "end", "display": "flex" } }, h("calcite-icon", { class: "info-blue padding-end-1-2", icon: "feature-layer", scale: "s" }), h("calcite-input-message", { active: true, class: "info-blue", scale: "m" }, this.noResultText && this._numSelected === 0 ? this.noResultText :
-      this._translations.selectedAddresses.replace("{{n}}", this._numSelected.toString()).replace("{{layer}}", ((_b = this.addresseeLayer) === null || _b === void 0 ? void 0 : _b.layer.title) || ""))), this._getPageNavButtons(this._translations.done, this._numSelected === 0, () => { void this._saveSelection(); }, this._translations.cancel, false, () => { void this._home(); })));
+    const nameLabelClass = this.customLabelEnabled ? "" : "display-none";
+    return (h("calcite-panel", null, this._getLabel(this._translations.stepTwoFull.replace("{{layer}}", (_a = this.addresseeLayer) === null || _a === void 0 ? void 0 : _a.layer.title)), this._getNotice(noticeText), h("div", { class: "padding-top-sides-1" }, h("map-select-tools", { bufferColor: this.bufferColor, bufferOutlineColor: this.bufferOutlineColor, class: "font-bold", defaultBufferDistance: this.defaultBufferDistance, defaultBufferUnit: this.defaultBufferUnit, enabledLayerIds: this.selectionLayerIds, isUpdate: !!this._activeSelection, mapView: this.mapView, onSelectionSetChange: (evt) => this._updateForSelection(evt), onWorkflowTypeChange: (evt) => this._updateForWorkflowType(evt), ref: (el) => { this._selectTools = el; }, searchConfiguration: this.searchConfiguration, selectLayerView: this.addresseeLayer, selectionSet: this._activeSelection, showBufferTools: this.showSearchSettings })), h("div", { class: "padding-sides-1 padding-bottom-1", style: { "align-items": "end", "display": "flex" } }, h("calcite-icon", { class: "info-blue padding-end-1-2", icon: "feature-layer", scale: "s" }), h("calcite-input-message", { active: true, class: "info-blue", scale: "m" }, this.noResultText && this._numSelected === 0 ? this.noResultText :
+      this._translations.selectedAddresses.replace("{{n}}", this._numSelected.toString()).replace("{{layer}}", ((_b = this.addresseeLayer) === null || _b === void 0 ? void 0 : _b.layer.title) || ""))), h("div", { class: "padding-sides-1 " + nameLabelClass }, h("calcite-label", { class: "font-bold" }, "Name label", h("calcite-input", { onInput: () => {
+        this.labelChange.emit(this._labelName.value);
+      }, placeholder: "Insert label here...", ref: (el) => { this._labelName = el; }, value: ((_c = this._activeSelection) === null || _c === void 0 ? void 0 : _c.label) || "" }))), this._getPageNavButtons(this._translations.done, this._numSelected === 0, () => { void this._saveSelection(); }, this._translations.cancel, false, () => { void this._home(); })));
   }
   /**
    * Create the Refine page that users can interactively add/remove features from existing selection sets
@@ -388,7 +379,7 @@ export class PublicNotification {
    * Get selection set list node with checkbox for Download pages
    *
    * @returns the list node
-   * @protected
+   * @protectedlabel
    */
   _getSelectionLists() {
     return this._selectionSets.reduce((prev, cur) => {
@@ -696,6 +687,59 @@ export class PublicNotification {
         },
         "defaultValue": "[]"
       },
+      "bufferColor": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "string | number[] |  object with r, g, b, a: https://developers.arcgis.com/javascript/latest/api-reference/esri-Color.html"
+        },
+        "attribute": "buffer-color",
+        "reflect": false,
+        "defaultValue": "[227, 139, 79, 0.8]"
+      },
+      "bufferOutlineColor": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "string | number[] | object with r, g, b, a: https://developers.arcgis.com/javascript/latest/api-reference/esri-Color.html"
+        },
+        "attribute": "buffer-outline-color",
+        "reflect": false,
+        "defaultValue": "[255, 255, 255]"
+      },
+      "customLabelEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: When true the user can define a name for each notification list"
+        },
+        "attribute": "custom-label-enabled",
+        "reflect": false
+      },
       "defaultBufferDistance": {
         "type": "number",
         "mutable": false,
@@ -915,6 +959,24 @@ export class PublicNotification {
       "_translations": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "labelChange",
+        "name": "labelChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted on demand when a buffer is generated."
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{

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

@@ -72,9 +72,9 @@
         var webMap = new WebMap({
           portalItem: {
             // solutions
-            // id: "3715f4899bea4b2a948347c5c2357e58"
+            id: "3715f4899bea4b2a948347c5c2357e58"
             // InstantApps
-            id: "863e4f6f2a7840db896cc1b1606d552d"
+            //id: "863e4f6f2a7840db896cc1b1606d552d"
           }
         });
 
@@ -90,9 +90,9 @@
           });
           demo.mapView.ui.add(legend, "top-left");
         });
-        demo.addresseeLayerIds = ["18434515eb8-layer-12"];
-        demo.defaultBufferDistance = 100;
-        demo.defaultBufferUnit = "kilometers";
+        //demo.addresseeLayerIds = ["18434515eb8-layer-12"];
+        //demo.defaultBufferDistance = 100;
+        //demo.defaultBufferUnit = "kilometers";
         demo.exportOptions = {
           csvOptions: {
             enabled: true, // I question if this should be exposed
@@ -109,8 +109,11 @@
         };
         demo.featureHighlightEnabled = true;
         demo.noResultText = "No results found";
-        demo.selectionLayerIds = ["1843422bf6b-layer-7"];
-        demo.showSearchSettings = false;
+        //demo.selectionLayerIds = ["1843422bf6b-layer-7"];
+        demo.showSearchSettings = true;
+        demo.customLabelEnabled = true;
+        demo.bufferColor = [227, 0, 0, 0.8];
+        demo.bufferOutlineColor = [0, 255, 0];
       });
     </script>
   </head>

package/dist/components/map-draw-tools2.js

@@ -169,10 +169,29 @@ const MapDrawTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       }
     };
     this._sketchWidget.on("update", (evt) => {
-      if (evt.state === "complete" && this.active) {
-        this.graphics = this._sketchGraphicsLayer.graphics.toArray();
+      if (evt.state === "start") {
+        this.graphics = evt.graphics;
         this.sketchGraphicsChange.emit(this.graphics);
       }
+      if (evt.state === "active") {
+        clearTimeout(this._selectionTimer);
+        this._selectionTimer = setTimeout(() => {
+          this.graphics = evt.graphics;
+          this.sketchGraphicsChange.emit(this.graphics);
+        }, 500);
+      }
+    });
+    this._sketchWidget.on("delete", () => {
+      this.graphics = [];
+      this.sketchGraphicsChange.emit(this.graphics);
+    });
+    this._sketchWidget.on("undo", (evt) => {
+      this.graphics = evt.graphics;
+      this.sketchGraphicsChange.emit(this.graphics);
+    });
+    this._sketchWidget.on("redo", (evt) => {
+      this.graphics = evt.graphics;
+      this.sketchGraphicsChange.emit(this.graphics);
     });
   }
   /**

package/dist/components/map-select-tools2.js

@@ -47,6 +47,8 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
      * string: A label to help uniquely identify the selection set
      */
     this._selectionLabel = "";
+    this.bufferColor = [227, 139, 79, 0.8];
+    this.bufferOutlineColor = [255, 255, 255];
     this.enabledLayerIds = [];
     this.defaultBufferDistance = undefined;
     this.defaultBufferUnit = undefined;
@@ -112,6 +114,11 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * @returns Promise with the new selection set
    */
   async getSelection() {
+    // Allow any non whitespace
+    if (!/\S+/gm.test(this._selectionLabel)) {
+      this._selectionLabel = this._getSelectionBaseLabel();
+    }
+    const isBaseLabel = this._selectionLabel === this._getSelectionBaseLabel();
     return {
       id: this.isUpdate ? this.selectionSet.id : Date.now(),
       workflowType: this._workflowType,
@@ -120,7 +127,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       distance: this._bufferTools.distance,
       download: true,
       unit: this._bufferTools.unit,
-      label: this._workflowType === EWorkflowType.SEARCH ?
+      label: (this._selectionLabel && !isBaseLabel) ?
         this._selectionLabel : `${this._selectionLabel} ${this._bufferTools.distance} ${this._bufferTools.unit}`,
       selectedIds: this._selectedIds,
       layerView: this.selectLayerView,
@@ -128,12 +135,18 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       refineSelectLayers: this._refineTools.layerViews
     };
   }
+  /**
+   * Handle changes to the selection sets
+   */
+  labelChange(event) {
+    this._selectionLabel = event.detail;
+  }
   /**
    * Listen to changes in the sketch graphics
    *
    */
   sketchGraphicsChange(event) {
-    this._updateSelection(EWorkflowType.SKETCH, event.detail, this._translations.sketch);
+    this._updateSelection(EWorkflowType.SKETCH, event.detail, this._selectionLabel || this._translations.sketch);
   }
   /**
    * Listen to changes in the refine graphics
@@ -141,7 +154,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    */
   refineSelectionGraphicsChange(event) {
     const graphics = event.detail;
-    this._updateSelection(EWorkflowType.SELECT, graphics, this._translations.select);
+    this._updateSelection(EWorkflowType.SELECT, graphics, this._selectionLabel || this._translations.select);
     // Using OIDs to avoid issue with points
     const oids = Array.isArray(graphics) ? graphics.map(g => g.attributes[g.layer.objectIdField]) : [];
     return this._highlightFeatures(oids);
@@ -168,18 +181,15 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * Renders the component.
    */
   render() {
-    var _a, _b;
+    var _a, _b, _c;
     const searchEnabled = this._workflowType === EWorkflowType.SEARCH;
     const showSearchClass = searchEnabled ? " div-visible-search" : " div-not-visible";
     const drawEnabled = this._workflowType === EWorkflowType.SKETCH || this._workflowType === EWorkflowType.SELECT;
-    //const showDrawToolsClass = drawEnabled ? " div-visible" : " div-not-visible";
-    // const selectEnabled = this._workflowType === EWorkflowType.SELECT;
-    // const showSelectToolsClass = selectEnabled ? " div-visible" : " div-not-visible";
     const showBufferToolsClass = this.showBufferTools ? "search-distance" : "div-not-visible";
     const useSelectClass = this._layerSelectChecked && !searchEnabled ? " div-visible" : " div-not-visible";
     const useDrawClass = !this._layerSelectChecked && !searchEnabled ? " div-visible" : " div-not-visible";
     const showLayerChoiceClass = searchEnabled ? "div-not-visible" : "div-visible";
-    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", { 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, 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: ((_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.distance) || this.defaultBufferDistance, 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: ((_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.workflowType) === EWorkflowType.SELECT, 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, 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: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.distance) || this.defaultBufferDistance, geometries: this.geometries, onBufferComplete: (evt) => this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_c = this.selectionSet) === null || _c === void 0 ? void 0 : _c.unit) || this.defaultBufferUnit })), h("slot", null)));
   }
   //--------------------------------------------------------------------------
   //
@@ -233,15 +243,25 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
         ...(_f = this.selectionSet) === null || _f === void 0 ? void 0 : _f.geometries
       ];
       // reset selection label base
-      this._selectionLabel = this._workflowType === EWorkflowType.SKETCH ?
-        this._translations.sketch : this._workflowType === EWorkflowType.SELECT ?
-        this._translations.select : (_g = this.selectionSet) === null || _g === void 0 ? void 0 : _g.label;
+      this._selectionLabel = ((_g = this.selectionSet) === null || _g === void 0 ? void 0 : _g.label) || this._getSelectionBaseLabel();
       void goToSelection(this.selectionSet.selectedIds, this.selectionSet.layerView, this.mapView, false);
     }
     else {
       this._workflowType = EWorkflowType.SEARCH;
     }
   }
+  /**
+   * Get the default label base when the user has not provided a value
+   *
+   * @protected
+   */
+  _getSelectionBaseLabel() {
+    var _a, _b;
+    return this._workflowType === EWorkflowType.SKETCH ?
+      this._translations.sketch : this._workflowType === EWorkflowType.SELECT ?
+      this._translations.select : this._workflowType === EWorkflowType.SEARCH && this._searchResult ?
+      (_a = this._searchResult) === null || _a === void 0 ? void 0 : _a.name : (_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.label;
+  }
   /**
    * Initialize the search widget
    *
@@ -394,9 +414,9 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
       // Create a symbol for rendering the graphic
       const symbol = {
         type: "simple-fill",
-        color: [227, 139, 79, 0.8],
+        color: this.bufferColor,
         outline: {
-          color: [255, 255, 255],
+          color: this.bufferOutlineColor,
           width: 1
         }
       };
@@ -486,6 +506,8 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   }; }
   static get style() { return mapSelectToolsCss; }
 }, [4, "map-select-tools", {
+    "bufferColor": [8, "buffer-color"],
+    "bufferOutlineColor": [8, "buffer-outline-color"],
     "enabledLayerIds": [16],
     "defaultBufferDistance": [2, "default-buffer-distance"],
     "defaultBufferUnit": [1, "default-buffer-unit"],
@@ -502,7 +524,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     "_workflowType": [32],
     "clearSelection": [64],
     "getSelection": [64]
-  }, [[8, "sketchGraphicsChange", "sketchGraphicsChange"], [8, "refineSelectionGraphicsChange", "refineSelectionGraphicsChange"]]]);
+  }, [[8, "labelChange", "labelChange"], [8, "sketchGraphicsChange", "sketchGraphicsChange"], [8, "refineSelectionGraphicsChange", "refineSelectionGraphicsChange"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/public-notification.js

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as EPageType, b as ESketchType, c as EWorkflowType, d as EExportType } from './interfaces3.js';
 import { l as loadModules } from './loadModules.js';
 import { a as getMapLayerView, g as goToSelection, h as highlightFeatures, d as defineCustomElement$6 } from './map-layer-picker2.js';
@@ -53,7 +53,11 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
   constructor() {
     super();
     this.__registerHost();
+    this.labelChange = createEvent(this, "labelChange", 7);
     this.addresseeLayerIds = [];
+    this.bufferColor = [227, 139, 79, 0.8];
+    this.bufferOutlineColor = [255, 255, 255];
+    this.customLabelEnabled = undefined;
     this.defaultBufferDistance = undefined;
     this.defaultBufferUnit = undefined;
     this.exportOptions = undefined;
@@ -114,16 +118,6 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
       return this._highlightFeatures();
     }
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Methods (public)
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  Events (public)
-  //
-  //--------------------------------------------------------------------------
   /**
    * Handle changes to the selection sets
    */
@@ -311,21 +305,19 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
    * @protected
    */
   _getSelectPage() {
-    var _a, _b;
-    // const searchTip = `${this._translations.selectSearchTip} ${this._translations.optionalSearchDistance}`;
+    var _a, _b, _c;
     const searchTip = this._translations.selectSearchTip;
-    // const selectTip = `${this._translations.selectLayerTip} ${this._translations.optionalSearchDistance}`;
     const selectTip = this._translations.selectLayerTip;
-    // const sketchTip = this._sketchType === ESketchType.INTERACTIVE ?
-    //   `${this._translations.selectSketchTip} ${this._translations.optionalSearchDistance}` :
-    //   `${this._translations.selectLayerTip} ${this._translations.optionalSearchDistance}`;
     const sketchTip = this._sketchType === ESketchType.INTERACTIVE ?
       this._translations.selectSketchTip :
       this._translations.selectLayerTip;
     const noticeText = this._selectionWorkflowType === EWorkflowType.SELECT ? selectTip :
       this._selectionWorkflowType === EWorkflowType.SKETCH ? sketchTip : searchTip;
-    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-1" }, h("map-select-tools", { class: "font-bold", enabledLayerIds: this.selectionLayerIds, isUpdate: !!this._activeSelection, mapView: this.mapView, onSelectionSetChange: (evt) => this._updateForSelection(evt), onWorkflowTypeChange: (evt) => this._updateForWorkflowType(evt), ref: (el) => { this._selectTools = el; }, searchConfiguration: this.searchConfiguration, selectLayerView: this.addresseeLayer, selectionSet: this._activeSelection, showBufferTools: this.showSearchSettings })), h("div", { class: "padding-sides-1 padding-bottom-1", style: { "align-items": "end", "display": "flex" } }, h("calcite-icon", { class: "info-blue padding-end-1-2", icon: "feature-layer", scale: "s" }), h("calcite-input-message", { active: true, class: "info-blue", scale: "m" }, this.noResultText && this._numSelected === 0 ? this.noResultText :
-      this._translations.selectedAddresses.replace("{{n}}", this._numSelected.toString()).replace("{{layer}}", ((_b = this.addresseeLayer) === null || _b === void 0 ? void 0 : _b.layer.title) || ""))), this._getPageNavButtons(this._translations.done, this._numSelected === 0, () => { void this._saveSelection(); }, this._translations.cancel, false, () => { void this._home(); })));
+    const nameLabelClass = this.customLabelEnabled ? "" : "display-none";
+    return (h("calcite-panel", null, this._getLabel(this._translations.stepTwoFull.replace("{{layer}}", (_a = this.addresseeLayer) === null || _a === void 0 ? void 0 : _a.layer.title)), this._getNotice(noticeText), h("div", { class: "padding-top-sides-1" }, h("map-select-tools", { bufferColor: this.bufferColor, bufferOutlineColor: this.bufferOutlineColor, class: "font-bold", defaultBufferDistance: this.defaultBufferDistance, defaultBufferUnit: this.defaultBufferUnit, enabledLayerIds: this.selectionLayerIds, isUpdate: !!this._activeSelection, mapView: this.mapView, onSelectionSetChange: (evt) => this._updateForSelection(evt), onWorkflowTypeChange: (evt) => this._updateForWorkflowType(evt), ref: (el) => { this._selectTools = el; }, searchConfiguration: this.searchConfiguration, selectLayerView: this.addresseeLayer, selectionSet: this._activeSelection, showBufferTools: this.showSearchSettings })), h("div", { class: "padding-sides-1 padding-bottom-1", style: { "align-items": "end", "display": "flex" } }, h("calcite-icon", { class: "info-blue padding-end-1-2", icon: "feature-layer", scale: "s" }), h("calcite-input-message", { active: true, class: "info-blue", scale: "m" }, this.noResultText && this._numSelected === 0 ? this.noResultText :
+      this._translations.selectedAddresses.replace("{{n}}", this._numSelected.toString()).replace("{{layer}}", ((_b = this.addresseeLayer) === null || _b === void 0 ? void 0 : _b.layer.title) || ""))), h("div", { class: "padding-sides-1 " + nameLabelClass }, h("calcite-label", { class: "font-bold" }, "Name label", h("calcite-input", { onInput: () => {
+        this.labelChange.emit(this._labelName.value);
+      }, placeholder: "Insert label here...", ref: (el) => { this._labelName = el; }, value: ((_c = this._activeSelection) === null || _c === void 0 ? void 0 : _c.label) || "" }))), this._getPageNavButtons(this._translations.done, this._numSelected === 0, () => { void this._saveSelection(); }, this._translations.cancel, false, () => { void this._home(); })));
   }
   /**
    * Create the Refine page that users can interactively add/remove features from existing selection sets
@@ -413,7 +405,7 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
    * Get selection set list node with checkbox for Download pages
    *
    * @returns the list node
-   * @protected
+   * @protectedlabel
    */
   _getSelectionLists() {
     return this._selectionSets.reduce((prev, cur) => {
@@ -701,6 +693,9 @@ const PublicNotification$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
   static get style() { return publicNotificationCss; }
 }, [0, "public-notification", {
     "addresseeLayerIds": [16],
+    "bufferColor": [8, "buffer-color"],
+    "bufferOutlineColor": [8, "buffer-outline-color"],
+    "customLabelEnabled": [4, "custom-label-enabled"],
     "defaultBufferDistance": [2, "default-buffer-distance"],
     "defaultBufferUnit": [1, "default-buffer-unit"],
     "exportOptions": [16],

package/dist/esm/buffer-tools_6.entry.js

@@ -1451,10 +1451,29 @@ const MapDrawTools = class {
       }
     };
     this._sketchWidget.on("update", (evt) => {
-      if (evt.state === "complete" && this.active) {
-        this.graphics = this._sketchGraphicsLayer.graphics.toArray();
+      if (evt.state === "start") {
+        this.graphics = evt.graphics;
         this.sketchGraphicsChange.emit(this.graphics);
       }
+      if (evt.state === "active") {
+        clearTimeout(this._selectionTimer);
+        this._selectionTimer = setTimeout(() => {
+          this.graphics = evt.graphics;
+          this.sketchGraphicsChange.emit(this.graphics);
+        }, 500);
+      }
+    });
+    this._sketchWidget.on("delete", () => {
+      this.graphics = [];
+      this.sketchGraphicsChange.emit(this.graphics);
+    });
+    this._sketchWidget.on("undo", (evt) => {
+      this.graphics = evt.graphics;
+      this.sketchGraphicsChange.emit(this.graphics);
+    });
+    this._sketchWidget.on("redo", (evt) => {
+      this.graphics = evt.graphics;
+      this.sketchGraphicsChange.emit(this.graphics);
     });
   }
   /**

package/dist/esm/calcite-input-message_5.entry.js

@@ -248,6 +248,8 @@ const MapSelectTools = class {
      * string: A label to help uniquely identify the selection set
      */
     this._selectionLabel = "";
+    this.bufferColor = [227, 139, 79, 0.8];
+    this.bufferOutlineColor = [255, 255, 255];
     this.enabledLayerIds = [];
     this.defaultBufferDistance = undefined;
     this.defaultBufferUnit = undefined;
@@ -313,6 +315,11 @@ const MapSelectTools = class {
    * @returns Promise with the new selection set
    */
   async getSelection() {
+    // Allow any non whitespace
+    if (!/\S+/gm.test(this._selectionLabel)) {
+      this._selectionLabel = this._getSelectionBaseLabel();
+    }
+    const isBaseLabel = this._selectionLabel === this._getSelectionBaseLabel();
     return {
       id: this.isUpdate ? this.selectionSet.id : Date.now(),
       workflowType: this._workflowType,
@@ -321,7 +328,7 @@ const MapSelectTools = class {
       distance: this._bufferTools.distance,
       download: true,
       unit: this._bufferTools.unit,
-      label: this._workflowType === EWorkflowType.SEARCH ?
+      label: (this._selectionLabel && !isBaseLabel) ?
         this._selectionLabel : `${this._selectionLabel} ${this._bufferTools.distance} ${this._bufferTools.unit}`,
       selectedIds: this._selectedIds,
       layerView: this.selectLayerView,
@@ -329,12 +336,18 @@ const MapSelectTools = class {
       refineSelectLayers: this._refineTools.layerViews
     };
   }
+  /**
+   * Handle changes to the selection sets
+   */
+  labelChange(event) {
+    this._selectionLabel = event.detail;
+  }
   /**
    * Listen to changes in the sketch graphics
    *
    */
   sketchGraphicsChange(event) {
-    this._updateSelection(EWorkflowType.SKETCH, event.detail, this._translations.sketch);
+    this._updateSelection(EWorkflowType.SKETCH, event.detail, this._selectionLabel || this._translations.sketch);
   }
   /**
    * Listen to changes in the refine graphics
@@ -342,7 +355,7 @@ const MapSelectTools = class {
    */
   refineSelectionGraphicsChange(event) {
     const graphics = event.detail;
-    this._updateSelection(EWorkflowType.SELECT, graphics, this._translations.select);
+    this._updateSelection(EWorkflowType.SELECT, graphics, this._selectionLabel || this._translations.select);
     // Using OIDs to avoid issue with points
     const oids = Array.isArray(graphics) ? graphics.map(g => g.attributes[g.layer.objectIdField]) : [];
     return this._highlightFeatures(oids);
@@ -369,18 +382,15 @@ const MapSelectTools = class {
    * Renders the component.
    */
   render() {
-    var _a, _b;
+    var _a, _b, _c;
     const searchEnabled = this._workflowType === EWorkflowType.SEARCH;
     const showSearchClass = searchEnabled ? " div-visible-search" : " div-not-visible";
     const drawEnabled = this._workflowType === EWorkflowType.SKETCH || this._workflowType === EWorkflowType.SELECT;
-    //const showDrawToolsClass = drawEnabled ? " div-visible" : " div-not-visible";
-    // const selectEnabled = this._workflowType === EWorkflowType.SELECT;
-    // const showSelectToolsClass = selectEnabled ? " div-visible" : " div-not-visible";
     const showBufferToolsClass = this.showBufferTools ? "search-distance" : "div-not-visible";
     const useSelectClass = this._layerSelectChecked && !searchEnabled ? " div-visible" : " div-not-visible";
     const useDrawClass = !this._layerSelectChecked && !searchEnabled ? " div-visible" : " div-not-visible";
     const showLayerChoiceClass = searchEnabled ? "div-not-visible" : "div-visible";
-    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", { 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, 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: ((_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.distance) || this.defaultBufferDistance, 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: ((_a = this.selectionSet) === null || _a === void 0 ? void 0 : _a.workflowType) === EWorkflowType.SELECT, 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, 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: ((_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.distance) || this.defaultBufferDistance, geometries: this.geometries, onBufferComplete: (evt) => this._bufferComplete(evt), ref: (el) => this._bufferTools = el, unit: ((_c = this.selectionSet) === null || _c === void 0 ? void 0 : _c.unit) || this.defaultBufferUnit })), h("slot", null)));
   }
   //--------------------------------------------------------------------------
   //
@@ -434,15 +444,25 @@ const MapSelectTools = class {
         ...(_f = this.selectionSet) === null || _f === void 0 ? void 0 : _f.geometries
       ];
       // reset selection label base
-      this._selectionLabel = this._workflowType === EWorkflowType.SKETCH ?
-        this._translations.sketch : this._workflowType === EWorkflowType.SELECT ?
-        this._translations.select : (_g = this.selectionSet) === null || _g === void 0 ? void 0 : _g.label;
+      this._selectionLabel = ((_g = this.selectionSet) === null || _g === void 0 ? void 0 : _g.label) || this._getSelectionBaseLabel();
       void goToSelection(this.selectionSet.selectedIds, this.selectionSet.layerView, this.mapView, false);
     }
     else {
       this._workflowType = EWorkflowType.SEARCH;
     }
   }
+  /**
+   * Get the default label base when the user has not provided a value
+   *
+   * @protected
+   */
+  _getSelectionBaseLabel() {
+    var _a, _b;
+    return this._workflowType === EWorkflowType.SKETCH ?
+      this._translations.sketch : this._workflowType === EWorkflowType.SELECT ?
+      this._translations.select : this._workflowType === EWorkflowType.SEARCH && this._searchResult ?
+      (_a = this._searchResult) === null || _a === void 0 ? void 0 : _a.name : (_b = this.selectionSet) === null || _b === void 0 ? void 0 : _b.label;
+  }
   /**
    * Initialize the search widget
    *
@@ -595,9 +615,9 @@ const MapSelectTools = class {
       // Create a symbol for rendering the graphic
       const symbol = {
         type: "simple-fill",
-        color: [227, 139, 79, 0.8],
+        color: this.bufferColor,
         outline: {
-          color: [255, 255, 255],
+          color: this.bufferOutlineColor,
           width: 1
         }
       };