From c9fa496c20bd0415b5bf73ad705ee7a739cf18b0 Mon Sep 17 00:00:00 2001
From: kyubisation <lukas.spirig@gmail.com>
Date: Mon, 16 Sep 2019 16:44:08 +0200
Subject: [PATCH] fix: handle scrolling correctly (#168)

Closes #161
---
 angular.json                                  |  1 -
 .../src/app/app.component.html                | 68 ++++++++++---------
 .../angular-showcase/src/app/app.module.ts    |  4 +-
 .../src/app/business/business.module.ts       |  4 +-
 .../src/app/core/core.module.ts               |  4 +-
 .../src/app/core/core/core.component.ts       |  3 +-
 .../src/app/icons/icons.module.ts             |  4 +-
 .../src/app/public/public.module.ts           |  4 +-
 .../src/app/shared/shared.module.ts           |  4 +-
 .../sbb-esta/angular-core/ng-package.json     |  1 +
 projects/sbb-esta/angular-core/package.json   |  3 +
 projects/sbb-esta/angular-core/public-api.ts  |  1 +
 .../sbb-esta/angular-core/scrolling/index.ts  |  1 +
 .../angular-core/scrolling/package.json       | 19 ++++++
 .../angular-core/scrolling/scrolling.md       | 28 ++++++++
 .../src/ps-scrollable.directive.spec.ts       | 58 ++++++++++++++++
 .../scrolling/src/ps-scrollable.directive.ts  | 59 ++++++++++++++++
 .../angular-core/scrolling/src/public_api.ts  |  2 +
 .../scrolling/src/scrolling.module.ts         | 11 +++
 .../lightbox/src/lightbox.module.ts           |  4 +-
 .../lightbox/src/lightbox/lightbox.spec.ts    |  4 +-
 .../select/src/select.module.ts               | 12 +---
 .../src/select/select.component.spec.ts       |  4 +-
 .../angular-public/tabs/src/tabs.module.ts    |  4 +-
 .../tabs/src/tabs/tabs.component.spec.ts      |  4 +-
 25 files changed, 247 insertions(+), 64 deletions(-)
 create mode 100644 projects/sbb-esta/angular-core/scrolling/index.ts
 create mode 100644 projects/sbb-esta/angular-core/scrolling/package.json
 create mode 100644 projects/sbb-esta/angular-core/scrolling/scrolling.md
 create mode 100644 projects/sbb-esta/angular-core/scrolling/src/ps-scrollable.directive.spec.ts
 create mode 100644 projects/sbb-esta/angular-core/scrolling/src/ps-scrollable.directive.ts
 create mode 100644 projects/sbb-esta/angular-core/scrolling/src/public_api.ts
 create mode 100644 projects/sbb-esta/angular-core/scrolling/src/scrolling.module.ts

diff --git a/angular.json b/angular.json
index 4f2cbd17e1..7c225740a0 100644
--- a/angular.json
+++ b/angular.json
@@ -32,7 +32,6 @@
             ],
             "styles": [
               "projects/angular-showcase/src/styles.scss",
-              "node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
               "node_modules/highlight.js/styles/github.css"
             ],
             "scripts": [],
