codexly-ui 0.1.17 → 0.1.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -27,6 +27,12 @@
27
27
  }
28
28
 
29
29
 
30
+ /* ── Suppress transitions during window resize ───────────────────────────── */
31
+ html.clx-resizing *, html.clx-resizing *::before, html.clx-resizing *::after {
32
+ transition: none !important;
33
+ animation: none !important;
34
+ }
35
+
30
36
  /* ── Scrollbar ───────────────────────────────────────────────────────────── */
31
37
  ::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
32
38
  ::-webkit-scrollbar-track { background-color: transparent; }
@@ -11819,6 +11819,8 @@ class ClxAppLayoutComponent {
11819
11819
  }, ...(ngDevMode ? [{ debugName: "_sidebarCls" }] : /* istanbul ignore next */ []));
11820
11820
  _mql;
11821
11821
  _mqlListener;
11822
+ _resizeTimer = null;
11823
+ _resizeListener;
11822
11824
  ngOnInit() {
11823
11825
  const win = this._document.defaultView;
11824
11826
  if (!win)
@@ -11841,9 +11843,26 @@ class ClxAppLayoutComponent {
11841
11843
  });
11842
11844
  };
11843
11845
  this._mql.addEventListener('change', this._mqlListener);
11846
+ // Disable CSS transitions during window resize to prevent jank
11847
+ this._resizeListener = () => {
11848
+ this._document.documentElement.classList.add('clx-resizing');
11849
+ if (this._resizeTimer !== null)
11850
+ clearTimeout(this._resizeTimer);
11851
+ this._resizeTimer = setTimeout(() => {
11852
+ this._document.documentElement.classList.remove('clx-resizing');
11853
+ this._resizeTimer = null;
11854
+ }, 150);
11855
+ };
11856
+ this._zone.runOutsideAngular(() => {
11857
+ win.addEventListener('resize', this._resizeListener, { passive: true });
11858
+ });
11844
11859
  }
11845
11860
  ngOnDestroy() {
11846
11861
  this._mql?.removeEventListener('change', this._mqlListener);
11862
+ const win = this._document.defaultView;
11863
+ win?.removeEventListener('resize', this._resizeListener);
11864
+ if (this._resizeTimer !== null)
11865
+ clearTimeout(this._resizeTimer);
11847
11866
  }
11848
11867
  _toggleCollapsed() {
11849
11868
  const next = !this.collapsed();