[HIMA-751] Perfect scrollbar package introduced in order to properly display scrollbar on ios devices

apps/sales/src/app/app-routing.module.ts

@@ -4,7 +4,6 @@ import { LogInComponent } from './components/log-in/log-in.component';
 import { DashboardComponent } from './modules/dashboard/pages/dashboard.component';
 
 const routes: Routes = [
-  // { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
   {
     path: 'login',
     children: [
@@ -12,7 +11,6 @@ const routes: Routes = [
       { path: ':token', component: LogInComponent }
     ]
   },
-  //{ path: '', component: DashboardComponent },
   { path: 'dashboard', component: DashboardComponent },
   { path: 'product', loadChildren: './modules/product/product.module#ProductModule' },
   { path: 'customer', loadChildren: './modules/customer/customer.module#CustomerModule' },

apps/sales/src/app/modules/customer/components/customer-orders-card/customer-orders-card.component.html

@@ -3,7 +3,8 @@
     <span>Bestellungen</span>
   </div>
 
-  <div class="fixed-card-container order-container scrollbar-visible">
+  <div class="fixed-card-container order-container"
+    [perfectScrollbar]="{minScrollbarLength: 20}">
     <div class="fixed-header-description">
       <span>Übersicht aller offenen und früheren Bestellungen</span>
     </div>

apps/sales/src/app/modules/customer/customer.module.ts

@@ -39,6 +39,7 @@ import { ShelfModule } from '../shelf/shelf.module';
 
 import { COMPONENTS, EXPORT_COMPONENTS } from './components';
 import { CustomerSearchEmptyModalComponent } from './components/customer-search-empty-modal/customer-search-empty-modal.component';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 @NgModule({
   imports: [
@@ -59,6 +60,7 @@ import { CustomerSearchEmptyModalComponent } from './components/customer-search-
     CheckboxModule,
     DropdownModule,
     DeleteDropdownFixedModule,
+    PerfectScrollbarModule,
     IconModule,
     CustomerRoutingModule,
     SelectModule,

apps/sales/src/app/modules/customer/pages/customer-search-result/customer-search-result.component.html

@@ -39,7 +39,8 @@
       <app-button (action)="redirectToCustomerCreate()">Neue Kundendaten erfassen</app-button>
     </div>
   </div>
-  <cdk-virtual-scroll-viewport itemSize="144" class="scrollbar-visible" #viewport>
+  <cdk-virtual-scroll-viewport itemSize="144" #viewport
+    [perfectScrollbar]="{minScrollbarLength: 20}">
     <div *cdkVirtualFor="let customer of ds; let i = index; let last = last" class="virtual-item">
       <div class="user">
         <div class="user-info-container" *ngIf="customer != null; else loadingComponent" (click)="details(customer, i)">

apps/sales/src/app/modules/goods-in/goods-in.module.ts

@@ -21,6 +21,7 @@ import { SharedModule } from '../../shared/shared.module';
 import { GoodsInOrderTagComponent } from './components/goods-in-order-tag/goods-in-order-tag.component';
 import { GoodsInArticleDetailsComponent } from './components/goods-in-article-details/goods-in-article-details.component';
 import { FormsModule } from '@angular/forms';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 @NgModule({
   declarations: [
@@ -37,6 +38,7 @@ import { FormsModule } from '@angular/forms';
     GoodsInRoutingModule,
     SearchInputModule,
     ScrollingModule,
+    PerfectScrollbarModule,
     LoadingModule,
     SharedModule,
     IconModule,

apps/sales/src/app/modules/goods-in/pages/goods-in-search-results/goods-in-search-results.component.html

@@ -1,6 +1,7 @@
 <div class="result-container">
   <ng-container>
-    <cdk-virtual-scroll-viewport itemSize="190" class="scrollbar-visible" #scroller>
+    <cdk-virtual-scroll-viewport itemSize="190" #scroller
+      [perfectScrollbar]="{minScrollbarLength: 20}">
       <div *cdkVirtualFor="let order of ds; let first = first; let last = last; let index = index">
         <ng-container *ngIf="order != null; else loadingComponent">
           <app-goods-in-order-card

apps/sales/src/app/modules/product/pages/product-results/product-results.component.html

@@ -25,8 +25,8 @@
   <cdk-virtual-scroll-viewport
     autosize
     #scroller
-    class="scrollbar-visible"
+    [ngClass]="{ 'cdk-stop-scrolling': scrollDisabled }"
-    [ngClass]="{ 'cdk-stop-scrolling': scrollDisabled }">
+    [perfectScrollbar]="{minScrollbarLength: 20}">
     <ng-container *cdkVirtualFor="let product of ds; let i = index; let last = last">
       <div class="product-item">
         <app-product-card

apps/sales/src/app/modules/product/product.module.ts

@@ -6,7 +6,7 @@ import { CommonModule } from '@angular/common';
 import { ProductCardComponent } from './components/product-card/product-card.component';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling';
-// import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { LoadingModule, PhotoGalleryModule, CardModule, SearchInputModule, DeleteDropdownModule } from '@libs/ui';
 import { SharedModule } from './../../shared/shared.module';
 import { ModalModule, ButtonModule, InputModule, DropdownModule, IconModule } from '@libs/ui';
@@ -45,6 +45,7 @@ import { SmallDoubleChoiceSwitchModule } from '@libs/ui/lib/small-double-choice-
     CommonModule,
     ScrollingModule,
     ExperimentalScrollingModule,
+    PerfectScrollbarModule,
     LoadingModule,
     ModalModule,
     ButtonModule,

apps/sales/src/app/modules/remission/pages/remission-list-create/remission-list-create.component.html

@@ -1,7 +1,8 @@
 <div
   #remissionListContainer
   id="remission-list-container"
-  class="remission-list-container scrollbar-visible"
+  class="remission-list-container"
+  [perfectScrollbar]="{minScrollbarLength: 20}"
   (scroll)="onScroll()"
 >
   <div class="headers" *ngIf="resourceTypeSwitch">

apps/sales/src/app/modules/remission/pages/remission-list-create/remission-list-create.component.scss

@@ -1,4 +1,5 @@
 .remission-list-container {
+  position: relative;
   height: calc(100% - 30px);
   overflow-y: auto;
   overflow-x: hidden;

apps/sales/src/app/modules/remission/pages/remission-list-started/remission-list-started.component.html

@@ -25,6 +25,7 @@
   id="remission-list-container"
   #remissionListContainer
   class="remission-list-container"
+  [perfectScrollbar]="{minScrollbarLength: 20}"
   (scroll)="scrollHandler($event)"
   *ngIf="!shippingDocumentCreationPage && loaded"
 >
@@ -127,7 +128,7 @@
       [fetchLastProducts$]="fetchLastProducts$"
       [hits]="remissionListHits"
       started="true"
-      (fullListLoaded)="fullListLoaded(true)"
+      (fullListLoaded)="fullListLoaded()"
       #remissionList
     ></app-remission-list>
   </div>

apps/sales/src/app/modules/remission/pages/remission-list-started/remission-list-started.component.scss

@@ -1,4 +1,5 @@
 .remission-list-container {
+  position: relative;
   height: calc(100% - 20px);
   overflow: scroll;
   padding-bottom: 10px;

apps/sales/src/app/modules/remission/remission-client.module.ts

@@ -67,6 +67,7 @@ import { RemissionsOverviewCardContentComponent } from './components/remissions-
 import { RemissionDetailsComponent } from './pages/remission-details/remission-details.component';
 import { RemissionDetailsProductComponent } from './components/remission-details-product/remission-details-product.component';
 import { RemissionDetailsPrimaryCtaComponent } from './components/remission-details-primary-cta/remission-details-primary-cta.component';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 @NgModule({
   declarations: [
@@ -109,6 +110,7 @@ import { RemissionDetailsPrimaryCtaComponent } from './components/remission-deta
     RemissionClientRoutingModule,
     DoubleChoiceSwitchModule,
     ProgressBarModule,
+    PerfectScrollbarModule,
     SmallDoubleChoiceSwitchModule,
     IconModule,
     ButtonModule,

apps/sales/src/app/modules/shelf/pages/shelf-search-results/shelf-search-results.component.html

@@ -1,6 +1,7 @@
 <div class="result-container">
   <ng-container>
-    <cdk-virtual-scroll-viewport itemSize="180" class="scrollbar-visible" #scroller>
+    <cdk-virtual-scroll-viewport itemSize="300" #scroller
+      [perfectScrollbar]="{minScrollbarLength: 20}">
       <div *cdkVirtualFor="let order of ds; let last = last; let index = index">
         <app-shelf-customer-order
           *ngIf="order != null; else loadingComponent"

apps/sales/src/app/modules/shelf/shelf.module.ts

@@ -27,6 +27,7 @@ import { OrderLoadingComponent } from './components/order-loading/order-loading.
 import { ShelfEditOrderComponent } from './pages/shelf-edit-order/shelf-edit-order.component';
 import { OrderItemEditComponent } from './components/order-item-edit/order-item-edit.component';
 import { OrderOverviewEditComponent } from './components/order-overview-edit/order-overview-edit.component';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 @NgModule({
   declarations: [
@@ -56,6 +57,7 @@ import { OrderOverviewEditComponent } from './components/order-overview-edit/ord
     CollectingShelfScannerModule,
     SharedModule,
     ScrollingModule,
+    PerfectScrollbarModule,
     CardModule,
     DropdownModule,
     SearchInputModule,

apps/sales/src/styles.scss

@@ -1,10 +1,9 @@
-:not(.scrollbar-visible)::-webkit-scrollbar {
+@import '~perfect-scrollbar/css/perfect-scrollbar.css';
+
+::-webkit-scrollbar {
   width: 0; // remove scrollbar space
   background: transparent; // optional: just make scrollbar invisible */
 }
-.scrollbar-visible {
-  -webkit-overflow-scrolling: touch;
-}
 
 body {
   font-family: 'Open Sans';

package-lock.json

@@ -4473,8 +4473,7 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4492,13 +4491,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4511,18 +4508,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4625,8 +4619,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4636,7 +4629,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4649,20 +4641,17 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -4679,7 +4668,6 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4752,8 +4740,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4763,7 +4750,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4839,8 +4825,7 @@
         },
         "safe-buffer": {
           "version": "5.1.2",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4870,7 +4855,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4888,7 +4872,6 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4927,13 +4910,11 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         }
       }
     },
@@ -7548,6 +7529,15 @@
         "opencollective-postinstall": "^2.0.2"
       }
     },
+    "ngx-perfect-scrollbar": {
+      "version": "7.2.1",
+      "resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/ngx-perfect-scrollbar/-/ngx-perfect-scrollbar-7.2.1.tgz",
+      "integrity": "sha1-csu7prx1tINvoDAHYNLWntQdJBw=",
+      "requires": {
+        "perfect-scrollbar": "^1.4.0",
+        "resize-observer-polyfill": "^1.5.0"
+      }
+    },
     "ngx-toggle-switch": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/ngx-toggle-switch/-/ngx-toggle-switch-2.0.5.tgz",
@@ -8407,6 +8397,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "perfect-scrollbar": {
+      "version": "1.5.0",
+      "resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/perfect-scrollbar/-/perfect-scrollbar-1.5.0.tgz",
+      "integrity": "sha1-gh0iTtj/YZkMI/JttjBIzcdba4M="
+    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -9206,6 +9201,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://pkgs.dev.azure.com/hugendubel/_packaging/hugendubel/npm/registry/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
+    },
     "resolve": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",

package.json

@@ -52,6 +52,7 @@
     "ng-circle-progress": "^1.4.0",
     "ng-connection-service": "^1.0.4",
     "ngx-infinite-scroll": "^7.2.0",
+    "ngx-perfect-scrollbar": "^7.2.1",
     "ngx-toggle-switch": "^2.0.5",
     "node-sass": "^4.12.0",
     "rxjs": "~6.4.0",