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;