@aqua-ds/web-components
Version:
AquaDS Web Components
226 lines (222 loc) • 13 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
import { U as UniqueIdGenerator } from './uidGenerator.js';
import { d as defineCustomElement$8 } from './aq-button2.js';
import { d as defineCustomElement$7 } from './aq-divider2.js';
import { d as defineCustomElement$6 } from './aq-dropdown2.js';
import { d as defineCustomElement$5 } from './aq-dropdown-item2.js';
import { d as defineCustomElement$4 } from './aq-list-menu-host.js';
import { d as defineCustomElement$3 } from './aq-popover2.js';
import { d as defineCustomElement$2 } from './aq-tooltip2.js';
import { d as defineCustomElement$1 } from './aq-virtual-list2.js';
import { A as Alignment } from './Alignment.js';
const aqPaginationCss = ".aq-pagination{width:100%;background:var(--color-white);color:var(--color-paper-darker)}.aq-pagination .aq-button{margin:0 var(--spacing-size-small)}.aq-pagination__per-page{display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;-ms-flex-order:0;order:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-direction:row;flex-direction:row;font-size:var(--font-size-xs);line-height:var(--spacing-size-big);-ms-flex-align:center;align-items:center;padding-left:var(--spacing-size-large)}.aq-pagination__per-page-selector{display:inline-block}.aq-pagination__per-page .aq-divider{margin:0px var(--spacing-size-medium)}.aq-pagination__paginator{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;-ms-flex:none;flex:none;-ms-flex-order:1;order:1;-ms-flex-positive:1;flex-grow:1;padding-right:var(--spacing-size-large)}.aq-pagination__paginator--small-left{-ms-flex-pack:start;justify-content:flex-start}.aq-pagination__paginator--small-center{-ms-flex-pack:center;justify-content:center}.aq-pagination__paginator--small-right{-ms-flex-pack:end;justify-content:flex-end}.aq-pagination__item{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;padding:var(--spacing-size-minor);-ms-flex:none;flex:none;line-height:var(--spacing-size-big);font-size:var(--font-size-s);min-width:var(--spacing-size-large);height:var(--spacing-size-large);-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:var(--spacing-size-minor);margin:0 var(--spacing-size-small)}.aq-pagination__item:hover{color:var(--color-ink-base)}.aq-pagination__item--active{border:var(--spacing-size-basic) solid var(--color-ink-base);color:var(--color-ink-base);font-weight:var(--font-weight-semi-bold)}.aq-pagination__item--disabled{cursor:default}.aq-pagination-inline{display:-ms-flexbox;display:flex;padding:var(--spacing-size-medium) 0;margin:0 var(--spacing-size-large)}.aq-pagination__limit-field{display:-ms-flexbox;display:flex}.aq-pagination__limit-field label{margin-right:var(--spacing-size-short)}";
const AqPagination = /*@__PURE__*/ proxyCustomElement(class AqPagination extends HTMLElement {
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.setPage = createEvent(this, "setPage", 7);
this.setPerPageValue = createEvent(this, "setPerPageValue", 7);
this.page = 1;
this.records = 0;
this.perPage = 10;
this.chunk = 3;
this.perPageValues = [10, 25, 50, 100];
this.isSmall = false;
this.align = Alignment.RIGHT;
this.showItemsPerPage = true;
this.cid = '';
this.startPage = 1;
this.currentPerPage = 1;
this.endPage = 1;
this.localTotalPages = 1;
}
onPerPageChange() {
this.updateTotalPages();
this.setPaginationBounds();
}
onTotalPagesChange() {
this.updateTotalPages();
this.setPaginationBounds();
}
onPageChange() {
this.updateTotalPages();
this.setPaginationBounds();
}
onRecordsChange() {
this.updateTotalPages();
}
get getFinalTotalPages() {
return Math.ceil(this.records / this.perPage) || 1;
}
get getFinalPage() {
return Math.min(this.page, this.getFinalTotalPages);
}
get prevPageActive() {
return this.getFinalPage > 1;
}
get nextPageActive() {
return this.getFinalPage < this.getFinalTotalPages;
}
get getStartEllipse() {
return this.startPage > 1;
}
get getEndEllipse() {
return this.endPage < this.getFinalTotalPages;
}
setPaginationBounds() {
const totalPages = this.getFinalTotalPages;
const currentPage = this.getFinalPage;
const chunk = this.chunk;
const halfChunk = Math.floor(chunk / 2);
if (totalPages <= chunk + 2) {
this.startPage = 1;
this.endPage = totalPages;
}
else if (currentPage <= chunk) {
this.startPage = 1;
this.endPage = chunk;
}
else if (currentPage >= totalPages - chunk + 1) {
this.startPage = totalPages - chunk + 1;
this.endPage = totalPages;
}
else {
this.startPage = currentPage - halfChunk;
this.endPage = currentPage + halfChunk;
}
}
setFirstPage() {
this.emitPage(1);
}
setNextPage() {
if (this.nextPageActive) {
this.emitPage(this.getFinalPage + 1);
}
}
setPrevPage() {
if (this.prevPageActive) {
this.emitPage(this.getFinalPage - 1);
}
}
updateTotalPages() {
this.localTotalPages = Math.ceil(this.records / this.perPage) || 1;
}
emitPage(value) {
this.page = value;
this.setPage.emit(value);
}
get getPerPageValuesObject() {
let items = [];
this.perPageValues.map(value => items.push({ text: value.toString() }));
return items;
}
emitPerPageValue(event) {
if (event.detail) {
this.perPage = event.detail;
this.setPerPageValue.emit(event.detail);
}
}
get numberOfElements() {
const to = this.perPage * this.getFinalPage;
const from = to - this.perPage + 1;
const total = this.records;
return {
from: this.records > 0 ? from : 0,
to: to < total ? to : total,
total,
};
}
componentWillLoad() {
this.uid = new UniqueIdGenerator();
this.updateTotalPages();
this.setPaginationBounds();
}
render() {
return (h("div", { key: 'cfa46e29ad1b91c512a706e3ee6869af8d72bfbb', class: "aq-pagination", id: this.cid || this.uid.generateId() }, h("div", { key: '579ce1cd56cddcf9393c1cf316d71a8181c2fa52', class: "aq-pagination-inline" }, h("div", { key: '8ddbb76b1db7ab8aa6a43e182ce7e44eba4f2981', class: "aq-pagination__per-page", style: { display: this.isSmall ? 'none' : 'flex' } }, h("div", { key: '32f6d10b1c3cf0110ed1e6d8a70f1432408a16fa', class: "aq-pagination__limit-field" }, this.showItemsPerPage && h("label", { key: '2ecba6f56f9fb225189c70fbb713a102ad2e32d8' }, "Items per page"), h("aq-dropdown", { key: 'ac62bef84b10bcdef824598af152e1ec5bd833cb', placement: "top", "popover-width": "full", "close-on-click": true, items: this.getPerPageValuesObject, onSelection: event => this.emitPerPageValue(event) }, h("aq-button", { key: '4df882f845975131469a89c9ec97e9e18fc88c76', slot: "activator", isOutline: true, "has-disclosure": true }, this.perPage)), h("aq-divider", { key: '497683b38aa93903588947f58203851fa62198f4', orientation: "vertical" }), h("div", { key: '24b9a34f89046f75f0d0b55549df6505b12606e1' }, this.numberOfElements.from, " - ", this.numberOfElements.to, " of ", this.numberOfElements.total))), h("div", { key: '6ffb9e0e48112e6ae8dbf4a2b63df4a609090e7f', class: `aq-pagination__paginator aq-pagination__paginator--small-${this.align}` }, h("span", { key: '4a9caa08799f83b35a8ef1aa08cce99b7e599dca', class: `aq-pagination__item ${!this.prevPageActive ? 'aq-pagination__item--disabled' : ''}`, onClick: () => this.setFirstPage() }, h("em", { key: '5e0a1cd46eaa3aa42424b52b8f9cf3327dd80e9f', class: "aq-icon-chevron-double-left" })), h("span", { key: '59fc660c22ddeef835e9b345ea018a2ab49100b4', class: `aq-pagination__item ${!this.prevPageActive ? 'aq-pagination__item--disabled' : ''}`, onClick: () => this.setPrevPage() }, h("em", { key: '7b3a7cdcd3a98081fdb726b1289b74777b2818b6', class: "aq-icon-chevron-left" })), this.getStartEllipse && (h(Fragment, { key: 'd3eca218130aa60872fa722d4eabde9a083d35d5' }, h("span", { key: '159efa535f13b906c58a2d5cf4ec1cfa5f57940c', class: "aq-pagination__item", onClick: () => this.setFirstPage() }, "1"), h("span", { key: '65449f79f24449b2d5b96df82e67a9fa21ea467a', class: "aq-pagination__item" }, "..."))), Array.from({ length: this.endPage - this.startPage + 1 }, (_, i) => this.startPage + i).map(page => (h("span", { class: `aq-pagination__item ${this.getFinalPage === page ? 'aq-pagination__item--active' : ''}`, onClick: () => this.emitPage(page) }, page))), this.getEndEllipse && (h(Fragment, { key: '620539b6661624c5f6d5f4e471755226e1151c22' }, h("span", { key: '40352a82f874c165a1a6445529347c693f8e9ab4', class: "aq-pagination__item" }, "..."), h("span", { key: '286ed8c97956253020e6471bfc6bf537e6fef7a5', class: "aq-pagination__item", onClick: () => this.emitPage(this.getFinalTotalPages) }, this.getFinalTotalPages))), h("span", { key: '6377917c3b3bff3e94ac8f6afd52973d9ce7dac2', class: `aq-pagination__item ${!this.nextPageActive ? 'aq-pagination__item--disabled' : ''}`, onClick: () => this.setNextPage() }, h("em", { key: 'ad8f075ee4f32df35aeee8296a456b155affafa5', class: "aq-icon-chevron-right" })), h("span", { key: '77a604d14befa71f420ea55b10ba281ab833abb0', class: `aq-pagination__item ${!this.nextPageActive ? 'aq-pagination__item--disabled' : ''}`, onClick: () => this.emitPage(this.getFinalTotalPages) }, h("em", { key: '28686a60f885df58be2d3ec993abb1e7184e8897', class: "aq-icon-chevron-double-right" }))))));
}
get hostElement() { return this; }
static get watchers() { return {
"perPage": ["onPerPageChange"],
"totalPages": ["onTotalPagesChange"],
"page": ["onPageChange"],
"records": ["onRecordsChange"]
}; }
static get style() { return aqPaginationCss; }
}, [256, "aq-pagination", {
"page": [1026],
"totalPages": [2, "total-pages"],
"records": [2],
"perPage": [1026, "per-page"],
"chunk": [2],
"perPageValues": [16, "per-page-values"],
"isSmall": [4, "is-small"],
"align": [1],
"showItemsPerPage": [4, "show-items-per-page"],
"cid": [1],
"startPage": [32],
"currentPerPage": [32],
"endPage": [32],
"localTotalPages": [32],
"uid": [32]
}, undefined, {
"perPage": ["onPerPageChange"],
"totalPages": ["onTotalPagesChange"],
"page": ["onPageChange"],
"records": ["onRecordsChange"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-pagination", "aq-button", "aq-divider", "aq-dropdown", "aq-dropdown-item", "aq-list-menu", "aq-popover", "aq-tooltip", "aq-virtual-list"];
components.forEach(tagName => { switch (tagName) {
case "aq-pagination":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqPagination);
}
break;
case "aq-button":
if (!customElements.get(tagName)) {
defineCustomElement$8();
}
break;
case "aq-divider":
if (!customElements.get(tagName)) {
defineCustomElement$7();
}
break;
case "aq-dropdown":
if (!customElements.get(tagName)) {
defineCustomElement$6();
}
break;
case "aq-dropdown-item":
if (!customElements.get(tagName)) {
defineCustomElement$5();
}
break;
case "aq-list-menu":
if (!customElements.get(tagName)) {
defineCustomElement$4();
}
break;
case "aq-popover":
if (!customElements.get(tagName)) {
defineCustomElement$3();
}
break;
case "aq-tooltip":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "aq-virtual-list":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { AqPagination as A, defineCustomElement as d };