@shival99/z-ui 2.0.50 → 2.0.52

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

@@ -5,8 +5,8 @@ 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 { ZOverlayContainerService } from '@shival99/z-ui/services';
-import { zMergeClasses, zTransform } from '@shival99/z-ui/utils';
-import { Subject, switchMap, of, timer, map, filter } from 'rxjs';
+import { zMergeClasses, zIsMobileViewport, zTransform } from '@shival99/z-ui/utils';
+import { Subject, switchMap, of, timer, map, filter, fromEvent, throttleTime } from 'rxjs';
 import { cva } from 'class-variance-authority';
 
 const zPopoverVariants = cva([
@@ -38,18 +38,18 @@ const zPopoverVariants = cva([
 const zPopoverExitVariants = cva('z-animate-out z-fade-out z-duration-200', {
     variants: {
         zPosition: {
-            top: 'z-slide-out-to-top-4',
-            'top-left': 'z-slide-out-to-top-4',
-            'top-right': 'z-slide-out-to-top-4',
-            bottom: 'z-slide-out-to-bottom-4',
-            'bottom-left': 'z-slide-out-to-bottom-4',
-            'bottom-right': 'z-slide-out-to-bottom-4',
-            left: 'z-slide-out-to-left-4',
-            'left-top': 'z-slide-out-to-left-4',
-            'left-bottom': 'z-slide-out-to-left-4',
-            right: 'z-slide-out-to-right-4',
-            'right-top': 'z-slide-out-to-right-4',
-            'right-bottom': 'z-slide-out-to-right-4',
+            top: 'z-slide-out-to-bottom-4',
+            'top-left': 'z-slide-out-to-bottom-4',
+            'top-right': 'z-slide-out-to-bottom-4',
+            bottom: 'z-slide-out-to-top-4',
+            'bottom-left': 'z-slide-out-to-top-4',
+            'bottom-right': 'z-slide-out-to-top-4',
+            left: 'z-slide-out-to-right-4',
+            'left-top': 'z-slide-out-to-right-4',
+            'left-bottom': 'z-slide-out-to-right-4',
+            right: 'z-slide-out-to-left-4',
+            'right-top': 'z-slide-out-to-left-4',
+            'right-bottom': 'z-slide-out-to-left-4',
         },
     },
     defaultVariants: {
@@ -184,6 +184,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", 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) {
+    return getPopoverFallbackPositions(position, 0).map(pos => ({
+        ...pos,
+        offsetX: 0,
+        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;
+}
+function isPopoverTriggerVisibleInViewport(config) {
+    const { triggerRect, viewportWidth, viewportHeight } = config;
+    if (triggerRect.width <= 0 || triggerRect.height <= 0) {
+        return false;
+    }
+    return (triggerRect.bottom > 0 &&
+        triggerRect.top < viewportHeight &&
+        triggerRect.right > 0 &&
+        triggerRect.left < viewportWidth);
+}
 function createPopoverPosition(position, offset) {
     const positions = {
         top: {
@@ -275,26 +365,34 @@ function createPopoverPosition(position, offset) {
 }
 function getPopoverFallbackPositions(position, offset) {
     const fallbackOrder = {
-        // Top positions: if overflows right, try left; if overflows top, try bottom
-        top: ['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right'],
-        'top-left': ['top-left', 'top', 'top-right', 'bottom-left', 'bottom', 'bottom-right'],
-        'top-right': ['top-right', 'top', 'top-left', 'bottom-right', 'bottom', 'bottom-left'],
-        // Bottom positions: if overflows right, try left; if overflows bottom, try top
-        bottom: ['bottom', 'bottom-left', 'bottom-right', 'top', 'top-left', 'top-right'],
-        'bottom-left': ['bottom-left', 'bottom', 'bottom-right', 'top-left', 'top', 'top-right'],
-        'bottom-right': ['bottom-right', 'bottom', 'bottom-left', 'top-right', 'top', 'top-left'],
-        // Left positions: if overflows top, try bottom; if overflows left, try right
-        left: ['left', 'left-top', 'left-bottom', 'right', 'right-top', 'right-bottom'],
-        'left-top': ['left-top', 'left', 'left-bottom', 'right-top', 'right', 'right-bottom'],
-        'left-bottom': ['left-bottom', 'left', 'left-top', 'right-bottom', 'right', 'right-top'],
-        // Right positions: if overflows top, try bottom; if overflows right, try left
-        right: ['right', 'right-top', 'right-bottom', 'left', 'left-top', 'left-bottom'],
-        'right-top': ['right-top', 'right', 'right-bottom', 'left-top', 'left', 'left-bottom'],
-        'right-bottom': ['right-bottom', 'right', 'right-top', 'left-bottom', 'left', 'left-top'],
+        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)
+        : 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') {
@@ -363,6 +461,7 @@ class ZPopoverComponent {
     zManualClose = input(false, { ...(ngDevMode ? { debugName: "zManualClose" } : {}), transform: zTransform });
     zOutsideClickClose = input(false, { ...(ngDevMode ? { debugName: "zOutsideClickClose" } : {}), transform: zTransform });
     zScrollClose = input(false, { ...(ngDevMode ? { debugName: "zScrollClose" } : {}), transform: zTransform });
+    zSticky = input(false, { ...(ngDevMode ? { debugName: "zSticky" } : {}), transform: zTransform });
     zShowArrow = input(false, { ...(ngDevMode ? { debugName: "zShowArrow" } : {}), transform: zTransform });
     _overlayRef = null;
     _componentRef = null;
@@ -370,8 +469,10 @@ class ZPopoverComponent {
     _listenerCleanups = [];
     _positionSubscription = null;
     _scrollSubscription = null;
+    _viewportResizeSubscription = null;
     _resizeObserver = null;
     _hideTimeout = null;
+    _positionFrame = null;
     _isVisible = signal(false, ...(ngDevMode ? [{ debugName: "_isVisible" }] : []));
     ngOnInit() {
         if (!isPlatformBrowser(this._platformId)) {
@@ -441,31 +542,36 @@ class ZPopoverComponent {
         if (!this._isVisible()) {
             return;
         }
-        this._overlayRef?.updatePosition();
+        this._updatePositionNow();
     }
     _createOverlay() {
-        const positionStrategy = this._overlayPositionBuilder
-            .flexibleConnectedTo(this._trigger())
-            .withPositions(getPopoverFallbackPositions(this.zPosition(), this.zOffset()))
-            .withFlexibleDimensions(false)
-            .withPush(true)
-            .withViewportMargin(8);
-        const scrollStrategy = this.zScrollClose()
-            ? this._overlay.scrollStrategies.close()
-            : this._overlay.scrollStrategies.reposition({ scrollThrottle: 10, autoClose: false });
+        const positionStrategy = createPopoverPositionStrategy(this._overlayPositionBuilder, this._trigger(), this.zPosition(), this.zOffset());
         return this._overlay.create({
             positionStrategy,
-            scrollStrategy,
+            scrollStrategy: this._createScrollStrategy(),
             hasBackdrop: false,
+            ...getPopoverOverlaySize(),
         });
     }
+    _createScrollStrategy() {
+        if (this.zScrollClose()) {
+            return this._overlay.scrollStrategies.close();
+        }
+        if (isMobilePopoverViewport() && this.zSticky()) {
+            return this._overlay.scrollStrategies.noop();
+        }
+        return this._overlay.scrollStrategies.reposition({ scrollThrottle: 10, autoClose: false });
+    }
     _disposeOverlay() {
         this._positionSubscription?.unsubscribe();
         this._positionSubscription = null;
         this._scrollSubscription?.unsubscribe();
         this._scrollSubscription = null;
+        this._viewportResizeSubscription?.unsubscribe();
+        this._viewportResizeSubscription = null;
         this._resizeObserver?.disconnect();
         this._resizeObserver = null;
+        this._cancelScheduledPositionUpdate();
         this._overlayRef?.dispose();
         this._overlayRef = null;
         this._componentRef = null;
@@ -543,7 +649,11 @@ class ZPopoverComponent {
             }
             ticking = true;
             requestAnimationFrame(() => {
-                this._overlayRef?.updatePosition();
+                if (this.zSticky() && !this._isTriggerVisibleInViewport()) {
+                    ticking = false;
+                    return;
+                }
+                this._updatePositionNow();
                 ticking = false;
             });
         };
@@ -554,6 +664,17 @@ class ZPopoverComponent {
             },
         };
     }
+    _setupViewportResizeReposition() {
+        this._viewportResizeSubscription?.unsubscribe();
+        this._viewportResizeSubscription = fromEvent(window, 'resize')
+            .pipe(throttleTime(60), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            if (!this._overlayRef?.hasAttached()) {
+                return;
+            }
+            this._updatePositionNow();
+        });
+    }
     _showPopover() {
         const content = this.zContent();
         if (!content || this._componentRef) {
@@ -564,18 +685,15 @@ class ZPopoverComponent {
             this._setupOutsideClick();
         }
         this._setupScrollClose();
-        const positionStrategy = this._overlayPositionBuilder
-            .flexibleConnectedTo(this._trigger())
-            .withPositions(getPopoverFallbackPositions(this.zPosition(), this.zOffset()))
-            .withFlexibleDimensions(false)
-            .withPush(true)
-            .withViewportMargin(8);
+        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.instance.setProps({
             content,
-            position: this.zPosition(),
+            position: renderPosition,
             customClass: this.zClass(),
             onClose: () => this.hide(),
             showArrow: this.zShowArrow(),
@@ -583,11 +701,14 @@ class ZPopoverComponent {
         this._positionSubscription = positionStrategy.positionChanges.subscribe(change => {
             const actualPosition = getActualPopoverPosition(change);
             this._componentRef?.instance.position.set(actualPosition);
+            this._applyMobilePopoverPosition(actualPosition);
         });
         if (this.zTrigger() === 'hover') {
             this._setupPopoverHover();
         }
         this._setupResizeObserver();
+        this._setupViewportResizeReposition();
+        this._updatePositionAfterContentSettles();
         this._isVisible.set(true);
         ZPopoverComponent._openPopovers.add(this);
         this.zShow.emit();
@@ -615,15 +736,77 @@ class ZPopoverComponent {
         this._resizeObserver?.disconnect();
         this._resizeObserver = new ResizeObserver(() => {
             if (this._overlayRef && this._isVisible()) {
-                this._overlayRef.updatePosition();
+                this._schedulePositionUpdate();
             }
         });
         this._resizeObserver.observe(this._trigger().nativeElement);
+        const overlayElement = this._overlayRef?.overlayElement;
+        if (overlayElement) {
+            this._resizeObserver.observe(overlayElement);
+        }
         const wrapper = this._trigger().nativeElement.parentElement?.parentElement;
         if (wrapper && wrapper !== document.body) {
             this._resizeObserver.observe(wrapper);
         }
     }
+    _updatePositionAfterContentSettles() {
+        this._schedulePositionUpdate();
+    }
+    _schedulePositionUpdate() {
+        if (this._positionFrame !== null) {
+            return;
+        }
+        this._positionFrame = requestAnimationFrame(() => {
+            this._positionFrame = null;
+            this._updatePositionNow();
+        });
+    }
+    _cancelScheduledPositionUpdate() {
+        if (this._positionFrame === null) {
+            return;
+        }
+        cancelAnimationFrame(this._positionFrame);
+        this._positionFrame = null;
+    }
+    _updatePositionNow() {
+        if (!this._overlayRef?.hasAttached()) {
+            return;
+        }
+        if (isMobilePopoverViewport() && this.zSticky() && !this._isTriggerVisibleInViewport()) {
+            return;
+        }
+        this._overlayRef.updatePosition();
+        this._applyMobilePopoverPosition(this._componentRef?.instance.position() ?? this.zPosition());
+    }
+    _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({
+            triggerRect: this._trigger().nativeElement.getBoundingClientRect(),
+            viewportWidth: visualViewport?.width ?? window.innerWidth,
+            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) {
@@ -668,7 +851,7 @@ class ZPopoverComponent {
         this._listenerCleanups = [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.9", type: ZPopoverComponent, isStandalone: true, selector: "z-popover", inputs: { zContent: { classPropertyName: "zContent", publicName: "zContent", isSignal: true, isRequired: false, transformFunction: null }, zPosition: { classPropertyName: "zPosition", publicName: "zPosition", isSignal: true, isRequired: false, transformFunction: null }, zTrigger: { classPropertyName: "zTrigger", publicName: "zTrigger", isSignal: true, isRequired: false, transformFunction: null }, zClass: { classPropertyName: "zClass", publicName: "zClass", isSignal: true, isRequired: false, transformFunction: null }, zShowDelay: { classPropertyName: "zShowDelay", publicName: "zShowDelay", isSignal: true, isRequired: false, transformFunction: null }, zHideDelay: { classPropertyName: "zHideDelay", publicName: "zHideDelay", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zOffset: { classPropertyName: "zOffset", publicName: "zOffset", isSignal: true, isRequired: false, transformFunction: null }, zManualClose: { classPropertyName: "zManualClose", publicName: "zManualClose", isSignal: true, isRequired: false, transformFunction: null }, zOutsideClickClose: { classPropertyName: "zOutsideClickClose", publicName: "zOutsideClickClose", isSignal: true, isRequired: false, transformFunction: null }, zScrollClose: { classPropertyName: "zScrollClose", publicName: "zScrollClose", isSignal: true, isRequired: false, transformFunction: null }, zShowArrow: { classPropertyName: "zShowArrow", publicName: "zShowArrow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zShow: "zShow", zHide: "zHide", zControl: "zControl", zOutsideClick: "zOutsideClick" }, host: { classAttribute: "inline-block" }, viewQueries: [{ propertyName: "_trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.9", type: ZPopoverComponent, isStandalone: true, selector: "z-popover", inputs: { zContent: { classPropertyName: "zContent", publicName: "zContent", isSignal: true, isRequired: false, transformFunction: null }, zPosition: { classPropertyName: "zPosition", publicName: "zPosition", isSignal: true, isRequired: false, transformFunction: null }, zTrigger: { classPropertyName: "zTrigger", publicName: "zTrigger", isSignal: true, isRequired: false, transformFunction: null }, zClass: { classPropertyName: "zClass", publicName: "zClass", isSignal: true, isRequired: false, transformFunction: null }, zShowDelay: { classPropertyName: "zShowDelay", publicName: "zShowDelay", isSignal: true, isRequired: false, transformFunction: null }, zHideDelay: { classPropertyName: "zHideDelay", publicName: "zHideDelay", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zOffset: { classPropertyName: "zOffset", publicName: "zOffset", isSignal: true, isRequired: false, transformFunction: null }, zManualClose: { classPropertyName: "zManualClose", publicName: "zManualClose", isSignal: true, isRequired: false, transformFunction: null }, zOutsideClickClose: { classPropertyName: "zOutsideClickClose", publicName: "zOutsideClickClose", isSignal: true, isRequired: false, transformFunction: null }, zScrollClose: { classPropertyName: "zScrollClose", publicName: "zScrollClose", isSignal: true, isRequired: false, transformFunction: null }, zSticky: { classPropertyName: "zSticky", publicName: "zSticky", isSignal: true, isRequired: false, transformFunction: null }, zShowArrow: { classPropertyName: "zShowArrow", publicName: "zShowArrow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zShow: "zShow", zHide: "zHide", zControl: "zControl", zOutsideClick: "zOutsideClick" }, host: { classAttribute: "inline-block" }, viewQueries: [{ propertyName: "_trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <span #trigger class="z-popover-trigger inline-block">
       <ng-content />
     </span>
@@ -689,7 +872,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         class: 'inline-block',
                     },
                 }]
-        }], propDecorators: { _trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], zShow: [{ type: i0.Output, args: ["zShow"] }], zHide: [{ type: i0.Output, args: ["zHide"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zOutsideClick: [{ type: i0.Output, args: ["zOutsideClick"] }], zContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContent", required: false }] }], zPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPosition", required: false }] }], zTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTrigger", required: false }] }], zClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClass", required: false }] }], zShowDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowDelay", required: false }] }], zHideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHideDelay", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOffset", required: false }] }], zManualClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zManualClose", required: false }] }], zOutsideClickClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOutsideClickClose", required: false }] }], zScrollClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollClose", required: false }] }], zShowArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowArrow", required: false }] }] } });
+        }], propDecorators: { _trigger: [{ type: i0.ViewChild, args: ['trigger', { isSignal: true }] }], zShow: [{ type: i0.Output, args: ["zShow"] }], zHide: [{ type: i0.Output, args: ["zHide"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zOutsideClick: [{ type: i0.Output, args: ["zOutsideClick"] }], zContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContent", required: false }] }], zPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPosition", required: false }] }], zTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTrigger", required: false }] }], zClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClass", required: false }] }], zShowDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowDelay", required: false }] }], zHideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHideDelay", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOffset", required: false }] }], zManualClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zManualClose", required: false }] }], zOutsideClickClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOutsideClickClose", required: false }] }], zScrollClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollClose", required: false }] }], zSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSticky", required: false }] }], zShowArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowArrow", required: false }] }] } });
 
 class ZPopoverDirective {
     static _openPopovers = new Set();
@@ -707,6 +890,7 @@ class ZPopoverDirective {
     zManualClose = input(false, { ...(ngDevMode ? { debugName: "zManualClose" } : {}), transform: zTransform });
     zOutsideClickClose = input(false, { ...(ngDevMode ? { debugName: "zOutsideClickClose" } : {}), transform: zTransform });
     zScrollClose = input(false, { ...(ngDevMode ? { debugName: "zScrollClose" } : {}), transform: zTransform });
+    zSticky = input(false, { ...(ngDevMode ? { debugName: "zSticky" } : {}), transform: zTransform });
     zShowArrow = input(false, { ...(ngDevMode ? { debugName: "zShowArrow" } : {}), transform: zTransform });
     zShow = output();
     zHide = output();
@@ -729,8 +913,10 @@ class ZPopoverDirective {
     _listenerCleanups = [];
     _positionSubscription = null;
     _scrollSubscription = null;
+    _viewportResizeSubscription = null;
     _resizeObserver = null;
     _hideTimeout = null;
+    _positionFrame = null;
     _isDestroyed = signal(false, ...(ngDevMode ? [{ debugName: "_isDestroyed" }] : []));
     _isVisible = signal(false, ...(ngDevMode ? [{ debugName: "_isVisible" }] : []));
     ngOnInit() {
@@ -809,40 +995,37 @@ class ZPopoverDirective {
         if (!this._isVisible()) {
             return;
         }
-        this._overlayRef?.updatePosition();
-        const widthConfig = this._getWidthConfig();
-        if (widthConfig.width) {
-            this._overlayRef?.updateSize({ width: widthConfig.width, minWidth: widthConfig.minWidth });
-        }
+        this._updatePositionNow();
     }
     _createOverlay() {
-        const positionStrategy = this._overlayPositionBuilder
-            .flexibleConnectedTo(this._getTriggerElement())
-            .withPositions(getPopoverFallbackPositions(this.zPosition(), this.zOffset()))
-            .withFlexibleDimensions(false)
-            .withPush(this.zScrollClose())
-            .withViewportMargin(8);
+        const positionStrategy = createPopoverPositionStrategy(this._overlayPositionBuilder, this._getTriggerElement(), this.zPosition(), this.zOffset());
         const widthConfig = this._getWidthConfig();
-        const scrollStrategy = this.zScrollClose()
-            ? this._overlay.scrollStrategies.close()
-            : this._overlay.scrollStrategies.reposition();
         return this._overlay.create({
             positionStrategy,
-            scrollStrategy,
+            scrollStrategy: this._createScrollStrategy(),
             hasBackdrop: false,
             ...widthConfig,
         });
     }
+    _createScrollStrategy() {
+        if (this.zScrollClose()) {
+            return this._overlay.scrollStrategies.close();
+        }
+        if (isMobilePopoverViewport() && this.zSticky()) {
+            return this._overlay.scrollStrategies.noop();
+        }
+        return this._overlay.scrollStrategies.reposition();
+    }
     _getWidthConfig() {
         const width = this.zPopoverWidth();
         if (width === 'auto') {
-            return {};
+            return getPopoverOverlaySize();
         }
         if (width === 'trigger') {
             const triggerWidth = this._getTriggerElement().getBoundingClientRect().width;
-            return { width: `${triggerWidth}px`, minWidth: `${triggerWidth}px` };
+            return getPopoverOverlaySize({ width: `${triggerWidth}px`, minWidth: `${triggerWidth}px` });
         }
-        return { width, minWidth: width };
+        return getPopoverOverlaySize({ width, minWidth: width });
     }
     _getTriggerElement() {
         const triggerRef = this.zTriggerRef();
@@ -856,8 +1039,11 @@ class ZPopoverDirective {
         this._positionSubscription = null;
         this._scrollSubscription?.unsubscribe();
         this._scrollSubscription = null;
+        this._viewportResizeSubscription?.unsubscribe();
+        this._viewportResizeSubscription = null;
         this._resizeObserver?.disconnect();
         this._resizeObserver = null;
+        this._cancelScheduledPositionUpdate();
         this._overlayRef?.dispose();
         this._overlayRef = null;
         this._componentRef = null;
@@ -947,7 +1133,11 @@ class ZPopoverDirective {
             }
             ticking = true;
             requestAnimationFrame(() => {
-                this._overlayRef?.updatePosition();
+                if (this.zSticky() && !this._isTriggerVisibleInViewport()) {
+                    ticking = false;
+                    return;
+                }
+                this._updatePositionNow();
                 ticking = false;
             });
         };
@@ -958,6 +1148,21 @@ class ZPopoverDirective {
             },
         };
     }
+    _setupViewportResizeReposition() {
+        this._viewportResizeSubscription?.unsubscribe();
+        this._viewportResizeSubscription = fromEvent(window, 'resize')
+            .pipe(throttleTime(60), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            if (!this._overlayRef?.hasAttached()) {
+                return;
+            }
+            const widthConfig = this._getWidthConfig();
+            if (widthConfig.width) {
+                this._overlayRef.updateSize(widthConfig);
+            }
+            this._updatePositionNow();
+        });
+    }
     _delay(show, delay) {
         this._delaySubject.next({ show, delay });
     }
@@ -983,22 +1188,18 @@ class ZPopoverDirective {
             this._setupOutsideClick();
         }
         this._setupScrollClose();
-        const positionStrategy = this._overlayPositionBuilder
-            .flexibleConnectedTo(this._getTriggerElement())
-            .withPositions(getPopoverFallbackPositions(this.zPosition(), this.zOffset()))
-            .withFlexibleDimensions(false)
-            .withPush(this.zScrollClose())
-            .withViewportMargin(8);
+        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({ width: widthConfig.width, minWidth: widthConfig.minWidth });
+            this._overlayRef.updateSize(widthConfig);
         }
         const portal = new ComponentPortal(ZPopoverContentComponent);
         this._componentRef = this._overlayRef.attach(portal);
+        const renderPosition = getPopoverRenderPosition(this.zPosition());
         this._componentRef.instance.setProps({
             content,
-            position: this.zPosition(),
+            position: renderPosition,
             customClass: this.zClass(),
             onClose: () => this.hide(),
             showArrow: this.zShowArrow(),
@@ -1007,11 +1208,14 @@ class ZPopoverDirective {
             const actualPosition = getActualPopoverPosition(change);
             this._componentRef?.instance.position.set(actualPosition);
             this.zPositionChange.emit(actualPosition);
+            this._applyMobilePopoverPosition(actualPosition);
         });
         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');
@@ -1041,15 +1245,19 @@ class ZPopoverDirective {
         this._resizeObserver?.disconnect();
         this._resizeObserver = new ResizeObserver(() => {
             if (this._overlayRef && this._isVisible()) {
-                this._overlayRef.updatePosition();
                 const widthConfig = this._getWidthConfig();
                 if (widthConfig.width) {
-                    this._overlayRef.updateSize({ width: widthConfig.width, minWidth: widthConfig.minWidth });
+                    this._overlayRef.updateSize(widthConfig);
                 }
+                this._schedulePositionUpdate();
             }
         });
         const originElement = this._getTriggerElement();
         this._resizeObserver.observe(originElement);
+        const overlayElement = this._overlayRef?.overlayElement;
+        if (overlayElement) {
+            this._resizeObserver.observe(overlayElement);
+        }
         if (originElement !== this._elementRef.nativeElement) {
             this._resizeObserver.observe(this._elementRef.nativeElement);
         }
@@ -1058,6 +1266,68 @@ class ZPopoverDirective {
             this._resizeObserver.observe(wrapper);
         }
     }
+    _updatePositionAfterContentSettles() {
+        this._schedulePositionUpdate();
+    }
+    _schedulePositionUpdate() {
+        if (this._positionFrame !== null) {
+            return;
+        }
+        this._positionFrame = requestAnimationFrame(() => {
+            this._positionFrame = null;
+            this._updatePositionNow();
+        });
+    }
+    _cancelScheduledPositionUpdate() {
+        if (this._positionFrame === null) {
+            return;
+        }
+        cancelAnimationFrame(this._positionFrame);
+        this._positionFrame = null;
+    }
+    _updatePositionNow() {
+        if (!this._overlayRef?.hasAttached()) {
+            return;
+        }
+        if (isMobilePopoverViewport() && this.zSticky() && !this._isTriggerVisibleInViewport()) {
+            return;
+        }
+        const widthConfig = this._getWidthConfig();
+        if (widthConfig.width) {
+            this._overlayRef.updateSize(widthConfig);
+        }
+        this._overlayRef.updatePosition();
+        this._applyMobilePopoverPosition(this._componentRef?.instance.position() ?? this.zPosition());
+    }
+    _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({
+            triggerRect: this._getTriggerElement().getBoundingClientRect(),
+            viewportWidth: visualViewport?.width ?? window.innerWidth,
+            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) {
@@ -1104,7 +1374,7 @@ class ZPopoverDirective {
         this._listenerCleanups = [];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZPopoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: ZPopoverDirective, isStandalone: true, selector: "[z-popover]", inputs: { zContent: { classPropertyName: "zContent", publicName: "zPopoverContent", isSignal: true, isRequired: false, transformFunction: null }, zPosition: { classPropertyName: "zPosition", publicName: "zPosition", isSignal: true, isRequired: false, transformFunction: null }, zTrigger: { classPropertyName: "zTrigger", publicName: "zTrigger", isSignal: true, isRequired: false, transformFunction: null }, zPopoverTrigger: { classPropertyName: "zPopoverTrigger", publicName: "zPopoverTrigger", isSignal: true, isRequired: false, transformFunction: null }, zClass: { classPropertyName: "zClass", publicName: "zClass", isSignal: true, isRequired: false, transformFunction: null }, zShowDelay: { classPropertyName: "zShowDelay", publicName: "zShowDelay", isSignal: true, isRequired: false, transformFunction: null }, zHideDelay: { classPropertyName: "zHideDelay", publicName: "zHideDelay", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zOffset: { classPropertyName: "zOffset", publicName: "zOffset", isSignal: true, isRequired: false, transformFunction: null }, zPopoverWidth: { classPropertyName: "zPopoverWidth", publicName: "zPopoverWidth", isSignal: true, isRequired: false, transformFunction: null }, zTriggerRef: { classPropertyName: "zTriggerRef", publicName: "zTriggerRef", isSignal: true, isRequired: false, transformFunction: null }, zManualClose: { classPropertyName: "zManualClose", publicName: "zManualClose", isSignal: true, isRequired: false, transformFunction: null }, zOutsideClickClose: { classPropertyName: "zOutsideClickClose", publicName: "zOutsideClickClose", isSignal: true, isRequired: false, transformFunction: null }, zScrollClose: { classPropertyName: "zScrollClose", publicName: "zScrollClose", isSignal: true, isRequired: false, transformFunction: null }, zShowArrow: { classPropertyName: "zShowArrow", publicName: "zShowArrow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zShow: "zShow", zHide: "zHide", zHideStart: "zHideStart", zControl: "zControl", zPositionChange: "zPositionChange", zOutsideClick: "zOutsideClick" }, exportAs: ["zPopover"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: ZPopoverDirective, isStandalone: true, selector: "[z-popover]", inputs: { zContent: { classPropertyName: "zContent", publicName: "zPopoverContent", isSignal: true, isRequired: false, transformFunction: null }, zPosition: { classPropertyName: "zPosition", publicName: "zPosition", isSignal: true, isRequired: false, transformFunction: null }, zTrigger: { classPropertyName: "zTrigger", publicName: "zTrigger", isSignal: true, isRequired: false, transformFunction: null }, zPopoverTrigger: { classPropertyName: "zPopoverTrigger", publicName: "zPopoverTrigger", isSignal: true, isRequired: false, transformFunction: null }, zClass: { classPropertyName: "zClass", publicName: "zClass", isSignal: true, isRequired: false, transformFunction: null }, zShowDelay: { classPropertyName: "zShowDelay", publicName: "zShowDelay", isSignal: true, isRequired: false, transformFunction: null }, zHideDelay: { classPropertyName: "zHideDelay", publicName: "zHideDelay", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zOffset: { classPropertyName: "zOffset", publicName: "zOffset", isSignal: true, isRequired: false, transformFunction: null }, zPopoverWidth: { classPropertyName: "zPopoverWidth", publicName: "zPopoverWidth", isSignal: true, isRequired: false, transformFunction: null }, zTriggerRef: { classPropertyName: "zTriggerRef", publicName: "zTriggerRef", isSignal: true, isRequired: false, transformFunction: null }, zManualClose: { classPropertyName: "zManualClose", publicName: "zManualClose", isSignal: true, isRequired: false, transformFunction: null }, zOutsideClickClose: { classPropertyName: "zOutsideClickClose", publicName: "zOutsideClickClose", isSignal: true, isRequired: false, transformFunction: null }, zScrollClose: { classPropertyName: "zScrollClose", publicName: "zScrollClose", isSignal: true, isRequired: false, transformFunction: null }, zSticky: { classPropertyName: "zSticky", publicName: "zSticky", isSignal: true, isRequired: false, transformFunction: null }, zShowArrow: { classPropertyName: "zShowArrow", publicName: "zShowArrow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zShow: "zShow", zHide: "zHide", zHideStart: "zHideStart", zControl: "zControl", zPositionChange: "zPositionChange", zOutsideClick: "zOutsideClick" }, exportAs: ["zPopover"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZPopoverDirective, decorators: [{
             type: Directive,
@@ -1113,7 +1383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                     standalone: true,
                     exportAs: 'zPopover',
                 }]
-        }], propDecorators: { zContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPopoverContent", required: false }] }], zPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPosition", required: false }] }], zTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTrigger", required: false }] }], zPopoverTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPopoverTrigger", required: false }] }], zClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClass", required: false }] }], zShowDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowDelay", required: false }] }], zHideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHideDelay", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOffset", required: false }] }], zPopoverWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPopoverWidth", required: false }] }], zTriggerRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTriggerRef", required: false }] }], zManualClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zManualClose", required: false }] }], zOutsideClickClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOutsideClickClose", required: false }] }], zScrollClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollClose", required: false }] }], zShowArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowArrow", required: false }] }], zShow: [{ type: i0.Output, args: ["zShow"] }], zHide: [{ type: i0.Output, args: ["zHide"] }], zHideStart: [{ type: i0.Output, args: ["zHideStart"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zPositionChange: [{ type: i0.Output, args: ["zPositionChange"] }], zOutsideClick: [{ type: i0.Output, args: ["zOutsideClick"] }] } });
+        }], propDecorators: { zContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPopoverContent", required: false }] }], zPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPosition", required: false }] }], zTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTrigger", required: false }] }], zPopoverTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPopoverTrigger", required: false }] }], zClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClass", required: false }] }], zShowDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowDelay", required: false }] }], zHideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHideDelay", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOffset", required: false }] }], zPopoverWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPopoverWidth", required: false }] }], zTriggerRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTriggerRef", required: false }] }], zManualClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zManualClose", required: false }] }], zOutsideClickClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOutsideClickClose", required: false }] }], zScrollClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollClose", required: false }] }], zSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSticky", required: false }] }], zShowArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowArrow", required: false }] }], zShow: [{ type: i0.Output, args: ["zShow"] }], zHide: [{ type: i0.Output, args: ["zHide"] }], zHideStart: [{ type: i0.Output, args: ["zHideStart"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zPositionChange: [{ type: i0.Output, args: ["zPositionChange"] }], zOutsideClick: [{ type: i0.Output, args: ["zOutsideClick"] }] } });
 
 /**
  * Generated bundle index. Do not edit.