@taiga-ui/addon-table
Version:
A library to display tabled data with filters, search, group actions, etc.
47 lines • 12.9 kB
JavaScript
import { NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, ContentChildren, EventEmitter, forwardRef, inject, Input, Output, } from '@angular/core';
import { EMPTY_QUERY } from '@taiga-ui/cdk/constants';
import { TuiIcon } from '@taiga-ui/core/components/icon';
import { TuiChevron } from '@taiga-ui/kit/directives/chevron';
import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
import { TuiTableDirective } from '../directives/table.directive';
import { TUI_TABLE_PROVIDER } from '../providers/table.provider';
import { TUI_TABLE_OPTIONS } from '../table.options';
import { TuiTableTr } from '../tr/tr.component';
import * as i0 from "@angular/core";
class TuiTableTbody {
constructor() {
this.options = inject(TUI_TABLE_OPTIONS);
this.table = inject(forwardRef(() => TuiTableDirective));
this.rows = EMPTY_QUERY;
this.data = [];
/** @deprecated: drop in v5.0, use TuiTableExpand */
this.open = this.options.open;
/** @deprecated: drop in v5.0, use TuiTableExpand */
this.openChange = new EventEmitter();
/** @deprecated: drop in v5.0, use TuiTableExpand */
this.onClick = () => {
this.open = !this.open;
this.openChange.emit(this.open);
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableTbody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiTableTbody, isStandalone: true, selector: "tbody[tuiTbody]", inputs: { data: "data", heading: "heading", open: "open" }, outputs: { openChange: "openChange" }, providers: TUI_TABLE_PROVIDER, queries: [{ propertyName: "rows", predicate: i0.forwardRef(function () { return TuiTableTr; }) }], ngImport: i0, template: "<tr *ngIf=\"heading\">\n <th\n class=\"t-heading\"\n [colSpan]=\"table.columns.length\"\n >\n <button\n type=\"button\"\n class=\"t-expand\"\n (click)=\"onClick()\"\n >\n <span class=\"t-name\">\n <ng-container *polymorpheusOutlet=\"heading as text\">\n {{ text }}\n </ng-container>\n </span>\n <tui-icon\n class=\"t-chevron\"\n [tuiChevron]=\"open\"\n />\n </button>\n </th>\n</tr>\n<ng-container *ngIf=\"open\">\n <ng-content />\n</ng-container>\n", styles: [":host{border-color:var(--tui-border-normal)}:host tr{border-color:inherit}.t-expand{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;display:flex;inline-size:100%;block-size:100%;align-items:center;box-sizing:border-box;outline:none;font-weight:700;cursor:pointer;border-color:inherit}.t-expand:focus-visible .t-name{background:var(--tui-service-selection-background)}.t-expand:before,.t-expand:after{content:\"\";position:sticky;block-size:100%;border-inline-start:1px solid;border-color:inherit}.t-expand:before{left:0}.t-expand:after{right:0}.t-heading{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;block-size:var(--tui-height-m);font:var(--tui-font-text-s);padding:0;background:var(--tui-background-neutral-1);border-block-end:1px solid var(--tui-border-normal);border-color:inherit}.t-heading:hover{background:var(--tui-background-neutral-1-hover)}:host-context(table[data-size=\"l\"]) .t-heading{font:var(--tui-font-text-m);block-size:var(--tui-height-l)}.t-name{position:sticky;left:.75rem;display:inline-block}:host-context(table[data-size=\"l\"]) .t-name{left:1rem}.t-chevron{position:sticky;right:.75rem;margin:0 .6875rem 0 auto}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: TuiIcon, selector: "tui-icon", inputs: ["icon", "background"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
export { TuiTableTbody };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiTableTbody, decorators: [{
type: Component,
args: [{ standalone: true, selector: 'tbody[tuiTbody]', imports: [NgIf, PolymorpheusOutlet, TuiChevron, TuiIcon], changeDetection: ChangeDetectionStrategy.OnPush, providers: TUI_TABLE_PROVIDER, template: "<tr *ngIf=\"heading\">\n <th\n class=\"t-heading\"\n [colSpan]=\"table.columns.length\"\n >\n <button\n type=\"button\"\n class=\"t-expand\"\n (click)=\"onClick()\"\n >\n <span class=\"t-name\">\n <ng-container *polymorpheusOutlet=\"heading as text\">\n {{ text }}\n </ng-container>\n </span>\n <tui-icon\n class=\"t-chevron\"\n [tuiChevron]=\"open\"\n />\n </button>\n </th>\n</tr>\n<ng-container *ngIf=\"open\">\n <ng-content />\n</ng-container>\n", styles: [":host{border-color:var(--tui-border-normal)}:host tr{border-color:inherit}.t-expand{-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;font:inherit;line-height:inherit;text-decoration:none;display:flex;inline-size:100%;block-size:100%;align-items:center;box-sizing:border-box;outline:none;font-weight:700;cursor:pointer;border-color:inherit}.t-expand:focus-visible .t-name{background:var(--tui-service-selection-background)}.t-expand:before,.t-expand:after{content:\"\";position:sticky;block-size:100%;border-inline-start:1px solid;border-color:inherit}.t-expand:before{left:0}.t-expand:after{right:0}.t-heading{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;block-size:var(--tui-height-m);font:var(--tui-font-text-s);padding:0;background:var(--tui-background-neutral-1);border-block-end:1px solid var(--tui-border-normal);border-color:inherit}.t-heading:hover{background:var(--tui-background-neutral-1-hover)}:host-context(table[data-size=\"l\"]) .t-heading{font:var(--tui-font-text-m);block-size:var(--tui-height-l)}.t-name{position:sticky;left:.75rem;display:inline-block}:host-context(table[data-size=\"l\"]) .t-name{left:1rem}.t-chevron{position:sticky;right:.75rem;margin:0 .6875rem 0 auto}\n"] }]
}], propDecorators: { rows: [{
type: ContentChildren,
args: [forwardRef(() => TuiTableTr)]
}], data: [{
type: Input
}], heading: [{
type: Input
}], open: [{
type: Input
}], openChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGJvZHkuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWRkb24tdGFibGUvY29tcG9uZW50cy90YWJsZS90Ym9keS90Ym9keS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hZGRvbi10YWJsZS9jb21wb25lbnRzL3RhYmxlL3Rib2R5L3Rib2R5LnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLElBQUksRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ3JDLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULGVBQWUsRUFDZixZQUFZLEVBQ1osVUFBVSxFQUNWLE1BQU0sRUFDTixLQUFLLEVBQ0wsTUFBTSxHQUVULE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSx5QkFBeUIsQ0FBQztBQUNwRCxPQUFPLEVBQUMsT0FBTyxFQUFDLE1BQU0sZ0NBQWdDLENBQUM7QUFDdkQsT0FBTyxFQUFDLFVBQVUsRUFBQyxNQUFNLGtDQUFrQyxDQUFDO0FBQzVELE9BQU8sRUFBMkIsa0JBQWtCLEVBQUMsTUFBTSx3QkFBd0IsQ0FBQztBQUVwRixPQUFPLEVBQUMsaUJBQWlCLEVBQUMsTUFBTSwrQkFBK0IsQ0FBQztBQUNoRSxPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSw2QkFBNkIsQ0FBQztBQUMvRCxPQUFPLEVBQUMsaUJBQWlCLEVBQUMsTUFBTSxrQkFBa0IsQ0FBQztBQUNuRCxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sb0JBQW9CLENBQUM7O0FBRTlDLE1BU2EsYUFBYTtJQVQxQjtRQVVxQixZQUFPLEdBQUcsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUM7UUFFbEMsVUFBSyxHQUFHLE1BQU0sQ0FDN0IsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGlCQUFpQixDQUFDLENBQ3RDLENBQUM7UUFHYyxTQUFJLEdBQTZCLFdBQVcsQ0FBQztRQUd0RCxTQUFJLEdBQWlCLEVBQUUsQ0FBQztRQU0vQixvREFBb0Q7UUFFN0MsU0FBSSxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDO1FBRWhDLG9EQUFvRDtRQUVwQyxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQVcsQ0FBQztRQUV6RCxvREFBb0Q7UUFDMUMsWUFBTyxHQUFHLEdBQVMsRUFBRTtZQUMzQixJQUFJLENBQUMsSUFBSSxHQUFHLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQztZQUN2QixJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDcEMsQ0FBQyxDQUFDO0tBQ0w7K0dBOUJZLGFBQWE7bUdBQWIsYUFBYSxpS0FGWCxrQkFBa0Isa0ZBU0ssVUFBVSxpQ0N0Q2hELDhvQkF5QkEsbzBDREFjLElBQUksNkZBQUUsa0JBQWtCLDhIQUFFLFVBQVUsaUZBQUUsT0FBTzs7U0FNOUMsYUFBYTs0RkFBYixhQUFhO2tCQVR6QixTQUFTO2lDQUNNLElBQUksWUFDTixpQkFBaUIsV0FDbEIsQ0FBQyxJQUFJLEVBQUUsa0JBQWtCLEVBQUUsVUFBVSxFQUFFLE9BQU8sQ0FBQyxtQkFHdkMsdUJBQXVCLENBQUMsTUFBTSxhQUNwQyxrQkFBa0I7OEJBVWIsSUFBSTtzQkFEbkIsZUFBZTt1QkFBQyxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsVUFBVSxDQUFDO2dCQUl0QyxJQUFJO3NCQURWLEtBQUs7Z0JBS0MsT0FBTztzQkFEYixLQUFLO2dCQUtDLElBQUk7c0JBRFYsS0FBSztnQkFLVSxVQUFVO3NCQUR6QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtOZ0lmfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDb21wb25lbnQsXG4gICAgQ29udGVudENoaWxkcmVuLFxuICAgIEV2ZW50RW1pdHRlcixcbiAgICBmb3J3YXJkUmVmLFxuICAgIGluamVjdCxcbiAgICBJbnB1dCxcbiAgICBPdXRwdXQsXG4gICAgdHlwZSBRdWVyeUxpc3QsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtFTVBUWV9RVUVSWX0gZnJvbSAnQHRhaWdhLXVpL2Nkay9jb25zdGFudHMnO1xuaW1wb3J0IHtUdWlJY29ufSBmcm9tICdAdGFpZ2EtdWkvY29yZS9jb21wb25lbnRzL2ljb24nO1xuaW1wb3J0IHtUdWlDaGV2cm9ufSBmcm9tICdAdGFpZ2EtdWkva2l0L2RpcmVjdGl2ZXMvY2hldnJvbic7XG5pbXBvcnQge3R5cGUgUG9seW1vcnBoZXVzQ29udGVudCwgUG9seW1vcnBoZXVzT3V0bGV0fSBmcm9tICdAdGFpZ2EtdWkvcG9seW1vcnBoZXVzJztcblxuaW1wb3J0IHtUdWlUYWJsZURpcmVjdGl2ZX0gZnJvbSAnLi4vZGlyZWN0aXZlcy90YWJsZS5kaXJlY3RpdmUnO1xuaW1wb3J0IHtUVUlfVEFCTEVfUFJPVklERVJ9IGZyb20gJy4uL3Byb3ZpZGVycy90YWJsZS5wcm92aWRlcic7XG5pbXBvcnQge1RVSV9UQUJMRV9PUFRJT05TfSBmcm9tICcuLi90YWJsZS5vcHRpb25zJztcbmltcG9ydCB7VHVpVGFibGVUcn0gZnJvbSAnLi4vdHIvdHIuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ3Rib2R5W3R1aVRib2R5XScsXG4gICAgaW1wb3J0czogW05nSWYsIFBvbHltb3JwaGV1c091dGxldCwgVHVpQ2hldnJvbiwgVHVpSWNvbl0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL3Rib2R5LnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3Rib2R5LnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFRVSV9UQUJMRV9QUk9WSURFUixcbn0pXG5leHBvcnQgY2xhc3MgVHVpVGFibGVUYm9keTxUIGV4dGVuZHMgUGFydGlhbDxSZWNvcmQ8a2V5b2YgVCwgdW5rbm93bj4+PiB7XG4gICAgcHJpdmF0ZSByZWFkb25seSBvcHRpb25zID0gaW5qZWN0KFRVSV9UQUJMRV9PUFRJT05TKTtcblxuICAgIHByb3RlY3RlZCByZWFkb25seSB0YWJsZSA9IGluamVjdDxUdWlUYWJsZURpcmVjdGl2ZTxUPj4oXG4gICAgICAgIGZvcndhcmRSZWYoKCkgPT4gVHVpVGFibGVEaXJlY3RpdmUpLFxuICAgICk7XG5cbiAgICBAQ29udGVudENoaWxkcmVuKGZvcndhcmRSZWYoKCkgPT4gVHVpVGFibGVUcikpXG4gICAgcHVibGljIHJlYWRvbmx5IHJvd3M6IFF1ZXJ5TGlzdDxUdWlUYWJsZVRyPFQ+PiA9IEVNUFRZX1FVRVJZO1xuXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgZGF0YTogcmVhZG9ubHkgVFtdID0gW107XG5cbiAgICAvKiogQGRlcHJlY2F0ZWQ6IGRyb3AgaW4gdjUuMCwgdXNlIFR1aVRhYmxlRXhwYW5kICovXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgaGVhZGluZzogUG9seW1vcnBoZXVzQ29udGVudDtcblxuICAgIC8qKiBAZGVwcmVjYXRlZDogZHJvcCBpbiB2NS4wLCB1c2UgVHVpVGFibGVFeHBhbmQgKi9cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBvcGVuID0gdGhpcy5vcHRpb25zLm9wZW47XG5cbiAgICAvKiogQGRlcHJlY2F0ZWQ6IGRyb3AgaW4gdjUuMCwgdXNlIFR1aVRhYmxlRXhwYW5kICovXG4gICAgQE91dHB1dCgpXG4gICAgcHVibGljIHJlYWRvbmx5IG9wZW5DaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgICAvKiogQGRlcHJlY2F0ZWQ6IGRyb3AgaW4gdjUuMCwgdXNlIFR1aVRhYmxlRXhwYW5kICovXG4gICAgcHJvdGVjdGVkIG9uQ2xpY2sgPSAoKTogdm9pZCA9PiB7XG4gICAgICAgIHRoaXMub3BlbiA9ICF0aGlzLm9wZW47XG4gICAgICAgIHRoaXMub3BlbkNoYW5nZS5lbWl0KHRoaXMub3Blbik7XG4gICAgfTtcbn1cbiIsIjx0ciAqbmdJZj1cImhlYWRpbmdcIj5cbiAgICA8dGhcbiAgICAgICAgY2xhc3M9XCJ0LWhlYWRpbmdcIlxuICAgICAgICBbY29sU3Bhbl09XCJ0YWJsZS5jb2x1bW5zLmxlbmd0aFwiXG4gICAgPlxuICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgIGNsYXNzPVwidC1leHBhbmRcIlxuICAgICAgICAgICAgKGNsaWNrKT1cIm9uQ2xpY2soKVwiXG4gICAgICAgID5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwidC1uYW1lXCI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqcG9seW1vcnBoZXVzT3V0bGV0PVwiaGVhZGluZyBhcyB0ZXh0XCI+XG4gICAgICAgICAgICAgICAgICAgIHt7IHRleHQgfX1cbiAgICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgIDx0dWktaWNvblxuICAgICAgICAgICAgICAgIGNsYXNzPVwidC1jaGV2cm9uXCJcbiAgICAgICAgICAgICAgICBbdHVpQ2hldnJvbl09XCJvcGVuXCJcbiAgICAgICAgICAgIC8+XG4gICAgICAgIDwvYnV0dG9uPlxuICAgIDwvdGg+XG48L3RyPlxuPG5nLWNvbnRhaW5lciAqbmdJZj1cIm9wZW5cIj5cbiAgICA8bmctY29udGVudCAvPlxuPC9uZy1jb250YWluZXI+XG4iXX0=