gov-gui/dist/components/p-7817f640.js

Gov UI Component Library Typscript Build

import { p as proxyCustomElement, H, d as createEvent, h } from './p-cf89dfa6.js';
import { g as getGlobalPropsClasses, a as getAnimationClasses } from './p-751fda9a.js';
import { d as defineCustomElement$2 } from './p-b9577801.js';
import { d as defineCustomElement$1 } from './p-ef6eb59f.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 H {
    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;
    } });
}
defineCustomElement();

export { GovPagination as G, defineCustomElement as d };

//# sourceMappingURL=p-7817f640.js.map