@esri/solutions-components 0.6.8 → 0.6.10

package/dist/collection/components/layer-table/layer-table.js

@@ -45,6 +45,7 @@ export class LayerTable {
     this.onTableNodeCreate = (node) => {
       this._tableNode = node;
     };
+    this.mapInfo = undefined;
     this.mapView = undefined;
     this.showNewestFirst = undefined;
     this.zoomAndScrollToSelected = undefined;
@@ -152,7 +153,11 @@ export class LayerTable {
     const tableNodeClass = this._fetchingData ? "display-none" : "";
     const loadingClass = this._fetchingData ? "" : "display-none";
     const alertActionClass = this._alertShowAction ? "" : "display-none";
-    return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: "height-full width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate }))), h("calcite-alert", { icon: this._alertIcon, kind: this._alertKind, label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._alertTitle), h("div", { slot: "message" }, this._alertMessage), h("calcite-link", { class: alertActionClass, onClick: this._alertActionFunction, slot: "link" }, this._alertActionText)))));
+    const total = this._allIds.length.toString();
+    const selected = this._selectedIndexes.length.toString();
+    return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: "height-full width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate })), h("div", { class: "bottom-left background text-color" }, this._translations.recordsSelected
+      .replace("{{total}}", total)
+      .replace("{{selected}}", selected))), h("calcite-alert", { icon: this._alertIcon, kind: this._alertKind, label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._alertTitle), h("div", { slot: "message" }, this._alertMessage), h("calcite-link", { class: alertActionClass, onClick: this._alertActionFunction, slot: "link" }, this._alertActionText)))));
   }
   //--------------------------------------------------------------------------
   //
