@esri/solutions-components 0.6.13 → 0.6.15

package/dist/collection/components/map-card/map-card.js

@@ -32,6 +32,11 @@ export class MapCard {
      * string: the id of map currently displayed
      */
     this._loadedId = "";
+    this.enableLegend = undefined;
+    this.enableFullscreen = undefined;
+    this.enableSearch = undefined;
+    this.enableBasemap = undefined;
+    this.basemapConfig = undefined;
     this.mapInfos = [];
     this.mapView = undefined;
     this._searchConfiguration = undefined;
@@ -58,7 +63,7 @@ export class MapCard {
    * Renders the component.
    */
   render() {
-    return (h(Host, null, h("map-picker", { mapInfos: this.mapInfos }), h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), h("map-tools", { class: "box-shadow", mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
+    return (h(Host, null, h("map-picker", { mapInfos: this.mapInfos }), h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), h("map-tools", { basemapConfig: this.basemapConfig, class: "box-shadow", enableBasemap: this.enableBasemap, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
   }
   //--------------------------------------------------------------------------
   //
@@ -108,16 +113,17 @@ export class MapCard {
       });
       this._loadedId = id;
       this._searchConfiguration = this._webMapInfo.searchConfiguration;
-      this.mapChanged.emit({
-        id: id,
-        mapView: this.mapView
-      });
+      this.beforeMapChanged.emit();
       await this.mapView.when(() => {
         const home = new this.Home({
           view: this.mapView
         });
         this.mapView.ui.add(home, { position: "top-left", index: 3 });
         this.mapView.ui.add(this._mapTools, { position: "top-right", index: 0 });
+        this.mapChanged.emit({
+          id: id,
+          mapView: this.mapView
+        });
       });
     }
   }
@@ -134,6 +140,95 @@ export class MapCard {
   }
   static get properties() {
     return {
+      "enableLegend": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the legend widget will be available"
+        },
+        "attribute": "enable-legend",
+        "reflect": false
+      },
+      "enableFullscreen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the fullscreen widget will be available"
+        },
+        "attribute": "enable-fullscreen",
+        "reflect": false
+      },
+      "enableSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the search widget will be available"
+        },
+        "attribute": "enable-search",
+        "reflect": false
+      },
+      "enableBasemap": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the basemap widget will be available"
+        },
+        "attribute": "enable-basemap",
+        "reflect": false
+      },
+      "basemapConfig": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IBasemapConfig",
+          "resolved": "IBasemapConfig",
+          "references": {
+            "IBasemapConfig": {
+              "location": "import",
+              "path": "../../utils/interfaces",
+              "id": "src/utils/interfaces.ts::IBasemapConfig"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "IBasemapConfig: List of any basemaps to filter out from the basemap widget"
+        }
+      },
       "mapInfos": {
         "type": "unknown",
         "mutable": false,
@@ -206,6 +301,21 @@ export class MapCard {
             }
           }
         }
+      }, {
+        "method": "beforeMapChanged",
+        "name": "beforeMapChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted before a new map is loaded"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }];
   }
   static get elementRef() { return "el"; }

package/dist/collection/components/map-layer-picker/map-layer-picker.css

