@esri/solutions-components 0.7.4 → 0.7.5

package/dist/components/info-card2.js

@@ -86,6 +86,12 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
     async closeEdit() {
         this._editRecordOpen = false;
     }
+    /**
+     * Refresh the info-card graphics
+     */
+    async refreshGraphics(evt) {
+        this.graphics = [...evt.detail];
+    }
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -268,7 +274,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         "_showListView": [32],
         "_translations": [32],
         "getSelectedFeature": [64]
-    }, [[8, "closeEdit", "closeEdit"]], {
+    }, [[8, "closeEdit", "closeEdit"], [8, "refreshGraphics", "refreshGraphics"]], {
         "graphics": ["graphicsWatchHandler"],
         "mapView": ["mapViewWatchHandler"]
     }]);

package/dist/components/layer-table2.js

@@ -34,7 +34,7 @@ import { d as defineCustomElement$3 } from './tooltip.js';
 import { d as defineCustomElement$2 } from './instant-apps-social-share2.js';
 import { d as defineCustomElement$1 } from './map-layer-picker2.js';
 
-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}.height-50-px{height:50px}.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:0;margin-top:9px;margin-inline-end:4px}html[dir=\"rtl\"] .share-action{left:0}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}";
+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}.height-50-px{height:50px}.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:0;margin-top:4px;margin-inline-end:4px;margin-bottom:4px}html[dir=\"rtl\"] .share-action{left:0}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}.instant-app-share{height:42px !important;display:inline-flex}";
 
 const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTMLElement {
     constructor() {
@@ -628,7 +628,7 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * @returns VNode The node representing the DOM element that will contain the action
      */
     _getShare(icon) {
-        return (h("div", { class: "share-action", id: this._getId(icon) }, h("instant-apps-social-share", { autoUpdateShareUrl: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, scale: "m", shareButtonColor: "neutral", socialMedia: true, view: this.mapView }), this._getToolTip("bottom", icon, this._translations.share)));
+        return (h("div", { class: "share-action", id: this._getId(icon) }, h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "instant-app-share", popoverButtonIconScale: "s", ref: el => this._shareNode = el, scale: "m", shareButtonColor: "neutral", socialMedia: true, view: this.mapView }), this._getToolTip("bottom", icon, this._translations.share)));
     }
     /**
      * Called each time the values that are used for custom url params change
@@ -747,11 +747,11 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
      * @returns void
      */
     async _resetTable() {
-        var _a, _b;
+        var _a;
         this._clearSelection();
         this._allIds = [];
         this.featureSelectionChange.emit(this._selectedIndexes);
-        const columnTemplates = this._getColumnTemplates(this._layer.id, (_b = (_a = this._layer) === null || _a === void 0 ? void 0 : _a.popupTemplate) === null || _b === void 0 ? void 0 : _b.fieldInfos);
+        const columnTemplates = this._getColumnTemplates(this._layer.id, (_a = this._layer) === null || _a === void 0 ? void 0 : _a.fields);
         this._allIds = await queryAllIds(this._layer);
         if (!this._table) {
             await this._getTable(this._tableNode, columnTemplates);
@@ -1082,8 +1082,8 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
         if (fieldInfos) {
             columnTemplates = columnTemplates ? columnTemplates.map(columnTemplate => {
                 fieldInfos.some(fieldInfo => {
-                    if (fieldInfo.fieldName === columnTemplate.fieldName) {
-                        columnTemplate.label = fieldInfo.label;
+                    if (fieldInfo.name === columnTemplate.fieldName) {
+                        columnTemplate.label = fieldInfo.alias;
                         return true;
                     }
                 });
@@ -1091,8 +1091,8 @@ const LayerTable = /*@__PURE__*/ proxyCustomElement(class LayerTable extends HTM
             }) : fieldInfos.map(fieldInfo => {
                 return {
                     type: "field",
-                    fieldName: fieldInfo.fieldName,
-                    label: fieldInfo.label
+                    fieldName: fieldInfo.name,
+                    label: fieldInfo.alias
                 };
             });
         }

package/dist/components/map-card2.js

@@ -144,7 +144,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
             this.mapView = new this.MapView({
                 container: this._mapDiv,
                 map: webMap,
-                resizeAlign: "top-left"
+                resizeAlign: "center"
             });
             this._loadedId = id;
             this._searchConfiguration = this._webMapInfo.searchConfiguration;

package/dist/components/map-fullscreen2.js

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
 
 const mapFullscreenCss = ":host{display:block}";
@@ -13,6 +13,7 @@ const MapFullscreen = /*@__PURE__*/ proxyCustomElement(class MapFullscreen exten
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.fullscreenStateChange = createEvent(this, "fullscreenStateChange", 7);
         this.mapView = undefined;
         this.fullscreenWidget = undefined;
     }
@@ -27,22 +28,12 @@ const MapFullscreen = /*@__PURE__*/ proxyCustomElement(class MapFullscreen exten
      * @returns Promise when complete
      */
     async mapViewWatchHandler() {
-        await this.mapView.when(() => {
-            this._initFullscreenWidget();
+        await this.mapView.when(async () => {
+            await this._initFullscreenWidget();
         });
     }
     //--------------------------------------------------------------------------
     //
-    //  Methods (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
-    //  Events (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
     //  Functions (lifecycle)
     //
     //--------------------------------------------------------------------------
@@ -63,13 +54,13 @@ const MapFullscreen = /*@__PURE__*/ proxyCustomElement(class MapFullscreen exten
      * It's never called during the first render().
      */
     async componentDidUpdate() {
-        this._initFullscreenWidget();
+        await this._initFullscreenWidget();
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
      */
     async componentDidLoad() {
-        this._initFullscreenWidget();
+        await this._initFullscreenWidget();
     }
     //--------------------------------------------------------------------------
     //
@@ -84,21 +75,29 @@ const MapFullscreen = /*@__PURE__*/ proxyCustomElement(class MapFullscreen exten
      * @protected
      */
     async _initModules() {
-        const [Fullscreen] = await loadModules([
-            "esri/widgets/Fullscreen"
+        const [Fullscreen, reactiveUtils] = await loadModules([
+            "esri/widgets/Fullscreen",
+            "esri/core/reactiveUtils"
         ]);
         this.Fullscreen = Fullscreen;
+        this.reactiveUtils = reactiveUtils;
     }
     /**
      * Initialize the search widget
      *
      * @protected
      */
-    _initFullscreenWidget() {
+    async _initFullscreenWidget() {
         if (this.mapView && this._fullscreenElement && !this.fullscreenWidget) {
             this.fullscreenWidget = new this.Fullscreen({
                 view: this.mapView
             });
+            await this.fullscreenWidget.when(() => {
+                if (this._fullscreenStateChangeHandle) {
+                    this._fullscreenStateChangeHandle.remove();
+                }
+                this._fullscreenStateChangeHandle = this.reactiveUtils.watch(() => this.fullscreenWidget.viewModel.state, (state) => this.fullscreenStateChange.emit(state));
+            });
         }
         else if (this.fullscreenWidget) {
             this.fullscreenWidget.view = this.mapView;

package/dist/components/map-tools2.js

@@ -89,10 +89,14 @@ const MapTools = /*@__PURE__*/ proxyCustomElement(class MapTools extends HTMLEle
     async _showFullscreenWatchHandler(v) {
         const fs = this._fullscreenElement.fullscreenWidget;
         if (v) {
-            fs.viewModel.enter();
+            if (fs.viewModel.state === "ready") {
+                fs.viewModel.enter();
+            }
         }
         else {
-            fs.viewModel.exit();
+            if (fs.viewModel.state === "active") {
+                fs.viewModel.exit();
+            }
         }
     }
     /**
@@ -169,7 +173,22 @@ const MapTools = /*@__PURE__*/ proxyCustomElement(class MapTools extends HTMLEle
             this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker()) :
             undefined, this.enableFloorFilter && this._hasFloorInfo ?
             this._getActionGroup("urban-model", false, this._translations.floorFilter, () => this._toggleFloorFilter()) :
-            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; }, resultGraphicEnabled: true, 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; } }), h("floor-filter", { class: floorFilterClass, enabled: this.enableFloorFilter, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
+            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; }, resultGraphicEnabled: true, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, onFullscreenStateChange: (evt) => this._fullscreenStateChange(evt.detail), ref: (el) => { this._fullscreenElement = el; } }), h("floor-filter", { class: floorFilterClass, enabled: this.enableFloorFilter, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
+    }
+    /**
+     * Respond to fullscreen state change and ensure our state var is in sync
+     *
+     * @param state The fullscreen view model's state.
+     *
+     * @protected
+     */
+    _fullscreenStateChange(state) {
+        if (state === "ready" && this._showFullscreen) {
+            this._showFullscreen = false;
+        }
+        else if (state === "active" && !this._showFullscreen) {
+            this._showFullscreen = true;
+        }
     }
     //--------------------------------------------------------------------------
     //

package/dist/esm/basemap-gallery_7.entry.js

@@ -211,6 +211,7 @@ const mapFullscreenCss = ":host{display:block}";
 const MapFullscreen = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.fullscreenStateChange = createEvent(this, "fullscreenStateChange", 7);
         this.mapView = undefined;
         this.fullscreenWidget = undefined;
     }
@@ -225,22 +226,12 @@ const MapFullscreen = class {
      * @returns Promise when complete
      */
     async mapViewWatchHandler() {
-        await this.mapView.when(() => {
-            this._initFullscreenWidget();
+        await this.mapView.when(async () => {
+            await this._initFullscreenWidget();
         });
     }
     //--------------------------------------------------------------------------
     //
-    //  Methods (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
-    //  Events (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
     //  Functions (lifecycle)
     //
     //--------------------------------------------------------------------------
@@ -261,13 +252,13 @@ const MapFullscreen = class {
      * It's never called during the first render().
      */
     async componentDidUpdate() {
-        this._initFullscreenWidget();
+        await this._initFullscreenWidget();
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
      */
     async componentDidLoad() {
-        this._initFullscreenWidget();
+        await this._initFullscreenWidget();
     }
     //--------------------------------------------------------------------------
     //
@@ -282,21 +273,29 @@ const MapFullscreen = class {
      * @protected
      */
     async _initModules() {
-        const [Fullscreen] = await loadModules([
-            "esri/widgets/Fullscreen"
+        const [Fullscreen, reactiveUtils] = await loadModules([
+            "esri/widgets/Fullscreen",
+            "esri/core/reactiveUtils"
         ]);
         this.Fullscreen = Fullscreen;
+        this.reactiveUtils = reactiveUtils;
     }
     /**
      * Initialize the search widget
      *
      * @protected
      */
-    _initFullscreenWidget() {
+    async _initFullscreenWidget() {
         if (this.mapView && this._fullscreenElement && !this.fullscreenWidget) {
             this.fullscreenWidget = new this.Fullscreen({
                 view: this.mapView
             });
+            await this.fullscreenWidget.when(() => {
+                if (this._fullscreenStateChangeHandle) {
+                    this._fullscreenStateChangeHandle.remove();
+                }
+                this._fullscreenStateChangeHandle = this.reactiveUtils.watch(() => this.fullscreenWidget.viewModel.state, (state) => this.fullscreenStateChange.emit(state));
+            });
         }
         else if (this.fullscreenWidget) {
             this.fullscreenWidget.view = this.mapView;
@@ -809,10 +808,14 @@ const MapTools = class {
     async _showFullscreenWatchHandler(v) {
         const fs = this._fullscreenElement.fullscreenWidget;
         if (v) {
-            fs.viewModel.enter();
+            if (fs.viewModel.state === "ready") {
+                fs.viewModel.enter();
+            }
         }
         else {
-            fs.viewModel.exit();
+            if (fs.viewModel.state === "active") {
+                fs.viewModel.exit();
+            }
         }
     }
     /**
@@ -889,7 +892,22 @@ const MapTools = class {
             this._getActionGroup("basemap", false, this._translations.basemap, () => this._toggleBasemapPicker()) :
             undefined, this.enableFloorFilter && this._hasFloorInfo ?
             this._getActionGroup("urban-model", false, this._translations.floorFilter, () => this._toggleFloorFilter()) :
-            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; }, resultGraphicEnabled: true, 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; } }), h("floor-filter", { class: floorFilterClass, enabled: this.enableFloorFilter, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
+            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; }, resultGraphicEnabled: true, searchConfiguration: this.searchConfiguration }), h("map-legend", { class: legendClass, mapView: this.mapView, ref: (el) => { this._legendElement = el; } }), h("map-fullscreen", { class: fullscreenClass, mapView: this.mapView, onFullscreenStateChange: (evt) => this._fullscreenStateChange(evt.detail), ref: (el) => { this._fullscreenElement = el; } }), h("floor-filter", { class: floorFilterClass, enabled: this.enableFloorFilter, mapView: this.mapView, ref: (el) => { this._floorFilterElement = el; } })));
+    }
+    /**
+     * Respond to fullscreen state change and ensure our state var is in sync
+     *
+     * @param state The fullscreen view model's state.
+     *
+     * @protected
+     */
+    _fullscreenStateChange(state) {
+        if (state === "ready" && this._showFullscreen) {
+            this._showFullscreen = false;
+        }
+        else if (state === "active" && !this._showFullscreen) {
+            this._showFullscreen = true;
+        }
     }
     //--------------------------------------------------------------------------
     //

package/dist/esm/calcite-alert_3.entry.js

@@ -314,6 +314,7 @@ const EditCard = class {
         registerInstance(this, hostRef);
         this.closeEdit = createEvent(this, "closeEdit", 7);
         this.editsComplete = createEvent(this, "editsComplete", 7);
+        this.refreshGraphics = createEvent(this, "refreshGraphics", 7);
         /**
          * boolean: When true the Editor widget should be closed
          */
@@ -384,7 +385,7 @@ const EditCard = class {
             }
             this._layerEditHandle = this._layer.on("edits", () => {
                 this.editsComplete.emit();
-                void this._closeEdit();
+                this.open = false;
             });
         }
     }
@@ -447,8 +448,7 @@ const EditCard = class {
                 },
                 container
             });
-            if (this._editHandle && this._attachmentHandle && this._activeWorkflowHandle) {
-                this._editHandle.remove();
+            if (this._attachmentHandle && this._activeWorkflowHandle) {
                 this._attachmentHandle.remove();
                 this._activeWorkflowHandle.remove();
             }
@@ -457,18 +457,13 @@ const EditCard = class {
                 this._editor.viewModel.state === "creating-features", () => {
                 this._shouldClose = false;
             });
-            this._editHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "ready", () => {
-                if (this._shouldClose) {
-                    void this._closeEdit();
-                }
-                else if (this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose) {
-                    void this._startUpdate();
-                }
-            });
             this._activeWorkflowHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.activeWorkflow) === null || _a === void 0 ? void 0 : _a.activeWorkflow; }, (activeWorkflow) => {
                 if ((activeWorkflow === null || activeWorkflow === void 0 ? void 0 : activeWorkflow.type) === "update-table-record" || (activeWorkflow === null || activeWorkflow === void 0 ? void 0 : activeWorkflow.type) === "create-features") {
                     this._shouldClose = false;
                 }
+                if (!(activeWorkflow === null || activeWorkflow === void 0 ? void 0 : activeWorkflow.type) && !(activeWorkflow === null || activeWorkflow === void 0 ? void 0 : activeWorkflow.hasPendingEdits)) {
+                    this.open = false;
+                }
             });
             // had issues with destroy before adding like this
             this._editContainer.appendChild(container);
@@ -480,12 +475,15 @@ const EditCard = class {
      * @returns void
      */
     async _closeEdit() {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this._shouldClose = true;
         if ((_a = this._editor) === null || _a === void 0 ? void 0 : _a.activeWorkflow) {
             await ((_b = this._editor) === null || _b === void 0 ? void 0 : _b.cancelWorkflow());
         }
-        (_c = this._editor) === null || _c === void 0 ? void 0 : _c.destroy();
+        if (this.graphicIndex > -1 && ((_c = this.graphics) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+            this.refreshGraphics.emit(this.graphics);
+        }
+        (_d = this._editor) === null || _d === void 0 ? void 0 : _d.destroy();
         this._shouldClose = false;
         this.closeEdit.emit();
     }
@@ -583,6 +581,12 @@ const InfoCard = class {
     async closeEdit() {
         this._editRecordOpen = false;
     }
+    /**
+     * Refresh the info-card graphics
+     */
+    async refreshGraphics(evt) {
+        this.graphics = [...evt.detail];
+    }
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)

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

@@ -102,7 +102,7 @@ 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}.height-50-px{height:50px}.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:0;margin-top:9px;margin-inline-end:4px}html[dir=\"rtl\"] .share-action{left:0}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}";
+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}.height-50-px{height:50px}.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:0;margin-top:4px;margin-inline-end:4px;margin-bottom:4px}html[dir=\"rtl\"] .share-action{left:0}.disabled{cursor:default !important;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}.instant-app-share{height:42px !important;display:inline-flex}";
 
 const LayerTable = class {
     constructor(hostRef) {
@@ -695,7 +695,7 @@ const LayerTable = class {
      * @returns VNode The node representing the DOM element that will contain the action
      */
     _getShare(icon) {
-        return (h("div", { class: "share-action", id: this._getId(icon) }, h("instant-apps-social-share", { autoUpdateShareUrl: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, scale: "m", shareButtonColor: "neutral", socialMedia: true, view: this.mapView }), this._getToolTip("bottom", icon, this._translations.share)));
+        return (h("div", { class: "share-action", id: this._getId(icon) }, h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "instant-app-share", popoverButtonIconScale: "s", ref: el => this._shareNode = el, scale: "m", shareButtonColor: "neutral", socialMedia: true, view: this.mapView }), this._getToolTip("bottom", icon, this._translations.share)));
     }
     /**
      * Called each time the values that are used for custom url params change
@@ -814,11 +814,11 @@ const LayerTable = class {
      * @returns void
      */
     async _resetTable() {
-        var _a, _b;
+        var _a;
         this._clearSelection();
         this._allIds = [];
         this.featureSelectionChange.emit(this._selectedIndexes);
-        const columnTemplates = this._getColumnTemplates(this._layer.id, (_b = (_a = this._layer) === null || _a === void 0 ? void 0 : _a.popupTemplate) === null || _b === void 0 ? void 0 : _b.fieldInfos);
+        const columnTemplates = this._getColumnTemplates(this._layer.id, (_a = this._layer) === null || _a === void 0 ? void 0 : _a.fields);
         this._allIds = await queryAllIds(this._layer);
         if (!this._table) {
             await this._getTable(this._tableNode, columnTemplates);
@@ -1149,8 +1149,8 @@ const LayerTable = class {
         if (fieldInfos) {
             columnTemplates = columnTemplates ? columnTemplates.map(columnTemplate => {
                 fieldInfos.some(fieldInfo => {
-                    if (fieldInfo.fieldName === columnTemplate.fieldName) {
-                        columnTemplate.label = fieldInfo.label;
+                    if (fieldInfo.name === columnTemplate.fieldName) {
+                        columnTemplate.label = fieldInfo.alias;
                         return true;
                     }
                 });
@@ -1158,8 +1158,8 @@ const LayerTable = class {
             }) : fieldInfos.map(fieldInfo => {
                 return {
                     type: "field",
-                    fieldName: fieldInfo.fieldName,
-                    label: fieldInfo.label
+                    fieldName: fieldInfo.name,
+                    label: fieldInfo.alias
                 };
             });
         }
@@ -1302,7 +1302,7 @@ const MapCard = class {
             this.mapView = new this.MapView({
                 container: this._mapDiv,
                 map: webMap,
-                resizeAlign: "top-left"
+                resizeAlign: "center"
             });
             this._loadedId = id;
             this._searchConfiguration = this._webMapInfo.searchConfiguration;

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

@@ -20,8 +20,10 @@ const CrowdsourceManager = class {
          */
         this._shouldSetMapView = false;
         this.classicGrid = false;
+        this.defaultCenter = "";
         this.defaultGlobalId = "";
         this.defaultLayer = "";
+        this.defaultLevel = "";
         this.defaultOid = "";
         this.defaultWebmap = "";
         this.enableAutoRefresh = false;
@@ -55,6 +57,13 @@ const CrowdsourceManager = class {
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Watch for center url param to be set
+     */
+    defaultCenterWatchHandler() {
+        this._defaultCenter = !this.defaultCenter ? undefined :
+            this.defaultCenter.split(";").map(v => parseFloat(v));
+    }
     /**
      * Watch for globalid url param to be set
      */
@@ -69,6 +78,12 @@ const CrowdsourceManager = class {
         this._defaultOid = !this.defaultOid ? undefined :
             this.defaultOid.indexOf(",") > -1 ? this.defaultOid.split(",").map(o => parseInt(o, 10)) : [parseInt(this.defaultOid, 10)];
     }
+    /**
+     * Watch for zoom level param to be set
+     */
+    defaultLevelWatchHandler() {
+        this._defaultLevel = !this.defaultLevel ? undefined : parseInt(this.defaultLevel, 10);
+    }
     /**
      * When true the map zoom tools will be available
      */
@@ -96,8 +111,8 @@ const CrowdsourceManager = class {
      */
     async mapChanged(evt) {
         this._mapChange = evt.detail;
-        await this._mapChange.mapView.when(() => {
-            this._setMapView();
+        await this._mapChange.mapView.when(async () => {
+            await this._setMapView();
         });
     }
     /**
@@ -132,10 +147,10 @@ const CrowdsourceManager = class {
      * Called after each render
      * Used to delay the setting of the mapView when the popup is expaneded and obstructs the view
      */
-    componentDidRender() {
+    async componentDidRender() {
         if (this._shouldSetMapView) {
             this._shouldSetMapView = false;
-            this._setMapView();
+            await this._setMapView();
         }
     }
     //--------------------------------------------------------------------------
@@ -357,11 +372,19 @@ const CrowdsourceManager = class {
      *
      * @protected
      */
-    _setMapView() {
+    async _setMapView() {
         this._mapInfo = this._getMapInfo(this._mapChange.id);
         this._mapView = this._mapChange.mapView;
         this._initMapZoom();
         this._mapView.popupEnabled = false;
+        if (this._defaultCenter && this._defaultLevel) {
+            await this._mapView.goTo({
+                center: this._defaultCenter,
+                zoom: this._defaultLevel
+            });
+            this._defaultCenter = undefined;
+            this._defaultLevel = undefined;
+        }
     }
     /**
      * Add/remove zoom tools based on enableZoom prop
@@ -392,8 +415,10 @@ const CrowdsourceManager = class {
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "defaultCenter": ["defaultCenterWatchHandler"],
         "defaultGlobalId": ["defaultGlobalIdWatchHandler"],
         "defaultOid": ["defaultOidWatchHandler"],
+        "defaultLevel": ["defaultLevelWatchHandler"],
         "enableZoom": ["enableZoomWatchHandler"]
     }; }
 };