- @if (header || closable) {
-
- }
-
-
+
+
+ @if (header || closable) {
+
+ }
+
+
+
-
-
+
+}
diff --git a/src/app/shared/components/dialog/light-bottomsheet.component.ts b/src/app/shared/components/dialog/light-bottomsheet.component.ts
index 38e2396..0546d4e 100644
--- a/src/app/shared/components/dialog/light-bottomsheet.component.ts
+++ b/src/app/shared/components/dialog/light-bottomsheet.component.ts
@@ -90,8 +90,8 @@ import { Button } from 'primeng/button';
'[attr.pfocustrap]': 'true',
'[attr.data-pc-name]': "'drawer'",
'[attr.data-pc-section]': "'root'",
- '[attr.aria-hidden]': '!visible',
- '[style.display]': 'visible ? "block" : "none"',
+ '[attr.aria-hidden]': '!rendered',
+ '[style.display]': 'rendered ? "block" : "none"',
'[style.--sheet-transition]': 'transitionOptions',
},
})
@@ -105,8 +105,11 @@ export class SharedLightBottomsheetComponent implements OnInit, OnDestroy, OnCha
@Input() style: Record
| undefined;
@Input() mobileDrawerHeight = '90vh';
@Input() transitionOptions = '130ms cubic-bezier(0.2, 0, 0, 1)';
+ @Input() closeUnmountDelay = 150;
@Output() onHide = new EventEmitter();
+ rendered = false;
+ private closeTimer: ReturnType | null = null;
private originalParent: Node | null = null;
private readonly defaultDrawerZIndex = 1102;
@@ -123,21 +126,27 @@ export class SharedLightBottomsheetComponent implements OnInit, OnDestroy, OnCha
const host = this.elementRef.nativeElement;
this.originalParent = host.parentNode;
this.renderer.appendChild(this.document.body, host);
+ this.rendered = this.visible;
this.syncZIndex();
this.toggleBodyScrollLock(this.visible);
}
ngOnChanges(changes: SimpleChanges) {
if (changes['visible'] && this.visible) {
+ this.clearCloseTimer();
+ this.rendered = true;
this.syncZIndex();
}
if (changes['visible']) {
-
this.toggleBodyScrollLock(this.visible);
+ if (!this.visible) {
+ this.scheduleUnmount();
+ }
}
}
ngOnDestroy() {
+ this.clearCloseTimer();
this.toggleBodyScrollLock(false);
this.removeDrawer();
}
@@ -154,9 +163,12 @@ export class SharedLightBottomsheetComponent implements OnInit, OnDestroy, OnCha
this.visibleChange.emit(nextValue);
this.toggleBodyScrollLock(nextValue);
if (nextValue) {
+ this.clearCloseTimer();
+ this.rendered = true;
this.syncZIndex();
}
if (!nextValue) {
+ this.scheduleUnmount();
this.onHide.emit();
}
}
@@ -203,4 +215,19 @@ export class SharedLightBottomsheetComponent implements OnInit, OnDestroy, OnCha
: this.defaultDrawerZIndex;
this.renderer.setStyle(host, 'z-index', `${maxDrawerZIndex + 1}`);
}
+
+ private scheduleUnmount() {
+ this.clearCloseTimer();
+ this.closeTimer = setTimeout(() => {
+ if (!this.visible) {
+ this.rendered = false;
+ }
+ }, this.closeUnmountDelay);
+ }
+
+ private clearCloseTimer() {
+ if (!this.closeTimer) return;
+ clearTimeout(this.closeTimer);
+ this.closeTimer = null;
+ }
}
diff --git a/src/app/shared/components/formFooterActions/form-footer-actions.component.html b/src/app/shared/components/formFooterActions/form-footer-actions.component.html
index 5f79c53..6eb241d 100644
--- a/src/app/shared/components/formFooterActions/form-footer-actions.component.html
+++ b/src/app/shared/components/formFooterActions/form-footer-actions.component.html
@@ -3,7 +3,7 @@