@taiga-ui/addon-table
Version:
A library to display tabled data with filters, search, group actions, etc.
45 lines • 12.7 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 { TuiMapperPipe } from '@taiga-ui/cdk/pipes/mapper';
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 = [];
this.open = this.options.open;
this.openChange = new EventEmitter();
}
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, TuiMapperPipe], 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGJvZHkuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWRkb24tdGFibGUvY29tcG9uZW50cy90YWJsZS90Ym9keS90Ym9keS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hZGRvbi10YWJsZS9jb21wb25lbnRzL3RhYmxlL3Rib2R5L3Rib2R5LnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLElBQUksRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBRXJDLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULGVBQWUsRUFDZixZQUFZLEVBQ1osVUFBVSxFQUNWLE1BQU0sRUFDTixLQUFLLEVBQ0wsTUFBTSxHQUNULE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSx5QkFBeUIsQ0FBQztBQUNwRCxPQUFPLEVBQUMsYUFBYSxFQUFDLE1BQU0sNEJBQTRCLENBQUM7QUFDekQsT0FBTyxFQUFDLE9BQU8sRUFBQyxNQUFNLGdDQUFnQyxDQUFDO0FBQ3ZELE9BQU8sRUFBQyxVQUFVLEVBQUMsTUFBTSxrQ0FBa0MsQ0FBQztBQUU1RCxPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSx3QkFBd0IsQ0FBQztBQUUxRCxPQUFPLEVBQUMsaUJBQWlCLEVBQUMsTUFBTSwrQkFBK0IsQ0FBQztBQUNoRSxPQUFPLEVBQUMsa0JBQWtCLEVBQUMsTUFBTSw2QkFBNkIsQ0FBQztBQUMvRCxPQUFPLEVBQUMsaUJBQWlCLEVBQUMsTUFBTSxrQkFBa0IsQ0FBQztBQUNuRCxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sb0JBQW9CLENBQUM7O0FBRTlDLE1BU2EsYUFBYTtJQVQxQjtRQVVxQixZQUFPLEdBQUcsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUM7UUFFbEMsVUFBSyxHQUFHLE1BQU0sQ0FDN0IsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGlCQUFpQixDQUFDLENBQ3RDLENBQUM7UUFHYyxTQUFJLEdBQTZCLFdBQVcsQ0FBQztRQUd0RCxTQUFJLEdBQWlCLEVBQUUsQ0FBQztRQU14QixTQUFJLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUM7UUFHaEIsZUFBVSxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7S0FNNUQ7SUFKYSxPQUFPO1FBQ2IsSUFBSSxDQUFDLElBQUksR0FBRyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUM7UUFDdkIsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3BDLENBQUM7K0dBekJRLGFBQWE7bUdBQWIsYUFBYSxpS0FGWCxrQkFBa0Isa0ZBU0ssVUFBVSxpQ0N4Q2hELDhvQkF5QkEsbzBDREVjLElBQUksNkZBQUUsa0JBQWtCLDhIQUFFLFVBQVUsaUZBQUUsT0FBTzs7U0FNOUMsYUFBYTs0RkFBYixhQUFhO2tCQVR6QixTQUFTO2lDQUNNLElBQUksWUFDTixpQkFBaUIsV0FDbEIsQ0FBQyxJQUFJLEVBQUUsa0JBQWtCLEVBQUUsVUFBVSxFQUFFLE9BQU8sRUFBRSxhQUFhLENBQUMsbUJBR3RELHVCQUF1QixDQUFDLE1BQU0sYUFDcEMsa0JBQWtCOzhCQVViLElBQUk7c0JBRG5CLGVBQWU7dUJBQUMsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLFVBQVUsQ0FBQztnQkFJdEMsSUFBSTtzQkFEVixLQUFLO2dCQUlDLE9BQU87c0JBRGIsS0FBSztnQkFJQyxJQUFJO3NCQURWLEtBQUs7Z0JBSVUsVUFBVTtzQkFEekIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7TmdJZn0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB0eXBlIHtRdWVyeUxpc3R9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgICBDb21wb25lbnQsXG4gICAgQ29udGVudENoaWxkcmVuLFxuICAgIEV2ZW50RW1pdHRlcixcbiAgICBmb3J3YXJkUmVmLFxuICAgIGluamVjdCxcbiAgICBJbnB1dCxcbiAgICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtFTVBUWV9RVUVSWX0gZnJvbSAnQHRhaWdhLXVpL2Nkay9jb25zdGFudHMnO1xuaW1wb3J0IHtUdWlNYXBwZXJQaXBlfSBmcm9tICdAdGFpZ2EtdWkvY2RrL3BpcGVzL21hcHBlcic7XG5pbXBvcnQge1R1aUljb259IGZyb20gJ0B0YWlnYS11aS9jb3JlL2NvbXBvbmVudHMvaWNvbic7XG5pbXBvcnQge1R1aUNoZXZyb259IGZyb20gJ0B0YWlnYS11aS9raXQvZGlyZWN0aXZlcy9jaGV2cm9uJztcbmltcG9ydCB0eXBlIHtQb2x5bW9ycGhldXNDb250ZW50fSBmcm9tICdAdGFpZ2EtdWkvcG9seW1vcnBoZXVzJztcbmltcG9ydCB7UG9seW1vcnBoZXVzT3V0bGV0fSBmcm9tICdAdGFpZ2EtdWkvcG9seW1vcnBoZXVzJztcblxuaW1wb3J0IHtUdWlUYWJsZURpcmVjdGl2ZX0gZnJvbSAnLi4vZGlyZWN0aXZlcy90YWJsZS5kaXJlY3RpdmUnO1xuaW1wb3J0IHtUVUlfVEFCTEVfUFJPVklERVJ9IGZyb20gJy4uL3Byb3ZpZGVycy90YWJsZS5wcm92aWRlcic7XG5pbXBvcnQge1RVSV9UQUJMRV9PUFRJT05TfSBmcm9tICcuLi90YWJsZS5vcHRpb25zJztcbmltcG9ydCB7VHVpVGFibGVUcn0gZnJvbSAnLi4vdHIvdHIuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgICBzZWxlY3RvcjogJ3Rib2R5W3R1aVRib2R5XScsXG4gICAgaW1wb3J0czogW05nSWYsIFBvbHltb3JwaGV1c091dGxldCwgVHVpQ2hldnJvbiwgVHVpSWNvbiwgVHVpTWFwcGVyUGlwZV0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL3Rib2R5LnRlbXBsYXRlLmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL3Rib2R5LnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFRVSV9UQUJMRV9QUk9WSURFUixcbn0pXG5leHBvcnQgY2xhc3MgVHVpVGFibGVUYm9keTxUIGV4dGVuZHMgUGFydGlhbDxSZWNvcmQ8a2V5b2YgVCwgYW55Pj4+IHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IG9wdGlvbnMgPSBpbmplY3QoVFVJX1RBQkxFX09QVElPTlMpO1xuXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IHRhYmxlID0gaW5qZWN0PFR1aVRhYmxlRGlyZWN0aXZlPFQ+PihcbiAgICAgICAgZm9yd2FyZFJlZigoKSA9PiBUdWlUYWJsZURpcmVjdGl2ZSksXG4gICAgKTtcblxuICAgIEBDb250ZW50Q2hpbGRyZW4oZm9yd2FyZFJlZigoKSA9PiBUdWlUYWJsZVRyKSlcbiAgICBwdWJsaWMgcmVhZG9ubHkgcm93czogUXVlcnlMaXN0PFR1aVRhYmxlVHI8VD4+ID0gRU1QVFlfUVVFUlk7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBkYXRhOiByZWFkb25seSBUW10gPSBbXTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGhlYWRpbmc6IFBvbHltb3JwaGV1c0NvbnRlbnQ7XG5cbiAgICBASW5wdXQoKVxuICAgIHB1YmxpYyBvcGVuID0gdGhpcy5vcHRpb25zLm9wZW47XG5cbiAgICBAT3V0cHV0KClcbiAgICBwdWJsaWMgcmVhZG9ubHkgb3BlbkNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICAgIHByb3RlY3RlZCBvbkNsaWNrKCk6IHZvaWQge1xuICAgICAgICB0aGlzLm9wZW4gPSAhdGhpcy5vcGVuO1xuICAgICAgICB0aGlzLm9wZW5DaGFuZ2UuZW1pdCh0aGlzLm9wZW4pO1xuICAgIH1cbn1cbiIsIjx0ciAqbmdJZj1cImhlYWRpbmdcIj5cbiAgICA8dGhcbiAgICAgICAgY2xhc3M9XCJ0LWhlYWRpbmdcIlxuICAgICAgICBbY29sU3Bhbl09XCJ0YWJsZS5jb2x1bW5zLmxlbmd0aFwiXG4gICAgPlxuICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgIGNsYXNzPVwidC1leHBhbmRcIlxuICAgICAgICAgICAgKGNsaWNrKT1cIm9uQ2xpY2soKVwiXG4gICAgICAgID5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwidC1uYW1lXCI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqcG9seW1vcnBoZXVzT3V0bGV0PVwiaGVhZGluZyBhcyB0ZXh0XCI+XG4gICAgICAgICAgICAgICAgICAgIHt7IHRleHQgfX1cbiAgICAgICAgICAgICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgIDx0dWktaWNvblxuICAgICAgICAgICAgICAgIGNsYXNzPVwidC1jaGV2cm9uXCJcbiAgICAgICAgICAgICAgICBbdHVpQ2hldnJvbl09XCJvcGVuXCJcbiAgICAgICAgICAgIC8+XG4gICAgICAgIDwvYnV0dG9uPlxuICAgIDwvdGg+XG48L3RyPlxuPG5nLWNvbnRhaW5lciAqbmdJZj1cIm9wZW5cIj5cbiAgICA8bmctY29udGVudCAvPlxuPC9uZy1jb250YWluZXI+XG4iXX0=