fix: provide browser globals with injection tokens (#358)

docs/app/app.component.ts

@@ -4,14 +4,14 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, Inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import 'style-loader!./styles/styles.scss';
 import { Subscription } from 'rxjs/Subscription';
 import { DocsService } from './docs/docs.service';
 import { Analytics } from './docs/utils/analytics.service';
-import { NbWindow } from '@nebular/theme';
+import { NB_WINDOW } from '@nebular/theme';
 
 @Component({
   selector: 'ngd-app-root',
@@ -24,7 +24,7 @@ export class NgdAppComponent implements AfterViewInit, OnDestroy, OnInit {
   private fragmentSubscription: Subscription;
 
 
-  constructor(private window: NbWindow,
+  constructor(@Inject(NB_WINDOW) private window,
               private docsService: DocsService,
               private router: Router,
               private route: ActivatedRoute,

docs/app/docs/page/page.component.ts

@@ -4,9 +4,9 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, Inject } from '@angular/core';
 
-import { NbMenuService, NbWindow } from '@nebular/theme';
+import { NbMenuService, NB_WINDOW } from '@nebular/theme';
 import { Subscription } from 'rxjs/Subscription';
 import { Title } from '@angular/platform-browser';
 
@@ -30,7 +30,7 @@ export class NgdPageComponent implements OnDestroy {
 
   private menuSubscription: Subscription;
 
-  constructor(private window: NbWindow,
+  constructor(@Inject(NB_WINDOW) private window,
               private menuService: NbMenuService,
               private titleService: Title) {
 

docs/app/docs/utils/analytics.service.ts

@@ -1,16 +1,16 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Inject } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { Location } from '@angular/common';
 
 import { filter } from 'rxjs/operator/filter';
-import { NbWindow } from '@nebular/theme';
+import { NB_WINDOW } from '@nebular/theme';
 declare const ga: any;
 
 @Injectable()
 export class Analytics {
   private _enabled: boolean;
 
-  constructor(private window: NbWindow,
+  constructor(@Inject(NB_WINDOW) private window,
               private _location: Location,
               private _router: Router) {
     this._enabled = this.window.location.href.indexOf('akveo.github.io') >= 0;

docs/app/homepage/homepage.component.ts

@@ -8,13 +8,14 @@ import {
   Renderer2,
   ViewChild,
   ViewChildren,
+  Inject,
 } from '@angular/core';
 import { Title } from '@angular/platform-browser';
 
 import * as ImageComparison from 'image-comparison';
 import 'style-loader!image-comparison/src/ImageComparison.css';
 import { Subject } from 'rxjs/Rx';
-import { NbSpinnerService, NbWindow } from '@nebular/theme';
+import { NbSpinnerService, NB_WINDOW } from '@nebular/theme';
 
 @Component({
   selector: 'ngd-homepage',
@@ -95,7 +96,7 @@ export class NgdHomepageComponent implements AfterViewInit, OnInit {
   currentSectionId: string = 'home';
   highlightMenu$ = new Subject();
 
-  constructor(private window: NbWindow,
+  constructor(@Inject(NB_WINDOW) private window,
               private renderer: Renderer2,
               private spinnerService: NbSpinnerService,
               private titleService: Title) {

src/framework/theme/components/layout/layout.component.ts

@@ -18,7 +18,7 @@ import { takeWhile } from 'rxjs/operators/takeWhile';
 import { convertToBoolProperty } from '../helpers';
 import { NbThemeService } from '../../services/theme.service';
 import { NbSpinnerService } from '../../services/spinner.service';
-import { NbWindow, NbDocument } from '../../theme.options';
+import { NB_WINDOW, NB_DOCUMENT } from '../../theme.options';
 
 /**
  * A container component which determines a content position inside of the layout.
@@ -293,8 +293,8 @@ export class NbLayoutComponent implements AfterViewInit, OnInit, OnDestroy {
     protected elementRef: ElementRef,
     protected renderer: Renderer2,
     protected router: Router,
-    protected window: NbWindow,
-    protected document: NbDocument,
+    @Inject(NB_WINDOW) protected window,
+    @Inject(NB_DOCUMENT) protected document,
     @Inject(PLATFORM_ID) protected platformId: Object,
   ) {
 

src/framework/theme/components/menu/menu.component.ts

@@ -28,7 +28,7 @@ import { filter } from 'rxjs/operators/filter';
 
 import { NbMenuInternalService, NbMenuItem, NbMenuService, NbMenuBag } from './menu.service';
 import { convertToBoolProperty, getElementHeight } from '../helpers';
-import { NbWindow } from '../../theme.options';
+import { NB_WINDOW } from '../../theme.options';
 
 function sumSubmenuHeight(item: NbMenuItem) {
   return item.expanded
@@ -217,7 +217,7 @@ export class NbMenuComponent implements OnInit, AfterViewInit, OnDestroy {
   private alive: boolean = true;
   private autoCollapseValue: boolean = false;
 
-  constructor(private window: NbWindow,
+  constructor(@Inject(NB_WINDOW) private window,
               private menuInternalService: NbMenuInternalService,
               private router: Router) {
   }

src/framework/theme/components/popover/helpers/adjustment.helper.ts

@@ -1,6 +1,6 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Inject } from '@angular/core';
 
-import { NbWindow } from '../../../theme.options';
+import { NB_WINDOW } from '../../../theme.options';
 import { NbPositioningHelper } from './positioning.helper';
 import { NbPopoverAdjustment, NbPopoverPlacement, NbPopoverPosition } from './model';
 
@@ -26,8 +26,13 @@ const NB_ORDERED_PLACEMENTS = {
 @Injectable()
 export class NbAdjustmentHelper {
 
-  constructor(private positioningHelper: NbPositioningHelper, private window: NbWindow) {
-  }
+  private window: Window;
+
+  constructor(
+    private positioningHelper: NbPositioningHelper,
+    @Inject(NB_WINDOW) window) {
+      this.window = window as Window;
+    }
 
   /**
    * Calculated {@link NbPopoverPosition} based on placed element, host element,

src/framework/theme/components/popover/helpers/adjustment.spec.ts

@@ -7,7 +7,7 @@ import { async, inject, TestBed } from '@angular/core/testing';
 
 import { NbAdjustmentHelper } from './adjustment.helper';
 import { NbPopoverAdjustment, NbPopoverPlacement } from './model';
-import { NbDocument, NbWindow } from '../../../theme.options';
+import { NB_DOCUMENT, NB_WINDOW } from '../../../theme.options';
 import { NbPositioningHelper } from './positioning.helper';
 
 describe('adjustment-helper', () => {
@@ -61,8 +61,8 @@ describe('adjustment-helper', () => {
     // Configure testbed to prepare services
     TestBed.configureTestingModule({
       providers: [
-        { provide: NbWindow, useValue: window },
-        { provide: NbDocument, useValue: document },
+        { provide: NB_WINDOW, useValue: window },
+        { provide: NB_DOCUMENT, useValue: document },
         NbPositioningHelper,
         NbAdjustmentHelper,
       ],

src/framework/theme/components/popover/helpers/positioning.helper.ts

@@ -3,15 +3,15 @@
  * Copyright Akveo. All Rights Reserved.
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
-import { Injectable } from '@angular/core';
+import { Injectable, Inject } from '@angular/core';
 
 import { NbPopoverPlacement } from './model';
-import { NbWindow } from '../../../theme.options';
+import { NB_WINDOW } from '../../../theme.options';
 
 @Injectable()
 export class NbPositioningHelper {
 
-  constructor(private window: NbWindow) {
+  constructor(@Inject(NB_WINDOW) private window) {
   }
 
   /**

src/framework/theme/components/popover/helpers/positioning.spec.ts

@@ -7,7 +7,7 @@ import { async, inject, TestBed } from '@angular/core/testing';
 
 import { NbPositioningHelper } from './positioning.helper';
 import { NbPopoverPlacement } from './model';
-import { NbDocument, NbWindow } from '../../../theme.options';
+import { NB_DOCUMENT, NB_WINDOW } from '../../../theme.options';
 
 describe('positioning-helper', () => {
   const placedRect: ClientRect = {
@@ -34,8 +34,8 @@ describe('positioning-helper', () => {
     // Configure testbed to prepare services
     TestBed.configureTestingModule({
       providers: [
-        { provide: NbWindow, useValue: window },
-        { provide: NbDocument, useValue: document },
+        { provide: NB_WINDOW, useValue: window },
+        { provide: NB_DOCUMENT, useValue: document },
         NbPositioningHelper,
       ],
     });

src/framework/theme/components/popover/helpers/trigger.helper.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Inject } from '@angular/core';
 import { fromEvent as observableFromEvent } from 'rxjs/observable/fromEvent';
 import { empty as observableEmpty } from 'rxjs/observable/empty';
 import { filter } from 'rxjs/operators/filter';
@@ -10,7 +10,7 @@ import { repeat } from 'rxjs/operators/repeat';
 import { takeUntil } from 'rxjs/operators/takeUntil';
 
 
-import { NbDocument } from '../../../theme.options';
+import { NB_DOCUMENT } from '../../../theme.options';
 import { NbPopoverMode, NbPopoverTrigger } from './model';
 
 /**
@@ -26,11 +26,11 @@ const NB_TRIGGERS = {
    *
    * @param host {HTMLElement} popover host element.
    * @param getContainer {Function} popover container getter.
-   * @param document {NbDocument} document ref.
+   * @param document {Document} document ref.
    *
    * @return {NbPopoverTrigger} open and close events streams.
    * */
-  [NbPopoverMode.CLICK](host: HTMLElement, getContainer: Function, document: NbDocument): NbPopoverTrigger {
+  [NbPopoverMode.CLICK](host: HTMLElement, getContainer: Function, document: Document): NbPopoverTrigger {
     return {
       open: observableEmpty(),
       close: observableFromEvent<Event>(document, 'click')
@@ -50,11 +50,11 @@ const NB_TRIGGERS = {
    *
    * @param host {HTMLElement} popover host element.
    * @param getContainer {Function} popover container getter.
-   * @param document {NbDocument} document ref.
+   * @param document {Document} document ref.
    *
    * @return {NbPopoverTrigger} open and close events streams.
    * */
-  [NbPopoverMode.HOVER](host: HTMLElement, getContainer: Function, document: NbDocument): NbPopoverTrigger {
+  [NbPopoverMode.HOVER](host: HTMLElement, getContainer: Function, document: Document): NbPopoverTrigger {
     return {
       open: observableFromEvent<Event>(host, 'mouseenter')
         .pipe(
@@ -104,7 +104,7 @@ const NB_TRIGGERS = {
 @Injectable()
 export class NbTriggerHelper {
 
-  constructor(private document: NbDocument) {
+  constructor(@Inject(NB_DOCUMENT) private document) {
   }
 
   /**

src/framework/theme/services/spinner.service.ts

@@ -3,8 +3,8 @@
  * Copyright Akveo. All Rights Reserved.
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
-import { Injectable } from '@angular/core';
-import { NbDocument } from '../theme.options';
+import { Injectable, Inject } from '@angular/core';
+import { NB_DOCUMENT } from '../theme.options';
 
 /**
  * Service to control the global page spinner.
@@ -15,7 +15,7 @@ export class NbSpinnerService {
   private loaders: Promise<any>[] = [];
   private selector: string = 'nb-global-spinner';
 
-  constructor(private document: NbDocument) {}
+  constructor(@Inject(NB_DOCUMENT) private document) {}
 
   /**
    * Appends new loader to the list of loader to be completed before

src/framework/theme/theme.module.ts

@@ -13,8 +13,8 @@ import {
   NbThemeOptions,
   nbThemeOptionsToken,
   nbJSThemesToken,
-  NbDocument,
-  NbWindow,
+  NB_DOCUMENT,
+  NB_WINDOW,
 } from './theme.options';
 import { NbThemeService } from './services/theme.service';
 import { NbSpinnerService } from './services/spinner.service';
@@ -60,8 +60,8 @@ export class NbThemeModule {
         { provide: nbBuiltInJSThemesToken, useValue: BUILT_IN_THEMES },
         { provide: nbJSThemesToken, useValue: nbJSThemes || [] },
         { provide: nbMediaBreakpointsToken, useValue: nbMediaBreakpoints || DEFAULT_MEDIA_BREAKPOINTS },
-        { provide: NbWindow, useFactory: nbWindowFactory },
-        { provide: NbDocument, useExisting: DOCUMENT },
+        { provide: NB_WINDOW, useFactory: nbWindowFactory },
+        { provide: NB_DOCUMENT, useExisting: DOCUMENT },
         NbJSThemesRegistry,
         NbThemeService,
         NbMediaBreakpointsService,

src/framework/theme/theme.options.ts

@@ -20,5 +20,5 @@ export const nbJSThemesToken = new InjectionToken<NbJSThemeOptions[]>('NB_THEMES
 /**
  * We're providing browser apis with tokens to improve testing capabilities.
  * */
-export abstract class NbWindow extends Window {}
-export abstract class NbDocument extends Document {}
+export const NB_WINDOW = new InjectionToken<Window>('NB_WINDOW');
+export const NB_DOCUMENT = new InjectionToken<Document>('NB_DOCUMENT');