@esri/solutions-components 0.6.3 → 0.6.4

package/dist/collection/components/layer-table/layer-table.js

@@ -21,7 +21,7 @@
 import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 import { getLocaleComponentStrings } from "../../utils/locale";
-import { getMapLayerView, getMapLayerIds } from "../../utils/mapViewUtils";
+import { getLayer, getMapLayerIds } from "../../utils/mapViewUtils";
 import { queryFeaturesByID, queryAllIds } from "../../utils/queryUtils";
 import * as downloadUtils from "../../utils/downloadUtils";
 export class LayerTable {
@@ -43,7 +43,7 @@ export class LayerTable {
     this.mapView = undefined;
     this._alertOpen = false;
     this._fetchingData = false;
-    this._layerView = undefined;
+    this._layer = undefined;
     this._selectedIndexes = [];
     this._showOnlySelected = false;
     this._translations = undefined;
@@ -59,7 +59,7 @@ export class LayerTable {
   async mapViewWatchHandler() {
     this._fetchingData = true;
     const mapLayerIds = await getMapLayerIds(this.mapView);
-    this._layerView = await getMapLayerView(this.mapView, mapLayerIds[0]);
+    this._layer = await getLayer(this.mapView, mapLayerIds[0]);
     this._resetTable();
     this.reactiveUtils.on(() => this.mapView, "click", (event) => {
       void this._mapClicked(event);
@@ -69,7 +69,7 @@ export class LayerTable {
   /**
    * watch for changes in layer view and verify if it has editing enabled
    */
-  async _layerViewWatchHandler() {
+  async _layerWatchHandler() {
     this._fetchingData = true;
     this._resetTable();
     this._fetchingData = false;
@@ -106,7 +106,7 @@ export class LayerTable {
    * Renders the component.
    */
   render() {
-    if (!this._layerView) {
+    if (!this._layer) {
       return null;
     }
     const tableNodeClass = this._fetchingData ? "display-none" : "";
@@ -141,8 +141,8 @@ export class LayerTable {
    */
   _getTableControlRow(slot) {
     const featuresSelected = this._selectedIndexes.length > 0;
-    return (h("div", { class: "display-flex table-border height-51", slot: slot }, h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, h("div", { class: "border-end" }, h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), placeholderIcon: "layers", scale: "l", type: "dropdown" })), h("calcite-action", { appearance: "solid", disabled: !featuresSelected, icon: "magnifying-glass", id: "magnifying-glass", label: this._translations.zoom, onClick: () => this._zoom(), text: this._translations.zoom, textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "magnifying-glass" }, h("span", null, this._translations.zoom)), h("calcite-action", { appearance: "solid", icon: "filter", id: "filter", onClick: () => this._filter(), text: this._translations.filters, "text-enabled": "true", textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "filter" }, h("span", null, this._translations.filters)), h("calcite-action", { appearance: "solid", disabled: !featuresSelected, id: "trash", onClick: () => this._delete(), text: "" }, h("calcite-button", { appearance: "transparent", iconStart: "trash", kind: "danger" }, this._translations.delete)), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "trash" }, h("span", null, this._translations.delete))), h("calcite-dropdown", null, h("calcite-action", { appearance: "solid", label: "", slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), h("calcite-dropdown-item", { iconStart: "selected-items-filter", onClick: () => this._showSelected() }, this._showOnlySelected ? this._translations.showAll :
-      this._translations.showSelected), h("calcite-dropdown-item", { iconStart: "erase", onClick: () => this._clearSelection() }, this._translations.clearSelection), h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._switchSelected() }, this._translations.switchSelected), h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._refresh() }, this._translations.refresh), h("calcite-dropdown-item", { iconStart: "export", onClick: () => void this._exportToCSV() }, this._translations.exportCSV)))));
+    return (h("div", { class: "display-flex table-border height-51", slot: slot }, h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, h("div", { class: "border-end" }, h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), placeholderIcon: "layers", scale: "l", type: "dropdown" })), h("calcite-action", { appearance: "solid", disabled: !featuresSelected, icon: "magnifying-glass", id: "magnifying-glass", label: this._translations.zoom, onClick: () => this._zoom(), text: this._translations.zoom, textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "magnifying-glass" }, h("span", null, this._translations.zoom)), h("calcite-action", { appearance: "solid", icon: "filter", id: "filter", onClick: () => this._filter(), text: this._translations.filters, "text-enabled": "true", textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "filter" }, h("span", null, this._translations.filters)), h("calcite-action", { appearance: "solid", disabled: !featuresSelected, id: "trash", onClick: () => this._delete(), text: "" }, h("calcite-button", { appearance: "transparent", iconStart: "trash", kind: "danger" }, this._translations.delete)), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "trash" }, h("span", null, this._translations.delete)), h("calcite-action", { appearance: "solid", disabled: !featuresSelected, icon: "erase", id: "erase", onClick: () => this._clearSelection(), text: this._translations.clearSelection, "text-enabled": "true", textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "erase" }, h("span", null, this._translations.clearSelection))), h("calcite-dropdown", null, h("calcite-action", { appearance: "solid", label: "", slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), h("calcite-dropdown-item", { iconStart: "selected-items-filter", onClick: () => this._toggleShowSelected() }, this._showOnlySelected ? this._translations.showAll :
+      this._translations.showSelected), h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._switchSelected() }, this._translations.switchSelected), h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._refresh() }, this._translations.refresh), h("calcite-dropdown-item", { iconStart: "export", onClick: () => void this._exportToCSV() }, this._translations.exportCSV)))));
   }
   /**
    * Initialize the FeatureTable
@@ -150,10 +150,9 @@ export class LayerTable {
    * @returns void
    */
   _getTable(node) {
-    var _a;
-    if ((_a = this._layerView) === null || _a === void 0 ? void 0 : _a.layer) {
+    if (this._layer) {
       this._table = new this.FeatureTable({
-        layer: this._layerView.layer,
+        layer: this._layer,
         view: this.mapView,
         //editingEnabled: this._editEnabled,
         highlightOnRowSelectEnabled: true,
@@ -166,6 +165,14 @@ export class LayerTable {
       });
       this._table.highlightIds.on("change", () => {
         this._selectedIndexes = this._table.highlightIds.toArray();
+        if (this._showOnlySelected) {
+          if (this._selectedIndexes.length > 0) {
+            this._table.filterBySelection();
+          }
+          else {
+            this._toggleShowSelected();
+          }
+        }
         this.featureSelectionChange.emit(this._selectedIndexes);
       });
     }
@@ -176,10 +183,11 @@ export class LayerTable {
    * @returns void
    */
   _resetTable() {
-    var _a;
-    if (((_a = this._layerView) === null || _a === void 0 ? void 0 : _a.layer) && this._table) {
-      this._table.layer = this._layerView.layer;
-      this._editEnabled = this._layerView.layer.editingEnabled;
+    if (this._layer && this._table) {
+      this._clearSelection();
+      this.featureSelectionChange.emit(this._selectedIndexes);
+      this._table.layer = this._layer;
+      this._editEnabled = this._layer.editingEnabled;
       this._table.view = this.mapView;
       this._table.editingEnabled = this._editEnabled;
       this._table.clearSelectionFilter();
@@ -193,7 +201,7 @@ export class LayerTable {
    */
   async _mapClicked(evt) {
     const opts = {
-      include: this._layerView.layer
+      include: this._layer
     };
     const hitTestResult = await this.mapView.hitTest(evt.screenPoint, opts);
     if (hitTestResult.results.length > 0) {
@@ -238,7 +246,7 @@ export class LayerTable {
    *
    * @returns void
    */
-  _showSelected() {
+  _toggleShowSelected() {
     this._showOnlySelected = !this._showOnlySelected;
     if (this._showOnlySelected) {
       this._table.filterBySelection();
@@ -283,10 +291,10 @@ export class LayerTable {
   async _exportToCSV() {
     const exportInfos = {};
     const ids = this._table.highlightIds.toArray();
-    exportInfos[this._layerView.layer.id] = {
+    exportInfos[this._layer.id] = {
       selectionSetNames: [],
       ids,
-      layerView: this._layerView
+      layer: this._layer
     };
     void downloadUtils.downloadCSV(exportInfos, false, // formatUsingLayerPopup
     true);
@@ -321,7 +329,7 @@ export class LayerTable {
       this._alertMessage = this._translations.confirm;
       this._alertKind = "danger";
       this._alertActionFunction = () => {
-        void this._layerView.layer.applyEdits({
+        void this._layer.applyEdits({
           deleteFeatures: this._table.highlightIds.toArray()
         });
         this._alertOpen = false;
@@ -352,15 +360,14 @@ export class LayerTable {
    * @returns a promise that will resolve when the operation is complete
    */
   async _layerSelectionChanged(evt) {
-    var _a;
     const id = evt.detail[0];
-    if (id !== ((_a = this._layerView) === null || _a === void 0 ? void 0 : _a.layer.id) || this._allIds.length === 0) {
+    if (id !== this._layer.id || this._allIds.length === 0) {
       this._fetchingData = true;
       this._table.highlightIds.removeAll();
-      this._layerView = await getMapLayerView(this.mapView, id);
-      this._allIds = await queryAllIds(this._layerView.layer);
+      this._layer = await getLayer(this.mapView, id);
+      this._allIds = await queryAllIds(this._layer);
       this._selectedIndexes = [];
-      this._table.layer = this._layerView.layer;
+      this._table.layer = this._layer;
       this._table.render();
       this._fetchingData = false;
     }
@@ -413,7 +420,7 @@ export class LayerTable {
     return {
       "_alertOpen": {},
       "_fetchingData": {},
-      "_layerView": {},
+      "_layer": {},
       "_selectedIndexes": {},
       "_showOnlySelected": {},
       "_translations": {}
@@ -469,8 +476,8 @@ export class LayerTable {
         "propName": "mapView",
         "methodName": "mapViewWatchHandler"
       }, {
-        "propName": "_layerView",
-        "methodName": "_layerViewWatchHandler"
+        "propName": "_layer",
+        "methodName": "_layerWatchHandler"
       }];
   }
 }

package/dist/collection/components/map-layer-picker/map-layer-picker.js

@@ -19,19 +19,21 @@
  * limitations under the License.
  */
 import { Host, h } from "@stencil/core";
-import { getMapLayerHash, getMapLayerIds } from "../../utils/mapViewUtils";
+import { getMapLayerHash, getMapLayerIds, getMapTableHash, getMapTableIds } from "../../utils/mapViewUtils";
 import state from "../../utils/publicNotificationStore";
 export class MapLayerPicker {
   constructor() {
     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 = "";
   }
   //--------------------------------------------------------------------------
   //
@@ -44,7 +46,11 @@ export class MapLayerPicker {
    */
   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");
+    }
   }
   //--------------------------------------------------------------------------
   //
@@ -56,8 +62,8 @@ export class MapLayerPicker {
    */
   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]]);
     }
   }
   /**
@@ -71,13 +77,15 @@ export class MapLayerPicker {
    * 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] : "";
       }
     }
   }
@@ -94,7 +102,7 @@ export class MapLayerPicker {
    * @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
@@ -104,7 +112,7 @@ export class MapLayerPicker {
    * @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
@@ -112,54 +120,42 @@ export class MapLayerPicker {
    * @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
@@ -169,8 +165,12 @@ export class MapLayerPicker {
   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();
     }
   }
   /**
@@ -178,11 +178,33 @@ export class MapLayerPicker {
    *
    * @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
    *
@@ -191,8 +213,8 @@ export class MapLayerPicker {
   _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);
     }
   }
   static get is() { return "map-layer-picker"; }
@@ -242,6 +264,22 @@ export class MapLayerPicker {
         },
         "defaultValue": "[]"
       },
+      "enabledTableIds": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "string[]: Optional list of enabled table ids\r\n If empty all tables will be available"
+        },
+        "defaultValue": "[]"
+      },
       "mapView": {
         "type": "unknown",
         "mutable": false,
@@ -279,7 +317,7 @@ export class MapLayerPicker {
         "reflect": false,
         "defaultValue": "\"\""
       },
-      "selectedLayerIds": {
+      "selectedIds": {
         "type": "unknown",
         "mutable": true,
         "complexType": {
@@ -313,6 +351,24 @@ export class MapLayerPicker {
         "reflect": false,
         "defaultValue": "\"m\""
       },
+      "showTables": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true standalone tables will also be available"
+        },
+        "attribute": "show-tables",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "type": {
         "type": "string",
         "mutable": false,
@@ -335,8 +391,8 @@ export class MapLayerPicker {
   }
   static get states() {
     return {
-      "layerIds": {},
-      "selectedLayerName": {}
+      "ids": {},
+      "selectedName": {}
     };
   }
   static get events() {

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

@@ -20,7 +20,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
-import { highlightFeatures, getMapLayerView, goToSelection } from "../../utils/mapViewUtils";
+import { highlightFeatures, getFeatureLayerView, goToSelection } from "../../utils/mapViewUtils";
 import { getQueryGeoms, queryFeaturesByGeometry, queryObjectIds } from "../../utils/queryUtils";
 import { EWorkflowType } from "../../utils/interfaces";
 import state from "../../utils/publicNotificationStore";
@@ -199,7 +199,7 @@ export class MapSelectTools {
    */
   _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
@@ -228,7 +228,7 @@ export class MapSelectTools {
    * @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] : [] }))));
   }
   //--------------------------------------------------------------------------
   //
@@ -661,7 +661,7 @@ export class MapSelectTools {
   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;
@@ -689,7 +689,7 @@ export class MapSelectTools {
     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/collection/components/refine-selection/refine-selection.js

@@ -20,7 +20,7 @@
  */
 import { Host, h } from "@stencil/core";
 import { EDrawMode, ESelectionMode, EWorkflowType } from "../../utils/interfaces";
-import { getIdSets, getMapLayerView, highlightAllFeatures } from "../../utils/mapViewUtils";
+import { getIdSets, getFeatureLayerView, highlightAllFeatures } from "../../utils/mapViewUtils";
 import { queryFeaturesByGeometry } from "../../utils/queryUtils";
 import state from "../../utils/publicNotificationStore";
 import { getLocaleComponentStrings } from "../../utils/locale";
@@ -77,7 +77,7 @@ export class RefineSelection {
   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())))));
   }
   //--------------------------------------------------------------------------
   //
@@ -171,7 +171,7 @@ export class RefineSelection {
     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/collection/demos/crowdsource-manager.html

@@ -41,23 +41,38 @@
     <script>
       function addValues() {
         const demo = document.getElementById("demo");
+
+        let custom = [];
+        var vars = window.location.search.substring(1).split('&');
+        vars.forEach((v) => {
+          let paramName = v.split('=');
+          if (paramName[0] === "id") {
+            custom = [{
+              id:paramName[1],
+              name: "Map from URL"
+            }];
+          }
+        });
+
         demo.mapInfos = [
-        {
-          id: "863e4f6f2a7840db896cc1b1606d552d",
-          name: "IA map"
-        }, {
-          id: "3715f4899bea4b2a948347c5c2357e58",
-          name: "PN Map"
-        }, {
-          id: "4fa949c89bb04ecb8a9f5ad119448333",
-          name: "CS TIL DATA"
-        }, {
-          id: "f5b01c17a09941eaad63e7b4e6c7d880",
-          name: "Attachments Map"
-        }, {
-          id: "ce3dec81bf714d3bb71da9691ab686d1",
-          name: "Popup Configured Map"
-        }];
+          ...custom,
+          ...[{
+            id: "863e4f6f2a7840db896cc1b1606d552d",
+            name: "IA map"
+          }, {
+            id: "3715f4899bea4b2a948347c5c2357e58",
+            name: "PN Map"
+          }, {
+            id: "4fa949c89bb04ecb8a9f5ad119448333",
+            name: "CS TIL DATA"
+          }, {
+            id: "f5b01c17a09941eaad63e7b4e6c7d880",
+            name: "Attachments Map"
+          }, {
+            id: "ce3dec81bf714d3bb71da9691ab686d1",
+            name: "Popup Configured Map"
+          }]
+        ];
       }
     </script>
   </head>

package/dist/collection/utils/downloadUtils.js

@@ -479,8 +479,9 @@ function _getSelectionSetNames(exportInfos, id = /.+/) {
 export async function consolidateLabels(exportInfos, formatUsingLayerPopup = true, includeHeaderNames = false, isCSVExport = false) {
   const labelRequests = [];
   Object.keys(exportInfos).forEach(k => {
+    var _a;
     const labelInfo = exportInfos[k];
-    labelRequests.push(_prepareLabels(labelInfo.layerView.layer, labelInfo.ids, formatUsingLayerPopup, includeHeaderNames));
+    labelRequests.push(_prepareLabels(((_a = labelInfo.layerView) === null || _a === void 0 ? void 0 : _a.layer) || labelInfo.layer, labelInfo.ids, formatUsingLayerPopup, includeHeaderNames));
     if (isCSVExport) {
       // add the layer id as a temp value separator that we can use to split values for CSV export
       labelRequests.push(Promise.resolve([[k]]));

package/dist/collection/utils/downloadUtils.ts

@@ -669,7 +669,7 @@ export async function consolidateLabels(
 
   Object.keys(exportInfos).forEach(k => {
     const labelInfo: IExportInfo = exportInfos[k];
-    labelRequests.push(_prepareLabels(labelInfo.layerView.layer, labelInfo.ids, formatUsingLayerPopup, includeHeaderNames));
+    labelRequests.push(_prepareLabels(labelInfo.layerView?.layer || labelInfo.layer, labelInfo.ids, formatUsingLayerPopup, includeHeaderNames));
     if (isCSVExport) {
       // add the layer id as a temp value separator that we can use to split values for CSV export
       labelRequests.push(Promise.resolve([[k]]));