@esri/solutions-components 0.7.0 → 0.7.2

package/dist/cjs/card-manager_3.cjs.entry.js

@@ -9,9 +9,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-2d5760f2.js');
 const locale = require('./locale-ef06bf9e.js');
-const mapViewUtils = require('./mapViewUtils-f7bbc35b.js');
+const mapViewUtils = require('./mapViewUtils-bab83c90.js');
 const loadModules = require('./loadModules-ad1ab1a8.js');
-const downloadUtils = require('./downloadUtils-e3e595e9.js');
+const downloadUtils = require('./downloadUtils-9c4fde54.js');
 require('./_commonjsHelpers-384729db.js');
 require('./interfaces-000be6de.js');
 require('./solution-resource-f9e3b289.js');
@@ -104,17 +104,26 @@ const CardManager = class {
 };
 CardManager.style = cardManagerCss;
 
-const layerTableCss = ":host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.border-end{border-inline-end:1px solid var(--calcite-ui-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.bottom-left{position:absolute;left:0;bottom:0;padding-left:5px}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0;padding-right:5px}.height-19{height:19px}.background{background-color:var(--calcite-ui-background)}.text-color{color:var(--calcite-ui-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-ui-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{padding:var(--lumo-space-xs) var(--lumo-space-m) !important;font-size:14px !important}";
+const layerTableCss = ":host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.width-full{width:100%}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}.border-end{border-inline-end:1px solid var(--calcite-ui-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-ui-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51{height:51px}.bottom-left{position:absolute;left:0;bottom:0;padding-left:5px}html[dir=\"rtl\"] .bottom-left{position:absolute;right:0;bottom:0;padding-right:5px}.height-19{height:19px}.background{background-color:var(--calcite-ui-background)}.text-color{color:var(--calcite-ui-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-ui-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{padding:var(--lumo-space-xs) var(--lumo-space-m) !important;font-size:14px !important}.share-action{position:absolute;right:1}";
 
 const LayerTable = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.featureSelectionChange = index.createEvent(this, "featureSelectionChange", 7);
     this.openFilterOptions = index.createEvent(this, "openFilterOptions", 7);
+    this.openShare = index.createEvent(this, "openShare", 7);
     /**
      * number[]: A list of all IDs for the current layer
      */
     this._allIds = [];
+    /**
+     * boolean: When true the default global id provided via url param has been honored and should now be ignored
+     */
+    this._defaultGlobalIdHonored = false;
+    /**
+     * boolean: When true the default OID provided via url param has been honored and should now be ignored
+     */
+    this._defaultOidHonored = false;
     /**
      * bool: When true the table is being sorted
      */
