@esri/calcite-components/dist/cdn/IMWHQL4C.js

Web Components for Esri's Calcite Design System.

/* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
import{a as k}from"./HXIMHC6U.js";import{a as y}from"./K7LRDT5O.js";import{a as E}from"./DPU3UW4H.js";import{a as w}from"./SQ6RHDDF.js";import{a as S}from"./3XLPUKLV.js";import{a as g}from"./3YEM2IPT.js";import"./QUTTHRH3.js";import"./MNIRD7Q7.js";import{t as $}from"./ZQBZ5QPB.js";import"./CIYXQ5G6.js";import{E as f,F as o,H as m,Q as b,g as x,h as l,p as d}from"./G7AHLVJ5.js";var i={content:"content",toggle:"toggle"},t={chevronIcon:"chevron-icon",content:"content",iconStart:"icon--start",iconEnd:"icon--end",invalid:"invalid",sectionHeaderText:"section-header__text",statusIcon:"status-icon",switch:"switch",toggle:"toggle",toggleContainer:"toggle-container",toggleSwitchContent:"toggle--switch__content",toggleSwitchText:"toggle--switch__text",valid:"valid"},p={menuExpanded:"chevron-up",menuCollapsed:"chevron-down",valid:"check-circle",invalid:"exclamation-mark-triangle"},I=x`:host{box-sizing:border-box;display:block;color:var(--calcite-block-section-header-text-color, var(--calcite-color-text-2))}:host([expanded]){border-width:0px;border-block-end-width:1px;border-style:solid;border-block-end-color:var(--calcite-block-section-border-color, var(--calcite-color-border-3))}:host([expanded]) .toggle{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .toggle:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .icon--end,:host([expanded]) .icon--start{color:var(--calcite-block-section-text-color, var(--calcite-color-text-1))}:host([expanded]) .chevron-icon{color:var(--calcite-block-section-text-color, var(--calcite-color-text-3))}:host([expanded]) .chevron-icon:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}:host([expanded]) .toggle-container:hover calcite-switch{--calcite-switch-background-color: var(--calcite-color-brand-hover)}:host(:last-child){border-block-end-width:0px}:host([scale=s]) .toggle{padding-block:var(--calcite-spacing-xxs);gap:var(--calcite-spacing-sm);font-size:var(--calcite-font-size-sm)}:host([scale=s]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-xxs))}:host([scale=m]) .toggle{padding-block:var(--calcite-spacing-sm);gap:var(--calcite-spacing-md);font-size:var(--calcite-font-size)}:host([scale=m]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-sm))}:host([scale=l]) .toggle{padding-block:var(--calcite-spacing-md);gap:var(--calcite-spacing-lg);font-size:var(--calcite-font-size-md)}:host([scale=l]) .content{padding-block:var(--calcite-block-section-content-space, var(--calcite-spacing-md))}.toggle{display:flex;inline-size:100%;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;border-width:0px;outline-color:transparent;font-family:inherit;color:var(--calcite-block-section-header-text-color, var(--calcite-color-text-2));background-color:var(--calcite-block-section-background-color, var(--calcite-color-foreground-1));font-weight:var(--calcite-font-weight-regular);padding-inline:0;line-height:var(--calcite-font-line-height-relative-snug)}.toggle:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));z-index:var(--calcite-z-index)}.toggle:hover{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}.section-header__text{margin-block:0px;flex:1 1 auto;text-align:initial;word-wrap:anywhere}.toggle-container{position:relative;display:flex;align-items:center;word-break:break-word}.toggle-container .toggle--switch__content{display:flex;flex:1 1 auto;align-items:center}.toggle-container .icon--end,.toggle-container .icon--start,.toggle-container .chevron-icon{display:flex;align-items:center;color:var(--calcite-block-section-text-color, var(--calcite-color-text-3))}.toggle-container:hover .chevron-icon{color:var(--calcite-block-section-text-color-hover, var(--calcite-color-text-1))}.toggle-container:hover calcite-switch{--calcite-switch-background-color: var(--calcite-color-text-3)}.status-icon{display:flex;align-items:center}.status-icon.valid{color:var(--calcite-color-status-success)}.status-icon.invalid{color:var(--calcite-color-status-danger)}:host([hidden]){display:none}[hidden]{display:none}`,v=class extends f{constructor(){super(...arguments),this.messages=w(),this.focusSetter=S()(this),this.defaultSlotHasElements=!1,this.expanded=!1,this.scale="m",this.toggleDisplay="button",this.calciteBlockSectionCollapse=d({cancelable:!1}),this.calciteBlockSectionExpand=d({cancelable:!1}),this.calciteBlockSectionToggle=d({cancelable:!1})}static{this.properties={defaultSlotHasElements:[16,{},{state:!0}],expanded:[7,{},{reflect:!0,type:Boolean}],iconEnd:[3,{type:String},{reflect:!0}],iconFlipRtl:[3,{},{reflect:!0}],iconStart:[3,{type:String},{reflect:!0}],messageOverrides:[0,{},{attribute:!1}],open:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],status:[3,{},{reflect:!0}],text:1,toggleDisplay:[3,{},{reflect:!0}]}}static{this.styles=I}get open(){return this.expanded}set open(e){E.deprecated("property",{component:this,name:"open",removalVersion:5,suggested:"expanded"}),this.expanded=e}async setFocus(e){return this.focusSetter(()=>this.el,e)}willUpdate(e){e.has("expanded")&&this.hasUpdated&&(this.expanded?this.calciteBlockSectionExpand.emit():this.calciteBlockSectionCollapse.emit())}handleHeaderKeyDown(e){y(e.key)&&(this.toggleSection(),e.preventDefault(),e.stopPropagation())}toggleSection(){this.expanded=!this.expanded,this.calciteBlockSectionToggle.emit()}handleDefaultSlot(e){this.defaultSlotHasElements=$(e)}renderStatusIcon(){let{status:e}=this,c=p[e]??!1,a={[t.statusIcon]:!0,[t.valid]:e=="valid",[t.invalid]:e=="invalid"};return c?l`<calcite-icon class=${o(a)} .icon=${c} .scale=${g(this.scale)}></calcite-icon>`:null}renderIcon(e){let{iconFlipRtl:c,iconStart:a,iconEnd:n}=this;if((e==="start"?a:n)===void 0)return null;let s=c==="both"||c==="start",h=c==="both"||c==="end",r=e==="start";return k(r?a:n,l`<calcite-icon class=${o(r?t.iconStart:t.iconEnd)} .flipRtl=${r?s:h} .icon=${r?a:n} .scale=${g(this.scale)}></calcite-icon>`)}render(){let{messages:e,expanded:c,text:a,toggleDisplay:n}=this,u=c?p.menuExpanded:p.menuCollapsed,s=c?e.collapse:e.expand,h=n==="switch"?l`<div class=${o({[t.toggleContainer]:!0})}><div aria-controls=${i.content} .ariaExpanded=${c} class=${o({[t.toggle]:!0})} id=${i.toggle} @click=${this.toggleSection} @keydown=${this.handleHeaderKeyDown} role=button tabindex=0 title=${s??m}>${this.renderIcon("start")}<div class=${o(t.toggleSwitchContent)}><span class=${o(t.toggleSwitchText)}>${a}</span></div>${this.renderIcon("end")}${this.renderStatusIcon()}<calcite-switch .checked=${c} class=${o(t.switch)} inert .label=${s} .scale=${this.scale}></calcite-switch></div></div>`:l`<div class=${o({[t.toggleContainer]:!0})}><button aria-controls=${i.content} .ariaExpanded=${c} class=${o({[t.toggle]:!0})} id=${i.toggle} @click=${this.toggleSection}>${this.renderIcon("start")}<span class=${o(t.sectionHeaderText)}>${a}</span>${this.renderIcon("end")}${this.renderStatusIcon()}<calcite-icon class=${o(t.chevronIcon)} .icon=${u} .scale=${g(this.scale)}></calcite-icon></button></div>`;return l`${h}<section aria-labelledby=${i.toggle} class=${o({[t.content]:this.defaultSlotHasElements})} .hidden=${!c} id=${i.content}><slot @slotchange=${this.handleDefaultSlot}></slot></section>`}};b("calcite-block-section",v);export{v as BlockSection};