@taiga-ui/addon-table
Version:
A library to display tabled data with filters, search, group actions, etc.
40 lines • 12.7 kB
JavaScript
import { AsyncPipe, NgForOf, NgIf, NgTemplateOutlet } from '@angular/common';
import { ChangeDetectionStrategy, Component, ContentChildren, forwardRef, inject, } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { WaResizeObserverService } from '@ng-web-apis/resize-observer';
import { EMPTY_QUERY } from '@taiga-ui/cdk/constants';
import { tuiQueryListChanges, tuiZoneOptimized } from '@taiga-ui/cdk/observables';
import { distinctUntilChanged, map, ReplaySubject, switchMap } from 'rxjs';
import { TuiTableCell } from '../directives/cell.directive';
import { TuiTableDirective } from '../directives/table.directive';
import { TUI_TABLE_PROVIDER } from '../providers/table.provider';
import { TuiTableTbody } from '../tbody/tbody.component';
import { TuiTableTd } from '../td/td.component';
import * as i0 from "@angular/core";
class TuiTableTr {
constructor() {
this.cells = EMPTY_QUERY;
this.body = inject(forwardRef(() => TuiTableTbody));
this.contentReady$ = new ReplaySubject(1);
this.table = inject(forwardRef(() => TuiTableDirective));
this.height = toSignal(inject(WaResizeObserverService, { self: true }).pipe(map(([entry]) => entry?.contentRect.height ?? 0), distinctUntilChanged(), tuiZoneOptimized()), { initialValue: 0 });
this.cells$ = this.contentReady$.pipe(switchMap(() => tuiQueryListChanges(this.cells)), map((cells) => cells.reduce((record, item) => ({ ...record, [item.tuiCell]: item }), {})));
this.item$ = this.contentReady$.pipe(switchMap(() => tuiQueryListChanges(this.body.rows)), map((rows) => this.body.data[rows.findIndex((row) => row === this)]));
}
ngAfterContentInit() {
Promise.resolve().then(() => this.contentReady$.next(true));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableTr, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTableTr, isStandalone: true, selector: "tr[tuiTr]", host: { properties: { "style.--t-row-height.px": "height()" } }, providers: [TUI_TABLE_PROVIDER, WaResizeObserverService], queries: [{ propertyName: "cells", predicate: i0.forwardRef(function () { return TuiTableCell; }) }], ngImport: i0, template: "<ng-container *ngIf=\"cells$ | async as items; else dummy\">\n <ng-container\n *ngFor=\"let key of table.columns\"\n [ngTemplateOutlet]=\"(items[key] && items[key].template) || plain\"\n >\n <ng-template #plain>\n <td\n *ngIf=\"item$ | async as item\"\n tuiTd\n >\n {{ item[key] }}\n </td>\n </ng-template>\n </ng-container>\n</ng-container>\n<ng-template #dummy>\n <td></td>\n</ng-template>\n<ng-content />\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiTableTd, selector: "th[tuiTd], td[tuiTd]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiTableTr };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableTr, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tr[tuiTr]', imports: [AsyncPipe, NgForOf, NgIf, NgTemplateOutlet, TuiTableTd], changeDetection: ChangeDetectionStrategy.OnPush, providers: [TUI_TABLE_PROVIDER, WaResizeObserverService], host: {
'[style.--t-row-height.px]': 'height()',
}, template: "<ng-container *ngIf=\"cells$ | async as items; else dummy\">\n <ng-container\n *ngFor=\"let key of table.columns\"\n [ngTemplateOutlet]=\"(items[key] && items[key].template) || plain\"\n >\n <ng-template #plain>\n <td\n *ngIf=\"item$ | async as item\"\n tuiTd\n >\n {{ item[key] }}\n </td>\n </ng-template>\n </ng-container>\n</ng-container>\n<ng-template #dummy>\n <td></td>\n</ng-template>\n<ng-content />\n" }]
}], propDecorators: { cells: [{
type: ContentChildren,
args: [forwardRef(() => TuiTableCell)]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWRkb24tdGFibGUvY29tcG9uZW50cy90YWJsZS90ci90ci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hZGRvbi10YWJsZS9jb21wb25lbnRzL3RhYmxlL3RyL3RyLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFDM0UsT0FBTyxFQUVILHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsZUFBZSxFQUNmLFVBQVUsRUFDVixNQUFNLEdBRVQsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLDRCQUE0QixDQUFDO0FBQ3BELE9BQU8sRUFBQyx1QkFBdUIsRUFBQyxNQUFNLDhCQUE4QixDQUFDO0FBQ3JFLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSx5QkFBeUIsQ0FBQztBQUNwRCxPQUFPLEVBQUMsbUJBQW1CLEVBQUUsZ0JBQWdCLEVBQUMsTUFBTSwyQkFBMkIsQ0FBQztBQUNoRixPQUFPLEVBQUMsb0JBQW9CLEVBQUUsR0FBRyxFQUFFLGFBQWEsRUFBRSxTQUFTLEVBQUMsTUFBTSxNQUFNLENBQUM7QUFFekUsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLDhCQUE4QixDQUFDO0FBQzFELE9BQU8sRUFBQyxpQkFBaUIsRUFBQyxNQUFNLCtCQUErQixDQUFDO0FBQ2hFLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLDZCQUE2QixDQUFDO0FBQy9ELE9BQU8sRUFBQyxhQUFhLEVBQUMsTUFBTSwwQkFBMEIsQ0FBQztBQUN2RCxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sb0JBQW9CLENBQUM7O0FBRTlDLE1BV2EsVUFBVTtJQVh2QjtRQWVxQixVQUFLLEdBQTRCLFdBQVcsQ0FBQztRQUU3QyxTQUFJLEdBQUcsTUFBTSxDQUFtQixVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQztRQUVqRSxrQkFBYSxHQUFHLElBQUksYUFBYSxDQUFVLENBQUMsQ0FBQyxDQUFDO1FBRTVDLFVBQUssR0FBRyxNQUFNLENBQzdCLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQyxDQUN0QyxDQUFDO1FBRWlCLFdBQU0sR0FBRyxRQUFRLENBQ2hDLE1BQU0sQ0FBQyx1QkFBdUIsRUFBRSxFQUFDLElBQUksRUFBRSxJQUFJLEVBQUMsQ0FBQyxDQUFDLElBQUksQ0FDOUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsRUFBRSxFQUFFLENBQUMsS0FBSyxFQUFFLFdBQVcsQ0FBQyxNQUFNLElBQUksQ0FBQyxDQUFDLEVBQ2hELG9CQUFvQixFQUFFLEVBQ3RCLGdCQUFnQixFQUFFLENBQ3JCLEVBQ0QsRUFBQyxZQUFZLEVBQUUsQ0FBQyxFQUFDLENBQ3BCLENBQUM7UUFFaUIsV0FBTSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUMvQyxTQUFTLENBQUMsR0FBRyxFQUFFLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQ2hELEdBQUcsQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFLENBQ1YsS0FBSyxDQUFDLE1BQU0sQ0FDUixDQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUUsRUFBRSxDQUFDLENBQUMsRUFBQyxHQUFHLE1BQU0sRUFBRSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsRUFBRSxJQUFJLEVBQUMsQ0FBQyxFQUNyRCxFQUE0QyxDQUMvQyxDQUNKLENBQ0osQ0FBQztRQUVpQixVQUFLLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQzlDLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLEVBQ3BELEdBQUcsQ0FDQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQ0wsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFFLENBQUMsR0FBRyxLQUFLLElBQUksQ0FBQyxDQUduRCxDQUNSLENBQ0osQ0FBQztLQUtMO0lBSFUsa0JBQWtCO1FBQ3JCLE9BQU8sQ0FBQyxPQUFPLEVBQUUsQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQztJQUNoRSxDQUFDOytHQTlDUSxVQUFVO21HQUFWLFVBQVUseUhBTFIsQ0FBQyxrQkFBa0IsRUFBRSx1QkFBdUIsQ0FBQyxtRkFRdEIsWUFBWSxpQ0NwQ2xELGloQkFtQkEsdUNETWMsU0FBUyw4Q0FBRSxPQUFPLG1IQUFFLElBQUksNkZBQUUsZ0JBQWdCLG9KQUFFLFVBQVU7O1NBUXZELFVBQVU7NEZBQVYsVUFBVTtrQkFYdEIsU0FBUztpQ0FDTSxJQUFJLFlBQ04sV0FBVyxXQUNaLENBQUMsU0FBUyxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsZ0JBQWdCLEVBQUUsVUFBVSxDQUFDLG1CQUVoRCx1QkFBdUIsQ0FBQyxNQUFNLGFBQ3BDLENBQUMsa0JBQWtCLEVBQUUsdUJBQXVCLENBQUMsUUFDbEQ7d0JBQ0YsMkJBQTJCLEVBQUUsVUFBVTtxQkFDMUM7OEJBTWdCLEtBQUs7c0JBRHJCLGVBQWU7dUJBQUMsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLFlBQVksQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7QXN5bmNQaXBlLCBOZ0Zvck9mLCBOZ0lmLCBOZ1RlbXBsYXRlT3V0bGV0fSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgICB0eXBlIEFmdGVyQ29udGVudEluaXQsXG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIENvbnRlbnRDaGlsZHJlbixcbiAgICBmb3J3YXJkUmVmLFxuICAgIGluamVjdCxcbiAgICB0eXBlIFF1ZXJ5TGlzdCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge3RvU2lnbmFsfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQge1dhUmVzaXplT2JzZXJ2ZXJTZXJ2aWNlfSBmcm9tICdAbmctd2ViLWFwaXMvcmVzaXplLW9ic2VydmVyJztcbmltcG9ydCB7RU1QVFlfUVVFUll9IGZyb20gJ0B0YWlnYS11aS9jZGsvY29uc3RhbnRzJztcbmltcG9ydCB7dHVpUXVlcnlMaXN0Q2hhbmdlcywgdHVpWm9uZU9wdGltaXplZH0gZnJvbSAnQHRhaWdhLXVpL2Nkay9vYnNlcnZhYmxlcyc7XG5pbXBvcnQge2Rpc3RpbmN0VW50aWxDaGFuZ2VkLCBtYXAsIFJlcGxheVN1YmplY3QsIHN3aXRjaE1hcH0gZnJvbSAncnhqcyc7XG5cbmltcG9ydCB7VHVpVGFibGVDZWxsfSBmcm9tICcuLi9kaXJlY3RpdmVzL2NlbGwuZGlyZWN0aXZlJztcbmltcG9ydCB7VHVpVGFibGVEaXJlY3RpdmV9IGZyb20gJy4uL2RpcmVjdGl2ZXMvdGFibGUuZGlyZWN0aXZlJztcbmltcG9ydCB7VFVJX1RBQkxFX1BST1ZJREVSfSBmcm9tICcuLi9wcm92aWRlcnMvdGFibGUucHJvdmlkZXInO1xuaW1wb3J0IHtUdWlUYWJsZVRib2R5fSBmcm9tICcuLi90Ym9keS90Ym9keS5jb21wb25lbnQnO1xuaW1wb3J0IHtUdWlUYWJsZVRkfSBmcm9tICcuLi90ZC90ZC5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAndHJbdHVpVHJdJyxcbiAgICBpbXBvcnRzOiBbQXN5bmNQaXBlLCBOZ0Zvck9mLCBOZ0lmLCBOZ1RlbXBsYXRlT3V0bGV0LCBUdWlUYWJsZVRkXSxcbiAgICB0ZW1wbGF0ZVVybDogJy4vdHIudGVtcGxhdGUuaHRtbCcsXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgcHJvdmlkZXJzOiBbVFVJX1RBQkxFX1BST1ZJREVSLCBXYVJlc2l6ZU9ic2VydmVyU2VydmljZV0sXG4gICAgaG9zdDoge1xuICAgICAgICAnW3N0eWxlLi0tdC1yb3ctaGVpZ2h0LnB4XSc6ICdoZWlnaHQoKScsXG4gICAgfSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpVGFibGVUcjxcbiAgICBUIGV4dGVuZHMgUGFydGlhbDxSZWNvcmQ8a2V5b2YgVCwgdW5rbm93bj4+LFxuPiBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQge1xuICAgIEBDb250ZW50Q2hpbGRyZW4oZm9yd2FyZFJlZigoKSA9PiBUdWlUYWJsZUNlbGwpKVxuICAgIHByaXZhdGUgcmVhZG9ubHkgY2VsbHM6IFF1ZXJ5TGlzdDxUdWlUYWJsZUNlbGw+ID0gRU1QVFlfUVVFUlk7XG5cbiAgICBwcml2YXRlIHJlYWRvbmx5IGJvZHkgPSBpbmplY3Q8VHVpVGFibGVUYm9keTxUPj4oZm9yd2FyZFJlZigoKSA9PiBUdWlUYWJsZVRib2R5KSk7XG5cbiAgICBwcml2YXRlIHJlYWRvbmx5IGNvbnRlbnRSZWFkeSQgPSBuZXcgUmVwbGF5U3ViamVjdDxib29sZWFuPigxKTtcblxuICAgIHByb3RlY3RlZCByZWFkb25seSB0YWJsZSA9IGluamVjdDxUdWlUYWJsZURpcmVjdGl2ZTxUPj4oXG4gICAgICAgIGZvcndhcmRSZWYoKCkgPT4gVHVpVGFibGVEaXJlY3RpdmUpLFxuICAgICk7XG5cbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgaGVpZ2h0ID0gdG9TaWduYWwoXG4gICAgICAgIGluamVjdChXYVJlc2l6ZU9ic2VydmVyU2VydmljZSwge3NlbGY6IHRydWV9KS5waXBlKFxuICAgICAgICAgICAgbWFwKChbZW50cnldKSA9PiBlbnRyeT8uY29udGVudFJlY3QuaGVpZ2h0ID8/IDApLFxuICAgICAgICAgICAgZGlzdGluY3RVbnRpbENoYW5nZWQoKSxcbiAgICAgICAgICAgIHR1aVpvbmVPcHRpbWl6ZWQoKSxcbiAgICAgICAgKSxcbiAgICAgICAge2luaXRpYWxWYWx1ZTogMH0sXG4gICAgKTtcblxuICAgIHByb3RlY3RlZCByZWFkb25seSBjZWxscyQgPSB0aGlzLmNvbnRlbnRSZWFkeSQucGlwZShcbiAgICAgICAgc3dpdGNoTWFwKCgpID0+IHR1aVF1ZXJ5TGlzdENoYW5nZXModGhpcy5jZWxscykpLFxuICAgICAgICBtYXAoKGNlbGxzKSA9PlxuICAgICAgICAgICAgY2VsbHMucmVkdWNlKFxuICAgICAgICAgICAgICAgIChyZWNvcmQsIGl0ZW0pID0+ICh7Li4ucmVjb3JkLCBbaXRlbS50dWlDZWxsXTogaXRlbX0pLFxuICAgICAgICAgICAgICAgIHt9IGFzIFJlY29yZDxzdHJpbmcgfCBrZXlvZiBULCBUdWlUYWJsZUNlbGw+LFxuICAgICAgICAgICAgKSxcbiAgICAgICAgKSxcbiAgICApO1xuXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGl0ZW0kID0gdGhpcy5jb250ZW50UmVhZHkkLnBpcGUoXG4gICAgICAgIHN3aXRjaE1hcCgoKSA9PiB0dWlRdWVyeUxpc3RDaGFuZ2VzKHRoaXMuYm9keS5yb3dzKSksXG4gICAgICAgIG1hcChcbiAgICAgICAgICAgIChyb3dzKSA9PlxuICAgICAgICAgICAgICAgIHRoaXMuYm9keS5kYXRhW3Jvd3MuZmluZEluZGV4KChyb3cpID0+IHJvdyA9PT0gdGhpcyldIGFzIFJlY29yZDxcbiAgICAgICAgICAgICAgICAgICAgc3RyaW5nIHwga2V5b2YgVCxcbiAgICAgICAgICAgICAgICAgICAgdW5rbm93blxuICAgICAgICAgICAgICAgID4sXG4gICAgICAgICksXG4gICAgKTtcblxuICAgIHB1YmxpYyBuZ0FmdGVyQ29udGVudEluaXQoKTogdm9pZCB7XG4gICAgICAgIFByb21pc2UucmVzb2x2ZSgpLnRoZW4oKCkgPT4gdGhpcy5jb250ZW50UmVhZHkkLm5leHQodHJ1ZSkpO1xuICAgIH1cbn1cbiIsIjxuZy1jb250YWluZXIgKm5nSWY9XCJjZWxscyQgfCBhc3luYyBhcyBpdGVtczsgZWxzZSBkdW1teVwiPlxuICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgKm5nRm9yPVwibGV0IGtleSBvZiB0YWJsZS5jb2x1bW5zXCJcbiAgICAgICAgW25nVGVtcGxhdGVPdXRsZXRdPVwiKGl0ZW1zW2tleV0gJiYgaXRlbXNba2V5XS50ZW1wbGF0ZSkgfHwgcGxhaW5cIlxuICAgID5cbiAgICAgICAgPG5nLXRlbXBsYXRlICNwbGFpbj5cbiAgICAgICAgICAgIDx0ZFxuICAgICAgICAgICAgICAgICpuZ0lmPVwiaXRlbSQgfCBhc3luYyBhcyBpdGVtXCJcbiAgICAgICAgICAgICAgICB0dWlUZFxuICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIHt7IGl0ZW1ba2V5XSB9fVxuICAgICAgICAgICAgPC90ZD5cbiAgICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8L25nLWNvbnRhaW5lcj5cbjwvbmctY29udGFpbmVyPlxuPG5nLXRlbXBsYXRlICNkdW1teT5cbiAgICA8dGQ+PC90ZD5cbjwvbmctdGVtcGxhdGU+XG48bmctY29udGVudCAvPlxuIl19