import { PropertyValueMap } from 'lit'; import { DdsElement } from '../../internal/dds-hu-element'; /** * `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. * * @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 { /** 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; /** The first button label. */ firstButtonLabel: string; /** The previous button label. */ previousButtonLabel: string; /** The next button label. */ nextButtonLabel: string; /** The last button label. */ lastButtonLabel: 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 | Map): void; private updatePageIndex; private updatePageSize; private renderPageSizeSelect; private renderNavigationButton; private renderPageInfo; protected render(): import('lit-html').TemplateResult<1>; }