@fundamental-ngx/core 0.61.4 → 0.61.6

package/fesm2022/fundamental-ngx-core-popover.mjs

@@ -608,6 +608,10 @@ class PopoverService {
         this._placementRefresh$ = new Subject();
         /** @hidden */
         this._ignoreTriggers = false;
+        /** @hidden Timer for delayed hover close, allows mouse to travel from trigger to overlay body. */
+        this._hoverCloseTimer = null;
+        /** @hidden Listeners for mouseenter/mouseleave on the overlay element. */
+        this._overlayHoverListeners = [];
         /** @hidden */
         this._modalBodyClass = 'fd-overlay-active';
         /** @hidden */
@@ -676,6 +680,8 @@ class PopoverService {
             }
         });
         this._destroyRef.onDestroy(() => {
+            this._clearHoverCloseTimer();
+            this._removeOverlayHoverListeners();
             this._removeTriggerListeners();
             if (this._overlayRef) {
                 this._overlayRef.detach();
@@ -717,12 +723,12 @@ class PopoverService {
     }
     /** Closes the popover. */
     close(focusActiveElement = true) {
+        this._clearHoverCloseTimer();
+        this._removeOverlayHoverListeners();
         if (this._overlayRef) {
             this._overlayRef.dispose();
         }
-        this._programmaticChange = true;
-        this.isOpen.set(false);
-        this._programmaticChange = false;
+        this._safeSetIsOpen(false);
         this.checkModalBackground();
         this._focusLastActiveElementBeforeOpen(focusActiveElement);
     }
@@ -748,9 +754,8 @@ class PopoverService {
             if (this.fillControlMode()) {
                 this._listenOnResize();
             }
-            this._programmaticChange = true;
-            this.isOpen.set(true);
-            this._programmaticChange = false;
+            this._safeSetIsOpen(true);
+            this._setupOverlayHoverListeners();
             this._listenOnClose();
             this._focusFirstTabbableElement();
             this._onLoad.next(this._getPopoverBody()._elementRef);
@@ -784,9 +789,9 @@ class PopoverService {
         }
     }
     /** Toggles the popover open state */
-    toggle(openAction = true, closeAction = true) {
+    toggle(openAction = true, closeAction = true, focusActiveElement) {
         if (this.isOpen()) {
-            closeAction && this.close();
+            closeAction && this.close(focusActiveElement ?? true);
         }
         else {
             openAction && this.open();
@@ -923,6 +928,7 @@ class PopoverService {
         }
         this._removeTriggerListeners();
         if (this.triggers()?.length) {
+            const hasHoverTrigger = this._hasHoverTriggers();
             this._normalizeTriggers().forEach((trigger) => {
                 this._eventRef.push(this._renderer.listen(this._triggerHtmlElement, trigger.trigger, (event) => {
                     if (this._ignoreTriggers || this.disabled()) {
@@ -930,7 +936,23 @@ class PopoverService {
                     }
                     const closeAction = !!trigger.closeAction;
                     const openAction = !!trigger.openAction;
-                    this.toggle(openAction, closeAction);
+                    // For hover triggers, use delayed close to prevent flickering
+                    // when the mouse travels between the trigger and the popover body.
+                    if (hasHoverTrigger && trigger.trigger === 'mouseenter' && openAction) {
+                        this._clearHoverCloseTimer();
+                        if (!this.isOpen()) {
+                            this.toggle(openAction, closeAction);
+                        }
+                    }
+                    else if (hasHoverTrigger && trigger.trigger === 'mouseleave' && closeAction) {
+                        this._scheduleHoverClose();
+                    }
+                    else {
+                        // When closing due to focusout, don't restore focus — the browser
+                        // is already transferring focus to the next element.
+                        const isFocusOut = trigger.trigger === 'focusout';
+                        this.toggle(openAction, closeAction, isFocusOut ? false : undefined);
+                    }
                     if (trigger.stopPropagation) {
                         event.stopImmediatePropagation();
                     }
@@ -946,6 +968,73 @@ class PopoverService {
         this._triggerElement = trigger;
         this._refreshTriggerListeners();
     }
+    /**
+     * @hidden
+     * Safely sets isOpen signal, deferring if called during Angular's render cycle.
+     * This prevents NG0600 errors when focus events fire during template evaluation.
+     */
+    _safeSetIsOpen(value) {
+        this._programmaticChange = true;
+        try {
+            this.isOpen.set(value);
+            this._programmaticChange = false;
+        }
+        catch (e) {
+            this._programmaticChange = false;
+            // NG0600: Writing to signals during render - defer to next macrotask
+            if (e instanceof Error && e.message?.includes('NG0600')) {
+                setTimeout(() => {
+                    this._programmaticChange = true;
+                    this.isOpen.set(value);
+                    this._programmaticChange = false;
+                });
+            }
+            else {
+                throw e;
+            }
+        }
+    }
+    /** @hidden Whether the current triggers include mouseenter or mouseleave. */
+    _hasHoverTriggers() {
+        return this.triggers().some((t) => {
+            const name = typeof t === 'string' ? t : t.trigger;
+            return name === 'mouseenter' || name === 'mouseleave';
+        });
+    }
+    /** @hidden Clears any pending delayed hover close. */
+    _clearHoverCloseTimer() {
+        if (this._hoverCloseTimer !== null) {
+            clearTimeout(this._hoverCloseTimer);
+            this._hoverCloseTimer = null;
+        }
+    }
+    /** @hidden Schedules a delayed close to allow mouse to travel from trigger to overlay body. */
+    _scheduleHoverClose() {
+        this._clearHoverCloseTimer();
+        this._hoverCloseTimer = setTimeout(() => {
+            this._hoverCloseTimer = null;
+            this.close();
+        }, 50);
+    }
+    /** @hidden Adds mouseenter/mouseleave listeners on the overlay element when hover triggers are active. */
+    _setupOverlayHoverListeners() {
+        this._removeOverlayHoverListeners();
+        if (!this._hasHoverTriggers() || !this._overlayRef) {
+            return;
+        }
+        const overlayElement = this._overlayRef.overlayElement;
+        this._overlayHoverListeners.push(this._renderer.listen(overlayElement, 'mouseenter', () => {
+            this._clearHoverCloseTimer();
+        }));
+        this._overlayHoverListeners.push(this._renderer.listen(overlayElement, 'mouseleave', () => {
+            this._scheduleHoverClose();
+        }));
+    }
+    /** @hidden Removes overlay hover listeners. */
+    _removeOverlayHoverListeners() {
+        this._overlayHoverListeners.forEach((fn) => fn());
+        this._overlayHoverListeners = [];
+    }
     /** @hidden */
     _normalizeTriggers() {
         return this.triggers().map((trigger, index) => {
@@ -1034,7 +1123,7 @@ class PopoverService {
     /** Subscribe to close events from CDK Overlay, to throw proper events, change values */
     _listenOnClose() {
         const body = this._getPopoverBody();
-        const closeEvents$ = merge(this._overlayRef.detachments(), outputToObservable(body.onClose), this._outsideClicks$());
+        const closeEvents$ = merge(this._overlayRef.detachments(), outputToObservable(body.onClose), this._outsideClicks$(), this._escapeKeydowns$());
         // Only use _stopCloseListening$ to stop listening, not _refresh$
         // _refresh$ can emit due to signal effects and would complete the subscription prematurely
         closeEvents$.pipe(takeUntil(this._stopCloseListening$), takeUntilDestroyed(this._destroyRef)).subscribe(() => {
@@ -1045,6 +1134,12 @@ class PopoverService {
     _outsideClicks$() {
         return merge(this._overlayRef.backdropClick(), this._overlayRef._outsidePointerEvents).pipe(filter((event) => this._shouldClose(event)));
     }
+    /** Listener for Escape keydown via CDK overlay's document-level keyboard dispatcher. */
+    _escapeKeydowns$() {
+        return this._overlayRef
+            .keydownEvents()
+            .pipe(filter((event) => this.closeOnEscapeKey() && event.key === 'Escape'));
+    }
     /** @hidden */
     _shouldClose(event) {
         return (this.isOpen() &&
@@ -1381,8 +1476,9 @@ class PopoverComponent {
             if (currentIsOpen !== previousIsOpen) {
                 this.isOpenChange.emit(currentIsOpen);
             }
-            // Sync to service only if not already syncing (prevents loop)
-            if (!this._syncingIsOpen) {
+            // Sync to service only if not already syncing and not in mobile mode (prevents loop).
+            // In mobile mode, the dialog handles open/close — the popover service should not be involved.
+            if (!this._syncingIsOpen && !this.mobile()) {
                 this._syncingIsOpen = true;
                 this._popoverService.isOpen.set(currentIsOpen);
                 this._syncingIsOpen = false;
@@ -1396,6 +1492,10 @@ class PopoverComponent {
             this._popoverService.isOpenChange
                 .pipe(takeUntilDestroyed(this._destroyRef))
                 .subscribe((serviceIsOpen) => {
+                // In mobile mode, the dialog handles open/close — ignore service changes.
+                if (this.mobile()) {
+                    return;
+                }
                 // Only update if different and not already syncing (prevents loop)
                 if (!this._syncingIsOpen && this.isOpen() !== serviceIsOpen) {
                     this._syncingIsOpen = true;
@@ -1411,8 +1511,9 @@ class PopoverComponent {
             const triggerValue = this.trigger();
             // Always sync disabled state to service (for both trigger directive and control usage)
             this._popoverService.disabled.set(effectiveConfig.disabled);
-            // Full sync only when trigger is set (for fdPopoverTrigger directive)
-            if (triggerValue) {
+            // Full sync only when trigger is set and not in mobile mode (for fdPopoverTrigger directive).
+            // In mobile mode, the dialog handles open/close — the popover service should not be involved.
+            if (triggerValue && !this.mobile()) {
                 this._syncToService(effectiveConfig, triggerValue);
             }
         });
@@ -1444,11 +1545,23 @@ class PopoverComponent {
     }
     /** Opens the popover. */
     open() {
-        this._popoverService.open();
+        // In mobile mode, just update the signal — the mobile component's effect handles the dialog.
+        if (this.mobile()) {
+            this.isOpen.set(true);
+        }
+        else {
+            this._popoverService.open();
+        }
     }
     /** Closes the popover. */
     close(focusActiveElement = true) {
-        this._popoverService.close(focusActiveElement);
+        // In mobile mode, just update the signal — the mobile component's effect handles the dialog.
+        if (this.mobile()) {
+            this.isOpen.set(false);
+        }
+        else {
+            this._popoverService.close(focusActiveElement);
+        }
     }
     /** Temporary sets the ignoring of the event triggers. */
     setIgnoreTriggers(ignore) {
@@ -1496,7 +1609,7 @@ class PopoverComponent {
             !activeElement?.classList.contains(SELECT_CLASS_NAMES.selectControl)) {
             // prevent page scrolling on Space keydown
             event.preventDefault();
-            this._popoverService.toggle();
+            this.toggle();
         }
     }
     /** @hidden - Sync all input signals to the service */
@@ -1689,9 +1802,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                 }]
         }] });
 
+/**
+ * Builds a computed PopoverConfig from individual signal accessors.
+ * Reads all provided accessors reactively and assembles a config object.
+ *
+ * @example
+ * ```typescript
+ * readonly popoverConfig = buildPopoverConfig({
+ *     placement: () => this.placement() ?? 'bottom',
+ *     triggers: this.triggers,
+ *     disabled: this.disabled,
+ * });
+ * ```
+ */
+function buildPopoverConfig(signals) {
+    return computed(() => {
+        const config = {};
+        for (const key of Object.keys(signals)) {
+            const accessor = signals[key];
+            if (accessor) {
+                config[key] = accessor();
+            }
+        }
+        return config;
+    });
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BasePopoverClass, FD_POPOVER_COMPONENT, POPOVER_COMPONENT, PopoverBodyComponent, PopoverBodyDirective, PopoverBodyFooterDirective, PopoverBodyHeaderDirective, PopoverComponent, PopoverContainerDirective, PopoverControlComponent, PopoverMobileComponent, PopoverMobileModule, PopoverModule, PopoverService, PopoverTriggerDirective, SELECT_CLASS_NAMES };
+export { BasePopoverClass, FD_POPOVER_COMPONENT, POPOVER_COMPONENT, PopoverBodyComponent, PopoverBodyDirective, PopoverBodyFooterDirective, PopoverBodyHeaderDirective, PopoverComponent, PopoverContainerDirective, PopoverControlComponent, PopoverMobileComponent, PopoverMobileModule, PopoverModule, PopoverService, PopoverTriggerDirective, SELECT_CLASS_NAMES, buildPopoverConfig };
 //# sourceMappingURL=fundamental-ngx-core-popover.mjs.map