@vectoriox/iox-builder 1.5.6 → 1.5.7

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;