diff --git a/projects/angular-showcase/src/app/app.component.html b/projects/angular-showcase/src/app/app.component.html
index 02c6c6c56b..1f83315dc5 100644
--- a/projects/angular-showcase/src/app/app.component.html
+++ b/projects/angular-showcase/src/app/app.component.html
@@ -1,34 +1,36 @@
-<nav class="menu" [class.menu-open]="showMenu" perfectScrollbar>
-  <ul>
-    <li>
-      <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"
-        >Introduction</a
-      >
-    </li>
-    <li class="title">Libraries</li>
-    <li>
-      <a routerLink="/public" routerLinkActive="active">@sbb-esta/angular-public</a>
-    </li>
-    <li>
-      <a routerLink="/business" routerLinkActive="active">@sbb-esta/angular-business</a>
-    </li>
-    <li>
-      <a routerLink="/core" routerLinkActive="active">@sbb-esta/angular-core</a>
-    </li>
-    <li>
-      <a routerLink="/icons" routerLinkActive="active">@sbb-esta/angular-icons</a>
-    </li>
-    <li>
-      <a routerLink="/keycloak" routerLinkActive="active">@sbb-esta/angular-keycloak</a>
-    </li>
-    <li class="title">About</li>
-    <li>
-      <a href="https://angular.io/">Angular {{ angularVersion }}</a>
-    </li>
-    <li>
-      <a routerLink="/">Showcase {{ showcaseVersion }}</a>
-    </li>
-  </ul>
+<nav class="menu" [class.menu-open]="showMenu">
+  <perfect-scrollbar>
+    <ul>
+      <li>
+        <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"
+          >Introduction</a
+        >
+      </li>
+      <li class="title">Libraries</li>
+      <li>
+        <a routerLink="/public" routerLinkActive="active">@sbb-esta/angular-public</a>
+      </li>
+      <li>
+        <a routerLink="/business" routerLinkActive="active">@sbb-esta/angular-business</a>
+      </li>
+      <li>
+        <a routerLink="/core" routerLinkActive="active">@sbb-esta/angular-core</a>
+      </li>
+      <li>
+        <a routerLink="/icons" routerLinkActive="active">@sbb-esta/angular-icons</a>
+      </li>
+      <li>
+        <a routerLink="/keycloak" routerLinkActive="active">@sbb-esta/angular-keycloak</a>
+      </li>
+      <li class="title">About</li>
+      <li>
+        <a href="https://angular.io/">Angular {{ angularVersion }}</a>
+      </li>
+      <li>
+        <a routerLink="/">Showcase {{ showcaseVersion }}</a>
+      </li>
+    </ul>
+  </perfect-scrollbar>
 </nav>
 
 <div class="container">
@@ -52,7 +54,7 @@
       </svg>
     </a>
   </div>
-  <div class="content" perfectScrollbar>
+  <perfect-scrollbar class="content">
     <router-outlet></router-outlet>
-  </div>
+  </perfect-scrollbar>
 </div>
diff --git a/projects/angular-showcase/src/app/app.module.ts b/projects/angular-showcase/src/app/app.module.ts
index fabd419f45..afe7c73aa0 100644
--- a/projects/angular-showcase/src/app/app.module.ts
+++ b/projects/angular-showcase/src/app/app.module.ts
@@ -3,9 +3,9 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
 import { ICON_COMPONENT_LIST, IconCollectionModule } from '@sbb-esta/angular-icons';
 import { MonacoEditorModule } from 'ngx-monaco-editor';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -24,7 +24,7 @@ import { PublicModule } from './public/public.module';
     MonacoEditorModule.forRoot({ baseUrl: './assets' }),
     IconCollectionModule,
     ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
-    PerfectScrollbarModule,
+    ScrollingModule,
     HttpClientModule,
     BrowserAnimationsModule,
     PublicModule,
diff --git a/projects/angular-showcase/src/app/business/business.module.ts b/projects/angular-showcase/src/app/business/business.module.ts
index 53d89dd9a1..7f9f085c0c 100644
--- a/projects/angular-showcase/src/app/business/business.module.ts
+++ b/projects/angular-showcase/src/app/business/business.module.ts
@@ -1,8 +1,8 @@
 import { PortalModule } from '@angular/cdk/portal';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
 import { TabsModule } from '@sbb-esta/angular-public/tabs';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { SharedModule } from '../shared/shared.module';
 
