UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

113 lines (112 loc) • 6.28 kB
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified. See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details. v3.2.1 */ import { c as customElement } from "../../chunks/runtime.js"; import { html } from "lit"; import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina"; import { h as focusFirstTabbable, s as slotChangeGetAssignedElements } from "../../chunks/dom.js"; import { c as componentFocusable } from "../../chunks/component.js"; import { t as toggleChildActionText, E as ExpandToggle } from "../../chunks/ExpandToggle.js"; import { c as createObserver } from "../../chunks/observers.js"; import { u as useT9n } from "../../chunks/useT9n.js"; import { l as logger } from "../../chunks/logger.js"; import { css } from "@lit/reactive-element/css-tag.js"; const CSS = { actionGroupEnd: "action-group--end", container: "container" }; const SLOTS = { expandTooltip: "expand-tooltip" }; const styles = css`: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}to{opacity:1}}:host{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:var(--calcite-action-pad-corner-radius, .125rem);background:transparent}:host([expanded][layout=vertical]) .container{max-inline-size:var(--calcite-action-pad-expanded-max-width, auto)}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:1px}.container{display:inline-flex;flex-direction:column;overflow:hidden;--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(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);gap:var(--calcite-action-pad-items-space, 0);border-radius:calc(var(--calcite-action-pad-corner-radius, .125rem) * 2);background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1))}.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:0}:host([layout=horizontal]) .container ::slotted(calcite-action-group:not(:last-of-type)){border-inline-end-width:1px}:host([hidden]){display:none}[hidden]{display:none}`; class ActionPad extends LitElement { constructor() { super(); this.mutationObserver = createObserver("mutation", () => this.updateGroups()); this.toggleExpand = () => { this.expanded = !this.expanded; this.calciteActionPadToggle.emit(); }; this.messages = useT9n(); this.expandDisabled = false; this.expanded = false; this.layout = "vertical"; this.overlayPositioning = "absolute"; this.scale = "m"; this.calciteActionPadToggle = createEvent({ cancelable: false }); this.listen("calciteActionMenuOpen", this.actionMenuOpenHandler); } static { this.properties = { expandTooltip: [16, {}, { state: true }], actionsEndGroupLabel: 1, expandDisabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }] }; } static { this.shadowRootOptions = { mode: "open", delegatesFocus: true }; } static { this.styles = styles; } async setFocus() { await componentFocusable(this); focusFirstTabbable(this.el); } connectedCallback() { super.connectedCallback(); this.mutationObserver?.observe(this.el, { childList: true, subtree: true }); } async load() { logger.deprecated("component", { name: "action-pad", removalVersion: 4, suggested: "action-bar" }); } willUpdate(changes) { if (changes.has("expanded") && this.hasUpdated) { toggleChildActionText({ el: this.el, expanded: this.expanded }); } if (changes.has("layout") && (this.hasUpdated || this.layout !== "vertical")) { this.updateGroups(); } } disconnectedCallback() { super.disconnectedCallback(); this.mutationObserver?.disconnect(); } actionMenuOpenHandler(event) { if (event.target.menuOpen) { const composedPath = event.composedPath(); this.actionGroups?.forEach((group) => { if (!composedPath.includes(group)) { group.menuOpen = false; } }); } } updateGroups() { const groups = Array.from(this.el.querySelectorAll("calcite-action-group")); this.actionGroups = groups; this.setGroupLayout(groups); } setGroupLayout(groups) { groups.forEach((group) => group.layout = this.layout); } handleDefaultSlotChange() { this.updateGroups(); } handleTooltipSlotChange(event) { const tooltips = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-tooltip")); this.expandTooltip = tooltips[0]; } renderBottomActionGroup() { const { expanded, expandDisabled, messages, el, position, toggleExpand, scale, layout, actionsEndGroupLabel, overlayPositioning } = this; const expandToggleNode = !expandDisabled ? ExpandToggle({ collapseLabel: messages.collapseLabel, collapseText: messages.collapse, el, expandLabel: messages.expandLabel, expandText: messages.expand, expanded, position, scale, toggle: toggleExpand, tooltip: this.expandTooltip }) : null; return expandToggleNode ? html`<calcite-action-group class=${safeClassMap(CSS.actionGroupEnd)} .label=${actionsEndGroupLabel} .layout=${layout} .overlayPositioning=${overlayPositioning} .scale=${scale}><slot name=${SLOTS.expandTooltip} @slotchange=${this.handleTooltipSlotChange}></slot>${expandToggleNode}</calcite-action-group>` : null; } render() { return html`<div class=${safeClassMap(CSS.container)}><slot @slotchange=${this.handleDefaultSlotChange}></slot>${this.renderBottomActionGroup()}</div>`; } } customElement("calcite-action-pad", ActionPad); export { ActionPad };