codexly-ui 0.0.17 → 0.0.19

package/fesm2022/codexly-ui.mjs

@@ -10885,12 +10885,13 @@ class ClxAppLayoutComponent {
     _document = inject(DOCUMENT);
     activeColor = input('indigo', ...(ngDevMode ? [{ debugName: "activeColor" }] : []));
     _sidebarOpen = signal(false, ...(ngDevMode ? [{ debugName: "_sidebarOpen" }] : []));
-    _collapsed = signal(false, ...(ngDevMode ? [{ debugName: "_collapsed" }] : []));
+    collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
     _isMobile = signal(true, ...(ngDevMode ? [{ debugName: "_isMobile" }] : []));
+    collapsedChange = output();
     _showBackdrop = computed(() => this._sidebarOpen() && this._isMobile(), ...(ngDevMode ? [{ debugName: "_showBackdrop" }] : []));
     _sidebarCls = computed(() => {
-        const collapsed = this._collapsed() && !this._isMobile();
-        const width = collapsed ? 'w-16' : 'w-72';
+        const col = this.collapsed() && !this._isMobile();
+        const width = col ? 'w-16' : 'w-72';
         return [
             `fixed inset-y-0 left-0 z-30 ${width} flex flex-col`,
             'bg-slate-900 overflow-y-auto shrink-0',
@@ -10917,7 +10918,8 @@ class ClxAppLayoutComponent {
                 }
                 else {
                     this._sidebarOpen.set(false);
-                    this._collapsed.set(false);
+                    this.collapsed.set(false);
+                    this.collapsedChange.emit(false);
                 }
             });
         };
@@ -10926,12 +10928,16 @@ class ClxAppLayoutComponent {
     ngOnDestroy() {
         this._mql?.removeEventListener('change', this._mqlListener);
     }
-    _toggleCollapsed() { this._collapsed.update(v => !v); }
+    _toggleCollapsed() {
+        const next = !this.collapsed();
+        this.collapsed.set(next);
+        this.collapsedChange.emit(next);
+    }
     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 } }, host: { classAttribute: "flex h-screen overflow-hidden" }, providers: [{ provide: ClxAppLayoutComponent, useExisting: ClxAppLayoutComponent }], 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" }, host: { classAttribute: "flex h-screen overflow-hidden" }, ngImport: i0, template: `
     <!-- Mobile backdrop -->
     @if (_showBackdrop()) {
       <div
@@ -10955,7 +10961,7 @@ class ClxAppLayoutComponent {
           type="button"
           class="hidden lg:flex items-center justify-center w-8 h-8 rounded-md text-slate-500 hover:text-slate-700 hover:bg-slate-100 transition-colors shrink-0"
           (click)="_toggleCollapsed()">
-          <span clx-icon [name]="_collapsed() ? 'menu_open' : 'menu'" size="sm"></span>
+          <span clx-icon [name]="collapsed() ? 'menu_open' : 'menu'" size="sm"></span>
         </button>
         <!-- Toggle button mobile -->
         <button
@@ -10981,7 +10987,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                     selector: 'clx-app-layout',
                     standalone: true,
                     imports: [ClxIconComponent],
-                    providers: [{ provide: ClxAppLayoutComponent, useExisting: ClxAppLayoutComponent }],
                     template: `
     <!-- Mobile backdrop -->
     @if (_showBackdrop()) {
@@ -11006,7 +11011,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
           type="button"
           class="hidden lg:flex items-center justify-center w-8 h-8 rounded-md text-slate-500 hover:text-slate-700 hover:bg-slate-100 transition-colors shrink-0"
           (click)="_toggleCollapsed()">
-          <span clx-icon [name]="_collapsed() ? 'menu_open' : 'menu'" size="sm"></span>
+          <span clx-icon [name]="collapsed() ? 'menu_open' : 'menu'" size="sm"></span>
         </button>
         <!-- Toggle button mobile -->
         <button
@@ -11029,9 +11034,8 @@ 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 }] }] } });
+        }], propDecorators: { activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }], collapsedChange: [{ type: i0.Output, args: ["collapsedChange"] }] } });
 
-const CLX_MENU_COLOR = new InjectionToken('CLX_MENU_COLOR');
 // ── 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';
 const NAV_ITEM_L1 = 'px-6 py-3';
@@ -11048,42 +11052,38 @@ class ClxMenuItemComponent {
     route = input('', ...(ngDevMode ? [{ debugName: "route" }] : []));
     color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : []));
     nested = input(false, ...(ngDevMode ? [{ debugName: "nested" }] : []));
-    _menuColorFn = inject(CLX_MENU_COLOR, { optional: true });
-    _layout = inject(ClxAppLayoutComponent, { optional: true });
-    _hasParent = !!this._menuColorFn;
-    _collapsed = computed(() => this._layout?._collapsed() ?? false, ...(ngDevMode ? [{ debugName: "_collapsed" }] : []));
-    _resolvedColor = computed(() => this._menuColorFn?.() ?? this.color(), ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : []));
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
     _geom = computed(() => {
-        if (this._collapsed())
+        if (this.collapsed())
             return 'px-0 justify-center';
         return this.nested() ? NAV_ITEM_L2 : NAV_ITEM_L1;
     }, ...(ngDevMode ? [{ debugName: "_geom" }] : []));
-    _iconCls = computed(() => resolveColor(this._resolvedColor()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : []));
+    _iconCls = computed(() => resolveColor(this.color()).textSubtle, ...(ngDevMode ? [{ debugName: "_iconCls" }] : []));
     _idleCls = computed(() => {
-        const t = resolveColor(this._resolvedColor());
+        const t = resolveColor(this.color());
         return `${NAV_ITEM_BASE} ${this._geom()} ${NAV_ITEM_IDLE} ${t.hoverBgMuted}`;
     }, ...(ngDevMode ? [{ debugName: "_idleCls" }] : []));
     _activeCls = computed(() => {
-        const t = resolveColor(this._resolvedColor());
-        if (this._collapsed()) {
+        const t = resolveColor(this.color());
+        if (this.collapsed()) {
             return `${NAV_ITEM_BASE} ${this._geom()} ${t.textSubtle} font-semibold`;
         }
         return `${NAV_ITEM_BASE} ${this._geom()} ${t.textSubtle} font-semibold border-l-2 ${t.borderLight} !pl-[22px] ${t.hoverBgMuted}`;
     }, ...(ngDevMode ? [{ debugName: "_activeCls" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ClxMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: ClxMenuItemComponent, isStandalone: true, selector: "clx-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: ClxMenuItemComponent, isStandalone: true, selector: "clx-menu-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, nested: { classPropertyName: "nested", publicName: "nested", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
     <a
       [routerLink]="route() || null"
       routerLinkActive
       #rla="routerLinkActive"
       [routerLinkActiveOptions]="{ exact: false }"
       [class]="rla.isActive ? _activeCls() : _idleCls()"
-      [title]="_collapsed() ? label() : ''"
+      [title]="collapsed() ? label() : ''"
       (click)="route() ? null : $event.preventDefault()">
       @if (icon()) {
-        <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive || !_hasParent ? _iconCls() : 'text-slate-500'"></span>
+        <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive || nested() ? _iconCls() : 'text-slate-500'"></span>
       }
-      @if (!_collapsed()) {
+      @if (!collapsed()) {
         <span class="flex-1 truncate">{{ label() }}</span>
       }
     </a>
@@ -11102,12 +11102,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
       #rla="routerLinkActive"
       [routerLinkActiveOptions]="{ exact: false }"
       [class]="rla.isActive ? _activeCls() : _idleCls()"
-      [title]="_collapsed() ? label() : ''"
+      [title]="collapsed() ? label() : ''"
       (click)="route() ? null : $event.preventDefault()">
       @if (icon()) {
-        <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive || !_hasParent ? _iconCls() : 'text-slate-500'"></span>
+        <span clx-icon [name]="icon()" size="sm" [class]="rla.isActive || nested() ? _iconCls() : 'text-slate-500'"></span>
       }
-      @if (!_collapsed()) {
+      @if (!collapsed()) {
         <span class="flex-1 truncate">{{ label() }}</span>
       }
     </a>
@@ -11116,15 +11116,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], route: [{ type: i0.Input, args: [{ isSignal: true, alias: "route", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], nested: [{ type: i0.Input, args: [{ isSignal: true, alias: "nested", required: false }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], route: [{ type: i0.Input, args: [{ isSignal: true, alias: "route", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], nested: [{ type: i0.Input, args: [{ isSignal: true, alias: "nested", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }] } });
 
 class ClxMenuComponent {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
     icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
     color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
     _isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "_isExpanded" }] : []));
-    _layout = inject(ClxAppLayoutComponent, { optional: true });
-    _collapsed = computed(() => this._layout?._collapsed() ?? false, ...(ngDevMode ? [{ debugName: "_collapsed" }] : []));
     _childItems;
     _childRoutes = [];
     _router = inject(Router);
@@ -11140,11 +11139,11 @@ 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() ? 'px-0 justify-center' : NAV_ITEM_L1;
         const base = `${NAV_ITEM_BASE} ${geom}`;
         const t = resolveColor(this.color());
         if (this._isChildActive()) {
-            if (this._collapsed())
+            if (this.collapsed())
                 return `${base} ${t.textSubtle} font-semibold`;
             return `${base} ${t.textSubtle} font-semibold border-l-2 ${t.borderLight} !pl-[22px]`;
         }
@@ -11168,18 +11167,16 @@ class ClxMenuComponent {
         this._isExpanded.update(v => !v);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ClxMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: ClxMenuComponent, isStandalone: true, selector: "clx-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, providers: [
-            { provide: CLX_MENU_COLOR, useFactory: (self) => () => self.color(), deps: [ClxMenuComponent] },
-        ], queries: [{ propertyName: "_childItems", predicate: ClxMenuItemComponent }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.21", type: ClxMenuComponent, isStandalone: true, selector: "clx-menu", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, queries: [{ propertyName: "_childItems", predicate: ClxMenuItemComponent, descendants: true }], ngImport: i0, template: `
     <button
       type="button"
       [class]="_buttonCls()"
-      [title]="_collapsed() ? label() : ''"
-      (click)="!_collapsed() && _toggle()">
+      [title]="collapsed() ? label() : ''"
+      (click)="!collapsed() && _toggle()">
       @if (icon()) {
         <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
       }
-      @if (!_collapsed()) {
+      @if (!collapsed()) {
         <span class="flex-1 text-left truncate">{{ label() }}</span>
         <span
           clx-icon
@@ -11191,7 +11188,7 @@ class ClxMenuComponent {
       }
     </button>
 
-    @if (!_collapsed()) {
+    @if (!collapsed()) {
       <div
         [class]="NAV_CHILDREN_WRAPPER"
         [style.grid-template-rows]="_isExpanded() ? '1fr' : '0fr'">
@@ -11210,19 +11207,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                     selector: 'clx-menu',
                     standalone: true,
                     imports: [ClxIconComponent],
-                    providers: [
-                        { provide: CLX_MENU_COLOR, useFactory: (self) => () => self.color(), deps: [ClxMenuComponent] },
-                    ],
                     template: `
     <button
       type="button"
       [class]="_buttonCls()"
-      [title]="_collapsed() ? label() : ''"
-      (click)="!_collapsed() && _toggle()">
+      [title]="collapsed() ? label() : ''"
+      (click)="!collapsed() && _toggle()">
       @if (icon()) {
         <span clx-icon [name]="icon()" size="sm" [class]="_iconCls()"></span>
       }
-      @if (!_collapsed()) {
+      @if (!collapsed()) {
         <span class="flex-1 text-left truncate">{{ label() }}</span>
         <span
           clx-icon
@@ -11234,7 +11228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
       }
     </button>
 
-    @if (!_collapsed()) {
+    @if (!collapsed()) {
       <div
         [class]="NAV_CHILDREN_WRAPPER"
         [style.grid-template-rows]="_isExpanded() ? '1fr' : '0fr'">
@@ -11250,9 +11244,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     host: { class: 'block' },
                 }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], _childItems: [{
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], _childItems: [{
                 type: ContentChildren,
-                args: [ClxMenuItemComponent, { descendants: false }]
+                args: [ClxMenuItemComponent, { descendants: true }]
             }] } });
 
 class ClxNavGroupComponent {