angular-split
diff --git a/‎package.json‎
Lines changed: 1 addition & 0 deletions b/‎package.json‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎projects/angular-split/src/lib/component/split.component.ts‎
Lines changed: 5 additions & 1 deletion b/‎projects/angular-split/src/lib/component/split.component.ts‎
Lines changed: 5 additions & 1 deletion
diff --git a/‎src/app/examples/dir-rtl/dir-rtl.component.ts‎
Lines changed: 9 additions & 1 deletion b/‎src/app/examples/dir-rtl/dir-rtl.component.ts‎
Lines changed: 9 additions & 1 deletion
@@ -4,6 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "lib-start": "ng build angular-split --watch",
     "lint": "ng lint",
     "app_build": "yarn lib_build && ng build --configuration production --base-href /angular-split/",
     "app_analyze": "yarn lib_build && ng build --configuration production --stats-json && webpack-bundle-analyzer dist/angular-split-app/stats.json",
 
@@ -687,9 +687,13 @@ export class SplitComponent implements AfterViewInit, OnDestroy {
 
     let offset =
       this.direction === 'horizontal' ? this.startPoint.x - this.endPoint.x : this.startPoint.y - this.endPoint.y
-    if (this.dir === 'rtl') {
+
+    // RTL requires negative offset only in horizontal mode as in vertical
+    // RTL has no effect on drag direction.
+    if (this.dir === 'rtl' && this.direction === 'horizontal') {
       offset = -offset
     }
+
     const steppedOffset = Math.round(offset / this.gutterStep) * this.gutterStep
 
     if (steppedOffset === this.snapshot.lastSteppedOffset) {
 
@@ -16,14 +16,18 @@ import { AComponent } from '../../ui/components/AComponent'
         align-items: center;
         flex-wrap: wrap;
       }
+
+      .btns > button:not(:last-child) {
+        margin-right: 10px;
+      }
     `,
   ],
   template: `
     {{ testChangeDetectorRun() }}
     <div class="container">
       <sp-example-title [type]="exampleEnum.DIR"></sp-example-title>
       <div class="split-example">
-        <as-split [dir]="dir">
+        <as-split [dir]="dir" [direction]="direction">
           <as-split-area size="20">
             <p>
               1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tiam, quis nostrud exercitation
@@ -62,10 +66,14 @@ import { AComponent } from '../../ui/components/AComponent'
         <button class="btn btn-warning" (click)="dir = dir === 'rtl' ? 'ltr' : 'rtl'">
           {{ 'Toggle dir: "' + dir + '"' }}
         </button>
+        <button class="btn btn-warning" (click)="direction = direction === 'vertical' ? 'horizontal' : 'vertical'">
+          {{ 'Toggle direction: "' + direction + '"' }}
+        </button>
       </div>
     </div>
   `,
 })
 export class DirRtlComponent extends AComponent {
   dir = 'rtl'
+  direction = 'horizontal'
 }