Merge pull request #80 from zyfra/issue-67

fix(components/paginator): fix disabled error

apps/doc/src/app/components/paginator/examples/paginator-basic-example/paginator-basic-example.component.html

@@ -1,7 +1,8 @@
-<prizm-paginator
- [totalRecords]="1560"
- [pageLinkSize]="3"
- [rows]="10"
- [rowsCountOptions]="[5, 10, 20, 30]"
- [paginatorOptions]="{ noRowsSelectorLabel: true }"
-></prizm-paginator>
+<prizm-paginator
+ [disabled]="disabled"
+ [totalRecords]="1560"
+ [pageLinkSize]="3"
+ [rows]="10"
+ [rowsCountOptions]="[5, 10, 20, 30]"
+ [paginatorOptions]="{ noRowsSelectorLabel: true }"
+></prizm-paginator>

apps/doc/src/app/components/paginator/examples/paginator-basic-example/paginator-basic-example.component.ts

@@ -1,9 +1,11 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-
-@Component({
- selector: 'prizm-paginator-basic-example',
- templateUrl: './paginator-basic-example.component.html',
- styleUrls: ['./paginator-basic-example.component.less'],
- changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PaginatorBasicExampleComponent {}
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+ selector: 'prizm-paginator-basic-example',
+ templateUrl: './paginator-basic-example.component.html',
+ styleUrls: ['./paginator-basic-example.component.less'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PaginatorBasicExampleComponent {
+ public disabled = false;
+}

apps/doc/src/app/components/paginator/examples/paginator-infinite-example/paginator-infinite-example.component.html

@@ -1,4 +1,5 @@
 <prizm-paginator
+ [disabled]="disabled"
  [rows]="30"
  [rowsCountOptions]="[3, 5, 10, 30, 60, 100]"
  paginatorType="infinite"

apps/doc/src/app/components/paginator/examples/paginator-infinite-example/paginator-infinite-example.component.ts

@@ -1,9 +1,11 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-
-@Component({
- selector: 'prizm-paginator-infinite-example',
- templateUrl: './paginator-infinite-example.component.html',
- styleUrls: ['./paginator-infinite-example.component.less'],
- changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PaginatorInfiniteExampleComponent {}
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+ selector: 'prizm-paginator-infinite-example',
+ templateUrl: './paginator-infinite-example.component.html',
+ styleUrls: ['./paginator-infinite-example.component.less'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PaginatorInfiniteExampleComponent {
+ public disabled = false;
+}

apps/doc/src/app/components/paginator/examples/paginator-with-labels-example/paginator-with-labels-example.component.html

@@ -1,10 +1,11 @@
-<prizm-paginator
- [totalRecords]="160"
- [pageLinkSize]="4"
- [rows]="10"
- [page]="6"
- [paginatorOptions]="{ noRowsSelectorLabel: true }"
- [rowsCountOptions]="[10, 20, 60]"
- leftButtonLabel="Назад"
- rightButtonLabel="Вперед"
-></prizm-paginator>
+<prizm-paginator
+ [disabled]="disabled"
+ [totalRecords]="160"
+ [pageLinkSize]="4"
+ [rows]="10"
+ [page]="6"
+ [paginatorOptions]="{ noRowsSelectorLabel: true }"
+ [rowsCountOptions]="[10, 20, 60]"
+ leftButtonLabel="Назад"
+ rightButtonLabel="Вперед"
+></prizm-paginator>

apps/doc/src/app/components/paginator/examples/paginator-with-labels-example/paginator-with-labels-example.component.ts

@@ -1,9 +1,11 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-
-@Component({
- selector: 'prizm-paginator-with-labels-example',
- templateUrl: './paginator-with-labels-example.component.html',
- styleUrls: ['./paginator-with-labels-example.component.less'],
- changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class PaginatorWithLabelsExampleComponent {}
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+ selector: 'prizm-paginator-with-labels-example',
+ templateUrl: './paginator-with-labels-example.component.html',
+ styleUrls: ['./paginator-with-labels-example.component.less'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PaginatorWithLabelsExampleComponent {
+ public disabled = false;
+}

apps/doc/src/app/components/paginator/paginator-example.component.html

@@ -28,6 +28,7 @@
  </div>
  <prizm-paginator
  #element
+ [disabled]="disabled"
  [prizmDocHostElement]="element"
  [totalRecords]="totalRecords"
  [(page)]="initialValue"
@@ -64,6 +65,15 @@
  Paginator inner content options
  </ng-template>
 
+ <ng-template
+ documentationPropertyName="disabled"
+ documentationPropertyType="boolean"
+ documentationPropertyMode="input"
+ [(documentationPropertyValue)]="disabled"
+ >
+ Disabled
+ </ng-template>
+
  <ng-template
  documentationPropertyName="rowsCountOptions"
  documentationPropertyType="number[]"

apps/doc/src/app/components/paginator/paginator-example.component.ts

@@ -10,6 +10,7 @@ import { PAGINATOR_OPTIONS_VARIANTS } from './paginator-example.constants';
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PaginatorExampleComponent {
+ public disabled = false;
  public totalRecords = 1100;
  public pageLinkSize = 5;
  public rows = 10;

libs/components/src/lib/components/paginator/prizm-paginator.component.html

@@ -8,6 +8,7 @@
  <div class="rows-selector" *ngIf="!paginatorOptions?.noRowsSelector">
  <prizm-select
  size="s"
+ [disabled]="disabled"
  [forceClear]="false"
  [label]="null"
  [outer]="true"
@@ -20,7 +21,7 @@
  </div>
 
  <div class="content">
- <span class="rows rows__show" *ngIf="!paginatorOptions?.noInfo">
+ <span class="rows rows__show" *ngIf="!paginatorOptions?.noInfo" [hidden]="disabled">
  Показано строк: {{ (currentPage - 1) * rows + 1 }}-{{
  currentPage * rows > totalRecords ? totalRecords : currentPage * rows
  }}
@@ -30,22 +31,36 @@
  class="paginator paginator__finite"
  *ngIf="paginatorType === 'finite' && paginationGenerator(rows, currentPage) as pagingData"
  >
- <button class="control control_left" [disabled]="currentPage === 1" (click)="decrease()">
+ <button class="control control_left" [disabled]="disabled || currentPage === 1" (click)="decrease()">
  <prizm-icon size="16" iconClass="arrows-chevron-left"></prizm-icon>
  <span *ngIf="!!leftButtonLabel">{{ leftButtonLabel }}</span>
  </button>
 
  <ng-container *ngIf="!paginatorOptions?.noPages">
  <ng-container *ngIf="pagingData.left">
- <button class="page" type="button" (click)="changePage(pagingData.left)">
+ <button
+ class="page"
+ type="button"
+ (click)="changePage(pagingData.left)"
+ [disabled]="disabled"
+ [class.page_disabled]="disabled"
+ >
  {{ pagingData.left }}
  </button>
- <div class="dots" *ngIf="pagingData.left + 1 !== pagingData.mid[0]">...</div>
+ <div
+ class="dots"
+ *ngIf="pagingData.left + 1 !== pagingData.mid[0]"
+ [class.dots_disabled]="disabled"
+ >
+ ...
+ </div>
  </ng-container>
 
  <button
  class="page"
  type="button"
+ [disabled]="disabled"
+ [class.page_disabled]="disabled"
  *ngFor="let page of pagingData.mid"
  [class.page_selected]="page === currentPage"
  (click)="changePage(page)"
@@ -54,18 +69,28 @@
  </button>
 
  <ng-container *ngIf="pagingData.right">
- <div class="dots" *ngIf="pagingData.right - 1 !== pagingData.mid[pagingData.mid.length - 1]">
+ <div
+ class="dots"
+ *ngIf="pagingData.right - 1 !== pagingData.mid[pagingData.mid.length - 1]"
+ [class.dots_disabled]="disabled"
+ >
  ...
  </div>
- <button class="page" type="button" (click)="changePage(pagingData.right)">
+ <button
+ class="page"
+ type="button"
+ (click)="changePage(pagingData.right)"
+ [disabled]="disabled"
+ [class.page_disabled]="disabled"
+ >
  {{ pagingData.right }}
  </button>
  </ng-container>
  </ng-container>
 
  <button
  class="control control_right"
- [disabled]="currentPage === pagesCount ?? currentPage === 0"
+ [disabled]="disabled || (currentPage === pagesCount ?? currentPage === 0)"
  (click)="increase()"
  >
  <span *ngIf="!!rightButtonLabel">{{ rightButtonLabel }}</span>
@@ -74,7 +99,12 @@
  </div>
 
  <div class="paginator paginator__infinite" *ngIf="paginatorType === 'infinite'">
- <button class="show-more" [disabled]="showMoreDisabled" (click)="increase()">
+ <button
+ class="show-more"
+ [disabled]="disabled || showMoreDisabled"
+ (click)="increase()"
+ [class.show-more_disabled]="disabled || showMoreDisabled"
+ >
  {{ moreButtonLabel }}
  </button>
  </div>

libs/components/src/lib/components/paginator/prizm-paginator.component.less

@@ -77,20 +77,24 @@
  font-weight: 600;
  color: var(--prizm-grey-g7-g7);
 
- &:hover {
+ &:not([disabled]):hover {
  background: var(--prizm-grey-g12-g2);
  color: var(--prizm-exeptions-g1-b1);
 
  transition: 300ms;
  }
 
- &:focus,
+ &:not([disabled]):focus,
  &_selected {
  background: var(--prizm-lite-b130-20);
  color: var(--prizm-exeptions-g1-b1);
 
  transition: 300ms;
  }
+ &_disabled {
+ cursor: not-allowed;
+ color: var(--prizm-grey-g10-g4);
+ }
  }
 
  .dots {
@@ -102,6 +106,10 @@
  justify-content: center;
 
  color: var(--prizm-grey-g7-g7);
+ &_disabled {
+ cursor: not-allowed;
+ color: var(--prizm-grey-g10-g4);
+ }
  }
 
  .control {
@@ -134,7 +142,6 @@
 
  &:disabled {
  color: var(--prizm-grey-g10-g4);
-
  cursor: not-allowed;
  }
  }
@@ -146,6 +153,11 @@
  color: var(--prizm-index-plan);
  text-decoration: underline var(--prizm-index-plan);
  cursor: pointer;
+ &_disabled {
+ cursor: not-allowed;
+ text-decoration-color: var(--prizm-grey-g10-g4);
+ color: var(--prizm-grey-g10-g4);
+ }
  }
  }
  }

libs/components/src/lib/components/paginator/prizm-paginator.component.ts

@@ -20,6 +20,8 @@ export class PrizmPaginatorComponent {
  // Сколько номеров видно на экране
  @Input() public pageLinkSize: number | null = null;
  @Input() public showMoreDisabled = false;
+ // disabled
+ @Input() public disabled = false;
 
  // Сколько данных в одном пакете
  @Input() public rows: number | null = null;