@esri/solutions-components 0.6.13 → 0.6.15

package/dist/components/layer-table2.js

@@ -6,24 +6,25 @@
 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 getMapLayerIds, g as getLayer, b as goToSelection } from './mapViewUtils.js';
+import { a as goToSelection, g as getLayerOrTable } from './mapViewUtils.js';
 import { b as queryAllIds, q as queryFeaturesByID } from './queryUtils.js';
 import { d as downloadCSV } from './downloadUtils.js';
-import { d as defineCustomElement$n } from './action.js';
-import { d as defineCustomElement$m } from './action-bar.js';
-import { d as defineCustomElement$l } from './action-group.js';
-import { d as defineCustomElement$k } from './action-menu.js';
-import { d as defineCustomElement$j } from './alert.js';
-import { d as defineCustomElement$i } from './button.js';
-import { d as defineCustomElement$h } from './chip.js';
-import { d as defineCustomElement$g } from './combobox.js';
-import { d as defineCustomElement$f } from './combobox-item.js';
-import { d as defineCustomElement$e } from './dropdown.js';
-import { d as defineCustomElement$d } from './dropdown-group.js';
-import { d as defineCustomElement$c } from './dropdown-item.js';
-import { d as defineCustomElement$b } from './icon.js';
-import { d as defineCustomElement$a } from './loader.js';
-import { d as defineCustomElement$9 } from './modal.js';
+import { d as defineCustomElement$o } from './action.js';
+import { d as defineCustomElement$n } from './action-bar.js';
+import { d as defineCustomElement$m } from './action-group.js';
+import { d as defineCustomElement$l } from './action-menu.js';
+import { d as defineCustomElement$k } from './alert.js';
+import { d as defineCustomElement$j } from './button.js';
+import { d as defineCustomElement$i } from './chip.js';
+import { d as defineCustomElement$h } from './combobox.js';
+import { d as defineCustomElement$g } from './combobox-item.js';
+import { d as defineCustomElement$f } from './dropdown.js';
+import { d as defineCustomElement$e } from './dropdown-group.js';
+import { d as defineCustomElement$d } from './dropdown-item.js';
+import { d as defineCustomElement$c } from './icon.js';
+import { d as defineCustomElement$b } from './loader.js';
+import { d as defineCustomElement$a } from './modal.js';
+import { d as defineCustomElement$9 } from './notice.js';
 import { d as defineCustomElement$8 } from './option.js';
 import { d as defineCustomElement$7 } from './panel.js';
 import { d as defineCustomElement$6 } from './popover.js';
@@ -63,6 +64,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     this.enableInlineEdit = undefined;
     this.mapInfo = undefined;
     this.mapView = undefined;
+    this.onlyShowUpdatableLayers = undefined;
     this.showNewestFirst = undefined;
     this.zoomAndScrollToSelected = undefined;
     this._alertOpen = false;
