feat(pagination): pagination with bullets (#1090)

allianz · Dec 12, 2023 · f334029 · f334029
1 parent 0b0bad1
commit f334029
Show file tree

Hide file tree

Showing 11 changed files with 208 additions and 0 deletions.
diff --git a/projects/ng-aquila/documentation/examples/pagination/pagination-examples.module.ts b/projects/ng-aquila/documentation/examples/pagination/pagination-examples.module.ts
@@ -9,13 +9,15 @@ import { PaginationAdvancedExampleComponent } from './pagination-advanced/pagina
 import { PaginationLocalizeExampleComponent } from './pagination-localize/pagination-localize-example';
 import { PaginationLocalizeAdvancedExampleComponent } from './pagination-localize-advanced/pagination-localize-advanced-example';
 import { PaginationSimpleExampleComponent } from './pagination-simple/pagination-simple-example';
+import { PaginationSliderExampleComponent } from './pagination-slider/pagination-slider-example';
 
 const EXAMPLES = [
     PaginationAdvancedExampleComponent,
     PaginationLocalizeExampleComponent,
     PaginationLocalizeAdvancedExampleComponent,
     PaginationSimpleExampleComponent,
     PaginationA11yExampleComponent,
+    PaginationSliderExampleComponent,
 ];
 
 @NgModule({
@@ -37,6 +39,7 @@ export class PaginationExamplesModule {
                 PaginationLocalizeAdvancedExampleComponent,
             'pagination-simple': PaginationSimpleExampleComponent,
             'pagination-a11y': PaginationA11yExampleComponent,
+            'pagination-slider': PaginationSliderExampleComponent,
         };
     }
 }
diff --git a/...-aquila/documentation/examples/pagination/pagination-slider/pagination-slider-example.css b/...-aquila/documentation/examples/pagination/pagination-slider/pagination-slider-example.css
diff --git a/...aquila/documentation/examples/pagination/pagination-slider/pagination-slider-example.html b/...aquila/documentation/examples/pagination/pagination-slider/pagination-slider-example.html
@@ -0,0 +1,9 @@
+<nx-pagination
+    [count]="slides"
+    [page]="activeSlide"
+    type="slider"
+    (goPrev)="prevPage()"
+    (goNext)="nextPage()"
+    (goPage)="goToPage($event)"
+>
+</nx-pagination>
diff --git a/...g-aquila/documentation/examples/pagination/pagination-slider/pagination-slider-example.ts b/...g-aquila/documentation/examples/pagination/pagination-slider/pagination-slider-example.ts
@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+
+/**
+ * @title Slider Pagination Example
+ */
+@Component({
+    selector: 'pagination-slider-example',
+    templateUrl: './pagination-slider-example.html',
+    styleUrls: ['./pagination-slider-example.css'],
+})
+export class PaginationSliderExampleComponent {
+    activeSlide = 1;
+    slides = 6;
+
+    prevPage() {
+        this.activeSlide--;
+    }
+
+    nextPage() {
+        this.activeSlide++;
+    }
+
+    goToPage(n: number) {
+        this.activeSlide = n;
+    }
+}
diff --git a/projects/ng-aquila/src/pagination/pagination-utils.ts b/projects/ng-aquila/src/pagination/pagination-utils.ts
@@ -15,6 +15,10 @@ export class NxPaginationUtils {
     private readonly _elipsisText = '...';
     private readonly _classExpanded = 'expanded-view';
 
+    getSlides(totalSlides: number): any[] {
+        return Array.from(Array(totalSlides).keys()).map(item => this.createPaginationItem(item + 1, item + 1));
+    }
+
     getPages(currentPage: number, totalPages: number): Page[] {
         let pages = [];
         let start = [],

diff --git a/projects/ng-aquila/src/pagination/pagination.component.html b/projects/ng-aquila/src/pagination/pagination.component.html
@@ -115,3 +115,43 @@
         <nx-icon class="nx-pagination__arrow" [name]="_isRTL ? 'arrow-left' : 'arrow-right'"></nx-icon>
     </button>
 </nav>
+<nav *ngIf="isPaginationSliderVisible()" [attr.aria-label]="ariaLabel" class="nx-pagination-slider">
+    <ul class="nx-pagination__container">
+        <li class="nx-pagination__item nx-pagination__item-previous">
+            <button
+                #link
+                [disabled]="_isPaginationSliderPreviousDisabled()"
+                [attr.aria-label]="paginationTexts.previous"
+                [class.is-disabled]="_isPaginationSliderPreviousDisabled()"
+                class="nx-pagination__link nx-pagination__link--previous"
+                (click)="onPrev()"
+                type="button"
+            >
+                <nx-icon class="nx-pagination__arrow" [name]="_isRTL ? 'arrow-right' : 'arrow-left'"></nx-icon>
+            </button>
+        </li>
+        <li *ngFor="let pageNum of getSlides()" class="nx-pagination__item">
+            <button
+                #link
+                class="nx-pagination--icon"
+                (click)="onPage(pageNum.value)"
+                [attr.aria-current]="pageNum.value === page ? 'page' : ''"
+                [class.is-active]="pageNum.value === page"
+                type="button"
+            ></button>
+        </li>
+        <li class="nx-pagination__item nx-pagination__item-next">
+            <button
+                #link
+                [disabled]="_isPaginationSliderNextDisabled()"
+                [attr.aria-label]="paginationTexts.next"
+                [class.is-disabled]="_isPaginationSliderNextDisabled()"
+                class="nx-pagination__link nx-pagination__link--next"
+                (click)="onNext()"
+                type="button"
+            >
+                <nx-icon class="nx-pagination__arrow" [name]="_isRTL ? 'arrow-left' : 'arrow-right'"></nx-icon>
+            </button>
+        </li>
+    </ul>
+</nav>
diff --git a/projects/ng-aquila/src/pagination/pagination.component.scss b/projects/ng-aquila/src/pagination/pagination.component.scss
@@ -217,3 +217,24 @@ nx-icon.nx-pagination__arrow {
         display: block;
     }
 }
+
+.nx-pagination-slider {
+    .nx-pagination__item {
+        display: flex;
+        align-items: center;
+        margin: 0 nx-spacer(s);
+    }
+    .nx-pagination--icon {
+        width: v(pagination-slider-icon-width);
+        height: v(pagination-slider-icon-height);
+        border: 1px solid v(pagination-slider-icon-border-color);
+        border-radius: 50%;
+        padding: 0;
+        background: none;
+        cursor: pointer;
+    }
+    .nx-pagination--icon.is-active {
+        background-color: v(pagination-slider-icon-active-color);
+        cursor: auto;
+    }
+}
diff --git a/projects/ng-aquila/src/pagination/pagination.component.spec.ts b/projects/ng-aquila/src/pagination/pagination.component.spec.ts
@@ -45,6 +45,8 @@ describe('NxPaginationComponent', () => {
     let mobileListElements: DebugElement[];
     let mobilePageElements: DebugElement[];
 
+    let sliderElements: DebugElement[];
+
     function createTestComponent(component: Type<PaginationTest>) {
         fixture = TestBed.createComponent(component);
         fixture.detectChanges();
@@ -65,6 +67,8 @@ describe('NxPaginationComponent', () => {
         mobileListElements = fixture.nativeElement.querySelectorAll('.nx-pagination__item.nx-pagination__item--mobile');
         pageElements = fixture.nativeElement.querySelectorAll('.nx-pagination__item:not(.nx-pagination__item--mobile) .nx-pagination--number');
         mobilePageElements = fixture.nativeElement.querySelectorAll('.nx-pagination__item.nx-pagination__item--mobile .nx-pagination--number');
+
+        sliderElements = fixture.nativeElement.querySelectorAll('.nx-pagination__item:not(.nx-pagination__item--mobile) .nx-pagination--icon');
     }
 
     beforeEach(waitForAsync(() => {
@@ -80,6 +84,8 @@ describe('NxPaginationComponent', () => {
                 LocalizationToken,
                 SimplePaginationWithDirection,
                 AdvancedPaginationWithDirection,
+                SliderPagination,
+                SliderPaginationBeginat6,
             ],
             providers: [NxPaginationUtils],
         }).compileComponents();
@@ -212,6 +218,50 @@ describe('NxPaginationComponent', () => {
         });
     });
 
+    describe('slider variation', () => {
+        it('displays a slider pagination', () => {
+            createTestComponent(SliderPagination);
+            expect(sliderElements).not.toBeNull();
+            expect(listElements).not.toHaveSize(0);
+        });
+
+        it('should emit an event when click next arrow', () => {
+            createTestComponent(SliderPagination);
+            fixture.detectChanges();
+            nextArrow.click();
+            expect(testInstance.nextPage).toHaveBeenCalled();
+        });
+
+        it('should emit an event when click next arrow', () => {
+            createTestComponent(SliderPagination);
+            fixture.detectChanges();
+            nextArrow.click();
+            expect(testInstance.nextPage).toHaveBeenCalled();
+        });
+
+        it('should emit an event when click prev arrow', () => {
+            createTestComponent(SliderPaginationBeginat6);
+            fixture.detectChanges();
+            prevArrow.click();
+            expect(testInstance.prevPage).toHaveBeenCalled();
+        });
+
+        it('should emit an event when click a page', () => {
+            createTestComponent(SliderPagination);
+            fixture.detectChanges();
+            const pages = fixture.debugElement.nativeElement.querySelector('.nx-pagination--icon');
+            pages.click();
+            expect(testInstance.goToPage).toHaveBeenCalled();
+        });
+
+        it('should emit an event when click a page', () => {
+            createTestComponent(SliderPagination);
+            const pages = fixture.debugElement.nativeElement.querySelector('.nx-pagination--icon');
+            pages.click();
+            expect(testInstance.goToPage).toHaveBeenCalled();
+        });
+    });
+
     describe('mobile pagination', () => {
         it('should display advanced mobile pagination correctly', waitForAsync(() => {
             createTestComponent(AdvancedPagination);
@@ -518,3 +568,31 @@ class AdvancedPaginationWithDirection extends PaginationTest {
     perPage = 10;
     type = 'advanced';
 }
+
+@Component({
+    template: `
+        <nx-pagination
+            [count]="slides"
+            [page]="activeSlide"
+            type="slider"
+            (goPrev)="prevPage()"
+            (goNext)="nextPage()"
+            (goPage)="goToPage($event)"
+        ></nx-pagination>
+    `,
+})
+class SliderPagination extends PaginationTest {
+    slides = 6;
+    activeSlide = 1;
+}
+
+@Component({
+    template: `
+        <nx-pagination [count]="slides" [page]="activeSlide" type="slider" (goPrev)="prevPage()" (goNext)="nextPage()" (goPage)="goToPage($event)">
+        </nx-pagination>
+    `,
+})
+class SliderPaginationBeginat6 extends PaginationTest {
+    slides = 6;
+    activeSlide = 6;
+}
diff --git a/projects/ng-aquila/src/pagination/pagination.component.ts b/projects/ng-aquila/src/pagination/pagination.component.ts
@@ -216,6 +216,11 @@ export class NxPaginationComponent implements OnInit, AfterContentInit, AfterVie
         return this._perPage * this._page >= this._count;
     }
 
+    /** @docs-private */
+    getSlides(): Page[] {
+        return this.paginationUtilsService.getSlides(this._count);
+    }
+
     /** @docs-private */
     getPages(): Page[] {
         return this.paginationUtilsService.getPages(this._page, this.totalNumberPages);
@@ -255,6 +260,11 @@ export class NxPaginationComponent implements OnInit, AfterContentInit, AfterVie
         return this.type.includes('simple') && this.count > 0;
     }
 
+    /** Returns true, if `nxCount` is greater than 0 and the type of pagination is 'slider', else false. */
+    isPaginationSliderVisible(): boolean {
+        return this.type.includes('slider') && this.count > 0;
+    }
+
     /** @docs-private */
     isPaginationContainerVisible(): boolean {
         return this.type.includes('advanced');
@@ -268,6 +278,14 @@ export class NxPaginationComponent implements OnInit, AfterContentInit, AfterVie
         return this.page === this.totalNumberPages;
     }
 
+    _isPaginationSliderPreviousDisabled(): boolean {
+        return this.page === 1;
+    }
+
+    _isPaginationSliderNextDisabled(): boolean {
+        return this.page === this.count;
+    }
+
     get _isRTL(): boolean {
         return this._dir?.value === 'rtl';
     }

diff --git a/projects/ng-aquila/src/pagination/pagination.md b/projects/ng-aquila/src/pagination/pagination.md
@@ -22,6 +22,11 @@ Pagination is used for splitting up content or data into several pages, with con
 
 <!-- example(pagination-simple) -->
 
+### Slider Pagination
+The pagination can be used for a slider using `type="slider"`. **Important:** Maximum 6 slides are supported. 
+
+<!-- example(pagination-slider) -->
+
 ### Localization
 
 In order to localize the component you have to implement the interface `IPaginationTexts` and provide your implementation with the `NX_PAGINATION_TEXTS` injection token.

diff --git a/projects/ng-aquila/src/shared-styles/theming/tokens.scss b/projects/ng-aquila/src/shared-styles/theming/tokens.scss
@@ -927,6 +927,10 @@ $nx-theme: (
     pagination-compact-direction-line-height: link-small-line-height,
     pagination-compact-direction-font-weight: link-small-font-weight,
     pagination-compact-direction-letter-spacing: link-small-letter-spacing,
+    pagination-slider-icon-width: 8px,
+    pagination-slider-icon-height: 8px,
+    pagination-slider-icon-border-color: ui-06,
+    pagination-slider-icon-active-color: ui-06,
     natural-language-form-large-font-size: heading-02-font-size,
     natural-language-form-large-line-height: 52px,
     natural-language-form-large-font-weight: heading-02-font-weight,