feat(pagination): allow setting of a custom css class on <li> (#1115)

* Pagination: allow setting of a custom css class on <li>

* Rename classLi to pageBtnClass

* Remove btn-primary class from exemple

Author: SylTi

components/pagination/pager.component.ts

@@ -7,15 +7,16 @@ const pagerConfig = {
   itemsPerPage: 10,
   previousText: '« Previous',
   nextText: 'Next »',
+  pageBtnClass: '',
   align: true
 };
 
 const PAGER_TEMPLATE = `
     <ul class="pager">
-      <li [class.disabled]="noPrevious()" [class.previous]="align" [ngClass]="{'pull-right': align}">
+      <li [class.disabled]="noPrevious()" [class.previous]="align" [ngClass]="{'pull-right': align}" class="{{ pageBtnClass }}">
         <a href (click)="selectPage(page - 1, $event)">{{getText('previous')}}</a>
       </li>
-      <li [class.disabled]="noNext()" [class.next]="align" [ngClass]="{'pull-right': align}">
+      <li [class.disabled]="noNext()" [class.next]="align" [ngClass]="{'pull-right': align}" class="{{ pageBtnClass }}">
         <a href (click)="selectPage(page + 1, $event)">{{getText('next')}}</a>
       </li>
   </ul>

components/pagination/pagination.component.ts

@@ -21,6 +21,8 @@ export interface PaginationConfig extends KeyAttribute {
   previousText:string;
   nextText:string;
   lastText:string;
+  // css
+  pageBtnClass:string;
 
   rotate:boolean;
 }
@@ -38,38 +40,44 @@ const paginationConfig:PaginationConfig = {
   previousText: 'Previous',
   nextText: 'Next',
   lastText: 'Last',
+  pageBtnClass: '',
   rotate: true
 };
 
 const PAGINATION_TEMPLATE = `
   <ul class="pagination" [ngClass]="classMap">
     <li class="pagination-first page-item"
         *ngIf="boundaryLinks"
-        [class.disabled]="noPrevious()||disabled">
+        [class.disabled]="noPrevious()||disabled"
+        class="{{ pageBtnClass }}">
       <a class="page-link" href (click)="selectPage(1, $event)" [innerHTML]="getText('first')"></a>
     </li>
 
     <li class="pagination-prev page-item"
         *ngIf="directionLinks"
-        [class.disabled]="noPrevious()||disabled">
+        [class.disabled]="noPrevious()||disabled"
+        class="{{ pageBtnClass }}">
       <a class="page-link" href (click)="selectPage(page - 1, $event)" [innerHTML]="getText('previous')"></a>
       </li>
 
     <li *ngFor="let pg of pages"
         [class.active]="pg.active"
         [class.disabled]="disabled&&!pg.active"
-        class="pagination-page page-item">
+        class="pagination-page page-item"
+        class="{{ pageBtnClass }}">
       <a class="page-link" href (click)="selectPage(pg.number, $event)" [innerHTML]="pg.text"></a>
     </li>
 
     <li class="pagination-next page-item"
         *ngIf="directionLinks"
-        [class.disabled]="noNext()||disabled">
+        [class.disabled]="noNext()||disabled"
+        class="{{ pageBtnClass }}">
       <a class="page-link" href (click)="selectPage(page + 1, $event)" [innerHTML]="getText('next')"></a></li>
 
     <li class="pagination-last page-item"
         *ngIf="boundaryLinks"
-        [class.disabled]="noNext()||disabled">
+        [class.disabled]="noNext()||disabled"
+        class="{{ pageBtnClass }}">
       <a class="page-link" href (click)="selectPage(totalPages, $event)" [innerHTML]="getText('last')"></a></li>
   </ul>
   `;
@@ -94,6 +102,8 @@ export class PaginationComponent implements ControlValueAccessor, OnInit, Pagina
   @Input() public nextText:string;
   @Input() public lastText:string;
   @Input() public rotate:boolean;
+  // css
+  @Input() public pageBtnClass:string;
 
   @Input() public disabled:boolean;
 
@@ -189,6 +199,9 @@ export class PaginationComponent implements ControlValueAccessor, OnInit, Pagina
     this.directionLinks = typeof this.directionLinks !== 'undefined'
       ? this.directionLinks
       : paginationConfig.directionLinks;
+    this.pageBtnClass = typeof this.pageBtnClass !== 'undefined'
+    ? this.pageBtnClass
+    : paginationConfig.pageBtnClass;
 
     // base class
     this.itemsPerPage = typeof this.itemsPerPage !== 'undefined'

components/pagination/readme.md

@@ -23,6 +23,8 @@ export class PaginationComponent implements ControlValueAccessor, OnInit, IPagin
   @Input() public nextText:string;
   @Input() public lastText:string;
   @Input() public rotate:boolean;
+  // css
+  @Input() public pageBtnClass: string;
 
   @Input() public disabled:boolean;
   @Input() public get itemsPerPage():number {}
@@ -49,6 +51,7 @@ export class PagerComponent extends Pagination {}
   - `nextText` (`?string='Next'`) - next button text
   - `firstText` (`?string='First'`) - first button text
   - `lastText` (`?string='Last'`) - last button text
+  - `pageBtnClass` (`?string=''`) - add class to `<li>`
 
 ### Pagination events
   - `numPages` - fired when total pages count changes, `$event:number` equals to total pages count
@@ -61,6 +64,7 @@ export class PagerComponent extends Pagination {}
   - `itemsPerPage` (`?number=10`) - maximum number of items per page. If value less than 1 will display all items on one page
   - `previousText` (`?string='Previous'`) - previous button text
   - `nextText` (`?string='Next'`) - next button text
+  - `pageBtnClass` (`?string=''`) - add class to `<li>`
 
 ### Pager events
   - `numPages` - fired when total pages count changes, `$event:number` equals to total pages count

demo/components/pagination/pagination-demo.html

@@ -14,7 +14,7 @@ <h4>Default</h4>
   <hr class="visible-md visible-xs hidden-lg-up">
   <div class="col-lg-6" style="margin-top: 10px;">
     <h4>Pager</h4>
-    <pager [totalItems]="totalItems" [(ngModel)]="currentPage" (pageChanged)="pageChanged($event)"></pager>
+    <pager [totalItems]="totalItems" [(ngModel)]="currentPage" (pageChanged)="pageChanged($event)" pageBtnClass="btn"></pager>
 
     <hr/>
     <h4>Limit the maximum visible buttons</h4>