@ng-cn/core 1.0.15 → 1.0.17

package/src/app/lib/components/ui/data-table/data-table-view-options.component.ts

@@ -1,12 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-    signal,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from '@angular/core';
 import { Check, LucideAngularModule, Settings2 } from 'lucide-angular';
 import { DATA_TABLE_CONTEXT } from './data-table-context';
 
@@ -26,7 +19,9 @@ import { DATA_TABLE_CONTEXT } from './data-table-context';
         View
       </button>
       @if (isOpen()) {
-        <div class="absolute right-0 z-50 mt-2 w-48 rounded-md border bg-popover p-1 text-popover-foreground shadow-md">
+        <div
+          class="absolute right-0 z-50 mt-2 w-48 rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
+        >
           <div class="px-2 py-1.5 text-sm font-semibold">Toggle columns</div>
           <div class="-mx-1 my-1 h-px bg-muted"></div>
           @for (column of toggleableColumns(); track column.id) {
@@ -47,43 +42,39 @@ import { DATA_TABLE_CONTEXT } from './data-table-context';
     </div>
   `,
   host: {
+    'attr.data-slot': '"data-table-view-options"',
     '[class]': 'computedClass()',
     '(document:click)': 'onDocumentClick($event)',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataTableViewOptions {
-  protected readonly context = inject(DATA_TABLE_CONTEXT);
-  protected readonly icons = { Settings2, Check };
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly isOpen = signal(false);
+  protected readonly context = inject(DATA_TABLE_CONTEXT);
 
   protected readonly toggleableColumns = computed(() =>
-    this.context.columns().filter((col) => col.enableHiding !== false)
+    this.context.columns().filter((col) => col.enableHiding !== false),
   );
+  protected readonly computedClass = computed(() => cn('ml-auto', this.class()));
 
-  protected readonly computedClass = computed(() =>
-    cn('ml-auto', this.class())
-  );
+  protected readonly isOpen = signal(false);
+
+  protected readonly icons = { Settings2, Check };
 
   protected toggleDropdown(): void {
     this.isOpen.update((v) => !v);
   }
-
   protected onDocumentClick(event: Event): void {
     const target = event.target as HTMLElement;
     if (!target.closest('[data-slot="data-table"]')) {
       this.isOpen.set(false);
     }
   }
-
   protected isColumnVisible(columnId: string): boolean {
     return this.context.columnVisibility()[columnId] !== false;
   }
-
   protected toggleColumn(columnId: string): void {
     const visibility = { ...this.context.columnVisibility() };
     visibility[columnId] = !visibility[columnId];

package/src/app/lib/components/ui/data-table/data-table.component.ts

@@ -1,21 +1,21 @@
 import { cn } from '@/lib/utils';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    forwardRef,
-    input,
-    output,
-    signal,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  forwardRef,
+  input,
+  output,
+  signal,
 } from '@angular/core';
 import {
-    ColumnVisibilityState,
-    DATA_TABLE_CONTEXT,
-    DataTableContext,
-    RowSelectionState,
-    SortingState,
-    type ColumnDef,
+  ColumnVisibilityState,
+  DATA_TABLE_CONTEXT,
+  DataTableContext,
+  RowSelectionState,
+  SortingState,
+  type ColumnDef,
 } from './data-table-context';
 
 /**
@@ -36,8 +36,8 @@ import {
   template: `<ng-content />`,
   host: {
     '[class]': 'computedClass()',
-    'data-slot': 'data-table',
-    'ngSkipHydration': 'true',
+    'attr.data-slot': '"data-table"',
+    ngSkipHydration: 'true',
   },
   providers: [
     {
@@ -49,33 +49,47 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataTable<T = unknown> {
+  constructor() {
+    // Sync data
+    effect(() => {
+      this.context.data.set(this.data());
+    });
+
+    // Sync columns
+    effect(() => {
+      this.context.columns.set(this.columns());
+      // Initialize column visibility
+      const visibility: ColumnVisibilityState = {};
+      this.columns().forEach((col) => {
+        visibility[col.id] = true;
+      });
+      this.context.columnVisibility.set(visibility);
+    });
+  }
+
+  /** Sorting change event */
+  readonly sortingChange = output<SortingState[]>();
+  /** Row selection change event */
+  readonly rowSelectionChange = output<RowSelectionState>();
+
   /** The data to display */
   readonly data = input.required<T[]>();
-
   /** Column definitions */
   readonly columns = input.required<ColumnDef<T>[]>();
 
   /** Page size options */
   readonly pageSizeOptions = input<number[]>([10, 20, 30, 40, 50]);
-
   /** Initial page size */
   readonly initialPageSize = input<number>(10);
-
   /** Enable row selection */
   readonly enableRowSelection = input<boolean>(false);
-
   /** Enable multi-row selection */
   readonly enableMultiRowSelection = input<boolean>(true);
-
-  /** Sorting change event */
-  readonly sortingChange = output<SortingState[]>();
-
-  /** Row selection change event */
-  readonly rowSelectionChange = output<RowSelectionState>();
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly computedClass = computed(() => cn('w-full space-y-4', this.class()));
+
   /** Context for child components */
   readonly context: DataTableContext<T> = {
     data: signal<T[]>([]),
@@ -106,26 +120,4 @@ export class DataTable<T = unknown> {
       this.context.pageSize.set(pageSize);
     },
   };
-
-  constructor() {
-    // Sync data
-    effect(() => {
-      this.context.data.set(this.data());
-    });
-
-    // Sync columns
-    effect(() => {
-      this.context.columns.set(this.columns());
-      // Initialize column visibility
-      const visibility: ColumnVisibilityState = {};
-      this.columns().forEach((col) => {
-        visibility[col.id] = true;
-      });
-      this.context.columnVisibility.set(visibility);
-    });
-  }
-
-  protected readonly computedClass = computed(() =>
-    cn('w-full space-y-4', this.class())
-  );
 }

package/src/app/lib/components/ui/data-table/index.ts

@@ -1,16 +1,15 @@
 export { DataTableContent } from './data-table-content.component';
 export {
-    DATA_TABLE_CONTEXT,
-    type ColumnDef,
-    type ColumnVisibilityState,
-    type DataTableContext,
-    type RowSelectionState,
-    type SortDirection,
-    type SortingState
+  DATA_TABLE_CONTEXT,
+  type ColumnDef,
+  type ColumnVisibilityState,
+  type DataTableContext,
+  type RowSelectionState,
+  type SortDirection,
+  type SortingState,
 } from './data-table-context';
 export { DataTablePagination } from './data-table-pagination.component';
 export { DataTableSearch } from './data-table-search.component';
 export { DataTableToolbar } from './data-table-toolbar.component';
 export { DataTableViewOptions } from './data-table-view-options.component';
 export { DataTable } from './data-table.component';
-

package/src/app/lib/components/ui/date-picker/date-picker.component.ts

@@ -5,7 +5,8 @@ import {
   computed,
   input,
   model,
-  output
+  output,
+  viewChild,
 } from '@angular/core';
 import { CalendarIcon, LucideAngularModule } from 'lucide-angular';
 import { buttonVariants } from '../button';
@@ -20,26 +21,24 @@ import { Popover, PopoverContent, PopoverTrigger } from '../popover';
   selector: 'DatePicker',
   imports: [LucideAngularModule, Popover, PopoverTrigger, PopoverContent, Calendar],
   template: `
-    <Popover>
-      <PopoverTrigger>
-        <button
-          type="button"
-          [class]="computedButtonClass()"
-        >
-          <lucide-icon [img]="CalendarIconRef" class="mr-2 h-4 w-4" />
+    <Popover class="block w-full">
+      <PopoverTrigger class="block w-full">
+        <button type="button" [class]="computedButtonClass()">
+          <lucide-icon [img]="CalendarIconRef" class="h-4 w-4 shrink-0" />
           @if (date()) {
-            {{ formatDate(date()!) }}
+            <span class="flex-1 truncate text-left">{{ formatDate(date()!) }}</span>
           } @else {
-            <span>{{ placeholder() }}</span>
+            <span class="flex-1 truncate text-left">{{ placeholder() }}</span>
           }
         </button>
       </PopoverTrigger>
-      <PopoverContent class="w-auto p-0" align="start">
+      <PopoverContent class="p-0" align="start" [matchTriggerWidth]="true">
         <Calendar
           [mode]="'single'"
           [selected]="date()"
           (onSelect)="onDateSelect($event)"
           [disabled]="disabledDates()"
+          class="w-full"
         />
       </PopoverContent>
     </Popover>
@@ -50,35 +49,36 @@ import { Popover, PopoverContent, PopoverTrigger } from '../popover';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DatePicker {
-  protected readonly CalendarIconRef = CalendarIcon;
+  private readonly popover = viewChild(Popover);
+
+  /** Date select event */
+  readonly onSelect = output<Date | undefined>();
 
   /** Selected date */
   readonly date = model<Date | undefined>(undefined);
 
+  /** Additional CSS classes */
+  readonly class = input<string>('');
   /** Placeholder text */
   readonly placeholder = input<string>('Pick a date');
-
   /** Date format */
   readonly dateFormat = input<string>('PPP');
-
   /** Disabled dates function */
   readonly disabledDates = input<((date: Date) => boolean) | undefined>(undefined);
 
-  /** Additional CSS classes */
-  readonly class = input<string>('');
-
-  /** Date select event */
-  readonly onSelect = output<Date | undefined>();
-
   protected readonly computedButtonClass = computed(() =>
     cn(
       buttonVariants({ variant: 'outline' }),
-      'w-[280px] justify-start text-left font-normal',
+      'h-10 w-full justify-start gap-3 px-4 py-6 text-left font-normal hover:bg-gray-100 dark:hover:bg-neutral-800',
+      this.popover()?.isOpen() &&
+        'border-primary/30 ring-primary/20 ring-2 dark:border-white/30 dark:ring-white/20',
       !this.date() && 'text-muted-foreground',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
+  protected readonly CalendarIconRef = CalendarIcon;
+
   protected formatDate(date: Date): string {
     return date.toLocaleDateString('en-US', {
       year: 'numeric',
@@ -86,9 +86,9 @@ export class DatePicker {
       day: 'numeric',
     });
   }
-
   protected onDateSelect(date: Date | undefined): void {
     this.date.set(date);
     this.onSelect.emit(date);
+    this.popover()?.setOpen(false);
   }
 }

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

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

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

@@ -1,44 +1,44 @@
-import { cn, Presence } from '@/lib/utils';
+import { cn } from '@/lib/utils';
 import { FocusTrapDirective } from '@/lib/utils/accessibility';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    effect,
-    ElementRef,
-    HostListener,
-    inject,
-    input,
-    OnDestroy,
-    viewChild,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  HostListener,
+  inject,
+  input,
+  signal,
 } from '@angular/core';
 import { DIALOG_CONTEXT } from './dialog-context';
 
+/** Animation duration in ms — must match Tailwind's duration-200 */
+const EXIT_ANIMATION_MS = 200;
+
 /**
  * DialogContent component - the content of the dialog.
  * Matches shadcn/ui React DialogContent exactly.
- * Includes focus trapping, focus restoration, proper ARIA relationships,
- * and Radix-compatible exit animations via Presence component.
  */
 @Component({
   selector: 'DialogContent',
-  imports: [FocusTrapDirective, Presence],
+  imports: [FocusTrapDirective],
   template: `
-    <Presence [present]="context.isOpen()">
+    @if (shouldRender()) {
       <!-- Overlay -->
       <div
-        class="fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+        class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-200"
         [attr.data-state]="context.isOpen() ? 'open' : 'closed'"
         (click)="onOverlayClick($event)"
         aria-hidden="true"
       ></div>
       <!-- Content -->
       <div
-        #dialogContent
         hlmFocusTrap
         [trapFocus]="context.isOpen()"
         [autoFocus]="true"
-        [restoreFocus]="false"
+        [restoreFocus]="true"
         [initialFocus]="initialFocus()"
         [class]="computedClass()"
         [attr.data-state]="context.isOpen() ? 'open' : 'closed'"
@@ -49,13 +49,12 @@ import { DIALOG_CONTEXT } from './dialog-context';
         aria-modal="true"
       >
         <ng-content />
-        <!-- Close button -->
         @if (showClose()) {
           <button
             type="button"
-            class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+            class="absolute right-4 top-4 rounded-md opacity-70 ring-offset-background transition-all hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none hover:bg-zinc-800 text-zinc-400 hover:text-white h-8 w-8 flex items-center justify-center p-0"
             (click)="onClose()"
-            aria-label="Close dialog"
+            [attr.aria-label]="ariaCloselabel()"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -73,32 +72,56 @@ import { DIALOG_CONTEXT } from './dialog-context';
               <path d="M18 6 6 18" />
               <path d="m6 6 12 12" />
             </svg>
-            <span class="sr-only">Close</span>
+            <span class="sr-only">{{ ariaCloselabel() }}</span>
           </button>
         }
       </div>
-    </Presence>
+    }
   `,
   host: {
+    'attr.data-slot': '"dialog-content"',
     class: 'contents',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DialogContent implements OnDestroy {
-  readonly context = inject(DIALOG_CONTEXT);
-  private readonly dialogContent = viewChild<ElementRef<HTMLElement>>('dialogContent');
+export class DialogContent {
+  constructor() {
+    effect(() => {
+      const isOpen = this.context.isOpen();
+      this._cdr.markForCheck();
 
-  /** Additional CSS classes */
-  readonly class = input<string>('');
+      if (isOpen) {
+        this.shouldRender.set(true);
+        this.lockBodyScroll();
+      } else {
+        this.unlockBodyScroll();
+        if (this.shouldRender()) {
+          // Keep DOM alive for the exit animation, then unmount
+          setTimeout(() => {
+            this.shouldRender.set(false);
+            this._cdr.markForCheck();
+          }, EXIT_ANIMATION_MS);
+        }
+      }
+    });
 
-  /** Whether to show close button */
-  readonly showClose = input<boolean>(true);
+    this._destroyRef.onDestroy(() => {
+      this.unlockBodyScroll();
+      this.restoreFocus();
+    });
+  }
 
-  /** Selector for initial focus element */
+  readonly class = input<string>('');
+  readonly showClose = input<boolean>(true);
+  readonly ariaCloselabel = input<string>('Close dialog');
   readonly initialFocus = input<string | undefined>(undefined);
 
-  /** Previous body overflow for restoration */
-  private previousBodyOverflow = '';
+  private readonly _destroyRef = inject(DestroyRef);
+  private readonly _cdr = inject(ChangeDetectorRef);
+
+  readonly context = inject(DIALOG_CONTEXT);
+
+  protected readonly shouldRender = signal(false);
 
   protected readonly computedClass = computed(() =>
     cn(
@@ -109,41 +132,11 @@ export class DialogContent implements OnDestroy {
       'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
       'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
       'sm:rounded-lg',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
-  constructor() {
-    // Handle body scroll lock based on open state
-    effect(() => {
-      const isOpen = this.context.isOpen();
-      if (isOpen) {
-        this.lockBodyScroll();
-      } else {
-        this.unlockBodyScroll();
-      }
-    });
-  }
-
-  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;
-    }
-  }
-
-  ngOnDestroy(): void {
-    // Restore body scroll
-    this.unlockBodyScroll();
-    // Restore focus to trigger element
-    this.restoreFocus();
-  }
+  private previousBodyOverflow = '';
 
   @HostListener('document:keydown.escape')
   onEscapeKey(): void {
@@ -151,27 +144,33 @@ export class DialogContent implements OnDestroy {
       this.close();
     }
   }
-
   onOverlayClick(event: Event): void {
     event.stopPropagation();
     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();
+    const triggerEl = this.context.getTriggerElement();
     if (triggerEl) {
-      setTimeout(() => {
-        triggerEl.focus();
-      }, 0);
+      setTimeout(() => triggerEl.focus(), 0);
     }
   }
 }

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

@@ -1,15 +1,17 @@
-import { InjectionToken, Signal, WritableSignal } from '@angular/core';
+import { InjectionToken } from '@angular/core';
 
 export interface DialogContextValue {
-  open: WritableSignal<boolean>;
-  setOpen: (open: boolean) => void;
-  isOpen: Signal<boolean>;
+  /** Get the current open state */
+  isOpen(): boolean;
+  /** Set the open state */
+  setOpen(open: boolean): void;
   /** Unique IDs for ARIA relationships */
   titleId: string;
   descriptionId: string;
   contentId: string;
   /** Trigger element reference for focus restoration */
-  triggerElement: WritableSignal<HTMLElement | null>;
+  setTriggerElement(element: HTMLElement | null): void;
+  getTriggerElement(): HTMLElement | null;
 }
 
 export const DIALOG_CONTEXT = new InjectionToken<DialogContextValue>('DIALOG_CONTEXT');

package/src/app/lib/components/ui/dialog/dialog-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 { DIALOG_CONTEXT } from './dialog-context';
 
 /**
@@ -17,18 +11,19 @@ import { DIALOG_CONTEXT } from './dialog-context';
   selector: 'DialogDescription',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"dialog-description"',
     '[class]': 'computedClass()',
     '[attr.id]': 'context.descriptionId',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DialogDescription {
-  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-sm text-muted-foreground', this.class())
+    cn('text-sm text-muted-foreground', this.class()),
   );
 }