@esri/solutions-components 0.6.12 → 0.6.14

package/dist/collection/components/map-layer-picker/map-layer-picker.js

@@ -19,7 +19,8 @@
  * limitations under the License.
  */
 import { Host, h } from "@stencil/core";
-import { getMapLayerHash, getMapLayerIds, getMapTableHash, getMapTableIds } from "../../utils/mapViewUtils";
+import { getLocaleComponentStrings } from "../../utils/locale";
+import { getMapLayerHash, getMapTableHash } from "../../utils/mapViewUtils";
 import state from "../../utils/publicNotificationStore";
 export class MapLayerPicker {
   constructor() {
@@ -27,13 +28,16 @@ export class MapLayerPicker {
     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;
   }
   //--------------------------------------------------------------------------
   //
@@ -46,10 +50,13 @@ export class MapLayerPicker {
    */
   async mapViewWatchHandler() {
     await this._setLayers();
-    const hasLayers = Object.keys(state.layerNameHash).length > 0;
-    const hasTables = Object.keys(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();
     }
   }
   //--------------------------------------------------------------------------
@@ -61,6 +68,7 @@ export class MapLayerPicker {
    * 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]]);
@@ -70,7 +78,7 @@ export class MapLayerPicker {
    * Renders the component.
    */
   render() {
-    return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, this.type === "combobox" ? this._getCombobox() :
+    return (h(Host, null, h("div", { class: "map-layer-picker-container" }, h("div", { class: "map-layer-picker" }, !this._hasValidLayers ? this._getInvalidPlaceholder() : this.type === "combobox" ? this._getCombobox() :
       this.type === "select" ? this._getSelect() : this._getDropdown()))));
   }
   /**
@@ -83,9 +91,9 @@ export class MapLayerPicker {
         this._layerElement.value = id;
       }
       else if (this.type === "dropdown") {
-        this.selectedName = Object.keys(state.layerNameHash).indexOf(id) > -1 ?
-          state.layerNameHash[id] : Object.keys(state.tableNameHash).indexOf(id) > -1 ?
-          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 : "";
       }
     }
   }
@@ -94,6 +102,14 @@ export class MapLayerPicker {
   //  Functions (protected)
   //
   //--------------------------------------------------------------------------
+  /**
+   * Create a notice to inform the user that no layers were found
+   *
+   * @returns Calcite Notice component with the message
+   */
+  _getInvalidPlaceholder() {
+    return (h("div", null, h("calcite-notice", { class: "height-100", icon: "exclamation-mark-triangle", id: "no-valid-layers", kind: "danger", open: true }, h("div", { slot: "message" }, this._translations.noLayersFound)), h("calcite-tooltip", { label: this._translations.enableEditUpdate, placement: "bottom", "reference-element": "no-valid-layers" }, h("span", null, this._translations.enableEditUpdate))));
+  }
   /**
    * Create a list of layers from the map
    *
@@ -144,16 +160,21 @@ export class MapLayerPicker {
    * @returns A dom node with the name of the layer or table
    */
   _getItem(id, itemType) {
-    const name = itemType === "layer" ? state.layerNameHash[id] : state.tableNameHash[id];
-    return this.type === "combobox" ? (h("calcite-combobox-item", { textLabel: name, value: id })) :
-      this.type === "select" ? (h("calcite-option", { label: name, value: id })) :
-        (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" ? (h("calcite-combobox-item", { disabled: disabled, textLabel: name, value: id })) :
+      this.type === "select" ? (h("calcite-option", { disabled: disabled, label: name, value: id })) :
+        (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" ? state.layerNameHash[id] : 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);
   }
@@ -164,25 +185,38 @@ export class MapLayerPicker {
    */
   async _setLayers() {
     if (this.mapView) {
-      const mapLayerIds = await getMapLayerIds(this.mapView);
-      const mapTableIds = this.showTables ? await 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) {
-      state.layerNameHash = await getMapLayerHash(this.mapView);
-      state.tableNameHash = this.showTables ? await getMapTableHash(this.mapView) : {};
-    }
+  async _initLayerTableHash() {
+    this._layerNameHash = await getMapLayerHash(this.mapView, this.onlyShowUpdatableLayers);
+    this._tableNameHash = this.showTables ? await getMapTableHash(this.mapView, this.onlyShowUpdatableLayers) : {};
   }
   /**
    * Evaluate if the id exists in the current hash and verify if it should be excluded
@@ -190,9 +224,10 @@ export class MapLayerPicker {
    * @returns boolean when true the layer will be used in the current layer picker type
    */
   _validLayer(id) {
-    const name = state.layerNameHash[id];
+    var _a;
+    const name = (_a = this._layerNameHash[id]) === null || _a === void 0 ? void 0 : _a.name;
     return name && 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
@@ -200,7 +235,8 @@ export class MapLayerPicker {
    * @returns boolean when true the table will be used in the current layer picker type
    */
   _validTable(id) {
-    const name = 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 ? state.managedTables.indexOf(name) < 0 &&
       (this.enabledTableIds.length > 0 ? this.enabledTableIds.indexOf(id) > -1 : true) : validName;
@@ -217,6 +253,16 @@ export class MapLayerPicker {
       this.layerSelectionChange.emit(this.selectedIds);
     }
   }
+  /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   * @protected
+   */
+  async _getTranslations() {
+    const messages = await getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
+  }
   static get is() { return "map-layer-picker"; }
   static get originalStyleUrls() {
     return {
@@ -300,6 +346,23 @@ export class MapLayerPicker {
           "text": "esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
         }
       },
+      "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
+      },
       "placeholderIcon": {
         "type": "string",
         "mutable": false,
@@ -392,12 +455,29 @@ export class MapLayerPicker {
   }
   static get states() {
     return {
+      "_hasValidLayers": {},
       "ids": {},
-      "selectedName": {}
+      "selectedName": {},
+      "_translations": {}
     };
   }
   static get events() {
     return [{
+        "method": "noLayersFound",
+        "name": "noLayersFound",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted on demand when no valid layers are found"
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
         "method": "layerSelectionChange",
         "name": "layerSelectionChange",
         "bubbles": true,

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

@@ -48,7 +48,7 @@
   flex-direction: column;
   overflow: hidden;
   animation: calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;
-  background-color: var(--calcite-scrim-background);
+  background-color: var(--calcite-ui-background);
   z-index: 1000;
   width: 100%;
   height: -moz-fit-content;
@@ -62,3 +62,7 @@
 .action-bar-color {
   background-color: var(--calcite-ui-border-3) !important;
 }
+
+.align-center {
+  align-items: center;
+}

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

@@ -46,9 +46,9 @@ export class MapPicker {
   /**
    * Called each time the mapInfos prop is changed.
    */
-  mapInfosWatchHandler(v, oldV) {
+  async mapInfosWatchHandler(v, oldV) {
     if (v && JSON.stringify(v) !== JSON.stringify(oldV)) {
-      this.mapInfoChange.emit(v[0]);
+      this._webMapSelected(v[0]);
     }
   }
   //--------------------------------------------------------------------------
@@ -73,7 +73,7 @@ export class MapPicker {
   /**
    * Called once after the component has loaded
    */
-  componentDidLoad() {
+  async componentDidLoad() {
     const webMapInfo = this.mapInfos && this.mapInfos.length > 0 ? this.mapInfos[0] : undefined;
     if (webMapInfo) {
       this._webMapSelected(webMapInfo);

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

@@ -22,6 +22,11 @@ import { Host, h } from "@stencil/core";
 import { getLocaleComponentStrings } from "../../utils/locale";
 export class MapTools {
   constructor() {
+    this.enableLegend = undefined;
+    this.enableFullscreen = undefined;
+    this.enableSearch = undefined;
+    this.enableBasemap = undefined;
+    this.basemapConfig = undefined;
     this.layout = "vertical";
     this.mapView = undefined;
     this.searchConfiguration = undefined;
@@ -125,7 +130,16 @@ export class MapTools {
     const fullscreenIcon = this._showFullscreen ? "full-screen-exit" : "full-screen";
     const fullscreenTip = this._showFullscreen ? this._translations.exitFullscreen : this._translations.enterFullscreen;
     const expandTip = this._showTools ? this._translations.collapse : this._translations.expand;
-    return (h(Host, null, h("div", null, h("div", { class: "box-shadow" }, this._getActionGroup(toggleIcon, false, expandTip, () => this._toggleTools())), h("div", { class: `margin-top-1-2 box-shadow ${toolsClass}` }, this._getActionGroup("legend", false, this._translations.legend, () => this._showLegend()), this._getActionGroup("magnifying-glass", false, this._translations.search, () => this._search()), this._getActionGroup(fullscreenIcon, false, fullscreenTip, () => this._expand()), this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker()))), h("basemap-gallery", { class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, ref: (el) => { this._fullscreenElement = el; } })));
+    const containerClass = !this.enableBasemap && !this.enableFullscreen && !this.enableLegend && !this.enableSearch ? "display-none" : "";
+    return (h(Host, null, h("div", { class: containerClass }, h("div", { class: "box-shadow" }, this._getActionGroup(toggleIcon, false, expandTip, () => this._toggleTools())), h("div", { class: `margin-top-1-2 box-shadow ${toolsClass}` }, this.enableLegend ?
+      this._getActionGroup("legend", false, this._translations.legend, () => this._showLegend()) :
+      undefined, this.enableSearch ?
+      this._getActionGroup("magnifying-glass", false, this._translations.search, () => this._search()) :
+      undefined, this.enableFullscreen ?
+      this._getActionGroup(fullscreenIcon, false, fullscreenTip, () => this._expand()) :
+      undefined, this.enableBasemap ?
+      this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker()) :
+      undefined)), h("basemap-gallery", { basemapConfig: this.basemapConfig, class: basemapClass, mapView: this.mapView, ref: (el) => { this._basemapElement = el; } }), h("map-search", { class: searchClass, mapView: this.mapView, ref: (el) => { this._searchElement = el; }, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, ref: (el) => { this._fullscreenElement = el; } })));
   }
   //--------------------------------------------------------------------------
   //
@@ -217,6 +231,95 @@ export class MapTools {
   }
   static get properties() {
     return {
+      "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
+      },
+      "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
+      },
+      "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
+      },
+      "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
+      },
+      "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"
+        }
+      },
       "layout": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/pdf-download/pdf-download.js

@@ -43,27 +43,29 @@ export class PdfDownload {
   /**
    * Downloads csv of mailing labels for the provided list of ids
    *
+   * @param webmap Webmap containing layer
    * @param exportInfos Information about items to be exported
    * @param removeDuplicates When true a single label is generated when multiple featues have a shared address value
    * @param addColumnTitle Indicates if column headings should be included in output
    * @returns Promise resolving when function is done
    */
-  async downloadCSV(exportInfos, removeDuplicates, addColumnTitle = true) {
-    return downloadUtils.downloadCSV(exportInfos, true, // formatUsingLayerPopup
+  async downloadCSV(webmap, exportInfos, removeDuplicates, addColumnTitle = true) {
+    return downloadUtils.downloadCSV(webmap, exportInfos, true, // formatUsingLayerPopup
     removeDuplicates, addColumnTitle);
   }
   /**
    * Downloads pdf of mailing labels for the provided list of ids
    *
+   * @param webmap Webmap containing layer
    * @param exportInfos Information about items to be exported
    * @param removeDuplicates When true a single label is generated when multiple featues have a shared address value
    * @param title Title for each page
    * @param initialImageDataUrl Data URL of image for first page
    * @returns Promise resolving when function is done
    */
-  async downloadPDF(exportInfos, removeDuplicates = false, title = "", initialImageDataUrl = "") {
+  async downloadPDF(webmap, exportInfos, removeDuplicates = false, title = "", initialImageDataUrl = "") {
     var _c;
-    return downloadUtils.downloadPDF(exportInfos, (_c = this._labelInfoElement.selectedOption) === null || _c === void 0 ? void 0 : _c.value, removeDuplicates, title, initialImageDataUrl);
+    return downloadUtils.downloadPDF(webmap, exportInfos, (_c = this._labelInfoElement.selectedOption) === null || _c === void 0 ? void 0 : _c.value, removeDuplicates, title, initialImageDataUrl);
   }
   //--------------------------------------------------------------------------
   //
@@ -217,8 +219,14 @@ export class PdfDownload {
     return {
       "downloadCSV": {
         "complexType": {
-          "signature": "(exportInfos: IExportInfos, removeDuplicates: boolean, addColumnTitle?: boolean) => Promise<void>",
+          "signature": "(webmap: __esri.Map, exportInfos: IExportInfos, removeDuplicates: boolean, addColumnTitle?: boolean) => Promise<void>",
           "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "webmap Webmap containing layer"
+                }],
+              "text": "Webmap containing layer"
+            }, {
               "tags": [{
                   "name": "param",
                   "text": "exportInfos Information about items to be exported"
@@ -242,6 +250,10 @@ export class PdfDownload {
               "location": "global",
               "id": "global::Promise"
             },
+            "___esri": {
+              "location": "global",
+              "id": "global::___esri"
+            },
             "IExportInfos": {
               "location": "import",
               "path": "../../utils/interfaces",
@@ -253,6 +265,9 @@ export class PdfDownload {
         "docs": {
           "text": "Downloads csv of mailing labels for the provided list of ids",
           "tags": [{
+              "name": "param",
+              "text": "webmap Webmap containing layer"
+            }, {
               "name": "param",
               "text": "exportInfos Information about items to be exported"
             }, {
@@ -269,8 +284,14 @@ export class PdfDownload {
       },
       "downloadPDF": {
         "complexType": {
-          "signature": "(exportInfos: IExportInfos, removeDuplicates?: boolean, title?: string, initialImageDataUrl?: string) => Promise<void>",
+          "signature": "(webmap: __esri.Map, exportInfos: IExportInfos, removeDuplicates?: boolean, title?: string, initialImageDataUrl?: string) => Promise<void>",
           "parameters": [{
+              "tags": [{
+                  "name": "param",
+                  "text": "webmap Webmap containing layer"
+                }],
+              "text": "Webmap containing layer"
+            }, {
               "tags": [{
                   "name": "param",
                   "text": "exportInfos Information about items to be exported"
@@ -300,6 +321,10 @@ export class PdfDownload {
               "location": "global",
               "id": "global::Promise"
             },
+            "___esri": {
+              "location": "global",
+              "id": "global::___esri"
+            },
             "IExportInfos": {
               "location": "import",
               "path": "../../utils/interfaces",
@@ -315,6 +340,9 @@ export class PdfDownload {
         "docs": {
           "text": "Downloads pdf of mailing labels for the provided list of ids",
           "tags": [{
+              "name": "param",
+              "text": "webmap Webmap containing layer"
+            }, {
               "name": "param",
               "text": "exportInfos Information about items to be exported"
             }, {

package/dist/collection/components/public-notification/public-notification.js

@@ -422,7 +422,7 @@ export class PublicNotification {
    */
   async _getNumDuplicates() {
     const exportInfos = this._getExportInfos();
-    const labels = await consolidateLabels(exportInfos);
+    const labels = await consolidateLabels(this.mapView.map, exportInfos);
     const duplicatesRemoved = removeDuplicateLabels(labels);
     return labels.length - duplicatesRemoved.length;
   }
@@ -633,12 +633,12 @@ export class PublicNotification {
       }
       this._fetchingData = true;
       // Create the labels for each selection set
-      await this._downloadTools.downloadPDF(exportInfos, this._removeDuplicates.checked, this._addTitle ? this._titleElement.value : "", initialImageDataUrl);
+      await this._downloadTools.downloadPDF(this.mapView.map, exportInfos, this._removeDuplicates.checked, this._addTitle ? this._titleElement.value : "", initialImageDataUrl);
       this._fetchingData = false;
     }
     if (this._exportType === EExportType.CSV) {
       this._fetchingData = true;
-      await this._downloadTools.downloadCSV(exportInfos, this._removeDuplicates.checked);
+      await this._downloadTools.downloadCSV(this.mapView.map, exportInfos, this._removeDuplicates.checked);
       this._fetchingData = false;
     }
   }