@radix-ng/primitives 0.33.0 → 0.33.1

package/fesm2022/radix-ng-primitives-navigation-menu.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Output, Input, Component, InjectionToken, inject, ElementRef, input, contentChild, signal, Directive, NgZone, TemplateRef, booleanAttribute, Renderer2, computed, effect, untracked, runInInjectionContext, contentChildren, forwardRef, numberAttribute, output, ViewContainerRef, NgModule } from '@angular/core';
+import { EventEmitter, Output, Input, Component, InjectionToken, inject, ElementRef, input, contentChild, signal, Directive, NgZone, TemplateRef, booleanAttribute, Renderer2, computed, effect, untracked, runInInjectionContext, contentChildren, forwardRef, numberAttribute, output, ViewContainerRef, DestroyRef, NgModule } from '@angular/core';
 import { RdxVisuallyHiddenDirective } from '@radix-ng/primitives/visually-hidden';
 import { injectDocument, ESCAPE, ENTER, SPACE, TAB, injectWindow, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP } from '@radix-ng/primitives/core';
 import * as i1 from '@radix-ng/primitives/roving-focus';
@@ -7,6 +7,7 @@ import { RdxRovingFocusItemDirective, RdxRovingFocusGroupDirective } from '@radi
 import { FocusKeyManager } from '@angular/cdk/a11y';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Subject, map, debounce, timer, tap } from 'rxjs';
