@esri/solutions-components 0.6.7 → 0.6.8

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

@@ -1,210 +1,337 @@
-/*!
- * 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 { getLocaleComponentStrings } from "../../utils/locale";
-import { EExpandType } from "../../utils/interfaces";
-export class MapTools {
-  constructor() {
-    this.layout = "vertical";
-    this.mapView = undefined;
-    this._translations = undefined;
-    this._showTools = true;
-    this._showBasemapPicker = false;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Functions (lifecycle)
-  //
-  //--------------------------------------------------------------------------
-  /**
-   * StencilJS: Called once just after the component is first connected to the DOM.
-   */
-  async componentWillLoad() {
-    await this._getTranslations();
-  }
-  /**
-   * StencilJS: Renders the component.
-   */
-  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())))));
-  }
-  /**
-   * Get a calcite action group for the current action
-   *
-   * @param icon the icon to display for the current action
-   * @param disabled should the action be disabled
-   * @param tip information tip to display helpful details to end user
-   * @param func the associated onClick function to execute
-   *
-   * @returns the dom node for the action group
-   *
-   * @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))));
-  }
-  // Need to discuss this with the team
-  _goHome() {
-    alert("go home");
-  }
-  // need to discuss this with the team
-  _showList() {
-    alert("show list");
-  }
-  // Need to discuss this with the team
-  _search() {
-    alert("search");
-  }
-  // Need to explore map fixed zoom in considerations
-  _zoomIn() {
-    alert("zoom in");
-  }
-  // Need to explore map fixed zoom out considerations
-  _zoomOut() {
-    alert("zoom out");
-  }
-  /**
-   * Show/Hide the basemap picker
-   *
-   * @returns void
-   *
-   * @protected
-   */
-  _toggleBasemapPicker() {
-    this._showBasemapPicker = !this._showBasemapPicker;
-  }
-  /**
-   * Emit the expand map event
-   *
-   * @returns void
-   *
-   * @protected
-   */
-  _expand() {
-    this.expandMap.emit(EExpandType.EXPAND);
-  }
-  /**
-   * Show/Hide the map tools
-   *
-   * @returns void
-   *
-   * @protected
-   */
-  _toggleTools() {
-    this._showTools = !this._showTools;
-  }
-  /**
-   * 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-tools"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["map-tools.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["map-tools.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "layout": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"horizontal\" | \"vertical\"",
-          "resolved": "\"horizontal\" | \"vertical\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "\"horizontal\" | \"vertical\": used to control the orientation of the tools"
-        },
-        "attribute": "layout",
-        "reflect": false,
-        "defaultValue": "\"vertical\""
-      },
-      "mapView": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "__esri.MapView",
-          "resolved": "MapView",
-          "references": {
-            "___esri": {
-              "location": "global"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
-        }
-      }
-    };
-  }
-  static get states() {
-    return {
-      "_translations": {},
-      "_showTools": {},
-      "_showBasemapPicker": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "expandMap",
-        "name": "expandMap",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the expand button is clicked"
-        },
-        "complexType": {
-          "original": "EExpandType",
-          "resolved": "EExpandType.COLLAPSE | EExpandType.EXPAND",
-          "references": {
-            "EExpandType": {
-              "location": "import",
-              "path": "../../utils/interfaces"
-            }
-          }
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-}
+/*!
+ * 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 { getLocaleComponentStrings } from "../../utils/locale";
+import { EExpandType } from "../../utils/interfaces";
+export class MapTools {
+  constructor() {
+    this.layout = "vertical";
+    this.mapView = undefined;
+    this.searchConfiguration = undefined;
+    this._translations = undefined;
+    this._showTools = true;
+    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);
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   */
+  async componentWillLoad() {
+    await this._getTranslations();
+  }
+  /**
+   * StencilJS: Renders the component.
+   */
+  render() {
+    const toggleIcon = this._showTools ? "chevrons-up" : "chevrons-down";
+    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 })));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Get a calcite action group for the current action
+   *
+   * @param icon the icon to display for the current action
+   * @param disabled should the action be disabled
+   * @param tip information tip to display helpful details to end user
+   * @param func the associated onClick function to execute
+   *
+   * @returns the dom node for the action group
+   *
+   * @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);
+  }
+  // need to discuss this with the team
+  _showList() {
+    alert("show list");
+  }
+  // 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
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  _toggleBasemapPicker() {
+    this._showBasemapWidget = !this._showBasemapWidget;
+    this._showTools = false;
+  }
+  /**
+   * Emit the expand map event
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  _expand() {
+    this.expandMap.emit(EExpandType.EXPAND);
+  }
+  /**
+   * Show/Hide the map tools
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  _toggleTools() {
+    if (!this._showTools) {
+      this._showBasemapWidget = false;
+      this._showSearchWidget = false;
+    }
+    this._showTools = !this._showTools;
+  }
+  /**
+   * 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-tools"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["map-tools.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["map-tools.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "layout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"horizontal\" | \"vertical\"",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "\"horizontal\" | \"vertical\": used to control the orientation of the tools"
+        },
+        "attribute": "layout",
+        "reflect": false,
+        "defaultValue": "\"vertical\""
+      },
+      "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"
+        }
+      },
+      "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"
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_translations": {},
+      "_showTools": {},
+      "_showBasemapWidget": {},
+      "_showSearchWidget": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "expandMap",
+        "name": "expandMap",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the expand button is clicked"
+        },
+        "complexType": {
+          "original": "EExpandType",
+          "resolved": "EExpandType.COLLAPSE | EExpandType.EXPAND",
+          "references": {
+            "EExpandType": {
+              "location": "import",
+              "path": "../../utils/interfaces",
+              "id": "src/utils/interfaces.ts::EExpandType"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "mapView",
+        "methodName": "mapViewWatchHandler"
+      }, {
+        "propName": "_showBasemapWidget",
+        "methodName": "_showBasemapWidgetWatchHandler"
+      }, {
+        "propName": "_showSearchWidget",
+        "methodName": "_showSearchWidgetWatchHandler"
+      }];
+  }
+}

package/dist/collection/components/map-tools/test/map-tools.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-tools', () => {
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<map-tools></map-tools>');
+    const element = await page.find('map-tools');
+    expect(element).toHaveClass('hydrated');
+  });
+});

package/dist/collection/components/map-tools/test/map-tools.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 { MapTools } from "../map-tools";
+xdescribe('map-tools', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [MapTools],
+      html: `<map-tools></map-tools>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <map-tools>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </map-tools>
+    `);
+  });
+});