@esri/solutions-components 0.6.3 → 0.6.4

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

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { b as getMapLayerIds, c as getMapLayerHash } from './mapViewUtils.js';
+import { b as getMapLayerIds, c as getMapTableIds, d as getMapLayerHash, e as getMapTableHash } from './mapViewUtils.js';
 import { s as state } from './publicNotificationStore.js';
 import { d as defineCustomElement$c } from './action.js';
 import { d as defineCustomElement$b } from './button.js';
@@ -28,13 +28,15 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     this.layerSelectionChange = createEvent(this, "layerSelectionChange", 7);
     this.appearance = "transparent";
     this.enabledLayerIds = [];
+    this.enabledTableIds = [];
     this.mapView = undefined;
     this.placeholderIcon = "";
-    this.selectedLayerIds = [];
+    this.selectedIds = [];
     this.scale = "m";
+    this.showTables = true;
     this.type = "select";
-    this.layerIds = [];
-    this.selectedLayerName = "";
+    this.ids = [];
+    this.selectedName = "";
   }
   //--------------------------------------------------------------------------
   //
@@ -47,7 +49,11 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    */
   async mapViewWatchHandler() {
     await this._setLayers();
-    this._setSelectedLayer(this.layerIds[0]);
+    const hasLayers = Object.keys(state.layerNameHash).length > 0;
+    const hasTables = Object.keys(state.tableNameHash).length > 0 && this.showTables;
+    if (hasLayers || hasTables) {
+      this._setSelectedLayer(this.ids[0], hasLayers ? "layer" : "table");
+    }
   }
   //--------------------------------------------------------------------------
   //
