UNPKG

@esri/calcite-components

Version:

Web Components for Esri's Calcite Design System.

6 lines 7.29 kB
/*! * All material copyright ESRI, All Rights Reserved, unless otherwise specified. * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details. * v1.5.0-next.4 */ import{r as t,c as a,h as i,H as e,a as o}from"./p-8789682d.js";import{c as n,d as s}from"./p-ce102a61.js";import{s as c,g as r}from"./p-68f223ec.js";import{a as l,s as d,c as h}from"./p-deebcc06.js";import{c as p,d as m}from"./p-743ed09c.js";import{c as u}from"./p-c8e46b02.js";import{u as f,c as g,s as x,d as y}from"./p-9dd9a26d.js";import{t as b,o as v,q as w,g as D,a as j,E as _,b as z}from"./p-ee8d6404.js";import{d as k}from"./p-81620376.js";import"./p-d2aa9245.js";import"./p-9280476e.js";import"./p-4929e834.js";import"./p-699dc380.js";import"./p-14d9f732.js";const C="bottom-actions",H="expand-tooltip",A=class{constructor(i){t(this,i),this.calciteActionBarToggle=a(this,"calciteActionBarToggle",6),this.mutationObserver=u("mutation",(()=>{const{el:t,expanded:a}=this;b({el:t,expanded:a}),this.overflowActions()})),this.resizeObserver=u("resize",(t=>this.resizeHandlerEntries(t))),this.actionMenuOpenHandler=t=>{if(t.target.menuOpen){const a=t.composedPath();Array.from(this.el.querySelectorAll("calcite-action-group")).forEach((t=>{a.includes(t)||(t.menuOpen=!1)}))}},this.resizeHandlerEntries=t=>{t.forEach(this.resizeHandler)},this.resizeHandler=t=>{const{width:a,height:i}=t.contentRect;this.resize({width:a,height:i})},this.resize=k((({width:t,height:a})=>{const{el:i,expanded:e,expandDisabled:o,layout:n,overflowActionsDisabled:s}=this;if(s||"vertical"===n&&!a||"horizontal"===n&&!t)return;const c=w(i),l=o?c.length:c.length+1,d=Array.from(i.querySelectorAll("calcite-action-group"));this.setGroupLayout(d);const h=r(i,C)||!o?d.length+1:d.length,{actionHeight:p,actionWidth:m}=D(c),u=z({layout:n,actionCount:l,actionHeight:p,actionWidth:m,height:a,width:t,groupCount:h});j({actionGroups:d,expanded:e,overflowCount:u})}),v),this.toggleExpand=()=>{this.expanded=!this.expanded,this.calciteActionBarToggle.emit()},this.setExpandToggleRef=t=>{this.expandToggleEl=t},this.handleDefaultSlotChange=t=>{const a=c(t).filter((t=>t?.matches("calcite-action-group")));this.setGroupLayout(a)},this.expandDisabled=!1,this.expanded=!1,this.layout="vertical",this.overflowActionsDisabled=!1,this.position=void 0,this.scale=void 0,this.messages=void 0,this.messageOverrides=void 0,this.effectiveLocale=void 0,this.defaultMessages=void 0}expandHandler(){this.overflowActions()}expandedHandler(){const{el:t,expanded:a}=this;b({el:t,expanded:a}),this.overflowActions()}layoutHandler(){this.updateGroups()}overflowDisabledHandler(t){t?this.resizeObserver.disconnect():this.resizeObserver.observe(this.el)}onMessagesChange(){}effectiveLocaleChange(){f(this,this.effectiveLocale)}componentDidLoad(){const{el:t,expanded:a}=this;l(this),b({el:t,expanded:a}),this.overflowActions()}connectedCallback(){const{el:t,expanded:a}=this;p(this),g(this),b({el:t,expanded:a}),this.mutationObserver?.observe(t,{childList:!0,subtree:!0}),this.overflowActionsDisabled||this.resizeObserver?.observe(t),this.overflowActions(),n(this)}async componentWillLoad(){d(this),await x(this)}disconnectedCallback(){this.mutationObserver?.disconnect(),this.resizeObserver?.disconnect(),s(this),m(this),y(this)}async overflowActions(){this.resize({width:this.el.clientWidth,height:this.el.clientHeight})}async setFocus(){await h(this),this.el?.focus()}updateGroups(){this.setGroupLayout(Array.from(this.el.querySelectorAll("calcite-action-group")))}setGroupLayout(t){t.forEach((t=>t.layout=this.layout))}renderBottomActionGroup(){const{expanded:t,expandDisabled:a,el:e,position:o,toggleExpand:n,scale:s,layout:c,messages:l}=this,d=r(e,H),h=a?null:i(_,{el:e,expanded:t,intlCollapse:l.collapse,intlExpand:l.expand,position:o,scale:s,toggle:n,tooltip:d,ref:this.setExpandToggleRef});return r(e,C)||h?i("calcite-action-group",{class:"action-group--bottom",layout:c,scale:s},i("slot",{name:C}),i("slot",{name:H}),h):null}render(){return i(e,{onCalciteActionMenuOpen:this.actionMenuOpenHandler},i("slot",{onSlotchange:this.handleDefaultSlotChange}),this.renderBottomActionGroup())}static get delegatesFocus(){return!0}static get assetsDirs(){return["assets"]}get el(){return o(this)}static get watchers(){return{expandDisabled:["expandHandler"],expanded:["expandedHandler"],layout:["layoutHandler"],overflowActionsDisabled:["overflowDisabledHandler"],messageOverrides:["onMessagesChange"],effectiveLocale:["effectiveLocaleChange"]}}};A.style="@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:host{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host{pointer-events:auto;display:inline-flex;align-self:stretch;--calcite-action-bar-expanded-max-width:auto}:host([layout=vertical]){flex-direction:column}:host([layout=horizontal]){flex-direction:row}:host([layout=vertical][overflow-actions-disabled]){overflow-y:auto}:host([layout=horizontal][overflow-actions-disabled]){overflow-x:auto}:host([layout=vertical][expanded]){max-inline-size:var(--calcite-action-bar-expanded-max-width)}::slotted(calcite-action-group){border-block-end:1px solid var(--calcite-ui-border-3)}:host([layout=horizontal]) ::slotted(calcite-action-group){border-block-end:0;border-inline-end:1px solid var(--calcite-ui-border-3)}:host([layout=horizontal][expand-disabled]) ::slotted(calcite-action-group:last-of-type){border-inline-end:0}::slotted(calcite-action-group:last-child){border-block-end:0;border-inline-end:0}.action-group--bottom{flex-grow:1;justify-content:flex-end}";export{A as calcite_action_bar}