@vectoriox/iox-builder 1.7.8 → 1.7.10

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1466,10 +1466,10 @@ class InteractionEngineService {
     attachPageLoad(node, ix, element) {
         const timer = setTimeout(() => {
             if (this.hasPreStatedAncestor(element)) {
-                this.deferUntilVisible(element, () => this.runActions(node, ix.actions));
+                this.deferUntilVisible(element, () => this.runActions(node, ix.actions, element));
             }
             else {
-                this.runActions(node, ix.actions);
+                this.runActions(node, ix.actions, element);
             }
         }, 50);
         return () => clearTimeout(timer);
@@ -1485,12 +1485,12 @@ class InteractionEngineService {
                     if (ix.actions.some(a => a.once) && firedSet.has(key))
                         return;
                     firedSet.add(key);
-                    this.runActions(node, ix.actions);
+                    this.runActions(node, ix.actions, element);
                 });
                 return;
             }
             firedSet.add(key);
-            this.runActions(node, ix.actions);
+            this.runActions(node, ix.actions, element);
         };
         // IntersectionObserver with no root uses the browser viewport.
         // It respects overflow:hidden clipping from .preview-scroll so it fires
@@ -1565,22 +1565,22 @@ class InteractionEngineService {
             if (ix.reverseActions?.length) {
                 // Toggle: alternate between primary and reverse actions on each click.
                 const isToggled = this.toggleStates.get(ix.id) ?? false;
-                this.runActions(node, isToggled ? ix.reverseActions : ix.actions);
+                this.runActions(node, isToggled ? ix.reverseActions : ix.actions, element);
                 this.toggleStates.set(ix.id, !isToggled);
             }
             else {
-                this.runActions(node, ix.actions);
+                this.runActions(node, ix.actions, element);
             }
         };
         element.addEventListener('click', handler);
         return () => element.removeEventListener('click', handler);
     }
     attachHover(node, ix, element) {
-        const enterHandler = () => this.runActions(node, ix.actions);
+        const enterHandler = () => this.runActions(node, ix.actions, element);
         const leaveHandler = () => {
             // Reverse animations on leave for hover triggers
             for (const action of ix.actions) {
-                const target = this.resolveTarget(node, action);
+                const target = this.resolveTarget(node, action, element);
                 if (!target)
                     continue;
                 this.reverseAction(target, action);
@@ -1594,13 +1594,15 @@ class InteractionEngineService {
         };
     }
     // ── Actions ──────────────────────────────────────────────
-    runActions(node, actions) {
+    runActions(node, actions, selfEl) {
         for (const action of actions) {
             if (this.SWIPER_ACTIONS.has(action.type)) {
                 this.executeSwiperAction(action);
                 continue;
             }
-            const target = this.resolveTarget(node, action);
+            // selfEl lets 'self'-targeted actions resolve for preview CLONES, which aren't
+            // overlay-registered (getNodeRef would return undefined) — see attachTo. (issue #2)
+            const target = this.resolveTarget(node, action, selfEl);
             if (!target)
                 continue;
             this.executeAction(target, action);
@@ -3017,6 +3019,23 @@ class RenderDirective {
      * Returns { element, node } if found, or null if the target is outside
      * all known builder components (e.g. the canvas background).
      */
+    /**
+     * The nearest ancestor node's cssId, read from the DOM `iox-node-{id}` classes (NOT the overlay
+     * registry — at state-restore time the parent isn't registered yet, since it registers only
+     * AFTER rendering its children). Used to key relational (parent-hover) rules. (issue #1)
+     */
+    resolveParentNodeId(childEl) {
+        let el = childEl?.parentElement ?? null;
+        while (el) {
+            for (let i = 0; i < el.classList.length; i++) {
+                const c = el.classList[i];
+                if (c.startsWith('iox-node-'))
+                    return c.slice('iox-node-'.length);
+            }
+            el = el.parentElement;
+        }
+        return undefined;
+    }
     findParentNodeElement(target) {
         let el = target;
         while (el) {
@@ -3084,17 +3103,23 @@ class RenderDirective {
                 const childEl = componentRef.location?.nativeElement;
                 for (const state of Object.keys(node.stateStyles)) {
                     const stateMap = node.stateStyles[state];
-                    if (stateMap && Object.keys(stateMap).length) {
+                    if (!stateMap || !Object.keys(stateMap).length)
+                        continue;
+                    if (RELATIONAL_STATES.includes(state)) {
                         // Relational states (parent-hover) compile to
                         // `.iox-node-{parentId}:hover .iox-node-{childId}` — they need the CURRENT parent id.
-                        // Resolve it from the DOM on EVERY render, so the rule is correct on load AND after a
-                        // cross-container move (which re-renders the child with a fresh instance). (issue #1)
-                        let relativeToId;
-                        if (RELATIONAL_STATES.includes(state) && childEl?.parentElement) {
-                            relativeToId = this.findParentNodeElement(childEl.parentElement)?.node?.id;
-                        }
+                        // Resolve it from the DOM so the rule re-resolves after a cross-container MOVE (which
+                        // re-renders the child). If it can't be resolved yet (initial load: the parent registers
+                        // its class only after rendering its children), SKIP — do NOT clobber the correct rule
+                        // that page-ui's applyStateEnhancements already produced from the node tree. (issue #1)
+                        const relativeToId = this.resolveParentNodeId(childEl);
+                        if (!relativeToId)
+                            continue;
                         this.styleRegistry.upsert(cssId, composeVirtualTraits(stateMap, initialStyle), state, relativeToId);
                     }
+                    else {
+                        this.styleRegistry.upsert(cssId, composeVirtualTraits(stateMap, initialStyle), state);
+                    }
                 }
             }
         }