feat(pagination): allow dynamic dir switching (#125)

allianz · Dec 3, 2020 · ae7a65e · ae7a65e
1 parent 79e37c3
commit ae7a65e
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 3 deletions.
diff --git a/projects/ng-aquila/src/pagination/pagination.component.spec.ts b/projects/ng-aquila/src/pagination/pagination.component.spec.ts
@@ -6,6 +6,7 @@ import { By } from '@angular/platform-browser';
 import * as axe from 'axe-core';
 import { NX_PAGINATION_TEXTS, IPaginationTexts } from './pagination-texts';
 import { NxPaginationUtils } from './pagination-utils';
+import { Direction, BidiModule } from '@angular/cdk/bidi';
 
 declare var viewport: any;
 
@@ -74,7 +75,8 @@ describe('NxPaginationComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
-        NxPaginationModule
+        NxPaginationModule,
+        BidiModule,
       ],
       declarations: [
         SimplePagination,
@@ -83,7 +85,9 @@ describe('NxPaginationComponent', () => {
         AdvancedPaginationLess10,
         AdvancedPaginationMore10,
         AdvancedPaginationBeginat10,
-        LocalizationToken
+        LocalizationToken,
+        SimplePaginationWithDirection,
+        AdvancedPaginationWithDirection
       ],
       providers: [
         NxPaginationUtils,
@@ -275,6 +279,49 @@ describe('NxPaginationComponent', () => {
     });
   });
 
+  describe('directionality change', () => {
+    it('triggers change detection', () => {
+      createTestComponent(SimplePaginationWithDirection);
+      fixture.detectChanges();
+      spyOn((paginationInstance as any)._changeDetectorRef, 'detectChanges');
+      (testInstance as SimplePaginationWithDirection).direction = 'rtl';
+      fixture.detectChanges();
+      expect((paginationInstance as any)._changeDetectorRef.detectChanges).toHaveBeenCalledTimes(1);
+    });
+
+    it('updates arrow icons for simple pagination', () => {
+      createTestComponent(SimplePaginationWithDirection);
+      fixture.detectChanges();
+      const prevArrowSimpleIcon = prevArrowSimple.querySelector('nx-icon');
+      const nextArrowSimpleIcon = nextArrowSimple.querySelector('nx-icon');
+      expect(prevArrowSimpleIcon.getAttribute('ng-reflect-name')).toBe('arrow-left');
+      expect(nextArrowSimpleIcon.getAttribute('ng-reflect-name')).toBe('arrow-right');
+      (testInstance as SimplePaginationWithDirection).direction = 'rtl';
+      fixture.detectChanges();
+      expect(prevArrowSimpleIcon.getAttribute('ng-reflect-name')).toBe('arrow-right');
+      expect(nextArrowSimpleIcon.getAttribute('ng-reflect-name')).toBe('arrow-left');
+    });
+
+    it('updates arrow icons for advanced pagination', () => {
+      createTestComponent(AdvancedPaginationWithDirection);
+      fixture.detectChanges();
+      const prevArrowIcon = prevArrow.querySelector('nx-icon');
+      const nextArrowIcon = nextArrow.querySelector('nx-icon');
+      const lastArrowIcon = fixture.debugElement.nativeElement.querySelector('.nx-pagination__link--last nx-icon');
+      const firstArrowIcon = fixture.debugElement.nativeElement.querySelector('.nx-pagination__link--first nx-icon');
+      expect(prevArrowIcon.getAttribute('ng-reflect-name')).toBe('arrow-left');
+      expect(nextArrowIcon.getAttribute('ng-reflect-name')).toBe('arrow-right');
+      expect(lastArrowIcon.getAttribute('ng-reflect-name')).toBe('arrow-last');
+      expect(firstArrowIcon.getAttribute('ng-reflect-name')).toBe('arrow-first');
+      (testInstance as AdvancedPaginationWithDirection).direction = 'rtl';
+      fixture.detectChanges();
+      expect(prevArrowIcon.getAttribute('ng-reflect-name')).toBe('arrow-right');
+      expect(nextArrowIcon.getAttribute('ng-reflect-name')).toBe('arrow-left');
+      expect(lastArrowIcon.getAttribute('ng-reflect-name')).toBe('arrow-first');
+      expect(firstArrowIcon.getAttribute('ng-reflect-name')).toBe('arrow-last');
+    });
+  });
+
   // The test fails because the disabled styles of the NEXT/PREVIOUS button is not conform with the contrast requirements
   // It was aligned with the designers that disabled elements should not fulfill the contrast requirements
   // tslint:disable-next-line:no-disabled-tests
@@ -381,3 +428,33 @@ class LocalizationToken extends PaginationTest {
   count: number = 210;
   perPage: number = 10;
 }
+
+@Component({
+  template: `
+  <div [dir]='direction'>
+    <nx-pagination [nxCount]="count" [nxPage]="page" [nxPerPage]="perPage"
+    (nxGoPrev)="prevPage()" (nxGoNext)="nextPage()" (nxGoPage)="goToPage($event)"></nx-pagination>
+  </div>
+  `
+})
+class SimplePaginationWithDirection extends PaginationTest {
+  direction: Direction = 'ltr';
+  count: number = 210;
+  perPage: number = 10;
+}
+
+@Component({
+  template: `
+  <div [dir]='direction'>
+    <nx-pagination [nxCount]="count" [nxPage]="page" [nxPerPage]="perPage" [nxType]="type"
+    (nxGoPrev)="prevPage()" (nxGoNext)="nextPage()" (nxGoPage)="goToPage($event)">
+    </nx-pagination>
+  </div>
+  `
+})
+class AdvancedPaginationWithDirection extends PaginationTest {
+  direction: Direction = 'ltr';
+  count: number = 210;
+  perPage: number = 10;
+  type: string = 'advanced';
+}
diff --git a/projects/ng-aquila/src/pagination/pagination.component.ts b/projects/ng-aquila/src/pagination/pagination.component.ts
@@ -9,7 +9,6 @@ import {
   Optional,
   Output,
   AfterContentInit,
-  ViewChild,
   ViewChildren,
   QueryList,
   ElementRef,
@@ -21,6 +20,7 @@ import { DefaultPaginationTexts, IPaginationTexts, NX_PAGINATION_TEXTS } from '.
 import { NxPaginationUtils } from './pagination-utils';
 import { Directionality } from '@angular/cdk/bidi';
 import { FocusMonitor } from '@angular/cdk/a11y';
+import { Subscription } from 'rxjs';
 
 /** @docs-private */
 export interface Page {
@@ -47,6 +47,7 @@ export class NxPaginationComponent implements OnInit, AfterContentInit, AfterVie
   private _count: number;
   private _perPage: number;
   private _type: string = 'simple';
+  private _dirChangeSubscription: Subscription;
 
   /** @docs-private */
   paginationTexts: IPaginationTexts;
@@ -112,6 +113,9 @@ export class NxPaginationComponent implements OnInit, AfterContentInit, AfterVie
       private _changeDetectorRef: ChangeDetectorRef,
       private _focusMonitor: FocusMonitor) {
     this.paginationTexts = paginationTexts || DefaultPaginationTexts;
+    this._dirChangeSubscription = this._dir.change.subscribe(() => {
+      this._changeDetectorRef.detectChanges();
+    });
    }
 
   ngOnInit() {
@@ -136,6 +140,7 @@ export class NxPaginationComponent implements OnInit, AfterContentInit, AfterVie
 
   ngOnDestroy() {
     this._linkElements.forEach(link => this._focusMonitor.stopMonitoring(link));
+    this._dirChangeSubscription.unsubscribe();
   }
 
   /** Returns the number of the first page. */