@vectoriox/iox-builder 2.10.1 → 2.10.3

package/fesm2022/vectoriox-iox-builder.mjs

@@ -404,6 +404,16 @@ class SizeGroupStyleConfig extends GroupStyleConfig {
             // object-fit is a style trait (applies to replaced elements, e.g. images). Lives here so
             // it flows through the CSS engine (styleProps) instead of a per-component inline binding.
             new TraitConfig('objectFit', 'Object Fit', TraitInputType.Select, ['cover', 'contain', 'fill', 'none', 'scale-down'], 'cover'),
+            // overflow — how content that exceeds the box is handled. `visible` is the CSS initial
+            // (dropped as a no-op by the compiler); other values emit. Applies to the node's own box
+            // (inner element), so it is NOT an OUTER_PROP.
+            new TraitConfig('overflow', 'Overflow', TraitInputType.Select, [
+                { label: 'Visible', value: 'visible' },
+                { label: 'Hidden', value: 'hidden' },
+                { label: 'Scroll', value: 'scroll' },
+                { label: 'Auto', value: 'auto' },
+                { label: 'Clip', value: 'clip' },
+            ], 'visible'),
         ]);
     }
 }
@@ -535,6 +545,19 @@ class EffectsGroupStyleConfig extends GroupStyleConfig {
             new TraitConfig('backdropBrightness', 'Brightness', TraitInputType.Range, { min: 0, max: 3, step: 0.05, showExtremes: false, showValue: true, compact: true }, '1', true),
             new TraitConfig('backdropContrast', 'Contrast', TraitInputType.Range, { min: 0, max: 3, step: 0.05, showExtremes: false, showValue: true, compact: true }, '1', true),
             new TraitConfig('backdropSaturate', 'Saturate', TraitInputType.Range, { min: 0, max: 3, step: 0.05, showExtremes: false, showValue: true, compact: true }, '1', true),
+            // ── Clip (clip-path — mask the node to a shape) ───────────
+            new TraitConfig('_sep_clip', 'Clip', TraitInputType.SectionLabel),
+            new TraitConfig('clipPath', 'Shape', TraitInputType.Select, [
+                { label: 'None', value: 'none' },
+                { label: 'Circle', value: 'circle(50%)' },
+                { label: 'Ellipse', value: 'ellipse(50% 40%)' },
+                { label: 'Inset', value: 'inset(10%)' },
+                { label: 'Rounded inset', value: 'inset(10% round 16px)' },
+                { label: 'Triangle', value: 'polygon(50% 0%, 0% 100%, 100% 100%)' },
+                { label: 'Diamond', value: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)' },
+                { label: 'Hexagon', value: 'polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)' },
+                { label: 'Chevron', value: 'polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%)' },
+            ], 'none'),
             // ── Transition (virtual — composed to CSS transition: all …) ──
             new TraitConfig('_sep_transition', 'Transition', TraitInputType.SectionLabel),
             new TraitConfig('transitionDuration', 'Duration', TraitInputType.Scrub, { min: 0, max: 3000, step: 50, units: ['ms'] }, '0ms', true),
@@ -654,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,
@@ -1093,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;
@@ -3342,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) {
@@ -3423,6 +3523,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);
                     }
@@ -5271,15 +5386,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;