@ng-cn/core 1.0.15 → 1.0.17

package/src/app/lib/components/ui/sheet/sheet-content.component.ts

@@ -1,13 +1,13 @@
 import { cn, Presence } from '@/lib/utils';
 import { FocusTrapDirective } from '@/lib/utils/accessibility';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    inject,
-    input,
-    OnDestroy
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  inject,
+  input,
+  OnDestroy,
 } from '@angular/core';
 import { SHEET_CONTEXT } from './sheet-context';
 import { sheetVariants, type SheetVariants } from './sheet-variants';
@@ -76,26 +76,12 @@ import { sheetVariants, type SheetVariants } from './sheet-variants';
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"sheet-content"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SheetContent implements OnDestroy {
-  protected readonly context = inject(SHEET_CONTEXT);
-
-  /** Side from which the sheet appears */
-  readonly side = input<SheetVariants['side']>('right');
-
-  /** Additional CSS classes */
-  readonly class = input<string>('');
-
-  /** Previous body overflow for restoration */
-  private previousBodyOverflow = '';
-
-  protected readonly computedClass = computed(() =>
-    cn(sheetVariants({ side: this.side() }), this.class())
-  );
-
   constructor() {
     // Handle body scroll lock based on open state (browser-only via effect + afterNextRender)
     effect(() => {
@@ -108,18 +94,19 @@ export class SheetContent implements OnDestroy {
     });
   }
 
-  private lockBodyScroll(): void {
-    if (typeof document !== 'undefined') {
-      this.previousBodyOverflow = document.body.style.overflow;
-      document.body.style.overflow = 'hidden';
-    }
-  }
+  /** Side from which the sheet appears */
+  readonly side = input<SheetVariants['side']>('right');
+  /** Additional CSS classes */
+  readonly class = input<string>('');
 
-  private unlockBodyScroll(): void {
-    if (typeof document !== 'undefined') {
-      document.body.style.overflow = this.previousBodyOverflow;
-    }
-  }
+  protected readonly context = inject(SHEET_CONTEXT);
+
+  protected readonly computedClass = computed(() =>
+    cn(sheetVariants({ side: this.side() }), this.class()),
+  );
+
+  /** Previous body overflow for restoration */
+  private previousBodyOverflow = '';
 
   ngOnDestroy(): void {
     // Restore body scroll
@@ -132,20 +119,28 @@ export class SheetContent implements OnDestroy {
     event.stopPropagation();
     this.close();
   }
-
   onEscapeKey(): void {
     this.close();
   }
-
   onClose(): void {
     this.close();
   }
 
+  private lockBodyScroll(): void {
+    if (typeof document !== 'undefined') {
+      this.previousBodyOverflow = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+    }
+  }
+  private unlockBodyScroll(): void {
+    if (typeof document !== 'undefined') {
+      document.body.style.overflow = this.previousBodyOverflow;
+    }
+  }
   private close(): void {
     this.restoreFocus();
     this.context.setOpen(false);
   }
-
   private restoreFocus(): void {
     const triggerEl = this.context.triggerElement();
     if (triggerEl) {

package/src/app/lib/components/ui/sheet/sheet-description.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 { SHEET_CONTEXT } from './sheet-context';
 
 /**
@@ -17,18 +11,19 @@ import { SHEET_CONTEXT } from './sheet-context';
   selector: 'SheetDescription',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sheet-description"',
     '[class]': 'computedClass()',
     '[attr.id]': 'context.descriptionId',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SheetDescription {
-  protected readonly context = inject(SHEET_CONTEXT);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly context = inject(SHEET_CONTEXT);
+
   protected readonly computedClass = computed(() =>
-    cn('text-sm text-muted-foreground', this.class())
+    cn('text-sm text-muted-foreground', this.class()),
   );
 }

package/src/app/lib/components/ui/sheet/sheet-footer.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';
 
 /**
  * SheetFooter component - footer area of the sheet.
@@ -14,6 +9,7 @@ import {
   selector: 'SheetFooter',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sheet-footer"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -23,6 +19,6 @@ export class SheetFooter {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this.class())
+    cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', this.class()),
   );
 }

package/src/app/lib/components/ui/sheet/sheet-header.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';
 
 /**
  * SheetHeader component - header area of the sheet.
@@ -14,6 +9,7 @@ import {
   selector: 'SheetHeader',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sheet-header"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -23,6 +19,6 @@ export class SheetHeader {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('flex flex-col space-y-2 text-center sm:text-left', this.class())
+    cn('flex flex-col space-y-2 text-center sm:text-left', this.class()),
   );
 }

package/src/app/lib/components/ui/sheet/sheet-title.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 { SHEET_CONTEXT } from './sheet-context';
 
 /**
@@ -17,18 +11,19 @@ import { SHEET_CONTEXT } from './sheet-context';
   selector: 'SheetTitle',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sheet-title"',
     '[class]': 'computedClass()',
     '[attr.id]': 'context.titleId',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SheetTitle {
-  protected readonly context = inject(SHEET_CONTEXT);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly context = inject(SHEET_CONTEXT);
+
   protected readonly computedClass = computed(() =>
-    cn('text-lg font-semibold text-foreground', this.class())
+    cn('text-lg font-semibold text-foreground', this.class()),
   );
 }

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

@@ -1,10 +1,4 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    ElementRef,
-    inject,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, inject, input } from '@angular/core';
 import { SHEET_CONTEXT } from './sheet-context';
 
 /**
@@ -15,6 +9,7 @@ import { SHEET_CONTEXT } from './sheet-context';
   selector: 'SheetTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sheet-trigger"',
     '(click)': 'onClick($event)',
     '[attr.aria-haspopup]': '"dialog"',
     '[attr.aria-expanded]': 'context.open()',
@@ -23,16 +18,17 @@ import { SHEET_CONTEXT } from './sheet-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SheetTrigger {
-  protected readonly context = inject(SHEET_CONTEXT);
-  private readonly elementRef = inject(ElementRef<HTMLElement>);
-
   /** Render as child */
   readonly asChild = input<boolean>(false);
 
+  private readonly _elementRef = inject(ElementRef<HTMLElement>);
+
+  protected readonly context = inject(SHEET_CONTEXT);
+
   onClick(event: Event): void {
     event.stopPropagation();
     // Save trigger element for focus restoration
-    this.context.triggerElement.set(this.elementRef.nativeElement);
+    this.context.triggerElement.set(this._elementRef.nativeElement);
     this.context.setOpen(true);
   }
 }

package/src/app/lib/components/ui/sheet/sheet-variants.ts

@@ -16,7 +16,7 @@ export const sheetVariants = cva(
     defaultVariants: {
       side: 'right',
     },
-  }
+  },
 );
 
 export type SheetVariants = VariantProps<typeof sheetVariants>;

package/src/app/lib/components/ui/sheet/sheet.component.ts

@@ -1,14 +1,14 @@
 import { AriaIdService } from '@/lib/utils/accessibility';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    forwardRef,
-    inject,
-    input,
-    output,
-    signal,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  forwardRef,
+  inject,
+  input,
+  output,
+  signal,
 } from '@angular/core';
 import { SHEET_CONTEXT, type SheetContextValue } from './sheet-context';
 
@@ -33,6 +33,10 @@ import { SHEET_CONTEXT, type SheetContextValue } from './sheet-context';
 @Component({
   selector: 'Sheet',
   template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"sheet"',
+    style: 'display: contents',
+  },
   providers: [
     {
       provide: SHEET_CONTEXT,
@@ -42,30 +46,24 @@ import { SHEET_CONTEXT, type SheetContextValue } from './sheet-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Sheet implements SheetContextValue {
-  private readonly ariaIdService = inject(AriaIdService);
+  constructor() {
+    // Sync defaultOpen on init
+    effect(() => {
+      if (this.defaultOpen() && this.controlledOpen() === undefined) {
+        this._internalOpen.set(true);
+      }
+    });
+  }
+
+  /** Open change event */
+  readonly openChange = output<boolean>();
 
   /** Default open state */
   readonly defaultOpen = input<boolean>(false);
-
   /** Controlled open state */
   readonly controlledOpen = input<boolean | undefined>(undefined, { alias: 'open' });
 
-  /** Side from which the sheet appears */
-  readonly side: 'top' | 'right' | 'bottom' | 'left' = 'right';
-
-  /** Open change event */
-  readonly openChange = output<boolean>();
-
-  private readonly _internalOpen = signal(false);
-
-  /** ARIA IDs for accessibility relationships */
-  private readonly ariaIds = this.ariaIdService.generateDialogIds('sheet');
-  readonly titleId = this.ariaIds.titleId;
-  readonly descriptionId = this.ariaIds.descriptionId;
-  readonly contentId = this.ariaIds.contentId;
-
-  /** Reference to trigger element for focus restoration */
-  readonly triggerElement = signal<HTMLElement | null>(null);
+  private readonly _ariaIdService = inject(AriaIdService);
 
   /** Computed open state - uses controlled value if provided, otherwise internal state */
   readonly open = computed(() => {
@@ -76,21 +74,23 @@ export class Sheet implements SheetContextValue {
     return this._internalOpen();
   });
 
-  constructor() {
-    // Sync defaultOpen on init
-    effect(() => {
-      if (this.defaultOpen() && this.controlledOpen() === undefined) {
-        this._internalOpen.set(true);
-      }
-    }, { allowSignalWrites: true });
-  }
+  private readonly _internalOpen = signal(false);
+  /** Reference to trigger element for focus restoration */
+  readonly triggerElement = signal<HTMLElement | null>(null);
+
+  /** Side from which the sheet appears */
+  readonly side: 'top' | 'right' | 'bottom' | 'left' = 'right';
+  /** ARIA IDs for accessibility relationships */
+  private readonly ariaIds = this._ariaIdService.generateDialogIds('sheet');
+  readonly titleId = this.ariaIds.titleId;
+  readonly descriptionId = this.ariaIds.descriptionId;
+  readonly contentId = this.ariaIds.contentId;
 
   setOpen(open: boolean): void {
     // Always update internal state for uncontrolled mode
     this._internalOpen.set(open);
     this.openChange.emit(open);
   }
-
   isOpen(): boolean {
     return this.open();
   }

package/src/app/lib/components/ui/sidebar/index.ts

@@ -1,19 +1,19 @@
 export { SidebarContent } from './sidebar-content.component';
 export {
-    SIDEBAR_CONTEXT,
-    SIDEBAR_COOKIE_MAX_AGE,
-    SIDEBAR_COOKIE_NAME,
-    SIDEBAR_KEYBOARD_SHORTCUT,
-    SIDEBAR_MENU_CONTEXT,
-    SIDEBAR_WIDTH,
-    SIDEBAR_WIDTH_ICON,
-    SIDEBAR_WIDTH_MOBILE,
-    type AriaCurrentValue,
-    type SidebarCollapsible,
-    type SidebarContext,
-    type SidebarSide,
-    type SidebarState,
-    type SidebarVariant
+  SIDEBAR_CONTEXT,
+  SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_MENU_CONTEXT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+  SIDEBAR_WIDTH_MOBILE,
+  type AriaCurrentValue,
+  type SidebarCollapsible,
+  type SidebarContext,
+  type SidebarSide,
+  type SidebarState,
+  type SidebarVariant,
 } from './sidebar-context';
 export { SidebarFooter } from './sidebar-footer.component';
 export { SidebarGroupAction } from './sidebar-group-action.component';
@@ -38,4 +38,3 @@ export { SidebarRouteActiveService } from './sidebar-route-active.service';
 export { SidebarSeparator } from './sidebar-separator.component';
 export { SidebarTrigger } from './sidebar-trigger.component';
 export { Sidebar } from './sidebar.component';
-

package/src/app/lib/components/ui/sidebar/sidebar-content.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';
 
 /**
  * SidebarContent component - main content area of sidebar.
@@ -13,6 +8,7 @@ import {
   selector: 'SidebarContent',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-content"',
     '[class]': 'computedClass()',
     'data-sidebar': 'content',
   },
@@ -25,7 +21,7 @@ export class SidebarContent {
   protected readonly computedClass = computed(() =>
     cn(
       'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]/sidebar-wrapper:overflow-hidden',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/sidebar/sidebar-context.ts

@@ -16,9 +16,7 @@ export interface SidebarContext {
   toggleSidebar: () => void;
 }
 
-export const SIDEBAR_CONTEXT = new InjectionToken<SidebarContext>(
-  'SidebarContext'
-);
+export const SIDEBAR_CONTEXT = new InjectionToken<SidebarContext>('SidebarContext');
 
 export const SIDEBAR_MENU_CONTEXT = new InjectionToken<{
   isActive: WritableSignal<boolean>;

package/src/app/lib/components/ui/sidebar/sidebar-footer.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';
 
 /**
  * SidebarFooter component - footer section of sidebar.
@@ -13,6 +8,7 @@ import {
   selector: 'SidebarFooter',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-footer"',
     '[class]': 'computedClass()',
     'data-sidebar': 'footer',
   },
@@ -22,7 +18,5 @@ export class SidebarFooter {
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn('flex flex-col gap-2 p-2', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('flex flex-col gap-2 p-2', this.class()));
 }

package/src/app/lib/components/ui/sidebar/sidebar-group-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';
 
 /**
  * SidebarGroupAction component - action button for a sidebar group.
@@ -13,6 +8,7 @@ import {
   selector: 'SidebarGroupAction',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-group-action"',
     '[class]': 'computedClass()',
     'data-sidebar': 'group-action',
   },
@@ -27,7 +23,7 @@ export class SidebarGroupAction {
       'absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
       'after:absolute after:-inset-2 after:md:hidden',
       'group-data-[collapsible=icon]/sidebar-wrapper:hidden',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/sidebar/sidebar-group-content.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';
 
 /**
  * SidebarGroupContent component - content wrapper for sidebar group.
@@ -13,6 +8,7 @@ import {
   selector: 'SidebarGroupContent',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-group-content"',
     '[class]': 'computedClass()',
     'data-sidebar': 'group-content',
   },
@@ -22,7 +18,5 @@ export class SidebarGroupContent {
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn('w-full text-sm', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('w-full text-sm', this.class()));
 }

package/src/app/lib/components/ui/sidebar/sidebar-group-label.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';
 
 /**
  * SidebarGroupLabel component - label for a sidebar group.
@@ -13,6 +8,7 @@ import {
   selector: 'SidebarGroupLabel',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-group-label"',
     '[class]': 'computedClass()',
     'data-sidebar': 'group-label',
   },
@@ -26,7 +22,7 @@ export class SidebarGroupLabel {
     cn(
       'duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opacity] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
       'group-data-[collapsible=icon]/sidebar-wrapper:-mt-8 group-data-[collapsible=icon]/sidebar-wrapper:opacity-0',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/sidebar/sidebar-group.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';
 
 /**
  * SidebarGroup component - groups sidebar items.
@@ -13,6 +8,7 @@ import {
   selector: 'SidebarGroup',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-group"',
     '[class]': 'computedClass()',
     'data-sidebar': 'group',
   },
@@ -23,6 +19,6 @@ export class SidebarGroup {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('relative flex w-full min-w-0 flex-col p-2', this.class())
+    cn('relative flex w-full min-w-0 flex-col p-2', this.class()),
   );
 }

package/src/app/lib/components/ui/sidebar/sidebar-header.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';
 
 /**
  * SidebarHeader component - header section of sidebar.
@@ -13,6 +8,7 @@ import {
   selector: 'SidebarHeader',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"sidebar-header"',
     '[class]': 'computedClass()',
     'data-sidebar': 'header',
   },
@@ -22,7 +18,5 @@ export class SidebarHeader {
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn('flex flex-col gap-2 p-2', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('flex flex-col gap-2 p-2', this.class()));
 }