codexly-ui 0.0.18 → 0.0.20

package/fesm2022/codexly-ui.mjs

@@ -11036,7 +11036,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                 }]
         }], 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';
@@ -11054,21 +11053,18 @@ class ClxMenuItemComponent {
     color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : []));
     nested = input(false, ...(ngDevMode ? [{ debugName: "nested" }] : []));
     collapsed = input(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
-    _menuColorFn = inject(CLX_MENU_COLOR, { optional: true });
-    _hasParent = !!this._menuColorFn;
-    _resolvedColor = computed(() => this._menuColorFn?.() ?? this.color(), ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : []));
     _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._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());
+        const t = resolveColor(this.color());
         if (this.collapsed()) {
             return `${NAV_ITEM_BASE} ${this._geom()} ${t.textSubtle} font-semibold`;
         }
@@ -11085,7 +11081,7 @@ class ClxMenuItemComponent {
       [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()) {
         <span class="flex-1 truncate">{{ label() }}</span>
@@ -11109,7 +11105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
       [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()) {
         <span class="flex-1 truncate">{{ label() }}</span>
@@ -11143,7 +11139,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()) {
@@ -11171,9 +11167,7 @@ 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 }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", 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, descendants: true }], 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()"
@@ -11213,9 +11207,6 @@ 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"
@@ -11260,8 +11251,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,
@@ -11272,11 +11264,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';