@esri/solutions-components 0.10.25 → 0.10.26

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

@@ -18,7 +18,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Host, h, Fragment } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 import { joinAppProxies } from "templates-common-library-esm/functionality/proxy";
 import { getLocaleComponentStrings } from "../../utils/locale";
@@ -65,6 +65,8 @@ export class MapCard {
         this._searchConfiguration = undefined;
         this._webMapInfo = undefined;
         this._showHideOpen = false;
+        this._toolInfos = undefined;
+        this._controlsThatFit = undefined;
     }
     //--------------------------------------------------------------------------
     //
@@ -133,6 +135,38 @@ export class MapCard {
      * 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
@@ -152,6 +186,28 @@ export class MapCard {
             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)
@@ -160,15 +216,21 @@ export class MapCard {
     /**
      * 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)
@@ -186,6 +248,10 @@ export class MapCard {
      * 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
      */
@@ -199,6 +265,14 @@ export class MapCard {
         this.selectedLayer = undefined;
         this.selectedFeaturesIds = [];
     }
+    /**
+     * Handles layer selection change to show new table
+     */
+    layerSelectionChange() {
+        setTimeout(() => {
+            this._initToolInfos();
+        }, 50);
+    }
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -210,27 +284,40 @@ export class MapCard {
     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)
@@ -309,6 +396,263 @@ export class MapCard {
             });
         }
     }
+    /**
+     * 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
      *
@@ -347,7 +691,10 @@ export class MapCard {
      */
     _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;
@@ -365,16 +712,20 @@ export class MapCard {
         }
     }
     /**
-   * 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();
     }
@@ -391,22 +742,66 @@ export class MapCard {
         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
@@ -988,7 +1383,9 @@ export class MapCard {
             "_translations": {},
             "_searchConfiguration": {},
             "_webMapInfo": {},
-            "_showHideOpen": {}
+            "_showHideOpen": {},
+            "_toolInfos": {},
+            "_controlsThatFit": {}
         };
     }
     static get events() {
@@ -1043,11 +1440,26 @@ export class MapCard {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "clearSelection",
+                "name": "clearSelection",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when clear selection button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
         return {
-            "filterReset": {
+            "resetFilter": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -1064,7 +1476,7 @@ export class MapCard {
                     "tags": []
                 }
             },
-            "updateFilter": {
+            "updateFilterState": {
                 "complexType": {
                     "signature": "() => Promise<void>",
                     "parameters": [],
@@ -1080,6 +1492,23 @@ export class MapCard {
                     "text": "updates the filter",
                     "tags": []
                 }
+            },
+            "updateLayer": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "updates the layer in map layer picker",
+                    "tags": []
+                }
             }
         };
     }
@@ -1091,6 +1520,12 @@ export class MapCard {
             }, {
                 "propName": "selectedLayer",
                 "methodName": "selectedLayerWatchHandler"
+            }, {
+                "propName": "selectedFeaturesIds",
+                "methodName": "selectedFeaturesIdsWatchHandler"
+            }, {
+                "propName": "_controlsThatFit",
+                "methodName": "_controlsThatFitWatchHandler"
             }];
     }
     static get listeners() {
@@ -1106,6 +1541,12 @@ export class MapCard {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "layerSelectionChange",
+                "method": "layerSelectionChange",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }];
     }
 }

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

@@ -183,7 +183,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: '5f82fce6481912c103d709b5fefa3a890d291943' }, h("div", { key: '464d32d718167c5e7e2636fa0184622477fc5464', class: containerClass }, h("div", { key: '52a11f9d1b8f1692e67a7e706de3741e43c40591', ref: (el) => { this._sketchElement = el; } }), h("div", { key: '3a529e4e358ec4890513d7fcbbceadabb9e66a18', class: undoRedoClass }, h("calcite-action", { key: '98b684a186a03fe8868bde1978d59c7618a7635a', disabled: !this.undoEnabled, icon: "undo", onClick: () => this._undo(), scale: "s", text: this._translations.undo }), h("calcite-action", { key: 'b1d769fd984ecf7cf9e868029cc7a5aba5a39dc7', disabled: !this.redoEnabled, icon: "redo", onClick: () => this._redo(), scale: "s", text: this._translations.redo })))));
+        return (h(Host, { key: '55862b3113e637552b0d1728e53e4a7b296ed03d' }, h("div", { key: '22b9b92f3d1cca8f273ecc35d25697ecfc893574', class: containerClass }, h("div", { key: '5f3b4e380be0be362fa06c539114d391f10c4db2', ref: (el) => { this._sketchElement = el; } }), h("div", { key: '5561e86cde0cbbe552e0853b326fbb1659ade6c3', class: undoRedoClass }, h("calcite-action", { key: '7197e23e6db476a65c3ce850db350d0e45454688', disabled: !this.undoEnabled, icon: "undo", onClick: () => this._undo(), scale: "s", text: this._translations.undo }), h("calcite-action", { key: 'fc9a818556c51e3f86981cf4ee5355e9c52bb6b1', disabled: !this.redoEnabled, icon: "redo", onClick: () => this._redo(), scale: "s", text: this._translations.redo })))));
     }
     //--------------------------------------------------------------------------
     //