import{__decorate as e,__classPrivateFieldGet as t,__classPrivateFieldSet as i}from"../../_virtual/_tslib.js";import'./../../external/@lit/reactive-element/reactive-element.js';import{html as s}from'./../../external/lit-html/lit-html.js';import{LitElement as o}from'./../../external/lit-element/lit-element.js';import{customElement as d}from'./../../external/@lit/reactive-element/decorators/custom-element.js';import{property as n}from'./../../external/@lit/reactive-element/decorators/property.js';import{state as l}from'./../../external/@lit/reactive-element/decorators/state.js';import'./../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as r}from'./../../external/lit-html/directives/class-map.js';import a from"./accordionItem.scss.js";import c from'./../../external/@carbon/icons/es/add/32.js';import m from'./../../external/@carbon/icons/es/subtract/32.js';var p,h,u,_,v,f;let b=class extends o{constructor(){super(...arguments),p.set(this,!1),h.set(this,1),u.set(this,!1),_.set(this,!1),v.set(this,!1),f.set(this,crypto.randomUUID())}get opened(){return t(this,p,"f")}set opened(e){i(this,p,e,"f")}get _index(){return t(this,h,"f")}set _index(e){i(this,h,e,"f")}get _showNumber(){return t(this,u,"f")}set _showNumber(e){i(this,u,e,"f")}get _filledHeader(){return t(this,_,"f")}set _filledHeader(e){i(this,_,e,"f")}get _compact(){return t(this,v,"f")}set _compact(e){i(this,v,e,"f")}get _id(){return t(this,f,"f")}set _id(e){i(this,f,e,"f")}setIndex(e){this._index=e}setShowNumbers(e){this._showNumber=e}setFilledHeader(e){this._filledHeader=e}setCompact(e){this._compact=e}open(){this.opened||this._toggleOpenState()}close(){this.opened&&this._toggleOpenState()}_handleClick(e){e.preventDefault(),this._toggleOpenState()}_handleKeypress(e){e.preventDefault()," "!=e.key&&"Enter"!=e.key||this._toggleOpenState()}_toggleOpenState(){this.opened?this.opened=!1:this.opened=!0}get numberTemplate(){return this._showNumber?s`<div class="number">${this._index}</div>`:""}get iconTemplate(){return this.querySelector('[slot="icon"]')?s`<div class="icon"><slot name="icon"></slot></div>`:""}get subtitleTemplate(){return this.querySelector('[slot="subtitle"]')?s`
        <div class="kd-accordion-item-subtitle">
          <slot name="subtitle"></slot>
        </div>
      `:""}get expandIconTemplate(){return this.opened?s`
        <div class="expand-icon">
          <kd-icon .icon="${m}"></kd-icon>
        </div>
      `:s`
        <div class="expand-icon"><kd-icon .icon="${c}"></kd-icon></div>
      `}render(){const e=r({"kd-accordion-item":!0,opened:this.opened,"filled-header":this._filledHeader,compact:this._compact});return s`
      <div class="${e}">
        <div
          class="kd-accordion-item-title"
          aria-controls="kd-accordion-item-body-${this._index}-${this._id}"
          aria-expanded=${this.opened}
          tabindex="${this._index}"
          role="button"
          @click="${e=>this._handleClick(e)}"
          @keypress="${e=>this._handleKeypress(e)}"
          id="kd-accordion-item-title-${this._index}-${this._id}"
        >
          ${this.iconTemplate} ${this.numberTemplate}

          <div class="title">
            <slot name="title"></slot>

            ${this.subtitleTemplate}
          </div>

          ${this.expandIconTemplate}
        </div>

        <div
          class="kd-accordion-item-body"
          id="kd-accordion-item-body-${this._index}-${this._id}"
          aria-labelledby="kd-accordion-item-title-${this._index}-${this._id}"
        >
          <div class="kd-accordion-item-detail">
            <slot name="body"></slot>
          </div>
        </div>
      </div>
    `}};p=new WeakMap,h=new WeakMap,u=new WeakMap,_=new WeakMap,v=new WeakMap,f=new WeakMap,b.styles=[a],e([n({type:Boolean})],b.prototype,"opened",null),e([l()],b.prototype,"_index",null),e([l()],b.prototype,"_showNumber",null),e([l()],b.prototype,"_filledHeader",null),e([l()],b.prototype,"_compact",null),e([l()],b.prototype,"_id",null),b=e([d("kd-accordion-item")],b);export{b as AccordionItem};
//# sourceMappingURL=accordionItem.js.map
