From 099c7be3e02120cfb145b3415b871d245dc17632 Mon Sep 17 00:00:00 2001
From: Adam Plumer <caerus.karu@gmail.com>
Date: Tue, 20 Mar 2018 03:47:19 -0400
Subject: [PATCH] fix(fxLayoutGap): add proper gaps for reverse dir

---
 src/lib/flex/layout-gap/layout-gap.spec.ts | 12 ++++++------
 src/lib/flex/layout-gap/layout-gap.ts      | 10 ++++++++--
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/lib/flex/layout-gap/layout-gap.spec.ts b/src/lib/flex/layout-gap/layout-gap.spec.ts
index 3ed8047a4..fdd929764 100644
--- a/src/lib/flex/layout-gap/layout-gap.spec.ts
+++ b/src/lib/flex/layout-gap/layout-gap.spec.ts
@@ -208,12 +208,12 @@ describe('layout-gap directive', () => {
       verifyCorrectMargin('column', 'margin-bottom');
     });
 
-    it('should apply margin-right for row-reverse layouts', () => {
-      verifyCorrectMargin('row-reverse', 'margin-right');
+    it('should apply margin-left for row-reverse layouts', () => {
+      verifyCorrectMargin('row-reverse', 'margin-left');
     });
 
-    it('should apply margin-bottom for column-reverse layouts', () => {
-      verifyCorrectMargin('column-reverse', 'margin-bottom');
+    it('should apply margin-top for column-reverse layouts', () => {
+      verifyCorrectMargin('column-reverse', 'margin-top');
     });
 
     it('should remove obsolete margin and apply valid margin for layout changes', () => {
@@ -241,7 +241,7 @@ describe('layout-gap directive', () => {
       nodes = queryFor(fixture, 'span');
 
       expectEl(nodes[0]).not.toHaveStyle({'margin-right': '8px'}, styler);
-      expectEl(nodes[0]).toHaveStyle({'margin-bottom': '8px'}, styler);
+      expectEl(nodes[0]).toHaveStyle({'margin-top': '8px'}, styler);
 
 
       // layout = row-reverse, use margin-right
@@ -250,7 +250,7 @@ describe('layout-gap directive', () => {
       nodes = queryFor(fixture, 'span');
 
       expectEl(nodes[0]).not.toHaveStyle({'margin-bottom': '8px'}, styler);
-      expectEl(nodes[0]).toHaveStyle({'margin-right': '8px'}, styler);
+      expectEl(nodes[0]).toHaveStyle({'margin-left': '8px'}, styler);
     });
 
     it('should recognize hidden elements when applying gaps', () => {
diff --git a/src/lib/flex/layout-gap/layout-gap.ts b/src/lib/flex/layout-gap/layout-gap.ts
index 74ee3089a..b313bbcb1 100644
--- a/src/lib/flex/layout-gap/layout-gap.ts
+++ b/src/lib/flex/layout-gap/layout-gap.ts
@@ -246,11 +246,17 @@ export class LayoutGapDirective extends BaseFxDirective
 
     switch (this._layout) {
       case 'column':
-      case 'column-reverse':
         key = 'margin-bottom';
         break;
-      case 'row' :
+      case 'column-reverse':
+        key = 'margin-top';
+        break;
+      case 'row':
+        key = this._directionality.value === 'rtl' ? 'margin-left' : 'margin-right';
+        break;
       case 'row-reverse':
+        key = this._directionality.value === 'rtl' ? 'margin-right' : 'margin-left';
+        break;
       default :
         key = this._directionality.value === 'rtl' ? 'margin-left' : 'margin-right';
         break;