fix(api): layout with layoutAlign was not responding to reverse directions

fxLayoutAlign was ignoring reverse flow-directions in peer fxLayout=“row-reverse” configurations.

Fixes #82.

Author: ThomasBurleson

src/lib/flexbox/api/layout-align.ts

@@ -118,7 +118,7 @@ export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnC
    * Cache the parent container 'flex-direction' and update the 'flex' styles
    */
   private _onLayoutChange(direction) {
-    this._layout = (direction || '').toLowerCase().replace('-reverse', '');
+    this._layout = (direction || '').toLowerCase();
     if (!LAYOUT_VALUES.find(x => x === this._layout))
       this._layout = 'row';
 

src/lib/flexbox/api/layout.spec.ts

@@ -9,12 +9,13 @@ import {BreakPointRegistry} from '../../media-query/breakpoints/break-point-regi
 import {FlexLayoutModule} from '../_module';
 
 import {customMatchers} from '../../utils/testing/custom-matchers';
-import {makeCreateTestComponent, makeExpectDOMFrom, expectNativeEl} from '../../utils/testing/helpers';
+import {makeCreateTestComponent, makeExpectDOMFrom, makeExpectDOMForQuery, expectNativeEl} from '../../utils/testing/helpers';
 
 describe('layout directive', () => {
   let fixture: ComponentFixture<any>;
   let createTestComponent = makeCreateTestComponent(()=> TestLayoutComponent);
   let expectDOMFrom = makeExpectDOMFrom(()=> TestLayoutComponent);
+  let expectDomForQuery = makeExpectDOMForQuery(()=> TestLayoutComponent);
   let activateMediaQuery = (alias, allowOverlaps?:boolean) => {
         let matchMedia : MockMatchMedia = fixture.debugElement.injector.get(MatchMedia);
         matchMedia.activate(alias,allowOverlaps);
@@ -98,6 +99,27 @@ describe('layout directive', () => {
 
     });
 
+    it('should set row-reverse direction for nested fxLayout containers', () => {
+      let template = `
+        <div [fxLayout]="direction" (click)="toggleDirection()" class="colored box" >
+          <div fxFlex="20">  fxFlex="20"  </div>
+          <div fxFlex="60">  outer fxFlex="60"  
+            <div fxLayout="row-reverse" fxLayoutAlign="center center" class="colored box" >
+              <div fxFlex="20">  inner fxFlex="20"  </div>
+              <div fxFlex="60">  inner fxFlex="60"  </div>
+              <div fxFlex >      inner fxFlex       </div>
+            </div>        
+          </div>
+          <div fxFlex >      fxFlex       </div>
+        </div>
+      `;
+
+      expectDomForQuery( template,"[fxLayout='row-reverse']" )
+        .toHaveCssStyle({
+          'flex-direction' : 'row-reverse',
+        });
+    });
+
   });
 
   describe('with responsive features', () => {