gov-gui
Version:
Gov UI Component Library Typscript Build
124 lines (120 loc) • 6.09 kB
JavaScript
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { g as getGlobalPropsClasses, a as getAnimationClasses } from './animation-helpers.js';
import { d as defineCustomElement$2 } from './gov-button2.js';
import { d as defineCustomElement$1 } from './gov-icon2.js';
const govPaginationCss = "gov-pagination{}.pagination{display:flex;gap:0.5rem;justify-content:center;align-items:center;padding:1rem}gov-button[disabled]{opacity:0.5;cursor:not-allowed}.ellipsis{display:inline-block;padding:0 0.5rem;color:#666;user-select:none}";
const GovPaginationStyle0 = govPaginationCss;
const GovPagination = /*@__PURE__*/ proxyCustomElement(class GovPagination extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.pageChanged = createEvent(this, "pageChanged", 7);
this.showFirstLast = false;
this.maxVisible = 5; // Maximum pages to show at once
this.animationDelay = '2s';
this.allClasses = '';
}
//watching for any change in animations to trigger them
watchAnimations() {
this.provideClass();
}
watchAnimationsDelay() {
this.provideClass();
}
watchAnimationsSpeed() {
this.provideClass();
}
// inject the animations and styles on component load
componentWillLoad() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
//Called on change of any animation related property to trigger change
provideClass() {
const animationClasses = getAnimationClasses({
animation: this.animation,
animationDelay: this.animationDelay,
animationSpeed: this.animationSpeed
});
this.allClasses = getGlobalPropsClasses({
classes: ' ' + animationClasses,
});
}
handlePageChange(page) {
if (page >= 1 && page <= this.totalPages) {
this.pageChanged.emit(page);
}
}
get visiblePages() {
if (this.totalPages <= this.maxVisible) {
return Array.from({ length: this.totalPages }, (_, i) => i + 1);
}
const half = Math.floor(this.maxVisible / 2);
let start = Math.max(1, this.currentPage - half);
let end = Math.min(this.totalPages, start + this.maxVisible - 1);
if (end - start + 1 < this.maxVisible) {
start = Math.max(1, end - this.maxVisible + 1);
}
const pages = [];
if (start > 1)
pages.push(1, '...');
for (let i = start; i <= end; i++)
pages.push(i);
if (end < this.totalPages)
pages.push('...', this.totalPages);
return pages.filter((p, i, arr) => p !== arr[i - 1]); // Remove duplicate ellipsis
}
render() {
return (h("div", { key: '8c40795dff544a72c5d9c736a6e7b8191b68405f', class: `pagination ${this.allClasses}` }, this.showFirstLast && (h("gov-button", { key: '26dec2475c0c46983fcf9e1e3d99eb558236c83a', label: "\u00AB", variant: "secondary", disabled: this.currentPage === 1, onClick: () => this.handlePageChange(1), "aria-label": "First page" })), h("gov-button", { key: '9567f2431717dfb5d460cc97c7589fb1cc806ae8', label: "\u2039", variant: "secondary", disabled: this.currentPage === 1, onClick: () => this.handlePageChange(this.currentPage - 1), "aria-label": "Previous page" }), this.visiblePages.map((page, i) => typeof page === 'number' ? (h("gov-button", { key: page, label: page.toString(), variant: this.currentPage === page ? 'primary' : 'secondary', onClick: () => this.handlePageChange(page), "aria-current": this.currentPage === page ? 'page' : null })) : (h("span", { key: `ellipsis-${i}`, class: "ellipsis" }, page))), h("gov-button", { key: 'b3438a46a9b17d43a4e57e1b901993a5b4539d01', label: "\u203A", variant: "secondary", disabled: this.currentPage === this.totalPages, onClick: () => this.handlePageChange(this.currentPage + 1), "aria-label": "Next page" }), this.showFirstLast && (h("gov-button", { key: 'a91f287450dd8afa097b9a979d816bcf8d47e742', label: "\u00BB", variant: "secondary", disabled: this.currentPage === this.totalPages, onClick: () => this.handlePageChange(this.totalPages), "aria-label": "Last page" }))));
}
static get watchers() { return {
"animation": ["watchAnimations"],
"animationDelay": ["watchAnimationsDelay"],
"animationSpeed": ["watchAnimationsSpeed"]
}; }
static get style() { return GovPaginationStyle0; }
}, [1, "gov-pagination", {
"totalPages": [2, "total-pages"],
"currentPage": [2, "current-page"],
"showFirstLast": [4, "show-first-last"],
"maxVisible": [2, "max-visible"],
"animation": [1],
"animationDelay": [1, "animation-delay"],
"animationSpeed": [1, "animation-speed"]
}, undefined, {
"animation": ["watchAnimations"],
"animationDelay": ["watchAnimationsDelay"],
"animationSpeed": ["watchAnimationsSpeed"]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["gov-pagination", "gov-button", "gov-icon"];
components.forEach(tagName => { switch (tagName) {
case "gov-pagination":
if (!customElements.get(tagName)) {
customElements.define(tagName, GovPagination);
}
break;
case "gov-button":
if (!customElements.get(tagName)) {
defineCustomElement$2();
}
break;
case "gov-icon":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { GovPagination as G, defineCustomElement as d };
//# sourceMappingURL=gov-pagination2.js.map