fix(theme-shared): modal animation and backdrop height

npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.html

@@ -1,30 +1,34 @@
-<ng-container *ngIf="visible">
+<div
-  <div id="modal-container" class="modal show {{ modalClass }}" tabindex="-1" role="dialog">
+  *ngIf="visible"
-    <div class="modal-backdrop" [@fade]="isModalOpen" (click)="close()"></div>
+  [@fade]="isModalOpen"
-    <div
+  id="modal-container"
-      id="abp-modal-dialog"
+  class="modal show {{ modalClass }}"
-      class="modal-dialog modal-{{ size }}"
+  tabindex="-1"
-      role="document"
+  role="dialog"
-      [class.modal-dialog-centered]="centered"
+>
-      [@dialog]="isModalOpen"
+  <div class="modal-backdrop" (click)="close()"></div>
-      #abpModalContent
+  <div
-    >
+    id="abp-modal-dialog"
-      <div id="abp-modal-content" class="modal-content">
+    class="modal-dialog modal-{{ size }}"
-        <div id="abp-modal-header" class="modal-header">
+    role="document"
-          <ng-container *ngTemplateOutlet="abpHeader"></ng-container>
+    [class.modal-dialog-centered]="centered"
-          ​
+    #abpModalContent
-          <button id="abp-modal-close-button" type="button" class="close" aria-label="Close" (click)="close()">
+  >
-            <span aria-hidden="true">&times;</span>
+    <div id="abp-modal-content" class="modal-content">
-          </button>
+      <div id="abp-modal-header" class="modal-header">
-        </div>
+        <ng-container *ngTemplateOutlet="abpHeader"></ng-container>
-        <div id="abp-modal-body" class="modal-body">
+        ​
-          <ng-container *ngTemplateOutlet="abpBody"></ng-container>
+        <button id="abp-modal-close-button" type="button" class="close" aria-label="Close" (click)="close()">
-        </div>
+          <span aria-hidden="true">&times;</span>
-        <div id="abp-modal-footer" class="modal-footer">
+        </button>
-          <ng-container *ngTemplateOutlet="abpFooter"></ng-container>
+      </div>
-        </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>
-    <ng-content></ng-content>
   </div>
-</ng-container>
+  <ng-content></ng-content>
+</div>

npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts

@@ -13,7 +13,7 @@ import {
 } from '@angular/core';
 import { fromEvent, Subject } from 'rxjs';
 import { debounceTime, filter, takeUntil } from 'rxjs/operators';
-import { dialogAnimation, fadeAnimation } from '../../animations/modal.animations';
+import { fadeAnimation } from '../../animations/modal.animations';
 import { Toaster } from '../../models/toaster';
 import { ConfirmationService } from '../../services/confirmation.service';
 import { ButtonComponent } from '../button/button.component';
@@ -23,7 +23,7 @@ export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 @Component({
   selector: 'abp-modal',
   templateUrl: './modal.component.html',
-  animations: [fadeAnimation, dialogAnimation],
+  animations: [fadeAnimation],
 })
 export class ModalComponent implements OnDestroy {
   @Input()