From 093e62eb64c5446d13fd78ec68dd4e9d4ebfe684 Mon Sep 17 00:00:00 2001
From: TheDiaval <thediavall@gmail.com>
Date: Fri, 4 Oct 2019 09:43:05 +0300
Subject: [PATCH] fix(theme-shared): fix modal styles and animations

---
 .../src/lib/animations/fade.animations.ts     | 63 +++++++++----------
 .../lib/components/modal/modal.animations.ts  | 14 ++---
 .../lib/components/modal/modal.component.html | 44 +++++++------
 .../lib/components/modal/modal.component.ts   | 20 +++---
 .../theme-shared/src/lib/contants/styles.ts   | 18 +++++-
 5 files changed, 90 insertions(+), 69 deletions(-)

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 7eb513522d..3321974a77 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
@@ -1,79 +1,74 @@
 import { animate, animation, style } from '@angular/animations';
 
-export const fadeIn = animation(
-  [style({ opacity: '0', display: '{{ display }}' }), animate('{{ time}} {{ easing }}', style({ opacity: '1' }))],
-  { params: { time: '350ms', easing: 'ease', display: 'block' } }
-);
+export const fadeIn = animation([style({ opacity: '0' }), animate('{{ time}} {{ easing }}', style({ opacity: '1' }))], {
+  params: { time: '350ms', easing: 'ease' },
+});
 
 export const fadeOut = animation(
-  [
-    style({ opacity: '1' }),
-    animate('{{ time}} {{ easing }}', style({ opacity: '0' })),
-    style({ opacity: '0', display: 'none' })
-  ],
-  { params: { time: '350ms', easing: 'ease' } }
+  [style({ opacity: '1' }), animate('{{ time}} {{ easing }}', style({ opacity: '0' }))],
+  { params: { time: '350ms', easing: 'ease' } },
 );
 
 export const fadeInDown = animation(
   [
-    style({ opacity: '0', display: '{{ display }}', transform: '{{ transform }} translateY(-20px)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateY(0)' }))
+    style({ opacity: '0', transform: '{{ transform }} translateY(-20px)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateY(0)' })),
   ],
-  { params: { time: '350ms', easing: 'ease', display: 'block', transform: 'translate(-50%, -50%)' } }
+  { params: { time: '350ms', easing: 'ease', transform: '' } },
 );
 
 export const fadeInUp = animation(
   [
-    style({ opacity: '0', display: '{{ display }}', transform: '{{ transform }} translateY(20px)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateY(0)' }))
+    style({ opacity: '0', transform: '{{ transform }} translateY(20px)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateY(0)' })),
   ],
-  { params: { time: '350ms', easing: 'ease', display: 'block', transform: 'translate(-50%, -50%)' } }
+  { params: { time: '350ms', easing: 'ease', transform: '' } },
 );
 
 export const fadeInLeft = animation(
   [
-    style({ opacity: '0', display: '{{ display }}', transform: '{{ transform }} translateX(20px)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateX(0)' }))
+    style({ opacity: '0', transform: '{{ transform }} translateX(20px)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateX(0)' })),
   ],
-  { params: { time: '350ms', easing: 'ease', display: 'block', transform: 'translate(-50%, -50%)' } }
+  { params: { time: '350ms', easing: 'ease', transform: '' } },
 );
 
 export const fadeInRight = animation(
   [
-    style({ opacity: '0', display: '{{ display }}', transform: '{{ transform }} translateX(-20px)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateX(0)' }))
+    style({ opacity: '0', transform: '{{ transform }} translateX(-20px)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateX(0)' })),
   ],
-  { params: { time: '350ms', easing: 'ease', display: 'block', transform: 'translate(-50%, -50%)' } }
+  { params: { time: '350ms', easing: 'ease', transform: '' } },
 );
 
 export const fadeOutDown = animation(
   [
-    style({ opacity: '1', display: '{{ display }}', transform: '{{ transform }} translateY(0)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateY(20px)' }))
+    style({ opacity: '1', transform: '{{ transform }} translateY(0)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateY(20px)' })),
   ],
