@esri/solutions-components 0.5.10 → 0.5.11

package/dist/cjs/buffer-tools_4.cjs.entry.js

@@ -1126,7 +1126,7 @@ const Slider = class {
 };
 Slider.style = sliderCss;
 
-const mapDrawToolsCss = ":host{display:block}.border{outline:1px solid var(--calcite-ui-border-input)}.div-visible{display:inherit}.div-not-visible{display:none !important}.padding-top-1-2{padding-top:.5rem}.main-label{display:flex;float:left}html[dir=\"rtl\"] .main-label{display:flex;float:right}.margin-top-1{margin-top:1rem}.border-left{border-left:1px solid rgba(110,110,110,.3)}.border-left[dir=\"rtl\"]{border-right:1px solid rgba(110,110,110,.3)}.esri-widget{box-sizing:border-box;color:#323232;font-size:14px;font-family:\"Avenir Next\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;line-height:1.3em;background-color:#fff;--esri-widget-padding-v:12px;--esri-widget-padding-h:15px;--esri-widget-padding:var(--esri-widget-padding-v) var(--esri-widget-padding-h)}.esri-sketch__panel{align-items:center;display:flex;flex-flow:row wrap;padding:0}.esri-sketch__section{align-items:center;display:flex;flex-flow:row wrap;padding:0 7px;margin:6px 0}.esri-sketch__section.esri-sketch__info-section>calcite-action:first-of-type{display:none}";
+const mapDrawToolsCss = ":host{display:block}.border{outline:1px solid var(--calcite-ui-border-input)}.div-visible{display:inherit}.div-not-visible{display:none !important}.padding-top-1-2{padding-top:.5rem}.main-label{display:flex;float:left}html[dir=\"rtl\"] .main-label{display:flex;float:right}.margin-top-1{margin-top:1rem}.border-left{border-left:1px solid rgba(110,110,110,.3)}.border-left[dir=\"rtl\"]{border-right:1px solid rgba(110,110,110,.3)}.esri-widget{box-sizing:border-box;color:#323232;font-size:14px;font-family:\"Avenir Next\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;line-height:1.3em;background-color:#fff;--esri-widget-padding-v:12px;--esri-widget-padding-h:15px;--esri-widget-padding:var(--esri-widget-padding-v) var(--esri-widget-padding-h)}.esri-sketch__panel{align-items:center;display:flex;flex-flow:row wrap;padding:0}.esri-sketch__section{align-items:center;display:flex;flex-flow:row wrap;padding:0 7px;margin:6px 0}.esri-sketch__section.esri-sketch__tool-section:first-of-type{display:none}";
 
 const MapDrawTools = class {
   constructor(hostRef) {
@@ -1298,6 +1298,7 @@ const MapDrawTools = class {
       }
     };
     this._sketchWidget = new this.Sketch(Object.assign(Object.assign({}, sketchOptions), { container: this._sketchElement, creationMode: "single", visibleElements: {
+        duplicateButton: false,
         selectionTools: {
           "lasso-selection": false,
           "rectangle-selection": false
@@ -1306,7 +1307,8 @@ const MapDrawTools = class {
         },
         undoRedoMenu: false,
         settingsMenu: this.drawMode === interfaces.EDrawMode.SKETCH
-      } }));
+      } // temp workaround since we need duplicateButton flag that is not in 4.26 types but will be in the 4.27 modules we get from IA
+    }));
     this._sketchViewModel = new this.SketchViewModel(Object.assign({}, sketchOptions));
     this._sketchWidget.viewModel.polylineSymbol = this.polylineSymbol;
     this._sketchWidget.viewModel.pointSymbol = this.pointSymbol;
