@esri/solutions-components 0.6.6 → 0.6.8

package/dist/components/map-search2.js

@@ -0,0 +1,201 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { l as loadModules } from './loadModules.js';
+
+const mapSearchCss = ":host{display:block}.search-widget{width:100% !important;border:1px solid var(--calcite-ui-border-input)}";
+
+const MapSearch = /*@__PURE__*/ proxyCustomElement(class MapSearch extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 watchers() { return {
+    "searchConfiguration": ["watchSearchConfigurationHandler"],
+    "mapView": ["mapViewWatchHandler"]
+  }; }
+  static get style() { return mapSearchCss; }
+}, [1, "map-search", {
+    "mapView": [16],
+    "popupEnabled": [4, "popup-enabled"],
+    "resultGraphicEnabled": [4, "result-graphic-enabled"],
+    "searchConfiguration": [16],
+    "searchTerm": [1, "search-term"],
+    "searchWidget": [16]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["map-search"];
+  components.forEach(tagName => { switch (tagName) {
+    case "map-search":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MapSearch);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { MapSearch as M, defineCustomElement as d };

package/dist/components/map-select-tools2.js

@@ -948,5 +948,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { MapSelectTools as M, defineCustomElement as d };

package/dist/components/map-tools2.js

@@ -6,14 +6,16 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { b as EExpandType } from './interfaces.js';
-import { d as defineCustomElement$8 } from './action.js';
-import { d as defineCustomElement$7 } from './action-bar.js';
-import { d as defineCustomElement$6 } from './action-group.js';
-import { d as defineCustomElement$5 } from './action-menu.js';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './loader.js';
-import { d as defineCustomElement$2 } from './popover.js';
-import { d as defineCustomElement$1 } from './tooltip.js';
+import { d as defineCustomElement$a } from './basemap-gallery2.js';
+import { d as defineCustomElement$9 } from './action.js';
+import { d as defineCustomElement$8 } from './action-bar.js';
+import { d as defineCustomElement$7 } from './action-group.js';
+import { d as defineCustomElement$6 } from './action-menu.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './loader.js';
+import { d as defineCustomElement$3 } from './popover.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
+import { d as defineCustomElement$1 } from './map-search2.js';
 
 const mapToolsCss = ":host{display:block}.display-none{display:none}.border{border:1px solid var(--calcite-ui-border-3)}.margin-top-1-2{margin-top:0.5rem}";
 
@@ -25,9 +27,53 @@ const MapTools = /*@__PURE__*/ proxyCustomElement(class MapTools extends HTMLEle
     this.expandMap = createEvent(this, "expandMap", 7);
     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 +92,15 @@ const MapTools = /*@__PURE__*/ proxyCustomElement(class MapTools extends HTMLEle
   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 +116,15 @@ const MapTools = /*@__PURE__*/ proxyCustomElement(class MapTools extends HTMLEle
   _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 +132,44 @@ const MapTools = /*@__PURE__*/ proxyCustomElement(class MapTools extends HTMLEle
   }
   // Need to discuss this with the team
   _search() {
-    alert("search");
+    this._showSearchWidget = !this._showSearchWidget;
+    this._showTools = false;
   }
-  // Need to explore map fixed zoom in considerations
-  _zoomIn() {
-    alert("zoom in");
+  /**
+   * 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);
   }
-  // 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 +179,8 @@ const MapTools = /*@__PURE__*/ proxyCustomElement(class MapTools extends HTMLEle
    * @protected
    */
   _toggleBasemapPicker() {
-    this._showBasemapPicker = !this._showBasemapPicker;
+    this._showBasemapWidget = !this._showBasemapWidget;
+    this._showTools = false;
   }
   /**
    * Emit the expand map event
@@ -111,6 +200,10 @@ const MapTools = /*@__PURE__*/ proxyCustomElement(class MapTools extends HTMLEle
    * @protected
    */
   _toggleTools() {
+    if (!this._showTools) {
+      this._showBasemapWidget = false;
+      this._showSearchWidget = false;
+    }
     this._showTools = !this._showTools;
   }
   /**
@@ -124,66 +217,84 @@ const MapTools = /*@__PURE__*/ proxyCustomElement(class MapTools extends HTMLEle
     this._translations = messages[0];
   }
   get el() { return this; }
+  static get watchers() { return {
+    "mapView": ["mapViewWatchHandler"],
+    "_showBasemapWidget": ["_showBasemapWidgetWatchHandler"],
+    "_showSearchWidget": ["_showSearchWidgetWatchHandler"]
+  }; }
   static get style() { return mapToolsCss; }
 }, [1, "map-tools", {
     "layout": [1],
     "mapView": [16],
+    "searchConfiguration": [16],
     "_translations": [32],
     "_showTools": [32],
-    "_showBasemapPicker": [32]
+    "_showBasemapWidget": [32],
+    "_showSearchWidget": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["map-tools", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-icon", "calcite-loader", "calcite-popover", "calcite-tooltip"];
+  const components = ["map-tools", "basemap-gallery", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-icon", "calcite-loader", "calcite-popover", "calcite-tooltip", "map-search"];
   components.forEach(tagName => { switch (tagName) {
     case "map-tools":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, MapTools);
       }
       break;
+    case "basemap-gallery":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
     case "calcite-action":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "calcite-action-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "calcite-action-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "calcite-action-menu":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "calcite-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "calcite-loader":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "calcite-popover":
       if (!customElements.get(tagName)) {
-        defineCustomElement$2();
+        defineCustomElement$3();
       }
       break;
     case "calcite-tooltip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "map-search":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }
       break;
   } });
 }
+defineCustomElement();
 
 export { MapTools as M, defineCustomElement as d };

package/dist/components/menu.js

@@ -255,5 +255,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { CalciteMenu as C, defineCustomElement as d };

package/dist/components/notice.js

@@ -161,5 +161,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { Notice as N, defineCustomElement as d };

package/dist/components/option.js

@@ -99,5 +99,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { Option as O, defineCustomElement as d };

package/dist/components/panel.js

@@ -366,5 +366,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { Panel as P, SLOTS as S, defineCustomElement as d };

package/dist/components/pci-calculator.js

@@ -185,6 +185,7 @@ function defineCustomElement$1() {
       break;
   } });
 }
+defineCustomElement$1();
 
 const PciCalculator = PciCalculator$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/pdf-download2.js

@@ -383,5 +383,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { PdfDownload as P, defineCustomElement as d };

package/dist/components/pick-list-item.js

@@ -263,5 +263,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { CSS as C, PickListItem as P, SLOTS as S, defineCustomElement as d };

package/dist/components/popover.js

@@ -473,5 +473,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { Popover as P, defineCustomElement as d };

package/dist/components/progress.js

@@ -53,5 +53,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { Progress as P, defineCustomElement as d };

package/dist/components/public-notification.js

@@ -1153,6 +1153,7 @@ function defineCustomElement$1() {
       break;
   } });
 }
+defineCustomElement$1();
 
 const PublicNotification = PublicNotification$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/refine-selection2.js

@@ -580,5 +580,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { RefineSelection as R, defineCustomElement as d };

package/dist/components/scrim.js

@@ -141,5 +141,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { Scrim as S, defineCustomElement as d };

package/dist/components/segmented-control-item.js

@@ -82,5 +82,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { SegmentedControlItem as S, defineCustomElement as d };

package/dist/components/segmented-control.js

@@ -223,5 +223,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { SegmentedControl as S, defineCustomElement as d };

package/dist/components/select.js

@@ -249,5 +249,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { Select as S, defineCustomElement as d };

package/dist/components/shell-panel.js

@@ -428,5 +428,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { ShellPanel as S, defineCustomElement as d };

package/dist/components/shell.js

@@ -153,5 +153,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { Shell as S, defineCustomElement as d };

package/dist/components/slider.js

@@ -927,5 +927,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { Slider as S, defineCustomElement as d };

package/dist/components/solution-configuration.js

@@ -2225,6 +2225,7 @@ function defineCustomElement$1() {
       break;
   } });
 }
+defineCustomElement$1();
 
 const SolutionConfiguration = SolutionConfiguration$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/solution-contents2.js

@@ -123,5 +123,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { SolutionContents as S, defineCustomElement as d };

package/dist/components/solution-item-details2.js

@@ -229,5 +229,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { SolutionItemDetails as S, defineCustomElement as d };

package/dist/components/solution-item-icon2.js

@@ -337,5 +337,6 @@ function defineCustomElement() {
       break;
   } });
 }
+defineCustomElement();
 
 export { SolutionItemIcon as S, defineCustomElement as d };