codexly-ui 0.0.14 → 0.0.15

package/fesm2022/codexly-ui.mjs

@@ -10880,25 +10880,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                 args: [ClxStepComponent]
             }] } });
 
-const CLX_MENU_COLOR = new InjectionToken('CLX_MENU_COLOR');
-const CLX_LAYOUT_REF = new InjectionToken('CLX_LAYOUT_REF');
-// ── 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';
-const NAV_ITEM_L2 = 'pl-4 pr-3 py-2';
-const NAV_ITEM_IDLE = 'text-slate-400';
-// ── Children container ─────────────────────────────────────────────────────────
-const NAV_CHILDREN_WRAPPER = 'grid transition-all duration-300 ease-in-out';
-const NAV_CHILDREN_INNER = 'overflow-hidden';
-const NAV_CHILDREN_LIST = 'ml-6 border-l border-slate-700/60 py-1 space-y-0.5';
+class ClxLayoutService {
+    collapsed = signal(false, ...(ngDevMode ? [{ debugName: "collapsed" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ClxLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ClxLayoutService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImport: i0, type: ClxLayoutService, decorators: [{
+            type: Injectable
+        }] });
 
 class ClxAppLayoutComponent {
     _zone = inject(NgZone);
     _document = inject(DOCUMENT);
+    _layout = inject(ClxLayoutService);
     activeColor = input('indigo', ...(ngDevMode ? [{ debugName: "activeColor" }] : []));
     _sidebarOpen = signal(false, ...(ngDevMode ? [{ debugName: "_sidebarOpen" }] : []));
-    _collapsed = signal(false, ...(ngDevMode ? [{ debugName: "_collapsed" }] : []));
-    collapsed = this._collapsed;
+    _collapsed = this._layout.collapsed;
     _isMobile = signal(true, ...(ngDevMode ? [{ debugName: "_isMobile" }] : []));
     _showBackdrop = computed(() => this._sidebarOpen() && this._isMobile(), ...(ngDevMode ? [{ debugName: "_showBackdrop" }] : []));
     _sidebarCls = computed(() => {
@@ -10944,9 +10941,7 @@ class ClxAppLayoutComponent {
     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: CLX_LAYOUT_REF, 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 } }, host: { classAttribute: "flex h-screen overflow-hidden" }, providers: [ClxLayoutService], ngImport: i0, template: `
     <!-- Mobile backdrop -->
     @if (_showBackdrop()) {
       <div
@@ -10996,9 +10991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                     selector: 'clx-app-layout',
                     standalone: true,
                     imports: [ClxIconComponent],
-                    providers: [
-                        { provide: CLX_LAYOUT_REF, useExisting: ClxAppLayoutComponent },
-                    ],
+                    providers: [ClxLayoutService],
                     template: `
     <!-- Mobile backdrop -->
     @if (_showBackdrop()) {
@@ -11048,6 +11041,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.21", ngImpo
                 }]
         }], propDecorators: { activeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeColor", required: false }] }] } });
 
+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';
+const NAV_ITEM_L2 = 'pl-4 pr-3 py-2';
+const NAV_ITEM_IDLE = 'text-slate-400';
+// ── Children container ─────────────────────────────────────────────────────────
+const NAV_CHILDREN_WRAPPER = 'grid transition-all duration-300 ease-in-out';
+const NAV_CHILDREN_INNER = 'overflow-hidden';
+const NAV_CHILDREN_LIST = 'ml-6 border-l border-slate-700/60 py-1 space-y-0.5';
+
 class ClxMenuItemComponent {
     label = input.required(...(ngDevMode ? [{ debugName: "label" }] : []));
     icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
@@ -11055,9 +11059,9 @@ class ClxMenuItemComponent {
     color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : []));
     nested = input(false, ...(ngDevMode ? [{ debugName: "nested" }] : []));
     _menuColorFn = inject(CLX_MENU_COLOR, { optional: true });
-    _layoutRef = inject(CLX_LAYOUT_REF, { optional: true });
+    _layout = inject(ClxLayoutService, { optional: true });
     _hasParent = !!this._menuColorFn;
-    _collapsed = computed(() => this._layoutRef?.collapsed() ?? false, ...(ngDevMode ? [{ debugName: "_collapsed" }] : []));
+    _collapsed = computed(() => this._layout?.collapsed() ?? false, ...(ngDevMode ? [{ debugName: "_collapsed" }] : []));
     _resolvedColor = computed(() => this._menuColorFn?.() ?? this.color(), ...(ngDevMode ? [{ debugName: "_resolvedColor" }] : []));
     _geom = computed(() => {
         if (this._collapsed())
@@ -11129,8 +11133,8 @@ class ClxMenuComponent {
     icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
     color = input('indigo', ...(ngDevMode ? [{ debugName: "color" }] : []));
     _isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "_isExpanded" }] : []));
-    _layoutRef = inject(CLX_LAYOUT_REF, { optional: true });
-    _collapsed = computed(() => this._layoutRef?.collapsed() ?? false, ...(ngDevMode ? [{ debugName: "_collapsed" }] : []));
+    _layout = inject(ClxLayoutService, { optional: true });
+    _collapsed = computed(() => this._layout?.collapsed() ?? false, ...(ngDevMode ? [{ debugName: "_collapsed" }] : []));
     _childItems;
     _childRoutes = [];
     _router = inject(Router);