upgrade to angular 11

packages/overlayscrollbars-ngx/dist/overlayscrollbars-ngx.esm.js

@@ -7,20 +7,6 @@ var OverlayScrollbarsComponent = (function () {
         this._osInstance = null;
         this._osTargetRef = _osTargetRef;
     }
-    Object.defineProperty(OverlayScrollbarsComponent.prototype, "extensions", {
-        set: function (extensions) {
-            this._extensions = extensions;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(OverlayScrollbarsComponent.prototype, "options", {
-        set: function (options) {
-            this._options = options;
-        },
-        enumerable: true,
-        configurable: true
-    });
     OverlayScrollbarsComponent.prototype.osInstance = function () {
         return this._osInstance;
     };
@@ -58,8 +44,8 @@ var OverlayScrollbarsComponent = (function () {
         { type: NgZone }
     ]; };
     OverlayScrollbarsComponent.propDecorators = {
-        extensions: [{ type: Input, args: ['extensions',] }],
+        _options: [{ type: Input, args: ['options',] }],
-        options: [{ type: Input, args: ['options',] }]
+        _extensions: [{ type: Input, args: ['extensions',] }]
     };
     return OverlayScrollbarsComponent;
 }());

packages/overlayscrollbars-ngx/dist/overlayscrollbars-ngx.js

@@ -12,20 +12,6 @@
             this._osInstance = null;
             this._osTargetRef = _osTargetRef;
         }
-        Object.defineProperty(OverlayScrollbarsComponent.prototype, "extensions", {
-            set: function (extensions) {
-                this._extensions = extensions;
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Object.defineProperty(OverlayScrollbarsComponent.prototype, "options", {
-            set: function (options) {
-                this._options = options;
-            },
-            enumerable: true,
-            configurable: true
-        });
         OverlayScrollbarsComponent.prototype.osInstance = function () {
             return this._osInstance;
         };
@@ -63,8 +49,8 @@
             { type: core.NgZone }
         ]; };
         OverlayScrollbarsComponent.propDecorators = {
-            extensions: [{ type: core.Input, args: ['extensions',] }],
+            _options: [{ type: core.Input, args: ['options',] }],
-            options: [{ type: core.Input, args: ['options',] }]
+            _extensions: [{ type: core.Input, args: ['extensions',] }]
         };
         return OverlayScrollbarsComponent;
     }());

packages/overlayscrollbars-ngx/dist/types/index.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"OverlayScrollbarsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"overlay-scrollbars","host":{"class":"os-host","$quoted$":["class"]},"template":"\n        <div class=\"os-resize-observer-host\"></div>\n        <div class=\"os-padding\">\n            <div class=\"os-viewport\">\n                <div class=\"os-content\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n        </div>\n        <div class=\"os-scrollbar os-scrollbar-horizontal \">\n            <div class=\"os-scrollbar-track\">\n                <div class=\"os-scrollbar-handle\"></div>\n            </div>\n        </div>\n        <div class=\"os-scrollbar os-scrollbar-vertical\">\n            <div class=\"os-scrollbar-track\">\n                <div class=\"os-scrollbar-handle\"></div>\n            </div>\n        </div>\n        <div class=\"os-scrollbar-corner\"></div>\n    ","styles":[":host { display: block; }"]}]}],"members":{"extensions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":5},"arguments":["extensions"]}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":39,"character":5},"arguments":["options"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":43,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":43,"character":58}]}],"osInstance":[{"__symbolic":"method"}],"osTarget":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"OverlayscrollbarsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":3,"character":1},"arguments":[{"imports":[],"declarations":[{"__symbolic":"reference","name":"OverlayScrollbarsComponent"}],"exports":[{"__symbolic":"reference","name":"OverlayScrollbarsComponent"}]}]}],"members":{}}},"origins":{"OverlayScrollbarsComponent":"../../src/overlayscrollbars.component","OverlayscrollbarsModule":"../../src/overlayscrollbars.module"},"importAs":"overlayscrollbars-ngx"}
+{"__symbolic":"module","version":4,"metadata":{"OverlayScrollbarsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"overlay-scrollbars","host":{"class":"os-host","$quoted$":["class"]},"template":"\n        <div class=\"os-resize-observer-host\"></div>\n        <div class=\"os-padding\">\n            <div class=\"os-viewport\">\n                <div class=\"os-content\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n        </div>\n        <div class=\"os-scrollbar os-scrollbar-horizontal \">\n            <div class=\"os-scrollbar-track\">\n                <div class=\"os-scrollbar-handle\"></div>\n            </div>\n        </div>\n        <div class=\"os-scrollbar os-scrollbar-vertical\">\n            <div class=\"os-scrollbar-track\">\n                <div class=\"os-scrollbar-handle\"></div>\n            </div>\n        </div>\n        <div class=\"os-scrollbar-corner\"></div>\n    ","styles":[":host { display: block; }"]}]}],"members":{"_options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5},"arguments":["options"]}]}],"_extensions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5},"arguments":["extensions"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":35,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":35,"character":58}]}],"osInstance":[{"__symbolic":"method"}],"osTarget":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"OverlayscrollbarsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":3,"character":1},"arguments":[{"imports":[],"declarations":[{"__symbolic":"reference","name":"OverlayScrollbarsComponent"}],"exports":[{"__symbolic":"reference","name":"OverlayScrollbarsComponent"}]}]}],"members":{}}},"origins":{"OverlayScrollbarsComponent":"../../src/overlayscrollbars.component","OverlayscrollbarsModule":"../../src/overlayscrollbars.module"},"importAs":"overlayscrollbars-ngx"}

packages/overlayscrollbars-ngx/dist/types/overlayscrollbars.component.d.ts

