[HIMA-50] - Animate empfehlungen expand

src/app/modules/customer-search/pages/edit-billing-address/edit-billing-address.component.html

@@ -6,6 +6,10 @@
     <app-billing-address></app-billing-address>
   </div>
 </app-card>
-<app-card class="newsletter">
+<app-card
+  class="newsletter"
+  [@shrinkSecondary]="!expanded"
+  (click)="expanded && expand()"
+>
   <app-newsletter-signup></app-newsletter-signup>
 </app-card>

src/app/modules/customer-search/pages/edit-billing-address/edit-billing-address.component.ts

@@ -1,11 +1,19 @@
 import { Component, OnInit } from '@angular/core';
-import { shrinkTitleAnimation, shrinkMainAnimation } from './shrink.animation';
+import {
+  shrinkTitleAnimation,
+  shrinkMainAnimation,
+  shrinkSecondaryAnimation
+} from './shrink.animation';
 
 @Component({
   selector: 'app-edit-billing-address',
   templateUrl: 'edit-billing-address.component.html',
   styleUrls: ['edit-billing-address.component.scss'],
-  animations: [shrinkTitleAnimation, shrinkMainAnimation]
+  animations: [
+    shrinkTitleAnimation,
+    shrinkMainAnimation,
+    shrinkSecondaryAnimation
+  ]
 })
 export class EditBillingAddressComponent implements OnInit {
   expanded = true;

src/app/modules/customer-search/pages/edit-billing-address/shrink.animation.ts

@@ -47,7 +47,7 @@ export const shrinkMainAnimation = trigger('shrinkMain', [
       height: '*'
     }),
     animate(
-      '400ms ease-out',
+      '300ms ease-out',
       style({
         visibility: 'hidden',
         height: '0',
@@ -56,3 +56,31 @@ export const shrinkMainAnimation = trigger('shrinkMain', [
     )
   ])
 ]);
+
+export const shrinkSecondaryAnimation = trigger('shrinkSecondary', [
+  state(
+    'true',
+    style({
+      height: '*'
+    })
+  ),
+  state(
+    'false',
+    style({
+      visibility: 'visible',
+      height: '16px',
+      overflow: 'hidden'
+    })
+  ),
+  transition('false => true', [
+    style({
+      height: '0'
+    }),
+    animate(
+      '300ms ease-out',
+      style({
+        height: '*'
+      })
+    )
+  ])
+]);