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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import{t,r as e,c as i,g as a,h as n,a as s}from"./p-CAEP792y.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){e(this,t),this.pageSelected=i(this,"pageSelected"),this.rowsSelected=i(this,"rowsSelected")}listElement;get hostElement(){return a(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 e=0;this.pages>e;e++)t.push({index:e,page:e+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:e,focus:i}){"number"==typeof t&&t>=1&&this.pages>=t&&(this.page=t),this.pageSelected.emit({page:this.page,mouse:e}),i&&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 e=t-Math.ceil(this.pagesVisible/2),i=t+Math.floor(this.pagesVisible/2);for(let t=0;this.pagesVisible>t;t++)e<0?(i++,e++):i>this.pages&&(i--,e--);const a=0>e?0:e,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:t,high:e}=this.getPaginationIndex();return this.list.slice(t,e)}getUrl(t){return this.setPageText(this.urlTemplate,t)}setPageText(t,e){return t.replace("{page}",e.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:e,rightIndent:i}=this.getPaginationIndex();return t?i:e}renderDivider(t=!1){return n("span",{class:"pn-pagination-dot","data-show":this.showIntendation(t)},"...")}renderButton({page:t,dataAttr:e}){const i=this.isActivePage(t);return n("pn-button",{label:t.toString(),arialabel:`${this.translate("PAGE")} ${t}`,ariacurrent:i?"page":null,href:this.getUrl(t),variant:i?"outlined":"",appearance:"light",small:!0,"data-arrow":e,"data-show":e&&this.showIntendation("last"===e),onPnClick:({detail:e})=>this.navigate({page:t,event:e,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 e=t?"next":"prev",i=t?p:r,a=t?this.getNextPage():this.getPrevPage(),s=t?this.pages===this.page:1===this.page,o=s?"":` (${a})`,h=`${this.translate(t?"NEXT_PAGE":"PREVIOUS_PAGE")}${o}`;return n("pn-button",{arialabel:h,ariacurrent:s?"page":null,href:this.getUrl(a),rel:s?null:e,appearance:"light",small:!0,icon:i,iconOnly:!0,onPnClick:({detail:t})=>this.navigate({page:a,event:t})})}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:t=>this.setRows(t)},this.getRowList().map((t=>n("option",{value:t,selected:this.rows===Number(t),innerHTML:`${t}`})))),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: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}