feat(public): use perfect-scrollbar in sbb-table (#173)

Closes #35

projects/angular-showcase/src/app/app.component.html

@@ -1,36 +1,34 @@
 <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>
+  <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>
 
 <div class="container">
@@ -54,7 +52,7 @@
       </svg>
     </a>
   </div>
-  <perfect-scrollbar class="content">
+  <div class="content">
     <router-outlet></router-outlet>
-  </perfect-scrollbar>
+  </div>
 </div>

projects/angular-showcase/src/app/business/business-routing.module.ts

@@ -1,10 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
+import { PublicComponentViewerModule } from '../features/public-component-viewer/public-component-viewer.module';
+import { PublicComponentViewerComponent } from '../features/public-component-viewer/public-component-viewer/public-component-viewer.component';
 import { MarkdownViewerComponent } from '../shared/markdown-viewer/markdown-viewer.component';
 
 import { BusinessComponent } from './business/business.component';
-import { ComponentViewerComponent } from './component-viewer/component-viewer.component';
 
 const routes: Routes = [
   {
@@ -24,20 +25,20 @@ const routes: Routes = [
       },
       {
         path: 'components/:id',
-        component: ComponentViewerComponent,
+        component: PublicComponentViewerComponent,
         data: { library: 'angular-business' }
       },
       {
         path: 'components/:id/:section',
-        component: ComponentViewerComponent,
+        component: PublicComponentViewerComponent,
         data: { library: 'angular-business' }
       }
     ]
   }
 ];
 
 @NgModule({
-  imports: [RouterModule.forChild(routes)],
+  imports: [RouterModule.forChild(routes), PublicComponentViewerModule],
   exports: [RouterModule]
 })
 export class BusinessRoutingModule {}

projects/angular-showcase/src/app/business/business.module.ts

@@ -9,10 +9,9 @@ import { SharedModule } from '../shared/shared.module';
 import { BusinessExamplesModule } from './business-examples/business-examples.module';
 import { BusinessRoutingModule } from './business-routing.module';
 import { BusinessComponent } from './business/business.component';
