@visa/nova-angular/lib/pagination-control/pagination.control.d.ts

Visa Product Design System Nova Angular library

/**
 *              Copyright (c) 2025 Visa, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *         http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 **/
import { Signal, WritableSignal } from '@angular/core';
/**
 * Generates an array from number to from + length
 * @param {number} from
 * @param {number} length
 * @returns {number[]}
 */
export declare const generateArray: (from: number, length: number) => number[];
export type PaginationControlOptions = {
    /** Max block length for all blocks, this gets overwritten by `startBlockMaxLength`, `middleBlockMaxLength`, `endBlockMaxLength` */
    blockMaxLength: number;
    /** Forces pages not to paginate */
    compact: boolean;
    /** Default selected page */
    defaultSelected: number;
    /** Default total amount of page */
    defaultTotalPages: number;
    /** What to separate the pagination array up with, usually this delimiter will be replaced with icon or ellipses when shown in the UI */
    delimiter: number | string;
    /** Maximum length of pages to show on the end pagination block, overwrites `blockMaxLength` for end block */
    endBlockMaxLength: number;
    /** Maximum page number to be shown, (default null for no maximum) */
    maxPageNumber: number | null;
    /** Maximum length of pages to show on the middle pagination block, overwrites `blockMaxLength` for middle block */
    middleBlockMaxLength: number;
    /** Signal to be used for selected page, otherwise control will create one */
    selectedPage?: WritableSignal<number> | null;
    /** Maximum length of pages to show on the start pagination block, overwrites `blockMaxLength` for start block */
    startBlockMaxLength: number;
    /** Start from this page */
    startPage: number;
};
/**
 * A signals based approach to handling and controlling pagination components. It is very customizable, re-usable, and even allows you to bring your own signal for selected page.
 * @docs {@link https://design.visa.com/angular/components/pagination | See docs}
 */
export declare class PaginationControl {
    constructor(options?: Partial<PaginationControlOptions>);
    private readonly options;
    private readonly selectedPage;
    readonly totalPages: WritableSignal<number>;
    /** Can paginate or just show all pages */
    private readonly canPaginate;
    /** Pages to show at the end */
    private readonly endBlock;
    /** Ideal last page without maxPageNumber interfering */
    private readonly idealLastPage;
    /** Is first element selected */
    readonly isFirstPage: Signal<boolean>;
    /** Selected page is in end block */
    private readonly isInEndBlock;
    /** Selected page is in middle block */
    private readonly isInMiddleBlock;
    /** Selected page is in start block */
    private readonly isInStartBlock;
    /** Is last element selected */
    readonly isLastPage: Signal<boolean>;
    /** Last page */
    private readonly lastPage;
    /** Pages to show in the middle */
    private readonly middleBlock;
    /** Array of pages arrays to loop over */
    readonly pages: Signal<(string | number)[]>;
    /** Pages to show at the start */
    private readonly startBlock;
    /** Getter for selectedPage, we shouldn't directly manipulate the `selectedPage` signal, use `goToPage` to do this safely */
    get currentPage(): number;
    private get compactPages();
    /**
     * Calculates which range of items that is currently visible from pagination
     * @param {number} items - how many items we have
     * @param {number} itemsPerPage - how many items there are, per page
     * @returns to from object with calculated values
     */
    getToFrom(items: number, itemsPerPage: number): {
        0: number;
        1: number;
        from: number;
        to: number;
    };
    /** Helper to calculate total pages */
    getTotalPages: typeof PaginationControl.getTotalPages;
    /** On first page event */
    goToFirstPage(): void;
    /** On last page event */
    goToLastPage(): void;
    /** On next page event */
    goToNextPage(): void;
    /** On page change event */
    goToPage(pageNumber: number | string): void;
    /** On previous page event */
    goToPreviousPage(): void;
    /** Returns if page is current page */
    isCurrentPage(page: number | string): boolean;
    /**
     * In the context where total pages is calculated using items per page (much like tables use) we can use this utility to easily adjust the pagination control automatically.
     * NOTE: by default this resets the pagination to the first page when called.
     */
    resetPageCount(totalItems: number, itemsPerPage: number, autoResetToFirstPage?: boolean): void;
    /**
     * Calculates which range of items that is currently visible from pagination
     * @param {number} items - how many items we have
     * @param {number} itemsPerPage - how many items there are, per page
     * @param {number} currentPage - which page is visible
     * @param {number} startPage - which page we're starting from, defaults to page 1 (optional)
     * @returns to from object with calculated values
     */
    static getToFrom: (items: number, itemsPerPage: number, currentPage: number, startPage?: number) => {
        0: number;
        1: number;
        from: number;
        to: number;
    };
    /**
     * Calculates how many pages there are
     * @param {number} items - how many items we have
     * @param {number} itemsPerPage - how many items there are, per page
     * @returns {number} how many pages there are in total
     */
    static getTotalPages(items: number, itemsPerPage: number): number;
}