@@ -15,7 +15,7 @@ import { ComponentViewerComponent } from './component-viewer/component-viewer.co
   declarations: [BusinessComponent, ComponentViewerComponent],
   imports: [
     CommonModule,
-    PerfectScrollbarModule,
+    ScrollingModule,
     PortalModule,
     BusinessExamplesModule,
     SharedModule,
diff --git a/projects/angular-showcase/src/app/core/core.module.ts b/projects/angular-showcase/src/app/core/core.module.ts
index 21f87ce4b7..f386508264 100644
--- a/projects/angular-showcase/src/app/core/core.module.ts
+++ b/projects/angular-showcase/src/app/core/core.module.ts
@@ -1,8 +1,8 @@
 import { PortalModule } from '@angular/cdk/portal';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
 import { TabsModule } from '@sbb-esta/angular-public/tabs';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { SharedModule } from '../shared/shared.module';
 
@@ -15,7 +15,7 @@ import { ExamplesModule } from './examples/examples.module';
   declarations: [CoreComponent, ComponentViewerComponent],
   imports: [
     CommonModule,
-    PerfectScrollbarModule,
+    ScrollingModule,
     PortalModule,
     ExamplesModule,
     SharedModule,
diff --git a/projects/angular-showcase/src/app/core/core/core.component.ts b/projects/angular-showcase/src/app/core/core/core.component.ts
index 049bb32cec..265e9339f1 100644
--- a/projects/angular-showcase/src/app/core/core/core.component.ts
+++ b/projects/angular-showcase/src/app/core/core/core.component.ts
@@ -12,7 +12,8 @@ import { ExampleProvider } from '../../shared/example-provider';
 export class CoreComponent implements ExampleProvider {
   modules = {
     breakpoints: 'Breakpoints',
-    datetime: 'Datetime'
+    datetime: 'Datetime',
+    scrolling: 'Scrolling'
   };
   private _examples: { [component: string]: { [name: string]: ComponentPortal<any> } } = {};
 
diff --git a/projects/angular-showcase/src/app/icons/icons.module.ts b/projects/angular-showcase/src/app/icons/icons.module.ts
index 90b32d9074..5b3396aec9 100644
--- a/projects/angular-showcase/src/app/icons/icons.module.ts
+++ b/projects/angular-showcase/src/app/icons/icons.module.ts
@@ -2,9 +2,9 @@ import { PortalModule } from '@angular/cdk/portal';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
+import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
 import { ICON_COMPONENT_LIST } from '@sbb-esta/angular-icons';
 import { SearchModule } from '@sbb-esta/angular-public/search';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { SharedModule } from '../shared/shared.module';
 
@@ -21,7 +21,7 @@ import { IconsComponent } from './icons/icons.component';
     CommonModule,
     ReactiveFormsModule,
     PortalModule,
-    PerfectScrollbarModule,
+    ScrollingModule,
     SearchModule,
     SharedModule,
     IconsRoutingModule
diff --git a/projects/angular-showcase/src/app/public/public.module.ts b/projects/angular-showcase/src/app/public/public.module.ts
index e4bde550ec..631693073f 100644
--- a/projects/angular-showcase/src/app/public/public.module.ts
+++ b/projects/angular-showcase/src/app/public/public.module.ts
@@ -1,8 +1,8 @@
 import { PortalModule } from '@angular/cdk/portal';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
 import { TabsModule } from '@sbb-esta/angular-public/tabs';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { SharedModule } from '../shared/shared.module';
 
@@ -15,8 +15,8 @@ import { PublicComponent } from './public/public.component';
   declarations: [PublicComponent, ComponentViewerComponent],
   imports: [
     CommonModule,
-    PerfectScrollbarModule,
     PortalModule,
+    ScrollingModule,
     PublicExamplesModule,
     SharedModule,
     TabsModule,
diff --git a/projects/angular-showcase/src/app/shared/shared.module.ts b/projects/angular-showcase/src/app/shared/shared.module.ts
index 73a7063890..38fdc9134b 100644
--- a/projects/angular-showcase/src/app/shared/shared.module.ts
+++ b/projects/angular-showcase/src/app/shared/shared.module.ts
@@ -1,8 +1,8 @@
 import { PortalModule } from '@angular/cdk/portal';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
 import { TabsModule } from '@sbb-esta/angular-public/tabs';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { ApiViewerComponent } from './api-viewer/api-viewer.component';
 import { ExampleViewerComponent } from './example-viewer/example-viewer.component';
@@ -16,7 +16,7 @@ import { SubmenuComponent } from './submenu/submenu.component';
     ExampleViewerComponent,
     ApiViewerComponent
   ],
-  imports: [CommonModule, PerfectScrollbarModule, PortalModule, TabsModule],
+  imports: [CommonModule, ScrollingModule, PortalModule, TabsModule],
   exports: [SubmenuComponent, MarkdownViewerComponent, ExampleViewerComponent, ApiViewerComponent]
 })
 export class SharedModule {}
diff --git a/projects/sbb-esta/angular-core/ng-package.json b/projects/sbb-esta/angular-core/ng-package.json
index 2f40e4883b..fefcb793b1 100644
--- a/projects/sbb-esta/angular-core/ng-package.json
+++ b/projects/sbb-esta/angular-core/ng-package.json
@@ -1,6 +1,7 @@
 {
   "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../../dist/sbb-esta/angular-core",
+  "whitelistedNonPeerDependencies": ["tslib", "ngx-perfect-scrollbar"],
   "lib": {
     "entryFile": "public-api.ts"
   }
diff --git a/projects/sbb-esta/angular-core/package.json b/projects/sbb-esta/angular-core/package.json
index b917af861e..eb4a637759 100644
--- a/projects/sbb-esta/angular-core/package.json
+++ b/projects/sbb-esta/angular-core/package.json
@@ -17,5 +17,8 @@
     "@angular/cdk": "^8.0.0",
     "@angular/common": "^8.0.0",
     "@angular/core": "^8.0.0"
+  },
+  "dependencies": {
+    "ngx-perfect-scrollbar": "^8.0.0"
   }
 }
