@esri/solutions-components 0.6.12 → 0.6.13

package/dist/assets/t9n/layer-table/resources.json

@@ -12,10 +12,11 @@
   "fetchingData": "Fetching Data",
   "refresh": "Refresh",
   "enableEditing": "Editing must be enabled on the layer.",
-  "confirm": "Are you sure?",
-  "deleteRows": "Delete Data",
+  "confirm": "These features will be permanently removed.",
+  "deleteFeature": "Delete feature",
   "deleteDisabled": "Delete Disabled",
   "editMultipleDisabled": "Edit Multiple Disabled",
   "showAll": "Show all",
-  "recordsSelected": "{{total}} records, {{selected}} selected"
+  "recordsSelected": "{{total}} records, {{selected}} selected",
+  "cancel": "Cancel"
 }

package/dist/assets/t9n/layer-table/resources_en.json

@@ -12,10 +12,11 @@
   "fetchingData": "Fetching Data",
   "refresh": "Refresh",
   "enableEditing": "Editing must be enabled on the layer.",
-  "confirm": "Are you sure?",
-  "deleteRows": "Delete Data",
+  "confirm": "These features will be permanently removed.",
+  "deleteFeature": "Delete feature",
   "deleteDisabled": "Delete Disabled",
   "editMultipleDisabled": "Edit Multiple Disabled",
   "showAll": "Show all",
-  "recordsSelected": "{{total}} records, {{selected}} selected"
+  "recordsSelected": "{{total}} records, {{selected}} selected",
+  "cancel": "Cancel"
 }

package/dist/cjs/calcite-shell-panel_14.cjs.entry.js

@@ -23,7 +23,7 @@ const sortableComponent = require('./sortableComponent-70bf79de.js');
 const resources$2 = require('./resources-030a27ed.js');
 const resources$1 = require('./resources-8f4e8ba8.js');
 const locale$1 = require('./locale-67f5f6b6.js');
-const solutionStore = require('./solution-store-3cd104d8.js');
+const solutionStore = require('./solution-store-c443e657.js');
 const interfaces = require('./interfaces-000be6de.js');
 require('./key-8de93212.js');
 require('./array-2db3fd4a.js');
@@ -31,6 +31,7 @@ require('./resources-2b51cf4c.js');
 require('./debounce-30afab47.js');
 require('./_commonjsHelpers-384729db.js');
 require('./index-feeb7b6a.js');
+require('./clean-url-d5326abb.js');
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.

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

@@ -11,11 +11,12 @@ const index = require('./index-ee37804b.js');
 const locale = require('./locale-67f5f6b6.js');
 const mapViewUtils = require('./mapViewUtils-a4dd36ec.js');
 const loadModules = require('./loadModules-f6df8d6a.js');
-const downloadUtils = require('./downloadUtils-43f5be48.js');
+const downloadUtils = require('./downloadUtils-fb4744e0.js');
 require('./_commonjsHelpers-384729db.js');
 require('./interfaces-000be6de.js');
+require('./clean-url-d5326abb.js');
 