-import { ComponentViewerComponent } from './component-viewer/component-viewer.component';
 
 @NgModule({
-  declarations: [BusinessComponent, ComponentViewerComponent],
+  declarations: [BusinessComponent],
   imports: [
     CommonModule,
     ScrollingModule,

projects/angular-showcase/src/app/core/core-routing.module.ts

@@ -1,7 +1,8 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
-import { ComponentViewerComponent } from '../business/component-viewer/component-viewer.component';
+import { PublicComponentViewerModule } from '../features/public-component-viewer/public-component-viewer.module';
+import { PublicComponentViewerComponent } from '../features/public-component-viewer/public-component-viewer/public-component-viewer.component';
 import { ApiViewerComponent } from '../shared/api-viewer/api-viewer.component';
 import { MarkdownViewerComponent } from '../shared/markdown-viewer/markdown-viewer.component';
 
@@ -25,12 +26,12 @@ const routes: Routes = [
       },
       {
         path: 'components/:id',
-        component: ComponentViewerComponent,
+        component: PublicComponentViewerComponent,
         data: { library: 'angular-core' }
       },
       {
         path: 'components/:id/:section',
-        component: ComponentViewerComponent,
+        component: PublicComponentViewerComponent,
         data: { library: 'angular-core' }
       },
       {
@@ -43,7 +44,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forChild(routes)],
+  imports: [RouterModule.forChild(routes), PublicComponentViewerModule],
   exports: [RouterModule]
 })
 export class CoreRoutingModule {}

projects/angular-showcase/src/app/core/core.module.ts

@@ -6,12 +6,11 @@ import { TabsModule } from '@sbb-esta/angular-public/tabs';
 
 import { SharedModule } from '../shared/shared.module';
 
-import { ComponentViewerComponent } from './component-viewer/component-viewer.component';
 import { CoreRoutingModule } from './core-routing.module';
 import { CoreComponent } from './core/core.component';
 
 @NgModule({
-  declarations: [CoreComponent, ComponentViewerComponent],
+  declarations: [CoreComponent],
   imports: [
     CommonModule,
     ScrollingModule,

projects/angular-showcase/src/app/shared/example-viewer/example-viewer.component.scss → projects/angular-showcase/src/app/features/public-component-viewer/example-viewer/public-example-viewer.component.scss

@@ -1,5 +1,5 @@
-@import '../../../../../sbb-esta/angular-core/styles/common/button';
-@import '../../../../../sbb-esta/angular-core/styles/common/colors';
+@import '../../../../../../sbb-esta/angular-core/styles/common/button';
+@import '../../../../../../sbb-esta/angular-core/styles/common/colors';
 
 :host {
   display: block;

projects/angular-showcase/src/app/shared/example-viewer/example-viewer.component.ts → projects/angular-showcase/src/app/features/public-component-viewer/example-viewer/public-example-viewer.component.ts

@@ -13,14 +13,14 @@ import { ActivatedRoute } from '@angular/router';
 import { combineLatest, Observable, Subject } from 'rxjs';
 import { map } from 'rxjs/operators';
 
-import { HtmlLoader } from '../html-loader.service';
+import { HtmlLoader } from '../../../shared/html-loader.service';
 
 @Component({
-  selector: 'sbb-example-viewer',
-  templateUrl: './example-viewer.component.html',
-  styleUrls: ['./example-viewer.component.scss']
+  selector: 'sbb-public-example-viewer',
+  templateUrl: './public-example-viewer.component.html',
+  styleUrls: ['./public-example-viewer.component.scss']
 })
-export class ExampleViewerComponent implements OnInit, AfterViewInit, OnDestroy {
+export class PublicExampleViewerComponent implements OnInit, AfterViewInit, OnDestroy {
   @Input() example: ComponentPortal<any>;
   @Input() name: string;
   @ViewChild('html', { static: false }) html: ElementRef;

projects/angular-showcase/src/app/features/public-component-viewer/ps-chrome-patch.directive.ts

@@ -0,0 +1,20 @@
+import { Directive, ElementRef, Self } from '@angular/core';
+import { PerfectScrollbarComponent } from 'ngx-perfect-scrollbar';
+
+@Directive({
+  // tslint:disable-next-line: directive-selector
+  selector: 'perfect-scrollbar'
+})
+export class PsChromePatchDirective {
+  constructor(elementRef: ElementRef, @Self() perfectScrollbar: PerfectScrollbarComponent) {
+    const element: HTMLElement = elementRef.nativeElement;
+    perfectScrollbar.psXReachEnd.subscribe(() => {
+      if (
+        perfectScrollbar.directiveRef.elementRef.nativeElement.getBoundingClientRect().top < 0 &&
+        element.scrollTo
+      ) {
+        element.scrollTo(0, 0);
+      }
+    });
+  }
+}

projects/angular-showcase/src/app/features/public-component-viewer/public-component-viewer.module.ts

@@ -0,0 +1,19 @@
+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 { PublicExampleViewerComponent } from './example-viewer/public-example-viewer.component';
+import { PsChromePatchDirective } from './ps-chrome-patch.directive';
+import { PublicComponentViewerComponent } from './public-component-viewer/public-component-viewer.component';
+
+@NgModule({
+  declarations: [
+    PublicExampleViewerComponent,
+    PublicComponentViewerComponent,
+    PsChromePatchDirective
+  ],
+  imports: [CommonModule, PortalModule, ScrollingModule, TabsModule]
+})
+export class PublicComponentViewerModule {}

projects/angular-showcase/src/app/business/component-viewer/component-viewer.component.html → projects/angular-showcase/src/app/features/public-component-viewer/public-component-viewer/public-component-viewer.component.html

@@ -8,11 +8,11 @@
         <div #api></div>
       </sbb-tab>
       <sbb-tab *ngIf="example | async as examplePortals" label="Examples">
-        <sbb-example-viewer
+        <sbb-public-example-viewer
           *ngFor="let entry of examplePortals | keyvalue"
           [name]="entry.key"
           [example]="entry.value"
-        ></sbb-example-viewer>
+        ></sbb-public-example-viewer>
       </sbb-tab>
     </sbb-tabs>
   </article>

projects/angular-showcase/src/app/core/component-viewer/component-viewer.component.scss → projects/angular-showcase/src/app/features/public-component-viewer/public-component-viewer/public-component-viewer.component.scss

@@ -1,10 +1,12 @@
 :host {
   display: block;
-  height: calc(100vh - 48px);
-  overflow-y: hidden;
   margin-left: 300px;
 }
 
+perfect-scrollbar {
+  height: calc(100vh - 48px);
+}
+
 article {
   padding: 3rem;
 }

projects/angular-showcase/src/app/features/public-component-viewer/public-component-viewer/public-component-viewer.component.ts

@@ -0,0 +1,22 @@
+import { Component, Renderer2 } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { ComponentViewerBase } from '../../../shared/component-viewer-base';
+import { ExampleProvider } from '../../../shared/example-provider';
+import { HtmlLoader } from '../../../shared/html-loader.service';
+
+@Component({
+  selector: 'sbb-public-component-viewer',
+  templateUrl: './public-component-viewer.component.html',
+  styleUrls: ['./public-component-viewer.component.scss']
+})
+export class PublicComponentViewerComponent extends ComponentViewerBase {
+  constructor(
+    htmlLoader: HtmlLoader,
+    exampleProvider: ExampleProvider,
+    route: ActivatedRoute,
+    renderer: Renderer2
+  ) {
+    super(htmlLoader, exampleProvider, route, renderer);
+  }
+}