@esri/solutions-components 0.8.2 → 0.8.3

package/dist/esm/calcite-action-group.entry.js

@@ -3,18 +3,18 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h, g as getElement } from './index-164d485a.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-12c4fcfb.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-37e7fbd6.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-904407bf.js';
-import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-436fb2b1.js';
-import { S as SLOTS$1 } from './resources-20074cb1.js';
-import { S as SLOTS, I as ICONS, C as CSS } from './resources-b0e2b809.js';
-import { u as slotChangeHasAssignedElement } from './dom-38c6f027.js';
-import './observers-d04d1da9.js';
-import './key-c83d835f.js';
+import { r as registerInstance, h, g as getElement } from './index-bdfaac50.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-a395417e.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-aea90723.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-857f39cf.js';
+import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-b39c5433.js';
+import { S as SLOTS } from './resources-20074cb1.js';
+import { I as ICONS, S as SLOTS$1, C as CSS } from './resources-b0e2b809.js';
+import { u as slotChangeHasAssignedElement } from './dom-b91aa537.js';
+import './observers-5ba39eee.js';
+import './key-9a10d862.js';
 import './guid-b75a5f7b.js';
-import './resources-8834f920.js';
+import './resources-0f8db821.js';
 
 const actionGroupCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:flex;flex-direction:column;padding:0px;--calcite-action-group-columns:3;--calcite-action-group-gap:1px;--calcite-action-group-padding:1px}.container{display:flex;flex-grow:1;flex-direction:column}:host([columns=\"1\"]){--calcite-action-group-columns:1}:host([columns=\"2\"]){--calcite-action-group-columns:2}:host([columns=\"3\"]){--calcite-action-group-columns:3}:host([columns=\"4\"]){--calcite-action-group-columns:4}:host([columns=\"5\"]){--calcite-action-group-columns:5}:host([columns=\"6\"]){--calcite-action-group-columns:6}:host(:first-child){padding-block-start:0px}:host([layout=horizontal]),:host([layout=horizontal]) .container{flex-direction:row}:host([layout=grid]){display:grid}:host([layout=grid]) .container{display:grid;place-content:stretch;background-color:var(--calcite-color-background);gap:var(--calcite-action-group-gap);padding:var(--calcite-action-group-gap);grid-template-columns:repeat(var(--calcite-action-group-columns), auto)}:host([hidden]){display:none}[hidden]{display:none}";
 
@@ -93,7 +93,7 @@ const ActionGroup = class {
     // --------------------------------------------------------------------------
     renderMenu() {
         const { expanded, menuOpen, scale, layout, messages, overlayPositioning, hasMenuActions } = this;
-        return (h("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], hidden: !hasMenuActions, label: messages.more, onCalciteActionMenuOpen: this.setMenuOpen, open: menuOpen, overlayPositioning: overlayPositioning, placement: layout === "horizontal" ? "bottom-start" : "leading-start", scale: scale }, h("calcite-action", { icon: ICONS.menu, scale: scale, slot: SLOTS$1.trigger, text: messages.more, textEnabled: expanded }), h("slot", { name: SLOTS.menuActions, onSlotchange: this.handleMenuActionsSlotChange }), h("slot", { name: SLOTS.menuTooltip, slot: SLOTS$1.tooltip })));
+        return (h("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], hidden: !hasMenuActions, label: messages.more, onCalciteActionMenuOpen: this.setMenuOpen, open: menuOpen, overlayPositioning: overlayPositioning, placement: layout === "horizontal" ? "bottom-start" : "leading-start", scale: scale }, h("calcite-action", { icon: ICONS.menu, scale: scale, slot: SLOTS.trigger, text: messages.more, textEnabled: expanded }), h("slot", { name: SLOTS$1.menuActions, onSlotchange: this.handleMenuActionsSlotChange }), h("slot", { name: SLOTS$1.menuTooltip, slot: SLOTS.tooltip })));
     }
     render() {
         return (h("div", { "aria-label": this.label, class: CSS.container, role: "group" }, h("slot", null), this.renderMenu()));

package/dist/esm/calcite-action-menu.entry.js

@@ -0,0 +1,291 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, e as createEvent, h, F as Fragment, g as getElement } from './index-bdfaac50.js';
+import { g as getRoundRobinIndex } from './array-396bdf3c.js';
+import { t as toAriaBoolean, i as isPrimaryPointerButton, e as focusElement } from './dom-b91aa537.js';
+import { g as guid } from './guid-b75a5f7b.js';
+import { i as isActivationKey } from './key-9a10d862.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-aea90723.js';
+import { a as activeAttr, S as SLOTS, C as CSS, I as ICONS } from './resources-20074cb1.js';
+import './resources-0f8db821.js';
+
+const actionMenuCss = ":host{box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--calcite-font-size-1);color:var(--calcite-color-text-2)}::slotted(calcite-action-group){border-block-end:1px solid var(--calcite-color-border-3)}::slotted(calcite-action-group:last-child){border-block-end:0}.default-trigger{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}slot[name=trigger]::slotted(calcite-action),calcite-action::slotted([slot=trigger]){position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}.menu{max-block-size:45vh;flex-direction:column;flex-wrap:nowrap;overflow-y:auto;overflow-x:hidden;outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}";
+
+const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
+const ActionMenu = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calciteActionMenuOpen = createEvent(this, "calciteActionMenuOpen", 6);
+        this.actionElements = [];
+        this.guid = `calcite-action-menu-${guid()}`;
+        this.menuId = `${this.guid}-menu`;
+        this.menuButtonId = `${this.guid}-menu-button`;
+        // --------------------------------------------------------------------------
+        //
+        //  Component Methods
+        //
+        // --------------------------------------------------------------------------
+        this.connectMenuButtonEl = () => {
+            const { menuButtonId, menuId, open, label } = this;
+            const menuButtonEl = this.slottedMenuButtonEl || this.defaultMenuButtonEl;
+            if (this.menuButtonEl === menuButtonEl) {
+                return;
+            }
+            this.disconnectMenuButtonEl();
+            this.menuButtonEl = menuButtonEl;
+            this.setTooltipReferenceElement();
+            if (!menuButtonEl) {
+                return;
+            }
+            menuButtonEl.active = open;
+            menuButtonEl.setAttribute("aria-controls", menuId);
+            menuButtonEl.setAttribute("aria-expanded", toAriaBoolean(open));
+            menuButtonEl.setAttribute("aria-haspopup", "true");
+            if (!menuButtonEl.id) {
+                menuButtonEl.id = menuButtonId;
+            }
+            if (!menuButtonEl.label) {
+                menuButtonEl.label = label;
+            }
+            if (!menuButtonEl.text) {
+                menuButtonEl.text = label;
+            }
+            menuButtonEl.addEventListener("pointerdown", this.menuButtonClick);
+            menuButtonEl.addEventListener("keydown", this.menuButtonKeyDown);
+        };
+        this.disconnectMenuButtonEl = () => {
+            const { menuButtonEl } = this;
+            if (!menuButtonEl) {
+                return;
+            }
+            menuButtonEl.removeEventListener("pointerdown", this.menuButtonClick);
+            menuButtonEl.removeEventListener("keydown", this.menuButtonKeyDown);
+        };
+        this.setMenuButtonEl = (event) => {
+            const actions = event.target
+                .assignedElements({
+                flatten: true,
+            })
+                .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-action"));
+            this.slottedMenuButtonEl = actions[0];
+            this.connectMenuButtonEl();
+        };
+        this.setDefaultMenuButtonEl = (el) => {
+            this.defaultMenuButtonEl = el;
+            this.connectMenuButtonEl();
+        };
+        // --------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        // --------------------------------------------------------------------------
+        this.handleCalciteActionClick = () => {
+            this.open = false;
+            this.setFocus();
+        };
+        this.menuButtonClick = (event) => {
+            if (!isPrimaryPointerButton(event)) {
+                return;
+            }
+            this.toggleOpen();
+        };
+        this.updateTooltip = (event) => {
+            const tooltips = event.target
+                .assignedElements({
+                flatten: true,
+            })
+                .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-tooltip"));
+            this.tooltipEl = tooltips[0];
+            this.setTooltipReferenceElement();
+        };
+        this.setTooltipReferenceElement = () => {
+            const { tooltipEl, expanded, menuButtonEl, open } = this;
+            if (tooltipEl) {
+                tooltipEl.referenceElement = !expanded && !open ? menuButtonEl : null;
+            }
+        };
+        this.updateAction = (action, index) => {
+            const { guid, activeMenuItemIndex } = this;
+            const id = `${guid}-action-${index}`;
+            action.tabIndex = -1;
+            action.setAttribute("role", "menuitem");
+            if (!action.id) {
+                action.id = id;
+            }
+            // data attribute is used to style the "activeMenuItemIndex" action using token focus styling.
+            action.toggleAttribute(activeAttr, index === activeMenuItemIndex);
+        };
+        this.updateActions = (actions) => {
+            actions === null || actions === void 0 ? void 0 : actions.forEach(this.updateAction);
+        };
+        this.handleDefaultSlotChange = (event) => {
+            const actions = event.target
+                .assignedElements({
+                flatten: true,
+            })
+                .reduce((previousValue, currentValue) => {
+                if (currentValue === null || currentValue === void 0 ? void 0 : currentValue.matches("calcite-action")) {
+                    previousValue.push(currentValue);
+                    return previousValue;
+                }
+                if (currentValue === null || currentValue === void 0 ? void 0 : currentValue.matches("calcite-action-group")) {
+                    return previousValue.concat(Array.from(currentValue.querySelectorAll("calcite-action")));
+                }
+                return previousValue;
+            }, []);
+            this.actionElements = actions.filter((action) => !action.disabled && !action.hidden);
+        };
+        this.menuButtonKeyDown = (event) => {
+            const { key } = event;
+            const { actionElements, activeMenuItemIndex, open } = this;
+            if (!actionElements.length) {
+                return;
+            }
+            if (isActivationKey(key)) {
+                event.preventDefault();
+                if (!open) {
+                    this.toggleOpen();
+                    return;
+                }
+                const action = actionElements[activeMenuItemIndex];
+                action ? action.click() : this.toggleOpen(false);
+            }
+            if (key === "Tab") {
+                this.open = false;
+                return;
+            }
+            if (key === "Escape") {
+                this.toggleOpen(false);
+                event.preventDefault();
+                return;
+            }
+            this.handleActionNavigation(event, key, actionElements);
+        };
+        this.handleActionNavigation = (event, key, actions) => {
+            if (!this.isValidKey(key, SUPPORTED_MENU_NAV_KEYS)) {
+                return;
+            }
+            event.preventDefault();
+            if (!this.open) {
+                this.toggleOpen();
+                if (key === "Home" || key === "ArrowDown") {
+                    this.activeMenuItemIndex = 0;
+                }
+                if (key === "End" || key === "ArrowUp") {
+                    this.activeMenuItemIndex = actions.length - 1;
+                }
+                return;
+            }
+            if (key === "Home") {
+                this.activeMenuItemIndex = 0;
+            }
+            if (key === "End") {
+                this.activeMenuItemIndex = actions.length - 1;
+            }
+            const currentIndex = this.activeMenuItemIndex;
+            if (key === "ArrowUp") {
+                this.activeMenuItemIndex = getRoundRobinIndex(Math.max(currentIndex - 1, -1), actions.length);
+            }
+            if (key === "ArrowDown") {
+                this.activeMenuItemIndex = getRoundRobinIndex(currentIndex + 1, actions.length);
+            }
+        };
+        this.toggleOpenEnd = () => {
+            this.setFocus();
+            this.el.removeEventListener("calcitePopoverOpen", this.toggleOpenEnd);
+        };
+        this.toggleOpen = (value = !this.open) => {
+            this.el.addEventListener("calcitePopoverOpen", this.toggleOpenEnd);
+            this.open = value;
+        };
+        this.handlePopoverOpen = () => {
+            this.open = true;
+        };
+        this.handlePopoverClose = () => {
+            this.open = false;
+        };
+        this.appearance = "solid";
+        this.expanded = false;
+        this.flipPlacements = undefined;
+        this.label = undefined;
+        this.open = false;
+        this.overlayPositioning = "absolute";
+        this.placement = "auto";
+        this.scale = undefined;
+        this.menuButtonEl = undefined;
+        this.activeMenuItemIndex = -1;
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    // --------------------------------------------------------------------------
+    connectedCallback() {
+        this.connectMenuButtonEl();
+    }
+    componentWillLoad() {
+        setUpLoadableComponent(this);
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+    }
+    disconnectedCallback() {
+        this.disconnectMenuButtonEl();
+    }
+    expandedHandler() {
+        this.open = false;
+        this.setTooltipReferenceElement();
+    }
+    openHandler(open) {
+        this.activeMenuItemIndex = this.open ? 0 : -1;
+        if (this.menuButtonEl) {
+            this.menuButtonEl.active = open;
+        }
+        this.calciteActionMenuOpen.emit();
+        this.setTooltipReferenceElement();
+    }
+    activeMenuItemIndexHandler() {
+        this.updateActions(this.actionElements);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Methods
+    //
+    // --------------------------------------------------------------------------
+    /** Sets focus on the component. */
+    async setFocus() {
+        await componentFocusable(this);
+        return focusElement(this.menuButtonEl);
+    }
+    renderMenuButton() {
+        const { appearance, label, scale, expanded } = this;
+        const menuButtonSlot = (h("slot", { name: SLOTS.trigger, onSlotchange: this.setMenuButtonEl }, h("calcite-action", { appearance: appearance, class: CSS.defaultTrigger, icon: ICONS.menu, scale: scale, text: label, textEnabled: expanded,
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.setDefaultMenuButtonEl })));
+        return menuButtonSlot;
+    }
+    renderMenuItems() {
+        const { actionElements, activeMenuItemIndex, open, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements, } = this;
+        const activeAction = actionElements[activeMenuItemIndex];
+        const activeDescendantId = (activeAction === null || activeAction === void 0 ? void 0 : activeAction.id) || null;
+        return (h("calcite-popover", { autoClose: true, flipPlacements: flipPlacements, focusTrapDisabled: true, label: label, offsetDistance: 0, onCalcitePopoverClose: this.handlePopoverClose, onCalcitePopoverOpen: this.handlePopoverOpen, open: open, overlayPositioning: overlayPositioning, placement: placement, pointerDisabled: true, referenceElement: menuButtonEl }, h("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: CSS.menu, id: menuId, onClick: this.handleCalciteActionClick, role: "menu", tabIndex: -1 }, h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
+    }
+    render() {
+        return (h(Fragment, null, this.renderMenuButton(), this.renderMenuItems(), h("slot", { name: SLOTS.tooltip, onSlotchange: this.updateTooltip })));
+    }
+    isValidKey(key, supportedKeys) {
+        return !!supportedKeys.find((k) => k === key);
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "expanded": ["expandedHandler"],
+        "open": ["openHandler"],
+        "activeMenuItemIndex": ["activeMenuItemIndexHandler"]
+    }; }
+};
+ActionMenu.style = actionMenuCss;
+
+export { ActionMenu as calcite_action_menu };

package/dist/esm/calcite-action-pad.entry.js

@@ -0,0 +1,165 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, e as createEvent, h, a as Host, g as getElement } from './index-bdfaac50.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-a395417e.js';
+import { s as slotChangeGetAssignedElements } from './dom-b91aa537.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-aea90723.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-857f39cf.js';
+import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-b39c5433.js';
+import { t as toggleChildActionText, E as ExpandToggle } from './ExpandToggle-22fd2faa.js';
+import { c as createObserver } from './observers-5ba39eee.js';
+import './guid-b75a5f7b.js';
+import './resources-0f8db821.js';
+import './key-9a10d862.js';
+import './resources-b0e2b809.js';
+import './resources-20074cb1.js';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
+ */
+const CSS = {
+    actionGroupEnd: "action-group--end",
+    container: "container",
+};
+const SLOTS = {
+    expandTooltip: "expand-tooltip",
+};
+
+const actionPadCss = ":host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:block}@keyframes in{0%{opacity:0}100%{opacity:1}}:host{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:0.125rem;--calcite-action-pad-expanded-max-width:auto;background:transparent}:host([expanded][layout=vertical]) .container{max-inline-size:var(--calcite-action-pad-expanded-max-width)}::slotted(calcite-action-group){border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);padding-block:0px}.container{display:inline-flex;flex-direction:column;overflow-y:auto;border-radius:0.25rem;background-color:var(--calcite-color-background);--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.action-group--bottom{flex-grow:1;justify-content:flex-end;padding-block-end:0px}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]) .container .action-group--bottom{padding:0px}:host([layout=horizontal]) .container ::slotted(calcite-action-group){border-width:0px;padding:0px;border-inline-end-width:1px}::slotted(calcite-action-group:last-child){border-block-end-width:0px}:host([hidden]){display:none}[hidden]{display:none}";
+
+const ActionPad = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.calciteActionPadToggle = createEvent(this, "calciteActionPadToggle", 6);
+        this.mutationObserver = createObserver("mutation", () => this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group"))));
+        // --------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        // --------------------------------------------------------------------------
+        this.actionMenuOpenHandler = (event) => {
+            if (event.target.menuOpen) {
+                const composedPath = event.composedPath();
+                Array.from(this.el.querySelectorAll("calcite-action-group")).forEach((group) => {
+                    if (!composedPath.includes(group)) {
+                        group.menuOpen = false;
+                    }
+                });
+            }
+        };
+        this.toggleExpand = () => {
+            this.expanded = !this.expanded;
+            this.calciteActionPadToggle.emit();
+        };
+        this.setExpandToggleRef = (el) => {
+            this.expandToggleEl = el;
+        };
+        this.handleDefaultSlotChange = (event) => {
+            const groups = slotChangeGetAssignedElements(event).filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-action-group"));
+            this.setGroupLayout(groups);
+        };
+        this.handleTooltipSlotChange = (event) => {
+            const tooltips = slotChangeGetAssignedElements(event).filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-tooltip"));
+            this.expandTooltip = tooltips[0];
+        };
+        this.actionsEndGroupLabel = undefined;
+        this.expandDisabled = false;
+        this.expanded = false;
+        this.layout = "vertical";
+        this.position = undefined;
+        this.scale = undefined;
+        this.messages = undefined;
+        this.messageOverrides = undefined;
+        this.overlayPositioning = "absolute";
+        this.expandTooltip = undefined;
+        this.effectiveLocale = "";
+        this.defaultMessages = undefined;
+    }
+    expandedHandler(expanded) {
+        toggleChildActionText({ el: this.el, expanded });
+    }
+    layoutHandler() {
+        this.updateGroups();
+    }
+    onMessagesChange() {
+        /* wired up by t9n util */
+    }
+    effectiveLocaleChange() {
+        updateMessages(this, this.effectiveLocale);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Lifecycle
+    //
+    // --------------------------------------------------------------------------
+    connectedCallback() {
+        connectConditionalSlotComponent(this);
+        connectLocalized(this);
+        connectMessages(this);
+    }
+    disconnectedCallback() {
+        disconnectLocalized(this);
+        disconnectMessages(this);
+        disconnectConditionalSlotComponent(this);
+    }
+    async componentWillLoad() {
+        setUpLoadableComponent(this);
+        const { el, expanded } = this;
+        toggleChildActionText({ el, expanded });
+        await setUpMessages(this);
+    }
+    componentDidLoad() {
+        setComponentLoaded(this);
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Methods
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * Sets focus on the component's first focusable element.
+     */
+    async setFocus() {
+        var _a;
+        await componentFocusable(this);
+        (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    updateGroups() {
+        this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group")));
+    }
+    setGroupLayout(groups) {
+        groups.forEach((group) => (group.layout = this.layout));
+    }
+    // --------------------------------------------------------------------------
+    //
+    //  Component Methods
+    //
+    // --------------------------------------------------------------------------
+    renderBottomActionGroup() {
+        const { expanded, expandDisabled, messages, el, position, toggleExpand, scale, layout, actionsEndGroupLabel, overlayPositioning, } = this;
+        const expandToggleNode = !expandDisabled ? (h(ExpandToggle, { collapseText: messages.collapse, el: el, expandText: messages.expand, expanded: expanded, position: position, scale: scale, toggle: toggleExpand, tooltip: this.expandTooltip,
+            // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+            ref: this.setExpandToggleRef })) : null;
+        return expandToggleNode ? (h("calcite-action-group", { class: CSS.actionGroupEnd, label: actionsEndGroupLabel, layout: layout, overlayPositioning: overlayPositioning, scale: scale }, h("slot", { name: SLOTS.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode)) : null;
+    }
+    render() {
+        return (h(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, h("div", { class: CSS.container }, h("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup())));
+    }
+    static get delegatesFocus() { return true; }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "expanded": ["expandedHandler"],
+        "layout": ["layoutHandler"],
+        "messageOverrides": ["onMessagesChange"],
+        "effectiveLocale": ["effectiveLocaleChange"]
+    }; }
+};
+ActionPad.style = actionPadCss;
+
+export { ActionPad as calcite_action_pad };

package/dist/esm/calcite-action-pad_2.entry.js

@@ -11,7 +11,7 @@ import { c as connectLocalized, d as disconnectLocalized } from './locale-904407
 import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-436fb2b1.js';
 import { t as toggleChildActionText, E as ExpandToggle } from './ExpandToggle-b6eb575e.js';
 import { c as createObserver } from './observers-d04d1da9.js';
-import { l as loadModules } from './loadModules-877bbb89.js';
+import { l as loadModules } from './loadModules-7a5f1022.js';
 import './guid-b75a5f7b.js';
 import './resources-8834f920.js';
 import './key-c83d835f.js';