@vectoriox/iox-builder 1.4.21 → 1.4.22

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1090,6 +1090,12 @@ class InteractionEngineService {
         this.attached = new Map();
         /** Elements that have had pre-state applied (hidden by attach). */
         this.preStatedElements = new Set();
+        /**
+         * Pre-states queued for elements that weren't registered yet when the owner
+         * node's attach() ran. Keyed by target node ID. Consumed when the target
+         * element's own attach() fires.
+         */
+        this.pendingPreStates = new Map();
         /** Action types that animate an element from hidden → visible. */
         this.ENTRANCE_TYPES = new Set([
             'fadeIn', 'moveUp', 'moveDown', 'moveLeft', 'moveRight', 'scaleIn', 'show',
@@ -1099,22 +1105,40 @@ class InteractionEngineService {
     }
     /** Wire all interactions for a node to its rendered DOM element. */
     attach(node) {
-        if (!node.interactions?.length)
-            return;
         const ref = this.overlayService.getNodeRef(node);
         if (!ref)
             return;
+        // Apply any pre-states that were queued by other nodes that target THIS
+        // element with an entrance animation but registered before we did.
+        if (node.id) {
+            const pending = this.pendingPreStates.get(node.id);
+            if (pending) {
+                for (const action of pending) {
+                    this.applyPreState(ref.element, action);
+                }
+                this.pendingPreStates.delete(node.id);
+            }
+        }
+        if (!node.interactions?.length)
+            return;
         const cleanups = [];
         for (const ix of node.interactions) {
             // Apply pre-state to targets of ANY entrance animation so the element
             // starts hidden regardless of whether the trigger is automatic (pageLoad,
-            // viewportEnter) or user-driven (click). Without this, a click-triggered
-            // fadeIn on a menu overlay would start the overlay fully visible.
+            // viewportEnter) or user-driven (click).
             for (const action of ix.actions) {
                 if (this.ENTRANCE_TYPES.has(action.type)) {
                     const target = this.resolveTarget(node, action);
-                    if (target)
+                    if (target) {
                         this.applyPreState(target, action);
+                    }
+                    else if (action.target && action.target !== 'self') {
+                        // Target element not registered yet — queue the pre-state so
+                        // it gets applied the moment that element's attach() fires.
+                        const list = this.pendingPreStates.get(action.target) ?? [];
+                        list.push(action);
+                        this.pendingPreStates.set(action.target, list);
+                    }
                 }
             }
             const cleanup = this.attachInteraction(node, ix, ref.element);
@@ -1142,6 +1166,20 @@ class InteractionEngineService {
         if (node.interactions) {
             for (const ix of node.interactions) {
                 for (const action of ix.actions) {
+                    // Remove any pending pre-states for unregistered targets.
+                    if (action.target && action.target !== 'self') {
+                        const pending = this.pendingPreStates.get(action.target);
+                        if (pending) {
+                            const filtered = pending.filter(a => a !== action);
+                            if (filtered.length) {
+                                this.pendingPreStates.set(action.target, filtered);
+                            }
+                            else {
+                                this.pendingPreStates.delete(action.target);
+                            }
+                        }
+                    }
+                    // Clean up inline styles on already-registered target elements.
                     const target = this.resolveTarget(node, action);
                     if (target && this.preStatedElements.has(target)) {
                         target.getAnimations().forEach(a => a.cancel());