@@ -2,12 +2,10 @@ import { ElementRef, SimpleChanges, OnDestroy, OnChanges, AfterViewInit, NgZone
 import OverlayScrollbars from 'overlayscrollbars';
 export declare class OverlayScrollbarsComponent implements OnDestroy, OnChanges, AfterViewInit {
     private ngZone;
-    private _options;
+    _options: OverlayScrollbars.Options;
-    private _extensions;
+    _extensions: OverlayScrollbars.Extensions;
     private _osInstance;
     private _osTargetRef;
-    extensions: OverlayScrollbars.Extensions | undefined;
-    options: OverlayScrollbars.Options | undefined;
     constructor(_osTargetRef: ElementRef, ngZone: NgZone);
     osInstance(): OverlayScrollbars | null;
     osTarget(): HTMLDivElement | null;

packages/overlayscrollbars-ngx/example/.browserslistrc

@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

packages/overlayscrollbars-ngx/example/.editorconfig

@@ -8,6 +8,9 @@ indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
 
+[*.ts]
+quote_type = single
+
 [*.md]
 max_line_length = off
 trim_trailing_whitespace = false

packages/overlayscrollbars-ngx/example/.gitignore

@@ -4,13 +4,15 @@
 /dist
 /tmp
 /out-tsc
+# Only exists if Bazel was run
+/bazel-out
 
 # dependencies
 /node_modules
 
 # profiling files
-chrome-profiler-events.json
+chrome-profiler-events*.json
-speed-measure-plugin.json
+speed-measure-plugin*.json
 
 # IDEs and editors
 /.idea
@@ -27,6 +29,7 @@ speed-measure-plugin.json
 !.vscode/tasks.json
 !.vscode/launch.json
 !.vscode/extensions.json
+.history/*
 
 # misc
 /.sass-cache

packages/overlayscrollbars-ngx/example/README.md

@@ -1,6 +1,6 @@
 # Example
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.1.4.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.0.4.
 
 ## Development server
 
@@ -24,4 +24,4 @@ Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protrac
 
 ## Further help
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

packages/overlayscrollbars-ngx/example/angular.json

@@ -4,11 +4,11 @@
   "newProjectRoot": "projects",
   "projects": {
     "example": {
+      "projectType": "application",
+      "schematics": {},
       "root": "",
       "sourceRoot": "src",
-      "projectType": "application",
       "prefix": "app",
-      "schematics": {},
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
@@ -17,7 +17,8 @@
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.app.json",
+            "tsConfig": "tsconfig.app.json",
+            "aot": true,
             "assets": [
               "src/favicon.ico",
               "src/assets"
@@ -38,9 +39,7 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
@@ -49,6 +48,11 @@
                   "type": "initial",
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
                 }
               ]
             }
@@ -76,37 +80,31 @@
           "options": {
             "main": "src/test.ts",
             "polyfills": "src/polyfills.ts",
-            "tsConfig": "src/tsconfig.spec.json",
+            "tsConfig": "tsconfig.spec.json",
-            "karmaConfig": "src/karma.conf.js",
+            "karmaConfig": "karma.conf.js",
-            "styles": [
-              "src/styles.css"
-            ],
-            "scripts": [],
             "assets": [
               "src/favicon.ico",
               "src/assets"
-            ]
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "src/tsconfig.app.json",
+              "tsconfig.app.json",
-              "src/tsconfig.spec.json"
+              "tsconfig.spec.json",
+              "e2e/tsconfig.json"
             ],
             "exclude": [
               "**/node_modules/**"
             ]
           }
-        }
+        },
-      }
-    },
-    "example-e2e": {
-      "root": "e2e/",
-      "projectType": "application",
-      "prefix": "",
-      "architect": {
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
@@ -118,15 +116,6 @@
               "devServerTarget": "example:serve:production"
             }
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     }

packages/overlayscrollbars-ngx/example/e2e/protractor.conf.js

@@ -1,17 +1,22 @@
+// @ts-check
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 
-const { SpecReporter } = require('jasmine-spec-reporter');
+const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
 
+/**
+ * @type { import("protractor").Config }
+ */
 exports.config = {
   allScriptsTimeout: 11000,
   specs: [
     './src/**/*.e2e-spec.ts'
   ],
   capabilities: {
-    'browserName': 'chrome'
+    browserName: 'chrome'
   },
   directConnect: true,
+  SELENIUM_PROMISE_MANAGER: false,
   baseUrl: 'http://localhost:4200/',
   framework: 'jasmine',
   jasmineNodeOpts: {
@@ -21,8 +26,12 @@ exports.config = {
   },
   onPrepare() {
     require('ts-node').register({
-      project: require('path').join(__dirname, './tsconfig.e2e.json')
+      project: require('path').join(__dirname, './tsconfig.json')
     });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+    jasmine.getEnv().addReporter(new SpecReporter({
+      spec: {
+        displayStacktrace: StacktraceOption.PRETTY
+      }
+    }));
   }
 };

packages/overlayscrollbars-ngx/example/e2e/src/app.e2e-spec.ts

@@ -1,4 +1,5 @@
 import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
 
 describe('workspace-project App', () => {
   let page: AppPage;
@@ -7,8 +8,16 @@ describe('workspace-project App', () => {
     page = new AppPage();
   });
 
-  it('should display welcome message', () => {
+  it('should display welcome message', async () => {
-    page.navigateTo();
+    await page.navigateTo();
-    expect(page.getTitleText()).toEqual('Welcome to example!');
+    expect(await page.getTitleText()).toEqual('example app is running!');
+  });
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    expect(logs).not.toContain(jasmine.objectContaining({
+      level: logging.Level.SEVERE,
+    } as logging.Entry));
   });
 });

packages/overlayscrollbars-ngx/example/e2e/src/app.po.ts

@@ -1,11 +1,11 @@
 import { browser, by, element } from 'protractor';
 
 export class AppPage {
-  navigateTo() {
+  async navigateTo(): Promise<unknown> {
-    return browser.get('/');
+    return browser.get(browser.baseUrl);
   }
 
-  getTitleText() {
+  async getTitleText(): Promise<string> {
-    return element(by.css('app-root h1')).getText();
+    return element(by.css('app-root .content span')).getText();
   }
 }

packages/overlayscrollbars-ngx/example/e2e/tsconfig.json

@@ -1,12 +1,12 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "outDir": "../out-tsc/app",
+    "outDir": "../out-tsc/e2e",
     "module": "commonjs",
-    "target": "es5",
+    "target": "es2018",
     "types": [
       "jasmine",
-      "jasminewd2",
       "node"
     ]
   }

packages/overlayscrollbars-ngx/example/karma.conf.js

@@ -9,16 +9,28 @@ module.exports = function (config) {
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
+      require('karma-coverage'),
       require('@angular-devkit/build-angular/plugins/karma')
     ],
     client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
-    coverageIstanbulReporter: {
+    jasmineHtmlReporter: {
-      dir: require('path').join(__dirname, '../coverage'),
+      suppressAll: true // removes the duplicated traces
-      reports: ['html', 'lcovonly', 'text-summary'],
+    },
-      fixWebpackSourcePaths: true
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/example'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
     },
     reporters: ['progress', 'kjhtml'],
     port: 9876,
@@ -26,6 +38,7 @@ module.exports = function (config) {
     logLevel: config.LOG_INFO,
     autoWatch: true,
     browsers: ['Chrome'],
-    singleRun: false
+    singleRun: false,
+    restartOnFileChange: true
   });
 };

packages/overlayscrollbars-ngx/example/package.json

@@ -11,41 +11,37 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~7.1.0",
+    "@angular/animations": "~11.0.4",
-    "@angular/common": "~7.1.0",
+    "@angular/common": "~11.0.4",
-    "@angular/compiler": "~7.1.0",
+    "@angular/compiler": "~11.0.4",
-    "@angular/core": "~7.1.0",
+    "@angular/core": "~11.0.4",
-    "@angular/forms": "~7.1.0",
+    "@angular/forms": "~11.0.4",
-    "@angular/platform-browser": "~7.1.0",
+    "@angular/platform-browser": "~11.0.4",
-    "@angular/platform-browser-dynamic": "~7.1.0",
+    "@angular/platform-browser-dynamic": "~11.0.4",
-    "@angular/router": "~7.1.0",
+    "@angular/router": "~11.0.4",
-    "@types/overlayscrollbars": "^1.9.0",
-    "core-js": "^2.6.11",
     "overlayscrollbars": "^1.11.0",
     "overlayscrollbars-ngx": "^0.1.0",
-    "rxjs": "~6.3.3",
+    "rxjs": "~6.6.0",
-    "tslib": "^1.11.1",
+    "tslib": "^2.0.0",
-    "zone.js": "~0.8.26"
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.11.0",
+    "@angular-devkit/build-angular": "~0.1100.4",
-    "@angular/cli": "~7.1.4",
+    "@angular/cli": "~11.0.4",
-    "@angular/compiler-cli": "~7.1.0",
+    "@angular/compiler-cli": "~11.0.4",
-    "@angular/language-service": "~7.1.0",
+    "@types/jasmine": "~3.6.0",
-    "@types/jasmine": "~2.8.8",
+    "@types/node": "^12.11.1",
-    "@types/jasminewd2": "^2.0.8",
+    "codelyzer": "^6.0.0",
-    "@types/node": "~8.9.4",
+    "jasmine-core": "~3.6.0",
-    "codelyzer": "~4.5.0",
+    "jasmine-spec-reporter": "~5.0.0",
-    "jasmine-core": "~2.99.1",
+    "karma": "~5.1.0",
-    "jasmine-spec-reporter": "~4.2.1",
+    "karma-chrome-launcher": "~3.1.0",
-    "karma": "~3.1.1",
+    "karma-coverage": "~2.0.3",
-    "karma-chrome-launcher": "~2.2.0",
+    "karma-jasmine": "~4.0.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-jasmine-html-reporter": "^1.5.0",
-    "karma-jasmine": "~1.1.2",
+    "protractor": "~7.0.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
+    "ts-node": "~8.3.0",
-    "protractor": "^5.4.3",
+    "tslint": "~6.1.0",
-    "ts-node": "~7.0.0",
+    "typescript": "~4.0.2"
-    "tslint": "~5.11.0",
-    "typescript": "~3.1.6"
   }
 }

