@vectoriox/iox-builder 1.5.5 → 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;
@@ -5435,11 +5449,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             }] } });
 
 class SliderContainerComponent {
-    get editShellStyle() {
-        // Inline styles win over CSS rules, so force position:relative here to guarantee
-        // the nav buttons (position:absolute) are anchored to THIS element, not a canvas ancestor.
-        return { ...this.style, position: 'relative' };
+    set style(v) {
+        if (v === this._style)
+            return;
+        this._style = v;
+        // Rebuild cached value so ngStyle only re-applies when input actually changed.
+        // Avoids DOM style-attribute mutations on every CD tick → prevents MutationObserver spam.
+        this._editShellStyle = { ...v, position: 'relative' };
     }
+    get style() { return this._style; }
+    get editShellStyle() { return this._editShellStyle; }
     get source() { return this._source; }
     set source(value) {
         if (value === this._source)
@@ -5474,7 +5493,8 @@ class SliderContainerComponent {
         this.panelEventService = panelEventService;
         this.activatedRoute = activatedRoute;
         this.children = [];
-        this.style = {};
+        this._style = {};
+        this._editShellStyle = { position: 'relative' };
         this.nodeId = '';
         this.dropListId = '';
         // ── Parameters ─────────────────────────────────────────────────────────────
@@ -5672,7 +5692,6 @@ class SliderContainerComponent {
     }
     _scheduleReinit() {
         this._destroySwiper();
-        this.cdr.detectChanges();
         this._initRafId = requestAnimationFrame(() => this._initSwiper());
     }
     // ── Swiper lifecycle ────────────────────────────────────────────────────────
@@ -6218,12 +6237,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImpo
             }] } });
 
 class SliderSlideComponent {
+    set style(v) {
+        if (v === this._style)
+            return;
+        this._style = v;
+        // Strip width constraints; rebuild cached object so ngStyle only updates DOM
+        // when the input actually changed — prevents spurious MutationObserver triggers.
+        const { width, minWidth, maxWidth, ...rest } = v || {};
+        this._slideEditStyle = rest;
+    }
+    get style() { return this._style; }
+    get slideEditStyle() { return this._slideEditStyle; }
     constructor(dragEngine, cdr, isPreview) {
         this.dragEngine = dragEngine;
         this.cdr = cdr;
         this.isPreview = isPreview;
         this.children = [];
-        this.style = {};
+        this._style = {};
+        this._slideEditStyle = {};
         this.nodeId = '';
         this.dropListId = '';
         this.childClick = new EventEmitter();
@@ -6231,10 +6262,6 @@ class SliderSlideComponent {
         this.childMouseLeave = new EventEmitter();
         this.isPreview = !!isPreview;
     }
-    get slideEditStyle() {
-        const { width, minWidth, maxWidth, ...rest } = this.style || {};
-        return rest;
-    }
     ngOnInit() { }
     ngOnDestroy() { }
     onDrop(event) {