@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
61 lines (60 loc) • 4.69 kB
JavaScript
/*! 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, safeClassMap } from "@arcgis/lumina";
import { c as componentFocusable } from "../../chunks/component.js";
import { S as SLOTS } from "../../chunks/resources2.js";
import { h as focusFirstTabbable, a as slotChangeHasAssignedElement } from "../../chunks/dom.js";
import { u as useT9n } from "../../chunks/useT9n.js";
import { I as ICONS, S as SLOTS$1, C as CSS } from "../../chunks/resources7.js";
import { css } from "@lit/reactive-element/css-tag.js";
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:flex;flex-direction:column;padding:0;background-color:transparent;border-color:var(--calcite-action-group-border-color, var(--calcite-color-border-3));border-style:solid;border-width:0}.container{display:flex;flex-grow:1;flex-direction:column}:host([columns="1"]){--calcite-internal-action-group-columns: 1}:host([columns="2"]){--calcite-internal-action-group-columns: 2}:host([columns="3"]){--calcite-internal-action-group-columns: 3}:host([columns="4"]){--calcite-internal-action-group-columns: 4}:host([columns="5"]){--calcite-internal-action-group-columns: 5}:host([columns="6"]){--calcite-internal-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:transparent;grid-template-columns:repeat(var(--calcite-action-group-columns, var(--calcite-internal-action-group-columns, 3)),auto);gap:var(--calcite-action-group-gap, 1px);padding:var(--calcite-action-group-gap, 1px)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-inline-end:var(--calcite-size-px)}:host([hidden]){display:none}[hidden]{display:none}`;
class ActionGroup extends LitElement {
constructor() {
super(...arguments);
this.messages = useT9n();
this.hasMenuActions = false;
this.expanded = false;
this.layout = "vertical";
this.menuOpen = false;
this.overlayPositioning = "absolute";
this.scale = "m";
}
static {
this.properties = { hasMenuActions: [16, {}, { state: true }], columns: [11, {}, { type: Number, reflect: true }], expanded: [7, {}, { reflect: true, type: Boolean }], label: 1, layout: [3, {}, { reflect: true }], menuFlipPlacements: [0, {}, { attribute: false }], menuOpen: [7, {}, { reflect: true, type: Boolean }], menuPlacement: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [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);
}
willUpdate(changes) {
if (changes.has("expanded") && (this.hasUpdated || this.expanded !== false)) {
this.menuOpen = false;
}
}
setMenuOpen(event) {
this.menuOpen = !!event.currentTarget.open;
}
handleMenuActionsSlotChange(event) {
this.hasMenuActions = slotChangeHasAssignedElement(event);
}
renderMenu() {
const { expanded, menuOpen, scale, layout, messages, overlayPositioning, hasMenuActions, menuFlipPlacements, menuPlacement } = this;
return html`<calcite-action-menu .expanded=${expanded} .flipPlacements=${menuFlipPlacements ?? (layout === "horizontal" ? ["top", "bottom"] : ["left", "right"])} .hidden=${!hasMenuActions} .label=${messages.more} @calciteActionMenuOpen=${this.setMenuOpen} .open=${menuOpen} .overlayPositioning=${overlayPositioning} .placement=${menuPlacement ?? (layout === "horizontal" ? "bottom-start" : "leading-start")} .scale=${scale}><calcite-action .icon=${ICONS.menu} .scale=${scale} slot=${SLOTS.trigger} .text=${messages.more} .textEnabled=${expanded}></calcite-action><slot name=${SLOTS$1.menuActions} @slotchange=${this.handleMenuActionsSlotChange}></slot><slot name=${SLOTS$1.menuTooltip} slot=${SLOTS.tooltip}></slot></calcite-action-menu>`;
}
render() {
return html`<div .ariaLabel=${this.label} class=${safeClassMap(CSS.container)} role=group><slot></slot>${this.renderMenu()}</div>`;
}
}
customElement("calcite-action-group", ActionGroup);
export {
ActionGroup
};