@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
4 lines • 9.02 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import{r as t,h as i,H as s,g as e}from"./index-CElQfBOC.js";import{N as o,S as a,w as n,H as l,p as h}from"./common-7RW_NFNf.js";import{v as r}from"./custom-class-BrihA94O.js";import{v as p}from"./label-DAfXJvJZ.js";import{v as _}from"./tooltip-align-B_X7PRrT.js";import{t as c}from"./i18n-yBVLeHdv.js";import{n as u}from"./dev.utils-9pEPkxnH.js";import{r as g,a as d}from"./unique-nav-labels-PqHnrOFf.js";import{r as f,d as b}from"./component-names-CkE54Ym7.js";import{d as m,K as v}from"./events-CoPFQEiC.js";import"./align-DoCRbhrp.js";import"./i18n-CjhRejiw.js";const k=(t,a,s)=>{o(t,"_max",a,s)},C={left:"codicon codicon-debug-reverse-continue"},y={left:"codicon codicon-chevron-left"},S={right:"codicon codicon-chevron-right"},x={right:"codicon codicon-debug-continue"};function z(){const t=navigator.language||"de-DE";return t.includes("-")?t:`${t}-${t.toUpperCase()}`}const j=z(),B=new Intl.NumberFormat(j,{style:"decimal",minimumFractionDigits:0,maximumFractionDigits:0}),P=class{constructor(s){t(this,s),this.nonce=u(),this.translatePageFirst=c("kol-page-first"),this.translatePageBack=c("kol-page-back"),this.translatePageNext=c("kol-page-next"),this.translatePageLast=c("kol-page-last"),this.translateEntriesPerSite=c("kol-entries-per-site"),this.translatePage=c("kol-page"),this.translatePagination=c("kol-pagination"),this.calcCount=(t,a=1)=>Math.ceil(t/a),this.getCount=()=>this.calcCount(this.state._max,this.state._pageSize),this._boundaryCount=1,this._hasButtons=!0,this._pageSize=1,this._pageSizeOptions=[],this._siblingCount=1,this._tooltipAlign="top",this.state={_boundaryCount:1,_label:this.translatePagination,_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_max:0},this.onClick=(t,a)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,a),this.host&&m(this.host,v.click,a),this.onChangePage(t,a)},this.onChangePage=(t,a)=>{const s=setTimeout((()=>{clearTimeout(s),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,a),this.host&&m(this.host,v.changePage,a)}))},this.onChangePageSize=(t,a)=>{if("number"==typeof(a=parseInt(a))&&a>0&&this._pageSize!==a){this._pageSize=a;const s=setTimeout((()=>{clearTimeout(s),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize),this.host&&m(this.host,v.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,a)=>{let s=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize;const i=a.has("_pageSizeOptions")?a.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(i)&&i.length>0){const t=i.find((t=>t.value===s));s=void 0===t?i[0].value:t.value,a.set("_pageSize",s)}const e=a.has("_page")?a.get("_page"):this.state._page,o=a.has("_max")?a.get("_max"):this.state._max;this.syncPage(a,e,a.get("_pageSize"),o)},this.syncPage=(t,s,i,e)=>{if(e>0){const o=this.calcCount(e,i);o>0&&(s>o?(t.set("_page",o),this.onChangePage(a,o)):s<1&&(t.set("_page",1),this.onChangePage(a,1)))}},this.beforePageSizeOptions=(t,a)=>{const s=[];if(Array.isArray(t))for(const a of t)"number"==typeof a&&s.push({label:c("kol-page-per-site",{placeholders:{entries:`${a}`}}),value:a});a.set("_pageSizeOptions",s),this.beforePageSize(s,a)}}render(){var t;let a=!1;const e=this.getCount(),o=Array.from(Array(e).keys()).map((t=>t+1)).map((t=>t<=this.state._boundaryCount||t>e-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount?(a=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===a?(a=!1,i("li",{key:u()},i("span",{class:"kol-pagination__separator","aria-hidden":"true"}))):null));return i(s,{class:"kol-pagination"},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(b,{class:"kol-pagination__button kol-pagination__button--first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:C,_hideLabel:!0,_label:this.translatePageFirst,_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&i("li",null,i(b,{class:"kol-pagination__button kol-pagination__button--previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:y,_hideLabel:!0,_label:this.translatePageBack,_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),o,this.state._hasButtons.next&&i("li",null,i(b,{class:"kol-pagination__button kol-pagination__button--next",exportparts:"icon",_customClass:this.state._customClass,_disabled:e<=this.state._page,_icons:S,_hideLabel:!0,_label:this.translatePageNext,_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&i("li",null,i(b,{class:"kol-pagination__button kol-pagination__button--last",exportparts:"icon",_customClass:this.state._customClass,_disabled:e<=this.state._page,_icons:x,_hideLabel:!0,_label:this.translatePageLast,_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&i(f,{class:"kol-pagination__page-size-select",_hideLabel:!0,_id:`pagination-size-${this.nonce}`,_label:this.translateEntriesPerSite,_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:this.state._pageSize}))}getUnselectedPageButton(t){return i("li",{key:u()},i(b,{exportparts:"icon",_customClass:this.state._customClass,_label:"",_on:{onClick:a=>{this.onClick(a,t)}}},i("span",{slot:"expert"},i("span",{class:"visually-hidden"},this.translatePage)," ",B.format(t))))}getSelectedPageButton(t){return i("li",{key:u()},i(b,{class:"kol-pagination__button kol-pagination__button--selected",_customClass:this.state._customClass,_disabled:!0,_label:""},i("span",{slot:"expert"},i("span",{class:"visually-hidden"},this.translatePage)," ",B.format(t))))}validateBoundaryCount(t){o(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){r(this,t)}validateLabel(t,a,s=!1){s||g(this.state._label),p(this,t),d(this.state._label)}validateHasButtons(t){n(this,"_hasButtons",(t=>"boolean"==typeof t||"string"==typeof t||"object"==typeof t&&null!==t),new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,a)=>{if("boolean"==typeof t)a.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if("string"==typeof t)try{t=h(t)}catch(t){a.delete("_hasButtons")}"object"==typeof t&&null!==t&&a.set("_hasButtons",Object.assign(Object.assign({},this.state._hasButtons),{first:"boolean"==typeof t.first?!0===t.first:this.state._hasButtons.first,last:"boolean"==typeof t.last?!0===t.last:this.state._hasButtons.last,next:"boolean"==typeof t.next?!0===t.next:this.state._hasButtons.next,previous:"boolean"==typeof t.previous?!0===t.previous:this.state._hasButtons.previous}))}}}})}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validatePage(t){o(this,"_page",t,{hooks:{beforePatch:(t,a)=>{const s=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize,i=a.has("_max")?a.get("_max"):this.state._max;this.syncPage(a,t,s,i)}}})}validatePageSize(t){o(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){l(this,"_pageSizeOptions",(t=>"number"==typeof t),t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){o(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){k(this,t,{hooks:{beforePatch:(t,a)=>{const s=a.has("_page")?a.get("_page"):this.state._page,i=a.has("_pageSize")?a.get("_pageSize"):this.state._pageSize;this.syncPage(a,s,i,t)}}})}validateTooltipAlign(t){_(this,t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),this.validateLabel(this._label,void 0,!0),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(){g(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{P as kol_pagination_wc};