-const cardManagerCss = ":host{display:block !important}.display-flex{display:flex}.display-none{display:none}.w-100{width:100%}.padding-bottom-1{padding-bottom:1rem}.padding-1{padding:1rem}.position-relative{position:relative}.focus-margin{margin:1px 1px 0px 1px}.overflow-auto{overflow:auto}.border-rounded{border:1px solid var(--calcite-ui-border-2);border-radius:5px}.height-full{height:100%}card-manager{display:block}";
+const cardManagerCss = ":host{display:block !important}.display-flex{display:flex}.display-none{display:none}.w-100{width:100%}.padding-bottom-1{padding-bottom:1rem}.padding-1{padding:1rem}.position-relative{position:relative}.focus-margin{margin:1px 1px 0px 1px}.overflow-auto{overflow:auto}.height-full{height:100%}card-manager{display:block}";
 
 const CardManager = class {
   constructor(hostRef) {
@@ -80,7 +81,7 @@ const CardManager = class {
     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 (index.h(index.Host, null, index.h("div", { class: "border-rounded overflow-auto height-full" }, index.h("calcite-shell", { class: "position-relative " + featuresClass }, index.h("div", null, index.h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), index.h("div", { class: "padding-1 " + messageClass }, index.h("calcite-notice", { icon: "table", open: true }, index.h("div", { slot: "message" }, this._translations.selectFeaturesToStart))))));
+    return (index.h(index.Host, null, index.h("div", { class: "overflow-auto height-full" }, index.h("calcite-shell", { class: "position-relative " + featuresClass }, index.h("div", null, index.h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), index.h("div", { class: "padding-1 " + messageClass }, index.h("calcite-notice", { icon: "table", open: true }, index.h("div", { slot: "message" }, this._translations.selectFeaturesToStart))))));
   }
   //--------------------------------------------------------------------------
   //
@@ -101,7 +102,7 @@ const CardManager = class {
 };
 CardManager.style = cardManagerCss;
 
-const layerTableCss = ":host{display:block}.height-full{height:100%}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.border-end{border-inline-end:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.height-51{height:51px}.bottom-left{position:absolute;left:0;bottom:0}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0}.background{background-color:var(--calcite-ui-background)}.text-color{color:var(--calcite-ui-text-1)}";
+const layerTableCss = ":host{display:block}.height-full{height:100%}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.border-end{border-inline-end:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.bottom-left{position:absolute;left:0;bottom:0}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0}.background{background-color:var(--calcite-ui-background)}.text-color{color:var(--calcite-ui-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-ui-danger)}";
 
 const LayerTable = class {
   constructor(hostRef) {
@@ -126,12 +127,15 @@ const LayerTable = class {
     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;
@@ -233,12 +237,11 @@ const LayerTable = class {
     }
     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 (index.h(index.Host, null, index.h("calcite-shell", null, this._getTableControlRow("header"), index.h("div", { class: "height-full width-full" }, index.h("calcite-panel", { class: "height-full width-full" }, index.h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), index.h("div", { class: tableNodeClass, ref: this.onTableNodeCreate })), index.h("div", { class: "bottom-left background text-color" }, this._translations.recordsSelected
       .replace("{{total}}", total)
-      .replace("{{selected}}", selected))), index.h("calcite-alert", { icon: this._alertIcon, kind: this._alertKind, label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, index.h("div", { slot: "title" }, this._alertTitle), index.h("div", { slot: "message" }, this._alertMessage), index.h("calcite-link", { class: alertActionClass, onClick: this._alertActionFunction, slot: "link" }, this._alertActionText)))));
+      .replace("{{selected}}", selected))), this._getEditDisabledWarning()), this._deleteMessage()));
   }
   //--------------------------------------------------------------------------
   //
@@ -283,9 +286,10 @@ const LayerTable = class {
     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: {
@@ -297,6 +301,7 @@ const LayerTable = class {
           },
           container: node
         });
+        this._checkEditEnabled();
         await this._table.when(async () => {
           this._table.highlightIds.on("change", () => {
             this._selectedIndexes = this._table.highlightIds.toArray();
@@ -332,7 +337,7 @@ const LayerTable = class {
       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();
@@ -341,6 +346,15 @@ const LayerTable = class {
       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
    *
@@ -359,6 +373,40 @@ const LayerTable = class {
       }
     }
   }
+  /**
+   * Show warning when editing is disabled
+   *
+   * @returns node with warning message
+   */
+  _getEditDisabledWarning() {
+    return (index.h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen && !this._confirmDelete, placement: "top" }, index.h("div", { slot: "title" }, this._translations.deleteDisabled), index.h("div", { slot: "message" }, this._translations.enableEditing)));
+  }
+  /**
+   * Show delete confirmation message
+   *
+   * @returns node to confirm or deny the delete operation
+   */
+  _deleteMessage() {
+    return (index.h("calcite-modal", { "aria-labelledby": "modal-title", kind: "danger", open: this._confirmDelete }, index.h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, index.h("calcite-icon", { "aria-hidden": "true", class: "padding-end-1 danger-color", icon: "exclamation-mark-triangle", scale: "m" }), this._translations.deleteFeature), index.h("div", { slot: "content" }, this._translations.confirm), index.h("calcite-button", { appearance: "outline", kind: "danger", onClick: () => this._alertClosed(), slot: "secondary", width: "full" }, this._translations.cancel), index.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 mapViewUtils.queryAllIds(this._layer);
+    this._isDeleting = false;
+    this._alertClosed();
+  }
   /**
    * Handle map click events to keep table and map click selection in sync
    *
@@ -394,6 +442,7 @@ const LayerTable = class {
    */
   _alertClosed() {
     this._alertOpen = false;
+    this._confirmDelete = false;
   }
   /**
    * Select or deselect all rows
@@ -467,7 +516,8 @@ const LayerTable = class {
       ids,
       layer: this._layer
     };
-    void downloadUtils.downloadCSV(exportInfos, false, // formatUsingLayerPopup
+    void downloadUtils.downloadCSV(null, //???
+    exportInfos, false, // formatUsingLayerPopup
     false, // removeDuplicates
     true);
   }
@@ -494,25 +544,7 @@ const LayerTable = class {
    */
   _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;
   }