@postnord/web-components
Version:
PostNord Web Components
6 lines • 6.35 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import{r as t,c as i,g as e,h as a,a as n}from"./p-43660913.js";import{a as s}from"./p-2e6481e5.js";import{a as r}from"./p-d82ef4a1.js";import{j as o,e as p}from"./p-c511b4fb.js";const h={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"}};const l="pn-pagination{display:block;margin-top:1.5em}pn-pagination .pn-pagination{display:flex;gap:1em;flex-wrap:wrap;padding-top:1em;border-top:0.0625em solid #e9e6e5}pn-pagination .pn-pagination-container{display:flex;align-items:center;flex-wrap:wrap;gap:0.5em;margin:0 auto}pn-pagination .pn-pagination-container[data-right]{margin-right:0}pn-pagination .pn-pagination-container>[data-arrow]{display:none}pn-pagination .pn-pagination-container>[data-arrow][data-show]{display:inline-block}pn-pagination .pn-pagination-rows{flex:0 0 auto;margin-right:auto}pn-pagination .pn-pagination-pages{flex:0 0 auto;margin-left:auto}pn-pagination .pn-pagination-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0.5em}pn-pagination .pn-pagination-list pn-button>.pn-button{padding:0.375em 0.75em}pn-pagination .pn-pagination-dot{display:none;padding:0.375em 0.5em;height:2em;width:2.5em;text-align:center}pn-pagination .pn-pagination-dot[data-show]{display:inline-block}";const g=l;const d=class{constructor(e){t(this,e);this.pageSelected=i(this,"pageSelected",7);this.rowsSelected=i(this,"rowsSelected",7);this.list=undefined;this.label=undefined;this.urlTemplate="?page={page}";this.paginationId=null;this.language=null;this.page=1;this.pages=undefined;this.pagesVisible=5;this.rows=null;this.rowsList="10,25,50";this.rowsLabel=null}listElement;get hostElement(){return e(this)}handlePage(){if(this.page>this.pages)this.page=this.pages;else if(this.page<1)this.page=1}handlePages(){const t=[];if(this.pages>1e4){console.error(`${this.hostElement.localName}: Invalid page count ${this.pages}. Maximum is 10000.`);this.pages=1e4}for(let i=0;this.pages>i;i++){const e=i+1;t.push({index:i,page:e})}this.list=t;this.handlePage()}handlePagesVisible(){if(5>this.pagesVisible)this.pagesVisible=5;if(this.pagesVisible%2===0)this.pagesVisible=Math.round(this.pagesVisible)-1}pageSelected;rowsSelected;async componentWillLoad(){this.handlePagesVisible();this.handlePages();if(this.language===null)await o(this.hostElement)}translate(t){return h[t][this.language||p]}isActivePage(t){return t===this.page}navigate({page:t,event:i,focus:e}){if(typeof t==="number"&&t>=1&&this.pages>=t)this.page=t;this.pageSelected.emit({page:this.page,mouse:i});if(e)requestAnimationFrame((()=>{const t=this.listElement.querySelector('a[aria-current="page"]');t?.focus({preventScroll:true})}))}useRowList(){return!!this.rows&&!!this.rowsList}setRows(t){const i=t.target;this.rows=Number(i.value);this.rowsSelected.emit({rows:this.rows,change:t})}getRowList(){return this.rowsList.split(",").map((t=>Number(t.trim())))}getPaginationIndex(){const t=this.page;let i=t-Math.ceil(this.pagesVisible/2);let e=t+Math.floor(this.pagesVisible/2);for(let t=0;this.pagesVisible>t;t++){if(i<0){e++;i++}else if(e>this.pages){e--;i--}}const a=0>i?0:i;const n=a>=1;const s=this.pages>e;return{low:s&&n?a+1:a,high:s&&n?e-1:e,leftIndent:n,rightIndent:s}}getPagination(){const{low:t,high:i}=this.getPaginationIndex();return this.list.slice(t,i)}getUrl(t){return this.setPageText(this.urlTemplate,t)}setPageText(t,i){return t.replace("{page}",i.toString())}getPrevPage(){let t=this.page;return t>1?t-=1:1}getNextPage(){let t=this.page;return this.pages>t?t+=1:this.pages}showIntendation(t=false){const{leftIndent:i,rightIndent:e}=this.getPaginationIndex();return t?e:i}renderDivider(t=false){return a("span",{class:"pn-pagination-dot","data-show":this.showIntendation(t)},"...")}renderButton({page:t,dataAttr:i}){const e=this.isActivePage(t);return a("pn-button",{label:t.toString(),arialabel:`${this.translate("PAGE")} ${t}`,ariacurrent:e?"page":null,href:this.getUrl(t),variant:e?"outlined":"",appearance:"light",small:true,"data-arrow":i,"data-show":i&&this.showIntendation(i==="last"),onPnClick:({detail:i})=>this.navigate({page:t,event:i,focus:true})})}renderItem({page:t}){return a("li",{class:"pn-pagination-list-item","aria-setsize":this.pages,"aria-posinset":t},this.renderButton({page:t}))}renderJumpButton(t=false){const i=t?"next":"prev";const e=t?r:s;const n=t?this.getNextPage():this.getPrevPage();const o=t?this.pages===this.page:1===this.page;const p=t?"NEXT_PAGE":"PREVIOUS_PAGE";const h=o?"":` (${n})`;const l=`${this.translate(p)}${h}`;return a("pn-button",{arialabel:l,ariacurrent:o?"page":null,href:this.getUrl(n),rel:o?null:i,appearance:"light",small:true,icon:e,iconOnly:true,onPnClick:({detail:t})=>this.navigate({page:n,event:t})})}render(){return a(n,{key:"8ef71bfb27f4e5e09ec869ca2f4984a213a49665"},a("nav",{key:"0b970ff49f4d0c340eebc900c4a69700c9948c3e",id:this.paginationId,class:"pn-pagination","aria-label":this.label||this.translate("PAGINATION")},this.useRowList()&&a("pn-select",{key:"21112276ee5128107dddc4296f1b46f0aa40ef0a",class:"pn-pagination-rows",label:this.rowsLabel||this.translate("ROWS_PAGE"),onChange:t=>this.setRows(t)},this.getRowList().map((t=>a("option",{value:t,selected:this.rows===Number(t),innerHTML:`${t}`})))),a("div",{key:"69eca7ba22dadc8b370384af2084e6caeeef6ef5",class:"pn-pagination-container","data-right":this.useRowList()},this.renderJumpButton(),this.renderButton({page:1,dataAttr:"first"}),this.renderDivider(),a("ol",{key:"1d4587a57f2b2914105a33f97cde5ebae0ef41dd",class:"pn-pagination-list",ref:t=>this.listElement=t},this.getPagination().map((t=>this.renderItem(t)))),this.renderDivider(true),this.renderButton({page:this.pages,dataAttr:"last"}),this.renderJumpButton(true))))}static get watchers(){return{page:["handlePage"],pages:["handlePages"],pagesVisible:["handlePagesVisible"]}}};d.style=g;export{d as pn_pagination};
//# sourceMappingURL=p-1dda5a08.entry.js.map