+import { usePresence } from '@radix-ng/primitives/presence';
 
 class RdxNavigationMenuFocusProxyComponent {
     constructor() {
@@ -138,26 +139,38 @@ function makeContentId(baseId, value) {
 function getMotionAttribute(currentValue, previousValue, itemValue, itemValues, dir) {
     // reverse values in RTL
     const values = dir === 'rtl' ? [...itemValues].reverse() : itemValues;
-    const currentIndex = values.indexOf(currentValue);
-    const prevIndex = values.indexOf(previousValue);
+    const currentIndex = currentValue !== null ? values.indexOf(currentValue) : -1;
+    const prevIndex = previousValue !== null ? values.indexOf(previousValue) : -1;
     const isSelected = itemValue === currentValue;
-    const wasSelected = prevIndex === values.indexOf(itemValue);
-    // only update selected and last selected content
-    if (!isSelected && !wasSelected)
+    const wasSelected = itemValue === previousValue && previousValue !== null;
+    // Preserve motion attribute for items not directly involved in the transition
+    // (This matches React's behaviour, using a ref/signal might be needed
+    // in the component using this function to fully replicate React's prevMotionAttributeRef)
+    // For now, returning null if not involved, as per the original code's intent here.
+    if (!isSelected && !wasSelected) {
         return null;
-    // don't provide direction on initial open
+    }
+    // handle transitions between items
     if (currentIndex !== -1 && prevIndex !== -1) {
-        // if moving to this item from another
-        if (isSelected && prevIndex !== -1) {
+        // if moving to this item (isSelected)
+        if (isSelected) {
             return currentIndex > prevIndex ? 'from-end' : 'from-start';
         }
-        // if leaving this item for another
-        if (wasSelected && currentIndex !== -1) {
+        // if moving away from this item (wasSelected)
+        if (wasSelected) {
             return currentIndex > prevIndex ? 'to-start' : 'to-end';
         }
     }
-    // otherwise entering/leaving the list entirely
-    return isSelected ? 'from-start' : 'from-end';
+    // handle initial open (prevIndex is -1, currentIndex is valid)
+    if (isSelected && prevIndex === -1) {
+        return null;
+    }
+    // handle closing entirely (currentIndex is -1, prevIndex is valid)
+    if (wasSelected && currentIndex === -1) {
+        return null;
+    }
+    // fallback if none of the above conditions met (should ideally not happen with clear states)
+    return null;
 }
 /**
  * Focus the first element in a list of candidates
@@ -1355,47 +1368,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
         }], ctorParameters: () => [] });
 
 class RdxNavigationMenuViewportDirective {
-    get open() {
-        return Boolean(this.context.value() || this.forceMount());
-    }
-    onKeydown(event) {
-        // only handle if viewport is open
-        if (!this.open)
-            return;
-        // get all tabbable elements in the viewport
-        const tabbableElements = getTabbableCandidates(this.elementRef.nativeElement);
-        if (!tabbableElements.length)
-            return;
-        // find the currently focused element
-        const activeElement = this.document.activeElement;
-        const currentIndex = tabbableElements.findIndex((el) => el === activeElement);
-        if (event.key === ARROW_DOWN) {
-            event.preventDefault();
-            if (currentIndex >= 0 && currentIndex < tabbableElements.length - 1) {
-                // focus the next element
-                tabbableElements[currentIndex + 1].focus();
-            }
-            else if (currentIndex === -1 || currentIndex === tabbableElements.length - 1) {
-                // if no element is focused or we're at the end, focus the first element
-                tabbableElements[0].focus();
-            }
-        }
-        else if (event.key === ARROW_UP) {
-            event.preventDefault();
-            if (currentIndex > 0) {
-                // focus the previous element
-                tabbableElements[currentIndex - 1].focus();
-            }
-            else if (currentIndex === 0) {
-                // if at the first element, loop to the last element
-                tabbableElements[tabbableElements.length - 1].focus();
-            }
-            else if (currentIndex === -1) {
-                // if no element is focused, focus the last element
-                tabbableElements[tabbableElements.length - 1].focus();
-            }
-        }
-    }
     constructor() {
         this.context = injectNavigationMenu();
         this.document = injectDocument();
@@ -1403,6 +1375,8 @@ class RdxNavigationMenuViewportDirective {
         this.elementRef = inject(ElementRef);
         this.viewContainerRef = inject(ViewContainerRef);
         this.renderer = inject(Renderer2);
+        this.zone = inject(NgZone);
+        this.destroyRef = inject(DestroyRef);
         /**
          * Used to keep the viewport rendered and available in the DOM, even when closed.
          * Useful for animations.
@@ -1411,61 +1385,59 @@ class RdxNavigationMenuViewportDirective {
         this.forceMount = input(false, { transform: booleanAttribute });
         this._contentNodes = signal(new Map());
         this._activeContentNode = signal(null);
+        this._leavingContentNode = signal(null);
         this._viewportSize = signal(null);
-        this._resizeObserver = new ResizeObserver(() => this.updateSize());
-        // compute the active content value - either current value if open, or previous value if closing
         this.activeContentValue = computed(() => {
-            return this.open ? this.context.value() : this.context.previousValue();
+            if (!isRootNavigationMenu(this.context))
+                return null;
+            return this.context.value() || this.context.previousValue();
         });
-        // size for viewport CSS variables
-        this.viewportSize = computed(() => this._viewportSize());
-        // setup effect to manage content
-        effect(() => {
-            const activeValue = this.activeContentValue();
-            const open = this.open;
-            untracked(() => {
-                // handle visibility based on open state
-                this.renderer.setStyle(this.elementRef.nativeElement, 'display', open ? 'block' : 'none');
-                if (isRootNavigationMenu(this.context) && this.context.viewportContent) {
-                    const viewportContent = this.context.viewportContent();
-                    if (viewportContent.has(activeValue)) {
-                        const contentData = viewportContent.get(activeValue);
-                        // only render content when we have a templateRef
-                        if (contentData?.templateRef) {
-                            this.renderContent(contentData.templateRef, activeValue);
-                        }
-                    }
-                }
-            });
+        this.isOpen = computed(() => {
+            if (!isRootNavigationMenu(this.context))
+                return false;
+            return Boolean(this.context.value() || this.forceMount());
         });
+        this.dataState = computed(() => getOpenStateLabel(this.isOpen()));
+        this.viewportSize = computed(() => this._viewportSize());
+        this._resizeObserver = new ResizeObserver(() => this.updateSize());
+        this.setupViewportEffect();
     }
     ngOnInit() {
-        // register viewport with context
         if (isRootNavigationMenu(this.context) && this.context.onViewportChange) {
             this.context.onViewportChange(this.elementRef.nativeElement);
         }
     }
     ngOnDestroy() {
         this._resizeObserver.disconnect();
-        // clear all views
-        this._contentNodes().forEach((node) => {
-            if (node.embeddedView) {
-                node.embeddedView.destroy();
-            }
-        });
-        // unregister viewport
+        // clean up any remaining nodes/views/subscriptions
+        this._contentNodes().forEach((node) => this.cleanupAfterLeave(node));
         if (isRootNavigationMenu(this.context) && this.context.onViewportChange) {
             this.context.onViewportChange(null);
         }
     }
-    getOpenState() {
-        return getOpenStateLabel(this.open);
+    onKeydown(event) {
+        if (!this.isOpen())
+            return;
+        const tabbableElements = getTabbableCandidates(this.elementRef.nativeElement);
+        if (!tabbableElements.length)
+            return;
+        const activeElement = this.document.activeElement;
+        const currentIndex = tabbableElements.findIndex((el) => el === activeElement);
+        if (event.key === ARROW_DOWN) {
+            event.preventDefault();
+            const nextIndex = currentIndex >= 0 && currentIndex < tabbableElements.length - 1 ? currentIndex + 1 : 0;
+            tabbableElements[nextIndex]?.focus();
+        }
+        else if (event.key === ARROW_UP) {
+            event.preventDefault();
+            const prevIndex = currentIndex > 0 ? currentIndex - 1 : tabbableElements.length - 1;
+            tabbableElements[prevIndex]?.focus();
+        }
     }
     onPointerEnter() {
         if (isRootNavigationMenu(this.context) && this.context.onContentEnter) {
             this.context.onContentEnter();
         }
-        // update pointer tracking state
         if (isRootNavigationMenu(this.context) && this.context.setContentPointerState) {
             this.context.setContentPointerState(true);
         }
@@ -1474,114 +1446,267 @@ class RdxNavigationMenuViewportDirective {
         if (isRootNavigationMenu(this.context) && this.context.onContentLeave) {
             this.context.onContentLeave();
         }
-        // Update pointer tracking state
         if (isRootNavigationMenu(this.context) && this.context.setContentPointerState) {
             this.context.setContentPointerState(false);
         }
     }
-    updateSize() {
-        const activeNode = this._activeContentNode()?.element;
-        if (!activeNode)
-            return;
-        // force layout recalculation while keeping element in the DOM
-        this.window.getComputedStyle(activeNode).getPropertyValue('width');
-        const firstChild = activeNode.firstChild;
-        const width = Math.ceil(firstChild.offsetWidth);
-        const height = Math.ceil(firstChild.offsetHeight);
-        // update size with valid dimensions (but only if not zero)
-        if (width !== 0 && height !== 0) {
-            this._viewportSize.set({ width, height });
-        }
-    }
-    renderContent(templateRef, contentValue) {
-        // check if we already have a view for this content
-        let contentNode = this._contentNodes().get(contentValue);
-        if (!contentNode) {
-            try {
-                // create a new embedded view
-                const embeddedView = this.viewContainerRef.createEmbeddedView(templateRef);
-                embeddedView.detectChanges();
-                // create a container for the view
-                const container = this.renderer.createElement('div');
-                this.renderer.setAttribute(container, 'class', 'NavigationMenuContentWrapper');
-                this.renderer.setAttribute(container, 'data-content-value', contentValue);
-                this.renderer.setStyle(container, 'width', '100%');
-                const viewportContent = this.context.viewportContent && this.context.viewportContent();
-                if (!viewportContent)
+    setupViewportEffect() {
+        effect(() => {
+            const currentActiveValue = this.context.value();
+            const previousActiveValue = this.context.previousValue();
+            const forceMount = this.forceMount();
+            untracked(() => {
+                // ensure context is root before proceeding
+                if (!isRootNavigationMenu(this.context) || !this.context.viewportContent) {
                     return;
-                const contentData = viewportContent.get(contentValue);
-                // apply motion attribute if available
-                if (contentData?.getMotionAttribute) {
-                    const motionAttr = contentData.getMotionAttribute();
-                    if (motionAttr) {
-                        this.renderer.setAttribute(container, 'data-motion', motionAttr);
+                }
+                const allContentData = this.context.viewportContent();
+                const currentNodesMap = this._contentNodes();
+                let enteringNode = null;
+                let leavingNode = this._leavingContentNode(); // get potentially already leaving node
+                // 1. Identify Entering Node
+                if (currentActiveValue && allContentData.has(currentActiveValue)) {
+                    enteringNode = this.getOrCreateContentNode(currentActiveValue);
+                }
+                // 2. Identify Leaving Node
+                const nodeThatWasActive = previousActiveValue ? currentNodesMap.get(previousActiveValue) : null;
+                // if there was a previously active node, it's different from the entering one,
+                // and it's not already leaving, mark it for removal.
+                if (nodeThatWasActive && nodeThatWasActive !== enteringNode && nodeThatWasActive !== leavingNode) {
+                    // if another node was already leaving, force complete its transition
+                    if (leavingNode) {
+                        this.forceCompleteLeaveTransition(leavingNode);
+                    }
+                    leavingNode = nodeThatWasActive;
+                    this._leavingContentNode.set(leavingNode);
+                }
+                // 3. Handle Entering Node
+                if (enteringNode) {
+                    // cancel any pending leave transition for this node if it was leaving
+                    if (enteringNode === leavingNode) {
+                        this.cancelLeaveTransition(enteringNode);
+                        leavingNode = null;
+                        this._leavingContentNode.set(null);
                     }
+                    // ensure it's in the DOM and set state to open
+                    this.addNodeToDOM(enteringNode);
+                    this.setNodeState(enteringNode, 'open'); // Triggers enter animation via data-state
+                    this._activeContentNode.set(enteringNode);
+                    this.updateSize(); // Update size based on the entering node
+                }
+                else {
+                    // no node entering, clear active node state
+                    this._activeContentNode.set(null);
                 }
-                // apply additional a11y attributes to the first root node
-                if (contentData?.additionalAttrs && embeddedView.rootNodes.length > 0) {
-                    const rootNode = embeddedView.rootNodes[0];
-                    // check if rootNode has setAttribute (is an Element)
-                    if (rootNode.setAttribute) {
-                        Object.entries(contentData.additionalAttrs).forEach(([attr, value]) => {
-                            // don't override existing attributes that the user might have set manually
-                            if (!rootNode.hasAttribute(attr) || attr === 'id') {
-                                this.renderer.setAttribute(rootNode, attr, value);
-                            }
-                        });
+                // 4. Handle Leaving Node
+                if (leavingNode) {
+                    if (forceMount) {
+                        // if forceMount, just mark as closed, don't trigger removal animation
+                        this.setNodeState(leavingNode, 'closed');
+                        this._leavingContentNode.set(null); // No longer considered "leaving"
+                    }
+                    else {
+                        // start the leave transition (usePresence handles DOM removal)
+                        this.startLeaveTransition(leavingNode);
                     }
                 }
-                // add each root node to the container
-                embeddedView.rootNodes.forEach((node) => {
-                    this.renderer.appendChild(container, node);
+            });
+        });
+    }
+    // gets or creates the ContentNode (wrapper + view)
+    getOrCreateContentNode(contentValue) {
+        const existingNode = this._contentNodes().get(contentValue);
+        if (existingNode && !existingNode.embeddedView.destroyed) {
+            return existingNode;
+        }
+        // create if doesn't exist or view was destroyed
+        if (!isRootNavigationMenu(this.context) || !this.context.viewportContent)
+            return null;
+        const allContentData = this.context.viewportContent();
+        const contentData = allContentData.get(contentValue);
+        const templateRef = contentData?.templateRef;
+        if (!templateRef) {
+            console.error(`No templateRef found for content value: ${contentValue}`);
+            return null;
+        }
+        try {
+            const embeddedView = this.viewContainerRef.createEmbeddedView(templateRef);
+            const container = this.renderer.createElement('div');
+            this.renderer.setAttribute(container, 'class', 'NavigationMenuContentWrapper');
+            this.renderer.setAttribute(container, 'data-content-value', contentValue);
+            embeddedView.rootNodes.forEach((node) => this.renderer.appendChild(container, node));
+            const newNode = {
+                embeddedView,
+                element: container,
+                contentValue,
+                state: 'closed'
+            };
+            const newMap = new Map(this._contentNodes());
+            newMap.set(contentValue, newNode);
+            this._contentNodes.set(newMap);
+            return newNode;
+        }
+        catch (error) {
+            console.error(`Error creating content node for ${contentValue}:`, error);
+            return null;
+        }
+    }
+    // adds node element to viewport DOM if not already present
+    addNodeToDOM(node) {
+        if (!this.elementRef.nativeElement.contains(node.element)) {
+            this.renderer.appendChild(this.elementRef.nativeElement, node.element);
+            // observe size only when added to DOM
+            this._resizeObserver.observe(node.element);
+        }
+    }
+    // removes node element from viewport DOM
+    removeNodeFromDOM(node) {
+        if (this.elementRef.nativeElement.contains(node.element)) {
+            this._resizeObserver.unobserve(node.element); // stop observing before removal
+            this.renderer.removeChild(this.elementRef.nativeElement, node.element);
+        }
+    }
+    // updates the data-state and motion attributes
+    setNodeState(node, state) {
+        if (node.state === state)
+            return; // avoid redundant updates
+        node.state = state;
+        this.renderer.setAttribute(node.element, 'data-state', state);
+        // apply motion attribute based on context
+        if (isRootNavigationMenu(this.context) && this.context.viewportContent) {
+            const contentData = this.context.viewportContent().get(node.contentValue);
+            if (contentData?.getMotionAttribute) {
+                // get motion based on current state transition
+                const motionAttr = contentData.getMotionAttribute();
+                if (motionAttr) {
+                    this.renderer.setAttribute(node.element, 'data-motion', motionAttr);
+                }
+                else {
+                    this.renderer.removeAttribute(node.element, 'data-motion');
+                }
+            }
+            else {
+                this.renderer.removeAttribute(node.element, 'data-motion');
+            }
+        }
+        // apply A11y attributes (might only be needed on open?)
+        if (state === 'open') {
+            this.applyA11yAttributes(node);
+        }
+    }
+    // apply A11y attributes to the first child element
+    applyA11yAttributes(node) {
+        if (!isRootNavigationMenu(this.context) || !this.context.viewportContent)
+            return;
+        const contentData = this.context.viewportContent().get(node.contentValue);
+        if (contentData?.additionalAttrs && node.embeddedView.rootNodes.length > 0) {
+            const firstRootNode = node.embeddedView.rootNodes[0];
+            if (firstRootNode) {
+                Object.entries(contentData.additionalAttrs).forEach(([attr, value]) => {
+                    this.renderer.setAttribute(firstRootNode, attr, value);
                 });
-                // set styles for proper measurement and display
-                this.renderer.setStyle(container, 'position', 'relative');
-                this.renderer.setStyle(container, 'visibility', 'visible');
-                this.renderer.setStyle(container, 'pointer-events', 'auto');
-                this.renderer.setStyle(container, 'display', 'block');
-                // store in cache
-                contentNode = { embeddedView, element: container };
+            }
+        }
+    }
+    startLeaveTransition(node) {
+        // ensure node exists and isn't already leaving with an active subscription
+        if (!node || node.transitionSubscription) {
+            node.transitionSubscription?.unsubscribe();
+            return;
+        }
+        const startFn = () => {
+            this.setNodeState(node, 'closed');
+            return () => this.cleanupAfterLeave(node);
+        };
+        const options = {
+            animation: true, // assuming CSS animations/transitions handle the exit
+            state: 'continue' // start the leave process
+        };
+        node.transitionSubscription = usePresence(this.zone, node.element, startFn, options)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            complete: () => {
+                this.cleanupAfterLeave(node);
+            }
+        });
+    }
+    /**
+     * Cleanup function called after leave animation finishes
+     * @param node The node that is leaving
+     */
+    cleanupAfterLeave(node) {
+        // check if this node is still marked as the one leaving
+        if (this._leavingContentNode() === node) {
+            this.removeNodeFromDOM(node);
+            if (!this.forceMount() && node.embeddedView && !node.embeddedView.destroyed) {
+                node.embeddedView.destroy();
+                // Remove from cache if destroyed
                 const newMap = new Map(this._contentNodes());
-                newMap.set(contentValue, contentNode);
+                newMap.delete(node.contentValue);
                 this._contentNodes.set(newMap);
             }
-            catch (error) {
-                console.error('Error in renderContent:', error);
-                return;
-            }
+            node.transitionSubscription = null;
+            this._leavingContentNode.set(null);
         }
-        if (contentNode) {
-            this.updateActiveContent(contentNode);
+        else {
+            // if this node is NOT the one currently marked as leaving, it means
+            // a new transition started before this one finished. Just clean up DOM/Sub.
+            this.removeNodeFromDOM(node);
+            node.transitionSubscription?.unsubscribe();
+            node.transitionSubscription = null;
         }
     }
-    updateActiveContent(contentNode) {
-        if (contentNode !== this._activeContentNode()) {
-            // clear viewport
-            while (this.elementRef.nativeElement.firstChild) {
-                this.renderer.removeChild(this.elementRef.nativeElement, this.elementRef.nativeElement.firstChild);
-            }
-            // add content to viewport
-            this.renderer.appendChild(this.elementRef.nativeElement, contentNode.element);
-            // update active content reference
-            this._activeContentNode.set(contentNode);
-            // setup resize observation
-            this._resizeObserver.disconnect();
-            this._resizeObserver.observe(contentNode.element);
-            // measure after adding to DOM
-            setTimeout(() => this.updateSize(), 0);
-            // measure again after a frame to catch any style changes
-            requestAnimationFrame(() => this.updateSize());
+    /**
+     * Cancels an ongoing leave transition (e.g., if user hovers back)
+     * @param node The node that is leaving
+     */
+    cancelLeaveTransition(node) {
+        node.transitionSubscription?.unsubscribe();
+        node.transitionSubscription = null;
+    }
+    /**
+     * Force completes a leave transition (e.g., if another leave starts)
+     * @param node The node that is leaving
+     */
+    forceCompleteLeaveTransition(node) {
+        if (node && node.transitionSubscription) {
+            node.transitionSubscription.unsubscribe();
+            // perform cleanup immediately
+            this.cleanupAfterLeave(node);
         }
     }
+    updateSize() {
+        const activeNode = this._activeContentNode()?.element; // measure the currently active node
+        if (!activeNode || !activeNode.isConnected)
+            return;
+        const firstChild = activeNode.firstChild;
+        if (!firstChild)
+            return;
+        this.window.requestAnimationFrame(() => {
+            // keep rAF here for measurement stability
+            activeNode.getBoundingClientRect(); // force layout
+            const width = Math.ceil(firstChild.offsetWidth);
+            const height = Math.ceil(firstChild.offsetHeight);
+            if (width !== 0 || height !== 0) {
+                const currentSize = this._viewportSize();
+                if (!currentSize || currentSize.width !== width || currentSize.height !== height) {
+                    this._viewportSize.set({ width, height });
+                }
+            }
+            else if (this._viewportSize() !== null) {
+                this._viewportSize.set(null);
+            }
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuViewportDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxNavigationMenuViewportDirective, isStandalone: true, selector: "[rdxNavigationMenuViewport]", inputs: { forceMount: { classPropertyName: "forceMount", publicName: "forceMount", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)", "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()" }, properties: { "attr.data-state": "getOpenState()", "attr.data-orientation": "context.orientation", "style.--radix-navigation-menu-viewport-width.px": "viewportSize()?.width", "style.--radix-navigation-menu-viewport-height.px": "viewportSize()?.height" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxNavigationMenuViewportDirective, isStandalone: true, selector: "[rdxNavigationMenuViewport]", inputs: { forceMount: { classPropertyName: "forceMount", publicName: "forceMount", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)", "pointerenter": "onPointerEnter()", "pointerleave": "onPointerLeave()" }, properties: { "attr.data-state": "dataState()", "attr.data-orientation": "context.orientation", "style.--radix-navigation-menu-viewport-width.px": "viewportSize()?.width", "style.--radix-navigation-menu-viewport-height.px": "viewportSize()?.height" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxNavigationMenuViewportDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxNavigationMenuViewport]',
                     host: {
-                        '[attr.data-state]': 'getOpenState()',
+                        '[attr.data-state]': 'dataState()',
                         '[attr.data-orientation]': 'context.orientation',
                         '[style.--radix-navigation-menu-viewport-width.px]': 'viewportSize()?.width',
                         '[style.--radix-navigation-menu-viewport-height.px]': 'viewportSize()?.height',