feature(dependencies): add @angular/flex-layout (closes #239)

[emoralesb05]

Description

Including @angular/flex-layout as part of CovalentCoreModule and started initial migration to leverage it. #239

This is meant to show both flex libs can co-exist in covalent as we migrate into @angular/flex-layout.

For the time being, we will be fixed to a specific version since its a beta release. (beta.5)

What's included?

• chore(): add @angular/flex-layout as as a @covalent/core dependency
• feature(paging): leverage flex-layout in paging module.
• feature(search): leverage flex-layout in search module.

Test Steps

• npm reinstall
• ng serve
• Go to http://localhost:4200/#/components/search and see it work fine
• Go to http://localhost:4200/#/components/paging and see it work fine
• Try using the @angular/flex-layout anywhere in docs.

General Tests for Every PR

• ng serve --aot still works.
• npm run lint passes.
• npm test passes and code coverage is not lower.
• npm run build still works.

[kyleledbetter]

Code & UX LGTM 👍

I've got questions more around the performance & cascading implications of flex-layout using inline styles instead of CSS stylesheets, that are mainly just unknowns for me, since we use flex layout not only for layouts but for every single UI element. That's a ton of extra inline HTML styles...

Obviously I can see all the benefits of this being in JavaScript with all the power of Angular2 with media queries, change detection, etc, which is why I'm excited about it

I'll do more research from their wiki and more testing on my own.

[joshwiens]

@kyleledbetter - I started using fxFlex at work back when it was still private and you are correct there is definitely a balance to be found between inline & CSS.

What I ended up settling on was using fxFlex for container components layout & anything where the benefits ObservableMedia are too good to pass up but I was always careful with that. Creating a subscription on <td-expansion-panel> for instance would undoubtedly lead to issues logged in Github for someone that has 50 of them rendering in a view and can't figure out where the Jank came from. It's definitely an all things in moderation kind of tool.

All the low level styles for components I ended up moving back to .css, not so much because of a performance issue but simply because the bloat in my HTML styles was messing with my OCD.

@emoralesb05 - I played around with fxFlex in Covalent before I opened #239 so I have most of it converted all be it out of date. The approach I took personally was to just replace existing tags with their fxFlex counterpart without changing or adding additional styling / ObservableMedia / responsive ngClass.

From Kyle's comment it sounds like that approach would be optimal to kind of ease into the pool before heading out to the media query deep end. I can PR that in once the basic support lands assuming the above is accurate.

[emoralesb05]

@d3viant0ne Yeah, it feels like we might have a need for both things to coexist for now.

I still think its greatly needed (it has awesome features) but we might stick to ours for internal usage in our components and use @angular/flex-box for more granular stuff maybe within applications and docs.

[kyleledbetter]

@emoralesb05 i'm cool with merging in for use if we revert search & paging to use the css classes, that way we can do more testing downstream in products

[emoralesb05]

@kyleledbetter yep, will revert those so we can just merge it