@esri/solutions-components 0.6.13 → 0.6.15

package/dist/cjs/calcite-combobox_6.cjs.entry.js

@@ -24,9 +24,11 @@ const utils = require('./utils-852fe124.js');
 const debounce = require('./debounce-30afab47.js');
 const conditionalSlot = require('./conditionalSlot-f10611d3.js');
 const key = require('./key-8de93212.js');
-const mapViewUtils = require('./mapViewUtils-a4dd36ec.js');
-const publicNotificationStore = require('./publicNotificationStore-b69862af.js');
+const locale$1 = require('./locale-67f5f6b6.js');
+const mapViewUtils = require('./mapViewUtils-a2884698.js');
+const publicNotificationStore = require('./publicNotificationStore-610bd880.js');
 require('./resources-993f6faf.js');
+require('./_commonjsHelpers-384729db.js');
 require('./interfaces-000be6de.js');
 require('./index-feeb7b6a.js');
 
@@ -1679,23 +1681,27 @@ const DropdownItem = class {
 };
 DropdownItem.style = dropdownItemCss;
 
-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}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}";
+const mapLayerPickerCss = ":host{display:block}.map-layer-picker-container{width:100%;height:100%}.map-layer-picker{position:relative;width:100%;display:inline-block;height:100%}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}";
 
 const MapLayerPicker = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.noLayersFound = index.createEvent(this, "noLayersFound", 7);
     this.layerSelectionChange = index.createEvent(this, "layerSelectionChange", 7);
     this.appearance = "transparent";
     this.enabledLayerIds = [];
     this.enabledTableIds = [];
     this.mapView = undefined;
+    this.onlyShowUpdatableLayers = undefined;
     this.placeholderIcon = "";
     this.selectedIds = [];
     this.scale = "m";
     this.showTables = true;
     this.type = "select";
+    this._hasValidLayers = true;
     this.ids = [];
     this.selectedName = "";
+    this._translations = undefined;
   }
   //--------------------------------------------------------------------------
   //
