@esri/solutions-components 0.8.6-6.3 → 0.8.6

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

@@ -7,19 +7,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-696e53e6.js');
-const locale = require('./locale-0998a9f9.js');
-const mapViewUtils = require('./mapViewUtils-78b14528.js');
-const downloadUtils = require('./downloadUtils-0d728477.js');
-require('./esri-loader-08dc41bd.js');
-require('./_commonjsHelpers-baf43783.js');
+const index = require('./index-105cf2b9.js');
+const locale = require('./locale-3d0a4bc2.js');
+const mapViewUtils = require('./mapViewUtils-3e0fa457.js');
+const downloadUtils = require('./downloadUtils-8b05d7cc.js');
+require('./esri-loader-ce6c3d3d.js');
+require('./_commonjsHelpers-480c2e77.js');
 require('./interfaces-7cd0a48a.js');
-require('./solution-resource-a09a6fe0.js');
+require('./solution-resource-97186521.js');
 require('./index-f64944ad.js');
-require('./restHelpersGet-d99cf121.js');
+require('./restHelpersGet-2ed729ab.js');
 
 const cardManagerCss = ":host{display:block !important}.display-flex{display:flex}.display-none{display:none}.w-100{width:100%}.padding-bottom-1{padding-bottom:1rem}.padding-1{padding:1rem}.position-relative{position:relative}.focus-margin{margin:1px 1px 0px 1px}.overflow-auto{overflow:auto}.height-full{height:100%}card-manager{display:block}";
-const CardManagerStyle0 = cardManagerCss;
 
 const CardManager = class {
     constructor(hostRef) {
@@ -86,7 +85,7 @@ const CardManager = class {
         var _a, _b;
         const featuresClass = ((_a = this._graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "" : "display-none";
         const messageClass = ((_b = this._graphics) === null || _b === void 0 ? void 0 : _b.length) > 0 ? "display-none" : "";
-        return (index.h(index.Host, { key: '343554e5408de156f1973f6d1e3daa8f1ba90675' }, index.h("div", { key: '1852562a795002314236052351cab7c29d36854e', class: "overflow-auto height-full" }, index.h("calcite-shell", { key: '684f013e4397bc50743526357384f782a88a5cd3', class: "position-relative " + featuresClass }, index.h("div", { key: 'db6d9f4be5448b5596b22f2a4f49c6baefa88466' }, index.h("info-card", { key: 'be5cec81cae7ca00a5b57c8d9590541f78b67fbd', graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView }))), index.h("calcite-shell", { key: 'df34e0ae6978298130970c60d21203f52fa32e4b', class: "position-relative " + messageClass }, index.h("div", { key: '9525a95dd21745e211ebf888da44eca6a6c17721', class: "padding-1" }, index.h("calcite-notice", { key: 'ade0e0a2f09bbe7b7bda6fdb2ce65ba81121e633', icon: "table", open: true }, index.h("div", { key: 'd6fce2d657e23738720e004177c510c3273017f4', slot: "message" }, this._translations.selectFeaturesToStart)))))));
+        return (index.h(index.Host, null, index.h("div", { class: "overflow-auto height-full" }, index.h("calcite-shell", { class: "position-relative " + featuresClass }, index.h("div", null, index.h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), index.h("calcite-shell", { class: "position-relative " + messageClass }, index.h("div", { class: "padding-1" }, index.h("calcite-notice", { icon: "table", open: true }, index.h("div", { slot: "message" }, this._translations.selectFeaturesToStart)))))));
     }
     //--------------------------------------------------------------------------
     //
@@ -105,10 +104,9 @@ const CardManager = class {
     }
     get el() { return index.getElement(this); }
 };
-CardManager.style = CardManagerStyle0;
+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-color-border-2)}.border-end{border-inline-end:1px solid var(--calcite-color-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-color-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-color-background)}.text-color{color:var(--calcite-color-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-color-status-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{font-size:14px !important;color:var(--calcite-color-text-3) !important}.share-action{position:absolute;right:0}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-opacity-disabled);pointer-events:none}.instant-app-share{height:50px !important;display:inline-flex}.border-top{border-top:1px solid var(--calcite-color-border-2)}.modal{--calcite-modal-content-padding:0}.esri-feature-table__table-container{height:100%}";
-const LayerTableStyle0 = layerTableCss;
+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-color-border-2)}.border-end{border-inline-end:1px solid var(--calcite-color-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-color-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-color-background)}.text-color{color:var(--calcite-color-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-color-status-danger)}.esri-feature-table vaadin-grid{border:none !important}vaadin-grid-cell-content{font-size:14px !important;color:var(--calcite-color-text-3) !important}.share-action{position:absolute;right:0}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-opacity-disabled);pointer-events:none}.instant-app-share{height:50px !important;display:inline-flex}.border-top{border-top:1px solid var(--calcite-color-border-2)}.modal{--calcite-modal-content-padding:0}";
 
 const LayerTable = class {
     constructor(hostRef) {
@@ -130,18 +128,10 @@ const LayerTable = class {
          * 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
          */
@@ -168,7 +158,6 @@ const LayerTable = class {
         this.enableInlineEdit = undefined;
         this.enableShare = undefined;
         this.isMobile = undefined;
-        this.mapHidden = undefined;
         this.mapInfo = undefined;
         this.mapView = undefined;
         this.onlyShowUpdatableLayers = undefined;
@@ -177,7 +166,6 @@ const LayerTable = class {
         this.shareIncludeSocial = undefined;
         this.showNewestFirst = undefined;
         this.zoomAndScrollToSelected = undefined;
-        this.zoomToScale = undefined;
         this._allIds = [];
         this._controlsThatFit = undefined;
         this._csvExporting = false;
@@ -252,15 +240,6 @@ const LayerTable = class {
             }
         });
     }
-    /**
-     * 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
      */
@@ -277,7 +256,6 @@ const LayerTable = class {
         this._initLayerExpressions();
         this._initToolInfos();
         this._updateToolbar();
-        await this._sortTable();
     }
     /**
      * watch for changes in map view and get the first layer
@@ -320,10 +298,6 @@ const LayerTable = class {
         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.
@@ -331,14 +305,8 @@ const LayerTable = class {
      * @param evt CustomEvent the graphic for the current selection
      */
     async selectionChanged(evt) {
-        const g = evt.detail.selectedFeature[0];
+        const g = evt.detail[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);
@@ -352,7 +320,7 @@ const LayerTable = class {
                 }
             });
             if (layerView) {
-                await mapViewUtils.goToSelection([oid], layerView, this.mapView, true, undefined, this.zoomToScale);
+                await mapViewUtils.goToSelection([oid], layerView, this.mapView, true);
             }
         }
     }
