@esri/solutions-components 0.8.5 → 0.8.6-6.2

package/dist/collection/components/layer-table/layer-table.js

@@ -21,8 +21,8 @@
 import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 import { getLocaleComponentStrings } from "../../utils/locale";
-import { getLayerOrTable, goToSelection } from "../../utils/mapViewUtils";
-import { queryAllIds, queryFeatureIds, queryFeaturesByGlobalID } from "../../utils/queryUtils";
+import { getFeatureLayerView, getLayerOrTable, goToSelection } from "../../utils/mapViewUtils";
+import { queryAllIds, queryAllOidsWithQueryFeatures, queryFeaturesByGlobalID } from "../../utils/queryUtils";
 import * as downloadUtils from "../../utils/downloadUtils";
 import "@esri/instant-apps-components/dist/components/instant-apps-social-share";
 export class LayerTable {
@@ -43,10 +43,18 @@ export class LayerTable {
          * boolean: When true the default OID provided via url param has been honored and should now be ignored
          */
         this._defaultOidHonored = false;
+        /**
+         * boolean: When true the table has been successfully loaded
+         */
+        this._loaded = false;
         /**
          * boolean: When true the observer has been set and we don't need to set it again
          */
         this._observerSet = false;
+        /**
+         * boolean: When true the current selection was done via the map and we will ignore shift->Select
+         */
+        this._selectionFromMap = false;
         /**
          * boolean: When true the shift key is currently pressed
          */
@@ -73,6 +81,7 @@ export class LayerTable {
         this.enableInlineEdit = undefined;
         this.enableShare = undefined;
         this.isMobile = undefined;
+        this.mapHidden = undefined;
         this.mapInfo = undefined;
         this.mapView = undefined;
         this.onlyShowUpdatableLayers = undefined;
@@ -81,6 +90,7 @@ export class LayerTable {
         this.shareIncludeSocial = undefined;
         this.showNewestFirst = undefined;
         this.zoomAndScrollToSelected = undefined;
+        this.zoomToScale = undefined;
         this._allIds = [];
         this._controlsThatFit = undefined;
         this._csvExporting = false;
@@ -155,6 +165,15 @@ export class LayerTable {
             }
         });
     }
+    /**
+     * Reset the toolInfos when mapHidden prop changes so we can show/hide any map dependant tool(s)
+     */
+    mapHiddenWatchHandler() {
+        var _a;
+        if (((_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            this._initToolInfos();
+        }
+    }
     /**
      * When isMobile is false we need to init the tool infos for the dynamic toolbar
      */
@@ -171,6 +190,7 @@ export class LayerTable {
         this._initLayerExpressions();
         this._initToolInfos();
         this._updateToolbar();
+        await this._sortTable();
     }
     /**
      * watch for changes in map view and get the first layer
@@ -213,6 +233,10 @@ export class LayerTable {
         if (this._selectAllActive && this.selectedIds.length !== this._allIds.length) {
             this._selectAllActive = false;
         }
+        if (this.selectedIds.length > 0) {
+            this._table.rowHighlightIds.removeAll();
+            this._table.rowHighlightIds.add(this.selectedIds[0]);
+        }
     }
     /**
      * Scroll and zoom to the selected feature from the Features widget.
@@ -220,8 +244,14 @@ export class LayerTable {
      * @param evt CustomEvent the graphic for the current selection
      */
     async selectionChanged(evt) {
-        const g = evt.detail[0];
+        const g = evt.detail.selectedFeature[0];
         const oid = g.getObjectId();
+        //Highlight the current selected feature in the table using rowHighlightIds
+        const table = this._table;
+        if (table.rowHighlightIds.length) {
+            table.rowHighlightIds.removeAll();
+        }
+        table.rowHighlightIds.add(oid);
         if (this.zoomAndScrollToSelected) {
             const i = this._table.viewModel.getObjectIdIndex(oid);
             this._table.scrollToIndex(i);
@@ -235,7 +265,7 @@ export class LayerTable {
                 }
             });
             if (layerView) {
-                await goToSelection([oid], layerView, this.mapView, true);
+                await goToSelection([oid], layerView, this.mapView, true, undefined, this.zoomToScale);
             }
         }
     }
@@ -306,7 +336,7 @@ export class LayerTable {
         const selected = this.selectedIds.length.toString();
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         this._validateActiveActions();
-        return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: `width-full ${tableHeightClass}` }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '547a08c45cc3a0b0bdb5ab841ee202d2d43018dc' }, h("calcite-shell", { key: '7ac39e863586727df7685eb5c3faffd87c46bf9d' }, this._getTableControlRow("header"), h("div", { key: '322dc4820b17365f3f202ce43d85330d25081eb5', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '764955f3cf9371a5ff554821613fffbc9e0bd705', class: "height-full width-full" }, h("calcite-loader", { key: '031fc6520de11b166111626501f0208f1b69c9ff', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '8d62258ee356fdf6bc6c03f88848a32270ce5eed', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
             .replace("{{selected}}", selected))) : undefined)), this._filterModal()));
     }
