@taiga-ui/addon-table
Version:
A library to display tabled data with filters, search, group actions, etc.
474 lines (456 loc) • 53.5 kB
JavaScript
import * as i0 from '@angular/core';
import { ChangeDetectionStrategy, ViewEncapsulation, Component, input, inject, TemplateRef, Directive, computed, effect, model, output, signal, forwardRef, untracked, contentChildren, Pipe, viewChild, PLATFORM_ID, contentChild } from '@angular/core';
import { DOCUMENT, NgTemplateOutlet, isPlatformServer } from '@angular/common';
import { outputFromObservable, toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { EMPTY_CLIENT_RECT, TUI_VERSION } from '@taiga-ui/cdk/constants';
import { tuiTypedFromEvent, tuiPreventDefault, tuiWatch } from '@taiga-ui/cdk/observables';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { switchMap, distinctUntilChanged, map, takeUntil, catchError, EMPTY, Subject, timer, of } from 'rxjs';
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { tuiWithStyles, tuiDefaultSort } from '@taiga-ui/cdk/utils/miscellaneous';
import { TuiIcon } from '@taiga-ui/core/components/icon';
import { WaIntersectionObserverService, WA_INTERSECTION_THRESHOLD, WA_INTERSECTION_ROOT_MARGIN } from '@ng-web-apis/intersection-observer';
import { tuiCreateOptions, tuiProvide } from '@taiga-ui/cdk/utils/di';
import { tuiButtonOptionsProvider } from '@taiga-ui/core/components/button';
import { TUI_TEXTFIELD_OPTIONS, TuiTextfieldComponent } from '@taiga-ui/core/components/textfield';
import { tuiBadgeOptionsProvider } from '@taiga-ui/kit/components/badge';
import { tuiChipOptionsProvider } from '@taiga-ui/kit/components/chip';
import { tuiProgressOptionsProvider } from '@taiga-ui/kit/components/progress';
import * as i1 from '@taiga-ui/kit/directives/present';
import { TuiPresent } from '@taiga-ui/kit/directives/present';
import { TuiChevron } from '@taiga-ui/kit/directives/chevron';
import { PolymorpheusOutlet } from '@taiga-ui/polymorpheus';
import { TuiControl } from '@taiga-ui/cdk/classes';
class TuiTableCaption {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableCaption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: TuiTableCaption, isStandalone: true, selector: "caption[tuiCaption]", ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["caption[tuiCaption]{caption-side:bottom;text-align:start;padding:.75rem 0;color:var(--tui-text-secondary)}caption[tuiCaption]>*{vertical-align:middle}caption[tuiCaption]>*:not(:first-child){margin-inline-start:.5rem}caption[tuiCaption] tui-pagination:not(:first-child),caption[tuiCaption] tui-pager:not(:first-child){display:inline-flex;vertical-align:middle}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableCaption, decorators: [{
type: Component,
args: [{ selector: 'caption[tuiCaption]', template: '<ng-content/>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["caption[tuiCaption]{caption-side:bottom;text-align:start;padding:.75rem 0;color:var(--tui-text-secondary)}caption[tuiCaption]>*{vertical-align:middle}caption[tuiCaption]>*:not(:first-child){margin-inline-start:.5rem}caption[tuiCaption] tui-pagination:not(:first-child),caption[tuiCaption] tui-pager:not(:first-child){display:inline-flex;vertical-align:middle}\n"] }]
}] });
class TuiTableCell {
constructor() {
this.tuiCell = input('');
this.template = inject((TemplateRef));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", type: TuiTableCell, isStandalone: true, selector: "ng-template[tuiCell]", inputs: { tuiCell: { classPropertyName: "tuiCell", publicName: "tuiCell", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableCell, decorators: [{
type: Directive,
args: [{ selector: 'ng-template[tuiCell]' }]
}] });
class TuiTableHead {
constructor() {
this.tuiHead = input.required();
this.template = inject((TemplateRef));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableHead, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", type: TuiTableHead, isStandalone: true, selector: "[tuiHead]", inputs: { tuiHead: { classPropertyName: "tuiHead", publicName: "tuiHead", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableHead, decorators: [{
type: Directive,
args: [{ selector: '[tuiHead]' }]
}] });
class TuiTableResized {
constructor() {
this.doc = inject(DOCUMENT);
this.el = tuiInjectElement();
this.tuiResized$ = tuiTypedFromEvent(this.el, 'mousedown').pipe(tuiPreventDefault(), switchMap(() => {
const { width, right } = this.el.closest('th')?.getBoundingClientRect() || EMPTY_CLIENT_RECT;
return tuiTypedFromEvent(this.doc, 'mousemove').pipe(distinctUntilChanged(), map(({ clientX }) => width + clientX - right), takeUntil(tuiTypedFromEvent(this.doc, 'mouseup')));
}));
this.tuiResized = outputFromObservable(this.tuiResized$);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableResized, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: TuiTableResized, isStandalone: true, selector: "[tuiResized]", outputs: { tuiResized: "tuiResized" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableResized, decorators: [{
type: Directive,
args: [{ selector: '[tuiResized]' }]
}] });
const TuiSortDirection = {
Asc: 1,
Desc: -1,
};
const TUI_TABLE_DEFAULT_OPTIONS = {
sticky: false,
resizable: false,
open: true,
size: 'm',
direction: TuiSortDirection.Asc,
requiredSort: false,
sortIcons: {
asc: '@tui.chevron-up',
desc: '@tui.chevron-down',
off: '@tui.chevrons-up-down',
},
};
const [TUI_TABLE_OPTIONS, tuiTableOptionsProvider] = tuiCreateOptions(TUI_TABLE_DEFAULT_OPTIONS);
// TODO: Consider making universal and moving to CDK
class TuiStuck {
constructor() {
this.stuck = toSignal(inject(WaIntersectionObserverService).pipe(map((entries) => (entries[entries.length - 1]?.intersectionRatio ?? 0) < 1), distinctUntilChanged(), tuiWatch(), catchError(() => EMPTY)));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiStuck, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: TuiStuck, isStandalone: true, host: { properties: { "class._stuck": "stuck()" } }, providers: [
WaIntersectionObserverService,
{ provide: WA_INTERSECTION_THRESHOLD, useValue: [0, 1] },
], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiStuck, decorators: [{
type: Directive,
args: [{
providers: [
WaIntersectionObserverService,
{ provide: WA_INTERSECTION_THRESHOLD, useValue: [0, 1] },
],
host: { '[class._stuck]': 'stuck()' },
}]
}] });
const EMPTY_COMPARATOR = () => 0;
class Styles {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: Styles, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: Styles, isStandalone: true, selector: "ng-component", exportAs: ["tui-table-5.2.0"], ngImport: i0, template: '', isInline: true, styles: ["table[tuiTable]:where(*[data-tui-version=\"5.2.0\"]){border-collapse:separate;border-spacing:0;isolation:isolate}table[tuiTable]:where(*[data-tui-version=\"5.2.0\"]) [tuiCell]{padding:0}table[tuiTable]:where(*[data-tui-version=\"5.2.0\"]) [tuiTitle]{white-space:nowrap}table[tuiTable]:where(*[data-tui-version=\"5.2.0\"]) [tuiTitle] tui-icon{font-size:1rem}table[tuiTable]:where(*[data-tui-version=\"5.2.0\"]) [tuiSubtitle]{color:var(--tui-text-secondary)}table[tuiTable]:where(*[data-tui-version=\"5.2.0\"]) [tuiTh] [tuiCell],table[tuiTable]:where(*[data-tui-version=\"5.2.0\"]) [tuiTh] [tuiTitle]{font:inherit;color:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: Styles, decorators: [{
type: Component,
args: [{ template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: `tui-table-${TUI_VERSION}`, styles: ["table[tuiTable]:where(*[data-tui-version=\"5.2.0\"]){border-collapse:separate;border-spacing:0;isolation:isolate}table[tuiTable]:where(*[data-tui-version=\"5.2.0\"]) [tuiCell]{padding:0}table[tuiTable]:where(*[data-tui-version=\"5.2.0\"]) [tuiTitle]{white-space:nowrap}table[tuiTable]:where(*[data-tui-version=\"5.2.0\"]) [tuiTitle] tui-icon{font-size:1rem}table[tuiTable]:where(*[data-tui-version=\"5.2.0\"]) [tuiSubtitle]{color:var(--tui-text-secondary)}table[tuiTable]:where(*[data-tui-version=\"5.2.0\"]) [tuiTh] [tuiCell],table[tuiTable]:where(*[data-tui-version=\"5.2.0\"]) [tuiTh] [tuiTitle]{font:inherit;color:inherit}\n"] }]
}] });
class TuiTableDirective {
constructor() {
this.options = inject(TUI_TABLE_OPTIONS);
this.nothing = tuiWithStyles(Styles);
this.computedSortChange = computed(() => ({
sortComparator: this.sorter(),
sortDirection: this.direction(),
}));
this.sortChangeOutput = effect(() => this.sortChange.emit(this.computedSortChange()));
this.columns = input([]);
this.size = input(this.options.size);
this.direction = model(this.options.direction);
this.sorter = model(EMPTY_COMPARATOR);
this.sortChange = output();
this.appearance = signal('table');
this.cleaner = signal(false);
}
updateSorterAndDirection(sorter) {
if (this.sorter() === sorter) {
this.updateSorter(this.sorter(), this.direction() === TuiSortDirection.Asc
? TuiSortDirection.Desc
: TuiSortDirection.Asc);
}
else {
this.updateSorter(sorter);
}
}
updateSorter(sorter, direction = TuiSortDirection.Asc) {
this.sorter.set(sorter || EMPTY_COMPARATOR.bind({}));
this.direction.set(direction);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", type: TuiTableDirective, isStandalone: true, selector: "table[tuiTable]", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, sorter: { classPropertyName: "sorter", publicName: "sorter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { direction: "directionChange", sorter: "sorterChange", sortChange: "sortChange" }, host: { attributes: { "tuiTable": "", "data-tui-version": "5.2.0" }, properties: { "attr.data-size": "size()" } }, providers: [
{
provide: WA_INTERSECTION_ROOT_MARGIN,
useValue: '10000px 10000px 10000px 0px',
},
tuiProvide(TUI_TEXTFIELD_OPTIONS, TuiTableDirective),
tuiButtonOptionsProvider({ size: 's' }),
tuiBadgeOptionsProvider({ size: 'm', appearance: 'neutral' }),
tuiChipOptionsProvider({ size: 'xxs', appearance: 'neutral' }),
tuiProgressOptionsProvider({ size: 's', color: 'var(--tui-text-action)' }),
], hostDirectives: [{ directive: TuiStuck }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableDirective, decorators: [{
type: Directive,
args: [{
selector: 'table[tuiTable]',
providers: [
{
provide: WA_INTERSECTION_ROOT_MARGIN,
useValue: '10000px 10000px 10000px 0px',
},
tuiProvide(TUI_TEXTFIELD_OPTIONS, TuiTableDirective),
tuiButtonOptionsProvider({ size: 's' }),
tuiBadgeOptionsProvider({ size: 'm', appearance: 'neutral' }),
tuiChipOptionsProvider({ size: 'xxs', appearance: 'neutral' }),
tuiProgressOptionsProvider({ size: 's', color: 'var(--tui-text-action)' }),
],
hostDirectives: [TuiStuck],
host: {
tuiTable: '',
'data-tui-version': TUI_VERSION,
'[attr.data-size]': 'size()',
},
}]
}] });
/// <reference types="@taiga-ui/tsconfig/ng-dev-mode" />
class TuiTableTh {
constructor() {
this.options = inject(TUI_TABLE_OPTIONS);
this.head = inject(TuiTableHead, { optional: true });
this.width = signal(null);
this.table = inject(forwardRef(() => TuiTableDirective), { optional: true });
this.minWidth = input(-Infinity);
this.maxWidth = input(Infinity);
this.sorter = model(this.head ? (a, b) => tuiDefaultSort(a[this.key], b[this.key]) : null);
this.resizable = input(this.options.resizable);
this.sticky = input(this.options.sticky);
this.requiredSort = input(this.options.requiredSort);
}
get key() {
if (!this.head) {
throw new TuiTableSortKeyException();
}
return this.head.tuiHead();
}
get isCurrent() {
return !!this.sorter && !!this.table && this.sorter() === this.table.sorter();
}
get icon() {
if (this.isCurrent) {
return this.table?.direction() === TuiSortDirection.Asc
? this.options.sortIcons.asc
: this.options.sortIcons.desc;
}
return this.options.sortIcons.off;
}
updateSorterAndDirection() {
const sorter = this.requiredSort() ? this.sorter() : null;
this.table?.updateSorterAndDirection(this.isCurrentAndDescDirection ? sorter : this.sorter());
}
onResized(width) {
this.width.set(Math.min(Math.max(width, this.minWidth()), this.maxWidth()));
}
get isCurrentAndDescDirection() {
return (this.sorter() === this.table?.sorter() &&
this.table?.direction() === TuiSortDirection.Desc);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableTh, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TuiTableTh, isStandalone: true, selector: "th[tuiTh]", inputs: { minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, sorter: { classPropertyName: "sorter", publicName: "sorter", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, requiredSort: { classPropertyName: "requiredSort", publicName: "requiredSort", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sorter: "sorterChange" }, host: { properties: { "style.min-width.px": "width() || minWidth()", "style.width.px": "width() || minWidth()", "style.max-width.px": "width() || maxWidth()", "class._sticky": "sticky()" } }, ngImport: i0, template: "@if (sorter() && table) {\n <button\n type=\"button\"\n class=\"t-sort\"\n [class.t-sort_sorted]=\"isCurrent\"\n (click)=\"updateSorterAndDirection()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\" />\n <tui-icon\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </button>\n} @else {\n <ng-container [ngTemplateOutlet]=\"content\" />\n}\n<ng-template #content>\n <ng-content />\n</ng-template>\n@if (resizable()) {\n <div\n class=\"t-bar\"\n (tuiResized)=\"onResized($event)\"\n ></div>\n}\n", styles: [":host{transition-property:box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;inset-block-start:0;block-size:var(--tui-height-m);font:var(--tui-typography-body-s);text-align:start;font-weight:700;color:var(--tui-text-secondary);background:var(--tui-background-base);cursor:default;padding:0 .75rem;box-sizing:border-box;box-shadow:0 .3125rem #ededed00;border:1px solid var(--tui-border-normal)}:host:not(:first-child){border-inline-start:none}:host._sticky,:host-context(._stuck) :host._sticky{position:sticky;z-index:3000}:host._sticky:first-child,:host-context(._stuck) :host._sticky:first-child{inset-inline-start:0}:host._sticky:after,:host-context(._stuck) :host._sticky:after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;inset-block-start:0;inset-inline-start:100%;inset-block-end:0;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host-context(._stuck) :host{z-index:2000}:host-context(tr:not(:first-child)){border-block-start:none}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-typography-body-m);font-weight:700;padding:0 1rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-typography-body-s);font-weight:700;padding:0 .5rem}:host-context(thead[tuiThead]){position:sticky}:host-context(table._stuck)._sticky:after{opacity:1}:host-context(thead[tuiThead]._stuck){box-shadow:0 .3125rem #edededb3}:host-context([tuiTheme=\"dark\"])._sticky:after{background:#3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck){box-shadow:0 .3125rem #3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck):first-child{box-shadow:.0625rem .3125rem #3c3c3ce6}:host-context(table[data-size=\"l\"] thead[tuiThead] tr:nth-child(2)){inset-block-start:var(--tui-height-l)}:host-context(table[data-size=\"m\"] thead[tuiThead] tr:nth-child(2)){inset-block-start:var(--tui-height-m)}:host-context(table[data-size=\"s\"] thead[tuiThead] tr:nth-child(2)){inset-block-start:var(--tui-height-s)}.t-sort{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;line-height:inherit;text-decoration:none;display:inline-flex;vertical-align:top;flex-direction:inherit;align-items:center;outline:none;font:inherit;text-transform:inherit;color:inherit;cursor:pointer}.t-sort_sorted{color:var(--tui-text-primary)}.t-sort:focus-visible{background:var(--tui-service-selection-background)}.t-sort:hover{color:var(--tui-text-primary)}.t-bar{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-end:-1px;inline-size:.1875rem;justify-self:flex-end;border-inline-start:2px solid transparent;background:var(--tui-status-warning);background-clip:content-box;cursor:ew-resize;opacity:0}.t-bar:hover,.t-bar:active{opacity:1}.t-icon:before{font-size:1rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }, { kind: "directive", type: TuiTableResized, selector: "[tuiResized]", outputs: ["tuiResized"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableTh, decorators: [{
type: Component,
args: [{ selector: 'th[tuiTh]', imports: [NgTemplateOutlet, TuiIcon, TuiTableResized], changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[style.min-width.px]': 'width() || minWidth()',
'[style.width.px]': 'width() || minWidth()',
'[style.max-width.px]': 'width() || maxWidth()',
'[class._sticky]': 'sticky()',
}, template: "@if (sorter() && table) {\n <button\n type=\"button\"\n class=\"t-sort\"\n [class.t-sort_sorted]=\"isCurrent\"\n (click)=\"updateSorterAndDirection()\"\n >\n <ng-container [ngTemplateOutlet]=\"content\" />\n <tui-icon\n class=\"t-icon\"\n [icon]=\"icon\"\n />\n </button>\n} @else {\n <ng-container [ngTemplateOutlet]=\"content\" />\n}\n<ng-template #content>\n <ng-content />\n</ng-template>\n@if (resizable()) {\n <div\n class=\"t-bar\"\n (tuiResized)=\"onResized($event)\"\n ></div>\n}\n", styles: [":host{transition-property:box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;inset-block-start:0;block-size:var(--tui-height-m);font:var(--tui-typography-body-s);text-align:start;font-weight:700;color:var(--tui-text-secondary);background:var(--tui-background-base);cursor:default;padding:0 .75rem;box-sizing:border-box;box-shadow:0 .3125rem #ededed00;border:1px solid var(--tui-border-normal)}:host:not(:first-child){border-inline-start:none}:host._sticky,:host-context(._stuck) :host._sticky{position:sticky;z-index:3000}:host._sticky:first-child,:host-context(._stuck) :host._sticky:first-child{inset-inline-start:0}:host._sticky:after,:host-context(._stuck) :host._sticky:after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;inset-block-start:0;inset-inline-start:100%;inset-block-end:0;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host-context(._stuck) :host{z-index:2000}:host-context(tr:not(:first-child)){border-block-start:none}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-typography-body-m);font-weight:700;padding:0 1rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-typography-body-s);font-weight:700;padding:0 .5rem}:host-context(thead[tuiThead]){position:sticky}:host-context(table._stuck)._sticky:after{opacity:1}:host-context(thead[tuiThead]._stuck){box-shadow:0 .3125rem #edededb3}:host-context([tuiTheme=\"dark\"])._sticky:after{background:#3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck){box-shadow:0 .3125rem #3c3c3ce6}:host-context([tuiTheme=\"dark\"] thead[tuiThead]._stuck):first-child{box-shadow:.0625rem .3125rem #3c3c3ce6}:host-context(table[data-size=\"l\"] thead[tuiThead] tr:nth-child(2)){inset-block-start:var(--tui-height-l)}:host-context(table[data-size=\"m\"] thead[tuiThead] tr:nth-child(2)){inset-block-start:var(--tui-height-m)}:host-context(table[data-size=\"s\"] thead[tuiThead] tr:nth-child(2)){inset-block-start:var(--tui-height-s)}.t-sort{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;appearance:none;padding:0;border:0;background:none;line-height:inherit;text-decoration:none;display:inline-flex;vertical-align:top;flex-direction:inherit;align-items:center;outline:none;font:inherit;text-transform:inherit;color:inherit;cursor:pointer}.t-sort_sorted{color:var(--tui-text-primary)}.t-sort:focus-visible{background:var(--tui-service-selection-background)}.t-sort:hover{color:var(--tui-text-primary)}.t-bar{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-end:-1px;inline-size:.1875rem;justify-self:flex-end;border-inline-start:2px solid transparent;background:var(--tui-status-warning);background-clip:content-box;cursor:ew-resize;opacity:0}.t-bar:hover,.t-bar:active{opacity:1}.t-icon:before{font-size:1rem}\n"] }]
}] });
class TuiTableSortKeyException extends Error {
constructor() {
super(ngDevMode ? 'Trying to sort with no key' : '');
}
}
class TuiTableSortable {
constructor() {
this.table = inject((TuiTableDirective));
this.th = inject((TuiTableTh));
this.sortBy = inject(forwardRef(() => TuiTableSortBy));
this.sortable = input(undefined, {
alias: 'tuiSortable',
transform: coerceBooleanProperty,
});
this.setThSorter = effect(() => {
this.th.sorter.set(this.sortable() ? this.sorter() : null);
});
this.setTableSorter = effect(() => {
if (this.match && untracked(this.table.sorter) !== this.sorter()) {
this.table.updateSorter(this.sorter());
}
});
this.sorter = computed(() => this.sortable() && untracked(() => this.match)
? untracked(this.table.sorter)
: () => 0);
}
get key() {
return this.th.key;
}
get match() {
return this.sortBy.tuiSortBy() === this.key;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableSortable, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", type: TuiTableSortable, isStandalone: true, selector: "th[tuiTh][tuiSortable]", inputs: { sortable: { classPropertyName: "sortable", publicName: "tuiSortable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableSortable, decorators: [{
type: Directive,
args: [{ selector: 'th[tuiTh][tuiSortable]' }]
}] });
class TuiTableSortBy {
constructor() {
this.table = inject((TuiTableDirective));
this.sortables = contentChildren(TuiTableSortable, {
descendants: true,
});
this.sortChange = computed(() => ({
sortKey: this.sortables().length ? this.getKey(this.table.sorter()) : null,
sortDirection: this.table.direction(),
}));
this.sortOutput = effect(() => {
if (this.sortables().length) {
this.tuiSortChange.emit(this.sortChange());
}
});
this.tuiSortChange = output();
this.tuiSortBy = input(null);
}
getKey(sorter) {
return this.sortables().find((s) => s.sorter() === sorter)?.key || null;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableSortBy, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.20", type: TuiTableSortBy, isStandalone: true, selector: "table[tuiTable][tuiSortBy]", inputs: { tuiSortBy: { classPropertyName: "tuiSortBy", publicName: "tuiSortBy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tuiSortChange: "tuiSortChange" }, queries: [{ propertyName: "sortables", predicate: TuiTableSortable, descendants: true, isSignal: true }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableSortBy, decorators: [{
type: Directive,
args: [{ selector: 'table[tuiTable][tuiSortBy]' }]
}] });
class TuiTableThead {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableThead, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.20", type: TuiTableThead, isStandalone: true, selector: "thead[tuiThead]", providers: [
{
provide: WA_INTERSECTION_ROOT_MARGIN,
useValue: '0px 10000px 10000px 10000px',
},
], hostDirectives: [{ directive: TuiStuck }], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableThead, decorators: [{
type: Directive,
args: [{
selector: 'thead[tuiThead]',
providers: [
{
provide: WA_INTERSECTION_ROOT_MARGIN,
useValue: '0px 10000px 10000px 10000px',
},
],
hostDirectives: [TuiStuck],
}]
}] });
class TuiSorterPipe {
transform(key) {
return (a, b) => tuiDefaultSort(a[key], b[key]);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiSorterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: TuiSorterPipe, isStandalone: true, name: "tuiSorter" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiSorterPipe, decorators: [{
type: Pipe,
args: [{ name: 'tuiSorter' }]
}] });
class TuiTableSortPipe {
constructor() {
this.table = inject((TuiTableDirective));
this.data = signal([]);
this.sorted = computed((direction = this.table.direction(), sorter = this.table.sorter()) => [...this.data()].sort((a, b) => direction * sorter(a, b)));
}
transform(data) {
untracked(() => this.data.set(data ?? []));
return this.sorted();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableSortPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.20", ngImport: i0, type: TuiTableSortPipe, isStandalone: true, name: "tuiTableSort", pure: false }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableSortPipe, decorators: [{
type: Pipe,
args: [{
name: 'tuiTableSort',
pure: false,
}]
}] });
class TuiTableExpand {
constructor() {
this.content = viewChild('content');
this.el = tuiInjectElement();
this.server = isPlatformServer(inject(PLATFORM_ID));
this.transitioning = signal(false);
this.contentHeight = computed((_ = this.expanded()) => this.update(this.content()));
this.visible$ = new Subject();
this.sub = this.visible$
.pipe(switchMap((v) => (v ? timer(500).pipe(map(() => v)) : of(v))), takeUntilDestroyed())
.subscribe((visible) => this.el.classList.toggle('_visible', visible));
this.expanded = model(inject(TUI_TABLE_OPTIONS).open);
this.transitioningEffect = effect((_, __ = this.expanded()) => this.transitioning.set(true));
}
toggle() {
this.expanded.set(!this.expanded());
}
update(content) {
if (!content || this.server) {
return 0;
}
const el = content.nativeElement;
el.style.setProperty('display', 'block');
const height = el.getBoundingClientRect().height;
el.style.removeProperty('display');
return height;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableExpand, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.20", type: TuiTableExpand, isStandalone: true, selector: "tui-table-expand", inputs: { expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expanded: "expandedChange" }, host: { attributes: { "ngSkipHydration": "true" }, listeners: { "tuiPresent": "visible$.next($event)" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.TuiPresent, outputs: ["tuiPresent", "tuiPresent"] }], ngImport: i0, template: "<div\n #content\n class=\"t-content\"\n [class.t-content_open]=\"expanded() && !transitioning()\"\n>\n <ng-content />\n</div>\n\n<div\n class=\"t-filler\"\n [class.t-filler_open]=\"expanded()\"\n [style.--t-height.px]=\"contentHeight()\"\n (animationcancel)=\"transitioning.set(false)\"\n (animationend)=\"transitioning.set(false)\"\n (animationstart)=\"transitioning.set(true)\"\n></div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes open{0%{block-size:0}to{block-size:var(--t-height)}}@keyframes close{0%{block-size:var(--t-height)}to{block-size:0}}:host{display:contents}:host:not(._visible){--tui-duration: 0ms}.t-content{display:none}.t-content_open{display:contents}.t-content_open ::ng-deep tr{animation:fade-in var(--tui-duration)}.t-filler{animation:close calc(var(--tui-duration) + 1ms)}.t-filler_open{animation:open calc(var(--tui-duration) + 1ms)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableExpand, decorators: [{
type: Component,
args: [{ selector: 'tui-table-expand', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
{
directive: TuiPresent,
outputs: ['tuiPresent'],
},
], host: {
ngSkipHydration: 'true',
'(tuiPresent)': 'visible$.next($event)',
}, template: "<div\n #content\n class=\"t-content\"\n [class.t-content_open]=\"expanded() && !transitioning()\"\n>\n <ng-content />\n</div>\n\n<div\n class=\"t-filler\"\n [class.t-filler_open]=\"expanded()\"\n [style.--t-height.px]=\"contentHeight()\"\n (animationcancel)=\"transitioning.set(false)\"\n (animationend)=\"transitioning.set(false)\"\n (animationstart)=\"transitioning.set(true)\"\n></div>\n", styles: ["@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes open{0%{block-size:0}to{block-size:var(--t-height)}}@keyframes close{0%{block-size:var(--t-height)}to{block-size:0}}:host{display:contents}:host:not(._visible){--tui-duration: 0ms}.t-content{display:none}.t-content_open{display:contents}.t-content_open ::ng-deep tr{animation:fade-in var(--tui-duration)}.t-filler{animation:close calc(var(--tui-duration) + 1ms)}.t-filler_open{animation:open calc(var(--tui-duration) + 1ms)}\n"] }]
}] });
class TuiTableTd {
constructor() {
this.control = contentChild((TuiControl));
this.textfield = contentChild((TuiTextfieldComponent));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableTd, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.20", type: TuiTableTd, isStandalone: true, selector: "th[tuiTd], td[tuiTd]", host: { properties: { "class._editable": "control() || textfield()" } }, queries: [{ propertyName: "control", first: true, predicate: (TuiControl), descendants: true, isSignal: true }, { propertyName: "textfield", first: true, predicate: (TuiTextfieldComponent), descendants: true, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;text-align:start;background:var(--tui-background-base);border:1px solid var(--tui-border-normal);border-block-start:none;box-sizing:border-box}:host:first-child{inset-inline-start:0}:host:not(:first-child){border-inline-start:none}:host._editable{padding:0!important;vertical-align:top}:host(th){position:sticky;z-index:100}:host(th):after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:100%;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host(th):focus-within:not(:disabled){z-index:1100}:host-context([tuiTheme=\"dark\"]):after{background:#3c3c3ce6}:host-context(table._stuck){z-index:1000}:host-context(table._stuck):last-of-type:after{opacity:1}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-typography-body-m);padding:calc(1rem - 1px) 1rem 1rem}:host-context(table[data-size=\"m\"]){block-size:var(--tui-height-m);font:var(--tui-typography-body-s);padding:calc(.625rem - 1px) .75rem .625rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-typography-body-s);padding:calc(.25rem - 1px) .5rem .25rem}:host(td):focus-within{z-index:100!important}:host(td):not(:focus-within){z-index:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableTd, decorators: [{
type: Component,
args: [{ selector: 'th[tuiTd], td[tuiTd]', template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class._editable]': 'control() || textfield()' }, styles: [":host{transition-property:background;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;text-align:start;background:var(--tui-background-base);border:1px solid var(--tui-border-normal);border-block-start:none;box-sizing:border-box}:host:first-child{inset-inline-start:0}:host:not(:first-child){border-inline-start:none}:host._editable{padding:0!important;vertical-align:top}:host(th){position:sticky;z-index:100}:host(th):after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;inset-block-start:0;inset-block-end:0;inset-inline-start:100%;inline-size:.3125rem;pointer-events:none;background:#edededb3;opacity:0}:host(th):focus-within:not(:disabled){z-index:1100}:host-context([tuiTheme=\"dark\"]):after{background:#3c3c3ce6}:host-context(table._stuck){z-index:1000}:host-context(table._stuck):last-of-type:after{opacity:1}:host-context(table[data-size=\"l\"]){block-size:var(--tui-height-l);font:var(--tui-typography-body-m);padding:calc(1rem - 1px) 1rem 1rem}:host-context(table[data-size=\"m\"]){block-size:var(--tui-height-m);font:var(--tui-typography-body-s);padding:calc(.625rem - 1px) .75rem .625rem}:host-context(table[data-size=\"s\"]){block-size:var(--tui-height-s);font:var(--tui-typography-body-s);padding:calc(.25rem - 1px) .5rem .25rem}:host(td):focus-within{z-index:100!important}:host(td):not(:focus-within){z-index:0}\n"] }]
}] });
class TuiTableTr {
constructor() {
this.cells = contentChildren(forwardRef(() => TuiTableCell));
this.body = inject(forwardRef(() => TuiTableTbody));
this.table = inject(forwardRef(() => TuiTableDirective));
this.items = computed(() => this.cells().reduce((record, item) => ({ ...record, [item.tuiCell()]: item }), {}));
this.item = computed(() => this.body.data()[this.body.rows().findIndex((row) => row === this)]);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableTr, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TuiTableTr, isStandalone: true, selector: "tr[tuiTr]", queries: [{ propertyName: "cells", predicate: i0.forwardRef(() => TuiTableCell), isSignal: true }], ngImport: i0, template: "@if (items(); as items) {\n @for (key of table.columns(); track key) {\n <ng-container [ngTemplateOutlet]=\"(items[key] && items[key].template) || plain\" />\n\n <ng-template #plain>\n <td tuiTd>\n {{ items[key] }}\n </td>\n </ng-template>\n }\n} @else {\n <td></td>\n}\n<ng-content />\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiTableTd, selector: "th[tuiTd], td[tuiTd]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableTr, decorators: [{
type: Component,
args: [{ selector: 'tr[tuiTr]', imports: [NgTemplateOutlet, TuiTableTd], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (items(); as items) {\n @for (key of table.columns(); track key) {\n <ng-container [ngTemplateOutlet]=\"(items[key] && items[key].template) || plain\" />\n\n <ng-template #plain>\n <td tuiTd>\n {{ items[key] }}\n </td>\n </ng-template>\n }\n} @else {\n <td></td>\n}\n<ng-content />\n" }]
}] });
class TuiTableTbody {
constructor() {
this.options = inject(TUI_TABLE_OPTIONS);
this.table = inject(forwardRef(() => TuiTableDirective));
this.rows = contentChildren(forwardRef(() => TuiTableTr));
this.data = input([]);
/** @deprecated: drop in v5.0, use TuiTableExpand */
this.heading = input();
/** @deprecated: drop in v5.0, use TuiTableExpand */
this.open = model(this.options.open);
/** @deprecated: drop in v5.0, use TuiTableExpand */
this.onClick = () => {
this.open.set(!this.open());
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableTbody, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: TuiTableTbody, isStandalone: true, selector: "tbody[tuiTbody]", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, queries: [{ propertyName: "rows", predicate: i0.forwardRef(() => TuiTableTr), isSignal: true }], ngImport: i0, template: "@if (heading()) {\n <tr>\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}\n@if (open()) {\n <ng-content />\n}\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{inset-inline-start:0}.t-expand:after{inset-inline-end: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-typography-body-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-typography-body-m);block-size:var(--tui-height-l)}.t-name{position:sticky;display:inline-block;inset-inline-start:.75rem}:host-context(table[data-size=\"l\"]) .t-name{inset-inline-start:1rem}.t-chevron{position:sticky;inset-inline-end:.75rem;margin:0 .6875rem 0 auto}\n"], dependencies: [{ kind: "directive", type: PolymorpheusOutlet, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "directive", type: TuiChevron, selector: "[tuiChevron]", inputs: ["tuiChevron"] }, { kind: "component", type: TuiIcon, selector: "tui-icon:not([tuiBadge])", inputs: ["background"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: TuiTableTbody, decorators: [{
type: Component,
args: [{ selector: 'tbody[tuiTbody]', imports: [PolymorpheusOutlet, TuiChevron, TuiIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (heading()) {\n <tr>\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}\n@if (open()) {\n <ng-content />\n}\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{inset-inline-start:0}.t-expand:after{inset-inline-end: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-typography-body-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-typography-body-m);block-size:var(--tui-height-l)}.t-name{position:sticky;display:inline-block;inset-inline-start:.75rem}:host-context(table[data-size=\"l\"]) .t-name{inset-inline-start:1rem}.t-chevron{position:sticky;inset-inline-end:.75rem;margin:0 .6875rem 0 auto}\n"] }]
}] });
class TuiTableThGroup {
constructor() {
this.th = contentChild(forwardRef(() => TuiTableTh));
this.heads = contentChildren(forwardRef(() => Tu