feat: use native overflow scroll functionality in viewport

Scrollbars are still emulated to sit on top of the viewport client and to look more elegant.
Because there is no cross-browser API to hide scrollbars without losing native scroll support,
we set 'overflow' to 'scroll' but shift the native scrollbars out of the visible viewport area.

Motivation for the change:
- to have built-in touch behavior (pan and swipe)
- to have built-in keyboard navigation behavior
- to have built-in scrolling behavior like acceleration and deceleration
- to move the viewport client while dragging near viewport edges (DnD)

Enhancement:
- make scrollbars only visible if hovered
- enlarge scrollbars if near scroll thumb
- fast scrolling while clicking on scroll track

Additional changes:
- viewport packaged as a separate module because not workbench specific
- dimension directive packaged as a separate module because not workbench specific and used by <sci-viewport>
- changed prefix of viewport and dimension directive from 'wb' to 'sci' because not workbench specific (SCION prefix)
- scrollbars are no longer part of the public API
- removed API to specify custom CSS class(es) on viewport and viewport client; instead, CSS flexbox layout with flex-flow 'column nowrap' is deployed to the viewport with `<ng-content>` as its flex item(s)
- viewport registered as CDK scroll provider to work with CDK scroll strategy in overlays

Migration if using viewport component:
- manifest a dependency to `SciViewportModule` because packaged as separate module
- remove custom CSS classes specified with `viewportCssClass` and `viewportClientCssClass` input properties; instead, CSS flexbox layout with flex-flow 'column nowrap' is applied to the viewport with `<ng-content>` as its flex item(s); migrate by styling `<ng-content>` as flex items, or provide your viewport client in a containing block and style it accordingly
- replace `overflowAuto` input property with `scrollbarStyle` input property; by default, scrollbars are displayed on top of the viewport client
- change selector from `wb-viewport` to `sci-viewport`
- use `scrollHeight` and `scrollWidth` to get viewport client dimension
- rename `ViewportComponent` to `SciViewportComponent` if injecting the viewport component

Migration if using dimension directive:
- manifest a dependency to `SciDimensionModule` because packaged as separate module
- change selector from `wbDimension` to `sciDimension`
- rename `Dimension` to `SciDimension` which is emitted upon host element's dimension change
- rename `wbDimensionChange` output property to `sciDimensionChange`
- rename `wbDimensionUseTimer` input property to `sciDimensionUseTimer`

BREAKING CHANGE: Migration if using viewport component and dimension directive
	Manifest a dependency to `SciViewportModule` because packaged as separate module

	Remove custom CSS classes specified with `viewportCssClass` and `viewportClientCssClass` input properties; instead, CSS flexbox layout with flex-flow 'column nowrap' is applied to the viewport with `<ng-content>` as its flex item(s); migrate by styling `<ng-content>` as flex items, or provide your viewport client in a containing block and style it accordingly

	Replace `overflowAuto` input property with `scrollbarStyle` input property; by default, scrollbars are displayed on top of the viewport client

	Change selector from `wb-viewport` to `sci-viewport`

	Use `scrollHeight` and `scrollWidth` to get viewport client dimension

	Rename `ViewportComponent` to `SciViewportComponent` if injecting the viewport component

	Manifest a dependency to `SciDimensionModule` because packaged as separate module

	Change selector from `wbDimension` to `sciDimension`

	Rename `Dimension` to `SciDimension` which is emitted upon host element's dimension change

	Rename `wbDimensionChange` output property to `sciDimensionChange`

	Rename `wbDimensionUseTimer` input property to `sciDimensionUseTimer`

projects/scion/workbench/src/lib/activity-part/activity-part.component.html

@@ -26,9 +26,9 @@ <h1>{{activity.title}}</h1>
     </ul>
   </header>
 
-  <wb-viewport [viewportCssClass]="'wb-viewport'" [viewportClientCssClass]="'wb-viewport-client'">
+  <sci-viewport>
     <wb-router-outlet></wb-router-outlet>
