@esri/solutions-components 0.6.11 → 0.6.13

package/dist/components/crowdsource-manager.js

@@ -6,55 +6,63 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { a as ELayoutMode } from './interfaces.js';
-import { d as defineCustomElement$G } from './basemap-gallery2.js';
-import { d as defineCustomElement$F } from './action.js';
-import { d as defineCustomElement$E } from './action-bar.js';
-import { d as defineCustomElement$D } from './action-group.js';
-import { d as defineCustomElement$C } from './action-menu.js';
-import { d as defineCustomElement$B } from './alert.js';
-import { d as defineCustomElement$A } from './button.js';
-import { d as defineCustomElement$z } from './chip.js';
-import { d as defineCustomElement$y } from './combobox.js';
-import { d as defineCustomElement$x } from './combobox-item.js';
-import { d as defineCustomElement$w } from './dropdown.js';
-import { d as defineCustomElement$v } from './dropdown-group.js';
-import { d as defineCustomElement$u } from './dropdown-item.js';
-import { d as defineCustomElement$t } from './filter2.js';
-import { d as defineCustomElement$s } from './handle.js';
-import { d as defineCustomElement$r } from './icon.js';
-import { d as defineCustomElement$q } from './input.js';
-import { d as defineCustomElement$p } from './link.js';
-import { d as defineCustomElement$o } from './list.js';
-import { d as defineCustomElement$n } from './list-item2.js';
-import { d as defineCustomElement$m } from './loader.js';
-import { d as defineCustomElement$l } from './notice.js';
-import { d as defineCustomElement$k } from './option.js';
-import { d as defineCustomElement$j } from './panel.js';
-import { d as defineCustomElement$i } from './popover.js';
-import { d as defineCustomElement$h } from './progress.js';
-import { d as defineCustomElement$g } from './scrim.js';
-import { d as defineCustomElement$f } from './select.js';
-import { d as defineCustomElement$e } from './shell.js';
-import { d as defineCustomElement$d } from './stack.js';
-import { d as defineCustomElement$c } from './tooltip.js';
-import { d as defineCustomElement$b } from './card-manager2.js';
-import { d as defineCustomElement$a } from './edit-card2.js';
-import { d as defineCustomElement$9 } from './info-card2.js';
-import { d as defineCustomElement$8 } from './layer-table2.js';
-import { d as defineCustomElement$7 } from './map-card2.js';
+import { d as defineCustomElement$H } from './basemap-gallery2.js';
+import { d as defineCustomElement$G } from './action.js';
+import { d as defineCustomElement$F } from './action-bar.js';
+import { d as defineCustomElement$E } from './action-group.js';
+import { d as defineCustomElement$D } from './action-menu.js';
+import { d as defineCustomElement$C } from './alert.js';
+import { d as defineCustomElement$B } from './button.js';
+import { d as defineCustomElement$A } from './chip.js';
+import { d as defineCustomElement$z } from './combobox.js';
+import { d as defineCustomElement$y } from './combobox-item.js';
+import { d as defineCustomElement$x } from './dropdown.js';
+import { d as defineCustomElement$w } from './dropdown-group.js';
+import { d as defineCustomElement$v } from './dropdown-item.js';
+import { d as defineCustomElement$u } from './filter2.js';
+import { d as defineCustomElement$t } from './handle.js';
+import { d as defineCustomElement$s } from './icon.js';
+import { d as defineCustomElement$r } from './input.js';
+import { d as defineCustomElement$q } from './list.js';
+import { d as defineCustomElement$p } from './list-item2.js';
+import { d as defineCustomElement$o } from './loader.js';
+import { d as defineCustomElement$n } from './modal.js';
+import { d as defineCustomElement$m } from './notice.js';
+import { d as defineCustomElement$l } from './option.js';
+import { d as defineCustomElement$k } from './panel.js';
+import { d as defineCustomElement$j } from './popover.js';
+import { d as defineCustomElement$i } from './progress.js';
+import { d as defineCustomElement$h } from './scrim.js';
+import { d as defineCustomElement$g } from './select.js';
+import { d as defineCustomElement$f } from './shell.js';
+import { d as defineCustomElement$e } from './stack.js';
+import { d as defineCustomElement$d } from './tooltip.js';
+import { d as defineCustomElement$c } from './card-manager2.js';
+import { d as defineCustomElement$b } from './edit-card2.js';
+import { d as defineCustomElement$a } from './info-card2.js';
+import { d as defineCustomElement$9 } from './layer-table2.js';
+import { d as defineCustomElement$8 } from './map-card2.js';
+import { d as defineCustomElement$7 } from './map-fullscreen2.js';
 import { d as defineCustomElement$6 } from './map-layer-picker2.js';
 import { d as defineCustomElement$5 } from './map-legend2.js';
 import { d as defineCustomElement$4 } from './map-picker2.js';
 import { d as defineCustomElement$3 } from './map-search2.js';
 import { d as defineCustomElement$2 } from './map-tools2.js';
 
