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.
angular · Mar 28, 2017 · 1913570 · 1913570
1 parent 3743282
commit 1913570
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/src/lib/flexbox/api/layout-align.spec.ts b/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)
@@ -119,12 +129,11 @@ describe('layout-align directive', () => {
         );
       });
       it('should add correct styles for `fxLayoutAlign="start baseline"` usage', () => {
-        expectDOMFrom(`<div fxLayoutAlign="start baseline"></div>`).toHaveCssStyle(
-            extendObject(MAINAXIS_DEFAULTS, {
-              'align-items': 'baseline',
-              'align-content': 'stretch'
-            })
-        );
+        expectDOMFrom(`<div fxLayoutAlign="start baseline"></div>`)
+          .toHaveCssStyle({
+            'justify-content' : 'flex-start',
+            'align-items': 'baseline'
+          });
       });
       it('should add correct styles for `fxLayoutAlign="start center"` usage', () => {
         expectDOMFrom(`<div fxLayoutAlign="start center"></div>`).toHaveCssStyle(

diff --git a/src/lib/flexbox/api/layout-align.ts b/src/lib/flexbox/api/layout-align.ts
@@ -141,10 +141,6 @@ export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnC
   protected _buildCSS(align) {
     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) {
       case 'center':
@@ -157,12 +153,20 @@ 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 :
+        css['justify-content'] = 'flex-start';  // default main axis
+        break;
     }
+
     // Cross-axis
     switch (cross_axis) {
       case 'start':
+      case 'flex-start':
         css['align-items'] = css['align-content'] = 'flex-start';
         break;
       case 'baseline':
@@ -172,9 +176,12 @@ 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'
+        css['align-items'] = css['align-content'] = 'stretch';   // default cross axis
         break;
     }