feat(IE11): Platform & Docs support for IE11

[kyleledbetter]

Description

Following the Flexbox quirks & lack of full support documented here, this PR has small fixes & workarounds for several components and documentation app areas, as well as IE11 docs for necessary polyfills and workarounds.

What's included?

• IE11 Docs site fixes
• IE11 support documentation
• IE11 fixes for Logo md-icon sizing
• IE11 fixes for Chips component
• IE11 fixes for Navigation Drawer component
• IE11 fixes for Message component
• IE11 fixes for Notification count component in toolbar
• IE11 fixes for Layout docs demos (height)
• IE11 style for layout scss
• overflow-visible utility style
• IE11 polyfills for NGX-Charts

IE11 VM for OSX/macOS

• Download & install Virtualbox http://download.virtualbox.org/virtualbox/5.1.26/VirtualBox-5.1.26-117224-OSX.dmg
• Download IE11 on Win81 for Virtualbox from https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/
• tar xf IE11.Win8.1.For.Windows.VirtualBox.zip
• Open Virtualbox and import IE11 - Win8.1.ova
• Run IE11
• you may need to turn on Internet Sharing in macOS Settings > Sharing

Test Steps

• check out feature/ie11
• rm -rf node_modules
• yarn install
• ng serve --host 0.0.0.0 --disable-host-check
• in IE11 VM visit http://10.0.2.2:4200

Test Covalent

• Test Docs homepage and make sure sections are overflowing
• Test Chips and see that they have proper width
• Test Message and see that they're properly vertically center
• Test Notifications and see that the notification icon in the toolbar isn't chopped off
• Test Navigation drawer and see that it has the proper height (may need browser resize for change detection)
• Test Layout docs and see they have proper height for demos
• Test NGX Charts to see that it actually loads (there are card chart issues beyond our fix)
• Read /docs/IE11.md

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.

Screenshots or link to CodePen/Plunker/JSfiddle

[emoralesb05]

Added a few things:

• chore(): update yarn.lock with latest dependencies
• fix(chips): fix autocomplete click selection for chips
• chore(build): add autoprefixer to build process to ensure all css is prefixed for every browser.

The last one will make sure we dont have CSS issues across browsers (for the most part)

e.g.

SCSS

:host {
  .td-chips-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

Compiled CSS without autoprefixer:

:host .td-chips-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

Compiler CSS with autoprefixer:

:host .td-chips-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

[kyleledbetter]

nice! thx @emoralesb05!

[ghost]

• Test Docs homepage and make sure sections are overflowing
  Case 1: Chrome (Left) / IE11 (Right) notice overflow break not as clean as Chrome
  
  Case 2: Chrome (Left) / IE11 (Right) notice overflow break not as clean as Chrome
  

[ghost]

• Test Chips and see that they have proper width
  Case 1: Chrome (Left) / IE11 (Right) Alignment of chips + chips "Enter auto..." input + remove "X" is not centered
  

[emoralesb05]

Pushed a fix for the chips alignment issue 025e79b

[aciccarello]

Edit: Fixed in 2c41491

Form in expantion panel documentation is overlapping in IE.
http://localhost:4200/#/components/expansion-panel

Edit: Fixed in a37e79c

Also affects tdLoading demo
http://localhost:4200/#/components/loading

[aciccarello]

Update: Fixed in dd76149

Prompt dialog buttons are being pushed up into the input.
http://localhost:4200/#/components/dialogs

In IE:

In Chrome:

[jeremysmartt]

Strange, clicking in the jump to box causes everything to go away

[jeremysmartt]

Dynamic Forms looks off:

[jeremysmartt]

Select Boxes look off in IE:

[jeremysmartt]

SVG from td-readme-loader looks off:

[aciccarello]

Data Table

• Sort icon is mis-aligned and jumps around

• Error and persistant title on row selection

Chrome for comparison:

• Icons in data table demo overlap text

[kyleledbetter]

fix for the prompt dialog pushed
dd76149

ref: #831 (comment)
thx @aciccarello

[emoralesb05]

fix loading demo issue in IE11 a37e79c

[kyleledbetter]

fixed expansion panel form height issue with 2c41491

ref #831 (comment)

[kyleledbetter]

fixed dynamic form overlap with e9ac1b6

ref: #831 (comment)
thx @jeremysmartt

[kyleledbetter]

fixed the data-table sorting arrow jumping around in IE11 b4a06c8

[emoralesb05]

fixed an additional issue with md-select paging width in ie11 d088a87

[emoralesb05]

I think this is a good enough base for now. If there are any other IE11 (which there are) we should open specific issues in the repo so we can tackle them separately.

Gonna merge this one for now.

[aciccarello]

👏 Thanks for this work. IE11 support is still a requirement for TD ITS projects so this is very helpful.