import{details_styles_default as e}from"./chunk.WIJ5PGEU.js";import{getAnimation as t,setDefaultAnimation as s}from"./chunk.STXFIMXZ.js";import{waitForEvent as i}from"./chunk.B4BZKR24.js";import{animateTo as o,shimKeyframesHeightAuto as a,stopAnimations as r}from"./chunk.W5IOVX7A.js";import{LocalizeController as l}from"./chunk.2A3352EO.js";import{SlIcon as h}from"./chunk.M4HIRIJ5.js";import{watch as n}from"./chunk.C7FWPEOY.js";import{ShoelaceElement as d}from"./chunk.Z7XDKKOD.js";import{__decorateClass as p}from"./chunk.6M63UXML.js";import{classMap as c}from"../../../../lit/directives/class-map.js";import{html as m}from"../../../../lit/index.js";import{property as y,query as u}from"../../../../lit/decorators.js";var f=class extends d{constructor(){super(...arguments),this.localize=new l(this),this.open=!1,this.disabled=!1}firstUpdated(){this.body.style.height=this.open?"auto":"0",this.open&&(this.details.open=!0),this.detailsObserver=new MutationObserver((e=>{for(const t of e)"attributes"===t.type&&"open"===t.attributeName&&(this.details.open?this.show():this.hide())})),this.detailsObserver.observe(this.details,{attributes:!0})}disconnectedCallback(){this.detailsObserver.disconnect()}handleSummaryClick(e){e.preventDefault(),this.disabled||(this.open?this.hide():this.show(),this.header.focus())}handleSummaryKeyDown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.open?this.hide():this.show()),"ArrowUp"!==e.key&&"ArrowLeft"!==e.key||(e.preventDefault(),this.hide()),"ArrowDown"!==e.key&&"ArrowRight"!==e.key||(e.preventDefault(),this.show())}async handleOpenChange(){if(this.open){this.details.open=!0;if(this.emit("sl-show",{cancelable:!0}).defaultPrevented)return this.open=!1,void(this.details.open=!1);await r(this.body);const{keyframes:e,options:s}=t(this,"details.show",{dir:this.localize.dir()});await o(this.body,a(e,this.body.scrollHeight),s),this.body.style.height="auto",this.emit("sl-after-show")}else{if(this.emit("sl-hide",{cancelable:!0}).defaultPrevented)return this.details.open=!0,void(this.open=!0);await r(this.body);const{keyframes:e,options:s}=t(this,"details.hide",{dir:this.localize.dir()});await o(this.body,a(e,this.body.scrollHeight),s),this.body.style.height="auto",this.details.open=!1,this.emit("sl-after-hide")}}async show(){if(!this.open&&!this.disabled)return this.open=!0,i(this,"sl-after-show")}async hide(){if(this.open&&!this.disabled)return this.open=!1,i(this,"sl-after-hide")}render(){const e="rtl"===this.localize.dir();return m`
      <details
        part="base"
        class=${c({details:!0,"details--open":this.open,"details--disabled":this.disabled,"details--rtl":e})}
      >
        <summary
          part="header"
          id="header"
          class="details__header"
          role="button"
          aria-expanded=${this.open?"true":"false"}
          aria-controls="content"
          aria-disabled=${this.disabled?"true":"false"}
          tabindex=${this.disabled?"-1":"0"}
          @click=${this.handleSummaryClick}
          @keydown=${this.handleSummaryKeyDown}
        >
          <slot name="summary" part="summary" class="details__summary">${this.summary}</slot>

          <span part="summary-icon" class="details__summary-icon">
            <slot name="expand-icon">
              <sl-icon library="system" name=${e?"chevron-left":"chevron-right"}></sl-icon>
            </slot>
            <slot name="collapse-icon">
              <sl-icon library="system" name=${e?"chevron-left":"chevron-right"}></sl-icon>
            </slot>
          </span>
        </summary>

        <div class="details__body" role="region" aria-labelledby="header">
          <slot part="content" id="content" class="details__content"></slot>
        </div>
      </details>
    `}};f.styles=e,f.dependencies={"sl-icon":h},p([u(".details")],f.prototype,"details",2),p([u(".details__header")],f.prototype,"header",2),p([u(".details__body")],f.prototype,"body",2),p([u(".details__expand-icon-slot")],f.prototype,"expandIconSlot",2),p([y({type:Boolean,reflect:!0})],f.prototype,"open",2),p([y()],f.prototype,"summary",2),p([y({type:Boolean,reflect:!0})],f.prototype,"disabled",2),p([n("open",{waitUntilFirstUpdate:!0})],f.prototype,"handleOpenChange",1),s("details.show",{keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:250,easing:"linear"}}),s("details.hide",{keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:250,easing:"linear"}});export{f as SlDetails};