feat: overflow functionality

Author: vicky-polatov

apps/playground/src/app/app.component.html

@@ -57,6 +57,10 @@ <h2>Configure your dialog</h2>
       <label>Close Button</label>
       <input type="checkbox" formControlName="closeButton" />
     </div>
+    <div>
+      <label>Overflow ❌</label>
+      <input type="checkbox" formControlName="overflow" />
+    </div>
     <ng-container formGroupName="enableClose">
       <div>
         <label>Escape to Close ❌</label>

apps/playground/src/app/app.component.scss

@@ -24,7 +24,7 @@ button {
 }
 
 form {
-  max-height: 260px;
+  max-height: 300px;
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;

apps/playground/src/app/app.component.ts

@@ -37,6 +37,7 @@ export class AppComponent {
     backdrop: [true],
     resizable: [false],
     draggable: [false],
+    overflow: [true],
     dragConstraint: ['none'],
     size: [''],
     windowClass: [''],
@@ -76,6 +77,9 @@ export class AppComponent {
     this.backDropClicked = false;
     this.cleanConfig = this.normalizeConfig(config);
 
+    if (this.cleanConfig.overflow) document.body.classList.add('overflow');
+    else document.body.classList.remove('overflow');
+
     const ref = this.dialog.open(compOrTemplate as any, this.cleanConfig);
 
     ref?.backdropClick$.subscribe({

libs/dialog/src/lib/dialog.component.scss

@@ -3,10 +3,12 @@
   flex-direction: column;
   overflow: hidden;
   position: relative;
+
   @keyframes dialog-open {
     0% {
       transform: translateX(50px);
     }
+
     100% {
       transform: none;
     }
@@ -97,6 +99,6 @@
   }
 }
 
-body.ngneat-dialog-hidden {
+body.ngneat-dialog-hidden:not(.overflow) {
   overflow: hidden;
 }

libs/dialog/src/lib/types.ts

@@ -32,6 +32,7 @@ export interface GlobalDialogConfig {
         backdrop: CloseStrategy;
       };
   resizable: boolean;
+  overflow: boolean;
   width: string | number;
   minWidth: string | number;
   maxWidth: string | number;