@postnord/web-components/components/pn-pagination.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{transformTag as e,proxyCustomElement as t,HTMLElement as i,createEvent as a,h as n,Host as s}from"@stencil/core/internal/client";import{a as r}from"./arrow_left.js";import{a as p}from"./arrow_right.js";import{k as o,e as l}from"./helpers.js";import{d as g}from"./pn-button2.js";import{d as h}from"./pn-icon2.js";import{d}from"./pn-select2.js";import{d as c}from"./pn-spinner2.js";const u={PAGINATION:{sv:"Paginering",en:"Pagination",da:"Paginering",fi:"Sivunumerointi",no:"Paginering"},PAGE:{sv:"Sida",en:"Page",da:"Side",fi:"Sivu",no:"Side"},PREVIOUS_PAGE:{sv:"Föregående sida",en:"Previous page",da:"Forrige side",fi:"Edellinen sivu",no:"Forrige side"},NEXT_PAGE:{sv:"Nästa sida",en:"Next page",da:"Næste side",fi:"Seuraava sivu",no:"Neste side"},ROWS_PAGE:{sv:"Object per sida",en:"Items per page",da:"Varer pr. side",fi:"Kohteita per sivu",no:"Elementer per side"}},m=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.pageSelected=a(this,"pageSelected",7),this.rowsSelected=a(this,"rowsSelected",7)}listElement;get hostElement(){return this}list;label;urlTemplate="?page={page}";paginationId=null;language=null;page=1;pages;pagesVisible=5;rows=null;rowsList="10,25,50";rowsLabel=null;handlePage(){this.page>this.pages?this.page=this.pages:this.page<1&&(this.page=1)}handlePages(){const e=[];this.pages>1e4&&(console.error(`${this.hostElement.localName}: Invalid page count ${this.pages}. Maximum is 10000.`),this.pages=1e4);for(let t=0;this.pages>t;t++)e.push({index:t,page:t+1});this.list=e,this.handlePage()}handlePagesVisible(){5>this.pagesVisible&&(this.pagesVisible=5),this.pagesVisible%2==0&&(this.pagesVisible=Math.round(this.pagesVisible)-1)}pageSelected;rowsSelected;async componentWillLoad(){this.handlePagesVisible(),this.handlePages(),null===this.language&&await o(this.hostElement)}translate(e){return u[e][this.language||l]}isActivePage(e){return e===this.page}navigate({page:e,event:t,focus:i}){"number"==typeof e&&e>=1&&this.pages>=e&&(this.page=e),this.pageSelected.emit({page:this.page,mouse:t}),i&&requestAnimationFrame((()=>{const e=this.listElement.querySelector('a[aria-current="page"]');e?.focus({preventScroll:!0})}))}useRowList(){return!!this.rows&&!!this.rowsList}setRows(e){this.rows=Number(e.target.value),this.rowsSelected.emit({rows:this.rows,change:e})}getRowList(){return this.rowsList.split(",").map((e=>Number(e.trim())))}getPaginationIndex(){const e=this.page;let t=e-Math.ceil(this.pagesVisible/2),i=e+Math.floor(this.pagesVisible/2);for(let e=0;this.pagesVisible>e;e++)t<0?(i++,t++):i>this.pages&&(i--,t--);const a=0>t?0:t,n=a>=1,s=this.pages>i;return{low:s&&n?a+1:a,high:s&&n?i-1:i,leftIndent:n,rightIndent:s}}getPagination(){const{low:e,high:t}=this.getPaginationIndex();return this.list.slice(e,t)}getUrl(e){return this.setPageText(this.urlTemplate,e)}setPageText(e,t){return e.replace("{page}",""+t)}getPrevPage(){let e=this.page;return e>1?e-=1:1}getNextPage(){let e=this.page;return this.pages>e?e+=1:this.pages}showIntendation(e=!1){const{leftIndent:t,rightIndent:i}=this.getPaginationIndex();return e?i:t}renderDivider(e=!1){return n("span",{class:"pn-pagination-dot","data-show":this.showIntendation(e)},"...")}renderButton({page:e,dataAttr:t}){const i=this.isActivePage(e);return n("pn-button",{label:""+e,arialabel:`${this.translate("PAGE")} ${e}`,ariacurrent:i?"page":null,href:this.getUrl(e),variant:i?"outlined":"",appearance:"light",small:!0,"data-arrow":t,"data-show":t&&this.showIntendation("last"===t),onPnClick:({detail:t})=>this.navigate({page:e,event:t,focus:!0})})}renderItem({page:e}){return n("li",{class:"pn-pagination-list-item","aria-setsize":this.pages,"aria-posinset":e},this.renderButton({page:e}))}renderJumpButton(e=!1){const t=e?"next":"prev",i=e?p:r,a=e?this.getNextPage():this.getPrevPage(),s=e?this.pages===this.page:1===this.page,o=s?"":` (${a})`,l=`${this.translate(e?"NEXT_PAGE":"PREVIOUS_PAGE")}${o}`;return n("pn-button",{arialabel:l,ariacurrent:s?"page":null,href:this.getUrl(a),rel:s?null:t,appearance:"light",small:!0,icon:i,iconOnly:!0,onPnClick:({detail:e})=>this.navigate({page:a,event:e})})}render(){return n(s,{key:"4b78edcca36adfd17035e9bed30ae5af6918d6e8"},n("nav",{key:"600dd0a880e03b9b5e98de4ee2d55134a0a90b8e",id:this.paginationId,class:"pn-pagination","aria-label":this.label||this.translate("PAGINATION")},this.useRowList()&&n("pn-select",{key:"8cca49bb36c9b10fa05e7637acec36e28b25fb8e",class:"pn-pagination-rows",label:this.rowsLabel||this.translate("ROWS_PAGE"),onChange:e=>this.setRows(e)},this.getRowList().map((e=>n("option",{value:e,selected:this.rows===Number(e),innerHTML:""+e})))),n("div",{key:"d3fc1f233ab4d62c868a8a0a2076d7666d5dd53a",class:"pn-pagination-container","data-right":this.useRowList()},this.renderJumpButton(),this.renderButton({page:1,dataAttr:"first"}),this.renderDivider(),n("ol",{key:"17be56bca6cd83e7f7dc3174e2e92d91a05930dd",class:"pn-pagination-list",ref:e=>this.listElement=e},this.getPagination().map((e=>this.renderItem(e)))),this.renderDivider(!0),this.renderButton({page:this.pages,dataAttr:"last"}),this.renderJumpButton(!0))))}static get watchers(){return{page:[{handlePage:0}],pages:[{handlePages:0}],pagesVisible:[{handlePagesVisible:0}]}}static get style(){return`${e("pn-pagination")}{display:block;margin-top:1.5em}${e("pn-pagination")} .pn-pagination{display:flex;gap:1em;flex-wrap:wrap;padding-top:1em;border-top:0.0625em solid #e9e6e5}${e("pn-pagination")} .pn-pagination-container{display:flex;align-items:center;flex-wrap:wrap;gap:0.5em;margin:0 auto}${e("pn-pagination")} .pn-pagination-container[data-right]{margin-right:0}${e("pn-pagination")} .pn-pagination-container>[data-arrow]{display:none}${e("pn-pagination")} .pn-pagination-container>[data-arrow][data-show]{display:inline-block}${e("pn-pagination")} .pn-pagination-rows{flex:0 0 auto;margin-right:auto}${e("pn-pagination")} .pn-pagination-pages{flex:0 0 auto;margin-left:auto}${e("pn-pagination")} .pn-pagination-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0.5em}${e("pn-pagination")} .pn-pagination-list ${e("pn-button")}>.pn-button{padding:0.375em 0.75em}${e("pn-pagination")} .pn-pagination-dot{display:none;padding:0.375em 0.5em;height:2em;width:2.5em;text-align:center}${e("pn-pagination")} .pn-pagination-dot[data-show]{display:inline-block}`}},[512,"pn-pagination",{label:[1],urlTemplate:[1,"url-template"],paginationId:[1,"pagination-id"],language:[1],page:[1538],pages:[1026],pagesVisible:[1026,"pages-visible"],rows:[1026],rowsList:[1,"rows-list"],rowsLabel:[1,"rows-label"],list:[32]},void 0,{page:[{handlePage:0}],pages:[{handlePages:0}],pagesVisible:[{handlePagesVisible:0}]}]),b=m,f=function(){"undefined"!=typeof customElements&&["pn-pagination","pn-button","pn-icon","pn-select","pn-spinner"].forEach((t=>{switch(t){case"pn-pagination":customElements.get(e(e(t)))||customElements.define(e(e(t)),m);break;case"pn-button":customElements.get(e(e(t)))||g();break;case"pn-icon":customElements.get(e(e(t)))||h();break;case"pn-select":customElements.get(e(e(t)))||d();break;case"pn-spinner":customElements.get(e(e(t)))||c()}}))};export{b as PnPagination,f as defineCustomElement}