refactor(components/paginator): update implementation for left direct…

…ion support #1154

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'"
 ></prizm-paginator>

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"
  ></prizm-paginator>
  </prizm-doc-demo>
@@ -183,8 +183,9 @@
  </ng-template>
  <ng-template
  [(documentationPropertyValue)]="direction"
- documentationPropertyName="directionLeft"
- documentationPropertyType="boolean"
+ [documentationPropertyValues]="paginatorDirectionVariants"
+ documentationPropertyName="direction"
+ documentationPropertyType="PrizmPaginatorDirection"
  documentationPropertyMode="input"
  >
  Set Direction left to paginator

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'),

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';

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<PrizmPaginatorOutput> =
-   new EventEmitter<PrizmPaginatorOutput>();
+ @Output()
+ public paginatorChange: EventEmitter<PrizmPaginatorOutput> = new EventEmitter<PrizmPaginatorOutput>();
  @Output() public pageChange: EventEmitter<number> = new EventEmitter<number>();
  @Output() public rowsChange: EventEmitter<number | null> = new EventEmitter<number | null>();