UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

5 lines (4 loc) 3.75 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{a as o,b as f,c as b}from"./DY5YDEPG.js";import{d as g}from"./CKRTMNFR.js";import{b as a}from"./BEA6KQAT.js";import{n as m,u as d}from"./3ADX47DD.js";import{d as h}from"./HPN2C7M6.js";import"./JOSABGK6.js";import"./NNVH7JUI.js";import{E as c,F as u,R as p,c as r,d as t}from"./BJZTU5BQ.js";var M=r`: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}`,n=class extends c{constructor(){super(...arguments),this.messages=g(),this.hasMenuActions=!1,this.expanded=!1,this.layout="vertical",this.menuOpen=!1,this.overlayPositioning="absolute",this.scale="m"}static{this.properties={hasMenuActions:[16,{},{state:!0}],columns:[11,{},{type:Number,reflect:!0}],expanded:[7,{},{reflect:!0,type:Boolean}],label:1,layout:[3,{},{reflect:!0}],menuFlipPlacements:[0,{},{attribute:!1}],menuOpen:[7,{},{reflect:!0,type:Boolean}],menuPlacement:[3,{},{reflect:!0}],messageOverrides:[0,{},{attribute:!1}],overlayPositioning:[3,{},{reflect:!0}],scale:[3,{},{reflect:!0}]}}static{this.shadowRootOptions={mode:"open",delegatesFocus:!0}}static{this.styles=M}async setFocus(){await h(this),m(this.el)}willUpdate(e){e.has("expanded")&&(this.hasUpdated||this.expanded!==!1)&&(this.menuOpen=!1)}setMenuOpen(e){this.menuOpen=!!e.currentTarget.open}handleMenuActionsSlotChange(e){this.hasMenuActions=d(e)}renderMenu(){let{expanded:e,menuOpen:x,scale:s,layout:i,messages:l,overlayPositioning:y,hasMenuActions:$,menuFlipPlacements:v,menuPlacement:O}=this;return t`<calcite-action-menu .expanded=${e} .flipPlacements=${v??(i==="horizontal"?["top","bottom"]:["left","right"])} .hidden=${!$} .label=${l.more} @calciteActionMenuOpen=${this.setMenuOpen} .open=${x} .overlayPositioning=${y} .placement=${O??(i==="horizontal"?"bottom-start":"leading-start")} .scale=${s}><calcite-action .icon=${f.menu} .scale=${s} slot=${a.trigger} .text=${l.more} .textEnabled=${e}></calcite-action><slot name=${o.menuActions} @slotchange=${this.handleMenuActionsSlotChange}></slot><slot name=${o.menuTooltip} slot=${a.tooltip}></slot></calcite-action-menu>`}render(){return t`<div .ariaLabel=${this.label} class=${u(b.container)} role=group><slot></slot>${this.renderMenu()}</div>`}};p("calcite-action-group",n);export{n as ActionGroup};