@vectoriox/iox-builder 2.10.2 → 2.10.4

package/fesm2022/vectoriox-iox-builder.mjs

@@ -17,7 +17,7 @@ import { SelectModule } from 'primeng/select';
 import { TooltipModule } from 'primeng/tooltip';
 import { DialogModule } from 'primeng/dialog';
 import * as i16 from '@vectoriox/iox-ui';
-import { DEFAULT_WIDTH_BY_TYPE, ComponentInstanceRegistryService, buildTargetedStateSelector, compileDeclarations, composeVirtualTraits, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule } from '@vectoriox/iox-ui';
+import { DEFAULT_WIDTH_BY_TYPE, ComponentInstanceRegistryService, buildTargetedStateSelector, compileDeclarations, safeSetInput, composeVirtualTraits, IS_PREVIEW, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, IoxPageModule } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
 import Lenis from 'lenis';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
@@ -677,6 +677,65 @@ function arrayItemSchemaFields(properties, arrayPath) {
     return { fields: [], isPrimitive: true };
 }
 
+const freshId = () => Math.random().toString(36).substr(2, 9);
+/**
+ * Assign fresh ids to a cloned ComponentNode subtree AND remap intra-subtree references to the
+ * new ids. Used by every author-time clone path (duplicate, paste, block/external drop) so a copied
+ * structure stays self-consistent.
+ *
+ * Absolute node-id references that break under duplication if left unmapped:
+ *   - `stateTriggers[state]`   — the trigger-hover target (see style-engine.md → Targeted states)
+ *   - interaction `action.target` / `reverseActions.target`
+ * A reference pointing OUTSIDE the cloned subtree (id not in the map) is left untouched — the copy
+ * intentionally still points at the external node.
+ *
+ * `styleId` strategy:
+ *   - `'clear'` (default) — drop styleId so the clone OWNS its own CSS rule (independent copy).
+ *   - `'regenerate'`      — keep a styleId but give it a fresh value (legacy builder.component path).
+ */
+function regenerateNodeIds(root, opts = {}) {
+    const idMap = new Map();
+    const assign = (node) => {
+        const oldId = node.id;
+        node.id = freshId();
+        if (opts.styleId === 'regenerate') {
+            if (node.styleId)
+                node.styleId = freshId();
+        }
+        else {
+            node.styleId = undefined;
+        }
+        if (oldId)
+            idMap.set(oldId, node.id);
+        (node.children || []).forEach(assign);
+    };
+    assign(root);
+    remapNodeReferences(root, idMap);
+}
+/** Remap absolute node-id references inside a subtree to their new ids (per `idMap`). Ids not in
+ *  the map (references to nodes outside the cloned subtree) are preserved. */
+function remapNodeReferences(node, idMap) {
+    const triggers = node.stateTriggers;
+    if (triggers) {
+        for (const state of Object.keys(triggers)) {
+            const mapped = idMap.get(triggers[state]);
+            if (mapped)
+                triggers[state] = mapped;
+        }
+    }
+    for (const interaction of node.interactions || []) {
+        const actions = [...(interaction.actions || []), ...(interaction.reverseActions || [])];
+        for (const action of actions) {
+            if (action?.target && action.target !== 'self') {
+                const mapped = idMap.get(action.target);
+                if (mapped)
+                    action.target = mapped;
+            }
+        }
+    }
+    (node.children || []).forEach(child => remapNodeReferences(child, idMap));
+}
+
 /**
  * Locate a node within a forest (array of root nodes + their descendants) by
  * reference identity. Returns the parent array holding the node and its index,
@@ -1116,14 +1175,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
 
 function deepCloneNode(node) {
     const clone = JSON.parse(JSON.stringify(node));
-    regenerateIds(clone);
+    // Fresh ids + remap intra-subtree references (stateTriggers, interaction targets) so a cloned
+    // structure stays self-consistent — e.g. trigger-hover keeps pointing at the clone's own trigger.
+    regenerateNodeIds(clone);
     return clone;
 }
-function regenerateIds(node) {
-    node.id = Math.random().toString(36).substr(2, 9);
-    node.styleId = undefined;
-    (node.children || []).forEach(regenerateIds);
-}
 class DragEngineService {
     constructor(registry, symbolRegistry) {
         this.registry = registry;
@@ -3365,6 +3421,27 @@ class RenderDirective {
         }
         return undefined;
     }
+    /** Nearest ANCESTOR of the styled element that is a registered iox-node AND contains the trigger
+     *  element — i.e. the DOM equivalent of `nearestCommonAncestorId`, resolved per rendered instance.
+     *  Used to re-emit a `trigger-hover` rule after a move/duplicate. Returns undefined if the trigger
+     *  isn't in the DOM yet (caller then skips rather than clobbering the existing rule). */
+    resolveTargetedScopeId(styledEl, triggerCssId) {
+        let el = styledEl?.parentElement ?? null;
+        while (el) {
+            let cssId;
+            for (let i = 0; i < el.classList.length; i++) {
+                const c = el.classList[i];
+                if (c.startsWith('iox-node-')) {
+                    cssId = c.slice('iox-node-'.length);
+                    break;
+                }
+            }
+            if (cssId && el.querySelector(`.iox-node-${triggerCssId}`))
+                return cssId;
+            el = el.parentElement;
+        }
+        return undefined;
+    }
     findParentNodeElement(target) {
         let el = target;
         while (el) {
@@ -3401,14 +3478,16 @@ class RenderDirective {
         else {
             componentRef = this.vcr.createComponent(componentClass, { injector: this.injector });
         }
-        // Apply regular trait defaults (title, image, description, etc.)
-        // Use setInput() (Angular 14+) — it marks the view dirty and
-        // integrates with Angular's CD tracking, unlike direct assignment.
-        // Skip SectionLabel traits — they are UI-only panel headers with no matching @Input().
+        // Apply regular trait defaults (title, image, description, etc.). safeSetInput() uses
+        // setInput() for declared inputs (marks the view dirty, integrates with CD + signal inputs)
+        // and falls back to direct assignment for anything the component doesn't declare — so a
+        // trait that has no matching @Input (e.g. `sourcePath` on a SliderContainer) never emits the
+        // NG0303 console error that a bare setInput() would. Skip SectionLabel traits — they are
+        // UI-only panel headers with no matching input.
         Object.values(node.traits || {}).forEach((trait) => {
             if (trait.type === 'sectionLabel')
                 return;
-            componentRef.setInput(trait.name, trait.default);
+            safeSetInput(componentRef, trait.name, trait.default);
         });
         // Build initial style map from styleTraits defaults.
         const initialStyle = {};
@@ -3446,6 +3525,21 @@ class RenderDirective {
                             continue;
                         this.styleRegistry.upsert(cssId, composeVirtualTraits(stateMap, initialStyle), state, relativeToId);
                     }
+                    else if (TARGETED_STATES.includes(state)) {
+                        // Targeted states (trigger-hover) compile to a `:has()` scoped to the nearest
+                        // common ancestor of the styled node + the chosen trigger. On a re-render (move,
+                        // duplicate, drop) we must RE-EMIT with a freshly-resolved scope — otherwise the
+                        // rule is clobbered and the hover stops working. Resolve the scope from the live
+                        // DOM (works per-instance); SKIP if the trigger isn't rendered yet, so we don't
+                        // clobber the correct rule page-ui's applyStateEnhancements already produced.
+                        const triggerCssId = node.stateTriggers?.[state];
+                        if (!triggerCssId)
+                            continue;
+                        const scopeId = this.resolveTargetedScopeId(childEl, triggerCssId);
+                        if (!scopeId)
+                            continue;
+                        this.styleRegistry.upsert(cssId, composeVirtualTraits(stateMap, initialStyle), state, scopeId, triggerCssId);
+                    }
                     else {
                         this.styleRegistry.upsert(cssId, composeVirtualTraits(stateMap, initialStyle), state);
                     }
@@ -3567,15 +3661,6 @@ class RenderDirective {
             this.interactionEngine.attachTo(node, nativeEl);
         }
     }
-    /** Try setInput(); fall back to direct assignment for non-@Input properties. */
-    safeSetInput(ref, name, value) {
-        try {
-            ref.setInput(name, value);
-        }
-        catch {
-            ref.instance[name] = value;
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: RenderDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.Injector }, { token: i0.EnvironmentInjector }, { token: DOCUMENT }, { token: ComponentRegistryService }, { token: OverlayService }, { token: StyleRegistryService }, { token: InteractionEngineService }, { token: i0.ChangeDetectorRef }, { token: PanelEventService }, { token: DragEngineService }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.11", type: RenderDirective, isStandalone: false, selector: "[ioxRender]", inputs: { ioxRender: "ioxRender", ioxDragSourceId: "ioxDragSourceId" }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter", onMouseLeave: "onMouseLeave" }, ngImport: i0 }); }
 }
@@ -5294,15 +5379,11 @@ class BuilderComponent {
     }
     deepCloneWithNewIds(node) {
         const clone = JSON.parse(JSON.stringify(node));
-        this.assignNewIds(clone);
+        // Fresh ids + remap intra-subtree references (stateTriggers, interaction targets) so a
+        // duplicated/pasted structure stays self-consistent (trigger-hover keeps its own trigger).
+        regenerateNodeIds(clone, { styleId: 'regenerate' });
         return clone;
     }
-    assignNewIds(node) {
-        node.id = Math.random().toString(36).slice(2, 10);
-        if (node.styleId)
-            node.styleId = Math.random().toString(36).slice(2, 10);
-        node.children?.forEach(child => this.assignNewIds(child));
-    }
     _stripGlobalFlags(node) {
         node.isGlobal = false;
         node.globalPosition = undefined;