From 5b3137aca340ffab840c1bc338910b9150b86120 Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Mon, 16 Sep 2019 11:12:32 +0300
Subject: [PATCH] feature(theme-shared): add fadeIn animation add show and hide
 outputs to modal

---
 .../theme-shared/src/lib/animations/fade.animations.ts    | 6 ++++++
 .../src/lib/components/modal/modal.component.ts           | 8 ++++++++
 2 files changed, 14 insertions(+)

diff --git a/npm/ng-packs/packages/theme-shared/src/lib/animations/fade.animations.ts b/npm/ng-packs/packages/theme-shared/src/lib/animations/fade.animations.ts
index e03c768fbe..906e6fb526 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/animations/fade.animations.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/animations/fade.animations.ts
@@ -5,3 +5,9 @@ export const fade = trigger('fade', [
   transition(':enter', [style({ opacity: 0 }), animate(250)]),
   transition(':leave', animate(250, style({ opacity: 0 }))),
 ]);
+
+export const fadeIn = trigger('fadeIn', [
+  state('*', style({ opacity: 1 })),
+  transition('* => *', [style({ opacity: 0 }), animate(250)]),
+  transition(':enter', [style({ opacity: 0 }), animate(250)]),
+]);
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
index e2646b5128..e38ba270cb 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts
@@ -96,6 +96,12 @@ export class ModalComponent implements OnDestroy {
 
   @ViewChildren('abp-button') abpButtons;
 
+  @Output()
+  show = new EventEmitter();
+
+  @Output()
+  hide = new EventEmitter();
+
   _visible: boolean = false;
 
   _busy: boolean = false;
@@ -125,9 +131,11 @@ export class ModalComponent implements OnDestroy {
         .subscribe(_ => (this.closable = true));
 
       this.renderer.addClass(document.body, 'modal-open');
+      this.show.emit();
     } else {
       this.closable = false;
       this.renderer.removeClass(document.body, 'modal-open');
+      this.hide.emit();
     }
   }