@esri/calcite-components/dist/calcite/J2NOZBR5.js

Web Components for Esri's Calcite Design System.

/*! 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 t,b as S,c as u,d as s}from"./JUI753HR.js";import{b as O}from"./ESHROPVK.js";import"./VAHSXLFS.js";import{b as M}from"./YCSOVIAT.js";import{a as P,b as T}from"./BVJFCLMH.js";import{a as d}from"./YXZ62PQO.js";import"./OQOKN4KP.js";import{a as F}from"./M7EAHGE3.js";import{d as N}from"./CKRTMNFR.js";import{b as C}from"./5RDOSP2E.js";import{b as I}from"./BEA6KQAT.js";import{n as E,u as r,v as x}from"./3ADX47DD.js";import{d as B}from"./HPN2C7M6.js";import"./JOSABGK6.js";import"./NNVH7JUI.js";import{E as z,F as i,R as w,c as k,d as n,h as $,q as m}from"./BJZTU5BQ.js";var D=k`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;--calcite-min-header-height: calc(var(--calcite-icon-size) * 3);border-radius:var(--calcite-panel-corner-radius, var(--calcite-corner-radius-sharp))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.header{margin:0;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}.heading{margin:0;padding:0;font-weight:var(--calcite-font-weight-medium)}.header .heading{flex:1 1 auto;padding:.5rem}:host([scale=s]){--calcite-internal-panel-default-space: var(--calcite-spacing-sm);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-sm-plus)}:host([scale=s]) .header-content .heading{font-size:var(--calcite-font-size--1)}:host([scale=s]) .header-content .description{font-size:var(--calcite-font-size--2)}:host([scale=m]){--calcite-internal-panel-default-space: var(--calcite-spacing-md);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md-plus)}:host([scale=m]) .header-content .heading{font-size:var(--calcite-font-size-0)}:host([scale=m]) .header-content .description{font-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-internal-panel-default-space: var(--calcite-spacing-lg);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xl)}:host([scale=l]) .header-content .heading{font-size:var(--calcite-font-size-1)}:host([scale=l]) .header-content .description{font-size:var(--calcite-font-size-0)}.content-top,.content-bottom{display:flex;align-items:flex-start;align-self:stretch;padding:var(--calcite-internal-panel-default-space);border-block-start:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));background-color:var(--calcite-panel-background-color, var(--calcite-color-foreground-1))}.container{position:relative;margin:0;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;overflow:hidden;background-color:var(--calcite-color-background);padding:0;color:var(--calcite-color-text-2);transition:max-block-size var(--calcite-animation-timing),inline-size var(--calcite-animation-timing);box-sizing:border-box;font-size:var(--calcite-font-size--1)}.container *{box-sizing:border-box}.container[hidden]{display:none}.header{z-index:var(--calcite-z-index-header);display:flex;flex-direction:column;background-color:var(--calcite-panel-header-background-color, var(--calcite-color-foreground-1));border-block-end:1px solid var(--calcite-panel-border-color, var(--calcite-panel-header-border-block-end, var(--calcite-color-border-3)))}.header-container{display:flex;inline-size:100%;flex-direction:row;align-items:stretch;justify-content:flex-start;flex:0 0 auto}.header-container--border-end{border-block-end:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3))}.action-bar-container{inline-size:100%}.action-bar-container ::slotted(calcite-action-bar){inline-size:100%}.header-content{display:flex;flex-direction:column;overflow:hidden;padding-inline:.75rem;padding-block:.875rem;margin-inline-end:auto;justify-content:center}.header-content .heading,.header-content .description{display:block;flex:none;overflow-wrap:break-word;padding:0;line-height:var(--calcite-font-line-height-relative-snug)}.header-content .heading{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-panel-heading-text-color, var(--calcite-color-text-1))}.header-content .heading:only-child{margin-block-end:0px}.header-content .description{color:var(--calcite-panel-description-text-color, var(--calcite-color-text-2))}#close,#collapse,.back-button,calcite-action-menu{--calcite-action-background-color: var(--calcite-panel-header-action-background-color);--calcite-action-background-color-hover: var(--calcite-panel-header-action-background-color-hover);--calcite-action-background-color-press: var(--calcite-panel-header-action-background-color-press);--calcite-action-text-color: var(--calcite-panel-header-action-text-color);--calcite-action-text-color-press: var(--calcite-panel-header-action-text-color-press)}.back-button{border-width:0px;border-style:solid;border-inline-end-width:1px;border-color:var(--calcite-panel-border-color, var(--calcite-color-border-3))}.header-actions{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch}.header-actions--end{margin-inline-start:auto}.content-wrapper{position:relative;display:flex;block-size:100%;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow:auto;color:var(--calcite-color-text-2);outline-color:transparent;padding:var(--calcite-panel-space, var(--calcite-panel-content-space, 0));background:var(--calcite-panel-background-color, var(--calcite-color-background))}.content-wrapper:focus-visible{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.header-content{flex:1 1 auto;justify-content:center;padding-block:var(--calcite-internal-panel-header-vertical-padding);padding-inline:var(--calcite-internal-panel-default-space)}.header-content.header-slotted-content{padding:var(--calcite-panel-header-content-space, var(--calcite-internal-panel-header-vertical-padding) var(--calcite-internal-panel-default-space))}.footer{margin-block-start:auto;display:flex;flex-direction:row;align-content:space-between;align-items:center;justify-content:center;font-size:var(--calcite-font-size--2);line-height:1.375;border-block-start:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));padding:var(--calcite-panel-footer-space, var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-space)));background-color:var(--calcite-panel-footer-background-color, var(--calcite-color-foreground-1))}.footer-content{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:center}.footer-actions{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:space-evenly;gap:var(--calcite-internal-panel-default-space)}.footer-start{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-start;margin-inline-end:auto;gap:var(--calcite-internal-panel-default-space)}.footer-end{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-end;margin-inline-start:auto;gap:var(--calcite-internal-panel-default-space)}.fab-container{position:sticky;inset-block-end:0px;z-index:var(--calcite-z-index-sticky);margin-block:0px;margin-inline:auto;display:block;padding:.5rem;inset-inline:0;inline-size:fit-content}:host([hidden]){display:none}[hidden]{display:none}`,y=class extends z{constructor(){super(),this.resizeObserver=F("resize",()=>this.resizeHandler()),this.messages=N(),this.hasActionBar=!1,this.hasContentBottom=!1,this.hasContentTop=!1,this.hasEndActions=!1,this.hasFab=!1,this.hasFooterActions=!1,this.hasFooterContent=!1,this.hasFooterEndContent=!1,this.hasFooterStartContent=!1,this.hasHeaderContent=!1,this.hasMenuItems=!1,this.hasStartActions=!1,this.isClosed=!1,this.showHeaderContent=!1,this.closable=!1,this.closed=!1,this.collapseDirection="down",this.collapsed=!1,this.collapsible=!1,this.disabled=!1,this.loading=!1,this.menuOpen=!1,this.menuPlacement=M,this.overlayPositioning="absolute",this.scale="m",this.calcitePanelClose=m({cancelable:!1}),this.calcitePanelScroll=m({cancelable:!1}),this.calcitePanelToggle=m({cancelable:!1}),this.listen("keydown",this.panelKeyDownHandler)}static{this.properties={hasActionBar:[16,{},{state:!0}],hasContentBottom:[16,{},{state:!0}],hasContentTop:[16,{},{state:!0}],hasEndActions:[16,{},{state:!0}],hasFab:[16,{},{state:!0}],hasFooterActions:[16,{},{state:!0}],hasFooterContent:[16,{},{state:!0}],hasFooterEndContent:[16,{},{state:!0}],hasFooterStartContent:[16,{},{state:!0}],hasHeaderContent:[16,{},{state:!0}],hasMenuItems:[16,{},{state:!0}],hasStartActions:[16,{},{state:!0}],isClosed:[16,{},{state:!0}],showHeaderContent:[16,{},{state:!0}],beforeClose:[0,{},{attribute:!1}],closable:[7,{},{reflect:!0,type:Boolean}],closed:[7,{},{reflect:!0,type:Boolean}],collapseDirection:1,collapsed:[7,{},{reflect:!0,type:Boolean}],collapsible:[7,{},{reflect:!0,type:Boolean}],description:1,disabled:[7,{},{reflect:!0,type:Boolean}],heading:1,headingLevel:[11,{},{type:Number,reflect:!0}],loading:[7,{},{reflect:!0,type:Boolean}],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.styles=D}async scrollContentTo(e){this.panelScrollEl?.scrollTo(e)}async setFocus(){await B(this),E(this.containerEl)}async load(){this.isClosed=this.closed}willUpdate(e){e.has("closed")&&this.hasUpdated&&(this.closed?this.close():this.open())}updated(){P(this)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver?.disconnect()}resizeHandler(){let{panelScrollEl:e}=this;if(!e||typeof e.scrollHeight!="number"||typeof e.offsetHeight!="number")return;e.scrollHeight>e.offsetHeight?e.setAttribute("tabindex","0"):e.removeAttribute("tabindex")}setContainerRef(e){this.containerEl=e}panelKeyDownHandler(e){this.closable&&e.key==="Escape"&&!e.defaultPrevented&&(this.handleUserClose(),e.preventDefault())}handleUserClose(){this.closed=!0,this.calcitePanelClose.emit()}open(){this.isClosed=!1}async close(){let e=this.beforeClose??(()=>Promise.resolve());try{await e()}catch{requestAnimationFrame(()=>{this.closed=!1});return}this.isClosed=!0}collapse(){this.collapsed=!this.collapsed,this.calcitePanelToggle.emit()}panelScrollHandler(){this.calcitePanelScroll.emit()}handleHeaderActionsStartSlotChange(e){this.hasStartActions=r(e)}handleHeaderActionsEndSlotChange(e){this.hasEndActions=r(e)}handleHeaderMenuActionsSlotChange(e){this.hasMenuItems=r(e)}handleActionBarSlotChange(e){let a=x(e).filter(o=>o?.matches("calcite-action-bar"));a.forEach(o=>o.layout="horizontal"),this.hasActionBar=!!a.length}handleHeaderContentSlotChange(e){this.hasHeaderContent=r(e)}handleFabSlotChange(e){this.hasFab=r(e)}handleFooterActionsSlotChange(e){this.hasFooterActions=r(e)}handleFooterEndSlotChange(e){this.hasFooterEndContent=r(e)}handleFooterStartSlotChange(e){this.hasFooterStartContent=r(e)}handleFooterSlotChange(e){this.hasFooterContent=r(e)}contentBottomSlotChangeHandler(e){this.hasContentBottom=r(e)}contentTopSlotChangeHandler(e){this.hasContentTop=r(e)}setPanelScrollEl(e){this.panelScrollEl=e,this.resizeObserver?.disconnect(),e&&(this.resizeObserver?.observe(e),this.resizeHandler())}handleAlertsSlotChange(e){x(e)?.map(a=>{a.nodeName==="CALCITE-ALERT"&&(a.embedded=!0)})}renderHeaderContent(){let{heading:e,headingLevel:a,description:o,hasHeaderContent:l}=this,c=e?O({class:t.heading,level:a,children:e}):null,h=o?n`<span class=${i(t.description)}>${o}</span>`:null;return!l&&(c||h)?d("header-content",n`<div class=${i(t.headerContent)}>${c}${h}</div>`):null}renderActionBar(){return n`<div class=${i(t.actionBarContainer)} .hidden=${!this.hasActionBar}><slot name=${s.actionBar} @slotchange=${this.handleActionBarSlotChange}></slot></div>`}renderHeaderSlottedContent(){return d("slotted-header-content",n`<div class=${i({[t.headerContent]:!0,[t.headerSlottedContent]:!0})} .hidden=${!this.hasHeaderContent}><slot name=${s.headerContent} @slotchange=${this.handleHeaderContentSlotChange}></slot></div>`)}renderHeaderStartActions(){let{hasStartActions:e}=this;return d("header-actions-start",n`<div class=${i({[t.headerActionsStart]:!0,[t.headerActions]:!0})} .hidden=${!e}><slot name=${s.headerActionsStart} @slotchange=${this.handleHeaderActionsStartSlotChange}></slot></div>`)}renderHeaderActionsEnd(){let{hasEndActions:e,messages:a,closable:o,collapsed:l,collapseDirection:c,collapsible:h,hasMenuItems:g}=this,{collapse:p,expand:f,close:b}=a,v=[u.expand,u.collapse];c==="up"&&v.reverse();let A=h?n`<calcite-action .ariaExpanded=${!l} .ariaLabel=${p} .icon=${l?v[0]:v[1]} id=${S.collapse} @click=${this.collapse} .scale=${this.scale} .text=${p} title=${(l?f:p)??$}></calcite-action>`:null,H=o?n`<calcite-action .ariaLabel=${b} .icon=${u.close} id=${S.close} @click=${this.handleUserClose} .scale=${this.scale} .text=${b} title=${b??$}></calcite-action>`:null,L=n`<slot name=${s.headerActionsEnd} @slotchange=${this.handleHeaderActionsEndSlotChange}></slot>`,j=e||A||H||g;return d("header-actions-end",n`<div class=${i({[t.headerActionsEnd]:!0,[t.headerActions]:!0})} .hidden=${!j}>${L}${this.renderMenu()}${A}${H}</div>`)}renderMenu(){let{hasMenuItems:e,messages:a,menuOpen:o,menuFlipPlacements:l,menuPlacement:c}=this;return d("menu",n`<calcite-action-menu .flipPlacements=${l??["top","bottom"]} .hidden=${!e} .label=${a.options} .open=${o} .overlayPositioning=${this.overlayPositioning} .placement=${c}><calcite-action class=${i(t.menuAction)} .icon=${u.menu} .scale=${this.scale} slot=${I.trigger} .text=${a.options}></calcite-action><slot name=${s.headerMenuActions} @slotchange=${this.handleHeaderMenuActionsSlotChange}></slot></calcite-action-menu>`)}renderHeaderNode(){let{hasHeaderContent:e,hasStartActions:a,hasEndActions:o,closable:l,collapsible:c,hasMenuItems:h,hasActionBar:g}=this,p=this.renderHeaderContent(),f=e||!!p||a||o||c||l||h;return this.showHeaderContent=f,n`<header class=${i(t.header)} .hidden=${!(f||g)}><div class=${i({[t.headerContainer]:!0,[t.headerContainerBorderEnd]:g})} .hidden=${!f}>${this.renderHeaderStartActions()}${this.renderHeaderSlottedContent()}${p}${this.renderHeaderActionsEnd()}</div>${this.renderActionBar()}${this.renderContentTop()}</header>`}renderFooterNode(){let{hasFooterEndContent:e,hasFooterStartContent:a,hasFooterContent:o,hasFooterActions:l}=this,c=a||e||o||l;return n`<footer class=${i(t.footer)} .hidden=${!c}><div class=${i(t.footerContent)} .hidden=${!o}><slot name=${s.footer} @slotchange=${this.handleFooterSlotChange}></slot></div><div class=${i(t.footerStart)} .hidden=${o||!a}><slot name=${s.footerStart} @slotchange=${this.handleFooterStartSlotChange}></slot></div><div class=${i(t.footerEnd)} .hidden=${o||!e}><slot name=${s.footerEnd} @slotchange=${this.handleFooterEndSlotChange}></slot></div><div class=${i(t.footerActions)} .hidden=${o||!l}>${d("footer-actions-slot",n`<slot name=${s.footerActions} @slotchange=${this.handleFooterActionsSlotChange}></slot>`)}</div></footer>`}renderContent(){return n`<div class=${i(t.contentWrapper)} .hidden=${this.collapsible&&this.collapsed} @scroll=${this.panelScrollHandler} ${C(this.setPanelScrollEl)}><slot></slot>${this.renderFab()}</div>`}renderContentBottom(){return n`<div class=${i(t.contentBottom)} .hidden=${!this.hasContentBottom}><slot name=${s.contentBottom} @slotchange=${this.contentBottomSlotChangeHandler}></slot></div>`}renderContentTop(){return n`<div class=${i(t.contentTop)} .hidden=${!this.hasContentTop}><slot name=${s.contentTop} @slotchange=${this.contentTopSlotChangeHandler}></slot></div>`}renderFab(){return n`<div class=${i(t.fabContainer)} .hidden=${!this.hasFab}><slot name=${s.fab} @slotchange=${this.handleFabSlotChange}></slot></div>`}render(){let{disabled:e,loading:a,isClosed:o}=this,l=n`<article .ariaBusy=${a} class=${i(t.container)} .hidden=${o} ${C(this.setContainerRef)}>${this.renderHeaderNode()}${this.renderContent()}${this.renderContentBottom()}${this.renderFooterNode()}${d("alerts",n`<slot name=${s.alerts} @slotchange=${this.handleAlertsSlotChange}></slot>`)}</article>`;return T({disabled:e,children:n`${a?n`<calcite-scrim .loading=${a}></calcite-scrim>`:null}${l}`})}};w("calcite-panel",y);export{y as Panel};