@ngbase/adk 0.1.8 → 0.1.10

package/schematics/components/files/form-field/form-field-llm.md.template

@@ -42,15 +42,17 @@ import {
 ```html
 <<%= name %>-form-field>
   <label <%= name %>Label>Label</label>
-  <input <%= name %>Input [(value)]="value" />
   <p <%= name %>Description>Description</p>
-  <p <%= name %>Error="required">Error</p>
-  <p <%= name %>Error="!required && minlength">Error</p>
   <<%= name %>-icon <%= name %>Prefix name="info" />
+  <input <%= name %>Input [(value)]="value" />
   <<%= name %>-icon <%= name %>Suffix name="info" />
+  <p <%= name %>Error="required">Error</p>
+  <p <%= name %>Error="!required && minlength">Error</p>
 </<%= name %>-form-field>
 
 <<%= name %>-form-field>
   <input <%= name %>Input [(ngModel)]="value" />
 </<%= name %>-form-field>
 ```
+
+Note: Use `<%= name %>-form-field` to wrap the `<%= name %>Input`, `<%= name %>-select` or `<%= name %>-autocomplete` and label. Never use any input, select or autocomplete directly.

package/schematics/components/files/form-field/input-style.directive.ts.template

@@ -4,7 +4,10 @@ import { ɵFocusStyles as focusStyles } from '<%= basepath %>/checkbox';
 @Directive({
   selector: '[<%= name %>InputStyle]',
   host: {
-    class: `mis inline-block rounded-lg bg-transparent px-2.5 py-2 border font-normal min-h-10 ${focusStyles.focus} ${focusStyles.within}`,
+    '[class]':
+      "'mis inline-block rounded-lg bg-transparent px-2.5 py-2 border font-normal min-h-10 ' + focusStyles.focus + ' ' + focusStyles.within",
   },
 })
-export class InputStyle {}
+export class InputStyle {
+  readonly focusStyles = focusStyles;
+}

package/schematics/components/files/icon/icon-llm.md.template

@@ -2,6 +2,8 @@
 
 ```typescript
 import { Icon } from '@/ui/icon';
+import { provideIcons } from '@ng-icons/core';
+import { lucideHouse } from '@ng-icons/lucide';
 ```
 
 ## Components
@@ -14,6 +16,12 @@ import { Icon } from '@/ui/icon';
 
 ## Usage
 
-```html
-<<%= name %>-icon name="info" />
+```typescript
+@Component({
+  standalone: true,
+  viewProviders: [provideIcons({ lucideHouse })],
+  imports: [Icon],
+  template: `<<%= name %>-icon name="lucideHouse" />`,
+})
+export class AppComponent {}
 ```

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

@@ -1,6 +1,6 @@
 import { Directive } from '@angular/core';
 import { NgbList, NgbListActionGroup, provideList } from '@ngbase/adk/list';
-import { FocusStyle } from '../checkbox/focus-style.directive';
+import { ɵFocusStyle as FocusStyle } from '<%= basepath %>/checkbox';
 
 @Directive({
   selector: '[<%= name %>ListStyle]',

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

@@ -1,5 +1,11 @@
 import { NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  Directive,
+  input,
+} from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Icon } from '<%= basepath %>/icon';
 import { provideIcons } from '@ng-icons/core';
@@ -13,6 +19,7 @@ import {
 } from '@ngbase/adk/select';
 import { Option } from './option';
 import { SelectInput } from './select-input';
+import { PopoverOptions } from '@ngbase/adk/popover';
 
 @Directive({
   selector: '[<%= name %>SelectOption]',
@@ -48,7 +55,9 @@ export class SelectOption<T> {}
           {{ cValue() || placeholder() }}
         </ng-content>
       </span>
-      <<%= name %>-icon name="lucideChevronsUpDown" class="ml-0.5 text-muted-foreground" />
+      @if (!noIcon()) {
+        <<%= name %>-icon name="lucideChevronsUpDown" class="ml-0.5 text-muted-foreground" />
+      }
     </button>
 
     <!-- Options template -->
@@ -92,8 +101,8 @@ export class SelectOption<T> {}
   },
 })
 export class Select<T> extends NgbSelect<T> {
-  override defaultOptions = {
+  readonly noIcon = input(false, { transform: booleanAttribute });
+  override defaultOptions: Partial<PopoverOptions> = {
     sideOffset: 16,
-    offset1: 0,
   };
 }

package/schematics/components/files/sidenav/sidenav-llm.md.template

@@ -24,14 +24,27 @@ import { Sidenav, SidenavHeader } from '@/ui/sidenav';
 
 ## Usage
 
-```html
-<<%= name %>-sidenav [show]="show()" [mode]="mode()">
-  <<%= name %>-sidenav-header width="100px" minWidth="50px">
-    <div class="p-2">Collapsible content like side menu</div>
-  </<%= name %>-sidenav-header>
-  <div class="p-2">
-    <p>Main content</p>
-    <button (click)="toggle()">Toggle</button>
-  </div>
-</<%= name %>-sidenav>
+```typescript
+@Component({
+  standalone: true,
+  imports: [Sidenav, SidenavHeader],
+  template: ` <<%= name %>-sidenav [show]="show()" [mode]="mode()">
+    <<%= name %>-sidenav-header width="100px" minWidth="50px">
+      <div class="p-2">Collapsible content like side menu</div>
+    </<%= name %>-sidenav-header>
+    <div class="p-2">
+      <button <%= name %>Button="icon" (click)="toggle()">
+        <<%= name %>-icon name="lucideMenu" />
+      </button>
+      <p>Main content</p>
+    </div>
+  </<%= name %>-sidenav>`,
+})
+export class AppComponent {
+  readonly show = signal(false);
+  readonly mode = signal<'side' | 'over'>('side');
+  toggle() {
+    this.show.update(show => !show);
+  }
+}
 ```

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

@@ -1,5 +1,10 @@
-import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, Directive, input } from '@angular/core';
 import {
+  aliasBodyRow,
+  aliasHeadRow,
+  aliasSort,
+  aliasSortHeader,
+  aliasTable,
   NgbBodyRow,
   NgbBodyRowDef,
   NgbCell,
@@ -9,13 +14,22 @@ import {
   NgbHeadDef,
   NgbHeadRow,
   NgbHeadRowDef,
+  NgbSort,
+  NgbSortHeader,
   NgbTable,
 } from '@ngbase/adk/table';
+import { Select, Option, SelectTrigger } from '<%= basepath %>/select';
+import { FormField, InputSuffix } from '<%= basepath %>/form-field';
+import { Icon } from '<%= basepath %>/icon';
+import { provideIcons } from '@ng-icons/core';
+import { lucideArrowDown, lucideArrowUp, lucideChevronsUpDown } from '@ng-icons/lucide';
+import { Button } from '<%= basepath %>/button';
+import { NgTemplateOutlet } from '@angular/common';
 
 @Component({
   selector: 'table[<%= name %>Table]',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{ provide: NgbTable, useExisting: Table }],
+  providers: [aliasTable(Table)],
   template: `
     <thead>
       <ng-container #thead />
@@ -25,7 +39,7 @@ import {
     </tbody>
   `,
   host: {
-    class: 'w-full text-sm',
+    class: 'w-full text-sm border-separate border-spacing-0',
   },
 })
 export class Table<T> extends NgbTable<T> {}
