gov-gui
Version:
Gov UI Component Library Demo ready Build
183 lines (179 loc) • 8.29 kB
JavaScript
import { p as proxyCustomElement, H, d as createEvent, h } from './p-cf89dfa6.js';
import { g as getGlobalPropsClasses } from './p-3f1f0cff.js';
import { g as getAnimationClasses } from './p-be5d7e2d.js';
import { a as accessibleLifecycle } from './p-e89af057.js';
import { d as defineCustomElement$2 } from './p-a4c404fb.js';
import { d as defineCustomElement$1 } from './p-307c52d0.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;
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
r = Reflect.decorate(decorators, target, key, desc);
else
for (var i = decorators.length - 1; i >= 0; i--)
if (d = decorators[i])
r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const GovPagination = /*@__PURE__*/ proxyCustomElement(class GovPagination extends H {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.pageChanged = createEvent(this, "pageChanged", 7);
this.total = 1;
this.current = 1;
this.showFirstLast = false;
this.maxVisible = 5; // Maximum pages to show at once
this.animationDelay = '2s';
this._styles = {}; // State for inactive button styles
this._buttonStyles = {};
this.variant = '';
this.allClasses = '';
}
//watching for any change in animations to trigger them
watchAnimations() {
this.provideClass();
}
watchAnimationsDelay() {
this.provideClass();
}
watchAnimationsSpeed() {
this.provideClass();
}
watchStyles(newValue) {
if (typeof newValue === 'string') {
try {
this._styles = JSON.parse(newValue);
}
catch (e) {
console.error('Failed to parse styles:', e);
this._styles = {};
}
}
else {
this._styles = newValue || {};
}
}
watchButtonStyles(newValue) {
if (typeof newValue === 'string') {
try {
this._buttonStyles = JSON.parse(newValue);
}
catch (e) {
console.error('Failed to parse styles:', e);
this._buttonStyles = {};
}
}
else {
this._buttonStyles = newValue || {};
}
}
// inject the animations and styles on component load
componentWillLoad() {
this.watchStyles(this.styles);
this.watchButtonStyles(this.buttonStyles);
this.provideClass();
}
//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: this.classes + ' ' + animationClasses,
variant: this.variant,
size: this.size
});
}
handlePageChange(page) {
if (page >= 1 && page <= this.total) {
this.pageChanged.emit(page);
}
}
get visiblePages() {
if (this.total <= this.maxVisible) {
return Array.from({ length: this.total }, (_, i) => i + 1);
}
const half = Math.floor(this.maxVisible / 2);
let start = Math.max(1, this.current - half);
let end = Math.min(this.total, 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.total)
pages.push('...', this.total);
return pages.filter((p, i, arr) => p !== arr[i - 1]); // Remove duplicate ellipsis
}
render() {
return (h("div", { key: '9859939eb71700b3e3fd63bb6c5ad58afa07f79c', class: `pagination ${this.allClasses}`, style: Object.assign({}, this._styles) }, this.showFirstLast && (h("gov-button", { key: 'a34d4c23a8c2b333dddeac52f758c0702db7686d', label: "\u00AB", variant: "secondary", disabled: this.current === 1, onClick: () => this.handlePageChange(1), "aria-label": "First page" })), h("gov-button", { key: '8de8be0e1761a9f77a08aae0e14dea9e053c1ec7', label: "\u2039", variant: "secondary", disabled: this.current === 1, onClick: () => this.handlePageChange(this.current - 1), "aria-label": "Previous page", styles: Object.assign({}, this._buttonStyles) }), this.visiblePages.map((page, i) => typeof page === 'number' ? (h("gov-button", { key: page, label: page.toString(), variant: this.current === page ? 'primary' : 'secondary', onClick: () => this.handlePageChange(page), "aria-current": this.current === page ? 'page' : null, styles: Object.assign({}, this._buttonStyles) })) : (h("span", { key: `ellipsis-${i}`, class: "ellipsis" }, page))), h("gov-button", { key: 'e269e8ad45a0f1bbfc8e2825c49c9ed8beaac8c5', label: "\u203A", variant: "secondary", disabled: this.current === this.total, onClick: () => this.handlePageChange(this.current + 1), "aria-label": "Next page", styles: Object.assign({}, this._buttonStyles) }), this.showFirstLast && (h("gov-button", { key: 'c0781a0d3541795042942971828c159fdcdc91ca', label: "\u00BB", variant: "secondary", disabled: this.current === this.total, onClick: () => this.handlePageChange(this.total), "aria-label": "Last page", styles: Object.assign({}, this._buttonStyles) }))));
}
get el() { return this; }
static get watchers() { return {
"animation": ["watchAnimations"],
"animationDelay": ["watchAnimationsDelay"],
"animationSpeed": ["watchAnimationsSpeed"],
"styles": ["watchStyles"],
"buttonStyles": ["watchButtonStyles"]
}; }
static get style() { return GovPaginationStyle0; }
}, [1, "gov-pagination", {
"total": [2],
"current": [2],
"showFirstLast": [4, "show-first-last"],
"maxVisible": [2, "max-visible"],
"animation": [1],
"animationDelay": [1, "animation-delay"],
"animationSpeed": [1, "animation-speed"],
"classes": [1],
"styles": [8],
"buttonStyles": [8, "button-styles"],
"variant": [1],
"size": [1],
"_styles": [32],
"_buttonStyles": [32]
}, undefined, {
"animation": ["watchAnimations"],
"animationDelay": ["watchAnimationsDelay"],
"animationSpeed": ["watchAnimationsSpeed"],
"styles": ["watchStyles"],
"buttonStyles": ["watchButtonStyles"]
}]);
__decorate([
accessibleLifecycle('gov-pagination')
// inject the animations and styles on component load
], GovPagination.prototype, "componentWillLoad", null);
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;
} });
}
defineCustomElement();
export { GovPagination as G, defineCustomElement as d };
//# sourceMappingURL=p-8e64b029.js.map