@esri/solutions-components 0.6.12 → 0.6.14

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

@@ -29,9 +29,19 @@ export class CrowdsourceManager {
      */
     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;
@@ -66,13 +76,18 @@ export class CrowdsourceManager {
    */
   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();
-    }
   }
   //--------------------------------------------------------------------------
   //
@@ -231,7 +246,7 @@ export class CrowdsourceManager {
     const mapDisplayClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "display-flex height-full width-1-2" :
       layoutMode === ELayoutMode.GRID && !hideMap ? "" : "display-none";
     const mapContainerClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "width-full" : this._expandPopup ? "height-50-px" : "adjusted-height-50";
-    return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { class: "width-full", mapInfos: this.mapInfos })));
+    return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, 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
@@ -265,7 +280,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
@@ -285,7 +300,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, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
   }
   /**
    * Open/Close the appropriate panel.
@@ -364,6 +379,171 @@ 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"
+      },
+      "enableFullscreen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the fullscreen widget will be available"
+        },
+        "attribute": "enable-fullscreen",
+        "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"
+      },
+      "enableLegend": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the legend widget will be available"
+        },
+        "attribute": "enable-legend",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "enableSearch": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the search widget will be available"
+        },
+        "attribute": "enable-search",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "enableHome": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the home widget will be available"
+        },
+        "attribute": "enable-home",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "enableZoom": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the zoom widget will be available"
+        },
+        "attribute": "enable-zoom",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "enableBasemap": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the basemap widget will be available"
+        },
+        "attribute": "enable-basemap",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "basemapConfig": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "IBasemapConfig",
+          "resolved": "IBasemapConfig",
+          "references": {
+            "IBasemapConfig": {
+              "location": "import",
+              "path": "../../utils/interfaces",
+              "id": "src/utils/interfaces.ts::IBasemapConfig"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "IBasemapConfig: List of any basemaps to filter out from the basemap widget"
+        }
+      },
       "showNewestFirst": {
         "type": "boolean",
         "mutable": false,
@@ -422,6 +602,24 @@ export class CrowdsourceManager {
         },
         "defaultValue": "[]"
       },
+      "onlyShowUpdatableLayers": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: When true only editable layers that support the update capability will be available"
+        },
+        "attribute": "only-show-updatable-layers",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "searchConfiguration": {
         "type": "unknown",
         "mutable": false,
@@ -486,6 +684,12 @@ export class CrowdsourceManager {
         "target": "window",
         "capture": false,
         "passive": false
+      }, {
+        "name": "beforeMapChanged",
+        "method": "beforeMapChanged",
+        "target": "window",
+        "capture": false,
+        "passive": 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/edit-card/edit-card.js

@@ -85,6 +85,10 @@ export class EditCard {
     }
     if (((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((_b = this.graphics[0]) === null || _b === void 0 ? void 0 : _b.layer)) {
       this._layer = this.graphics[0].layer;
+      if (this._layerEditHandle) {
+        this._layerEditHandle.remove();
+      }
+      this._layerEditHandle = this._layer.on("edits", () => this.editsComplete.emit());
     }
   }
   /**
@@ -284,6 +288,21 @@ export class EditCard {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "editsComplete",
+        "name": "editsComplete",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted on demand when edits are completed on current edit layer"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }];
   }
   static get elementRef() { return "el"; }

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

@@ -107,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)))));
   }
   //--------------------------------------------------------------------------
   //

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);
+}