Merge pull request #277 from MurhafSousli/dev

v7.2.1-beta.0

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 7.2.1-beta.0
+
+- fix: adjust hiding the native scrollbar, closes [#266](https://github.com/MurhafSousli/ngx-scrollbar/issues/266) in [110a24e](https://github.com/MurhafSousli/ngx-scrollbar/pull/277/commits/110a24e7ce30a2dcfb46f16fb68f396a8d1155eb) and [110a24e](https://github.com/MurhafSousli/ngx-scrollbar/pull/277/commits/7274e9406205e180efae6b84fde6a1631e73d7f7).
+- fix(ivy): Use directive instead of pipe in [5058a8a](https://github.com/MurhafSousli/ngx-scrollbar/pull/277/commits/5058a8ad6804d2849dcb60cf594d72d2f2ecdd2a).
+- fix(Angular 9): Update dependencies (Angular and CDK), closes[#272](https://github.com/MurhafSousli/ngx-scrollbar/issues/272) in [ffbceab](https://github.com/MurhafSousli/ngx-scrollbar/pull/277/commits/ffbceabb523c6965dc58ad221695c9d5c167919e).
+
 ## 7.2.0
 
 - Feat: Ability to set `NgScrollbarModule.withConfig(options)` in [6fca314](https://github.com/MurhafSousli/ngx-scrollbar/pull/265/commits/6fca3146b802683a29ffd8e382c1ecca1d06a9e6).

package.json

@@ -14,30 +14,30 @@
     "url": "https://github.com/MurhafSousli/ngx-scrollbar"
   },
   "dependencies": {
-    "@angular-devkit/build-angular": "^0.900.1",
-    "@angular/animations": "~9.0.0",
-    "@angular/cdk": "~9.0.0",
-    "@angular/common": "~9.0.0",
-    "@angular/compiler": "~9.0.0",
-    "@angular/core": "~9.0.0",
-    "@angular/forms": "~9.0.0",
-    "@angular/material": "^9.0.0",
-    "@angular/platform-browser": "~9.0.0",
-    "@angular/platform-browser-dynamic": "~9.0.0",
-    "@angular/router": "~9.0.0",
-    "@juggle/resize-observer": "^2.5.0",
+    "@angular-devkit/build-angular": "^0.900.6",
+    "@angular/animations": "~9.0.6",
+    "@angular/cdk": "~9.1.2",
+    "@angular/common": "~9.0.6",
+    "@angular/compiler": "~9.0.6",
+    "@angular/core": "~9.0.6",
+    "@angular/forms": "~9.0.6",
+    "@angular/material": "^9.1.2",
+    "@angular/platform-browser": "~9.0.6",
+    "@angular/platform-browser-dynamic": "~9.0.6",
+    "@angular/router": "~9.0.6",
+    "@juggle/resize-observer": "^3.1.1",
     "bezier-easing": "^2.1.0",
     "chance": "^1.1.4",
-    "ngx-infinite-scroll": "^7.2.0",
+    "ngx-infinite-scroll": "^8.0.1",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-ng-packagr": "~0.900.1",
-    "@angular/cli": "~9.0.1",
-    "@angular/compiler-cli": "~9.0.0",
-    "@angular/language-service": "~9.0.0",
+    "@angular-devkit/build-ng-packagr": "~0.900.6",
+    "@angular/cli": "~9.0.6",
+    "@angular/compiler-cli": "~9.0.6",
+    "@angular/language-service": "~9.0.6",
     "@types/bezier-easing": "^2.0.0",
     "@types/chance": "^1.0.4",
     "@types/jasmine": "~3.3.8",

projects/ngx-scrollbar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-scrollbar",
-  "version": "7.2.0",
+  "version": "7.2.1-beta.0",
   "license": "MIT",
   "homepage": "https://ngx-scrollbar.netlify.com/",
   "author": {

projects/ngx-scrollbar/src/lib/ng-scrollbar.html

@@ -4,7 +4,7 @@
        [sensorDebounce]="sensorDebounce"
        [sensorDisabled]="sensorDisabled">
     <div scrollViewport
-         [hideNativeScrollbar]="nativeScrollbarSizeFactory.scrollbarSize | async">
+         hideNativeScrollbar>
       <div>
         <ng-content></ng-content>
       </div>

projects/ngx-scrollbar/src/lib/ng-scrollbar.ts

@@ -30,7 +30,6 @@ import {
   ScrollbarPointerEventsMethod
 } from './ng-scrollbar.model';
 import { ScrollbarManager } from './utils/scrollbar-manager';
-import { NativeScrollbarSizeFactory } from './utils/native-scrollbar-size-factory';
 
 @Component({
   selector: 'ng-scrollbar',
@@ -168,8 +167,7 @@ export class NgScrollbar implements OnInit, AfterViewChecked, OnDestroy {
     private changeDetectorRef: ChangeDetectorRef,
     private dir: Directionality,
     private smoothScroll: SmoothScrollManager,
-    public manager: ScrollbarManager,
-    public nativeScrollbarSizeFactory: NativeScrollbarSizeFactory) {
+    public manager: ScrollbarManager) {
   }
 
   /**

projects/ngx-scrollbar/src/lib/styles/hide-native-scrollbars.scss

@@ -1,14 +1,16 @@
 @import "selectors";
 
+@mixin hide-scrollbar() {
+  scrollbar-width: none; /* Firefox 64 */
+  -ms-overflow-style: none; /* Internet Explorer 11 */
+  &::-webkit-scrollbar { /** WebKit */
+    display: none;
+  }
+}
+
 @mixin hideNativeScrollbar {
-  ::ng-deep {
-    .ng-native-scrollbar-hider {
-      scrollbar-width: none; /* Firefox 64 */
-      -ms-overflow-style: none; /* Internet Explorer 11 */
-      &::-webkit-scrollbar { /** WebKit */
-        display: none;
-      }
-    }
+  @include viewport {
+    @include hide-scrollbar();
   }
 
   // Hide native horizontal scrollbar if visible
@@ -41,5 +43,6 @@
     overflow: scroll;
     position: fixed;
     top: -9999px;
+    @include hide-scrollbar();
   }
 }

projects/ngx-scrollbar/src/lib/styles/selectors.scss

@@ -8,7 +8,9 @@
 // The default viewport is used to hide the native scrollbar
 @mixin nativeScrollbarHider {
   @include viewportWrapper {
-    > .ng-native-scrollbar-hider {
+    > .ng-native-scrollbar-hider,
+      // Custom viewport
+      > * > * > ::ng-deep.ng-native-scrollbar-hider {
       @content;
     }
   }

projects/ngx-scrollbar/src/lib/utils/hide-native-scrollbar.ts

@@ -1,20 +1,21 @@
-import { Directive, Input } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
+import { Directive, ElementRef, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { NativeScrollbarSizeFactory } from './native-scrollbar-size-factory';
 
 @Directive({
-  selector: '[hideNativeScrollbar]',
-  host: {
-    '[attr.style]': 'sanitizer.bypassSecurityTrustStyle(nativeScrollbarSize)'
-  }
+  selector: '[hideNativeScrollbar]'
 })
-export class HideNativeScrollbar {
+export class HideNativeScrollbar implements OnDestroy {
 
-  @Input('hideNativeScrollbar') size: number;
+  private readonly _subscriber = Subscription.EMPTY;
 
-  get nativeScrollbarSize(): string {
-    return `--native-scrollbar-size: -${this.size}px`;
+  constructor(el: ElementRef, private hideNativeScrollbar: NativeScrollbarSizeFactory) {
+    this._subscriber = hideNativeScrollbar.scrollbarSize.subscribe((size: number) => {
+      (el.nativeElement as HTMLElement).style.setProperty('--native-scrollbar-size', `-${ size }px`);
+    });
   }
 
-  constructor(public sanitizer: DomSanitizer) {
+  ngOnDestroy() {
+    this._subscriber.unsubscribe();
   }
 }