lyne-components icon indicating copy to clipboard operation
lyne-components copied to clipboard

story(sbb-paginator): initial implementation

Open mcilurzo opened this issue 8 months ago • 0 comments

We want to provide a paginator component. It's purpose is to provide a pagination functionality for various use cases.

Figma: https://www.figma.com/file/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?type=design&node-id=33767%3A8995&mode=design&t=UPHfQU4257pNfPgG-1

Note: The compact mode is out of scope and will be implemented in a separate issue. Depends on #2755

Design Spec:

  • Should wrap the page numbers block, the page buttons and items per page
    • Should not wrap the content of the page numbers block (the number buttons)

Tech Spec:

  • Should have property length: number = 0, which represents the number of items in total (not the number of pages)
  • Should have property pageIndex: number = 0, which represents the current page index
  • Should have property pageSize: number = 10, which represents the number of items per page
  • Should have property pageSizeOptions?: number[], which represents the options for pageSize and if assigned, displays the items per page select
  • Should have property pagerPosition: 'start' | 'end' = 'start', which indicates where the next/previous page buttons should be rendered
  • The previous page button is disabled, if the pageIndex is 0 and the next page button is disabled, if pageIndex is the last possible value (i.e. if we only have one page, both are disabled)
  • On any page button click, a pageChanged event should be emitted with current index and previous index as details
<sbb-paginator
  length="100"
  pageIndex="0"
></sbb-paginator>

mcilurzo avatar Jun 14 '24 05:06 mcilurzo