[HIMA-755] added polyfills to suport smooth scroll on iOS since iOS does not support smooth scrolling bu default, this was making creating tabs a little bit staggering

apps/sales/src/app/components/process-header/process-header.component.html

@@ -7,8 +7,9 @@
       <app-process-tab
         id="{{ process.id }}"
         style="display: inline-block;height: 100%;"
-        *ngFor="let process of processes"
+        *ngFor="let process of processes; let last = last"
         [module]="module"
+        [last]="last"
         [process]="process"
         [@add]="process.new"
       ></app-process-tab>

apps/sales/src/app/components/process-header/process-header.component.scss

@@ -19,6 +19,7 @@
 .process-grid-container {
   white-space: nowrap;
   padding-top: 13px;
+  padding-right: 25px;
   overflow-y: scroll;
   scroll-behavior: smooth;
   display: block;
@@ -56,6 +57,13 @@
   cursor: pointer;
 }
 
+.placeholder-tab {
+  width: 300px;
+  height: 42px;
+  display: inline-block;
+  height: 100%;
+}
+
 /*
   ##Device = Big Desktops
 */

apps/sales/src/app/components/process-header/process-header.component.ts

@@ -11,7 +11,6 @@ import { takeUntil, switchMap, filter, distinctUntilChanged } from 'rxjs/operato
 import { ProcessSelectors } from '../../core/store/selectors/process.selectors';
 import { WindowRef } from '../../core/services/window-ref.service';
 import { ModuleSwitcher } from '../../core/models/app-switcher.enum';
-import { readPatchedLView } from '@angular/core/src/render3/util';
 
 @Component({
   selector: 'app-process-header',
@@ -160,12 +159,12 @@ export class ProcessHeaderComponent implements OnInit, OnDestroy {
     if (selected) {
       const clientWidth = this.panel.nativeElement.clientWidth;
 
-      // Scrolls to new process
-      if (selected.id === this.selectedProcessId) {
-        this.panel.nativeElement.scrollTo({ left: selected.offsetLeft - this.offset, behavior: 'smooth' });
-      }
-
-      this.cdr.detectChanges();
+      setTimeout(() => {
+        if (selected.id === this.selectedProcessId) {
+          this.panel.nativeElement.scrollTo({ left: selected.offsetLeft - this.offset, behavior: 'smooth' });
+        }
+        this.cdr.detectChanges();
+      }, 100);
 
       const selecetedPos = selected.offsetLeft + selected.offsetWidth;
       const lastPos = lastProcess.offsetLeft + lastProcess.offsetWidth;

apps/sales/src/app/components/process-tab/process-tab.component.html

@@ -1,5 +1,5 @@
 <!--  Customer module process  -->
-<div class="grid-item" id="{{ process.id }}" *ngIf="module === 0">
+<div class="grid-item" id="{{ process.id }}" *ngIf="module === 0" [ngClass]="{ last: last }">
   <div class="grid-container" [ngClass]="{ 'selected-process': process.id === (currentProcessId$ | async) }">
     <div class="process-name-container pt-3" (click)="selectProcess(process)">
       <span class="process-name">{{ process.name }}</span>

apps/sales/src/app/components/process-tab/process-tab.component.scss

@@ -114,3 +114,7 @@
   padding-right: 30px;
   height: 100%;
 }
+
+.last {
+  padding-right: 0px;
+}

apps/sales/src/app/components/process-tab/process-tab.component.ts

@@ -20,7 +20,6 @@ import { trigger, transition, animate, style, keyframes } from '@angular/animati
 import { AppState } from '../../core/store/state/app.state';
 import { AppSetCurrentProcess } from '../../core/store/actions/app.actions';
 import { ProcessSelectors } from '../../core/store/selectors/process.selectors';
-import { ProcessState } from '../../core/store/state/process.state';
 import { ModuleSwitcher } from '../../core/models/app-switcher.enum';
 
 @Component({
@@ -49,6 +48,7 @@ export class ProcessTabComponent implements OnInit, OnDestroy, AfterViewInit {
   @Input() process: Process;
   @Input() processes: Array<Process>;
   @Input() module: ModuleSwitcher;
+  @Input() last = false;
   @Select(ProcessSelectors.getProcesses) procecesses$: Observable<Process[]>;
   @Select(SharedSelectors.getCart) cartData$: Observable<ProcessCart>;
   @Select(AppState.getCurrentProcessId) currentProcessId$: Observable<number>;

apps/sales/src/app/core/services/app.service.ts

@@ -13,6 +13,7 @@ import { Meta, MetaDefinition } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 import { HttpClient } from '@angular/common/http';
 import { isNullOrUndefined } from 'util';
+import smoothscroll from 'smoothscroll-polyfill';
 
 @Injectable({
   providedIn: 'root',
@@ -29,6 +30,8 @@ export class AppService implements OnDestroy {
   ) {}
 
   public appLoadInitialisations() {
+    // register smooth scroll polyfill
+    smoothscroll.polyfill();
     // // check for token in queryparams
     this.getQueryParams()
       .pipe(takeUntil(this.destroy$))

package-lock.json

@@ -9822,6 +9822,11 @@
       "integrity": "sha512-JDhEpTKzXusOqXZ0BUIdH+CjFdO/CR3tLlf5CN34IypI+xMmXW1uB16OOY8z3cICbJlDAVJzNbwBhNO0wt9OAw==",
       "dev": true
     },
+    "smoothscroll-polyfill": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/smoothscroll-polyfill/-/smoothscroll-polyfill-0.4.4.tgz",
+      "integrity": "sha512-TK5ZA9U5RqCwMpfoMq/l1mrH0JAR7y7KRvOBx0n2869aLxch+gT9GhN3yUfjiw+d/DiF1mKo14+hd62JyMmoBg=="
+    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",

package.json

@@ -44,6 +44,7 @@
     "rxjs": "~6.4.0",
     "scandit-sdk": "^4.1.1",
     "scandit-sdk-angular": "^2.0.0",
+    "smoothscroll-polyfill": "^0.4.4",
     "socket.io": "^2.2.0",
     "tslib": "^1.9.0",
     "uglify-js": "^3.4.9",