Update dialog.service.ts

serionist · Jan 16, 2025 · 2831abf · 2831abf
1 parent 3a0a25c
commit 2831abf
Showing 1 changed file with 33 additions and 17 deletions.
diff --git a/projects/component-library/src/lib/dialogservice/dialog.service.ts b/projects/component-library/src/lib/dialogservice/dialog.service.ts
@@ -376,24 +376,40 @@ export class DialogService {
     }
 
 
-    private manageDialogPosition(
-        dialogElement: HTMLElement,
-        args: IDialogPositionAndSizeArgs
-    ): Subscription | null {
-
-       // Temporarily position the dialog offscreen to get its dimensions
-       dialogElement.style.top = '-9999px';
-       dialogElement.style.left = '-9999px';
-        setTimeout(() => {
-            DialogService.calculateAndSetPosition(dialogElement, args);
-        }, 10);
+   private manageDialogPosition(
+    dialogElement: HTMLElement,
+    args: IDialogPositionAndSizeArgs
+): Subscription | null {
+    // Temporarily position the dialog offscreen to get its dimensions
+    dialogElement.style.top = '-9999px';
+    dialogElement.style.left = '-9999px';
+
+    setTimeout(() => {
+        DialogService.calculateAndSetPosition(dialogElement, args);
+    }, 10);
+
+    let resizeSubscription: Subscription | null = null;
+
+    // Handle window resize event
+    resizeSubscription = fromEvent(window, 'resize').subscribe(() => {
+        DialogService.calculateAndSetPosition(dialogElement, args);
+    });
+
+    // Monitor changes to the size of the dialog
+    const resizeObserver = new ResizeObserver(() => {
+        DialogService.calculateAndSetPosition(dialogElement, args);
+    });
+
+    // Start observing the dialog element
+    resizeObserver.observe(dialogElement);
+
+    // Return a subscription-like object that also disconnects the observer
+    return new Subscription(() => {
+        resizeObserver.disconnect();
+        resizeSubscription?.unsubscribe();
+    });
+}
 
-        let resizeSubscription: Subscription | null = null;
-        resizeSubscription = fromEvent(window, 'resize').subscribe(() => {
-            DialogService.calculateAndSetPosition(dialogElement, args);
-        });
-        return resizeSubscription;
-    }
     private static calculateAndSetPosition(dialogElement: HTMLElement, args: IDialogPositionAndSizeArgs) {
 
         if (args.maxWidth)  {