import{__decorate as e}from"tslib";import{html as t}from"lit";import{property as i,query as s,customElement as n}from"lit/decorators.js";import{s as a}from"./nile-inline-sidebar-panel-group.css.esm.js";import{N as l}from"../internal/nile-element.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";let r=class extends l{constructor(){super(...arguments),this.placement="left",this.handleSidebarItemClick=e=>{const t=e.detail,i=t?.item?.panel;i&&this.activatePanel(i)}}static get styles(){return[a]}connectedCallback(){super.connectedCallback(),this.addEventListener("nile-click",this.handleSidebarItemClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("nile-click",this.handleSidebarItemClick)}get panels(){return this.defaultSlot?this.defaultSlot.assignedElements({flatten:!0}).filter((e=>"nile-inline-sidebar-panel"===e.tagName.toLowerCase())):[]}activatePanel(e){this.panels.forEach((t=>{t.active=t.name===e})),this.emit("nile-panel-change",{panel:e})}render(){return t`
      <div class="panel-group" part="base">
        <div class="sidebar-container" part="sidebar-container">
          <slot name="sidebar"></slot>
        </div>
        <div class="panel-container" part="panel-container">
          <slot
            @slotchange=${()=>this.requestUpdate()}
          ></slot>
        </div>
      </div>
    `}};e([i({type:String,reflect:!0})],r.prototype,"placement",void 0),e([s("slot:not([name])")],r.prototype,"defaultSlot",void 0),r=e([n("nile-inline-sidebar-panel-group")],r);export{r as N};
