@trendyol/baklava/dist/chunk-2HHDYA7P.js

Trendyol Baklava Design System

import{a as h}from"./chunk-GRL4DWKG.js";import{a as c,b as i,c as g}from"./chunk-IRDH7CN2.js";import{a as o}from"./chunk-DINNT5P2.js";import{a as u,b as s,f as p}from"./chunk-4OT5AMS5.js";import{c as r}from"./chunk-VO7C5OZC.js";var b=u`.pagination{display:flex;flex-wrap:wrap;justify-content:center;max-width:max-content;gap:var(--bl-size-s)}.pagination *{margin:0;padding:0;box-sizing:border-box}.page-container{display:flex;align-items:center}.page-list{display:flex;align-items:center;list-style:none;user-select:none;gap:var(--bl-size-3xs)}.dots{margin:0 var(--bl-size-2xs)}.dots::before{content:" \\B7 \\B7 \\B7";color:var(--bl-color-neutral-darker)}.pagination-helpers{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--bl-size-m);color:var(--bl-color-neutral-darker)}.jumper,.select{display:flex;align-items:center;gap:var(--bl-size-2xs)}label{font:var(--bl-font-title-3-medium);font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-m);letter-spacing:0;user-select:none}bl-input{width:62px}bl-select{width:auto}@media only screen and (max-width: 768px){label{display:none}}`,m=b;var t=class extends p{constructor(){super(...arguments);this.currentPage=1;this.totalItems=0;this.itemsPerPage=10;this.hasJumper=!1;this.jumperLabel="Go To";this.hasSelect=!1;this.selectLabel="Show";this.itemsPerPageOptions=[{text:"10 Items",value:10},{text:"25 Items",value:25},{text:"50 Items",value:50},{text:"100 Items",value:100}];this.pages=[]}static get styles(){return[m]}connectedCallback(){super.connectedCallback(),setTimeout(()=>{window==null||window.addEventListener("resize",()=>this._paginate())})}disconnectedCallback(){super.disconnectedCallback(),window==null||window.removeEventListener("resize",this._paginate)}updated(e){(e.has("currentPage")||e.has("itemsPerPage")||e.has("totalItems"))&&this._paginate()}_paginate(){this.pages=[];let e=Math.ceil(Math.abs(this.totalItems/this.itemsPerPage))||1;if(e<=8){this.pages=Array.from(Array(e),(a,l)=>l+1);return}this.pages.push(1),this.currentPage<5?this.pages.push(2,3,4,5,"..."):this.currentPage>=5&&this.currentPage<=e-4?this.pages.push("...",this.currentPage-1,this.currentPage,this.currentPage+1,"..."):this.pages.push("...",e-4,e-3,e-2,e-1),this.pages.push(e)}_changePage(e){let a=this.currentPage;this.currentPage=e,this.onChange({selectedPage:e,prevPage:a,itemsPerPage:this.itemsPerPage})}_pageBack(){this.currentPage!==1&&this._changePage(this.currentPage-1)}_pageForward(){this.currentPage!==this._getLastPage()&&this._changePage(this.currentPage+1)}_getLastPage(){return+this.pages[this.pages.length-1]}_inputHandler(e){e.stopPropagation();let a=+e.target.value,l=a>0?Math.min(this._getLastPage(),a):1;this._changePage(l)}_selectHandler(e){var a;this.itemsPerPage=+((a=e==null?void 0:e.detail[0])==null?void 0:a.value)||100,this._changePage(1)}_renderSinglePage(e){if(typeof e=="string")return s`<li class="dots"></li>`;let a=this.currentPage===e?"page":void 0;return s` <li>
      <bl-button
        @click="${()=>this._changePage(e)}"
        variant=${this.currentPage===e?"primary":"tertiary"}
        kind="neutral"
        label="Page ${e}"
        aria-current=${o(a)}
      >
        ${e}
      </bl-button>
    </li>`}renderPages(){return s`
      <div class="page-container">
        <bl-button
          @click="${this._pageBack}"
          variant="tertiary"
          kind="neutral"
          icon="arrow_left"
          class="previous"
          label="Previous"
          ?disabled=${this.currentPage===1}
        ></bl-button>
        <ul class="page-list">
          ${window.innerWidth<768?s`${this._renderSinglePage(this.currentPage)}`:this.pages.map(e=>s`${this._renderSinglePage(e)}`)}
        </ul>
        <bl-button
          @click="${this._pageForward}"
          variant="tertiary"
          kind="neutral"
          icon="arrow_right"
          class="next"
          label="Next"
          ?disabled=${this.currentPage===this._getLastPage()}
        ></bl-button>
      </div>
    `}render(){let e=this.hasSelect?s`
          <div class="select">
            <label>${this.selectLabel}</label>
            <bl-select @bl-select="${this._selectHandler}" .value=${this.itemsPerPage} required>
              ${this.itemsPerPageOptions.map(n=>s`<bl-select-option .value=${n.value}
                  >${n.text}</bl-select-option
                >`)}
            </bl-select>
          </div>
        `:null,a=this.hasJumper?s` <div class="jumper">
          <label>${this.jumperLabel}</label>
          <bl-input .value="${this.currentPage}" @bl-change="${this._inputHandler}"></bl-input>
        </div>`:null;return s` <nav class="pagination" aria-label="Pagination">
      ${(()=>{if(!(!this.hasSelect&&!this.hasJumper))return s` <div class="pagination-helpers">${e} ${a}</div> `})()} ${this.renderPages()}
    </nav>`}};r([i({attribute:"current-page",type:Number,reflect:!0})],t.prototype,"currentPage",2),r([i({attribute:"total-items",type:Number})],t.prototype,"totalItems",2),r([i({attribute:"items-per-page",type:Number,reflect:!0})],t.prototype,"itemsPerPage",2),r([i({attribute:"has-jumper",type:Boolean})],t.prototype,"hasJumper",2),r([i({attribute:"jumper-label",type:String})],t.prototype,"jumperLabel",2),r([i({attribute:"has-select",type:Boolean})],t.prototype,"hasSelect",2),r([i({attribute:"select-label",type:String})],t.prototype,"selectLabel",2),r([i({type:Array,attribute:!1})],t.prototype,"itemsPerPageOptions",2),r([g()],t.prototype,"pages",2),r([h("bl-change")],t.prototype,"onChange",2),t=r([c("bl-pagination")],t);export{t as a};
//# sourceMappingURL=chunk-2HHDYA7P.js.map