From c3a710f33fcc7b3a8fb6a3a8eb17d70febb73701 Mon Sep 17 00:00:00 2001
From: Vicky <vickymenashe@gmail.com>
Date: Sun, 28 Apr 2024 14:31:27 +0300
Subject: [PATCH 1/3] feat: overflow functionality

---
 apps/playground/src/app/app.component.html | 4 ++++
 apps/playground/src/app/app.component.scss | 2 +-
 apps/playground/src/app/app.component.ts   | 4 ++++
 libs/dialog/src/lib/dialog.component.scss  | 4 +++-
 libs/dialog/src/lib/types.ts               | 1 +
 5 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/playground/src/app/app.component.html b/apps/playground/src/app/app.component.html
index 20af94d..5f56254 100644
--- a/apps/playground/src/app/app.component.html
+++ b/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>
diff --git a/apps/playground/src/app/app.component.scss b/apps/playground/src/app/app.component.scss
index e79fe55..ba8a8cf 100644
--- a/apps/playground/src/app/app.component.scss
+++ b/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;
diff --git a/apps/playground/src/app/app.component.ts b/apps/playground/src/app/app.component.ts
index 214d0da..cc09eb8 100644
--- a/apps/playground/src/app/app.component.ts
+++ b/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({
diff --git a/libs/dialog/src/lib/dialog.component.scss b/libs/dialog/src/lib/dialog.component.scss
index b20eb1b..36feb4f 100644
--- a/libs/dialog/src/lib/dialog.component.scss
+++ b/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;
 }
diff --git a/libs/dialog/src/lib/types.ts b/libs/dialog/src/lib/types.ts
index f04af86..a4b5fa1 100644
--- a/libs/dialog/src/lib/types.ts
+++ b/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;

From 66c68ab3e142bd0f09ab1d64da6628e973bf7895 Mon Sep 17 00:00:00 2001
From: Vicky <vickymenashe@gmail.com>
Date: Mon, 29 Apr 2024 00:20:49 +0300
Subject: [PATCH 2/3] refactor: replace class with variable

---
 apps/playground/src/app/app.component.ts  | 4 ++--
 libs/dialog/src/lib/dialog.component.scss | 4 ++--
 libs/dialog/src/lib/dialog.component.ts   | 4 ++++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/playground/src/app/app.component.ts b/apps/playground/src/app/app.component.ts
index cc09eb8..21fb362 100644
--- a/apps/playground/src/app/app.component.ts
+++ b/apps/playground/src/app/app.component.ts
@@ -77,8 +77,8 @@ 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');
+    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);
 
diff --git a/libs/dialog/src/lib/dialog.component.scss b/libs/dialog/src/lib/dialog.component.scss
index 36feb4f..aadd18f 100644
--- a/libs/dialog/src/lib/dialog.component.scss
+++ b/libs/dialog/src/lib/dialog.component.scss
@@ -99,6 +99,6 @@
   }
 }
 
-body.ngneat-dialog-hidden:not(.overflow) {
-  overflow: hidden;
+body {
+  overflow: var(--dialog-overflow, hidden);
 }
diff --git a/libs/dialog/src/lib/dialog.component.ts b/libs/dialog/src/lib/dialog.component.ts
index c733e08..1e775a2 100644
--- a/libs/dialog/src/lib/dialog.component.ts
+++ b/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;
   }
 

From db8731be9478fe3cc86cf7fd56d6f8903bbf5b99 Mon Sep 17 00:00:00 2001
From: Vicky <vickymenashe@gmail.com>
Date: Mon, 29 Apr 2024 00:21:54 +0300
Subject: [PATCH 3/3] docs: update README to reflect recent changes in
 functionality

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index b737e35..1cb0fc0 100644
--- a/README.md
+++ b/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,