@legumeinfo/web-components/lib/core/lis-pagination-element.d.ts

Web Components for the Legume Information System and other AgBio databases

import { LitElement } from 'lit';
/**
 * @htmlElement `<lis-pagination-element>`
 *
 * A Web Component that provides a pagination UI element.
 *
 * @example
 * The pagination element's {@link page | `page`} attribute/property can be
 * initialized via HTML or JavaScript. It will default to 1 if no value is
 * provided:
 * ```html
 * <!-- page attribute/property will be given default value of 1 -->
 * <lis-pagination-element></lis-pagination-element>
 *
 * <!-- setting the page attribute/property via HTML -->
 * <lis-pagination-element page=2></lis-pagination-element>
 *
 * <!-- setting the page attribute/property via JavaScript -->
 * <lis-pagination-element id="pagination"></lis-pagination-element>
 * <script type="text/javascript">
 *   // get the pagination element
 *   const paginationElement = document.getElementById('pagination');
 *   // set the element's page property
 *   paginationElement.page = 3;
 * </script>
 * ```
 *
 * @example
 * The pagination element can also go to the next/previous {@link page | `page`}
 * programmatically using the {@link next | `next`} and
 * {@link previous | `previous`} methods:
 * ```html
 * <!-- add the Web Component to your HTML -->
 * <lis-pagination-element id="pagination"></lis-pagination-element>
 *
 * <!-- interact with the component via JavaScript -->
 * <script type="text/javascript">
 *   // get the pagination element
 *   const paginationElement = document.getElementById('pagination');
 *   // go to the next page
 *   paginationElement.next();
 *   // go to the previous page
 *   paginationElement.previous();
 * </script>
 * ```
 *
 * @example
 * Every time the {@link page | `page`} attribute/property changes, a
 * {@link pageChange | `pageChange`} event is dispatched. The event can be
 * observed and the new {@link page | `page`} value can be extracted from the
 * event as follows:
 * ```html
 * <!-- add the Web Component to your HTML -->
 * <lis-pagination-element id="pagination"></lis-pagination-element>
 *
 * <!-- interact with the component via JavaScript -->
 * <script type="text/javascript">
 *   // get the pagination element
 *   const paginationElement = document.getElementById('pagination');
 *   // an function to handle pageChange events
 *   function eventHandler(event) {
 *     const page = event.detail.page;
 *     console.log(page);  // 1
 *   }
 *   // subscribe to pageChange events
 *   paginationElement.addEventListener('pageChange', eventHandler);
 * </script>
 * ```
 *
 * @example
 * An optional {@link scrollTarget | `scrollTarget`} property can be given an
 * `HTMLElement` via JavaScript. If set, every time a pagination event occurs, the
 *  viewport will be scrolled so that the element given to the property is visible. For
 *  example:
 * ```html
 * <!-- an element to use as a scroll target -->
 * <p id="paragraph">Some import text</p>
 *
 * <!-- add the Web Component to your HTML -->
 * <lis-pagination-element id="pagination"></lis-pagination-element>
 *
 * <!-- set the scroll target via JavaScript -->
 * <script type="text/javascript">
 *   // get the paragraph element
 *   const paragraphElement = document.getElementById('paragraph');
 *   // get the pagination element
 *   const paginationElement = document.getElementById('pagination');
 *   // set the scrollTarget property
 *   paginationElement.scrollTarget = paragraphElement;
 * </script>
 * ```
 */
export declare class LisPaginationElement extends LitElement {
    /**
     * Fired when the page changes. Dispatches a
     * {@link !CustomEvent | `CustomEvent`} containing the new value of the
     * {@link page | `page`} property.
     * @eventProperty
     */
    static readonly pageChange: CustomEvent<{
        page: number;
    }>;
    /** @ignore */
    static styles: import("lit").CSSResult;
    /** @ignore */
    createRenderRoot(): this;
    /**
     * What page the element is currently on.
     *
     * @attribute
     * @reflected
     */
    page: number;
    /**
     * The total number of pages.
     *
     * @attribute
     * @reflected
     */
    numPages?: number;
    /**
     * Whether or not the next button should be enabled. Note that this will be overridden
     * if a value is provided for `numPages`.
     *
     * @attribute
     */
    hasNext: boolean;
    /**
     * The element to scroll to when the page changes.
     *
     * @attribute
     */
    scrollTarget: HTMLElement | null;
    /**
     * Programmatically go to the previous page.
     *
     * @param e - An optional {@link !Event | `Event`} that can be passed if
     * called via a UI event,
     * for example.
     */
    previous(e?: Event): void;
    /**
     * Programmatically go to the next page.
     *
     * @param e - An optional {@link !Event | `Event`} that can be passed if
     * called via a UI event,
     * for example.
     */
    next(e?: Event): void;
    /** @ignore */
    private _hasNext;
    /** @ignore */
    private _scrollToTarget;
    /** @ignore */
    private _dispatchPageChange;
    /** @ignore */
    private _renderPreviousClass;
    private _pageInfo;
    /** @ignore */
    private _renderNextClass;
    /** @ignore */
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'lis-pagination-element': LisPaginationElement;
    }
}
//# sourceMappingURL=lis-pagination-element.d.ts.map