@esri/solutions-components 0.6.12 → 0.6.14

package/dist/cjs/calcite-combobox_6.cjs.entry.js

@@ -24,9 +24,11 @@ const utils = require('./utils-852fe124.js');
 const debounce = require('./debounce-30afab47.js');
 const conditionalSlot = require('./conditionalSlot-f10611d3.js');
 const key = require('./key-8de93212.js');
-const mapViewUtils = require('./mapViewUtils-a4dd36ec.js');
-const publicNotificationStore = require('./publicNotificationStore-b69862af.js');
+const locale$1 = require('./locale-67f5f6b6.js');
+const mapViewUtils = require('./mapViewUtils-a2884698.js');
+const publicNotificationStore = require('./publicNotificationStore-610bd880.js');
 require('./resources-993f6faf.js');
+require('./_commonjsHelpers-384729db.js');
 require('./interfaces-000be6de.js');
 require('./index-feeb7b6a.js');
 
@@ -1679,23 +1681,27 @@ const DropdownItem = class {
 };
 DropdownItem.style = dropdownItemCss;
 
-const mapLayerPickerCss = ":host{display:block}.map-layer-picker-container{width:100%}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}";
+const mapLayerPickerCss = ":host{display:block}.map-layer-picker-container{width:100%}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}";
 
 const MapLayerPicker = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.noLayersFound = index.createEvent(this, "noLayersFound", 7);
     this.layerSelectionChange = index.createEvent(this, "layerSelectionChange", 7);
     this.appearance = "transparent";
     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;
   }
   //--------------------------------------------------------------------------
   //
@@ -1708,10 +1714,13 @@ const MapLayerPicker = class {
    */
   async mapViewWatchHandler() {
     await this._setLayers();
-    const hasLayers = Object.keys(publicNotificationStore.state.layerNameHash).length > 0;
-    const hasTables = Object.keys(publicNotificationStore.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();
     }
   }
   //--------------------------------------------------------------------------
@@ -1723,6 +1732,7 @@ const MapLayerPicker = class {
    * 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]]);
@@ -1732,7 +1742,7 @@ const MapLayerPicker = class {
    * Renders the component.
    */
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "map-layer-picker-container" }, index.h("div", { class: "map-layer-picker" }, this.type === "combobox" ? this._getCombobox() :
+    return (index.h(index.Host, null, index.h("div", { class: "map-layer-picker-container" }, index.h("div", { class: "map-layer-picker" }, !this._hasValidLayers ? this._getInvalidPlaceholder() : this.type === "combobox" ? this._getCombobox() :
       this.type === "select" ? this._getSelect() : this._getDropdown()))));
   }
   /**
@@ -1745,9 +1755,9 @@ const MapLayerPicker = class {
         this._layerElement.value = id;
       }
       else if (this.type === "dropdown") {
-        this.selectedName = Object.keys(publicNotificationStore.state.layerNameHash).indexOf(id) > -1 ?
-          publicNotificationStore.state.layerNameHash[id] : Object.keys(publicNotificationStore.state.tableNameHash).indexOf(id) > -1 ?
-          publicNotificationStore.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 : "";
       }
     }
   }
@@ -1756,6 +1766,14 @@ const MapLayerPicker = class {
   //  Functions (protected)
   //
   //--------------------------------------------------------------------------
+  /**
+   * Create a notice to inform the user that no layers were found
+   *
+   * @returns Calcite Notice component with the message
+   */
+  _getInvalidPlaceholder() {
+    return (index.h("div", null, index.h("calcite-notice", { class: "height-100", icon: "exclamation-mark-triangle", id: "no-valid-layers", kind: "danger", open: true }, index.h("div", { slot: "message" }, this._translations.noLayersFound)), index.h("calcite-tooltip", { label: this._translations.enableEditUpdate, placement: "bottom", "reference-element": "no-valid-layers" }, index.h("span", null, this._translations.enableEditUpdate))));
+  }
   /**
    * Create a list of layers from the map
    *
@@ -1806,16 +1824,21 @@ const MapLayerPicker = class {
    * @returns A dom node with the name of the layer or table
    */
   _getItem(id, itemType) {
-    const name = itemType === "layer" ? publicNotificationStore.state.layerNameHash[id] : publicNotificationStore.state.tableNameHash[id];
-    return this.type === "combobox" ? (index.h("calcite-combobox-item", { textLabel: name, value: id })) :
-      this.type === "select" ? (index.h("calcite-option", { label: name, value: id })) :
-        (index.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" ? (index.h("calcite-combobox-item", { disabled: disabled, textLabel: name, value: id })) :
+      this.type === "select" ? (index.h("calcite-option", { disabled: disabled, label: name, value: id })) :
+        (index.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" ? publicNotificationStore.state.layerNameHash[id] : publicNotificationStore.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);
   }
@@ -1826,25 +1849,38 @@ const MapLayerPicker = class {
    */
   async _setLayers() {
     if (this.mapView) {
-      const mapLayerIds = await mapViewUtils.getMapLayerIds(this.mapView);
-      const mapTableIds = this.showTables ? await mapViewUtils.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) {
-      publicNotificationStore.state.layerNameHash = await mapViewUtils.getMapLayerHash(this.mapView);
-      publicNotificationStore.state.tableNameHash = this.showTables ? await mapViewUtils.getMapTableHash(this.mapView) : {};
-    }
+  async _initLayerTableHash() {
+    this._layerNameHash = await mapViewUtils.getMapLayerHash(this.mapView, this.onlyShowUpdatableLayers);
+    this._tableNameHash = this.showTables ? await mapViewUtils.getMapTableHash(this.mapView, this.onlyShowUpdatableLayers) : {};
   }
   /**
    * Evaluate if the id exists in the current hash and verify if it should be excluded
@@ -1852,9 +1888,10 @@ const MapLayerPicker = class {
    * @returns boolean when true the layer will be used in the current layer picker type
    */
   _validLayer(id) {
-    const name = publicNotificationStore.state.layerNameHash[id];
+    var _a;
+    const name = (_a = this._layerNameHash[id]) === null || _a === void 0 ? void 0 : _a.name;
     return name && publicNotificationStore.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
@@ -1862,7 +1899,8 @@ const MapLayerPicker = class {
    * @returns boolean when true the table will be used in the current layer picker type
    */
   _validTable(id) {
-    const name = publicNotificationStore.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 ? publicNotificationStore.state.managedTables.indexOf(name) < 0 &&
       (this.enabledTableIds.length > 0 ? this.enabledTableIds.indexOf(id) > -1 : true) : validName;
@@ -1879,6 +1917,16 @@ const MapLayerPicker = class {
       this.layerSelectionChange.emit(this.selectedIds);
     }
   }
+  /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   * @protected
+   */
+  async _getTranslations() {
+    const messages = await locale$1.getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
+  }
   get el() { return index.getElement(this); }
   static get watchers() { return {
     "mapView": ["mapViewWatchHandler"]

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.