@taiga-ui/addon-table
Version:
A library to display tabled data with filters, search, group actions, etc.
41 lines • 12.6 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 { ResizeObserverService } 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(ResizeObserverService, { 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)]));
}
async ngAfterContentInit() {
await Promise.resolve();
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, ResizeObserverService], 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><td></td></ng-template>\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, ResizeObserverService], 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><td></td></ng-template>\n" }]
}], propDecorators: { cells: [{
type: ContentChildren,
args: [forwardRef(() => TuiTableCell)]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWRkb24tdGFibGUvY29tcG9uZW50cy90YWJsZS90ci90ci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hZGRvbi10YWJsZS9jb21wb25lbnRzL3RhYmxlL3RyL3RyLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLGdCQUFnQixFQUFDLE1BQU0saUJBQWlCLENBQUM7QUFFM0UsT0FBTyxFQUNILHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsZUFBZSxFQUNmLFVBQVUsRUFDVixNQUFNLEdBQ1QsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFFBQVEsRUFBQyxNQUFNLDRCQUE0QixDQUFDO0FBQ3BELE9BQU8sRUFBQyxxQkFBcUIsRUFBQyxNQUFNLDhCQUE4QixDQUFDO0FBQ25FLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSx5QkFBeUIsQ0FBQztBQUNwRCxPQUFPLEVBQUMsbUJBQW1CLEVBQUUsZ0JBQWdCLEVBQUMsTUFBTSwyQkFBMkIsQ0FBQztBQUNoRixPQUFPLEVBQUMsb0JBQW9CLEVBQUUsR0FBRyxFQUFFLGFBQWEsRUFBRSxTQUFTLEVBQUMsTUFBTSxNQUFNLENBQUM7QUFFekUsT0FBTyxFQUFDLFlBQVksRUFBQyxNQUFNLDhCQUE4QixDQUFDO0FBQzFELE9BQU8sRUFBQyxpQkFBaUIsRUFBQyxNQUFNLCtCQUErQixDQUFDO0FBQ2hFLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLDZCQUE2QixDQUFDO0FBQy9ELE9BQU8sRUFBQyxhQUFhLEVBQUMsTUFBTSwwQkFBMEIsQ0FBQztBQUN2RCxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sb0JBQW9CLENBQUM7O0FBRTlDLE1BV2EsVUFBVTtJQVh2QjtRQWVxQixVQUFLLEdBQTRCLFdBQVcsQ0FBQztRQUU3QyxTQUFJLEdBQUcsTUFBTSxDQUFtQixVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQztRQUVqRSxrQkFBYSxHQUFHLElBQUksYUFBYSxDQUFVLENBQUMsQ0FBQyxDQUFDO1FBRTVDLFVBQUssR0FBRyxNQUFNLENBQzdCLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxpQkFBaUIsQ0FBQyxDQUN0QyxDQUFDO1FBRWlCLFdBQU0sR0FBRyxRQUFRLENBQ2hDLE1BQU0sQ0FBQyxxQkFBcUIsRUFBRSxFQUFDLElBQUksRUFBRSxJQUFJLEVBQUMsQ0FBQyxDQUFDLElBQUksQ0FDNUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsRUFBRSxFQUFFLENBQUMsS0FBSyxFQUFFLFdBQVcsQ0FBQyxNQUFNLElBQUksQ0FBQyxDQUFDLEVBQ2hELG9CQUFvQixFQUFFLEVBQ3RCLGdCQUFnQixFQUFFLENBQ3JCLEVBQ0QsRUFBQyxZQUFZLEVBQUUsQ0FBQyxFQUFDLENBQ3BCLENBQUM7UUFFaUIsV0FBTSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUMvQyxTQUFTLENBQUMsR0FBRyxFQUFFLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDLEVBQ2hELEdBQUcsQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFLENBQ1YsS0FBSyxDQUFDLE1BQU0sQ0FDUixDQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUUsRUFBRSxDQUFDLENBQUMsRUFBQyxHQUFHLE1BQU0sRUFBRSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsRUFBRSxJQUFJLEVBQUMsQ0FBQyxFQUNyRCxFQUE0QyxDQUMvQyxDQUNKLENBQ0osQ0FBQztRQUVpQixVQUFLLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQzlDLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxtQkFBbUIsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLEVBQ3BELEdBQUcsQ0FDQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQ0wsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFFLENBQUMsR0FBRyxLQUFLLElBQUksQ0FBQyxDQUduRCxDQUNSLENBQ0osQ0FBQztLQU1MO0lBSlUsS0FBSyxDQUFDLGtCQUFrQjtRQUMzQixNQUFNLE9BQU8sQ0FBQyxPQUFPLEVBQUUsQ0FBQztRQUN4QixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUNsQyxDQUFDOytHQS9DUSxVQUFVO21HQUFWLFVBQVUseUhBTFIsQ0FBQyxrQkFBa0IsRUFBRSxxQkFBcUIsQ0FBQyxtRkFRcEIsWUFBWSxpQ0NuQ2xELHlmQWdCQSx1Q0RRYyxTQUFTLDhDQUFFLE9BQU8sbUhBQUUsSUFBSSw2RkFBRSxnQkFBZ0Isb0pBQUUsVUFBVTs7U0FRdkQsVUFBVTs0RkFBVixVQUFVO2tCQVh0QixTQUFTO2lDQUNNLElBQUksWUFDTixXQUFXLFdBQ1osQ0FBQyxTQUFTLEVBQUUsT0FBTyxFQUFFLElBQUksRUFBRSxnQkFBZ0IsRUFBRSxVQUFVLENBQUMsbUJBRWhELHVCQUF1QixDQUFDLE1BQU0sYUFDcEMsQ0FBQyxrQkFBa0IsRUFBRSxxQkFBcUIsQ0FBQyxRQUNoRDt3QkFDRiwyQkFBMkIsRUFBRSxVQUFVO3FCQUMxQzs4QkFNZ0IsS0FBSztzQkFEckIsZUFBZTt1QkFBQyxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsWUFBWSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtBc3luY1BpcGUsIE5nRm9yT2YsIE5nSWYsIE5nVGVtcGxhdGVPdXRsZXR9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgdHlwZSB7QWZ0ZXJDb250ZW50SW5pdCwgUXVlcnlMaXN0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIENvbnRlbnRDaGlsZHJlbixcbiAgICBmb3J3YXJkUmVmLFxuICAgIGluamVjdCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge3RvU2lnbmFsfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQge1Jlc2l6ZU9ic2VydmVyU2VydmljZX0gZnJvbSAnQG5nLXdlYi1hcGlzL3Jlc2l6ZS1vYnNlcnZlcic7XG5pbXBvcnQge0VNUFRZX1FVRVJZfSBmcm9tICdAdGFpZ2EtdWkvY2RrL2NvbnN0YW50cyc7XG5pbXBvcnQge3R1aVF1ZXJ5TGlzdENoYW5nZXMsIHR1aVpvbmVPcHRpbWl6ZWR9IGZyb20gJ0B0YWlnYS11aS9jZGsvb2JzZXJ2YWJsZXMnO1xuaW1wb3J0IHtkaXN0aW5jdFVudGlsQ2hhbmdlZCwgbWFwLCBSZXBsYXlTdWJqZWN0LCBzd2l0Y2hNYXB9IGZyb20gJ3J4anMnO1xuXG5pbXBvcnQge1R1aVRhYmxlQ2VsbH0gZnJvbSAnLi4vZGlyZWN0aXZlcy9jZWxsLmRpcmVjdGl2ZSc7XG5pbXBvcnQge1R1aVRhYmxlRGlyZWN0aXZlfSBmcm9tICcuLi9kaXJlY3RpdmVzL3RhYmxlLmRpcmVjdGl2ZSc7XG5pbXBvcnQge1RVSV9UQUJMRV9QUk9WSURFUn0gZnJvbSAnLi4vcHJvdmlkZXJzL3RhYmxlLnByb3ZpZGVyJztcbmltcG9ydCB7VHVpVGFibGVUYm9keX0gZnJvbSAnLi4vdGJvZHkvdGJvZHkuY29tcG9uZW50JztcbmltcG9ydCB7VHVpVGFibGVUZH0gZnJvbSAnLi4vdGQvdGQuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ3RyW3R1aVRyXScsXG4gICAgaW1wb3J0czogW0FzeW5jUGlwZSwgTmdGb3JPZiwgTmdJZiwgTmdUZW1wbGF0ZU91dGxldCwgVHVpVGFibGVUZF0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL3RyLnRlbXBsYXRlLmh0bWwnLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIHByb3ZpZGVyczogW1RVSV9UQUJMRV9QUk9WSURFUiwgUmVzaXplT2JzZXJ2ZXJTZXJ2aWNlXSxcbiAgICBob3N0OiB7XG4gICAgICAgICdbc3R5bGUuLS10LXJvdy1oZWlnaHQucHhdJzogJ2hlaWdodCgpJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUdWlUYWJsZVRyPFQgZXh0ZW5kcyBQYXJ0aWFsPFJlY29yZDxrZXlvZiBULCBhbnk+Pj5cbiAgICBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXRcbntcbiAgICBAQ29udGVudENoaWxkcmVuKGZvcndhcmRSZWYoKCkgPT4gVHVpVGFibGVDZWxsKSlcbiAgICBwcml2YXRlIHJlYWRvbmx5IGNlbGxzOiBRdWVyeUxpc3Q8VHVpVGFibGVDZWxsPiA9IEVNUFRZX1FVRVJZO1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSBib2R5ID0gaW5qZWN0PFR1aVRhYmxlVGJvZHk8VD4+KGZvcndhcmRSZWYoKCkgPT4gVHVpVGFibGVUYm9keSkpO1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSBjb250ZW50UmVhZHkkID0gbmV3IFJlcGxheVN1YmplY3Q8Ym9vbGVhbj4oMSk7XG5cbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgdGFibGUgPSBpbmplY3Q8VHVpVGFibGVEaXJlY3RpdmU8VD4+KFxuICAgICAgICBmb3J3YXJkUmVmKCgpID0+IFR1aVRhYmxlRGlyZWN0aXZlKSxcbiAgICApO1xuXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGhlaWdodCA9IHRvU2lnbmFsKFxuICAgICAgICBpbmplY3QoUmVzaXplT2JzZXJ2ZXJTZXJ2aWNlLCB7c2VsZjogdHJ1ZX0pLnBpcGUoXG4gICAgICAgICAgICBtYXAoKFtlbnRyeV0pID0+IGVudHJ5Py5jb250ZW50UmVjdC5oZWlnaHQgPz8gMCksXG4gICAgICAgICAgICBkaXN0aW5jdFVudGlsQ2hhbmdlZCgpLFxuICAgICAgICAgICAgdHVpWm9uZU9wdGltaXplZCgpLFxuICAgICAgICApLFxuICAgICAgICB7aW5pdGlhbFZhbHVlOiAwfSxcbiAgICApO1xuXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGNlbGxzJCA9IHRoaXMuY29udGVudFJlYWR5JC5waXBlKFxuICAgICAgICBzd2l0Y2hNYXAoKCkgPT4gdHVpUXVlcnlMaXN0Q2hhbmdlcyh0aGlzLmNlbGxzKSksXG4gICAgICAgIG1hcCgoY2VsbHMpID0+XG4gICAgICAgICAgICBjZWxscy5yZWR1Y2UoXG4gICAgICAgICAgICAgICAgKHJlY29yZCwgaXRlbSkgPT4gKHsuLi5yZWNvcmQsIFtpdGVtLnR1aUNlbGxdOiBpdGVtfSksXG4gICAgICAgICAgICAgICAge30gYXMgUmVjb3JkPHN0cmluZyB8IGtleW9mIFQsIFR1aVRhYmxlQ2VsbD4sXG4gICAgICAgICAgICApLFxuICAgICAgICApLFxuICAgICk7XG5cbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgaXRlbSQgPSB0aGlzLmNvbnRlbnRSZWFkeSQucGlwZShcbiAgICAgICAgc3dpdGNoTWFwKCgpID0+IHR1aVF1ZXJ5TGlzdENoYW5nZXModGhpcy5ib2R5LnJvd3MpKSxcbiAgICAgICAgbWFwKFxuICAgICAgICAgICAgKHJvd3MpID0+XG4gICAgICAgICAgICAgICAgdGhpcy5ib2R5LmRhdGFbcm93cy5maW5kSW5kZXgoKHJvdykgPT4gcm93ID09PSB0aGlzKV0gYXMgUmVjb3JkPFxuICAgICAgICAgICAgICAgICAgICBzdHJpbmcgfCBrZXlvZiBULFxuICAgICAgICAgICAgICAgICAgICBhbnlcbiAgICAgICAgICAgICAgICA+LFxuICAgICAgICApLFxuICAgICk7XG5cbiAgICBwdWJsaWMgYXN5bmMgbmdBZnRlckNvbnRlbnRJbml0KCk6IFByb21pc2U8dm9pZD4ge1xuICAgICAgICBhd2FpdCBQcm9taXNlLnJlc29sdmUoKTtcbiAgICAgICAgdGhpcy5jb250ZW50UmVhZHkkLm5leHQodHJ1ZSk7XG4gICAgfVxufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cImNlbGxzJCB8IGFzeW5jIGFzIGl0ZW1zOyBlbHNlIGR1bW15XCI+XG4gICAgPG5nLWNvbnRhaW5lclxuICAgICAgICAqbmdGb3I9XCJsZXQga2V5IG9mIHRhYmxlLmNvbHVtbnNcIlxuICAgICAgICBbbmdUZW1wbGF0ZU91dGxldF09XCIoaXRlbXNba2V5XSAmJiBpdGVtc1trZXldLnRlbXBsYXRlKSB8fCBwbGFpblwiXG4gICAgPlxuICAgICAgICA8bmctdGVtcGxhdGUgI3BsYWluPlxuICAgICAgICAgICAgPHRkXG4gICAgICAgICAgICAgICAgKm5nSWY9XCJpdGVtJCB8IGFzeW5jIGFzIGl0ZW1cIlxuICAgICAgICAgICAgICAgIHR1aVRkXG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge3sgaXRlbVtrZXldIH19XG4gICAgICAgICAgICA8L3RkPlxuICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgIDwvbmctY29udGFpbmVyPlxuPC9uZy1jb250YWluZXI+XG48bmctdGVtcGxhdGUgI2R1bW15Pjx0ZD48L3RkPjwvbmctdGVtcGxhdGU+XG4iXX0=