@ng-cn/core 1.0.15 → 1.0.17

package/src/app/lib/components/ui/sidebar/sidebar-input.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * SidebarInput component - input field for sidebar.
@@ -13,6 +8,7 @@ import {
   selector: 'SidebarInput',
   template: ``,
   host: {
+    'attr.data-slot': '"sidebar-input"',
     '[class]': 'computedClass()',
     'data-sidebar': 'input',
   },
@@ -25,7 +21,7 @@ export class SidebarInput {
   protected readonly computedClass = computed(() =>
     cn(
       'h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/sidebar/sidebar-inset.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * SidebarInset component - main content area next to sidebar.
@@ -13,6 +8,7 @@ import {
   selector: 'SidebarInset',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-inset"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -25,7 +21,7 @@ export class SidebarInset {
     cn(
       'relative flex min-h-svh flex-1 flex-col bg-background',
       'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/sidebar/sidebar-menu-action.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * SidebarMenuAction component - action button in menu item.
@@ -16,6 +11,7 @@ import {
   selector: 'SidebarMenuAction',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-menu-action"',
     '[class]': 'computedClass()',
     'data-sidebar': 'menu-action',
     '[attr.role]': '"button"',
@@ -50,7 +46,7 @@ export class SidebarMenuAction {
       // Show on hover behavior
       this.showOnHover() &&
         'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/sidebar/sidebar-menu-badge.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * SidebarMenuBadge component - badge in menu item.
@@ -16,6 +11,7 @@ import {
   selector: 'SidebarMenuBadge',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-menu-badge"',
     '[class]': 'computedClass()',
     'data-sidebar': 'menu-badge',
   },
@@ -36,7 +32,7 @@ export class SidebarMenuBadge {
       'peer-data-[size=lg]/menu-button:top-2.5',
       // Hide in collapsed icon mode
       'group-data-[collapsible=icon]/sidebar-wrapper:hidden',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/sidebar/sidebar-menu-button.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import type { AriaCurrentValue } from './sidebar-context';
 
 /**
@@ -17,6 +12,7 @@ import type { AriaCurrentValue } from './sidebar-context';
   selector: 'SidebarMenuButton',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-menu-button"',
     '[class]': 'computedClass()',
     'data-sidebar': 'menu-button',
     '[attr.data-size]': 'size()',
@@ -57,8 +53,7 @@ export class SidebarMenuButton {
       'group-data-[collapsible=icon]/sidebar-wrapper:!size-8 group-data-[collapsible=icon]/sidebar-wrapper:!p-2',
       this.size() === 'sm' && 'text-xs px-2 py-1.5',
       this.size() === 'lg' && 'text-sm group-data-[collapsible=icon]/sidebar-wrapper:!p-0',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }
-

package/src/app/lib/components/ui/sidebar/sidebar-menu-item.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * SidebarMenuItem component - individual menu item.
@@ -16,6 +11,7 @@ import {
   selector: 'SidebarMenuItem',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-menu-item"',
     '[class]': 'computedClass()',
     'data-sidebar': 'menu-item',
     '[attr.role]': '"presentation"',
@@ -26,7 +22,5 @@ export class SidebarMenuItem {
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn('group/menu-item relative', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('group/menu-item relative', this.class()));
 }

package/src/app/lib/components/ui/sidebar/sidebar-menu-skeleton.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * SidebarMenuSkeleton component - loading skeleton for menu items.
@@ -18,22 +13,22 @@ import {
     ></div>
   `,
   host: {
+    'attr.data-slot': '"sidebar-menu-skeleton"',
     '[class]': 'computedClass()',
     'data-sidebar': 'menu-skeleton',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SidebarMenuSkeleton {
-  /** Width of the skeleton */
-  readonly width = Math.floor(Math.random() * 40) + 50;
-
   /** Whether to show icon skeleton */
   readonly showIcon = input<boolean>(false);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('rounded-md h-8 flex gap-2 px-2 items-center', this.class())
+    cn('rounded-md h-8 flex gap-2 px-2 items-center', this.class()),
   );
+
+  /** Width of the skeleton */
+  readonly width = Math.floor(Math.random() * 40) + 50;
 }

package/src/app/lib/components/ui/sidebar/sidebar-menu-sub-button.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 import type { AriaCurrentValue } from './sidebar-context';
 
 /**
@@ -17,6 +12,7 @@ import type { AriaCurrentValue } from './sidebar-context';
   selector: 'SidebarMenuSubButton',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-menu-sub-button"',
     '[class]': 'computedClass()',
     'data-sidebar': 'menu-sub-button',
     '[attr.data-size]': 'size()',
@@ -53,7 +49,7 @@ export class SidebarMenuSubButton {
       '[&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
       this.size() === 'sm' && 'text-xs',
       this.size() === 'md' && 'text-sm',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/sidebar/sidebar-menu-sub-item.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * SidebarMenuSubItem component - item in submenu.
@@ -13,6 +8,7 @@ import {
   selector: 'SidebarMenuSubItem',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-menu-sub-item"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/sidebar/sidebar-menu-sub.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * SidebarMenuSub component - submenu container.
@@ -13,6 +8,7 @@ import {
   selector: 'SidebarMenuSub',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-menu-sub"',
     '[class]': 'computedClass()',
     'data-sidebar': 'menu-sub',
   },
@@ -26,7 +22,7 @@ export class SidebarMenuSub {
     cn(
       'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
       'group-data-[collapsible=icon]/sidebar-wrapper:hidden',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/sidebar/sidebar-menu.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * SidebarMenu component - menu container in sidebar.
@@ -15,6 +10,7 @@ import {
   selector: 'SidebarMenu',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-menu"',
     '[class]': 'computedClass()',
     'data-sidebar': 'menu',
     '[attr.role]': '"menu"',
@@ -26,6 +22,6 @@ export class SidebarMenu {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('flex w-full min-w-0 flex-col gap-1', this.class())
+    cn('flex w-full min-w-0 flex-col gap-1', this.class()),
   );
 }

package/src/app/lib/components/ui/sidebar/sidebar-provider.component.ts

@@ -1,25 +1,25 @@
 import { cn } from '@/lib/utils';
 import {
-    afterNextRender,
-    booleanAttribute,
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    forwardRef,
-    HostListener,
-    input,
-    model,
-    output,
-    signal,
+  afterNextRender,
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  forwardRef,
+  HostListener,
+  input,
+  model,
+  output,
+  signal,
 } from '@angular/core';
 import {
-    SIDEBAR_CONTEXT,
-    SIDEBAR_KEYBOARD_SHORTCUT,
-    SIDEBAR_WIDTH,
-    SIDEBAR_WIDTH_ICON,
-    type SidebarContext,
-    type SidebarState,
+  SIDEBAR_CONTEXT,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+  type SidebarContext,
+  type SidebarState,
 } from './sidebar-context';
 
 /**
@@ -41,6 +41,7 @@ import {
   selector: 'SidebarProvider',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-provider"',
     '[class]': 'computedClass()',
     '[style.--sidebar-width]': 'sidebarWidth',
     '[style.--sidebar-width-icon]': 'SIDEBAR_WIDTH_ICON',
@@ -56,23 +57,42 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SidebarProvider {
-  /** Default open state */
-  readonly defaultOpen = input<boolean, unknown>(true, {
-    transform: booleanAttribute,
-  });
+  constructor() {
+    // Check for mobile on init (browser-only)
+    afterNextRender(() => {
+      this.checkMobile();
+    });
 
-  /** Controlled open state */
-  readonly open = model<boolean>(true);
+    // Sync open state
+    effect(() => {
+      const openValue = this.open();
+      this.context.open.set(openValue);
+      this.context.state.set(openValue ? 'expanded' : 'collapsed');
+    });
+  }
 
   /** Open state change event */
   readonly openChange = output<boolean>();
 
+  /** Controlled open state */
+  readonly open = model<boolean>(true);
+
+  /** Default open state */
+  readonly defaultOpen = input<boolean, unknown>(true, {
+    transform: booleanAttribute,
+  });
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly computedClass = computed(() =>
+    cn(
+      'group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar',
+      this.class(),
+    ),
+  );
+
   protected readonly SIDEBAR_WIDTH_ICON = SIDEBAR_WIDTH_ICON;
   protected readonly sidebarWidth = SIDEBAR_WIDTH;
-
   /** Context for child components */
   readonly context: SidebarContext = {
     state: signal<SidebarState>('expanded'),
@@ -97,45 +117,19 @@ export class SidebarProvider {
     },
   };
 
-  constructor() {
-    // Check for mobile on init (browser-only)
-    afterNextRender(() => {
-      this.checkMobile();
-    });
-
-    // Sync open state
-    effect(() => {
-      const openValue = this.open();
-      this.context.open.set(openValue);
-      this.context.state.set(openValue ? 'expanded' : 'collapsed');
-    });
-  }
-
   @HostListener('window:resize')
   protected onResize(): void {
     this.checkMobile();
   }
-
   @HostListener('document:keydown', ['$event'])
   protected onKeydown(event: KeyboardEvent): void {
-    if (
-      event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
-      (event.metaKey || event.ctrlKey)
-    ) {
+    if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
       event.preventDefault();
       this.context.toggleSidebar();
     }
   }
-
   private checkMobile(): void {
     const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
     this.context.isMobile.set(isMobile);
   }
-
-  protected readonly computedClass = computed(() =>
-    cn(
-      'group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar',
-      this.class()
-    )
-  );
 }

package/src/app/lib/components/ui/sidebar/sidebar-rail.component.ts

@@ -1,11 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { SIDEBAR_CONTEXT } from './sidebar-context';
 
 /**
@@ -15,6 +9,7 @@ import { SIDEBAR_CONTEXT } from './sidebar-context';
   selector: 'SidebarRail',
   template: ``,
   host: {
+    'attr.data-slot': '"sidebar-rail"',
     '[class]': 'computedClass()',
     '[attr.aria-label]': '"Toggle Sidebar"',
     '[attr.tabindex]': '-1',
@@ -24,11 +19,11 @@ import { SIDEBAR_CONTEXT } from './sidebar-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SidebarRail {
-  protected readonly context = inject(SIDEBAR_CONTEXT);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly context = inject(SIDEBAR_CONTEXT);
+
   protected readonly computedClass = computed(() =>
     cn(
       'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]/sidebar-wrapper:right-0 group-data-[side=right]/sidebar-wrapper:left-0 sm:flex',
@@ -37,8 +32,8 @@ export class SidebarRail {
       'group-data-[collapsible=offcanvas]/sidebar-wrapper:translate-x-0 group-data-[collapsible=offcanvas]/sidebar-wrapper:after:left-full group-data-[collapsible=offcanvas]/sidebar-wrapper:hover:bg-sidebar',
       '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
       '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
   protected onClick(): void {

package/src/app/lib/components/ui/sidebar/sidebar-route-active.service.ts

@@ -16,26 +16,26 @@ import { filter, map } from 'rxjs';
   providedIn: 'root',
 })
 export class SidebarRouteActiveService {
-  private readonly router = inject(Router);
-
-  /** Current active route */
-  readonly currentRoute = signal<string>('');
-
   constructor() {
     // Initialize with current route
     this.updateCurrentRoute();
 
     // Subscribe to route changes
-    this.router.events
+    this._router.events
       .pipe(
-        filter(event => event instanceof NavigationEnd),
-        map((event: NavigationEnd) => event.urlAfterRedirects || event.url)
+        filter((event) => event instanceof NavigationEnd),
+        map((event: NavigationEnd) => event.urlAfterRedirects || event.url),
       )
-      .subscribe(url => {
+      .subscribe((url) => {
         this.currentRoute.set(url);
       });
   }
 
+  private readonly _router = inject(Router);
+
+  /** Current active route */
+  readonly currentRoute = signal<string>('');
+
   /**
    * Check if a route is currently active.
    * Supports both exact and partial matching.
@@ -61,7 +61,6 @@ export class SidebarRouteActiveService {
 
     return normalizedCurrent.startsWith(normalizedRoute);
   }
-
   /**
    * Check if any of the provided routes is active.
    *
@@ -73,9 +72,8 @@ export class SidebarRouteActiveService {
    * isAnyRouteActive(['dashboard', 'analytics'])
    */
   isAnyRouteActive(routes: string[], exact: boolean = false): boolean {
-    return routes.some(route => this.isRouteActive(route, exact));
+    return routes.some((route) => this.isRouteActive(route, exact));
   }
-
   /**
    * Get the current route segment (the main route without parameters).
    *
@@ -86,10 +84,11 @@ export class SidebarRouteActiveService {
    * getMainRoute() // returns '/dashboard'
    */
   getMainRoute(): string {
-    const parts = this.currentRoute().split('/').filter(p => p);
+    const parts = this.currentRoute()
+      .split('/')
+      .filter((p) => p);
     return parts.length > 0 ? `/${parts[0]}` : '';
   }
-
   /**
    * Get the current route level.
    *
@@ -100,7 +99,9 @@ export class SidebarRouteActiveService {
    * getRouteLevel() // returns 2
    */
   getRouteLevel(): number {
-    return this.currentRoute().split('/').filter(p => p).length;
+    return this.currentRoute()
+      .split('/')
+      .filter((p) => p).length;
   }
 
   /**
@@ -112,13 +113,12 @@ export class SidebarRouteActiveService {
   private normalize(route: string): string {
     return `/${route}`.replace(/\/$/, '').toLowerCase();
   }
-
   /**
    * Update the current route based on the router's current URL.
    *
    * @private
    */
   private updateCurrentRoute(): void {
-    this.currentRoute.set(this.router.url);
+    this.currentRoute.set(this._router.url);
   }
 }

package/src/app/lib/components/ui/sidebar/sidebar-separator.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * SidebarSeparator component - separator line in sidebar.
@@ -13,6 +8,7 @@ import {
   selector: 'SidebarSeparator',
   template: ``,
   host: {
+    'attr.data-slot': '"sidebar-separator"',
     '[class]': 'computedClass()',
     'data-sidebar': 'separator',
   },
@@ -23,6 +19,6 @@ export class SidebarSeparator {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('mx-2 w-auto bg-sidebar-border', this.class())
+    cn('mx-2 w-auto bg-sidebar-border', this.class()),
   );
 }

package/src/app/lib/components/ui/sidebar/sidebar-trigger.component.ts

@@ -1,11 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { SIDEBAR_CONTEXT } from './sidebar-context';
 
 /**
@@ -33,22 +27,23 @@ import { SIDEBAR_CONTEXT } from './sidebar-context';
     <ng-content />
   `,
   host: {
+    'attr.data-slot': '"sidebar-trigger"',
     '[class]': 'computedClass()',
     '(click)': 'onClick()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SidebarTrigger {
-  protected readonly context = inject(SIDEBAR_CONTEXT);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly context = inject(SIDEBAR_CONTEXT);
+
   protected readonly computedClass = computed(() =>
     cn(
       'inline-flex h-7 w-7 items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
   protected onClick(): void {