@@ -61,10 +75,10 @@ export class BodyRowDef {}
 @Component({
   selector: '[<%= name %>BodyRow]',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{ provide: NgbBodyRow, useExisting: BodyRow }],
+  providers: [aliasBodyRow(BodyRow)],
   template: `<ng-container #container />`,
   host: {
-    class: '[&:not(:last-child)]:border-b hover:bg-muted h-12',
+    class: '[&:not(:last-child)>td]:border-b hover:bg-muted h-12',
   },
 })
 export class BodyRow extends NgbBodyRow {}
@@ -79,14 +93,12 @@ export class Column {}
 
 // Head Cell
 
-@Component({
+@Directive({
   selector: '[<%= name %>Head]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   hostDirectives: [NgbHead],
-  template: `<ng-content />`,
   host: {
     class:
-      'px-4 py-2 text-left align-middle font-medium text-muted-foreground border-b bg-background',
+      'px-4 py-2 text-left align-middle font-medium text-muted-foreground border-b bg-background [&[data-sticky]]:sticky [&[data-sticky]]:!z-20 [&[data-sticky="start"]]:left-0 [&[data-sticky="end"]]:right-0 [&[data-sticky="start"]]:border-r [&[data-sticky="end"]]:border-l',
   },
 })
 export class Head {}
@@ -102,10 +114,10 @@ export class HeadDef {}
 @Component({
   selector: '[<%= name %>HeadRow]',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  providers: [{ provide: NgbHeadRow, useExisting: HeadRow }],
+  providers: [aliasHeadRow(HeadRow)],
   template: `<ng-container #container />`,
   host: {
-    class: `h-10 [&[data-sticky=true]]:sticky [&[data-sticky=true]]:top-0 [&[data-sticky=true]]:bg-background`,
+    class: `h-10 [&[data-sticky]>th]:sticky [&[data-sticky]>th]:top-0 [&[data-sticky]>th]:bg-background [&[data-sticky]>th]:z-10`,
   },
 })
 export class HeadRow extends NgbHeadRow {}
@@ -120,3 +132,49 @@ export class HeadRow extends NgbHeadRow {}
   ],
 })
 export class HeadRowDef {}
