@ngbase/adk 0.1.17 → 0.1.18

package/schematics/components/files/drawer/drawer.ts.template

@@ -1,24 +1,25 @@
-import { animate, state, style, transition, trigger } from '@angular/animations';
 import {
   ChangeDetectionStrategy,
   Component,
   ViewContainerRef,
-  afterNextRender,
+  computed,
   viewChild,
 } from '@angular/core';
 import { FocusTrap } from '@ngbase/adk/a11y';
 import { BaseDialog, basePortal, DialogInput, DialogOptions } from '@ngbase/adk/portal';
-import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
 
 @Component({
   selector: '<%= name %>-drawer',
   template: `
     <div class="pointer-events-none flex h-full flex-col justify-end">
       <div
-        class="pointer-events-auto flex max-h-[90vh] flex-col overflow-hidden rounded-tl-2xl rounded-tr-2xl border-t bg-background p-4 shadow-2xl"
-        [@bottomAnimation]
+        class="{{
+          'bg-background pointer-events-auto flex max-h-[90vh] flex-col overflow-hidden rounded-tl-2xl rounded-tr-2xl border-t p-4 shadow-2xl' +
+            (closing() ? ' drawer-content-leave' : ' drawer-content')
+        }}"
+        (animationend)="onAnimationEnd($event)"
       >
-        <button class="mx-auto h-2 w-20 rounded-full bg-muted-foreground"></button>
+        <button class="bg-muted-foreground mx-auto h-2 w-20 rounded-full"></button>
         @if (!isHideHeader) {
           <div class="flex h-8 items-center">
             <h2 class="flex-1 font-bold">{{ options.title }}</h2>
@@ -26,50 +27,52 @@ import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
           </div>
         }
         <div class="h-full overflow-auto">
-          <ng-container #myDialog />
+          <ng-container #contentContainer />
         </div>
       </div>
     </div>
     @if (backdropColor) {
       <div
-        class="absolute top-0 -z-10 h-full w-full bg-black/30"
-        [@fadeAnimation]
         (click)="close()"
+        (animationend)="onAnimationEnd($event)"
+        class="{{
+          'absolute top-0 -z-10 h-full w-full bg-black/30' +
+            (closing() ? ' dialog-backdrop-leave' : ' dialog-backdrop')
+        }}"
       ></div>
     }
   `,
   host: {
     class: 'fixed block top-0 bottom-0 left-0 right-0 overflow-hidden z-p',
-    '[@parentAnimation]': '',
-    '(@parentAnimation.done)': 'animationDone()',
   },
   hostDirectives: [FocusTrap],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [
-    createHostAnimation(['@bottomAnimation', '@fadeAnimation']),
-    trigger('bottomAnimation', [
-      state('1', style({ transform: 'none' })),
-      state('void', style({ transform: 'translate3d(0, 100%, 0)' })),
-      state('0', style({ transform: 'translate3d(0, 100%, 0)' })),
-      transition('* => *', animate('200ms ease')),
-    ]),
-    fadeAnimation('200ms'),
-  ],
 })
 export class DrawerContainer extends BaseDialog {
-  myDialog = viewChild('myDialog', { read: ViewContainerRef });
+  protected override readonly hasAnimations = true;
+  readonly contentContainer = viewChild('contentContainer', { read: ViewContainerRef });
   backdropColor = true;
   options!: DialogOptions;
   classNames = '';
   isHideHeader = false;
 
-  constructor() {
-    super();
-    afterNextRender(() => {
-      this._afterViewSource.next(this.myDialog()!);
-    });
+  onAnimationEnd(event: AnimationEvent) {
+    if (event.target === event.currentTarget) {
+      this.animationDone();
+    }
   }
 
+  readonly style = computed(() => {
+    return {
+      width: this.options.fullWindow ? '100vw' : this.options.width,
+      height: this.options.fullWindow ? '100vh' : this.options.height,
+      maxWidth: this.options.fullWindow ? '100vw' : this.options.maxWidth,
+      maxHeight: this.options.fullWindow ? '100vh' : this.options.maxHeight || '96vh',
+      minHeight: this.options.minHeight,
+      minWidth: this.options.minWidth,
+    };
+  });
+
   override setOptions(options: DialogOptions): void {
     this.options = options;
     this.classNames = this.options.classNames?.join(' ') || '';

package/schematics/components/files/form-field/form-field.ts.template

@@ -1,11 +1,11 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  computed,
   Directive,
   effect,
   ElementRef,
   inject,
-  OnDestroy,
   viewChild,
 } from '@angular/core';
 import {
@@ -13,7 +13,7 @@ import {
   NgbFormField,
   NgbInputError,
   NgbLabel,
-  toggleDiv,
+  NumberFormat,
 } from '@ngbase/adk/form-field';
 import { InputStyle } from './input-style.directive';
 import { NgbSelectTarget } from '@ngbase/adk/select';
@@ -26,20 +26,44 @@ import { NgbSelectTarget } from '@ngbase/adk/select';
   template: `
     <ng-content select="[<%= name %>Label]" />
     <ng-content select="[<%= name %>Description]" />
-    <div class="flex items-center" #target <%= name %>InputStyle>
+    <div
+      class="has-[[disabled]]:bg-input/30 flex items-center"
+      #target
+      <%= name %>InputStyle
+      [class]="
+        ngbFormField.hasErrors()
+          ? 'border-red-500 focus-within:border-red-500 focus-within:ring-red-500/30'
+          : ''
+      "
+    >
       <ng-content select="[<%= name %>Prefix]" />
       <ng-content />
       <ng-content select="[<%= name %>Suffix]" />
     </div>
-    <ng-content select="[<%= name %>Error]" />
+    @for (error of errors(); track error.kind) {
+      <div class="overflow-hidden" animate.enter="height-enter" animate.leave="height-leave">
+        <div class="mx-0.5 min-h-0 text-sm text-red-500">
+          {{ error.message }}
+        </div>
+      </div>
+    }
   `,
   host: {
     class: 'inline-flex flex-col font-medium gap-1',
   },
 })
-export class FormField {
+export class MeeFormField {
+  readonly ngbFormField = inject(NgbFormField);
   readonly selectTarget = inject(NgbSelectTarget);
   readonly target = viewChild.required<ElementRef<HTMLDivElement>>('target');
+  readonly errors = computed(() => {
+    const control = this.ngbFormField._control();
+    const state = control?.state();
+    if (state?.touched() && state?.errors()?.length) {
+      return state.errors();
+    }
+    return [];
+  });
   private _ = effect(() => {
     this.selectTarget.target.set(this.target().nativeElement);
   });
@@ -57,6 +81,16 @@ export class MeeInput {
   readonly formField = inject(NgbFormField, { optional: true });
 }
 
+@Directive({
+  selector: '[<%= name %>NumberInput]',
+  // hostDirectives: [{ directive: InputBase, inputs: ['value'], outputs: ['valueChange'] }],
+  host: {
+    class: 'outline-none w-full bg-transparent placeholder:text-gray-400',
+    '[class.border-red-500]': 'formField?.hasErrors()',
+  },
+})
+export class MeeNumberInput extends NumberFormat {}
+
 @Component({
   selector: '[<%= name %>Label]',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -95,26 +129,20 @@ export class InputSuffix {}
 @Component({
   selector: '[<%= name %>Error]',
   hostDirectives: [{ directive: NgbInputError, inputs: ['ngbError: <%= name %>Error'] }],
-  template: `<ng-content />`,
+  template: `
+    @if (isInvalid()) {
+      <div class="overflow-hidden" animate.enter="height-enter" animate.leave="height-leave">
+        <div class="min-h-0">
+          <ng-content />
+        </div>
+      </div>
+    }
+  `,
   host: {
     class: 'text-red-500 mx-0.5',
-    '[@toggleDiv]': 'isInvalid() ? "visible" : "hidden"',
   },
-  animations: [toggleDiv],
 })
-export class InputError implements OnDestroy {
+export class InputError {
   readonly error = inject(NgbInputError);
-  readonly el = inject<ElementRef<HTMLDivElement>>(ElementRef);
-
   readonly isInvalid = this.error.isInvalid;
-
-  constructor() {
-    this.error.animate.set(true);
-  }
-
-  ngOnDestroy() {
-    if (!this.isInvalid()) {
-      this.el.nativeElement.classList.add('h-0', 'opacity-0');
-    }
-  }
 }

package/schematics/components/files/pagination/pagination.ts.template

@@ -10,7 +10,7 @@ import {
   lucideChevronsLeft,
   lucideChevronsRight,
 } from '@ng-icons/lucide';
-import { FormField } from '<%= basepath %>/form-field';
+import { MeeFormField } from '<%= basepath %>/form-field';
 
 @Component({
   selector: '<%= name %>-pagination',
@@ -23,12 +23,12 @@ import { FormField } from '<%= basepath %>/form-field';
       lucideChevronsRight,
     }),
   ],
-  imports: [Button, Icon, Select, Option, NgbPaginationBtn, FormField],
+  imports: [Button, Icon, Select, Option, NgbPaginationBtn, MeeFormField],
   template: `
     <div class="flex items-center gap-2">
       <div>Rows per page</div>
       <<%= name %>-form-field class="!w-auto [&>.mis]:min-h-8 [&>.mis]:py-0">
-        <<%= name %>-select [value]="size()" (valueChange)="sizeChanged($event)">
+        <<%= name %>-select [value]="size()" (valueChange)="sizeChanged($any($event))">
           @for (size of sizeOptions(); track size) {
             <<%= name %>-option [value]="size">
               {{ size }}
@@ -51,7 +51,7 @@ import { FormField } from '<%= basepath %>/form-field';
             ngbPaginationBtn="page"
             [jump]="snap"
             <%= name %>Button="ghost"
-            class="min-w-9 !p-2 ring-offset-foreground aria-[current=page]:bg-muted aria-[current=page]:text-primary"
+            class="ring-offset-foreground aria-[current=page]:bg-muted aria-[current=page]:text-primary min-w-9 !p-2"
           >
             {{ snap }}
           </button>

package/schematics/components/files/picasa/picasa-base.component.ts.template

@@ -1,12 +1,5 @@
-import {
-  afterNextRender,
-  ChangeDetectionStrategy,
-  Component,
-  viewChild,
-  ViewContainerRef,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, viewChild, ViewContainerRef } from '@angular/core';
 import { BaseDialog, DialogOptions } from '@ngbase/adk/portal';
-import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
 import { Subject } from 'rxjs';
 
 @Component({
@@ -15,18 +8,20 @@ import { Subject } from 'rxjs';
   template: `
     <div class="pointer-events-none flex h-full items-center justify-center">
       <div class="pointer-events-auto">
-        <ng-container #myDialog />
+        <ng-container #contentContainer />
       </div>
       <div
-        class="backdropColor pointer-events-auto absolute top-0 -z-10 h-full w-full"
         (click)="!options.disableClose && close()"
-        [@fadeAnimation]=""
+        (animationend)="onAnimationEnd($event)"
+        class="{{
+          'backdropColor pointer-events-auto absolute top-0 -z-10 h-full w-full' +
+            (closing() ? ' dialog-backdrop-leave' : ' dialog-backdrop')
+        }}"
       ></div>
     </div>
   `,
   host: {
     class: 'fixed block top-0 bottom-0 left-0 right-0 overflow-auto pointer-events-none z-p',
-    '[@parentAnimation]': '',
   },
   styles: `
     .backdropColor {
@@ -41,10 +36,10 @@ import { Subject } from 'rxjs';
       border-radius: 0;
     }
   `,
-  animations: [createHostAnimation(['@fadeAnimation']), fadeAnimation('300ms')],
 })
 export class PicasaBase extends BaseDialog {
-  myDialog = viewChild('myDialog', { read: ViewContainerRef });
+  protected override readonly hasAnimations = true;
+  readonly contentContainer = viewChild('contentContainer', { read: ViewContainerRef });
 
   backdropColor = true;
   isSidePopup = true;
@@ -54,26 +49,16 @@ export class PicasaBase extends BaseDialog {
   isHideHeader = false;
   onDone = new Subject<any>();
 
-  constructor() {
-    super();
-    afterNextRender(() => {
-      this._afterViewSource.next(this.myDialog()!);
-
-      // setTimeout(() => {
-      //   this.show.set(false);
-      // }, 2000);
-    });
-    // this.dialogRef.afterClosed.subscribe(() => {
-    //   setTimeout(() => {
-    //     this.animationDone();
-    //   }, 500);
-    // });
-  }
-
   override setOptions(options: DialogOptions) {
     this.options = options;
     this.classNames = this.options.classNames?.join(' ') || '';
     this.isHideHeader = this.options.header || false;
     this.backdropColor = this.options.backdropColor || true;
   }
+
+  onAnimationEnd(event: AnimationEvent) {
+    if (event.target === event.currentTarget) {
+      this.animationDone();
+    }
+  }
 }

package/schematics/components/files/popover/popover.ts.template

@@ -18,11 +18,14 @@ import {
   imports: [NgbPopoverBackdrop, NgbPopoverMain, NgbPopoverArrow],
   template: ` <div
       ngbPopoverMain
-      [@slideInOutAnimation]
-      class="menu-container pointer-events-auto fixed z-10 flex flex-col rounded-lg border bg-popover text-popover-foreground shadow-md"
+      (animationend)="onAnimationEnd($event)"
+      class="{{
+        'menu-container pointer-events-auto fixed z-10 flex flex-col rounded-lg border bg-popover text-popover-foreground shadow-md' +
+          (closing() ? ' popover-content-leave' : ' popover-content')
+      }}"
     >
       <div class="flex flex-1 flex-col overflow-auto" ngbPopoverArrow>
-        <ng-container #myDialog />
+        <ng-container #contentContainer />
       </div>
     </div>
     @if (options().backdrop) {
@@ -33,7 +36,15 @@ import {
       'fixed top-0 left-0 w-full h-full pointer-events-none z-p flex items-center justify-center',
   },
 })
