@shival99/z-ui 2.0.51 → 2.0.53

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

@@ -5,7 +5,7 @@ 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 { zMergeClasses, zIsMobileViewport, zTransform } from '@shival99/z-ui/utils';
 import { Subject, switchMap, of, timer, map, filter } from 'rxjs';
 import { cva } from 'class-variance-authority';
 
@@ -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, 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;
+}
+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: {
@@ -292,12 +382,16 @@ function getPopoverFallbackPositions(position, offset) {
     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(getPopoverFallbackPositions(position, offset))
+        .withPositions(positions)
         .withFlexibleDimensions(false)
-        .withPush(true)
-        .withViewportMargin(8);
+        .withPush(getPopoverPushEnabled(mobile))
+        .withViewportMargin(10);
 }
 function getActualPopoverPosition(change) {
     const { originX, originY, overlayX, overlayY } = change.connectionPair;
@@ -367,15 +461,21 @@ 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 });
+    zKeyboardSafe = input(false, { ...(ngDevMode ? { debugName: "zKeyboardSafe" } : {}), transform: zTransform });
     _overlayRef = null;
     _componentRef = null;
     _delaySubject = new Subject();
     _listenerCleanups = [];
     _positionSubscription = null;
     _scrollSubscription = null;
+    _viewportResizeSubscription = null;
     _resizeObserver = null;
     _hideTimeout = null;
+    _viewportResizeTimeouts = [];
+    _positionFrame = null;
+    _viewportSettlingUntil = 0;
     _isVisible = signal(false, ...(ngDevMode ? [{ debugName: "_isVisible" }] : []));
     ngOnInit() {
         if (!isPlatformBrowser(this._platformId)) {
@@ -445,26 +545,38 @@ class ZPopoverComponent {
         if (!this._isVisible()) {
             return;
         }
-        this._overlayRef?.updatePosition();
+        this._schedulePositionUpdate();
     }
     _createOverlay() {
         const positionStrategy = createPopoverPositionStrategy(this._overlayPositionBuilder, this._trigger(), this.zPosition(), this.zOffset());
-        const scrollStrategy = this.zScrollClose()
-            ? this._overlay.scrollStrategies.close()
-            : this._overlay.scrollStrategies.reposition({ scrollThrottle: 10, autoClose: false });
         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() || this.zKeyboardSafe())) {
+            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._clearViewportResizeTimeout();
+        this._viewportSettlingUntil = 0;
         this._resizeObserver?.disconnect();
         this._resizeObserver = null;
+        this._cancelScheduledPositionUpdate();
         this._overlayRef?.dispose();
         this._overlayRef = null;
         this._componentRef = null;
@@ -540,9 +652,18 @@ class ZPopoverComponent {
             if (ticking) {
                 return;
             }
+            if (this._shouldDeferForMobileKeyboard()) {
+                this._markViewportSettling();
+                this._scheduleSettledPositionUpdate();
+                return;
+            }
             ticking = true;
             requestAnimationFrame(() => {
-                this._overlayRef?.updatePosition();
+                if (this.zSticky() && !this._isTriggerVisibleInViewport()) {
+                    ticking = false;
+                    return;
+                }
+                this._updatePositionNow();
                 ticking = false;
             });
         };
@@ -553,6 +674,30 @@ class ZPopoverComponent {
             },
         };
     }
