feat(vhelper-scrollbar): update implementation

Author: didimmova

projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss

@@ -243,7 +243,7 @@
         -webkit-overflow-scrolling: touch;
         position: relative;
 
-        igx-display-container.has-scrollbar {
+        .igx-display-container--scrollbar {
             padding-inline-end: var(--vhelper-scrollbar-size);
         }
     }

projects/igniteui-angular/src/lib/directives/for-of/base.helper.component.ts

@@ -6,12 +6,15 @@ import {
     Directive,
     AfterViewInit,
     Inject,
-    NgZone
+    NgZone,
+    Renderer2,
+    PLATFORM_ID
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { Subject } from 'rxjs';
 import { takeUntil, throttleTime } from 'rxjs/operators';
 import { resizeObservable, PlatformUtil } from '../../core/utils';
+import { isPlatformBrowser } from '@angular/common';
 
 @Directive({
     selector: '[igxVirtualHelperBase]',
@@ -34,6 +37,9 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
         protected _zone: NgZone,
         @Inject(DOCUMENT) public document: any,
         protected platformUtil: PlatformUtil,
+        private renderer: Renderer2,
+        @Inject(PLATFORM_ID) private platformId: Object,
+        private ngZone: NgZone
     ) {
         this._scrollNativeSize = this.calculateScrollNativeSize();
     }
@@ -104,25 +110,31 @@ export class VirtualHelperBaseDirective implements OnDestroy, AfterViewInit {
         return this.document.body.contains(this.nativeElement);
     }
 
+    private toggleClass(element: HTMLElement, className: string, add: boolean): void {
+        if (!element) return;
+        add ? this.renderer.addClass(element, className) : this.renderer.removeClass(element, className);
+    }
+
     private updateScrollbarClass() {
-        requestAnimationFrame(() => {
-            const hasScrollbar = this.nativeElement.scrollHeight > this.nativeElement.clientHeight;
-            const prevSibling = this.nativeElement.previousElementSibling as HTMLElement | null;
-
-            if (hasScrollbar) {
-                this.nativeElement.classList.add('has-scrollbar');
-                if (prevSibling?.tagName.toLowerCase() === 'igx-display-container') {
-                    prevSibling.classList.add('has-scrollbar');
-                }
-            } else {
-                this.nativeElement.classList.remove('has-scrollbar');
-                if (prevSibling?.tagName.toLowerCase() === 'igx-display-container') {
-                    prevSibling.classList.remove('has-scrollbar');
-                }
+        if (!isPlatformBrowser(this.platformId)) {
+            return;
+        }
+
+        this.ngZone.runOutsideAngular(() => {
+            requestAnimationFrame(() => {
+            const el = this.nativeElement;
+            const hasScrollbar = el.scrollHeight > el.clientHeight;
+            const prevSibling = el.previousElementSibling as HTMLElement | null;
+            const scrollbarClass = 'igx-display-container--scrollbar';
+
+            if (prevSibling?.tagName.toLowerCase() === 'igx-display-container') {
+                this.toggleClass(prevSibling, scrollbarClass, hasScrollbar);
             }
+            });
         });
     }
 
+
     protected handleMutations(event) {
         const hasSize = !(event[0].contentRect.height === 0 && event[0].contentRect.width === 0);
         if (!hasSize && !this.isAttachedToDom) {

projects/igniteui-angular/src/lib/directives/for-of/horizontal.virtual.helper.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef, ChangeDetectorRef, Inject, NgZone } from '@angular/core';
+import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef, ChangeDetectorRef, Inject, NgZone, Renderer2, PLATFORM_ID } from '@angular/core';
 import { VirtualHelperBaseDirective } from './base.helper.component';
 import { DOCUMENT } from '@angular/common';
 import { PlatformUtil } from '../../core/utils';
@@ -19,8 +19,17 @@ export class HVirtualHelperComponent extends VirtualHelperBaseDirective {
     @HostBinding('class')
     public cssClasses = 'igx-vhelper--horizontal';
 
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, zone: NgZone, @Inject(DOCUMENT) document, platformUtil: PlatformUtil) {
-        super(elementRef, cdr, zone, document, platformUtil);
+    constructor(
+        elementRef: ElementRef,
+        cdr: ChangeDetectorRef,
+        zone: NgZone,
+        @Inject(DOCUMENT) document: any,
+        platformUtil: PlatformUtil,
+        renderer: Renderer2,
+        @Inject(PLATFORM_ID) platformId: Object,
+        ngZone: NgZone
+    ) {
+        super(elementRef, cdr, zone, document, platformUtil, renderer, platformId, ngZone);
     }
 
     protected override restoreScroll() {

projects/igniteui-angular/src/lib/directives/for-of/virtual.helper.component.ts

@@ -1,5 +1,6 @@
 import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef,
-     ChangeDetectorRef, OnDestroy, OnInit, Inject, NgZone } from '@angular/core';
+    ChangeDetectorRef, OnDestroy, OnInit, Inject, NgZone, Renderer2,
+    PLATFORM_ID} from '@angular/core';
 import { VirtualHelperBaseDirective } from './base.helper.component';
 import { DOCUMENT } from '@angular/common';
 import { PlatformUtil } from '../../core/utils';
@@ -21,8 +22,17 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement
     @HostBinding('class')
     public cssClasses = 'igx-vhelper--vertical';
 
-    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef, zone: NgZone, @Inject(DOCUMENT) document, platformUtil: PlatformUtil) {
-        super(elementRef, cdr, zone, document, platformUtil);
+    constructor(
+        elementRef: ElementRef,
+        cdr: ChangeDetectorRef,
+        zone: NgZone,
+        @Inject(DOCUMENT) document: any,
+        platformUtil: PlatformUtil,
+        renderer: Renderer2,
+        @Inject(PLATFORM_ID) platformId: Object,
+        ngZone: NgZone
+    ) {
+        super(elementRef, cdr, zone, document, platformUtil, renderer, platformId, ngZone);
     }
 
     public ngOnInit() {