MOBILE-2795 tabs: Fix slide direction on RTL

src/components/tabs/core-tabs.html

@@ -5,7 +5,7 @@
                 <ion-icon *ngIf="showPrevButton" name="arrow-back" md="ios-arrow-back"></ion-icon>
             </ion-col>
             <ion-col no-padding col-10>
-                <ion-slides (ionSlideDidChange)="slideChanged()" [slidesPerView]="slidesShown">
+                <ion-slides (ionSlideDidChange)="slideChanged()" [slidesPerView]="slidesShown" [dir]="direction">
                     <ng-container *ngFor="let tab of tabs; let idx = index">
                         <ion-slide *ngIf="tab.show">
                             <a [attr.aria-selected]="selected == idx" (click)="selectTab(idx)" class="tab-slide">

src/components/tabs/tabs.scss

@@ -62,18 +62,6 @@ ion-app.app-root .core-tabs-bar {
 
         }
     }
-
-    @include rtl() {
-        .swiper-container-horizontal {
-            transform: scaleX(-1);
-            .swiper-wrapper {
-                flex-direction: row-reverse;
-                ion-slide {
-                    transform: scaleX(-1);
-                }
-            }
-        }
-    }
 }
 
 ion-app.app-root.md .core-tabs-bar a.tab-slide {

src/components/tabs/tabs.ts

@@ -16,7 +16,9 @@ import {
     Component, Input, Output, EventEmitter, OnInit, OnChanges, OnDestroy, AfterViewInit, ViewChild, ElementRef,
     SimpleChange
 } from '@angular/core';
-import { Content, Slides } from 'ionic-angular';
+import { Content, Slides, Platform } from 'ionic-angular';
+import { TranslateService } from '@ngx-translate/core';
+import { Subscription } from 'rxjs';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { CoreAppProvider } from '@providers/app';
 import { CoreTabComponent } from './tab';
@@ -59,6 +61,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     maxSlides = 3;
     slidesShown = this.maxSlides;
     numTabsShown = 0;
+    direction = 'ltr';
 
     protected originalTabsContainer: HTMLElement; // The container of the original tabs. It will include each tab's content.
     protected initialized = false;
@@ -77,10 +80,20 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe
 
     protected firstSelectedTab: number;
     protected unregisterBackButtonAction: any;
+    protected languageChangedSubscription: Subscription;
 
     constructor(element: ElementRef, protected content: Content, protected domUtils: CoreDomUtilsProvider,
-            protected appProvider: CoreAppProvider) {
+            protected appProvider: CoreAppProvider, platform: Platform, translate: TranslateService) {
         this.tabBarElement = element.nativeElement;
+
+        this.direction = platform.isRTL ? 'rtl' : 'ltr';
+
+        // Change the side when the language changes.
+        this.languageChangedSubscription = translate.onLangChange.subscribe((event: any) => {
+            setTimeout(() => {
+                this.direction = platform.isRTL ? 'rtl' : 'ltr';
+            });
+        });
     }
 
     /**