@@ -423,7 +391,7 @@ const LayerTable = class {
         const selected = this.selectedIds.length.toString();
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         this._validateActiveActions();
-        return (index.h(index.Host, { key: '547a08c45cc3a0b0bdb5ab841ee202d2d43018dc' }, index.h("calcite-shell", { key: '7ac39e863586727df7685eb5c3faffd87c46bf9d' }, this._getTableControlRow("header"), index.h("div", { key: '322dc4820b17365f3f202ce43d85330d25081eb5', class: `width-full ${tableHeightClass}` }, index.h("calcite-panel", { key: '764955f3cf9371a5ff554821613fffbc9e0bd705', class: "height-full width-full" }, index.h("calcite-loader", { key: '031fc6520de11b166111626501f0208f1b69c9ff', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), index.h("div", { key: '8d62258ee356fdf6bc6c03f88848a32270ce5eed', class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (index.h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (index.h(index.Host, null, index.h("calcite-shell", null, this._getTableControlRow("header"), index.h("div", { class: `width-full ${tableHeightClass}` }, index.h("calcite-panel", { class: "height-full width-full" }, index.h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), index.h("div", { class: tableNodeClass, ref: this.onTableNodeCreate })), !this.isMobile ? (index.h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
             .replace("{{total}}", total)
             .replace("{{selected}}", selected))) : undefined)), this._filterModal()));
     }
@@ -494,7 +462,7 @@ const LayerTable = class {
     _getActionBar() {
         const containerClass = this.isMobile ? "width-full" : "";
         const mobileClass = this.isMobile ? "border-top" : "";
-        return (index.h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, index.h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, index.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));
+        return (index.h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, index.h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, index.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));
     }
     /**
      * Get the actions that are used for various interactions with the table
@@ -586,8 +554,7 @@ const LayerTable = class {
         const featuresEmpty = this._featuresEmpty();
         const hasFilterExpressions = this._hasFilterExpressions();
         if (this._translations) {
-            this._toolInfos = [
-                !this.mapHidden ? {
+            this._toolInfos = [{
                     active: false,
                     icon: "zoom-to-object",
                     indicator: false,
@@ -595,7 +562,7 @@ const LayerTable = class {
                     func: () => this._zoom(),
                     disabled: !featuresSelected,
                     isOverflow: false
-                } : undefined,
+                },
                 hasFilterExpressions ? {
                     active: false,
                     icon: "filter",
@@ -673,8 +640,7 @@ const LayerTable = class {
                     disabled: false,
                     isOverflow: false,
                     isSublist: true
-                }
-            ];
+                }];
             this._defaultVisibleToolSizeInfos = undefined;
         }
     }
@@ -1000,7 +966,7 @@ const LayerTable = class {
     async _handleOnChange(evt) {
         const ids = [...this._table.highlightIds.toArray()];
         if (!this._skipOnChange) {
-            if ((!this._ctrlIsPressed && !this._shiftIsPressed) || (this._selectionFromMap && this._shiftIsPressed)) {
+            if (!this._ctrlIsPressed && !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
@@ -1023,41 +989,46 @@ const LayerTable = class {
             else if (this._ctrlIsPressed) {
                 this.selectedIds = ids.reverse();
             }
-            else if (this._shiftIsPressed && (ids === null || ids === void 0 ? void 0 : ids.length) > 0) {
+            else if (this._shiftIsPressed) {
                 this._skipOnChange = true;
                 this._previousCurrentId = this._currentId;
-                this._currentId = [...ids].reverse()[0];
-                if (ids.length === 1) {
-                    this._skipOnChange = false;
-                }
-                else if (this._previousCurrentId !== this._currentId) {
+                this._currentId = [...this._table.highlightIds.toArray()].reverse()[0];
+                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 mapViewUtils.queryAllOidsWithQueryFeatures(0, this._layer, [], orderBy);
+                    const oids = await mapViewUtils.queryFeatureIds(this._layer, this._layer.definitionExpression, 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 idsInRange = oids.reduce((prev, cur) => {
+                    const selectedIds = 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);
                             }
                         }
-                        else if (isBetween && prev.indexOf(id) < 0) {
+                        // 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) {
                             prev.push(id);
                         }
                         return prev;
                     }, []);
-                    const selectedIds = _start < _end ? idsInRange.reverse() : idsInRange;
-                    this.selectedIds = [...new Set([...selectedIds, ...this.selectedIds])];
+                    this.selectedIds = _start < _end ? selectedIds.reverse() : selectedIds;
                     this._table.highlightIds.addMany(this.selectedIds.filter(i => ids.indexOf(i) < 0));
                 }
             }
@@ -1067,7 +1038,6 @@ const LayerTable = class {
             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
@@ -1106,7 +1076,6 @@ const LayerTable = class {
      */
     async _resetTable() {
         var _a;
-        this._loaded = false;
         this._clearSelection();
         this._allIds = await mapViewUtils.queryAllIds(this._layer);
         if (!this._table) {
@@ -1120,27 +1089,8 @@ const LayerTable = class {
         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();
@@ -1149,10 +1099,7 @@ const LayerTable = class {
             await this._sortTable();
             this._initToolInfos();
             this._updateToolbar();
-        }
-        catch (e) {
-            console.log(e);
-        }
+        });
     }
     /**
      * Update the current IDs when that layers data is modified
@@ -1244,31 +1191,13 @@ const LayerTable = class {
         this._deleteEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsDelete;
     }
     /**
-     * Sort the table with the configured field and the sort order
+     * Sort the objectid field in descending order
      */
     async _sortTable() {
-        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) {
+        if (this._table && this._layer && this.showNewestFirst) {
             await this._table.when();
             await this._layer.when(() => {
-                this._table.sortColumn(sortField, sortOrder);
+                this._table.sortColumn(this._layer.objectIdField, "desc");
             });
         }
     }
@@ -1381,7 +1310,6 @@ const LayerTable = class {
                 const id = result.graphic.getObjectId();
                 const index = this._table.highlightIds.indexOf(id);
                 if (index < 0) {
-                    this._selectionFromMap = true;
                     this._table.highlightIds.add(id);
                 }
             });
@@ -1422,10 +1350,9 @@ const LayerTable = class {
      * Clears the selected indexes
      */
     _clearSelection() {
-        var _a, _b;
+        var _a;
         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();
     }
     /**
@@ -1516,11 +1443,8 @@ const LayerTable = class {
      *
      * @returns a promise that will resolve when the operation is complete
      */
-    async _zoom() {
-        if (this._layer) {
-            const selectedLayerView = await mapViewUtils.getFeatureLayerView(this.mapView, this._layer.id);
-            await mapViewUtils.goToSelection(this.selectedIds, selectedLayerView, this.mapView, true, undefined, this.zoomToScale);
-        }
+    _zoom() {
+        this._table.zoomToSelection();
     }
     /**
      * Handles layer selection change to show new table
@@ -1599,7 +1523,7 @@ const LayerTable = class {
             items: [
                 {
                     label: this._translations.hideField,
-                    icon: "view-hide",
+                    iconClass: "esri-icon-non-visible",
                     autoCloseMenu: true,
                     clickFunction: () => {
                         this._handleHideClick(name);
@@ -1638,7 +1562,6 @@ const LayerTable = class {
         "enableInlineEdit": ["enableInlineEditWatchHandler"],
         "enableShare": ["enableShareWatchHandler"],
         "_controlsThatFit": ["_controlsThatFitWatchHandler"],
-        "mapHidden": ["mapHiddenWatchHandler"],
         "isMobile": ["isMobileWatchHandler"],
         "mapInfo": ["mapInfoWatchHandler"],
         "mapView": ["mapViewWatchHandler"],
@@ -1646,7 +1569,7 @@ const LayerTable = class {
         "selectedIds": ["selectedIdsWatchHandler"]
     }; }
 };
-LayerTable.style = LayerTableStyle0;
+LayerTable.style = layerTableCss;
 
 function joinAppProxies(map, config, appProxies) {
     if (appProxies) {
@@ -1681,7 +1604,6 @@ function joinAppProxies(map, config, appProxies) {
 }
 
 const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.map-height{height:calc(100% - 51px)}.height-full{height:100%}.box-shadow{box-shadow:none !important}.visibility-hidden-1{visibility:hidden;height:1px;}.display-none{display:none}";
-const MapCardStyle0 = mapCardCss;
 
 const MapCard = class {
     constructor(hostRef) {
@@ -1758,7 +1680,7 @@ const MapCard = class {
         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 (index.h(index.Host, { key: '4f5c0cd408f92856ceb2ba281a02856064ef6a5a' }, index.h("map-picker", { key: 'f69742384dc5ba13bbf257592cc8c35de77590f0', class: mapPickerClass, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), index.h("div", { key: '3ddddf3f674d49ae59fe627af1c67ec59718c9a3', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), index.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 })));
+        return (index.h(index.Host, null, index.h("map-picker", { class: mapPickerClass, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), index.h("div", { class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), index.h("map-tools", { basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, 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 })));
     }
     //--------------------------------------------------------------------------
     //
@@ -1827,7 +1749,7 @@ const MapCard = class {
         }
         else if (loadDefaultMap) {
             this._defaultWebmapHonored = true;
-            void this._mapPicker.setMapByID(id);
+            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
@@ -1863,7 +1785,7 @@ const MapCard = class {
         "enableHome": ["enableHomeWatchHandler"]
     }; }
 };
-MapCard.style = MapCardStyle0;
+MapCard.style = mapCardCss;
 
 exports.card_manager = CardManager;
 exports.layer_table = LayerTable;

package/dist/cjs/common-e6e9f7d6.js

@@ -0,0 +1,38 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+require('./solution-resource-97186521.js');
+require('./index-f64944ad.js');
+require('./interfaces-7cd0a48a.js');
+
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Get an array from a list of nodes
+ *
+ * @param nodeList list of nodes
+ *
+ * @returns array of nodes
+ */
+function nodeListToArray(nodeList) {
+    return Array.isArray(nodeList) ? nodeList : Array.from(nodeList);
+}
+
+exports.nodeListToArray = nodeListToArray;

package/dist/cjs/component-ac7c3bd8.js

@@ -0,0 +1,33 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
+ */
+function getIconScale(componentScale) {
+    return componentScale === "l" ? "m" : "s";
+}
+/**
+ * This util helps us wait for a component to be ready for both lazy-loading (`dist` output) and non-lazy-loading (`components` output) components.
+ *
+ * Based on https://github.com/ionic-team/ionic-framework/blob/1a8bd6d/core/src/utils/helpers.ts#L60C1-L79C3
+ *
+ * @param el - the host element to wait for
+ */
+async function componentOnReady(el) {
+    await (isStencilEl(el)
+        ? el.componentOnReady()
+        : new Promise((resolve) => requestAnimationFrame(() => resolve())));
+}
+function isStencilEl(el) {
+    return typeof el.componentOnReady === "function";
+}
+
+exports.componentOnReady = componentOnReady;
+exports.getIconScale = getIconScale;

package/dist/cjs/conditionalSlot-9d7b60d1.js

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