import{__decorate as t}from"tslib";import{html as i}from"lit";import{property as e,customElement as s}from"lit/decorators.js";import{s as o}from"./nile-side-bar-group-item.css.esm.js";import{N as r}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 l=class extends r{constructor(){super(...arguments),this.link=null,this.active=!1,this.type="default",this.expanded=!1,this.disabled=!1}static get styles(){return[o]}toggleExpand(){"dropdown"!==this.type&&"popover"!==this.type||this.disabled||(this.expanded=!this.expanded)}connectedCallback(){super.connectedCallback(),this.link&&window.location.pathname===this.link&&(this.active=!0)}handleSelect(t){if(t.preventDefault(),this.disabled)return void t.stopImmediatePropagation();this.link||t.preventDefault();const i=this.closest("nile-side-bar");i&&i.querySelectorAll("nile-side-bar-group-item[active]").forEach((t=>{t!==this&&(t.active=!1,t.expanded=!1)})),this.active=!0,"dropdown"!==this.type&&"popover"!==this.type||this.disabled||(this.expanded=!0),this.dispatchEvent(new CustomEvent("nile-click",{bubbles:!0,composed:!0,detail:{href:this.link,text:this.textContent?.trim()||"",type:this.type}}))}render(){const t="dropdown"===this.type||"popover"===this.type;return i`
      <div
        part="base"
        class="group-item ${this.disabled?"disabled":""}"
        role="listitem"
        ?data-expanded=${this.expanded}
        aria-disabled=${this.disabled?"true":"false"}
      >
        ${this.link?i`
              <a
                part="link"
                class="item-link"
                href=${this.link}
                @click=${this.handleSelect}
                tabindex=${this.disabled?"-1":"0"}
              >
                <slot name="icon"></slot>
                <slot name="text"></slot>
                <slot name="trigger"></slot>
              </a>
            `:i`
              <div
                part="link"
                class="item-link"
                @click=${i=>{this.handleSelect(i),t&&!this.disabled&&this.toggleExpand()}}
                tabindex=${this.disabled?"-1":"0"}
              >
                <slot name="icon" part="icon"></slot>
                <slot name="text" part="text"></slot>
                <slot name="trigger" part="trigger"></slot>
              </div>
            `}
      </div>

      ${t?i`
            <div
              part="content"
              class="item-content"
              role=${"dropdown"===this.type?"menu":"dialog"}
              ?hidden=${!this.expanded}
            >
              <slot name="content"></slot>
            </div>
          `:null}
    `}};t([e({type:String})],l.prototype,"link",void 0),t([e({type:Boolean,reflect:!0,attribute:!0})],l.prototype,"active",void 0),t([e({type:String,reflect:!0})],l.prototype,"type",void 0),t([e({type:Boolean,reflect:!0})],l.prototype,"expanded",void 0),t([e({type:Boolean,reflect:!0})],l.prototype,"disabled",void 0),l=t([s("nile-side-bar-group-item")],l);export{l as N};
