@arsedizioni/ars-utils 21.2.200 → 21.2.201

package/fesm2022/arsedizioni-ars-utils-clipper.ui.mjs

@@ -2837,10 +2837,16 @@ class ClipperPropertyBadgeComponent {
         this.closePopup();
         const popupWidth = 320;
         const fitsRight = event.clientX + popupWidth <= window.innerWidth;
-        const position = this.overlay.position().global().top(`${event.clientY}px`);
-        const positionStrategy = fitsRight ? position.left(`${event.clientX}px`) : position.centerHorizontally();
+        const buildPositionBelow = () => {
+            const s = this.overlay.position().global().top(`${event.clientY}px`);
+            return fitsRight ? s.left(`${event.clientX}px`) : s.centerHorizontally();
+        };
+        const buildPositionAbove = () => {
+            const s = this.overlay.position().global().bottom(`${window.innerHeight - event.clientY}px`);
+            return fitsRight ? s.left(`${event.clientX}px`) : s.centerHorizontally();
+        };
         const ref = this.overlay.create({
-            positionStrategy,
+            positionStrategy: buildPositionBelow(),
             hasBackdrop: true,
             backdropClass: 'cdk-overlay-transparent-backdrop',
             scrollStrategy: this.overlay.scrollStrategies.close(),
@@ -2850,6 +2856,15 @@ class ClipperPropertyBadgeComponent {
             this.closePopup(); });
         ref.backdropClick().pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.closePopup());
         ref.attach(new TemplatePortal(this.popupTpl(), this.viewContainerRef));
+        // After rendering, check if the popup overflows the bottom of the viewport and reposition upward
+        setTimeout(() => {
+            if (!this.overlayRef)
+                return;
+            const rect = ref.overlayElement.getBoundingClientRect();
+            if (rect.bottom > window.innerHeight) {
+                ref.updatePositionStrategy(buildPositionAbove());
+            }
+        });
         this.overlayRef = ref;
     }
     /**