From 3b9d965eef82e20bc1985234c85972c8f0051826 Mon Sep 17 00:00:00 2001
From: eyal <eyal@genoox.com>
Date: Sat, 28 May 2022 22:39:33 +0300
Subject: [PATCH] fix: when direction:rtl style applied, move functions failed
 to work

---
 .../src/lib/ngx-drag-scroll.component.ts      | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/projects/ngx-drag-scroll/src/lib/ngx-drag-scroll.component.ts b/projects/ngx-drag-scroll/src/lib/ngx-drag-scroll.component.ts
index 2c1fade..c6be11d 100644
--- a/projects/ngx-drag-scroll/src/lib/ngx-drag-scroll.component.ts
+++ b/projects/ngx-drag-scroll/src/lib/ngx-drag-scroll.component.ts
@@ -32,6 +32,10 @@ import { DragScrollItemDirective } from './ngx-drag-scroll-item';
       overflow: hidden;
       display: block;
     }
+    .rtl-compensation {
+      direction: ltr;
+      transform: scaleX(-1);
+    }
     .drag-scroll-content {
       height: 100%;
       overflow: auto;
@@ -142,6 +146,8 @@ export class DragScrollComponent implements OnDestroy, AfterViewInit, OnChanges,
 
   indexBound = 0;
 
+  rtl = false;
+
   @Output() dsInitialized = new EventEmitter<void>();
 
   @Output() indexChanged = new EventEmitter<number>();
@@ -259,6 +265,14 @@ export class DragScrollComponent implements OnDestroy, AfterViewInit, OnChanges,
     this.checkNavStatus();
     this.dsInitialized.emit();
     this.adjustMarginToLastChild();
+
+    // after rtl compensation class is added this will reset to false so first time it's true - it sticks
+    if (!this.rtl) {
+      this.rtl = getComputedStyle(this._contentRef.nativeElement).getPropertyValue('direction') === 'rtl';
+      if (this.rtl) {
+        this._contentRef.nativeElement.classList.add('rtl-compensation')
+      }
+    }
   }
 
   ngAfterViewChecked() {
@@ -307,8 +321,13 @@ export class DragScrollComponent implements OnDestroy, AfterViewInit, OnChanges,
       // Drag X
       if (!this.xDisabled && !this.dragDisabled) {
         const clientX = (event as MouseEvent).clientX;
-        this._contentRef.nativeElement.scrollLeft =
-          this._contentRef.nativeElement.scrollLeft - clientX + this.downX;
+        if (this.rtl) {
+          this._contentRef.nativeElement.scrollLeft =
+            this._contentRef.nativeElement.scrollLeft + clientX - this.downX;
+        } else {
+          this._contentRef.nativeElement.scrollLeft =
+            this._contentRef.nativeElement.scrollLeft - clientX + this.downX;
+        }
         this.downX = clientX;
       }