@@ -377,7 +407,7 @@ export class LayerTable {
     _getActionBar() {
         const containerClass = this.isMobile ? "width-full" : "";
         const mobileClass = this.isMobile ? "border-top" : "";
-        return (h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), !this.isMobile ? this._getActions() : undefined));
+        return (h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onLayerSelectionChange: (evt) => void this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), !this.isMobile ? this._getActions() : undefined));
     }
     /**
      * Get the actions that are used for various interactions with the table
@@ -469,7 +499,8 @@ export class LayerTable {
         const featuresEmpty = this._featuresEmpty();
         const hasFilterExpressions = this._hasFilterExpressions();
         if (this._translations) {
-            this._toolInfos = [{
+            this._toolInfos = [
+                !this.mapHidden ? {
                     active: false,
                     icon: "zoom-to-object",
                     indicator: false,
@@ -477,7 +508,7 @@ export class LayerTable {
                     func: () => this._zoom(),
                     disabled: !featuresSelected,
                     isOverflow: false
-                },
+                } : undefined,
                 hasFilterExpressions ? {
                     active: false,
                     icon: "filter",
@@ -555,7 +586,8 @@ export class LayerTable {
                     disabled: false,
                     isOverflow: false,
                     isSublist: true
-                }];
+                }
+            ];
             this._defaultVisibleToolSizeInfos = undefined;
         }
     }
@@ -881,7 +913,7 @@ export class LayerTable {
     async _handleOnChange(evt) {
         const ids = [...this._table.highlightIds.toArray()];
         if (!this._skipOnChange) {
-            if (!this._ctrlIsPressed && !this._shiftIsPressed) {
+            if ((!this._ctrlIsPressed && !this._shiftIsPressed) || (this._selectionFromMap && this._shiftIsPressed)) {
                 if (this.selectedIds.length > 0) {
                     this._skipOnChange = true;
                     // only readd in specific case where we have multiple selected and then click one of the currently selected
@@ -904,46 +936,41 @@ export class LayerTable {
             else if (this._ctrlIsPressed) {
                 this.selectedIds = ids.reverse();
             }
-            else if (this._shiftIsPressed) {
+            else if (this._shiftIsPressed && (ids === null || ids === void 0 ? void 0 : ids.length) > 0) {
                 this._skipOnChange = true;
                 this._previousCurrentId = this._currentId;
-                this._currentId = [...this._table.highlightIds.toArray()].reverse()[0];
-                if (this._previousCurrentId !== this._currentId) {
+                this._currentId = [...ids].reverse()[0];
+                if (ids.length === 1) {
+                    this._skipOnChange = false;
+                }
+                else if (this._previousCurrentId !== this._currentId) {
                     // query the layer based on current sort and filters then grab between the current id and previous id
                     const orderBy = this._table.activeSortOrders.reduce((prev, cur) => {
                         prev.push(`${cur.fieldName} ${cur.direction}`);
                         return prev;
                     }, []);
-                    const oids = await queryFeatureIds(this._layer, this._layer.definitionExpression, orderBy);
+                    const oids = await queryAllOidsWithQueryFeatures(0, this._layer, [], orderBy);
                     let isBetween = false;
                     const _start = this._table.viewModel.getObjectIdIndex(this._previousCurrentId);
                     const _end = this._table.viewModel.getObjectIdIndex(this._currentId);
                     const startIndex = _start < _end ? _start : _end;
                     const endIndex = _end > _start ? _end : _start;
                     this._skipOnChange = startIndex + 1 !== endIndex;
-                    const selectedIds = oids.reduce((prev, cur) => {
+                    const idsInRange = oids.reduce((prev, cur) => {
                         const id = cur;
-                        const index = this._table.viewModel.getObjectIdIndex(id);
                         if ((id === this._currentId || id === this._previousCurrentId)) {
                             isBetween = !isBetween;
                             if (prev.indexOf(id) < 0) {
                                 prev.push(id);
                             }
                         }
-                        // The oids are sorted so after we have reached the start or end oid add all ids even if the index is -1.
-                        // Index of -1 will occur for features between the start and and oid if
-                        // you select a row then scroll faster than the FeatureTable loads the data to select the next id
-                        if (isBetween && prev.indexOf(id) < 0) {
-                            prev.push(id);
-                        }
-                        // Also add index based check.
-                        // In some cases the FeatureTable and Layer query will have differences in how null/undefined field values are sorted
-                        if ((this.selectedIds.indexOf(id) > -1 || (index >= startIndex && index <= endIndex)) && prev.indexOf(id) < 0 && index > -1) {
+                        else if (isBetween && prev.indexOf(id) < 0) {
                             prev.push(id);
                         }
                         return prev;
                     }, []);
-                    this.selectedIds = _start < _end ? selectedIds.reverse() : selectedIds;
+                    const selectedIds = _start < _end ? idsInRange.reverse() : idsInRange;
+                    this.selectedIds = [...new Set([...selectedIds, ...this.selectedIds])];
                     this._table.highlightIds.addMany(this.selectedIds.filter(i => ids.indexOf(i) < 0));
                 }
             }
@@ -953,6 +980,7 @@ export class LayerTable {
             this._skipOnChange = false;
         }
         this._currentId = [...this._table.highlightIds.toArray()].reverse()[0];
+        this._selectionFromMap = false;
     }
     /**
      * Handle any updates after a selection change has occured and emit the results
@@ -991,6 +1019,7 @@ export class LayerTable {
      */
     async _resetTable() {
         var _a;
+        this._loaded = false;
         this._clearSelection();
         this._allIds = await queryAllIds(this._layer);
         if (!this._table) {
@@ -1004,8 +1033,27 @@ export class LayerTable {
         await this._initLayerRefresh();
         this._checkEditEnabled();
         this._table.editingEnabled = this._editEnabled && this.enableInlineEdit;
+        await this._table.when();
+        // This is a workaround.
+        // In some cases the first time the app is loaded this._table.state === "loaded" is not being hit.
+        // When this issue occurs we will wait for 1 second and attempt to finish the loading process
+        setTimeout(() => {
+            if (!this._loaded) {
+                console.log(`table.state: ${this._table.state}`);
+                void this.finishLoading();
+            }
+        }, 1000);
         await this.reactiveUtils.once(() => this._table.state === "loaded")
             .then(async () => {
+            await this.finishLoading();
+        });
+    }
+    /**
+     * Finish the table loading tasks
+     */
+    async finishLoading() {
+        try {
+            this._loaded = true;
             this._table.highlightIds.removeAll();
             this._table.clearSelectionFilter();
             this._resetColumnTemplates();
@@ -1014,7 +1062,10 @@ export class LayerTable {
             await this._sortTable();
             this._initToolInfos();
             this._updateToolbar();
-        });
+        }
+        catch (e) {
+            console.log(e);
+        }
     }
     /**
      * Update the current IDs when that layers data is modified
@@ -1106,13 +1157,31 @@ export class LayerTable {
         this._deleteEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsDelete;
     }
     /**
-     * Sort the objectid field in descending order
+     * Sort the table with the configured field and the sort order
      */
     async _sortTable() {
-        if (this._table && this._layer && this.showNewestFirst) {
+        var _a, _b, _c, _d, _e, _f;
+        //By default sort the table using objectIdField and in descending order
+        let sortField = (_a = this._layer) === null || _a === void 0 ? void 0 : _a.objectIdField;
+        let sortOrder = 'desc';
+        let configuredLayer;
+        //get the sortField and sortOrder from the configuration
+        if (((_d = (_c = (_b = this.mapInfo) === null || _b === void 0 ? void 0 : _b.layerOptions) === null || _c === void 0 ? void 0 : _c.layers) === null || _d === void 0 ? void 0 : _d.length) > 0 && ((_e = this._layer) === null || _e === void 0 ? void 0 : _e.id)) {
+            configuredLayer = this.mapInfo.layerOptions.layers.filter((layer) => layer.id === this._layer.id);
+            if (configuredLayer && configuredLayer.length > 0) {
+                configuredLayer = configuredLayer[0];
+                //if sort field is defined and sortField is available in the fields then use it
+                if (configuredLayer.sortField && ((_f = configuredLayer.fields) === null || _f === void 0 ? void 0 : _f.includes(configuredLayer.sortField))) {
+                    sortField = configuredLayer.sortField;
+                }
+                //use sort order if configured
+                sortOrder = (configuredLayer === null || configuredLayer === void 0 ? void 0 : configuredLayer.sortOrder) ? configuredLayer.sortOrder : "desc";
+            }
+        }
+        if (this._table && this._layer) {
             await this._table.when();
             await this._layer.when(() => {
-                this._table.sortColumn(this._layer.objectIdField, "desc");
+                this._table.sortColumn(sortField, sortOrder);
             });
         }
     }
@@ -1225,6 +1294,7 @@ export class LayerTable {
                 const id = result.graphic.getObjectId();
                 const index = this._table.highlightIds.indexOf(id);
                 if (index < 0) {
+                    this._selectionFromMap = true;
                     this._table.highlightIds.add(id);
                 }
             });
@@ -1265,9 +1335,10 @@ export class LayerTable {
      * Clears the selected indexes
      */
     _clearSelection() {
-        var _a;
+        var _a, _b;
         this.selectedIds = [];
         (_a = this._table) === null || _a === void 0 ? void 0 : _a.highlightIds.removeAll();
+        (_b = this._table) === null || _b === void 0 ? void 0 : _b.rowHighlightIds.removeAll();
         this._finishOnChange();
     }
     /**
@@ -1358,8 +1429,11 @@ export class LayerTable {
      *
      * @returns a promise that will resolve when the operation is complete
      */
-    _zoom() {
-        this._table.zoomToSelection();
+    async _zoom() {
+        if (this._layer) {
+            const selectedLayerView = await getFeatureLayerView(this.mapView, this._layer.id);
+            await goToSelection(this.selectedIds, selectedLayerView, this.mapView, true, undefined, this.zoomToScale);
+        }
     }
     /**
      * Handles layer selection change to show new table
@@ -1438,7 +1512,7 @@ export class LayerTable {
             items: [
                 {
                     label: this._translations.hideField,
-                    iconClass: "esri-icon-non-visible",
+                    icon: "view-hide",
                     autoCloseMenu: true,
                     clickFunction: () => {
                         this._handleHideClick(name);
@@ -1632,6 +1706,23 @@ export class LayerTable {
                 "attribute": "is-mobile",
                 "reflect": false
             },
+            "mapHidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: when true the map is hidden and map specific controls should be hidden"
+                },
+                "attribute": "map-hidden",
+                "reflect": false
+            },
             "mapInfo": {
                 "type": "unknown",
                 "mutable": false,
@@ -1773,6 +1864,23 @@ export class LayerTable {
                 },
                 "attribute": "zoom-and-scroll-to-selected",
                 "reflect": false
+            },
+            "zoomToScale": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "number: default scale to zoom to when zooming to a single point feature"
+                },
+                "attribute": "zoom-to-scale",
+                "reflect": false
             }
         };
     }
@@ -1830,6 +1938,9 @@ export class LayerTable {
             }, {
                 "propName": "_controlsThatFit",
                 "methodName": "_controlsThatFitWatchHandler"
+            }, {
+                "propName": "mapHidden",
+                "methodName": "mapHiddenWatchHandler"
             }, {
                 "propName": "isMobile",
                 "methodName": "isMobileWatchHandler"

package/dist/collection/components/layout-manager/layout-manager.js

@@ -51,7 +51,7 @@ export class LayoutManager {
      * Renders the component.
      */
     render() {
-        return (h(Host, null, h("div", { class: "display-flex" }, h("div", { class: "display-flex action-center" }, h("calcite-icon", { class: "icon icon-color", icon: "information", id: "app-information-icon", scale: "s" }), h("calcite-popover", { closable: true, label: "", referenceElement: "app-information-icon" }, h("span", { class: "tooltip-message" }, this._translations.appInfo))), h("div", { class: "header-text" }, this._translations.layout), this._getAction("grid-background", ELayoutMode.GRID, this._translations.grid), this._getAction("vertical-background", ELayoutMode.VERTICAL, this._translations.vertical), this._getAction("horizontal-background", ELayoutMode.HORIZONTAL, this._translations.horizontal))));
+        return (h(Host, { key: '10b8c1f7ee9503c4bd7cb1bbbd8b58cb5009336f' }, h("div", { key: '39ae898c19e24746bfa5f7510006e368f37fe7d5', class: "display-flex" }, h("div", { key: '0080f9562ab26665e26a8447e4484d76e4861f9f', class: "display-flex action-center" }, h("calcite-icon", { key: 'cc941eede331c518fe0944e2bf4b46b0c9799f0c', class: "icon icon-color", icon: "information", id: "app-information-icon", scale: "s" }), h("calcite-popover", { key: 'd92ccbe95f58f15964fd8b5d0d1446216ef780a7', closable: true, label: "", referenceElement: "app-information-icon" }, h("span", { key: '37d306563b80589652c25809233063c60035397b', class: "tooltip-message" }, this._translations.appInfo))), h("div", { key: 'e33a33071990cd0edb32e1c76505ddcc834ae932', class: "header-text" }, this._translations.layout), this._getAction("grid-background", ELayoutMode.GRID, this._translations.grid), this._getAction("vertical-background", ELayoutMode.VERTICAL, this._translations.vertical), this._getAction("horizontal-background", ELayoutMode.HORIZONTAL, this._translations.horizontal))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/list-flow-item/list-flow-item.js

@@ -56,7 +56,7 @@ export class ListFlowItem {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, null, h("slot", null)));
+        return (h(Host, { key: '6691ddbcebb6a78570c1a7d1317aadcccf51c6e3' }, h("slot", { key: 'bca9498b533fa13dfc5d85b690a0cc0d80fef1b8' })));
     }
     static get is() { return "list-flow-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/location-flow-item/location-flow-item.js

@@ -56,7 +56,7 @@ export class LocationFlowItem {
     //
     //--------------------------------------------------------------------------
     render() {
-        return (h(Host, null, h("slot", null)));
+        return (h(Host, { key: '4338ca2001ca75d9994cc468c3d4216724e18a36' }, h("slot", { key: 'fc9dbfade945c848e3b3c259250d7a1c02f7431d' })));
     }
     static get is() { return "location-flow-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/map-card/map-card.js

@@ -99,7 +99,7 @@ export class MapCard {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
         const mapPickerClass = ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) > 1 ? "" : "display-none";
         const mapHeightClass = ((_b = this.mapInfos) === null || _b === void 0 ? void 0 : _b.length) > 1 ? "map-height" : "height-full";
-        return (h(Host, null, h("map-picker", { class: mapPickerClass, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: this.enableSingleExpand, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
+        return (h(Host, { key: '4f5c0cd408f92856ceb2ba281a02856064ef6a5a' }, h("map-picker", { key: 'f69742384dc5ba13bbf257592cc8c35de77590f0', class: mapPickerClass, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { key: '3ddddf3f674d49ae59fe627af1c67ec59718c9a3', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { key: '6cb9518e74af0594ab6b657f0caec3598c250cb2', basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: this.enableSingleExpand, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
     }
     //--------------------------------------------------------------------------
     //
@@ -168,7 +168,7 @@ export class MapCard {
         }
         else if (loadDefaultMap) {
             this._defaultWebmapHonored = true;
-            this._mapPicker.setMapByID(id);
+            void this._mapPicker.setMapByID(id);
         }
         else if (mapConfigChanged) {
             // Map is the same so no need to reload but we need to update for any changes from the config

package/dist/collection/components/map-draw-tools/map-draw-tools.js

@@ -121,7 +121,7 @@ export class MapDrawTools {
             "border" : "border esri-widget esri-sketch__panel";
         const undoRedoClass = this.drawMode === EDrawMode.SKETCH ?
             "display-none" : "esri-widget esri-sketch__panel border-left esri-sketch__section";
-        return (h(Host, null, h("div", { class: containerClass }, h("div", { ref: (el) => { this._sketchElement = el; } }), h("div", { class: undoRedoClass }, h("calcite-action", { disabled: !this.undoEnabled, icon: "undo", onClick: () => this._undo(), scale: "s", text: this._translations.undo }), h("calcite-action", { disabled: !this.redoEnabled, icon: "redo", onClick: () => this._redo(), scale: "s", text: this._translations.redo })))));
+        return (h(Host, { key: '1f9544ac97df4b51337260e1bb7cf3b5d923fa03' }, h("div", { key: 'eca20834d2eacf3cc4a30e6ecf15a2f8d894cb8f', class: containerClass }, h("div", { key: '32bbaf5a03251c035821880231acb894a452b8dd', ref: (el) => { this._sketchElement = el; } }), h("div", { key: 'cd446419c2b7d347711a48851baec46f24d20375', class: undoRedoClass }, h("calcite-action", { key: '03ce63c7805c1cc1b63e78336ba624199eef3336', disabled: !this.undoEnabled, icon: "undo", onClick: () => this._undo(), scale: "s", text: this._translations.undo }), h("calcite-action", { key: '0d688389277586163c589561865ab7778021ac10', disabled: !this.redoEnabled, icon: "redo", onClick: () => this._redo(), scale: "s", text: this._translations.redo })))));
     }
     //--------------------------------------------------------------------------
     //
@@ -170,7 +170,7 @@ export class MapDrawTools {
         }
         else {
             this._sketchGraphicsLayer = new this.GraphicsLayer({ title, listMode: "hide" });
-            state.managedLayers.push(title);
+            state.managedLayers[title] = "sketch";
             this.mapView.map.layers.add(this._sketchGraphicsLayer);
         }
         if (this.graphics && this.graphics.length > 0) {

package/dist/collection/components/map-fullscreen/map-fullscreen.js

@@ -55,7 +55,7 @@ export class MapFullscreen {
      * Renders the component.
      */
     render() {
-        return (h(Host, null, h("div", { class: "fullscreen-widget", ref: (el) => { this._fullscreenElement = el; } })));
+        return (h(Host, { key: '943217d26f3cf5861c165c3300ba24736ce8f7dc' }, h("div", { key: '6c76ebf6e63dab19f24d776cd27cd86b74ea93d0', class: "fullscreen-widget", ref: (el) => { this._fullscreenElement = el; } })));
     }
     /**
      * StencilJS: Called just after the component updates.

package/dist/collection/components/map-layer-picker/map-layer-picker.js

@@ -97,7 +97,7 @@ export class MapLayerPicker {
         const id = "map-layer-picker";
         let style = this.height > 0 ? { "height": `${this.height.toString()}px` } : {};
         style = Object.assign(Object.assign({}, style), { "display": this.display });
-        return (h(Host, null, h("div", { class: "map-layer-picker-container", style: style }, h("div", { class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
+        return (h(Host, { key: 'a96e93924530d926c5e10dd2f7212f3f8c1cbe3c' }, h("div", { key: '4b96a73e43e86c31291e4ac60eb15976b01de6a2', class: "map-layer-picker-container", style: style }, h("div", { key: 'e75c61d8ce0853814dd3903b9e1952cc613b6fbb', class: "map-layer-picker", style: style }, !this._hasValidLayers ? this._getInvalidPlaceholder() :
             !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() :
                 this.type === "combobox" ? this._getCombobox(id) :
                     this.type === "select" ? this._getSelect(id) : this._getDropdown(id)))));
@@ -297,7 +297,7 @@ export class MapLayerPicker {
     _validLayer(id) {
         var _a;
         const name = (_a = this._layerNameHash[id]) === null || _a === void 0 ? void 0 : _a.name;
-        return name && state.managedLayers.indexOf(name) < 0 && (this.enabledLayerIds.length > 0 ?
+        return name && Object.keys(state.managedLayers).indexOf(name) < 0 && (this.enabledLayerIds.length > 0 ?
             this.enabledLayerIds.indexOf(id) > -1 : true);
     }
     /**

package/dist/collection/components/map-legend/map-legend.js

@@ -60,7 +60,7 @@ export class MapLegend {
      * StencilJS: Renders the component.
      */
     render() {
-        return (h(Host, null, h("div", { ref: (el) => { this._legendElement = el; } })));
+        return (h(Host, { key: 'bdd3b848bec1aec6f8c7676f8bab5e9463b16064' }, h("div", { key: 'd7bb217db6971758ef8774d19d6ac5cfa94a0ddc', ref: (el) => { this._legendElement = el; } })));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.

package/dist/collection/components/map-picker/map-picker.js

@@ -82,7 +82,7 @@ export class MapPicker {
      * Renders the component.
      */
     render() {
-        return (h(Host, null, this._getToolbar(), this._getMapNameList(this._mapListExpanded)));
+        return (h(Host, { key: '86994e2c4d87809c1508b073c3af1c0975c2d81d' }, this._getToolbar(), this._getMapNameList(this._mapListExpanded)));
     }
     /**
      * Called once after the component has loaded

package/dist/collection/components/map-search/map-search.js

@@ -83,7 +83,7 @@ export class MapSearch {
      * Renders the component.
      */
     render() {
-        return (h(Host, null, h("div", { class: "search-widget", ref: (el) => { this._searchElement = el; } })));
+        return (h(Host, { key: '5036a89c6a686b2486ff88dffd06f0bed1ea510e' }, h("div", { key: '4c5ede4d9877ff0ca0f16706c99aba354df21fd1', class: "search-widget", ref: (el) => { this._searchElement = el; } })));
     }
     //--------------------------------------------------------------------------
     //