-  { params: { time: '350ms', easing: 'ease', display: 'block', transform: 'translate(-50%, -50%)' } }
+  { params: { time: '350ms', easing: 'ease', transform: '' } },
 );
 
 export const fadeOutUp = animation(
   [
-    style({ opacity: '1', display: '{{ display }}', transform: '{{ transform }} translateY(0)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateY(-20px)' }))
+    style({ opacity: '1', transform: '{{ transform }} translateY(0)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateY(-20px)' })),
   ],
-  { params: { time: '350ms', easing: 'ease', display: 'block', transform: 'translate(-50%, -50%)' } }
+  { params: { time: '350ms', easing: 'ease', transform: '' } },
 );
 
 export const fadeOutLeft = animation(
   [
-    style({ opacity: '1', display: '{{ display }}', transform: '{{ transform }} translateX(0)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateX(20px)' }))
+    style({ opacity: '1', transform: '{{ transform }} translateX(0)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateX(20px)' })),
   ],
-  { params: { time: '350ms', easing: 'ease', display: 'block', transform: 'translate(-50%, -50%)' } }
+  { params: { time: '350ms', easing: 'ease', transform: '' } },
 );
 
 export const fadeOutRight = animation(
   [
-    style({ opacity: '1', display: '{{ display }}', transform: '{{ transform }} translateX(0)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateX(-20px)' }))
+    style({ opacity: '1', transform: '{{ transform }} translateX(0)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateX(-20px)' })),
   ],
-  { params: { time: '350ms', easing: 'ease', display: 'block', transform: 'translate(-50%, -50%)' } }
+  { params: { time: '350ms', easing: 'ease', transform: '' } },
 );
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.animations.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.animations.ts
index c686bec552..22513b0c6f 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.animations.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.animations.ts
@@ -1,14 +1,12 @@
-import { trigger, state, style, transition, useAnimation } from '@angular/animations';
-import { fadeInDown, fadeOut, fadeIn } from '../../animations';
+import { transition, trigger, useAnimation } from '@angular/animations';
+import { fadeIn, fadeInDown, fadeOut } from '../../animations/fade.animations';
 
 export const backdropAnimation = trigger('backdrop', [
-  state('void', style({ opacity: '0' })),
-  state('*', style({ opacity: '1' })),
-  transition('void => *', useAnimation(fadeIn)),
-  transition('* => void', useAnimation(fadeOut))
+  transition(':enter', useAnimation(fadeIn)),
+  transition(':leave', useAnimation(fadeOut)),
 ]);
 
 export const dialogAnimation = trigger('dialog', [
-  transition('void => *', useAnimation(fadeInDown)),
-  transition('* => void', useAnimation(fadeOut))
+  transition(':enter', useAnimation(fadeInDown)),
+  transition(':leave', useAnimation(fadeOut)),
 ]);
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
index c6eb6bf839..96a43f4eff 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html
@@ -1,21 +1,29 @@
-<div class="modal {{ modalClass }}" tabindex="-1" role="dialog" *ngIf="visible">
-  <div class="modal-backdrop" [@backdrop]="visible" (click)="close()"></div>
-  <div id="abp-modal-dialog" class="modal-dialog modal-{{ size }}" role="document" [@dialog]="visible" #abpModalContent>
-    <div id="abp-modal-content" class="modal-content">
-      <div id="abp-modal-header" class="modal-header">
-        <ng-container *ngTemplateOutlet="abpHeader"></ng-container>
-
-        <button id="abp-modal-close-button" type="button" class="close" aria-label="Close" (click)="close()">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div id="abp-modal-body" class="modal-body">
-        <ng-container *ngTemplateOutlet="abpBody"></ng-container>
-      </div>
-      <div id="abp-modal-footer" class="modal-footer">
-        <ng-container *ngTemplateOutlet="abpFooter"></ng-container>
+<ng-container *ngIf="visible">
+  <div class="modal show {{ modalClass }}" tabindex="-1" role="dialog">
+    <div class="modal-backdrop" [@backdrop]="isModalOpen" (click)="close()"></div>
+    <div
+      id="abp-modal-dialog"
+      class="modal-dialog modal-{{ size }}"
+      role="document"
+      [@dialog]="isModalOpen"
+      #abpModalContent
+    >
+      <div id="abp-modal-content" class="modal-content">
+        <div id="abp-modal-header" class="modal-header">
+          <ng-container *ngTemplateOutlet="abpHeader"></ng-container>
+          ​
+          <button id="abp-modal-close-button" type="button" class="close" aria-label="Close" (click)="close()">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div id="abp-modal-body" class="modal-body">
+          <ng-container *ngTemplateOutlet="abpBody"></ng-container>
+        </div>
+        <div id="abp-modal-footer" class="modal-footer">
+          <ng-container *ngTemplateOutlet="abpFooter"></ng-container>
+        </div>
       </div>
     </div>
