From a12ccbf62d8098797bf826d6ea2bc0844e4d5c02 Mon Sep 17 00:00:00 2001
From: Marcelo Puebla <mpuebla@focasoftware.com>
Date: Tue, 28 Jan 2020 10:20:09 -0300
Subject: [PATCH] Change Animaciones de angular puestas en un archivo distinto

---
 src/app/modules/carrito/carrito.component.html     |  2 +-
 src/app/modules/carrito/carrito.component.ts       | 16 ++-------------
 .../seleccion-articulos.component.html             |  2 +-
 .../seleccion-articulos.component.ts               | 19 +++--------------
 src/app/utils/animations.ts                        | 24 ++++++++++++++++++++++
 5 files changed, 31 insertions(+), 32 deletions(-)
 create mode 100644 src/app/utils/animations.ts

diff --git a/src/app/modules/carrito/carrito.component.html b/src/app/modules/carrito/carrito.component.html
index ec0de42..8ef39e3 100644
--- a/src/app/modules/carrito/carrito.component.html
+++ b/src/app/modules/carrito/carrito.component.html
@@ -24,7 +24,7 @@
       <div
         class="col-12 col-xl-6 p-2 h-50 h-md-25 h-xl-40 text-center text-truncate carrito-articulo"
         *ngFor="let articulo of articuloService.carrito; let i = index;"
-        @EnterLeave>
+        @EnterLeaveX>
         <!-- ARTICULO -->
         <div class="h-100 border border-primary rounded-sm">
           <div class="row align-items-center mx-0 h-100">
diff --git a/src/app/modules/carrito/carrito.component.ts b/src/app/modules/carrito/carrito.component.ts
index dab9fd2..7d415e9 100644
--- a/src/app/modules/carrito/carrito.component.ts
+++ b/src/app/modules/carrito/carrito.component.ts
@@ -2,28 +2,16 @@ import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
 import { Location } from '@angular/common';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-import { IArticulo } from 'src/app/interfaces/IArticulo';
 import { Router } from '@angular/router';
 import { BsModalRef } from 'ngx-bootstrap/modal/public_api';
 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
+import { ANIMATIONS } from 'src/app/utils/animations';
 
 @Component({
   selector: 'app-carrito',
   templateUrl: './carrito.component.html',
   styleUrls: ['./carrito.component.scss'],
-  animations: [
-    trigger('EnterLeave', [
-      state('flyIn', style({ transform: 'translateX(0)' })),
-      transition(':enter', [
-        style({ transform: 'translateX(-100%)' }),
-        animate('1s ease-in')
-      ]),
-      transition(':leave', [
-        animate('1s ease-out', style({ transform: 'translateX(-100%)' }))
-      ])
-    ])
-  ]
+  animations: [ANIMATIONS.EnterLeaveX]
 })
 export class CarritoComponent implements OnInit, OnDestroy {
   urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
index 725df46..23bb3d7 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html
@@ -117,7 +117,7 @@
               <div
                 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
                 *ngFor="let articulo of articuloService.carrito; let i = index;"
-                @EnterLeave>
+                @EnterLeaveY>
                 <img
                   class="btn-effect icon-20 mr-2 position-absolute right-0"
                   src="assets/img/icono-cancelar-color.svg"
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
index 0283384..be0438d 100644
--- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
+++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
@@ -1,35 +1,23 @@
-import { Component, OnInit, OnDestroy, HostListener, ViewChild, ViewChildren, AfterViewInit } from '@angular/core';
+import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit } from '@angular/core';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { IArticulo } from 'src/app/interfaces/IArticulo';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
 import { ICategoria } from 'src/app/interfaces/ICategoria';
 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
-import { CategoriaService } from 'src/app/services/categoria/categoria.service';
 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
-import { trigger, state, style, transition, animate } from '@angular/animations';
 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
 import * as _ from 'lodash';
+import { ANIMATIONS } from 'src/app/utils/animations';
 
 @Component({
   selector: 'app-seleccion-articulos',
   templateUrl: './seleccion-articulos.component.html',
   styleUrls: ['./seleccion-articulos.component.scss'],
-  animations: [
-    trigger('EnterLeave', [
-      state('flyIn', style({ transform: 'translateY(0)' })),
-      transition(':enter', [
-        style({ transform: 'translateY(-100%)' }),
-        animate('0.5s ease-in')
-      ]),
-      transition(':leave', [
-        animate('0.5s ease-out', style({ transform: 'translateY(-100%)' }))
-      ])
-    ])
-  ]
+  animations: [ANIMATIONS.EnterLeaveY]
 })
 export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy {
   showSpinner = true;
@@ -46,7 +34,6 @@ export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDes
 
   constructor(
     public articuloService: ArticuloService,
-    private categoriaService: CategoriaService,
     private sinonimoService: SinonimoService,
     private modalService: BsModalService,
     private inactiveScreen: InactiveScreenService,
diff --git a/src/app/utils/animations.ts b/src/app/utils/animations.ts
new file mode 100644
index 0000000..8489990
--- /dev/null
+++ b/src/app/utils/animations.ts
@@ -0,0 +1,24 @@
+import { trigger, state, style, transition, animate } from '@angular/animations';
+
+export const ANIMATIONS = {
+  EnterLeaveY: trigger('EnterLeaveY', [
+    state('flyIn', style({ transform: 'translateY(0)' })),
+    transition(':enter', [
+      style({ transform: 'translateY(-100%)' }),
+      animate('0.5s ease-in')
+    ]),
+    transition(':leave', [
+      animate('0.5s ease-out', style({ transform: 'translateY(-100%)' }))
+    ])
+  ]),
+  EnterLeaveX: trigger('EnterLeaveX', [
+    state('flyIn', style({ transform: 'translateX(0)' })),
+    transition(':enter', [
+      style({ transform: 'translateX(-100%)' }),
+      animate('1s ease-in')
+    ]),
+    transition(':leave', [
+      animate('1s ease-out', style({ transform: 'translateX(-100%)' }))
+    ])
+  ])
+};
-- 
1.9.1