import{__decorate as e}from"../../_virtual/_tslib.js";import'./../../external/@lit/reactive-element/reactive-element.js';import{html as t}from'./../../external/lit-html/lit-html.js';import{LitElement as i}from'./../../external/lit-element/lit-element.js';import{customElement as o}from'./../../external/@lit/reactive-element/decorators/custom-element.js';import{property as s}from'./../../external/@lit/reactive-element/decorators/property.js';import{state as d}from'./../../external/@lit/reactive-element/decorators/state.js';import'./../../external/@lit/reactive-element/decorators/query-assigned-elements.js';import{classMap as l}from'./../../external/lit-html/directives/class-map.js';import n from"./accordionItem.scss.js";import r from'./../../external/@carbon/icons/es/add/32.js';import a from'./../../external/@carbon/icons/es/subtract/32.js';let c=class extends i{constructor(){super(...arguments),this.opened=!1,this._index=1,this._showNumber=!1,this._filledHeader=!1,this._compact=!1,this._id=crypto.randomUUID()}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?t`<div class="number">${this._index}</div>`:""}get iconTemplate(){return this.querySelector('[slot="icon"]')?t`<div class="icon"><slot name="icon"></slot></div>`:""}get subtitleTemplate(){return this.querySelector('[slot="subtitle"]')?t`
        <div class="kd-accordion-item-subtitle">
          <slot name="subtitle"></slot>
        </div>
      `:""}get expandIconTemplate(){return this.opened?t`
        <div class="expand-icon">
          <kd-icon .icon="${a}"></kd-icon>
        </div>
      `:t`
        <div class="expand-icon"><kd-icon .icon="${r}"></kd-icon></div>
      `}render(){const e=l({"kd-accordion-item":!0,opened:this.opened,"filled-header":this._filledHeader,compact:this._compact});return t`
      <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>
    `}};c.styles=[n],e([s({type:Boolean})],c.prototype,"opened",void 0),e([d()],c.prototype,"_index",void 0),e([d()],c.prototype,"_showNumber",void 0),e([d()],c.prototype,"_filledHeader",void 0),e([d()],c.prototype,"_compact",void 0),e([d()],c.prototype,"_id",void 0),c=e([o("kd-accordion-item")],c);export{c as AccordionItem};
//# sourceMappingURL=accordionItem.js.map
