-
- x
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
`;
}
+ /** Show the drawer as a modal, in the top layer, with a backdrop. */
showModal(): void {
+ if (this.dialog?.open) {
+ return;
+ }
+
this.inert = false;
this.dialog?.showModal();
- // Disable scrolling while the dialog is open
+ // Disable scrolling while the drawer is open
document.documentElement.style.overflow = 'hidden';
}
- close(): void {
+ /** Show the drawer without a backdrop (non-modal). */
+ show(): void {
if (this.dialog?.open) {
- this.dialog?.close();
+ return;
+ }
+
+ this.inert = false;
+ this.dialog?.show();
+ }
+
+ /**
+ * Close the drawer.
+ * @param returnValue - Optional value to set as the dialog's return value.
+ */
+ close(returnValue?: string): void {
+ if (this.dialog?.open) {
+ this.dialog.close(returnValue);
}
}
#onCancel(event: Event): void {
if (this.disableClose) {
event.preventDefault();
+ return;
}
+
+ this.cancelEvent.emit();
}
- #onClick(event: PointerEvent & { target: HTMLElement }): void {
- if (event.target.matches('sl-button[sl-dialog-close]')) {
- this.dialog?.close(event.target.getAttribute('sl-dialog-close') || '');
- } else if (!this.disableClose && this.dialog) {
- const rect = this.dialog.getBoundingClientRect();
-
- // Check if the user clicked on the backdrop
- if (
- event.clientY < rect.top ||
- event.clientY > rect.bottom ||
- event.clientX < rect.left ||
- event.clientX > rect.right
- ) {
- // If so, close the dialog
- this.dialog.close();
- }
+ #onClick(event: PointerEvent): void {
+ const button = event.composedPath().find((el): el is Button => el instanceof Button);
+
+ if (button?.hasAttribute('sl-dialog-close')) {
+ this.close(button.getAttribute('sl-dialog-close') || undefined);
+ return;
+ }
+
+ if (this.disableClose || !this.dialog) {
+ return;
+ }
+
+ // Only react to clicks that originate from the dialog itself (the backdrop).
+ if (event.composedPath()[0] !== this.dialog) {
+ return;
+ }
+
+ const rect = this.dialog.getBoundingClientRect();
+
+ // Check if the user clicked on the backdrop
+ if (
+ event.clientY < rect.top ||
+ event.clientY > rect.bottom ||
+ event.clientX < rect.left ||
+ event.clientX > rect.right
+ ) {
+ event.preventDefault();
+ event.stopPropagation();
+
+ this.cancelEvent.emit();
+ this.close();
}
}
+ #onCloseClick(event: PointerEvent): void {
+ event.preventDefault();
+ event.stopPropagation();
+
+ this.close();
+ }
+
#onClose(): void {
// Reenable scrolling after the dialog has closed
document.documentElement.style.overflow = '';
this.inert = true;
+
+ this.closeEvent.emit();
}
+
}
diff --git a/yarn.lock b/yarn.lock
index 38ac649c49..27499ea540 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5829,6 +5829,8 @@ __metadata:
"@open-wc/scoped-elements": "npm:^3.0.6"
"@sl-design-system/button": "npm:^2.0.0"
"@sl-design-system/button-bar": "npm:^1.5.0"
+ "@sl-design-system/icon": "npm:^1.4.2"
+ "@sl-design-system/shared": "npm:^0.12.0"
lit: "npm:^3.3.2"
peerDependencies:
"@open-wc/scoped-elements": ^3.0.6
+ 
+
+