@vectoriox/iox-builder 1.5.6 → 1.5.8

package/fesm2022/vectoriox-iox-builder.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, EventEmitter, Output, Input, Directive, ChangeDetectionStrategy, Component, ViewChild, Optional, Inject, InjectionToken, ContentChildren, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
+import { Injectable, inject, NgZone, EventEmitter, Output, Input, Directive, ChangeDetectionStrategy, Component, ViewChild, Optional, Inject, InjectionToken, ContentChildren, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i4$1 from '@angular/forms';
@@ -1243,9 +1243,21 @@ class InteractionEngineService {
             'swiperAutoplayStart', 'swiperAutoplayStop', 'swiperAutoplayPause',
         ]);
         this.instanceRegistry = inject(ComponentInstanceRegistryService);
+        this.ngZone = inject(NgZone);
+    }
+    /**
+     * Run all DOM-manipulation operations (pre-state, observers, animations)
+     * outside the Angular zone so Zone.js does not schedule unnecessary CD ticks
+     * for each RAF/IntersectionObserver/animation callback.
+     * The caller is responsible for calling markForCheck() / refreshSelect() inside
+     * the zone after this returns.
+     */
+    runOutside(fn) {
+        return this.ngZone.runOutsideAngular(fn);
     }
     /** Wire all interactions for a node to its rendered DOM element. */
-    attach(node) {
+    attach(node) { this.runOutside(() => this._attach(node)); }
+    _attach(node) {
         const ref = this.overlayService.getNodeRef(node);
         if (!ref)
             return;
@@ -1290,7 +1302,8 @@ class InteractionEngineService {
         this.attached.set(node, cleanups);
     }
     /** Tear down all interaction listeners for a node and reset its animated state. */
-    detach(node) {
+    detach(node) { this.runOutside(() => this._detach(node)); }
+    _detach(node) {
         const entries = this.attached.get(node);
         if (!entries)
             return;
@@ -1341,15 +1354,15 @@ class InteractionEngineService {
     }
     /** Re-attach interactions after they have been edited in the panel. */
     refresh(node) {
-        this.detach(node);
-        this.attach(node);
+        this.runOutside(() => { this._detach(node); this._attach(node); });
     }
     /**
      * Replay all interactions on a node immediately, regardless of their trigger.
      * Used by the builder overlay play button for in-editor animation preview.
      * Uses fill:'none' so the element returns to its natural state after the preview.
      */
-    replay(node) {
+    replay(node) { this.runOutside(() => this._replay(node)); }
+    _replay(node) {
         if (!node.interactions?.length)
             return;
         const ref = this.overlayService.getNodeRef(node);
@@ -1379,7 +1392,8 @@ class InteractionEngineService {
      * Used by Swiper (and future components) to dispatch their events into the
      * interaction engine without coupling to the engine's attach/detach lifecycle.
      */
-    replayTrigger(nodeId, trigger) {
+    replayTrigger(nodeId, trigger) { this.runOutside(() => this._replayTrigger(nodeId, trigger)); }
+    _replayTrigger(nodeId, trigger) {
         for (const [node] of this.attached) {
             if (node.id !== nodeId)
                 continue;
@@ -1393,9 +1407,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) {
@@ -5540,6 +5559,7 @@ class SliderContainerComponent {
         this._orgId = 'default';
         this.instanceRegistry = inject(ComponentInstanceRegistryService);
         this.interactionEngine = inject(InteractionEngineService);
+        this.ngZone = inject(NgZone);
         this.isPreview = !!isPreview;
     }
     ngOnInit() {
@@ -5558,7 +5578,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)
@@ -5586,7 +5610,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() {
@@ -5601,9 +5627,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 ───────────────────────────────────────────────────────────
@@ -5678,7 +5705,9 @@ class SliderContainerComponent {
     }
     _scheduleReinit() {
         this._destroySwiper();
-        this._initRafId = requestAnimationFrame(() => this._initSwiper());
+        this.ngZone.runOutsideAngular(() => {
+            this._initRafId = requestAnimationFrame(() => this._initSwiper());
+        });
     }
     // ── Swiper lifecycle ────────────────────────────────────────────────────────
     async _initSwiper() {