-const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-ui-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 0.5rem - 25px)}.adjusted-height-100{height:calc(100% - 1rem - 50px)}.adjusted-height-100-50{height:calc(100% - 50px)}.display-none{display:none}.height-53{height:53px}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-49-px{height:49px}.height-50-px{height:50px}.padding-inline-end-75{padding-inline-end:0.75rem}.align-items-center{align-items:center}";
+const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-ui-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-50{height:calc(100% - 50px)}.display-none{display:none}.height-53{height:53px}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-49-px{height:49px}.height-50-px{height:50px}.padding-inline-end-75{padding-inline-end:0.75rem}.align-items-center{align-items:center}";
 
 const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceManager extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    /**
+     * boolean: When true the map view will be set after render due to popup obstructing the view
+     * MapView.when is not fired when mapView is not currently visible
+     */
+    this._shouldSetMapView = false;
     this.classicGrid = false;
+    this.enableAutoRefresh = true;
+    this.enableInlineEdit = false;
     this.showNewestFirst = true;
     this.hideMap = false;
     this.mapInfos = [];
@@ -91,13 +99,14 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
    * Listen for mapChanged event to be fired then store the new mapView so components will be updated
    */
   async mapChanged(evt) {
-    const mapChange = evt.detail;
-    // close popup by default when the map changes otherwise other components that rely on the view don't work since it
-    // doesn't seem to fully load when it's not visible
-    this._expandPopup = false;
-    this._mapInfo = this._getMapInfo(mapChange.id);
-    this._mapView = mapChange.mapView;
-    this._mapView.popupEnabled = false;
+    this._mapChange = evt.detail;
+    if (this._expandPopup) {
+      this._shouldSetMapView = true;
+      this._expandPopup = false;
+    }
+    else {
+      this._setMapView();
+    }
   }
   //--------------------------------------------------------------------------
   //
@@ -118,6 +127,16 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
   render() {
     return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: "width-full height-full" }, this._getBody(this._layoutMode, this._panelOpen, this.hideMap)))));
   }
+  /**
+   * Called after each render
+   * Used to delay the setting of the mapView when the popup is expaneded and obstructs the view
+   */
+  componentDidRender() {
+    if (this._shouldSetMapView) {
+      this._shouldSetMapView = false;
+      this._setMapView();
+    }
+  }
   //--------------------------------------------------------------------------
   //
   //  Functions (protected)
@@ -280,7 +299,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
       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
