fix(fxFlex): apply correct flex-basis stylings

* Fix for when flex-basis is unitless and 0
* Fix for when no width/height is applied and flex-basis should be
  set
* Fix for IE flex-basis with calc values
* Fix for SSR properties set to 0

Fixes #277
Fixes #280
Fixes #323
Fixes #528
Fixes #534

src/lib/core/style-utils/style-utils.ts

@@ -70,7 +70,7 @@ export class StyleUtils {
    * Find the DOM element's inline style value (if any)
    */
   lookupInlineStyle(element: HTMLElement, styleName: string): string {
-    return element.style[styleName] || element.style.getPropertyValue(styleName);
+    return element.style[styleName] || element.style.getPropertyValue(styleName) || '';
   }
 
   /**
@@ -88,7 +88,7 @@ export class StyleUtils {
           }
         } else {
           if (this._serverModuleLoaded) {
-            value = `${this._serverStylesheet.getStyleForElement(element, styleName)}`;
+            value = this._serverStylesheet.getStyleForElement(element, styleName);
           }
         }
       }

src/lib/core/stylesheet-map.ts

@@ -40,8 +40,15 @@ export class StylesheetMap {
   /**
    * Retrieve a given style for an HTML element
    */
-  getStyleForElement(el: HTMLElement, styleName: string): string|number {
+  getStyleForElement(el: HTMLElement, styleName: string): string {
     const styles = this.stylesheet.get(el);
-    return (styles && styles.get(styleName)) || '';
+    let value = '';
+    if (styles) {
+      const style = styles.get(styleName);
+      if (typeof style === 'number' || typeof style === 'string') {
+        value = style + '';
+      }
+    }
+    return value;
   }
 }

src/lib/flex/flex-offset/flex-offset.spec.ts

@@ -72,21 +72,39 @@ describe('flex-offset directive', () => {
       let dom = fixture.debugElement.children[0];
       expectEl(dom).toHaveStyle({'margin-left': '32px'}, styler);
       if (platform.BLINK) {
-        expectEl(dom).toHaveStyle({'flex': '1 1 1e-09px'}, styler);
+        expectEl(dom).toHaveStyle({
+          'flex-grow': '1',
+          'flex-shrink': '1',
+          'flex-basis': '1e-09px'
+        }, styler);
       } else if (platform.FIREFOX) {
-        expectEl(dom).toHaveStyle({'flex': '1 1 1e-9px'}, styler);
+        expectEl(dom).toHaveStyle({
+          'flex-grow': '1',
+          'flex-shrink': '1',
+          'flex-basis': '1e-9px'
+        }, styler);
       } else if (platform.EDGE || platform.TRIDENT) {
-        expectEl(dom).toHaveStyle({'flex': '1 1 0px'}, styler);
+        expectEl(dom).toHaveStyle({
+          'flex-grow': '1',
+          'flex-shrink': '1',
+          'flex-basis': '0px'
+        }, styler);
       } else {
-        expectEl(dom).toHaveStyle({'flex': '1 1 0.000000001px'}, styler);
+        expectEl(dom).toHaveStyle({
+          'flex-grow': '1',
+          'flex-shrink': '1',
+          'flex-basis': '0.000000001px'
+        }, styler);
       }
     });
 
 
     it('should work with percentage values', () => {
       componentWithTemplate(`<div fxFlexOffset='17' fxFlex='37'></div>`);
       expectNativeEl(fixture).toHaveStyle({
-        'flex': '1 1 100%',
+        'flex-grow': '1',
+        'flex-shrink': '1',
+        'flex-basis': '100%',
         'box-sizing': 'border-box',
         'margin-left': '17%'
       }, styler);
@@ -153,7 +171,9 @@ describe('flex-offset directive', () => {
         `);
       expectNativeEl(fixture).not.toHaveStyle({
         'flex-direction': 'row',
-        'flex': '1 1 100%',
+        'flex-grow': '1',
+        'flex-shrink': '1',
+        'flex-basis': '100%',
         'margin-left': '52px',
       }, styler);
     });