@@ -83,13 +85,12 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    * watch for changes in map view and get the first layer
    */
   async mapViewWatchHandler() {
-    this._fetchingData = true;
-    const mapLayerIds = await getMapLayerIds(this.mapView);
-    this._layer = await getLayer(this.mapView, mapLayerIds[0]);
-    this.reactiveUtils.on(() => this.mapView, "click", (event) => {
+    if (this._mapClickHandle) {
+      this._mapClickHandle.remove();
+    }
+    this._mapClickHandle = this.reactiveUtils.on(() => this.mapView, "click", (event) => {
       void this._mapClicked(event);
     });
-    this._fetchingData = false;
   }
   /**
    * watch for changes in layer view and verify if it has editing enabled
@@ -146,6 +147,22 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
       }
     }
   }
+  /**
+   * Refresh the table when edits are completed
+   *
+   */
+  editsComplete() {
+    this._refresh();
+  }
+  /**
+   * Refresh the table when edits are completed
+   *
+   */
+  noLayersFound() {
+    this._layer = undefined;
+    this._allIds = [];
+    this._clearSelection();
+  }
   //--------------------------------------------------------------------------
   //
   //  Functions (lifecycle)
@@ -164,9 +181,6 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    * Renders the component.
    */
   render() {
-    if (!this._layer) {
-      return null;
-    }
     const tableNodeClass = this._fetchingData ? "display-none" : "";
     const loadingClass = this._fetchingData ? "" : "display-none";
     const total = this._allIds.length.toString();
@@ -204,9 +218,37 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    */
   _getTableControlRow(slot) {
     const featuresSelected = this._selectedIndexes.length > 0;
-    return (h("div", { class: "display-flex table-border height-51", slot: slot }, h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, h("div", { class: "border-end" }, h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), placeholderIcon: "layers", scale: "l", type: "dropdown" })), h("calcite-action", { appearance: "solid", disabled: !featuresSelected, icon: "magnifying-glass", id: "magnifying-glass", label: this._translations.zoom, onClick: () => this._zoom(), text: this._translations.zoom, textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "magnifying-glass" }, h("span", null, this._translations.zoom)), h("calcite-action", { appearance: "solid", icon: "filter", id: "filter", onClick: () => this._filter(), text: this._translations.filters, "text-enabled": "true", textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "filter" }, h("span", null, this._translations.filters)), h("calcite-action", { appearance: "solid", disabled: !featuresSelected, id: "trash", onClick: () => this._delete(), text: "" }, h("calcite-button", { appearance: "transparent", iconStart: "trash", kind: "danger" }, this._translations.delete)), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "trash" }, h("span", null, this._translations.delete)), h("calcite-action", { appearance: "solid", disabled: !featuresSelected, icon: "erase", id: "erase", onClick: () => this._clearSelection(), text: this._translations.clearSelection, "text-enabled": "true", textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "erase" }, h("span", null, this._translations.clearSelection))), h("calcite-dropdown", null, h("calcite-action", { appearance: "solid", label: "", slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), h("calcite-dropdown-item", { iconStart: "selected-items-filter", onClick: () => this._toggleShowSelected() }, this._showOnlySelected ? this._translations.showAll :
+    return (h("div", { class: "display-flex table-border height-51", slot: slot }, h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, h("div", { class: "border-end" }, h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", type: "dropdown" })), this._getAction("zoom-to-object", this._translations.zoom, () => this._zoom(), !featuresSelected), this._getAction("filter", this._translations.filters, () => this._filter(), false), this._deleteEnabled ? this._getDangerAction("trash", this._translations.delete, () => this._delete(), !featuresSelected) : undefined, this._getAction("erase", this._translations.clearSelection, () => this._clearSelection(), !featuresSelected)), h("calcite-dropdown", { disabled: this._layer === undefined }, h("calcite-action", { appearance: "solid", label: "", slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), h("calcite-dropdown-item", { iconStart: "selected-items-filter", onClick: () => this._toggleShowSelected() }, this._showOnlySelected ? this._translations.showAll :
       this._translations.showSelected), h("calcite-dropdown-item", { iconStart: "compare", onClick: () => this._switchSelected() }, this._translations.switchSelected), h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._refresh() }, this._translations.refresh), h("calcite-dropdown-item", { iconStart: "export", onClick: () => void this._exportToCSV() }, this._translations.exportCSV)))));
   }
