@ng-cn/core 1.0.15 → 1.0.17

package/src/app/lib/components/ui/context-menu/context-menu-radio-group.component.ts

@@ -1,4 +1,10 @@
-import { ChangeDetectionStrategy, Component, InjectionToken, signal, type WritableSignal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  InjectionToken,
+  signal,
+  type WritableSignal,
+} from '@angular/core';
 
 export interface ContextMenuRadioGroupContext {
   value: WritableSignal<string>;
@@ -6,7 +12,7 @@ export interface ContextMenuRadioGroupContext {
 }
 
 export const CONTEXT_MENU_RADIO_GROUP_CONTEXT = new InjectionToken<ContextMenuRadioGroupContext>(
-  'CONTEXT_MENU_RADIO_GROUP_CONTEXT'
+  'CONTEXT_MENU_RADIO_GROUP_CONTEXT',
 );
 
 /**
@@ -29,6 +35,7 @@ export const CONTEXT_MENU_RADIO_GROUP_CONTEXT = new InjectionToken<ContextMenuRa
     },
   ],
   host: {
+    'attr.data-slot': '"context-menu-radio-group"',
     '[attr.role]': '"group"',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -20,6 +20,7 @@ import { CONTEXT_MENU_RADIO_GROUP_CONTEXT } from './context-menu-radio-group.com
     <ng-content />
   `,
   host: {
+    'attr.data-slot': '"context-menu-radio-item"',
     '[class]': 'computedClass()',
     '[attr.role]': '"menuitemradio"',
     '[attr.aria-checked]': 'isSelected()',
@@ -34,38 +35,37 @@ import { CONTEXT_MENU_RADIO_GROUP_CONTEXT } from './context-menu-radio-group.com
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ContextMenuRadioItem {
-  private readonly context = inject(CONTEXT_MENU_CONTEXT);
-  private readonly radioGroupContext = inject(CONTEXT_MENU_RADIO_GROUP_CONTEXT);
-  protected readonly CircleIcon = Circle;
+  /** Select event emitted when item is clicked */
+  readonly onSelect = output<void>();
 
   /** The value of this radio item */
   readonly value = input.required<string>();
 
-  /** Whether the item is disabled */
-  readonly disabled = input<boolean>(false);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
+  /** Whether the item is disabled */
+  readonly disabled = input<boolean>(false);
 
-  /** Select event emitted when item is clicked */
-  readonly onSelect = output<void>();
-
-  protected readonly isSelected = computed(() => this.radioGroupContext.value() === this.value());
+  private readonly _context = inject(CONTEXT_MENU_CONTEXT);
+  private readonly _radioGroupContext = inject(CONTEXT_MENU_RADIO_GROUP_CONTEXT);
 
+  protected readonly isSelected = computed(() => this._radioGroupContext.value() === this.value());
   protected readonly computedClass = computed(() =>
     cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       !this.disabled() && 'cursor-pointer hover:bg-accent hover:text-accent-foreground',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
+  protected readonly CircleIcon = Circle;
+
   protected handleClick(event: Event): void {
     if (this.disabled()) {
       event.preventDefault();
       return;
     }
-    this.radioGroupContext.setValue(this.value());
+    this._radioGroupContext.setValue(this.value());
     this.onSelect.emit();
   }
 }

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

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'ContextMenuSeparator',
   template: ``,
   host: {
+    'attr.data-slot': '"context-menu-separator"',
     '[class]': 'computedClass()',
     '[attr.role]': '"separator"',
   },
@@ -18,7 +19,5 @@ export class ContextMenuSeparator {
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn('-mx-1 my-1 h-px bg-border', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('-mx-1 my-1 h-px bg-border', this.class()));
 }

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

@@ -9,6 +9,7 @@ import { ChangeDetectionStrategy, Component, computed, input } from '@angular/co
   selector: 'ContextMenuShortcut',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"context-menu-shortcut"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -18,6 +19,6 @@ export class ContextMenuShortcut {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('ml-auto text-xs tracking-widest text-muted-foreground', this.class())
+    cn('ml-auto text-xs tracking-widest text-muted-foreground', this.class()),
   );
 }

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

