https://worksmanager.com/assets/modus-accordion-item.entry-DVpwsfkA.js

1import{as as c,au as s,at as o}from"./index-CdaOVUJg.js";import{g as l}from"./utils-3803a333-Cc9HXbaG.js";import{M as h,I as m,a as p}from"./ModusIconMap-cf58ad3c-BjJZ_lrm.js";import"./IconChevronLeft-dfd06381-DITKlKrn.js";import"./IconChevronRight-5734b74b-BLeUiM7h.js";import"./IconClose-be97678b-aPmY1TMm.js";import"./IconExpand-ccaa9f2c-BW6AFHNu.js";import"./IconVisibilityOn-c278a26a-DKfQBe72.js";const f='.accordion-item{background-color:var(--modus-accordion-item-bg, #fff);border-bottom:0.0625rem solid var(--modus-accordion-item-border-color, #cbcdd6);color:var(--modus-accordion-item-color, #252a2e);display:flex;flex-direction:column;font-family:"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";position:relative}.accordion-item[aria-expanded=true] .header:has(div svg.icon-expand-more){border-left:4px solid var(--modus-accordion-item-expanded-border-left-color, #0063a3);padding-left:12px}.accordion-item:has(div svg.icon-expand-more) .body{box-shadow:4px 0 0 var(--modus-accordion-item-expanded-border-left-color, #0063a3) inset}.accordion-item .header{align-items:center;cursor:pointer;display:inline-flex;font-size:0.875rem;font-weight:600;height:48px;padding:0 16px}.accordion-item .header .icon{margin-right:0.5rem;margin-top:0.25rem}.accordion-item .header .label-container{align-items:center;display:flex;gap:1.5rem;overflow:hidden;padding:0.75rem 0;width:100%}.accordion-item .header .label-container .supporting-label{color:var(--modus-accordion-label-color, #6a6e79);font-size:0.75rem;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.accordion-item .header.disabled{cursor:auto;opacity:0.4}.accordion-item .header.expanded{color:var(--modus-accordion-item-header-expand-color, #252a2e)}.accordion-item .header.expanded:has(div svg.icon-expand-more){background-color:var(--modus-accordion-item-header-expanded-bg, #dcedf9)}.accordion-item .header:hover:not(.disabled){background-color:var(--modus-accordion-item-header-hover-bg, #e0e1e9)}.accordion-item .header.small{font-size:0.75rem;height:2.5rem}.accordion-item .header.small .label-container{gap:1rem;padding:0.625rem 0}.accordion-item .header.small .label-container .supporting-label{font-size:0.625rem}.accordion-item .header.small .chevron-container{margin-left:16px}.accordion-item .header .chevron-container{align-items:center;display:flex;margin-left:24px;transition:transform 0.2s ease-in-out}.accordion-item .header .chevron-container.reverse{transform:rotate(-180deg)}.accordion-item .header .chevron-container svg path{fill:var(--modus-chevron-color, #6a6e79)}.accordion-item .body{overflow:hidden}.accordion-item .body.collapse.show{transition:height 0.35s ease-out}.accordion-item .body .body-content{font-size:0.875rem;padding:1rem}.accordion-item .body.collapse:not(.show){display:none}.accordion-item .body.collapsing{height:0;position:relative;transition:all 0.35s ease-out}@media (prefers-reduced-motion: reduce){.accordion-item .body.collapsing{transition:none}}.accordion-item:has(>.body.collapsing) .header:has(div svg.icon-expand-more){background-color:var(--modus-accordion-item-header-expanded-bg, #dcedf9);border-left:4px solid var(--modus-blue);padding-left:12px}',b=f,u=class{constructor(e){c(this,e),this.closed=s(this,"closed"),this.opened=s(this,"opened"),this.expandedContentId=l()+"_accordion-item",this.classBySize=new Map([["condensed","small"],["standard","standard"]]),this.reflow=t=>{},this.disabled=void 0,this.expandButtonType="standardArrow",this.expanded=void 0,this.headerText=void 0,this.icon=void 0,this.supportingLabel=void 0,this.size="standard"}componentDidLoad(){this.contentObserver=new MutationObserver(()=>this.onContentChange()),this.contentObserver.observe(this.accordionBodyRef,{childList:!0,subtree:!0,characterData:!0,attributes:!0}),this.resizeObserver=new ResizeObserver(()=>this.onContentChange()),this.resizeObserver.observe(this.accordionBodyRef.querySelector(".body-content")),this.expanded&&this.adjustHeight()}disconnectedCallback(){this.contentObserver&&this.contentObserver.disconnect(),this.resizeObserver&&this.resizeObserver.disconnect(),this.accordionOpenTimeout&&clearTimeout(this.accordionOpenTimeout),this.accordionCloseTimeout&&clearTimeout(this.accordionCloseTimeout)}onContentChange(){this.expanded&&this.accordionBodyRef&&this.adjustHeight()}adjustHeight(){requestAnimationFrame(()=>{if(this.accordionBodyRef&&this.expanded&&!this.accordionBodyRef.classList.contains("collapsing")){const e=this.accordionBodyRef.style.height;this.accordionBodyRef.style.height="";const t=this.accordionBodyRef.scrollHeight;this.accordionBodyRef.style.height=e,this.reflow(this.accordionBodyRef),requestAnimationFrame(()=>{this.accordionBodyRef.style.height=`${t}px`})}})}handleHeaderClick(){if(!this.disabled)if(this.chevronContainerRef.classList.toggle("reverse"),!this.expanded)this.accordionBodyRef.classList.remove("collapse"),this.accordionBodyRef.classList.add("collapsing"),this.accordionBodyRef.style.height="0",this.reflow(this.accordionBodyRef),requestAnimationFrame(()=>{const e=this.accordionBodyRef.scrollHeight;this.accordionBodyRef.style.height=`${e}px`,this.accordionOpenTimeout=setTimeout(()=>{this.accordionBodyRef&&(this.accordionBodyRef.classList.remove("collapsing"),this.accordionBodyRef.classList.add("show"),this.accordionBodyRef.classList.add("collapse"),this.accordionBodyRef.style.height="",this.expanded=!0,this.opened.emit())},350)});else{const e=this.accordionBodyRef.getBoundingClientRect().height;this.accordionBodyRef.style.height=`${e}px`,this.reflow(this.accordionBodyRef),this.accordionBodyRef.classList.add("collapsing"),this.accordionBodyRef.classList.remove("collapse","show"),requestAnimationFrame(()=>{this.accordionBodyRef.style.height="0",this.accordionCloseTimeout=setTimeout(()=>{this.accordionBodyRef&&(this.accordionBodyRef.classList.remove("collapsing"),this.accordionBodyRef.classList.add("collapse"),this.accordionBodyRef.style.height="",this.expanded=!1,this.closed.emit

1())},350)})}}handleKeydown(e){e.code==="Enter"&&this.handleHeaderClick()}renderIcon(){const e=this.size==="condensed"?"20":"24";return o("span",{class:"icon"},o(h,{icon:this.icon,size:e}))}render(){const e=`${this.classBySize.get(this.size)}`,t=`${this.disabled?"disabled":""}`,a=`${this.expanded?"expanded":""}`,n=`body ${e} collapse${this.expanded?" show":""}`,r=`header ${e} ${t} ${a}`,d=this.size==="condensed"?"20":"24";return o("div",{key:"ffbaddcfb8629176926443aa42edefb983658f1d","aria-disabled":this.disabled?"true":void 0,"aria-expanded":this.expanded?"true":void 0,class:"accordion-item"},o("div",{key:"eeeea7eb6ddb35825b3c2630b615da40dc7fb030",class:r,role:"button","aria-expanded":this.expanded?"true":"false","aria-controls":this.expandedContentId,onClick:()=>this.handleHeaderClick(),onKeyDown:i=>this.handleKeydown(i),tabIndex:this.disabled?-1:0},this.icon?this.renderIcon():null,o("div",{key:"710d83ef1093fa97062c9ab33d95fd1e9b2d72c3",class:"label-container"},o("span",{key:"744f788063a01f913274eb743242476048362030",class:"title"},this.headerText),this.supportingLabel&&o("span",{class:"supporting-label"},this.supportingLabel)),o("div",{class:`chevron-container ${this.expanded?"reverse":""} `,ref:i=>this.chevronContainerRef=i},this.expandButtonType=="circleArrow"?o(m,{size:d}):o(p,{size:d}))),o("div",{key:"b3c47cb05778da5d72005d01d25ada4844248fa4",id:this.expandedContentId,class:n,ref:i=>this.accordionBodyRef=i},o("div",{key:"ff7a12e88cb25c040b6206f98957b1b3242d3ed7",class:"body-content"},o("slot",{key:"194aaf3f2480c679030f4de8d102d423897c14e6"}))))}};u.style=b;export{u as modus_accordion_item};