Merge pull request #121 from vicky-polatov/feature/overflow-functionality

feat: overflow functionality

Author: NetanelBasal

README.md

@@ -281,6 +281,7 @@ bootstrapApplication(AppComponent, {
       backdrop: boolean,
       resizable: boolean,
       draggable: boolean,
+      overflow: boolean,
       draggableConstraint: none | bounce | constrain,
       sizes,
       size: sm | md | lg | fullScreen | string,

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.style.setProperty('--dialog-overflow', 'visible');
+    else document.body.style.setProperty('--dialog-overflow', 'hidden');
+
     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 {
-  overflow: hidden;
+body {
+  overflow: var(--dialog-overflow, hidden);
 }

libs/dialog/src/lib/dialog.component.ts

@@ -115,6 +115,10 @@ export class DialogComponent implements OnInit, OnDestroy {
       }
     }
 
+    if (this.config.overflow) {
+      document.body.style.setProperty('--dialog-overflow', 'visible');
+    }
+
     this.host.id = this.config.id;
   }
 

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;