codexly-ui 0.1.20 → 0.1.21

package/fesm2022/codexly-ui.mjs

@@ -11806,6 +11806,8 @@ class ClxAppLayoutComponent {
         const shadow = collapsed && hovered ? 'shadow-2xl' : '';
         return `relative z-30 ${width} ${base} transition-[width] duration-300 ease-in-out ${shadow}`;
     }, ...(ngDevMode ? [{ debugName: "_sidebarCls" }] : /* istanbul ignore next */ []));
+    _nativeSetTimeout;
+    _nativeClearTimeout;
     _mql;
     _mqlListener;
     _resizeTimer = null;
@@ -11817,6 +11819,10 @@ class ClxAppLayoutComponent {
         const win = this._document.defaultView;
         if (!win)
             return;
+        // Use native (non-Zone-patched) timers so the resize debounce
+        // does not trigger Angular change detection cycles
+        this._nativeSetTimeout = win.__zone_symbol__setTimeout ?? win.setTimeout.bind(win);
+        this._nativeClearTimeout = win.__zone_symbol__clearTimeout ?? win.clearTimeout.bind(win);
         this._mql = win.matchMedia('(min-width: 1024px)');
         this._isMobile.set(!this._mql.matches);
         if (this._mql.matches)
@@ -11836,12 +11842,12 @@ class ClxAppLayoutComponent {
         };
         this._mql.addEventListener('change', this._mqlListener);
         this._zone.runOutsideAngular(() => {
-            // Suppress all transitions during resize
+            // Suppress all transitions during resize using native (non-Zone-patched) timer
             this._resizeListener = () => {
                 this._document.documentElement.classList.add('clx-resizing');
                 if (this._resizeTimer !== null)
-                    clearTimeout(this._resizeTimer);
-                this._resizeTimer = setTimeout(() => {
+                    this._nativeClearTimeout(this._resizeTimer);
+                this._resizeTimer = this._nativeSetTimeout(() => {
                     this._document.documentElement.classList.remove('clx-resizing');
                     this._resizeTimer = null;
                 }, 150);
@@ -11866,8 +11872,8 @@ class ClxAppLayoutComponent {
                     });
                 }
             };
-            // Attach after a tick so the aside is rendered
-            setTimeout(() => {
+            // Attach after a tick so the aside is rendered (native timer — no CD)
+            this._nativeSetTimeout(() => {
                 const host = this._el.nativeElement;
                 this._sidebarEl = host.querySelector('aside');
                 if (this._sidebarEl) {
@@ -11882,7 +11888,7 @@ class ClxAppLayoutComponent {
         const win = this._document.defaultView;
         win?.removeEventListener('resize', this._resizeListener);
         if (this._resizeTimer !== null)
-            clearTimeout(this._resizeTimer);
+            this._nativeClearTimeout?.(this._resizeTimer);
         if (this._sidebarEl) {
             this._sidebarEl.removeEventListener('mouseenter', this._mouseEnterFn);
             this._sidebarEl.removeEventListener('mouseleave', this._mouseLeaveFn);