@vectoriox/iox-builder 1.5.7 → 1.5.9

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1278,9 +1278,15 @@ class InteractionEngineService {
         const cleanups = [];
         for (const ix of node.interactions) {
             // Pre-state: hide target elements before their entrance animation fires.
-            // In builder mode: skip only suppressed triggers (pageLoad, scrollProgress).
-            // viewportEnter IS active in builder — elements must be hidden before trigger.
-            const skipPreState = inBuilder && (ix.trigger === 'pageLoad' || ix.trigger === 'scrollProgress');
+            // 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');
             if (!skipPreState) {
                 for (const action of ix.actions) {
                     if (this.ENTRANCE_TYPES.has(action.type)) {
@@ -1407,9 +1413,14 @@ class InteractionEngineService {
     }
     // ── Private ──────────────────────────────────────────────
     attachInteraction(node, ix, element) {
-        // In builder mode, automatic triggers don't auto-fire — use the play button instead.
+        // 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')) {
+        if (this.isBuilderMode() && (ix.trigger === 'pageLoad' ||
+            ix.trigger === 'scrollProgress' ||
+            ix.trigger === 'viewportEnter')) {
             return () => { };
         }
         switch (ix.trigger) {
@@ -5554,6 +5565,7 @@ class SliderContainerComponent {
         this._orgId = 'default';
         this.instanceRegistry = inject(ComponentInstanceRegistryService);
         this.interactionEngine = inject(InteractionEngineService);
+        this.ngZone = inject(NgZone);
         this.isPreview = !!isPreview;
     }
     ngOnInit() {
@@ -5572,7 +5584,11 @@ class SliderContainerComponent {
         }
     }
     ngAfterViewInit() {
-        this._initRafId = requestAnimationFrame(() => this._initSwiper());
+        // Run outside Angular's zone so Swiper's internal ResizeObserver, MutationObserver,
+        // and RAF-based animation loops don't trigger unnecessary CD ticks.
+        this.ngZone.runOutsideAngular(() => {
+            this._initRafId = requestAnimationFrame(() => this._initSwiper());
+        });
     }
     ngOnChanges(changes) {
         if (!this._swiper)
@@ -5600,7 +5616,9 @@ class SliderContainerComponent {
         const hasConfigChange = Object.keys(changes).some(k => relevantKeys.has(k));
         if (hasConfigChange) {
             this._destroySwiper();
-            this._initRafId = requestAnimationFrame(() => this._initSwiper());
+            this.ngZone.runOutsideAngular(() => {
+                this._initRafId = requestAnimationFrame(() => this._initSwiper());
+            });
         }
     }
     ngOnDestroy() {
@@ -5615,9 +5633,10 @@ class SliderContainerComponent {
         if (this._source)
             return; // repeat mode: drops disabled, slides come from data source
         this.dragEngine.handleDrop(this.children, event, this.dropListId, this.cdr);
-        // Sync Swiper's internal slide list after drag-drop reorder
         if (this._swiper) {
-            requestAnimationFrame(() => this._swiper?.update());
+            this.ngZone.runOutsideAngular(() => {
+                requestAnimationFrame(() => this._swiper?.update());
+            });
         }
     }
     // ── Data fetching ───────────────────────────────────────────────────────────
@@ -5692,7 +5711,9 @@ class SliderContainerComponent {
     }
     _scheduleReinit() {
         this._destroySwiper();
-        this._initRafId = requestAnimationFrame(() => this._initSwiper());
+        this.ngZone.runOutsideAngular(() => {
+            this._initRafId = requestAnimationFrame(() => this._initSwiper());
+        });
     }
     // ── Swiper lifecycle ────────────────────────────────────────────────────────
     async _initSwiper() {