+    _setupViewportResizeReposition() {
+        this._viewportResizeSubscription?.unsubscribe();
+        this._clearViewportResizeTimeout();
+        const onResize = () => {
+            if (!this._overlayRef?.hasAttached()) {
+                return;
+            }
+            if (this._shouldDeferForMobileKeyboard()) {
+                this._markViewportSettling();
+                this._scheduleSettledPositionUpdate();
+                return;
+            }
+            this._schedulePositionUpdate();
+        };
+        window.addEventListener('resize', onResize);
+        window.visualViewport?.addEventListener('resize', onResize);
+        this._viewportResizeSubscription = {
+            unsubscribe: () => {
+                window.removeEventListener('resize', onResize);
+                window.visualViewport?.removeEventListener('resize', onResize);
+                this._clearViewportResizeTimeout();
+            },
+        };
+    }
     _showPopover() {
         const content = this.zContent();
         if (!content || this._componentRef) {
@@ -565,11 +710,13 @@ class ZPopoverComponent {
         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.instance.setProps({
             content,
-            position: this.zPosition(),
+            position: renderPosition,
             customClass: this.zClass(),
             onClose: () => this.hide(),
             showArrow: this.zShowArrow(),
@@ -577,11 +724,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();
@@ -609,7 +759,7 @@ 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);
@@ -618,6 +768,112 @@ 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);
+        });
+    }
+    _scheduleSettledPositionUpdate() {
+        this._clearViewportResizeTimeout();
+        for (const delay of [80, 180, 320]) {
+            const timeout = setTimeout(() => {
+                this._viewportResizeTimeouts = this._viewportResizeTimeouts.filter(item => item !== timeout);
+                this._schedulePositionUpdate(true);
+            }, delay);
+            this._viewportResizeTimeouts.push(timeout);
+        }
+    }
+    _cancelScheduledPositionUpdate() {
+        if (this._positionFrame === null) {
+            return;
+        }
+        cancelAnimationFrame(this._positionFrame);
+        this._positionFrame = null;
+    }
+    _updatePositionNow(force = false) {
+        if (!this._overlayRef?.hasAttached()) {
+            return;
+        }
+        if (isMobilePopoverViewport() && this.zSticky() && !this._isTriggerVisibleInViewport()) {
+            return;
+        }
+        if (!force && this._shouldSkipMobileKeyboardUpdate()) {
+            return;
+        }
+        this._overlayRef.updatePosition();
+        this._applyMobilePopoverPosition(this._componentRef?.instance.position() ?? this.zPosition());
+    }
+    _markViewportSettling() {
+        this._viewportSettlingUntil = Date.now() + 260;
+    }
+    _shouldDeferForMobileKeyboard() {
+        return this._isMobileOverlayTextInputFocused();
+    }
+    _shouldSkipMobileKeyboardUpdate() {
+        if (!this._isMobileOverlayTextInputFocused()) {
+            return false;
+        }
+        return Date.now() < this._viewportSettlingUntil;
+    }
+    _isMobileOverlayTextInputFocused() {
+        if (!this.zKeyboardSafe() || !isMobilePopoverViewport()) {
+            return false;
+        }
+        const { activeElement } = this._document;
+        if (!(activeElement instanceof HTMLElement)) {
+            return false;
+        }
+        const overlayElement = this._overlayRef?.overlayElement;
+        if (!overlayElement?.contains(activeElement)) {
+            return false;
+        }
+        if (activeElement.isContentEditable) {
+            return true;
+        }
+        return activeElement.matches('input, textarea, select');
+    }
+    _clearViewportResizeTimeout() {
+        for (const timeout of this._viewportResizeTimeouts) {
+            clearTimeout(timeout);
+        }
+        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({
+            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) {
@@ -662,7 +918,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 }, zKeyboardSafe: { classPropertyName: "zKeyboardSafe", publicName: "zKeyboardSafe", 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>
@@ -683,7 +939,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 }] }], zKeyboardSafe: [{ type: i0.Input, args: [{ isSignal: true, alias: "zKeyboardSafe", required: false }] }] } });
 
 class ZPopoverDirective {
     static _openPopovers = new Set();
@@ -701,7 +957,9 @@ 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 });
+    zKeyboardSafe = input(false, { ...(ngDevMode ? { debugName: "zKeyboardSafe" } : {}), transform: zTransform });
     zShow = output();
     zHide = output();
     zHideStart = output();
@@ -723,8 +981,12 @@ class ZPopoverDirective {
     _listenerCleanups = [];
     _positionSubscription = null;
     _scrollSubscription = null;
+    _viewportResizeSubscription = null;
     _resizeObserver = null;
     _hideTimeout = null;
+    _viewportResizeTimeouts = [];
+    _positionFrame = null;
+    _viewportSettlingUntil = 0;
     _isDestroyed = signal(false, ...(ngDevMode ? [{ debugName: "_isDestroyed" }] : []));
     _isVisible = signal(false, ...(ngDevMode ? [{ debugName: "_isVisible" }] : []));
     ngOnInit() {
@@ -803,35 +1065,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._schedulePositionUpdate();
     }
     _createOverlay() {
         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() || this.zKeyboardSafe())) {
+            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();
@@ -845,8 +1109,13 @@ class ZPopoverDirective {
         this._positionSubscription = null;
         this._scrollSubscription?.unsubscribe();
         this._scrollSubscription = null;
+        this._viewportResizeSubscription?.unsubscribe();
+        this._viewportResizeSubscription = null;
+        this._clearViewportResizeTimeout();
+        this._viewportSettlingUntil = 0;
         this._resizeObserver?.disconnect();
         this._resizeObserver = null;
+        this._cancelScheduledPositionUpdate();
         this._overlayRef?.dispose();
         this._overlayRef = null;
         this._componentRef = null;
@@ -934,9 +1203,18 @@ class ZPopoverDirective {
             if (ticking) {
                 return;
             }
+            if (this._shouldDeferForMobileKeyboard()) {
+                this._markViewportSettling();
+                this._scheduleSettledPositionUpdate();
+                return;
+            }
             ticking = true;
             requestAnimationFrame(() => {
-                this._overlayRef?.updatePosition();
+                if (this.zSticky() && !this._isTriggerVisibleInViewport()) {
+                    ticking = false;
+                    return;
+                }
+                this._updatePositionNow();
                 ticking = false;
             });
         };
@@ -947,6 +1225,30 @@ class ZPopoverDirective {
             },
         };
     }