+  /**
+   * Get an action and tooltip
+   *
+   * @param icon string the name of the icon to display, will also be used as the id
+   * @param label string the text to display and label the action
+   * @param func any the function to execute
+   * @param disabled boolean when true the user will not be able to interact with the action
+   *
+   * @returns VNode The node representing the DOM element that will contain the action
+   */
+  _getAction(icon, label, func, disabled) {
+    const _disabled = this._layer === undefined ? true : disabled;
+    return (h("div", { class: "display-flex" }, h("calcite-action", { appearance: "solid", disabled: _disabled, icon: icon, id: icon, label: label, onClick: func, text: label, textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, label))));
+  }
+  /**
+   * Get an action with danger color icon and text
+   *
+   * @param icon string the name of the icon to display, will also be used as the id
+   * @param label string the text to display and label the action
+   * @param func any the function to execute
+   * @param disabled boolean when true the user will not be able to interact with the action
+   *
+   * @returns VNode The node representing the DOM element that will contain the action
+   */
+  _getDangerAction(icon, label, func, disabled) {
+    const _disabled = this._layer === undefined ? true : disabled;
+    return (h("div", { class: "display-flex" }, h("calcite-action", { appearance: "solid", disabled: _disabled, id: icon, onClick: func, text: "" }, h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label)), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": icon }, h("span", null, label))));
+  }
   /**
    * Initialize the FeatureTable
    *
@@ -216,7 +258,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    */
   async _getTable(node, columnTemplates) {
     if (this._layer) {
-      await this._layer.when(async () => {
+      await this._layer.when(() => {
         this._table = new this.FeatureTable({
           autoRefreshEnabled: this.enableAutoRefresh,
           layer: this._layer,
@@ -233,25 +275,25 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
           },
           container: node
         });
-        this._checkEditEnabled();
-        await this._table.when(async () => {
-          this._table.highlightIds.on("change", () => {
-            this._selectedIndexes = this._table.highlightIds.toArray();
-            if (this._showOnlySelected) {
-              if (this._selectedIndexes.length > 0) {
-                this._table.filterBySelection();
-              }
-              else {
-                this._toggleShowSelected();
-              }
+      });
+      this._checkEditEnabled();
+      await this._table.when(() => {
+        this._table.highlightIds.on("change", () => {
+          this._selectedIndexes = this._table.highlightIds.toArray();
+          if (this._showOnlySelected) {
+            if (this._selectedIndexes.length > 0) {
+              this._table.filterBySelection();
             }
-            this.featureSelectionChange.emit(this._selectedIndexes);
-          });
-          this.reactiveUtils.watch(() => this._table.activeSortOrders, (sortOrders) => {
-            var _a, _b, _c, _d;
-            this._sortActive = (sortOrders.length > 0 && ((_a = sortOrders[0]) === null || _a === void 0 ? void 0 : _a.direction) === "asc" || ((_b = sortOrders[0]) === null || _b === void 0 ? void 0 : _b.direction) === "desc") ||
-              ((_c = sortOrders[0]) === null || _c === void 0 ? void 0 : _c.direction) === null && ((_d = sortOrders[0]) === null || _d === void 0 ? void 0 : _d.fieldName) === this._layer.objectIdField;
-          });
+            else {
+              this._toggleShowSelected();
+            }
+          }
+          this.featureSelectionChange.emit(this._selectedIndexes);
+        });
+        this.reactiveUtils.watch(() => this._table.activeSortOrders, (sortOrders) => {
+          var _a, _b, _c, _d;
+          this._sortActive = this._layer ? (sortOrders.length > 0 && ((_a = sortOrders[0]) === null || _a === void 0 ? void 0 : _a.direction) === "asc" || ((_b = sortOrders[0]) === null || _b === void 0 ? void 0 : _b.direction) === "desc") ||
+            ((_c = sortOrders[0]) === null || _c === void 0 ? void 0 : _c.direction) === null && ((_d = sortOrders[0]) === null || _d === void 0 ? void 0 : _d.fieldName) === this._layer.objectIdField : false;
         });
       });
     }
@@ -262,20 +304,30 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    * @returns void
    */
   async _resetTable() {
-    if (this._layer && this._table) {
+    if (this._table) {
       this._clearSelection();
       this._allIds = [];
       this.featureSelectionChange.emit(this._selectedIndexes);
-      const columnTemplates = this._getColumnTemplates(this._layer.id);
-      this._table.layer = this._layer;
-      this._table.tableTemplate.columnTemplates = columnTemplates;
-      this._checkEditEnabled();
-      this._table.view = this.mapView;
-      this._table.editingEnabled = this._editEnabled;
-      this._table.clearSelectionFilter();
-      this._showOnlySelected = false;
-      this._sortActive = false;
-      await this._sortTable();
+      if (this._layer) {
+        await this._layer.when(() => {
+          const columnTemplates = this._getColumnTemplates(this._layer.id);
+          this._table.layer = this._layer;
+          this._table.tableTemplate.columnTemplates = columnTemplates;
+          this._table.view = this.mapView;
+          this._checkEditEnabled();
+          this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
+        });
+        await this._table.when(() => {
+          this._table.clearSelectionFilter();
+        });
+        this._showOnlySelected = false;
+        this._sortActive = false;
+        await this._sortTable();
+      }
+      else {
+        this._table.view = this.mapView;
+        this._table.layer = this._layer;
+      }
     }
   }
   /**
@@ -296,11 +348,10 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     if (this._table && this._layer && !this._sortActive) {
       if (!this._tableSorting && this.showNewestFirst) {
         this._tableSorting = true;
-        await this._table.when(async () => {
-          await this._layer.when(async () => {
-            this._table.sortColumn(this._layer.objectIdField, "desc");
-            this._tableSorting = false;
-          });
+        await this._table.when();
+        await this._layer.when(() => {
+          this._table.sortColumn(this._layer.objectIdField, "desc");
+          this._tableSorting = false;
         });
       }
     }
@@ -498,11 +549,12 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
    * @returns a promise that will resolve when the operation is complete
    */
   async _layerSelectionChanged(evt) {
+    var _a;
     const id = evt.detail[0];
-    if (id !== this._layer.id || this._allIds.length === 0) {
+    if (id !== ((_a = this._layer) === null || _a === void 0 ? void 0 : _a.id) || this._allIds.length === 0) {
       this._fetchingData = true;
       const columnTemplates = this._getColumnTemplates(id);
-      this._layer = await getLayer(this.mapView, id);
+      this._layer = await getLayerOrTable(this.mapView, id);
       this._allIds = await queryAllIds(this._layer);
       if (!this._table) {
         await this._getTable(this._tableNode, columnTemplates);
@@ -561,6 +613,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     "enableInlineEdit": [4, "enable-inline-edit"],
     "mapInfo": [16],
     "mapView": [16],
+    "onlyShowUpdatableLayers": [4, "only-show-updatable-layers"],
     "showNewestFirst": [4, "show-newest-first"],
     "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
     "_alertOpen": [32],
@@ -572,12 +625,12 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
     "_sortActive": [32],
     "_translations": [32],
     "getSelectedGraphics": [64]
-  }, [[8, "selectionChanged", "selectionChanged"]]]);
+  }, [[8, "selectionChanged", "selectionChanged"], [8, "editsComplete", "editsComplete"], [8, "noLayersFound", "noLayersFound"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["layer-table", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-alert", "calcite-button", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-icon", "calcite-loader", "calcite-modal", "calcite-option", "calcite-panel", "calcite-popover", "calcite-scrim", "calcite-select", "calcite-shell", "calcite-tooltip", "map-layer-picker"];
+  const components = ["layer-table", "calcite-action", "calcite-action-bar", "calcite-action-group", "calcite-action-menu", "calcite-alert", "calcite-button", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-icon", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-option", "calcite-panel", "calcite-popover", "calcite-scrim", "calcite-select", "calcite-shell", "calcite-tooltip", "map-layer-picker"];
   components.forEach(tagName => { switch (tagName) {
     case "layer-table":
       if (!customElements.get(tagName)) {
@@ -586,75 +639,80 @@ function defineCustomElement() {
       break;
     case "calcite-action":
       if (!customElements.get(tagName)) {
-        defineCustomElement$n();
+        defineCustomElement$o();
       }
       break;
     case "calcite-action-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$m();
+        defineCustomElement$n();
       }
       break;
     case "calcite-action-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$l();
+        defineCustomElement$m();
       }
       break;
     case "calcite-action-menu":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$l();
       }
       break;
     case "calcite-alert":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$k();
       }
       break;
     case "calcite-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$j();
       }
       break;
     case "calcite-chip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$i();
       }
       break;
     case "calcite-combobox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$h();
       }
       break;
     case "calcite-combobox-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$g();
       }
       break;
     case "calcite-dropdown":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$f();
       }
       break;
     case "calcite-dropdown-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$e();
       }
       break;
     case "calcite-dropdown-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$d();
       }
       break;
     case "calcite-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$c();
       }
       break;
     case "calcite-loader":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$b();
       }
       break;
     case "calcite-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "calcite-notice":
       if (!customElements.get(tagName)) {
         defineCustomElement$9();
       }

package/dist/components/map-card2.js

@@ -36,10 +36,16 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
     super();
     this.__registerHost();
     this.mapChanged = createEvent(this, "mapChanged", 7);
+    this.beforeMapChanged = createEvent(this, "beforeMapChanged", 7);
     /**
      * string: the id of map currently displayed
      */
     this._loadedId = "";
+    this.enableLegend = undefined;
+    this.enableFullscreen = undefined;
+    this.enableSearch = undefined;
+    this.enableBasemap = undefined;
+    this.basemapConfig = undefined;
     this.mapInfos = [];
     this.mapView = undefined;
     this._searchConfiguration = undefined;
@@ -66,7 +72,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
    * Renders the component.
    */
   render() {
-    return (h(Host, null, h("map-picker", { mapInfos: this.mapInfos }), h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), h("map-tools", { class: "box-shadow", mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
+    return (h(Host, null, h("map-picker", { mapInfos: this.mapInfos }), h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), h("map-tools", { basemapConfig: this.basemapConfig, class: "box-shadow", enableBasemap: this.enableBasemap, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
   }
   //--------------------------------------------------------------------------
   //
@@ -116,22 +122,28 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
       });
       this._loadedId = id;
       this._searchConfiguration = this._webMapInfo.searchConfiguration;
-      this.mapChanged.emit({
-        id: id,
-        mapView: this.mapView
-      });
+      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.mapView.ui.add(this._mapTools, { position: "top-right", index: 0 });
+        this.mapChanged.emit({
+          id: id,
+          mapView: this.mapView
+        });
       });
     }
   }
   get el() { return this; }
   static get style() { return mapCardCss; }
 }, [0, "map-card", {
+    "enableLegend": [4, "enable-legend"],
+    "enableFullscreen": [4, "enable-fullscreen"],
+    "enableSearch": [4, "enable-search"],
+    "enableBasemap": [4, "enable-basemap"],
+    "basemapConfig": [16],
     "mapInfos": [16],
     "mapView": [16],
     "_searchConfiguration": [32],