+
+@Directive({
+  selector: '[<%= name %>Sort]',
+  providers: [aliasSort(Sort)],
+})
+export class Sort extends NgbSort<any> {
+  readonly mode = input<'selection' | 'toggle'>('toggle');
+}
+
+@Component({
+  selector: '[<%= name %>SortHeader]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  viewProviders: [provideIcons({ lucideChevronsUpDown, lucideArrowDown, lucideArrowUp })],
+  providers: [aliasSortHeader(SortHeader)],
+  imports: [Select, Option, SelectTrigger, FormField, InputSuffix, Icon, Button, NgTemplateOutlet],
+  template: `
+    <ng-template #temp><ng-content /></ng-template>
+    @if (sort.mode() === 'selection') {
+      <<%= name %>-form-field class="[&>.mis]:h-8 [&>.mis]:min-h-8 [&>.mis]:border-none">
+        <<%= name %>-select noIcon>
+          <div <%= name %>SelectTrigger class="text-xs"><ng-container *ngTemplateOutlet="temp" /></div>
+          <<%= 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 %>-form-field>
+    } @else {
+      <button <%= name %>Button="ghost" class="h-8 gap-0.5 !px-2" (click)="toggle()">
+        <ng-container *ngTemplateOutlet="temp" />
+        <<%= name %>-icon [name]="directionIcon()" />
+      </button>
+    }
+  `,
+  host: {
+    class: '!py-1 !px-2',
+  },
+})
+export class SortHeader extends NgbSortHeader<Sort> {
+  readonly directionIcon = computed(() => {
+    return this.sortDirection() === 'asc'
+      ? 'lucideArrowDown'
+      : this.sortDirection() === 'desc'
+        ? 'lucideArrowUp'
+        : 'lucideChevronsUpDown';
+  });
+}

package/schematics/components/files/theme/theme-button.ts.template

