diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts index 18fa1b0e46b..e84c65f7dc7 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts +++ b/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(); diff --git a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts index 3ab5a759c9f..4c18c7beccf 100644 --- a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts +++ b/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 { diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts index 4ca31e8fb5d..c56a93c3b6c 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts @@ -223,7 +223,7 @@ 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) { @@ -231,8 +231,8 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC 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) { diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts index b4ee2aa6a82..33ad04e268e 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts +++ b/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); } diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 56c831cf6ff..f8a0b4b0d13 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/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; diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts index b6af139b7e9..c1ff8761a48 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts +++ b/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; } }); diff --git a/projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts b/projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts index 2bb587525fe..99168ef3e89 100644 --- a/projects/igniteui-angular/src/lib/grids/moving/moving.drag.directive.ts +++ b/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'); diff --git a/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts b/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts index a15109e5469..83287824d16 100644 --- a/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts +++ b/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') { diff --git a/projects/igniteui-angular/src/lib/services/excel/worksheet-data-dictionary.ts b/projects/igniteui-angular/src/lib/services/excel/worksheet-data-dictionary.ts index 84de3089fb7..9a6a86fed39 100644 --- a/projects/igniteui-angular/src/lib/services/excel/worksheet-data-dictionary.ts +++ b/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; } diff --git a/projects/igniteui-angular/src/lib/services/exporter-common/export-utilities.ts b/projects/igniteui-angular/src/lib/services/exporter-common/export-utilities.ts index be70ff2227b..3fe3426c9ef 100644 --- a/projects/igniteui-angular/src/lib/services/exporter-common/export-utilities.ts +++ b/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); }