@cbpds/web-components/dist/cbp-web-components/p-631c9215.entry.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{r as t,c as i,h as s,a,g as o}from"./p-654179c2.js";import{s as e}from"./p-93ade441.js";const n=":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=n;const p=class{constructor(s){t(this,s);this.paginationChange=i(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)||{}}e(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 s(a,{key:"d25f957263451fc1f606cbd4499ade2fc773aa00"},s("slot",{key:"41e9b99149cf6dfdad69fcfc58fb238a9c7624cc",name:"cbp-pagination-items-per-page"}),s("div",{key:"4b90d6060802364e5d1fbe819e05738118e96ded",class:"cbp-pagination-showing-text"},this.showingText),s("slot",{key:"5cff510783f24064ca826c1e9bfb19d4bdc2cecc"}),s("slot",{key:"c8681925f6900df7c9904942ab8f79347d3fcde7",name:"cbp-pagination-pages"}))}get host(){return o(this)}};p.style=h;export{p as cbp_pagination};
//# sourceMappingURL=p-631c9215.entry.js.map