codexly-ui 0.1.18 → 0.1.20

package/fesm2022/codexly-ui.mjs

@@ -7,7 +7,7 @@ import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { startWith, map, debounceTime, distinctUntilChanged, switchMap, of, catchError } from 'rxjs';
 import * as i1$1 from '@angular/cdk/overlay';
 import { ScrollStrategyOptions, OverlayModule } from '@angular/cdk/overlay';
-import { ScrollingModule, CdkScrollable } from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 import { Chart, LineController, BarController, PieController, DoughnutController, RadarController, PolarAreaController, CategoryScale, LinearScale, RadialLinearScale, BarElement, LineElement, PointElement, ArcElement, Filler, Tooltip, Legend } from 'chart.js';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
@@ -11778,8 +11778,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             }] } });
 
 class ClxAppLayoutComponent {
-    _zone;
-    _document;
+    _zone = inject(NgZone);
+    _document = inject(DOCUMENT);
+    _el = inject(ElementRef);
     activeColor = input(undefined, ...(ngDevMode ? [{ debugName: "activeColor" }] : /* istanbul ignore next */ []));
     _sidebarOpen = signal(false, ...(ngDevMode ? [{ debugName: "_sidebarOpen" }] : /* istanbul ignore next */ []));
     collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
@@ -11787,40 +11788,31 @@ class ClxAppLayoutComponent {
     _isMobile = signal(true, ...(ngDevMode ? [{ debugName: "_isMobile" }] : /* istanbul ignore next */ []));
     collapsedChange = output();
     expandedChange = output();
-    constructor() {
-        const zone = inject(NgZone, { optional: true });
-        this._zone = zone ?? { run: (fn) => fn(), runOutsideAngular: (fn) => fn() };
-        this._document = inject(DOCUMENT);
-    }
     _showBackdrop = computed(() => this._sidebarOpen() && this._isMobile(), ...(ngDevMode ? [{ debugName: "_showBackdrop" }] : /* istanbul ignore next */ []));
     _isExpanded = computed(() => !this.collapsed() || this._hovered(), ...(ngDevMode ? [{ debugName: "_isExpanded" }] : /* istanbul ignore next */ []));
     _sidebarCls = computed(() => {
-        const isDesktopCollapsed = this.collapsed() && !this._isMobile();
+        const mobile = this._isMobile();
+        const open = this._sidebarOpen();
+        const collapsed = this.collapsed();
         const hovered = this._hovered();
-        let width;
-        if (isDesktopCollapsed && hovered) {
-            width = 'w-72';
-        }
-        else if (isDesktopCollapsed) {
-            width = 'w-20';
-        }
-        else {
-            width = 'w-72';
-        }
-        const isOverlay = isDesktopCollapsed && hovered;
-        return [
-            `fixed inset-y-0 left-0 z-30 ${width} flex flex-col`,
-            'bg-clx-surface border-r border-clx-border overflow-hidden shrink-0',
-            'transition-[width,transform] duration-300 ease-in-out',
-            isOverlay ? 'shadow-2xl' : '',
-            'lg:transition-[width] lg:relative lg:inset-auto lg:z-30 lg:translate-x-0',
-            (!this._isMobile() || this._sidebarOpen()) ? 'translate-x-0' : '-translate-x-full',
-        ].join(' ');
+        const base = 'flex flex-col bg-clx-surface border-r border-clx-border overflow-hidden shrink-0';
+        if (mobile) {
+            // Mobile: fixed overlay, slides in/out — no width transition needed
+            const visible = open ? 'translate-x-0' : '-translate-x-full';
+            return `fixed inset-y-0 left-0 z-30 w-72 ${base} transition-transform duration-300 ease-in-out ${visible}`;
+        }
+        // Desktop: in-flow (relative), width-only transition — no fixed, no transform
+        const width = collapsed && !hovered ? 'w-20' : 'w-72';
+        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 */ []));
     _mql;
     _mqlListener;
     _resizeTimer = null;
     _resizeListener;
+    _mouseEnterFn;
+    _mouseLeaveFn;
+    _sidebarEl = null;
     ngOnInit() {
         const win = this._document.defaultView;
         if (!win)
@@ -11843,18 +11835,46 @@ 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(() => {
+            // Suppress all transitions during resize
+            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);
+            };
             win.addEventListener('resize', this._resizeListener, { passive: true });
+            // Sidebar hover outside NgZone — only enters zone when state actually changes
+            this._mouseEnterFn = () => {
+                if (!this.collapsed() || this._isMobile())
+                    return;
+                if (!this._hovered()) {
+                    this._zone.run(() => {
+                        this._hovered.set(true);
+                        this.expandedChange.emit(true);
+                    });
+                }
+            };
+            this._mouseLeaveFn = () => {
+                if (this._hovered()) {
+                    this._zone.run(() => {
+                        this._hovered.set(false);
+                        this.expandedChange.emit(false);
+                    });
+                }
+            };
+            // Attach after a tick so the aside is rendered
+            setTimeout(() => {
+                const host = this._el.nativeElement;
+                this._sidebarEl = host.querySelector('aside');
+                if (this._sidebarEl) {
+                    this._sidebarEl.addEventListener('mouseenter', this._mouseEnterFn, { passive: true });
+                    this._sidebarEl.addEventListener('mouseleave', this._mouseLeaveFn, { passive: true });
+                }
+            }, 0);
         });
     }
     ngOnDestroy() {
@@ -11863,6 +11883,10 @@ class ClxAppLayoutComponent {
         win?.removeEventListener('resize', this._resizeListener);
         if (this._resizeTimer !== null)
             clearTimeout(this._resizeTimer);
+        if (this._sidebarEl) {
+            this._sidebarEl.removeEventListener('mouseenter', this._mouseEnterFn);
+            this._sidebarEl.removeEventListener('mouseleave', this._mouseLeaveFn);
+        }
     }
     _toggleCollapsed() {
         const next = !this.collapsed();
@@ -11870,18 +11894,6 @@ class ClxAppLayoutComponent {
         this._hovered.set(false);
         this.collapsedChange.emit(next);
     }
-    _onSidebarEnter() {
-        if (this.collapsed() && !this._isMobile()) {
-            this._hovered.set(true);
-            this.expandedChange.emit(true);
-        }
-    }
-    _onSidebarLeave() {
-        if (this._hovered()) {
-            this._hovered.set(false);
-            this.expandedChange.emit(false);
-        }
-    }
     toggleSidebar() { this._sidebarOpen.update(v => !v); }
     openSidebar() { this._sidebarOpen.set(true); }
     closeSidebar() { this._sidebarOpen.set(false); }
@@ -11899,32 +11911,27 @@ class ClxAppLayoutComponent {
     <!-- Sidebar -->
     <aside
       [class]="_sidebarCls()"
-      (mouseenter)="_onSidebarEnter()"
-      (mouseleave)="_onSidebarLeave()"
       aria-label="Navegación principal">
 
-      <!-- Brand slot -->
       <div class="border-b border-slate-700/50 shrink-0 overflow-hidden">
         <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 overflow-y-auto">
         <ng-content select="[clx-sidebar]"></ng-content>
       </div>
     </aside>
 
     <!-- Right panel -->
-    <div class="flex-1 flex flex-col overflow-hidden min-w-0">
+    <div class="flex-1 flex flex-col overflow-hidden min-w-0" style="contain:layout paint">
 
       <header class="h-16 shrink-0 bg-clx-surface border-b border-clx-border flex items-center z-10 px-4 gap-3">
-        <!-- Toggle button desktop -->
         <button
           type="button"
           class="hidden lg:flex items-center justify-center w-8 h-8 rounded-md text-clx-text-subtle hover:text-clx-text-label hover:bg-clx-surface-2 transition-colors shrink-0"
           (click)="_toggleCollapsed()">
           <span clx-icon [name]="collapsed() ? 'menu_open' : 'menu'" size="sm"></span>
         </button>
-        <!-- Toggle button mobile -->
         <button
           type="button"
           class="flex lg:hidden items-center justify-center w-8 h-8 rounded-md text-clx-text-subtle hover:text-clx-text-label hover:bg-clx-surface-2 transition-colors shrink-0"
@@ -11935,19 +11942,19 @@ class ClxAppLayoutComponent {
         <ng-content select="[clx-header]"></ng-content>
       </header>
 
-      <main cdkScrollable class="flex-1 overflow-y-auto bg-clx-bg">
+      <main class="flex-1 overflow-y-auto bg-clx-bg" style="contain:layout paint">
         <ng-content></ng-content>
       </main>
 
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: ClxIconComponent, selector: "span[clx-icon]", inputs: ["name", "size", "color", "fill"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ClxAppLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'clx-app-layout',
                     standalone: true,
-                    imports: [ClxIconComponent, CdkScrollable],
+                    imports: [ClxIconComponent],
                     template: `
     <!-- Mobile backdrop -->
     @if (_showBackdrop()) {
@@ -11961,32 +11968,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
     <!-- Sidebar -->
     <aside
       [class]="_sidebarCls()"
-      (mouseenter)="_onSidebarEnter()"
-      (mouseleave)="_onSidebarLeave()"
       aria-label="Navegación principal">
 
-      <!-- Brand slot -->
       <div class="border-b border-slate-700/50 shrink-0 overflow-hidden">
         <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 overflow-y-auto">
         <ng-content select="[clx-sidebar]"></ng-content>
       </div>
     </aside>
 
     <!-- Right panel -->
-    <div class="flex-1 flex flex-col overflow-hidden min-w-0">
+    <div class="flex-1 flex flex-col overflow-hidden min-w-0" style="contain:layout paint">
 
       <header class="h-16 shrink-0 bg-clx-surface border-b border-clx-border flex items-center z-10 px-4 gap-3">
-        <!-- Toggle button desktop -->
         <button
           type="button"
           class="hidden lg:flex items-center justify-center w-8 h-8 rounded-md text-clx-text-subtle hover:text-clx-text-label hover:bg-clx-surface-2 transition-colors shrink-0"
           (click)="_toggleCollapsed()">
           <span clx-icon [name]="collapsed() ? 'menu_open' : 'menu'" size="sm"></span>
         </button>
-        <!-- Toggle button mobile -->
         <button
           type="button"
           class="flex lg:hidden items-center justify-center w-8 h-8 rounded-md text-clx-text-subtle hover:text-clx-text-label hover:bg-clx-surface-2 transition-colors shrink-0"
@@ -11997,7 +11999,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 class="flex-1 overflow-y-auto bg-clx-bg" style="contain:layout paint">
         <ng-content></ng-content>
       </main>
 
@@ -12007,7 +12009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'flex h-screen overflow-hidden' },
                 }]
-        }], ctorParameters: () => [], propDecorators: { activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
+        }], propDecorators: { activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
 
 class ClxBrandComponent {
     logo = input.required(...(ngDevMode ? [{ debugName: "logo" }] : /* istanbul ignore next */ []));
@@ -12862,20 +12864,25 @@ class ClxTableComponent {
     _isSelected(item) {
         return this.selectedItems().some(s => s === item);
     }
-    _getAlignClass(align) {
-        return TABLE_ALIGN_MAP[align];
-    }
-    _getHeaderCellClass(col) {
-        const align = this._getAlignClass(col.align || 'left');
-        const cursor = col.sortable ? 'cursor-pointer select-none' : '';
-        const extra = col.headerClass || '';
-        return `${TABLE_HEADER_CELL_CLASS} ${align} ${cursor} ${extra}`.trim();
-    }
-    _getDataCellClass(col) {
-        const align = this._getAlignClass(col.align || 'left');
-        const extra = col.cellClass || '';
-        return `${TABLE_CELL_CLASS} ${align} ${extra}`.trim();
-    }
+    _headerCellClassMap = computed(() => {
+        const map = new Map();
+        for (const col of this.columns()) {
+            const align = TABLE_ALIGN_MAP[col.align || 'left'];
+            const cursor = col.sortable ? 'cursor-pointer select-none' : '';
+            const extra = col.headerClass || '';
+            map.set(col.key, `${TABLE_HEADER_CELL_CLASS} ${align} ${cursor} ${extra}`.trim());
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "_headerCellClassMap" }] : /* istanbul ignore next */ []));
+    _dataCellClassMap = computed(() => {
+        const map = new Map();
+        for (const col of this.columns()) {
+            const align = TABLE_ALIGN_MAP[col.align || 'left'];
+            const extra = col.cellClass || '';
+            map.set(col.key, `${TABLE_CELL_CLASS} ${align} ${extra}`.trim());
+        }
+        return map;
+    }, ...(ngDevMode ? [{ debugName: "_dataCellClassMap" }] : /* istanbul ignore next */ []));
     _getCellValue(item, key) {
         return item[key];
     }
@@ -12977,7 +12984,7 @@ class ClxTableComponent {
 
               @for (col of columns(); track col.key; let first = $first; let last = $last) {
                 <th
-                  [class]="_getHeaderCellClass(col)"
+                  [class]="_headerCellClassMap().get(col.key)"
                   [class.rounded-tl-lg]="first && !selectable()"
                   [class.rounded-bl-lg]="first && !selectable()"
                   [class.rounded-tr-lg]="last"
@@ -13023,7 +13030,7 @@ class ClxTableComponent {
                 }
 
                 @for (col of columns(); track col.key) {
-                  <td [class]="_getDataCellClass(col)">
+                  <td [class]="_dataCellClassMap().get(col.key)">
                     @if (_getColumnDef(col.key)?.cell()?.templateRef; as tpl) {
                       <ng-container
                         [ngTemplateOutlet]="tpl"
@@ -13131,7 +13138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
 
               @for (col of columns(); track col.key; let first = $first; let last = $last) {
                 <th
-                  [class]="_getHeaderCellClass(col)"
+                  [class]="_headerCellClassMap().get(col.key)"
                   [class.rounded-tl-lg]="first && !selectable()"
                   [class.rounded-bl-lg]="first && !selectable()"
                   [class.rounded-tr-lg]="last"
@@ -13177,7 +13184,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }
 
                 @for (col of columns(); track col.key) {
-                  <td [class]="_getDataCellClass(col)">
+                  <td [class]="_dataCellClassMap().get(col.key)">
                     @if (_getColumnDef(col.key)?.cell()?.templateRef; as tpl) {
                       <ng-container
                         [ngTemplateOutlet]="tpl"