refactor(modal, offcanvas): move get scrollbarWidth to BackdropService

Author: xidedix

projects/coreui-angular/src/lib/backdrop/backdrop.service.ts

@@ -14,12 +14,19 @@ export class BackdropService {
   private unListen!: () => void;
 
   constructor(
-    @Inject(DOCUMENT) private document: any,
+    @Inject(DOCUMENT) private document: Document,
     private rendererFactory: RendererFactory2
   ) {
     this.renderer = rendererFactory.createRenderer(null, null);
   }
 
+  get scrollbarWidth() {
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
+    const documentWidth = this.document.documentElement.clientWidth;
+    const scrollbarWidth = Math.abs((window?.innerWidth ?? documentWidth) - documentWidth);
+    return `${scrollbarWidth}px`;
+  }
+
   setBackdrop(type: string = 'modal'): any {
     const backdropElement = this.renderer.createElement('div');
     this.renderer.addClass(backdropElement, `${type}-backdrop`);

projects/coreui-angular/src/lib/modal/modal/modal.component.ts

@@ -184,16 +184,9 @@ export class ModalComponent implements OnInit, OnDestroy {
 
   private _show = true;
 
-  private get scrollbarWidth() {
-    // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
-    const documentWidth = this.document.documentElement.clientWidth;
-    const scrollbarWidth = Math.abs((window?.innerWidth ?? documentWidth) - documentWidth);
-    return `${scrollbarWidth}px`;
-  }
-
   @HostListener('@showHide.start', ['$event'])
   animateStart(event: AnimationEvent) {
-    const scrollbarWidth = this.scrollbarWidth;
+    const scrollbarWidth = this.backdropService.scrollbarWidth;
     if (event.toState === 'visible') {
       this.renderer.setStyle(this.document.body, 'overflow', 'hidden');
       this.renderer.setStyle(this.document.body, 'padding-right', scrollbarWidth);

projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.ts

@@ -139,6 +139,7 @@ export class OffcanvasComponent implements OnChanges, OnInit, OnDestroy {
   @Output() visibleChange = new EventEmitter<boolean>();
 
   private activeBackdrop!: any;
+  private scrollbarWidth!: string;
 
   private stateToggleSubscription!: Subscription;
   private backdropClickSubscription!: Subscription;
@@ -181,6 +182,7 @@ export class OffcanvasComponent implements OnChanges, OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.setScroll();
+    this.scrollbarWidth = this.backdropService.scrollbarWidth;
     this.stateToggleSubscribe();
   }
 
@@ -223,6 +225,7 @@ export class OffcanvasComponent implements OnChanges, OnInit, OnDestroy {
   }
 
   private setBackdrop(setBackdrop: boolean | 'static'): void {
+    this.scrollbarWidth = this.backdropService.scrollbarWidth;
     this.activeBackdrop = !!setBackdrop ? this.backdropService.setBackdrop('offcanvas')
                                         : this.backdropService.clearBackdrop(this.activeBackdrop);
     setBackdrop === true ? this.backdropClickSubscribe()