From f69ffa56ec571d91a6ee5aed259a95c2bcf4ea01 Mon Sep 17 00:00:00 2001
From: Filip Siderov <filip.siderov@sap.com>
Date: Thu, 13 Aug 2020 15:21:12 +0300
Subject: [PATCH] feat(ui5-carousel): implement rtl support (#2086)

---
 packages/main/src/Carousel.hbs | 58 +++++++++++++++-------------------
 packages/main/src/Carousel.js  |  8 +++--
 2 files changed, 31 insertions(+), 35 deletions(-)

diff --git a/packages/main/src/Carousel.hbs b/packages/main/src/Carousel.hbs
index 593afa9d0b57..984af771eeb2 100644
--- a/packages/main/src/Carousel.hbs
+++ b/packages/main/src/Carousel.hbs
@@ -23,36 +23,15 @@
 
         {{#if arrows.content}}
             <div class="ui5-carousel-navigation-arrows">
-                <ui5-button
-                    arrow-back
-                    class="ui5-carousel-navigation-button {{classes.navPrevButton}}"
-                    icon="slim-arrow-left"
-                    tabindex="-1"
-                    @click={{navigateLeft}}
-                    @keydown={{_onbuttonkeydown}}
-                ></ui5-button>
-                <ui5-button
-                    arrow-forward
-                    class="ui5-carousel-navigation-button {{classes.navNextButton}}"
-                    icon="slim-arrow-right"
-                    tabindex="-1"
-                    @click={{navigateRight}}
-                    @keydown={{_onbuttonkeydown}}
-                ></ui5-button>
+                {{> arrow-back}}
+                {{> arrow-forward}}
             </div>
         {{/if}}
 
         {{#if showNavigationArrows}}
             <div class="{{classes.navigation}}">
                 {{#if arrows.navigation}}
-                <ui5-button
-                    arrow-back
-                    class="ui5-carousel-navigation-button {{classes.navPrevButton}}"
-                    icon="slim-arrow-left"
-                    tabindex="-1"
-                    @click={{navigateLeft}}
-                    @keydown={{_onbuttonkeydown}}
-                ></ui5-button>
+                    {{> arrow-back}}
                 {{/if}}
 
                 <div class="ui5-carousel-navigation">
@@ -71,16 +50,29 @@
                 </div>
 
                 {{#if arrows.navigation}}
-                    <ui5-button
-                        arrow-forward
-                        class="ui5-carousel-navigation-button {{classes.navNextButton}}"
-                        icon="slim-arrow-right"
-                        tabindex="-1"
-                        @click={{navigateRight}}
-                        @keydown={{_onbuttonkeydown}}
-                    ></ui5-button>
+                    {{> arrow-forward}}
                 {{/if}}
             </div>
         {{/if}}
     </div>
-</section>
\ No newline at end of file
+</section>
+
+{{#*inline "arrow-back"}}
+	<ui5-button
+        arrow-back
+        class="ui5-carousel-navigation-button {{classes.navPrevButton}}"
+        icon="slim-arrow-left"
+        tabindex="-1"
+        @click={{navigateLeft}}
+    ></ui5-button>
+{{/inline}}
+
+{{#*inline "arrow-forward"}}
+    <ui5-button
+        arrow-forward
+        class="ui5-carousel-navigation-button {{classes.navNextButton}}"
+        icon="slim-arrow-right"
+        tabindex="-1"
+        @click={{navigateRight}}
+    ></ui5-button>
+{{/inline}}
\ No newline at end of file
diff --git a/packages/main/src/Carousel.js b/packages/main/src/Carousel.js
index c22197e523b1..606b6a659cfd 100644
--- a/packages/main/src/Carousel.js
+++ b/packages/main/src/Carousel.js
@@ -411,7 +411,7 @@ class Carousel extends UI5Element {
 	get styles() {
 		return {
 			content: {
-				transform: `translateX(-${this.selectedIndex * this._itemWidth}px`,
+				transform: `translateX(${this._isRTL ? "" : "-"}${this.selectedIndex * this._itemWidth}px`,
 			},
 		};
 	}
@@ -484,8 +484,12 @@ class Carousel extends UI5Element {
 		return this._resizing || getAnimationMode() === AnimationMode.None;
 	}
 
+	get _isRTL() {
+		return this.effectiveDir === "rtl";
+	}
+
 	get selectedIndexToShow() {
-		return this.selectedIndex + 1;
+		return this._isRTL ? this.pagesCount - (this.pagesCount - this.selectedIndex) + 1 : this.selectedIndex + 1;
 	}
 
 	get showNavigationArrows() {