Merged in feature/HIMA-64-create-animation-add-tab (pull request #34)

[HIMA-64] - added tab animations

src/app/components/process-header/add.animation.ts

@@ -0,0 +1,30 @@
+import {
+  trigger,
+  transition,
+  stagger,
+  animate,
+  style,
+  query
+} from '@angular/animations';
+
+export const addAnimation = trigger('add', [
+  transition(':enter, * => 0, * => -1', []),
+  transition('* => *', [
+    // each time the binding value changes
+    query(':enter', [style({ opacity: 0, transform: 'translateX(200%)' })], {
+      optional: true
+    }),
+    query(
+      ':enter',
+      [
+        stagger(20, [
+          animate(
+            '0.3s ease-out',
+            style({ opacity: 1, transform: 'translateX(0%)' })
+          )
+        ])
+      ],
+      { optional: true }
+    )
+  ])
+]);

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

@@ -1,7 +1,8 @@
 <div class="grid-container pt-19">
   <div class="align-left pt-3">
-    <div class="process-grid-container ml-5">
+    <div class="process-grid-container ml-5" [@add]="processes">
       <app-process-tab
+        style="display: inline-block;"
         *ngFor="let process of processes"
         [process]="process"
         [processes]="processes"

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

@@ -6,31 +6,37 @@ import { getRandomPic } from 'src/app/core/utils/process.util';
 import { Store, Select } from '@ngxs/store';
 import { AddProcess } from 'src/app/core/store/actions/process.actions';
 import { ProcessState } from 'src/app/core/store/state/process.state';
+import { addAnimation } from './add.animation';
 
 @Component({
   selector: 'app-process-header',
   templateUrl: './process-header.component.html',
-  styleUrls: ['./process-header.component.scss']
+  styleUrls: ['./process-header.component.scss'],
+  animations: [addAnimation]
 })
 export class ProcessHeaderComponent implements OnInit {
-
   startProcessLabel = 'VORGANG STARTEN';
   @Select(ProcessState.getProcesses) process$: Observable<Process[]>;
   processes: Process[];
 
-  constructor(private store: Store) { }
+  constructor(private store: Store) {}
 
   addProcess() {
-    const itemNo = this.processes.length === 0 ? 1 : this.processes[this.processes.length - 1].id + 1;
+    const itemNo =
+      this.processes.length === 0
+        ? 1
+        : this.processes[this.processes.length - 1].id + 1;
     const newProcess = <Process>{
       id: itemNo,
       name: '# ' + itemNo,
       selected: this.processes.length === 0 ? true : false,
       icon: getRandomPic(),
-      breadcrumbs: <Breadcrumb[]>[{
-        name: 'Artikelsuche',
-        path: '/article-search'
-      }],
+      breadcrumbs: <Breadcrumb[]>[
+        {
+          name: 'Artikelsuche',
+          path: '/article-search'
+        }
+      ],
       currentRoute: 'article-search'
     };
 
@@ -39,9 +45,8 @@ export class ProcessHeaderComponent implements OnInit {
 
   ngOnInit() {
     this.process$.subscribe(
-      (data: any) => this.processes = data,
-      (err) => console.log(err)
+      (data: any) => (this.processes = data),
+      err => console.log(err)
     );
   }
-
 }