feat(igx-vhelper): create and use css var for scrollbar size

Author: didimmova

projects/igniteui-angular/src/lib/core/styles/components/_common/_igx-vhelper.scss

@@ -12,6 +12,7 @@
     position: absolute;
     top: 0;
     inset-inline-end: 0;
+    width: var(--igx-vhelper--scrollbar-size);
 }
 
 %vhelper--horizontal {

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

@@ -242,6 +242,10 @@
         overflow-x: hidden;
         -webkit-overflow-scrolling: touch;
         position: relative;
+
+        igx-display-container {
+            padding-inline-end: var(--igx-vhelper--scrollbar-size, 0);
+        }
     }
 
     %igx-drop-down__content {

projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss

@@ -95,6 +95,10 @@
         --ig-spacing-block-large: 1;
     }
 
+    #{$scope} {
+        --igx-vhelper-scrollbar-size: 1rem;
+    }
+
     @if not(list.index($exclude, 'palette')) {
         @include palette($palette);
     }

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

@@ -1,5 +1,5 @@
 import { Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef,
-     ChangeDetectorRef, OnDestroy, OnInit, Inject, NgZone } from '@angular/core';
+     ChangeDetectorRef, OnDestroy, Inject, NgZone } from '@angular/core';
 import { VirtualHelperBaseDirective } from './base.helper.component';
 import { DOCUMENT } from '@angular/common';
 import { PlatformUtil } from '../../core/utils';
@@ -9,28 +9,27 @@ import { PlatformUtil } from '../../core/utils';
     template: '<div #container class="igx-vhelper__placeholder-content" [style.height.px]="size"></div>',
     standalone: true
 })
-export class VirtualHelperComponent extends VirtualHelperBaseDirective implements OnInit, OnDestroy  {
+export class VirtualHelperComponent extends VirtualHelperBaseDirective implements OnDestroy  {
     @HostBinding('scrollTop')
     public scrollTop;
 
-    @HostBinding('style.width.px')
-    public scrollWidth;
+    @HostBinding('style.--igx-vhelper--scrollbar-size')
+    public get scrollbarSize(): string {
+        const value = `${this.scrollNativeSize}px`;
+        this.document.documentElement.style.setProperty('--igx-vhelper--scrollbar-size', value);
+        return value;
+    }
 
     @ViewChild('container', { read: ViewContainerRef, static: true }) public _vcr;
     @Input() public itemsLength: number;
 
-
     @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);
     }
 
-    public ngOnInit() {
-        this.scrollWidth = this.scrollNativeSize;
-    }
-
     protected override restoreScroll() {
         this.nativeElement.scrollTop = this.scrollAmount;
     }