@esri/calcite-components/dist/calcite/VTQM5LD5.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{b as I}from"./ESHROPVK.js";import{a as P}from"./Z623INMU.js";import"./VAHSXLFS.js";import{b as w}from"./YCSOVIAT.js";import{a as O}from"./XE72EHW2.js";import{a as H,b as B}from"./BVJFCLMH.js";import{a as s}from"./YXZ62PQO.js";import"./OQOKN4KP.js";import{d as E}from"./CKRTMNFR.js";import{b as S}from"./5RDOSP2E.js";import{n as y,u as d}from"./3ADX47DD.js";import{d as C}from"./HPN2C7M6.js";import{a as f}from"./JOSABGK6.js";import"./NNVH7JUI.js";import{E as x,F as a,R as k,c as $,d as o,h as u,q as l}from"./BJZTU5BQ.js";var c={content:"content",toggle:"toggle",header:"header"},t={actionsEnd:"actions-end",container:"container",content:"content",contentStart:"content-start",controlContainer:"control-container",description:"description",header:"header",headerContainer:"header-container",headerHasText:"header--has-text",heading:"heading",icon:"icon",iconStart:"icon--start",iconEnd:"icon--end",iconEndContainer:"icon-end-container",invalid:"invalid",statusIcon:"status-icon",title:"title",toggle:"toggle",toggleIcon:"toggle-icon",valid:"valid"},h={actionsEnd:"actions-end",contentStart:"content-start",control:"control",headerMenuActions:"header-menu-actions",icon:"icon"},b={expanded:"chevron-up",collapsed:"chevron-down",valid:"check-circle",invalid:"exclamation-mark-triangle"},q=$`: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{--calcite-icon-size: 1rem;--calcite-spacing-eighth: .125rem;--calcite-spacing-quarter: .25rem;--calcite-spacing-half: .5rem;--calcite-spacing-three-quarters: .75rem;--calcite-spacing: 1rem;--calcite-spacing-plus-quarter: 1.25rem;--calcite-spacing-plus-half: 1.5rem;--calcite-spacing-double: 2rem;--calcite-menu-min-width: 10rem;--calcite-header-min-height: 3rem;--calcite-footer-min-height: 3rem}: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{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;padding:0;transition-property:margin;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-timing-function:cubic-bezier(.215,.44,.42,.88);flex-basis:auto;transition-duration:var(--calcite-animation-timing);border-color:var(--calcite-block-border-color, var(--calcite-color-border-3))}: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}.header{justify-content:flex-start}.header--has-text{padding:var(--calcite-spacing-md)}.header,.toggle{grid-area:header}.header-container{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto;grid-template-areas:"handle header control menu actions-end";grid-column:header-start/actions-end;grid-row:1/2}.content-start,.icon,.icon--start,.icon--end{margin-inline-end:var(--calcite-spacing-md)}.icon calcite-loader{margin-inline-end:var(--calcite-spacing-xxxs)}.icon--start,.icon--end{color:var(--calcite-block-icon-color, var(--calcite-color-text-3))}.actions-end{grid-area:actions-end}.toggle{margin:0;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0;font-family:var(--calcite-font-family);outline-color:transparent;text-align:initial;background-color:var(--calcite-block-header-background-color, transparent)}.toggle:hover{background-color:var(--calcite-block-header-background-color-hover, var(--calcite-color-foreground-2))}.toggle:focus{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))))}.toggle:active{background-color:var(--calcite-block-header-background-color-press, var(--calcite-color-foreground-3))}calcite-loader[inline]{grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0}.header .title .heading{padding:0;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;transition-property:color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);word-wrap:break-word;word-break:break-word;color:var(--calcite-block-heading-text-color, var(--calcite-color-text-2))}.description{margin-block-start:.125rem;padding:0;font-size:var(--calcite-font-size--2);line-height:1.375;word-wrap:break-word;word-break:break-word;color:var(--calcite-block-description-text-color, var(--calcite-color-text-3))}.icon{display:flex}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}@keyframes spin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.icon-end-container{display:flex;align-items:center;margin-inline-start:auto}.toggle-icon{align-self:center;justify-self:end;transition-property:color;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);margin-inline-end:var(--calcite-spacing-md);color:var(--calcite-block-icon-color, var(--calcite-color-text-3))}.toggle:hover .toggle-icon{color:var(--calcite-block-icon-color-hover, var(--calcite-color-text-1))}.container{position:relative;display:flex;block-size:100%;flex-direction:column}.content{position:relative;min-block-size:0px;flex:1 1 0%}@keyframes in{0%{opacity:0}to{opacity:1}}.content{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;padding-block:var(--calcite-block-padding, var(--calcite-spacing-sm));padding-inline:var(--calcite-block-padding, var(--calcite-spacing-md))}.content-start{display:flex;align-items:center;color:var(--calcite-block-text-color, var(--calcite-color-text-3))}.control-container{margin:0;display:flex;grid-area:control}calcite-action-menu{grid-area:menu}.actions-end{display:flex;align-items:stretch}:host([expanded]){margin-block:.5rem}:host([expanded]) .header .title .heading{color:var(--calcite-block-heading-text-color-press, var(--calcite-color-text-1))}:host([expanded]) .description{color:var(--calcite-block-description-text-color, var(--calcite-color-text-2))}:host([expanded]) .icon--start,:host([expanded]) .icon--end{color:var(--calcite-block-icon-color, var(--calcite-color-text-1))}:host([hidden]){display:none}[hidden]{display:none}`,v=class extends x{constructor(){super(...arguments),this.transitionProp="margin-top",this.messages=E(),this.hasContentStart=!1,this.hasControl=!1,this.hasEndActions=!1,this.hasIcon=!1,this.hasMenuActions=!1,this.collapsible=!1,this.disabled=!1,this.dragDisabled=!1,this.dragHandle=!1,this.expanded=!1,this.loading=!1,this.menuPlacement=w,this.moveToItems=[],this.overlayPositioning="absolute",this.setPosition=null,this.setSize=null,this.sortHandleOpen=!1,this.calciteBlockBeforeClose=l({cancelable:!1}),this.calciteBlockBeforeOpen=l({cancelable:!1}),this.calciteBlockClose=l({cancelable:!1}),this.calciteBlockOpen=l({cancelable:!1}),this.calciteBlockSortHandleBeforeClose=l({cancelable:!1}),this.calciteBlockSortHandleBeforeOpen=l({cancelable:!1}),this.calciteBlockSortHandleClose=l({cancelable:!1}),this.calciteBlockSortHandleOpen=l({cancelable:!1}),this.calciteBlockToggle=l({cancelable:!1})}static{this.properties={hasContentStart:[16,{},{state:!0}],hasControl:[16,{},{state:!0}],hasEndActions:[16,{},{state:!0}],hasIcon:[16,{},{state:!0}],hasMenuActions:[16,{},{state:!0}],collapsible:[7,{},{reflect:!0,type:Boolean}],description:1,disabled:[7,{},{reflect:!0,type:Boolean}],dragDisabled:[7,{},{reflect:!0,type:Boolean}],dragHandle:[7,{},{reflect:!0,type:Boolean}],expanded:[7,{},{reflect:!0,type:Boolean}],heading:1,headingLevel:[11,{},{type:Number,reflect:!0}],iconEnd:[3,{},{reflect:!0}],iconFlipRtl:[3,{},{reflect:!0}],iconStart:[3,{},{reflect:!0}],loading:[7,{},{reflect:!0,type:Boolean}],label:1,menuFlipPlacements:[0,{},{attribute:!1}],menuPlacement:[3,{},{reflect:!0}],messageOverrides:[0,{},{attribute:!1}],moveToItems:[0,{},{attribute:!1}],open:[7,{},{reflect:!0,type:Boolean}],overlayPositioning:[3,{},{reflect:!0}],setPosition:[9,{},{type:Number}],setSize:[9,{},{type:Number}],sortHandleOpen:[7,{},{reflect:!0,type:Boolean}],status:[3,{},{reflect:!0}]}}static{this.styles=[q,P]}get open(){return this.expanded}set open(e){f.deprecated("property",{name:"open",removalVersion:4,suggested:"expanded"}),this.expanded=e}async setFocus(){await C(this),y(this.el)}connectedCallback(){super.connectedCallback(),this.transitionEl=this.el}load(){!this.heading&&!this.label&&f.warn(`${this.el.tagName} is missing both heading & label. Please provide a heading or label for the component to be accessible.`)}willUpdate(e){e.has("expanded")&&(this.hasUpdated||this.expanded!==!1)&&O(this),e.has("sortHandleOpen")&&(this.hasUpdated||this.sortHandleOpen!==!1)&&this.sortHandleOpenHandler()}updated(){H(this)}onBeforeOpen(){this.calciteBlockBeforeOpen.emit()}onOpen(){this.calciteBlockOpen.emit()}onBeforeClose(){this.calciteBlockBeforeClose.emit()}onClose(){this.calciteBlockClose.emit()}sortHandleOpenHandler(){this.sortHandleEl&&(this.sortHandleEl.open=this.sortHandleOpen)}setSortHandleEl(e){this.sortHandleEl=e,this.sortHandleOpenHandler()}handleSortHandleBeforeOpen(e){e.stopPropagation(),this.calciteBlockSortHandleBeforeOpen.emit()}handleSortHandleBeforeClose(e){e.stopPropagation(),this.calciteBlockSortHandleBeforeClose.emit()}handleSortHandleClose(e){e.stopPropagation(),this.sortHandleOpen=!1,this.calciteBlockSortHandleClose.emit()}handleSortHandleOpen(e){e.stopPropagation(),this.sortHandleOpen=!0,this.calciteBlockSortHandleOpen.emit()}onHeaderClick(){this.expanded=!this.expanded,this.calciteBlockToggle.emit()}controlSlotChangeHandler(e){this.hasControl=d(e)}menuActionsSlotChangeHandler(e){this.hasMenuActions=d(e)}iconSlotChangeHandler(e){this.hasIcon=d(e)}actionsEndSlotChangeHandler(e){this.hasEndActions=d(e)}handleContentStartSlotChange(e){this.hasContentStart=d(e)}renderScrim(){let{loading:e}=this,i=o`<slot></slot>`;return[e?o`<calcite-scrim .loading=${e}></calcite-scrim>`:null,i]}renderLoaderStatusIcon(){let{loading:e,messages:i,status:n}=this;return e?s("loader",o`<div class=${a(t.icon)}><calcite-loader inline .label=${i.loading}></calcite-loader></div>`):n?s("status-icon",o`<div class=${a(t.icon)}><calcite-icon class=${a({[t.statusIcon]:!0,[t.valid]:n=="valid",[t.invalid]:n=="invalid"})} .icon=${b[n]} scale=s></calcite-icon></div>`):s("icon-slot",o`<div class=${a(t.icon)} .hidden=${!this.hasIcon}>${s("icon-slot",o`<slot name=${h.icon} @slotchange=${this.iconSlotChangeHandler}></slot>`)}</div>`)}renderActionsEnd(){return o`<div class=${a(t.actionsEnd)} .hidden=${!this.hasEndActions}><slot name=${h.actionsEnd} @slotchange=${this.actionsEndSlotChangeHandler}></slot></div>`}renderContentStart(){return o`<div class=${a(t.contentStart)} .hidden=${!this.hasContentStart}><slot name=${h.contentStart} @slotchange=${this.handleContentStartSlotChange}></slot></div>`}renderTitle(){let{heading:e,headingLevel:i,description:n}=this;return e||n?o`<div class=${a(t.title)}>${I({class:t.heading,level:i,children:e})}${n?o`<div class=${a(t.description)}>${n}</div>`:null}</div>`:null}renderIcon(e){let{iconFlipRtl:i}=this,n=i==="both"||e==="start"?i==="start":i==="end",r=e==="start"?this.iconStart:this.iconEnd,p=e==="start"?t.iconStart:t.iconEnd;if(r)return s(r,o`<calcite-icon class=${a(p)} .flipRtl=${n} .icon=${r} scale=s></calcite-icon>`)}render(){let{collapsible:e,loading:i,expanded:n,label:r,heading:p,messages:g,description:z,menuFlipPlacements:A,menuPlacement:T,moveToItems:M,setPosition:F,setSize:L,dragDisabled:N}=this,D=n?g.collapse:g.expand,m=o`<header class=${a({[t.header]:!0,[t.headerHasText]:!!(p||z)})} id=${c.header}>${this.renderIcon("start")}${this.renderContentStart()}${this.renderLoaderStatusIcon()}${this.renderTitle()}</header>`,R=n?b.expanded:b.collapsed,j=o`<div class=${a(t.headerContainer)}>${this.dragHandle?o`<calcite-sort-handle .disabled=${N} .label=${p||r} .moveToItems=${M} @calciteSortHandleBeforeClose=${this.handleSortHandleBeforeClose} @calciteSortHandleBeforeOpen=${this.handleSortHandleBeforeOpen} @calciteSortHandleClose=${this.handleSortHandleClose} @calciteSortHandleOpen=${this.handleSortHandleOpen} overlay-positioning=fixed .setPosition=${F} .setSize=${L} ${S(this.setSortHandleEl)}></calcite-sort-handle>`:null}${e?o`<button aria-controls=${c.content} aria-describedby=${c.header} .ariaExpanded=${e?n:null} class=${a(t.toggle)} id=${c.toggle} @click=${this.onHeaderClick} title=${D??u}>${m}<div class=${a(t.iconEndContainer)}>${this.renderIcon("end")}<calcite-icon class=${a(t.toggleIcon)} .icon=${R} scale=s></calcite-icon></div></button>`:this.iconEnd?o`<div>${m}<div class=${a(t.iconEndContainer)}>${this.renderIcon("end")}</div></div>`:m}<div aria-labelledby=${c.header} class=${a(t.controlContainer)} .hidden=${!this.hasControl}><slot name=${h.control} @slotchange=${this.controlSlotChangeHandler}></slot></div><calcite-action-menu .flipPlacements=${A??["top","bottom"]} .hidden=${!this.hasMenuActions} .label=${g.options} .overlayPositioning=${this.overlayPositioning} .placement=${T}><slot name=${h.headerMenuActions} @slotchange=${this.menuActionsSlotChangeHandler}></slot></calcite-action-menu>${this.renderActionsEnd()}</div>`;return B({disabled:this.disabled,children:o`<article aria-label=${r??u} .ariaBusy=${i} class=${a({[t.container]:!0})}>${j}<section aria-labelledby=${c.toggle} class=${a(t.content)} .hidden=${!n} id=${c.content}>${this.renderScrim()}</section></article>`})}};k("calcite-block",v);export{v as Block};