@vectoriox/iox-builder 1.5.9 → 1.6.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -271,6 +271,24 @@ class OverlayService {
         }
         return undefined;
     }
+    /**
+     * Walk up the DOM from a node's registered host element to the nearest ANCESTOR
+     * element that is itself a registered node. Used to resolve the immediate parent
+     * for relational style states (e.g. parent-hover). Returns undefined for root nodes.
+     */
+    getParentEntry(node) {
+        const ref = this.nodeMap.get(node);
+        if (!ref)
+            return undefined;
+        let el = ref.element.parentElement;
+        while (el) {
+            const match = this.findNodeByElement(el);
+            if (match)
+                return match;
+            el = el.parentElement;
+        }
+        return undefined;
+    }
     setHover(element, componentName, mode) {
         if (this.selectSubject.getValue()?.element === element)
             return;
@@ -1277,16 +1295,12 @@ class InteractionEngineService {
             return;
         const cleanups = [];
         for (const ix of node.interactions) {
-            // Pre-state: hide target elements before their entrance animation fires.
-            // In builder mode, pre-state is skipped for every SUPPRESSED trigger
-            // (pageLoad, scrollProgress, viewportEnter — see attachInteraction) so the
-            // element appears normally on the canvas. If we applied pre-state without
-            // attaching the trigger, the element would stay opacity:0 forever. The play
-            // button (_replay) re-applies pre-state on demand for an accurate preview.
-            // click/hover keep pre-state because those triggers DO fire on the canvas.
-            const skipPreState = inBuilder && (ix.trigger === 'pageLoad' ||
-                ix.trigger === 'scrollProgress' ||
-                ix.trigger === 'viewportEnter');
+            // Pre-state: hide target elements before their entrance animation fires so
+            // the user sees a real hidden→visible animation on the canvas. Every trigger
+            // now runs live in the builder (see attachInteraction), so pre-state is applied
+            // for all of them EXCEPT scrollProgress — that trigger is unimplemented (no-op),
+            // so pre-stating it would leave the element stuck at opacity:0 forever.
+            const skipPreState = inBuilder && ix.trigger === 'scrollProgress';
             if (!skipPreState) {
                 for (const action of ix.actions) {
                     if (this.ENTRANCE_TYPES.has(action.type)) {
@@ -1413,16 +1427,13 @@ class InteractionEngineService {
     }
     // ── Private ──────────────────────────────────────────────
     attachInteraction(node, ix, element) {
-        // In builder mode, scroll-based and time-based triggers don't auto-fire — use the
-        // play button instead. viewportEnter is skipped because the IntersectionObserver
-        // fires immediately (element is visible in the canvas) and its WAAPI animation +
-        // the overlay ResizeObserver feedback loop triggers NG0103 during synchronize().
-        // Click/hover remain active so users can test those interactions on the canvas.
-        if (this.isBuilderMode() && (ix.trigger === 'pageLoad' ||
-            ix.trigger === 'scrollProgress' ||
-            ix.trigger === 'viewportEnter')) {
-            return () => { };
-        }
+        // All triggers run live in the builder canvas so the user sees the real
+        // animation (pageLoad on attach, viewportEnter on scroll-into-view, click/hover).
+        // The former NG0103 crash was caused by (a) Swiper's ResizeObserver created inside
+        // the Angular zone — fixed in SliderContainerComponent via runOutsideAngular — and
+        // (b) the overlay's Resize/MutationObservers synchronously re-dirtying the view
+        // during synchronize() — fixed by coalescing overlay updates through a RAF.
+        // scrollProgress is still unimplemented and returns a no-op below.
         switch (ix.trigger) {
             case 'pageLoad':
                 return this.attachPageLoad(node, ix, element);
@@ -2005,7 +2016,17 @@ const EASING_OPTIONS = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'];
 const INTERACTION_STATES = ['hover', 'active', 'focus'];
 /** Structural pseudo-classes — compiled to .iox-outer-{id}:state */
 const STRUCTURAL_STATES = ['first-child', 'last-child', 'nth-child(odd)', 'nth-child(even)'];
-const SUPPORTED_STATES = [...INTERACTION_STATES, ...STRUCTURAL_STATES];
+/**
+ * Relational pseudo-classes — the styled element is a descendant, the pseudo-class
+ * lives on an ANCESTOR. Compiled to `.iox-node-{parentId}:{base} .iox-node-{id} { … }`,
+ * so they require the ancestor's css id (`relativeToId`) at compile time.
+ * `RELATIONAL_STATE_BASE` maps each relational state to the ancestor pseudo-class.
+ */
+const RELATIONAL_STATES = ['parent-hover'];
+const RELATIONAL_STATE_BASE = {
+    'parent-hover': 'hover',
+};
+const SUPPORTED_STATES = [...INTERACTION_STATES, ...STRUCTURAL_STATES, ...RELATIONAL_STATES];
 /**
  * Build a full StyleTraitGroup[] schema populated with values from a flat
  * styleProps map. Used when editing a preset in the Style panel — the panel
@@ -2475,19 +2496,38 @@ class StyleRegistryService {
      *
      * @param nodeId  The node's CSS id (used in `.iox-node-{nodeId}`)
      * @param styles  Flat CSS property map (camelCase keys)
-     * @param state   Optional pseudo-class state ('hover' | 'active' | 'focus').
+     * @param state   Optional pseudo-class state ('hover' | 'active' | 'focus' | …).
      *                When provided, compiles to `.iox-node-{id}:{state} { … }`.
      *                State rules are NOT partitioned into inner/outer.
+     * @param relativeToId  Ancestor css id, required for RELATIONAL states
+     *                (e.g. 'parent-hover'). Compiles to
+     *                `.iox-node-{relativeToId}:{base} .iox-node-{nodeId} { … }`.
      */
-    upsert(nodeId, styles, state) {
+    upsert(nodeId, styles, state, relativeToId) {
         if (!nodeId)
             return;
         if (state) {
+            const key = `${nodeId}:${state}`;
+            // Relational states (parent-hover): the pseudo-class lives on an ANCESTOR
+            // and cascades to this element. Requires the ancestor's css id.
+            if (RELATIONAL_STATES.includes(state)) {
+                const base = RELATIONAL_STATE_BASE[state];
+                const css = (relativeToId && base)
+                    ? this.compile(`iox-node-${relativeToId}:${base} .iox-node-${nodeId}`, styles)
+                    : '';
+                if (css) {
+                    this.rules.set(key, css);
+                }
+                else {
+                    this.rules.delete(key);
+                }
+                this.flush();
+                return;
+            }
             // Structural pseudo-classes (first-child, last-child, nth-child) target the
             // outer wrapper element so they participate correctly in grid/flex layout.
             const prefix = STRUCTURAL_STATES.includes(state) ? 'iox-outer' : 'iox-node';
             const css = this.compile(`${prefix}-${nodeId}:${state}`, styles);
-            const key = `${nodeId}:${state}`;
             if (css) {
                 this.rules.set(key, css);
             }
@@ -2978,12 +3018,20 @@ class OverlayComponent {
         // Tracks which badge was last clicked — used by Cmd+C in page-ui.
         this.activeBadgeType = null;
         this.subs = [];
-        this.boundUpdate = () => this.updateAll();
-        this._scrollRaf = 0;
-        this.boundScrollUpdate = () => {
-            cancelAnimationFrame(this._scrollRaf);
-            this._scrollRaf = requestAnimationFrame(() => this.updateAll());
+        // All overlay repositioning is funnelled through a single coalesced RAF.
+        // Observer callbacks (Resize/Mutation) MUST NOT call updateAll()/markForCheck()
+        // synchronously — during a live interaction animation they can fire while
+        // Angular is inside ApplicationRef.synchronize(), re-dirtying the view within
+        // the same loop and blowing past MAX_SYNC_RUNS → NG0103. scheduleUpdate() defers
+        // the markForCheck to the next frame, outside the current synchronize() pass,
+        // and collapses a burst of notifications into one update per frame.
+        this._updateRaf = 0;
+        this.scheduleUpdate = () => {
+            cancelAnimationFrame(this._updateRaf);
+            this._updateRaf = requestAnimationFrame(() => this.updateAll());
         };
+        this.boundUpdate = () => this.scheduleUpdate();
+        this.boundScrollUpdate = () => this.scheduleUpdate();
         this.activeScrollContainer = null;
     }
     ngOnInit() {
@@ -3003,16 +3051,16 @@ class OverlayComponent {
         // Re-calculate overlay positions whenever zoom / device changes.
         this.subs.push(this.viewportService.state$.subscribe(() => {
             // Delay one frame so the DOM has applied the new transform/width.
-            requestAnimationFrame(() => this.updateAll());
+            this.scheduleUpdate();
         }));
         // Re-calculate when CSS rules change (margin/width applied via stylesheet).
-        this.subs.push(this.styleRegistry.changes$.subscribe(() => requestAnimationFrame(() => this.updateAll())));
+        this.subs.push(this.styleRegistry.changes$.subscribe(() => this.scheduleUpdate()));
         // Watch the canvas container for size changes (e.g. right panel open/close
         // transition changes canvas width, shifting element positions).
         const container = this.overlayService.getContainer();
         if (container) {
             if (typeof ResizeObserver !== 'undefined') {
-                this.containerResizeObserver = new ResizeObserver(() => this.updateAll());
+                this.containerResizeObserver = new ResizeObserver(this.scheduleUpdate);
                 this.containerResizeObserver.observe(container);
             }
         }
@@ -3036,7 +3084,7 @@ class OverlayComponent {
         this.resizeObserver?.disconnect();
         this.containerResizeObserver?.disconnect();
         this.mutationObserver?.disconnect();
-        cancelAnimationFrame(this._scrollRaf);
+        cancelAnimationFrame(this._updateRaf);
         window.removeEventListener('resize', this.boundUpdate);
         this.activeScrollContainer?.removeEventListener('scroll', this.boundScrollUpdate);
         this.activeScrollContainer = null;
@@ -3302,12 +3350,12 @@ class OverlayComponent {
                     skipFirst = false;
                     return;
                 }
-                this.updateAll();
+                this.scheduleUpdate();
             });
             this.resizeObserver.observe(styledEl);
         }
         // MutationObserver — catches style attribute changes (margin, padding etc.)
-        this.mutationObserver = new MutationObserver(() => this.updateAll());
+        this.mutationObserver = new MutationObserver(this.scheduleUpdate);
         this.mutationObserver.observe(styledEl, {
             attributes: true,
             attributeFilter: ['style', 'class'],
@@ -7451,5 +7499,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DataSourceType, DeviceMode, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS, EffectsGroupStyleConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, IOX_SHOP_SERVICE, InteractionEngineService, InteractionPresetRegistryService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SymbolRegistryService, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VIRTUAL_TRAIT_KEYS, ViewportService, ZOOM_OPTIONS, buildFullStyleTraits, buildPresetStyleTraits, composeVirtualTraits, defaultPageSettings, flattenSchemaFields, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
+export { ACTION_TYPE_OPTIONS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CardComponentConfig, ComponentConfig, ComponentRegistryService, DEVICE_OPTIONS, DataSourceRegistryService, DataSourceType, DeviceMode, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS, EffectsGroupStyleConfig, GroupStyleConfig, INTERACTION_STATES, INVERSE_ACTION, IOX_CONTENT_SERVICE, IOX_FONT_MANAGER, IOX_SHOP_SERVICE, InteractionEngineService, InteractionPresetRegistryService, InteractionsPanelComponent, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SymbolRegistryService, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VIRTUAL_TRAIT_KEYS, ViewportService, ZOOM_OPTIONS, buildFullStyleTraits, buildPresetStyleTraits, composeVirtualTraits, defaultPageSettings, flattenSchemaFields, generateNodeId, resolveTraitControllerType, resolveTraitOptions };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map