@taiga-ui/addon-table
Version:
A library to display tabled data with filters, search, group actions, etc.
47 lines • 13 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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGJvZHkuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYWRkb24tdGFibGUvY29tcG9uZW50cy90YWJsZS90Ym9keS90Ym9keS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9hZGRvbi10YWJsZS9jb21wb25lbnRzL3RhYmxlL3Rib2R5L3Rib2R5LnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLElBQUksRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBRXJDLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULGVBQWUsRUFDZixZQUFZLEVBQ1osVUFBVSxFQUNWLE1BQU0sRUFDTixLQUFLLEVBQ0wsTUFBTSxHQUNULE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSx5QkFBeUIsQ0FBQztBQUNwRCxPQUFPLEVBQUMsT0FBTyxFQUFDLE1BQU0sZ0NBQWdDLENBQUM7QUFDdkQsT0FBTyxFQUFDLFVBQVUsRUFBQyxNQUFNLGtDQUFrQyxDQUFDO0FBRTVELE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLHdCQUF3QixDQUFDO0FBRTFELE9BQU8sRUFBQyxpQkFBaUIsRUFBQyxNQUFNLCtCQUErQixDQUFDO0FBQ2hFLE9BQU8sRUFBQyxrQkFBa0IsRUFBQyxNQUFNLDZCQUE2QixDQUFDO0FBQy9ELE9BQU8sRUFBQyxpQkFBaUIsRUFBQyxNQUFNLGtCQUFrQixDQUFDO0FBQ25ELE9BQU8sRUFBQyxVQUFVLEVBQUMsTUFBTSxvQkFBb0IsQ0FBQzs7QUFFOUMsTUFTYSxhQUFhO0lBVDFCO1FBVXFCLFlBQU8sR0FBRyxNQUFNLENBQUMsaUJBQWlCLENBQUMsQ0FBQztRQUVsQyxVQUFLLEdBQUcsTUFBTSxDQUM3QixVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsaUJBQWlCLENBQUMsQ0FDdEMsQ0FBQztRQUdjLFNBQUksR0FBNkIsV0FBVyxDQUFDO1FBR3RELFNBQUksR0FBaUIsRUFBRSxDQUFDO1FBTS9CLG9EQUFvRDtRQUU3QyxTQUFJLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUM7UUFFaEMsb0RBQW9EO1FBRXBDLGVBQVUsR0FBRyxJQUFJLFlBQVksRUFBVyxDQUFDO1FBRXpELG9EQUFvRDtRQUMxQyxZQUFPLEdBQUcsR0FBUyxFQUFFO1lBQzNCLElBQUksQ0FBQyxJQUFJLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDO1lBQ3ZCLElBQUksQ0FBQyxVQUFVLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNwQyxDQUFDLENBQUM7S0FDTDsrR0E5QlksYUFBYTttR0FBYixhQUFhLGlLQUZYLGtCQUFrQixrRkFTSyxVQUFVLGlDQ3ZDaEQsOG9CQXlCQSxvMENEQ2MsSUFBSSw2RkFBRSxrQkFBa0IsOEhBQUUsVUFBVSxpRkFBRSxPQUFPOztTQU05QyxhQUFhOzRGQUFiLGFBQWE7a0JBVHpCLFNBQVM7aUNBQ00sSUFBSSxZQUNOLGlCQUFpQixXQUNsQixDQUFDLElBQUksRUFBRSxrQkFBa0IsRUFBRSxVQUFVLEVBQUUsT0FBTyxDQUFDLG1CQUd2Qyx1QkFBdUIsQ0FBQyxNQUFNLGFBQ3BDLGtCQUFrQjs4QkFVYixJQUFJO3NCQURuQixlQUFlO3VCQUFDLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxVQUFVLENBQUM7Z0JBSXRDLElBQUk7c0JBRFYsS0FBSztnQkFLQyxPQUFPO3NCQURiLEtBQUs7Z0JBS0MsSUFBSTtzQkFEVixLQUFLO2dCQUtVLFVBQVU7c0JBRHpCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge05nSWZ9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgdHlwZSB7UXVlcnlMaXN0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIENvbnRlbnRDaGlsZHJlbixcbiAgICBFdmVudEVtaXR0ZXIsXG4gICAgZm9yd2FyZFJlZixcbiAgICBpbmplY3QsXG4gICAgSW5wdXQsXG4gICAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7RU1QVFlfUVVFUll9IGZyb20gJ0B0YWlnYS11aS9jZGsvY29uc3RhbnRzJztcbmltcG9ydCB7VHVpSWNvbn0gZnJvbSAnQHRhaWdhLXVpL2NvcmUvY29tcG9uZW50cy9pY29uJztcbmltcG9ydCB7VHVpQ2hldnJvbn0gZnJvbSAnQHRhaWdhLXVpL2tpdC9kaXJlY3RpdmVzL2NoZXZyb24nO1xuaW1wb3J0IHR5cGUge1BvbHltb3JwaGV1c0NvbnRlbnR9IGZyb20gJ0B0YWlnYS11aS9wb2x5bW9ycGhldXMnO1xuaW1wb3J0IHtQb2x5bW9ycGhldXNPdXRsZXR9IGZyb20gJ0B0YWlnYS11aS9wb2x5bW9ycGhldXMnO1xuXG5pbXBvcnQge1R1aVRhYmxlRGlyZWN0aXZlfSBmcm9tICcuLi9kaXJlY3RpdmVzL3RhYmxlLmRpcmVjdGl2ZSc7XG5pbXBvcnQge1RVSV9UQUJMRV9QUk9WSURFUn0gZnJvbSAnLi4vcHJvdmlkZXJzL3RhYmxlLnByb3ZpZGVyJztcbmltcG9ydCB7VFVJX1RBQkxFX09QVElPTlN9IGZyb20gJy4uL3RhYmxlLm9wdGlvbnMnO1xuaW1wb3J0IHtUdWlUYWJsZVRyfSBmcm9tICcuLi90ci90ci5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIHNlbGVjdG9yOiAndGJvZHlbdHVpVGJvZHldJyxcbiAgICBpbXBvcnRzOiBbTmdJZiwgUG9seW1vcnBoZXVzT3V0bGV0LCBUdWlDaGV2cm9uLCBUdWlJY29uXSxcbiAgICB0ZW1wbGF0ZVVybDogJy4vdGJvZHkudGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vdGJvZHkuc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIHByb3ZpZGVyczogVFVJX1RBQkxFX1BST1ZJREVSLFxufSlcbmV4cG9ydCBjbGFzcyBUdWlUYWJsZVRib2R5PFQgZXh0ZW5kcyBQYXJ0aWFsPFJlY29yZDxrZXlvZiBULCBhbnk+Pj4ge1xuICAgIHByaXZhdGUgcmVhZG9ubHkgb3B0aW9ucyA9IGluamVjdChUVUlfVEFCTEVfT1BUSU9OUyk7XG5cbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgdGFibGUgPSBpbmplY3Q8VHVpVGFibGVEaXJlY3RpdmU8VD4+KFxuICAgICAgICBmb3J3YXJkUmVmKCgpID0+IFR1aVRhYmxlRGlyZWN0aXZlKSxcbiAgICApO1xuXG4gICAgQENvbnRlbnRDaGlsZHJlbihmb3J3YXJkUmVmKCgpID0+IFR1aVRhYmxlVHIpKVxuICAgIHB1YmxpYyByZWFkb25seSByb3dzOiBRdWVyeUxpc3Q8VHVpVGFibGVUcjxUPj4gPSBFTVBUWV9RVUVSWTtcblxuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGRhdGE6IHJlYWRvbmx5IFRbXSA9IFtdO1xuXG4gICAgLyoqIEBkZXByZWNhdGVkOiBkcm9wIGluIHY1LjAsIHVzZSBUdWlUYWJsZUV4cGFuZCAqL1xuICAgIEBJbnB1dCgpXG4gICAgcHVibGljIGhlYWRpbmc6IFBvbHltb3JwaGV1c0NvbnRlbnQ7XG5cbiAgICAvKiogQGRlcHJlY2F0ZWQ6IGRyb3AgaW4gdjUuMCwgdXNlIFR1aVRhYmxlRXhwYW5kICovXG4gICAgQElucHV0KClcbiAgICBwdWJsaWMgb3BlbiA9IHRoaXMub3B0aW9ucy5vcGVuO1xuXG4gICAgLyoqIEBkZXByZWNhdGVkOiBkcm9wIGluIHY1LjAsIHVzZSBUdWlUYWJsZUV4cGFuZCAqL1xuICAgIEBPdXRwdXQoKVxuICAgIHB1YmxpYyByZWFkb25seSBvcGVuQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxib29sZWFuPigpO1xuXG4gICAgLyoqIEBkZXByZWNhdGVkOiBkcm9wIGluIHY1LjAsIHVzZSBUdWlUYWJsZUV4cGFuZCAqL1xuICAgIHByb3RlY3RlZCBvbkNsaWNrID0gKCk6IHZvaWQgPT4ge1xuICAgICAgICB0aGlzLm9wZW4gPSAhdGhpcy5vcGVuO1xuICAgICAgICB0aGlzLm9wZW5DaGFuZ2UuZW1pdCh0aGlzLm9wZW4pO1xuICAgIH07XG59XG4iLCI8dHIgKm5nSWY9XCJoZWFkaW5nXCI+XG4gICAgPHRoXG4gICAgICAgIGNsYXNzPVwidC1oZWFkaW5nXCJcbiAgICAgICAgW2NvbFNwYW5dPVwidGFibGUuY29sdW1ucy5sZW5ndGhcIlxuICAgID5cbiAgICAgICAgPGJ1dHRvblxuICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgICBjbGFzcz1cInQtZXhwYW5kXCJcbiAgICAgICAgICAgIChjbGljayk9XCJvbkNsaWNrKClcIlxuICAgICAgICA+XG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cInQtbmFtZVwiPlxuICAgICAgICAgICAgICAgIDxuZy1jb250YWluZXIgKnBvbHltb3JwaGV1c091dGxldD1cImhlYWRpbmcgYXMgdGV4dFwiPlxuICAgICAgICAgICAgICAgICAgICB7eyB0ZXh0IH19XG4gICAgICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICA8L3NwYW4+XG4gICAgICAgICAgICA8dHVpLWljb25cbiAgICAgICAgICAgICAgICBjbGFzcz1cInQtY2hldnJvblwiXG4gICAgICAgICAgICAgICAgW3R1aUNoZXZyb25dPVwib3BlblwiXG4gICAgICAgICAgICAvPlxuICAgICAgICA8L2J1dHRvbj5cbiAgICA8L3RoPlxuPC90cj5cbjxuZy1jb250YWluZXIgKm5nSWY9XCJvcGVuXCI+XG4gICAgPG5nLWNvbnRlbnQgLz5cbjwvbmctY29udGFpbmVyPlxuIl19