-class Popover extends NgbPopover {}
+class Popover extends NgbPopover {
+  protected override readonly hasAnimations = true;
+
+  onAnimationEnd(event: AnimationEvent) {
+    if (event.target === event.currentTarget) {
+      this.animationDone();
+    }
+  }
+}
 
 export function registerPopover() {
   return registerNgbPopover(Popover);

package/schematics/components/files/select/list-selection.ts.template

@@ -1,12 +1,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { provideValueAccessor } from '@ngbase/adk/utils';
 import { SelectBase } from '@ngbase/adk/select';
 
 @Component({
   selector: '<%= name %>-list-selection',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `<ng-content />`,
-  providers: [provideValueAccessor(ListSelection)],
 })
 export class ListSelection<T> extends SelectBase<T> {
   constructor() {

package/schematics/components/files/select/option.ts.template

@@ -24,7 +24,7 @@ export class Option<T> {
 @Component({
   selector: '<%= name %>-option-group, [<%= name %>OptionGroup]',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<div class="sticky -top-1 z-10 bg-popover px-2 py-1.5 text-sm text-muted-foreground">
+  template: `<div class="bg-popover text-muted-foreground sticky -top-1 z-10 px-2 py-1.5 text-sm">
       {{ label() }}
     </div>
     <ng-content />`,

package/schematics/components/files/selectable/selectable.ts.template

@@ -23,8 +23,8 @@ export class SelectableItem<T> {
   hostDirectives: [
     {
       directive: NgbSelectable,
-      inputs: ['activeIndex'],
-      outputs: ['activeIndexChange', 'valueChanged'],
+      inputs: ['value'],
+      outputs: ['valueChange', 'valueChanged'],
     },
   ],
   template: `<ng-content />`,

package/schematics/components/files/sheet/sheet.ts.template

@@ -4,10 +4,8 @@ import { Button } from '<%= basepath %>/button';
 import { Icon } from '<%= basepath %>/icon';
 import { provideIcons } from '@ng-icons/core';
 import { lucideX } from '@ng-icons/lucide';
-import { sideAnimation } from '@ngbase/adk/dialog';
 import { NgbSheet, NgbSheetContainer, ngbSheetPortal } from '@ngbase/adk/sheet';
 import { aliasSheet } from '@ngbase/adk/sheet';
-import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
 
 @Component({
   selector: '<%= name %>-sheet',
@@ -21,13 +19,22 @@ import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
       [class]="options.position === 'left' ? 'justify-start' : 'justify-end'"
     >
       <div
-        class="pointer-events-auto m-2 flex flex-col overflow-hidden rounded-lg border-l bg-background shadow-2xl will-change-transform"
-        [@sideAnimation]="position()"
+        class="{{
+          'pointer-events-auto m-2 flex flex-col overflow-hidden rounded-lg border-l bg-background shadow-2xl will-change-transform' +
+            (closing()
+              ? options.position === 'left'
+                ? ' sheet-content-left-leave'
+                : ' sheet-content-right-leave'
+              : options.position === 'left'
+                ? ' sheet-content-left'
+                : ' sheet-content-right')
+        }}"
         [ngStyle]="{
           width: options.width,
           minWidth: options.minWidth,
           maxWidth: options.maxWidth,
         }"
+        (animationend)="onAnimationEnd($event)"
       >
         @if (!isHideHeader) {
           <div class="flex items-center border-b px-4 py-2">
@@ -38,29 +45,34 @@ import { createHostAnimation, fadeAnimation } from '@ngbase/adk/utils';
           </div>
         }
         <div class="h-full overflow-auto p-4">
-          <ng-container #myDialog />
+          <ng-container #contentContainer />
         </div>
       </div>
     </div>
     @if (backdropColor) {
       <div
-        class="absolute top-0 -z-10 h-full w-full bg-black/30"
-        [@fadeAnimation]
         (click)="close()"
+        (animationend)="onAnimationEnd($event)"
+        class="{{
+          'absolute top-0 -z-10 h-full w-full bg-black/30' +
+            (closing() ? ' dialog-backdrop-leave' : ' dialog-backdrop')
+        }}"
       ></div>
-      <!-- [class]="status() ? 'pointer-events-auto' : 'pointer-events-none'" -->
     }
   `,
   host: {
     class: 'fixed block top-0 bottom-0 left-0 right-0  z-p',
   },
-  animations: [
-    createHostAnimation(['@fadeAnimation', '@sideAnimation']),
-    fadeAnimation('300ms'),
-    sideAnimation,
-  ],
 })
-export class SheetContainer extends NgbSheetContainer {}
+export class SheetContainer extends NgbSheetContainer {
+  protected override readonly hasAnimations = true;
+
+  onAnimationEnd(event: AnimationEvent) {
+    if (event.target === event.currentTarget) {
+      this.animationDone();
+    }
+  }
+}
 
 export function sheetPortal() {
   return ngbSheetPortal(SheetContainer);

package/schematics/components/files/sidenav/sidenav.ts.template

@@ -7,7 +7,6 @@ import {
   NgbSidenavOverlay,
   SidenavType,
   aliasSidenav,
-  slideAnimation,
 } from '@ngbase/adk/sidenav';
 
 export type { SidenavType };
@@ -19,9 +18,13 @@ export type { SidenavType };
   imports: [NgbSidenavOverlay, NgbSidenavHeaderTrack],
   template: `
     @if (showOverlay()) {
-      <div ngbSidenavOverlay class="z-p bg-black/70"></div>
+      <div
+        ngbSidenavOverlay
+        class="z-p bg-black/70"
+        animate.enter="dialog-backdrop"
+      ></div>
     }
-    <div ngbSidenavHeaderTrack class="transition-[width] duration-500"></div>
+    <div ngbSidenavHeaderTrack class="sidenav-track"></div>
     <ng-content select="<%= name %>-sidenav-header" />
     <ng-content />
   `,
@@ -41,8 +44,7 @@ export class Sidenav extends NgbSidenav {}
     </div>
   `,
   host: {
-    class: 'block h-full bg-background z-p transition-[width] duration-500',
+    class: 'block h-full bg-background z-p sidenav-header',
   },
-  animations: [slideAnimation('500ms cubic-bezier(0.4, 0, 0.2, 1)')],
 })
 export class SidenavHeader extends NgbSidenavHeader {}

package/schematics/components/files/sonner/sonner.ts.template

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { NgbSonner, ngbSonnerPortal, sonnerAnimation, SonnerBase } from '@ngbase/adk/sonner';
+import { NgbSonner, ngbSonnerPortal, SonnerBase } from '@ngbase/adk/sonner';
 import { Icon } from '<%= basepath %>/icon';
 import { provideIcons } from '@ng-icons/core';
 import {
@@ -41,7 +41,6 @@ import {
       }
     </ul>
   `,
-  animations: [sonnerAnimation],
 })
 export class Sonner extends NgbSonner {
   readonly icons = {

package/schematics/components/files/stepper/stepper.ts.template

@@ -7,7 +7,6 @@ import {
   NgbStepper,
   NgbStepperStep,
   provideStep,
-  stepperAnimation,
 } from '@ngbase/adk/stepper';
 
 @Component({
@@ -46,8 +45,8 @@ import {
             }
           </div>
           @if (step.verticalTemplate(); as template) {
-            <div class="ml-12" [@slide]>
-              <div class="pt-4">
+            <div class="stepper-content ml-12">
+              <div class="min-h-0 pt-4">
                 <ng-container *ngTemplateOutlet="template" />
               </div>
             </div>
@@ -57,7 +56,6 @@ import {
     </div>
     <ng-content />
   `,
-  animations: [stepperAnimation],
 })
 export class Stepper extends NgbStepper {}
 

package/schematics/components/files/switch/switch.ts.template

@@ -11,13 +11,13 @@ import { NgbSwitch, NgbSwitchLabel, NgbSwitchThumb, NgbSwitchTrack } from '@ngba
   template: `
     <button
       ngbSwitchTrack
-      class="relative w-9 rounded-full border-2 border-transparent bg-muted transition-colors aria-[checked=true]:bg-primary"
+      class="bg-muted aria-[checked=true]:bg-primary relative w-9 rounded-full border-2 border-transparent transition-colors"
     >
       <span
         #thumb="ngbSwitchThumb"
         ngbSwitchThumb
         [class]="thumb.checked() ? (thumb.rtl() ? '-translate-x-full' : 'translate-x-full') : ''"
-        class="block h-4 w-4 rounded-full bg-background shadow-sm transition-transform"
+        class="bg-background block h-4 w-4 rounded-full shadow-sm transition-transform"
       ></span>
     </button>
     <label ngbSwitchLabel><ng-content /></label>

package/schematics/components/files/table/table.ts.template

@@ -24,9 +24,10 @@ import {
   NgbSort,
   NgbSortHeader,
   NgbTable,
+  NgbTableVirtualScroll,
 } from '@ngbase/adk/table';
 import { Select, Option, SelectTrigger } from '<%= basepath %>/select';
-import { FormField, InputSuffix } from '<%= basepath %>/form-field';
+import { MeeFormField, InputSuffix } from '<%= basepath %>/form-field';
 import { Icon } from '<%= basepath %>/icon';
 import { provideIcons } from '@ng-icons/core';
 import {
@@ -179,7 +180,16 @@ export class Sort extends NgbSort<any> {
     provideIcons({ lucideChevronsUpDown, lucideArrowDown, lucideArrowUp, lucideArrowUpDown }),
   ],
   providers: [aliasSortHeader(SortHeader)],
-  imports: [Select, Option, SelectTrigger, FormField, InputSuffix, Icon, Button, NgTemplateOutlet],
+  imports: [
+    Select,
+    Option,
+    SelectTrigger,
+    MeeFormField,
+    InputSuffix,
+    Icon,
+    Button,
+    NgTemplateOutlet,
+  ],
   template: `
     <ng-template #temp><ng-content /></ng-template>
     @if (sort.mode() === 'selection') {
@@ -189,7 +199,7 @@ export class Sort extends NgbSort<any> {
           <<%= name %>-option value="asc" (click)="setDirections('asc')">Asc</<%= name %>-option>
           <<%= name %>-option value="desc" (click)="setDirections('desc')">Desc</<%= name %>-option>
         </<%= name %>-select>
-        <<%= name %>-icon <%= name %>Suffix [name]="directionIcon()" class="!ml-0.5 text-muted-foreground" />
+        <<%= name %>-icon <%= name %>Suffix [name]="directionIcon()" class="text-muted-foreground !ml-0.5" />
       </<%= name %>-form-field>
     } @else {
       <button <%= name %>Button="ghost" class="h-8 gap-0.5 !px-2" (click)="toggle()">
@@ -213,3 +223,33 @@ export class SortHeader extends NgbSortHeader<Sort> {
           : 'lucideArrowUpDown';
   });
 }
+
+// Virtual Scroll
+
+/**
+ * Virtual scroll directive for tables that only renders visible rows.
+ * Dramatically improves performance for large datasets.
+ *
+ * @example
+ * ```html
+ * <div class="h-[600px] overflow-auto">
+ *   <table
+ *     <%= name %>Table
+ *     [data]="largeDataset"
+ *     <%= name %>VirtualScroll="50">
+ *     <!-- table definition -->
+ *   </table>
+ * </div>
+ * ```
+ */
+@Directive({
+  selector: 'table[<%= name %>Table][<%= name %>VirtualScroll]',
+  standalone: true,
+  hostDirectives: [
+    {
+      directive: NgbTableVirtualScroll,
+      inputs: ['ngbVirtualScroll: <%= name %>VirtualScroll', 'bufferSize', 'scrollContainer'],
+    },
+  ],
+})
+export class VirtualScroll {}