@@ -130,9 +139,14 @@ const LayerTable = class {
     this.onTableNodeCreate = (node) => {
       this._tableNode = node;
     };
+    this.defaultLayerId = undefined;
+    this.defaultGlobalId = undefined;
+    this.defaultOid = undefined;
     this.enableAutoRefresh = undefined;
+    this.enableColumnReorder = true;
     this.enableCSV = undefined;
     this.enableInlineEdit = undefined;
+    this.enableShare = undefined;
     this.enableZoom = undefined;
     this.mapInfo = undefined;
     this.mapView = undefined;
@@ -145,6 +159,7 @@ const LayerTable = class {
     this._isDeleting = false;
     this._layer = undefined;
     this._selectedIndexes = [];
+    this._showHideOpen = false;
     this._showOnlySelected = false;
     this._sortActive = false;
     this._translations = undefined;
@@ -305,6 +320,7 @@ const LayerTable = class {
    */
   async componentDidLoad() {
     this._resizeObserver.observe(this._toolbar);
+    document.onclick = (e) => this._handleDocumentClick(e);
   }
   /**
    * Called after the component is rendered
@@ -349,7 +365,7 @@ const LayerTable = class {
    */
   _getTableControlRow(slot) {
     const id = "more-table-options";
-    return (index.h("div", { class: "display-flex border-bottom height-51", ref: (el) => this._toolbar = el, slot: slot }, this._getActionBar(), this._getDropdown(id), this._getToolTip("", "bottom", id, this._translations.moreOptions)));
+    return (index.h("div", { class: "display-flex border-bottom height-51", ref: (el) => this._toolbar = el, slot: slot }, this._getActionBar(), this._getDropdown(id), this.enableShare ? this._getShare("share") : undefined));
   }
   /**
    * Gets a row of controls that can be used for various interactions with the table
@@ -359,7 +375,7 @@ const LayerTable = class {
    * @returns The dom node that contains the controls
    */
   _getActionBar() {
-    return (index.h("calcite-action-bar", { expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, index.h("div", { class: "border-end", id: "solutions-map-layer-picker-container" }, index.h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showTables: true, type: "dropdown" })), this._getActions()));
+    return (index.h("calcite-action-bar", { expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, index.h("div", { class: "border-end", id: "solutions-map-layer-picker-container" }, index.h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showTables: true, type: "dropdown" })), this._getActions()));
   }
   /**
    * Get the actions that are used for various interactions with the table
@@ -372,11 +388,33 @@ const LayerTable = class {
       if (cur && !cur.isOverflow) {
         prev.push(cur.isDanger ?
           this._getDangerAction(cur.icon, cur.label, cur.func, cur.disabled) :
-          this._getAction(cur.icon, cur.label, cur.func, cur.disabled));
+          cur.isSublist ? (index.h("calcite-dropdown", { closeOnSelectDisabled: true, id: this._getId(cur.icon), onCalciteDropdownBeforeClose: () => this._forceShowHide(), ref: (el) => this._showHideDropdown = el }, this._getAction(this._showHideOpen ? "chevron-down" : cur.icon, cur.label, cur.func, cur.disabled, "trigger"), this._showHideOpen ? this._getFieldlist() : undefined)) :
+            this._getAction(cur.icon, cur.label, cur.func, cur.disabled));
       }
       return prev;
     }, []);
   }
+  /**
+   * Get the list of fields as dropdown items and store the current selected state so
+   * we can show/hide the appropriate fields
+   *
+   * @returns Node with the fields as dropdown items
+   */
+  _getFieldlist() {
+    return this._columnsInfo ? (index.h("calcite-dropdown-group", { "selection-mode": "multiple" }, Object.keys(this._columnsInfo).map(k => {
+      const selected = this._columnsInfo[k];
+      return (index.h("calcite-dropdown-item", { id: k, onClick: (e) => {
+          const target = e.target;
+          this._columnsInfo[target.id] = target.selected;
+          if (!target.selected) {
+            this._table.hideColumn(target.id);
+          }
+          else {
+            this._table.showColumn(target.id);
+          }
+        }, selected: selected }, k));
+    }))) : undefined;
+  }
   /**
    * Update actions enabled prop based on number of selected indexes
    *
@@ -465,7 +503,14 @@ const LayerTable = class {
         label: this._translations.exportCSV,
         disabled: featuresEmpty,
         isOverflow: false
-      } : undefined];
+      } : undefined, {
+        icon: this._showHideOpen ? "chevron-down" : "chevron-right",
+        func: () => this._toggleShowHide(),
+        label: this._translations.showHideColumns,
+        disabled: false,
+        isOverflow: false,
+        isSublist: true
+      }];
     this._defaultVisibleToolSizeInfos = undefined;
   }
   /**
@@ -501,7 +546,7 @@ const LayerTable = class {
         prev += cur.width;
         return prev;
       }, 0);
-      const skipControls = ["solutions-more", "solutions-map-layer-picker-container"];
+      const skipControls = ["solutions-more", "solutions-map-layer-picker-container", "solutions-action-share"];
       if (controlsWidth > toolbarWidth) {
         if (this._toolbarSizeInfos.length > 0) {
           const controlsThatFit = [...this._toolbarSizeInfos].reverse().reduce((prev, cur) => {
@@ -616,9 +661,9 @@ const LayerTable = class {
    */
   _getDropdown(id) {
     const dropdownItems = this._getDropdownItems();
-    return dropdownItems.length > 0 ? (index.h("calcite-dropdown", { disabled: this._layer === undefined, id: "solutions-more" }, index.h("calcite-action", { appearance: "solid", id: id, label: "", slot: "trigger", text: "" }, index.h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), index.h("calcite-dropdown-group", { "selection-mode": "none" }, dropdownItems.map(item => {
-      return (index.h("calcite-dropdown-item", { iconStart: item.icon, onClick: item.func }, item.label));
-    })))) : undefined;
+    return dropdownItems.length > 0 ? (index.h("calcite-dropdown", { closeOnSelectDisabled: true, disabled: this._layer === undefined, id: "solutions-more", onCalciteDropdownBeforeClose: () => this._forceShowHide(), ref: (el) => this._moreDropdown = el }, index.h("calcite-action", { appearance: "solid", id: id, label: "", onClick: () => this._closeShowHide(), slot: "trigger", text: "" }, index.h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), index.h("calcite-dropdown-group", { "selection-mode": "none" }, dropdownItems.map(item => {
+      return (index.h("calcite-dropdown-item", { iconStart: item.isSublist && this._showHideOpen ? "chevron-down" : item.icon, id: "solutions-subset-list", onClick: item.func }, item.label));
+    })), this._showHideOpen ? this._getFieldlist() : undefined)) : undefined;
   }
   /**
    * Get a list of toolInfos that should display in the dropdown
@@ -638,9 +683,19 @@ const LayerTable = class {
    *
    * @returns VNode The node representing the DOM element that will contain the action
    */
-  _getAction(icon, label, func, disabled) {
+  _getAction(icon, label, func, disabled, slot) {
     const _disabled = this._layer === undefined ? true : disabled;
-    return (index.h("div", { class: "display-flex", id: this._getId(icon) }, index.h("calcite-action", { appearance: "solid", disabled: _disabled, icon: icon, id: icon, label: label, onClick: func, text: label, textEnabled: true }), this._getToolTip("", "bottom", icon, label)));
+    return (index.h("div", { class: "display-flex", id: this._getId(icon), slot: slot }, index.h("calcite-action", { appearance: "solid", disabled: _disabled, icon: icon, id: icon, label: label, onClick: func, text: label, textEnabled: true }), this._getToolTip("", "bottom", icon, label)));
+  }
+  /**
+   * Get an action and tooltip for share
+   *
+   * @param icon string the name of the icon to display, will also be used in its id
+   *
+   * @returns VNode The node representing the DOM element that will contain the action
+   */
+  _getShare(icon) {
+    return (index.h("div", { class: "share-action height-51 border-bottom", id: this._getId(icon) }, index.h("calcite-action", { appearance: "solid", class: "height-51", icon: icon, id: icon, onClick: () => this.openShare.emit(true), textEnabled: false }), this._getToolTip("", "bottom", icon, this._translations.share)));
   }
   /**
    * Get a tooltip
@@ -693,6 +748,7 @@ const LayerTable = class {
           autoRefreshEnabled: this.enableAutoRefresh,
           layer: this._layer,
           view: this.mapView,
+          columnReorderingEnabled: this.enableColumnReorder,
           editingEnabled: this._editEnabled && this.enableInlineEdit,
           highlightEnabled: true,
           multiSortEnabled: false,
@@ -706,6 +762,7 @@ const LayerTable = class {
           container: node
         });
       });
+      this._initColumnsInfo();
       this._checkEditEnabled();
       await this._table.when(() => {
         this._table.highlightIds.on("change", () => {
@@ -752,14 +809,53 @@ const LayerTable = class {
     this._checkEditEnabled();
     this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
     this._initToolInfos();
-    await this._table.when(() => {
+    await this._table.when(async () => {
+      var _a, _b;
       this._table.highlightIds.removeAll();
       this._table.clearSelectionFilter();
+      this._initColumnsInfo();
+      if (!this._defaultOidHonored && ((_a = this.defaultOid) === null || _a === void 0 ? void 0 : _a.length) > 0 && this.defaultOid[0] > -1) {
+        this._selectDefaultFeature(this.defaultOid);
+        this._defaultOidHonored = true;
+      }
+      if (!this._defaultGlobalIdHonored && ((_b = this.defaultGlobalId) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+        const features = await mapViewUtils.queryFeaturesByGlobalID(this.defaultGlobalId, this._layer);
+        const oids = (features === null || features === void 0 ? void 0 : features.length) > 0 ? features.map(f => f.getObjectId()) : undefined;
+        if (oids) {
+          this._selectDefaultFeature(oids);
+        }
+        this._defaultGlobalIdHonored = true;
+      }
     });
     this._showOnlySelected = false;
     this._sortActive = false;
     await this._sortTable();
   }
+  /**
+   * Store the column names and current hidden status to support show/hide of columns
+   *
+   * @returns void
+   */
+  _initColumnsInfo() {
+    this._columnsInfo = this._table.columns.reduce((prev, cur) => {
+      prev[cur.name] = !cur.hidden;
+      return prev;
+    }, {});
+  }
+  /**
+   * Select the feature that was specified via url params
+   *
+   * @returns void
+   */
+  _selectDefaultFeature(oids) {
+    if (oids.length > 0) {
+      this._table.highlightIds.addMany(oids);
+      void this._table.when(() => {
+        const i = this._table.viewModel.getObjectIdIndex(oids[0]);
+        this._table.viewModel.scrollToIndex(i);
+      });
+    }
+  }
   /**
    * Verify edit capabilities of the layer
    *
@@ -786,6 +882,45 @@ const LayerTable = class {
       }
     }
   }
+  /**
+   * Open show/hide dropdown
+   */
+  _forceShowHide() {
+    if (this._showHideDropdown) {
+      this._showHideDropdown.open = this._showHideOpen;
+    }
+    if (this._moreDropdown) {
+      this._moreDropdown.open = this._showHideOpen;
+    }
+  }
+  /**
+   * Toggle show/hide dropdown
+   */
+  _toggleShowHide() {
+    this._showHideOpen = !this._showHideOpen;
+  }
+  /**
+   * Open show/hide dropdown
+   */
+  _closeShowHide() {
+    this._showHideOpen = false;
+  }
+  /**
+   * Close show/hide dropdown when the user clicks outside of it
+   */
+  _handleDocumentClick(e) {
+    var _a;
+    const id = (_a = e.target) === null || _a === void 0 ? void 0 : _a.id;
+    if (this._showHideOpen && Object.keys(this._columnsInfo).indexOf(id) < 0 && id !== "solutions-subset-list" && id !== "chevron-right") {
+      this._closeShowHide();
+      if (this._moreDropdown) {
+        this._moreDropdown.open = false;
+      }
+      if (this._showHideDropdown) {
+        this._showHideDropdown.open = false;
+      }
+    }
+  }
   /**
    * Show delete confirmation message
    *
@@ -1039,10 +1174,15 @@ const MapCard = class {
     index.registerInstance(this, hostRef);
     this.mapChanged = index.createEvent(this, "mapChanged", 7);
     this.beforeMapChanged = index.createEvent(this, "beforeMapChanged", 7);
+    /**
+     * boolean: When true the default map provided via url params has been loaded and should no longer override other maps
+     */
+    this._defaultWebmapHonored = false;
     /**
      * string: the id of map currently displayed
      */
     this._loadedId = "";
+    this.defaultWebmapId = "";
     this.enableHome = undefined;
     this.enableLegend = undefined;
     this.enableFloorFilter = undefined;
@@ -1091,7 +1231,7 @@ const MapCard = class {
   render() {
     const mapClass = this.hidden ? "visibility-hidden" : "";
     const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-    return (index.h(index.Host, null, index.h("map-picker", { mapInfos: this.mapInfos }), index.h("div", { class: `map-height ${mapClass}`, ref: (el) => (this._mapDiv = el) }), index.h("map-tools", { basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
+    return (index.h(index.Host, null, index.h("map-picker", { mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), index.h("div", { class: `map-height ${mapClass}`, ref: (el) => (this._mapDiv = el) }), index.h("map-tools", { basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableSearch: this.enableSearch, mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
   }
   //--------------------------------------------------------------------------
   //
@@ -1125,12 +1265,15 @@ const MapCard = class {
    * @protected
    */
   async _loadMap(webMapInfo) {
-    let id = webMapInfo === null || webMapInfo === void 0 ? void 0 : webMapInfo.id;
-    // on the first render use the first child of the provided mapInfos
-    this._webMapInfo = (id === "" || !id) && this.mapInfos.length > 0 ?
-      this.mapInfos[0] : webMapInfo;
-    id = this._webMapInfo.id;
-    if (this._loadedId !== id) {
+    var _a;
+    // on the first render use the default webmap id if provided otherwise use the first child of the provided mapInfos
+    const loadDefaultMap = !this._defaultWebmapHonored && this.defaultWebmapId;
+    const defaultMap = (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(i => i.id === this.defaultWebmapId);
+    this._webMapInfo = loadDefaultMap && defaultMap ? defaultMap[0] :
+      !(webMapInfo === null || webMapInfo === void 0 ? void 0 : webMapInfo.id) && this.mapInfos.length > 0 ? this.mapInfos[0] : webMapInfo;
+    const id = this._webMapInfo.id;
+    const isDefaultMap = loadDefaultMap && (webMapInfo === null || webMapInfo === void 0 ? void 0 : webMapInfo.id) === this.defaultWebmapId;
+    if ((this._loadedId !== id && !loadDefaultMap) || isDefaultMap) {
       const webMap = new this.WebMap({
         portalItem: { id }
       });
@@ -1145,12 +1288,17 @@ const MapCard = class {
       await this.mapView.when(() => {
         this._initHome();
         this.mapView.ui.add(this._mapTools, { position: "top-right", index: 0 });
+        this._defaultWebmapHonored = isDefaultMap ? true : this._defaultWebmapHonored;
         this.mapChanged.emit({
           id: id,
           mapView: this.mapView
         });
       });
     }
+    else if (loadDefaultMap) {
+      this._defaultWebmapHonored = true;
+      this._mapPicker.setMapByID(id);
+    }
   }
   /**
    * Add/remove the home widget base on enableHome prop

package/dist/cjs/component-98c27d5f.js

@@ -0,0 +1,17 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.11.0
+ */
+function getIconScale(componentScale) {
+  return componentScale === "l" ? "m" : "s";
+}
+
+exports.getIconScale = getIconScale;

package/dist/cjs/conditionalSlot-1efd1f30.js

@@ -0,0 +1,63 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+const index = require('./index-2d5760f2.js');
+const observers = require('./observers-0f180f88.js');
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.11.0
+ */
+const observed = new Set();
+let mutationObserver;
+const observerOptions = { childList: true };
+/**
+ * Helper to set up a conditional slot component on connectedCallback.
+ *
+ * @param component
+ * @deprecated Use `onSlotchange` event with `slotChangeHasAssignedElement` DOM utility instead.
+ *
+ * ```
+ * <slot onSlotchange={(event) => this.mySlotHasElement = slotChangeHasAssignedElement(event)} />}
+ * ```
+ */
+function connectConditionalSlotComponent(component) {
+  if (!mutationObserver) {
+    mutationObserver = observers.createObserver("mutation", processMutations);
+  }
+  mutationObserver.observe(component.el, observerOptions);
+}
+/**
+ * Helper to tear down a conditional slot component on disconnectedCallback.
+ *
+ * @param component
+ * @deprecated Use `onSlotchange` event with `slotChangeHasAssignedElement` DOM utility instead.
+ *
+ * ```
+ * <slot onSlotchange={(event) => this.mySlotHasElement = slotChangeHasAssignedElement(event)} />}
+ * ```
+ */
+function disconnectConditionalSlotComponent(component) {
+  observed.delete(component.el);
+  // we explicitly process queued mutations and disconnect and reconnect
+  // the observer until MutationObserver gets an `unobserve` method
+  // see https://github.com/whatwg/dom/issues/126
+  processMutations(mutationObserver.takeRecords());
+  mutationObserver.disconnect();
+  for (const [element] of observed.entries()) {
+    mutationObserver.observe(element, observerOptions);
+  }
+}
+function processMutations(mutations) {
+  mutations.forEach(({ target }) => {
+    index.forceUpdate(target);
+  });
+}
+
+exports.connectConditionalSlotComponent = connectConditionalSlotComponent;
+exports.disconnectConditionalSlotComponent = disconnectConditionalSlotComponent;

package/dist/cjs/crowdsource-manager.cjs.entry.js

@@ -23,13 +23,19 @@ const CrowdsourceManager = class {
      */
     this._shouldSetMapView = false;
     this.classicGrid = false;
+    this.defaultGlobalId = "";
+    this.defaultLayer = "";
+    this.defaultOid = "";
+    this.defaultWebmap = "";
     this.enableAutoRefresh = false;
+    this.enableColumnReorder = true;
     this.enableCSV = true;
     this.enableFloorFilter = true;
     this.enableFullscreen = true;
     this.enableInlineEdit = false;
     this.enableLegend = true;
     this.enableSearch = true;
+    this.enableShare = false;
     this.enableHome = true;
     this.enableZoom = true;
     this.enableBasemap = true;
@@ -52,6 +58,20 @@ const CrowdsourceManager = class {
   //  Watch handlers
   //
   //--------------------------------------------------------------------------
+  /**
+   * Watch for globalid url param to be set
+   */
+  defaultGlobalIdWatchHandler() {
+    this._defaultGlobalId = !this.defaultGlobalId ? undefined :
+      this.defaultGlobalId.indexOf(",") > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId];
+  }
+  /**
+   * Watch for oid url param to be set
+   */
+  defaultOidWatchHandler() {
+    this._defaultOid = !this.defaultOid ? undefined :
+      this.defaultOid.indexOf(",") > -1 ? this.defaultOid.split(",").map(o => parseInt(o, 10)) : [parseInt(this.defaultOid, 10)];
+  }
   /**
    * When true the map zoom tools will be available
    */
@@ -250,7 +270,7 @@ const CrowdsourceManager = class {
     const mapDisplayClass = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ? "display-flex height-full width-1-2" :
       layoutMode === interfaces.ELayoutMode.GRID && !hideMap ? "" : "display-none";
     const mapContainerClass = this.classicGrid && layoutMode === interfaces.ELayoutMode.GRID ? "width-full" : "adjusted-height-50";
-    return (index.h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, index.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), theme: this.theme })));
+    return (index.h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, index.h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", defaultWebmapId: this.defaultWebmap, 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), theme: this.theme })));
   }
   /**
    * Get the expand node for the popup information
@@ -306,7 +326,8 @@ const CrowdsourceManager = class {
     const toggleSlot = this.classicGrid && layoutMode !== interfaces.ELayoutMode.VERTICAL ? "footer" :
       this.classicGrid && layoutMode === interfaces.ELayoutMode.VERTICAL ? "panel-end" :
         layoutMode === interfaces.ELayoutMode.HORIZONTAL ? "header" : "panel-start";
-    return (index.h("calcite-shell", { class: tableSizeClass + " border-bottom" }, index.h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, index.h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), index.h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, index.h("span", null, tooltip))), index.h("div", { class: "width-full height-full position-relative" }, index.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 }))));
+    const hasMapAndLayer = this.defaultWebmap && this.defaultLayer;
+    return (index.h("calcite-shell", { class: tableSizeClass + " border-bottom" }, index.h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, index.h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), index.h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, index.h("span", null, tooltip))), index.h("div", { class: "width-full height-full position-relative" }, index.h("layer-table", { defaultGlobalId: hasMapAndLayer ? this._defaultGlobalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !this.defaultGlobalId ? this._defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, 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.
@@ -374,6 +395,8 @@ const CrowdsourceManager = class {
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
+    "defaultGlobalId": ["defaultGlobalIdWatchHandler"],
+    "defaultOid": ["defaultOidWatchHandler"],
     "enableZoom": ["enableZoomWatchHandler"]
   }; }
 };

package/dist/cjs/crowdsource-reporter.cjs.entry.js

@@ -14,14 +14,23 @@ const crowdsourceReporterCss = ":host{display:block}";
 const CrowdsourceReporter = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.description = undefined;
+    this.enableAnonymousAccess = undefined;
+    this.enableAnonymousComments = undefined;
+    this.enableComments = undefined;
+    this.enableLogin = undefined;
+    this.enableNewReports = undefined;
+    this.layers = undefined;
+    this.loginTitle = undefined;
+    this.mapView = undefined;
+    this.reportButtonText = undefined;
+    this.reportsHeader = undefined;
+    this.reportSubmittedMessage = undefined;
+    this.searchConfiguration = undefined;
+    this.showComments = undefined;
   }
   //--------------------------------------------------------------------------
   //
-  //  Properties (public)
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
   //  State (internal)
   //
   //--------------------------------------------------------------------------
@@ -50,14 +59,44 @@ const CrowdsourceReporter = class {
   //  Functions (lifecycle)
   //
   //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   *
+   * @returns Promise when complete
+   */
+  // async componentWillLoad(): Promise<void> {
+  //   await this._getTranslations();
+  //   await this._initModules();
+  // }
+  /**
+   * Renders the component.
+   */
   render() {
-    return (index.h(index.Host, null, index.h("slot", null)));
+    return (index.h(index.Host, null, index.h("slot", null, this.loginTitle + this.description)));
   }
   //--------------------------------------------------------------------------
   //
   //  Functions (protected)
   //
   //--------------------------------------------------------------------------
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   *
+   * @protected
+   */
+  // protected async _initModules(): Promise<void> {
+  //   const [geometryEngine, jsonUtils]: [
+  //     __esri.geometryEngine,
+  //     __esri.symbolsSupportJsonUtils
+  //   ] = await loadModules([
+  //     "esri/geometry/geometryEngine",
+  //     "esri/symbols/support/jsonUtils"
+  //   ]);
+  //   this._geometryEngine = geometryEngine;
+  //   this._jsonUtils = jsonUtils;
+  // }
   /**
    * Fetches the component's translations
    *