@umbraco-ui/uui-pagination/lib/uui-pagination.element.d.ts

Umbraco UI pagination component. By implementing a resizeObserver it changes the number of visible buttons to fit the width of the container it sits in. Based on uui-button and uui-button-group.

import { LitElement } from 'lit';
/**
 * @element uui-pagination
 * @description Jump to a certain page and navigate to the next, last, previous or first page. The amount of visible page-buttons are adjusted to the available space.
 * @fires change - When clicked on the page button fires change event
 */
export declare class UUIPaginationElement extends LitElement {
    private _observer;
    connectedCallback(): void;
    disconnectedCallback(): void;
    firstUpdated(): void;
    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
    protected updateLabel(): void;
    private _calculateRange;
    private _generateVisiblePages;
    private _navButtons;
    private _pagesGroup;
    /**
     * This property is used to generate a proper `aria-label`. It will be announced by screen reader as: "<<this.label>>. Current page: <<this.current>>"
     * @type {string}
     * @attr
     */
    label: string;
    /**
     * With this property you can overwrite aria-label.
     * @type {string}
     * @attr
     */
    ariaLabel: string;
    /**
     * This property is used to generate the name of the first button
     * @type {string}
     * @attr
     */
    firstLabel: string;
    /**
     * This property is used to generate the name of the previous button
     * @type {string}
     * @attr
     */
    previousLabel: string;
    /**
     * This property is used to generate the name of the next button
     * @type {string}
     * @attr
     */
    nextLabel: string;
    /**
     * This property is used to generate the name of the last button
     * @type {string}
     * @attr
     */
    lastLabel: string;
    private _total;
    /**
     * Set the amount of pages to navigate.
     * @type {number}
     * @attr
     * @default: 1
     */
    get total(): number;
    set total(newValue: number);
    private _range;
    private _visiblePages;
    private _current;
    /**
     * Define the current active page.
     * @type {number}
     * @attr
     */
    get current(): number;
    set current(newValue: number);
    /**
     * This method will change the page to a next one.
     * @memberof UUIPaginationElement
     */
    goToNextPage(): void;
    /**
     * Change the page to a previous one.
     * @memberof UUIPaginationElement
     */
    goToPreviousPage(): void;
    /**
     * Change the page to the one passed as an argument to this method.
     * @param {number} page
     * @memberof UUIPaginationElement
     */
    goToPage(page: number): void;
    /** When having limited display of page-buttons and clicking a page-button that changes the current range, the focus stays on the position of the clicked button which is not anymore representing the number clicked, therefore we move focus to the button that represents the current page. */
    protected focusActivePage(): void;
    protected renderFirst(): import("lit-html").TemplateResult<1>;
    protected renderPrevious(): import("lit-html").TemplateResult<1>;
    protected renderNext(): import("lit-html").TemplateResult<1>;
    protected renderLast(): import("lit-html").TemplateResult<1>;
    protected renderDots(): import("lit-html").TemplateResult<1>;
    protected renderPage(page: number): import("lit-html").TemplateResult<1>;
    protected renderNavigationLeft(): import("lit-html").TemplateResult<1>;
    protected renderNavigationRight(): import("lit-html").TemplateResult<1>;
    render(): import("lit-html").TemplateResult<1>;
    static styles: import("lit").CSSResult[];
}
declare global {
    interface HTMLElementTagNameMap {
        'uui-pagination': UUIPaginationElement;
    }
}