@esri/solutions-components 0.6.6 → 0.6.8

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

@@ -0,0 +1,321 @@
+/*!
+ * 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 MapSearch {
+  constructor() {
+    this.mapView = undefined;
+    this.popupEnabled = false;
+    this.resultGraphicEnabled = false;
+    this.searchConfiguration = undefined;
+    this.searchTerm = undefined;
+    this.searchWidget = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Called each time the searchConfiguration prop is changed.
+   *
+   * @returns Promise when complete
+   */
+  async watchSearchConfigurationHandler() {
+    this._initSearchWidget();
+  }
+  /**
+   * Called each time the mapView prop is changed.
+   *
+   * @returns Promise when complete
+   */
+  async mapViewWatchHandler() {
+    await this.mapView.when(() => {
+      this._initSearchWidget();
+    });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   */
+  async componentWillLoad() {
+    await this._initModules();
+  }
+  /**
+   * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+   */
+  async componentDidLoad() {
+    return this._initSearchWidget();
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    return (h(Host, null, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } })));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   *
+   * @protected
+   */
+  async _initModules() {
+    const [Search, FeatureLayer] = await loadModules([
+      "esri/widgets/Search",
+      "esri/layers/FeatureLayer"
+    ]);
+    this.Search = Search;
+    this.FeatureLayer = FeatureLayer;
+  }
+  /**
+   * Initialize the search widget
+   *
+   * @protected
+   */
+  _initSearchWidget() {
+    if (this.mapView && this._searchElement && !this.searchWidget) {
+      let searchOptions = {
+        view: this.mapView,
+        container: this._searchElement,
+        searchTerm: this.searchTerm
+      };
+      if (this.searchConfiguration) {
+        const searchConfiguration = this._getSearchConfig(this.searchConfiguration, this.mapView);
+        searchOptions = Object.assign({}, searchConfiguration);
+      }
+      this.searchWidget = new this.Search(searchOptions);
+      this.searchWidget.popupEnabled = this.popupEnabled;
+      this.searchWidget.resultGraphicEnabled = this.resultGraphicEnabled;
+    }
+    else {
+      if (this.searchWidget) {
+        this.searchWidget.view = this.mapView;
+      }
+    }
+  }
+  /**
+   * Initialize the search widget based on user defined configuration
+   *
+   * @param searchConfiguration search configuration defined by the user
+   * @param view the current map view
+   *
+   * @protected
+   */
+  _getSearchConfig(searchConfiguration, view) {
+    const INCLUDE_DEFAULT_SOURCES = "includeDefaultSources";
+    const sources = searchConfiguration.sources;
+    if ((sources === null || sources === void 0 ? void 0 : sources.length) > 0) {
+      searchConfiguration[INCLUDE_DEFAULT_SOURCES] = false;
+      sources.forEach((source) => {
+        var _a, _b;
+        const isLayerSource = source.hasOwnProperty("layer");
+        if (isLayerSource) {
+          const layerSource = source;
+          const layerId = (_a = layerSource.layer) === null || _a === void 0 ? void 0 : _a.id;
+          const layerFromMap = layerId ? view.map.findLayerById(layerId) : null;
+          const layerUrl = (_b = layerSource === null || layerSource === void 0 ? void 0 : layerSource.layer) === null || _b === void 0 ? void 0 : _b.url;
+          if (layerFromMap) {
+            layerSource.layer = layerFromMap;
+          }
+          else if (layerUrl) {
+            layerSource.layer = new this.FeatureLayer(layerUrl);
+          }
+        }
+      });
+      sources === null || sources === void 0 ? void 0 : sources.forEach((source) => {
+        const isLocatorSource = source.hasOwnProperty("locator");
+        if (isLocatorSource) {
+          const locatorSource = source;
+          if ((locatorSource === null || locatorSource === void 0 ? void 0 : locatorSource.name) === "ArcGIS World Geocoding Service") {
+            const outFields = locatorSource.outFields || ["Addr_type", "Match_addr", "StAddr", "City"];
+            locatorSource.outFields = outFields;
+            locatorSource.singleLineFieldName = "SingleLine";
+          }
+          locatorSource.url = locatorSource.url;
+          delete locatorSource.url;
+        }
+      });
+    }
+    else {
+      searchConfiguration = Object.assign(Object.assign({}, searchConfiguration), { includeDefaultSources: true });
+    }
+    return searchConfiguration;
+  }
+  static get is() { return "map-search"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["map-search.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["map-search.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/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
+        }
+      },
+      "popupEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: When true the selected feature popup will be shown when serach result is found"
+        },
+        "attribute": "popup-enabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "resultGraphicEnabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: When true a graphic will be added for the search result"
+        },
+        "attribute": "result-graphic-enabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "searchConfiguration": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ISearchConfiguration",
+          "resolved": "ISearchConfiguration",
+          "references": {
+            "ISearchConfiguration": {
+              "location": "import",
+              "path": "../../utils/interfaces",
+              "id": "src/utils/interfaces.ts::ISearchConfiguration"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ISearchConfiguration: Configuration details for the Search widget"
+        }
+      },
+      "searchTerm": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "string: Text entered by the end user.\r\nUsed to search against the locator."
+        },
+        "attribute": "search-term",
+        "reflect": false
+      },
+      "searchWidget": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "__esri.widgetsSearch",
+          "resolved": "widgetsSearch",
+          "references": {
+            "___esri": {
+              "location": "global",
+              "id": "global::___esri"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "esri/widgets/Search: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html"
+        }
+      }
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "searchConfiguration",
+        "methodName": "watchSearchConfigurationHandler"
+      }, {
+        "propName": "mapView",
+        "methodName": "mapViewWatchHandler"
+      }];
+  }
+}

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

