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/chevron--down/24.js';import"../icon/icon.js";let a=class extends i{constructor(){super(...arguments),this.opened=!1,this.disabled=!1,this._index=1,this._showNumber=!1,this._filledHeader=!1,this._compact=!1}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.disabled||(this.opened=!this.opened,this._emitToggleEvent())}_emitToggleEvent(){const e=new CustomEvent("on-toggle",{bubbles:!0,composed:!0,detail:{opened:this.opened}});this.dispatchEvent(e)}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>
      `:""}render(){const e=l({"kd-accordion-item":!0,opened:this.opened,disabled:this.disabled,"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}"
          aria-expanded=${this.opened}
          aria-disabled=${this.disabled}
          tabindex="0"
          role="button"
          @click="${e=>this._handleClick(e)}"
          @keypress="${e=>this._handleKeypress(e)}"
          id="kd-accordion-item-title-${this._index}"
        >
          ${this.iconTemplate} ${this.numberTemplate}

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

            ${this.subtitleTemplate}
          </div>

          <div class="expand-icon">
            <kd-icon .icon="${r}"></kd-icon>
          </div>
        </div>

        <div
          class="kd-accordion-item-body"
          id="kd-accordion-item-body-${this._index}"
          role="region"
          aria-labelledby="kd-accordion-item-title-${this._index}"
        >
          <div class="kd-accordion-item-detail">
            <slot name="body"></slot>
          </div>
        </div>
      </div>
    `}};a.styles=[n],e([s({type:Boolean})],a.prototype,"opened",void 0),e([s({type:Boolean})],a.prototype,"disabled",void 0),e([d()],a.prototype,"_index",void 0),e([d()],a.prototype,"_showNumber",void 0),e([d()],a.prototype,"_filledHeader",void 0),e([d()],a.prototype,"_compact",void 0),a=e([o("kd-accordion-item")],a);export{a as AccordionItem};
//# sourceMappingURL=accordionItem.js.map
