[UXP-34] add pagination change on slide

Author: FrancescoMolinaro

src/app/shared/carousel/carousel.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="!(isLoading$ | async) && itemList?.length > 0">
   <ngb-carousel #carousel [interval]="2000" (slide)="onSlide($event)" class="ds-carousel">
-    <ng-template ngbSlide *ngFor="let item of currentPageItems(); let i = index; let last = last">
+    <ng-template ngbSlide [id]="'slide_' + i" *ngFor="let item of currentPageItems(); let i = index; let last = last">
       <ng-container *ngIf="getItemLink(item.indexableObject); let currentLink; else carouselContent">
         <a *ngIf="isLinkInternal(currentLink)" [routerLink]="currentLink">
           <ng-container *ngTemplateOutlet="carouselContent"></ng-container>
@@ -41,7 +41,7 @@
     </button>
   </div>
   <div class="mt-4 w-100 d-flex justify-content-center align-items-center" *ngIf="totalPages > 1">
-    <button (click)="previousPage()" [disabled]="currentPage === 1" class="prev">
+    <button (click)="previousPage()" [disabled]="currentPage === 1" class="prev border-0 bg-transparent">
       <i class="fa fa-arrow-left"></i>
     </button>
     <button
@@ -52,7 +52,7 @@
       [style.color]="page === currentPage ? '#000000' : '#7c7c7c'">
       {{ page < 10 ? '0' + page : page }}
     </button>
-    <button (click)="nextPage()" [disabled]="currentPage === pages().length" class="next">
+    <button (click)="nextPage()" [disabled]="currentPage === pages().length" class="next border-0 bg-transparent">
       <i class="fa fa-arrow-right"></i>
     </button>
   </div>

src/app/shared/carousel/carousel.component.ts

@@ -78,7 +78,7 @@ export class CarouselComponent implements OnInit {
   /**
    * reference to the carousel
    */
-  @ViewChild('carousel', {static: true}) carousel: NgbCarousel;
+  @ViewChild('carousel', {static: false}) carousel: NgbCarousel;
 
   isLoading$ = new BehaviorSubject(true);
 
@@ -159,13 +159,26 @@ export class CarouselComponent implements OnInit {
    * function to call on slide
    */
   onSlide(slideEvent: NgbSlideEvent) {
+    const previousSlideIndex = parseInt(slideEvent.prev.split(('_'))[1], 10);
+    const direction = slideEvent.direction;
+
     if (this.unpauseOnArrow && slideEvent.paused &&
       (slideEvent.source === NgbSlideEventSource.ARROW_LEFT || slideEvent.source === NgbSlideEventSource.ARROW_RIGHT)) {
       this.togglePaused();
     }
     if (this.pauseOnIndicator && !slideEvent.paused && slideEvent.source === NgbSlideEventSource.INDICATOR) {
       this.togglePaused();
     }
+
+    if (previousSlideIndex === (this.carouselOptions.numberOfItems - 1) && direction === 'left' && (this.hasMoreToLoad || this.currentPage < this.totalPages)) {
+      this.changePage(this.currentPage + 1);
+    } else if (previousSlideIndex === 0 && direction === 'right' && this.currentPage !== 1) {
+      this.changePage(this.currentPage - 1);
+    } else if (previousSlideIndex === 0 && direction === 'right' && this.currentPage === 1) {
+      this.changePage(this.totalPages);
+    } else if (previousSlideIndex === (this.currentPageItems().length - 1) && direction === 'left' && (!this.hasMoreToLoad || this.currentPage === this.totalPages)) {
+      this.changePage(1);
+    }
   }
 
   /**