@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
179 lines (178 loc) • 9.09 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { css, html } from "lit";
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
import { b as slotChangeGetAssignedElements, f as focusElementInGroup } from "../../chunks/dom.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 { i as isAction } from "../../chunks/resources.js";
import { u as useSetFocus } from "../../chunks/useSetFocus.js";
import { l as logger } from "../../chunks/logger.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([scale=s]){--calcite-internal-action-pad-gap: var(--calcite-action-pad-items-space, var(--calcite-spacing-xxs));--calcite-internal-action-pad-padding: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-pad-gap: var(--calcite-action-pad-items-space, var(--calcite-spacing-sm));--calcite-internal-action-pad-padding: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-pad-gap: var(--calcite-action-pad-items-space, var(--calcite-space-sm-plus));--calcite-internal-action-pad-padding: var(--calcite-spacing-sm-plus)}: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;padding-block-end:var(--calcite-internal-action-pad-padding)}.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);border-radius:calc(var(--calcite-action-pad-corner-radius, .125rem) * 2);background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1));gap:var(--calcite-internal-action-pad-gap);padding:var(--calcite-internal-action-pad-padding)}.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;padding-inline-end:var(--calcite-internal-action-pad-padding)}:host([hidden]){display:none}[hidden]{display:none}`;
class ActionPad extends LitElement {
constructor() {
super();
this.actions = [];
this.mutationObserver = createObserver("mutation", () => this.mutationObserverHandler());
this.toggleExpand = () => {
this.expanded = !this.expanded;
this.calciteActionPadToggle.emit();
};
this.messages = useT9n();
this.focusSetter = useSetFocus()(this);
this.expandDisabled = false;
this.expanded = false;
this.layout = "vertical";
this.overlayPositioning = "absolute";
this.scale = "m";
this.selectionAppearance = "neutral";
this.calciteActionPadCollapse = createEvent({ cancelable: false });
this.calciteActionPadExpand = createEvent({ cancelable: false });
this.calciteActionPadToggle = createEvent({ cancelable: false });
this.listen("calciteActionMenuOpen", this.actionMenuOpenHandler);
this.listen("keydown", this.handleKeyDown);
}
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 }], selectionAppearance: [3, {}, { reflect: true }] };
}
static {
this.shadowRootOptions = { mode: "open", delegatesFocus: true };
}
static {
this.styles = styles;
}
async setFocus(options) {
return this.focusSetter(() => this.el, options);
}
connectedCallback() {
super.connectedCallback();
this.updateActions();
this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
}
async load() {
logger.deprecated("component", {
component: this,
name: "action-pad",
removalVersion: 5,
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();
}
if (changes.has("expanded") && this.hasUpdated) {
if (this.expanded) {
this.calciteActionPadExpand.emit();
} else {
this.calciteActionPadCollapse.emit();
}
}
if (changes.has("selectionAppearance") && (this.hasUpdated || this.selectionAppearance !== "neutral")) {
this.updateActions();
}
}
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();
this.queryAndStoreActions();
this.updateActions();
}
handleTooltipSlotChange(event) {
const tooltips = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-tooltip"));
this.expandTooltip = tooltips[0];
}
handleKeyDown(event) {
this.queryAndStoreActions();
const actions = this.actions.filter((action) => !action.disabled);
const current = document.activeElement;
if (!isAction(current)) {
return;
}
switch (event.key) {
case "ArrowRight":
case "ArrowDown":
focusElementInGroup(actions, current, "next", true);
event.preventDefault();
break;
case "ArrowLeft":
case "ArrowUp":
focusElementInGroup(actions, current, "previous", true);
event.preventDefault();
break;
case "Home":
focusElementInGroup(actions, current, "first", true);
event.preventDefault();
break;
case "End":
focusElementInGroup(actions, current, "last", true);
event.preventDefault();
break;
case "Tab":
this.updateTabIndexOfItems(current);
break;
}
}
updateActions() {
this.actions.forEach((action) => {
action.selectionAppearance = this.selectionAppearance;
});
}
updateTabIndexOfItems(target) {
this.actions.forEach((item) => {
item.tabIndex = target !== item ? -1 : 0;
});
}
queryAndStoreActions() {
this.actions = Array.from(this.el.querySelectorAll("calcite-action"));
}
mutationObserverHandler() {
this.updateGroups();
this.queryAndStoreActions();
this.updateActions();
}
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
};