feat(tabs): add full rtl support

CHANGELOG.md

@@ -3,13 +3,16 @@
 All notable changes for each version of this project will be documented in this file.
 
 ## 13.1.0
+
 ### New Features
 - `igxTooltipTarget` directive now allows specifying a plain text tooltip without adding an additional DOM element decorated with the `igxTooltip` directive. This is achieved via the newly introduced `tooltip` string input.
     ```html
     <button igxTooltipTarget [tooltip]="'Infragistics Inc. HQ'">
        info
     </button>
     ```
+- `IgxTabs` have full right-to-left (RTL) support.
+
 ### General
 
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`

projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss

@@ -58,30 +58,23 @@
 @function igx-tabs-theme(
     $palette: null,
     $schema: $light-schema,
-
     $item-text-color: null,
     $item-background: null,
-
     $item-hover-background: null,
     $item-hover-color: null,
-
     $item-active-color: null,
     $item-active-icon-color: null,
     $item-active-background: null,
     $indicator-color: null,
-
     $button-color: null,
     $button-background: null,
     $button-hover-background: null,
     $button-hover-color: null,
-
     $tab-ripple-color: null,
     $button-ripple-color: null,
     $border-radius: null,
-
     $border-color: null,
     $border-color--hover: null,
-
     $disable-shadow: true
 ) {
     $name: 'igx-tabs';
@@ -347,6 +340,10 @@
             display: none;
         }
 
+        @include if-rtl() {
+            transform: scaleX(-1);
+        }
+
         @include igx-ripple($button-ripple-theme);
         @include igx-css-vars($button-ripple-theme);
     }
@@ -594,5 +591,3 @@
         }
     }
 }
-
-

projects/igniteui-angular/src/lib/tabs/tabs.directive.ts

@@ -6,6 +6,7 @@ import {
 import { Subscription } from 'rxjs';
 import { Direction, IgxCarouselComponentBase } from '../carousel/carousel-base';
 import { IBaseEventArgs } from '../core/utils';
+import { IgxDirectionality } from '../services/direction/directionality';
 import { IgxTabItemDirective } from './tab-item.directive';
 import { IgxTabContentBase, IgxTabsBase } from './tabs.base';
 
@@ -119,7 +120,7 @@ export abstract class IgxTabsDirective extends IgxCarouselComponentBase implemen
     private _itemChanges$: Subscription;
 
     /** @hidden */
-    constructor(builder: AnimationBuilder, cdr: ChangeDetectorRef) {
+    constructor(builder: AnimationBuilder, cdr: ChangeDetectorRef, public dir: IgxDirectionality) {
         super(builder, cdr);
     }
 
@@ -293,7 +294,9 @@ export abstract class IgxTabsDirective extends IgxCarouselComponentBase implemen
             this.hasPanels &&
             this.currentItem &&
             !this.currentItem.selected) {
-            item.direction = this._selectedIndex > oldSelectedIndex ? Direction.NEXT : Direction.PREV;
+            item.direction = (!this.dir.rtl && this._selectedIndex > oldSelectedIndex) ||
+                (this.dir.rtl && this._selectedIndex < oldSelectedIndex)
+                ? Direction.NEXT : Direction.PREV;
 
             if (this.previousItem && this.previousItem.previous) {
                 this.previousItem.previous = false;

projects/igniteui-angular/src/lib/tabs/tabs/tab-header.component.ts

@@ -5,6 +5,7 @@ import { IgxTabHeaderBase } from '../tabs.base';
 import { IgxTabsComponent } from './tabs.component';
 import { getResizeObserver } from '../../core/utils';
 import { PlatformUtil } from '../../core/utils';
+import { IgxDirectionality } from '../../services/direction/directionality';
 
 @Component({
     selector: 'igx-tab-header',
@@ -37,7 +38,8 @@ export class IgxTabHeaderComponent extends IgxTabHeaderDirective implements Afte
         tab: IgxTabItemDirective,
         elementRef: ElementRef<HTMLElement>,
         protected platform: PlatformUtil,
-        private ngZone: NgZone
+        private ngZone: NgZone,
+        private dir: IgxDirectionality
     ) {
         super(tabs, tab, elementRef, platform);
     }
@@ -52,16 +54,10 @@ export class IgxTabHeaderComponent extends IgxTabHeaderDirective implements Afte
         const hasDisabledItems = itemsArray.some((item) => item.disabled);
         switch (event.key) {
             case this.platform.KEYMAP.ARROW_RIGHT:
-                newIndex = newIndex === itemsArray.length - 1 ? 0 : newIndex + 1;
-                while (hasDisabledItems && itemsArray[newIndex].disabled && newIndex < itemsArray.length) {
-                    newIndex = newIndex === itemsArray.length - 1 ? 0 : newIndex + 1;
-                }
+                newIndex = this.getNewSelectionIndex(newIndex, itemsArray, event.key, hasDisabledItems);
                 break;
             case this.platform.KEYMAP.ARROW_LEFT:
-                newIndex = newIndex === 0 ? itemsArray.length - 1 : newIndex - 1;
-                while (hasDisabledItems && itemsArray[newIndex].disabled && newIndex >= 0) {
-                    newIndex = newIndex === 0 ? itemsArray.length - 1 : newIndex - 1;
-                }
+                newIndex = this.getNewSelectionIndex(newIndex, itemsArray, event.key, hasDisabledItems);
                 break;
             case this.platform.KEYMAP.HOME:
                 event.preventDefault();
@@ -119,5 +115,20 @@ export class IgxTabHeaderComponent extends IgxTabHeaderDirective implements Afte
             this._resizeObserver?.disconnect();
         });
     }
+
+    private getNewSelectionIndex(newIndex: number, itemsArray: any[], key: string, hasDisabledItems: boolean): number {
+        if ((key === this.platform.KEYMAP.ARROW_RIGHT && !this.dir.rtl) || (key === this.platform.KEYMAP.ARROW_LEFT && this.dir.rtl)) {
+            newIndex = newIndex === itemsArray.length - 1 ? 0 : newIndex + 1;
+            while (hasDisabledItems && itemsArray[newIndex].disabled && newIndex < itemsArray.length) {
+                newIndex = newIndex === itemsArray.length - 1 ? 0 : newIndex + 1;
+            }
+        } else {
+            newIndex = newIndex === 0 ? itemsArray.length - 1 : newIndex - 1;
+            while (hasDisabledItems && itemsArray[newIndex].disabled && newIndex >= 0) {
+                newIndex = newIndex === 0 ? itemsArray.length - 1 : newIndex - 1;
+            }
+        }
+        return newIndex;
+    }
 }
 

projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.html

@@ -1,48 +1,24 @@
 <div #headerContainer class="igx-tabs__header">
-    <button
-        #leftButton
-        igxButton="icon"
-        igxRipple
-        class="igx-tabs__header-button"
-        (click)="scrollLeft()"
-    >
+    <button #scrollPrevButton igxButton="icon" igxRipple class="igx-tabs__header-button" (click)="scrollPrev()">
         <igx-icon>navigate_before</igx-icon>
     </button>
     <div #viewPort class="igx-tabs__header-content">
-        <div
-            #itemsWrapper
-            class="igx-tabs__header-wrapper"            
-            role="tablist"
-        >
-            <div 
-                #itemsContainer
-                class="igx-tabs__header-scroll"
-                [ngClass]="resolveHeaderScrollClasses()"
-            >
+        <div #itemsWrapper class="igx-tabs__header-wrapper" role="tablist">
+            <div #itemsContainer class="igx-tabs__header-scroll" [ngClass]="resolveHeaderScrollClasses()">
                 <ng-container *ngFor="let tab of items; let i = index">
                     <ng-container *ngTemplateOutlet="tab.headerTemplate"></ng-container>
                 </ng-container>
             </div>
-            <div
-                #selectedIndicator
-                *ngIf="items.length > 0"
-                class="igx-tabs__header-active-indicator"
-            >
+            <div #selectedIndicator *ngIf="items.length > 0" class="igx-tabs__header-active-indicator">
             </div>
         </div>
     </div>
-    <button
-        #rightButton
-        igxButton="icon"
-        igxRipple
-        class="igx-tabs__header-button"
-        (click)="scrollRight()"
-    >
+    <button #scrollNextButton igxButton="icon" igxRipple class="igx-tabs__header-button" (click)="scrollNext()">
         <igx-icon>navigate_next</igx-icon>
     </button>
 </div>
 <div class="igx-tabs__panels">
     <ng-container *ngFor="let tab of items; let i = index">
         <ng-container *ngTemplateOutlet="tab.panelTemplate"></ng-container>
     </ng-container>
-</div>
+</div>

projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.spec.ts

@@ -8,22 +8,26 @@ import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { Router } from '@angular/router';
 import { Location } from '@angular/common';
-import { AddingSelectedTabComponent, TabsContactsComponent, TabsDisabledTestComponent, TabsRoutingDisabledTestComponent,
-    TabsRoutingGuardTestComponent, TabsRoutingTestComponent, TabsTabsOnlyModeTest1Component, TabsTabsOnlyModeTest2Component,
+import {
+    AddingSelectedTabComponent, TabsContactsComponent, TabsDisabledTestComponent, TabsRoutingDisabledTestComponent,
+    TabsRoutingGuardTestComponent, TabsRoutingTestComponent, TabsRtlComponent, TabsTabsOnlyModeTest1Component, TabsTabsOnlyModeTest2Component,
     TabsTest2Component, TabsTestBug4420Component, TabsTestComponent, TabsTestCustomStylesComponent,
     TabsTestHtmlAttributesComponent, TabsTestSelectedTabComponent, TabsWithPrefixSuffixTestComponent,
-    TemplatedTabsTestComponent } from '../../test-utils/tabs-components.spec';
+    TemplatedTabsTestComponent
+} from '../../test-utils/tabs-components.spec';
 import { IgxTabsModule } from './tabs.module';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
 import { IgxTabContentComponent } from './tab-content.component';
 import { RoutingTestGuard } from '../../test-utils/routing-test-guard.spec';
-import { RoutingView1Component,
+import {
+    RoutingView1Component,
     RoutingView2Component,
     RoutingView3Component,
     RoutingView4Component,
     RoutingView5Component,
-    RoutingViewComponentsModule } from '../../test-utils/routing-view-components.spec';
+    RoutingViewComponentsModule
+} from '../../test-utils/routing-view-components.spec';
 import { IgxButtonModule } from '../../directives/button/button.directive';
 import { IgxDropDownModule } from '../../drop-down/public_api';
 import { IgxToggleModule } from '../../directives/toggle/toggle.directive';
@@ -58,7 +62,7 @@ describe('IgxTabs', () => {
             declarations: [TabsTestHtmlAttributesComponent, TabsTestComponent, TabsTest2Component, TemplatedTabsTestComponent,
                 TabsRoutingDisabledTestComponent, TabsTestSelectedTabComponent, TabsTestCustomStylesComponent, TabsTestBug4420Component,
                 TabsRoutingTestComponent, TabsTabsOnlyModeTest1Component, TabsTabsOnlyModeTest2Component, TabsDisabledTestComponent,
-                TabsRoutingGuardTestComponent, TabsWithPrefixSuffixTestComponent, TabsContactsComponent, AddingSelectedTabComponent],
+                TabsRoutingGuardTestComponent, TabsWithPrefixSuffixTestComponent, TabsContactsComponent, AddingSelectedTabComponent, TabsRtlComponent],
             imports: [IgxTabsModule, BrowserAnimationsModule, IgxButtonModule, IgxIconModule, IgxDropDownModule, IgxToggleModule,
                 RoutingViewComponentsModule, IgxPrefixModule, IgxSuffixModule, RouterTestingModule.withRoutes(testRoutes)],
             providers: [RoutingTestGuard, PlatformUtil]
@@ -280,7 +284,7 @@ describe('IgxTabs', () => {
             fixture.detectChanges();
             expect(tabs.offset).toBeGreaterThan(0);
 
-            tabs.scrollLeft(null);
+            tabs.scrollPrev(null);
 
             tick(100);
             fixture.detectChanges();
@@ -700,14 +704,14 @@ describe('IgxTabs', () => {
             headerElements = tabItems.map(item => item.headerComponent.nativeElement);
 
             fixture.ngZone.run(() => {
- router.initialNavigation();
-});
+                router.initialNavigation();
+            });
             tick();
             expect(location.path()).toBe('/');
 
             fixture.ngZone.run(() => {
- UIInteractions.simulateClickAndSelectEvent(headerElements[0]);
-});
+                UIInteractions.simulateClickAndSelectEvent(headerElements[0]);
+            });
             tick();
             expect(location.path()).toBe('/view1');
             fixture.detectChanges();
@@ -716,8 +720,8 @@ describe('IgxTabs', () => {
             expect(tabItems[1].selected).toBe(false);
 
             fixture.ngZone.run(() => {
- UIInteractions.simulateClickAndSelectEvent(headerElements[1]);
-});
+                UIInteractions.simulateClickAndSelectEvent(headerElements[1]);
+            });
             tick();
             expect(location.path()).toBe('/view1');
             fixture.detectChanges();
@@ -1048,7 +1052,7 @@ describe('IgxTabs', () => {
                     expect(indexChangingSpy).toHaveBeenCalledTimes(2);
                     expect(indexChangeSpy).toHaveBeenCalledTimes(2);
                     expect(itemChangeSpy).toHaveBeenCalledTimes(2);
-            }));
+                }));
 
             it('Validate the events are not fired when navigating between tabs with home/end before pressing enter/space key.',
                 fakeAsync(() => {
@@ -1112,7 +1116,7 @@ describe('IgxTabs', () => {
                     expect(indexChangingSpy).toHaveBeenCalledTimes(2);
                     expect(indexChangeSpy).toHaveBeenCalledTimes(2);
                     expect(itemChangeSpy).toHaveBeenCalledTimes(2);
-            }));
+                }));
 
         });
     });
@@ -1290,4 +1294,63 @@ describe('IgxTabs', () => {
 
         expect(rightScrollButton.clientWidth).toBeFalsy();
     });
+
+    describe('IgxTabs RTL', () => {
+        let fix;
+        let tabs;
+        let tabItems;
+        let headers;
+
+        beforeEach(() => {
+            document.body.dir = 'rtl';
+            fix = TestBed.createComponent(TabsRtlComponent);
+            tabs = fix.componentInstance.tabs;
+            fix.detectChanges();
+            tabItems = tabs.items.toArray();
+            headers = tabItems.map(item => item.headerComponent.nativeElement);
+        });
+
+        it('should position scroll buttons properly', () => {
+            fix.componentInstance.wrapperDiv.nativeElement.style.width = '300px';
+            fix.detectChanges();
+
+            const scrollNextButton = fix.componentInstance.tabs.scrollNextButton;
+            const scrollPrevButton = fix.componentInstance.tabs.scrollPrevButton;
+            expect(scrollNextButton.nativeElement.offsetLeft).toBeLessThan(scrollPrevButton.nativeElement.offsetLeft);
+        });
+
+        it('should select next tab when left arrow is pressed and previous tab when right arrow is pressed', fakeAsync(() => {
+            tick(100);
+            fix.detectChanges();
+            headers = tabs.items.map(item => item.headerComponent.nativeElement);
+
+            headers[0].focus();
+            headers[0].dispatchEvent(KEY_LEFT_EVENT);
+            tick(200);
+            fix.detectChanges();
+            expect(tabs.selectedIndex).toBe(1);
+
+            headers[1].dispatchEvent(KEY_LEFT_EVENT);
+            tick(200);
+            fix.detectChanges();
+            expect(tabs.selectedIndex).toBe(2);
+
+            headers[2].dispatchEvent(KEY_LEFT_EVENT);
+            tick(200);
+            fix.detectChanges();
+            expect(tabs.selectedIndex).toBe(3);
+
+            headers[0].dispatchEvent(KEY_RIGHT_EVENT);
+            tick(200);
+            fix.detectChanges();
+            expect(tabs.selectedIndex).toBe(8);
+
+            headers[8].dispatchEvent(KEY_RIGHT_EVENT);
+            tick(200);
+            fix.detectChanges();
+            expect(tabs.selectedIndex).toBe(7);
+        }));
+    });
 });
+
+