import{__decorate as e}from"tslib";import{html as i}from"lit";import{property as t,state as s,customElement as r}from"lit/decorators.js";import{s as n}from"./nile-table-header-item.css.esm.js";import{N as l}from"../internal/nile-element.esm.js";import{H as o}from"../internal/slot.esm.js";import{c as a,r as c}from"../internal/resizable-table-helper.esm.js";import"../internal/resizable-table-styles.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 h=class extends l{constructor(){super(...arguments),this.hasSlotController=new o(this,"[default]"),this.havesort=!1,this.havefilter=!1,this.iconName="",this.resizable=!1,this.sorting_ct=0,this.handleResizeStart=a(this,50)}static get styles(){return[n]}updated(e){if(super.updated(e),e.has("resizable")&&!this.resizable){const e=this.closest("nile-table-body");e&&c(e)}}handleSort(e){this.sorting_ct++;let i=this.hasSlotController.host.innerHTML;this.emit("nile-click-sort",{value:{curr_sort_string:i,order:["normal","asc","des"][this.sorting_ct%3]}})}handleSearch(e){this.emit("nile-search",{value:e.detail.value})}render(){return i`
      <div class="header__item__wrapper" part="nile__table-header-cell">
        <div class="headers">
          <slot> </slot>
          ${this.havesort&&this.sorting_ct%3==0?i`<nile-icon
                name="var(--nile-icon-sort, var(--ng-icon-chevron-selector-vertical))"
                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                size="var(--nile-icon-size-16, var(--ng-icon-size-12))"
                @click=${this.handleSort}
                class="hover__arrow"
              ></nile-icon>`:null}
          ${this.havesort&&this.sorting_ct%3==1?i`<nile-icon
                name="var(--nile-icon-sort-down, var(--ng-icon-arrow-down))"
                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                size="var(--nile-icon-size-16, var(--ng-icon-size-12))"
                class="stroke-width"
                @click=${this.handleSort}
              ></nile-icon>`:null}
          ${this.havesort&&this.sorting_ct%3==2?i`<nile-icon
                name="var(--nile-icon-sort-up, var(--ng-icon-arrow-up))"
                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                size="var(--nile-icon-size-16, var(--ng-icon-size-12))"
                class="stroke-width"
                @click=${this.handleSort}
              ></nile-icon>`:null}
          ${this.iconName?i` <nile-icon name="${this.iconName}" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="16"></nile-icon>`:i``}
          ${this.havefilter?i` <nile-popover title="Filter" placement="bottom">
                <nile-icon name="var(--nile-icon-filter, var(--ng-icon-filter-lines))" size="16" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" slot="anchor"></nile-icon>
                <nile-input
                  placeholder="Search"
                  @nile-input=${this.handleSearch}
                  part="filter__search"
                ></nile-input>
                <slot name="filter__content" part="filter__content"></slot>
              </nile-popover>`:i``}
        </div>
        ${this.resizable?i`<div class="resizer" @mousedown=${this.handleResizeStart}></div>`:null}
      </div>`}};e([t({type:Boolean,reflect:!0})],h.prototype,"havesort",void 0),e([t({type:Boolean,reflect:!0})],h.prototype,"havefilter",void 0),e([t({type:String,reflect:!0,attribute:"icon-name"})],h.prototype,"iconName",void 0),e([t({type:Boolean,reflect:!0})],h.prototype,"resizable",void 0),e([s()],h.prototype,"sorting_ct",void 0),h=e([r("nile-table-header-item")],h);export{h as N};