@@ -0,0 +1,29 @@
+/*!
+ * 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 { newE2EPage } from "@stencil/core/testing";
+xdescribe('map-search', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<map-search></map-search>');
+    const element = await page.find('map-search');
+    expect(element).toHaveClass('hydrated');
+  });
+});

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

@@ -0,0 +1,37 @@
+/*!
+ * 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 { newSpecPage } from "@stencil/core/testing";
+import { MapSearch } from "../map-search";
+xdescribe('map-search', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [MapSearch],
+      html: `<map-search></map-search>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <map-search>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </map-search>
+    `);
+  });
+});

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

@@ -25,9 +25,53 @@ export class MapTools {
   constructor() {
     this.layout = "vertical";
     this.mapView = undefined;
+    this.searchConfiguration = undefined;
     this._translations = undefined;
     this._showTools = true;
-    this._showBasemapPicker = false;
+    this._showBasemapWidget = false;
+    this._showSearchWidget = false;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  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
+   */
+  async _showBasemapWidgetWatchHandler(v) {
+    if (v) {
+      this.mapView.ui.add(this._basemapElement.basemapWidget, {
+        position: "top-right",
+        index: 1
+      });
+    }
+    else {
+      this.mapView.ui.remove(this._basemapElement.basemapWidget);
+    }
+  }
+  /**
+   * 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",
+        index: 1
+      });
+    }
+    else {
+      this.mapView.ui.remove(this._searchElement.searchWidget);
+    }
   }
   //--------------------------------------------------------------------------
   //
@@ -46,8 +90,15 @@ export class MapTools {
   render() {
     const toggleIcon = this._showTools ? "chevrons-up" : "chevrons-down";
     const toolsClass = this._showTools ? "" : "display-none";
-    return (h(Host, null, h("div", { class: "display-flex" }, 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, () => this._goHome()), this._getActionGroup("plus", false, this._translations.zoomIn, () => this._zoomIn()), this._getActionGroup("minus", false, this._translations.zoomOut, () => 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())))));
+    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 })));
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
   /**
    * Get a calcite action group for the current action
    *
@@ -63,9 +114,15 @@ export class MapTools {
   _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))));
   }
-  // Need to discuss this with the team
-  _goHome() {
-    alert("go home");
+  /**
+   * Go to the exent that was first used when loading the map
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  async _goHome() {
+    await this.mapView.goTo(this._homeExtent);
   }
   // need to discuss this with the team
   _showList() {
@@ -73,15 +130,44 @@ export class MapTools {
   }
   // Need to discuss this with the team
   _search() {
-    alert("search");
+    this._showSearchWidget = !this._showSearchWidget;
+    this._showTools = false;
+  }
+  /**
+   * Fixed zoom in
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  async _zoomIn() {
+    await this._zoom(this.mapView.zoom + 1);
   }
-  // Need to explore map fixed zoom in considerations
-  _zoomIn() {
-    alert("zoom in");
+  /**
+   * Fixed zoom out
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  async _zoomOut() {
+    await this._zoom(this.mapView.zoom - 1);
   }
-  // Need to explore map fixed zoom out considerations
-  _zoomOut() {
-    alert("zoom out");
+  /**
+   * 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
@@ -91,7 +177,8 @@ export class MapTools {
    * @protected
    */
   _toggleBasemapPicker() {
-    this._showBasemapPicker = !this._showBasemapPicker;
+    this._showBasemapWidget = !this._showBasemapWidget;
+    this._showTools = false;
   }
   /**
    * Emit the expand map event
@@ -111,6 +198,10 @@ export class MapTools {
    * @protected
    */
   _toggleTools() {
+    if (!this._showTools) {
+      this._showBasemapWidget = false;
+      this._showSearchWidget = false;
+    }
     this._showTools = !this._showTools;
   }
   /**
@@ -174,6 +265,27 @@ export class MapTools {
           "tags": [],
           "text": "esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
         }
+      },
+      "searchConfiguration": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "ISearchConfiguration",
+          "resolved": "ISearchConfiguration",
+          "references": {
+            "ISearchConfiguration": {
+              "location": "import",
+              "path": "../../utils/interfaces",
+              "id": "src/utils/interfaces.ts::ISearchConfiguration"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "ISearchConfiguration: Configuration details for the Search widget"
+        }
       }
     };
   }
@@ -181,7 +293,8 @@ export class MapTools {
     return {
       "_translations": {},
       "_showTools": {},
-      "_showBasemapPicker": {}
+      "_showBasemapWidget": {},
+      "_showSearchWidget": {}
     };
   }
   static get events() {
@@ -209,4 +322,16 @@ export class MapTools {
       }];
   }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "mapView",
+        "methodName": "mapViewWatchHandler"
+      }, {
+        "propName": "_showBasemapWidget",
+        "methodName": "_showBasemapWidgetWatchHandler"
+      }, {
+        "propName": "_showSearchWidget",
+        "methodName": "_showSearchWidgetWatchHandler"
+      }];
+  }
 }

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

@@ -83,6 +83,9 @@
         demo.mapInfos = [
           ...custom,
           ...[{
+            id: "ce3dec81bf714d3bb71da9691ab686d1",
+            name: "Popup Configured Map"
+          }, {
             id: "863e4f6f2a7840db896cc1b1606d552d",
             name: "IA map"
           }, {
@@ -94,9 +97,6 @@
           }, {
             id: "f5b01c17a09941eaad63e7b4e6c7d880",
             name: "Attachments Map"
-          }, {
-            id: "ce3dec81bf714d3bb71da9691ab686d1",
-            name: "Popup Configured Map"
           }]
         ];
       }

package/dist/collection/utils/interfaces.ts

@@ -446,6 +446,8 @@ export interface IMediaCardValues {
 export interface IMapInfo {
   id: string;
   name: string;
+  searchConfiguration?: ISearchConfiguration;
+  filters?: any[]; // TODO generate an interface for this once we know how it will be passed in
 }
 
 export interface IExportInfos {

package/dist/components/action-bar.js

@@ -296,5 +296,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { ActionBar as A, defineCustomElement as d };

package/dist/components/action-group.js

@@ -173,5 +173,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { ActionGroup as A, SLOTS as S, defineCustomElement as d };

package/dist/components/action-menu.js

@@ -342,5 +342,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { ActionMenu as A, SLOTS as S, defineCustomElement as d };

package/dist/components/action.js

@@ -221,5 +221,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { Action as A, defineCustomElement as d };

package/dist/components/alert.js

@@ -322,5 +322,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { Alert as A, defineCustomElement as d };

package/dist/components/avatar.js

@@ -169,5 +169,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { Avatar as A, defineCustomElement as d };