fix(ngStyle, ngClass): StyleDirective security fixes & merge activated styles

[ThomasBurleson]

• Add use of DomSanitizer + SecurityContext.STYLE to safeguard all style values
• Deprecated use of style selectors to favor ngStyle selectors since the functionality extends NgStyle directive.
• Deprecated use of class selectors to favor ngClass selectors since the functionality extends NgClass directive.
• ngStyle restores default (non-activated) inline styles when breakpoint deactivates
• ngStyle merges default inline styles with activated styles
• ngStyle selectors support Object notations or raw strings (ala html inline styles)
  • e.g. Object notation = [ngStyle]="{'font-size.px': 10, color: 'rgb(0,0,0)', 'text-align':'left'}"
  • e.g. Raw-string notation = style="font-size:10px; color:black; text-align:left;"
  • NOTE: delimiters for raw-strings must be ;.
• Add support to ngStyle for all NgStyleType type variations
  • Added style-transforms.ts utilities and tests
  • Refactored _buildStyleMap() method

BREAKING CHANGE:

• [style.<alias>] selectors are deprecated in favor of [ngStyle.<alias>] selectors
• [class.<alias>] selectors are deprecated in favor of [ngClass.<alias>] selectors
• default styles are merged with activated styles

<div  fxLayout
  [class.xs]="['xs-1', 'xs-2']"
  style="font-size:10px; color:black; text-align:left;"
  [style.xs]="{'font-size': '16px'}"
  [style.md]="{'font-size': '12px'}">
</div>

<div  fxLayout
  [ngClass.xs]="['xs-1', 'xs-2']"
  ngStyle="font-size:10px; color:black; text-align:left;"
  [ngStyle.xs]="{'font-size': '16px'}"
  [ngStyle.md]="{'font-size': '12px'}">
</div>

Fixes #197.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}