refactor: convert module to const for TuiTable (#7807)

projects/addon-table/components/table/directives/cell.directive.ts

@@ -1,9 +1,10 @@
 import {Directive, inject, Input, TemplateRef} from '@angular/core';
 
 @Directive({
+    standalone: true,
     selector: 'ng-template[tuiCell]',
 })
-export class TuiCellDirective {
+export class TuiTableCell {
     @Input()
     public tuiCell = '';
 

projects/addon-table/components/table/directives/direction-order.directive.ts

@@ -4,9 +4,10 @@ import {map} from 'rxjs';
 import {TuiTableDirective} from './table.directive';
 
 @Directive({
+    standalone: true,
     selector: 'table[tuiTable][tuiDirectionOrder]',
 })
-export class TuiDirectionOrderDirective<T> {
+export class TuiTableDirectionOrder<T> {
     private readonly table = inject(TuiTableDirective<T>);
 
     @Output()

projects/addon-table/components/table/directives/head.directive.ts

@@ -1,9 +1,10 @@
 import {Directive, inject, Input, TemplateRef} from '@angular/core';
 
 @Directive({
+    standalone: true,
     selector: '[tuiHead]',
 })
-export class TuiHeadDirective<T extends Partial<Record<keyof T, any>>> {
+export class TuiTableHead<T extends Partial<Record<keyof T, any>>> {
     @Input({required: true})
     public tuiHead: string | keyof T = '';
 

projects/addon-table/components/table/directives/resized.directive.ts

@@ -9,9 +9,10 @@ import {
 import {distinctUntilChanged, map, switchMap, takeUntil} from 'rxjs';
 
 @Directive({
+    standalone: true,
     selector: '[tuiResized]',
 })
-export class TuiResizedDirective {
+export class TuiTableResized {
     private readonly doc = inject(DOCUMENT);
     private readonly el = tuiInjectElement();
 

projects/addon-table/components/table/directives/row.directive.ts

@@ -8,16 +8,17 @@ import type {TuiRowContext} from '@taiga-ui/addon-table/types';
  * TODO v4.0 delete it.
  */
 @Directive({
+    standalone: true,
     selector: 'ng-template[tuiRow]',
 })
-export class TuiRowDirective<T extends Partial<Record<keyof T, any>>> {
+export class TuiTableRow<T extends Partial<Record<keyof T, any>>> {
     @Input()
     public tuiRowOf: readonly T[] = [];
 
     public readonly template = inject(TemplateRef<TuiRowContext<T>>);
 
     public static ngTemplateContextGuard<T>(
-        _dir: TuiRowDirective<T>,
+        _dir: TuiTableRow<T>,
         _ctx: unknown,
     ): _ctx is TuiRowContext<T> {
         return true;

projects/addon-table/components/table/directives/sort-by.directive.ts

@@ -4,15 +4,16 @@ import type {TuiComparator} from '@taiga-ui/addon-table/types';
 import {EMPTY_QUERY} from '@taiga-ui/cdk';
 import {delay, filter, map} from 'rxjs';
 
-import {TuiSortableDirective} from './sortable.directive';
+import {TuiTableSortable} from './sortable.directive';
 import {TuiTableDirective} from './table.directive';
 
 @Directive({
+    standalone: true,
     selector: 'table[tuiTable][tuiSortBy]',
 })
-export class TuiSortByDirective<T extends Partial<Record<keyof T, any>>> {
-    @ContentChildren(TuiSortableDirective, {descendants: true})
-    private readonly sortables: QueryList<TuiSortableDirective<T>> = EMPTY_QUERY;
+export class TuiTableSortBy<T extends Partial<Record<keyof T, any>>> {
+    @ContentChildren(TuiTableSortable, {descendants: true})
+    private readonly sortables: QueryList<TuiTableSortable<T>> = EMPTY_QUERY;
 
     private readonly table = inject(TuiTableDirective<T>);
 

projects/addon-table/components/table/directives/sortable.directive.ts

@@ -2,21 +2,18 @@ import type {OnInit} from '@angular/core';
 import {Directive, forwardRef, inject} from '@angular/core';
 import type {TuiComparator} from '@taiga-ui/addon-table/types';
 
-import {TuiThComponent} from '../th/th.component';
-import {TuiSortByDirective} from './sort-by.directive';
+import {TuiTableTh} from '../th/th.component';
+import {TuiTableSortBy} from './sort-by.directive';
 import {TuiTableDirective} from './table.directive';
 
 @Directive({
+    standalone: true,
     selector: 'th[tuiTh][tuiSortable]',
 })
-export class TuiSortableDirective<T extends Partial<Record<keyof T, any>>>
-    implements OnInit
-{
+export class TuiTableSortable<T extends Partial<Record<keyof T, any>>> implements OnInit {
     private readonly table = inject(TuiTableDirective<T>);
-    private readonly th = inject(TuiThComponent<T>);
-    private readonly sortBy = inject<TuiSortByDirective<T>>(
-        forwardRef(() => TuiSortByDirective),
-    );
+    private readonly th = inject(TuiTableTh<T>);
+    private readonly sortBy = inject<TuiTableSortBy<T>>(forwardRef(() => TuiTableSortBy));
 
     public get key(): keyof T {
         return this.th.key;

projects/addon-table/components/table/directives/table.directive.ts

@@ -18,6 +18,7 @@ import {TUI_TABLE_OPTIONS} from '../table.options';
 import {TuiStuck} from './stuck.directive';
 
 @Directive({
+    standalone: true,
     selector: 'table[tuiTable]',
     providers: [
         {

projects/addon-table/components/table/directives/thead.directive.ts

@@ -4,6 +4,7 @@ import {INTERSECTION_ROOT_MARGIN} from '@ng-web-apis/intersection-observer';
 import {TuiStuck} from './stuck.directive';
 
 @Directive({
+    standalone: true,
     selector: 'thead[tuiThead]',
     providers: [
         {
@@ -13,4 +14,4 @@ import {TuiStuck} from './stuck.directive';
     ],
     hostDirectives: [TuiStuck],
 })
-export class TuiTheadDirective {}
+export class TuiTableThead {}

projects/addon-table/components/table/index.ts

@@ -10,7 +10,7 @@ export * from './directives/table.directive';
 export * from './directives/thead.directive';
 export * from './pipes/table-sort.pipe';
 export * from './providers/table.provider';
-export * from './table.module';
+export * from './table';
 export * from './table.options';
 export * from './tbody/tbody.component';
 export * from './td/td.component';

projects/addon-table/components/table/pipes/table-sort.pipe.ts

@@ -6,6 +6,7 @@ import {tuiPure} from '@taiga-ui/cdk';
 import {TuiTableDirective} from '../directives/table.directive';
 
 @Pipe({
+    standalone: true,
     name: 'tuiTableSort',
     pure: false,
 })

projects/addon-table/components/table/table.ts

@@ -0,0 +1,33 @@
+import {TuiTableCell} from './directives/cell.directive';
+import {TuiTableDirectionOrder} from './directives/direction-order.directive';
+import {TuiTableHead} from './directives/head.directive';
+import {TuiTableResized} from './directives/resized.directive';
+import {TuiTableRow} from './directives/row.directive';
+import {TuiTableSortBy} from './directives/sort-by.directive';
+import {TuiTableSortable} from './directives/sortable.directive';
+import {TuiTableDirective} from './directives/table.directive';
+import {TuiTableThead} from './directives/thead.directive';
+import {TuiTableSortPipe} from './pipes/table-sort.pipe';
+import {TuiTableTbody} from './tbody/tbody.component';
+import {TuiTableTd} from './td/td.component';
+import {TuiTableTh} from './th/th.component';
+import {TuiTableThGroup} from './th-group/th-group.component';
+import {TuiTableTr} from './tr/tr.component';
+
+export const TuiTable = [
+    TuiTableDirective,
+    TuiTableTbody,
+    TuiTableThGroup,
+    TuiTableTh,
+    TuiTableTd,
+    TuiTableTr,
+    TuiTableCell,
+    TuiTableHead,
+    TuiTableRow,
+    TuiTableSortBy,
+    TuiTableSortable,
+    TuiTableThead,
+    TuiTableResized,
+    TuiTableSortPipe,
+    TuiTableDirectionOrder,
+] as const;

projects/addon-table/components/table/tbody/tbody.component.ts

@@ -1,3 +1,4 @@
+import {NgForOf, NgIf, NgTemplateOutlet} from '@angular/common';
 import type {QueryList} from '@angular/core';
 import {
     ChangeDetectionStrategy,
@@ -10,36 +11,49 @@ import {
     Input,
     Output,
 } from '@angular/core';
-import {EMPTY_QUERY} from '@taiga-ui/cdk';
+import {EMPTY_QUERY, TuiMapperPipe} from '@taiga-ui/cdk';
+import {TuiIcon} from '@taiga-ui/core';
+import {TuiChevronDirective} from '@taiga-ui/kit';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
+import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
 
-import {TuiRowDirective} from '../directives/row.directive';
+import {TuiTableRow} from '../directives/row.directive';
 import {TuiTableDirective} from '../directives/table.directive';
 import {TuiTableSortPipe} from '../pipes/table-sort.pipe';
 import {TUI_TABLE_PROVIDER} from '../providers/table.provider';
 import {TUI_TABLE_OPTIONS} from '../table.options';
-import {TuiTrComponent} from '../tr/tr.component';
+import {TuiTableTr} from '../tr/tr.component';
 
 @Component({
+    standalone: true,
     selector: 'tbody[tuiTbody]',
+    imports: [
+        NgForOf,
+        NgTemplateOutlet,
+        NgIf,
+        TuiIcon,
+        PolymorpheusOutlet,
+        TuiChevronDirective,
+        TuiMapperPipe,
+    ],
     templateUrl: './tbody.template.html',
     styleUrls: ['./tbody.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: TUI_TABLE_PROVIDER,
 })
-export class TuiTbodyComponent<T extends Partial<Record<keyof T, any>>> {
+export class TuiTableTbody<T extends Partial<Record<keyof T, any>>> {
     private readonly pipe = inject(TuiTableSortPipe<T>);
     private readonly options = inject(TUI_TABLE_OPTIONS);
 
-    @ContentChild(forwardRef(() => TuiRowDirective))
-    protected readonly row?: TuiRowDirective<T>;
+    @ContentChild(forwardRef(() => TuiTableRow))
+    protected readonly row?: TuiTableRow<T>;
 
     protected readonly table = inject<TuiTableDirective<T>>(
         forwardRef(() => TuiTableDirective),
     );
 
-    @ContentChildren(forwardRef(() => TuiTrComponent))
-    public readonly rows: QueryList<TuiTrComponent<T>> = EMPTY_QUERY;
+    @ContentChildren(forwardRef(() => TuiTableTr))
+    public readonly rows: QueryList<TuiTableTr<T>> = EMPTY_QUERY;
 
     @Input()
     public data: readonly T[] = [];

projects/addon-table/components/table/td/td.component.ts

@@ -7,14 +7,15 @@ import {
 import {NgControl} from '@angular/forms';
 
 @Component({
+    standalone: true,
     selector: 'th[tuiTd], td[tuiTd]',
     template: `
         <ng-content></ng-content>
     `,
     styleUrls: ['./td.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TuiTdComponent {
+export class TuiTableTd {
     @HostBinding('class._editable')
     @ContentChild(NgControl)
     protected readonly control: unknown;

projects/addon-table/components/table/th-group/th-group.component.ts

@@ -1,3 +1,4 @@
+import {AsyncPipe, NgForOf, NgIf, NgTemplateOutlet} from '@angular/common';
 import type {AfterContentInit, QueryList} from '@angular/core';
 import {
     ChangeDetectionStrategy,
@@ -11,27 +12,29 @@ import {EMPTY_QUERY} from '@taiga-ui/cdk';
 import type {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs';
 
-import {TuiHeadDirective} from '../directives/head.directive';
+import {TuiTableHead} from '../directives/head.directive';
 import {TuiTableDirective} from '../directives/table.directive';
 import {TUI_TABLE_PROVIDER} from '../providers/table.provider';
-import {TuiThComponent} from '../th/th.component';
+import {TuiTableTh} from '../th/th.component';
 
 @Component({
+    standalone: true,
     selector: 'tr[tuiThGroup]',
+    imports: [NgIf, TuiTableTh, NgTemplateOutlet, NgForOf, AsyncPipe],
     templateUrl: './th-group.template.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [TUI_TABLE_PROVIDER],
 })
-export class TuiThGroupComponent<T extends Partial<Record<keyof T, any>>>
+export class TuiTableThGroup<T extends Partial<Record<keyof T, any>>>
     implements AfterContentInit
 {
-    @ContentChild(forwardRef(() => TuiThComponent))
-    protected readonly th!: TuiThComponent<T>;
+    @ContentChild(forwardRef(() => TuiTableTh))
+    protected readonly th!: TuiTableTh<T>;
 
-    @ContentChildren(forwardRef(() => TuiHeadDirective))
-    protected readonly heads: QueryList<TuiHeadDirective<T>> = EMPTY_QUERY;
+    @ContentChildren(forwardRef(() => TuiTableHead))
+    protected readonly heads: QueryList<TuiTableHead<T>> = EMPTY_QUERY;
 
-    protected heads$: Observable<Record<any, TuiHeadDirective<T>>> | null = null;
+    protected heads$: Observable<Record<any, TuiTableHead<T>>> | null = null;
 
     protected readonly table = inject<TuiTableDirective<T>>(
         forwardRef(() => TuiTableDirective),
@@ -43,7 +46,7 @@ export class TuiThGroupComponent<T extends Partial<Record<keyof T, any>>>
             map(() =>
                 this.heads.reduce(
                     (record, item) => ({...record, [item.tuiHead]: item}),
-                    {} as Record<keyof T, TuiHeadDirective<T>>,
+                    {} as Record<keyof T, TuiTableHead<T>>,
                 ),
             ),
         );