@@ -21,6 +21,7 @@ import { CONTEXT_MENU_SUB_CONTEXT } from './context-menu-sub.component';
     </Presence>
   `,
   host: {
+    'attr.data-slot': '"context-menu-sub-content"',
     class: 'contents',
     '(mouseenter)': 'onMouseEnter()',
     '(mouseleave)': 'onMouseLeave()',
@@ -28,23 +29,22 @@ import { CONTEXT_MENU_SUB_CONTEXT } from './context-menu-sub.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ContextMenuSubContent {
-  protected readonly subContext = inject(CONTEXT_MENU_SUB_CONTEXT);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly subContext = inject(CONTEXT_MENU_SUB_CONTEXT);
+
   protected readonly computedClass = computed(() =>
     cn(
       'absolute left-full top-0 z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg',
       'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
   protected onMouseEnter(): void {
     this.subContext.open.set(true);
   }
-
   protected onMouseLeave(): void {
     this.subContext.open.set(false);
   }

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

@@ -15,6 +15,7 @@ import { CONTEXT_MENU_SUB_CONTEXT } from './context-menu-sub.component';
     <lucide-icon [img]="ChevronRightIcon" class="ml-auto h-4 w-4" />
   `,
   host: {
+    'attr.data-slot': '"context-menu-sub-trigger"',
     '[class]': 'computedClass()',
     '(mouseenter)': 'onMouseEnter()',
     '(mouseleave)': 'onMouseLeave()',
@@ -23,27 +24,27 @@ import { CONTEXT_MENU_SUB_CONTEXT } from './context-menu-sub.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ContextMenuSubTrigger {
-  protected readonly subContext = inject(CONTEXT_MENU_SUB_CONTEXT);
-  protected readonly ChevronRightIcon = ChevronRight;
-
   /** Whether the trigger is inset (extra padding) */
   readonly inset = input<boolean>(false);
 
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly subContext = inject(CONTEXT_MENU_SUB_CONTEXT);
+
   protected readonly computedClass = computed(() =>
     cn(
-      'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent [&>svg]:size-4 [&>svg]:shrink-0',
+      'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent [&>svg]:size-4 [&>svg]:shrink-0 [&>lucide-icon]:size-4 [&>lucide-icon]:shrink-0',
       this.inset() && 'pl-8',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 
+  protected readonly ChevronRightIcon = ChevronRight;
+
   protected onMouseEnter(): void {
     this.subContext.open.set(true);
   }
-
   protected onMouseLeave(): void {
     // Keep open to allow mouse movement to subcontent
   }

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

@@ -1,11 +1,17 @@
-import { ChangeDetectionStrategy, Component, InjectionToken, signal, type WritableSignal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  InjectionToken,
+  signal,
+  type WritableSignal,
+} from '@angular/core';
 
 export interface ContextMenuSubContext {
   open: WritableSignal<boolean>;
 }
 
 export const CONTEXT_MENU_SUB_CONTEXT = new InjectionToken<ContextMenuSubContext>(
-  'CONTEXT_MENU_SUB_CONTEXT'
+  'CONTEXT_MENU_SUB_CONTEXT',
 );
 
 /**
@@ -24,6 +30,7 @@ export const CONTEXT_MENU_SUB_CONTEXT = new InjectionToken<ContextMenuSubContext
     },
   ],
   host: {
+    'attr.data-slot': '"context-menu-sub"',
     class: 'relative',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -10,6 +10,7 @@ import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
   selector: 'ContextMenuTrigger',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"context-menu-trigger"',
     '[attr.tabindex]': '0',
     '(contextmenu)': 'onContextMenu($event)',
     '(keydown)': 'onKeydown($event)',
@@ -17,33 +18,33 @@ import { CONTEXT_MENU_CONTEXT } from './context-menu-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ContextMenuTrigger {
+  private readonly _elementRef = inject(ElementRef);
+
   protected readonly context = inject(CONTEXT_MENU_CONTEXT);
-  private readonly elementRef = inject(ElementRef);
 
   protected onContextMenu(event: MouseEvent): void {
     event.preventDefault();
     this.context.position.set({ x: event.clientX, y: event.clientY });
-    this.context.triggerElement.set(this.elementRef.nativeElement);
+    this.context.triggerElement.set(this._elementRef.nativeElement);
     this.context.focusedIndex.set(-1);
     this.context.open.set(true);
   }
-
   protected onKeydown(event: KeyboardEvent): void {
     // Shift+F10 opens context menu (Windows convention)
     if (event.key === 'F10' && event.shiftKey) {
       event.preventDefault();
-      const rect = this.elementRef.nativeElement.getBoundingClientRect();
+      const rect = this._elementRef.nativeElement.getBoundingClientRect();
       this.context.position.set({ x: rect.left, y: rect.bottom });
-      this.context.triggerElement.set(this.elementRef.nativeElement);
+      this.context.triggerElement.set(this._elementRef.nativeElement);
       this.context.focusedIndex.set(-1);
       this.context.open.set(true);
     }
     // Also support ContextMenu key
     if (event.key === 'ContextMenu') {
       event.preventDefault();
-      const rect = this.elementRef.nativeElement.getBoundingClientRect();
+      const rect = this._elementRef.nativeElement.getBoundingClientRect();
       this.context.position.set({ x: rect.left, y: rect.bottom });
-      this.context.triggerElement.set(this.elementRef.nativeElement);
+      this.context.triggerElement.set(this._elementRef.nativeElement);
       this.context.focusedIndex.set(-1);
       this.context.open.set(true);
     }

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

@@ -20,6 +20,7 @@ import { CONTEXT_MENU_CONTEXT, type ContextMenuContextValue } from './context-me
     },
   ],
   host: {
+    'attr.data-slot': '"context-menu"',
     class: 'relative inline-block',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,

package/src/app/lib/components/ui/context-menu/index.ts

@@ -1,15 +1,26 @@
 export { ContextMenuCheckboxItem } from './context-menu-checkbox-item.component';
 export { ContextMenuContent } from './context-menu-content.component';
-export { CONTEXT_MENU_CONTEXT, type ContextMenuContextValue, type ContextMenuPosition } from './context-menu-context';
+export {
+  CONTEXT_MENU_CONTEXT,
+  type ContextMenuContextValue,
+  type ContextMenuPosition,
+} from './context-menu-context';
 export { ContextMenuItem } from './context-menu-item.component';
 export { ContextMenuLabel } from './context-menu-label.component';
-export { CONTEXT_MENU_RADIO_GROUP_CONTEXT, ContextMenuRadioGroup, type ContextMenuRadioGroupContext } from './context-menu-radio-group.component';
+export {
+  CONTEXT_MENU_RADIO_GROUP_CONTEXT,
+  ContextMenuRadioGroup,
+  type ContextMenuRadioGroupContext,
+} from './context-menu-radio-group.component';
 export { ContextMenuRadioItem } from './context-menu-radio-item.component';
 export { ContextMenuSeparator } from './context-menu-separator.component';
 export { ContextMenuShortcut } from './context-menu-shortcut.component';
 export { ContextMenuSubContent } from './context-menu-sub-content.component';
 export { ContextMenuSubTrigger } from './context-menu-sub-trigger.component';
-export { CONTEXT_MENU_SUB_CONTEXT, ContextMenuSub, type ContextMenuSubContext } from './context-menu-sub.component';
+export {
+  CONTEXT_MENU_SUB_CONTEXT,
+  ContextMenuSub,
+  type ContextMenuSubContext,
+} from './context-menu-sub.component';
 export { ContextMenuTrigger } from './context-menu-trigger.component';
 export { ContextMenu } from './context-menu.component';
-

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

@@ -1,18 +1,12 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { ArrowDown, ArrowUp, ArrowUpDown, LucideAngularModule } from 'lucide-angular';
 import {
-    DATA_TABLE_CONTEXT,
-    DataTableContext,
-    SortDirection,
-    SortingState,
-    type ColumnDef,
+  DATA_TABLE_CONTEXT,
+  DataTableContext,
+  SortDirection,
+  SortingState,
+  type ColumnDef,
 } from './data-table-context';
 
 /**
@@ -31,7 +25,10 @@ import {
     <div class="rounded-md border">
       <table class="w-full caption-bottom text-sm" role="grid" aria-label="Data table">
         <thead class="[&_tr]:border-b">
-          <tr class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted" role="row">
+          <tr
+            class="border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
+            role="row"
+          >
             @for (column of visibleColumns(); track column.id) {
               <th
                 scope="col"
@@ -52,7 +49,11 @@ import {
                     } @else if (getSortDirection(column.id) === 'desc') {
                       <lucide-icon [img]="icons.ArrowDown" class="size-4" aria-hidden="true" />
                     } @else {
-                      <lucide-icon [img]="icons.ArrowUpDown" class="size-4 opacity-50" aria-hidden="true" />
+                      <lucide-icon
+                        [img]="icons.ArrowUpDown"
+                        class="size-4 opacity-50"
+                        aria-hidden="true"
+                      />
                     }
                   </button>
                 } @else {
@@ -95,25 +96,24 @@ import {
     </div>
   `,
   host: {
+    'attr.data-slot': '"data-table-content"',
     '[class]': 'computedClass()',
-    'ngSkipHydration': 'true',
+    ngSkipHydration: 'true',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataTableContent<T = unknown> {
-  protected readonly context = inject(DATA_TABLE_CONTEXT) as DataTableContext<T>;
-  protected readonly icons = { ArrowUp, ArrowDown, ArrowUpDown };
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly context = inject(DATA_TABLE_CONTEXT) as DataTableContext<T>;
+
   /** Visible columns based on visibility state */
   protected readonly visibleColumns = computed(() => {
     const columns = this.context.columns();
     const visibility = this.context.columnVisibility();
     return columns.filter((col) => visibility[col.id] !== false);
   });
-
   /** Filtered data based on global filter */
   protected readonly filteredData = computed(() => {
     const data = this.context.data();
@@ -126,10 +126,9 @@ export class DataTableContent<T = unknown> {
       columns.some((col) => {
         const value = this.getCellValue(row, col);
         return String(value).toLowerCase().includes(filter);
-      })
+      }),
     );
   });
-
   /** Sorted data */
   protected readonly sortedData = computed(() => {
     const data = [...this.filteredData()];
@@ -153,7 +152,6 @@ export class DataTableContent<T = unknown> {
       return 0;
     });
   });
