Updated tab animations

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

@@ -1,7 +1,7 @@
 import { trigger, transition, animate, style } from '@angular/animations';
 
 export const addAnimation = trigger('add', [
-  transition(':enter', [
+  transition('void => true', [
     style({ opacity: 0, transform: 'translateX(200%)' }),
     animate('0.3s ease-out', style({ opacity: 1, transform: 'translateX(0%)' }))
   ])

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

@@ -5,8 +5,7 @@
         style="display: inline-block;"
         *ngFor="let process of processes"
         [process]="process"
-        [processes]="processes"
-        [@add]="process"
+        [@add]="process.new"
       ></app-process-tab>
     </div>
   </div>

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

@@ -28,6 +28,7 @@ export class ProcessHeaderComponent implements OnInit {
         : this.processes[this.processes.length - 1].id + 1;
     const newProcess = <Process>{
       id: itemNo,
+      new: true,
       name: '# ' + itemNo,
       selected: this.processes.length === 0 ? true : false,
       icon: getRandomPic(),

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

@@ -2,7 +2,12 @@ import { Component, OnInit, Input } from '@angular/core';
 import { Process } from 'src/app/core/models/process.model';
 import { Router } from '@angular/router';
 import { Store } from '@ngxs/store';
-import { DeleteProcess, SelectProcess, PreventProductLoad, ChangeCurrentRoute } from '../../core/store/actions/process.actions';
+import {
+  DeleteProcess,
+  SelectProcess,
+  PreventProductLoad,
+  ChangeCurrentRoute
+} from '../../core/store/actions/process.actions';
 import { Cart } from '../../core/models/cart.model';
 import { AddBreadcrumb } from '../../core/store/actions/process.actions';
 import { Breadcrumb } from '../../core/models/breadcrumb.model';
@@ -13,15 +18,10 @@ import { Breadcrumb } from '../../core/models/breadcrumb.model';
   styleUrls: ['./process-tab.component.scss']
 })
 export class ProcessTabComponent implements OnInit {
-
   @Input() process: Process;
-  @Input() processes: Array<Process>;
   cartCount = 0;
 
-  constructor(
-    private store: Store,
-    private router: Router
-    ) { }
+  constructor(private store: Store, private router: Router) {}
 
   deleteProcess(process: Process) {
     this.store.dispatch(new DeleteProcess(process));
@@ -45,11 +45,10 @@ export class ProcessTabComponent implements OnInit {
     const newBread: Breadcrumb = {
       name: 'Warenkorb',
       path: 'cart'
-    }
-    
+    };
+
     this.store.dispatch(new AddBreadcrumb(newBread));
     this.store.dispatch(new ChangeCurrentRoute('cart'));
     this.router.navigate(['cart']);
   }
-
 }

src/app/core/models/process.model.ts

@@ -5,17 +5,18 @@ import { Cart } from './cart.model';
 import { ItemDTO } from 'cat-service';
 
 export interface Process {
-    id: number;
-    name: string;
-    selected: boolean;
-    icon: string;
-    currentRoute: string;
-    breadcrumbs: Breadcrumb[];
-    search: Search;
-    users: User[];
-    cart: Cart[];
-    itemsDTO: ItemDTO[];
-    selectedItem: ItemDTO;
-    preventLoading: boolean;
-    activeUser: User;
+  id: number;
+  name: string;
+  new: boolean;
+  selected: boolean;
+  icon: string;
+  currentRoute: string;
+  breadcrumbs: Breadcrumb[];
+  search: Search;
+  users: User[];
+  cart: Cart[];
+  itemsDTO: ItemDTO[];
+  selectedItem: ItemDTO;
+  preventLoading: boolean;
+  activeUser: User;
 }