@esri/solutions-components 0.10.49 → 0.11.1

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

@@ -64,6 +64,7 @@ export class LayerTable {
         this._fullTextSearchInfo = undefined;
         this._searchPlaceHolder = '';
         this._size = 0;
+        this._queryingData = false;
     }
     //--------------------------------------------------------------------------
     //
@@ -124,6 +125,11 @@ export class LayerTable {
      * boolean: When false alerts will be shown to indicate that the layer must have delete and editing enabled
      */
     _deleteEnabled;
+    /**
+     * esri/widgets/Editor: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Editor.html
+     * The Editor instance
+     */
+    _editor;
     /**
      * HTMLInstantAppsFilterListElement: Component from Instant Apps that supports interacting with the current filter config
      */
@@ -232,6 +238,10 @@ export class LayerTable {
      * string the current search expression
      */
     _searchExpression;
+    /**
+     * boolean: When true we will not evaluate if the editor has any pending edits
+     */
+    _skipEditCheck = false;
     /**
      * number[]: selected features from table
      */
@@ -389,6 +399,12 @@ export class LayerTable {
     //  Methods (public)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Closes the filter
+     */
+    async closeFilter() {
+        await this._closeFilter();
+    }
     /**
      * Reset the filter
      */
@@ -402,10 +418,10 @@ export class LayerTable {
         await this._handleFilterUpdate(active);
     }
     /**
-     * Closes the filter
+     * Validate if the editor has any pending edits
      */
-    async closeFilter() {
-        await this._closeFilter();
+    async validateActiveEdits() {
+        return this._validateActiveEdits([], this.selectedIds);
     }
     /**
      * refresh the feature table
@@ -432,6 +448,29 @@ export class LayerTable {
      * Emitted on demand when when the delete dialog should be shown
      */
     showDelete;
+    /**
+     * Listen for changes to map info and load the appropriate map
+     */
+    async beforeMapInfoChange(evt) {
+        const mapPicker = evt.detail.ref;
+        const mapInfo = evt.detail.mapInfo;
+        const hasPendingEdits = this._hasPendingEdits();
+        if (hasPendingEdits) {
+            evt.preventDefault();
+            const editsDiscarded = await this._validateActiveEdits([], this.selectedIds);
+            await mapPicker.setMapByID(editsDiscarded ? mapInfo.id : evt.detail.currentId, !editsDiscarded);
+        }
+    }
+    /**
+     * Get the Editor instance after it's been initialized
+     *
+     * @param evt CustomEvent that contains the editor instance
+     *
+     * @returns a promise when the operation has completed
+     */
+    async editorInitialized(evt) {
+        this._editor = evt.detail;
+    }
     /**
      * Scroll and zoom to the selected feature from the Features widget.
      *
@@ -463,6 +502,21 @@ export class LayerTable {
             }
         }
     }
+    /**
+     * Handles before layer selection change
+     *
+     * @param evt CustomEvent the id for the current layer
+     */
+    async beforeLayerSelectionChange(evt) {
+        const hasPendingEdits = this._hasPendingEdits();
+        if (hasPendingEdits) {
+            evt.preventDefault();
+            const mapLayerPicker = evt.detail.ref;
+            const editsDiscarded = await this._validateActiveEdits([], this.selectedIds);
+            return evt.detail.selectedIds ? await mapLayerPicker.setLayerByIds(editsDiscarded ? evt.detail.newIds : evt.detail.currentIds, true)
+                : await mapLayerPicker.setLayerById(editsDiscarded ? evt.detail.newId : evt.detail.currentId, true);
+        }
+    }
     /**
      * Handles layer selection change to show new table
      *
@@ -505,7 +559,7 @@ export class LayerTable {
     /**
      * Refresh the table when
      */
-    noLayersFound() {
+    async noLayersFound() {
         this._layer = undefined;
         this._allIds = [];
         this._clearSelection();
@@ -513,8 +567,11 @@ export class LayerTable {
     /**
      * Clears the selection from table
      */
-    clearSelection() {
-        this._clearSelection();
+    async clearSelection() {
+        const editsDiscarded = await this._validateActiveEdits([], this.selectedIds);
+        if (editsDiscarded) {
+            this._clearSelection();
+        }
     }
     //--------------------------------------------------------------------------
     //
@@ -540,15 +597,16 @@ export class LayerTable {
     render() {
         const tableNodeClass = this._fetchingData ? "display-none" : "";
         const loadingClass = this._fetchingData ? "" : "display-none";
+        const scrimClass = this._queryingData ? "" : "display-none";
         const total = this._size.toString();
         const selected = this.selectedIds.length.toString();
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         const showSearch = this._canShowFullTextSearch();
         this._validateActiveActions();
-        return (h(Host, { key: 'ade26bd309af37b5b9f9bdc355f1cf6c575fa89a' }, h("calcite-shell", { key: '95668ae72cde1a3600e17a0d138ba8b810a4c525' }, this._getTableControlRow("header"), h("div", { key: '488eabfc4666c0d81aacbac523e7ba20288a4701', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '75d01c41afbb872f57472adc76045431163c0cab', class: "height-full width-full" }, showSearch &&
-            h("div", { key: 'b6062ca6e5702fc835777a6fe6ecec7a66926bc0', class: "search-container" }, h("calcite-input", { key: 'eade11ccb0d7b6d5aed838dbb6b2eaec4286d8c6', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), h("calcite-loader", { key: '889c97b23074f5be4b045199cf48632720d6c598', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '4ac0bfdaf07c38ff57008bade29b4b90b11f437d', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '185f3fe68fe706f1ac8fb21dc8770a99c5739413' }, h("div", { key: '1a108303520e85fc5088cc4279a49c3522f6fa78' }, h("calcite-scrim", { key: '7b7209217c3c84ab6583b5650f5a2a6ad9c00d69', class: scrimClass, loading: this._queryingData }), h("calcite-shell", { key: 'c0b47560ffd0b0c889505f58c5e7607702c55eed' }, this._getTableControlRow("header"), h("div", { key: '88c63da2af86393fd69bf92728eb29a4dc9f5252', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '0c4fc0743b3713c8b864d8013a70d251990dad14', class: "height-full width-full" }, showSearch &&
+            h("div", { key: '1aa9cb70deefdf7602744b1225bb79841ed1e716', class: "search-container" }, h("calcite-input", { key: 'e5c459eb5ca388d66a8e2b8ae67f3bc917672aba', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), h("calcite-loader", { key: 'a8aac5b169cd2081bc08aeb41d17d1d87ef8516d', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: 'af4c227af9682d072195221294ac85cf98b4089b', 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.createFilterModal && this._filterModal()));
+            .replace("{{selected}}", selected))) : undefined), this.createFilterModal && this._filterModal())));
     }
     _deleteDialog;
     /**
@@ -615,8 +673,14 @@ export class LayerTable {
             showSelected = true;
         }
         else {
-            this._clearSelection();
-            this._tempSelectedIds = [];
+            const editsDiscarded = await this._validateActiveEdits([], this.selectedIds);
+            if (editsDiscarded) {
+                this._clearSelection();
+                this._tempSelectedIds = [];
+            }
+            else {
+                return;
+            }
         }
         //always clear previous search definition
         if (this._searchExpression) {
@@ -730,8 +794,7 @@ export class LayerTable {
      */
     _getTableControlRow(slot) {
         const id = "more-table-options";
-        const toolbarClass = this._canShowFullTextSearch() ? "border-bottom" : "";
-        return (h("div", { class: `display-flex height-51-px ${toolbarClass}`, ref: (el) => this._toolbar = el, slot: slot }, this._getActionBar(), !this.isMobile ? this._getDropdown(id) : undefined, this.enableShare && !this.isMobile ? this._getShare("share") : undefined));
+        return (h("div", { class: `display-flex height-51-px border-bottom`, ref: (el) => this._toolbar = el, slot: slot }, this._getActionBar(), !this.isMobile ? this._getDropdown(id) : undefined, this.enableShare && !this.isMobile ? this._getShare("share") : undefined));
     }
     /**
      * Gets a row of controls that can be used for various interactions with the table
@@ -881,7 +944,7 @@ export class LayerTable {
                     icon: "erase",
                     indicator: false,
                     label: this._translations.clearSelection,
-                    func: () => this._clearSelection(),
+                    func: () => void this.clearSelection(),
                     disabled: !featuresSelected,
                     isOverflow: false
                 }, {
@@ -896,7 +959,7 @@ export class LayerTable {
                     active: false,
                     icon: "list-check-all",
                     indicator: false,
-                    func: () => this._selectAll(),
+                    func: async () => await this._selectAll(),
                     label: this._translations.selectAll,
                     disabled: featuresEmpty,
                     isOverflow: false
@@ -904,7 +967,7 @@ export class LayerTable {
                     active: false,
                     icon: "compare",
                     indicator: false,
-                    func: () => this._switchSelected(),
+                    func: async () => await this._switchSelected(),
                     label: this._translations.switchSelected,
                     disabled: featuresEmpty,
                     isOverflow: false
@@ -999,7 +1062,7 @@ export class LayerTable {
                     prev += cur.width;
                     return prev;
                 }, 0);
-                const skipControls = ["solutions-more", "solutions-map-layer-picker-container", "solutions-action-share"];
+                const skipControls = ["solutions-more", "solutions-map-layer-picker-container", "map-picker", "solutions-action-share"];
                 if (controlsWidth > toolbarWidth) {
                     if (this._toolbarSizeInfos.length > 0) {
                         const controlsThatFit = [...this._toolbarSizeInfos].reverse().reduce((prev, cur) => {
@@ -1224,7 +1287,7 @@ export class LayerTable {
      */
     _getDangerAction(icon, label, func, disabled) {
         const _disabled = this._layer === undefined ? true : disabled;
-        return (h("div", { class: "display-flex", id: this._getId(icon) }, (h("calcite-action", { appearance: "solid", compact: true, disabled: _disabled, id: icon, onClick: func, text: "" }, h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label))), this._getToolTip("bottom", icon, label)));
+        return (h("div", { class: "display-flex", id: this._getId(icon) }, (h("calcite-action", { appearance: "solid", disabled: _disabled, id: icon, onClick: func, text: "" }, h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label))), this._getToolTip("bottom", icon, label)));
     }
     /**
      * Return all currently selected IDs from the table
@@ -1262,7 +1325,8 @@ export class LayerTable {
                     visibleElements: {
                         columnDescriptions: false,
                         header: false,
-                        menu: false
+                        menu: false,
+                        progress: false
                     },
                     tableTemplate: {
                         columnTemplates
@@ -1271,9 +1335,10 @@ export class LayerTable {
                 });
             });
             await this._table.when(() => {
-                this._table.highlightIds.on("change", (evt) => {
+                const changeHandle = this._table.highlightIds.on("change", (evt) => {
                     void this._handleOnChange(evt);
                 });
+                this._table.viewModel.addHandles(changeHandle);
                 //Add handle to watch size of the table and update the state to reflect the total count
                 const handle = this.reactiveUtils.watch(() => this._table.size, (size) => {
                     this._size = size;
@@ -1283,6 +1348,10 @@ export class LayerTable {
         }
     }
     async _handleOnChange(evt) {
+        const handleOnChange = await this._validateActiveEdits([...evt.added], [...evt.removed]);
+        if (!handleOnChange) {
+            return;
+        }
         const ids = [...this._table.highlightIds.toArray()];
         if (!this._skipOnChange) {
             if ((!this._ctrlIsPressed && !this._shiftIsPressed) || (this._selectionFromMap && this._shiftIsPressed)) {
@@ -1324,7 +1393,17 @@ export class LayerTable {
                         prev.push(`${cur.fieldName} ${cur.direction}`);
                         return prev;
                     }, []);
+                    // when dealing with a feature layer with many features shift-select can take a very long time.
+                    // don't allow the user to make additional interactions with the table if it takes more than 500 miliseconds
+                    let queryComplete = false;
+                    setTimeout(() => {
+                        if (!queryComplete) {
+                            this._queryingData = true;
+                        }
+                    }, 500);
                     const oids = await queryAllOidsWithQueryFeatures(0, this._layer, [], orderBy);
+                    queryComplete = true;
+                    this._queryingData = false;
                     let isBetween = false;
                     const _start = this._table.viewModel.getObjectIdIndex(this._previousCurrentId);
                     const _end = this._table.viewModel.getObjectIdIndex(this._currentId);
@@ -1358,6 +1437,52 @@ export class LayerTable {
         this._currentId = [...this._table.highlightIds.toArray()].reverse()[0];
         this._selectionFromMap = false;
     }
+    /**
+     * Validate if the editor has any pending edits
+     *
+     * @param added ids added as a result of selection change
+     * @param removed ids removed as a result of selection change
+     *
+     * @returns a promise with a boolean value that represents if selection change should be handled normally
+     */
+    async _validateActiveEdits(added, removed) {
+        let handleOnChange = true;
+        if (this._editor && !this._skipEditCheck) {
+            const hasPendingEdits = this._hasPendingEdits();
+            if (hasPendingEdits) {
+                let continueEditing = false;
+                try {
+                    await this._editor.cancelWorkflow({ force: false });
+                }
+                catch (error) {
+                    continueEditing = error.name === "workflow:cancel-denied";
+                }
+                if (continueEditing) {
+                    handleOnChange = false;
+                    this._skipEditCheck = true;
+                    if (added.length > 0) {
+                        this._table.highlightIds.removeMany(added);
+                    }
+                    else if (removed.length > 0) {
+                        this._table.highlightIds.addMany(removed);
+                    }
+                }
+            }
+        }
+        else {
+            handleOnChange = !this._skipEditCheck;
+            this._skipEditCheck = false;
+        }
+        return handleOnChange;
+    }
+    /**
+     * Check if the editor has any pending edits
+     */
+    _hasPendingEdits() {
+        const vmHasEdits = this._editor?.viewModel?.hasPendingEdits;
+        const awHasEdits = this._editor?.activeWorkflow?.activeWorkflow?.hasPendingEdits;
+        return vmHasEdits || awHasEdits;
+    }
     /**
      * Handle any updates after a selection change has occured and emit the results
      */
@@ -1412,7 +1537,6 @@ export class LayerTable {
         // 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);
@@ -1428,7 +1552,7 @@ export class LayerTable {
         try {
             this._loaded = true;
             this._table.highlightIds.removeAll();
-            this._table.clearSelectionFilter();
+            this._table.objectIds.removeAll();
             this._resetColumnTemplates();
             this._showOnlySelected = false;
             await this._handleDefaults();
@@ -1619,7 +1743,8 @@ export class LayerTable {
      * @protected
      */
     _filterModal() {
-        return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.filter?.replace("{{title}}", this._layer?.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._layerExpressions, onFilterListReset: () => void this._handleFilterListReset(), onFilterUpdate: () => void this._handleFilterUpdate(this._filterList.filterCount > 0), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
+        alert("_filterModal how does this one get hit??");
+        return (h("calcite-dialog", { class: "filter-content-space", heading: this._translations?.filter?.replace("{{title}}", this._layer?.title), id: "solutions-filter-dialog", kind: "brand", modal: true, onCalciteDialogClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._layerExpressions, onFilterListReset: () => void this._handleFilterListReset(), onFilterUpdate: () => void this._handleFilterUpdate(this._filterList.filterCount > 0), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false })));
     }
     /**
      * Reset the filter active prop
@@ -1682,21 +1807,28 @@ export class LayerTable {
             }
         }
         else {
-            this._clearSelection();
+            await this.clearSelection();
         }
     }
     /**
      * Select or deselect all rows
      * @protected
      */
-    _selectAll() {
+    async _selectAll() {
         const ids = this._allIds;
-        this._table.highlightIds.removeAll();
-        this._skipOnChange = true;
-        this._table.highlightIds.addMany(ids);
-        this.selectedIds = ids;
-        this._finishOnChange();
-        this._selectAllActive = true;
+        const addedIds = ids.filter(id => this.selectedIds.indexOf(id) < 0);
+        const editsDiscarded = await this._validateActiveEdits(addedIds, this.selectedIds);
+        if (editsDiscarded) {
+            this._table.highlightIds.removeAll();
+            this._skipOnChange = true;
+            this._table.highlightIds.addMany(ids);
+            this.selectedIds = ids;
+            this._finishOnChange();
+            this._selectAllActive = true;
+        }
+        else {
+            this._skipEditCheck = false;
+        }
     }
     /**
      * Toggle the show only selected flag
@@ -1709,7 +1841,7 @@ export class LayerTable {
             this._table.filterBySelection();
         }
         else {
-            this._table.clearSelectionFilter();
+            this._table.objectIds.removeAll();
         }
     }
     /**
@@ -1746,19 +1878,25 @@ export class LayerTable {
      * Select all rows that are not currently selectd
      * @protected
      */
-    _switchSelected() {
+    async _switchSelected() {
         const currentIndexes = [...this.selectedIds];
-        this._table.highlightIds.removeAll();
         const ids = this._allIds.reduce((prev, _cur) => {
             if (currentIndexes.indexOf(_cur) < 0) {
                 prev.push(_cur);
             }
             return prev;
         }, []).sort((a, b) => a - b);
-        this._skipOnChange = true;
-        this._table.highlightIds.addMany(ids);
-        this.selectedIds = ids;
-        this._finishOnChange();
+        const editsDiscarded = await this._validateActiveEdits(ids, currentIndexes);
+        if (editsDiscarded) {
+            this._table.highlightIds.removeAll();
+            this._skipOnChange = true;
+            this._table.highlightIds.addMany(ids);
+            this.selectedIds = ids;
+            this._finishOnChange();
+        }
+        else {
+            this._skipEditCheck = false;
+        }
     }
     /**
      * Export all selected rows as CSV
@@ -1807,9 +1945,12 @@ export class LayerTable {
      * @protected
      */
     async _refresh() {
-        await this._table.refresh();
-        this._allIds = await queryAllIds(this._layer);
-        this.featureSelectionChange.emit(this.selectedIds);
+        const editsDiscarded = await this._validateActiveEdits([], this.selectedIds);
+        if (editsDiscarded) {
+            await this._table.refresh();
+            this._allIds = await queryAllIds(this._layer);
+            this.featureSelectionChange.emit(this.selectedIds);
+        }
     }
     /**
      * Zoom to all selected features
@@ -1844,7 +1985,7 @@ export class LayerTable {
         this._fetchingData = false;
     }
     /**
-     * Get any columnt templates for the current map
+     * Get any column templates for the current map
      *
      * @param id item ID of the current map
      *
@@ -2349,7 +2490,8 @@ export class LayerTable {
             "_translations": {},
             "_fullTextSearchInfo": {},
             "_searchPlaceHolder": {},
-            "_size": {}
+            "_size": {},
+            "_queryingData": {}
         };
     }
     static get events() {
@@ -2408,6 +2550,23 @@ export class LayerTable {
     }
     static get methods() {
         return {
+            "closeFilter": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the filter",
+                    "tags": []
+                }
+            },
             "filterReset": {
                 "complexType": {
                     "signature": "() => Promise<void>",
@@ -2446,9 +2605,9 @@ export class LayerTable {
                     "tags": []
                 }
             },
-            "closeFilter": {
+            "validateActiveEdits": {
                 "complexType": {
-                    "signature": "() => Promise<void>",
+                    "signature": "() => Promise<boolean>",
                     "parameters": [],
                     "references": {
                         "Promise": {
@@ -2456,10 +2615,10 @@ export class LayerTable {
                             "id": "global::Promise"
                         }
                     },
-                    "return": "Promise<void>"
+                    "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "Closes the filter",
+                    "text": "Validate if the editor has any pending edits",
                     "tags": []
                 }
             },
@@ -2530,11 +2689,29 @@ export class LayerTable {
     }
     static get listeners() {
         return [{
+                "name": "beforeMapInfoChange",
+                "method": "beforeMapInfoChange",
+                "target": "window",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "editorInitialized",
+                "method": "editorInitialized",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
                 "name": "selectionChanged",
                 "method": "selectionChanged",
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "beforeLayerSelectionChange",
+                "method": "beforeLayerSelectionChange",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }, {
                 "name": "layerSelectionChange",
                 "method": "layerSelectionChange",

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

@@ -344,7 +344,7 @@ export class MapCard {
         const mapHeightClass = this.mapInfos?.length > 1 || this.isMapLayout ? "map-height" : "height-full";
         const progressClass = this.isMapLayout ? "" : "display-none";
         this._validateActiveActions();
-        return (h(Host, { key: '5861d407b8529c6834d5d05450693d1fff2b71ee' }, h("div", { key: '01e028e8a00fc66d5eaa8eb7f85b58d579c3e7ff', class: `${mapContainerClass} width-full`, ref: (el) => this._toolbar = el }, this._getActionBar(), !this.isMobile && this.isMapLayout && this._getDropdown("more-table-options"), this.enableShare && !this.isMobile && this.isMapLayout ? this._getShare("share") : undefined), h("calcite-progress", { key: '6a0b7a2a734f3631b8c8a712acaf60a9e95c6c16', class: progressClass, value: 0 }), h("div", { key: '74cebf9c194bfc5b72be3b397821f586a5923fa4', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { key: '6c87207eecaacf61c594f1036af38c0548ea1767', 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, locale: this.locale, 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: 'a47f4ac21db985fb91ff3f5378594f60405f312c' }, h("div", { key: 'fdf76fd829a8e88725b43f8174a0d95fbf7a3dd1', class: `${mapContainerClass} width-full`, ref: (el) => this._toolbar = el }, this._getActionBar(), !this.isMobile && this.isMapLayout && this._getDropdown("more-table-options"), this.enableShare && !this.isMobile && this.isMapLayout ? this._getShare("share") : undefined), h("calcite-progress", { key: 'b5b672726b4a4c812c386faad2077135a1e1231c', class: progressClass, value: 0 }), h("div", { key: 'f815ef4dba45b53c0ec4a49fe12e741b3331ce51', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { key: '8e2ed31f49d349786caa4827a473a8e70e6ae611', 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, locale: this.locale, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
     }
     /**
      * Called each time after the component is loaded
@@ -571,7 +571,7 @@ export class MapCard {
         const containerClass = this.isMapLayout ? "display-flex" : "display-block";
         const mobileClass = this.isMobile ? "border-top" : "";
         const headerElements = this.isMapLayout ? "" : "display-none";
-        return (h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("map-picker", { class: mapPickerClass, isMapLayout: this.isMapLayout, locale: this.locale, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { class: `mapView-header display-flex ${headerElements}` }, h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, this.mapView && h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", ref: (el) => this._mapLayerPicker = el, scale: "l", selectedIds: this.selectedLayer ? [this.selectedLayer.id] : [], showSingleLayerAsLabel: true, showTables: true, showTablesDisabled: true, type: "dropdown" }))), !this.isMobile && this.isMapLayout ? this._getActions() : undefined));
+        return (h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("map-picker", { class: mapPickerClass, id: "map-picker", isMapLayout: this.isMapLayout, locale: this.locale, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { class: `mapView-header display-flex ${headerElements}`, id: "solutions-map-layer-picker-container" }, h("div", { class: `border-end ${containerClass} ${mobileClass}` }, this.mapView && h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", ref: (el) => this._mapLayerPicker = el, scale: "l", selectedIds: this.selectedLayer ? [this.selectedLayer.id] : [], showSingleLayerAsLabel: true, showTables: true, showTablesDisabled: true, type: "dropdown" }))), !this.isMobile && this.isMapLayout ? this._getActions() : undefined));
     }
     /**
      * Get a list of toolInfos that should display in the dropdown

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

@@ -192,7 +192,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, { key: '253db0399bab5d5fc6f4232bb537ddeec81fec2c' }, h("div", { key: 'bbac53da8b8b1196cc3a7aedf5479cd4e33ab3ea', class: containerClass }, h("div", { key: '8d3dae2c2f82f7e4d7aae92d4a4c6050d2a96478', ref: (el) => { this._sketchElement = el; } }), h("div", { key: 'd635374374ebdff26157a1258ba84932d491e36a', class: undoRedoClass }, h("calcite-action", { key: 'fb437fec19fa7ffc57459e426ba988fd4d50c1e6', disabled: !this.undoEnabled, icon: "undo", onClick: () => this._undo(), scale: "s", text: this._translations.undo }), h("calcite-action", { key: 'fd3f4f3e8b722b95c0b7aad1fc6b909a97787b86', disabled: !this.redoEnabled, icon: "redo", onClick: () => this._redo(), scale: "s", text: this._translations.redo })))));
+        return (h(Host, { key: 'da7ef0973544c8b88ced49ef8c5a89b5d5cf48ea' }, h("div", { key: '6cf3a4276a2a319c6f1a74d2824b0bb3003c9f9b', class: containerClass }, h("div", { key: 'dade38f4d01fa7c28915a4fce879f9383d5892b9', ref: (el) => { this._sketchElement = el; } }), h("div", { key: '6e2fbb2dcfb2e4e51f35aa615c0003a65fa3bd66', class: undoRedoClass }, h("calcite-action", { key: '8156802d2740aaa483e4f312cadadc5744f13486', disabled: !this.undoEnabled, icon: "undo", onClick: () => this._undo(), scale: "s", text: this._translations.undo }), h("calcite-action", { key: 'cd05845f66e187a317215e18d6a18696328960bf', disabled: !this.redoEnabled, icon: "redo", onClick: () => this._redo(), scale: "s", text: this._translations.redo })))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -95,7 +95,7 @@ export class MapFullscreen {
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '7eec3dc5ab76a4ad8fdd24d8d18f8e6cf2820dde' }, h("div", { key: '2093cc2a6a3678209e61eea63ebde2f69ec00011', class: "fullscreen-widget", ref: (el) => { this._fullscreenElement = el; } })));
+        return (h(Host, { key: '50488298d31b85071bb8ec898781b8af52a800ae' }, h("div", { key: '24b4c28cd69ce487c851412a839f6762ceaf02b1', class: "fullscreen-widget", ref: (el) => { this._fullscreenElement = el; } })));
     }
     /**
      * StencilJS: Called just after the component updates.