gov-gui
Version:
Gov UI Component Library Typscript Build
281 lines (280 loc) • 10.5 kB
JavaScript
// import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';
// @Component({
// tag: 'gov-pagination',
// styleUrl: 'gov-pagination.css',
// shadow: true,
// })
// export class GovPagination {
// @Prop() totalPages: number;
// @Prop() currentPage: number;
// @Event() pageChanged: EventEmitter<number>;
// handlePageChange(page: number) {
// this.pageChanged.emit(page);
// }
// render() {
// return (
// <div class="pagination">
// {[...Array(this.totalPages)].map((_, i) => (
// <gov-button
// label={i + 1}
// variant={this.currentPage === i + 1 ? 'primary' : 'secondary'}
// onClick={() => this.handlePageChange(i + 1)}
// />
// ))}
// </div>
// );
// }
// }
import { h } from "@stencil/core";
import { getGlobalPropsClasses } from "../../global/global-styles-helper";
import { getAnimationClasses } from "../../global/animation-helpers";
export class GovPagination {
constructor() {
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 is() { return "gov-pagination"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["gov-pagination.css"]
};
}
static get styleUrls() {
return {
"$": ["gov-pagination.css"]
};
}
static get properties() {
return {
"totalPages": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "total-pages",
"reflect": false
},
"currentPage": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "current-page",
"reflect": false
},
"showFirstLast": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "show-first-last",
"reflect": false,
"defaultValue": "false"
},
"maxVisible": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "max-visible",
"reflect": false,
"defaultValue": "5"
},
"animation": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation",
"reflect": false
},
"animationDelay": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'2s' | '3s' | '4s' | '5s'",
"resolved": "\"2s\" | \"3s\" | \"4s\" | \"5s\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-delay",
"reflect": false,
"defaultValue": "'2s'"
},
"animationSpeed": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'slow' | 'slower' | 'fast' | 'faster'",
"resolved": "\"fast\" | \"faster\" | \"slow\" | \"slower\"",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": ""
},
"getter": false,
"setter": false,
"attribute": "animation-speed",
"reflect": false
}
};
}
static get events() {
return [{
"method": "pageChanged",
"name": "pageChanged",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
}
}];
}
static get watchers() {
return [{
"propName": "animation",
"methodName": "watchAnimations"
}, {
"propName": "animationDelay",
"methodName": "watchAnimationsDelay"
}, {
"propName": "animationSpeed",
"methodName": "watchAnimationsSpeed"
}];
}
}
//# sourceMappingURL=gov-pagination.js.map