@@ -1339,6 +1341,7 @@ const MapDrawTools = class {
     });
     this._sketchWidget.on("delete", () => {
       this.graphics = [];
+      this._setDefaultCreateTool();
       this.sketchGraphicsChange.emit({
         graphics: this.graphics,
         useOIDs: false
@@ -1358,6 +1361,7 @@ const MapDrawTools = class {
         useOIDs: false
       });
     });
+    this._setDefaultCreateTool();
   }
   /**
    * Clear any stored graphics and remove all graphics from the graphics layer
@@ -1370,6 +1374,16 @@ const MapDrawTools = class {
     this.graphics = [];
     (_a = this._sketchGraphicsLayer) === null || _a === void 0 ? void 0 : _a.removeAll();
   }
+  /**
+   * Set the default create tool when we have no existing graphics
+   *
+   * @protected
+   */
+  _setDefaultCreateTool() {
+    if (!this.graphics || this.graphics.length === 0) {
+      this._sketchWidget.viewModel.create("rectangle");
+    }
+  }
   /**
    * Emit the undo event
    *

package/dist/cjs/public-notification.cjs.entry.js

@@ -17,12 +17,16 @@ const downloadUtils = require('./downloadUtils-7a0fd3c0.js');
 require('./index-e1b1954f.js');
 require('./_commonjsHelpers-384729db.js');
 
-const publicNotificationCss = ":host{display:block;--calcite-input-message-spacing-value:0}.align-center{align-items:center}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}.action-bar-size{height:3.5rem;width:100%}.w-1-2{width:50%}.w-1-3{width:33.33%}.action-center{-webkit-box-align:center;-webkit-align-items:center;-ms-grid-row-align:center;align-items:center;align-content:center;justify-content:center}.width-full{width:100%}.height-full{height:100%}.padding-1{padding:1rem}.padding-top-sides-1{-webkit-padding-before:1rem;padding-block-start:1rem;-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:1rem;padding-inline-end:1rem}.padding-sides-1{-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:1rem;padding-inline-end:1rem}.padding-end-1-2{-webkit-padding-end:.5rem;padding-inline-end:.5rem}.padding-top-1-2{-webkit-padding-before:.5rem;padding-block-start:.5rem}.padding-top-1{padding-top:1rem}.padding-bottom-1{padding-bottom:1rem}.padding-bottom-1-2{padding-bottom:.5rem}.info-blue{color:#00A0FF}.info-message{justify-content:center;display:grid}.font-bold{font-weight:bold}.display-flex{display:flex}.display-block{display:block}.display-none{display:none}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.padding-start-1-2{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}.list-border{border:1px solid var(--calcite-ui-border-2)}.margin-sides-1{-webkit-margin-start:1rem;margin-inline-start:1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}.margin-start-1-2{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.float-right{float:right}.float-right[dir=\"rtl\"]{float:left}.float-left{float:left}.float-left[dir=\"rtl\"]{float:right}.margin-top-0{-webkit-margin-before:0 !important;margin-block-start:0 !important}.height-1-1-2{height:1.5rem}.main-background{background-color:var(--calcite-ui-foreground-2)}.position-right{position:absolute;right:1rem}.position-right[dir=\"rtl\"]{position:absolute;left:1rem}.label-margin-0{--calcite-label-margin-bottom:0}.list-label{color:var(--calcite-ui-text-1)}.list-label,.list-description{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);overflow-wrap:break-word;word-break:break-word}.list-description{-webkit-margin-before:0.125rem;margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}";
+const publicNotificationCss = ":host{display:block;--calcite-input-message-spacing-value:0}.align-center{align-items:center}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}.action-bar-size{height:3.5rem;width:100%}.w-1-2{width:50%}.w-1-3{width:33.33%}.action-center{-webkit-box-align:center;-webkit-align-items:center;-ms-grid-row-align:center;align-items:center;align-content:center;justify-content:center}.width-full{width:100%}.height-full{height:100%}.padding-1{padding:1rem}.padding-top-sides-1{-webkit-padding-before:1rem;padding-block-start:1rem;-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:1rem;padding-inline-end:1rem}.padding-sides-1{-webkit-padding-start:1rem;padding-inline-start:1rem;-webkit-padding-end:1rem;padding-inline-end:1rem}.padding-end-1-2{-webkit-padding-end:.5rem;padding-inline-end:.5rem}.padding-top-1-2{-webkit-padding-before:.5rem;padding-block-start:.5rem}.padding-top-1{padding-top:1rem}.padding-bottom-1{padding-bottom:1rem}.padding-bottom-1-2{padding-bottom:.5rem}.info-blue{color:#00A0FF}.info-message{justify-content:center;display:grid}.font-bold{font-weight:bold}.display-flex{display:flex}.display-block{display:block}.display-none{display:none}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.padding-start-1-2{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}.list-border{border:1px solid var(--calcite-ui-border-2)}.margin-sides-1{-webkit-margin-start:1rem;margin-inline-start:1rem;-webkit-margin-end:1rem;margin-inline-end:1rem}.margin-start-1-2{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.float-right{float:right}.float-right[dir=\"rtl\"]{float:left}.float-left{float:left}.float-left[dir=\"rtl\"]{float:right}.margin-top-0{-webkit-margin-before:0 !important;margin-block-start:0 !important}.height-1-1-2{height:1.5rem}.main-background{background-color:var(--calcite-ui-foreground-2)}.position-right{position:absolute;right:1rem}.position-right[dir=\"rtl\"]{position:absolute;left:1rem}.label-margin-0{--calcite-label-margin-bottom:0}.list-label{color:var(--calcite-ui-text-1)}.list-label,.list-description{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);overflow-wrap:break-word;word-break:break-word}.list-description{-webkit-margin-before:0.125rem;margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}.img-container{-o-object-fit:scale-down;object-fit:scale-down;width:100%;height:100%}";
 
 const PublicNotification = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.searchConfigurationChange = index.createEvent(this, "searchConfigurationChange", 7);
+    /**
+     * string: The url to the onboarding image
+     */
+    this._onboardingImageUrl = "";
     /**
      * number: The number of selected features
      */
