@esri/solutions-components 0.6.11 → 0.6.13

package/dist/cjs/{zh-hk-e14e2fc0.js → zh-hk-d1a89b9e.js}

@@ -5,21 +5,21 @@
  */
 'use strict';
 
-const calciteInputTimePicker_entry = require('./calcite-input-time-picker-4efcd55d.js');
-require('./index-0e50040c.js');
-require('./form-7c6054c3.js');
+const calciteInputTimePicker_entry = require('./calcite-input-time-picker-188356eb.js');
+require('./index-ee37804b.js');
+require('./form-28bc6597.js');
 require('./dom-456f9f13.js');
 require('./guid-d1123d5e.js');
 require('./resources-993f6faf.js');
 require('./interactive-48299817.js');
 require('./key-8de93212.js');
 require('./label-166e2d81.js');
-require('./loadable-6925d840.js');
+require('./loadable-13605f73.js');
 require('./locale-79c3d30e.js');
 require('./observers-9912f013.js');
 require('./focusTrapComponent-d8412ddc.js');
 require('./time-24d40c60.js');
-require('./t9n-62d807df.js');
+require('./t9n-58d20225.js');
 
 // Chinese (Hong Kong) [zh-hk]
 var locale = {

package/dist/cjs/{zh-tw-7ea0d7e4.js → zh-tw-5691adb2.js}

@@ -5,21 +5,21 @@
  */
 'use strict';
 
-const calciteInputTimePicker_entry = require('./calcite-input-time-picker-4efcd55d.js');
-require('./index-0e50040c.js');
-require('./form-7c6054c3.js');
+const calciteInputTimePicker_entry = require('./calcite-input-time-picker-188356eb.js');
+require('./index-ee37804b.js');
+require('./form-28bc6597.js');
 require('./dom-456f9f13.js');
 require('./guid-d1123d5e.js');
 require('./resources-993f6faf.js');
 require('./interactive-48299817.js');
 require('./key-8de93212.js');
 require('./label-166e2d81.js');
-require('./loadable-6925d840.js');
+require('./loadable-13605f73.js');
 require('./locale-79c3d30e.js');
 require('./observers-9912f013.js');
 require('./focusTrapComponent-d8412ddc.js');
 require('./time-24d40c60.js');
-require('./t9n-62d807df.js');
+require('./t9n-58d20225.js');
 
 // Chinese (Taiwan) [zh-tw]
 var locale = {

package/dist/collection/collection-manifest.json

@@ -14,6 +14,7 @@
     "components/list-item/list-item.js",
     "components/map-card/map-card.js",
     "components/map-draw-tools/map-draw-tools.js",
+    "components/map-fullscreen/map-fullscreen.js",
     "components/map-layer-picker/map-layer-picker.js",
     "components/map-legend/map-legend.js",
     "components/map-picker/map-picker.js",

package/dist/collection/components/card-manager/card-manager.css

@@ -50,11 +50,6 @@
   overflow: auto;
 }
 
-.border-rounded {
-  border: 1px solid var(--calcite-ui-border-2);
-  border-radius: 5px;
-}
-
 .height-full {
   height: 100%;
 }

package/dist/collection/components/card-manager/card-manager.js

@@ -84,7 +84,7 @@ export class CardManager {
     var _a, _b;
     const featuresClass = ((_a = this._graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "" : "display-none";
     const messageClass = ((_b = this._graphics) === null || _b === void 0 ? void 0 : _b.length) > 0 ? "display-none" : "";
-    return (h(Host, null, h("div", { class: "border-rounded overflow-auto height-full" }, h("calcite-shell", { class: "position-relative " + featuresClass }, h("div", null, h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), h("div", { class: "padding-1 " + messageClass }, h("calcite-notice", { icon: "table", open: true }, h("div", { slot: "message" }, this._translations.selectFeaturesToStart))))));
+    return (h(Host, null, h("div", { class: "overflow-auto height-full" }, h("calcite-shell", { class: "position-relative " + featuresClass }, h("div", null, h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), h("div", { class: "padding-1 " + messageClass }, h("calcite-notice", { icon: "table", open: true }, h("div", { slot: "message" }, this._translations.selectFeaturesToStart))))));
   }
   //--------------------------------------------------------------------------
   //

package/dist/collection/components/crowdsource-manager/crowdsource-manager.css

@@ -93,11 +93,11 @@
 }
 
 .adjusted-height-50 {
-  height: calc(50% - 0.5rem - 25px);
+  height: calc(50% - 25px);
 }
 
 .adjusted-height-100 {
-  height: calc(100% - 1rem - 50px);
+  height: calc(100% - 50px);
 }
 
 .adjusted-height-100-50 {

package/dist/collection/components/crowdsource-manager/crowdsource-manager.js

@@ -23,7 +23,14 @@ import { getLocaleComponentStrings } from "../../utils/locale";
 import { ELayoutMode } from "../../utils/interfaces";
 export class CrowdsourceManager {
   constructor() {
+    /**
+     * boolean: When true the map view will be set after render due to popup obstructing the view
+     * MapView.when is not fired when mapView is not currently visible
+     */
+    this._shouldSetMapView = false;
     this.classicGrid = false;
+    this.enableAutoRefresh = true;
+    this.enableInlineEdit = false;
     this.showNewestFirst = true;
     this.hideMap = false;
     this.mapInfos = [];
@@ -60,13 +67,14 @@ export class CrowdsourceManager {
    * Listen for mapChanged event to be fired then store the new mapView so components will be updated
    */
   async mapChanged(evt) {
-    const mapChange = evt.detail;
-    // close popup by default when the map changes otherwise other components that rely on the view don't work since it
-    // doesn't seem to fully load when it's not visible
-    this._expandPopup = false;
-    this._mapInfo = this._getMapInfo(mapChange.id);
-    this._mapView = mapChange.mapView;
-    this._mapView.popupEnabled = false;
+    this._mapChange = evt.detail;
+    if (this._expandPopup) {
+      this._shouldSetMapView = true;
+      this._expandPopup = false;
+    }
+    else {
+      this._setMapView();
+    }
   }
   //--------------------------------------------------------------------------
   //
@@ -87,6 +95,16 @@ export class CrowdsourceManager {
   render() {
     return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: "width-full height-full" }, this._getBody(this._layoutMode, this._panelOpen, this.hideMap)))));
   }
+  /**
+   * Called after each render
+   * Used to delay the setting of the mapView when the popup is expaneded and obstructs the view
+   */
+  componentDidRender() {
+    if (this._shouldSetMapView) {
+      this._shouldSetMapView = false;
+      this._setMapView();
+    }
+  }
   //--------------------------------------------------------------------------
   //
   //  Functions (protected)
@@ -249,7 +267,7 @@ export class CrowdsourceManager {
       layoutMode === ELayoutMode.GRID && !this._expandPopup && !hideMap ? "adjusted-height-50" : "adjusted-height-100";
     const cardManagerContainer = this.classicGrid && layoutMode === ELayoutMode.GRID ?
       "width-full adjusted-height-100" : this._expandPopup ? "width-50 adjusted-height-100-50" : "width-50 height-full";
-    return (h("div", { class: `padding-1-2 ${cardManagerContainer}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
+    return (h("div", { class: `${cardManagerContainer}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
   }
   /**
    * Get the table node based for the current layout
@@ -269,7 +287,7 @@ export class CrowdsourceManager {
     const toggleSlot = this.classicGrid && layoutMode !== ELayoutMode.VERTICAL ? "footer" :
       this.classicGrid && layoutMode === ELayoutMode.VERTICAL ? "panel-end" :
         layoutMode === ELayoutMode.HORIZONTAL ? "header" : "panel-start";
-    return (h("calcite-shell", { class: tableSizeClass + " border-bottom" }, h("calcite-action-bar", { class: "border", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip))), h("div", { class: "width-full height-full position-relative" }, h("layer-table", { mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
+    return (h("calcite-shell", { class: tableSizeClass + " border-bottom" }, h("calcite-action-bar", { class: "border", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip))), h("div", { class: "width-full height-full position-relative" }, 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 }))));
   }
   /**
    * Open/Close the appropriate panel.
@@ -297,6 +315,16 @@ export class CrowdsourceManager {
     });
     return mapInfo;
   }
+  /**
+   * Set the current map info when maps change
+   *
+   * @protected
+   */
+  _setMapView() {
+    this._mapInfo = this._getMapInfo(this._mapChange.id);
+    this._mapView = this._mapChange.mapView;
+    this._mapView.popupEnabled = false;
+  }
   /**
    * Fetches the component's translations
    *
@@ -338,6 +366,42 @@ export class CrowdsourceManager {
         "reflect": false,
         "defaultValue": "false"
       },
+      "enableAutoRefresh": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the layer table will auto refresh the data"
+        },
+        "attribute": "enable-auto-refresh",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "enableInlineEdit": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true edits can be applied directly within the table"
+        },
+        "attribute": "enable-inline-edit",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "showNewestFirst": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/edit-card/edit-card.css

@@ -52,3 +52,11 @@
   width: 100% !important;
   background-color: var(--calcite-ui-foreground-1) !important;
 }
+
+.esri-feature__content-node {
+  background-color: var(--calcite-ui-foreground-1) !important;
+}
+
+.esri-editor__panel-toolbar {
+  display: none !important;
+}

package/dist/collection/components/info-card/info-card.css

@@ -67,20 +67,6 @@ tr:nth-child(odd) {
   overflow: auto;
 }
 
-.edit-btn {
-  z-index: 999;
-  position: absolute;
-}
-
-.edit-btn-position {
-  right: 0.5rem;
-  top: 0.5rem;
-}
-
-html[dir="rtl"] .edit-btn-position {
-  left: 0;
-}
-
 .esri-features__footer {
   display: none !important;
 }
@@ -90,6 +76,20 @@ html[dir="rtl"] .edit-btn-position {
   align-items: center;
 }
 
+.top-border {
+  border-top: 1px solid var(--calcite-ui-border-1);
+}
+
 .min-width-100 {
   min-width: 100px;
 }
+
+.width-100 {
+  width: 100%;
+}
+
+.esri-features__container {
+  padding: 0.5rem !important;
+  background-color: var(--calcite-ui-foreground-1) !important;
+  height: 100% !important;
+}

package/dist/collection/components/info-card/info-card.js

@@ -42,6 +42,9 @@ export class InfoCard {
    */
   async graphicsWatchHandler() {
     var _a;
+    if (!this._features) {
+      await this._initFeaturesWidget();
+    }
     if (this.graphics.length > 0) {
       const featureLayer = (_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer;
       this._editEnabled = featureLayer.editingEnabled && featureLayer.capabilities.operations.supportsUpdate;
@@ -58,9 +61,7 @@ export class InfoCard {
    * Watch for changes to the mapView and re-init the Feature widget
    */
   async mapViewWatchHandler() {
-    await this.mapView.when(async () => {
-      await this._initFeaturesWidget();
-    });
+    return await this._initFeaturesWidget();
   }
   //--------------------------------------------------------------------------
   //
@@ -106,7 +107,7 @@ export class InfoCard {
     const featureNodeClass = this.isLoading || this._editRecordOpen ? "display-none" : "position-absolute";
     const editClass = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none";
     const editButtonClass = !this.isLoading && this._editRecordOpen ? "display-none" : "";
-    return (h(Host, null, h("calcite-shell", null, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} display-flex padding-1-2 button-container`, slot: "footer" }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, this._getCount()), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next)))), h("div", { class: `${editButtonClass} edit-btn edit-btn-position` }, h("calcite-button", { appearance: "outline", "icon-start": "pencil", id: "solutions-edit", onClick: () => this._openEditRecord() }, this._translations.edit), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit))), h("edit-card", { class: editClass, graphicIndex: (_a = this._features) === null || _a === void 0 ? void 0 : _a.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
+    return (h(Host, null, h("calcite-shell", null, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", "icon-start": "pencil", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit))), h("div", { class: "display-flex padding-1-2 button-container top-border" }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, this._getCount()), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_a = this._features) === null || _a === void 0 ? void 0 : _a.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
   }
   //--------------------------------------------------------------------------
   //
@@ -136,27 +137,29 @@ export class InfoCard {
    * @protected
    */
   async _initFeaturesWidget() {
-    if (!this._features) {
-      this._features = new this.Features({
-        view: this.mapView,
-        container: "features-node",
-        visibleElements: {
-          actionBar: false,
-          closeButton: false,
-          heading: true
-        }
-      });
-      if (this.zoomAndScrollToSelected) {
-        this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
-          if (i > -1) {
-            this.selectionChanged.emit(this._features.selectedFeature);
+    return await this.mapView.when(() => {
+      if (!this._features) {
+        this._features = new this.Features({
+          view: this.mapView,
+          container: "features-node",
+          visibleElements: {
+            actionBar: false,
+            closeButton: false,
+            heading: true
           }
         });
+        if (this.zoomAndScrollToSelected) {
+          this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
+            if (i > -1) {
+              this.selectionChanged.emit(this._features.selectedFeature);
+            }
+          });
+        }
       }
-    }
-    else {
-      this._features.view = this.mapView;
-    }
+      else {
+        this._features.view = this.mapView;
+      }
+    });
   }
   /**
    * Set the alertOpen member to false when the alert is closed

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

@@ -42,6 +42,10 @@
   padding: 5px;
 }
 
+.padding-end-1 {
+  padding-inline-end: 1rem;
+}
+
 .height-51 {
   height: 51px;
 }
@@ -65,3 +69,11 @@ html[dir="rtl"] .bottom-left {
 .text-color {
   color: var(--calcite-ui-text-1);
 }
+
+.align-center {
+  align-items: center;
+}
+
+.danger-color {
+  color: var(--calcite-ui-danger);
+}

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

@@ -45,12 +45,15 @@ export class LayerTable {
     this.onTableNodeCreate = (node) => {
       this._tableNode = node;
     };
+    this.enableAutoRefresh = undefined;
+    this.enableInlineEdit = undefined;
     this.mapInfo = undefined;
     this.mapView = undefined;
     this.showNewestFirst = undefined;
     this.zoomAndScrollToSelected = undefined;
     this._alertOpen = false;
     this._fetchingData = false;
+    this._isDeleting = false;
     this._layer = undefined;
     this._selectedIndexes = [];
     this._showOnlySelected = false;
@@ -152,12 +155,11 @@ export class LayerTable {
     }
     const tableNodeClass = this._fetchingData ? "display-none" : "";
     const loadingClass = this._fetchingData ? "" : "display-none";
-    const alertActionClass = this._alertShowAction ? "" : "display-none";
     const total = this._allIds.length.toString();
     const selected = this._selectedIndexes.length.toString();
     return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: "height-full width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate })), h("div", { class: "bottom-left background text-color" }, this._translations.recordsSelected
       .replace("{{total}}", total)
-      .replace("{{selected}}", selected))), h("calcite-alert", { icon: this._alertIcon, kind: this._alertKind, label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._alertTitle), h("div", { slot: "message" }, this._alertMessage), h("calcite-link", { class: alertActionClass, onClick: this._alertActionFunction, slot: "link" }, this._alertActionText)))));
+      .replace("{{selected}}", selected))), this._getEditDisabledWarning()), this._deleteMessage()));
   }
   //--------------------------------------------------------------------------
   //
@@ -189,7 +191,7 @@ 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-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)))));
+      this._translations.showSelected), h("calcite-dropdown-item", { iconStart: "compare", 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
@@ -202,9 +204,10 @@ export class LayerTable {
     if (this._layer) {
       await this._layer.when(async () => {
         this._table = new this.FeatureTable({
+          autoRefreshEnabled: this.enableAutoRefresh,
           layer: this._layer,
           view: this.mapView,
-          //editingEnabled: this._editEnabled,
+          editingEnabled: this._editEnabled && this.enableInlineEdit,
           highlightEnabled: true,
           multiSortEnabled: false,
           visibleElements: {
@@ -216,6 +219,7 @@ export class LayerTable {
           },
           container: node
         });
+        this._checkEditEnabled();
         await this._table.when(async () => {
           this._table.highlightIds.on("change", () => {
             this._selectedIndexes = this._table.highlightIds.toArray();
@@ -251,7 +255,7 @@ export class LayerTable {
       const columnTemplates = this._getColumnTemplates(this._layer.id);
       this._table.layer = this._layer;
       this._table.tableTemplate.columnTemplates = columnTemplates;
-      this._editEnabled = this._layer.editingEnabled;
+      this._checkEditEnabled();
       this._table.view = this.mapView;
       this._table.editingEnabled = this._editEnabled;
       this._table.clearSelectionFilter();
@@ -260,6 +264,15 @@ export class LayerTable {
       await this._sortTable();
     }
   }
+  /**
+   * Verify edit capabilities of the layer
+   *
+   * @returns void
+   */
+  _checkEditEnabled() {
+    this._editEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsUpdate;
+    this._deleteEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsDelete;
+  }
   /**
    * Sort the objectid field in descending order
    *
@@ -278,6 +291,40 @@ export class LayerTable {
       }
     }
   }
+  /**
+   * Show warning when editing is disabled
+   *
+   * @returns node with warning message
+   */
+  _getEditDisabledWarning() {
+    return (h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen && !this._confirmDelete, placement: "top" }, h("div", { slot: "title" }, this._translations.deleteDisabled), h("div", { slot: "message" }, this._translations.enableEditing)));
+  }
+  /**
+   * Show delete confirmation message
+   *
+   * @returns node to confirm or deny the delete operation
+   */
+  _deleteMessage() {
+    return (h("calcite-modal", { "aria-labelledby": "modal-title", kind: "danger", open: this._confirmDelete }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, h("calcite-icon", { "aria-hidden": "true", class: "padding-end-1 danger-color", icon: "exclamation-mark-triangle", scale: "m" }), this._translations.deleteFeature), h("div", { slot: "content" }, this._translations.confirm), h("calcite-button", { appearance: "outline", kind: "danger", onClick: () => this._alertClosed(), slot: "secondary", width: "full" }, this._translations.cancel), h("calcite-button", { kind: "danger", loading: this._isDeleting, onClick: () => void this._deleteFeatures(), slot: "primary", width: "full" }, this._translations.delete)));
+  }
+  /**
+   * Delete the currently selected features
+   *
+   * @returns void
+   */
+  async _deleteFeatures() {
+    this._isDeleting = true;
+    const deleteFeatures = this._table.highlightIds.toArray().map((objectId) => {
+      return { objectId };
+    });
+    await this._layer.applyEdits({
+      deleteFeatures
+    });
+    await this._table.refresh();
+    this._allIds = await queryAllIds(this._layer);
+    this._isDeleting = false;
+    this._alertClosed();
+  }
   /**
    * Handle map click events to keep table and map click selection in sync
    *
@@ -313,6 +360,7 @@ export class LayerTable {
    */
   _alertClosed() {
     this._alertOpen = false;
+    this._confirmDelete = false;
   }
   /**
    * Select or deselect all rows
@@ -382,11 +430,13 @@ export class LayerTable {
     const exportInfos = {};
     const ids = this._table.highlightIds.toArray();
     exportInfos[this._layer.id] = {
-      selectionSetNames: [],
+      selectionSetNames: [this._layer.title],
       ids,
       layer: this._layer
     };
-    void downloadUtils.downloadCSV(exportInfos, false, // formatUsingLayerPopup
+    void downloadUtils.downloadCSV(null, //???
+    exportInfos, false, // formatUsingLayerPopup
+    false, // removeDuplicates
     true);
   }
   /**
@@ -412,25 +462,7 @@ export class LayerTable {
    */
   _delete() {
     if (this._editEnabled) {
-      this._alertIcon = "trash";
-      this._alertTitle = this._translations.deleteRows;
-      this._alertActionText = this._translations.delete;
-      this._alertShowAction = true;
-      this._alertMessage = this._translations.confirm;
-      this._alertKind = "danger";
-      this._alertActionFunction = () => {
-        void this._layer.applyEdits({
-          deleteFeatures: this._table.highlightIds.toArray()
-        });
-        this._alertOpen = false;
-      };
-    }
-    else {
-      this._alertIcon = "layer-broken";
-      this._alertTitle = this._translations.deleteDisabled;
-      this._alertShowAction = false;
-      this._alertMessage = this._translations.enableEditing;
-      this._alertKind = "warning";
+      this._confirmDelete = true;
     }
     this._alertOpen = true;
   }
@@ -516,6 +548,40 @@ export class LayerTable {
   }
   static get properties() {
     return {
+      "enableAutoRefresh": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the layer table will auto refresh the data"
+        },
+        "attribute": "enable-auto-refresh",
+        "reflect": false
+      },
+      "enableInlineEdit": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true edits can be applied directly within the table"
+        },
+        "attribute": "enable-inline-edit",
+        "reflect": false
+      },
       "mapInfo": {
         "type": "unknown",
         "mutable": false,
@@ -597,6 +663,7 @@ export class LayerTable {
     return {
       "_alertOpen": {},
       "_fetchingData": {},
+      "_isDeleting": {},
       "_layer": {},
       "_selectedIndexes": {},
       "_showOnlySelected": {},

package/dist/collection/components/map-card/map-card.css

@@ -23,3 +23,7 @@
 .map-height {
   height: calc(100% - 58px);
 }
+
+.box-shadow {
+  box-shadow: none !important;
+}

package/dist/collection/components/map-card/map-card.js

@@ -58,7 +58,7 @@ export class MapCard {
    * Renders the component.
    */
   render() {
-    return (h(Host, null, h("map-picker", { mapInfos: this.mapInfos }), h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), h("map-tools", { mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
+    return (h(Host, null, h("map-picker", { mapInfos: this.mapInfos }), h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), h("map-tools", { class: "box-shadow", mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
   }
   //--------------------------------------------------------------------------
   //