codexly-ui 0.1.17 → 0.1.19

package/assets/styles/_globals.css

@@ -27,6 +27,12 @@
 }
 
 
+/* ── Suppress transitions during window resize ───────────────────────────── */
+html.clx-resizing *, html.clx-resizing *::before, html.clx-resizing *::after {
+  transition: none !important;
+  animation: none !important;
+}
+
 /* ── Scrollbar ───────────────────────────────────────────────────────────── */
 ::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
 ::-webkit-scrollbar-track { background-color: transparent; }

package/fesm2022/codexly-ui.mjs

@@ -11819,6 +11819,8 @@ class ClxAppLayoutComponent {
     }, ...(ngDevMode ? [{ debugName: "_sidebarCls" }] : /* istanbul ignore next */ []));
     _mql;
     _mqlListener;
+    _resizeTimer = null;
+    _resizeListener;
     ngOnInit() {
         const win = this._document.defaultView;
         if (!win)
@@ -11841,9 +11843,26 @@ class ClxAppLayoutComponent {
             });
         };
         this._mql.addEventListener('change', this._mqlListener);
+        // Disable CSS transitions during window resize to prevent jank
+        this._resizeListener = () => {
+            this._document.documentElement.classList.add('clx-resizing');
+            if (this._resizeTimer !== null)
+                clearTimeout(this._resizeTimer);
+            this._resizeTimer = setTimeout(() => {
+                this._document.documentElement.classList.remove('clx-resizing');
+                this._resizeTimer = null;
+            }, 150);
+        };
+        this._zone.runOutsideAngular(() => {
+            win.addEventListener('resize', this._resizeListener, { passive: true });
+        });
     }
     ngOnDestroy() {
         this._mql?.removeEventListener('change', this._mqlListener);
+        const win = this._document.defaultView;
+        win?.removeEventListener('resize', this._resizeListener);
+        if (this._resizeTimer !== null)
+            clearTimeout(this._resizeTimer);
     }
     _toggleCollapsed() {
         const next = !this.collapsed();
@@ -11889,7 +11908,7 @@ class ClxAppLayoutComponent {
         <ng-content select="clx-brand"></ng-content>
       </div>
 
-      <div class="flex flex-col flex-1 min-h-0">
+      <div class="flex flex-col flex-1 min-h-0" style="contain:strict;overflow-y:auto">
         <ng-content select="[clx-sidebar]"></ng-content>
       </div>
     </aside>
@@ -11916,7 +11935,7 @@ class ClxAppLayoutComponent {
         <ng-content select="[clx-header]"></ng-content>
       </header>
 
-      <main cdkScrollable class="flex-1 overflow-y-auto bg-clx-bg">
+      <main cdkScrollable class="flex-1 overflow-y-auto bg-clx-bg" style="contain:strict">
         <ng-content></ng-content>
       </main>
 
@@ -11951,7 +11970,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         <ng-content select="clx-brand"></ng-content>
       </div>
 
-      <div class="flex flex-col flex-1 min-h-0">
+      <div class="flex flex-col flex-1 min-h-0" style="contain:strict;overflow-y:auto">
         <ng-content select="[clx-sidebar]"></ng-content>
       </div>
     </aside>
@@ -11978,7 +11997,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         <ng-content select="[clx-header]"></ng-content>
       </header>
 
-      <main cdkScrollable class="flex-1 overflow-y-auto bg-clx-bg">
+      <main cdkScrollable class="flex-1 overflow-y-auto bg-clx-bg" style="contain:strict">
         <ng-content></ng-content>
       </main>