dap-design-system/dist/components/pager/pager.component.d.ts

Official design system for the DÁP (dap.gov.hu)

import { PropertyValueMap } from 'lit';
import { DdsElement } from '../../internal/dds-hu-element';
import { default as DapDSButton } from '../button/button.component';
import { default as ArrowsArrowDownSFill } from '../icons/arrows/arrows-arrow-down-s-fill/arrows-arrow-down-s-fill.component';
import { default as DapDSOptionItem } from '../option-item/option-item.component';
import { default as DapDSSelect } from '../select/select.component';
/**
 * `dap-ds-pager`
 * @summary A pager is a component that displays pagination controls.
 * @element dap-ds-pager
 * @title - Pager
 *
 * @event {{ action: string, pagination: { pageIndex: number, pageSize: number } }} dds-pagination-change - Event fired when the pagination changes
 *
 * @csspart base - The main pager container.
 * @csspart first - The first page button.
 * @csspart previous - The previous page button.
 * @csspart next - The next page button.
 * @csspart last - The last page button.
 * @csspart page-size - The page size select.
 * @csspart pager-button-first-base - The base of the first page button.
 * @csspart pager-button-first-content - The content of the first page button.
 * @csspart pager-button-previous-base - The base of the previous page button.
 * @csspart pager-button-previous-content - The content of the previous page button.
 * @csspart pager-button-next-base - The base of the next page button.
 * @csspart pager-button-next-content - The content of the next page button.
 * @csspart pager-button-last-base - The base of the last page button.
 * @csspart pager-button-last-content - The content of the last page button.
 * @csspart page-size-select-base - The base of the page size select.
 * @csspart page-size-select-trigger - The trigger of the page size select.
 * @csspart page-numbers - The container of the numbered page buttons (shown when showPageNumbers is 'true').
 * @csspart page-number - Each numbered page button.
 * @csspart page-number-active - The active (current) numbered page button.
 * @csspart page-number-base - The base of each numbered page button.
 * @csspart page-number-content - The content of each numbered page button.
 * @csspart page-info - The page info / total count text.
 *
 * @cssproperty --dds-pager-spacing-vertical - The vertical spacing of the pager (default: var(--dds-spacing-400))
 * @cssproperty --dds-pager-spacing-horizontal - The horizontal spacing of the pager (default: var(--dds-spacing-200))
 * @cssproperty --dds-pager-button-padding - The padding of the pager buttons (default: var(--dds-spacing-150))
 * @cssproperty --dds-pager-button-border-width - The border width of the pager buttons (default: var(--dds-border-width-base, 1px))
 * @cssproperty --dds-pager-button-border-color - The border color of the pager buttons (default: var(--dds-button-subtle-border-neutral-enabled))
 * @cssproperty --dds-pager-button-border-radius - The border radius of the pager buttons (default: var(--dds-radius-rounded))
 * @cssproperty --dds-pager-button-background - The background color of the pager buttons (default: var(--dds-button-subtle-background-neutral-enabled))
 * @cssproperty --dds-pager-button-font-size - The font size of the pager buttons (default: var(--dds-font-sm, 14px))
 * @cssproperty --dds-pager-button-font-weight - The font weight of the pager buttons (default: var(--dds-font-weight-bold, 700))
 */
export default class DapDSPager extends DdsElement {
    static tagName: string;
    static dependencies: {
        'dap-ds-select': typeof DapDSSelect;
        'dap-ds-icon-arrow-down-s-fill': typeof ArrowsArrowDownSFill;
        'dap-ds-option-item': typeof DapDSOptionItem;
        'dap-ds-button': typeof DapDSButton;
    };
    /** Whether the pager is disabled. */
    disabled: boolean;
    /** Enable manual pagination. If true, the component will not automatically update the page index. */
    manualPagination: boolean;
    /** The current page index. */
    pageIndex: number;
    private _pageIndex;
    /** The number of items per page. */
    pageSize: number;
    private _pageSize;
    /** The total number of rows. */
    totalRows: number;
    /** Available page size options */
    pageSizeOptions: number[];
    /** Show the page size options. */
    showPageSizeOptions: string;
    /** Show the page index. */
    showPageIndex: string;
    /** Show the page count. */
    showPageCount: string;
    /** Show the first button. */
    showFirstButton: string;
    /** Show the previous button. */
    showPreviousButton: string;
    /** Show the next button. */
    showNextButton: string;
    /** Show the last button. */
    showLastButton: string;
    /** Show numbered page buttons between the previous and next buttons. */
    showPageNumbers: string;
    /** How many page numbers to show on each side of the current page. */
    siblingCount: number;
    /** The first button label. */
    firstButtonLabel: string;
    /** The previous button label. */
    previousButtonLabel: string;
    /** The next button label. */
    nextButtonLabel: string;
    /** The last button label. */
    lastButtonLabel: string;
    /** `data-testid` for the pagination buttons. Suffixed with the button's part (first/previous/next/last). */
    pageButtonTestId: string;
    /** The function to determine the pager text. If not provided, uses default reactive translation.
     * @type {Function}
     */
    pageStateText?: (pageIndex: number, pageSize: number, totalRows: number) => unknown;
    static readonly styles: import('lit').CSSResult;
    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
    private updatePageIndex;
    private updatePageSize;
    private renderPageSizeSelect;
    private renderNavigationButton;
    /** Windowed list of page indexes to show around the current page. */
    private pageNumberWindow;
    private renderPageNumbers;
    private renderPageInfo;
    protected render(): import('lit-html').TemplateResult<1>;
}