@esri/solutions-components 0.2.6 → 0.2.7

package/dist/components/map-layer-picker2.js

@@ -0,0 +1,188 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { g as getMapLayerNames } from './mapViewUtils.js';
+import { s as state } from './publicNotificationStore.js';
+import { d as defineCustomElement$6 } from './chip.js';
+import { d as defineCustomElement$5 } from './combobox.js';
+import { d as defineCustomElement$4 } from './combobox-item.js';
+import { d as defineCustomElement$3 } from './icon.js';
+import { d as defineCustomElement$2 } from './option.js';
+import { d as defineCustomElement$1 } from './select.js';
+
+const mapLayerPickerCss = ":host{display:block}.map-layer-picker-container{width:100%}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}";
+
+const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.layerSelectionChange = createEvent(this, "layerSelectionChange", 7);
+    this.layerNames = [];
+    this.mapView = undefined;
+    this.selectedLayers = [];
+    this.selectionMode = "single";
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Called each time the mapView prop is changed.
+   *
+   */
+  async watchStateHandler(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      await this._setLayers();
+      if (this.selectionMode === "single") {
+        this.layerSelectionChange.emit([this.layerNames[0]]);
+      }
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   */
+  async componentWillLoad() {
+    await this._setLayers();
+    if (this.selectionMode === "single" && (this.layerNames.length > 0 || this.selectedLayers.length === 1)) {
+      this.layerSelectionChange.emit(this.selectedLayers.length === 1 ? [this.selectedLayers[0]] : [this.layerNames[0]]);
+    }
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, this.selectionMode === "multi" ? this._getCombobox() : this._getSelect()))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Create a list of layers from the map
+   *
+   * Used for selecting a single layer.
+   *
+   * @returns Calcite Select component with the names of the layers from the map
+   */
+  _getSelect() {
+    return (h("calcite-select", { label: "", onCalciteSelectChange: (evt) => this._layerSelectionChange(evt), ref: (el) => { this._layerElement = el; } }, this._addMapLayersOptions()));
+  }
+  /**
+   * Create a list of layers from the map
+   *
+   * Used for selecting multiple layers
+   *
+   * @returns Calcite ComboBox component with the names of the layers from the map
+   */
+  _getCombobox() {
+    return (h("calcite-combobox", { label: "", onCalciteComboboxChange: (evt) => this._layerSelectionChange(evt), "selection-mode": this.selectionMode }, this._addMapLayersOptions()));
+  }
+  /**
+   * Hydrate a select or combobox component with the names of the layers in the map
+   *
+   * @returns Array of ComboBox items or Select options for the names of the layers
+   */
+  _addMapLayersOptions() {
+    return this.layerNames.reduce((prev, cur) => {
+      if (state.managedLayers.indexOf(cur) < 0) {
+        prev.push(this.selectionMode === "multi" && this.selectedLayers.indexOf(cur) > -1 ?
+          (h("calcite-combobox-item", { selected: true, textLabel: cur, value: cur })) :
+          this.selectionMode === "multi" ?
+            (h("calcite-combobox-item", { textLabel: cur, value: cur })) :
+            this.selectedLayers.indexOf(cur) > -1 ?
+              (h("calcite-option", { label: cur, selected: true, value: cur })) :
+              (h("calcite-option", { label: cur, value: cur })));
+      }
+      return prev;
+    }, []);
+  }
+  /**
+   * Fetch the names of the layers from the map
+   *
+   * @returns Promise when the operation has completed
+   */
+  async _setLayers() {
+    if (this.mapView) {
+      this.layerNames = await getMapLayerNames(this.mapView);
+    }
+  }
+  /**
+   * Fetch the names of the layers from the map
+   *
+   * @returns Promise when the operation has completed
+   */
+  _layerSelectionChange(evt) {
+    var _a;
+    this.selectedLayers = this.selectionMode === "single" ?
+      [this._layerElement.value] : ((_a = evt.detail) === null || _a === void 0 ? void 0 : _a.selectedItems.map((item) => {
+      return item.value;
+    })) || [];
+    this.layerSelectionChange.emit(this.selectedLayers);
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "mapView": ["watchStateHandler"]
+  }; }
+  static get style() { return mapLayerPickerCss; }
+}, [0, "map-layer-picker", {
+    "layerNames": [1040],
+    "mapView": [16],
+    "selectedLayers": [1040],
+    "selectionMode": [1537, "selection-mode"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["map-layer-picker", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-icon", "calcite-option", "calcite-select"];
+  components.forEach(tagName => { switch (tagName) {
+    case "map-layer-picker":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, MapLayerPicker);
+      }
+      break;
+    case "calcite-chip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "calcite-combobox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "calcite-combobox-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "calcite-option":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "calcite-select":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { MapLayerPicker as M, defineCustomElement as d };

package/dist/components/map-search.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MapSearch extends Components.MapSearch, HTMLElement {}
+export const MapSearch: {
+  prototype: MapSearch;
+  new (): MapSearch;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/map-search.js

@@ -0,0 +1,155 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { l as loadModules } from './loadModules.js';
+import { g as getLocaleComponentStrings } from './locale.js';
+
+const mapSearchCss = ":host{display:block}.search-widget{width:100% !important;border:1px solid var(--calcite-ui-border-input)}";
+
+const MapSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.searchChange = createEvent(this, "searchChange", 7);
+    this.mapView = undefined;
+    this._searchTerm = undefined;
+    this._translations = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Clears the state of the search widget
+   *
+   * @returns Promise that resolves when the operation is complete
+   */
+  async clear() {
+    this._searchWidget.clear();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   *
+   * @returns Promise when complete
+   */
+  async componentWillLoad() {
+    await this._getTranslations();
+    await this._initModules();
+  }
+  /**
+   * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
+   */
+  componentDidLoad() {
+    this._init();
+  }
+  /**
+   * 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] = await loadModules([
+      "esri/widgets/Search"
+    ]);
+    this.Search = Search;
+  }
+  /**
+   * Initialize the search widget
+   *
+   * @returns Promise resolving when function is done
+   */
+  _init() {
+    this._initSearchWidget();
+  }
+  /**
+   * Initialize the search widget and listen to key events
+   *
+   * @protected
+   */
+  _initSearchWidget() {
+    if (this.mapView && this._searchElement) {
+      const searchOptions = {
+        view: this.mapView,
+        container: this._searchElement,
+        searchTerm: this._searchTerm
+      };
+      this._searchWidget = new this.Search(searchOptions);
+      this._searchWidget.on("search-clear", () => {
+        this._searchResult = undefined;
+        this.searchChange.emit(this._searchResult);
+      });
+      this._searchWidget.on("select-result", (searchResults) => {
+        this._searchResult = undefined;
+        if (searchResults.result) {
+          this._searchResult = searchResults.result;
+          this.searchChange.emit({
+            graphics: [searchResults.result.feature],
+            name: searchResults.result.name || ""
+          });
+        }
+      });
+    }
+  }
+  /**
+   * Fetches the component's translations
+   *
+   * @protected
+   */
+  async _getTranslations() {
+    const translations = await getLocaleComponentStrings(this.el);
+    this._translations = translations[0];
+  }
+  get el() { return this; }
+  static get style() { return mapSearchCss; }
+}, [0, "map-search", {
+    "mapView": [16],
+    "_searchTerm": [32],
+    "_translations": [32],
+    "clear": [64]
+  }]);
+function defineCustomElement$1() {
+  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$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const MapSearch = MapSearch$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MapSearch, defineCustomElement };

package/dist/components/map-select-tools.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface MapSelectTools extends Components.MapSelectTools, HTMLElement {}
+export const MapSelectTools: {
+  prototype: MapSelectTools;
+  new (): MapSelectTools;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,11 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { M as MapSelectTools$1, d as defineCustomElement$1 } from './map-select-tools2.js';
+
+const MapSelectTools = MapSelectTools$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { MapSelectTools, defineCustomElement };