forked from NationalBankBelgium/stark
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(stark-ui): implement Pagination component. Integrate pagination …
…in Table component ISSUES CLOSED: #539
- Loading branch information
1 parent
7707acf
commit d3e0bd6
Showing
31 changed files
with
2,407 additions
and
97 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export * from "./pagination/pagination.module"; | ||
| export * from "./pagination/components"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export * from "./components/pagination.component"; | ||
| export * from "./components/pagination-config.intf"; |
318 changes: 318 additions & 0 deletions
318
packages/stark-ui/src/modules/pagination/components/_pagination.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,318 @@ | ||
| /********** PAGINATION **********/ | ||
| /* stark: src/modules/pagination/components/_pagination.component.scss */ | ||
| .stark-pagination > div { | ||
| display: flex; | ||
| flex-flow: row nowrap; | ||
| width: auto; | ||
| margin: 0; | ||
| padding: 0; | ||
| & ul { | ||
| display: flex; | ||
| flex-flow: row nowrap; | ||
| width: auto; | ||
| list-style: none; | ||
| height: 100%; | ||
| max-height: 50px; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| & .stark-dropdown, | ||
| & mat-select { | ||
| height: 100%; | ||
| } | ||
| & .previous, | ||
| & .next, | ||
| & .first-page, | ||
| & .last-page { | ||
| font-size: 16px; | ||
| font-weight: 400; | ||
| line-height: 20px; | ||
| & button.mat-icon-button { | ||
| width: auto; | ||
| height: 100%; | ||
| padding: 5px; | ||
| border: none; | ||
| border-radius: 2px; | ||
| /* background-color: rgba(255, 255, 255, .04);*/ | ||
| cursor: pointer; | ||
| } | ||
| & mat-icon { | ||
| width: 24px; | ||
| min-width: 24px; | ||
| height: 24px; | ||
| min-height: 24px; | ||
| } | ||
| } | ||
| & .pagination-items-per-page { | ||
| display: flex; | ||
| width: auto; | ||
| margin: 0; | ||
| padding: 0; | ||
| & mat-select-value { | ||
| min-width: 0; | ||
| min-height: 0; | ||
| padding: 13px 4px 0; | ||
| align-items: flex-start; | ||
| } | ||
| } | ||
| &.compact { | ||
| @media #{$desktop-query} { | ||
| & li { | ||
| background-color: transparent; | ||
| } | ||
| } | ||
|
|
||
| @media #{$mobile-only-query} { | ||
| & li { | ||
| & a { | ||
| color: #000; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @media #{$mobile-only-query} { | ||
| position: absolute; | ||
| top: 0; | ||
| right: 40px; | ||
| font-size: 16px; | ||
| line-height: 24px; | ||
| & mat-select:focus:not([disabled]) .mat-select-value { | ||
| border-bottom-color: transparent; | ||
| color: #fff; | ||
| } | ||
|
|
||
| & li { | ||
| display: none; | ||
| &.active, | ||
| &.previous, | ||
| &.next { | ||
| display: block; | ||
| padding: 6px 0; | ||
| & a { | ||
| display: block; | ||
| line-height: 38px; | ||
| color: #fff; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| & .previous, | ||
| & .next { | ||
| & button[disabled="disabled"] mat-icon { | ||
| fill: rgba(255, 255, 255, 0.4); | ||
| } | ||
| } | ||
|
|
||
| & .pagination-items-per-page { | ||
| & .mat-select-value { | ||
| color: #fff; | ||
| } | ||
| & mat-select span { | ||
| margin-right: 5px; | ||
| } | ||
| } | ||
|
|
||
| & .pagination-enter-page { | ||
| display: none; | ||
| } | ||
|
|
||
| & mat-select:focus:not([disabled]) * { | ||
| color: #fff !important; | ||
| } | ||
| } | ||
|
|
||
| @media #{$tablet-query} { | ||
| position: relative; | ||
| float: right; | ||
| max-height: 48px; | ||
| border-radius: 2px; | ||
| display: inline-flex; | ||
| margin: 0; | ||
| padding: 0; | ||
| & li { | ||
| display: none; | ||
| align-items: center; | ||
| width: 30px; | ||
| } | ||
| & .previous, | ||
| & .next, | ||
| & .first-page, | ||
| & .last-page { | ||
| display: flex; | ||
| width: 40px; | ||
| } | ||
| & .previous, | ||
| & .next, | ||
| & .first-page, | ||
| & .last-page { | ||
| & button.mat-icon-button { | ||
| width: 40px; | ||
| padding: 7px 8px 6px; | ||
| border: none; | ||
| box-shadow: none; | ||
| outline: none; | ||
| &[disabled="disabled"] mat-icon { | ||
| outline: none; | ||
| fill: rgba(0, 0, 0, 0.14); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| & .previous { | ||
| margin-right: 1px; | ||
| } | ||
|
|
||
| & .next { | ||
| margin-left: 1px; | ||
| } | ||
|
|
||
| & .pagination-enter-page { | ||
| margin: 4px 24px 0 4px; | ||
| font-size: 12px; | ||
| flex: 0 0 auto; | ||
| & span { | ||
| color: $primary-dark-text-color; | ||
| } | ||
| & input { | ||
| display: inline-block; | ||
| margin-right: 4px; | ||
| width: 26px; | ||
| height: 24px; | ||
| padding: 4px; | ||
| border: solid 1px $divider-color; | ||
| border-radius: 2px; | ||
| font-size: 12px; | ||
| text-align: center; | ||
| } | ||
| } | ||
|
|
||
| & .pagination-items-per-page { | ||
| & mat-select-value { | ||
| margin-top: 4px; | ||
| height: 24px; | ||
| padding: 4px; | ||
| border: solid 1px $divider-color; | ||
| border-radius: 2px; | ||
| font-size: 12px; | ||
| background: #fff; | ||
| align-items: center; | ||
| &:focus { | ||
| border: 0; | ||
| outline: dashed 1px #ccc; | ||
| } | ||
| & span:first-child { | ||
| padding-right: 3px; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @media #{$desktop-query} { | ||
| max-height: 40px; | ||
| & li { | ||
| display: flex; | ||
| background-color: rgba(0, 0, 0, 0.02); | ||
| & a, | ||
| & span { | ||
| display: block; | ||
| width: 100%; | ||
| padding: 1px 0; | ||
| text-align: center; | ||
| color: rgba(0, 0, 0, 0.5); | ||
| cursor: pointer; | ||
| } | ||
| &.active a { | ||
| color: $md-primary; | ||
| } | ||
| } | ||
| & .mat-icon-button { | ||
| background-color: transparent; | ||
| } | ||
| & .previous { | ||
| margin-right: 0; | ||
| } | ||
| & .pagination { | ||
| margin-right: 24px; | ||
| } | ||
| & .next { | ||
| margin-left: 0; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .stark-action-bar-pagination { | ||
| & .stark-pagination { | ||
| margin-right: 0; | ||
| } | ||
| & .mat-icon-button { | ||
| transform: translateY(-3px); | ||
| } | ||
| & .page-numbers { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| .pagination-enter-page { | ||
| margin: 0; | ||
| } | ||
|
|
||
| @media #{$desktop-query} { | ||
| .stark-pagination .page-numbers { | ||
| display: flex; | ||
| } | ||
| } | ||
|
|
||
| /********** DENSE MODE **********/ | ||
| .dense-mode { | ||
| & .stark-pagination { | ||
| height: 24px; | ||
| overflow: hidden; | ||
| margin-right: 0; | ||
| & ul li button.mat-icon-button { | ||
| padding: 0; | ||
| } | ||
| & .pagination-items-per-page .mat-select-value { | ||
| margin-top: 0; | ||
| height: 14px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .stark-table .stark-table-action-bar { | ||
| & .stark-action-bar-pagination { | ||
| & li { | ||
| padding: 0 4px; | ||
| } | ||
| & .mat-icon-button { | ||
| transform: none; | ||
| margin: 0; | ||
| & mat-icon { | ||
| width: 20px; | ||
| height: 20px; | ||
| min-width: 20px; | ||
| min-height: 20px; | ||
| } | ||
| } | ||
| & .pagination-enter-page { | ||
| margin: 2px 0 0 0; | ||
| padding-right: 8px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .stark-table .stark-table-action-bar { | ||
| & .stark-action-bar-pagination { | ||
| & button:not([disabled]), | ||
| & button[disabled] { | ||
| background: 0; | ||
| border: none; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .stark-pagination button[disabled] { | ||
| background-color: transparent; | ||
| } | ||
|
|
||
| /* END stark: src/modules/pagination/components/_pagination.component.pcss */ |
52 changes: 52 additions & 0 deletions
52
packages/stark-ui/src/modules/pagination/components/pagination-config.intf.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| /** | ||
| * Defines the config object to be used with the Pagination component. | ||
| */ | ||
| export interface StarkPaginationConfig { | ||
| /** | ||
| * If true, the component will be displayed in "extended" mode (an "extended-pagination" class is added to the element). | ||
| * Default: false | ||
| */ | ||
| isExtended?: boolean; | ||
|
|
||
| /** | ||
| * Number of items displayed on each page. The number of available pages for pagination is calculated based on this number. | ||
| * Default: itemsPerPageOptions[0] | ||
| */ | ||
| itemsPerPage?: number; | ||
|
|
||
| /** | ||
| * Available options for items per page dropdown. | ||
| * Default : [5,10,15] | ||
| */ | ||
| itemsPerPageOptions?: number[]; | ||
|
|
||
| /** | ||
| * If false, then itemsPerPage dropdown will not be present. | ||
| * Default: true | ||
| */ | ||
| itemsPerPageIsPresent?: boolean; | ||
|
|
||
| /** | ||
| * Current page index. | ||
| * Default: 0 | ||
| */ | ||
| page?: number; | ||
|
|
||
| /** | ||
| * If false, then page nav bar will not be present. | ||
| * Default: true | ||
| */ | ||
| pageNavIsPresent?: boolean; | ||
|
|
||
| /** | ||
| * f false, then input box for page selection will not be present. | ||
| * Default: true | ||
| */ | ||
| pageInputIsPresent?: boolean; | ||
|
|
||
| /** | ||
| * Number of items being paged in order to calculate number of pages for pagination. | ||
| * Default: 0 | ||
| */ | ||
| totalItems?: number; | ||
| } |
Oops, something went wrong.