@postnord/web-components/postnord-web-components/p-ef00ef4d.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{t,r as i,c as a,g as e,h as n,a as s}from"./p-XKg-ydzH.js";import{a as r}from"./p-CQaMdITw.js";import{a as p}from"./p-D_UyW-KH.js";import{awaitTopbar as o,en as h}from"./index.esm.js";const l={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"}},g=class{constructor(t){i(this,t),this.pageSelected=a(this,"pageSelected",7),this.rowsSelected=a(this,"rowsSelected",7)}listElement;get hostElement(){return e(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 t=[];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++)t.push({index:i,page:i+1});this.list=t,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(t){return l[t][this.language||h]}isActivePage(t){return t===this.page}navigate({page:t,event:i,focus:a}){"number"==typeof t&&t>=1&&this.pages>=t&&(this.page=t),this.pageSelected.emit({page:this.page,mouse:i}),a&&requestAnimationFrame((()=>{const t=this.listElement.querySelector('a[aria-current="page"]');t?.focus({preventScroll:!0})}))}useRowList(){return!!this.rows&&!!this.rowsList}setRows(t){this.rows=Number(t.target.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),a=t+Math.floor(this.pagesVisible/2);for(let t=0;this.pagesVisible>t;t++)i<0?(a++,i++):a>this.pages&&(a--,i--);const e=0>i?0:i,n=e>=1,s=this.pages>a;return{low:s&&n?e+1:e,high:s&&n?a-1:a,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=!1){const{leftIndent:i,rightIndent:a}=this.getPaginationIndex();return t?a:i}renderDivider(t=!1){return n("span",{class:"pn-pagination-dot","data-show":this.showIntendation(t)},"...")}renderButton({page:t,dataAttr:i}){const a=this.isActivePage(t);return n("pn-button",{label:t.toString(),arialabel:`${this.translate("PAGE")} ${t}`,ariacurrent:a?"page":null,href:this.getUrl(t),variant:a?"outlined":"",appearance:"light",small:!0,"data-arrow":i,"data-show":i&&this.showIntendation("last"===i),onPnClick:({detail:i})=>this.navigate({page:t,event:i,focus:!0})})}renderItem({page:t}){return n("li",{class:"pn-pagination-list-item","aria-setsize":this.pages,"aria-posinset":t},this.renderButton({page:t}))}renderJumpButton(t=!1){const i=t?"next":"prev",a=t?p:r,e=t?this.getNextPage():this.getPrevPage(),s=t?this.pages===this.page:1===this.page,o=s?"":` (${e})`,h=`${this.translate(t?"NEXT_PAGE":"PREVIOUS_PAGE")}${o}`;return n("pn-button",{arialabel:h,ariacurrent:s?"page":null,href:this.getUrl(e),rel:s?null:i,appearance:"light",small:!0,icon:a,iconOnly:!0,onPnClick:({detail:t})=>this.navigate({page:e,event:t})})}render(){return n(s,{key:"a975a04388ce0495aef863236d3fd2f936380fed"},n("nav",{key:"920aeb21c535b7f09bc54924865d3b5be2a65652",id:this.paginationId,class:"pn-pagination","aria-label":this.label||this.translate("PAGINATION")},this.useRowList()&&n("pn-select",{key:"880de99ef3a2a1400ff08f420c8c81017846e1fa",class:"pn-pagination-rows",label:this.rowsLabel||this.translate("ROWS_PAGE"),onChange:t=>this.setRows(t)},this.getRowList().map((t=>n("option",{value:t,selected:this.rows===Number(t),innerHTML:`${t}`})))),n("div",{key:"d11a69a8d7f5efcaae031214f2abf417d8922207",class:"pn-pagination-container","data-right":this.useRowList()},this.renderJumpButton(),this.renderButton({page:1,dataAttr:"first"}),this.renderDivider(),n("ol",{key:"2a5777aecd5210105ea26ed8c8cb9d99d1f1efc8",class:"pn-pagination-list",ref:t=>this.listElement=t},this.getPagination().map((t=>this.renderItem(t)))),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}]}}};g.style=`${t("pn-pagination")}{display:block;margin-top:1.5em}${t("pn-pagination")} .pn-pagination{display:flex;gap:1em;flex-wrap:wrap;padding-top:1em;border-top:0.0625em solid #e9e6e5}${t("pn-pagination")} .pn-pagination-container{display:flex;align-items:center;flex-wrap:wrap;gap:0.5em;margin:0 auto}${t("pn-pagination")} .pn-pagination-container[data-right]{margin-right:0}${t("pn-pagination")} .pn-pagination-container>[data-arrow]{display:none}${t("pn-pagination")} .pn-pagination-container>[data-arrow][data-show]{display:inline-block}${t("pn-pagination")} .pn-pagination-rows{flex:0 0 auto;margin-right:auto}${t("pn-pagination")} .pn-pagination-pages{flex:0 0 auto;margin-left:auto}${t("pn-pagination")} .pn-pagination-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0.5em}${t("pn-pagination")} .pn-pagination-list ${t("pn-button")}>.pn-button{padding:0.375em 0.75em}${t("pn-pagination")} .pn-pagination-dot{display:none;padding:0.375em 0.5em;height:2em;width:2.5em;text-align:center}${t("pn-pagination")} .pn-pagination-dot[data-show]{display:inline-block}`;export{g as pn_pagination}