refactor(vhelper): update implementation

Author: didimmova

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

@@ -244,7 +244,7 @@
         position: relative;
 
         igx-display-container {
-            padding-inline-end: var(--vhelper-scrollbar-size, 0)
+            padding-inline-end: var(--vhelper-scrollbar-size);
         }
     }
 

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

@@ -125,8 +125,8 @@
     }
 
     @property --vhelper-scollbar-size {
-        syntax: '<integer>';
-        initial-value: 0;
+        syntax: '<length>';
+        initial-value: 16px;
         inherits: true;
     }
 

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

@@ -13,16 +13,8 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement
     @HostBinding('scrollTop')
     public scrollTop;
 
-    @HostBinding('style.width.px')
     public scrollWidth;
 
-    @HostBinding('style.--vhelper-scrollbar-size')
-    public get scrollbarSize(): string {
-        const value = `${this.scrollNativeSize}px`;
-        this.document.documentElement.style.setProperty('--vhelper-scrollbar-size', value);
-        return value;
-    }
-
     @ViewChild('container', { read: ViewContainerRef, static: true }) public _vcr;
     @Input() public itemsLength: number;
 
@@ -35,6 +27,10 @@ export class VirtualHelperComponent extends VirtualHelperBaseDirective implement
 
     public ngOnInit() {
         this.scrollWidth = this.scrollNativeSize;
+        this.document.documentElement.style.setProperty(
+            '--vhelper-scrollbar-size',
+            `${this.scrollNativeSize}px`
+        );
     }
 
     protected override restoreScroll() {