packages/overlayscrollbars-ngx/example/src/app/app.component.css

@@ -1,310 +1,313 @@
 :host {
-    min-width: 600px;
+  min-width: 600px;
-    display: block;
+  display: block;
 }
 .header {
-    background: #36befd;
+  background: #36befd;
-    background: -moz-linear-gradient(-45deg, #36befd 1%, #6461f6 100%);
+  background: -moz-linear-gradient(-45deg, #36befd 1%, #6461f6 100%);
-    background: -webkit-linear-gradient(-45deg, #36befd 1%, #6461f6 100%);
+  background: -webkit-linear-gradient(-45deg, #36befd 1%, #6461f6 100%);
-    background: linear-gradient(135deg, #36befd 1%, #6461f6 100%);
+  background: linear-gradient(135deg, #36befd 1%, #6461f6 100%);
-    margin: 0;
+  margin: 0;
-    color: #fff;
+  color: #fff;
-    letter-spacing: 0.1pt;
+  letter-spacing: 0.1pt;
-    text-shadow: 0px 1px 3px rgba(0, 0, 255, 0.1);
+  text-shadow: 0px 1px 3px rgba(0, 0, 255, 0.1);
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    flex-wrap: nowrap;
+  flex-wrap: nowrap;
-    justify-content: center;
+  justify-content: center;
-    align-items: center;
+  align-items: center;
-    height: 76px;
+  height: 76px;
-    box-shadow: 0 15px 20px -15px rgba(57, 120, 253, 0.15), 0 55px 50px -35px rgba(47, 78, 249, 0.12);
+  box-shadow: 0 15px 20px -15px rgba(57, 120, 253, 0.15),
-    position: relative;
+    0 55px 50px -35px rgba(47, 78, 249, 0.12);
-    z-index: 1;
+  position: relative;
+  z-index: 1;
 }
 .header code {
-    border-radius: 4px;
+  border-radius: 4px;
-    margin: 2px;
+  margin: 2px;
-    display: block;
+  display: block;
-    padding: 0.5em;
+  padding: 0.5em;
-    background: #fff;
+  background: #fff;
-    font-size: 10pt;
+  font-size: 10pt;
-    margin: 0px auto;
+  margin: 0px auto;
-    box-shadow: 0px 1px 3px rgba(0, 0, 255, 0.15);
+  box-shadow: 0px 1px 3px rgba(0, 0, 255, 0.15);
 }
 .header code .code-keyword {
-    color: #0059FF;
+  color: #0059ff;
-    font-weight: bold;
+  font-weight: bold;
 }
 .header code .code-char {
-    color: #4D4D4C;
+  color: #4d4d4c;
 }
 .header code .code-variable {
-    color: #3778AD;
+  color: #3778ad;
 }
 .header code .code-string {
-    color: #279737;
+  color: #279737;
-    font-weight: 400;
+  font-weight: 400;
 }
 .content {
-    min-height: calc(100vh - 76px);
+  min-height: calc(100vh - 76px);
-    position: relative;
+  position: relative;
-    display: flex;
+  display: flex;
-    flex-direction: column;
+  flex-direction: column;
-    flex-flow: column;
+  flex-flow: column;
-    flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 .content-section {
-    position: relative;
+  position: relative;
-    padding: 40px 0px;
+  padding: 40px 0px;
-    background: #fff;
+  background: #fff;
-    z-index: 1;
+  z-index: 1;
-    overflow: hidden;
+  overflow: hidden;
 }
 .content-section:last-child {
-    flex-grow: 1;
+  flex-grow: 1;
 }
 .content-section:before,
 .content-section:after {
-    content: '';
+  content: "";
-    display: block;
+  display: block;
-    position: absolute;
+  position: absolute;
-    top: 0;
+  top: 0;
-    right: 0;
+  right: 0;
-    bottom: 0;
+  bottom: 0;
-    left: 0;
+  left: 0;
-    z-index: -1;
+  z-index: -1;
 }
 .content-section:nth-child(2n - 1) {
-    background: #f6f8fb;
+  background: #f6f8fb;
 }
 .content-section:nth-child(2n - 1):before,
 .content-section:nth-child(2n - 1):after {
-    background: #fff;
+  background: #fff;
 }
 .content-section:nth-child(2n + 0) {
-    background: #fff;
+  background: #fff;
 }
 .content-section:nth-child(2n + 0):before,
 .content-section:nth-child(2n + 0):after {
-    background: #f6f8fb;
+  background: #f6f8fb;
 }
 .content-section.skew:before,
 .content-section.skew:after {
-    transform: skewY(-7deg);
+  transform: skewY(-7deg);
 }
 .content-section.skew + .content-section:before,
 .content-section.skew + .content-section:after {
-    transform: skewY(-7deg);
+  transform: skewY(-7deg);
 }
 .content-section skew + .content-section.skew:before,
 .content-section.skew + .content-section.skew:before {
-    top: 0;
+  top: 0;
 }
 .content-section + .content-section.skew:before {
-    top: -50vw;
+  top: -50vw;
 }
 .content-section.skew + .content-section:after {
-    bottom: -50vw;
+  bottom: -50vw;
 }
 .content-section + .content-section:after {
-    top: 0;
+  top: 0;
 }
 .content-section.skew + .content-section.skew:after {
-    bottom: 0;
+  bottom: 0;
 }
 .content-section.skew:first-child:before {
-    top: -50vw !important;
+  top: -50vw !important;
 }
 .content-section.skew:last-child:after {
-    bottom: -50vw !important;
+  bottom: -50vw !important;
 }
 .content-section-content-framework > span {
-    font-weight: bold;
+  font-weight: bold;
-    font-size: 30pt;
+  font-size: 30pt;
-    user-select: none;
+  user-select: none;
-    -moz-user-select: none;
+  -moz-user-select: none;
-    -webkit-user-select: none;
+  -webkit-user-select: none;
 }
 .content-section-content-framework > span:not(:nth-child(2)) {
-    display: inline-block;
+  display: inline-block;
-    color: transparent;
+  color: transparent;
-    height: 190px;
+  height: 190px;
-    width: 190px;
+  width: 190px;
-    vertical-align:middle; 
+  vertical-align: middle;
 }
 .content-section-title {
-    margin-bottom: 14px;
+  margin-bottom: 14px;
 }
-.content-section-title > h2{
+.content-section-title > h2 {
-    text-align: center;
+  text-align: center;
-    font-size: 26pt;
+  font-size: 26pt;
-    color: #39547A;
+  color: #39547a;
-    margin: 24px 0px;
+  margin: 24px 0px;
 }
-.content-section-title > table{
+.content-section-title > table {
-    text-align: left;
+  text-align: left;
-    margin: 0px auto;
+  margin: 0px auto;
 }
 .content-section-title > table tr {
-    margin: 10px;
+  margin: 10px;
 }
 .content-section-title > table td {
-    line-height: 18pt;
+  line-height: 18pt;
 }
 .content-section-title > table td:first-child {
-    text-align: right;
+  text-align: right;
-    font-weight: bold;
+  font-weight: bold;
-    vertical-align: top;
+  vertical-align: top;
 }
-.content-section-title > table td:first-child span{
+.content-section-title > table td:first-child span {
-    margin: 0px 6px;
+  margin: 0px 6px;
 }
 .content-section-title > table td:last-child span {
-    text-align: left;
+  text-align: left;
-    color: #36befd;
+  color: #36befd;
-    font-weight: bold;
+  font-weight: bold;
 }
 .content-section-content {
-    display: table;
+  display: table;
-    margin: 0px auto;
+  margin: 0px auto;
 }
 .content-section-content .os-host,
 .content-section-content .os-host-textarea {
-    border: 2px solid #36befd;
+  border: 2px solid #36befd;
-    width: 480px;
+  width: 480px;
-    max-height: 300px;
+  max-height: 300px;
-    margin: 10px auto 20px auto;
+  margin: 10px auto 20px auto;
-    border-radius: 6px;
+  border-radius: 6px;
-    padding: 10px;
+  padding: 10px;
-    line-height: 16pt;
+  line-height: 16pt;
 }
 .content-section-content > .os-host .os-host,
 .content-section-content > .os-host-textarea .os-host-textarea {
-    border: 2px solid #6461f6;
+  border: 2px solid #6461f6;
-    width: auto;
+  width: auto;
-    height: auto;
+  height: auto;
-    margin: 10px auto;
+  margin: 10px auto;
 }
 .content-section-content .bonus-content {
-    display: inline-block;
+  display: inline-block;
-    white-space: pre;
+  white-space: pre;
-    background: #f0f3f6;
+  background: #f0f3f6;
-    padding: 0px 5px;
+  padding: 0px 5px;
-    margin: 2px;
+  margin: 2px;
-    border-radius: 4px !important;
+  border-radius: 4px !important;
-    border: 1px solid #DDE3ED;
+  border: 1px solid #dde3ed;
-    font-size: 10pt;
+  font-size: 10pt;
-    font-family: "Lucida Console", Monaco, monospace;
+  font-family: "Lucida Console", Monaco, monospace;
-    color: #39547A;
+  color: #39547a;
 }
 .content-section-content-buttons {
-    display: table;
+  display: table;
-    margin: 0px auto;
+  margin: 0px auto;
 }
 .info-span {
-    background: #F7F7F7;
+  background: #f7f7f7;
-    padding: 2px 5px;
+  padding: 2px 5px;
-    margin: 2px;
+  margin: 2px;
-    white-space: nowrap;
+  white-space: nowrap;
-    border-radius: 4px;
+  border-radius: 4px;
-    border: 1px solid #DEDFE0;
+  border: 1px solid #dedfe0;
-    font-weight: bold;
+  font-weight: bold;
-    font-size: 10pt;
+  font-size: 10pt;
 }
 a {
-    display: inline-block;
+  display: inline-block;
-    text-decoration: none;
+  text-decoration: none;
-    position: relative;
+  position: relative;
-    color: #36befd;
+  color: #36befd;
-    transition: color 0.3s, text-shadow 0.3s;
+  transition: color 0.3s, text-shadow 0.3s;
-    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
-    padding: 0px 1px;
+  padding: 0px 1px;
-    font-weight: 600;
+  font-weight: 600;
-    outline: none !important;
+  outline: none !important;
-    cursor: pointer;
+  cursor: pointer;
-    z-index: 0;
+  z-index: 0;
 }
 a:hover {
-    color: #fff;
+  color: #fff;
-    text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.16);
+  text-shadow: 0px 1px 6px rgba(0, 0, 0, 0.16);
 }
 a:before {
-    content: '';
+  content: "";
-    position: absolute;
+  position: absolute;
-    display: block;
+  display: block;
-    bottom: 0;
+  bottom: 0;
-    left: 0;
+  left: 0;
-    height: 0%;
+  height: 0%;
-    width: 100%;
+  width: 100%;
-    background: transparent;
+  background: transparent;
-    z-index: -1;
+  z-index: -1;
-    border-bottom: 1px dotted #36befd;
+  border-bottom: 1px dotted #36befd;
-    transition: height 0.3s, border 0.3s, background-color 0.15s;
+  transition: height 0.3s, border 0.3s, background-color 0.15s;
 }
 a:hover:before {
-    height: 100%;
+  height: 100%;
-    background: #36befd;
+  background: #36befd;
-    border-bottom: 1px solid #36befd;
+  border-bottom: 1px solid #36befd;
 }
 .buttons {
-    display: table;
+  display: table;
-    margin: 0px auto;
+  margin: 0px auto;
 }
 button {
-    font-size: 10pt;
+  font-size: 10pt;
-    line-height: 28pt;
+  line-height: 28pt;
-    font-family: sans-serif;
+  font-family: sans-serif;
-    font-weight: bold;
+  font-weight: bold;
-    color: #555E6B;
+  color: #555e6b;
-    line-height: 40px;
+  line-height: 40px;
-    border: 1px solid #D6D6D6;
+  border: 1px solid #d6d6d6;
-    border-radius: 6px;
+  border-radius: 6px;
-    cursor: pointer;
+  cursor: pointer;
-    transition: color 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
+  transition: color 0.3s, background-color 0.3s, border-color 0.3s,
-    padding: 0px 14px;
+    box-shadow 0.3s;
-    display: block;
+  padding: 0px 14px;
-    float: left;
+  display: block;
-    margin: 5px;
+  float: left;
-    text-align: center;
+  margin: 5px;
-    background: rgba(0, 0, 0, 0.02);
+  text-align: center;
-    -webkit-user-select: none;
+  background: rgba(0, 0, 0, 0.02);
-    -moz-user-select: none;
+  -webkit-user-select: none;
-    -ms-user-select: none;
+  -moz-user-select: none;
-    user-select: none;
+  -ms-user-select: none;
-    min-width: 80px;
+  user-select: none;
-    outline: none !important;
+  min-width: 80px;
+  outline: none !important;
 }
 button:hover {
-    color: #fff;
+  color: #fff;
-    background: #6461f6;
+  background: #6461f6;
-    border-color: #6461f6;
+  border-color: #6461f6;
-    box-shadow: 0 4px 8px -1px rgba(170, 170, 170, 0.45);
+  box-shadow: 0 4px 8px -1px rgba(170, 170, 170, 0.45);
 }
 button:active {
-    box-shadow: inset 0 4px 9px -1px rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 4px 9px -1px rgba(0, 0, 0, 0.15);
 }
 ::selection {
-    color: #fff;
+  color: #fff;
-    background: #6461f6;
+  background: #6461f6;
-    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.28);
+  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.28);
 }
 img {
-    -webkit-touch-callout: none;
+  -webkit-touch-callout: none;
-        -webkit-user-select: none;
+  -webkit-user-select: none;
-         -khtml-user-select: none;
+  -khtml-user-select: none;
-             -moz-user-select: none;
+  -moz-user-select: none;
-                -ms-user-select: none;
+  -ms-user-select: none;
-                        user-select: none;
+  user-select: none;
-    pointer-events: none;
+  pointer-events: none;
 }
 .os-logo {
-    background: transparent url("../assets/overlayscrollbars.svg") no-repeat center center;
+  background: transparent url("../assets/overlayscrollbars.svg") no-repeat
-    background-size: 80%;
+    center center;
+  background-size: 80%;
 }
 .framework-logo {
-    background: transparent url("../assets/angular.svg") no-repeat center center;
+  background: transparent url("../assets/angular.svg") no-repeat center center;
-    background-size: 80%;
+  background-size: 80%;
 }
 .custom-class-name-test {
-    background: rgba(0, 0, 0, 0.03);
+  background: rgba(0, 0, 0, 0.03);
 }

packages/overlayscrollbars-ngx/example/src/app/app.component.html

@@ -1,74 +1,90 @@
 <div class="header">
-    <code>
+  <code>
-        <span class="code-keyword">import</span>
+    <span class="code-keyword">import</span>
-        <span class="code-char">{{ ' { ' }}</span>
+    <span class="code-char">{{ " { " }}</span>
-        <span class="code-variable">OverlayScrollbarsComponent</span>
+    <span class="code-variable">OverlayScrollbarsComponent</span>
-        <span class="code-char">{{ ' } ' }}</span>
+    <span class="code-char">{{ " } " }}</span>
-        <span class="code-keyword">from</span>
+    <span class="code-keyword">from</span>
-        <span class="code-string">{{ " 'overlayscrollbars-ngx'" }}</span>
+    <span class="code-string">{{ " 'overlayscrollbars-ngx'" }}</span>
-        <span class="code-char">;</span>
+    <span class="code-char">;</span>
-    </code>
+  </code>
 </div>
 <div class="content">
-    <div class="content-section skew">
+  <div class="content-section skew">
-        <div class="content-section-content content-section-content-framework">
+    <div class="content-section-content content-section-content-framework">
-            <span class="framework-logo"></span>
+      <span class="framework-logo"></span>
-            <span>+</span>
+      <span>+</span>
-            <span class="os-logo"></span>
+      <span class="os-logo"></span>
-        </div>
     </div>
-    <div class="content-section">
+  </div>
-        <div class="content-section-title">
+  <div class="content-section">
-            <h2>Component</h2>
+    <div class="content-section-title">
-            <table>
+      <h2>Component</h2>
-                <tbody>
+      <table>
-                    <tr>
+        <tbody>
-                        <td>
+          <tr>
-                            <span>Class:</span>
+            <td>
-                        </td>
+              <span>Class:</span>
-                        <td>
+            </td>
-                            <span>{{ componentClass }}</span>
+            <td>
-                        </td>
+              <span>{{ componentClass }}</span>
-                    </tr>
+            </td>
-                    <tr>
+          </tr>
-                        <td>
+          <tr>
-                            <span>Description:</span>
+            <td>
-                        </td>
+              <span>Description:</span>
-                        <td>OverlayScrollbars as a {{ framework }}-Component.</td>
+            </td>
-                    </tr>
+            <td>OverlayScrollbars as a {{ framework }}-Component.</td>
-                </tbody>
+          </tr>
-            </table>
+        </tbody>
-        </div>
+      </table>
-        <div class="content-section-content">
-
-            <overlay-scrollbars #osComponentRef1 [options]="osComponentOptions" [ngStyle]="{ maxHeight:'350px' }"
-                [ngClass]="[framework, hasCustomClassName ? customClassName : '']">
-                <div class="bonus-content">{{ componentContent }}</div>
-                {{ loremIpsumShort }}
-                <overlay-scrollbars #osComponentRef2 [options]="osComponentOptions" [ngStyle]="{ maxHeight:'150px' }"
-                    [ngClass]="[hasCustomClassName ? customClassName : '']">
-                    <div class="bonus-content">{{ componentContent }}</div>
-                    {{ loremIpsumLong }}
-                    <br />
-                    <br /> {{ loremIpsumShort }}
-                </overlay-scrollbars>
-                {{ loremIpsumMedium }}
-                <br />
-                <br /> {{ loremIpsumShort }}
-                <br />
-                <br /> {{ loremIpsumLong }}
-                <div *ngFor="let item of loremList; let i = index" [attr.data-key]="i">
-                    <br />
-                    {{item}}
-                </div>
-            </overlay-scrollbars>
-
-            <div class="buttons">
-                <button (click)="onBtnScrollRandom($event, [ osComponentRef1, osComponentRef2 ])">Scroll</button>
-                <button (click)="onBtnChangeOptions()">Change Options</button>
-                <button (click)="onBtnChangeContent()">Change Content</button>
-                <button (click)="onBtnLog()">Log</button>
-            </div>
-        </div>
     </div>
+    <div class="content-section-content">
+      <overlay-scrollbars
+        #osComponentRef1
+        [options]="osComponentOptions"
+        [ngStyle]="{ maxHeight: '350px' }"
+        [ngClass]="[framework, hasCustomClassName ? customClassName : '']"
+      >
+        <div class="bonus-content">{{ componentContent }}</div>
+        {{ loremIpsumShort }}
+        <overlay-scrollbars
+          #osComponentRef2
+          [options]="osComponentOptions"
+          [ngStyle]="{ maxHeight: '150px' }"
+          [ngClass]="[hasCustomClassName ? customClassName : '']"
+        >
+          <div class="bonus-content">{{ componentContent }}</div>
+          {{ loremIpsumLong }}
+          <br />
+          <br />
+          {{ loremIpsumShort }}
+        </overlay-scrollbars>
+        {{ loremIpsumMedium }}
+        <br />
+        <br />
+        {{ loremIpsumShort }}
+        <br />
+        <br />
+        {{ loremIpsumLong }}
+        <div *ngFor="let item of loremList; let i = index" [attr.data-key]="i">
+          <br />
+          {{ item }}
+        </div>
+      </overlay-scrollbars>
+
+      <div class="buttons">
+        <button
+          (click)="
+            onBtnScrollRandom($event, [osComponentRef1, osComponentRef2])
+          "
+        >
+          Scroll
+        </button>
+        <button (click)="onBtnChangeOptions()">Change Options</button>
+        <button (click)="onBtnChangeContent()">Change Content</button>
+        <button (click)="onBtnLog()">Log</button>
+      </div>
+    </div>
+  </div>
 </div>

packages/overlayscrollbars-ngx/example/src/app/app.component.spec.ts

@@ -1,31 +1,25 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(async () => {
-    TestBed.configureTestingModule({
+    await TestBed.configureTestingModule({
-      declarations: [
+      declarations: [AppComponent],
-        AppComponent
-      ],
     }).compileComponents();
-  }));
+  });
 
   it('should create the app', () => {
     const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
+    const app = fixture.componentInstance;
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'example'`, () => {
+  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('example');
-  });
-
-  it('should render title in a h1 tag', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
+    const compiled = fixture.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to example!');
+    expect(compiled.querySelector('.content span').textContent).toContain(
+      'example app is running!'
+    );
   });
 });

packages/overlayscrollbars-ngx/example/src/app/app.component.ts

@@ -3,90 +3,107 @@ import { OverlayScrollbarsComponent } from 'overlayscrollbars-ngx';
 import OverlayScrollbars from 'overlayscrollbars';
 
 @Component({
-    selector: 'app-root',
+  selector: 'app-root',
-    templateUrl: './app.component.html',
+  templateUrl: './app.component.html',
-    styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent {
-    framework: string = 'Angular';
+  framework: string = 'Angular';
-    customClassName: string = 'custom-class-name-test';
+  customClassName: string = 'custom-class-name-test';
-    componentClass: string = 'OverlayScrollbarsComponent';
+  componentClass: string = 'OverlayScrollbarsComponent';
-    loremIpsumLong: string = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
+  loremIpsumLong: string =
-    loremIpsumMedium: string = 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.';
+    'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
-    loremIpsumShort: string = 'Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio.';
+  loremIpsumMedium: string =
-    loremList: Array<string> = [];
+    'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.';
-    hasCustomClassName: boolean = false;
+  loremIpsumShort: string =
-    componentContent: string = 'Lorem Ipsum';
+    'Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio.';
-    osComponentOptions: OverlayScrollbars.Options = {
+  loremList: Array<string> = [];
-        resize: 'both',
+  hasCustomClassName: boolean = false;
-        paddingAbsolute: true,
+  componentContent: string = 'Lorem Ipsum';
-        scrollbars: {
+  osComponentOptions: OverlayScrollbars.Options = {
-            autoHide: 'never'
+    resize: 'both',
+    paddingAbsolute: true,
+    scrollbars: {
+      autoHide: 'never',
+    },
+  };
+  @ViewChild('osComponentRef1', { read: OverlayScrollbarsComponent })
+  osComponentRef1: OverlayScrollbarsComponent;
+  @ViewChild('osComponentRef2', { read: OverlayScrollbarsComponent })
+  osComponentRef2: OverlayScrollbarsComponent;
+
+  ngAfterViewInit() {
+    console.log(`${this.componentClass} (1)`);
+    console.log(this.osComponentRef1);
+
+    console.log(`${this.componentClass} (2)`);
+    console.log(this.osComponentRef2);
+  }
+
+  onBtnScrollRandom(
+    event: any,
+    refArray: ReadonlyArray<OverlayScrollbarsComponent>
+  ) {
+    if (refArray) {
+      for (let i = 0; i < refArray.length; i++) {
+        if (refArray[i]) {
+          const osInstance = refArray[i].osInstance();
+          osInstance.scrollStop().scroll(
+            {
+              x: Math.floor(Math.random() * osInstance.scroll().max.x + 0),
+              y: Math.floor(Math.random() * osInstance.scroll().max.y + 0),
+            },
+            1000,
+            'easeOutElastic'
+          );
         }
+      }
+    }
+  }
+
+  onBtnChangeOptions() {
+    this.hasCustomClassName = !this.hasCustomClassName;
+    this.osComponentOptions = {
+      resize: this.osComponentOptions.resize === 'both' ? 'none' : 'both',
+      scrollbars: {
+        autoHide:
+          this.osComponentOptions.scrollbars.autoHide === 'never'
+            ? 'scroll'
+            : 'never',
+      },
     };
-    @ViewChild('osComponentRef1', { read: OverlayScrollbarsComponent })
+  }
-    osComponentRef1: OverlayScrollbarsComponent;
-    @ViewChild('osComponentRef2', { read: OverlayScrollbarsComponent })
-    osComponentRef2: OverlayScrollbarsComponent;
 
-    ngAfterViewInit() {
+  onBtnChangeContent() {
-        console.log(`${this.componentClass} (1)`);
+    this.componentContent = this.componentContent + '\r\n' + this.randomIpsum();
-        console.log(this.osComponentRef1)
+    this.loremList.push(this.randomIpsum());
+  }
 
-        console.log(`${this.componentClass} (2)`);
+  onBtnLog() {
-        console.log(this.osComponentRef2);
+    console.log(`== ${this.componentClass} (1) ==`);
-    }
+    console.log('Ref:');
+    console.log(this.osComponentRef1);
+    console.log('Instance:');
+    console.log(this.osComponentRef1.osInstance());
+    console.log('Target:');
+    console.log(this.osComponentRef1.osTarget());
+    console.log('');
+    console.log(`== ${this.componentClass} (2) ==`);
+    console.log('Ref:');
+    console.log(this.osComponentRef2);
+    console.log('Instance:');
+    console.log(this.osComponentRef2.osInstance());
+    console.log('Target:');
+    console.log(this.osComponentRef2.osTarget());
+  }
 
-    onBtnScrollRandom(event: any, refArray: ReadonlyArray<OverlayScrollbarsComponent>) {
+  randomIpsum(): string {
-        if (refArray) {
+    const loremIpsums = [
-            for (let i = 0; i < refArray.length; i++) {
+      this.loremIpsumLong,
-                if (refArray[i]) {
+      this.loremIpsumMedium,
-                    const osInstance = refArray[i].osInstance();
+      this.loremIpsumShort,
-                    osInstance.scrollStop().scroll({
+    ];
-                        x: Math.floor((Math.random() * osInstance.scroll().max.x) + 0),
+    const random = Math.floor(Math.random() * loremIpsums.length);
-                        y: Math.floor((Math.random() * osInstance.scroll().max.y) + 0)
+    return loremIpsums[random];
-                    }, 1000, 'easeOutElastic');
+  }
-                }
-            }
-        }
-    }
-
-    onBtnChangeOptions() {
-        this.hasCustomClassName = !this.hasCustomClassName;
-        this.osComponentOptions = {
-            resize: this.osComponentOptions.resize === 'both' ? 'none' : 'both',
-            scrollbars: {
-                autoHide: this.osComponentOptions.scrollbars.autoHide === 'never' ? 'scroll' : 'never',
-            }
-        }
-    }
-
-    onBtnChangeContent() {
-        this.componentContent = this.componentContent + '\r\n' + this.randomIpsum();
-        this.loremList.push(this.randomIpsum());
-    }
-
-    onBtnLog() {
-        console.log(`== ${this.componentClass} (1) ==`);
-        console.log('Ref:');
-        console.log(this.osComponentRef1);
-        console.log('Instance:');
-        console.log(this.osComponentRef1.osInstance());
-        console.log('Target:');
-        console.log(this.osComponentRef1.osTarget());
-        console.log('');
-        console.log(`== ${this.componentClass} (2) ==`);
-        console.log('Ref:');
-        console.log(this.osComponentRef2);
-        console.log('Instance:');
-        console.log(this.osComponentRef2.osInstance());
-        console.log('Target:');
-        console.log(this.osComponentRef2.osTarget());
-    }
-
-    randomIpsum(): string {
-        const loremIpsums = [this.loremIpsumLong, this.loremIpsumMedium, this.loremIpsumShort];
-        const random = Math.floor(Math.random() * loremIpsums.length);
-        return loremIpsums[random];
-    }
 }

packages/overlayscrollbars-ngx/example/src/app/app.module.ts

@@ -4,13 +4,9 @@ import { OverlayscrollbarsModule } from 'overlayscrollbars-ngx';
 import { AppComponent } from './app.component';
 
 @NgModule({
-    declarations: [
+  declarations: [AppComponent],
-        AppComponent
+  imports: [BrowserModule, OverlayscrollbarsModule],
-    ],
+  providers: [],
-    imports: [
+  bootstrap: [AppComponent],
-        BrowserModule, OverlayscrollbarsModule
-    ],
-    providers: [],
-    bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}

packages/overlayscrollbars-ngx/example/src/browserslist

@@ -1,11 +0,0 @@
-# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-#
-# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
-
-> 0.5%
-last 2 versions
-Firefox ESR
-not dead
-not IE 9-11

packages/overlayscrollbars-ngx/example/src/index.html

@@ -1,18 +1,13 @@
 <!doctype html>
 <html lang="en">
-
 <head>
-    <meta charset="utf-8">
+  <meta charset="utf-8">
-    <title>OverlayScrollbars Angular App</title>
+  <title>Example</title>
-    <base href="/">
+  <base href="/">
-
+  <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
-    <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
-
 <body>
-    <app-root>
+  <app-root></app-root>
-    </app-root>
 </body>
-
 </html>

packages/overlayscrollbars-ngx/example/src/main.ts

@@ -1,18 +1,20 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
-import OverlayScrollbars from "overlayscrollbars";
+import OverlayScrollbars from 'overlayscrollbars';
 
 if (environment.production) {
-    enableProdMode();
+  enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+platformBrowserDynamic()
-    .catch(err => console.error(err));
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));
 
 OverlayScrollbars(document.body, {
-    nativeScrollbarsOverlaid: {
+  nativeScrollbarsOverlaid: {
-        initialize: false
+    initialize: false,
-    }
+  },
 });

packages/overlayscrollbars-ngx/example/src/polyfills.ts

@@ -18,31 +18,9 @@
  * BROWSER POLYFILLS
  */
 
-/** IE9, IE10, IE11, and Chrome <55 requires all of the following polyfills.
+/** IE11 requires the following for NgClass support on SVG elements */
- *  This also includes Android Emulators with older versions of Chrome and Google Search/Googlebot
- */
-
-// import 'core-js/es6/symbol';
-// import 'core-js/es6/object';
-// import 'core-js/es6/function';
-// import 'core-js/es6/parse-int';
-// import 'core-js/es6/parse-float';
-// import 'core-js/es6/number';
-// import 'core-js/es6/math';
-// import 'core-js/es6/string';
-// import 'core-js/es6/date';
-// import 'core-js/es6/array';
-// import 'core-js/es6/regexp';
-// import 'core-js/es6/map';
-// import 'core-js/es6/weak-map';
-// import 'core-js/es6/set';
-
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
-/** IE10 and IE11 requires the following for the Reflect API. */
-// import 'core-js/es6/reflect';
-
 /**
  * Web Animations `@angular/platform-browser/animations`
  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
@@ -57,7 +35,7 @@
  * will put import in the top of bundle, so user need to create a separate file
  * in this directory (for example: zone-flags.ts), and put the following flags
  * into that file, and then add the following code before importing zone.js.
- * import './zone-flags.ts';
+ * import './zone-flags';
  *
  * The flags allowed in zone-flags.ts are listed here.
  *
@@ -65,7 +43,7 @@
  *
  * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
  * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
  *
  *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
  *  with the following flag, it will bypass `zone.js` patch for IE/Edge

packages/overlayscrollbars-ngx/example/src/styles.css

@@ -1,13 +1,14 @@
-@import '~overlayscrollbars/css/OverlayScrollbars.css';
+@import "~overlayscrollbars/css/OverlayScrollbars.css";
 
-html, body {
+html,
-    margin: 0;
+body {
-    padding: 0;
+  margin: 0;
-    font-family: sans-serif;
+  padding: 0;
-    font-size: 11pt;
+  font-family: sans-serif;
-    color: #31485B;
+  font-size: 11pt;
-    box-sizing: border-box;
+  color: #31485b;
+  box-sizing: border-box;
 }
 * {
-    box-sizing: inherit;
+  box-sizing: inherit;
 }

packages/overlayscrollbars-ngx/example/src/test.ts

@@ -7,7 +7,12 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(

packages/overlayscrollbars-ngx/example/src/tsconfig.app.json

@@ -1,11 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/app",
-    "types": []
-  },
-  "exclude": [
-    "test.ts",
-    "**/*.spec.ts"
-  ]
-}

packages/overlayscrollbars-ngx/example/src/tsconfig.spec.json

@@ -1,18 +0,0 @@
-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/spec",
-    "types": [
-      "jasmine",
-      "node"
-    ]
-  },
-  "files": [
-    "test.ts",
-    "polyfills.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
-}

packages/overlayscrollbars-ngx/example/src/tslint.json

@@ -1,17 +0,0 @@
-{
-    "extends": "../tslint.json",
-    "rules": {
-        "directive-selector": [
-            true,
-            "attribute",
-            "app",
-            "camelCase"
-        ],
-        "component-selector": [
-            true,
-            "element",
-            "app",
-            "kebab-case"
-        ]
-    }
-}

packages/overlayscrollbars-ngx/example/tsconfig.app.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"]
+}

packages/overlayscrollbars-ngx/example/tsconfig.json

@@ -1,24 +1,21 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-    "compileOnSave": false,
+  "compileOnSave": false,
-    "compilerOptions": {
+  "compilerOptions": {
-        "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
-        "allowSyntheticDefaultImports": true,
+    "baseUrl": "./",
-        "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
-        "outDir": "./dist/out-tsc",
+    "sourceMap": true,
-        "sourceMap": true,
+    "declaration": false,
-        "declaration": false,
+    "downlevelIteration": true,
-        "module": "es2015",
+    "experimentalDecorators": true,
-        "moduleResolution": "node",
+    "moduleResolution": "node",
-        "emitDecoratorMetadata": true,
+    "importHelpers": true,
-        "experimentalDecorators": true,
+    "target": "es2015",
-        "importHelpers": true,
+    "module": "es2020",
-        "target": "es5",
+    "lib": ["es2018", "dom"]
-        "typeRoots": [
+  },
-            "node_modules/@types"
+  "angularCompilerOptions": {
-        ],
+    "strictInputAccessModifiers": true
-        "lib": [
+  }
-            "es2018",
-            "dom"
-        ]
-    }
 }

packages/overlayscrollbars-ngx/example/tsconfig.spec.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": ["jasmine"]
+  },
+  "files": ["src/test.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+}

packages/overlayscrollbars-ngx/example/tslint.json

@@ -1,37 +1,37 @@
 {
+  "extends": "tslint:recommended",
   "rulesDirectory": [
     "codelyzer"
   ],
   "rules": {
+    "align": {
+      "options": [
+        "parameters",
+        "statements"
+      ]
+    },
+    "array-type": false,
     "arrow-return-shorthand": true,
-    "callable-types": true,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space"
-    ],
     "curly": true,
     "deprecation": {
-      "severity": "warn"
+      "severity": "warning"
     },
     "eofline": true,
-    "forin": true,
     "import-blacklist": [
       true,
       "rxjs/Rx"
     ],
     "import-spacing": true,
-    "indent": [
+    "indent": {
-      true,
+      "options": [
-      "spaces"
+        "spaces"
-    ],
+      ]
-    "interface-over-type-literal": true,
+    },
-    "label-position": true,
+    "max-classes-per-file": false,
     "max-line-length": [
       true,
       140
     ],
-    "member-access": false,
     "member-ordering": [
       true,
       {
@@ -43,8 +43,6 @@
         ]
       }
     ],
-    "no-arg": true,
-    "no-bitwise": true,
     "no-console": [
       true,
       "debug",
@@ -53,79 +51,102 @@
       "timeEnd",
       "trace"
     ],
-    "no-construct": true,
-    "no-debugger": true,
-    "no-duplicate-super": true,
     "no-empty": false,
-    "no-empty-interface": true,
-    "no-eval": true,
     "no-inferrable-types": [
       true,
       "ignore-params"
     ],
-    "no-misused-new": true,
     "no-non-null-assertion": true,
     "no-redundant-jsdoc": true,
-    "no-shadowed-variable": true,
-    "no-string-literal": false,
-    "no-string-throw": true,
     "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
+    "no-var-requires": false,
-    "no-unnecessary-initializer": true,
+    "object-literal-key-quotes": [
-    "no-unused-expression": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
       true,
-      "check-open-brace",
+      "as-needed"
-      "check-catch",
-      "check-else",
-      "check-whitespace"
     ],
-    "prefer-const": true,
     "quotemark": [
       true,
       "single"
     ],
-    "radix": true,
+    "semicolon": {
-    "semicolon": [
+      "options": [
-      true,
+        "always"
-      "always"
+      ]
-    ],
+    },
-    "triple-equals": [
+    "space-before-function-paren": {
-      true,
+      "options": {
-      "allow-null-check"
+        "anonymous": "never",
-    ],
+        "asyncArrow": "always",
-    "typedef-whitespace": [
+        "constructor": "never",
-      true,
+        "method": "never",
-      {
+        "named": "never"
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
       }
-    ],
+    },
-    "unified-signatures": true,
+    "typedef": [
-    "variable-name": false,
-    "whitespace": [
       true,
-      "check-branch",
+      "call-signature"
-      "check-decl",
-      "check-operator",
-      "check-separator",
-      "check-type"
     ],
-    "no-output-on-prefix": true,
+    "typedef-whitespace": {
-    "use-input-property-decorator": true,
+      "options": [
-    "use-output-property-decorator": true,
+        {
-    "use-host-property-decorator": true,
+          "call-signature": "nospace",
-    "no-input-rename": true,
+          "index-signature": "nospace",
-    "no-output-rename": true,
+          "parameter": "nospace",
-    "use-life-cycle-interface": true,
+          "property-declaration": "nospace",
-    "use-pipe-transform-interface": true,
+          "variable-declaration": "nospace"
+        },
+        {
+          "call-signature": "onespace",
+          "index-signature": "onespace",
+          "parameter": "onespace",
+          "property-declaration": "onespace",
+          "variable-declaration": "onespace"
+        }
+      ]
+    },
+    "variable-name": {
+      "options": [
+        "ban-keywords",
+        "check-format",
+        "allow-pascal-case"
+      ]
+    },
+    "whitespace": {
+      "options": [
+        "check-branch",
+        "check-decl",
+        "check-operator",
+        "check-separator",
+        "check-type",
+        "check-typecast"
+      ]
+    },
     "component-class-suffix": true,
-    "directive-class-suffix": true
+    "contextual-lifecycle": true,
+    "directive-class-suffix": true,
+    "no-conflicting-lifecycle": true,
+    "no-host-metadata-property": true,
+    "no-input-rename": true,
+    "no-inputs-metadata-property": true,
+    "no-output-native": true,
+    "no-output-on-prefix": true,
+    "no-output-rename": true,
+    "no-outputs-metadata-property": true,
+    "template-banana-in-box": true,
+    "template-no-negated-async": true,
+    "use-lifecycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "directive-selector": [
+      true,
+      "attribute",
+      "app",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "app",
+      "kebab-case"
+    ]
   }
 }

packages/overlayscrollbars-ngx/package.json

@@ -25,9 +25,9 @@
     "author": "KingSora | Rene Haas",
     "license": "MIT",
     "devDependencies": {
-        "@angular/compiler": "^7.2.16",
+        "@angular/compiler": ">=7.0.0",
-        "@angular/compiler-cli": "^7.2.16",
+        "@angular/compiler-cli": ">=7.0.0",
-        "@angular/core": "^7.2.16",
+        "@angular/core": ">=7.0.0",
         "@types/overlayscrollbars": "^1.9.0",
         "chalk": "^2.4.2",
         "gulp": "^4.0.2",
@@ -44,7 +44,7 @@
         "zone.js": "^0.8.26"
     },
     "peerDependencies": {
-        "@angular/core": "^7.0.0",
+        "@angular/core": ">=7.0.0",
         "overlayscrollbars": "^1.10.0"
     },
     "scripts": {

packages/overlayscrollbars-ngx/src/overlayscrollbars.component.ts

@@ -28,19 +28,11 @@ import OverlayScrollbars from 'overlayscrollbars';
     styles: [':host { display: block; }']
 })
 export class OverlayScrollbarsComponent implements OnDestroy, OnChanges, AfterViewInit {
-    private _options: OverlayScrollbars.Options;
+    @Input('options') _options: OverlayScrollbars.Options;
-    private _extensions: OverlayScrollbars.Extensions;
+    @Input('extensions') _extensions: OverlayScrollbars.Extensions;
     private _osInstance: OverlayScrollbars | null = null;
     private _osTargetRef: ElementRef;
 
-    @Input('extensions') set extensions(extensions: OverlayScrollbars.Extensions | undefined) {
-        this._extensions = extensions;
-    }
-
-    @Input('options') set options(options: OverlayScrollbars.Options | undefined) {
-        this._options = options;
-    }
-
     constructor(_osTargetRef: ElementRef, private ngZone: NgZone) {
         this._osTargetRef = _osTargetRef;
     }