fix(fxFlex): enable parent flex styles by default

Author: CaerusKaru

package-lock.json

@@ -127,4 +127,4 @@
     "typescript": "~2.6.2",
     "uglify-js": "^2.8.14"
   }
-}
+}

package.json

@@ -15,6 +15,7 @@ import {MATCH_MEDIA_PROVIDER} from './match-media/match-media-provider';
 import {BROWSER_PROVIDER} from './browser-provider';
 import {StyleUtils} from './style-utils/style-utils';
 import {STYLESHEET_MAP_PROVIDER} from './stylesheet-map/stylesheet-map-provider';
+import {FLEX_STYLES_PROVIDER} from './tokens/flex-styles-token';
 
 /**
  * *****************************************************************
@@ -32,6 +33,7 @@ import {STYLESHEET_MAP_PROVIDER} from './stylesheet-map/stylesheet-map-provider'
     STYLESHEET_MAP_PROVIDER,
     StyleUtils,
     BROWSER_PROVIDER,
+    FLEX_STYLES_PROVIDER,
   ]
 })
 export class CoreModule {

src/lib/core/module.ts

@@ -9,3 +9,12 @@ import {InjectionToken} from '@angular/core';
 
 export const ADD_FLEX_STYLES = new InjectionToken<boolean>(
   'Flex Layout token, should flex stylings be applied to parents automatically');
+
+/**
+ * @deprecated
+ * @deletion-target v6.0.0-beta.15
+ */
+export const FLEX_STYLES_PROVIDER = {
+  provide: ADD_FLEX_STYLES,
+  useValue: true
+};

src/lib/core/tokens/flex-styles-token.ts

@@ -219,7 +219,7 @@ describe('flex directive', () => {
       }
     });
 
-    it('should not work with non-direct-parent fxLayouts', async(() => {
+    it('should work with non-direct-parent fxLayouts', async(() => {
       componentWithTemplate(`
         <div fxLayout='column'>
           <div class='test'>
@@ -235,7 +235,7 @@ describe('flex directive', () => {
         // The parent flex-direction not found;
         // A flex-direction should have been auto-injected to the parent...
         // fallback to 'row' and set child width styles accordingly
-        expectEl(parent).not.toHaveStyle({'flex-direction': 'row'}, styler);
+        expectEl(parent).toHaveStyle({'flex-direction': 'row'}, styler);
         expectEl(element).toHaveStyle({'min-width': '40px'}, styler);
         expectEl(element).not.toHaveStyle({'min-height': '40px'}, styler);
       });
@@ -686,7 +686,7 @@ describe('flex directive', () => {
     );
   });
 
-  describe('with flex token enabled', () => {
+  describe('with flex token disabled', () => {
     beforeEach(() => {
       jasmine.addMatchers(customMatchers);
 
@@ -697,7 +697,7 @@ describe('flex directive', () => {
         providers: [
           MockMatchMediaProvider,
           {provide: SERVER_TOKEN, useValue: true},
-          {provide: ADD_FLEX_STYLES, useValue: true},
+          {provide: ADD_FLEX_STYLES, useValue: false},
         ]
       });
     });
@@ -718,7 +718,7 @@ describe('flex directive', () => {
         // The parent flex-direction not found;
         // A flex-direction should have been auto-injected to the parent...
         // fallback to 'row' and set child width styles accordingly
-        expectEl(parent).toHaveStyle({'flex-direction': 'row'}, styler);
+        expectEl(parent).not.toHaveStyle({'flex-direction': 'row'}, styler);
         expectEl(element).toHaveStyle({'min-width': '40px'}, styler);
         expectEl(element).not.toHaveStyle({'min-height': '40px'}, styler);
       });
@@ -758,7 +758,7 @@ describe('flex directive', () => {
         // The parent flex-direction not found;
         // A flex-direction should have been auto-injected to the parent...
         // fallback to 'row' and set child width styles accordingly
-        expectEl(parent).not.toHaveStyle({'-webkit-flex-direction': 'row'}, styler);
+        expect(parent.nativeElement.getAttribute('style')).not.toContain('-webkit-flex-direction');
         expectEl(element).toHaveStyle({'min-width': '40px'}, styler);
         expectEl(element).not.toHaveStyle({'min-height': '40px'}, styler);
       });