@@ -12,7 +12,7 @@ import { injectTheme } from './theme.service';
   changeDetection: ChangeDetectionStrategy.OnPush,
   viewProviders: [provideIcons({ lucideMoon, lucideSun })],
   template: `
-    <button <%= name %>Button="icon" class="tour-mode h-9 w-9" (click)="themeService.toggle()">
+    <button <%= name %>Button="icon" class="tour-mode" (click)="themeService.toggle()">
       <<%= name %>-icon [name]="themeService.mode() === 'dark' ? 'lucideSun' : 'lucideMoon'" />
       <span class="sr-only">Toggle theme</span>
     </button>

package/slider/slider.d.ts

@@ -25,6 +25,7 @@ export declare class SliderThumb {
 export declare class NgbSlider implements ControlValueAccessor {
     private readonly el;
     private readonly dir;
+    private cdr;
     private readonly drag;
     private readonly track;
     readonly thumbs: import("@angular/core").Signal<readonly ElementRef<HTMLElement>[]>;
@@ -35,6 +36,7 @@ export declare class NgbSlider implements ControlValueAccessor {
     readonly range: import("@angular/core").InputSignalWithTransform<number, unknown>;
     readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     readonly orientation: import("@angular/core").InputSignal<"horizontal" | "vertical">;
+    readonly afterChange: import("@angular/core").OutputEmitterRef<number | number[]>;
     private onChange?;
     private onTouched?;
     readonly noOfThumbs: import("@angular/core").Signal<number[]>;
@@ -43,7 +45,7 @@ export declare class NgbSlider implements ControlValueAccessor {
     private activeIndex;
     private totalWidth;
     private totalSliderWidth;
-    private cdr;
+    private isChanged;
     constructor();
     private handleValueUpdate;
     private updateElement;
@@ -62,7 +64,7 @@ export declare class NgbSlider implements ControlValueAccessor {
     private updateValue;
     private notifyChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgbSlider, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbSlider, "[ngbSlider]", ["ngbSlider"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbSlider, "[ngbSlider]", ["ngbSlider"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "range": { "alias": "range"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "afterChange": "afterChange"; }, never, never, true, never>;
 }
 export declare const aliasSlider: (slider: typeof NgbSlider) => ({
     provide: import("@angular/core").InjectionToken<readonly import("@angular/forms").ControlValueAccessor[]>;

package/table/body-row.d.ts

@@ -6,16 +6,20 @@ export declare class NgbBodyRowDef {
     readonly ngbBodyRowDefColumns: import("@angular/core").InputSignal<string[]>;
     context: any;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgbBodyRowDef, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbBodyRowDef, "[ngbBodyRowDef]", never, { "ngbBodyRowDefColumns": { "alias": "ngbBodyRowDefColumns"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbBodyRowDef, "[ngbBodyRowDef]", never, { "ngbBodyRowDefColumns": { "alias": "ngbBodyRowDefColumns"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 export declare class NgbBodyRow implements OnDestroy {
-    readonly def: any;
+    readonly rowData: import("@angular/core").WritableSignal<any>;
     readonly table: NgbTable<any>;
     readonly rowDef: NgbBodyRowDef;
-    readonly container: import("@angular/core").Signal<ViewContainerRef | undefined>;
+    readonly container: import("@angular/core").Signal<ViewContainerRef>;
     readonly ref: Map<NgbColumn, EmbeddedViewRef<any>>;
     constructor();
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgbBodyRow, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgbBodyRow, "[ngbBodyRow]", never, {}, {}, never, never, true, never>;
 }
+export declare function aliasBodyRow(row: typeof NgbBodyRow): {
+    provide: typeof NgbBodyRow;
+    useExisting: typeof NgbBodyRow;
+};

package/table/head-row.d.ts

@@ -3,19 +3,22 @@ import { NgbColumn } from './column';
 import { NgbTable } from './table';
 import * as i0 from "@angular/core";
 export declare class NgbHeadRowDef {
-    readonly ngbHeadRowDef: import("@angular/core").InputSignal<string[] | undefined>;
+    readonly ngbHeadRowDef: import("@angular/core").InputSignal<string[]>;
     readonly ngbHeadRowDefSticky: import("@angular/core").InputSignal<unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgbHeadRowDef, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbHeadRowDef, "[ngbHeadRowDef]", never, { "ngbHeadRowDef": { "alias": "ngbHeadRowDef"; "required": false; "isSignal": true; }; "ngbHeadRowDefSticky": { "alias": "ngbHeadRowDefSticky"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbHeadRowDef, "[ngbHeadRowDef]", never, { "ngbHeadRowDef": { "alias": "ngbHeadRowDef"; "required": true; "isSignal": true; }; "ngbHeadRowDefSticky": { "alias": "ngbHeadRowDefSticky"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 export declare class NgbHeadRow implements OnDestroy {
-    def: any;
-    table: NgbTable<any>;
-    container: import("@angular/core").Signal<ViewContainerRef | undefined>;
-    ref: Map<NgbColumn, EmbeddedViewRef<any>>;
-    headDef: NgbHeadRowDef;
+    readonly headDef: NgbHeadRowDef;
+    readonly table: NgbTable<any>;
+    readonly container: import("@angular/core").Signal<ViewContainerRef>;
+    readonly ref: Map<NgbColumn, EmbeddedViewRef<any>>;
     constructor();
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgbHeadRow, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgbHeadRow, "[ngbHeadRow]", never, {}, {}, never, never, true, never>;
 }
+export declare function aliasHeadRow(headRow: typeof NgbHeadRow): {
+    provide: typeof NgbHeadRow;
+    useExisting: typeof NgbHeadRow;
+};

package/table/public-api.d.ts

@@ -1,8 +1,8 @@
 import { NgbCell, NgbCellDef } from './body-cell';
-import { NgbBodyRow, NgbBodyRowDef } from './body-row';
+import { NgbBodyRow, NgbBodyRowDef, aliasBodyRow } from './body-row';
 import { NgbColumn } from './column';
 import { NgbHead, NgbHeadDef } from './head-cell';
-import { NgbHeadRow, NgbHeadRowDef } from './head-row';
-import { NgbTable } from './table';
-declare const TableComponents: (typeof NgbHeadDef)[];
-export { NgbBodyRow, NgbBodyRowDef, NgbCell, NgbCellDef, NgbHead, NgbHeadDef, NgbHeadRow, NgbHeadRowDef, NgbColumn, NgbTable, TableComponents, };
+import { NgbHeadRow, NgbHeadRowDef, aliasHeadRow } from './head-row';
+import { aliasSort, aliasSortHeader, NgbSort, NgbSortHeader } from './sort';
+import { NgbTable, aliasTable } from './table';
+export { NgbBodyRow, NgbBodyRowDef, NgbCell, NgbCellDef, NgbColumn, NgbHead, NgbHeadDef, NgbHeadRow, NgbHeadRowDef, NgbSort, NgbSortHeader, NgbTable, aliasBodyRow, aliasHeadRow, aliasSort, aliasSortHeader, aliasTable, };

package/table/sort.d.ts

@@ -0,0 +1,40 @@
+import { NgbColumn } from './column';
+import * as i0 from "@angular/core";
+export type SortDirection = 'asc' | 'desc' | '';
+export interface Sort {
+    active: string;
+    direction: SortDirection;
+}
+export type SortFn<T> = (data: T[], column: string, direction: SortDirection) => T[];
+export declare class NgbSort<T> {
+    private readonly table;
+    readonly sortFn: import("@angular/core").InputSignal<SortFn<T> | undefined>;
+    readonly disableClear: import("@angular/core").InputSignal<boolean>;
+    readonly sortColumn: import("@angular/core").ModelSignal<string>;
+    readonly sortDirection: import("@angular/core").ModelSignal<SortDirection>;
+    readonly sortMode: import("@angular/core").InputSignal<"client" | "server">;
+    readonly sortChange: import("@angular/core").OutputEmitterRef<Sort>;
+    constructor();
+    private defaultSortFn;
+    sort(column: string, direction?: SortDirection): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgbSort<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbSort<any>, "[ngbSort]", ["ngbSort"], { "sortFn": { "alias": "sortFn"; "required": false; "isSignal": true; }; "disableClear": { "alias": "disableClear"; "required": false; "isSignal": true; }; "sortColumn": { "alias": "sortColumn"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; "sortMode": { "alias": "sortMode"; "required": false; "isSignal": true; }; }, { "sortColumn": "sortColumnChange"; "sortDirection": "sortDirectionChange"; "sortChange": "sortChange"; }, never, never, true, never>;
+}
+export declare class NgbSortHeader<T extends NgbSort<U>, U = any> {
+    readonly sort: T;
+    readonly column: NgbColumn;
+    readonly disableClear: import("@angular/core").InputSignal<boolean>;
+    readonly sortDirection: import("@angular/core").Signal<SortDirection | undefined>;
+    setDirections(direction: SortDirection): void;
+    toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgbSortHeader<any, any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<NgbSortHeader<any, any>, "[ngbSortHeader]", never, { "disableClear": { "alias": "disableClear"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+export declare function aliasSort(directive: typeof NgbSort): {
+    provide: typeof NgbSort;
+    useExisting: typeof NgbSort;
+};
+export declare function aliasSortHeader(directive: typeof NgbSortHeader<any, any>): {
+    provide: typeof NgbSortHeader;
+    useExisting: typeof NgbSortHeader<any, any>;
+};

package/table/table.d.ts

@@ -1,7 +1,7 @@
-import { InjectionToken } from '@angular/core';
+import { InjectionToken, WritableSignal } from '@angular/core';
 import { NgbColumn } from './column';
 import * as i0 from "@angular/core";
-export declare const ROW_TOKEN: InjectionToken<any>;
+export declare const TABLE_ROW_DATA: InjectionToken<WritableSignal<any>>;
 export declare class NgbTable<T> {
     private readonly injector;
     private readonly differs;
@@ -10,17 +10,23 @@ export declare class NgbTable<T> {
     private readonly bodyRowDef;
     private readonly headRowDef;
     readonly columns: import("@angular/core").Signal<readonly NgbColumn[]>;
+    readonly plugins: WritableSignal<Set<(data: T[]) => T[]>>;
     readonly data: import("@angular/core").InputSignal<T[]>;
     readonly trackBy: import("@angular/core").InputSignal<(index: number, item: T) => any>;
+    private readonly pluggedData;
     private _dataDiffers?;
     private readonly _values;
-    private readonly valuesTracker;
     constructor();
     private _updateItemIndexContext;
     static ɵfac: i0.ɵɵFactoryDeclaration<NgbTable<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<NgbTable<any>, "table[ngbTable]", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; }, {}, ["bodyRowDef", "headRowDef", "columns"], never, true, never>;
 }
+export declare function aliasTable(table: typeof NgbTable): {
+    provide: typeof NgbTable;
+    useExisting: typeof NgbTable;
+};
 export declare class TableOutletContext<T> {
+    _data: WritableSignal<T>;
     $implicit: T;
     index?: number;
     count?: number;