fix(ssr): Change all occurrences of pure document call with injected …

projects/igniteui-angular/src/lib/carousel/carousel.component.ts

@@ -1,4 +1,4 @@
-import { NgIf, NgClass, NgFor, NgTemplateOutlet } from '@angular/common';
+import { NgIf, NgClass, NgFor, NgTemplateOutlet, DOCUMENT } from '@angular/common';
 import {
     AfterContentInit,
     ChangeDetectorRef,
@@ -584,7 +584,8 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
         private iterableDiffers: IterableDiffers,
         @Inject(IgxAngularAnimationService) animationService: AnimationService,
         private platformUtil: PlatformUtil,
-        private dir: IgxDirectionality
+        private dir: IgxDirectionality,
+        @Inject(DOCUMENT) private document: any
     ) {
         super(animationService, cdr);
         this.differ = this.iterableDiffers.find([]).create(null);
@@ -1003,7 +1004,7 @@ export class IgxCarouselComponent extends IgxCarouselComponentBase implements On
     }
 
     private focusElement() {
-        const focusedElement = document.activeElement;
+        const focusedElement = this.document.activeElement;
 
         if (focusedElement.classList.contains('igx-carousel-indicators__indicator')) {
             this.indicatorsElements[this.current].nativeElement.focus();

projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts

@@ -18,12 +18,14 @@ import {
     QueryList,
     RendererStyleFlags2,
     booleanAttribute,
-    EmbeddedViewRef
+    EmbeddedViewRef,
+    inject
 } from '@angular/core';
 import { animationFrameScheduler, fromEvent, interval, Subject } from 'rxjs';
 import { takeUntil, throttle } from 'rxjs/operators';
 import { IBaseEventArgs, PlatformUtil } from '../../core/utils';
 import { IDropStrategy, IgxDefaultDropStrategy } from './drag-drop.strategy';
+import { DOCUMENT } from '@angular/common';
 
 enum DragScrollDirection {
     UP,
@@ -551,7 +553,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
     protected set ghostLeft(pageX: number) {
         if (this.ghostElement) {
             // We need to take into account marginLeft, since top style does not include margin, but pageX includes the margin.
-            const ghostMarginLeft = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-left'], 10);
+            const ghostMarginLeft = parseInt(this.document.defaultView.getComputedStyle(this.ghostElement)['margin-left'], 10);
             // If ghost host is defined it needs to be taken into account.
             this.ghostElement.style.left = (pageX - ghostMarginLeft - this._ghostHostX) + 'px';
         }
@@ -566,7 +568,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
     protected set ghostTop(pageY: number) {
         if (this.ghostElement) {
             // We need to take into account marginTop, since top style does not include margin, but pageY includes the margin.
-            const ghostMarginTop = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-top'], 10);
+            const ghostMarginTop = parseInt(this.document.defaultView.getComputedStyle(this.ghostElement)['margin-top'], 10);
             // If ghost host is defined it needs to be taken into account.
             this.ghostElement.style.top = (pageY - ghostMarginTop - this._ghostHostY) + 'px';
         }
@@ -579,19 +581,19 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
     }
 
     protected get windowScrollTop() {
-        return document.documentElement.scrollTop || window.scrollY;
+        return this.document.documentElement.scrollTop || window.scrollY;
     }
 
     protected get windowScrollLeft() {
-        return document.documentElement.scrollLeft || window.scrollX;
+        return this.document.documentElement.scrollLeft || window.scrollX;
     }
 
     protected get windowScrollHeight() {
-        return document.documentElement.scrollHeight;
+        return this.document.documentElement.scrollHeight;
     }
 
     protected get windowScrollWidth() {
-        return document.documentElement.scrollWidth;
+        return this.document.documentElement.scrollWidth;
     }
 
     /**
@@ -641,6 +643,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
     protected _scrollContainerStepMs = 10;
     protected _scrollContainerThreshold = 25;
     protected _containerScrollIntervalId = null;
+    private document = inject(DOCUMENT);
 
     /**
      * Sets the offset of the dragged element relative to the mouse in pixels.
@@ -690,7 +693,7 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
         public viewContainer: ViewContainerRef,
         public zone: NgZone,
         public renderer: Renderer2,
-        protected platformUtil: PlatformUtil,
+        protected platformUtil: PlatformUtil
     ) {
     }
 
@@ -746,20 +749,20 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
 
             // We should bind to document events only once when there are no pointer events.
             if (!this.pointerEventsEnabled && this.touchEventsEnabled) {
-                fromEvent(document.defaultView, 'touchmove').pipe(
+                fromEvent(this.document.defaultView, 'touchmove').pipe(
                     throttle(() => interval(0, animationFrameScheduler)),
                     takeUntil(this._destroy)
                 ).subscribe((res) => this.onPointerMove(res));
 
-                fromEvent(document.defaultView, 'touchend').pipe(takeUntil(this._destroy))
+                fromEvent(this.document.defaultView, 'touchend').pipe(takeUntil(this._destroy))
                     .subscribe((res) => this.onPointerUp(res));
             } else if (!this.pointerEventsEnabled) {
-                fromEvent(document.defaultView, 'mousemove').pipe(
+                fromEvent(this.document.defaultView, 'mousemove').pipe(
                     throttle(() => interval(0, animationFrameScheduler)),
                     takeUntil(this._destroy)
                 ).subscribe((res) => this.onPointerMove(res));
 
-                fromEvent(document.defaultView, 'mouseup').pipe(takeUntil(this._destroy))
+                fromEvent(this.document.defaultView, 'mouseup').pipe(takeUntil(this._destroy))
                     .subscribe((res) => this.onPointerUp(res));
             }
             this.element.nativeElement.addEventListener('transitionend', this.onTransitionEnd.bind(this));
@@ -1140,9 +1143,9 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
             if (this.ghostHost && !Array.from(this.ghostHost.children).includes(this.ghostElement)) {
                 ghostReattached = true;
                 this.ghostHost.appendChild(this.ghostElement);
-            } else if (!this.ghostHost && !Array.from(document.body.children).includes(this.ghostElement)) {
+            } else if (!this.ghostHost && !Array.from(this.document.body.children).includes(this.ghostElement)) {
                 ghostReattached = true;
-                document.body.appendChild(this.ghostElement);
+                this.document.body.appendChild(this.ghostElement);
             }
 
             if (ghostReattached) {
@@ -1293,11 +1296,11 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
         if (this.ghostHost) {
             this.ghostHost.appendChild(this.ghostElement);
         } else {
-            document.body.appendChild(this.ghostElement);
+            this.document.body.appendChild(this.ghostElement);
         }
 
-        const ghostMarginLeft = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-left'], 10);
-        const ghostMarginTop = parseInt(document.defaultView.getComputedStyle(this.ghostElement)['margin-top'], 10);
+        const ghostMarginLeft = parseInt(this.document.defaultView.getComputedStyle(this.ghostElement)['margin-left'], 10);
+        const ghostMarginTop = parseInt(this.document.defaultView.getComputedStyle(this.ghostElement)['margin-top'], 10);
         this.ghostElement.style.left = (this._ghostStartX - ghostMarginLeft + totalMovedX - this._ghostHostX) + 'px';
         this.ghostElement.style.top = (this._ghostStartY - ghostMarginTop + totalMovedY - this._ghostHostY) + 'px';
 
@@ -1417,13 +1420,13 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
         // using window.pageXOffset for IE9 compatibility
         const viewPortX = pageX - window.pageXOffset;
         const viewPortY = pageY - window.pageYOffset;
-        if (document['msElementsFromPoint']) {
+        if (this.document['msElementsFromPoint']) {
             // Edge and IE special snowflakes
-            const elements = document['msElementsFromPoint'](viewPortX, viewPortY);
+            const elements = this.document['msElementsFromPoint'](viewPortX, viewPortY);
             return elements === null ? [] : elements;
         } else {
             // Other browsers like Chrome, Firefox, Opera
-            return document.elementsFromPoint(viewPortX, viewPortY);
+            return this.document.elementsFromPoint(viewPortX, viewPortY);
         }
     }
 
@@ -1483,8 +1486,8 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
     protected getGhostHostBaseOffsetX() {
         if (!this.ghostHost) return 0;
 
-        const ghostPosition = document.defaultView.getComputedStyle(this.ghostHost).getPropertyValue('position');
-        if (ghostPosition === 'static' && this.ghostHost.offsetParent && this.ghostHost.offsetParent === document.body) {
+        const ghostPosition = this.document.defaultView.getComputedStyle(this.ghostHost).getPropertyValue('position');
+        if (ghostPosition === 'static' && this.ghostHost.offsetParent && this.ghostHost.offsetParent === this.document.body) {
             return 0;
         } else if (ghostPosition === 'static' && this.ghostHost.offsetParent) {
             return this.ghostHost.offsetParent.getBoundingClientRect().left + this.windowScrollLeft;
@@ -1495,8 +1498,8 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
     protected getGhostHostBaseOffsetY() {
         if (!this.ghostHost) return 0;
 
-        const ghostPosition = document.defaultView.getComputedStyle(this.ghostHost).getPropertyValue('position');
-        if (ghostPosition === 'static' && this.ghostHost.offsetParent && this.ghostHost.offsetParent === document.body) {
+        const ghostPosition = this.document.defaultView.getComputedStyle(this.ghostHost).getPropertyValue('position');
+        if (ghostPosition === 'static' && this.ghostHost.offsetParent && this.ghostHost.offsetParent === this.document.body) {
             return 0;
         } else if (ghostPosition === 'static' && this.ghostHost.offsetParent) {
             return this.ghostHost.offsetParent.getBoundingClientRect().top + this.windowScrollTop;
@@ -1540,8 +1543,8 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
             let yDir = scrollDir == DragScrollDirection.UP ? -1 : (scrollDir == DragScrollDirection.DOWN ? 1 : 0);
             if (!this.scrollContainer) {
                 // Cap scrolling so we don't scroll past the window max scroll position.
-                const maxScrollX = this._originalScrollContainerWidth - document.documentElement.clientWidth;
-                const maxScrollY = this._originalScrollContainerHeight - document.documentElement.clientHeight;
+                const maxScrollX = this._originalScrollContainerWidth - this.document.documentElement.clientWidth;
+                const maxScrollY = this._originalScrollContainerHeight - this.document.documentElement.clientHeight;
                 xDir = (this.windowScrollLeft <= 0 && xDir < 0) || (this.windowScrollLeft >= maxScrollX && xDir > 0) ? 0 : xDir;
                 yDir = (this.windowScrollTop <= 0 && yDir < 0) || (this.windowScrollTop >= maxScrollY && yDir > 0) ? 0 : yDir;
             } else {

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts

@@ -223,16 +223,16 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
             const chipsAreaElements = this.chipsArea.element.nativeElement.children;
             let visibleChipsCount = 0;
             const moreIconWidth = this.moreIcon.nativeElement.offsetWidth -
-                parseInt(document.defaultView.getComputedStyle(this.moreIcon.nativeElement)['margin-left'], 10);
+                parseInt(this.column?.grid.document.defaultView.getComputedStyle(this.moreIcon.nativeElement)['margin-left'], 10);
 
             for (let index = 0; index < chipsAreaElements.length - 1; index++) {
                 if (viewWidth + chipsAreaElements[index].offsetWidth < areaWidth) {
                     viewWidth += chipsAreaElements[index].offsetWidth;
                     if (index % 2 === 0) {
                         visibleChipsCount++;
                     } else {
-                        viewWidth += parseInt(document.defaultView.getComputedStyle(chipsAreaElements[index])['margin-left'], 10);
-                        viewWidth += parseInt(document.defaultView.getComputedStyle(chipsAreaElements[index])['margin-right'], 10);
+                        viewWidth += parseInt(this.column?.grid.document.defaultView.getComputedStyle(chipsAreaElements[index])['margin-left'], 10);
+                        viewWidth += parseInt(this.column?.grid.document.defaultView.getComputedStyle(chipsAreaElements[index])['margin-right'], 10);
                     }
                 } else {
                     if (index % 2 !== 0 && viewWidth + moreIconWidth > areaWidth) {

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts

@@ -512,7 +512,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
             return;
         }
         requestAnimationFrame(() => {
-            const focusedElement = document.activeElement;
+            const focusedElement = this.column?.grid.document.activeElement;
 
             if (focusedElement.classList.contains('igx-chip__remove')) {
                 return;
@@ -606,7 +606,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
 
 
     public onChipPointerdown(args, chip: IgxChipComponent) {
-        const activeElement = document.activeElement;
+        const activeElement = this.column?.grid.document.activeElement;
         this._cancelChipClick = chip.selected
             && activeElement && this.editorFocused(activeElement);
     }

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -7510,7 +7510,7 @@ export abstract class IgxGridBaseDirective implements GridType,
     protected get renderedActualRowHeight() {
         let border = 1;
         if (this.rowList.toArray().length > 0) {
-            const rowStyles = document.defaultView.getComputedStyle(this.rowList.first.nativeElement);
+            const rowStyles = this.document.defaultView.getComputedStyle(this.rowList.first.nativeElement);
             border = rowStyles.borderBottomWidth ? Math.ceil(parseFloat(rowStyles.borderBottomWidth)) : border;
         }
         return this.rowHeight + border;

projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts

@@ -305,7 +305,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
     public set expandChildren(value: boolean) {
         this._defaultExpandState = value;
         this.rowIslandAPI.getChildGrids().forEach((grid) => {
-            if (document.body.contains(grid.nativeElement)) {
+            if (this.document.body.contains(grid.nativeElement)) {
                 // Detect changes right away if the grid is visible
                 grid.expandChildren = value;
                 grid.cdr.detectChanges();
@@ -549,7 +549,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
         this.updateColumns(this._childColumns);
         this.rowIslandAPI.getChildGrids().forEach((grid: GridType) => {
             grid.createColumnsList(this._childColumns);
-            if (!document.body.contains(grid.nativeElement)) {
+            if (!this.document.body.contains(grid.nativeElement)) {
                 grid.updateOnRender = true;
             }
         });

projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts

@@ -120,8 +120,8 @@ export class IgxColumnMovingDragDirective extends IgxDragDirective implements On
 
         this.ghostElement.classList.remove(this.columnSelectedClass);
 
-        const icon = document.createElement('i');
-        const text = document.createTextNode('block');
+        const icon = this.column?.grid.document.createElement('i');
+        const text = this.column?.grid.document.createTextNode('block');
         icon.appendChild(text);
 
         icon.classList.add('material-icons');

projects/igniteui-angular/src/lib/grids/selection/selection.service.ts

@@ -248,7 +248,7 @@ export class IgxGridSelectionService {
         this.pointerState.ctrl = ctrl;
         this.pointerState.shift = shift;
         this.pointerEventInGridBody = true;
-        document.body.addEventListener('pointerup', this.pointerOriginHandler);
+        this.grid.document.body.addEventListener('pointerup', this.pointerOriginHandler);
 
         // No ctrl key pressed - no multiple selection
         if (!ctrl) {
@@ -385,7 +385,7 @@ export class IgxGridSelectionService {
     public restoreTextSelection(): void {
         const selection = window.getSelection();
         if (!selection.rangeCount) {
-            selection.addRange(this._selectionRange || document.createRange());
+            selection.addRange(this._selectionRange || this.grid.document.createRange());
         }
     }
 
@@ -855,7 +855,7 @@ export class IgxGridSelectionService {
 
     private pointerOriginHandler = (event) => {
         this.pointerEventInGridBody = false;
-        document.body.removeEventListener('pointerup', this.pointerOriginHandler);
+        this.grid.document.body.removeEventListener('pointerup', this.pointerOriginHandler);
 
         const targetTagName = event.target.tagName.toLowerCase();
         if (targetTagName !== 'igx-grid-cell' && targetTagName !== 'igx-tree-grid-cell') {

projects/igniteui-angular/src/lib/services/excel/worksheet-data-dictionary.ts

@@ -93,7 +93,7 @@ export class WorksheetDataDictionary {
 
     private getContext(): any {
         if (!this._context) {
-            const canvas = document.createElement('canvas');
+            const canvas = globalThis.document?.createElement('canvas');
             this._context = canvas.getContext('2d');
             this._context.font = WorksheetDataDictionary.DEFAULT_FONT;
         }

projects/igniteui-angular/src/lib/services/exporter-common/export-utilities.ts

@@ -1,4 +1,3 @@
-
 /**
  * @hidden
  */
@@ -23,14 +22,15 @@ export class ExportUtilities {
     }
 
     public static saveBlobToFile(blob: Blob, fileName) {
-        const a = document.createElement('a');
+        const doc = globalThis.document;
+        const a = doc.createElement('a');
         const url = window.URL.createObjectURL(blob);
         a.download = fileName;
 
         a.href = url;
-        document.body.appendChild(a);
+        doc.body.appendChild(a);
         a.click();
-        document.body.removeChild(a);
+        doc.body.removeChild(a);
         window.URL.revokeObjectURL(url);
     }