diff --git a/apps/doc/src/app/components/paginator/examples/paginator-basic-left-example/paginator-basic-left-example.component.html b/apps/doc/src/app/components/paginator/examples/paginator-basic-left-example/paginator-basic-left-example.component.html index ff4ecc4fd0..91dd8b88e0 100644 --- a/apps/doc/src/app/components/paginator/examples/paginator-basic-left-example/paginator-basic-left-example.component.html +++ b/apps/doc/src/app/components/paginator/examples/paginator-basic-left-example/paginator-basic-left-example.component.html @@ -5,5 +5,5 @@ [rows]="10" [rowsCountOptions]="[5, 10, 20, 30]" [paginatorOptions]="{ noRowsSelectorLabel: true }" - [directionLeft]="true" + [direction]="'right'" > diff --git a/apps/doc/src/app/components/paginator/paginator-example.component.html b/apps/doc/src/app/components/paginator/paginator-example.component.html index da2a8775bb..c2ca2dcab5 100644 --- a/apps/doc/src/app/components/paginator/paginator-example.component.html +++ b/apps/doc/src/app/components/paginator/paginator-example.component.html @@ -52,7 +52,7 @@ [paginatorOptions]="paginatorOptions" [rowsCountOptions]="rowsCountOptions" [moreButtonLabel]="moreButtonLabel" - [directionLeft]="direction" + [direction]="direction" (paginatorChange)="content = $event" > @@ -183,8 +183,9 @@ Set Direction left to paginator diff --git a/apps/doc/src/app/components/paginator/paginator-example.component.ts b/apps/doc/src/app/components/paginator/paginator-example.component.ts index c343a146d9..c77d26b0a7 100644 --- a/apps/doc/src/app/components/paginator/paginator-example.component.ts +++ b/apps/doc/src/app/components/paginator/paginator-example.component.ts @@ -1,6 +1,11 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; import { RawLoaderContent, TuiDocExample } from '@prizm-ui/doc'; -import { PrizmPaginatorOptions, PrizmPaginatorOutput, PrizmPaginatorType } from '@prizm-ui/components'; +import { + PrizmPaginatorDirection, + PrizmPaginatorOptions, + PrizmPaginatorOutput, + PrizmPaginatorType, +} from '@prizm-ui/components'; import { PAGINATOR_OPTIONS_VARIANTS } from './paginator-example.constants'; @Component({ @@ -27,7 +32,8 @@ export class PaginatorExampleComponent { public paginatorOptions: PrizmPaginatorOptions = this.paginatorOptionsVariants[0]; public rowsCountOptionsBase: number[] = [10, 15, 20, 25, 30, 35, 40]; public rowsCountOptions = [...this.rowsCountOptionsBase]; - public direction = false; + public paginatorDirectionVariants: PrizmPaginatorDirection[] = ['right', 'left']; + public direction = this.paginatorDirectionVariants[0]; public readonly exampleBasicPaginator: TuiDocExample = { TypeScript: import('./examples/paginator-basic-example/paginator-basic-example.component?raw'), diff --git a/libs/components/src/lib/components/paginator/interfaces/prizm-paginator.interface.ts b/libs/components/src/lib/components/paginator/interfaces/prizm-paginator.interface.ts index 519424ec2c..049eba6afd 100644 --- a/libs/components/src/lib/components/paginator/interfaces/prizm-paginator.interface.ts +++ b/libs/components/src/lib/components/paginator/interfaces/prizm-paginator.interface.ts @@ -21,3 +21,5 @@ export interface PrizmPaginatorOptions { } export type PrizmPaginatorType = 'finite' | 'infinite'; + +export type PrizmPaginatorDirection = 'right' | 'left'; diff --git a/libs/components/src/lib/components/paginator/paginator.component.ts b/libs/components/src/lib/components/paginator/paginator.component.ts index 06213d4db2..34cf90ea7e 100644 --- a/libs/components/src/lib/components/paginator/paginator.component.ts +++ b/libs/components/src/lib/components/paginator/paginator.component.ts @@ -14,6 +14,7 @@ import { import { AsyncSubject, Observable } from 'rxjs'; import { PrizmPaginatorData, + PrizmPaginatorDirection, PrizmPaginatorOptions, PrizmPaginatorOutput, PrizmPaginatorType, @@ -115,12 +116,16 @@ export class PrizmPaginatorComponent extends PrizmAbstractTestId implements OnIn @Input() public rowsCountOptions: number[] = []; @Input() - @HostBinding('class.direction-left') @prizmDefaultProp() - public directionLeft = false; + public direction: PrizmPaginatorDirection = 'right'; + + @HostBinding('class.direction-left') + public get directionLeft(): boolean { + return this.direction === 'left'; + } - @Output() public paginatorChange: EventEmitter = - new EventEmitter(); + @Output() + public paginatorChange: EventEmitter = new EventEmitter(); @Output() public pageChange: EventEmitter = new EventEmitter(); @Output() public rowsChange: EventEmitter = new EventEmitter();