coreui
diff --git a/‎package.json
Lines changed: 1 addition & 0 deletions b/‎package.json
Lines changed: 1 addition & 0 deletions
diff --git a/‎projects/coreui-angular/src/lib/backdrop/backdrop.service.ts
Lines changed: 8 additions & 1 deletion b/‎projects/coreui-angular/src/lib/backdrop/backdrop.service.ts
Lines changed: 8 additions & 1 deletion
diff --git a/‎projects/coreui-angular/src/lib/modal/modal/modal.component.ts
Lines changed: 1 addition & 8 deletions b/‎projects/coreui-angular/src/lib/modal/modal/modal.component.ts
Lines changed: 1 addition & 8 deletions
diff --git a/‎projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.scss
Lines changed: 3 additions & 0 deletions b/‎projects/coreui-angular/src/lib/offcanvas/offcanvas/offcanvas.component.scss
Lines changed: 3 additions & 0 deletions
@@ -2,6 +2,7 @@
   "name": "coreui-angular-dev",
   "version": "4.2.27",
   "description": "CoreUI Components Library for Angular",
+  "copyright": "Copyright 2022 creativeLabs Łukasz Holeczek",
   "license": "MIT",
   "author": "The CoreUI Team (https://github.com/orgs/coreui/people)",
   "scripts": {
 
@@ -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`);
 
@@ -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);
 
@@ -0,0 +1,3 @@
+:host {
+  display: none;
+}