+    <ng-content></ng-content>
   </div>
-  <ng-content></ng-content>
-</div>
+</ng-container>
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 014b8cc58c..f59ed25ddf 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
@@ -9,12 +9,12 @@ import {
   Renderer2,
   TemplateRef,
   ViewChild,
-  ViewChildren
+  ViewChildren,
 } from '@angular/core';
 import { fromEvent, Subject } from 'rxjs';
 import { debounceTime, filter, takeUntil } from 'rxjs/operators';
 import { Toaster } from '../../models/toaster';
-import { ConfirmationService } from '../../services';
+import { ConfirmationService } from '../../services/confirmation.service';
 import { ButtonComponent } from '../button/button.component';
 import { backdropAnimation, dialogAnimation } from './modal.animations';
 
@@ -23,7 +23,7 @@ export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 @Component({
   selector: 'abp-modal',
   templateUrl: './modal.component.html',
-  animations: [backdropAnimation, dialogAnimation]
+  animations: [backdropAnimation, dialogAnimation],
 })
 export class ModalComponent implements OnDestroy {
   @Input()
@@ -32,7 +32,11 @@ export class ModalComponent implements OnDestroy {
   }
   set visible(value: boolean) {
     if (typeof value !== 'boolean') return;
+
+    this.isModalOpen = value;
     this._visible = value;
+    this.visibleChange.emit(value);
+
     if (value) {
       this.listen();
       this.renderer.addClass(document.body, 'modal-open');
@@ -89,6 +93,8 @@ export class ModalComponent implements OnDestroy {
 
   _busy = false;
 
+  isModalOpen = false;
+
   isConfirmationOpen = false;
 
   destroy$ = new Subject<void>();
@@ -103,7 +109,7 @@ export class ModalComponent implements OnDestroy {
     if (this.busy) return;
 
     const nodes = getFlatNodes(
-      (this.modalContent.nativeElement.querySelector('#abp-modal-body') as HTMLElement).childNodes
+      (this.modalContent.nativeElement.querySelector('#abp-modal-body') as HTMLElement).childNodes,
     );
 
     if (hasNgDirty(nodes)) {
@@ -128,7 +134,7 @@ export class ModalComponent implements OnDestroy {
       .pipe(
         takeUntil(this.destroy$),
         debounceTime(150),
-        filter((key: KeyboardEvent) => key && key.code === 'Escape')
+        filter((key: KeyboardEvent) => key && key.code === 'Escape'),
       )
       .subscribe(_ => {
         this.close();
@@ -139,7 +145,7 @@ export class ModalComponent implements OnDestroy {
       fromEvent(this.abpClose.nativeElement, 'click')
         .pipe(
           takeUntil(this.destroy$),
-          filter(() => !!this.modalContent)
+          filter(() => !!this.modalContent),
         )
         .subscribe(() => this.close());
     }, 0);
@@ -151,7 +157,7 @@ export class ModalComponent implements OnDestroy {
 function getFlatNodes(nodes: NodeList): HTMLElement[] {
   return Array.from(nodes).reduce(
     (acc, val) => [...acc, ...(val.childNodes && val.childNodes.length ? getFlatNodes(val.childNodes) : [val])],
-    []
+    [],
   );
 }
 
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts b/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts
index 9e9203cff3..c7fa014373 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts
@@ -28,8 +28,22 @@ export default `
   min-width: 215px;
 }
 
-.modal {
- background-color: rgba(0, 0, 0, .6);
+.modal.show {
+  display: block !important;
+}
+
+.modal-backdrop {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  background-color: rgba(0, 0, 0, .6) !important;
+  z-index: 1040 !important;
+}
+
+.modal-dialog {
+  z-index: 1050 !important;
 }
 
 .abp-ellipsis-inline {