@@ -59,8 +65,8 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    */
   async componentWillLoad() {
     await this._setLayers();
-    if (this.layerIds.length > 0 || this.selectedLayerIds.length === 1) {
-      this.layerSelectionChange.emit(this.selectedLayerIds.length === 1 ? [this.selectedLayerIds[0]] : [this.layerIds[0]]);
+    if (this.ids.length > 0 || this.selectedIds.length === 1) {
+      this.layerSelectionChange.emit(this.selectedIds.length === 1 ? [this.selectedIds[0]] : [this.ids[0]]);
     }
   }
   /**
@@ -74,13 +80,15 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
    */
   async componentDidLoad() {
-    if (this.layerIds.length > 0 || this.selectedLayerIds.length === 1) {
-      const id = this.selectedLayerIds.length === 1 ? this.selectedLayerIds[0] : this.layerIds[0];
+    if (this.ids.length > 0 || this.selectedIds.length === 1) {
+      const id = this.selectedIds.length === 1 ? this.selectedIds[0] : this.ids[0];
       if (this.type === "select") {
         this._layerElement.value = id;
       }
       else if (this.type === "dropdown") {
-        this.selectedLayerName = state.layerNameHash[id];
+        this.selectedName = Object.keys(state.layerNameHash).indexOf(id) > -1 ?
+          state.layerNameHash[id] : Object.keys(state.tableNameHash).indexOf(id) > -1 ?
+          state.tableNameHash[id] : "";
       }
     }
   }
@@ -97,7 +105,7 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * @returns Calcite Select component with the ids of the layers from the map
    */
   _getSelect() {
-    return (h("calcite-select", { label: "", onCalciteSelectChange: () => this._layerSelectionChange(), ref: (el) => { this._layerElement = el; }, scale: this.scale }, this._addSelectMapLayersOptions()));
+    return (h("calcite-select", { label: "", onCalciteSelectChange: () => this._layerSelectionChange(), ref: (el) => { this._layerElement = el; }, scale: this.scale }, this._getMapLayerOptions()));
   }
   /**
    * Create a list of layer ids from the map
@@ -107,7 +115,7 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * @returns Calcite ComboBox component with the ids of the layers from the map
    */
   _getCombobox() {
-    return (h("calcite-combobox", { clearDisabled: true, label: "", onCalciteComboboxChange: () => this._layerSelectionChange(), "placeholder-icon": this.placeholderIcon, ref: (el) => { this._layerElement = el; }, scale: this.scale, "selection-mode": "single" }, this._addComboboxMapLayersOptions()));
+    return (h("calcite-combobox", { clearDisabled: true, label: "", onCalciteComboboxChange: () => this._layerSelectionChange(), "placeholder-icon": this.placeholderIcon, ref: (el) => { this._layerElement = el; }, scale: this.scale, "selection-mode": "single" }, this._getMapLayerOptions()));
   }
   /**
    * Hydrate a dropdown component with items to display the layer names
@@ -115,54 +123,42 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * @returns Array of Dropdown items with layer names
    */
   _getDropdown() {
-    return (h("calcite-dropdown", { class: "layer-picker-dropdown" }, h("calcite-action", { slot: "trigger", text: "" }, h("calcite-button", { alignment: "icon-end-space-between", appearance: this.appearance, class: "max-width-350", iconEnd: "chevron-down", iconStart: "layers", kind: "neutral", width: "full" }, h("div", null, this.selectedLayerName))), h("calcite-dropdown-group", { "selection-mode": "single" }, this._getDropdownItems())));
+    return (h("calcite-dropdown", { class: "layer-picker-dropdown" }, h("calcite-action", { slot: "trigger", text: "" }, h("calcite-button", { alignment: "icon-end-space-between", appearance: this.appearance, class: "max-width-350", iconEnd: "chevron-down", iconStart: "layers", kind: "neutral", width: "full" }, h("div", null, this.selectedName))), h("calcite-dropdown-group", { "selection-mode": "single" }, this._getMapLayerOptions())));
   }
   /**
-   * Hydrate a dropdown component with items to display the layer names
+   * Get the appropriate type of dom nodes for each valid layer or table
    *
-   * @returns Array of Dropdown items with layer names
+   * @returns Array of dom nodes with the names of the layers and optionally of the tables
    */
-  _getDropdownItems() {
-    return this.layerIds.reduce((prev, cur) => {
-      if (state.managedLayers.indexOf(state.layerNameHash[cur]) < 0 && (this.enabledLayerIds.length > 0 ? this.enabledLayerIds.indexOf(cur) > -1 : true)) {
-        prev.push((h("calcite-dropdown-item", { onClick: () => void this._setSelectedLayer(cur) }, state.layerNameHash[cur])));
+  _getMapLayerOptions() {
+    return this.ids.reduce((prev, cur) => {
+      if (this._validLayer(cur)) {
+        prev.push(this._getItem(cur, "layer"));
+      }
+      else if (this._validTable(cur)) {
+        prev.push(this._getItem(cur, "table"));
       }
       return prev;
     }, []);
   }
   /**
-   * Store the layer name based on the user selection
-   */
-  _setSelectedLayer(id) {
-    this.selectedLayerName = state.layerNameHash[id];
-    this.selectedLayerIds = [id];
-    this.layerSelectionChange.emit(this.selectedLayerIds);
-  }
-  /**
-   * Hydrate a select component with the ids of the layers in the map
+   * Get the appropriate type of dom node for the current layer or table id
    *
-   * @returns Array of select options for the ids of the layers
+   * @returns A dom node with the name of the layer or table
    */
-  _addSelectMapLayersOptions() {
-    return this.layerIds.reduce((prev, cur) => {
-      if (state.managedLayers.indexOf(state.layerNameHash[cur]) < 0 && (this.enabledLayerIds.length > 0 ? this.enabledLayerIds.indexOf(cur) > -1 : true)) {
-        prev.push((h("calcite-option", { label: state.layerNameHash[cur], value: cur })));
-      }
-      return prev;
-    }, []);
+  _getItem(id, itemType) {
+    const name = itemType === "layer" ? state.layerNameHash[id] : state.tableNameHash[id];
+    return this.type === "combobox" ? (h("calcite-combobox-item", { textLabel: name, value: id })) :
+      this.type === "select" ? (h("calcite-option", { label: name, value: id })) :
+        (h("calcite-dropdown-item", { onClick: () => void this._setSelectedLayer(id, itemType) }, name));
   }
   /**
-   * Hydrate a combobox component with the ids of the layers in the map
-   *
-   * @returns Array of ComboBox items for the ids of the layers
+   * Store the layer name based on the user selection
    */
-  _addComboboxMapLayersOptions() {
-    return this.layerIds.reduce((prev, cur) => {
-      if (state.managedLayers.indexOf(state.layerNameHash[cur]) < 0 && (this.enabledLayerIds.length > 0 ? this.enabledLayerIds.indexOf(cur) > -1 : true)) {
-        prev.push((h("calcite-combobox-item", { textLabel: state.layerNameHash[cur], value: cur })));
-      }
-      return prev;
-    }, []);
+  _setSelectedLayer(id, type) {
+    this.selectedName = type === "layer" ? state.layerNameHash[id] : state.tableNameHash[id];
+    this.selectedIds = [id];
+    this.layerSelectionChange.emit(this.selectedIds);
   }
   /**
    * Fetch the ids of the layers from the map
@@ -172,8 +168,12 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   async _setLayers() {
     if (this.mapView) {
       const mapLayerIds = await getMapLayerIds(this.mapView);
-      this.layerIds = mapLayerIds.filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.indexOf(n) > -1 : true; });
-      await this._initLayerHashState();
+      const mapTableIds = this.showTables ? await getMapTableIds(this.mapView) : [];
+      this.ids = [
+        ...mapLayerIds.filter(n => { var _a; return ((_a = this.enabledLayerIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledLayerIds.indexOf(n) > -1 : true; }),
+        ...mapTableIds.filter(n => { var _a; return ((_a = this.enabledTableIds) === null || _a === void 0 ? void 0 : _a.length) > 0 ? this.enabledTableIds.indexOf(n) > -1 : true; }),
+      ];
+      await this._initStateHash();
     }
   }
   /**
@@ -181,11 +181,33 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    *
    * @returns Promise when the operation has completed
    */
-  async _initLayerHashState() {
+  async _initStateHash() {
     if (this.mapView) {
       state.layerNameHash = await getMapLayerHash(this.mapView);
+      state.tableNameHash = this.showTables ? await getMapTableHash(this.mapView) : {};
     }
   }
+  /**
+   * Evaluate if the id exists in the current hash and verify if it should be excluded
+   *
+   * @returns boolean when true the layer will be used in the current layer picker type
+   */
+  _validLayer(id) {
+    const name = state.layerNameHash[id];
+    return name && state.managedLayers.indexOf(name) < 0 && (this.enabledLayerIds.length > 0 ?
+      this.enabledLayerIds.indexOf(id) > -1 : name);
+  }
+  /**
+   * Evaluate if the id exists in the current hash and verify if it should be excluded
+   *
+   * @returns boolean when true the table will be used in the current layer picker type
+   */
+  _validTable(id) {
+    const name = state.tableNameHash[id];
+    const validName = name && this.showTables;
+    return validName ? state.managedTables.indexOf(name) < 0 &&
+      (this.enabledTableIds.length > 0 ? this.enabledTableIds.indexOf(id) > -1 : true) : validName;
+  }
   /**
    * Fetch the ids of the layers from the map
    *
@@ -194,8 +216,8 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   _layerSelectionChange() {
     const ids = Array.isArray(this._layerElement.value) ? this._layerElement.value : [this._layerElement.value];
     if (JSON.stringify(ids) !== JSON.stringify([""])) {
-      this.selectedLayerIds = ids;
-      this.layerSelectionChange.emit(this.selectedLayerIds);
+      this.selectedIds = ids;
+      this.layerSelectionChange.emit(this.selectedIds);
     }
   }
   get el() { return this; }
@@ -206,13 +228,15 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
 }, [0, "map-layer-picker", {
     "appearance": [1],
     "enabledLayerIds": [16],
+    "enabledTableIds": [16],
     "mapView": [16],
     "placeholderIcon": [1, "placeholder-icon"],
-    "selectedLayerIds": [1040],
+    "selectedIds": [1040],
     "scale": [1],
+    "showTables": [4, "show-tables"],
     "type": [1],
-    "layerIds": [32],
-    "selectedLayerName": [32]
+    "ids": [32],
+    "selectedName": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

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

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
-import { g as goToSelection, h as highlightFeatures, a as getMapLayerView } from './mapViewUtils.js';
+import { g as goToSelection, h as highlightFeatures, f as getFeatureLayerView } from './mapViewUtils.js';
 import { b as queryObjectIds, g as getQueryGeoms, c as queryFeaturesByGeometry } from './queryUtils.js';
 import { c as EWorkflowType } from './interfaces.js';
 import { s as state } from './publicNotificationStore.js';
@@ -213,7 +213,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    */
   _getUseLayerFeaturesOptions() {
     const useLayerFeaturesClass = this._useLayerFeaturesEnabled ? "div-visible" : "div-not-visible";
-    return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.useLayerFeatures, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "use-layer-features-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "use-layer-features-icon" }, h("span", { class: "tooltip-message" }, this._translations.useLayerFeaturesTooltip)), h("calcite-switch", { checked: this._useLayerFeaturesEnabled, onCalciteSwitchChange: () => { this._useLayerFeaturesEnabledChanged(); } })), h("div", { class: useLayerFeaturesClass + " padding-top-1" }, h("map-layer-picker", { enabledLayerIds: this.selectionLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedLayerIds: this.layerViews.map(l => l.layer.id) }))));
+    return (h("div", null, h("div", { class: "padding-top-1 display-flex" }, h("calcite-label", { class: "label-margin-0 w-100", layout: "inline-space-between" }, h("div", { class: "tooltip-container" }, this._translations.useLayerFeatures, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "use-layer-features-icon", scale: "s" }))), h("calcite-popover", { closable: true, label: "", referenceElement: "use-layer-features-icon" }, h("span", { class: "tooltip-message" }, this._translations.useLayerFeaturesTooltip)), h("calcite-switch", { checked: this._useLayerFeaturesEnabled, onCalciteSwitchChange: () => { this._useLayerFeaturesEnabledChanged(); } })), h("div", { class: useLayerFeaturesClass + " padding-top-1" }, h("map-layer-picker", { enabledLayerIds: this.selectionLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, selectedIds: this.layerViews.map(l => l.layer.id) }))));
   }
   /**
    * Renders the number of selected features
@@ -242,7 +242,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
    * @protected
    */
   _getMapLayerPicker() {
-    return (h("div", { class: "display-flex padding-sides-1 padding-bottom-1" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, this._translations.inputLayer, h("map-layer-picker", { enabledLayerIds: this.enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => this._inputLayerSelectionChange(evt), selectedLayerIds: this.selectLayerView ? [this.selectLayerView.layer.id] : this.selectionSet ? [this.selectionSet.layerView.layer.id] : [] }))));
+    return (h("div", { class: "display-flex padding-sides-1 padding-bottom-1" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, this._translations.inputLayer, h("map-layer-picker", { enabledLayerIds: this.enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => this._inputLayerSelectionChange(evt), selectedIds: this.selectLayerView ? [this.selectLayerView.layer.id] : this.selectionSet ? [this.selectionSet.layerView.layer.id] : [] }))));
   }
   //--------------------------------------------------------------------------
   //
@@ -675,7 +675,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
   async _layerSelectionChange(evt) {
     if (Array.isArray(evt.detail) && evt.detail.length > 0) {
       const layerPromises = evt.detail.map(id => {
-        return getMapLayerView(this.mapView, id);
+        return getFeatureLayerView(this.mapView, id);
       });
       return Promise.all(layerPromises).then((layerViews) => {
         this.layerViews = layerViews;
@@ -703,7 +703,7 @@ const MapSelectTools = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     var _a;
     const id = ((_a = evt === null || evt === void 0 ? void 0 : evt.detail) === null || _a === void 0 ? void 0 : _a.length) > 0 ? evt.detail[0] : "";
     if (!this.selectLayerView || id !== this.selectLayerView.layer.id) {
-      this.selectLayerView = await getMapLayerView(this.mapView, id);
+      this.selectLayerView = await getFeatureLayerView(this.mapView, id);
       this._updateLabel();
       this._bufferGeometry ? await this._selectFeatures([this._bufferGeometry]) :
         await this._highlightWithOIDsOrGeoms();

package/dist/components/mapViewUtils.js

@@ -41,6 +41,24 @@ async function getMapLayerHash(mapView) {
   });
   return layerHash;
 }
+/**
+ * Gets the table names from the current map
+ *
+ * @param mapView the map view to fetch the table names from
+ *
+ * @returns Promise resolving with an array of table names
+ *
+ */
+async function getMapTableHash(mapView) {
+  let tableHash = {};
+  await mapView.when(() => {
+    tableHash = mapView.map.allTables.toArray().reduce((prev, cur) => {
+      prev[cur.id] = cur.title;
+      return prev;
+    }, {});
+  });
+  return tableHash;
+}
 /**
  * Gets the layer names from the current map
  *
@@ -61,6 +79,25 @@ async function getMapLayerIds(mapView) {
   });
   return layerIds;
 }
+/**
+ * Gets the table names from the current map
+ *
+ * @param mapView the map view to fetch the table names from
+ *
+ * @returns Promise resolving with an array of table names
+ *
+ */
+async function getMapTableIds(mapView) {
+  // TODO...seems like its the same as the hash...see if I can remove this
+  let tableIds = [];
+  await mapView.when(() => {
+    tableIds = mapView.map.allTables.toArray().reduce((prev, cur) => {
+      prev.push(cur.id);
+      return prev;
+    }, []);
+  });
+  return tableIds;
+}
 /**
  * Get a layer view by id
  *
@@ -70,8 +107,8 @@ async function getMapLayerIds(mapView) {
  * @returns Promise resolving with the fetched layer view
  *
  */
-async function getMapLayerView(mapView, id) {
-  const layer = await getMapLayer(mapView, id);
+async function getFeatureLayerView(mapView, id) {
+  const layer = await getLayer(mapView, id);
   return layer ? await mapView.whenLayerView(layer) : undefined;
 }
 /**
@@ -83,10 +120,13 @@ async function getMapLayerView(mapView, id) {
  * @returns Promise resolving with the fetched layer
  *
  */
-async function getMapLayer(mapView, id) {
+async function getLayer(mapView, id) {
   let layers = [];
   await mapView.when(() => {
-    layers = mapView.map.allLayers.toArray().filter((l) => {
+    layers = [
+      ...mapView.map.allLayers.toArray(),
+      ...mapView.map.allTables.toArray()
+    ].filter((l) => {
       return l.id === id;
     });
   });
@@ -101,7 +141,6 @@ async function getMapLayer(mapView, id) {
  * @param updateExtent optional (default false) boolean to indicate if we should zoom to the extent
  *
  * @returns Promise resolving with the highlight handle
- *
  */
 async function highlightFeatures(ids, layerView, mapView, updateExtent = false) {
   if (updateExtent) {
@@ -201,4 +240,4 @@ async function goToSelection(ids, layerView, mapView, flashFeatures = true, feat
   }
 }
 
-export { getMapLayerView as a, getMapLayerIds as b, getMapLayerHash as c, getIdSets as d, highlightAllFeatures as e, goToSelection as g, highlightFeatures as h };
+export { getLayer as a, getMapLayerIds as b, getMapTableIds as c, getMapLayerHash as d, getMapTableHash as e, getFeatureLayerView as f, goToSelection as g, highlightFeatures as h, getIdSets as i, highlightAllFeatures as j };

package/dist/components/publicNotificationStore.js

@@ -23,10 +23,14 @@ import { c as createStore } from './index3.js';
 const { state, onChange } = createStore({
   // List of layers added and managed by the component
   managedLayers: [],
+  // List of tables added and managed by the component
+  managedTables: [],
   // Handle[]: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-Handles.html#Handle
   highlightHandles: [],
-  // ILayerHash title: id lookup to be used across components
+  // IMapItemHash title: id lookup to be used across components
   layerNameHash: {},
+  // IMapItemHash title: id lookup to be used across components
+  tableNameHash: {},
   // remove all handles
   removeHandles: () => {
     state.highlightHandles.forEach(h => h === null || h === void 0 ? void 0 : h.remove());

package/dist/components/refine-selection2.js

@@ -5,7 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { f as ESelectionMode, d as EDrawMode, c as EWorkflowType } from './interfaces.js';
-import { a as getMapLayerView, d as getIdSets, e as highlightAllFeatures } from './mapViewUtils.js';
+import { f as getFeatureLayerView, i as getIdSets, j as highlightAllFeatures } from './mapViewUtils.js';
 import { c as queryFeaturesByGeometry } from './queryUtils.js';
 import { s as state } from './publicNotificationStore.js';
 import { g as getLocaleComponentStrings } from './locale.js';
@@ -93,7 +93,7 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   render() {
     var _a, _b;
     const layerPickerClass = this._enabledLayerIds.length > 1 ? "display-block" : "display-none";
-    return (h(Host, null, h("div", { class: layerPickerClass + " padding-top-sides-1" }, h("div", { class: "display-flex" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, h("div", { class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedLayerIds: [this._refineLayer.layer.id] })), h("calcite-popover", { closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { class: "padding-1" }, h("div", { class: "padding-bottom-1" }, h("calcite-segmented-control", { class: "w-100" }, h("calcite-segmented-control-item", { checked: this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { checked: !this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { class: "font-weight-500" }, this._translations.remove)))), h("div", null, h("map-draw-tools", { active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), h("br", null), (h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
+    return (h(Host, null, h("div", { class: layerPickerClass + " padding-top-sides-1" }, h("div", { class: "display-flex" }, h("calcite-label", { class: "font-bold width-full label-margin-0" }, h("div", { class: "display-flex" }, this._translations.inputLayer, h("calcite-icon", { class: "padding-start-1-2 icon", icon: "question", id: "refine-input-layer", scale: "s" })), h("map-layer-picker", { enabledLayerIds: this._enabledLayerIds, mapView: this.mapView, onLayerSelectionChange: (evt) => { void this._layerSelectionChange(evt); }, ref: (el) => { this._layerPicker = el; }, selectedIds: [this._refineLayer.layer.id] })), h("calcite-popover", { closable: true, label: "", referenceElement: "refine-input-layer" }, h("span", { class: "tooltip-message" }, this._translations.inputLayerTip)))), h("div", { class: "padding-1" }, h("div", { class: "padding-bottom-1" }, h("calcite-segmented-control", { class: "w-100" }, h("calcite-segmented-control-item", { checked: this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.ADD), value: ESelectionMode.ADD }, h("span", { class: "font-weight-500" }, this._translations.add)), h("calcite-segmented-control-item", { checked: !this._addEnabled, class: "w-50 word-wrap-anywhere", onClick: () => this._setSelectionMode(ESelectionMode.REMOVE), value: ESelectionMode.REMOVE }, h("span", { class: "font-weight-500" }, this._translations.remove)))), h("div", null, h("map-draw-tools", { active: true, drawMode: EDrawMode.REFINE, mapView: this.mapView, onDrawRedo: () => this._redo(), onDrawUndo: () => this._undo(), onSketchGraphicsChange: (evt) => this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, redoEnabled: ((_a = this._refineSelectionSet) === null || _a === void 0 ? void 0 : _a.redoStack.length) > 0, ref: (el) => { this._drawTools = el; }, undoEnabled: ((_b = this._refineSelectionSet) === null || _b === void 0 ? void 0 : _b.undoStack.length) > 0 })), h("br", null), (h("calcite-list", { class: "list-border" }, this._getRefineSelectionSetList())))));
   }
   //--------------------------------------------------------------------------
   //
@@ -187,7 +187,7 @@ const RefineSelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     refineInfo[id] = {
       addIds: [],
       removeIds: [],
-      layerView: await getMapLayerView(this.mapView, id)
+      layerView: await getFeatureLayerView(this.mapView, id)
     };
     if (selectionSet) {
       selectionSet.refineInfos = Object.assign(Object.assign({}, selectionSet.refineInfos), refineInfo);

package/dist/esm/buffer-tools_4.entry.js

@@ -16,7 +16,7 @@ import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoa
 import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale-ead7fa24.js';
 import { d as decimalPlaces, c as clamp } from './math-5e1080da.js';
 import { f as EDrawMode } from './interfaces-bf20e69c.js';
-import { s as state } from './publicNotificationStore-c36d95bf.js';
+import { s as state } from './publicNotificationStore-6ef555f3.js';
 import './_commonjsHelpers-d5f9d613.js';
 import './resources-ee3b03a3.js';
 import './browser-f8ca09b7.js';