@@ -20,12 +20,14 @@
 
 .map-layer-picker-container {
   width: 100%;
+  height: 100%;
 }
 
 .map-layer-picker {
   position: relative;
   width: 100%;
   display: inline-block;
+  height: 100%;
 }
 
 .padding-bottom-1 {
@@ -40,3 +42,7 @@
 .max-width-350 {
   max-width: 350px;
 }
+
+.height-100 {
+  height: 100%;
+}

package/dist/collection/components/map-layer-picker/map-layer-picker.js

@@ -19,7 +19,8 @@
  * limitations under the License.
  */
 import { Host, h } from "@stencil/core";
-import { getMapLayerHash, getMapLayerIds, getMapTableHash, getMapTableIds } from "../../utils/mapViewUtils";
+import { getLocaleComponentStrings } from "../../utils/locale";
+import { getMapLayerHash, getMapTableHash } from "../../utils/mapViewUtils";
 import state from "../../utils/publicNotificationStore";
 export class MapLayerPicker {
   constructor() {
@@ -27,13 +28,16 @@ export class MapLayerPicker {
     this.enabledLayerIds = [];
     this.enabledTableIds = [];
     this.mapView = undefined;
+    this.onlyShowUpdatableLayers = undefined;
     this.placeholderIcon = "";
     this.selectedIds = [];
     this.scale = "m";
     this.showTables = true;
     this.type = "select";
+    this._hasValidLayers = true;
     this.ids = [];
     this.selectedName = "";
+    this._translations = undefined;
   }
   //--------------------------------------------------------------------------
   //
@@ -46,10 +50,13 @@ export class MapLayerPicker {
    */
   async mapViewWatchHandler() {
     await this._setLayers();
-    const hasLayers = Object.keys(state.layerNameHash).length > 0;
-    const hasTables = Object.keys(state.tableNameHash).length > 0 && this.showTables;
-    if (hasLayers || hasTables) {
-      this._setSelectedLayer(this.ids[0], hasLayers ? "layer" : "table");
+    if (this.ids.length > 0) {
+      this._hasValidLayers = true;
+      this._setSelectedLayer(this.ids[0]);
+    }
+    else {
+      this._hasValidLayers = false;
+      this.noLayersFound.emit();
     }
   }
   //--------------------------------------------------------------------------
@@ -61,6 +68,7 @@ export class MapLayerPicker {
    * StencilJS: Called once just after the component is first connected to the DOM.
    */
   async componentWillLoad() {
+    await this._getTranslations();
     await this._setLayers();
     if (this.ids.length > 0 || this.selectedIds.length === 1) {
       this.layerSelectionChange.emit(this.selectedIds.length === 1 ? [this.selectedIds[0]] : [this.ids[0]]);
@@ -70,7 +78,7 @@ export class MapLayerPicker {
    * Renders the component.
    */
   render() {
-    return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, this.type === "combobox" ? this._getCombobox() :
+    return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, !this._hasValidLayers ? this._getInvalidPlaceholder() : this.type === "combobox" ? this._getCombobox() :
       this.type === "select" ? this._getSelect() : this._getDropdown()))));
   }
   /**
@@ -83,9 +91,9 @@ export class MapLayerPicker {
         this._layerElement.value = id;
       }
       else if (this.type === "dropdown") {
-        this.selectedName = Object.keys(state.layerNameHash).indexOf(id) > -1 ?
-          state.layerNameHash[id] : Object.keys(state.tableNameHash).indexOf(id) > -1 ?
-          state.tableNameHash[id] : "";
+        this.selectedName = Object.keys(this._layerNameHash).indexOf(id) > -1 ?
+          this._layerNameHash[id].name : Object.keys(this._tableNameHash).indexOf(id) > -1 ?
+          this._tableNameHash[id].name : "";
       }
     }
   }
@@ -94,6 +102,14 @@ export class MapLayerPicker {
   //  Functions (protected)
   //
   //--------------------------------------------------------------------------
+  /**
+   * Create a notice to inform the user that no layers were found
+   *
+   * @returns Calcite Notice component with the message
+   */
+  _getInvalidPlaceholder() {
+    return (h("div", null, h("calcite-notice", { class: "height-100", icon: "exclamation-mark-triangle", id: "no-valid-layers", kind: "danger", open: true }, h("div", { slot: "message" }, this._translations.noLayersFound)), h("calcite-tooltip", { label: this._translations.enableEditUpdate, placement: "bottom", "reference-element": "no-valid-layers" }, h("span", null, this._translations.enableEditUpdate))));
+  }
   /**
    * Create a list of layers from the map
    *
@@ -144,16 +160,21 @@ export class MapLayerPicker {
    * @returns A dom node with the name of the layer or table
    */
   _getItem(id, itemType) {
-    const name = itemType === "layer" ? state.layerNameHash[id] : state.tableNameHash[id];
-    return this.type === "combobox" ? (h("calcite-combobox-item", { textLabel: name, value: id })) :
-      this.type === "select" ? (h("calcite-option", { label: name, value: id })) :
-        (h("calcite-dropdown-item", { onClick: () => void this._setSelectedLayer(id, itemType) }, name));
+    const item = itemType === "layer" ? this._layerNameHash[id] : this._tableNameHash[id];
+    const disabled = this.onlyShowUpdatableLayers ? !item.supportsUpdate : false;
+    const name = item.name;
+    return this.type === "combobox" ? (h("calcite-combobox-item", { disabled: disabled, textLabel: name, value: id })) :
+      this.type === "select" ? (h("calcite-option", { disabled: disabled, label: name, value: id })) :
+        (h("calcite-dropdown-item", { disabled: disabled, onClick: disabled ? undefined : () => void this._setSelectedLayer(id) }, name));
   }
   /**
    * Store the layer name based on the user selection
    */
-  _setSelectedLayer(id, type) {
-    this.selectedName = type === "layer" ? state.layerNameHash[id] : state.tableNameHash[id];
+  _setSelectedLayer(id) {
+    const item = Object.keys(this._layerNameHash).indexOf(id) > -1 ?
+      this._layerNameHash[id] : Object.keys(this._tableNameHash).indexOf(id) > -1 ?
+      this._tableNameHash[id] : undefined;
+    this.selectedName = item === null || item === void 0 ? void 0 : item.name;
     this.selectedIds = [id];
     this.layerSelectionChange.emit(this.selectedIds);
   }
@@ -164,25 +185,38 @@ export class MapLayerPicker {
    */
   async _setLayers() {
     if (this.mapView) {
-      const mapLayerIds = await getMapLayerIds(this.mapView);
-      const mapTableIds = this.showTables ? await getMapTableIds(this.mapView) : [];
+      await this._initLayerTableHash();
+      const mapLayerIds = this.onlyShowUpdatableLayers ?
+        this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash);
+      const mapTableIds = this.showTables ? this.onlyShowUpdatableLayers ?
+        this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
       this.ids = [
         ...mapLayerIds.filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.indexOf(n) > -1 : true; }),
         ...mapTableIds.filter(n => { var _a; return ((_a = this.enabledTableIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledTableIds.indexOf(n) > -1 : true; }),
       ];
-      await this._initStateHash();
     }
   }
+  /**
+   * Fetch the ids of all layers that support edits with the update capability
+   *
+   * @returns array of layer ids
+   */
+  _getEditableIds(hash) {
+    return Object.keys(hash).reduce((prev, cur) => {
+      if (hash[cur].supportsUpdate) {
+        prev.push(cur);
+      }
+      return prev;
+    }, []);
+  }
   /**
    * Create a layer id:title hash for layer name display
    *
    * @returns Promise when the operation has completed
    */
-  async _initStateHash() {
-    if (this.mapView) {
-      state.layerNameHash = await getMapLayerHash(this.mapView);
-      state.tableNameHash = this.showTables ? await getMapTableHash(this.mapView) : {};
-    }
+  async _initLayerTableHash() {
+    this._layerNameHash = await getMapLayerHash(this.mapView, this.onlyShowUpdatableLayers);
+    this._tableNameHash = this.showTables ? await getMapTableHash(this.mapView, this.onlyShowUpdatableLayers) : {};
   }
   /**
    * Evaluate if the id exists in the current hash and verify if it should be excluded
@@ -190,9 +224,10 @@ export class MapLayerPicker {
    * @returns boolean when true the layer will be used in the current layer picker type
    */
   _validLayer(id) {
-    const name = state.layerNameHash[id];
+    var _a;
+    const name = (_a = this._layerNameHash[id]) === null || _a === void 0 ? void 0 : _a.name;
     return name && state.managedLayers.indexOf(name) < 0 && (this.enabledLayerIds.length > 0 ?
-      this.enabledLayerIds.indexOf(id) > -1 : name);
+      this.enabledLayerIds.indexOf(id) > -1 : true);
   }
   /**
    * Evaluate if the id exists in the current hash and verify if it should be excluded
@@ -200,7 +235,8 @@ export class MapLayerPicker {
    * @returns boolean when true the table will be used in the current layer picker type
    */
   _validTable(id) {
-    const name = state.tableNameHash[id];
+    var _a;
+    const name = (_a = this._tableNameHash[id]) === null || _a === void 0 ? void 0 : _a.name;
     const validName = name && this.showTables;
     return validName ? state.managedTables.indexOf(name) < 0 &&
       (this.enabledTableIds.length > 0 ? this.enabledTableIds.indexOf(id) > -1 : true) : validName;
@@ -217,6 +253,16 @@ export class MapLayerPicker {
       this.layerSelectionChange.emit(this.selectedIds);
     }
   }
+  /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   * @protected
+   */
+  async _getTranslations() {
+    const messages = await getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
+  }
   static get is() { return "map-layer-picker"; }
   static get originalStyleUrls() {
     return {
@@ -300,6 +346,23 @@ export class MapLayerPicker {
           "text": "esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
         }
       },
+      "onlyShowUpdatableLayers": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: When true only editable layers that support the update capability will be available"
+        },
+        "attribute": "only-show-updatable-layers",
+        "reflect": false
+      },
       "placeholderIcon": {
         "type": "string",
         "mutable": false,
@@ -392,12 +455,29 @@ export class MapLayerPicker {
   }
   static get states() {
     return {
+      "_hasValidLayers": {},
       "ids": {},
-      "selectedName": {}
+      "selectedName": {},
+      "_translations": {}
     };
   }
   static get events() {
     return [{
+        "method": "noLayersFound",
+        "name": "noLayersFound",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted on demand when no valid layers are found"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
         "method": "layerSelectionChange",
         "name": "layerSelectionChange",
         "bubbles": true,

package/dist/collection/components/map-picker/map-picker.css

@@ -48,7 +48,7 @@
   flex-direction: column;
   overflow: hidden;
   animation: calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;
-  background-color: var(--calcite-scrim-background);
+  background-color: var(--calcite-ui-background);
   z-index: 1000;
   width: 100%;
   height: -moz-fit-content;
@@ -62,3 +62,7 @@
 .action-bar-color {
   background-color: var(--calcite-ui-border-3) !important;
 }
+
+.align-center {
+  align-items: center;
+}

package/dist/collection/components/map-picker/map-picker.js

@@ -46,9 +46,9 @@ export class MapPicker {
   /**
    * Called each time the mapInfos prop is changed.
    */
-  mapInfosWatchHandler(v, oldV) {
+  async mapInfosWatchHandler(v, oldV) {
     if (v && JSON.stringify(v) !== JSON.stringify(oldV)) {
-      this.mapInfoChange.emit(v[0]);
+      this._webMapSelected(v[0]);
     }
   }
   //--------------------------------------------------------------------------
@@ -73,7 +73,7 @@ export class MapPicker {
   /**
    * Called once after the component has loaded
    */
-  componentDidLoad() {
+  async componentDidLoad() {
     const webMapInfo = this.mapInfos && this.mapInfos.length > 0 ? this.mapInfos[0] : undefined;
     if (webMapInfo) {
       this._webMapSelected(webMapInfo);

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

@@ -22,6 +22,11 @@ import { Host, h } from "@stencil/core";
 import { getLocaleComponentStrings } from "../../utils/locale";
 export class MapTools {
   constructor() {
+    this.enableLegend = undefined;
+    this.enableFullscreen = undefined;
+    this.enableSearch = undefined;
+    this.enableBasemap = undefined;
+    this.basemapConfig = undefined;
     this.layout = "vertical";
     this.mapView = undefined;
     this.searchConfiguration = undefined;
@@ -125,7 +130,16 @@ export class MapTools {
     const fullscreenIcon = this._showFullscreen ? "full-screen-exit" : "full-screen";
     const fullscreenTip = this._showFullscreen ? this._translations.exitFullscreen : this._translations.enterFullscreen;
     const expandTip = this._showTools ? this._translations.collapse : this._translations.expand;
-    return (h(Host, null, h("div", null, h("div", { class: "box-shadow" }, this._getActionGroup(toggleIcon, false, expandTip, () => this._toggleTools())), h("div", { class: `margin-top-1-2 box-shadow ${toolsClass}` }, this._getActionGroup("legend", false, this._translations.legend, () => this._showLegend()), this._getActionGroup("magnifying-glass", false, this._translations.search, () => this._search()), this._getActionGroup(fullscreenIcon, false, fullscreenTip, () => this._expand()), this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker()))), h("basemap-gallery", { class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, ref: (el) => { this._fullscreenElement = el; } })));
+    const containerClass = !this.enableBasemap && !this.enableFullscreen && !this.enableLegend && !this.enableSearch ? "display-none" : "";
+    return (h(Host, null, h("div", { class: containerClass }, h("div", { class: "box-shadow" }, this._getActionGroup(toggleIcon, false, expandTip, () => this._toggleTools())), h("div", { class: `margin-top-1-2 box-shadow ${toolsClass}` }, this.enableLegend ?
+      this._getActionGroup("legend", false, this._translations.legend, () => this._showLegend()) :
+      undefined, this.enableSearch ?
+      this._getActionGroup("magnifying-glass", false, this._translations.search, () => this._search()) :
+      undefined, this.enableFullscreen ?
+      this._getActionGroup(fullscreenIcon, false, fullscreenTip, () => this._expand()) :
+      undefined, this.enableBasemap ?
+      this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker()) :
+      undefined)), h("basemap-gallery", { basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, ref: (el) => { this._fullscreenElement = el; } })));
   }
   //--------------------------------------------------------------------------
   //
@@ -217,6 +231,95 @@ export class MapTools {
   }
   static get properties() {
     return {
+      "enableLegend": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the legend widget will be available"
+        },
+        "attribute": "enable-legend",
+        "reflect": false
+      },
+      "enableFullscreen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the fullscreen widget will be available"
+        },
+        "attribute": "enable-fullscreen",
+        "reflect": false
+      },
+      "enableSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the search widget will be available"
+        },
+        "attribute": "enable-search",
+        "reflect": false
+      },
+      "enableBasemap": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the basemap widget will be available"
+        },
+        "attribute": "enable-basemap",
+        "reflect": false
+      },
+      "basemapConfig": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IBasemapConfig",
+          "resolved": "IBasemapConfig",
+          "references": {
+            "IBasemapConfig": {
+              "location": "import",
+              "path": "../../utils/interfaces",
+              "id": "src/utils/interfaces.ts::IBasemapConfig"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "IBasemapConfig: List of any basemaps to filter out from the basemap widget"
+        }
+      },
       "layout": {
         "type": "string",
         "mutable": false,

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

@@ -30,12 +30,12 @@
 
     <link
       rel="stylesheet"
-      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
+      href="https://jsdev.arcgis.com/4.28/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.27/"></script>
+    <script src="https://jsdev.arcgis.com/4.28/"></script>
     <script type="module" src="../solutions-components.esm.js"></script>
 
     <script>

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

@@ -55,16 +55,16 @@
 
     <link
       rel="stylesheet"
-      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
+      href="https://jsdev.arcgis.com/4.28/esri/themes/light/main.css"
     />
     <!-- <link
       rel="stylesheet"
-      href="https://js.arcgis.com/4.27/esri/themes/dark/main.css"
+      href="https://jsdev.arcgis.com/4.28/esri/themes/dark/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.27/"></script>
+    <script src="https://jsdev.arcgis.com/4.28/"></script>
     <script type="module" src="../solutions-components.esm.js"></script>
 
     <script>

package/dist/collection/utils/interfaces.ts

@@ -165,7 +165,12 @@ export interface IValueChange {
  * Layer or table id and title key value pair
  */
 export interface IMapItemHash {
-  [key: string]: string;
+  [key: string]: ILayerHashInfo;
+}
+
+export interface ILayerHashInfo {
+  name: string;
+  supportsUpdate: boolean;
 }
 
 /**
@@ -444,6 +449,8 @@ export interface IMapInfo {
   searchConfiguration?: ISearchConfiguration;
   filters?: any[]; // TODO generate an interface for this once we know how it will be passed in
   layerInfos?: ILayerInfo[];
+  _hasValidLayers?: boolean;
+  visible?: boolean;
 }
 
 export interface ILayerInfo {
@@ -466,3 +473,7 @@ export interface IExportInfo {
   layerView?: __esri.FeatureLayerView;
   selectionSetNames: string[];
 }
+
+export interface IBasemapConfig {
+  basemapIdsToFilter: string[];
+}