@ngx-uk-frontend/core/esm2022/pagination/lib/pagination.directive.js

Core utilities and shared functionality for ngx-uk-frontend libraries

import { Directive, computed, input, output } from '@angular/core';
import * as i0 from "@angular/core";
/**
 * Base directive for pagination components.
 * Contains common functionality shared between different design system implementations.
 */
export class PaginationDirective {
    /** Total number of items */
    itemCount = input(0, ...(ngDevMode ? [{ debugName: "itemCount" }] : []));
    /** Number of items per page */
    itemsPerPage = input(10, ...(ngDevMode ? [{ debugName: "itemsPerPage" }] : []));
    /** Current page number (1-based) */
    currentPage = input(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
    /** Title for the previous button */
    previousTitle = input('Previous', ...(ngDevMode ? [{ debugName: "previousTitle" }] : []));
    /** Label for the previous button (additional context) */
    previousLabel = input(null, ...(ngDevMode ? [{ debugName: "previousLabel" }] : []));
    /** Title for the next button */
    nextTitle = input('Next', ...(ngDevMode ? [{ debugName: "nextTitle" }] : []));
    /** Label for the next button (additional context) */
    nextLabel = input(null, ...(ngDevMode ? [{ debugName: "nextLabel" }] : []));
    /** Output event when a pagination item is clicked */
    pageChange = output();
    /** Output event when the previous link is clicked */
    previousClick = output();
    /** Output event when the next link is clicked */
    nextClick = output();
    /** Counter for generating unique IDs */
    ellipsisCounter = 0;
    /** Computed total number of pages */
    totalPages = computed(() => Math.ceil(this.itemCount() / this.itemsPerPage()), ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
    /** Computed flag for whether previous button should be shown */
    hasPreviousPage = computed(() => this.currentPage() > 1, ...(ngDevMode ? [{ debugName: "hasPreviousPage" }] : []));
    /** Computed flag for whether next button should be shown */
    hasNextPage = computed(() => this.currentPage() < this.totalPages(), ...(ngDevMode ? [{ debugName: "hasNextPage" }] : []));
    /** Computed pagination items */
    computedItems = computed(() => {
        const totalPages = this.totalPages();
        if (totalPages <= 0) {
            return [];
        }
        // Simple case: 7 or fewer pages, show all
        if (totalPages <= 7) {
            return this.createSequentialItems(1, totalPages);
        }
        const currentPage = this.currentPage();
        const items = [];
        // Always show first page
        items.push(this.createPageItem(1));
        // Complex case: more than 7 pages, show ellipses
        if (currentPage <= 4) {
            // Near the start: show 1 2 3 4 5 ... 100
            items.push(...this.createSequentialItems(2, 5));
            items.push(this.createEllipsisItem());
            items.push(this.createPageItem(totalPages));
        }
        else if (currentPage >= totalPages - 3) {
            // Near the end: show 1 ... 96 97 98 99 100
            items.push(this.createEllipsisItem());
            items.push(...this.createSequentialItems(totalPages - 4, totalPages));
        }
        else {
            // In the middle: show 1 ... 49 50 51 ... 100
            items.push(this.createEllipsisItem());
            items.push(...this.createSequentialItems(currentPage - 1, currentPage + 1));
            items.push(this.createEllipsisItem());
            items.push(this.createPageItem(totalPages));
        }
        return items;
    }, ...(ngDevMode ? [{ debugName: "computedItems" }] : []));
    /**
     * Handle page number click
     */
    onPageClick(item) {
        if (!item.ellipsis && item.pageNumber) {
            this.pageChange.emit(item.pageNumber);
        }
    }
    /**
     * Creates a page item for the specified page number
     */
    createPageItem(pageNumber) {
        return {
            number: String(pageNumber),
            current: pageNumber === this.currentPage(),
            pageNumber: pageNumber,
            id: `page-${pageNumber}`,
        };
    }
    /**
     * Creates an ellipsis item
     */
    createEllipsisItem() {
        return {
            number: '',
            ellipsis: true,
            id: `ellipsis-${++this.ellipsisCounter}`,
        };
    }
    /**
     * Creates an array of sequential page items
     */
    createSequentialItems(start, end) {
        const items = [];
        for (let i = start; i <= end; i++) {
            items.push(this.createPageItem(i));
        }
        return items;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.6", type: PaginationDirective, isStandalone: true, inputs: { itemCount: { classPropertyName: "itemCount", publicName: "itemCount", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, previousTitle: { classPropertyName: "previousTitle", publicName: "previousTitle", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextTitle: { classPropertyName: "nextTitle", publicName: "nextTitle", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", previousClick: "previousClick", nextClick: "nextClick" }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PaginationDirective, decorators: [{
            type: Directive
        }], propDecorators: { itemCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemCount", required: false }] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }], previousTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousTitle", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextTitle", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], previousClick: [{ type: i0.Output, args: ["previousClick"] }], nextClick: [{ type: i0.Output, args: ["nextClick"] }] } });
//# sourceMappingURL=pagination.directive.js.map