@shival99/z-ui 2.0.52 → 2.0.54

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

@@ -6,7 +6,7 @@ import { signal, computed, ChangeDetectionStrategy, Component, inject, Renderer2
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ZOverlayContainerService } from '@shival99/z-ui/services';
 import { zMergeClasses, zIsMobileViewport, zTransform } from '@shival99/z-ui/utils';
-import { Subject, switchMap, of, timer, map, filter, fromEvent, throttleTime } from 'rxjs';
+import { Subject, switchMap, of, timer, map, filter } from 'rxjs';
 import { cva } from 'class-variance-authority';
 
 const zPopoverVariants = cva([
@@ -194,11 +194,11 @@ function getPopoverOverlaySize(widthConfig = {}) {
 function getPopoverRenderPosition(position, _mobile = isMobilePopoverViewport()) {
     return position;
 }
-function getMobilePopoverFallbackPositions(position) {
-    return getPopoverFallbackPositions(position, 0).map(pos => ({
+function getMobilePopoverFallbackPositions(position, offset) {
+    return getPopoverFallbackPositions(position, offset).map(pos => ({
         ...pos,
-        offsetX: 0,
-        offsetY: 0,
+        offsetX: pos.offsetX ?? 0,
+        offsetY: pos.offsetY ?? 0,
     }));
 }
 function clampPopoverPosition(value, min, max) {
@@ -384,7 +384,7 @@ function getPopoverFallbackPositions(position, offset) {
 function createPopoverPositionStrategy(overlayPositionBuilder, origin, position, offset) {
     const mobile = isMobilePopoverViewport();
     const positions = mobile
-        ? getMobilePopoverFallbackPositions(position)
+        ? getMobilePopoverFallbackPositions(position, offset)
         : getPopoverFallbackPositions(position, offset);
     return overlayPositionBuilder
         .flexibleConnectedTo(origin)
@@ -463,6 +463,7 @@ class ZPopoverComponent {
     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();
@@ -472,7 +473,9 @@ class ZPopoverComponent {
     _viewportResizeSubscription = null;
     _resizeObserver = null;
     _hideTimeout = null;
+    _viewportResizeTimeouts = [];
     _positionFrame = null;
+    _viewportSettlingUntil = 0;
     _isVisible = signal(false, ...(ngDevMode ? [{ debugName: "_isVisible" }] : []));
     ngOnInit() {
         if (!isPlatformBrowser(this._platformId)) {
@@ -542,7 +545,7 @@ class ZPopoverComponent {
         if (!this._isVisible()) {
             return;
         }
-        this._updatePositionNow();
+        this._schedulePositionUpdate();
     }
     _createOverlay() {
         const positionStrategy = createPopoverPositionStrategy(this._overlayPositionBuilder, this._trigger(), this.zPosition(), this.zOffset());
@@ -557,7 +560,7 @@ class ZPopoverComponent {
         if (this.zScrollClose()) {
             return this._overlay.scrollStrategies.close();
         }
-        if (isMobilePopoverViewport() && this.zSticky()) {
+        if (isMobilePopoverViewport() && (this.zSticky() || this.zKeyboardSafe())) {
             return this._overlay.scrollStrategies.noop();
         }
         return this._overlay.scrollStrategies.reposition({ scrollThrottle: 10, autoClose: false });
@@ -569,6 +572,8 @@ class ZPopoverComponent {
         this._scrollSubscription = null;
         this._viewportResizeSubscription?.unsubscribe();
         this._viewportResizeSubscription = null;
+        this._clearViewportResizeTimeout();
+        this._viewportSettlingUntil = 0;
         this._resizeObserver?.disconnect();
         this._resizeObserver = null;
         this._cancelScheduledPositionUpdate();
@@ -647,6 +652,11 @@ class ZPopoverComponent {
             if (ticking) {
                 return;
             }
+            if (this._shouldDeferForMobileKeyboard()) {
+                this._markViewportSettling();
+                this._scheduleSettledPositionUpdate();
+                return;
+            }
             ticking = true;
             requestAnimationFrame(() => {
                 if (this.zSticky() && !this._isTriggerVisibleInViewport()) {
@@ -666,14 +676,27 @@ class ZPopoverComponent {
     }
     _setupViewportResizeReposition() {
         this._viewportResizeSubscription?.unsubscribe();
-        this._viewportResizeSubscription = fromEvent(window, 'resize')
-            .pipe(throttleTime(60), takeUntilDestroyed(this._destroyRef))
-            .subscribe(() => {
+        this._clearViewportResizeTimeout();
+        const onResize = () => {
             if (!this._overlayRef?.hasAttached()) {
                 return;
             }
-            this._updatePositionNow();
-        });
+            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();
@@ -740,10 +763,6 @@ class ZPopoverComponent {
             }
         });
         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);
@@ -752,15 +771,25 @@ class ZPopoverComponent {
     _updatePositionAfterContentSettles() {
         this._schedulePositionUpdate();
     }
-    _schedulePositionUpdate() {
+    _schedulePositionUpdate(force = false) {
         if (this._positionFrame !== null) {
             return;
         }
         this._positionFrame = requestAnimationFrame(() => {
             this._positionFrame = null;
-            this._updatePositionNow();
+            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;
@@ -768,16 +797,54 @@ class ZPopoverComponent {
         cancelAnimationFrame(this._positionFrame);
         this._positionFrame = null;
     }
-    _updatePositionNow() {
+    _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;
@@ -851,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 }, 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: `
+    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>
@@ -872,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 }] }], zSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSticky", 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();
@@ -892,6 +959,7 @@ class ZPopoverDirective {
     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();
@@ -916,7 +984,9 @@ class ZPopoverDirective {
     _viewportResizeSubscription = null;
     _resizeObserver = null;
     _hideTimeout = null;
+    _viewportResizeTimeouts = [];
     _positionFrame = null;
+    _viewportSettlingUntil = 0;
     _isDestroyed = signal(false, ...(ngDevMode ? [{ debugName: "_isDestroyed" }] : []));
     _isVisible = signal(false, ...(ngDevMode ? [{ debugName: "_isVisible" }] : []));
     ngOnInit() {
@@ -995,7 +1065,7 @@ class ZPopoverDirective {
         if (!this._isVisible()) {
             return;
         }
-        this._updatePositionNow();
+        this._schedulePositionUpdate();
     }
     _createOverlay() {
         const positionStrategy = createPopoverPositionStrategy(this._overlayPositionBuilder, this._getTriggerElement(), this.zPosition(), this.zOffset());
@@ -1011,7 +1081,7 @@ class ZPopoverDirective {
         if (this.zScrollClose()) {
             return this._overlay.scrollStrategies.close();
         }
-        if (isMobilePopoverViewport() && this.zSticky()) {
+        if (isMobilePopoverViewport() && (this.zSticky() || this.zKeyboardSafe())) {
             return this._overlay.scrollStrategies.noop();
         }
         return this._overlay.scrollStrategies.reposition();
@@ -1041,6 +1111,8 @@ class ZPopoverDirective {
         this._scrollSubscription = null;
         this._viewportResizeSubscription?.unsubscribe();
         this._viewportResizeSubscription = null;
+        this._clearViewportResizeTimeout();
+        this._viewportSettlingUntil = 0;
         this._resizeObserver?.disconnect();
         this._resizeObserver = null;
         this._cancelScheduledPositionUpdate();
@@ -1131,6 +1203,11 @@ class ZPopoverDirective {
             if (ticking) {
                 return;
             }
+            if (this._shouldDeferForMobileKeyboard()) {
+                this._markViewportSettling();
+                this._scheduleSettledPositionUpdate();
+                return;
+            }
             ticking = true;
             requestAnimationFrame(() => {
                 if (this.zSticky() && !this._isTriggerVisibleInViewport()) {
@@ -1150,18 +1227,27 @@ class ZPopoverDirective {
     }
     _setupViewportResizeReposition() {
         this._viewportResizeSubscription?.unsubscribe();
-        this._viewportResizeSubscription = fromEvent(window, 'resize')
-            .pipe(throttleTime(60), takeUntilDestroyed(this._destroyRef))
-            .subscribe(() => {
+        this._clearViewportResizeTimeout();
+        const onResize = () => {
             if (!this._overlayRef?.hasAttached()) {
                 return;
             }
-            const widthConfig = this._getWidthConfig();
-            if (widthConfig.width) {
-                this._overlayRef.updateSize(widthConfig);
+            if (this._shouldDeferForMobileKeyboard()) {
+                this._markViewportSettling();
+                this._scheduleSettledPositionUpdate();
+                return;
             }
-            this._updatePositionNow();
-        });
+            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 });
@@ -1254,10 +1340,6 @@ class ZPopoverDirective {
         });
         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);
         }
@@ -1269,15 +1351,25 @@ class ZPopoverDirective {
     _updatePositionAfterContentSettles() {
         this._schedulePositionUpdate();
     }
-    _schedulePositionUpdate() {
+    _schedulePositionUpdate(force = false) {
         if (this._positionFrame !== null) {
             return;
         }
         this._positionFrame = requestAnimationFrame(() => {
             this._positionFrame = null;
-            this._updatePositionNow();
+            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;
@@ -1285,13 +1377,16 @@ class ZPopoverDirective {
         cancelAnimationFrame(this._positionFrame);
         this._positionFrame = null;
     }
-    _updatePositionNow() {
+    _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);
@@ -1299,6 +1394,41 @@ class ZPopoverDirective {
         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;
@@ -1374,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 }, 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 });
+    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,
@@ -1383,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 }] }], 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"] }] } });
+        }], 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.