codexly-ui 0.0.19 → 0.0.21

package/fesm2022/codexly-ui.mjs

@@ -10886,17 +10886,32 @@ class ClxAppLayoutComponent {
     activeColor = input('indigo', ...(ngDevMode ? [{ debugName: "activeColor" }] : []));
     _sidebarOpen = signal(false, ...(ngDevMode ? [{ debugName: "_sidebarOpen" }] : []));
     collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    _hovered = signal(false, ...(ngDevMode ? [{ debugName: "_hovered" }] : []));
     _isMobile = signal(true, ...(ngDevMode ? [{ debugName: "_isMobile" }] : []));
     collapsedChange = output();
+    expandedChange = output();
     _showBackdrop = computed(() => this._sidebarOpen() && this._isMobile(), ...(ngDevMode ? [{ debugName: "_showBackdrop" }] : []));
+    _isExpanded = computed(() => !this.collapsed() || this._hovered(), ...(ngDevMode ? [{ debugName: "_isExpanded" }] : []));
     _sidebarCls = computed(() => {
-        const col = this.collapsed() && !this._isMobile();
-        const width = col ? 'w-16' : 'w-72';
+        const isDesktopCollapsed = this.collapsed() && !this._isMobile();
+        const hovered = this._hovered();
+        let width;
+        if (isDesktopCollapsed && hovered) {
+            width = 'w-72';
+        }
+        else if (isDesktopCollapsed) {
+            width = 'w-16';
+        }
+        else {
+            width = 'w-72';
+        }
+        const isOverlay = isDesktopCollapsed && hovered;
         return [
             `fixed inset-y-0 left-0 z-30 ${width} flex flex-col`,
             'bg-slate-900 overflow-y-auto shrink-0',
             'transition-[width,transform] duration-300 ease-in-out',
-            'lg:transition-[width] lg:relative lg:inset-auto lg:z-auto lg:translate-x-0',
+            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(' ');
     }, ...(ngDevMode ? [{ debugName: "_sidebarCls" }] : []));
@@ -10931,13 +10946,26 @@ class ClxAppLayoutComponent {
     _toggleCollapsed() {
         const next = !this.collapsed();
         this.collapsed.set(next);
+        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); }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ClxAppLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: ClxAppLayoutComponent, isStandalone: true, selector: "clx-app-layout", inputs: { activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange" }, host: { classAttribute: "flex h-screen overflow-hidden" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: ClxAppLayoutComponent, isStandalone: true, selector: "clx-app-layout", inputs: { activeColor: { classPropertyName: "activeColor", publicName: "activeColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsedChange: "collapsedChange", expandedChange: "expandedChange" }, host: { classAttribute: "flex h-screen overflow-hidden" }, ngImport: i0, template: `
     <!-- Mobile backdrop -->
     @if (_showBackdrop()) {
       <div
@@ -10948,7 +10976,11 @@ class ClxAppLayoutComponent {
     }
 
     <!-- Sidebar -->
-    <aside [class]="_sidebarCls()" aria-label="Navegación principal">
+    <aside
+      [class]="_sidebarCls()"
+      (mouseenter)="_onSidebarEnter()"
+      (mouseleave)="_onSidebarLeave()"
+      aria-label="Navegación principal">
       <ng-content select="[clx-sidebar]"></ng-content>
     </aside>
 
@@ -10998,7 +11030,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
     }
 
     <!-- Sidebar -->
-    <aside [class]="_sidebarCls()" aria-label="Navegación principal">
+    <aside
+      [class]="_sidebarCls()"
+      (mouseenter)="_onSidebarEnter()"
+      (mouseleave)="_onSidebarLeave()"
+      aria-label="Navegación principal">
       <ng-content select="[clx-sidebar]"></ng-content>
     </aside>
 
@@ -11034,7 +11070,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'flex h-screen overflow-hidden' },
                 }]
-        }], propDecorators: { activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }] } });
+        }], propDecorators: { activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
 
 // ── Item geometry ──────────────────────────────────────────────────────────────
 const NAV_ITEM_BASE = 'flex items-center gap-3 w-full text-sm font-medium transition-colors duration-150 cursor-pointer select-none';
@@ -11055,7 +11091,7 @@ class ClxMenuItemComponent {
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
     _geom = computed(() => {
         if (this.collapsed())
-            return 'px-0 justify-center';
+            return 'w-16 px-0 justify-center';
         return this.nested() ? NAV_ITEM_L2 : NAV_ITEM_L1;
     }, ...(ngDevMode ? [{ debugName: "_geom" }] : []));
     _iconCls = computed(() => resolveColor(this.color()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : []));
@@ -11139,7 +11175,7 @@ class ClxMenuComponent {
     }
     _iconCls = computed(() => resolveColor(this.color()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : []));
     _buttonCls = computed(() => {
-        const geom = this.collapsed() ? 'px-0 justify-center' : NAV_ITEM_L1;
+        const geom = this.collapsed() ? 'w-16 px-0 justify-center' : NAV_ITEM_L1;
         const base = `${NAV_ITEM_BASE} ${geom}`;
         const t = resolveColor(this.color());
         if (this._isChildActive()) {
@@ -11251,8 +11287,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
 
 class ClxNavGroupComponent {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ClxNavGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.21", type: ClxNavGroupComponent, isStandalone: true, selector: "clx-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "textContent": "label()" }, classAttribute: "block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-slate-500 select-none" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.21", type: ClxNavGroupComponent, isStandalone: true, selector: "clx-nav-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "textContent": "!collapsed() ? label() : \"\"", "class.!p-0": "collapsed()", "class.!h-0": "collapsed()", "class.!pt-0": "collapsed()", "class.!pb-0": "collapsed()" }, classAttribute: "block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-slate-500 select-none overflow-hidden transition-all duration-300" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ClxNavGroupComponent, decorators: [{
             type: Component,
@@ -11263,11 +11300,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                     encapsulation: ViewEncapsulation.None,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
-                        class: 'block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-slate-500 select-none',
-                        '[textContent]': 'label()',
+                        class: 'block px-6 pt-5 pb-1 text-[10px] font-bold uppercase tracking-widest text-slate-500 select-none overflow-hidden transition-all duration-300',
+                        '[textContent]': '!collapsed() ? label() : ""',
+                        '[class.!p-0]': 'collapsed()',
+                        '[class.!h-0]': 'collapsed()',
+                        '[class.!pt-0]': 'collapsed()',
+                        '[class.!pb-0]': 'collapsed()',
                     },
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
 
 // ── Base classes ─────────────────────────────────────────────────────────────
 const TABLE_BASE_CLASS = 'w-full text-left border-collapse text-sm';