@@ -193,7 +198,7 @@ export class LayerTable {
    *
    * @returns void
    */
-  async _getTable(node) {
+  async _getTable(node, columnTemplates) {
     if (this._layer) {
       await this._layer.when(async () => {
         this._table = new this.FeatureTable({
@@ -206,6 +211,9 @@ export class LayerTable {
             header: false,
             menu: false
           },
+          tableTemplate: {
+            columnTemplates
+          },
           container: node
         });
         await this._table.when(async () => {
@@ -222,8 +230,9 @@ export class LayerTable {
             this.featureSelectionChange.emit(this._selectedIndexes);
           });
           this.reactiveUtils.watch(() => this._table.activeSortOrders, (sortOrders) => {
-            var _a, _b;
-            this._sortActive = sortOrders.length > 0 && ((_a = sortOrders[0]) === null || _a === void 0 ? void 0 : _a.direction) === "asc" || ((_b = sortOrders[0]) === null || _b === void 0 ? void 0 : _b.direction) === "desc";
+            var _a, _b, _c, _d;
+            this._sortActive = (sortOrders.length > 0 && ((_a = sortOrders[0]) === null || _a === void 0 ? void 0 : _a.direction) === "asc" || ((_b = sortOrders[0]) === null || _b === void 0 ? void 0 : _b.direction) === "desc") ||
+              ((_c = sortOrders[0]) === null || _c === void 0 ? void 0 : _c.direction) === null && ((_d = sortOrders[0]) === null || _d === void 0 ? void 0 : _d.fieldName) === this._layer.objectIdField;
           });
         });
       });
@@ -239,7 +248,9 @@ export class LayerTable {
       this._clearSelection();
       this._allIds = [];
       this.featureSelectionChange.emit(this._selectedIndexes);
+      const columnTemplates = this._getColumnTemplates(this._layer.id);
       this._table.layer = this._layer;
+      this._table.tableTemplate.columnTemplates = columnTemplates;
       this._editEnabled = this._layer.editingEnabled;
       this._table.view = this.mapView;
       this._table.editingEnabled = this._editEnabled;
@@ -352,14 +363,15 @@ export class LayerTable {
    */
   _switchSelected() {
     const currentIndexes = [...this._selectedIndexes];
-    this._selectedIndexes = this._allIds.reduce((prev, _cur, i) => {
-      if (currentIndexes.indexOf(i) < 0) {
-        prev.push(i);
+    this._table.highlightIds.removeAll();
+    const ids = this._allIds.reduce((prev, _cur) => {
+      if (currentIndexes.indexOf(_cur) < 0) {
+        prev.push(_cur);
       }
       return prev;
     }, []);
-    this._table.highlightIds.removeAll();
-    this._table.highlightIds.addMany(this._selectedIndexes);
+    this._table.highlightIds.addMany(ids);
+    this._selectedIndexes = ids;
   }
   /**
    * Export all selected rows as CSV
@@ -443,10 +455,14 @@ export class LayerTable {
     const id = evt.detail[0];
     if (id !== this._layer.id || this._allIds.length === 0) {
       this._fetchingData = true;
+      const columnTemplates = this._getColumnTemplates(id);
       this._layer = await getLayer(this.mapView, id);
       this._allIds = await queryAllIds(this._layer);
       if (!this._table) {
-        await this._getTable(this._tableNode);
+        await this._getTable(this._tableNode, columnTemplates);
+      }
+      else if (columnTemplates) {
+        this._table.tableTemplate.columnTemplates = columnTemplates;
       }
       await this._table.when(() => {
         this._table.highlightIds.removeAll();
@@ -459,6 +475,24 @@ export class LayerTable {
     await this._sortTable();
     this._fetchingData = false;
   }
+  /**
+   * Get any columnt templates for the current map
+   *
+   * @param id item ID of the current map
+   *
+   * @returns a list of column templates if they exist
+   */
+  _getColumnTemplates(id) {
+    var _a;
+    let layerInfo;
+    (_a = this.mapInfo.layerInfos) === null || _a === void 0 ? void 0 : _a.some(li => {
+      if (li.id === id) {
+        layerInfo = li;
+        return true;
+      }
+    });
+    return layerInfo === null || layerInfo === void 0 ? void 0 : layerInfo.columnTemplates;
+  }
   /**
    * Fetches the component's translations
    *
@@ -482,6 +516,27 @@ export class LayerTable {
   }
   static get properties() {
     return {
+      "mapInfo": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IMapInfo",
+          "resolved": "IMapInfo",
+          "references": {
+            "IMapInfo": {
+              "location": "import",
+              "path": "../../utils/interfaces",
+              "id": "src/utils/interfaces.ts::IMapInfo"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "IMapInfo: key configuration details about the current map"
+        }
+      },
       "mapView": {
         "type": "unknown",
         "mutable": false,

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

@@ -23,10 +23,3 @@
 .map-height {
   height: calc(100% - 58px);
 }
-
-/* Not sure how else to do this
-  tried navigation gamepad settings but enabled: false still shows this */
-
-.esri-zoom {
-  display: none !important;
-}

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

@@ -73,12 +73,14 @@ export class MapCard {
    * @protected
    */
   async _initModules() {
-    const [WebMap, MapView] = await loadModules([
+    const [WebMap, MapView, Home] = await loadModules([
       "esri/WebMap",
-      "esri/views/MapView"
+      "esri/views/MapView",
+      "esri/widgets/Home"
     ]);
     this.WebMap = WebMap;
     this.MapView = MapView;
+    this.Home = Home;
   }
   /**
    * Load the webmap for the provided webMapInfo
@@ -104,10 +106,17 @@ export class MapCard {
         map: webMap,
         resizeAlign: "top-left"
       });
+      this._loadedId = id;
+      this._searchConfiguration = this._webMapInfo.searchConfiguration;
+      this.mapChanged.emit({
+        id: id,
+        mapView: this.mapView
+      });
       await this.mapView.when(() => {
-        this._loadedId = id;
-        this._searchConfiguration = this._webMapInfo.searchConfiguration;
-        this.mapChanged.emit(this.mapView);
+        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 });
       });
     }
@@ -187,12 +196,13 @@ export class MapCard {
           "text": "Emitted when a new map is loaded"
         },
         "complexType": {
-          "original": "__esri.MapView",
-          "resolved": "MapView",
+          "original": "IMapChange",
+          "resolved": "IMapChange",
           "references": {
-            "___esri": {
-              "location": "global",
-              "id": "global::___esri"
+            "IMapChange": {
+              "location": "import",
+              "path": "../../utils/interfaces",
+              "id": "src/utils/interfaces.ts::IMapChange"
             }
           }
         }

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,166 @@
+/*!
+ * 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.
+ */
+import { Host, h } from "@stencil/core";
+import { loadModules } from "../../utils/loadModules";
+export class MapLegend {
+  constructor() {
+    this.mapView = undefined;
+    this.legendWidget = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  async mapViewWatchHandler() {
+    await this.mapView.when(() => {
+      this._initLegend(this.mapView);
+    });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   */
+  async componentWillLoad() {
+    return this._initModules();
+  }
+  /**
+   * StencilJS: Renders the component.
+   */
+  render() {
+    return (h(Host, null, h("div", { ref: (el) => { this._legendElement = el; } })));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   *
+   * @protected
+   */
+  async _initModules() {
+    const [Legend] = await loadModules([
+      "esri/widgets/Legend"
+    ]);
+    this.Legend = Legend;
+  }
+  /**
+   * Initialize the basemap gallery or reset the current view if it already exists
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  _initLegend(view) {
+    if (view && this.Legend) {
+      if (!this.legendWidget) {
+        this.legendWidget = new this.Legend({
+          container: this._legendElement,
+          view
+        });
+      }
+      else {
+        this.legendWidget.view = view;
+      }
+    }
+  }
+  static get is() { return "map-legend"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["map-legend.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["map-legend.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "mapView": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "__esri.MapView",
+          "resolved": "MapView",
+          "references": {
+            "___esri": {
+              "location": "global",
+              "id": "global::___esri"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
+        }
+      },
+      "legendWidget": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "__esri.Legend",
+          "resolved": "Legend",
+          "references": {
+            "___esri": {
+              "location": "global",
+              "id": "global::___esri"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "esri/widgets/Legend: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend.html\n\nLegend instance"
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "mapView",
+        "methodName": "mapViewWatchHandler"
+      }];
+  }
+}

package/dist/collection/components/map-legend/test/map-legend.e2e.js

@@ -0,0 +1,14 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { newE2EPage } from "@stencil/core/testing";
+xdescribe('map-legend', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<map-legend></map-legend>');
+    const element = await page.find('map-legend');
+    expect(element).toHaveClass('hydrated');
+  });
+});

package/dist/collection/components/map-legend/test/map-legend.spec.js

@@ -0,0 +1,22 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { MapLegend } from "../map-legend";
+xdescribe('map-legend', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [MapLegend],
+      html: `<map-legend></map-legend>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <map-legend>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </map-legend>
+    `);
+  });
+});

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

@@ -49,7 +49,7 @@
   overflow: hidden;
   animation: calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;
   background-color: var(--calcite-scrim-background);
-  z-index: 1;
+  z-index: 1000;
   width: 100%;
   height: -moz-fit-content;
   height: fit-content;
@@ -58,3 +58,7 @@
 .display-none {
   display: none;
 }
+
+.action-bar-color {
+  background-color: var(--calcite-ui-border-3) !important;
+}

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

@@ -95,7 +95,7 @@ export class MapPicker {
   _getMapPicker() {
     var _a;
     const mapListIcon = this._mapListExpanded ? "chevron-up" : "chevron-down";
-    return (h("calcite-button", { alignment: "icon-end-space-between", appearance: "solid", class: "width-full height-full", iconEnd: mapListIcon, kind: "neutral", onClick: () => this._chooseMap(), width: "full" }, (_a = this._webMapInfo) === null || _a === void 0 ? void 0 : _a.name));
+    return (h("calcite-button", { alignment: "icon-end-space-between", appearance: "transparent", class: "width-full height-full", iconEnd: mapListIcon, kind: "neutral", onClick: () => this._chooseMap(), width: "full" }, (_a = this._webMapInfo) === null || _a === void 0 ? void 0 : _a.name));
   }
   /**
    * Create the toolbar (controls used for map and app interactions)
@@ -105,7 +105,7 @@ export class MapPicker {
    * @protected
    */
   _getToolbar() {
-    return (h("div", { class: "display-flex" }, h("calcite-action-bar", { class: "border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: "header" }, this._getMapPicker())));
+    return (h("div", { class: "display-flex" }, h("calcite-action-bar", { class: "action-bar-color border-bottom-1 action-bar-size", "expand-disabled": true, layout: "horizontal", slot: "header" }, this._getMapPicker())));
   }
   /**
    * Get a pick list for all maps in mapInfos

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

@@ -29,3 +29,17 @@
 .margin-top-1-2 {
   margin-top: 0.5rem;
 }
+
+.square-40 {
+  width: 40px;
+  height: 40px;
+}
+
+.width-40 {
+  width: 40px;
+}
+
+.square-40-41 {
+  width: 40px;
+  height: 41px;
+}

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

@@ -29,6 +29,7 @@ export class MapTools {
     this._translations = undefined;
     this._showTools = true;
     this._showBasemapWidget = false;
+    this._showLegendWidget = false;
     this._showSearchWidget = false;
   }
   //--------------------------------------------------------------------------
@@ -36,14 +37,6 @@ export class MapTools {
   //  Watch handlers
   //
   //--------------------------------------------------------------------------
-  /**
-   * Store the home extent when the map view changes
-   */
-  async mapViewWatchHandler() {
-    await this.mapView.when(() => {
-      this._homeExtent = this.mapView.extent;
-    });
-  }
   /**
    * When the _showBasemapWidget property is true display the basemap gallery
    */
@@ -58,11 +51,24 @@ export class MapTools {
       this.mapView.ui.remove(this._basemapElement.basemapWidget);
     }
   }
+  /**
+   * When the _showLegendWidget property is true display the search widget
+   */
+  async _showLegendWidgetWatchHandler(v) {
+    if (v) {
+      this.mapView.ui.add(this._legendElement.legendWidget, {
+        position: "top-right",
+        index: 1
+      });
+    }
+    else {
+      this.mapView.ui.remove(this._legendElement.legendWidget);
+    }
+  }
   /**
    * When the _showSearchWidget property is true display the search widget
    */
   async _showSearchWidgetWatchHandler(v) {
-    console.log("_showSearchWidget changed");
     if (v) {
       this.mapView.ui.add(this._searchElement.searchWidget, {
         position: "top-right",
@@ -92,7 +98,8 @@ export class MapTools {
     const toolsClass = this._showTools ? "" : "display-none";
     const searchClass = this._showSearchWidget ? "" : "display-none";
     const basemapClass = this._showBasemapWidget ? "" : "display-none";
-    return (h(Host, null, h("div", null, h("calcite-action", { alignment: "center", class: "border", compact: false, icon: toggleIcon, onClick: () => { this._toggleTools(); }, text: "" }), h("calcite-action-bar", { class: `border margin-top-1-2 ${toolsClass}`, "expand-disabled": true, layout: this.layout }, this._getActionGroup("home", false, this._translations.home, () => void this._goHome()), this._getActionGroup("plus", false, this._translations.zoomIn, () => void this._zoomIn()), this._getActionGroup("minus", false, this._translations.zoomOut, () => void this._zoomOut()), this._getActionGroup("list", false, this._translations.list, () => this._showList()), this._getActionGroup("magnifying-glass", false, this._translations.search, () => this._search()), this._getActionGroup("expand", false, this._translations.expand, () => 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 })));
+    const legendClass = this._showLegendWidget ? "" : "display-none";
+    return (h(Host, null, h("div", null, h("calcite-action", { alignment: "center", class: "border square-40", compact: false, icon: toggleIcon, onClick: () => { this._toggleTools(); }, scale: "s", text: "" }), h("calcite-action-bar", { class: `width-40 border margin-top-1-2 ${toolsClass}`, "expand-disabled": true, layout: this.layout }, this._getActionGroup("legend", false, this._translations.legend, () => this._showLegend()), this._getActionGroup("magnifying-glass", false, this._translations.search, () => this._search()), this._getActionGroup("expand", false, this._translations.expand, () => 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; } })));
   }
   //--------------------------------------------------------------------------
   //
@@ -112,63 +119,18 @@ export class MapTools {
    * @protected
    */
   _getActionGroup(icon, disabled, tip, func) {
-    return (h("calcite-action-group", null, h("calcite-action", { alignment: "center", compact: false, disabled: disabled, icon: icon, id: icon, onClick: func, text: "" }, h("calcite-icon", { icon: "cheveron-up", scale: "s", slot: "icon" })), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, tip))));
-  }
-  /**
-   * Go to the exent that was first used when loading the map
-   *
-   * @returns void
-   *
-   * @protected
-   */
-  async _goHome() {
-    await this.mapView.goTo(this._homeExtent);
+    return (h("calcite-action-group", { class: "square-40-41" }, h("calcite-action", { alignment: "center", class: "square-40", compact: false, disabled: disabled, icon: icon, id: icon, onClick: func, scale: "s", text: "" }, h("calcite-icon", { icon: "cheveron-up", scale: "s", slot: "icon" })), h("calcite-tooltip", { label: "", placement: "trailing", "reference-element": icon }, h("span", null, tip))));
   }
   // need to discuss this with the team
-  _showList() {
-    alert("show list");
+  _showLegend() {
+    this._showLegendWidget = !this._showLegendWidget;
+    this._showTools = false;
   }
   // Need to discuss this with the team
   _search() {
     this._showSearchWidget = !this._showSearchWidget;
     this._showTools = false;
   }
-  /**
-   * Fixed zoom in
-   *
-   * @returns void
-   *
-   * @protected
-   */
-  async _zoomIn() {
-    await this._zoom(this.mapView.zoom + 1);
-  }
-  /**
-   * Fixed zoom out
-   *
-   * @returns void
-   *
-   * @protected
-   */
-  async _zoomOut() {
-    await this._zoom(this.mapView.zoom - 1);
-  }
-  /**
-   * Zoom in/out at the maps current center point
-   *
-   * @param zoom Number to zoom level to go to
-   *
-   * @returns void
-   *
-   * @protected
-   */
-  async _zoom(zoom) {
-    var _a;
-    await ((_a = this.mapView) === null || _a === void 0 ? void 0 : _a.goTo({
-      target: this.mapView.center,
-      zoom
-    }));
-  }
   /**
    * Show/Hide the basemap picker
    *
@@ -201,6 +163,7 @@ export class MapTools {
     if (!this._showTools) {
       this._showBasemapWidget = false;
       this._showSearchWidget = false;
+      this._showLegendWidget = false;
     }
     this._showTools = !this._showTools;
   }
@@ -294,6 +257,7 @@ export class MapTools {
       "_translations": {},
       "_showTools": {},
       "_showBasemapWidget": {},
+      "_showLegendWidget": {},
       "_showSearchWidget": {}
     };
   }
@@ -324,11 +288,11 @@ export class MapTools {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "mapView",
-        "methodName": "mapViewWatchHandler"
-      }, {
         "propName": "_showBasemapWidget",
         "methodName": "_showBasemapWidgetWatchHandler"
+      }, {
+        "propName": "_showLegendWidget",
+        "methodName": "_showLegendWidgetWatchHandler"
       }, {
         "propName": "_showSearchWidget",
         "methodName": "_showSearchWidgetWatchHandler"

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

@@ -84,7 +84,32 @@
           ...custom,
           ...[{
             id: "ce3dec81bf714d3bb71da9691ab686d1",
-            name: "Popup Configured Map"
+            name: "Popup Configured Map",
+            // layerInfos: [{
+            //   id: "Requests_681",
+            //   columnTemplates: [{
+            //     type: "field",
+            //     fieldName: "ObjectId",
+            //     visible: false
+            //   }, {
+            //     type: "field",
+            //     fieldName: "reqcategory",
+            //     label: "Request ID",
+            //     visible: true
+            //   }]
+            // }, {
+            //   id: "Requets_6608",
+            //   columnTemplates: [{
+            //     type: "field",
+            //     fieldName: "requestglobalid",
+            //     visible: false
+            //   }, {
+            //     type: "field",
+            //     fieldName: "comments",
+            //     label: "Comments",
+            //     visible: true
+            //   }]
+            // }]
           }, {
             id: "863e4f6f2a7840db896cc1b1606d552d",
             name: "IA map"