\ No newline at end of file
diff --git a/projects/sbb-esta/angular-core/public-api.ts b/projects/sbb-esta/angular-core/public-api.ts
index 865cfc860b..c5329b3163 100644
--- a/projects/sbb-esta/angular-core/public-api.ts
+++ b/projects/sbb-esta/angular-core/public-api.ts
@@ -7,3 +7,4 @@ export * from '@sbb-esta/angular-core/common-behaviors';
 export * from '@sbb-esta/angular-core/datetime';
 export * from '@sbb-esta/angular-core/error';
 export * from '@sbb-esta/angular-core/models';
+export * from '@sbb-esta/angular-core/scrolling';
diff --git a/projects/sbb-esta/angular-core/scrolling/index.ts b/projects/sbb-esta/angular-core/scrolling/index.ts
new file mode 100644
index 0000000000..decc72d85b
--- /dev/null
+++ b/projects/sbb-esta/angular-core/scrolling/index.ts
@@ -0,0 +1 @@
+export * from './src/public_api';
diff --git a/projects/sbb-esta/angular-core/scrolling/package.json b/projects/sbb-esta/angular-core/scrolling/package.json
new file mode 100644
index 0000000000..260e1cf29a
--- /dev/null
+++ b/projects/sbb-esta/angular-core/scrolling/package.json
@@ -0,0 +1,19 @@
+{
+  "ngPackage": {
+    "lib": {
+      "umdModuleIds": {
+        "@sbb-esta/angular-core": "sbbAngularCore",
+        "@sbb-esta/angular-core/base": "sbbAngularCoreBase",
+        "@sbb-esta/angular-core/breakpoints": "sbbAngularCoreBreakpoints",
+        "@sbb-esta/angular-core/common-behaviors": "sbbAngularCoreCommonBehaviors",
+        "@sbb-esta/angular-core/datetime": "sbbAngularCoreDatetime",
+        "@sbb-esta/angular-core/error": "sbbAngularCoreError",
+        "@sbb-esta/angular-core/forms": "sbbAngularCoreForms",
+        "@sbb-esta/angular-core/icon-directive": "sbbAngularCoreIconDirective",
+        "@sbb-esta/angular-core/models": "sbbAngularCoreModels",
+        "@sbb-esta/angular-icons": "sbbAngularIcons",
+        "ngx-perfect-scrollbar": "ngxPerfectScrollbar"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/projects/sbb-esta/angular-core/scrolling/scrolling.md b/projects/sbb-esta/angular-core/scrolling/scrolling.md
new file mode 100644
index 0000000000..337bb6eb69
--- /dev/null
+++ b/projects/sbb-esta/angular-core/scrolling/scrolling.md
@@ -0,0 +1,28 @@
+The `scrolling` module wraps the [ngx-perfect-scrollbar](https://www.npmjs.com/package/ngx-perfect-scrollbar)
+package. The wrapper fixes an issue with the [CDK Overlay](https://material.angular.io/cdk/overlay/overview)
+integration.
+
+### Usage
+
+See the documentation for [ngx-perfect-scrollbar](https://www.npmjs.com/package/ngx-perfect-scrollbar)
+on how to use the `perfect-scrollbar`.
+
+```ts
+import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
+
+@NgModule({
+  ...
+  imports: [
+    ...
+    ScrollingModule,
+    ...
+  ]
+})
+export class AppModule {}
+```
+
+```html
+<perfect-scrollbar style="max-width: 600px; max-height: 400px;" [config]="config">
+  <div>Scrollable content</div>
+</perfect-scrollbar>
+```
diff --git a/projects/sbb-esta/angular-core/scrolling/src/ps-scrollable.directive.spec.ts b/projects/sbb-esta/angular-core/scrolling/src/ps-scrollable.directive.spec.ts
new file mode 100644
index 0000000000..9ea030760b
--- /dev/null
+++ b/projects/sbb-esta/angular-core/scrolling/src/ps-scrollable.directive.spec.ts
@@ -0,0 +1,58 @@
+import { ElementRef } from '@angular/core';
+import { Subject } from 'rxjs';
+
+import { PsComponentScrollable, PsDirectiveScrollable } from './ps-scrollable.directive';
+
+describe('PsDirectiveScrollable', () => {
+  const perfectScrollbarMock = {
+    psScrollY: new Subject(),
+    psScrollX: new Subject()
+  };
+  const scrollDispatcherMock = {
+    register(): void {},
+    deregister(): void {}
+  };
+
+  it('should emit on inner scroll', () => {
+    const directive = new PsDirectiveScrollable(
+      perfectScrollbarMock as any,
+      new ElementRef(null),
+      scrollDispatcherMock as any,
+      null,
+      null
+    );
+    let counter = 0;
+    directive.elementScrolled().subscribe(() => ++counter);
+    perfectScrollbarMock.psScrollX.next();
+    expect(counter).toBe(1);
+    perfectScrollbarMock.psScrollY.next();
+    expect(counter).toBe(2);
+  });
+});
+
+describe('PsComponentScrollable', () => {
+  const perfectScrollbarMock = {
+    psScrollY: new Subject(),
+    psScrollX: new Subject()
+  };
+  const scrollDispatcherMock = {
+    register(): void {},
+    deregister(): void {}
+  };
+
+  it('should emit on inner scroll', () => {
+    const directive = new PsComponentScrollable(
+      perfectScrollbarMock as any,
+      new ElementRef(null),
+      scrollDispatcherMock as any,
+      null,
+      null
+    );
+    let counter = 0;
+    directive.elementScrolled().subscribe(() => ++counter);
+    perfectScrollbarMock.psScrollX.next();
+    expect(counter).toBe(1);
+    perfectScrollbarMock.psScrollY.next();
+    expect(counter).toBe(2);
+  });
+});
diff --git a/projects/sbb-esta/angular-core/scrolling/src/ps-scrollable.directive.ts b/projects/sbb-esta/angular-core/scrolling/src/ps-scrollable.directive.ts
new file mode 100644
index 0000000000..112c75cc56
--- /dev/null
+++ b/projects/sbb-esta/angular-core/scrolling/src/ps-scrollable.directive.ts
@@ -0,0 +1,59 @@
+import { Directionality } from '@angular/cdk/bidi';
+import { CdkScrollable, ScrollDispatcher } from '@angular/cdk/overlay';
+import { Directive, ElementRef, NgZone, OnDestroy, Optional } from '@angular/core';
+import { PerfectScrollbarComponent, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
+import { merge, Observable } from 'rxjs';
+
+/**
+ * Registers the scroll detection for the perfect scrollbar directive,
+ * in order for the RepositionScrollStrategy to work correctly.
+ */
+@Directive({
+  // tslint:disable-next-line: directive-selector
+  selector: '[perfectScrollbar]',
+  providers: [{ provide: CdkScrollable, useExisting: PsDirectiveScrollable }]
+})
+// tslint:disable-next-line: directive-class-suffix
+export class PsDirectiveScrollable extends CdkScrollable implements OnDestroy {
+  constructor(
+    private _scrollbar: PerfectScrollbarDirective,
+    elementRef: ElementRef<HTMLElement>,
+    scrollDispatcher: ScrollDispatcher,
+    ngZone: NgZone,
+    @Optional() dir?: Directionality
+  ) {
+    super(elementRef, scrollDispatcher, ngZone, dir);
+  }
+
+  /** Returns observable that emits when a scroll event is fired on the host element. */
+  elementScrolled(): Observable<Event> {
+    return merge<CustomEvent>(this._scrollbar.psScrollY, this._scrollbar.psScrollX);
+  }
+}
+
+/**
+ * Registers the scroll detection for the perfect scrollbar component,
+ * in order for the RepositionScrollStrategy to work correctly.
+ */
+@Directive({
+  // tslint:disable-next-line: directive-selector
+  selector: 'perfect-scrollbar',
+  providers: [{ provide: CdkScrollable, useExisting: PsComponentScrollable }]
+})
+// tslint:disable-next-line: directive-class-suffix
+export class PsComponentScrollable extends CdkScrollable {
+  constructor(
+    private _scrollbar: PerfectScrollbarComponent,
+    elementRef: ElementRef<HTMLElement>,
+    scrollDispatcher: ScrollDispatcher,
+    ngZone: NgZone,
+    @Optional() dir?: Directionality
+  ) {
+    super(elementRef, scrollDispatcher, ngZone, dir);
+  }
+
+  /** Returns observable that emits when a scroll event is fired on the host element. */
+  elementScrolled(): Observable<Event> {
+    return merge<CustomEvent>(this._scrollbar.psScrollY, this._scrollbar.psScrollX);
+  }
+}
diff --git a/projects/sbb-esta/angular-core/scrolling/src/public_api.ts b/projects/sbb-esta/angular-core/scrolling/src/public_api.ts
new file mode 100644
index 0000000000..788e10dd20
--- /dev/null
+++ b/projects/sbb-esta/angular-core/scrolling/src/public_api.ts
@@ -0,0 +1,2 @@
+export * from './scrolling.module';
+export * from './ps-scrollable.directive';
diff --git a/projects/sbb-esta/angular-core/scrolling/src/scrolling.module.ts b/projects/sbb-esta/angular-core/scrolling/src/scrolling.module.ts
new file mode 100644
index 0000000000..c5ed64848e
--- /dev/null
+++ b/projects/sbb-esta/angular-core/scrolling/src/scrolling.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+
+import { PsComponentScrollable, PsDirectiveScrollable } from './ps-scrollable.directive';
+
+@NgModule({
+  declarations: [PsComponentScrollable, PsDirectiveScrollable],
+  exports: [PerfectScrollbarModule, PsComponentScrollable, PsDirectiveScrollable],
+  imports: [PerfectScrollbarModule]
+})
+export class ScrollingModule {}
diff --git a/projects/sbb-esta/angular-public/lightbox/src/lightbox.module.ts b/projects/sbb-esta/angular-public/lightbox/src/lightbox.module.ts
index 596281b621..7bef0a0666 100644
--- a/projects/sbb-esta/angular-public/lightbox/src/lightbox.module.ts
+++ b/projects/sbb-esta/angular-public/lightbox/src/lightbox.module.ts
@@ -2,8 +2,8 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { PortalModule } from '@angular/cdk/portal';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
 import { IconCrossModule } from '@sbb-esta/angular-icons';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { LightboxContainerComponent } from './lightbox/lightbox-container.component';
 import {
@@ -16,7 +16,7 @@ import {
 import { Lightbox, LIGHTBOX_SCROLL_STRATEGY_PROVIDER } from './lightbox/lightbox.service';
 
 @NgModule({
-  imports: [CommonModule, IconCrossModule, OverlayModule, PortalModule, PerfectScrollbarModule],
+  imports: [CommonModule, IconCrossModule, OverlayModule, PortalModule, ScrollingModule],
   exports: [
     LightboxContainerComponent,
     LightboxCloseDirective,
diff --git a/projects/sbb-esta/angular-public/lightbox/src/lightbox/lightbox.spec.ts b/projects/sbb-esta/angular-public/lightbox/src/lightbox/lightbox.spec.ts
index 436d956262..12c44ee7ff 100644
--- a/projects/sbb-esta/angular-public/lightbox/src/lightbox/lightbox.spec.ts
+++ b/projects/sbb-esta/angular-public/lightbox/src/lightbox/lightbox.spec.ts
@@ -201,7 +201,9 @@ describe('Lightbox', () => {
         {
           provide: ScrollDispatcher,
           useFactory: () => ({
-            scrolled: () => scrolledSubject.asObservable()
+            scrolled: () => scrolledSubject.asObservable(),
+            register() {},
+            deregister() {}
           })
         }
       ]
diff --git a/projects/sbb-esta/angular-public/select/src/select.module.ts b/projects/sbb-esta/angular-public/select/src/select.module.ts
index 72b00347d2..49238a5579 100644
--- a/projects/sbb-esta/angular-public/select/src/select.module.ts
+++ b/projects/sbb-esta/angular-public/select/src/select.module.ts
@@ -1,22 +1,16 @@
 import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
 import { IconChevronSmallDownModule } from '@sbb-esta/angular-icons';
 import { OptionModule } from '@sbb-esta/angular-public/option';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { SBB_SELECT_SCROLL_STRATEGY_PROVIDER, SelectComponent } from './select/select.component';
 
 @NgModule({
-  imports: [
-    IconChevronSmallDownModule,
-    OptionModule,
-    CommonModule,
-    OverlayModule,
-    PerfectScrollbarModule
-  ],
+  imports: [IconChevronSmallDownModule, OptionModule, CommonModule, OverlayModule, ScrollingModule],
   declarations: [SelectComponent],
-  exports: [OptionModule, OverlayModule, SelectComponent, PerfectScrollbarModule],
+  exports: [OptionModule, OverlayModule, SelectComponent],
   providers: [SBB_SELECT_SCROLL_STRATEGY_PROVIDER]
 })
 export class SelectModule {}
diff --git a/projects/sbb-esta/angular-public/select/src/select/select.component.spec.ts b/projects/sbb-esta/angular-public/select/src/select/select.component.spec.ts
index e988b4baa9..01907e708c 100644
--- a/projects/sbb-esta/angular-public/select/src/select/select.component.spec.ts
+++ b/projects/sbb-esta/angular-public/select/src/select/select.component.spec.ts
@@ -675,7 +675,9 @@ describe('SelectComponent', () => {
         {
           provide: ScrollDispatcher,
           useFactory: () => ({
-            scrolled: () => scrolledSubject.asObservable()
+            scrolled: () => scrolledSubject.asObservable(),
+            register() {},
+            deregister() {}
           })
         }
       ]
diff --git a/projects/sbb-esta/angular-public/tabs/src/tabs.module.ts b/projects/sbb-esta/angular-public/tabs/src/tabs.module.ts
index b990dec311..e5d05e4a4d 100644
--- a/projects/sbb-esta/angular-public/tabs/src/tabs.module.ts
+++ b/projects/sbb-esta/angular-public/tabs/src/tabs.module.ts
@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
 import { BadgeModule } from '@sbb-esta/angular-public/badge';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { TabComponent } from './tab/tab.component';
 import { TabsComponent } from './tabs/tabs.component';
 
 @NgModule({
-  imports: [CommonModule, PerfectScrollbarModule, BadgeModule],
+  imports: [CommonModule, ScrollingModule, BadgeModule],
   declarations: [TabComponent, TabsComponent],
   exports: [TabComponent, TabsComponent]
 })
diff --git a/projects/sbb-esta/angular-public/tabs/src/tabs/tabs.component.spec.ts b/projects/sbb-esta/angular-public/tabs/src/tabs/tabs.component.spec.ts
index fd08329d32..14baa8d64e 100644
--- a/projects/sbb-esta/angular-public/tabs/src/tabs/tabs.component.spec.ts
+++ b/projects/sbb-esta/angular-public/tabs/src/tabs/tabs.component.spec.ts
@@ -1,11 +1,11 @@
 import { Component, DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { ScrollingModule } from '@sbb-esta/angular-core/scrolling';
 import { dispatchEvent } from '@sbb-esta/angular-core/testing';
 import { createMouseEvent } from '@sbb-esta/angular-core/testing';
 import { BadgeModule } from '@sbb-esta/angular-public/badge';
 import { configureTestSuite } from 'ng-bullet';
-import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { TabComponent } from '../tab/tab.component';
 
@@ -49,7 +49,7 @@ describe('TabsComponent', () => {
   configureTestSuite(() => {
     TestBed.configureTestingModule({
       declarations: [TabsTestComponent, TabsComponent, TabComponent],
-      imports: [PerfectScrollbarModule, BadgeModule]
+      imports: [ScrollingModule, BadgeModule]
     });
   });