@esri/solutions-components 0.6.33 → 0.6.35

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

@@ -21,6 +21,7 @@
 import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 import { getLocaleComponentStrings } from "../../utils/locale";
+import { getAllLayers } from "../../utils/mapViewUtils";
 export class EditCard {
   constructor() {
     /**
@@ -51,7 +52,7 @@ export class EditCard {
     var _a;
     if (v && ((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.graphicIndex > -1) {
       this._editorLoading = true;
-      this._initEditorWidget();
+      await this._initEditorWidget();
       if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
         await this._startUpdate();
       }
@@ -133,19 +134,24 @@ export class EditCard {
    *
    * @returns void
    */
-  _initEditorWidget() {
+  async _initEditorWidget() {
     if (this.mapView && this.graphics && this.graphics.length > 0 && this.graphics[0]) {
       if (this._editor) {
         this._editor.destroy();
       }
       const container = document.createElement("div");
+      const layers = await getAllLayers(this.mapView);
+      const layerInfos = layers.map(layer => {
+        return {
+          layer,
+          geometryUpdatesEnabled: false,
+          addEnabled: false
+        };
+      });
       this._editor = new this.Editor({
         allowedWorkflows: "update",
         view: this.mapView,
-        layerInfos: [{
-            layer: this._layer,
-            geometryUpdatesEnabled: false
-          }],
+        layerInfos,
         visibleElements: {
           snappingControls: false,
           sketchTooltipControls: false
@@ -156,6 +162,7 @@ export class EditCard {
         this._editHandle.remove();
         this._attachmentHandle.remove();
         this._activeWorkflowHandle.remove();
+        this._addRelatedRecordHandle.remove();
       }
       this._attachmentHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "adding-attachment" ||
         this._editor.viewModel.state === "editing-attachment" ||
@@ -175,6 +182,12 @@ export class EditCard {
           this._shouldClose = false;
         }
       });
+      // Temp workaround until a new prop is added at 4.29
+      this._addRelatedRecordHandle = this.reactiveUtils.when(() => !!this._editor.viewModel.featureFormViewModel.relatedRecordCallbacks, () => {
+        this._editor.viewModel.featureFormViewModel.relatedRecordCallbacks.addRelatedRecord = null;
+      }, {
+        once: true
+      });
       // had issues with destroy before adding like this
       this._editContainer.appendChild(container);
     }

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

@@ -48,6 +48,7 @@ export class LayerTable {
     this.enableAutoRefresh = undefined;
     this.enableCSV = undefined;
     this.enableInlineEdit = undefined;
+    this.enableZoom = undefined;
     this.mapInfo = undefined;
     this.mapView = undefined;
     this.onlyShowUpdatableLayers = undefined;
@@ -68,6 +69,32 @@ export class LayerTable {
   //  Watch handlers
   //
   //--------------------------------------------------------------------------
+  /**
+   * Reset the toolInfos when zoom tool is enabled/disabled
+   */
+  enableZoomWatchHandler() {
+    var _a;
+    if (((_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this._initToolInfos();
+    }
+  }
+  /**
+   * Reset the toolInfos when export csv is enabled/disabled
+   */
+  enableCSVWatchHandler() {
+    var _a;
+    if (((_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+      this._initToolInfos();
+    }
+  }
+  /**
+   * Update the table when enableInlineEdit is enabled/disabled
+   */
+  enableInlineEditWatchHandler() {
+    if (this._table) {
+      this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
+    }
+  }
   /**
    * watch for changes to the list of controls that will currently fit in the display
    */
@@ -271,7 +298,7 @@ export class LayerTable {
    * @returns void
    */
   _validateEnabledActions() {
-    const featuresSelected = this._selectedIndexes.length > 0;
+    const featuresSelected = this._featuresSelected();
     const selectionDependant = [
       "zoom-to-object",
       "trash",
@@ -293,14 +320,16 @@ export class LayerTable {
    */
   _initToolInfos() {
     var _a;
-    const featuresSelected = this._selectedIndexes.length > 0;
-    this._toolInfos = [{
+    const featuresSelected = this._featuresSelected();
+    const featuresEmpty = this._featuresEmpty();
+    this._toolInfos = [this.enableZoom ? {
         icon: "zoom-to-object",
         label: this._translations.zoom,
         func: () => this._zoom(),
         disabled: !featuresSelected,
         isOverflow: false
-      }, ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? {
+      } : undefined,
+      ((_a = this.mapInfo) === null || _a === void 0 ? void 0 : _a.filters) ? {
         icon: "filter",
         label: this._translations.filters,
         func: () => this._filter(),
@@ -330,13 +359,13 @@ export class LayerTable {
         icon: "list-check-all",
         func: () => this._selectAll(),
         label: this._translations.selectAll,
-        disabled: false,
+        disabled: featuresEmpty,
         isOverflow: false
       }, {
         icon: "compare",
         func: () => this._switchSelected(),
         label: this._translations.switchSelected,
-        disabled: false,
+        disabled: featuresEmpty,
         isOverflow: false
       }, {
         icon: "refresh",
@@ -349,11 +378,27 @@ export class LayerTable {
         icon: "export",
         func: () => void this._exportToCSV(),
         label: this._translations.exportCSV,
-        disabled: false,
+        disabled: featuresEmpty,
         isOverflow: false
       } : undefined];
     this._defaultVisibleToolSizeInfos = undefined;
   }
+  /**
+   * Returns true when one ore more features are selected
+   *
+   * @returns boolean
+   */
+  _featuresSelected() {
+    return this._selectedIndexes.length > 0;
+  }
+  /**
+   * Return true when we have no features
+   *
+   * @returns boolean
+   */
+  _featuresEmpty() {
+    return this._allIds.length === 0;
+  }
   /**
    * Add/Remove tools from the action bar and dropdown based on available size
    *
@@ -582,7 +627,7 @@ export class LayerTable {
           // https://github.com/Esri/solutions-components/issues/365
           this._selectedIndexes = this._table.highlightIds.toArray().reverse();
           if (this._showOnlySelected) {
-            if (this._selectedIndexes.length > 0) {
+            if (this._featuresSelected()) {
               this._table.filterBySelection();
             }
             else {
@@ -832,7 +877,7 @@ export class LayerTable {
   async _layerSelectionChanged(evt) {
     var _a;
     const id = evt.detail[0];
-    if (id !== ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id) || this._allIds.length === 0) {
+    if (id !== ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id) || this._featuresEmpty()) {
       this._fetchingData = true;
       const layer = await getLayerOrTable(this.mapView, id);
       await layer.when(() => {
@@ -951,6 +996,23 @@ export class LayerTable {
         "attribute": "enable-inline-edit",
         "reflect": false
       },
+      "enableZoom": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "boolean: when true the zoom button will be enabled"
+        },
+        "attribute": "enable-zoom",
+        "reflect": false
+      },
       "mapInfo": {
         "type": "unknown",
         "mutable": false,
@@ -1094,6 +1156,15 @@ export class LayerTable {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
+        "propName": "enableZoom",
+        "methodName": "enableZoomWatchHandler"
+      }, {
+        "propName": "enableCSV",
+        "methodName": "enableCSVWatchHandler"
+      }, {
+        "propName": "enableInlineEdit",
+        "methodName": "enableInlineEditWatchHandler"
+      }, {
         "propName": "_controlsThatFit",
         "methodName": "_controlsThatFitWatchHandler"
       }, {

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

@@ -32,6 +32,7 @@ export class MapCard {
      * string: the id of map currently displayed
      */
     this._loadedId = "";
+    this.enableHome = undefined;
     this.enableLegend = undefined;
     this.enableFloorFilter = undefined;
     this.enableFullscreen = undefined;
@@ -44,6 +45,17 @@ export class MapCard {
     this._searchConfiguration = undefined;
     this._webMapInfo = undefined;
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Add/remove home widget
+   */
+  enableHomeWatchHandler() {
+    this._initHome();
+  }
   /**
    * Listen for changes to map info and load the appropriate map
    */
@@ -118,10 +130,7 @@ export class MapCard {
       this._searchConfiguration = this._webMapInfo.searchConfiguration;
       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._initHome();
         this.mapView.ui.add(this._mapTools, { position: "top-right", index: 0 });
         this.mapChanged.emit({
           id: id,
@@ -130,6 +139,22 @@ export class MapCard {
       });
     }
   }
+  /**
+   * Add/remove the home widget base on enableHome prop
+   *
+   * @protected
+   */
+  _initHome() {
+    if (this.enableHome) {
+      this._homeWidget = new this.Home({
+        view: this.mapView
+      });
+      this.mapView.ui.add(this._homeWidget, { position: "top-left", index: 3 });
+    }
+    else if (this._homeWidget) {
+      this.mapView.ui.remove(this._homeWidget);
+    }
+  }
   static get is() { return "map-card"; }
   static get originalStyleUrls() {
     return {
@@ -143,6 +168,23 @@ export class MapCard {
   }
   static get properties() {
     return {
+      "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
+      },
       "enableLegend": {
         "type": "boolean",
         "mutable": false,
@@ -356,6 +398,12 @@ export class MapCard {
       }];
   }
   static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "enableHome",
+        "methodName": "enableHomeWatchHandler"
+      }];
+  }
   static get listeners() {
     return [{
         "name": "mapInfoChange",

package/dist/collection/demos/crowdsource-manager.html

@@ -28,10 +28,9 @@
       }
     </style>
 
-    <link
-      rel="stylesheet"
-      href="https://jsdev.arcgis.com/4.28/esri/themes/light/main.css"
-    />
+    <link rel="stylesheet" href="https://jsdev.arcgis.com/4.28/esri/themes/light/main.css" />
+    <!-- <link rel="stylesheet" href="https://jsdev.arcgis.com/4.28/esri/themes/dark/main.css" /> -->
+
     <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
     <link rel="stylesheet" href="../solutions-components.css" type="text/css">
 
@@ -132,7 +131,9 @@
     </script>
   </head>
 
+  <!-- <body class="calcite-mode-dark" onload="addValues()"> -->
   <body onload="addValues()">
     <crowdsource-manager id="demo" class="crowdsource"/>
+    <!-- <crowdsource-manager id="demo" class="crowdsource" theme="dark"/> -->
   </body>
 </html>

package/dist/collection/utils/mapViewUtils.js

@@ -130,6 +130,23 @@ export async function getLayerOrTable(mapView, id) {
   });
   return layers.length > 0 ? layers[0] : undefined;
 }
+/**
+ * Gets all of the layers from the current map when the map and their layerView is ready
+ *
+ * @param mapView the map view to fetch the layer names from
+ *
+ * @returns Promise resolving with an array of all layers
+ *
+ */
+export async function getAllLayers(mapView) {
+  const layers = mapView.map.allLayers.toArray();
+  let layerViewPromises;
+  await mapView.when(() => {
+    layerViewPromises = layers.map(l => mapView.whenLayerView(l));
+  });
+  await Promise.allSettled(layerViewPromises);
+  return layers;
+}
 /**
  * Highlight features by OID
  *

package/dist/collection/utils/mapViewUtils.ts

@@ -155,6 +155,26 @@ export async function getLayerOrTable(
   return layers.length > 0 ? layers[0] : undefined;
 }
 
+/**
+ * Gets all of the layers from the current map when the map and their layerView is ready
+ *
+ * @param mapView the map view to fetch the layer names from
+ *
+ * @returns Promise resolving with an array of all layers
+ *
+ */
+export async function getAllLayers(
+  mapView: __esri.MapView
+): Promise<__esri.Layer[]> {
+  const layers = mapView.map.allLayers.toArray();
+  let layerViewPromises;
+  await mapView.when(() => {
+    layerViewPromises = layers.map(l => mapView.whenLayerView(l));
+  });
+  await Promise.allSettled(layerViewPromises);
+  return layers;
+}
+
 /**
  * Highlight features by OID
  *

package/dist/components/crowdsource-manager.js

@@ -62,7 +62,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      */
     this._shouldSetMapView = false;
     this.classicGrid = false;
-    this.enableAutoRefresh = true;
+    this.enableAutoRefresh = false;
     this.enableCSV = true;
     this.enableFloorFilter = true;
     this.enableFullscreen = true;
@@ -91,6 +91,12 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
   //  Watch handlers
   //
   //--------------------------------------------------------------------------
+  /**
+   * When true the map zoom tools will be available
+   */
+  enableZoomWatchHandler() {
+    this._initMapZoom();
+  }
   //--------------------------------------------------------------------------
   //
   //  Methods (public)
@@ -283,7 +289,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     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" : "adjusted-height-50";
-    return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, hidden: this._expandPopup, mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false) })));
+    return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, hidden: this._expandPopup, mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false) })));
   }
   /**
    * Get the expand node for the popup information
@@ -339,7 +345,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     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-sides", 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, enableCSV: this.enableCSV, 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 }))));
+    return (h("calcite-shell", { class: tableSizeClass + " border-bottom" }, h("calcite-action-bar", { class: "border-sides", 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, enableCSV: this.enableCSV, enableInlineEdit: this.enableInlineEdit, enableZoom: this.enableZoom, 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.
@@ -375,8 +381,26 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
   _setMapView() {
     this._mapInfo = this._getMapInfo(this._mapChange.id);
     this._mapView = this._mapChange.mapView;
+    this._initMapZoom();
     this._mapView.popupEnabled = false;
   }
+  /**
+   * Add/remove zoom tools based on enableZoom prop
+   *
+   * @protected
+   */
+  _initMapZoom() {
+    if (!this.enableZoom) {
+      this._mapView.ui.remove("zoom");
+    }
+    else if (this.enableZoom) {
+      this._mapView.ui.add({
+        component: "zoom",
+        position: "top-left",
+        index: 0
+      });
+    }
+  }
   /**
    * Fetches the component's translations
    *
@@ -388,6 +412,9 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     this._translations = messages[0];
   }
   get el() { return this; }
+  static get watchers() { return {
+    "enableZoom": ["enableZoomWatchHandler"]
+  }; }
   static get style() { return crowdsourceManagerCss; }
 }, [0, "crowdsource-manager", {
     "classicGrid": [4, "classic-grid"],
@@ -414,7 +441,9 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     "_layoutMode": [32],
     "_mapView": [32],
     "_panelOpen": [32]
-  }, [[8, "layoutChanged", "layoutChanged"], [8, "mapChanged", "mapChanged"], [8, "beforeMapChanged", "beforeMapChanged"]]]);
+  }, [[8, "layoutChanged", "layoutChanged"], [8, "mapChanged", "mapChanged"], [8, "beforeMapChanged", "beforeMapChanged"]], {
+    "enableZoom": ["enableZoomWatchHandler"]
+  }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/edit-card2.js

@@ -6,6 +6,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
 import { g as getLocaleComponentStrings } from './locale.js';
+import { a as getAllLayers } from './mapViewUtils.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './loader.js';
 import { d as defineCustomElement$1 } from './notice.js';
@@ -46,7 +47,7 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
     var _a;
     if (v && ((_a = this.graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.graphicIndex > -1) {
       this._editorLoading = true;
-      this._initEditorWidget();
+      await this._initEditorWidget();
       if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
         await this._startUpdate();
       }
@@ -128,19 +129,24 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
    *
    * @returns void
    */
-  _initEditorWidget() {
+  async _initEditorWidget() {
     if (this.mapView && this.graphics && this.graphics.length > 0 && this.graphics[0]) {
       if (this._editor) {
         this._editor.destroy();
       }
       const container = document.createElement("div");
+      const layers = await getAllLayers(this.mapView);
+      const layerInfos = layers.map(layer => {
+        return {
+          layer,
+          geometryUpdatesEnabled: false,
+          addEnabled: false
+        };
+      });
       this._editor = new this.Editor({
         allowedWorkflows: "update",
         view: this.mapView,
-        layerInfos: [{
-            layer: this._layer,
-            geometryUpdatesEnabled: false
-          }],
+        layerInfos,
         visibleElements: {
           snappingControls: false,
           sketchTooltipControls: false
@@ -151,6 +157,7 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
         this._editHandle.remove();
         this._attachmentHandle.remove();
         this._activeWorkflowHandle.remove();
+        this._addRelatedRecordHandle.remove();
       }
       this._attachmentHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "adding-attachment" ||
         this._editor.viewModel.state === "editing-attachment" ||
@@ -170,6 +177,12 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
           this._shouldClose = false;
         }
       });
+      // Temp workaround until a new prop is added at 4.29
+      this._addRelatedRecordHandle = this.reactiveUtils.when(() => !!this._editor.viewModel.featureFormViewModel.relatedRecordCallbacks, () => {
+        this._editor.viewModel.featureFormViewModel.relatedRecordCallbacks.addRelatedRecord = null;
+      }, {
+        once: true
+      });
       // had issues with destroy before adding like this
       this._editContainer.appendChild(container);
     }