@ng-cn/core 1.0.15 → 1.0.17

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

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

package/src/app/lib/components/ui/dialog/dialog-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 { DIALOG_CONTEXT } from './dialog-context';
 
 /**
@@ -15,6 +9,7 @@ import { DIALOG_CONTEXT } from './dialog-context';
   selector: 'DialogTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"dialog-trigger"',
     '(click)': 'onClick($event)',
     '[attr.aria-haspopup]': '"dialog"',
     '[attr.aria-expanded]': 'context.isOpen()',
@@ -23,16 +18,17 @@ import { DIALOG_CONTEXT } from './dialog-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogTrigger {
-  protected readonly context = inject(DIALOG_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(DIALOG_CONTEXT);
+
   onClick(event: Event): void {
     event.stopPropagation();
     // Save trigger element for focus restoration
-    this.context.triggerElement.set(this.elementRef.nativeElement);
+    this.context.setTriggerElement(this._elementRef.nativeElement);
     this.context.setOpen(true);
   }
 }

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

@@ -1,13 +1,11 @@
 import { AriaIdService } from '@/lib/utils/accessibility';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    forwardRef,
-    inject,
-    input,
-    output,
-    signal,
+  ChangeDetectionStrategy,
+  Component,
+  forwardRef,
+  inject,
+  input,
+  model,
 } from '@angular/core';
 import { DIALOG_CONTEXT, type DialogContextValue } from './dialog-context';
 
@@ -16,7 +14,7 @@ import { DIALOG_CONTEXT, type DialogContextValue } from './dialog-context';
  * Matches shadcn/ui React Dialog exactly.
  *
  * @example
- * <Dialog>
+ * <Dialog [(open)]="isOpen">
  *   <DialogTrigger>
  *     <Button variant="outline">Open Dialog</Button>
  *   </DialogTrigger>
@@ -40,48 +38,45 @@ import { DIALOG_CONTEXT, type DialogContextValue } from './dialog-context';
       useExisting: forwardRef(() => Dialog),
     },
   ],
+  host: {
+    'attr.data-slot': '"dialog"',
+    style: 'display: contents',
+  },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Dialog implements DialogContextValue {
-  private readonly ariaIdService = inject(AriaIdService);
+  /** Controlled open state - uses model for proper two-way binding */
+  readonly open = model<boolean>(false);
 
   /** Default open state */
   readonly defaultOpen = input<boolean>(false);
-
-  /** Controlled open state */
-  readonly controlledOpen = input<boolean | undefined>(undefined, { alias: 'open' });
-
   /** Modal mode - prevents interaction with outside elements */
   readonly modal = input<boolean>(true);
 
-  /** Open change event */
-  readonly openChange = output<boolean>();
-
-  readonly open = signal(false);
+  private readonly _ariaIdService = inject(AriaIdService);
 
   /** ARIA IDs for accessibility relationships */
-  private readonly ariaIds = this.ariaIdService.generateDialogIds('dialog');
+  private readonly ariaIds = this._ariaIdService.generateDialogIds('dialog');
   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 triggerEl: HTMLElement | null = null;
 
-  constructor() {
-    if (this.defaultOpen()) {
-      this.open.set(true);
-    }
+  /** Check if dialog is open - directly reads from model */
+  isOpen(): boolean {
+    return this.open();
   }
-
+  /** Set the open state */
   setOpen(open: boolean): void {
-    if (this.controlledOpen() === undefined) {
-      this.open.set(open);
-    }
-    this.openChange.emit(open);
+    this.open.set(open);
+  }
+  /** Set trigger element for focus restoration */
+  setTriggerElement(element: HTMLElement | null): void {
+    this.triggerEl = element;
+  }
+  /** Get trigger element for focus restoration */
+  getTriggerElement(): HTMLElement | null {
+    return this.triggerEl;
   }
-
-  readonly isOpen = computed(() =>
-    this.controlledOpen() !== undefined ? this.controlledOpen()! : this.open()
-  );
 }

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

@@ -7,4 +7,3 @@ export { DialogHeader } from './dialog-header.component';
 export { DialogTitle } from './dialog-title.component';
 export { DialogTrigger } from './dialog-trigger.component';
 export { Dialog } from './dialog.component';
-

package/src/app/lib/components/ui/drawer/drawer-close.component.ts