-
   /** Paginated data */
   protected readonly paginatedData = computed(() => {
     const data = this.sortedData();
@@ -162,9 +160,10 @@ export class DataTableContent<T = unknown> {
     const start = pageIndex * pageSize;
     return data.slice(start, start + pageSize);
   });
-
   protected readonly computedClass = computed(() => cn(this.class()));
 
+  protected readonly icons = { ArrowUp, ArrowDown, ArrowUpDown };
+
   protected getCellValue(row: T, column: ColumnDef<T>): unknown {
     if (column.accessorFn) {
       return column.accessorFn(row);
@@ -174,14 +173,12 @@ export class DataTableContent<T = unknown> {
     }
     return '';
   }
-
   protected getSortDirection(columnId: string): SortDirection {
     const sorting = this.context.sorting();
     const sort = sorting.find((s) => s.id === columnId);
     if (!sort) return null;
     return sort.desc ? 'desc' : 'asc';
   }
-
   /** Get ARIA sort value for accessibility */
   protected getAriaSortValue(columnId: string): 'ascending' | 'descending' | 'none' | null {
     const direction = this.getSortDirection(columnId);
@@ -189,7 +186,6 @@ export class DataTableContent<T = unknown> {
     if (direction === 'desc') return 'descending';
     return 'none';
   }
-
   /** Get accessible label for sort button */
   protected getSortButtonLabel(column: ColumnDef<T>): string {
     const direction = this.getSortDirection(column.id);
@@ -202,7 +198,6 @@ export class DataTableContent<T = unknown> {
     }
     return `${header}. Click to sort ascending.`;
   }
-
   protected toggleSort(columnId: string): void {
     const sorting = this.context.sorting();
     const existingSort = sorting.find((s) => s.id === columnId);
@@ -218,7 +213,6 @@ export class DataTableContent<T = unknown> {
 
     this.context.onSortingChange(newSorting);
   }
-
   protected isRowSelected(index: number): boolean {
     const selection = this.context.rowSelection();
     return selection[String(index)] === true;

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

@@ -44,6 +44,4 @@ export interface DataTableContext<T = unknown> {
   onPaginationChange: (pageIndex: number, pageSize: number) => void;
 }
 
-export const DATA_TABLE_CONTEXT = new InjectionToken<DataTableContext>(
-  'DataTableContext'
-);
+export const DATA_TABLE_CONTEXT = new InjectionToken<DataTableContext>('DataTableContext');

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

@@ -1,12 +1,12 @@
 import { cn } from '@/lib/utils';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-} from '@angular/core';
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, LucideAngularModule } from 'lucide-angular';
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  LucideAngularModule,
+} from 'lucide-angular';
 import { DATA_TABLE_CONTEXT } from './data-table-context';
 
 /**
@@ -74,64 +74,54 @@ import { DATA_TABLE_CONTEXT } from './data-table-context';
     </div>
   `,
   host: {
+    'attr.data-slot': '"data-table-pagination"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataTablePagination {
-  protected readonly context = inject(DATA_TABLE_CONTEXT);
-  protected readonly icons = { ChevronsLeft, ChevronsRight, ChevronLeft, ChevronRight };
-
   /** Page size options */
   readonly pageSizeOptions = input<number[]>([10, 20, 30, 40, 50]);
 
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly totalCount = computed(() => this.context.data().length);
+  protected readonly context = inject(DATA_TABLE_CONTEXT);
 
+  protected readonly totalCount = computed(() => this.context.data().length);
   protected readonly selectedCount = computed(
-    () => Object.keys(this.context.rowSelection()).filter((k) => this.context.rowSelection()[k]).length
+    () =>
+      Object.keys(this.context.rowSelection()).filter((k) => this.context.rowSelection()[k]).length,
   );
-
   protected readonly pageCount = computed(() => {
     const total = this.totalCount();
     const pageSize = this.context.pageSize();
     return Math.ceil(total / pageSize);
   });
-
-  protected readonly canPreviousPage = computed(
-    () => this.context.pageIndex() > 0
-  );
-
-  protected readonly canNextPage = computed(
-    () => this.context.pageIndex() < this.pageCount() - 1
-  );
-
+  protected readonly canPreviousPage = computed(() => this.context.pageIndex() > 0);
+  protected readonly canNextPage = computed(() => this.context.pageIndex() < this.pageCount() - 1);
   protected readonly computedClass = computed(() =>
-    cn('flex items-center justify-end space-x-2 py-4', this.class())
+    cn('flex items-center justify-end space-x-2 py-4', this.class()),
   );
 
+  protected readonly icons = { ChevronsLeft, ChevronsRight, ChevronLeft, ChevronRight };
+
   protected onPageSizeChange(event: Event): void {
     const target = event.target as HTMLSelectElement;
     const pageSize = parseInt(target.value, 10);
     this.context.onPaginationChange(0, pageSize);
   }
-
   protected firstPage(): void {
     this.context.onPaginationChange(0, this.context.pageSize());
   }
-
   protected previousPage(): void {
     const newIndex = Math.max(0, this.context.pageIndex() - 1);
     this.context.onPaginationChange(newIndex, this.context.pageSize());
   }
-
   protected nextPage(): void {
     const newIndex = Math.min(this.pageCount() - 1, this.context.pageIndex() + 1);
     this.context.onPaginationChange(newIndex, this.context.pageSize());
   }
-
   protected lastPage(): void {
     this.context.onPaginationChange(this.pageCount() - 1, this.context.pageSize());
   }

package/src/app/lib/components/ui/data-table/data-table-search.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 { DATA_TABLE_CONTEXT } from './data-table-context';
 
 /**
@@ -22,27 +16,25 @@ import { DATA_TABLE_CONTEXT } from './data-table-context';
     />
   `,
   host: {
+    'attr.data-slot': '"data-table-search"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataTableSearch {
-  protected readonly context = inject(DATA_TABLE_CONTEXT);
-
   /** Placeholder text */
   readonly placeholder = input<string>('Search...');
 
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn('flex items-center', this.class())
-  );
+  protected readonly context = inject(DATA_TABLE_CONTEXT);
 
+  protected readonly computedClass = computed(() => cn('flex items-center', this.class()));
   protected readonly inputClass = computed(() =>
     cn(
-      'flex h-9 w-full max-w-sm rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50'
-    )
+      'flex h-9 w-full max-w-sm rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+    ),
   );
 
   protected onInput(event: Event): void {

package/src/app/lib/components/ui/data-table/data-table-toolbar.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';
 
 /**
  * DataTableToolbar component - toolbar with search and options.
@@ -13,6 +8,7 @@ import {
   selector: 'DataTableToolbar',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"data-table-toolbar"',
     '[class]': 'computedClass()',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -22,6 +18,6 @@ export class DataTableToolbar {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('flex items-center justify-between', this.class())
+    cn('flex items-center justify-between', this.class()),
   );
 }