@esri/solutions-components 0.10.24 → 0.10.26

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

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, g as getElement, h, H as Host, F as Fragment } from './index-b793d9aa.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-b793d9aa.js';
 import { g as getLocaleComponentStrings, l as loadModules } from './locale-b1d53fb1.js';
 import { g as getLayerOrTable, q as queryFeaturesByID, e as goToSelection, f as queryAllIds, i as queryAllOidsWithQueryFeatures, j as queryFeaturesByGlobalID, c as getFeatureLayerView } from './mapViewUtils-f54edae3.js';
 import { d as downloadCSV } from './downloadUtils-4a34c86a.js';
@@ -31,6 +31,7 @@ const CardManager = class {
         this.zoomAndScrollToSelected = undefined;
         this.selectedFeaturesIds = undefined;
         this.enableCreateFeatures = true;
+        this.selectingFeatureFromMap = undefined;
         this._cardLoading = false;
         this._graphics = undefined;
         this._showCreateFeatureComponent = false;
@@ -123,8 +124,9 @@ const CardManager = class {
         const messageClass = this._graphics?.length > 0 || this._showCreateFeatureComponent ? "display-none" : "";
         const isTable = this.layer?.isTable;
         const heading = isTable ? this._translations.createRecord : this._translations.createFeature;
+        const guideMsg = this.customInfoText || this.selectingFeatureFromMap ? this._translations.selectFeaturesFromMapToStart : this._translations.selectFeaturesToStart;
         const showCreateFeatureOrRecordBtn = this.enableCreateFeatures && this.layer?.capabilities?.operations?.supportsAdd;
-        return (h(Host, { key: '6089a5003e4ee08df4da7ecbcf8e6a3c8628f8bf' }, h("div", { key: '60dc1c21c650cce5165f56a0e040feba3652ae10', class: "overflow-auto height-full" }, h("calcite-shell", { key: '530a3173010e32fe062dc313ed3805833228f0fd', class: "position-relative " + featuresClass }, h("div", { key: 'af2350dac50f8ecc576cdeb528b350557057ff8d', class: "position-static z-index-500" }, h("info-card", { key: '626b34ec1ed2fc7e52f0ee2f9ae4520d1bcceb08', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView }))), h("calcite-shell", { key: '642531296a90d92068592eef75bc4632438a4cbc', class: "position-relative " + messageClass }, h("calcite-flow-item", { key: 'b15e856439afdf9f08df9ff22f4e7dd7fee74273' }, h("calcite-panel", { key: '9305e17349e3b653565d1c183e118bdc3b791e23' }, h("div", { key: '25cf89836b8d20c6728842c5372e2c17dda967e6', class: "padding-1" }, h("calcite-notice", { key: '8df4a9c3e037f1b9f6131371d36a23e845db7ee2', icon: "table", open: true }, h("div", { key: '5c613ab8e9b9c25fc9f824e1007c3c4fa48b15b5', slot: "message" }, this.customInfoText || this._translations.selectFeaturesToStart))), showCreateFeatureOrRecordBtn && h("calcite-button", { key: 'ba88fcd64b3cf2ae1fc36da58581974473d4e0b3', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature)))), h("calcite-shell", { key: '5e64963bf756e397c819a4c60112191031d9113f', class: "position-relative " + createFeatureClass }, h("calcite-flow-item", { key: '7d93240bffd381e2ed1e6dc10126b30cb1a143f9' }, h("calcite-panel", { key: '6ae7f4917394521b3226e38e07ac8eaf8c29b58e', heading: heading }, h("calcite-action", { key: '60cfdea79ad19ba0b62a9fb2ef3a6495c41b1f53', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "back" }), this.getEditorComponent(), this._showSubmitBtn && h("calcite-button", { key: 'ab10ab259363cee6b872f7e6619518125141759e', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
+        return (h(Host, { key: '7bcc2cfc05bfb95ef444b2036c0fd709f816bfe8' }, h("div", { key: '088e91d3084a43cab7da6e2985784a9675f30bfb', class: "overflow-auto height-full" }, h("calcite-shell", { key: '4ce541bdadc42cc2625756af104e144e61ca0593', class: "position-relative " + featuresClass }, h("div", { key: 'f3fd57ce5a0122df70d36a72e7d8c7ace4ffed0c', class: "position-static z-index-500" }, h("info-card", { key: 'ed1f8e88937d905928e97f1149acdc42fc557d7c', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView }))), h("calcite-shell", { key: '21cd22e9d40954324ab68ae0f44305541a78faa4', class: "position-relative " + messageClass }, h("calcite-flow-item", { key: '2206f7bf57133e6249e84eed06363485dc540e89' }, h("calcite-panel", { key: 'a6a43c3eefcc1b03006dc14f39c9ba692620cf51' }, h("div", { key: 'f58c54e68a59e09ce8d51b010876e6f0261d920a', class: "padding-1" }, h("calcite-notice", { key: '5e57dcae6e804c3954a693d972a47171e07419a5', icon: this.selectingFeatureFromMap ? "map" : "table", iconFlipRtl: true, open: true }, h("div", { key: '9391598f800576d7f8dd2ca5778d8a9d493df5cc', slot: "message" }, guideMsg))), !this.isMobile && showCreateFeatureOrRecordBtn && h("calcite-button", { key: 'f30040df430858472437acef88f216040e4f3a4f', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature)))), h("calcite-shell", { key: '6d14a7483427aa478f53e4ee54664ef2aae999fb', class: "position-relative " + createFeatureClass }, h("calcite-flow-item", { key: 'cace557395071006fcf0fc723f1808cad19f1099' }, h("calcite-panel", { key: '3eaa505ebf1d552775970c4f5b7dfc8f321c3f93', heading: heading }, h("calcite-action", { key: '68a09bb37ea2b6d827de48b13e1a41c74f5c34c6', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "" }), this.getEditorComponent(), this._showSubmitBtn && h("calcite-button", { key: '3e326f1e523fe3245365a4dad69372b52a969ae3', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
     }
     /**
    * Returns the editor component for adding feature
@@ -135,7 +137,7 @@ const CardManager = class {
                 setTimeout(() => {
                     this._isFeatureCreated = false;
                 }, 2000);
-            }, onSuccess: this._featureCreated.bind(this), ref: el => this._createFeature = el, selectedLayerId: this.layer?.id })));
+            }, onSuccess: this._featureCreated.bind(this), ref: el => this._createFeature = el, selectedLayerId: this.layer?.id, showGuidingMsgWhileDrawing: false })));
     }
     //--------------------------------------------------------------------------
     //
@@ -144,7 +146,7 @@ const CardManager = class {
     //--------------------------------------------------------------------------
     /**
      * Gets the Feature using its ids
-     *
+     * @param ids list of ids that are currently selected
      * @returns Promise when complete
      * @protected
      */
@@ -201,7 +203,7 @@ const CardManager = class {
 };
 CardManager.style = CardManagerStyle0;
 
-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-px{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 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-px{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%}.search{--calcite-color-border-input:var(--calcite-color-border-3)}";
 const LayerTableStyle0 = layerTableCss;
 
 const LayerTable = class {
@@ -243,6 +245,7 @@ const LayerTable = class {
         this._translations = undefined;
         this._fullTextSearchInfo = undefined;
         this._searchPlaceHolder = '';
+        this._size = 0;
     }
     get el() { return getElement(this); }
     //--------------------------------------------------------------------------
@@ -662,6 +665,12 @@ const LayerTable = class {
         this._allIds = [];
         this._clearSelection();
     }
+    /**
+     * Clears the selection from table
+     */
+    clearSelection() {
+        this._clearSelection();
+    }
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -686,13 +695,13 @@ const LayerTable = class {
     render() {
         const tableNodeClass = this._fetchingData ? "display-none" : "";
         const loadingClass = this._fetchingData ? "" : "display-none";
-        const total = this._allIds.length.toString();
+        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: '0e14ca1d140deaad1b6b1c299a29b160c983a84f' }, h("calcite-shell", { key: '6da3feca55877d2ca3ac4df044ece161964c5b30' }, this._getTableControlRow("header"), h("div", { key: '987267204fadb58d10741586adf9c2603a2c782d', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '3d8fb99e75c7456082846a1876460514d3b36cc3', class: "height-full width-full" }, showSearch &&
-            h("calcite-input", { key: '2251920546d0948bd67eb705ea68a4cdf7c735c1', clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" }), h("calcite-loader", { key: '8c9deefa9aef65838e93171505c1b4a5bc34d7d9', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '376ad6c086b24157533054c027a9738738625630', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19" }, this._translations.recordsSelected
+        return (h(Host, { key: '46394d7e108068600980efd766fbf5d91243f3c9' }, h("calcite-shell", { key: 'd831121a56070552139386033b02ddc2531c29e9' }, this._getTableControlRow("header"), h("div", { key: '591e0b0bba19f1dbe99049a470b5d3c04253a2c2', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'd70244a3c989a5bea8bbbaf33c4ebe9c04fc4515', class: "height-full width-full" }, showSearch &&
+            h("calcite-input", { key: 'b8418eca07a07956f702a09aa642255d05742b14', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" }), h("calcite-loader", { key: '4478be9175933c1b076f7011bd39aaf9adf7faad', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '2a77b11f65188931041d781cde17143c90962931', 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()));
     }
@@ -704,14 +713,15 @@ const LayerTable = class {
             this._resizeObserver.observe(this._toolbar);
             this._observerSet = true;
         }
-        document.onclick = (e) => this._handleDocumentClick(e);
-        document.onkeydown = (e) => this._handleKeyDown(e);
-        document.onkeyup = (e) => this._handleKeyUp(e);
     }
     /**
      * Called after the component is rendered
      */
     componentDidRender() {
+        // need to be called after each render to get the clicked mouseEvent 
+        document.onclick = (e) => this._handleDocumentClick(e);
+        document.onkeydown = (e) => this._handleKeyDown(e);
+        document.onkeyup = (e) => this._handleKeyUp(e);
         this._updateToolbar();
     }
     //--------------------------------------------------------------------------
@@ -761,9 +771,12 @@ const LayerTable = class {
                 const searchQueryParams = this._layer.createQuery();
                 searchQueryParams.fullText = this._fullTextSearchInfo;
                 const searchedIds = await this._layer.queryObjectIds(searchQueryParams);
-                this._updateSearchDefinitionExpression(searchedIds?.length ? searchedIds : [-1]);
+                await this._updateSearchDefinitionExpression(searchedIds?.length ? searchedIds : [-1]);
             }
         }
+        //Added timeout and table.refresh() to avoid the issue in which we see empty table records after searching in combination to filter/reset filter
+        await new Promise(resolve => setTimeout(resolve, 800));
+        await this._updateAllIds();
     }
     /**
      * Clears the applied search expression on the layer
@@ -787,7 +800,7 @@ const LayerTable = class {
      * Update the search expression in layer
      * @param searchedIds Array of objectIds satisfying the full search text
      */
-    _updateSearchDefinitionExpression(searchedIds) {
+    async _updateSearchDefinitionExpression(searchedIds) {
         const defExp = this._layer.definitionExpression;
         if (searchedIds?.length) {
             const searchExp = `objectId in(${searchedIds})`;
@@ -828,7 +841,7 @@ const LayerTable = class {
                     const fieldInfo = this._layer.getField(fieldName.trim());
                     fieldAlias.push(fieldInfo.alias);
                 });
-                this._searchPlaceHolder = this._translations.searchPlaceholder.replace("{{fields}}", fieldAlias.join(' | '));
+                this._searchPlaceHolder = this._translations.searchPlaceholder.replace("{{fields}}", fieldAlias.join(', '));
                 this._fullTextSearchInfo.push({
                     'onFields': ['*'],
                     'searchTerm': '',
@@ -892,14 +905,14 @@ const LayerTable = class {
     _getFieldlist() {
         return this._columnsInfo ? (h("calcite-dropdown-group", { "selection-mode": "multiple" }, Object.keys(this._columnsInfo).map(k => {
             const selected = this._columnsInfo[k];
-            return (h("calcite-dropdown-item", { id: `layer-table-${k.toLowerCase().replaceAll(" ", "")}`, onClick: (e) => {
+            return (h("calcite-dropdown-item", { id: `layer-table-${k.toLowerCase().replaceAll(" ", "")}`, label: k, onClick: (e) => {
                     const target = e.target;
-                    this._columnsInfo[target.id] = target.selected;
+                    this._columnsInfo[target.label] = target.selected;
                     if (!target.selected) {
-                        this._table.hideColumn(target.id);
+                        this._table.hideColumn(target.label);
                     }
                     else {
-                        this._table.showColumn(target.id);
+                        this._table.showColumn(target.label);
                     }
                 }, selected: selected }, k));
         }))) : undefined;
@@ -955,7 +968,8 @@ const LayerTable = class {
      */
     _initToolInfos() {
         const featuresSelected = this._featuresSelected();
-        const showMultipleEdits = this.selectedIds.length > 1 && this._layer?.capabilities?.operations?.supportsUpdate;
+        // hide multiple edits for R03
+        const showMultipleEdits = this.selectedIds.length > 1 && this._layer?.capabilities?.operations?.supportsUpdate && false;
         const featuresEmpty = this._featuresEmpty();
         const hasFilterExpressions = this._hasFilterExpressions();
         if (this._translations) {
@@ -978,7 +992,7 @@ const LayerTable = class {
                     disabled: false,
                     isOverflow: false
                 } : undefined,
-                !this.mapHidden ? {
+                showMultipleEdits ? {
                     active: false,
                     icon: "pencil",
                     indicator: false,
@@ -991,8 +1005,8 @@ const LayerTable = class {
                     active: undefined,
                     icon: "trash",
                     indicator: undefined,
-                    label: undefined,
-                    func: undefined,
+                    label: this._translations.delete,
+                    func: () => undefined,
                     disabled: !featuresSelected,
                     isDanger: true,
                     isOverflow: false
@@ -1232,7 +1246,7 @@ const LayerTable = class {
     _getDropdown(id) {
         const dropdownItems = this._getDropdownItems();
         return dropdownItems.length > 0 ? (h("calcite-dropdown", { closeOnSelectDisabled: true, disabled: this._layer === undefined, id: "solutions-more", onCalciteDropdownBeforeClose: () => this._forceShowHide(), ref: (el) => this._moreDropdown = el }, h("calcite-action", { appearance: "solid", id: id, label: "", onClick: () => this._closeShowHide(), slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, dropdownItems.map(item => {
-            return (h("calcite-dropdown-group", { class: item.disabled ? "disabled" : "", selectionMode: item.disabled ? "none" : "single" }, h("calcite-dropdown-item", { disabled: item.loading, iconStart: item.isSublist && this._showHideOpen ? "chevron-down" : item.loading ? "" : item.icon, id: `layer-table-${item.icon}`, onClick: item.func }, item.loading ? (h("div", { class: "display-flex" }, h("calcite-loader", { inline: true, label: item.label, scale: "m" }), item.label)) : item.label)));
+            return (h("calcite-dropdown-group", { class: item.disabled ? "disabled" : "", selectionMode: "none" }, h("calcite-dropdown-item", { disabled: item.loading, iconStart: item.isSublist && this._showHideOpen ? "chevron-down" : item.loading ? "" : item.icon, id: `layer-table-${item.icon}`, onClick: item.func }, item.loading ? (h("div", { class: "display-flex" }, h("calcite-loader", { inline: true, label: item.label, scale: "m" }), item.label)) : item.label)));
         })), this._showHideOpen ? this._getFieldlist() : undefined)) : undefined;
     }
     /**
@@ -1332,7 +1346,7 @@ const LayerTable = class {
      */
     _getDangerAction(icon, label, func, disabled) {
         const _disabled = this._layer === undefined ? true : disabled;
-        return (h("div", { class: "display-flex", id: this._getId(icon) }, icon === "trash" ? (h("delete-button", { buttonType: "action", class: "display-flex", disabled: _disabled, icon: icon, ids: this._getIds(), layer: this._layer })) : (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 (h("div", { class: "display-flex", id: this._getId(icon) }, icon === "trash" ? (h("delete-button", { buttonType: "action", class: "display-flex", disabled: _disabled, icon: icon, ids: this._getIds(), layer: this._layer })) : (h("calcite-action", { appearance: "solid", disabled: _disabled, id: icon, onClick: func, text: label }, h("calcite-button", { appearance: "transparent", iconStart: icon, kind: "danger" }, label))), this._getToolTip("bottom", icon, label)));
     }
     /**
      * Return all currently selected IDs from the table
@@ -1381,6 +1395,11 @@ const LayerTable = class {
                 this._table.highlightIds.on("change", (evt) => {
                     void this._handleOnChange(evt);
                 });
+                //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;
+                });
+                this._table.viewModel.addHandles(handle);
             });
         }
     }
@@ -1683,7 +1702,10 @@ const LayerTable = class {
      */
     _handleDocumentClick(e) {
         const id = e.target?.id;
-        if (this._showHideOpen && Object.keys(this._columnsInfo).indexOf(id) < 0 && id !== "solutions-subset-list" && id !== "chevron-right") {
+        if (id.startsWith('layer-table-')) {
+            this._moreDropdown.open = true;
+        }
+        else if (this._showHideOpen && Object.keys(this._columnsInfo).indexOf(id) < 0 && id !== "chevron-right") {
             this._closeShowHide();
             if (this._moreDropdown) {
                 this._moreDropdown.open = false;
@@ -1899,7 +1921,7 @@ const LayerTable = class {
         });
     }
     /**
-     * Refreshes the table and maintains the curent scroll position
+     * Refreshes the table and maintains the current scroll position
      * @protected
      */
     async _refresh() {
@@ -2086,7 +2108,7 @@ function joinAppProxies(map, config, appProxies) {
     return map;
 }
 
-const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.map-height{height:calc(100% - 51px)}.height-full{height:100%}.height-50-px{height:50px}.box-shadow{box-shadow:none !important}.visibility-hidden-1{visibility:hidden;height:1px;}.display-none{display:none}";
+const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.map-height{height:calc(100% - 53px)}.height-full{height:100%}.border-bottom-3px{border-bottom:3px solid var(--calcite-color-border-3)}.height-50-px{height:50px}.box-shadow{box-shadow:none !important}.visibility-hidden-1{visibility:hidden;height:1px;}.display-none{display:none}.display-block{display:block}";
 const MapCardStyle0 = mapCardCss;
 
 const MapCard = class {
@@ -2095,6 +2117,7 @@ const MapCard = class {
         this.mapChanged = createEvent(this, "mapChanged", 7);
         this.beforeMapChanged = createEvent(this, "beforeMapChanged", 7);
         this.toggleFilter = createEvent(this, "toggleFilter", 7);
+        this.clearSelection = createEvent(this, "clearSelection", 7);
         this.appProxies = undefined;
         this.defaultWebmapId = "";
         this.defaultLayerId = undefined;
@@ -2129,6 +2152,8 @@ const MapCard = class {
         this._searchConfiguration = undefined;
         this._webMapInfo = undefined;
         this._showHideOpen = false;
+        this._toolInfos = undefined;
+        this._controlsThatFit = undefined;
     }
     get el() { return getElement(this); }
     //--------------------------------------------------------------------------
@@ -2192,6 +2217,38 @@ const MapCard = class {
      * string: The current layers definition expression
      */
     _definitionExpression;
+    /**
+     * HTMLMapLayerPickerElement: The Map layer picker refrence element
+     */
+    _mapLayerPicker;
+    /**
+     * ResizeObserver: The observer that watches for toolbar size changes
+     */
+    _resizeObserver;
+    /**
+     * HTMLCalciteDropdownElement: Dropdown the will support show/hide of table columns
+     */
+    _showHideDropdown;
+    /**
+     * HTMLDivElement: The toolbars containing node
+     */
+    _toolbar;
+    /**
+     * any: Timeout used to limit redundancy for toolbar resizing
+     */
+    _timeout;
+    /**
+     * IToolSizeInfo[]: Id and Width for the current tools
+     */
+    _toolbarSizeInfos;
+    /**
+     * IToolSizeInfo[]: The default list of tool size info for tools that should display outside of the dropdown
+     */
+    _defaultVisibleToolSizeInfos;
+    /**
+     * boolean: When true the observer has been set and we don't need to set it again
+     */
+    _observerSet = false;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -2211,6 +2268,28 @@ const MapCard = class {
             this._definitionExpression = this.selectedLayer.definitionExpression;
         });
     }
+    /**
+     * watch for features ids changes
+     */
+    async selectedFeaturesIdsWatchHandler() {
+        this._validateEnabledActions();
+    }
+    /**
+     * watch for changes to the list of controls that will currently fit in the display
+     */
+    _controlsThatFitWatchHandler() {
+        const ids = this._controlsThatFit ? this._controlsThatFit.reduce((prev, cur) => {
+            prev.push(cur.id);
+            return prev;
+        }, []) : [];
+        this._toolInfos = this._toolInfos?.map(ti => {
+            if (ti && this._controlsThatFit) {
+                const id = this._getId(ti.icon);
+                ti.isOverflow = ids.indexOf(id) < 0;
+                return ti;
+            }
+        });
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -2219,15 +2298,21 @@ const MapCard = class {
     /**
      * Reset the filter
      */
-    async filterReset() {
+    async resetFilter() {
         this._filterActive = false;
     }
     /**
      * updates the filter
      */
-    async updateFilter() {
+    async updateFilterState() {
         this._filterActive = this._definitionExpression !== this.selectedLayer.definitionExpression;
     }
+    /**
+     * updates the layer in map layer picker
+     */
+    async updateLayer() {
+        void this._mapLayerPicker.updateLayer();
+    }
     //--------------------------------------------------------------------------
     //
     //  Events (public)
@@ -2245,6 +2330,10 @@ const MapCard = class {
      * Emitted on demand when filter action is clicked
      */
     toggleFilter;
+    /**
+     * Emitted on demand when clear selection button is clicked
+     */
+    clearSelection;
     /**
      * Listen for changes to map info and load the appropriate map
      */
@@ -2258,6 +2347,14 @@ const MapCard = class {
         this.selectedLayer = undefined;
         this.selectedFeaturesIds = [];
     }
+    /**
+     * Handles layer selection change to show new table
+     */
+    layerSelectionChange() {
+        setTimeout(() => {
+            this._initToolInfos();
+        }, 50);
+    }
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -2269,27 +2366,40 @@ const MapCard = class {
     async componentWillLoad() {
         await this._getTranslations();
         await this._initModules();
+        this._initToolInfos();
+        if (!this._resizeObserver) {
+            this._resizeObserver = new ResizeObserver(() => this._updateToolbar());
+        }
     }
     /**
      * Renders the component.
      */
     render() {
-        const mapContainerClass = this.isMapLayout ? "display-flex height-50-px" : "";
+        const mapContainerClass = this.isMapLayout ? "display-flex height-50-px border-bottom-3px" : "";
         const mapClass = this.hidden ? "visibility-hidden-1" : "";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        const mapPickerClass = this.mapInfos?.length > 1 ? "" : "display-none";
-        const mapHeightClass = this.mapInfos?.length > 1 ? "map-height" : "height-full";
-        const containerClass = this.isMobile ? "width-full" : "";
-        const mobileClass = this.isMobile ? "border-top" : "";
-        const headerElements = this.isMapLayout ? "" : "display-none";
-        return (h(Host, { key: '6f827d045d920101c70f55e80a422383f94bae56' }, h("div", { key: '50215e8f899cf6321b228b0ee5b8a0ba9e1911c4', class: `${mapContainerClass}` }, h("map-picker", { key: '46dd475d52684cc239963160ab79019970fa13d2', class: mapPickerClass, isMapLayout: this.isMapLayout, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { key: '8a8f260bb3a22b5bc2b933f94ab940e8750a9757', class: `mapView-header display-flex ${headerElements}` }, h("div", { key: 'a8ceb2a88432fbc052f00961a03d43cbf61dc076', class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, this.mapView && h("map-layer-picker", { key: '0c0c3e24b05491044d5bb42f460152eeb003dec2', appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", selectedIds: this.selectedLayer ? [this.selectedLayer.id] : [], showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), this._getDropDownItem())), h("div", { key: '6091fdd6540a8eda0df227251a581347c734369c', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { key: 'eb0823b1b1babd12822e0d8ee91bc76169a51476', 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 })));
+        const mapHeightClass = this.mapInfos?.length > 1 || this.isMapLayout ? "map-height" : "height-full";
+        this._validateActiveActions();
+        return (h(Host, { key: '197d79614a8d45037c034d3a61eda793d3ad3365' }, h("div", { key: 'ff428e43fb74c71fabd3af86677223c460bb4fb8', class: `${mapContainerClass} width-full`, ref: (el) => this._toolbar = el }, this._getActionBar(), !this.isMobile && this.isMapLayout && this._getDropdown("more-table-options")), h("div", { key: '0cf63d7623c194bcb0a8636e89bd150450c385a0', class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { key: '0982cb82f916bfff2c25e3b276b8f7708fe19842', 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 })));
     }
     /**
      * Called each time after the component is loaded
      */
     async componentDidRender() {
+        if (this.isMapLayout) {
+            this._updateToolbar();
+        }
         document.onclick = (e) => this._handleDocumentClick(e);
     }
+    /**
+     * Called once after the component is loaded
+     */
+    async componentDidLoad() {
+        if (!this.isMobile && !this._observerSet) {
+            this._resizeObserver.observe(this._toolbar);
+            this._observerSet = true;
+        }
+    }
     //--------------------------------------------------------------------------
     //
     //  Functions (protected)
@@ -2368,6 +2478,263 @@ const MapCard = class {
             });
         }
     }
+    /**
+     * Add/Remove tools from the action bar and dropdown based on available size
+     * @protected
+     */
+    _updateToolbar() {
+        if (this._timeout) {
+            clearTimeout(this._timeout);
+        }
+        if (!this.isMobile && this._toolbar && this._toolInfos) {
+            this._timeout = setTimeout(() => {
+                clearTimeout(this._timeout);
+                this._setToolbarSizeInfos();
+                const toolbarWidth = this._toolbar.offsetWidth;
+                let controlsWidth = this._toolbarSizeInfos.reduce((prev, cur) => {
+                    prev += cur.width;
+                    return prev;
+                }, 0);
+                const skipControls = ["solutions-more", "solutions-map-layer-picker-container", "map-picker"];
+                if (controlsWidth > toolbarWidth) {
+                    if (this._toolbarSizeInfos.length > 0) {
+                        const controlsThatFit = [...this._toolbarSizeInfos].reverse().reduce((prev, cur) => {
+                            if (skipControls.indexOf(cur.id) < 0) {
+                                if (controlsWidth > toolbarWidth) {
+                                    controlsWidth -= cur.width;
+                                }
+                                else {
+                                    prev.push(cur);
+                                }
+                            }
+                            return prev;
+                        }, []).reverse();
+                        this._setControlsThatFit(controlsThatFit, skipControls);
+                    }
+                }
+                else {
+                    if (this._defaultVisibleToolSizeInfos) {
+                        const currentTools = this._toolbarSizeInfos.reduce((prev, cur) => {
+                            prev.push(cur.id);
+                            return prev;
+                        }, []);
+                        let forceFinish = false;
+                        const controlsThatFit = [...this._defaultVisibleToolSizeInfos].reduce((prev, cur) => {
+                            if (!forceFinish && skipControls.indexOf(cur.id) < 0 &&
+                                (currentTools.indexOf(cur.id) > -1 || (controlsWidth + cur.width) <= toolbarWidth)) {
+                                if (currentTools.indexOf(cur.id) < 0) {
+                                    controlsWidth += cur.width;
+                                }
+                                prev.push(cur);
+                            }
+                            else if (skipControls.indexOf(cur.id) < 0 && (controlsWidth + cur.width) > toolbarWidth) {
+                                // exit the first time we evalute this as true...otherwise it will add the next control that will fit
+                                // and not preserve the overall order of controls
+                                forceFinish = true;
+                            }
+                            return prev;
+                        }, []);
+                        this._setControlsThatFit(controlsThatFit, skipControls);
+                    }
+                }
+            }, 250);
+        }
+    }
+    /**
+     * Validate if controls that fit the current display has changed or
+     * is different from what is currently displayed
+     * @param _setControlsThatFit
+     * @param skipControls
+     * @protected
+     */
+    _setControlsThatFit(controlsThatFit, skipControls) {
+        let update = JSON.stringify(controlsThatFit) !== JSON.stringify(this._controlsThatFit);
+        const actionbar = document.getElementById("solutions-action-bar");
+        actionbar?.childNodes?.forEach((n) => {
+            if (skipControls.indexOf(n.id) < 0 && !update) {
+                update = this._controlsThatFit.map(c => c.id).indexOf(n.id) < 0;
+            }
+        });
+        if (update) {
+            this._controlsThatFit = [...controlsThatFit];
+        }
+    }
+    /**
+     * Get the id and size for the toolbars current items
+     * @protected
+     */
+    _setToolbarSizeInfos() {
+        let hasWidth = false;
+        this._toolbarSizeInfos = [];
+        this._toolbar.childNodes.forEach((c, i) => {
+            // handle the action bar
+            if (i === 0) {
+                c.childNodes.forEach((actionbarChild) => {
+                    this._toolbarSizeInfos.push({
+                        id: actionbarChild.id,
+                        width: actionbarChild.offsetWidth
+                    });
+                    if (!hasWidth) {
+                        hasWidth = actionbarChild.offsetWidth > 0;
+                    }
+                });
+            }
+            else if (!c.referenceElement) {
+                // skip tooltips
+                this._toolbarSizeInfos.push({
+                    id: c.id,
+                    width: c.offsetWidth
+                });
+                if (!hasWidth) {
+                    hasWidth = c.offsetWidth > 0;
+                }
+            }
+        });
+        if (hasWidth && !this._defaultVisibleToolSizeInfos) {
+            this._defaultVisibleToolSizeInfos = [...this._toolbarSizeInfos];
+        }
+    }
+    /**
+     * Gets a row of controls that can be used for various interactions with the table
+     *
+     * @returns The dom node that contains the controls
+     * @protected
+     */
+    _getActionBar() {
+        const mapPickerClass = this.mapInfos?.length > 1 ? "" : "display-none";
+        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, 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, 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
+     *
+     * @param id string the id for the dropdown and its tooltip
+     *
+     * @returns VNode the dropdown node
+     * @protected
+     */
+    _getDropdown(id) {
+        const dropdownItems = this._getDropdownItems();
+        return dropdownItems.length > 0 ? (h("calcite-dropdown", { closeOnSelectDisabled: true, disabled: this.selectedLayer === undefined, id: "solutions-more", onCalciteDropdownBeforeClose: () => this._forceShowHide(), ref: (el) => this._moreDropdown = el }, h("calcite-action", { appearance: "solid", id: id, label: "", onClick: () => this._closeShowHide(), slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, dropdownItems.map(item => {
+            return (h("calcite-dropdown-group", { class: item.disabled ? "disabled" : "", selectionMode: "none" }, h("calcite-dropdown-item", { disabled: item.loading, iconStart: item.icon, id: "solutions-subset-list", onClick: item.func }, item.loading ? (h("div", { class: "display-flex" }, h("calcite-loader", { inline: true, label: item.label, scale: "m" }), item.label)) : item.label)));
+        })))) : undefined;
+    }
+    /**
+     * Open show/hide dropdown
+     * @protected
+     */
+    _closeShowHide() {
+        this._showHideOpen = false;
+    }
+    /**
+     * Get a list of toolInfos that should display in the dropdown
+     *
+     * @returns IToolInfo[] the list of toolInfos that should display in the dropdown
+     * @protected
+     */
+    _getDropdownItems() {
+        return this._toolInfos?.filter(toolInfo => toolInfo && toolInfo.isOverflow);
+    }
+    /**
+     * Get the full list of toolInfos.
+     * Order is important. They should be listed in the order they should display in the UI from
+     * Left to Right for the action bar and Top to Bottom for the dropdown.
+     * @protected
+     */
+    _initToolInfos() {
+        const featuresSelected = this.selectedFeaturesIds?.length > 0;
+        const hasFilterExpressions = this._hasFilterExpressions();
+        // hide multiple edits for R03
+        const showMultipleEdits = this.selectedFeaturesIds?.length > 1 && false;
+        if (this._translations) {
+            this._toolInfos = [
+                {
+                    active: false,
+                    icon: "zoom-to-object",
+                    indicator: false,
+                    label: this._translations.zoom,
+                    func: () => this._zoom(),
+                    disabled: !featuresSelected,
+                    isOverflow: false
+                },
+                hasFilterExpressions ? {
+                    active: false,
+                    icon: "filter",
+                    indicator: false,
+                    label: this._translations.filters,
+                    func: () => this._toggleFilter(),
+                    disabled: false,
+                    isOverflow: false
+                } : undefined,
+                showMultipleEdits ? {
+                    active: false,
+                    icon: "pencil",
+                    indicator: false,
+                    label: this._translations.editMultiple,
+                    func: () => alert(this._translations.editMultiple),
+                    disabled: !showMultipleEdits,
+                    isOverflow: false,
+                } : undefined,
+                {
+                    active: false,
+                    icon: "refresh",
+                    indicator: false,
+                    label: this._translations.refresh,
+                    func: () => this.selectedLayer.refresh(),
+                    disabled: false,
+                    isOverflow: false
+                },
+                {
+                    active: false,
+                    icon: "erase",
+                    indicator: false,
+                    label: this._translations.clearSelection,
+                    func: () => this.clearSelection.emit(),
+                    disabled: !featuresSelected,
+                    isOverflow: false
+                }
+            ];
+            this._defaultVisibleToolSizeInfos = undefined;
+        }
+    }
+    /**
+     * Update actions active prop based on a stored value
+     * @protected
+     */
+    _validateActiveActions() {
+        const activeDependant = [
+            "filter"
+        ];
+        this._toolInfos?.forEach(ti => {
+            if (ti && activeDependant.indexOf(ti.icon) > -1) {
+                if (ti.icon === "filter") {
+                    ti.indicator = this._filterActive;
+                }
+            }
+        });
+    }
+    /**
+     * Update actions enabled prop based on number of selected indexes
+     * @protected
+     */
+    _validateEnabledActions() {
+        const featuresSelected = this.selectedFeaturesIds?.length > 0;
+        const showMultipleEdits = this.selectedFeaturesIds?.length > 1 && this.selectedLayer?.capabilities?.operations?.supportsUpdate;
+        const selectionDependant = [
+            "zoom-to-object",
+            "pencil",
+            "erase"
+        ];
+        this._toolInfos?.forEach(ti => {
+            if (ti && selectionDependant.indexOf(ti.icon) > -1) {
+                // disable the pencil icon if multiple features are not selected
+                // For other icons disable them if any feature is not selected
+                ti.disabled = ti.icon === "pencil" ? !showMultipleEdits : !featuresSelected;
+            }
+        });
+    }
     /**
      * Add/remove the home widget base on enableHome prop
      *
@@ -2406,7 +2773,10 @@ const MapCard = class {
      */
     _handleDocumentClick(e) {
         const id = e.target?.id;
-        if (this._showHideOpen && id !== "solutions-subset-list" && id !== "solutions-more" && id !== "chevron-down") {
+        if (id === "solutions-subset-list") {
+            this._moreDropdown.open = true;
+        }
+        else if (this._showHideOpen && id !== "solutions-subset-list" && id !== "solutions-more" && id !== "chevron-down") {
             if (this._moreDropdown) {
                 this._showHideOpen = false;
                 this._moreDropdown.open = false;
@@ -2424,16 +2794,20 @@ const MapCard = class {
         }
     }
     /**
-   * Zoom to all selected features
-   *
-   * @returns a promise that will resolve when the operation is complete
-   */
+     * Zoom to all selected features
+     *
+     * @returns a promise that will resolve when the operation is complete
+     */
     async _zoom() {
         if (this.selectedLayer) {
             const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayer.id);
             await goToSelection(this.selectedFeaturesIds, selectedLayerView, this.mapView, true, undefined, this.zoomToScale);
         }
     }
+    /**
+     * toggle the filter
+     * @protected
+     */
     async _toggleFilter() {
         this.toggleFilter.emit();
     }
@@ -2450,22 +2824,66 @@ const MapCard = class {
         return layerExpressions?.length > 0;
     }
     /**
-     * Get Dropdown action item
-     * @returns Dropdown item
+     * Get the actions that are used for various interactions with the table
+     *
+     * @returns VNode[] the action nodes
      */
-    _getDropDownItem() {
-        return (h("calcite-dropdown", { closeOnSelectDisabled: true, disabled: this.selectedLayer === undefined, id: "solutions-more", onCalciteDropdownBeforeClose: () => this._forceShowHide(), ref: (el) => this._moreDropdown = el, widthScale: "l" }, h("calcite-action", { appearance: "solid", id: 'solutions-more', label: "", onClick: () => this._toggleShowHide(), slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: this._showHideOpen ? "chevron-up" : "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { selectionMode: "none" }, this._getDropDownItems())));
+    _getActions() {
+        const actions = this._getActionItems();
+        return actions?.reduce((prev, cur) => {
+            if (cur && !cur.isOverflow) {
+                prev.push(this._getAction(cur.active, cur.icon, cur.indicator, cur.label, cur.func, cur.disabled, cur.loading));
+            }
+            return prev;
+        }, []);
     }
     /**
-     * Gets the dropdown items
-     * @returns dropdown items
+     * Get a tooltip
+     *
+     * @param placement string where the tooltip should display
+     * @param referenceElement string the element the tooltip will be associated with
+     * @param text string the text to display in the tooltip
+     *
+     * @returns VNode The tooltip node
      */
-    _getDropDownItems() {
-        const featureSelected = this.selectedFeaturesIds?.length > 0;
-        const showMultipleEdits = this.selectedFeaturesIds?.length > 1;
-        const hasFilterExpressions = this._hasFilterExpressions();
-        return (h(Fragment, null, h("calcite-dropdown-group", { selectionMode: "none" }, h("calcite-dropdown-item", { disabled: !showMultipleEdits, iconStart: "pencil", id: "solutions-subset-list", onClick: () => alert(this._translations.editMultiple) }, this._translations.editMultiple)), h("calcite-dropdown-group", { selectionMode: "none" }, h("calcite-dropdown-item", { iconStart: "refresh", id: "solutions-subset-list", onClick: () => { this.selectedLayer.refresh(); } }, this._translations.refresh)), h("calcite-dropdown-group", { selectionMode: "none" }, h("calcite-dropdown-item", { disabled: !featureSelected, iconStart: "zoom-to-object", id: "solutions-subset-list", onClick: this._zoom.bind(this) }, this._translations.zoom)), hasFilterExpressions &&
-            h("calcite-dropdown-group", null, h("calcite-dropdown-item", { disabled: false, iconStart: "filter", id: "solutions-subset-list", onClick: this._toggleFilter.bind(this), selected: this._filterActive }, this._translations.filters))));
+    _getToolTip(placement, referenceElement, text) {
+        return document.getElementById(referenceElement) ? (h("calcite-tooltip", { placement: placement, "reference-element": "map-" + referenceElement }, h("span", null, text))) : undefined;
+    }
+    /**
+     * Get a list of toolInfos that should display outside of the dropdown
+     *
+     * @returns IToolInfo[] the list of toolInfos that should not display in the overflow dropdown
+     */
+    _getActionItems() {
+        return this._toolInfos?.filter(toolInfo => toolInfo && !toolInfo.isOverflow);
+    }
+    /**
+     * Get an action and tooltip
+     *
+     * @param active boolean if true the icon is in use
+     * @param icon string the name of the icon to display, will also be used as the id
+     * @param indicator if true the icon will shown using indicator
+     * @param label string the text to display and label the action
+     * @param func any the function to execute
+     * @param disabled boolean when true the user will not be able to interact with the action
+     * @param loading if true loading indicator will shown
+     * @param slot slot for the action
+     *
+     * @returns VNode The node representing the DOM element that will contain the action
+     */
+    _getAction(active, icon, indicator, label, func, disabled, loading, slot) {
+        const _disabled = this.selectedLayer === undefined ? true : disabled;
+        return (h("div", { class: "display-flex", id: this._getId(icon), slot: slot }, h("calcite-action", { active: active, appearance: "solid", disabled: _disabled, icon: icon, id: "map-" + icon, indicator: indicator, label: label, loading: loading, onClick: func, text: label, textEnabled: true }), this._getToolTip("bottom", icon, label)));
+    }
+    /**
+     * Get an id with a prefix to the user supplied value
+     *
+     * @param id the unique value for the id
+     *
+     * @returns the new id with the prefix value
+     */
+    _getId(id) {
+        return `solutions-action-${id}`;
     }
     /**
    * Fetches the component's translations
@@ -2479,7 +2897,9 @@ const MapCard = class {
     }
     static get watchers() { return {
         "enableHome": ["enableHomeWatchHandler"],
-        "selectedLayer": ["selectedLayerWatchHandler"]
+        "selectedLayer": ["selectedLayerWatchHandler"],
+        "selectedFeaturesIds": ["selectedFeaturesIdsWatchHandler"],
+        "_controlsThatFit": ["_controlsThatFitWatchHandler"]
     }; }
 };
 MapCard.style = MapCardStyle0;