refactor(lib): remove private Angular 'getDom()' APIs

* Remove private API references to getDom()
* Add PLATFORM_ID to all components
* Fix Demo-App runtime - add router to system-config

Closes #553.
Fixes #402, Fixes #547.

src/demo-app/system-config.ts

@@ -36,6 +36,7 @@ System.config({
       'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
     '@angular/platform-browser-dynamic/testing':
       'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js',
+    '@angular/router': 'node:@angular/router/bundles/router.umd.js',
 
     '@angular/material': 'node:@angular/material/bundles/material.umd.js',
     '@angular/cdk': 'node:@angular/cdk/bundles/cdk.umd.js',

src/lib/api/core/base-adapter.spec.ts

@@ -21,7 +21,7 @@ export class MockElementRef extends ElementRef {
 describe('BaseFxDirectiveAdapter class', () => {
   let component;
   beforeEach(() => {
-    component = new BaseFxDirectiveAdapter('', {} as MediaMonitor, new MockElementRef(), {} as Renderer2); // tslint:disable-line:max-line-length
+    component = new BaseFxDirectiveAdapter('', {} as MediaMonitor, new MockElementRef(), {} as Renderer2, {}); // tslint:disable-line:max-line-length
   });
   describe('cacheInput', () => {
     it('should call _cacheInputArray when source is an array', () => {

src/lib/api/core/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, Renderer2} from '@angular/core';
+import {ElementRef, Inject, PLATFORM_ID, Renderer2} from '@angular/core';
 
 import {BaseFxDirective} from './base';
 import {ResponsiveActivation} from './responsive-activation';
@@ -48,8 +48,9 @@ export class BaseFxDirectiveAdapter extends BaseFxDirective {
   constructor(protected _baseKey: string,   // non-responsive @Input property name
               protected _mediaMonitor: MediaMonitor,
               protected _elementRef: ElementRef,
-              protected _renderer: Renderer2) {
-    super(_mediaMonitor, _elementRef, _renderer);
+              protected _renderer: Renderer2,
+              @Inject(PLATFORM_ID) protected _platformId: Object) {
+    super(_mediaMonitor, _elementRef, _renderer, _platformId);
   }
 
   /**

src/lib/api/core/base.ts

@@ -6,8 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {
-  ElementRef, OnDestroy, SimpleChanges, OnChanges,
-  SimpleChange, Renderer2
+  ElementRef,
+  OnDestroy,
+  SimpleChanges,
+  OnChanges,
+  SimpleChange,
+  Renderer2,
+  Inject,
+  PLATFORM_ID,
 } from '@angular/core';
 
 import {buildLayoutCSS} from '../../utils/layout-validator';
@@ -16,7 +22,8 @@ import {
   lookupStyle,
   lookupInlineStyle,
   applyStyleToElement,
-  applyStyleToElements, lookupAttributeValue
+  applyStyleToElements,
+  lookupAttributeValue,
 } from '../../utils/style-utils';
 
 import {ResponsiveActivation, KeyOptions} from '../core/responsive-activation';
@@ -63,7 +70,8 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
    */
   constructor(protected _mediaMonitor: MediaMonitor,
               protected _elementRef: ElementRef,
-              protected _renderer: Renderer2) {
+              protected _renderer: Renderer2,
+              @Inject(PLATFORM_ID) protected _platformId: Object) {
   }
 
   // *********************************************
@@ -133,7 +141,7 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
    * and optional restore it when the mediaQueries deactivate
    */
   protected _getDisplayStyle(source: HTMLElement = this.nativeElement): string {
-    return lookupStyle(source || this.nativeElement, 'display');
+    return lookupStyle(this._platformId, source || this.nativeElement, 'display');
   }
 
   /**
@@ -154,7 +162,7 @@ export abstract class BaseFxDirective implements OnDestroy, OnChanges {
     let value = 'row';
 
     if (target) {
-      value = lookupStyle(target, 'flex-direction') || 'row';
+      value = lookupStyle(this._platformId, target, 'flex-direction') || 'row';
       let hasInlineValue = lookupInlineStyle(target, 'flex-direction');
 
       if (!hasInlineValue && addIfMissing) {

src/lib/api/ext/class.ts

@@ -17,7 +17,10 @@ import {
   Optional,
   Renderer2,
   SimpleChanges,
-  Self, OnInit
+  Self,
+  OnInit,
+  Inject,
+  PLATFORM_ID,
 } from '@angular/core';
 import {NgClass} from '@angular/common';
 
@@ -91,8 +94,9 @@ export class ClassDirective extends BaseFxDirective
               protected _keyValueDiffers: KeyValueDiffers,
               protected _ngEl: ElementRef,
               protected _renderer: Renderer2,
-              @Optional() @Self() private _ngClassInstance: NgClass ) {
-    super(monitor, _ngEl, _renderer);
+              @Optional() @Self() private _ngClassInstance: NgClass,
+              @Inject(PLATFORM_ID) protected _platformId: Object) {
+    super(monitor, _ngEl, _renderer, _platformId);
     this._configureAdapters();
   }
 
@@ -135,7 +139,7 @@ export class ClassDirective extends BaseFxDirective
    */
   protected _configureAdapters() {
     this._base = new BaseFxDirectiveAdapter(
-        'ngClass', this.monitor, this._ngEl, this._renderer
+        'ngClass', this.monitor, this._ngEl, this._renderer, this._platformId
     );
     if (!this._ngClassInstance) {
       // Create an instance NgClass Directive instance only if `ngClass=""` has NOT been defined on

src/lib/api/ext/img-src.ts

@@ -11,7 +11,9 @@ import {
   Input,
   OnInit,
   OnChanges,
-  Renderer2
+  Renderer2,
+  Inject,
+  PLATFORM_ID,
 } from '@angular/core';
 
 import {BaseFxDirective} from '../core/base';
@@ -55,8 +57,11 @@ export class ImgSrcDirective extends BaseFxDirective implements OnInit, OnChange
   @Input('src.gt-lg')  set srcGtLg(val) { this._cacheInput('srcGtLg', val);  }
   /* tslint:enable */
 
-  constructor(elRef: ElementRef, renderer: Renderer2, monitor: MediaMonitor) {
-    super(monitor, elRef, renderer);
+  constructor(elRef: ElementRef,
+              renderer: Renderer2,
+              monitor: MediaMonitor,
+              @Inject(PLATFORM_ID) platformId: Object) {
+    super(monitor, elRef, renderer, platformId);
     this._cacheInput('src', elRef.nativeElement.getAttribute('src') || '');
   }
 

src/lib/api/ext/show-hide.ts

@@ -15,7 +15,9 @@ import {
   Renderer2,
   SimpleChanges,
   Self,
-  Optional
+  Optional,
+  Inject,
+  PLATFORM_ID,
 } from '@angular/core';
 
 import {Subscription} from 'rxjs/Subscription';
@@ -104,9 +106,10 @@ export class ShowHideDirective extends BaseFxDirective implements OnInit, OnChan
   constructor(monitor: MediaMonitor,
               @Optional() @Self() protected _layout: LayoutDirective,
               protected elRef: ElementRef,
-              protected renderer: Renderer2) {
+              protected renderer: Renderer2,
+              @Inject(PLATFORM_ID) protected platformId: Object) {
 
-    super(monitor, elRef, renderer);
+    super(monitor, elRef, renderer, platformId);
 
     if (_layout) {
       /**

src/lib/api/ext/style.ts

@@ -17,7 +17,10 @@ import {
   Renderer2,
   SecurityContext,
   Self,
-  SimpleChanges, OnInit,
+  SimpleChanges,
+  OnInit,
+  Inject,
+  PLATFORM_ID,
 } from '@angular/core';
 import {NgStyle} from '@angular/common';
 
@@ -89,9 +92,10 @@ export class StyleDirective extends BaseFxDirective
               protected _ngEl: ElementRef,
               protected _renderer: Renderer2,
               protected _differs: KeyValueDiffers,
-              @Optional() @Self() private _ngStyleInstance: NgStyle) {
+              @Optional() @Self() private _ngStyleInstance: NgStyle,
+              @Inject(PLATFORM_ID) protected _platformId: Object) {
 
-    super(monitor, _ngEl, _renderer);
+    super(monitor, _ngEl, _renderer, _platformId);
     this._configureAdapters();
   }
 
@@ -134,7 +138,7 @@ export class StyleDirective extends BaseFxDirective
      */
     protected _configureAdapters() {
         this._base = new BaseFxDirectiveAdapter(
-            'ngStyle', this.monitor, this._ngEl, this._renderer
+            'ngStyle', this.monitor, this._ngEl, this._renderer, this._platformId
         );
         if ( !this._ngStyleInstance ) {
           // Create an instance NgClass Directive instance only if `ngClass=""` has NOT been

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

@@ -14,6 +14,8 @@ import {
   OnDestroy,
   Renderer2,
   SimpleChanges,
+  Inject,
+  PLATFORM_ID,
 } from '@angular/core';
 
 import {BaseFxDirective} from '../core/base';
@@ -54,8 +56,11 @@ 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: Renderer2) {
-    super(monitor, elRef, renderer);
+  constructor(monitor: MediaMonitor,
+              elRef: ElementRef,
+              renderer: Renderer2,
+              @Inject(PLATFORM_ID) platformId: Object) {
+    super(monitor, elRef, renderer, platformId);
   }
 
 

src/lib/api/flexbox/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, Renderer2} from '@angular/core';
+import {Directive, ElementRef, Inject, PLATFORM_ID, Renderer2} from '@angular/core';
 
 import {MediaMonitor} from '../../media-query/media-monitor';
 import {BaseFxDirective} from '../core/base';
@@ -29,8 +29,11 @@ const FLEX_FILL_CSS = {
   [fxFlexFill]
 `})
 export class FlexFillDirective extends BaseFxDirective {
-  constructor(monitor: MediaMonitor, public elRef: ElementRef, public renderer: Renderer2) {
-    super(monitor, elRef, renderer);
+  constructor(monitor: MediaMonitor,
+              public elRef: ElementRef,
+              public renderer: Renderer2,
+              @Inject(PLATFORM_ID) platformId: Object) {
+    super(monitor, elRef, renderer, platformId);
     this._applyStyleToElement(FLEX_FILL_CSS);
   }
 }

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

@@ -15,7 +15,9 @@ import {
   Optional,
   Renderer2,
   SimpleChanges,
-  SkipSelf
+  SkipSelf,
+  Inject,
+  PLATFORM_ID,
 } from '@angular/core';
 
 import {Subscription} from 'rxjs/Subscription';
@@ -60,8 +62,9 @@ export class FlexOffsetDirective extends BaseFxDirective implements OnInit, OnCh
   constructor(monitor: MediaMonitor,
               elRef: ElementRef,
               renderer: Renderer2,
-              @Optional() @SkipSelf() protected _container: LayoutDirective ) {
-    super(monitor, elRef, renderer);
+              @Optional() @SkipSelf() protected _container: LayoutDirective,
+              @Inject(PLATFORM_ID) platformId: Object) {
+    super(monitor, elRef, renderer, platformId);
 
 
     this.watchParentFlow();

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

@@ -14,6 +14,8 @@ import {
   OnDestroy,
   Renderer2,
   SimpleChanges,
+  Inject,
+  PLATFORM_ID,
 } from '@angular/core';
 
 import {BaseFxDirective} from '../core/base';
@@ -52,8 +54,11 @@ 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: Renderer2) {
-    super(monitor, elRef, renderer);
+  constructor(monitor: MediaMonitor,
+              elRef: ElementRef,
+              renderer: Renderer2,
+              @Inject(PLATFORM_ID) platformId: Object) {
+    super(monitor, elRef, renderer, platformId);
   }
 
   // *********************************************

src/lib/api/flexbox/flex.ts

@@ -5,14 +5,16 @@
  * 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 {
+import {
   Directive,
   ElementRef,
+  Inject,
   Input,
   OnChanges,
   OnDestroy,
   OnInit,
   Optional,
+  PLATFORM_ID,
   Renderer2,
   SimpleChanges,
   SkipSelf,
@@ -86,9 +88,10 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
               elRef: ElementRef,
               renderer: Renderer2,
               @Optional() @SkipSelf() protected _container: LayoutDirective,
-              @Optional() @SkipSelf() protected _wrap: LayoutWrapDirective) {
+              @Optional() @SkipSelf() protected _wrap: LayoutWrapDirective,
+              @Inject(PLATFORM_ID) platformId: Object) {
 
-    super(monitor, elRef, renderer);
+    super(monitor, elRef, renderer, platformId);
 
     this._cacheInput('flex', '');
     this._cacheInput('shrink', 1);

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

@@ -14,7 +14,10 @@ import {
   OnInit,
   Optional,
   Renderer2,
-  SimpleChanges, Self,
+  SimpleChanges,
+  Self,
+  Inject,
+  PLATFORM_ID,
 } from '@angular/core';
 import {Subscription} from 'rxjs/Subscription';
 import {extendObject} from '../../utils/object-extend';
@@ -68,8 +71,9 @@ export class LayoutAlignDirective extends BaseFxDirective implements OnInit, OnC
   constructor(
       monitor: MediaMonitor,
       elRef: ElementRef, renderer: Renderer2,
-      @Optional() @Self() container: LayoutDirective) {
-    super(monitor, elRef, renderer);
+      @Optional() @Self() container: LayoutDirective,
+      @Inject(PLATFORM_ID) platformId: Object) {
+    super(monitor, elRef, renderer, platformId);
 
     if (container) {  // Subscribe to layout direction changes
       this._layoutWatcher = container.layout$.subscribe(this._onLayoutChange.bind(this));

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

@@ -17,6 +17,8 @@ import {
   Optional,
   OnDestroy,
   NgZone,
+  Inject,
+  PLATFORM_ID,
 } from '@angular/core';
 import {Subscription} from 'rxjs/Subscription';
 
@@ -67,8 +69,9 @@ export class LayoutGapDirective extends BaseFxDirective implements AfterContentI
               elRef: ElementRef,
               renderer: Renderer2,
               @Optional() @Self() container: LayoutDirective,
-              private _zone: NgZone) {
-    super(monitor, elRef, renderer);
+              private _zone: NgZone,
+              @Inject(PLATFORM_ID) platformId: Object) {
+    super(monitor, elRef, renderer, platformId);
 
     if (container) {  // Subscribe to layout direction changes
       this._layoutWatcher = container.layout$.subscribe(this._onLayoutChange.bind(this));