@@ -1708,10 +1714,13 @@ const MapLayerPicker = class {
    */
   async mapViewWatchHandler() {
     await this._setLayers();
-    const hasLayers = Object.keys(publicNotificationStore.state.layerNameHash).length > 0;
-    const hasTables = Object.keys(publicNotificationStore.state.tableNameHash).length > 0 && this.showTables;
-    if (hasLayers || hasTables) {
-      this._setSelectedLayer(this.ids[0], hasLayers ? "layer" : "table");
+    if (this.ids.length > 0) {
+      this._hasValidLayers = true;
+      this._setSelectedLayer(this.ids[0]);
+    }
+    else {
+      this._hasValidLayers = false;
+      this.noLayersFound.emit();
     }
   }
   //--------------------------------------------------------------------------
@@ -1723,6 +1732,7 @@ const MapLayerPicker = class {
    * StencilJS: Called once just after the component is first connected to the DOM.
    */
   async componentWillLoad() {
+    await this._getTranslations();
     await this._setLayers();
     if (this.ids.length > 0 || this.selectedIds.length === 1) {
       this.layerSelectionChange.emit(this.selectedIds.length === 1 ? [this.selectedIds[0]] : [this.ids[0]]);
@@ -1732,7 +1742,7 @@ const MapLayerPicker = class {
    * Renders the component.
    */
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "map-layer-picker-container" }, index.h("div", { class: "map-layer-picker" }, this.type === "combobox" ? this._getCombobox() :
+    return (index.h(index.Host, null, index.h("div", { class: "map-layer-picker-container" }, index.h("div", { class: "map-layer-picker" }, !this._hasValidLayers ? this._getInvalidPlaceholder() : this.type === "combobox" ? this._getCombobox() :
       this.type === "select" ? this._getSelect() : this._getDropdown()))));
   }
   /**
@@ -1745,9 +1755,9 @@ const MapLayerPicker = class {
         this._layerElement.value = id;
       }
       else if (this.type === "dropdown") {
-        this.selectedName = Object.keys(publicNotificationStore.state.layerNameHash).indexOf(id) > -1 ?
-          publicNotificationStore.state.layerNameHash[id] : Object.keys(publicNotificationStore.state.tableNameHash).indexOf(id) > -1 ?
-          publicNotificationStore.state.tableNameHash[id] : "";
+        this.selectedName = Object.keys(this._layerNameHash).indexOf(id) > -1 ?
+          this._layerNameHash[id].name : Object.keys(this._tableNameHash).indexOf(id) > -1 ?
+          this._tableNameHash[id].name : "";
       }
     }
   }
@@ -1756,6 +1766,14 @@ const MapLayerPicker = class {
   //  Functions (protected)
   //
   //--------------------------------------------------------------------------
+  /**
+   * Create a notice to inform the user that no layers were found
+   *
+   * @returns Calcite Notice component with the message
+   */
+  _getInvalidPlaceholder() {
+    return (index.h("div", null, index.h("calcite-notice", { class: "height-100", icon: "exclamation-mark-triangle", id: "no-valid-layers", kind: "danger", open: true }, index.h("div", { slot: "message" }, this._translations.noLayersFound)), index.h("calcite-tooltip", { label: this._translations.enableEditUpdate, placement: "bottom", "reference-element": "no-valid-layers" }, index.h("span", null, this._translations.enableEditUpdate))));
+  }
   /**
    * Create a list of layers from the map
    *
@@ -1806,16 +1824,21 @@ const MapLayerPicker = class {
    * @returns A dom node with the name of the layer or table
    */
   _getItem(id, itemType) {
-    const name = itemType === "layer" ? publicNotificationStore.state.layerNameHash[id] : publicNotificationStore.state.tableNameHash[id];
-    return this.type === "combobox" ? (index.h("calcite-combobox-item", { textLabel: name, value: id })) :
-      this.type === "select" ? (index.h("calcite-option", { label: name, value: id })) :
-        (index.h("calcite-dropdown-item", { onClick: () => void this._setSelectedLayer(id, itemType) }, name));
+    const item = itemType === "layer" ? this._layerNameHash[id] : this._tableNameHash[id];
+    const disabled = this.onlyShowUpdatableLayers ? !item.supportsUpdate : false;
+    const name = item.name;
+    return this.type === "combobox" ? (index.h("calcite-combobox-item", { disabled: disabled, textLabel: name, value: id })) :
+      this.type === "select" ? (index.h("calcite-option", { disabled: disabled, label: name, value: id })) :
+        (index.h("calcite-dropdown-item", { disabled: disabled, onClick: disabled ? undefined : () => void this._setSelectedLayer(id) }, name));
   }
   /**
    * Store the layer name based on the user selection
    */
-  _setSelectedLayer(id, type) {
-    this.selectedName = type === "layer" ? publicNotificationStore.state.layerNameHash[id] : publicNotificationStore.state.tableNameHash[id];
+  _setSelectedLayer(id) {
+    const item = Object.keys(this._layerNameHash).indexOf(id) > -1 ?
+      this._layerNameHash[id] : Object.keys(this._tableNameHash).indexOf(id) > -1 ?
+      this._tableNameHash[id] : undefined;
+    this.selectedName = item === null || item === void 0 ? void 0 : item.name;
     this.selectedIds = [id];
     this.layerSelectionChange.emit(this.selectedIds);
   }
@@ -1826,25 +1849,38 @@ const MapLayerPicker = class {
    */
   async _setLayers() {
     if (this.mapView) {
-      const mapLayerIds = await mapViewUtils.getMapLayerIds(this.mapView);
-      const mapTableIds = this.showTables ? await mapViewUtils.getMapTableIds(this.mapView) : [];
+      await this._initLayerTableHash();
+      const mapLayerIds = this.onlyShowUpdatableLayers ?
+        this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash);
+      const mapTableIds = this.showTables ? this.onlyShowUpdatableLayers ?
+        this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
       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();
     }
   }
+  /**
+   * Fetch the ids of all layers that support edits with the update capability
+   *
+   * @returns array of layer ids
+   */
+  _getEditableIds(hash) {
+    return Object.keys(hash).reduce((prev, cur) => {
+      if (hash[cur].supportsUpdate) {
+        prev.push(cur);
+      }
+      return prev;
+    }, []);
+  }
   /**
    * Create a layer id:title hash for layer name display
    *
    * @returns Promise when the operation has completed
    */
-  async _initStateHash() {
-    if (this.mapView) {
-      publicNotificationStore.state.layerNameHash = await mapViewUtils.getMapLayerHash(this.mapView);
-      publicNotificationStore.state.tableNameHash = this.showTables ? await mapViewUtils.getMapTableHash(this.mapView) : {};
-    }
+  async _initLayerTableHash() {
+    this._layerNameHash = await mapViewUtils.getMapLayerHash(this.mapView, this.onlyShowUpdatableLayers);
+    this._tableNameHash = this.showTables ? await mapViewUtils.getMapTableHash(this.mapView, this.onlyShowUpdatableLayers) : {};
   }
   /**
    * Evaluate if the id exists in the current hash and verify if it should be excluded
@@ -1852,9 +1888,10 @@ const MapLayerPicker = class {
    * @returns boolean when true the layer will be used in the current layer picker type
    */
   _validLayer(id) {
-    const name = publicNotificationStore.state.layerNameHash[id];
+    var _a;
+    const name = (_a = this._layerNameHash[id]) === null || _a === void 0 ? void 0 : _a.name;
     return name && publicNotificationStore.state.managedLayers.indexOf(name) < 0 && (this.enabledLayerIds.length > 0 ?
-      this.enabledLayerIds.indexOf(id) > -1 : name);
+      this.enabledLayerIds.indexOf(id) > -1 : true);
   }
   /**
    * Evaluate if the id exists in the current hash and verify if it should be excluded
@@ -1862,7 +1899,8 @@ const MapLayerPicker = class {
    * @returns boolean when true the table will be used in the current layer picker type
    */
   _validTable(id) {
-    const name = publicNotificationStore.state.tableNameHash[id];
+    var _a;
+    const name = (_a = this._tableNameHash[id]) === null || _a === void 0 ? void 0 : _a.name;
     const validName = name && this.showTables;
     return validName ? publicNotificationStore.state.managedTables.indexOf(name) < 0 &&
       (this.enabledTableIds.length > 0 ? this.enabledTableIds.indexOf(id) > -1 : true) : validName;
@@ -1879,6 +1917,16 @@ const MapLayerPicker = class {
       this.layerSelectionChange.emit(this.selectedIds);
     }
   }
+  /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   * @protected
+   */
+  async _getTranslations() {
+    const messages = await locale$1.getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
+  }
   get el() { return index.getElement(this); }
   static get watchers() { return {
     "mapView": ["mapViewWatchHandler"]

package/dist/cjs/card-manager_3.cjs.entry.js

@@ -9,9 +9,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-ee37804b.js');
 const locale = require('./locale-67f5f6b6.js');
-const mapViewUtils = require('./mapViewUtils-a4dd36ec.js');
+const mapViewUtils = require('./mapViewUtils-a2884698.js');
 const loadModules = require('./loadModules-f6df8d6a.js');
-const downloadUtils = require('./downloadUtils-fb4744e0.js');
+const downloadUtils = require('./downloadUtils-34a515ad.js');
 require('./_commonjsHelpers-384729db.js');
 require('./interfaces-000be6de.js');
 require('./clean-url-d5326abb.js');
@@ -59,7 +59,7 @@ const CardManager = class {
    */
   async layerSelectionChange(evt) {
     const id = evt.detail[0];
-    this.layer = await mapViewUtils.getLayer(this.mapView, id);
+    this.layer = await mapViewUtils.getLayerOrTable(this.mapView, id);
   }
   //--------------------------------------------------------------------------
   //
@@ -131,6 +131,7 @@ const LayerTable = class {
     this.enableInlineEdit = undefined;
     this.mapInfo = undefined;
     this.mapView = undefined;
+    this.onlyShowUpdatableLayers = undefined;
     this.showNewestFirst = undefined;
     this.zoomAndScrollToSelected = undefined;
     this._alertOpen = false;
@@ -151,13 +152,12 @@ const LayerTable = class {
    * watch for changes in map view and get the first layer
    */
   async mapViewWatchHandler() {
-    this._fetchingData = true;
-    const mapLayerIds = await mapViewUtils.getMapLayerIds(this.mapView);
-    this._layer = await mapViewUtils.getLayer(this.mapView, mapLayerIds[0]);
-    this.reactiveUtils.on(() => this.mapView, "click", (event) => {
+    if (this._mapClickHandle) {
+      this._mapClickHandle.remove();
+    }
+    this._mapClickHandle = this.reactiveUtils.on(() => this.mapView, "click", (event) => {
       void this._mapClicked(event);
     });
-    this._fetchingData = false;
   }
   /**
    * watch for changes in layer view and verify if it has editing enabled
@@ -214,6 +214,22 @@ const LayerTable = class {
       }
     }
   }
+  /**
+   * Refresh the table when edits are completed
+   *
+   */
+  editsComplete() {
+    this._refresh();
+  }
+  /**
+   * Refresh the table when edits are completed
+   *
+   */
+  noLayersFound() {
+    this._layer = undefined;
+    this._allIds = [];
+    this._clearSelection();
+  }
   //--------------------------------------------------------------------------
   //
   //  Functions (lifecycle)
@@ -232,9 +248,6 @@ const LayerTable = class {
    * Renders the component.
    */
   render() {
-    if (!this._layer) {
-      return null;
-    }
     const tableNodeClass = this._fetchingData ? "display-none" : "";
     const loadingClass = this._fetchingData ? "" : "display-none";
     const total = this._allIds.length.toString();
@@ -272,9 +285,37 @@ const LayerTable = class {
    */
   _getTableControlRow(slot) {
     const featuresSelected = this._selectedIndexes.length > 0;
-    return (index.h("div", { class: "display-flex table-border height-51", slot: slot }, index.h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, index.h("div", { class: "border-end" }, index.h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), placeholderIcon: "layers", scale: "l", type: "dropdown" })), index.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 }), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "magnifying-glass" }, index.h("span", null, this._translations.zoom)), index.h("calcite-action", { appearance: "solid", icon: "filter", id: "filter", onClick: () => this._filter(), text: this._translations.filters, "text-enabled": "true", textEnabled: true }), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "filter" }, index.h("span", null, this._translations.filters)), index.h("calcite-action", { appearance: "solid", disabled: !featuresSelected, id: "trash", onClick: () => this._delete(), text: "" }, index.h("calcite-button", { appearance: "transparent", iconStart: "trash", kind: "danger" }, this._translations.delete)), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "trash" }, index.h("span", null, this._translations.delete)), index.h("calcite-action", { appearance: "solid", disabled: !featuresSelected, icon: "erase", id: "erase", onClick: () => this._clearSelection(), text: this._translations.clearSelection, "text-enabled": "true", textEnabled: true }), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "erase" }, index.h("span", null, this._translations.clearSelection))), index.h("calcite-dropdown", null, index.h("calcite-action", { appearance: "solid", label: "", slot: "trigger", text: "" }, index.h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), index.h("calcite-dropdown-group", { "selection-mode": "none" }, index.h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), index.h("calcite-dropdown-item", { iconStart: "selected-items-filter", onClick: () => this._toggleShowSelected() }, this._showOnlySelected ? this._translations.showAll :
+    return (index.h("div", { class: "display-flex table-border height-51", slot: slot }, index.h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, index.h("div", { class: "border-end" }, index.h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", type: "dropdown" })), this._getAction("zoom-to-object", this._translations.zoom, () => this._zoom(), !featuresSelected), this._getAction("filter", this._translations.filters, () => this._filter(), false), this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !featuresSelected)), index.h("calcite-dropdown", { disabled: this._layer === undefined }, index.h("calcite-action", { appearance: "solid", label: "", slot: "trigger", text: "" }, index.h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), index.h("calcite-dropdown-group", { "selection-mode": "none" }, index.h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), index.h("calcite-dropdown-item", { iconStart: "selected-items-filter", onClick: () => this._toggleShowSelected() }, this._showOnlySelected ? this._translations.showAll :
       this._translations.showSelected), index.h("calcite-dropdown-item", { iconStart: "compare", onClick: () => this._switchSelected() }, this._translations.switchSelected), index.h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._refresh() }, this._translations.refresh), index.h("calcite-dropdown-item", { iconStart: "export", onClick: () => void this._exportToCSV() }, this._translations.exportCSV)))));
   }
+  /**
+   * Get an action and tooltip
+   *
+   * @param icon string the name of the icon to display, will also be used as the id
+   * @param label string the text to display and label the action
+   * @param func any the function to execute
+   * @param disabled boolean when true the user will not be able to interact with the action
+   *
+   * @returns VNode The node representing the DOM element that will contain the action
+   */
+  _getAction(icon, label, func, disabled) {
+    const _disabled = this._layer === undefined ? true : disabled;
+    return (index.h("div", { class: "display-flex" }, index.h("calcite-action", { appearance: "solid", disabled: _disabled, icon: icon, id: icon, label: label, onClick: func, text: label, textEnabled: true }), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, index.h("span", null, label))));
+  }
+  /**
+   * Get an action with danger color icon and text
+   *
+   * @param icon string the name of the icon to display, will also be used as the id
+   * @param label string the text to display and label the action
+   * @param func any the function to execute
+   * @param disabled boolean when true the user will not be able to interact with the action
+   *
+   * @returns VNode The node representing the DOM element that will contain the action
+   */
+  _getDangerAction(icon, label, func, disabled) {
+    const _disabled = this._layer === undefined ? true : disabled;
+    return (index.h("div", { class: "display-flex" }, index.h("calcite-action", { appearance: "solid", disabled: _disabled, id: icon, onClick: func, text: "" }, index.h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label)), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, index.h("span", null, label))));
+  }
   /**
    * Initialize the FeatureTable
    *
@@ -284,7 +325,7 @@ const LayerTable = class {
    */
   async _getTable(node, columnTemplates) {
     if (this._layer) {
-      await this._layer.when(async () => {
+      await this._layer.when(() => {
         this._table = new this.FeatureTable({
           autoRefreshEnabled: this.enableAutoRefresh,
           layer: this._layer,
@@ -301,25 +342,25 @@ const LayerTable = class {
           },
           container: node
         });
-        this._checkEditEnabled();
-        await this._table.when(async () => {
-          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._checkEditEnabled();
+      await this._table.when(() => {
+        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);
-          });
-          this.reactiveUtils.watch(() => this._table.activeSortOrders, (sortOrders) => {
-            var _a, _b, _c, _d;
-            this._sortActive = (sortOrders.length > 0 && ((_a = sortOrders[0]) === null || _a === void 0 ? void 0 : _a.direction) === "asc" || ((_b = sortOrders[0]) === null || _b === void 0 ? void 0 : _b.direction) === "desc") ||
-              ((_c = sortOrders[0]) === null || _c === void 0 ? void 0 : _c.direction) === null && ((_d = sortOrders[0]) === null || _d === void 0 ? void 0 : _d.fieldName) === this._layer.objectIdField;
-          });
+          }
+          this.featureSelectionChange.emit(this._selectedIndexes);
+        });
+        this.reactiveUtils.watch(() => this._table.activeSortOrders, (sortOrders) => {
+          var _a, _b, _c, _d;
+          this._sortActive = this._layer ? (sortOrders.length > 0 && ((_a = sortOrders[0]) === null || _a === void 0 ? void 0 : _a.direction) === "asc" || ((_b = sortOrders[0]) === null || _b === void 0 ? void 0 : _b.direction) === "desc") ||
+            ((_c = sortOrders[0]) === null || _c === void 0 ? void 0 : _c.direction) === null && ((_d = sortOrders[0]) === null || _d === void 0 ? void 0 : _d.fieldName) === this._layer.objectIdField : false;
         });
       });
     }
@@ -330,20 +371,30 @@ const LayerTable = class {
    * @returns void
    */
   async _resetTable() {
-    if (this._layer && this._table) {
+    if (this._table) {
       this._clearSelection();
       this._allIds = [];
       this.featureSelectionChange.emit(this._selectedIndexes);
-      const columnTemplates = this._getColumnTemplates(this._layer.id);
-      this._table.layer = this._layer;
-      this._table.tableTemplate.columnTemplates = columnTemplates;
-      this._checkEditEnabled();
-      this._table.view = this.mapView;
-      this._table.editingEnabled = this._editEnabled;
-      this._table.clearSelectionFilter();
-      this._showOnlySelected = false;
-      this._sortActive = false;
-      await this._sortTable();
+      if (this._layer) {
+        await this._layer.when(() => {
+          const columnTemplates = this._getColumnTemplates(this._layer.id);
+          this._table.layer = this._layer;
+          this._table.tableTemplate.columnTemplates = columnTemplates;
+          this._table.view = this.mapView;
+          this._checkEditEnabled();
+          this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
+        });
+        await this._table.when(() => {
+          this._table.clearSelectionFilter();
+        });
+        this._showOnlySelected = false;
+        this._sortActive = false;
+        await this._sortTable();
+      }
+      else {
+        this._table.view = this.mapView;
+        this._table.layer = this._layer;
+      }
     }
   }
   /**
@@ -364,11 +415,10 @@ const LayerTable = class {
     if (this._table && this._layer && !this._sortActive) {
       if (!this._tableSorting && this.showNewestFirst) {
         this._tableSorting = true;
-        await this._table.when(async () => {
-          await this._layer.when(async () => {
-            this._table.sortColumn(this._layer.objectIdField, "desc");
-            this._tableSorting = false;
-          });
+        await this._table.when();
+        await this._layer.when(() => {
+          this._table.sortColumn(this._layer.objectIdField, "desc");
+          this._tableSorting = false;
         });
       }
     }
@@ -566,11 +616,12 @@ const LayerTable = class {
    * @returns a promise that will resolve when the operation is complete
    */
   async _layerSelectionChanged(evt) {
+    var _a;
     const id = evt.detail[0];
-    if (id !== this._layer.id || this._allIds.length === 0) {
+    if (id !== ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id) || this._allIds.length === 0) {
       this._fetchingData = true;
       const columnTemplates = this._getColumnTemplates(id);
-      this._layer = await mapViewUtils.getLayer(this.mapView, id);
+      this._layer = await mapViewUtils.getLayerOrTable(this.mapView, id);
       this._allIds = await mapViewUtils.queryAllIds(this._layer);
       if (!this._table) {
         await this._getTable(this._tableNode, columnTemplates);
@@ -632,10 +683,16 @@ const MapCard = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.mapChanged = index.createEvent(this, "mapChanged", 7);
+    this.beforeMapChanged = index.createEvent(this, "beforeMapChanged", 7);
     /**
      * string: the id of map currently displayed
      */
     this._loadedId = "";
+    this.enableLegend = undefined;
+    this.enableFullscreen = undefined;
+    this.enableSearch = undefined;
+    this.enableBasemap = undefined;
+    this.basemapConfig = undefined;
     this.mapInfos = [];
     this.mapView = undefined;
     this._searchConfiguration = undefined;
@@ -662,7 +719,7 @@ const MapCard = class {
    * Renders the component.
    */
   render() {
-    return (index.h(index.Host, null, index.h("map-picker", { mapInfos: this.mapInfos }), index.h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), index.h("map-tools", { class: "box-shadow", mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
+    return (index.h(index.Host, null, index.h("map-picker", { mapInfos: this.mapInfos }), index.h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), index.h("map-tools", { basemapConfig: this.basemapConfig, class: "box-shadow", enableBasemap: this.enableBasemap, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
   }
   //--------------------------------------------------------------------------
   //
@@ -712,16 +769,17 @@ const MapCard = class {
       });
       this._loadedId = id;
       this._searchConfiguration = this._webMapInfo.searchConfiguration;
-      this.mapChanged.emit({
-        id: id,
-        mapView: this.mapView
-      });
+      this.beforeMapChanged.emit();
       await this.mapView.when(() => {
         const home = new this.Home({
           view: this.mapView
         });
         this.mapView.ui.add(home, { position: "top-left", index: 3 });
         this.mapView.ui.add(this._mapTools, { position: "top-right", index: 0 });
+        this.mapChanged.emit({
+          id: id,
+          mapView: this.mapView
+        });
       });
     }
   }

package/dist/cjs/crowdsource-manager.cjs.entry.js

@@ -24,10 +24,18 @@ const CrowdsourceManager = class {
     this._shouldSetMapView = false;
     this.classicGrid = false;
     this.enableAutoRefresh = true;
+    this.enableFullscreen = true;
     this.enableInlineEdit = false;
+    this.enableLegend = true;
+    this.enableSearch = true;
+    this.enableHome = true;
+    this.enableZoom = true;
+    this.enableBasemap = true;
+    this.basemapConfig = undefined;
     this.showNewestFirst = true;
     this.hideMap = false;
     this.mapInfos = [];
+    this.onlyShowUpdatableLayers = true;
     this.searchConfiguration = undefined;
     this.zoomAndScrollToSelected = false;
     this._expandPopup = false;
@@ -62,13 +70,18 @@ const CrowdsourceManager = class {
    */
   async mapChanged(evt) {
     this._mapChange = evt.detail;
+    await this._mapChange.mapView.when(() => {
+      this._setMapView();
+    });
+  }
+  /**
+   * Listen for beforeMapChanged and minimize the popup if it's expanded
+   */
+  async beforeMapChanged() {
     if (this._expandPopup) {
       this._shouldSetMapView = true;
       this._expandPopup = false;
     }
-    else {
-      this._setMapView();
-    }
   }
   //--------------------------------------------------------------------------
   //
@@ -227,7 +240,7 @@ const CrowdsourceManager = class {
     const mapDisplayClass = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ? "display-flex height-full width-1-2" :
       layoutMode === interfaces.ELayoutMode.GRID && !hideMap ? "" : "display-none";
     const mapContainerClass = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ? "width-full" : this._expandPopup ? "height-50-px" : "adjusted-height-50";
-    return (index.h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, index.h("map-card", { class: "width-full", mapInfos: this.mapInfos })));
+    return (index.h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, index.h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", enableBasemap: this.enableBasemap, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, mapInfos: this.mapInfos })));
   }
   /**
    * Get the expand node for the popup information
@@ -281,7 +294,7 @@ const CrowdsourceManager = class {
     const toggleSlot = this.classicGrid && layoutMode !== interfaces.ELayoutMode.VERTICAL ? "footer" :
       this.classicGrid && layoutMode === interfaces.ELayoutMode.VERTICAL ? "panel-end" :
         layoutMode === interfaces.ELayoutMode.HORIZONTAL ? "header" : "panel-start";
-    return (index.h("calcite-shell", { class: tableSizeClass + " border-bottom" }, index.h("calcite-action-bar", { class: "border", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, index.h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), index.h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, index.h("span", null, tooltip))), index.h("div", { class: "width-full height-full position-relative" }, index.h("layer-table", { enableAutoRefresh: this.enableAutoRefresh, enableInlineEdit: this.enableInlineEdit, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
+    return (index.h("calcite-shell", { class: tableSizeClass + " border-bottom" }, index.h("calcite-action-bar", { class: "border", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, index.h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), index.h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, index.h("span", null, tooltip))), index.h("div", { class: "width-full height-full position-relative" }, index.h("layer-table", { enableAutoRefresh: this.enableAutoRefresh, enableInlineEdit: this.enableInlineEdit, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
   }
   /**
    * Open/Close the appropriate panel.

package/dist/cjs/{downloadUtils-fb4744e0.js → downloadUtils-34a515ad.js}

@@ -8,7 +8,7 @@
 const _commonjsHelpers = require('./_commonjsHelpers-384729db.js');
 const index = require('./index-ee37804b.js');
 const loadModules = require('./loadModules-f6df8d6a.js');
-const mapViewUtils = require('./mapViewUtils-a4dd36ec.js');
+const mapViewUtils = require('./mapViewUtils-a2884698.js');
 const cleanUrl = require('./clean-url-d5326abb.js');
 
 /** @license
@@ -1508,7 +1508,7 @@ function(t){var e=function(t){for(var e=t.length,r=new Uint8Array(e),n=0;n<e;n++
  * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  * ====================================================================
  */
-function(t){function e(){return (n.canvg?Promise.resolve(n.canvg):Promise.resolve().then(function () { return require('./index.es-372e33de.js'); })).catch((function(t){return Promise.reject(new Error("Could not load canvg: "+t))})).then((function(t){return t.default?t.default:t}))}E.API.addSvgAsImage=function(t,r,n,i,o,s,c,u){if(isNaN(r)||isNaN(n))throw a.error("jsPDF.addSvgAsImage: Invalid coordinates",arguments),new Error("Invalid coordinates passed to jsPDF.addSvgAsImage");if(isNaN(i)||isNaN(o))throw a.error("jsPDF.addSvgAsImage: Invalid measurements",arguments),new Error("Invalid measurements (width and/or height) passed to jsPDF.addSvgAsImage");var h=document.createElement("canvas");h.width=i,h.height=o;var l=h.getContext("2d");l.fillStyle="#fff",l.fillRect(0,0,h.width,h.height);var f={ignoreMouse:!0,ignoreAnimation:!0,ignoreDimensions:!0},d=this;return e().then((function(e){return e.fromString(l,t,f)}),(function(){return Promise.reject(new Error("Could not load canvg."))})).then((function(t){return t.render(f)})).then((function(){d.addImage(h.toDataURL("image/jpeg",1),r,n,i,o,c,u);}))};}(),E.API.putTotalPages=function(t){var e,r=0;parseInt(this.internal.getFont().id.substr(1),10)<15?(e=new RegExp(t,"g"),r=this.internal.getNumberOfPages()):(e=new RegExp(this.pdfEscape16(t,this.internal.getFont()),"g"),r=this.pdfEscape16(this.internal.getNumberOfPages()+"",this.internal.getFont()));for(var n=1;n<=this.internal.getNumberOfPages();n++)for(var i=0;i<this.internal.pages[n].length;i++)this.internal.pages[n][i]=this.internal.pages[n][i].replace(e,r);return this},E.API.viewerPreferences=function(e,r){var n;e=e||{},r=r||!1;var i,a,o,s={HideToolbar:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.3},HideMenubar:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.3},HideWindowUI:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.3},FitWindow:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.3},CenterWindow:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.3},DisplayDocTitle:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.4},NonFullScreenPageMode:{defaultValue:"UseNone",value:"UseNone",type:"name",explicitSet:!1,valueSet:["UseNone","UseOutlines","UseThumbs","UseOC"],pdfVersion:1.3},Direction:{defaultValue:"L2R",value:"L2R",type:"name",explicitSet:!1,valueSet:["L2R","R2L"],pdfVersion:1.3},ViewArea:{defaultValue:"CropBox",value:"CropBox",type:"name",explicitSet:!1,valueSet:["MediaBox","CropBox","TrimBox","BleedBox","ArtBox"],pdfVersion:1.4},ViewClip:{defaultValue:"CropBox",value:"CropBox",type:"name",explicitSet:!1,valueSet:["MediaBox","CropBox","TrimBox","BleedBox","ArtBox"],pdfVersion:1.4},PrintArea:{defaultValue:"CropBox",value:"CropBox",type:"name",explicitSet:!1,valueSet:["MediaBox","CropBox","TrimBox","BleedBox","ArtBox"],pdfVersion:1.4},PrintClip:{defaultValue:"CropBox",value:"CropBox",type:"name",explicitSet:!1,valueSet:["MediaBox","CropBox","TrimBox","BleedBox","ArtBox"],pdfVersion:1.4},PrintScaling:{defaultValue:"AppDefault",value:"AppDefault",type:"name",explicitSet:!1,valueSet:["AppDefault","None"],pdfVersion:1.6},Duplex:{defaultValue:"",value:"none",type:"name",explicitSet:!1,valueSet:["Simplex","DuplexFlipShortEdge","DuplexFlipLongEdge","none"],pdfVersion:1.7},PickTrayByPDFSize:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.7},PrintPageRange:{defaultValue:"",value:"",type:"array",explicitSet:!1,valueSet:null,pdfVersion:1.7},NumCopies:{defaultValue:1,value:1,type:"integer",explicitSet:!1,valueSet:null,pdfVersion:1.7}},c=Object.keys(s),u=[],h=0,l=0,f=0;function d(t,e){var r,n=!1;for(r=0;r<t.length;r+=1)t[r]===e&&(n=!0);return n}if(void 0===this.internal.viewerpreferences&&(this.internal.viewerpreferences={},this.internal.viewerpreferences.configuration=JSON.parse(JSON.stringify(s)),this.internal.viewerpreferences.isSubscribed=!1),n=this.internal.viewerpreferences.configuration,"reset"===e||!0===r){var p=c.length;for(f=0;f<p;f+=1)n[c[f]].value=n[c[f]].defaultValue,n[c[f]].explicitSet=!1;}if("object"===t(e))for(a in e)if(o=e[a],d(c,a)&&void 0!==o){if("boolean"===n[a].type&&"boolean"==typeof o)n[a].value=o;else if("name"===n[a].type&&d(n[a].valueSet,o))n[a].value=o;else if("integer"===n[a].type&&Number.isInteger(o))n[a].value=o;else if("array"===n[a].type){for(h=0;h<o.length;h+=1)if(i=!0,1===o[h].length&&"number"==typeof o[h][0])u.push(String(o[h]-1));else if(o[h].length>1){for(l=0;l<o[h].length;l+=1)"number"!=typeof o[h][l]&&(i=!1);!0===i&&u.push([o[h][0]-1,o[h][1]-1].join(" "));}n[a].value="["+u.join(" ")+"]";}else n[a].value=n[a].defaultValue;n[a].explicitSet=!0;}return !1===this.internal.viewerpreferences.isSubscribed&&(this.internal.events.subscribe("putCatalog",(function(){var t,e=[];for(t in n)!0===n[t].explicitSet&&("name"===n[t].type?e.push("/"+t+" /"+n[t].value):e.push("/"+t+" "+n[t].value));0!==e.length&&this.internal.write("/ViewerPreferences\n<<\n"+e.join("\n")+"\n>>");})),this.internal.viewerpreferences.isSubscribed=!0),this.internal.viewerpreferences.configuration=n,this},
+function(t){function e(){return (n.canvg?Promise.resolve(n.canvg):Promise.resolve().then(function () { return require('./index.es-0ba11065.js'); })).catch((function(t){return Promise.reject(new Error("Could not load canvg: "+t))})).then((function(t){return t.default?t.default:t}))}E.API.addSvgAsImage=function(t,r,n,i,o,s,c,u){if(isNaN(r)||isNaN(n))throw a.error("jsPDF.addSvgAsImage: Invalid coordinates",arguments),new Error("Invalid coordinates passed to jsPDF.addSvgAsImage");if(isNaN(i)||isNaN(o))throw a.error("jsPDF.addSvgAsImage: Invalid measurements",arguments),new Error("Invalid measurements (width and/or height) passed to jsPDF.addSvgAsImage");var h=document.createElement("canvas");h.width=i,h.height=o;var l=h.getContext("2d");l.fillStyle="#fff",l.fillRect(0,0,h.width,h.height);var f={ignoreMouse:!0,ignoreAnimation:!0,ignoreDimensions:!0},d=this;return e().then((function(e){return e.fromString(l,t,f)}),(function(){return Promise.reject(new Error("Could not load canvg."))})).then((function(t){return t.render(f)})).then((function(){d.addImage(h.toDataURL("image/jpeg",1),r,n,i,o,c,u);}))};}(),E.API.putTotalPages=function(t){var e,r=0;parseInt(this.internal.getFont().id.substr(1),10)<15?(e=new RegExp(t,"g"),r=this.internal.getNumberOfPages()):(e=new RegExp(this.pdfEscape16(t,this.internal.getFont()),"g"),r=this.pdfEscape16(this.internal.getNumberOfPages()+"",this.internal.getFont()));for(var n=1;n<=this.internal.getNumberOfPages();n++)for(var i=0;i<this.internal.pages[n].length;i++)this.internal.pages[n][i]=this.internal.pages[n][i].replace(e,r);return this},E.API.viewerPreferences=function(e,r){var n;e=e||{},r=r||!1;var i,a,o,s={HideToolbar:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.3},HideMenubar:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.3},HideWindowUI:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.3},FitWindow:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.3},CenterWindow:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.3},DisplayDocTitle:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.4},NonFullScreenPageMode:{defaultValue:"UseNone",value:"UseNone",type:"name",explicitSet:!1,valueSet:["UseNone","UseOutlines","UseThumbs","UseOC"],pdfVersion:1.3},Direction:{defaultValue:"L2R",value:"L2R",type:"name",explicitSet:!1,valueSet:["L2R","R2L"],pdfVersion:1.3},ViewArea:{defaultValue:"CropBox",value:"CropBox",type:"name",explicitSet:!1,valueSet:["MediaBox","CropBox","TrimBox","BleedBox","ArtBox"],pdfVersion:1.4},ViewClip:{defaultValue:"CropBox",value:"CropBox",type:"name",explicitSet:!1,valueSet:["MediaBox","CropBox","TrimBox","BleedBox","ArtBox"],pdfVersion:1.4},PrintArea:{defaultValue:"CropBox",value:"CropBox",type:"name",explicitSet:!1,valueSet:["MediaBox","CropBox","TrimBox","BleedBox","ArtBox"],pdfVersion:1.4},PrintClip:{defaultValue:"CropBox",value:"CropBox",type:"name",explicitSet:!1,valueSet:["MediaBox","CropBox","TrimBox","BleedBox","ArtBox"],pdfVersion:1.4},PrintScaling:{defaultValue:"AppDefault",value:"AppDefault",type:"name",explicitSet:!1,valueSet:["AppDefault","None"],pdfVersion:1.6},Duplex:{defaultValue:"",value:"none",type:"name",explicitSet:!1,valueSet:["Simplex","DuplexFlipShortEdge","DuplexFlipLongEdge","none"],pdfVersion:1.7},PickTrayByPDFSize:{defaultValue:!1,value:!1,type:"boolean",explicitSet:!1,valueSet:[!0,!1],pdfVersion:1.7},PrintPageRange:{defaultValue:"",value:"",type:"array",explicitSet:!1,valueSet:null,pdfVersion:1.7},NumCopies:{defaultValue:1,value:1,type:"integer",explicitSet:!1,valueSet:null,pdfVersion:1.7}},c=Object.keys(s),u=[],h=0,l=0,f=0;function d(t,e){var r,n=!1;for(r=0;r<t.length;r+=1)t[r]===e&&(n=!0);return n}if(void 0===this.internal.viewerpreferences&&(this.internal.viewerpreferences={},this.internal.viewerpreferences.configuration=JSON.parse(JSON.stringify(s)),this.internal.viewerpreferences.isSubscribed=!1),n=this.internal.viewerpreferences.configuration,"reset"===e||!0===r){var p=c.length;for(f=0;f<p;f+=1)n[c[f]].value=n[c[f]].defaultValue,n[c[f]].explicitSet=!1;}if("object"===t(e))for(a in e)if(o=e[a],d(c,a)&&void 0!==o){if("boolean"===n[a].type&&"boolean"==typeof o)n[a].value=o;else if("name"===n[a].type&&d(n[a].valueSet,o))n[a].value=o;else if("integer"===n[a].type&&Number.isInteger(o))n[a].value=o;else if("array"===n[a].type){for(h=0;h<o.length;h+=1)if(i=!0,1===o[h].length&&"number"==typeof o[h][0])u.push(String(o[h]-1));else if(o[h].length>1){for(l=0;l<o[h].length;l+=1)"number"!=typeof o[h][l]&&(i=!1);!0===i&&u.push([o[h][0]-1,o[h][1]-1].join(" "));}n[a].value="["+u.join(" ")+"]";}else n[a].value=n[a].defaultValue;n[a].explicitSet=!0;}return !1===this.internal.viewerpreferences.isSubscribed&&(this.internal.events.subscribe("putCatalog",(function(){var t,e=[];for(t in n)!0===n[t].explicitSet&&("name"===n[t].type?e.push("/"+t+" /"+n[t].value):e.push("/"+t+" "+n[t].value));0!==e.length&&this.internal.write("/ViewerPreferences\n<<\n"+e.join("\n")+"\n>>");})),this.internal.viewerpreferences.isSubscribed=!0),this.internal.viewerpreferences.configuration=n,this},
 /** ====================================================================
  * @license
  * jsPDF XMP metadata plugin