import { HTMLTemplateResult } from 'lit';
import { Cre8Element } from '../cre8-element';
import { Cre8Button } from '../button/button';
import './page-counter/page-counter';
/**
 * The Pagination component is used to split up a large amount of results
 *  by showing only a certain amount on each page. You can cycle through
 *  the pages using Page Numbers, Next and Previous Buttons, or optional
 *  First Page and Last Page Buttons. This component is also used by Table
 *  to cycle through rows of results. Pagination has 3 display options:
 *
 * **default**:  Can contain up to seven Page Numbers (ellipses included)
 *  at a time flanked by Next and Previous Buttons. When there are more than
 *  seven pages, numbers start getting replaced by ellipses. Use this option
 *  when you have a lot of horizontal space in a layout. It should not be used
 *  for mobile web layouts since its buttons are smaller than the minimum touch target of 44px.
 *  The component has built in responsivity to mobile page size so you dont have tohandle this
 *  seperately
 *
 *
 * **compact** : Best used as a summary of where you are among pages or table rows flanked by
 * Previous and Next Buttons. Use this option when you have limited horizontal space but still
 * need to show where users are among results. Great for mobile layouts.
 *
 *
 * **icon-only** : Use this option in very tight spaces when it’s not required to show users
 * where they are among results. Great for mobile layouts.
 *
 *
 * ## HOW TO USE
 *
 * Select an option from the “display” dropdown depending on layout width
 * Select where your current page is from the “Page” dropdown
 * To show less pages when using Full Numbers, use the "visiblePages” toggles
 * To hide the First Page and Last Page Buttons, turn on the “hideFirstLastButton” toggle
 * To change the states of page numbers or buttons, interact with the buttond to invoke each “State”
 * When using Compact Numbers, you can choose between “compact” and “icon-only” formats
 *
 *
 * ## ACCESSIBILITY NOTE
 *
 * To best orient people using screen readers, push focus to the top of
 * the list of results after any of the pagination buttons have been triggered,
 * **except for the currently selected one**. Focus target could be a visual results heading,
 * or the top heading of the results container of the page selected
 * via a programmatic selector, e.g. < section id=“results” aria-label="results-section" > or
 * < div role= “group” aria-label=“results” >.
 *
 * @dependency cre8-button, cre8-icon, cre8-pagination-counter
 * @csspart icon - distinguishes the page buttons from the icon buttons
 * @cssproperty "--pagination-display" - controls the display css property
 * @cssproperty "--pagination-justify-content" - controls horizontal alignment of pagination
 * @cssproperty "--pagination-align-items" - controls vertical alignment of pagination
 */
export declare class Cre8Pagination extends Cre8Element {
    static styles: import("lit").CSSResult[];
    static elementDefinitions: {
        'cre8-button': typeof Cre8Button;
    };
    _currentPage: number;
    /**
     * Input the total number of elements are returned from consuming app e.g. search results
     * @attr number
     * @required
     */
    totalResults: number;
    /**
     * how many elements will displayVariant per page, indicated by business to typically be 20
     * @attr number
     */
    get pageSize(): number;
    set pageSize(newSize: number);
    _pageSize: number;
    /**
     * Controls how many page buttons are displayVarianted on the page
     * at once, if container size permits. recommended max = 5 pages
     *
     * @attr number
     */
    visiblePages?: number;
    /**
     * (optional) prop that allows for a compact and icon-only variant both
     * for mobile screen-sizes and for use in certain contexts as guided by design,
     * the component size will show 'default' in the absence of a value on desktop and
     * 'compact' on smaller views.
     *
     * @attr 'compact' | 'icon-only' | 'default'
     * @optional
     */
    display?: 'compact' | 'icon-only' | 'default';
    /**
     *
     *@state watches the width of the window and responds to show the accessibility approved variant.
     */
    windowWidth: number;
    buttons: typeof Cre8Button[];
    /**
    *
    * @optional
    */
    hideLastAndFirstButtons?: boolean;
    get currentPage(): number;
    set currentPage(newPage: number);
    connectedCallBack(): void;
    get maxVisiblePages(): number;
    private get totalPages();
    private get hasNoPreviousPage();
    private get hasNoNextPage();
    private _onHandleResize;
    handleResize(): void;
    protected get pageRange(): number[];
    protected firstUpdated(): Promise<void>;
    disconnectedCallback(): void;
    displayTypes(): HTMLTemplateResult;
    private _handleKeydown;
    private _goToPage;
    goToPage(page: number, buttonName?: string): any;
    handleKeydown(page: number, buttonName?: string): (e: KeyboardEvent) => void;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cre8-pagination': Cre8Pagination;
    }
}
//# sourceMappingURL=pagination.d.ts.map