diff --git a/projects/addon-table/components/table/directives/cell.directive.ts b/projects/addon-table/components/table/directives/cell.directive.ts index 5aaab1112108..f8edfe30be4f 100644 --- a/projects/addon-table/components/table/directives/cell.directive.ts +++ b/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 = ''; diff --git a/projects/addon-table/components/table/directives/direction-order.directive.ts b/projects/addon-table/components/table/directives/direction-order.directive.ts index 0507b63d3b05..e35a2ea6f980 100644 --- a/projects/addon-table/components/table/directives/direction-order.directive.ts +++ b/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 { +export class TuiTableDirectionOrder { private readonly table = inject(TuiTableDirective); @Output() diff --git a/projects/addon-table/components/table/directives/head.directive.ts b/projects/addon-table/components/table/directives/head.directive.ts index 12fca616501d..099e5e166b5f 100644 --- a/projects/addon-table/components/table/directives/head.directive.ts +++ b/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>> { +export class TuiTableHead>> { @Input({required: true}) public tuiHead: string | keyof T = ''; diff --git a/projects/addon-table/components/table/directives/resized.directive.ts b/projects/addon-table/components/table/directives/resized.directive.ts index 3174a2b7cd82..b6c595aec498 100644 --- a/projects/addon-table/components/table/directives/resized.directive.ts +++ b/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(); diff --git a/projects/addon-table/components/table/directives/row.directive.ts b/projects/addon-table/components/table/directives/row.directive.ts index 067336fa3aa9..443187fb37d9 100644 --- a/projects/addon-table/components/table/directives/row.directive.ts +++ b/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>> { +export class TuiTableRow>> { @Input() public tuiRowOf: readonly T[] = []; public readonly template = inject(TemplateRef>); public static ngTemplateContextGuard( - _dir: TuiRowDirective, + _dir: TuiTableRow, _ctx: unknown, ): _ctx is TuiRowContext { return true; diff --git a/projects/addon-table/components/table/directives/sort-by.directive.ts b/projects/addon-table/components/table/directives/sort-by.directive.ts index 6df94efd0795..372385c5ad43 100644 --- a/projects/addon-table/components/table/directives/sort-by.directive.ts +++ b/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>> { - @ContentChildren(TuiSortableDirective, {descendants: true}) - private readonly sortables: QueryList> = EMPTY_QUERY; +export class TuiTableSortBy>> { + @ContentChildren(TuiTableSortable, {descendants: true}) + private readonly sortables: QueryList> = EMPTY_QUERY; private readonly table = inject(TuiTableDirective); diff --git a/projects/addon-table/components/table/directives/sortable.directive.ts b/projects/addon-table/components/table/directives/sortable.directive.ts index 017851252c6f..b413e4164196 100644 --- a/projects/addon-table/components/table/directives/sortable.directive.ts +++ b/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>> - implements OnInit -{ +export class TuiTableSortable>> implements OnInit { private readonly table = inject(TuiTableDirective); - private readonly th = inject(TuiThComponent); - private readonly sortBy = inject>( - forwardRef(() => TuiSortByDirective), - ); + private readonly th = inject(TuiTableTh); + private readonly sortBy = inject>(forwardRef(() => TuiTableSortBy)); public get key(): keyof T { return this.th.key; diff --git a/projects/addon-table/components/table/directives/table.directive.ts b/projects/addon-table/components/table/directives/table.directive.ts index dbd4c284dd52..75424e673a7d 100644 --- a/projects/addon-table/components/table/directives/table.directive.ts +++ b/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: [ { diff --git a/projects/addon-table/components/table/directives/thead.directive.ts b/projects/addon-table/components/table/directives/thead.directive.ts index 3d908fd2d287..867eb8e428c0 100644 --- a/projects/addon-table/components/table/directives/thead.directive.ts +++ b/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 {} diff --git a/projects/addon-table/components/table/index.ts b/projects/addon-table/components/table/index.ts index 3c0468b0a623..9dc9f29b9643 100644 --- a/projects/addon-table/components/table/index.ts +++ b/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'; diff --git a/projects/addon-table/components/table/pipes/table-sort.pipe.ts b/projects/addon-table/components/table/pipes/table-sort.pipe.ts index 58baccb38410..fbab197a5fb7 100644 --- a/projects/addon-table/components/table/pipes/table-sort.pipe.ts +++ b/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, }) diff --git a/projects/addon-table/components/table/table.module.ts b/projects/addon-table/components/table/table.module.ts deleted file mode 100644 index 0263a3ff2820..000000000000 --- a/projects/addon-table/components/table/table.module.ts +++ /dev/null @@ -1,67 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {TuiMapperPipe} from '@taiga-ui/cdk'; -import {TuiIcon} from '@taiga-ui/core'; -import {TuiChevronDirective} from '@taiga-ui/kit'; -import {PolymorpheusOutlet, PolymorpheusTemplate} from '@taiga-ui/polymorpheus'; - -import {TuiCellDirective} from './directives/cell.directive'; -import {TuiDirectionOrderDirective} from './directives/direction-order.directive'; -import {TuiHeadDirective} from './directives/head.directive'; -import {TuiResizedDirective} from './directives/resized.directive'; -import {TuiRowDirective} from './directives/row.directive'; -import {TuiSortByDirective} from './directives/sort-by.directive'; -import {TuiSortableDirective} from './directives/sortable.directive'; -import {TuiTableDirective} from './directives/table.directive'; -import {TuiTheadDirective} from './directives/thead.directive'; -import {TuiTableSortPipe} from './pipes/table-sort.pipe'; -import {TuiTbodyComponent} from './tbody/tbody.component'; -import {TuiTdComponent} from './td/td.component'; -import {TuiThComponent} from './th/th.component'; -import {TuiThGroupComponent} from './th-group/th-group.component'; -import {TuiTrComponent} from './tr/tr.component'; - -@NgModule({ - imports: [ - CommonModule, - TuiIcon, - TuiMapperPipe, - TuiChevronDirective, - PolymorpheusOutlet, - PolymorpheusTemplate, - ], - declarations: [ - TuiTableDirective, - TuiTbodyComponent, - TuiThGroupComponent, - TuiThComponent, - TuiTdComponent, - TuiTrComponent, - TuiCellDirective, - TuiHeadDirective, - TuiRowDirective, - TuiSortByDirective, - TuiSortableDirective, - TuiTheadDirective, - TuiResizedDirective, - TuiTableSortPipe, - TuiDirectionOrderDirective, - ], - exports: [ - TuiTableDirective, - TuiTbodyComponent, - TuiThGroupComponent, - TuiThComponent, - TuiTdComponent, - TuiTrComponent, - TuiCellDirective, - TuiHeadDirective, - TuiRowDirective, - TuiSortByDirective, - TuiSortableDirective, - TuiTheadDirective, - TuiTableSortPipe, - TuiDirectionOrderDirective, - ], -}) -export class TuiTable {} diff --git a/projects/addon-table/components/table/table.ts b/projects/addon-table/components/table/table.ts new file mode 100644 index 000000000000..8808ffc2b06a --- /dev/null +++ b/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; diff --git a/projects/addon-table/components/table/tbody/tbody.component.ts b/projects/addon-table/components/table/tbody/tbody.component.ts index 0f3b57052665..deeff35445d7 100644 --- a/projects/addon-table/components/table/tbody/tbody.component.ts +++ b/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>> { +export class TuiTableTbody>> { private readonly pipe = inject(TuiTableSortPipe); private readonly options = inject(TUI_TABLE_OPTIONS); - @ContentChild(forwardRef(() => TuiRowDirective)) - protected readonly row?: TuiRowDirective; + @ContentChild(forwardRef(() => TuiTableRow)) + protected readonly row?: TuiTableRow; protected readonly table = inject>( forwardRef(() => TuiTableDirective), ); - @ContentChildren(forwardRef(() => TuiTrComponent)) - public readonly rows: QueryList> = EMPTY_QUERY; + @ContentChildren(forwardRef(() => TuiTableTr)) + public readonly rows: QueryList> = EMPTY_QUERY; @Input() public data: readonly T[] = []; diff --git a/projects/addon-table/components/table/td/td.component.ts b/projects/addon-table/components/table/td/td.component.ts index 2a8a1b1a5ee8..08b9f8634480 100644 --- a/projects/addon-table/components/table/td/td.component.ts +++ b/projects/addon-table/components/table/td/td.component.ts @@ -7,6 +7,7 @@ import { import {NgControl} from '@angular/forms'; @Component({ + standalone: true, selector: 'th[tuiTd], td[tuiTd]', template: ` @@ -14,7 +15,7 @@ import {NgControl} from '@angular/forms'; styleUrls: ['./td.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class TuiTdComponent { +export class TuiTableTd { @HostBinding('class._editable') @ContentChild(NgControl) protected readonly control: unknown; diff --git a/projects/addon-table/components/table/th-group/th-group.component.ts b/projects/addon-table/components/table/th-group/th-group.component.ts index 5d5f49d5e52c..1a10c871cf4e 100644 --- a/projects/addon-table/components/table/th-group/th-group.component.ts +++ b/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>> +export class TuiTableThGroup>> implements AfterContentInit { - @ContentChild(forwardRef(() => TuiThComponent)) - protected readonly th!: TuiThComponent; + @ContentChild(forwardRef(() => TuiTableTh)) + protected readonly th!: TuiTableTh; - @ContentChildren(forwardRef(() => TuiHeadDirective)) - protected readonly heads: QueryList> = EMPTY_QUERY; + @ContentChildren(forwardRef(() => TuiTableHead)) + protected readonly heads: QueryList> = EMPTY_QUERY; - protected heads$: Observable>> | null = null; + protected heads$: Observable>> | null = null; protected readonly table = inject>( forwardRef(() => TuiTableDirective), @@ -43,7 +46,7 @@ export class TuiThGroupComponent>> map(() => this.heads.reduce( (record, item) => ({...record, [item.tuiHead]: item}), - {} as Record>, + {} as Record>, ), ), ); diff --git a/projects/addon-table/components/table/th/th.component.ts b/projects/addon-table/components/table/th/th.component.ts index 03bbc275427c..e89e54720e7a 100644 --- a/projects/addon-table/components/table/th/th.component.ts +++ b/projects/addon-table/components/table/th/th.component.ts @@ -1,4 +1,5 @@ /// +import {AsyncPipe, NgIf, NgTemplateOutlet} from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -9,21 +10,25 @@ import { } from '@angular/core'; import type {TuiComparator} from '@taiga-ui/addon-table/types'; import {tuiDefaultSort} from '@taiga-ui/cdk'; +import {TuiIcon} from '@taiga-ui/core'; -import {TuiHeadDirective} from '../directives/head.directive'; +import {TuiTableHead} from '../directives/head.directive'; +import {TuiTableResized} from '../directives/resized.directive'; import {TuiTableDirective} from '../directives/table.directive'; import {TUI_TABLE_OPTIONS} from '../table.options'; @Component({ + standalone: true, selector: 'th[tuiTh]', + imports: [NgIf, NgTemplateOutlet, TuiIcon, AsyncPipe, TuiTableResized], templateUrl: './th.template.html', styleUrls: ['./th.style.less'], changeDetection: ChangeDetectionStrategy.OnPush, }) -export class TuiThComponent>> { +export class TuiTableTh>> { private readonly options = inject(TUI_TABLE_OPTIONS); - private readonly head = inject>(TuiHeadDirective, { + private readonly head = inject>(TuiTableHead, { optional: true, }); diff --git a/projects/addon-table/components/table/th/th.template.html b/projects/addon-table/components/table/th/th.template.html index f27eed8f01ce..9eb6eb5d9cba 100644 --- a/projects/addon-table/components/table/th/th.template.html +++ b/projects/addon-table/components/table/th/th.template.html @@ -6,7 +6,7 @@ (click)="updateSorterAndDirection()" > - {{ table.change$ | async }} + {{ table && table.change$ | async }} >> +export class TuiTableTr>> implements AfterContentInit { - @ContentChildren(forwardRef(() => TuiCellDirective)) - private readonly cells: QueryList = EMPTY_QUERY; + @ContentChildren(forwardRef(() => TuiTableCell)) + private readonly cells: QueryList = EMPTY_QUERY; - private readonly body = inject>( - forwardRef(() => TuiTbodyComponent), - ); + private readonly body = inject>(forwardRef(() => TuiTableTbody)); private readonly contentReady$ = new ReplaySubject(1); @@ -41,7 +43,7 @@ export class TuiTrComponent>> map(cells => cells.reduce( (record, item) => ({...record, [item.tuiCell]: item}), - {} as Record, + {} as Record, ), ), ); diff --git a/projects/addon-table/directives/table-filters/table-filter.directive.ts b/projects/addon-table/directives/table-filters/table-filter.directive.ts index b24898b53938..23097b96113d 100644 --- a/projects/addon-table/directives/table-filters/table-filter.directive.ts +++ b/projects/addon-table/directives/table-filters/table-filter.directive.ts @@ -1,7 +1,7 @@ import type {OnDestroy, OnInit} from '@angular/core'; import {Directive, inject, Input} from '@angular/core'; import {NgControl} from '@angular/forms'; -import {TuiHeadDirective} from '@taiga-ui/addon-table/components'; +import {TuiTableHead} from '@taiga-ui/addon-table/components'; import type {TuiValuesOf} from '@taiga-ui/cdk'; import {defer, distinctUntilChanged, EMPTY, merge} from 'rxjs'; @@ -14,7 +14,7 @@ import {TuiTableFiltersDirective} from './table-filters.directive'; selector: '[tuiTableFilter]', }) export class TuiTableFilterDirective implements OnInit, OnDestroy, TuiTableFilter { - private readonly head = inject(TuiHeadDirective, {optional: true}); + private readonly head = inject(TuiTableHead, {optional: true}); private readonly delegate = inject(AbstractTuiTableFilter, any>); private readonly control = inject(NgControl); protected readonly filters = inject(TuiTableFiltersDirective);