feature(theme-shared): add fadeIn animation

add show and hide outputs to modal

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)]),
+]);

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();
     }
   }