import{__decorate as i}from"tslib";import{html as e}from"lit";import{property as t,state as n,query as s,customElement as r}from"lit/decorators.js";import{s as a}from"./nile-pagination.css.esm.js";import{N as l}from"../internal/nile-element.esm.js";import{c as o,g as h,a as d,b as c}from"./nile-pagination-utils.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 p=class extends l{constructor(){super(...arguments),this.totalItems=0,this.currentPage=1,this.pageSize=50,this.pageSizeOptions=[10,25,50,100],this.variant="fluid",this.disabled=!1,this.showTitle=!0,this._pageSizeOpen=!1,this._pageOpen=!1,this._miniPageOpen=!1}static get styles(){return[a]}firstUpdated(){this._pageSizeDropdown&&(this._pageSizeDropdown.addEventListener("nile-show",(()=>{this._pageSizeOpen=!0})),this._pageSizeDropdown.addEventListener("nile-after-hide",(()=>{this._pageSizeOpen=!1})))}get totalPages(){return Math.max(1,o(this.totalItems,this.pageSize))}goToPage(i){if(this.disabled)return;const e=this.currentPage;this.currentPage=i,this.emit("nile-change",{page:i,previousPage:e,pageSize:this.pageSize})}onPageSizeSelect(i){if(this.disabled||this.pageSize===i)return;const e=this.currentPage;this.pageSize=i,this.currentPage=1,this.emit("nile-change",{page:1,previousPage:e,pageSize:i})}renderCompactRangeText(){const i=h(this.totalItems,this.pageSize,this.currentPage).replace(/^Showing\s*/,"");return e`<div class="range-text">${i}</div>`}renderRangeText(){return 0===this.totalItems?e`<div class="range-text">Showing 0 of 0</div>`:e`
      <div part="range-text" class="range-text">
        ${h(this.totalItems,this.pageSize,this.currentPage)}
      </div>
    `}renderPageSizeSelect(){return"fluid"!==this.variant?null:e`
      <div class="page-size-select">
        <nile-dropdown class="page-size-dropdown" ?disabled=${this.disabled}>
          <nile-button
            slot="trigger"
            variant="tertiary"
            class="down ${this._pageSizeOpen?"open":""}"
            ?disabled=${this.disabled}
          >
            ${this.pageSize}
            <nile-icon
                 name="var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))"
              size="14"
              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
              class="chevron"
            ></nile-icon>
          </nile-button>
          <nile-menu>
            <div class="down-scroll-wrapper">
              ${this.pageSizeOptions.map((i=>e`
                  <nile-menu-item
                    ?disabled=${this.disabled}
                    @click=${()=>this.onPageSizeSelect(i)}
                  >
                    ${i}
                  </nile-menu-item>
                `))}
            </div>
          </nile-menu>
        </nile-dropdown>
        <span part="pagesize-label" class="page-size-label">Items per page</span>
      </div>
    `}renderCompactPageSize(){return e`
      <nile-dropdown
        class="compact-dropdown"
        ?disabled=${this.disabled}
        @nile-show=${()=>this._pageSizeOpen=!0}
        @nile-after-hide=${()=>this._pageSizeOpen=!1}
      >
        <nile-button
          slot="trigger"
          variant="tertiary"
          class="down ${this._pageSizeOpen?"open":""}"
          ?disabled=${this.disabled}
        >
          ${this.pageSize}
          <nile-icon
               name="var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))"
            size="14"
            method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
            class="chevron"
          ></nile-icon>
        </nile-button>
        <nile-menu>
          <div class="compact-scroll-wrapper">
            ${this.pageSizeOptions.map((i=>e`
                <nile-menu-item
                  ?disabled=${this.disabled}
                  @click=${()=>this.onPageSizeSelect(i)}
                >
                  ${i}
                </nile-menu-item>
              `))}
          </div>
        </nile-menu>
      </nile-dropdown>
    `}renderPrevButton(){return e`
      <li>
        <nile-button
          variant="tertiary"
          ?disabled=${1===this.currentPage||this.disabled}
          @click=${()=>this.goToPage(this.currentPage-1)}
          class="prev-button"
        >
          <nile-icon name="var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="14"></nile-icon>
        </nile-button>
      </li>
    `}renderNextButton(){return e`
      <li>
        <nile-button
          variant="tertiary"
          ?disabled=${this.currentPage===this.totalPages||this.disabled}
          @click=${()=>this.goToPage(this.currentPage+1)}
          class="next-button"
        >
          <nile-icon name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="14"></nile-icon>
        </nile-button>
      </li>
    `}renderPageItem(i,t,n){return"…"===i?e`
        <li>
          <nile-dropdown class="ellipsis-dropdown" ?disabled=${this.disabled}>
            <nile-button slot="trigger" variant="ghost" ?disabled=${this.disabled}>
              …
            </nile-button>
            <nile-menu>
              <div class="ellipsis-scroll-wrapper">
                ${d(this.totalPages,n,this.currentPage,t<n.indexOf(this.currentPage)?"left":"right").map((i=>e`
                    <nile-menu-item
                      ?disabled=${this.disabled}
                      @click=${()=>this.goToPage(i)}
                    >
                      ${i}
                    </nile-menu-item>
                  `))}
              </div>
            </nile-menu>
          </nile-dropdown>
        </li>
      `:e`
      <li>
        <nile-button
          variant=${i===this.currentPage?"primary":"ghost"}
          ?disabled=${this.disabled}
          @click=${()=>this.goToPage(i)}
        >
          ${i}
        </nile-button>
      </li>
    `}renderMiniPrevButton(){return e`
      <li>
        <nile-button
          variant="tertiary"
          ?disabled=${1===this.currentPage||this.disabled}
          @click=${()=>this.goToPage(this.currentPage-1)}
          class="mini-prev-button"
        >
          <nile-icon name="var(--nile-icon-arrow-left, var(--ng-icon-chevron-left))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="12"></nile-icon>
        </nile-button>
      </li>
    `}renderMiniNextButton(){return e`
      <li>
        <nile-button
          variant="tertiary"
          ?disabled=${this.currentPage===this.totalPages||this.disabled}
          @click=${()=>this.goToPage(this.currentPage+1)}
          class="mini-next-button"
        >
          <nile-icon name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" size="12"></nile-icon>
        </nile-button>
      </li>
    `}renderMini(){return e`
      <div part="wrapper" class="pagination-wrapper mini">
        <span part="mini-showing-label" class="mini-showing-label">Showing</span>
        <nile-dropdown
          part="mini-page-dropdown"
          class="mini-page-dropdown"
          ?disabled=${this.disabled}
          @nile-show=${()=>this._miniPageOpen=!0}
          @nile-after-hide=${()=>this._miniPageOpen=!1}
        >
          <nile-button
            slot="trigger"
            variant="tertiary"
            class="mini-page-btn ${this._miniPageOpen?"open":""}"
            ?disabled=${this.disabled}
          >
            ${this.currentPage}
            <nile-icon
              name="var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))"
              size="12"
              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
              class="chevron"
            ></nile-icon>
          </nile-button>
          <nile-menu>
            <div class="mini-scroll-wrapper">
              ${Array.from({length:this.totalPages},((i,e)=>e+1)).map((i=>e`
                  <nile-menu-item
                    ?disabled=${this.disabled}
                    @click=${()=>this.goToPage(i)}
                  >
                    ${i}
                  </nile-menu-item>
                `))}
            </div>
          </nile-menu>
        </nile-dropdown>
        <span part="mini-of-label" class="mini-of-label">of ${this.totalPages}</span>
        <nav aria-label="Pagination" part="mini-nav" class="mini-nav">
          <ul part="mini-page-list" class="pagination mini-pagination">
            ${this.renderMiniPrevButton()}
            ${this.renderMiniNextButton()}
          </ul>
        </nav>
      </div>
    `}renderPageList(){if("compact"===this.variant)return e`
        <nav aria-label="Pagination">
          <ul class="pagination compact-pagination">
            ${this.renderPrevButton()}
            <li>
              <nile-dropdown
                class="compact-dropdown1"
                ?disabled=${this.disabled}
                @nile-show=${()=>this._pageOpen=!0}
                @nile-after-hide=${()=>this._pageOpen=!1}
              >
                <nile-button
                  slot="trigger"
                  variant="tertiary"
                  class="current-page-btn ${this._pageOpen?"open":""}"
                  ?disabled=${this.disabled}
                >
                  ${this.currentPage}
                  <nile-icon
                    name="var(--nile-icon-chevron-down, var(--ng-icon-chevron-down))"
                    size="14"
                    method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
                    class="chevron"
                  ></nile-icon>
                </nile-button>
                <nile-menu>
                  <div class="compact-scroll-wrapper1">
                    ${Array.from({length:this.totalPages},((i,e)=>e+1)).map((i=>e`
                        <nile-menu-item
                          ?disabled=${this.disabled}
                          @click=${()=>this.goToPage(i)}
                        >
                          ${i}
                        </nile-menu-item>
                      `))}
                  </div>
                </nile-menu>
              </nile-dropdown>
            </li>
            ${this.renderNextButton()}
          </ul>
        </nav>
      `;const i=c(this.totalPages,this.currentPage);return e`
      <nav aria-label="Pagination">
        <ul part="page-list" class="pagination">
          ${this.renderPrevButton()}
          ${i.map(((e,t)=>this.renderPageItem(e,t,i)))}
          ${this.renderNextButton()}
        </ul>
      </nav>
    `}render(){return"mini"===this.variant?this.renderMini():e`
    <div part="wrapper" class="pagination-wrapper ${this.variant}">
      <div part="pager-container" class="pager-container">
        ${"fluid"===this.variant&&this.showTitle?this.renderRangeText():"compact"===this.variant?this.renderCompactRangeText():null}
        ${"fluid"===this.variant?this.renderPageSizeSelect():this.renderCompactPageSize()}
      </div>
      ${this.renderPageList()}
    </div>
  `}};i([t({attribute:"totalitems",reflect:!0,converter:{fromAttribute:i=>{const e=Number(i);return Number.isFinite(e)&&e>=0?Math.floor(e):0}}})],p.prototype,"totalItems",void 0),i([t({attribute:"currentpage",reflect:!0,converter:{fromAttribute:i=>{const e=Number(i);return Number.isFinite(e)&&e>=1?Math.floor(e):1}}})],p.prototype,"currentPage",void 0),i([t({attribute:"pagesize",reflect:!0,converter:{fromAttribute:i=>{const e=Number(i);return Number.isFinite(e)&&e>=1?Math.floor(e):50}}})],p.prototype,"pageSize",void 0),i([t({attribute:"pagesizeoptions",reflect:!1,converter:{fromAttribute:i=>{try{const e=JSON.parse(i);if(Array.isArray(e)&&e.every((i=>"number"==typeof i)))return e}catch{}return[10,25,50,100]}}})],p.prototype,"pageSizeOptions",void 0),i([t({type:String})],p.prototype,"variant",void 0),i([t({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),i([t({type:Boolean})],p.prototype,"showTitle",void 0),i([n()],p.prototype,"_pageSizeOpen",void 0),i([n()],p.prototype,"_pageOpen",void 0),i([n()],p.prototype,"_miniPageOpen",void 0),i([s(".page-size-dropdown")],p.prototype,"_pageSizeDropdown",void 0),p=i([r("nile-pagination")],p);export{p as N};