@@ -145,6 +149,7 @@ const PublicNotification = class {
     await this._getTranslations();
     await this._initModules();
     this._initSymbols();
+    this._onboardingImageUrl = index.getAssetPath(`../assets/data/images/onboarding.png`);
   }
   /**
    * Renders the component.
@@ -303,7 +308,16 @@ const PublicNotification = class {
    */
   _getListPage() {
     const hasSets = this._hasSelections();
-    return (index.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), index.h("div", { class: "display-flex padding-1" }, index.h("calcite-button", { onClick: () => { this._setPageType(interfaces.EPageType.SELECT); }, width: "full" }, this._translations.add))));
+    return (index.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()), index.h("div", { class: "display-flex padding-1" }, index.h("calcite-button", { onClick: () => { this._setPageType(interfaces.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 (index.h("div", { class: "display-flex padding-sides-1" }, index.h("img", { class: "img-container", src: this._onboardingImageUrl })));
   }
   /**
    * Create the selection sets list node for the List page

package/dist/collection/components/map-draw-tools/map-draw-tools.css

@@ -84,6 +84,6 @@ html[dir="rtl"] .main-label {
   margin: 6px 0;
 }
 
-.esri-sketch__section.esri-sketch__info-section>calcite-action:first-of-type {
+.esri-sketch__section.esri-sketch__tool-section:first-of-type {
   display: none;
 }

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

@@ -188,6 +188,7 @@ export class MapDrawTools {
       }
     };
     this._sketchWidget = new this.Sketch(Object.assign(Object.assign({}, sketchOptions), { container: this._sketchElement, creationMode: "single", visibleElements: {
+        duplicateButton: false,
         selectionTools: {
           "lasso-selection": false,
           "rectangle-selection": false
@@ -196,7 +197,8 @@ export class MapDrawTools {
         },
         undoRedoMenu: false,
         settingsMenu: this.drawMode === EDrawMode.SKETCH
-      } }));
+      } // temp workaround since we need duplicateButton flag that is not in 4.26 types but will be in the 4.27 modules we get from IA
+    }));
     this._sketchViewModel = new this.SketchViewModel(Object.assign({}, sketchOptions));
     this._sketchWidget.viewModel.polylineSymbol = this.polylineSymbol;
     this._sketchWidget.viewModel.pointSymbol = this.pointSymbol;
@@ -229,6 +231,7 @@ export class MapDrawTools {
     });
     this._sketchWidget.on("delete", () => {
       this.graphics = [];
+      this._setDefaultCreateTool();
       this.sketchGraphicsChange.emit({
         graphics: this.graphics,
         useOIDs: false
@@ -248,6 +251,7 @@ export class MapDrawTools {
         useOIDs: false
       });
     });
+    this._setDefaultCreateTool();
   }
   /**
    * Clear any stored graphics and remove all graphics from the graphics layer
@@ -260,6 +264,16 @@ export class MapDrawTools {
     this.graphics = [];
     (_a = this._sketchGraphicsLayer) === null || _a === void 0 ? void 0 : _a.removeAll();
   }
+  /**
+   * Set the default create tool when we have no existing graphics
+   *
+   * @protected
+   */
+  _setDefaultCreateTool() {
+    if (!this.graphics || this.graphics.length === 0) {
+      this._sketchWidget.viewModel.create("rectangle");
+    }
+  }
   /**
    * Emit the undo event
    *

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

@@ -14,206 +14,213 @@
  * limitations under the License.
  */
 
- :host {
-    display: block;
-    --calcite-input-message-spacing-value: 0;
-  }
-
-  .align-center {
-    align-items: center;
-  }
-
-  .border-bottom-1 {
-    border-width: 0px;
-    border-bottom-width: 1px;
-    border-style: solid;
-    border-color: var(--calcite-ui-border-3);
-  }
-
-  .action-bar-size {
-    height: 3.5rem;
-    width: 100%;
-  }
-
-  .w-1-2 {
-    width: 50%;
-  }
-
-  .w-1-3 {
-    width: 33.33%;
-  }
-
-  .action-center {
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    -ms-grid-row-align: center;
-    align-items: center;
-    align-content: center;
-    justify-content: center;
-  }
-
-  .width-full {
-    width: 100%;
-  }
-
-  .height-full {
-    height: 100%;
-  }
-
-  .padding-1 {
-    padding: 1rem;
-  }
-
-  .padding-top-sides-1 {
-    -webkit-padding-before: 1rem;
-            padding-block-start: 1rem;
-    -webkit-padding-start: 1rem;
-            padding-inline-start: 1rem;
-    -webkit-padding-end: 1rem;
-            padding-inline-end: 1rem;
-  }
-
-  .padding-sides-1 {
-    -webkit-padding-start: 1rem;
-            padding-inline-start: 1rem;
-    -webkit-padding-end: 1rem;
-            padding-inline-end: 1rem;
-  }
-
-  .padding-end-1-2 {
-    -webkit-padding-end: .5rem;
-            padding-inline-end: .5rem;
-  }
-
-  .padding-top-1-2 {
-    -webkit-padding-before: .5rem;
-            padding-block-start: .5rem;
-  }
-
-  .padding-top-1 {
-    padding-top: 1rem;
-  }
-
-  .padding-bottom-1 {
-    padding-bottom: 1rem;
-  }
-
-  .padding-bottom-1-2 {
-    padding-bottom: .5rem;
-  }
-
-  .info-blue {
-    /* This would be better but not the right color in light theme */
-    /* color: var(--calcite-ui-info); */
-
-    /* This is --calcite-ui-info value for dark theme*/
-    color: #00A0FF;
-  }
-
-  .info-message {
-    justify-content: center;
-    display: grid;
-  }
-
-  .font-bold {
-    font-weight: bold;
-  }
-
-  .display-flex {
-    display: flex;
-  }
-
-  .display-block {
-    display: block;
-  }
-
-  .display-none {
-    display: none;
-  }
-
-  .border-bottom {
-    border-bottom: 1px solid var(--calcite-ui-border-2);
-  }
-
-  .padding-start-1-2 {
-    -webkit-padding-start: 0.5rem;
-            padding-inline-start: 0.5rem;
-  }
-
-  .list-border {
-    border: 1px solid var(--calcite-ui-border-2);
-  }
-
-  .margin-sides-1 {
-    -webkit-margin-start: 1rem;
-            margin-inline-start: 1rem;
-    -webkit-margin-end: 1rem;
-            margin-inline-end: 1rem;
-  }
-
-  .margin-start-1-2 {
-    -webkit-margin-start: 0.5rem;
-            margin-inline-start: 0.5rem;
-  }
-
-  .float-right {
-    float: right;
-  }
-
-  .float-right[dir="rtl"] {
-    float: left;
-  }
-
-  .float-left {
-    float: left;
-  }
-
-  .float-left[dir="rtl"] {
-    float: right;
-  }
-
-  .margin-top-0 {
-    -webkit-margin-before: 0 !important;
-            margin-block-start: 0 !important;
-  }
-
-  .height-1-1-2 {
-    height: 1.5rem;
-  }
-
-  .main-background {
-    background-color: var(--calcite-ui-foreground-2);
-  }
-
-  .position-right {
-    position: absolute;
-    right: 1rem;
-  }
-
-  .position-right[dir="rtl"] {
-    position: absolute;
-    left: 1rem;
-  }
-
-  .label-margin-0 {
-    --calcite-label-margin-bottom: 0;
-  }
-
-  .list-label {
-    color: var(--calcite-ui-text-1);
-  }
-
-  .list-label,
-  .list-description {
-    font-family: var(--calcite-sans-family);
-    font-size: var(--calcite-font-size--2);
-    font-weight: var(--calcite-font-weight-normal);
-    overflow-wrap: break-word;
-    word-break: break-word;
-  }
-
-  .list-description {
-    -webkit-margin-before: 0.125rem;
-            margin-block-start: 0.125rem;
-    color: var(--calcite-ui-text-3);
-  }
+:host {
+  display: block;
+  --calcite-input-message-spacing-value: 0;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.border-bottom-1 {
+  border-width: 0px;
+  border-bottom-width: 1px;
+  border-style: solid;
+  border-color: var(--calcite-ui-border-3);
+}
+
+.action-bar-size {
+  height: 3.5rem;
+  width: 100%;
+}
+
+.w-1-2 {
+  width: 50%;
+}
+
+.w-1-3 {
+  width: 33.33%;
+}
+
+.action-center {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-grid-row-align: center;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+}
+
+.width-full {
+  width: 100%;
+}
+
+.height-full {
+  height: 100%;
+}
+
+.padding-1 {
+  padding: 1rem;
+}
+
+.padding-top-sides-1 {
+  -webkit-padding-before: 1rem;
+          padding-block-start: 1rem;
+  -webkit-padding-start: 1rem;
+          padding-inline-start: 1rem;
+  -webkit-padding-end: 1rem;
+          padding-inline-end: 1rem;
+}
+
+.padding-sides-1 {
+  -webkit-padding-start: 1rem;
+          padding-inline-start: 1rem;
+  -webkit-padding-end: 1rem;
+          padding-inline-end: 1rem;
+}
+
+.padding-end-1-2 {
+  -webkit-padding-end: .5rem;
+          padding-inline-end: .5rem;
+}
+
+.padding-top-1-2 {
+  -webkit-padding-before: .5rem;
+          padding-block-start: .5rem;
+}
+
+.padding-top-1 {
+  padding-top: 1rem;
+}
+
+.padding-bottom-1 {
+  padding-bottom: 1rem;
+}
+
+.padding-bottom-1-2 {
+  padding-bottom: .5rem;
+}
+
+.info-blue {
+  /* This would be better but not the right color in light theme */
+  /* color: var(--calcite-ui-info); */
+
+  /* This is --calcite-ui-info value for dark theme*/
+  color: #00A0FF;
+}
+
+.info-message {
+  justify-content: center;
+  display: grid;
+}
+
+.font-bold {
+  font-weight: bold;
+}
+
+.display-flex {
+  display: flex;
+}
+
+.display-block {
+  display: block;
+}
+
+.display-none {
+  display: none;
+}
+
+.border-bottom {
+  border-bottom: 1px solid var(--calcite-ui-border-2);
+}
+
+.padding-start-1-2 {
+  -webkit-padding-start: 0.5rem;
+          padding-inline-start: 0.5rem;
+}
+
+.list-border {
+  border: 1px solid var(--calcite-ui-border-2);
+}
+
+.margin-sides-1 {
+  -webkit-margin-start: 1rem;
+          margin-inline-start: 1rem;
+  -webkit-margin-end: 1rem;
+          margin-inline-end: 1rem;
+}
+
+.margin-start-1-2 {
+  -webkit-margin-start: 0.5rem;
+          margin-inline-start: 0.5rem;
+}
+
+.float-right {
+  float: right;
+}
+
+.float-right[dir="rtl"] {
+  float: left;
+}
+
+.float-left {
+  float: left;
+}
+
+.float-left[dir="rtl"] {
+  float: right;
+}
+
+.margin-top-0 {
+  -webkit-margin-before: 0 !important;
+          margin-block-start: 0 !important;
+}
+
+.height-1-1-2 {
+  height: 1.5rem;
+}
+
+.main-background {
+  background-color: var(--calcite-ui-foreground-2);
+}
+
+.position-right {
+  position: absolute;
+  right: 1rem;
+}
+
+.position-right[dir="rtl"] {
+  position: absolute;
+  left: 1rem;
+}
+
+.label-margin-0 {
+  --calcite-label-margin-bottom: 0;
+}
+
+.list-label {
+  color: var(--calcite-ui-text-1);
+}
+
+.list-label,
+.list-description {
+  font-family: var(--calcite-sans-family);
+  font-size: var(--calcite-font-size--2);
+  font-weight: var(--calcite-font-weight-normal);
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.list-description {
+  -webkit-margin-before: 0.125rem;
+          margin-block-start: 0.125rem;
+  color: var(--calcite-ui-text-3);
+}
+
+.img-container {
+  -o-object-fit: scale-down;
+     object-fit: scale-down;
+  width: 100%;
+  height: 100%;
+}

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

@@ -25,8 +25,13 @@ 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
      */
@@ -149,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.
@@ -307,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

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

@@ -55,12 +55,12 @@
 
     <link
       rel="stylesheet"
-      href="https://js.arcgis.com/4.26/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.26/"></script>
+    <script src="https://js.arcgis.com/4.27/"></script>
     <script type="module" src="../solutions-components.esm.js"></script>
 
     <script>