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,
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 @@
Configure your dialog
+
+
+
+
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..21fb362 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.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({
diff --git a/libs/dialog/src/lib/dialog.component.scss b/libs/dialog/src/lib/dialog.component.scss
index b20eb1b..aadd18f 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 {
- 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;
}
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;