@cbpds/web-components
Version:
Web components for the CBP Design System.
110 lines (104 loc) • 6.26 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-cd71cbd5.js');
const utils = require('./utils-99c9e716.js');
const cbpPaginationCss = ":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 CbpPaginationStyle0 = cbpPaginationCss;
const CbpPagination = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.paginationChange = index.createEvent(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 } }) {
if (value == 'next page')
this.handlePageChange(this.page + 1);
if (value == 'previous page')
this.handlePageChange(this.page - 1);
}
handlePageSizeChange(value) {
this.page = 1;
if (value == "all") {
this.pageSize = value;
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(value);
this.pagesDropdown.value = 0;
this.pages = Math.ceil(this.records / this.pageSize);
this.pagesDropdown.removeAttribute('hidden');
}
this.pagesDropdownItems = [];
for (let i = 1; i <= this.pages; i++) {
let newItem = document.createElement("cbp-dropdown-item");
newItem.value = `${i}`;
newItem.innerText = `${this.pages < 100 ? 'Page' : ''} ${i} of ${this.pages}`;
this.pagesDropdownItems = [...this.pagesDropdownItems, newItem];
}
this.pagesDropdown.querySelector('[role=listbox]').replaceChildren(...this.pagesDropdownItems);
setTimeout(() => {
this.pagesDropdown.value = 1;
this.checkPageButtonStates();
}, 100);
}
handlePageChange(value) {
this.page = this.pagesDropdown.value = value;
this.paginationChange.emit({
host: this.host,
records: this.records,
pageSize: this.pageSize,
page: this.page,
pages: this.pages
});
this.checkPageButtonStates();
}
checkPageButtonStates() {
var _a, _b, _c;
if (this.nextPageButton)
this.nextPageButton.disabled = this.page == ((_a = this.pagesDropdownItems) === null || _a === void 0 ? void 0 : _a.length) || !((_b = this.pagesDropdownItems) === null || _b === void 0 ? void 0 : _b.length);
if (this.previousPageButton)
this.previousPageButton.disabled = this.page == 1 || !((_c = this.pagesDropdownItems) === null || _c === void 0 ? void 0 : _c.length);
}
componentWillLoad() {
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
utils.setCSSProps(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 } }) => this.handlePageSizeChange(value));
this.pagesDropdown = this.host.querySelector('[slot=cbp-pagination-pages]').querySelector('cbp-dropdown');
this.pagesDropdown.addEventListener('valueChange', ({ detail: { value } }) => this.handlePageChange(value));
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 (index.h(index.Host, { key: 'd25f957263451fc1f606cbd4499ade2fc773aa00' }, index.h("slot", { key: '41e9b99149cf6dfdad69fcfc58fb238a9c7624cc', name: "cbp-pagination-items-per-page" }), index.h("div", { key: '4b90d6060802364e5d1fbe819e05738118e96ded', class: "cbp-pagination-showing-text" }, this.showingText), index.h("slot", { key: '5cff510783f24064ca826c1e9bfb19d4bdc2cecc' }), index.h("slot", { key: 'c8681925f6900df7c9904942ab8f79347d3fcde7', name: "cbp-pagination-pages" })));
}
get host() { return index.getElement(this); }
};
CbpPagination.style = CbpPaginationStyle0;
exports.cbp_pagination = CbpPagination;
//# sourceMappingURL=cbp-pagination.cjs.entry.js.map