@esri/solutions-components 0.6.6 → 0.6.8

package/dist/esm/basemap-gallery_4.entry.js

@@ -0,0 +1,615 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-b5d9d795.js';
+import { l as loadModules } from './loadModules-2ecd1e44.js';
+import { g as getLocaleComponentStrings } from './locale-aa3de591.js';
+import { g as EExpandType } from './interfaces-5a2fe8b4.js';
+import './_commonjsHelpers-d5f9d613.js';
+
+const basemapGalleryCss = ":host{display:block}";
+
+const BasemapGallery = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.mapView = undefined;
+    this.basemapWidget = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  async mapViewWatchHandler() {
+    await this.mapView.when(() => {
+      this._initBaseMapGallery(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._basemapElement = el; } })));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   *
+   * @protected
+   */
+  async _initModules() {
+    const [BasemapGallery] = await loadModules([
+      "esri/widgets/BasemapGallery"
+    ]);
+    this.BasemapGallery = BasemapGallery;
+  }
+  /**
+   * Initialize the basemap gallery or reset the current view if it already exists
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  _initBaseMapGallery(view) {
+    if (view && this.BasemapGallery) {
+      if (!this.basemapWidget) {
+        this.basemapWidget = new this.BasemapGallery({
+          container: this._basemapElement,
+          view
+        });
+      }
+      else {
+        this.basemapWidget.view = view;
+      }
+    }
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "mapView": ["mapViewWatchHandler"]
+  }; }
+};
+BasemapGallery.style = basemapGalleryCss;
+
+const mapPickerCss = ":host{display:block}.width-full{width:100%}.height-full{height:100%}.display-flex{display:flex}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}.action-bar-size{height:51px;width:100%}.map-list{position:absolute;display:flex;flex-direction:column;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;width:100%;height:-moz-fit-content;height:fit-content}.display-none{display:none}";
+
+const MapPicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.mapInfoChange = createEvent(this, "mapInfoChange", 7);
+    /**
+     * string: the id of map currently displayed
+     */
+    this._loadedId = "";
+    this.mapInfos = [];
+    this._mapListExpanded = false;
+    this._webMapInfo = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Called each time the _webMapInfo prop is changed.
+   */
+  _webMapInfoWatchHandler(v, oldV) {
+    if (v && JSON.stringify(v) !== JSON.stringify(oldV)) {
+      this._loadedId = v === null || v === void 0 ? void 0 : v.id;
+      this.mapInfoChange.emit(v);
+    }
+  }
+  /**
+   * Called each time the mapInfos prop is changed.
+   */
+  mapInfosWatchHandler(v, oldV) {
+    if (v && JSON.stringify(v) !== JSON.stringify(oldV)) {
+      this.mapInfoChange.emit(v[0]);
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Renders the component.
+   */
+  render() {
+    return (h(Host, null, this._getToolbar(), this._getMapNameList(this._mapListExpanded)));
+  }
+  /**
+   * Called after each render
+   */
+  async componentDidRender() {
+    if (this._mapListExpanded) {
+      await this._list.setFocus();
+    }
+  }
+  /**
+   * Called once after the component has loaded
+   */
+  componentDidLoad() {
+    const webMapInfo = this.mapInfos && this.mapInfos.length > 0 ? this.mapInfos[0] : undefined;
+    if (webMapInfo) {
+      this._webMapSelected(webMapInfo);
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Get a calcite action group for the map list
+   * Actions do not support multiple icons so this uses a block
+   *
+   * @returns the dom node for the action group
+   *
+   * @protected
+   */
+  _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));
+  }
+  /**
+   * Create the toolbar (controls used for map and app interactions)
+   *
+   * @returns The dom node with the toolbar
+   *
+   * @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())));
+  }
+  /**
+   * Get a pick list for all maps in mapInfos
+   *
+   * @param show boolean to indicate if the list should be shown or hidden
+   *
+   * @returns the dom node for the list of maps
+   *
+   * @protected
+   */
+  _getMapNameList(show) {
+    const listClass = show ? "map-list" : "display-none";
+    return (h("div", { class: listClass }, h("calcite-list", { id: "mapList", ref: (el) => this._list = el, selectionAppearance: "border" }, this.mapInfos.map(mapInfo => {
+      return (h("calcite-list-item", { label: mapInfo.name, onClick: () => this._webMapSelected(mapInfo), selected: mapInfo.id === this._loadedId, value: mapInfo.id }));
+    }))));
+  }
+  /**
+   * Fired when the user clicks on the map list
+   *
+   * @param webMapInfo the web map id and name selected from the list
+   *
+   * @returns void
+   *
+   * @protected
+   */
+  _webMapSelected(webMapInfo) {
+    this._mapListExpanded = false;
+    this._webMapInfo = webMapInfo;
+  }
+  /**
+   * Toggles the open/close state of the map list
+   *
+   * @returns the dom node for the action group
+   *
+   * @protected
+   */
+  _chooseMap() {
+    this._mapListExpanded = !this._mapListExpanded;
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "_webMapInfo": ["_webMapInfoWatchHandler"],
+    "mapInfos": ["mapInfosWatchHandler"]
+  }; }
+};
+MapPicker.style = mapPickerCss;
+
+const mapSearchCss = ":host{display:block}.search-widget{width:100% !important;border:1px solid var(--calcite-ui-border-input)}";
+
+const MapSearch = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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"]
+  }; }
+};
+MapSearch.style = mapSearchCss;
+
+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}";
+
+const MapTools = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.expandMap = createEvent(this, "expandMap", 7);
+    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];
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "mapView": ["mapViewWatchHandler"],
+    "_showBasemapWidget": ["_showBasemapWidgetWatchHandler"],
+    "_showSearchWidget": ["_showSearchWidgetWatchHandler"]
+  }; }
+};
+MapTools.style = mapToolsCss;
+
+export { BasemapGallery as basemap_gallery, MapPicker as map_picker, MapSearch as map_search, MapTools as map_tools };