Fixes primefaces/primeng#12734 - Add Document Injection

src/app/components/button/button.ts

@@ -1,5 +1,5 @@
-import { CommonModule } from '@angular/common';
-import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component, ContentChildren, Directive, ElementRef, EventEmitter, Input, NgModule, OnDestroy, Output, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
+import { AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component, ContentChildren, Directive, ElementRef, EventEmitter, Input, NgModule, OnDestroy, Output, QueryList, TemplateRef, ViewEncapsulation, Inject } from '@angular/core';
 import { PrimeTemplate } from 'primeng/api';
 import { DomHandler } from 'primeng/dom';
 import { RippleModule } from 'primeng/ripple';
@@ -81,7 +81,7 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
 
     private _internalClasses: string[] = Object.values(INTERNAL_BUTTON_CLASSES);
 
-    constructor(public el: ElementRef) {}
+    constructor(public el: ElementRef, @Inject(DOCUMENT) private document: Document) {}
 
     ngAfterViewInit() {
         DomHandler.addMultipleClasses(this.htmlElement, this.getStyleClass().join(' '));
@@ -118,21 +118,21 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
 
     createLabel() {
         if (this.label) {
-            let labelElement = document.createElement('span');
+            let labelElement = this.document.createElement('span');
             if (this.icon && !this.label) {
                 labelElement.setAttribute('aria-hidden', 'true');
             }
 
             labelElement.className = 'p-button-label';
-            labelElement.appendChild(document.createTextNode(this.label));
+            labelElement.appendChild(this.document.createTextNode(this.label));
 
             this.htmlElement.appendChild(labelElement);
         }
     }
 
     createIcon() {
         if (this.icon || this.loading) {
-            let iconElement = document.createElement('span');
+            let iconElement = this.document.createElement('span');
             iconElement.className = 'p-button-icon';
             iconElement.setAttribute('aria-hidden', 'true');
             let iconPosClass = this.label ? 'p-button-icon-' + this.iconPos : null;

src/app/components/confirmdialog/confirmdialog.ts

@@ -17,10 +17,11 @@ import {
     TemplateRef,
     AfterContentInit,
     Output,
-    OnInit
+    OnInit,
+    Inject
 } from '@angular/core';
 import { trigger, style, transition, animate, AnimationEvent, useAnimation, animation } from '@angular/animations';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import { DomHandler } from 'primeng/dom';
 import { Footer, SharedModule, PrimeTemplate, PrimeNGConfig, TranslationKeys, ConfirmEventType } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
@@ -262,7 +263,7 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy {
 
     translationSubscription: Subscription;
 
-    constructor(public el: ElementRef, public renderer: Renderer2, private confirmationService: ConfirmationService, public zone: NgZone, private cd: ChangeDetectorRef, public config: PrimeNGConfig) {
+    constructor(public el: ElementRef, public renderer: Renderer2, private confirmationService: ConfirmationService, public zone: NgZone, private cd: ChangeDetectorRef, public config: PrimeNGConfig, @Inject(DOCUMENT) private document: Document) {
         this.subscription = this.confirmationService.requireConfirmation$.subscribe((confirmation) => {
             if (!confirmation) {
                 this.hide();
@@ -374,7 +375,7 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy {
 
     appendContainer() {
         if (this.appendTo) {
-            if (this.appendTo === 'body') document.body.appendChild(this.wrapper);
+            if (this.appendTo === 'body') this.document.body.appendChild(this.wrapper);
             else DomHandler.appendChild(this.wrapper, this.appendTo);
         }
     }
@@ -387,7 +388,7 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy {
 
     enableModality() {
         if (this.option('blockScroll')) {
-            DomHandler.addClass(document.body, 'p-overflow-hidden');
+            DomHandler.addClass(this.document.body, 'p-overflow-hidden');
         }
 
         if (this.option('dismissableMask')) {
@@ -403,7 +404,7 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy {
         this.maskVisible = false;
 
         if (this.option('blockScroll')) {
-            DomHandler.removeClass(document.body, 'p-overflow-hidden');
+            DomHandler.removeClass(this.document.body, 'p-overflow-hidden');
         }
 
         if (this.dismissableMask) {
@@ -417,9 +418,9 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy {
 
     createStyle() {
         if (!this.styleElement) {
-            this.styleElement = document.createElement('style');
+            this.styleElement = this.document.createElement('style');
             this.styleElement.type = 'text/css';
-            document.head.appendChild(this.styleElement);
+            this.document.head.appendChild(this.styleElement);
             let innerHTML = '';
             for (let breakpoint in this.breakpoints) {
                 innerHTML += `
@@ -533,7 +534,7 @@ export class ConfirmDialog implements AfterContentInit, OnInit, OnDestroy {
 
     destroyStyle() {
         if (this.styleElement) {
-            document.head.removeChild(this.styleElement);
+            this.document.head.removeChild(this.styleElement);
             this.styleElement = null;
         }
     }

src/app/components/confirmpopup/confirmpopup.ts

@@ -1,5 +1,5 @@
-import { NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, OnDestroy, Input, EventEmitter, Renderer2 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, ChangeDetectorRef, OnDestroy, Input, EventEmitter, Renderer2, Inject } from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import { Confirmation, ConfirmationService, OverlayService, PrimeNGConfig, TranslationKeys } from 'primeng/api';
 import { Subscription } from 'rxjs';
 import { ButtonModule } from 'primeng/button';
@@ -116,7 +116,15 @@ export class ConfirmPopup implements OnDestroy {
         this.cd.markForCheck();
     }
 
-    constructor(public el: ElementRef, private confirmationService: ConfirmationService, public renderer: Renderer2, private cd: ChangeDetectorRef, public config: PrimeNGConfig, public overlayService: OverlayService) {
+    constructor(
+        public el: ElementRef,
+        private confirmationService: ConfirmationService,
+        public renderer: Renderer2,
+        private cd: ChangeDetectorRef,
+        public config: PrimeNGConfig,
+        public overlayService: OverlayService,
+        @Inject(DOCUMENT) private document: Document
+    ) {
         this.subscription = this.confirmationService.requireConfirmation$.subscribe((confirmation) => {
             if (!confirmation) {
                 this.hide();
@@ -143,7 +151,7 @@ export class ConfirmPopup implements OnDestroy {
     onAnimationStart(event: AnimationEvent) {
         if (event.toState === 'open') {
             this.container = event.element;
-            document.body.appendChild(this.container);
+            this.document.body.appendChild(this.container);
             this.align();
             this.bindListeners();
 
@@ -325,7 +333,7 @@ export class ConfirmPopup implements OnDestroy {
 
     restoreAppend() {
         if (this.container) {
-            document.body.removeChild(this.container);
+            this.document.body.removeChild(this.container);
         }
 
         this.onContainerDestroy();

src/app/components/dynamicdialog/dialogservice.ts

@@ -1,14 +1,15 @@
-import { Injectable, ComponentFactoryResolver, ApplicationRef, Injector, Type, EmbeddedViewRef, ComponentRef } from '@angular/core';
+import { Injectable, ComponentFactoryResolver, ApplicationRef, Injector, Type, EmbeddedViewRef, ComponentRef, Inject } from '@angular/core';
 import { DynamicDialogComponent } from './dynamicdialog';
 import { DynamicDialogInjector } from './dynamicdialog-injector';
 import { DynamicDialogConfig } from './dynamicdialog-config';
 import { DynamicDialogRef } from './dynamicdialog-ref';
+import { DOCUMENT } from '@angular/common';
 
 @Injectable()
 export class DialogService {
     dialogComponentRefMap: Map<DynamicDialogRef, ComponentRef<DynamicDialogComponent>> = new Map();
 
-    constructor(private componentFactoryResolver: ComponentFactoryResolver, private appRef: ApplicationRef, private injector: Injector) {}
+    constructor(private componentFactoryResolver: ComponentFactoryResolver, private appRef: ApplicationRef, private injector: Injector, @Inject(DOCUMENT) private document: Document) {}
 
     public open(componentType: Type<any>, config: DynamicDialogConfig) {
         const dialogRef = this.appendDialogComponentToBody(config);
@@ -41,7 +42,7 @@ export class DialogService {
         this.appRef.attachView(componentRef.hostView);
 
         const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
-        document.body.appendChild(domElem);
+        this.document.body.appendChild(domElem);
 
         this.dialogComponentRefMap.set(dialogRef, componentRef);
 

src/app/components/scrollpanel/scrollpanel.ts

@@ -1,5 +1,5 @@
-import { NgModule, Component, Input, AfterViewInit, OnDestroy, ElementRef, NgZone, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, AfterContentInit, ContentChildren, QueryList, TemplateRef } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgModule, Component, Input, AfterViewInit, OnDestroy, ElementRef, NgZone, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef, AfterContentInit, ContentChildren, QueryList, TemplateRef, Inject } from '@angular/core';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import { DomHandler } from 'primeng/dom';
 import { PrimeTemplate } from 'primeng/api';
 
@@ -29,7 +29,7 @@ export class ScrollPanel implements AfterViewInit, AfterContentInit, OnDestroy {
 
     @Input() styleClass: string;
 
-    constructor(public el: ElementRef, public zone: NgZone, public cd: ChangeDetectorRef) {}
+    constructor(public el: ElementRef, public zone: NgZone, public cd: ChangeDetectorRef, @Inject(DOCUMENT) private document: Document) {}
 
     @ViewChild('container') containerViewChild: ElementRef;
 
@@ -159,10 +159,10 @@ export class ScrollPanel implements AfterViewInit, AfterContentInit, OnDestroy {
         this.lastPageY = e.pageY;
         DomHandler.addClass(this.yBarViewChild.nativeElement, 'p-scrollpanel-grabbed');
 
-        DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
+        DomHandler.addClass(this.document.body, 'p-scrollpanel-grabbed');
 
-        document.addEventListener('mousemove', this.onDocumentMouseMove);
-        document.addEventListener('mouseup', this.onDocumentMouseUp);
+        this.document.addEventListener('mousemove', this.onDocumentMouseMove);
+        this.document.addEventListener('mouseup', this.onDocumentMouseUp);
         e.preventDefault();
     }
 
@@ -171,10 +171,10 @@ export class ScrollPanel implements AfterViewInit, AfterContentInit, OnDestroy {
         this.lastPageX = e.pageX;
         DomHandler.addClass(this.xBarViewChild.nativeElement, 'p-scrollpanel-grabbed');
 
-        DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
+        DomHandler.addClass(this.document.body, 'p-scrollpanel-grabbed');
 
-        document.addEventListener('mousemove', this.onDocumentMouseMove);
-        document.addEventListener('mouseup', this.onDocumentMouseUp);
+        this.document.addEventListener('mousemove', this.onDocumentMouseMove);
+        this.document.addEventListener('mouseup', this.onDocumentMouseUp);
         e.preventDefault();
     }
 
@@ -216,10 +216,10 @@ export class ScrollPanel implements AfterViewInit, AfterContentInit, OnDestroy {
     onDocumentMouseUp(e: Event) {
         DomHandler.removeClass(this.yBarViewChild.nativeElement, 'p-scrollpanel-grabbed');
         DomHandler.removeClass(this.xBarViewChild.nativeElement, 'p-scrollpanel-grabbed');
-        DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed');
+        DomHandler.removeClass(this.document.body, 'p-scrollpanel-grabbed');
 
-        document.removeEventListener('mousemove', this.onDocumentMouseMove);
-        document.removeEventListener('mouseup', this.onDocumentMouseUp);
+        this.document.removeEventListener('mousemove', this.onDocumentMouseMove);
+        this.document.removeEventListener('mouseup', this.onDocumentMouseUp);
         this.isXBarClicked = false;
         this.isYBarClicked = false;
     }

src/app/components/speeddial/speeddial.ts

@@ -14,10 +14,10 @@ import {
     ChangeDetectorRef,
     ViewChild,
     OnDestroy,
-    OnInit,
-    AfterViewInit
+    AfterViewInit,
+    Inject
 } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DOCUMENT } from '@angular/common';
 import { SharedModule, PrimeTemplate, MenuItem } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
 import { RippleModule } from 'primeng/ripple';
@@ -161,7 +161,7 @@ export class SpeedDial implements AfterViewInit, AfterContentInit, OnDestroy {
 
     documentClickListener: any;
 
-    constructor(private el: ElementRef, public cd: ChangeDetectorRef) {}
+    constructor(private el: ElementRef, public cd: ChangeDetectorRef, @Inject(DOCUMENT) private document: Document) {}
 
     ngAfterViewInit() {
         if (this.type !== 'linear') {
@@ -322,13 +322,13 @@ export class SpeedDial implements AfterViewInit, AfterContentInit, OnDestroy {
 
                 this.isItemClicked = false;
             };
-            document.addEventListener('click', this.documentClickListener);
+            this.document.addEventListener('click', this.documentClickListener);
         }
     }
 
     unbindDocumentClickListener() {
         if (this.documentClickListener) {
-            document.removeEventListener('click', this.documentClickListener);
+            this.document.removeEventListener('click', this.documentClickListener);
             this.documentClickListener = null;
         }
     }

src/app/showcase/pages/landing/landing.component.ts

@@ -17,7 +17,6 @@ interface City {
     templateUrl: './landing.component.html'
 })
 export class LandingComponent implements OnInit, OnDestroy {
-
     @ViewChild('containerElement') containerElement: ElementRef;
 
     @ViewChild('dt') table: Table;
@@ -91,7 +90,7 @@ export class LandingComponent implements OnInit, OnDestroy {
     isNpmCopied: boolean = false;
 
     usersData = ['fox', 'airbus', 'mercedes', 'ebay', 'ford', 'vw', 'intel', 'unicredit', 'lufthansa', 'nvidia', 'verizon', 'amex'];
-    
+
     usersImages: any;
 
     constructor(private nodeService: NodeService, private customerService: CustomerService, private configService: AppConfigService, private cd: ChangeDetectorRef, public app: AppComponent, private metaService: Meta, private titleService: Title) {}
@@ -217,8 +216,6 @@ export class LandingComponent implements OnInit, OnDestroy {
         }, 2000);
     }
 
-
-
     ngAfterViewInit() {
         this.setAnimation = true;
         this.cd.detectChanges();