UNPKG

@public-ui/components

Version:

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

5 lines 9.59 kB
/*! * KoliBri - The accessible HTML-Standard */ import{r as t,h as i,H as s,g as e}from"./index-BQlHOxik.js";import{N as o,U as a,b as n,H as l,p as h}from"./common-Cx_AGO_M.js";import{v as r}from"./custom-class-DlT-QmWF.js";import{v as _}from"./label-Fyi30H9j.js";import{v as u}from"./tooltip-align-mwhvx9nK.js";import{j as p,b as c}from"./component-names-Dy77vq43.js";import{t as g}from"./i18n-Br16IAnY.js";import{n as f}from"./dev.utils-02Sl9bQo.js";import{d as b,K as d}from"./events-VVvk1win.js";import{r as m,a as v}from"./unique-nav-labels-ZepmMUSu.js";import"./align-DxZmRFcp.js";import"./i18n-B2d_exHc.js";const k=(t,i,s)=>{o(t,"_max",i,s)};const y={left:"kolicon-chevron-double-left"};const C={left:"kolicon-chevron-left"};const S={right:"kolicon-chevron-right"};const z={right:"kolicon-chevron-double-right"};function x(){const t=navigator.language||"de-DE";const i=t.includes("-")?t:`${t}-${t.toUpperCase()}`;return i}const j=x();const B=new Intl.NumberFormat(j,{style:"decimal",minimumFractionDigits:0,maximumFractionDigits:0});const O=class{constructor(i){t(this,i);this.translatePageFirst=g("kol-page-first");this.translatePageBack=g("kol-page-back");this.translatePageNext=g("kol-page-next");this.translatePageLast=g("kol-page-last");this.translateEntriesPerSite=g("kol-entries-per-site");this.translatePage=g("kol-page");this.translatePagination=g("kol-pagination");this.calcCount=(t,i=1)=>Math.ceil(t/i);this.getCount=()=>this.calcCount(this.state._max,this.state._pageSize);this._boundaryCount=1;this._hasButtons=true;this._pageSize=1;this._pageSizeOptions=[];this._siblingCount=1;this._tooltipAlign="top";this.state={_boundaryCount:1,_label:this.translatePagination,_hasButtons:{first:true,last:true,next:true,previous:true},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_max:0};this.onClick=(t,i)=>{if(typeof this.state._on.onClick==="function"){this.state._on.onClick(t,i)}if(this.host){b(this.host,d.click,i)}this.onChangePage(t,i)};this.onChangePage=(t,i)=>{const s=setTimeout((()=>{clearTimeout(s);if(typeof this.state._on.onChangePage==="function"){this.state._on.onChangePage(t,i)}if(this.host){b(this.host,d.changePage,i)}}))};this.onChangePageSize=(t,i)=>{i=parseInt(i);if(typeof i==="number"&&i>0&&this._pageSize!==i){this._pageSize=i;const s=setTimeout((()=>{clearTimeout(s);if(typeof this.state._on.onChangePageSize==="function"){this.state._on.onChangePageSize(t,this._pageSize)}if(this.host){b(this.host,d.changePageSize,this._pageSize)}}))}};this.onGoToFirst={onClick:t=>{this.onClick(t,1)}};this.onGoToEnd={onClick:t=>{this.onClick(t,this.getCount())}};this.onGoBackward={onClick:t=>{this.onClick(t,this.state._page-1)}};this.onGoForward={onClick:t=>{this.onClick(t,this.state._page+1)}};this.beforePageSize=(t,i)=>{let s=i.has("_pageSize")?i.get("_pageSize"):this.state._pageSize;const e=i.has("_pageSizeOptions")?i.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(e)&&e.length>0){const t=e.find((t=>t.value===s));if(t===undefined){s=e[0].value}else{s=t.value}i.set("_pageSize",s)}const o=i.has("_page")?i.get("_page"):this.state._page;const a=i.has("_max")?i.get("_max"):this.state._max;this.syncPage(i,o,i.get("_pageSize"),a)};this.syncPage=(t,i,s,e)=>{if(e>0){const o=this.calcCount(e,s);if(o>0){if(i>o){t.set("_page",o);this.onChangePage(a,o)}else if(i<1){t.set("_page",1);this.onChangePage(a,1)}}}};this.beforePageSizeOptions=(t,i)=>{const s=[];if(Array.isArray(t)){for(const i of t){if(typeof i==="number"){s.push({label:`${i}`,value:i})}}}i.set("_pageSizeOptions",s);this.beforePageSize(s,i)}}getPageStart(){return Math.max(0,(this.state._page-1)*this.state._pageSize+1)}getPageEnd(){const t=this.state._page*this.state._pageSize;if(this.state._max<t){return this.state._max}return t}render(){var t;let e=false;const o=this.getCount();const a=Array.from({length:o},((t,i)=>i+1)).map((t=>{if(t<=this.state._boundaryCount||t>o-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount){e=true;if(this.state._page===t){return this.getSelectedPageButton(t)}else{return this.getUnselectedPageButton(t)}}else if(e===true){e=false;return i("li",{key:f()},i("span",{class:"kol-pagination__separator","aria-hidden":"true"}))}else{return null}}));return i(s,{class:"kol-pagination"},i("span",{role:"status","aria-live":"polite",class:"kol-pagination__entries"},g("kol-table-visible-range",{placeholders:{start:B.format(this.getPageStart()),end:B.format(this.getPageEnd()),total:B.format(this.state._max)}})),i("nav",{class:"kol-pagination__navigation","aria-label":this.state._label},i("ul",{class:"kol-pagination__navigation-list"},this.state._hasButtons.first&&i("li",null,i(c,{class:"kol-pagination__button kol-pagination__button--first",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:y,_hideLabel:true,_label:this.translatePageFirst,_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&i("li",null,i(c,{class:"kol-pagination__button kol-pagination__button--previous",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:C,_hideLabel:true,_label:this.translatePageBack,_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),a,this.state._hasButtons.next&&i("li",null,i(c,{class:"kol-pagination__button kol-pagination__button--next",_customClass:this.state._customClass,_disabled:o<=this.state._page,_icons:S,_hideLabel:true,_label:this.translatePageNext,_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&i("li",null,i(c,{class:"kol-pagination__button kol-pagination__button--last",_customClass:this.state._customClass,_disabled:o<=this.state._page,_icons:z,_hideLabel:true,_label:this.translatePageLast,_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),((t=this.state._pageSizeOptions)===null||t===void 0?void 0:t.length)>0&&i("div",{class:"page-size"},i(p,{class:"kol-pagination__page-size-select",_label:this.translateEntriesPerSite,_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:this.state._pageSize})))}getUnselectedPageButton(t){const s=B.format(t);const e=`${this.translatePage} ${s}`;return i("li",{key:f()},i(c,{class:"kol-pagination__button kol-pagination__button--numbers",_ariaDescription:e,_customClass:this.state._customClass,_label:s,_on:{onClick:i=>{this.onClick(i,t)}}}))}getSelectedPageButton(t){const s=B.format(t);const e=`${this.translatePage} ${s}`;return i("li",{key:f()},i(c,{"aria-current":"page",class:"kol-pagination__button kol-pagination__button--selected selected",_ariaDescription:e,_customClass:this.state._customClass,_label:s}))}validateBoundaryCount(t){o(this,"_boundaryCount",Math.max(0,t!==null&&t!==void 0?t:1))}validateCustomClass(t){r(this,t)}validateLabel(t,i,s=false){if(!s){m(this.state._label)}_(this,t);v(this.state._label)}validateHasButtons(t){n(this,"_hasButtons",(t=>typeof t==="boolean"||typeof t==="string"||typeof t==="object"&&t!==null),new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,i)=>{if(typeof t==="boolean"){i.set("_hasButtons",{first:t,last:t,next:t,previous:t})}else{if(typeof t==="string"){try{t=h(t)}catch(t){i.delete("_hasButtons")}}if(typeof t==="object"&&t!==null){i.set("_hasButtons",Object.assign(Object.assign({},this.state._hasButtons),{first:typeof t.first==="boolean"?t.first===true:this.state._hasButtons.first,last:typeof t.last==="boolean"?t.last===true:this.state._hasButtons.last,next:typeof t.next==="boolean"?t.next===true:this.state._hasButtons.next,previous:typeof t.previous==="boolean"?t.previous===true:this.state._hasButtons.previous}))}}}}})}validateOn(t){if(typeof t==="object"&&t!==null){this.state=Object.assign(Object.assign({},this.state),{_on:t})}}validatePage(t){o(this,"_page",t,{hooks:{beforePatch:(t,i)=>{const s=i.has("_pageSize")?i.get("_pageSize"):this.state._pageSize;const e=i.has("_max")?i.get("_max"):this.state._max;this.syncPage(i,t,s,e)}}})}validatePageSize(t){o(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){l(this,"_pageSizeOptions",(t=>typeof t==="number"),t,undefined,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){o(this,"_siblingCount",Math.max(0,t!==null&&t!==void 0?t:1))}validateMax(t){k(this,t,{hooks:{beforePatch:(t,i)=>{const s=i.has("_page")?i.get("_page"):this.state._page;const e=i.has("_pageSize")?i.get("_pageSize"):this.state._pageSize;this.syncPage(i,s,e,t)}}})}validateTooltipAlign(t){u(this,t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount);this.validateCustomClass(this._customClass);this.validateHasButtons(this._hasButtons);this.validateLabel(this._label,undefined,true);this.validateOn(this._on);this.validatePage(this._page);this.validatePageSize(this._pageSize);this.validatePageSizeOptions(this._pageSizeOptions);this.validateSiblingCount(this._siblingCount);this.validateTooltipAlign(this._tooltipAlign);this.validateMax(this._max);this.validatePage(this._page)}disconnectedCallback(){m(this.state._label)}get host(){return e(this)}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}}};export{O as kol_pagination_wc}; //# sourceMappingURL=kol-pagination-wc.entry.js.map