refactor(api): use Renderer2 instead of Renderer (#372)

* fix(api): getDisplayStyle() defaults to 'inline'

* refactor(api): use Renderer2 instead of Renderer

* Use Renderer2 instead of Renderer
* Do not extend the Angular base directives, but instead inject them into the constructor.
* improve support for future releases of Angular 5

Fixes #326.

src/demo-app/app/docs-layout-responsive/responsiveStyle.demo.ts

@@ -49,13 +49,14 @@ import {Component} from '@angular/core';
 
       <md-card-content>
         <div class="containerX">
-          <div fxLayout="row" fxFlex class="coloredContainerX box">
-            <div
-              fxFlex
+          <div fxLayout="row"
+               fxFlex
+               class="coloredContainerX box">
+            <div fxFlex
               style="font-style: italic"
-              [style.xs]="{'font-size.px': 10, color: 'blue'}"
-              [style.sm]="{'font-size.px': 20, color: 'lightblue'}"
-              [style.md]="{'font-size.px': 30, color: 'orange'}"
+              [style.xs]="{'font-size.px': 10, 'background-color': '#ddd', color: 'blue'}"
+              [style.sm]="{'font-size.px': 20, 'background-color': 'grey', color: '#482b00'}"
+              [style.md]="{'font-size.px': 30, 'background-color': 'black', color: 'orange'}"
               [style.lg]="styleLgExp">
                 Sample Text #2
             </div>

src/lib/flexbox/api/base-adapter.ts

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {ElementRef, Renderer} from '@angular/core';
+import {ElementRef, Renderer2} from '@angular/core';
 
 import {BaseFxDirective} from './base';
 import {ResponsiveActivation} from './../responsive/responsive-activation';
@@ -48,7 +48,7 @@ export class BaseFxDirectiveAdapter extends BaseFxDirective {
   constructor(protected _baseKey: string,   // non-responsive @Input property name
               protected _mediaMonitor: MediaMonitor,
               protected _elementRef: ElementRef,
-              protected _renderer: Renderer) {
+              protected _renderer: Renderer2) {
     super(_mediaMonitor, _elementRef, _renderer);
   }
 

src/lib/flexbox/api/base.ts

@@ -7,7 +7,7 @@
  */
 import {
   ElementRef, OnDestroy, SimpleChanges, OnChanges,
-  SimpleChange, Renderer
+  SimpleChange, Renderer2
 } from '@angular/core';
 import {ɵgetDOM as getDom} from '@angular/platform-browser';
 
@@ -65,7 +65,7 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
    */
   constructor(protected _mediaMonitor: MediaMonitor,
               protected _elementRef: ElementRef,
-              protected _renderer: Renderer) {
+              protected _renderer: Renderer2) {
     this._display = this._getDisplayStyle();
   }
 
@@ -126,8 +126,8 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
     let element: HTMLElement = source || this._elementRef.nativeElement;
     let value = this._lookupStyle(element, 'display');
 
-    return value ? value.trim() :
-        ((element.nodeType === 1) ? 'block' : 'inline-block');
+    // Note: 'inline' is the default of all elements, unless UA stylesheet overrides
+    return value ? value.trim() : 'inline';
   }
 
   /**
@@ -175,7 +175,7 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
     Object.keys(styles).forEach(key => {
       const values = Array.isArray(styles[key]) ? styles[key] : [styles[key]];
       for (let value of values) {
-        this._renderer.setElementStyle(element, key, value);
+        this._renderer.setStyle(element, key, value);
       }
     });
   }

src/lib/flexbox/api/class.ts

@@ -7,29 +7,29 @@
  */
 import {
   Directive,
+  DoCheck,
   ElementRef,
   Input,
-  DoCheck,
+  IterableDiffers,
+  KeyValueDiffers,
+  OnChanges,
   OnDestroy,
+  Optional,
   Renderer,
-  IterableDiffers,
-  KeyValueDiffers, SimpleChanges, OnChanges
+  Renderer2,
+  SimpleChanges,
+  Self
 } from '@angular/core';
 import {NgClass} from '@angular/common';
 
+import {BaseFxDirective} from './base';
 import {BaseFxDirectiveAdapter} from './base-adapter';
 import {MediaChange} from '../../media-query/media-change';
 import {MediaMonitor} from '../../media-query/media-monitor';
 
 /** NgClass allowed inputs **/
 export type NgClassType = string | string[] | Set<string> | {[klass: string]: any};
 
-/**
- * Explicitly export the NgStyle super class type for ngc/AOT compiles
- * Workaround for https://github.com/angular/angular/issues/17849
- */
-export const _ClassDirectiveBaseClass = NgClass;
-
 /**
  * Directive to add responsive support for ngClass.
  */
@@ -44,7 +44,7 @@ export const _ClassDirectiveBaseClass = NgClass;
     [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]
   `
 })
-export class ClassDirective extends _ClassDirectiveBaseClass
+export class ClassDirective extends BaseFxDirective
     implements DoCheck, OnChanges, OnDestroy {
 
   /**
@@ -55,7 +55,7 @@ export class ClassDirective extends _ClassDirectiveBaseClass
   @Input('ngClass')
   set ngClassBase(val: NgClassType) {
     this._ngClassAdapter.cacheInput('ngClass', val, true);
-    this.ngClass = val;
+    this._ngClassInstance.ngClass = val;
   }
 
   /* tslint:disable */
@@ -86,7 +86,7 @@ export class ClassDirective extends _ClassDirectiveBaseClass
   @Input('class')
   set classBase(val: string) {
     this._classAdapter.cacheInput('_rawClass', val, true);
-    this.klass = val;
+    this._ngClassInstance.klass = val;
   }
 
   @Input('class.xs')      set classXs(val:   NgClassType) { this._classAdapter.cacheInput('classXs',   val, true); }
@@ -115,13 +115,20 @@ export class ClassDirective extends _ClassDirectiveBaseClass
 
   /* tslint:enable */
   constructor(protected monitor: MediaMonitor,
+              _ngEl: ElementRef, _renderer: Renderer2, _oldRenderer: Renderer,
               _iterableDiffers: IterableDiffers, _keyValueDiffers: KeyValueDiffers,
-              _ngEl: ElementRef, _renderer: Renderer) {
+              @Optional() @Self() private _ngClassInstance: NgClass) {
 
-    super(_iterableDiffers, _keyValueDiffers, _ngEl, _renderer);
+    super(monitor, _ngEl, _renderer);
 
     this._classAdapter = new BaseFxDirectiveAdapter('class', monitor, _ngEl, _renderer);
     this._ngClassAdapter = new BaseFxDirectiveAdapter('ngClass', monitor, _ngEl, _renderer);
+
+    // Create an instance NgClass Directive instance only if `ngClass=""` has NOT been defined on
+    // the same host element; since the responsive variations may be defined...
+    if ( !this._ngClassInstance ) {
+      this._ngClassInstance = new NgClass(_iterableDiffers, _keyValueDiffers, _ngEl, _oldRenderer);
+    }
   }
 
   // ******************************************************************
@@ -147,12 +154,13 @@ export class ClassDirective extends _ClassDirectiveBaseClass
     if (!this._classAdapter.hasMediaQueryListener) {
       this._configureMQListener();
     }
-    super.ngDoCheck();
+    this._ngClassInstance.ngDoCheck();
   }
 
   ngOnDestroy() {
     this._classAdapter.ngOnDestroy();
     this._ngClassAdapter.ngOnDestroy();
+    this._ngClassInstance = null;
   }
 
   // ******************************************************************
@@ -170,7 +178,7 @@ export class ClassDirective extends _ClassDirectiveBaseClass
 
     this._ngClassAdapter.listenForMediaQueryChanges('ngClass', '', (changes: MediaChange) => {
       this._updateNgClass(changes.value);
-      super.ngDoCheck();    // trigger NgClass::_applyIterableChanges()
+      this._ngClassInstance.ngDoCheck();    // trigger NgClass::_applyIterableChanges()
     });
   }
 
@@ -183,7 +191,7 @@ export class ClassDirective extends _ClassDirectiveBaseClass
     if (this._classAdapter.mqActivation) {
       klass = this._classAdapter.mqActivation.activatedInput;
     }
-    this.klass = klass || this.initialClasses;
+    this._ngClassInstance.klass = klass || this.initialClasses;
   }
 
   /**
@@ -194,14 +202,16 @@ export class ClassDirective extends _ClassDirectiveBaseClass
     if (this._ngClassAdapter.mqActivation) {
       value = this._ngClassAdapter.mqActivation.activatedInput;
     }
-    this.ngClass = value || '';     // Delegate subsequent activity to the NgClass logic
+
+    // Delegate subsequent activity to the NgClass logic
+    this._ngClassInstance.ngClass = value || '';
   }
 
   /**
    * Special adapter to cross-cut responsive behaviors
-   * into the ClassDirective
+   * into the ClassDirective instance
    */
-  protected _classAdapter: BaseFxDirectiveAdapter;   // used for `class.xxx` selectores
+  protected _classAdapter: BaseFxDirectiveAdapter;   // used for `class.xxx` selectors
   protected _ngClassAdapter: BaseFxDirectiveAdapter;   // used for `ngClass.xxx` selectors
 }
 

src/lib/flexbox/api/flex-align.ts

@@ -12,7 +12,7 @@ import {
   OnInit,
   OnChanges,
   OnDestroy,
-  Renderer,
+  Renderer2,
   SimpleChanges,
 } from '@angular/core';
 
@@ -54,7 +54,7 @@ export class FlexAlignDirective extends BaseFxDirective implements OnInit, OnCha
   @Input('fxFlexAlign.gt-lg') set alignGtLg(val)  { this._cacheInput('alignGtLg', val); };
 
   /* tslint:enable */
-  constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer) {
+  constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer2) {
     super(monitor, elRef, renderer);
   }
 

src/lib/flexbox/api/flex-fill.ts

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {Directive, ElementRef, Renderer} from '@angular/core';
+import {Directive, ElementRef, Renderer2} from '@angular/core';
 
 import {MediaMonitor} from '../../media-query/media-monitor';
 import {BaseFxDirective} from './base';
@@ -29,7 +29,7 @@ const FLEX_FILL_CSS = {
   [fxFlexFill]
 `})
 export class FlexFillDirective extends BaseFxDirective {
-  constructor(monitor: MediaMonitor, public elRef: ElementRef, public renderer: Renderer) {
+  constructor(monitor: MediaMonitor, public elRef: ElementRef, public renderer: Renderer2) {
     super(monitor, elRef, renderer);
     this._applyStyleToElement(FLEX_FILL_CSS);
   }

src/lib/flexbox/api/flex-offset.ts

@@ -13,7 +13,7 @@ import {
   OnChanges,
   OnDestroy,
   Optional,
-  Renderer,
+  Renderer2,
   SimpleChanges,
   SkipSelf
 } from '@angular/core';
@@ -59,7 +59,7 @@ export class FlexOffsetDirective extends BaseFxDirective implements OnInit, OnCh
   /* tslint:enable */
   constructor(monitor: MediaMonitor,
               elRef: ElementRef,
-              renderer: Renderer,
+              renderer: Renderer2,
               @Optional() @SkipSelf() protected _container: LayoutDirective ) {
     super(monitor, elRef, renderer);
 

src/lib/flexbox/api/flex-order.ts

@@ -12,7 +12,7 @@ import {
   OnInit,
   OnChanges,
   OnDestroy,
-  Renderer,
+  Renderer2,
   SimpleChanges,
 } from '@angular/core';
 
@@ -52,7 +52,7 @@ export class FlexOrderDirective extends BaseFxDirective implements OnInit, OnCha
   @Input('fxFlexOrder.lt-xl') set orderLtXl(val) { this._cacheInput('orderLtXl', val); };
 
   /* tslint:enable */
-  constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer) {
+  constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer2) {
     super(monitor, elRef, renderer);
   }
 

src/lib/flexbox/api/flex.ts

@@ -13,7 +13,7 @@
   OnDestroy,
   OnInit,
   Optional,
-  Renderer,
+  Renderer2,
   SimpleChanges,
   SkipSelf,
 } from '@angular/core';
@@ -84,7 +84,7 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
   //       for the parent flex container for this flex item.
   constructor(monitor: MediaMonitor,
               elRef: ElementRef,
-              renderer: Renderer,
+              renderer: Renderer2,
               @Optional() @SkipSelf() protected _container: LayoutDirective,
               @Optional() @SkipSelf() protected _wrap: LayoutWrapDirective) {
 

src/lib/flexbox/api/layout-align.ts

@@ -13,7 +13,7 @@ import {
   OnDestroy,
   OnInit,
   Optional,
-  Renderer,
+  Renderer2,
   SimpleChanges, Self,
 } from '@angular/core';
 import {Subscription} from 'rxjs/Subscription';
@@ -67,7 +67,7 @@ export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnC
   /* tslint:enable */
   constructor(
       monitor: MediaMonitor,
-      elRef: ElementRef, renderer: Renderer,
+      elRef: ElementRef, renderer: Renderer2,
       @Optional() @Self() container: LayoutDirective) {
     super(monitor, elRef, renderer);
 

src/lib/flexbox/api/layout-gap.ts

@@ -10,7 +10,7 @@ import {
   ElementRef,
   Input,
   OnChanges,
-  Renderer,
+  Renderer2,
   SimpleChanges,
   Self,
   AfterContentInit,
@@ -65,7 +65,7 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI
   /* tslint:enable */
   constructor(monitor: MediaMonitor,
               elRef: ElementRef,
-              renderer: Renderer,
+              renderer: Renderer2,
               @Optional() @Self() container: LayoutDirective,
               private _zone: NgZone) {
     super(monitor, elRef, renderer);

src/lib/flexbox/api/layout-wrap.ts

@@ -12,7 +12,7 @@ import {
   OnChanges,
   OnDestroy,
   OnInit,
-  Renderer,
+  Renderer2,
   SimpleChanges, Self, Optional,
 } from '@angular/core';
 import {Subscription} from 'rxjs/Subscription';
@@ -64,7 +64,7 @@ export class LayoutWrapDirective extends BaseFxDirective implements OnInit, OnCh
   constructor(
     monitor: MediaMonitor,
     elRef: ElementRef,
-    renderer: Renderer,
+    renderer: Renderer2,
     @Optional() @Self() container: LayoutDirective) {
 
     super(monitor, elRef, renderer);

src/lib/flexbox/api/layout.ts

@@ -12,7 +12,7 @@ import {
   OnInit,
   OnChanges,
   OnDestroy,
-  Renderer,
+  Renderer2,
   SimpleChanges,
 } from '@angular/core';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
@@ -71,7 +71,7 @@ export class LayoutDirective extends BaseFxDirective implements OnInit, OnChange
   /**
    *
    */
-  constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer) {
+  constructor(monitor: MediaMonitor, elRef: ElementRef, renderer: Renderer2) {
     super(monitor, elRef, renderer);
     this._announcer = new BehaviorSubject<string>('row');
     this.layout$ = this._announcer.asObservable();