@cbpds/web-components/dist/components/cbp-pagination.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{p as t,H as i,d as s,h as e,c as o}from"./p-9caf8482.js";import{s as a}from"./p-9c1b2f31.js";import{d as n}from"./p-574733ec.js";const p=":root{--cbp-pagination-color:var(--cbp-color-text-darkest);--cbp-pagination-color-dark:var(--cbp-color-text-lightest)}[data-cbp-theme=light] cbp-pagination[context*=dark],[data-cbp-theme=dark] cbp-pagination:not([context=dark-inverts]):not([context=light-always]){--cbp-pagination-color:var(--cbp-pagination-color-dark)}cbp-pagination{--cbp-form-field-margin-bottom:0;display:flex;align-items:center;gap:var(--cbp-space-2x);color:var(--cbp-pagination-color)}cbp-pagination [slot=cbp-pagination-items-per-page] label,cbp-pagination [slot=cbp-pagination-pages] label{display:none}cbp-pagination .cbp-pagination-showing-text{flex-grow:1;font-style:italic}cbp-pagination [slot=cbp-pagination-pages] cbp-button{--cbp-button-color-bg:var(--cbp-form-field-color-border);--cbp-button-color-bg-dark:var(--cbp-form-field-color-border-dark)}@media (max-width: 30rem){cbp-pagination [slot=cbp-pagination-items-per-page]{display:none}}";const h=p;const c=t(class t extends i{constructor(){super();this.__registerHost();this.paginationChange=s(this,"paginationChange",7);this.pages=1;this.records=0;this.pageSize=10;this.page=1;this.context=undefined;this.sx={};this.pagesDropdownItems=undefined;this.showingText=undefined}handlePagesButtonNav({detail:{value:t}}){if(t=="next page")this.handlePageChange(this.page+1);if(t=="previous page")this.handlePageChange(this.page-1)}handlePageSizeChange(t){this.page=1;if(t=="all"){this.pageSize=t;this.pages=1;this.pagesDropdown.setAttribute("hidden","");if(this.records>500)console===null||console===void 0?void 0:console.warn(`cbp-pagination - Warning: the "show all" option should be disabled for large data sets. Pushing this amount of data to the user's browser is bad for performance, in addition to rendering a large number of DOM nodes to display it all at once.`)}else{this.pageSize=parseInt(t);this.pagesDropdown.value=0;this.pages=Math.ceil(this.records/this.pageSize);this.pagesDropdown.removeAttribute("hidden")}this.pagesDropdownItems=[];for(let t=1;t<=this.pages;t++){let i=document.createElement("cbp-dropdown-item");i.value=`${t}`;i.innerText=`${this.pages<100?"Page":""} ${t} of ${this.pages}`;this.pagesDropdownItems=[...this.pagesDropdownItems,i]}this.pagesDropdown.querySelector("[role=listbox]").replaceChildren(...this.pagesDropdownItems);setTimeout((()=>{this.pagesDropdown.value=1;this.checkPageButtonStates()}),100)}handlePageChange(t){this.page=this.pagesDropdown.value=t;this.paginationChange.emit({host:this.host,records:this.records,pageSize:this.pageSize,page:this.page,pages:this.pages});this.checkPageButtonStates()}checkPageButtonStates(){var t,i,s;if(this.nextPageButton)this.nextPageButton.disabled=this.page==((t=this.pagesDropdownItems)===null||t===void 0?void 0:t.length)||!((i=this.pagesDropdownItems)===null||i===void 0?void 0:i.length);if(this.previousPageButton)this.previousPageButton.disabled=this.page==1||!((s=this.pagesDropdownItems)===null||s===void 0?void 0:s.length)}componentWillLoad(){if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}a(this.host,Object.assign({},this.sx))}componentDidLoad(){this.pageSizeDropdown=this.host.querySelector("[slot=cbp-pagination-items-per-page]").querySelector("cbp-dropdown");this.pageSizeDropdown.addEventListener("valueChange",(({detail:{value:t}})=>this.handlePageSizeChange(t)));this.pagesDropdown=this.host.querySelector("[slot=cbp-pagination-pages]").querySelector("cbp-dropdown");this.pagesDropdown.addEventListener("valueChange",(({detail:{value:t}})=>this.handlePageChange(t)));this.nextPageButton=this.host.querySelector("[slot=cbp-dropdown-attached-button-end] cbp-button");this.previousPageButton=this.host.querySelector("[slot=cbp-dropdown-attached-button-start] cbp-button");this.pageSizeDropdown.value=this.pageSize;this.handlePageSizeChange(this.pageSize)}render(){if(this.records==0||this.pageSize=="all"){this.showingText=` Showing ${this.records} items`}else{this.showingText=`${this.page*this.pageSize-(this.pageSize-1)}-${this.page*this.pageSize<this.records?this.page*this.pageSize:this.records} of ${this.records} items`}return e(o,{key:"d25f957263451fc1f606cbd4499ade2fc773aa00"},e("slot",{key:"41e9b99149cf6dfdad69fcfc58fb238a9c7624cc",name:"cbp-pagination-items-per-page"}),e("div",{key:"4b90d6060802364e5d1fbe819e05738118e96ded",class:"cbp-pagination-showing-text"},this.showingText),e("slot",{key:"5cff510783f24064ca826c1e9bfb19d4bdc2cecc"}),e("slot",{key:"c8681925f6900df7c9904942ab8f79347d3fcde7",name:"cbp-pagination-pages"}))}get host(){return this}static get style(){return h}},[4,"cbp-pagination",{records:[2],pageSize:[1032,"page-size"],page:[1026],context:[513],sx:[8],pagesDropdownItems:[32],showingText:[32]},[[0,"buttonClick","handlePagesButtonNav"]]]);function d(){if(typeof customElements==="undefined"){return}const t=["cbp-pagination","cbp-dropdown-item"];t.forEach((t=>{switch(t){case"cbp-pagination":if(!customElements.get(t)){customElements.define(t,c)}break;case"cbp-dropdown-item":if(!customElements.get(t)){n()}break}}))}const r=c;const l=d;export{r as CbpPagination,l as defineCustomElement};
//# sourceMappingURL=cbp-pagination.js.map