@@ -300,7 +319,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", 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, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
   }
   /**
    * Open/Close the appropriate panel.
@@ -328,6 +347,16 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     });
     return mapInfo;
   }
+  /**
+   * Set the current map info when maps change
+   *
+   * @protected
+   */
+  _setMapView() {
+    this._mapInfo = this._getMapInfo(this._mapChange.id);
+    this._mapView = this._mapChange.mapView;
+    this._mapView.popupEnabled = false;
+  }
   /**
    * Fetches the component's translations
    *
@@ -342,6 +371,8 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
   static get style() { return crowdsourceManagerCss; }
 }, [0, "crowdsource-manager", {
     "classicGrid": [4, "classic-grid"],
+    "enableAutoRefresh": [4, "enable-auto-refresh"],
+    "enableInlineEdit": [4, "enable-inline-edit"],
     "showNewestFirst": [4, "show-newest-first"],
     "hideMap": [4, "hide-map"],
     "mapInfos": [16],
@@ -357,7 +388,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["crowdsource-manager", "basemap-gallery", "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-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-link", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-notice", "calcite-option", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-select", "calcite-shell", "calcite-stack", "calcite-tooltip", "card-manager", "edit-card", "info-card", "layer-table", "map-card", "map-layer-picker", "map-legend", "map-picker", "map-search", "map-tools"];
+  const components = ["crowdsource-manager", "basemap-gallery", "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-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-option", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-select", "calcite-shell", "calcite-stack", "calcite-tooltip", "card-manager", "edit-card", "info-card", "layer-table", "map-card", "map-fullscreen", "map-layer-picker", "map-legend", "map-picker", "map-search", "map-tools"];
   components.forEach(tagName => { switch (tagName) {
     case "crowdsource-manager":
       if (!customElements.get(tagName)) {
@@ -366,180 +397,185 @@ function defineCustomElement$1() {
       break;
     case "basemap-gallery":
       if (!customElements.get(tagName)) {
-        defineCustomElement$G();
+        defineCustomElement$H();
       }
       break;
     case "calcite-action":
       if (!customElements.get(tagName)) {
-        defineCustomElement$F();
+        defineCustomElement$G();
       }
       break;
     case "calcite-action-bar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$E();
+        defineCustomElement$F();
       }
       break;
     case "calcite-action-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$D();
+        defineCustomElement$E();
       }
       break;
     case "calcite-action-menu":
       if (!customElements.get(tagName)) {
-        defineCustomElement$C();
+        defineCustomElement$D();
       }
       break;
     case "calcite-alert":
       if (!customElements.get(tagName)) {
-        defineCustomElement$B();
+        defineCustomElement$C();
       }
       break;
     case "calcite-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$A();
+        defineCustomElement$B();
       }
       break;
     case "calcite-chip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$z();
+        defineCustomElement$A();
       }
       break;
     case "calcite-combobox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$y();
+        defineCustomElement$z();
       }
       break;
     case "calcite-combobox-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$x();
+        defineCustomElement$y();
       }
       break;
     case "calcite-dropdown":
       if (!customElements.get(tagName)) {
-        defineCustomElement$w();
+        defineCustomElement$x();
       }
       break;
     case "calcite-dropdown-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$v();
+        defineCustomElement$w();
       }
       break;
     case "calcite-dropdown-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$u();
+        defineCustomElement$v();
       }
       break;
     case "calcite-filter":
       if (!customElements.get(tagName)) {
-        defineCustomElement$t();
+        defineCustomElement$u();
       }
       break;
     case "calcite-handle":
       if (!customElements.get(tagName)) {
-        defineCustomElement$s();
+        defineCustomElement$t();
       }
       break;
     case "calcite-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$r();
+        defineCustomElement$s();
       }
       break;
     case "calcite-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$r();
+      }
+      break;
+    case "calcite-list":
       if (!customElements.get(tagName)) {
         defineCustomElement$q();
       }
       break;
-    case "calcite-link":
+    case "calcite-list-item":
       if (!customElements.get(tagName)) {
         defineCustomElement$p();
       }
       break;
-    case "calcite-list":
+    case "calcite-loader":
       if (!customElements.get(tagName)) {
         defineCustomElement$o();
       }
       break;
-    case "calcite-list-item":
+    case "calcite-modal":
       if (!customElements.get(tagName)) {
         defineCustomElement$n();
       }
       break;
-    case "calcite-loader":
+    case "calcite-notice":
       if (!customElements.get(tagName)) {
         defineCustomElement$m();
       }
       break;
-    case "calcite-notice":
+    case "calcite-option":
       if (!customElements.get(tagName)) {
         defineCustomElement$l();
       }
       break;
-    case "calcite-option":
+    case "calcite-panel":
       if (!customElements.get(tagName)) {
         defineCustomElement$k();
       }
       break;
-    case "calcite-panel":
+    case "calcite-popover":
       if (!customElements.get(tagName)) {
         defineCustomElement$j();
       }
       break;
-    case "calcite-popover":
+    case "calcite-progress":
       if (!customElements.get(tagName)) {
         defineCustomElement$i();
       }
       break;
-    case "calcite-progress":
+    case "calcite-scrim":
       if (!customElements.get(tagName)) {
         defineCustomElement$h();
       }
       break;
-    case "calcite-scrim":
+    case "calcite-select":
       if (!customElements.get(tagName)) {
         defineCustomElement$g();
       }
       break;
-    case "calcite-select":
+    case "calcite-shell":
       if (!customElements.get(tagName)) {
         defineCustomElement$f();
       }
       break;
-    case "calcite-shell":
+    case "calcite-stack":
       if (!customElements.get(tagName)) {
         defineCustomElement$e();
       }
       break;
-    case "calcite-stack":
+    case "calcite-tooltip":
       if (!customElements.get(tagName)) {
         defineCustomElement$d();
       }
       break;
-    case "calcite-tooltip":
+    case "card-manager":
       if (!customElements.get(tagName)) {
         defineCustomElement$c();
       }
       break;
-    case "card-manager":
+    case "edit-card":
       if (!customElements.get(tagName)) {
         defineCustomElement$b();
       }
       break;
-    case "edit-card":
+    case "info-card":
       if (!customElements.get(tagName)) {
         defineCustomElement$a();
       }
       break;
-    case "info-card":
+    case "layer-table":
       if (!customElements.get(tagName)) {
         defineCustomElement$9();
       }
       break;
-    case "layer-table":
+    case "map-card":
       if (!customElements.get(tagName)) {
         defineCustomElement$8();
       }
       break;
-    case "map-card":
+    case "map-fullscreen":
       if (!customElements.get(tagName)) {
         defineCustomElement$7();
       }