@shival99/z-ui 2.2.6 → 2.3.1

package/fesm2022/shival99-z-ui-components-z-popover.mjs

@@ -1,9 +1,8 @@
-import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
 import { NgTemplateOutlet, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
 import { signal, computed, ChangeDetectionStrategy, Component, inject, Renderer2, DestroyRef, PLATFORM_ID, viewChild, output, input, ElementRef, Directive } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Z_OVERLAY_FALLBACK_ORDER, ZOverlayService, startZOverlayAutoUpdate, computeZOverlayPlacement } from '@shival99/z-ui/components/z-overlay';
 import { ZOverlayContainerService, ZOverlayZIndexService } from '@shival99/z-ui/services';
 import { zMergeClasses, zIsMobileViewport, zTransform } from '@shival99/z-ui/utils';
 import { Subject, switchMap, of, timer, map, filter } from 'rxjs';
@@ -196,85 +195,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                 }]
         }] });
 
-const Z_POPOVER_MOBILE_VIEWPORT_MARGIN = 10;
 function isMobilePopoverViewport() {
     return zIsMobileViewport();
 }
-function getPopoverOverlaySize(widthConfig = {}) {
-    return widthConfig;
-}
-function getPopoverRenderPosition(position, _mobile = isMobilePopoverViewport()) {
-    return position;
-}
-function getMobilePopoverFallbackPositions(position, offset) {
-    return getPopoverFallbackPositions(position, offset).map(pos => ({
-        ...pos,
-        offsetX: pos.offsetX ?? 0,
-        offsetY: pos.offsetY ?? 0,
-    }));
-}
-function clampPopoverPosition(value, min, max) {
-    return Math.min(Math.max(value, min), max);
-}
-function getAlignedX(position, triggerRect, overlayRect) {
-    if (position === 'left' || position.startsWith('left-')) {
-        return triggerRect.left - overlayRect.width;
-    }
-    if (position === 'right' || position.startsWith('right-')) {
-        return triggerRect.right;
-    }
-    if (position.endsWith('-right')) {
-        return triggerRect.right - overlayRect.width;
-    }
-    if (position === 'top' || position === 'bottom') {
-        return triggerRect.left + triggerRect.width / 2 - overlayRect.width / 2;
-    }
-    return triggerRect.left;
-}
-function getAlignedY(position, triggerRect, overlayRect) {
-    if (position === 'top' || position.startsWith('top-')) {
-        return triggerRect.top - overlayRect.height;
-    }
-    if (position === 'bottom' || position.startsWith('bottom-')) {
-        return triggerRect.bottom;
-    }
-    if (position.endsWith('-bottom')) {
-        return triggerRect.bottom - overlayRect.height;
-    }
-    if (position === 'left' || position === 'right') {
-        return triggerRect.top + triggerRect.height / 2 - overlayRect.height / 2;
-    }
-    return triggerRect.top;
-}
-function getMobilePopoverPaneStyles(config) {
-    const { position, triggerRect, overlayRect, offset, viewportWidth } = config;
-    const viewportMargin = config.viewportMargin ?? Z_POPOVER_MOBILE_VIEWPORT_MARGIN;
-    const maxLeft = Math.max(viewportMargin, viewportWidth - overlayRect.width - viewportMargin);
-    let left = getAlignedX(position, triggerRect, overlayRect);
-    let top = getAlignedY(position, triggerRect, overlayRect);
-    if (position === 'top' || position.startsWith('top-')) {
-        top -= offset;
-    }
-    if (position === 'bottom' || position.startsWith('bottom-')) {
-        top += offset;
-    }
-    if (position === 'left' || position.startsWith('left-')) {
-        left -= offset;
-    }
-    if (position === 'right' || position.startsWith('right-')) {
-        left += offset;
-    }
-    left = clampPopoverPosition(left, viewportMargin, maxLeft);
-    return {
-        top: `${top}px`,
-        left: `${left}px`,
-        right: '',
-        bottom: '',
-        transform: 'none',
-    };
-}
-function getPopoverPushEnabled(_mobile = isMobilePopoverViewport()) {
-    return false;
+/** Danh sách fallback (không gồm vị trí chính — Floating UI tự thử vị trí chính trước). */
+function getPopoverFallbackPlacements(position) {
+    return Z_OVERLAY_FALLBACK_ORDER[position];
 }
 function isPopoverTriggerVisibleInViewport(config) {
     const { triggerRect, viewportWidth, viewportHeight } = config;
@@ -286,172 +212,12 @@ function isPopoverTriggerVisibleInViewport(config) {
         triggerRect.right > 0 &&
         triggerRect.left < viewportWidth);
 }
-function createPopoverPosition(position, offset) {
-    const positions = {
-        top: {
-            originX: 'center',
-            originY: 'top',
-            overlayX: 'center',
-            overlayY: 'bottom',
-            offsetY: -offset,
-        },
-        'top-left': {
-            originX: 'start',
-            originY: 'top',
-            overlayX: 'start',
-            overlayY: 'bottom',
-            offsetY: -offset,
-        },
-        'top-right': {
-            originX: 'end',
-            originY: 'top',
-            overlayX: 'end',
-            overlayY: 'bottom',
-            offsetY: -offset,
-        },
-        bottom: {
-            originX: 'center',
-            originY: 'bottom',
-            overlayX: 'center',
-            overlayY: 'top',
-            offsetY: offset,
-        },
-        'bottom-left': {
-            originX: 'start',
-            originY: 'bottom',
-            overlayX: 'start',
-            overlayY: 'top',
-            offsetY: offset,
-        },
-        'bottom-right': {
-            originX: 'end',
-            originY: 'bottom',
-            overlayX: 'end',
-            overlayY: 'top',
-            offsetY: offset,
-        },
-        left: {
-            originX: 'start',
-            originY: 'center',
-            overlayX: 'end',
-            overlayY: 'center',
-            offsetX: -offset,
-        },
-        'left-top': {
-            originX: 'start',
-            originY: 'top',
-            overlayX: 'end',
-            overlayY: 'top',
-            offsetX: -offset,
-        },
-        'left-bottom': {
-            originX: 'start',
-            originY: 'bottom',
-            overlayX: 'end',
-            overlayY: 'bottom',
-            offsetX: -offset,
-        },
-        right: {
-            originX: 'end',
-            originY: 'center',
-            overlayX: 'start',
-            overlayY: 'center',
-            offsetX: offset,
-        },
-        'right-top': {
-            originX: 'end',
-            originY: 'top',
-            overlayX: 'start',
-            overlayY: 'top',
-            offsetX: offset,
-        },
-        'right-bottom': {
-            originX: 'end',
-            originY: 'bottom',
-            overlayX: 'start',
-            overlayY: 'bottom',
-            offsetX: offset,
-        },
-    };
-    return positions[position];
-}
-function getPopoverFallbackPositions(position, offset) {
-    const fallbackOrder = {
-        top: ['top', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right'],
-        'top-left': ['top-left', 'bottom-left', 'top', 'bottom', 'top-right', 'bottom-right'],
-        'top-right': ['top-right', 'bottom-right', 'top', 'bottom', 'top-left', 'bottom-left'],
-        bottom: ['bottom', 'top', 'bottom-left', 'bottom-right', 'top-left', 'top-right'],
-        'bottom-left': ['bottom-left', 'top-left', 'bottom', 'top', 'bottom-right', 'top-right'],
-        'bottom-right': ['bottom-right', 'top-right', 'bottom', 'top', 'bottom-left', 'top-left'],
-        left: ['left', 'right', 'left-top', 'left-bottom', 'right-top', 'right-bottom'],
-        'left-top': ['left-top', 'right-top', 'left', 'right', 'left-bottom', 'right-bottom'],
-        'left-bottom': ['left-bottom', 'right-bottom', 'left', 'right', 'left-top', 'right-top'],
-        right: ['right', 'left', 'right-top', 'right-bottom', 'left-top', 'left-bottom'],
-        'right-top': ['right-top', 'left-top', 'right', 'left', 'right-bottom', 'left-bottom'],
-        'right-bottom': ['right-bottom', 'left-bottom', 'right', 'left', 'right-top', 'left-top'],
-    };
-    const orderedPositions = fallbackOrder[position] ?? [position];
-    return orderedPositions.map(pos => createPopoverPosition(pos, offset));
-}
-function createPopoverPositionStrategy(overlayPositionBuilder, origin, position, offset) {
-    const mobile = isMobilePopoverViewport();
-    const positions = mobile
-        ? getMobilePopoverFallbackPositions(position, offset)
-        : getPopoverFallbackPositions(position, offset);
-    return overlayPositionBuilder
-        .flexibleConnectedTo(origin)
-        .withPositions(positions)
-        .withFlexibleDimensions(false)
-        .withPush(getPopoverPushEnabled(mobile))
-        .withViewportMargin(10);
-}
-function getActualPopoverPosition(change) {
-    const { originX, originY, overlayX, overlayY } = change.connectionPair;
-    if (overlayY === 'bottom' && originY === 'top') {
-        if (originX === 'start' && overlayX === 'start') {
-            return 'top-left';
-        }
-        if (originX === 'end' && overlayX === 'end') {
-            return 'top-right';
-        }
-        return 'top';
-    }
-    if (overlayY === 'top' && originY === 'bottom') {
-        if (originX === 'start' && overlayX === 'start') {
-            return 'bottom-left';
-        }
-        if (originX === 'end' && overlayX === 'end') {
-            return 'bottom-right';
-        }
-        return 'bottom';
-    }
-    if (overlayX === 'end' && originX === 'start') {
-        if (originY === 'top' && overlayY === 'top') {
-            return 'left-top';
-        }
-        if (originY === 'bottom' && overlayY === 'bottom') {
-            return 'left-bottom';
-        }
-        return 'left';
-    }
-    if (overlayX === 'start' && originX === 'end') {
-        if (originY === 'top' && overlayY === 'top') {
-            return 'right-top';
-        }
-        if (originY === 'bottom' && overlayY === 'bottom') {
-            return 'right-bottom';
-        }
-        return 'right';
-    }
-    return 'top';
-}
 
 const Z_POPOVER_ANIMATION_DURATION = 200;
 
 class ZPopoverComponent {
     static _openPopovers = new Set();
-    _overlay = inject(Overlay);
-    _overlayPositionBuilder = inject(OverlayPositionBuilder);
+    _overlayService = inject(ZOverlayService);
     _renderer = inject(Renderer2);
     _destroyRef = inject(DestroyRef);
     _platformId = inject(PLATFORM_ID);
@@ -489,7 +255,7 @@ class ZPopoverComponent {
     _componentRef = null;
     _delaySubject = new Subject();
     _listenerCleanups = [];
-    _positionSubscription = null;
+    _autoUpdateCleanup = null;
     _scrollSubscription = null;
     _viewportResizeSubscription = null;
     _resizeObserver = null;
@@ -570,28 +336,13 @@ class ZPopoverComponent {
         this._schedulePositionUpdate();
     }
     _createOverlay() {
-        const positionStrategy = createPopoverPositionStrategy(this._overlayPositionBuilder, this._trigger(), this.zPosition(), this.zOffset());
-        const overlayRef = this._overlay.create({
-            positionStrategy,
-            scrollStrategy: this._createScrollStrategy(),
-            hasBackdrop: false,
-            ...getPopoverOverlaySize(),
-        });
+        const overlayRef = this._overlayService.createAnchored();
         this._zIndexService.applyToOverlay(overlayRef);
         return overlayRef;
     }
-    _createScrollStrategy() {
-        if (this.zScrollClose()) {
-            return this._overlay.scrollStrategies.close();
-        }
-        if (isMobilePopoverViewport() && (this.zSticky() || this.zKeyboardSafe())) {
-            return this._overlay.scrollStrategies.noop();
-        }
-        return this._overlay.scrollStrategies.reposition({ scrollThrottle: 10, autoClose: false });
-    }
     _disposeOverlay() {
-        this._positionSubscription?.unsubscribe();
-        this._positionSubscription = null;
+        this._autoUpdateCleanup?.();
+        this._autoUpdateCleanup = null;
         this._scrollSubscription?.unsubscribe();
         this._scrollSubscription = null;
         this._viewportResizeSubscription?.unsubscribe();
@@ -611,7 +362,7 @@ class ZPopoverComponent {
             .pipe(switchMap(config => (config.delay <= 0 ? of(config) : timer(config.delay).pipe(map(() => config)))), takeUntilDestroyed(this._destroyRef))
             .subscribe(config => {
             if (config.show) {
-                this._showPopover();
+                void this._showPopover();
                 return;
             }
             this._hidePopover();
@@ -687,7 +438,7 @@ class ZPopoverComponent {
                     ticking = false;
                     return;
                 }
-                this._updatePositionNow();
+                void this._updatePositionNow();
                 ticking = false;
             });
         };
@@ -722,7 +473,7 @@ class ZPopoverComponent {
             },
         };
     }
-    _showPopover() {
+    async _showPopover() {
         const content = this.zContent();
         if (!content || this._componentRef) {
             return;
@@ -732,30 +483,24 @@ class ZPopoverComponent {
             this._setupOutsideClick();
         }
         this._setupScrollClose();
-        const positionStrategy = createPopoverPositionStrategy(this._overlayPositionBuilder, this._trigger(), this.zPosition(), this.zOffset());
-        this._overlayRef.updatePositionStrategy(positionStrategy);
-        this._overlayRef.updateSize(getPopoverOverlaySize());
-        const portal = new ComponentPortal(ZPopoverContentComponent);
-        this._componentRef = this._overlayRef.attach(portal);
-        const renderPosition = getPopoverRenderPosition(this.zPosition());
+        this._componentRef = this._overlayRef.attach(ZPopoverContentComponent);
         this._componentRef.instance.setProps({
             content,
-            position: renderPosition,
+            position: this.zPosition(),
             customClass: this.zClass(),
             onClose: () => this.hide(),
             showArrow: this.zShowArrow(),
         });
-        this._positionSubscription = positionStrategy.positionChanges.subscribe(change => {
-            const actualPosition = getActualPopoverPosition(change);
-            this._componentRef?.instance.position.set(actualPosition);
-            this._applyMobilePopoverPosition(actualPosition);
-        });
+        await this._applyPosition();
+        if (!this._overlayRef || !this._componentRef) {
+            return; // đã bị dispose (hide/destroy) trong lúc chờ computePosition
+        }
+        this._autoUpdateCleanup = startZOverlayAutoUpdate(this._trigger().nativeElement, this._overlayRef.overlayElement, () => void this._applyPosition(), { ancestorScroll: false });
         if (this.zTrigger() === 'hover') {
             this._setupPopoverHover();
         }
         this._setupResizeObserver();
         this._setupViewportResizeReposition();
-        this._updatePositionAfterContentSettles();
         this._isVisible.set(true);
         ZPopoverComponent._openPopovers.add(this);
         this.zShow.emit();
@@ -792,16 +537,13 @@ class ZPopoverComponent {
             this._resizeObserver.observe(wrapper);
         }
     }
-    _updatePositionAfterContentSettles() {
-        this._schedulePositionUpdate();
-    }
     _schedulePositionUpdate(force = false) {
         if (this._positionFrame !== null) {
             return;
         }
         this._positionFrame = requestAnimationFrame(() => {
             this._positionFrame = null;
-            this._updatePositionNow(force);
+            void this._updatePositionNow(force);
         });
     }
     _scheduleSettledPositionUpdate() {
@@ -821,7 +563,7 @@ class ZPopoverComponent {
         cancelAnimationFrame(this._positionFrame);
         this._positionFrame = null;
     }
-    _updatePositionNow(force = false) {
+    async _updatePositionNow(force = false) {
         if (!this._overlayRef?.hasAttached()) {
             return;
         }
@@ -831,8 +573,30 @@ class ZPopoverComponent {
         if (!force && this._shouldSkipMobileKeyboardUpdate()) {
             return;
         }
-        this._overlayRef.updatePosition();
-        this._applyMobilePopoverPosition(this._componentRef?.instance.position() ?? this.zPosition());
+        await this._applyPosition();
+    }
+    async _applyPosition() {
+        if (!this._overlayRef || !this._componentRef) {
+            return;
+        }
+        const anchorElement = this._trigger().nativeElement;
+        const floatingElement = this._overlayRef.overlayElement;
+        const position = this.zPosition();
+        const result = await computeZOverlayPlacement({
+            reference: anchorElement,
+            floating: floatingElement,
+            placement: position,
+            fallbackPlacements: getPopoverFallbackPlacements(position),
+            offset: this.zOffset(),
+            push: true,
+            viewportPadding: 10,
+        });
+        if (!this._componentRef) {
+            return;
+        }
+        floatingElement.style.left = `${result.x}px`;
+        floatingElement.style.top = `${result.y}px`;
+        this._componentRef.instance.position.set(result.placement);
     }
     _markViewportSettling() {
         this._viewportSettlingUntil = Date.now() + 260;
@@ -869,22 +633,6 @@ class ZPopoverComponent {
         }
         this._viewportResizeTimeouts = [];
     }
-    _applyMobilePopoverPosition(position) {
-        if (!isMobilePopoverViewport() || !this._overlayRef?.hasAttached()) {
-            return;
-        }
-        const { overlayElement } = this._overlayRef;
-        const { visualViewport } = window;
-        const styles = getMobilePopoverPaneStyles({
-            position,
-            triggerRect: this._trigger().nativeElement.getBoundingClientRect(),
-            overlayRect: overlayElement.getBoundingClientRect(),
-            offset: this.zOffset(),
-            viewportWidth: visualViewport?.width ?? window.innerWidth,
-            viewportHeight: visualViewport?.height ?? window.innerHeight,
-        });
-        this._setOverlayPaneStyles(styles);
-    }
     _isTriggerVisibleInViewport() {
         const { visualViewport } = window;
         return isPopoverTriggerVisibleInViewport({
@@ -893,11 +641,6 @@ class ZPopoverComponent {
             viewportHeight: visualViewport?.height ?? window.innerHeight,
         });
     }
-    _setOverlayPaneStyles(styles) {
-        for (const key of ['top', 'left', 'right', 'bottom', 'transform']) {
-            this._renderer.setStyle(this._overlayRef?.overlayElement, key, styles[key]);
-        }
-    }
     _setupPopoverHover() {
         const overlayElement = this._overlayRef?.overlayElement;
         if (!overlayElement) {
@@ -916,9 +659,6 @@ class ZPopoverComponent {
         if (!this._componentRef) {
             return;
         }
-        if (this._hideTimeout) {
-            return;
-        }
         this._componentRef.instance.state.set('closed');
         this._hideTimeout = setTimeout(() => {
             this._hideTimeout = null;
@@ -1001,8 +741,7 @@ class ZPopoverDirective {
     zOutsideClick = output();
     _trigger = computed(() => this.zPopoverTrigger() ?? this.zTrigger(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_trigger" }] : /* istanbul ignore next */ []));
-    _overlay = inject(Overlay);
-    _overlayPositionBuilder = inject(OverlayPositionBuilder);
+    _overlayService = inject(ZOverlayService);
     _elementRef = inject((ElementRef));
     _renderer = inject(Renderer2);
     _destroyRef = inject(DestroyRef);
@@ -1014,7 +753,7 @@ class ZPopoverDirective {
     _componentRef = null;
     _delaySubject = new Subject();
     _listenerCleanups = [];
-    _positionSubscription = null;
+    _autoUpdateCleanup = null;
     _scrollSubscription = null;
     _viewportResizeSubscription = null;
     _resizeObserver = null;
@@ -1105,36 +844,24 @@ class ZPopoverDirective {
         this._schedulePositionUpdate();
     }
     _createOverlay() {
-        const positionStrategy = createPopoverPositionStrategy(this._overlayPositionBuilder, this._getTriggerElement(), this.zPosition(), this.zOffset());
-        const widthConfig = this._getWidthConfig();
-        const overlayRef = this._overlay.create({
-            positionStrategy,
-            scrollStrategy: this._createScrollStrategy(),
-            hasBackdrop: false,
-            ...widthConfig,
-        });
+        const overlayRef = this._overlayService.createAnchored();
         this._zIndexService.applyToOverlay(overlayRef);
-        return overlayRef;
-    }
-    _createScrollStrategy() {
-        if (this.zScrollClose()) {
-            return this._overlay.scrollStrategies.close();
-        }
-        if (isMobilePopoverViewport() && (this.zSticky() || this.zKeyboardSafe())) {
-            return this._overlay.scrollStrategies.noop();
+        const widthConfig = this._getWidthConfig();
+        if (widthConfig.width) {
+            overlayRef.updateSize(widthConfig);
         }
-        return this._overlay.scrollStrategies.reposition();
+        return overlayRef;
     }
     _getWidthConfig() {
         const width = this.zPopoverWidth();
         if (width === 'auto') {
-            return getPopoverOverlaySize();
+            return {};
         }
         if (width === 'trigger') {
             const triggerWidth = this._getTriggerElement().getBoundingClientRect().width;
-            return getPopoverOverlaySize({ width: `${triggerWidth}px`, minWidth: `${triggerWidth}px` });
+            return { width: `${triggerWidth}px`, minWidth: `${triggerWidth}px` };
         }
-        return getPopoverOverlaySize({ width, minWidth: width });
+        return { width, minWidth: width };
     }
     _getTriggerElement() {
         const triggerRef = this.zTriggerRef();
@@ -1144,8 +871,8 @@ class ZPopoverDirective {
         return triggerRef ?? this._elementRef.nativeElement;
     }
     _disposeOverlay() {
-        this._positionSubscription?.unsubscribe();
-        this._positionSubscription = null;
+        this._autoUpdateCleanup?.();
+        this._autoUpdateCleanup = null;
         this._scrollSubscription?.unsubscribe();
         this._scrollSubscription = null;
         this._viewportResizeSubscription?.unsubscribe();
@@ -1165,7 +892,7 @@ class ZPopoverDirective {
             .pipe(switchMap(config => (config.delay <= 0 ? of(config) : timer(config.delay).pipe(map(() => config)))), takeUntilDestroyed(this._destroyRef))
             .subscribe(config => {
             if (config.show) {
-                this._showPopover();
+                void this._showPopover();
                 return;
             }
             this._hidePopover();
@@ -1256,7 +983,7 @@ class ZPopoverDirective {
                     ticking = false;
                     return;
                 }
-                this._updatePositionNow();
+                void this._updatePositionNow();
                 ticking = false;
             });
         };
@@ -1294,7 +1021,7 @@ class ZPopoverDirective {
     _delay(show, delay) {
         this._delaySubject.next({ show, delay });
     }
-    _showPopover() {
+    async _showPopover() {
         const content = this.zContent();
         if (!content) {
             return;
@@ -1316,34 +1043,24 @@ class ZPopoverDirective {
             this._setupOutsideClick();
         }
         this._setupScrollClose();
-        const positionStrategy = createPopoverPositionStrategy(this._overlayPositionBuilder, this._getTriggerElement(), this.zPosition(), this.zOffset());
-        this._overlayRef.updatePositionStrategy(positionStrategy);
-        const widthConfig = this._getWidthConfig();
-        if (widthConfig.width) {
-            this._overlayRef.updateSize(widthConfig);
-        }
-        const portal = new ComponentPortal(ZPopoverContentComponent);
-        this._componentRef = this._overlayRef.attach(portal);
-        const renderPosition = getPopoverRenderPosition(this.zPosition());
+        this._componentRef = this._overlayRef.attach(ZPopoverContentComponent);
         this._componentRef.instance.setProps({
             content,
-            position: renderPosition,
+            position: this.zPosition(),
             customClass: this.zClass(),
             onClose: () => this.hide(),
             showArrow: this.zShowArrow(),
         });
-        this._positionSubscription = positionStrategy.positionChanges.subscribe(change => {
-            const actualPosition = getActualPopoverPosition(change);
-            this._componentRef?.instance.position.set(actualPosition);
-            this.zPositionChange.emit(actualPosition);
-            this._applyMobilePopoverPosition(actualPosition);
-        });
+        await this._applyPosition();
+        if (!this._overlayRef || !this._componentRef) {
+            return; // đã bị dispose (hide/destroy) trong lúc chờ computePosition
+        }
+        this._autoUpdateCleanup = startZOverlayAutoUpdate(this._getTriggerElement(), this._overlayRef.overlayElement, () => void this._applyPosition(), { ancestorScroll: false });
         if (this._trigger() === 'hover') {
             this._setupPopoverHover();
         }
         this._setupResizeObserver();
         this._setupViewportResizeReposition();
-        this._updatePositionAfterContentSettles();
         this._isVisible.set(true);
         ZPopoverDirective._openPopovers.add(this);
         this._renderer.addClass(this._elementRef.nativeElement, 'z-popover-open');
@@ -1390,16 +1107,13 @@ class ZPopoverDirective {
             this._resizeObserver.observe(wrapper);
         }
     }
-    _updatePositionAfterContentSettles() {
-        this._schedulePositionUpdate();
-    }
     _schedulePositionUpdate(force = false) {
         if (this._positionFrame !== null) {
             return;
         }
         this._positionFrame = requestAnimationFrame(() => {
             this._positionFrame = null;
-            this._updatePositionNow(force);
+            void this._updatePositionNow(force);
         });
     }
     _scheduleSettledPositionUpdate() {
@@ -1419,7 +1133,7 @@ class ZPopoverDirective {
         cancelAnimationFrame(this._positionFrame);
         this._positionFrame = null;
     }
-    _updatePositionNow(force = false) {
+    async _updatePositionNow(force = false) {
         if (!this._overlayRef?.hasAttached()) {
             return;
         }
@@ -1433,8 +1147,31 @@ class ZPopoverDirective {
         if (widthConfig.width) {
             this._overlayRef.updateSize(widthConfig);
         }
-        this._overlayRef.updatePosition();
-        this._applyMobilePopoverPosition(this._componentRef?.instance.position() ?? this.zPosition());
+        await this._applyPosition();
+    }
+    async _applyPosition() {
+        if (!this._overlayRef || !this._componentRef) {
+            return;
+        }
+        const anchorElement = this._getTriggerElement();
+        const floatingElement = this._overlayRef.overlayElement;
+        const position = this.zPosition();
+        const result = await computeZOverlayPlacement({
+            reference: anchorElement,
+            floating: floatingElement,
+            placement: position,
+            fallbackPlacements: getPopoverFallbackPlacements(position),
+            offset: this.zOffset(),
+            push: true,
+            viewportPadding: 10,
+        });
+        if (!this._componentRef) {
+            return;
+        }
+        floatingElement.style.left = `${result.x}px`;
+        floatingElement.style.top = `${result.y}px`;
+        this._componentRef.instance.position.set(result.placement);
+        this.zPositionChange.emit(result.placement);
     }
     _markViewportSettling() {
         this._viewportSettlingUntil = Date.now() + 260;
@@ -1471,22 +1208,6 @@ class ZPopoverDirective {
         }
         this._viewportResizeTimeouts = [];
     }
-    _applyMobilePopoverPosition(position) {
-        if (!isMobilePopoverViewport() || !this._overlayRef?.hasAttached()) {
-            return;
-        }
-        const { overlayElement } = this._overlayRef;
-        const { visualViewport } = window;
-        const styles = getMobilePopoverPaneStyles({
-            position,
-            triggerRect: this._getTriggerElement().getBoundingClientRect(),
-            overlayRect: overlayElement.getBoundingClientRect(),
-            offset: this.zOffset(),
-            viewportWidth: visualViewport?.width ?? window.innerWidth,
-            viewportHeight: visualViewport?.height ?? window.innerHeight,
-        });
-        this._setOverlayPaneStyles(styles);
-    }
     _isTriggerVisibleInViewport() {
         const { visualViewport } = window;
         return isPopoverTriggerVisibleInViewport({
@@ -1495,11 +1216,6 @@ class ZPopoverDirective {
             viewportHeight: visualViewport?.height ?? window.innerHeight,
         });
     }
-    _setOverlayPaneStyles(styles) {
-        for (const key of ['top', 'left', 'right', 'bottom', 'transform']) {
-            this._renderer.setStyle(this._overlayRef?.overlayElement, key, styles[key]);
-        }
-    }
     _setupPopoverHover() {
         const overlayElement = this._overlayRef?.overlayElement;
         if (!overlayElement) {