+    _setupViewportResizeReposition() {
+        this._viewportResizeSubscription?.unsubscribe();
+        this._clearViewportResizeTimeout();
+        const onResize = () => {
+            if (!this._overlayRef?.hasAttached()) {
+                return;
+            }
+            if (this._shouldDeferForMobileKeyboard()) {
+                this._markViewportSettling();
+                this._scheduleSettledPositionUpdate();
+                return;
+            }
+            this._schedulePositionUpdate();
+        };
+        window.addEventListener('resize', onResize);
+        window.visualViewport?.addEventListener('resize', onResize);
+        this._viewportResizeSubscription = {
+            unsubscribe: () => {
+                window.removeEventListener('resize', onResize);
+                window.visualViewport?.removeEventListener('resize', onResize);
+                this._clearViewportResizeTimeout();
+            },
+        };
+    }
     _delay(show, delay) {
         this._delaySubject.next({ show, delay });
     }
@@ -976,13 +1278,14 @@ class ZPopoverDirective {
         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(),
@@ -991,11 +1294,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');
@@ -1025,11 +1331,11 @@ 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();
@@ -1042,6 +1348,116 @@ 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);
+        });
+    }
+    _scheduleSettledPositionUpdate() {
+        this._clearViewportResizeTimeout();
+        for (const delay of [80, 180, 320]) {
+            const timeout = setTimeout(() => {
+                this._viewportResizeTimeouts = this._viewportResizeTimeouts.filter(item => item !== timeout);
+                this._schedulePositionUpdate(true);
+            }, delay);
+            this._viewportResizeTimeouts.push(timeout);
+        }
+    }
+    _cancelScheduledPositionUpdate() {
+        if (this._positionFrame === null) {
+            return;
+        }
+        cancelAnimationFrame(this._positionFrame);
+        this._positionFrame = null;
+    }
+    _updatePositionNow(force = false) {
+        if (!this._overlayRef?.hasAttached()) {
+            return;
+        }
+        if (isMobilePopoverViewport() && this.zSticky() && !this._isTriggerVisibleInViewport()) {
+            return;
+        }
+        if (!force && this._shouldSkipMobileKeyboardUpdate()) {
+            return;
+        }
+        const widthConfig = this._getWidthConfig();
+        if (widthConfig.width) {
+            this._overlayRef.updateSize(widthConfig);
+        }
+        this._overlayRef.updatePosition();
+        this._applyMobilePopoverPosition(this._componentRef?.instance.position() ?? this.zPosition());
+    }
+    _markViewportSettling() {
+        this._viewportSettlingUntil = Date.now() + 260;
+    }
+    _shouldDeferForMobileKeyboard() {
+        return this._isMobileOverlayTextInputFocused();
+    }
+    _shouldSkipMobileKeyboardUpdate() {
+        if (!this._isMobileOverlayTextInputFocused()) {
+            return false;
+        }
+        return Date.now() < this._viewportSettlingUntil;
+    }
+    _isMobileOverlayTextInputFocused() {
+        if (!this.zKeyboardSafe() || !isMobilePopoverViewport()) {
+            return false;
+        }
+        const { activeElement } = this._document;
+        if (!(activeElement instanceof HTMLElement)) {
+            return false;
+        }
+        const overlayElement = this._overlayRef?.overlayElement;
+        if (!overlayElement?.contains(activeElement)) {
+            return false;
+        }
+        if (activeElement.isContentEditable) {
+            return true;
+        }
+        return activeElement.matches('input, textarea, select');
+    }
+    _clearViewportResizeTimeout() {
+        for (const timeout of this._viewportResizeTimeouts) {
+            clearTimeout(timeout);
+        }
+        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({
+            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) {
@@ -1088,7 +1504,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 }, zKeyboardSafe: { classPropertyName: "zKeyboardSafe", publicName: "zKeyboardSafe", 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,
@@ -1097,7 +1513,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 }] }], zKeyboardSafe: [{ type: i0.Input, args: [{ isSignal: true, alias: "zKeyboardSafe", 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.