-  </wb-viewport>
+  </sci-viewport>
 
   <div class="sash"
        [wbSash]="'vertical'"

projects/scion/workbench/src/lib/activity-part/activity-part.component.scss

@@ -82,13 +82,15 @@ $diamond-height: 8;
       }
     }
 
-    > wb-viewport {
+    > sci-viewport {
       flex: auto;
 
-      ::ng-deep .wb-viewport-client {
-        display: block;
-        width: 100%;
-        height: 100%;
+      wb-router-outlet {
+        flex: none;
+      }
+
+      wb-router-outlet + ::ng-deep * {
+        flex: 1 1 100%;
       }
     }
 

projects/scion/workbench/src/lib/wb-dimension.directive.ts → projects/scion/workbench/src/lib/ui/dimension/dimension.directive.ts

@@ -12,22 +12,22 @@ import { Directive, DoCheck, ElementRef, EventEmitter, Input, NgZone, OnDestroy,
 import { fromEvent, interval, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
-export const NULL_DIMENSION: Dimension = {offsetWidth: 0, offsetHeight: 0, clientWidth: 0, clientHeight: 0};
+export const NULL_DIMENSION: SciDimension = {offsetWidth: 0, offsetHeight: 0, clientWidth: 0, clientHeight: 0};
 
 /**
- * Notifies upon a component dimension change.
+ * Notifies upon dimension change of the host element.
  */
 @Directive({
-  selector: '[wbDimension]'
+  selector: '[sciDimension]'
 })
-export class DimensionDirective implements OnInit, DoCheck, OnDestroy {
+export class SciDimensionDirective implements OnInit, DoCheck, OnDestroy {
 
   private _host: HTMLElement;
-  private _dimension: Dimension = NULL_DIMENSION;
+  private _dimension: SciDimension = NULL_DIMENSION;
   private _destroy$ = new Subject<void>();
 
-  @Output()
-  public wbDimensionChange = new EventEmitter<Dimension>();
+  @Output('sciDimensionChange') // tslint:disable-line:no-output-rename
+  public dimensionChange = new EventEmitter<SciDimension>();
 
 
   /**
@@ -37,7 +37,7 @@ export class DimensionDirective implements OnInit, DoCheck, OnDestroy {
    *
    * If so, set this property to 'true' to detect dimension changes when a periodic timer fires.
    */
-  @Input('wbDimensionUseTimer') // tslint:disable-line:no-input-rename
+  @Input('sciDimensionUseTimer') // tslint:disable-line:no-input-rename
   public useTimer: boolean;
 
   constructor(host: ElementRef, private _ngZone: NgZone) {
@@ -85,11 +85,11 @@ export class DimensionDirective implements OnInit, DoCheck, OnDestroy {
     }
 
     this._dimension = newDimension;
-    this._ngZone.run(() => this.wbDimensionChange.emit(this._dimension));
+    this._ngZone.run(() => this.dimensionChange.emit(this._dimension));
   }
 }
 
-export interface Dimension {
+export interface SciDimension {
   offsetWidth: number;
   offsetHeight: number;
   clientWidth: number;

projects/scion/workbench/src/lib/ui/dimension/dimension.module.ts

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2018 Swiss Federal Railways
+ *
+ * This program and the accompanying materials are made
+ * available under the terms of the Eclipse Public License 2.0
+ * which is available at https://www.eclipse.org/legal/epl-2.0/
+ *
+ *  SPDX-License-Identifier: EPL-2.0
+ */
+
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SciDimensionDirective } from './dimension.directive';
+
+/**
+ * {SciDimensionDirective} notifies upon a component dimension change.
+ */
+@NgModule({
+  imports: [
+    CommonModule,
+  ],
+  declarations: [
+    SciDimensionDirective,
+  ],
+  exports: [
+    SciDimensionDirective,
+  ],
+})
+export class SciDimensionModule {
+}