@esri/calcite-components/dist/calcite/GKINCRNZ.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.3.0-next.10 */
import{a as t,b as S,c as g,d as r}from"./HLX6NBXF.js";import{b as L}from"./WOTHS74I.js";import"./JQCB24OX.js";import{b as O}from"./GYYJFFF5.js";import{a as P,b as N}from"./P3YVAFSP.js";import{a as p}from"./ZKRWX7SK.js";import"./IHEYKSSF.js";import{a as F}from"./KKHDMV5I.js";import{d as I}from"./OTPGFUF7.js";import{b as C}from"./AWKPLWJH.js";import{b as M}from"./PXS7KRET.js";import{n as E,u as s,v as x}from"./PQRDARDE.js";import{a as B,d as T}from"./53I7LO4P.js";import"./PWF2WN5I.js";import"./PAJH6C4Y.js";import{E as w,F as o,R as z,c as k,d as a,h as $,q as m}from"./MPBE2SPX.js";var R=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=s]) .header-content .icon{margin-inline-end:var(--calcite-spacing-sm)}: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=m]) .header-content .icon{margin-inline-end:var(--calcite-spacing-md)}: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)}:host([scale=l]) .header-content .icon{margin-inline-end:var(--calcite-spacing-lg)}.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-text-content{flex:1 1 auto}.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))}.header-content.header--non-slotted-content{align-items:center;flex-direction:row}.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}calcite-icon{--calcite-icon-color: var(--calcite-panel-icon-color, var(--calcite-color-text-1))}:host([hidden]){display:none}[hidden]{display:none}`,y=class extends w{constructor(){super(),this.resizeObserver=F("resize",()=>this.resizeHandler()),this.messages=I(),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.iconFlipRtl=!1,this.loading=!1,this.menuOpen=!1,this.menuPlacement=O,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}],icon:[3,{},{reflect:!0}],iconFlipRtl:[7,{},{reflect:!0,type:Boolean}],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=R}async scrollContentTo(e){this.panelScrollEl?.scrollTo(e)}async setFocus(){await T(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=s(e)}handleHeaderActionsEndSlotChange(e){this.hasEndActions=s(e)}handleHeaderMenuActionsSlotChange(e){this.hasMenuItems=s(e)}handleActionBarSlotChange(e){let n=x(e).filter(i=>i?.matches("calcite-action-bar"));n.forEach(i=>i.layout="horizontal"),this.hasActionBar=!!n.length}handleHeaderContentSlotChange(e){this.hasHeaderContent=s(e)}handleFabSlotChange(e){this.hasFab=s(e)}handleFooterActionsSlotChange(e){this.hasFooterActions=s(e)}handleFooterEndSlotChange(e){this.hasFooterEndContent=s(e)}handleFooterStartSlotChange(e){this.hasFooterStartContent=s(e)}handleFooterSlotChange(e){this.hasFooterContent=s(e)}contentBottomSlotChangeHandler(e){this.hasContentBottom=s(e)}contentTopSlotChangeHandler(e){this.hasContentTop=s(e)}setPanelScrollEl(e){this.panelScrollEl=e,this.resizeObserver?.disconnect(),e&&(this.resizeObserver?.observe(e),this.resizeHandler())}handleAlertsSlotChange(e){x(e)?.map(n=>{n.nodeName==="CALCITE-ALERT"&&(n.embedded=!0)})}renderHeaderContent(){let{heading:e,headingLevel:n,description:i,hasHeaderContent:l,icon:c,scale:u}=this,f=c?a`<calcite-icon class=${o(t.icon)} .icon=${c} .scale=${B(u)}></calcite-icon>`:null,d=e?L({class:t.heading,level:n,children:e}):null,h=i?a`<span class=${o(t.description)}>${i}</span>`:null;return!l&&(d||h)?p("header-content",a`<div class=${o({[t.headerContent]:!0,[t.headerNonSlottedContent]:!0})}>${f}<div class=${o(t.headingTextContent)}>${d}${h}</div></div>`):null}renderActionBar(){return a`<div class=${o(t.actionBarContainer)} .hidden=${!this.hasActionBar}><slot name=${r.actionBar} @slotchange=${this.handleActionBarSlotChange}></slot></div>`}renderHeaderSlottedContent(){return p("slotted-header-content",a`<div class=${o({[t.headerContent]:!0,[t.headerSlottedContent]:!0})} .hidden=${!this.hasHeaderContent}><slot name=${r.headerContent} @slotchange=${this.handleHeaderContentSlotChange}></slot></div>`)}renderHeaderStartActions(){let{hasStartActions:e}=this;return p("header-actions-start",a`<div class=${o({[t.headerActionsStart]:!0,[t.headerActions]:!0})} .hidden=${!e}><slot name=${r.headerActionsStart} @slotchange=${this.handleHeaderActionsStartSlotChange}></slot></div>`)}renderHeaderActionsEnd(){let{hasEndActions:e,messages:n,closable:i,collapsed:l,collapseDirection:c,collapsible:u,hasMenuItems:f}=this,{collapse:d,expand:h,close:v}=n,b=[g.expand,g.collapse];c==="up"&&b.reverse();let A=u?a`<calcite-action .ariaExpanded=${!l} .ariaLabel=${d} .icon=${l?b[0]:b[1]} id=${S.collapse} @click=${this.collapse} .scale=${this.scale} .text=${d} title=${(l?h:d)??$}></calcite-action>`:null,H=i?a`<calcite-action .ariaLabel=${v} .icon=${g.close} id=${S.close} @click=${this.handleUserClose} .scale=${this.scale} .text=${v} title=${v??$}></calcite-action>`:null,j=a`<slot name=${r.headerActionsEnd} @slotchange=${this.handleHeaderActionsEndSlotChange}></slot>`,D=e||A||H||f;return p("header-actions-end",a`<div class=${o({[t.headerActionsEnd]:!0,[t.headerActions]:!0})} .hidden=${!D}>${j}${this.renderMenu()}${A}${H}</div>`)}renderMenu(){let{hasMenuItems:e,messages:n,menuOpen:i,menuFlipPlacements:l,menuPlacement:c}=this;return p("menu",a`<calcite-action-menu .flipPlacements=${l??["top","bottom"]} .hidden=${!e} .label=${n.options} .open=${i} .overlayPositioning=${this.overlayPositioning} .placement=${c}><calcite-action class=${o(t.menuAction)} .icon=${g.menu} .scale=${this.scale} slot=${M.trigger} .text=${n.options}></calcite-action><slot name=${r.headerMenuActions} @slotchange=${this.handleHeaderMenuActionsSlotChange}></slot></calcite-action-menu>`)}renderHeaderNode(){let{hasHeaderContent:e,hasStartActions:n,hasEndActions:i,closable:l,collapsible:c,hasMenuItems:u,hasActionBar:f}=this,d=this.renderHeaderContent(),h=e||!!d||n||i||c||l||u;return this.showHeaderContent=h,a`<header class=${o(t.header)} .hidden=${!(h||f)}><div class=${o({[t.headerContainer]:!0,[t.headerContainerBorderEnd]:f})} .hidden=${!h}>${this.renderHeaderStartActions()}${this.renderHeaderSlottedContent()}${d}${this.renderHeaderActionsEnd()}</div>${this.renderActionBar()}${this.renderContentTop()}</header>`}renderFooterNode(){let{hasFooterEndContent:e,hasFooterStartContent:n,hasFooterContent:i,hasFooterActions:l}=this,c=n||e||i||l;return a`<footer class=${o(t.footer)} .hidden=${!c}><div class=${o(t.footerContent)} .hidden=${!i}><slot name=${r.footer} @slotchange=${this.handleFooterSlotChange}></slot></div><div class=${o(t.footerStart)} .hidden=${i||!n}><slot name=${r.footerStart} @slotchange=${this.handleFooterStartSlotChange}></slot></div><div class=${o(t.footerEnd)} .hidden=${i||!e}><slot name=${r.footerEnd} @slotchange=${this.handleFooterEndSlotChange}></slot></div><div class=${o(t.footerActions)} .hidden=${i||!l}>${p("footer-actions-slot",a`<slot name=${r.footerActions} @slotchange=${this.handleFooterActionsSlotChange}></slot>`)}</div></footer>`}renderContent(){return a`<div class=${o(t.contentWrapper)} .hidden=${this.collapsible&&this.collapsed} @scroll=${this.panelScrollHandler} ${C(this.setPanelScrollEl)}><slot></slot>${this.renderFab()}</div>`}renderContentBottom(){return a`<div class=${o(t.contentBottom)} .hidden=${!this.hasContentBottom}><slot name=${r.contentBottom} @slotchange=${this.contentBottomSlotChangeHandler}></slot></div>`}renderContentTop(){return a`<div class=${o(t.contentTop)} .hidden=${!this.hasContentTop}><slot name=${r.contentTop} @slotchange=${this.contentTopSlotChangeHandler}></slot></div>`}renderFab(){return a`<div class=${o(t.fabContainer)} .hidden=${!this.hasFab}><slot name=${r.fab} @slotchange=${this.handleFabSlotChange}></slot></div>`}render(){let{disabled:e,loading:n,isClosed:i}=this,l=a`<article .ariaBusy=${n} class=${o(t.container)} .hidden=${i} ${C(this.setContainerRef)}>${this.renderHeaderNode()}${this.renderContent()}${this.renderContentBottom()}${this.renderFooterNode()}${p("alerts",a`<slot name=${r.alerts} @slotchange=${this.handleAlertsSlotChange}></slot>`)}</article>`;return N({disabled:e,children:a`${n?a`<calcite-scrim .loading=${n}></calcite-scrim>`:null}${l}`})}};z("calcite-panel",y);export{y as Panel};