@@ -1,9 +1,4 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    inject,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
 import { DRAWER_CONTEXT } from './drawer-context';
 
 /**
@@ -14,16 +9,17 @@ import { DRAWER_CONTEXT } from './drawer-context';
   selector: 'DrawerClose',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"drawer-close"',
     '(click)': 'onClick($event)',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DrawerClose {
-  protected readonly context = inject(DRAWER_CONTEXT);
-
   /** Render as child */
   readonly asChild = input<boolean>(false);
 
+  protected readonly context = inject(DRAWER_CONTEXT);
+
   onClick(event: Event): void {
     event.stopPropagation();
     this.context.setOpen(false);

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

@@ -1,17 +1,17 @@
 import { cn, Presence } from '@/lib/utils';
 import { FocusTrapDirective } from '@/lib/utils/accessibility';
 import {
-    afterNextRender,
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    ElementRef,
-    inject,
-    Injector,
-    input,
-    OnDestroy,
-    viewChild,
+  afterNextRender,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  inject,
+  Injector,
+  input,
+  OnDestroy,
+  viewChild,
 } from '@angular/core';
 import { DRAWER_CONTEXT } from './drawer-context';
 
@@ -52,30 +52,24 @@ import { DRAWER_CONTEXT } from './drawer-context';
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"drawer-content"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DrawerContent implements OnDestroy {
-  protected readonly context = inject(DRAWER_CONTEXT);
-  private readonly contentEl = viewChild<ElementRef<HTMLElement>>('contentEl');
-  private readonly injector = inject(Injector);
-
-  /** Additional CSS classes */
-  readonly class = input<string>('');
-
-  /** Previous body overflow style for restoration */
-  private previousBodyOverflow = '';
-
   constructor() {
     // Handle body scroll lock and focus restoration
     effect(() => {
       if (this.context.open()) {
         this.lockBodyScroll();
         // Focus first element when opened (browser-only, deferred)
-        afterNextRender(() => {
-          this.focusFirstElement();
-        }, { injector: this.injector });
+        afterNextRender(
+          () => {
+            this.focusFirstElement();
+          },
+          { injector: this._injector },
+        );
       } else {
         this.unlockBodyScroll();
         this.restoreFocus();
@@ -83,16 +77,23 @@ export class DrawerContent implements OnDestroy {
     });
   }
 
-  ngOnDestroy(): void {
-    this.unlockBodyScroll();
-  }
+  private readonly contentEl = viewChild<ElementRef<HTMLElement>>('contentEl');
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  private readonly _injector = inject(Injector);
+
+  protected readonly context = inject(DRAWER_CONTEXT);
 
   protected readonly computedClass = computed(() => {
     const directionClasses = {
       top: 'inset-x-0 top-0 mb-24 rounded-b-[10px] border-b data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top',
-      bottom: 'inset-x-0 bottom-0 mt-24 rounded-t-[10px] border-t data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom',
+      bottom:
+        'inset-x-0 bottom-0 mt-24 rounded-t-[10px] border-t data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom',
       left: 'inset-y-0 left-0 mr-24 w-auto rounded-r-[10px] border-r data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left',
-      right: 'inset-y-0 right-0 ml-24 w-auto rounded-l-[10px] border-l data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right',
+      right:
+        'inset-y-0 right-0 ml-24 w-auto rounded-l-[10px] border-l data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right',
     };
 
     return cn(
@@ -100,15 +101,21 @@ export class DrawerContent implements OnDestroy {
       'data-[state=open]:animate-in data-[state=closed]:animate-out',
       'data-[state=open]:duration-500 data-[state=closed]:duration-300',
       directionClasses[this.context.direction],
-      this.class()
+      this.class(),
     );
   });
 
+  /** Previous body overflow style for restoration */
+  private previousBodyOverflow = '';
+
+  ngOnDestroy(): void {
+    this.unlockBodyScroll();
+  }
+
   onOverlayClick(event: Event): void {
     event.stopPropagation();
     this.context.setOpen(false);
   }
-
   onEscapeKey(): void {
     this.context.setOpen(false);
   }
@@ -118,25 +125,22 @@ export class DrawerContent implements OnDestroy {
       const content = this.contentEl()?.nativeElement;
       if (content) {
         const focusable = content.querySelector(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
         ) as HTMLElement;
         focusable?.focus();
       }
     });
   }
-
   private restoreFocus(): void {
     const trigger = this.context.triggerElement();
     if (trigger) {
       setTimeout(() => trigger.focus());
     }
   }
-
   private lockBodyScroll(): void {
     this.previousBodyOverflow = document.body.style.overflow;
     document.body.style.overflow = 'hidden';
   }
-
   private unlockBodyScroll(): void {
     document.body.style.overflow = this.previousBodyOverflow;
   }

package/src/app/lib/components/ui/drawer/drawer-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 { DRAWER_CONTEXT } from './drawer-context';
 
 /**
@@ -16,18 +10,19 @@ import { DRAWER_CONTEXT } from './drawer-context';
   selector: 'DrawerDescription',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"drawer-description"',
     '[class]': 'computedClass()',
     '[attr.id]': 'context.descriptionId',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DrawerDescription {
-  protected readonly context = inject(DRAWER_CONTEXT);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly context = inject(DRAWER_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/drawer/drawer-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';
 
 /**
  * DrawerFooter component - footer area of the drawer.
@@ -14,6 +9,7 @@ import {
   selector: 'DrawerFooter',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"drawer-footer"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -23,6 +19,6 @@ export class DrawerFooter {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('mt-auto flex flex-col gap-2 p-4', this.class())
+    cn('mt-auto flex flex-col gap-2 p-4', this.class()),
   );
 }

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

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

package/src/app/lib/components/ui/drawer/drawer-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 { DRAWER_CONTEXT } from './drawer-context';
 
 /**
@@ -15,6 +9,7 @@ import { DRAWER_CONTEXT } from './drawer-context';
   selector: 'DrawerTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"drawer-trigger"',
     '(click)': 'onClick($event)',
     '[attr.aria-controls]': 'context.contentId',
     '[attr.aria-expanded]': 'context.open()',
@@ -23,16 +18,17 @@ import { DRAWER_CONTEXT } from './drawer-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DrawerTrigger {
-  protected readonly context = inject(DRAWER_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(DRAWER_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/drawer/drawer.component.ts

@@ -1,12 +1,12 @@
 import { AriaIdService } from '@/lib/utils/accessibility';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    forwardRef,
-    inject,
-    input,
-    output,
-    signal,
+  ChangeDetectionStrategy,
+  Component,
+  forwardRef,
+  inject,
+  input,
+  output,
+  signal,
 } from '@angular/core';
 import { DRAWER_CONTEXT, type DrawerContextValue } from './drawer-context';
 
@@ -37,6 +37,10 @@ import { DRAWER_CONTEXT, type DrawerContextValue } from './drawer-context';
 @Component({
   selector: 'Drawer',
   template: `<ng-content />`,
+  host: {
+    'attr.data-slot': '"drawer"',
+    style: 'display: contents',
+  },
   providers: [
     {
       provide: DRAWER_CONTEXT,
@@ -46,47 +50,42 @@ import { DRAWER_CONTEXT, type DrawerContextValue } from './drawer-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Drawer implements DrawerContextValue {
-  private readonly ariaIdService = inject(AriaIdService);
-  private readonly ariaIds = this.ariaIdService.generateDialogIds('drawer');
+  constructor() {
+    if (this.defaultOpen()) {
+      this.open.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' });
-
-  /** Direction the drawer appears from */
-  readonly direction: 'top' | 'right' | 'bottom' | 'left' = 'bottom';
-
   /** Whether to show the handle bar */
   readonly shouldScaleBackground = input<boolean>(true);
 
-  /** Open change event */
-  readonly openChange = output<boolean>();
+  private readonly _ariaIdService = inject(AriaIdService);
 
   readonly open = signal(false);
+  /** Reference to the trigger element for focus restoration */
+  readonly triggerElement = signal<HTMLElement | null>(null);
 
+  private readonly ariaIds = this._ariaIdService.generateDialogIds('drawer');
+  /** Direction the drawer appears from */
+  readonly direction: 'top' | 'right' | 'bottom' | 'left' = 'bottom';
   /** ARIA IDs for accessibility */
   readonly titleId = this.ariaIds.titleId;
   readonly descriptionId = this.ariaIds.descriptionId;
   readonly contentId = this.ariaIds.contentId;
 
-  /** Reference to the trigger element for focus restoration */
-  readonly triggerElement = signal<HTMLElement | null>(null);
-
-  constructor() {
-    if (this.defaultOpen()) {
-      this.open.set(true);
-    }
-  }
-
   setOpen(open: boolean): void {
     if (this.controlledOpen() === undefined) {
       this.open.set(open);
     }
     this.openChange.emit(open);
   }
-
   isOpen(): boolean {
     return this.controlledOpen() !== undefined ? this.controlledOpen()! : this.open();
   }