@esri/solutions-components 0.6.8 → 0.6.9

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-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;
   }
   //--------------------------------------------------------------------------
@@ -58,11 +59,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 +106,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", 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("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; } })));
   }
   //--------------------------------------------------------------------------
   //
@@ -125,8 +140,9 @@ export class MapTools {
     await this.mapView.goTo(this._homeExtent);
   }
   // 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() {
@@ -201,6 +217,7 @@ export class MapTools {
     if (!this._showTools) {
       this._showBasemapWidget = false;
       this._showSearchWidget = false;
+      this._showLegendWidget = false;
     }
     this._showTools = !this._showTools;
   }
@@ -294,6 +311,7 @@ export class MapTools {
       "_translations": {},
       "_showTools": {},
       "_showBasemapWidget": {},
+      "_showLegendWidget": {},
       "_showSearchWidget": {}
     };
   }
@@ -329,6 +347,9 @@ export class MapTools {
       }, {
         "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"