Implemented a provider to make the native document injectable through angular

We want to avoid using browser globals directly in case we ever want to run the application in a different environment. With the provider, we can just switch in an environment specific provider and this will still work correctly.

Author: KorinaGraber

source/behaviors/offClick/offClick.ts

@@ -3,6 +3,8 @@ import { Directive, Host, Input, Output, EventEmitter, OnInit, OnDestroy, Simple
 import { services } from 'typescript-angular-utilities';
 import __guid = services.guid;
 
+import { DocumentWrapper } from '../../services/document/document.provider';
+
 export interface IOffClickEvent extends MouseEvent {
 	rlEventIdentifier: string;
 }
@@ -34,9 +36,12 @@ export class OffClickDirective implements OnInit, OnDestroy {
 	};
 
 	identifier: string;
+	document: Document;
 
-	constructor(guidService: __guid.GuidService) {
+	constructor(guidService: __guid.GuidService
+			, document: DocumentWrapper) {
 		this.identifier = guidService.random();
+		this.document = <any>document;
 	}
 
 	ngOnInit() {
@@ -48,11 +53,11 @@ export class OffClickDirective implements OnInit, OnDestroy {
 	}
 
 	addListener(): void {
-		document.addEventListener('click', this.listener);
+		this.document.addEventListener('click', this.listener);
 	}
 
 	removeListener(): void {
-		document.removeEventListener('click', this.listener);
+		this.document.removeEventListener('click', this.listener);
 	}
 
 	ngOnDestroy() {

source/componentProviders.module.ts

@@ -15,6 +15,7 @@ import { MergeSort } from './components/cardContainer/sorts/mergeSort/mergeSort.
 
 import { AsyncHelper } from './services/async/async.service';
 import { AutosaveActionService } from './services/autosaveAction/autosaveAction.service';
+import { DOCUMENT_PROVIDER } from './services/document/document.provider';
 import { DocumentService } from './services/documentWrapper/documentWrapper.service';
 import { FormService } from './services/form/form.service';
 import { JQUERY_PROVIDER } from './services/jquery/jquery.provider';
@@ -66,8 +67,9 @@ const defaultThemeNg1: FactoryProvider = {
 		DefaultTheme,
 		defaultThemeNg1,
 		DialogRootService,
-		FormService,
+		DOCUMENT_PROVIDER,
 		DocumentService,
+		FormService,
 		BreakpointService,
 		VisibleBreakpointService,
 		JQUERY_PROVIDER,

source/services/document/document.provider.ts

@@ -0,0 +1,8 @@
+import { ValueProvider } from '@angular/core';
+
+export abstract class DocumentWrapper { }
+
+export const DOCUMENT_PROVIDER: ValueProvider = {
+	provide: DocumentWrapper,
+	useValue: document,
+};