@esri/solutions-components 0.10.25 → 0.10.27

package/dist/components/map-card2.js

@@ -3,7 +3,7 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { l as loadModules } from './loadModules.js';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { c as getFeatureLayerView, b as goToSelection } from './mapViewUtils.js';
@@ -82,7 +82,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 = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLElement {
@@ -92,6 +92,7 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
         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;
@@ -126,6 +127,8 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
         this._searchConfiguration = undefined;
         this._webMapInfo = undefined;
         this._showHideOpen = false;
+        this._toolInfos = undefined;
+        this._controlsThatFit = undefined;
     }
     get el() { return this; }
     //--------------------------------------------------------------------------
@@ -189,6 +192,38 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
      * 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
@@ -208,6 +243,28 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
             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)
@@ -216,15 +273,21 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
     /**
      * 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)
@@ -242,6 +305,10 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
      * 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
      */
@@ -255,6 +322,14 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
         this.selectedLayer = undefined;
         this.selectedFeaturesIds = [];
     }
+    /**
+     * Handles layer selection change to show new table
+     */
+    layerSelectionChange() {
+        setTimeout(() => {
+            this._initToolInfos();
+        }, 50);
+    }
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -266,27 +341,40 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
     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)
@@ -365,6 +453,263 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
             });
         }
     }
+    /**
+     * 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
      *
@@ -403,7 +748,10 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
      */
     _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;
@@ -421,16 +769,20 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
         }
     }
     /**
-   * 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();
     }
@@ -447,22 +799,66 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
         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
+     */
+    _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;
+        }, []);
+    }
+    /**
+     * 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
      */
-    _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())));
+    _getToolTip(placement, referenceElement, text) {
+        return document.getElementById(referenceElement) ? (h("calcite-tooltip", { placement: placement, "reference-element": "map-" + referenceElement }, h("span", null, text))) : undefined;
     }
     /**
-     * Gets the dropdown items
-     * @returns dropdown items
+     * 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
      */
-    _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))));
+    _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
@@ -476,7 +872,9 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
     }
     static get watchers() { return {
         "enableHome": ["enableHomeWatchHandler"],
-        "selectedLayer": ["selectedLayerWatchHandler"]
+        "selectedLayer": ["selectedLayerWatchHandler"],
+        "selectedFeaturesIds": ["selectedFeaturesIdsWatchHandler"],
+        "_controlsThatFit": ["_controlsThatFitWatchHandler"]
     }; }
     static get style() { return MapCardStyle0; }
 }, [0, "map-card", {
@@ -514,11 +912,16 @@ const MapCard = /*@__PURE__*/ proxyCustomElement(class MapCard extends HTMLEleme
         "_searchConfiguration": [32],
         "_webMapInfo": [32],
         "_showHideOpen": [32],
-        "filterReset": [64],
-        "updateFilter": [64]
-    }, [[8, "mapInfoChange", "mapInfoChange"], [8, "noLayersFound", "noLayersFound"]], {
+        "_toolInfos": [32],
+        "_controlsThatFit": [32],
+        "resetFilter": [64],
+        "updateFilterState": [64],
+        "updateLayer": [64]
+    }, [[8, "mapInfoChange", "mapInfoChange"], [8, "noLayersFound", "noLayersFound"], [8, "layerSelectionChange", "layerSelectionChange"]], {
         "enableHome": ["enableHomeWatchHandler"],
-        "selectedLayer": ["selectedLayerWatchHandler"]
+        "selectedLayer": ["selectedLayerWatchHandler"],
+        "selectedFeaturesIds": ["selectedFeaturesIdsWatchHandler"],
+        "_controlsThatFit": ["_controlsThatFitWatchHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/map-draw-tools2.js

@@ -176,7 +176,7 @@ const MapDrawTools = /*@__PURE__*/ proxyCustomElement(class MapDrawTools extends
             "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 })))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/map-fullscreen2.js

@@ -88,7 +88,7 @@ const MapFullscreen = /*@__PURE__*/ proxyCustomElement(class MapFullscreen exten
      * Renders the component.
      */
     render() {
-        return (h(Host, { key: '9fc5dfeffc8601763b27e001311ec317934ebcae' }, h("div", { key: '65f2ab96d7283a9a10a113be0cdef6a95de1ee1b', class: "fullscreen-widget", ref: (el) => { this._fullscreenElement = el; } })));
+        return (h(Host, { key: '8d5feed87c1795cb487ff3eda1da7573a65d3c89' }, h("div", { key: '4a74da3dc79280fdff87c7c723bb9c729897b1ab', class: "fullscreen-widget", ref: (el) => { this._fullscreenElement = el; } })));
     }
     /**
      * StencilJS: Called just after the component updates.