fix(fxLayoutAlign): support flex-start and flex-end options

Current API translates `start` and `end` to `flex-start` and `flex-end` respectively.
The API should also support the raw flex-<xxx> values.

Fixes #232.

Author: ThomasBurleson

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

@@ -82,6 +82,11 @@ describe('layout-align directive', () => {
             extendObject({'justify-content': 'flex-start'}, CROSSAXIS_DEFAULTS)
         );
       });
+      it('should add correct styles for `fxLayoutAlign="flex-start"` usage', () => {
+        expectDOMFrom(`<div fxLayoutAlign="flex-start"></div>`).toHaveCssStyle(
+            extendObject({'justify-content': 'flex-start'}, CROSSAXIS_DEFAULTS)
+        );
+      });
       it('should add correct styles for `fxLayoutAlign="center"` usage', () => {
         expectDOMFrom(`<div fxLayoutAlign="center"></div>`).toHaveCssStyle(
             extendObject({'justify-content': 'center'}, CROSSAXIS_DEFAULTS)
@@ -102,6 +107,11 @@ describe('layout-align directive', () => {
             extendObject({'justify-content': 'flex-end'}, CROSSAXIS_DEFAULTS)
         );
       });
+      it('should add correct styles for `fxLayoutAlign="flex-end"` usage', () => {
+        expectDOMFrom(`<div fxLayoutAlign="flex-end"></div>`).toHaveCssStyle(
+            extendObject({'justify-content': 'flex-end'}, CROSSAXIS_DEFAULTS)
+        );
+      });
       it('should add ignore invalid main-axis values', () => {
         expectDOMFrom(`<div fxLayoutAlign="invalid"></div>`).toHaveCssStyle(
             extendObject({'justify-content': 'flex-start'}, CROSSAXIS_DEFAULTS)
@@ -121,6 +131,7 @@ describe('layout-align directive', () => {
       it('should add correct styles for `fxLayoutAlign="start baseline"` usage', () => {
         expectDOMFrom(`<div fxLayoutAlign="start baseline"></div>`).toHaveCssStyle(
             extendObject(MAINAXIS_DEFAULTS, {
+              'justify-content': 'flex-start',
               'align-items': 'baseline',
               'align-content': 'stretch'
             })

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

@@ -142,8 +142,6 @@ export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnC
     let css = {}, [main_axis, cross_axis] = align.split(' '); // tslint:disable-line:variable-name
 
     css['justify-content'] = 'flex-start';  // default main axis
-    css['align-items'] = 'stretch';         // default cross axis
-    css['align-content'] = 'stretch';       // default cross axis
 
     // Main axis
     switch (main_axis) {
@@ -157,12 +155,22 @@ export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnC
         css['justify-content'] = 'space-between';
         break;
       case 'end':
+      case 'flex-end':
         css['justify-content'] = 'flex-end';
         break;
+      case 'start':
+      case 'flex-start':
+      default :
+        break;
     }
+
+    css['align-items'] = 'stretch';         // default cross axis
+    css['align-content'] = 'stretch';       // default cross axis
+
     // Cross-axis
     switch (cross_axis) {
       case 'start':
+      case 'flex-start':
         css['align-items'] = css['align-content'] = 'flex-start';
         break;
       case 'baseline':
@@ -172,8 +180,10 @@ export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnC
         css['align-items'] = css['align-content'] = 'center';
         break;
       case 'end':
+      case 'flex-end':
         css['align-items'] = css['align-content'] = 'flex-end';
         break;
+      case 'stretch':
       default : // 'stretch'
         break;
     }