@cbpds/web-components
Version:
Web components for the CBP Design System.
234 lines (233 loc) • 9.66 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import { Host, h } from "@stencil/core";
import { setCSSProps } from "../../utils/utils";
export class CbpPagination {
constructor() {
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) || {};
}
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 (h(Host, { key: 'd25f957263451fc1f606cbd4499ade2fc773aa00' }, h("slot", { key: '41e9b99149cf6dfdad69fcfc58fb238a9c7624cc', name: "cbp-pagination-items-per-page" }), h("div", { key: '4b90d6060802364e5d1fbe819e05738118e96ded', class: "cbp-pagination-showing-text" }, this.showingText), h("slot", { key: '5cff510783f24064ca826c1e9bfb19d4bdc2cecc' }), h("slot", { key: 'c8681925f6900df7c9904942ab8f79347d3fcde7', name: "cbp-pagination-pages" })));
}
static get is() { return "cbp-pagination"; }
static get originalStyleUrls() {
return {
"$": ["cbp-pagination.scss"]
};
}
static get styleUrls() {
return {
"$": ["cbp-pagination.css"]
};
}
static get properties() {
return {
"records": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the number of records in the entire data set (complete or filtered) to be paginated."
},
"attribute": "records",
"reflect": false,
"defaultValue": "0"
},
"pageSize": {
"type": "any",
"mutable": true,
"complexType": {
"original": "number | \"all\"",
"resolved": "\"all\" | number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the number of items to show per page. Accepts any number or \"all\". Defaults to 10."
},
"attribute": "page-size",
"reflect": false,
"defaultValue": "10"
},
"page": {
"type": "number",
"mutable": true,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the current page being viewed. Defaults to 1."
},
"attribute": "page",
"reflect": false,
"defaultValue": "1"
},
"context": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'light-inverts' | 'light-always' | 'dark-inverts' | 'dark-always'",
"resolved": "\"dark-always\" | \"dark-inverts\" | \"light-always\" | \"light-inverts\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the context of the component as it applies to the visual design and whether it inverts when light/dark mode is toggled. Default behavior is \"light-inverts\" and does not have to be specified."
},
"attribute": "context",
"reflect": true
},
"sx": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Supports adding inline styles as an object"
},
"attribute": "sx",
"reflect": false,
"defaultValue": "{}"
}
};
}
static get states() {
return {
"pagesDropdownItems": {},
"showingText": {}
};
}
static get events() {
return [{
"method": "paginationChange",
"name": "paginationChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "A custom event emitted when the click event occurs for either a rendered button or anchor/link."
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
static get elementRef() { return "host"; }
static get listeners() {
return [{
"name": "buttonClick",
"method": "handlePagesButtonNav",
"target": undefined,
"capture": false,
"passive": false
}];
}
}
//# sourceMappingURL=cbp-pagination.js.map