@taiga-ui/addon-table 3.58.0 → 3.59.0-canary.1c24449

package/fesm2015/taiga-ui-addon-table-components-table.mjs

@@ -0,0 +1,771 @@
+import * as i0 from '@angular/core';
+import { TemplateRef, Directive, Inject, Input, InjectionToken, ElementRef, SkipSelf, forwardRef, EventEmitter, ChangeDetectorRef, HostBinding, Output, Component, ChangeDetectionStrategy, Optional, ContentChildren, Pipe, ContentChild, NgModule } from '@angular/core';
+import { map, switchMap, distinctUntilChanged, takeUntil, delay, filter, startWith } from 'rxjs/operators';
+import { IntersectionObserverService, INTERSECTION_ROOT_MARGIN, INTERSECTION_THRESHOLD } from '@ng-web-apis/intersection-observer';
+import * as i4 from '@taiga-ui/cdk';
+import { tuiCreateToken, tuiProvideOptions, AbstractTuiController, tuiTypedFromEvent, tuiPreventDefault, tuiDefaultSort, TuiTableSortKeyException, EMPTY_QUERY, tuiPure, TuiDestroyService, tuiQueryListChanges, TuiMapperPipeModule } from '@taiga-ui/cdk';
+import * as i2 from '@taiga-ui/core';
+import { TUI_TEXTFIELD_APPEARANCE_DIRECTIVE, TuiTextfieldAppearanceDirective, TuiAppearance, TUI_TEXTFIELD_LABEL_OUTSIDE, TUI_TEXTFIELD_SIZE, MODE_PROVIDER, TUI_MODE, TUI_ELEMENT_REF, tuiWatchedControllerFactory, TuiSvgModule } from '@taiga-ui/core';
+import { TUI_INPUT_COUNT_OPTIONS, TUI_ARROW_OPTIONS } from '@taiga-ui/kit';
+import * as i1 from 'rxjs';
+import { ReplaySubject } from 'rxjs';
+import * as i1$1 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
+import { __decorate, __awaiter } from 'tslib';
+import * as i2$1 from '@tinkoff/ng-polymorpheus';
+import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
+import { NgControl } from '@angular/forms';
+
+class TuiCellDirective {
+    constructor(template) {
+        this.template = template;
+        this.tuiCell = '';
+    }
+}
+TuiCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiCellDirective, deps: [{ token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TuiCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TuiCellDirective, selector: "[tuiCell]", inputs: { tuiCell: "tuiCell" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiCellDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tuiCell]',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.TemplateRef, decorators: [{
+                        type: Inject,
+                        args: [TemplateRef]
+                    }] }];
+    }, propDecorators: { tuiCell: [{
+                type: Input
+            }] } });
+
+/**
+ * Stream of sticky stuck events
+ */
+const TUI_STUCK = new InjectionToken(`[TUI_STUCK]`);
+const TUI_STUCK_PROVIDER = {
+    provide: TUI_STUCK,
+    deps: [ElementRef, IntersectionObserverService],
+    useFactory: ({ nativeElement }, entries$) => {
+        const stream$ = entries$.pipe(map(([{ intersectionRatio }]) => intersectionRatio < 1));
+        nativeElement[`$.class._stuck`] = stream$;
+        return stream$;
+    },
+};
+
+const TUI_TABLE_PROVIDERS = [
+    {
+        provide: INTERSECTION_ROOT_MARGIN,
+        useValue: `10000px 10000px 10000px 0px`,
+    },
+    {
+        provide: INTERSECTION_THRESHOLD,
+        useValue: [0, 1],
+    },
+    {
+        provide: TUI_TEXTFIELD_APPEARANCE_DIRECTIVE,
+        useFactory: () => {
+            const directive = new TuiTextfieldAppearanceDirective();
+            directive.appearance = TuiAppearance.Table;
+            return directive;
+        },
+    },
+    {
+        provide: TUI_TEXTFIELD_LABEL_OUTSIDE,
+        useValue: {
+            labelOutside: true,
+        },
+    },
+    {
+        provide: TUI_INPUT_COUNT_OPTIONS,
+        deps: [[new SkipSelf(), TUI_INPUT_COUNT_OPTIONS]],
+        useFactory: (options) => (Object.assign(Object.assign({}, options), { hideButtons: true })),
+    },
+    {
+        provide: TUI_TEXTFIELD_SIZE,
+        useExisting: forwardRef(() => TuiTableDirective),
+    },
+    IntersectionObserverService,
+    MODE_PROVIDER,
+    TUI_STUCK_PROVIDER,
+];
+
+const TUI_TABLE_DEFAULT_OPTIONS = {
+    sticky: false,
+    resizable: false,
+    open: true,
+    size: `m`,
+    direction: 1,
+    sortIcons: {
+        asc: `tuiIconSortAscending`,
+        desc: `tuiIconSortDescending`,
+        off: `tuiIconSortOff`,
+    },
+};
+const TUI_TABLE_OPTIONS = tuiCreateToken(TUI_TABLE_DEFAULT_OPTIONS);
+function tuiTableOptionsProvider(options) {
+    return tuiProvideOptions(TUI_TABLE_OPTIONS, options, TUI_TABLE_DEFAULT_OPTIONS);
+}
+
+class TuiTableDirective extends AbstractTuiController {
+    constructor(entries$, mode$, stuck$, options, cdr) {
+        super();
+        this.entries$ = entries$;
+        this.mode$ = mode$;
+        this.stuck$ = stuck$;
+        this.options = options;
+        this.cdr = cdr;
+        this.columns = [];
+        this.size = this.options.size;
+        this.direction = this.options.direction;
+        this.directionChange = new EventEmitter();
+        this.sorterChange = new EventEmitter();
+        this.sorter = () => 0;
+    }
+    updateSorterAndDirection(sorter) {
+        if (this.sorter === sorter) {
+            this.updateDirection(this.direction === 1 ? -1 : 1);
+        }
+        else {
+            this.updateSorter(sorter);
+            this.updateDirection(1);
+        }
+    }
+    ngAfterViewInit() {
+        this.cdr.detectChanges();
+    }
+    updateSorter(sorter) {
+        this.sorter = sorter || (() => 0);
+        this.sorterChange.emit(this.sorter);
+        this.change$.next();
+    }
+    updateDirection(direction) {
+        this.direction = direction;
+        this.directionChange.emit(this.direction);
+        this.change$.next();
+    }
+}
+TuiTableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiTableDirective, deps: [{ token: IntersectionObserverService }, { token: TUI_MODE }, { token: TUI_STUCK }, { token: TUI_TABLE_OPTIONS }, { token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+TuiTableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TuiTableDirective, selector: "table[tuiTable]", inputs: { columns: "columns", size: "size", direction: "direction", sorter: "sorter" }, outputs: { directionChange: "directionChange", sorterChange: "sorterChange" }, host: { listeners: { "$.data-mode.attr": "mode$", "$.class._stuck": "stuck$" }, properties: { "attr.data-size": "this.size" }, styleAttribute: "border-collapse: separate" }, providers: TUI_TABLE_PROVIDERS, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiTableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'table[tuiTable]',
+                    providers: TUI_TABLE_PROVIDERS,
+                    host: {
+                        '($.data-mode.attr)': 'mode$',
+                        '($.class._stuck)': 'stuck$',
+                        style: 'border-collapse: separate',
+                    },
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i1.Observable, decorators: [{
+                        type: Inject,
+                        args: [IntersectionObserverService]
+                    }] }, { type: i1.Observable, decorators: [{
+                        type: Inject,
+                        args: [TUI_MODE]
+                    }] }, { type: i1.Observable, decorators: [{
+                        type: Inject,
+                        args: [TUI_STUCK]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [TUI_TABLE_OPTIONS]
+                    }] }, { type: i0.ChangeDetectorRef, decorators: [{
+                        type: Inject,
+                        args: [ChangeDetectorRef]
+                    }] }];
+    }, propDecorators: { columns: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-size']
+            }], direction: [{
+                type: Input
+            }], directionChange: [{
+                type: Output
+            }], sorterChange: [{
+                type: Output
+            }], sorter: [{
+                type: Input
+            }] } });
+
+class TuiDirectionOrderDirective {
+    set directionOrder(order) {
+        this.table.direction = order === 'asc' ? 1 : -1;
+    }
+    constructor(table) {
+        this.table = table;
+        this.directionOrderChange = this.table.directionChange.pipe(map(dir => (dir === 1 ? 'asc' : 'desc')));
+    }
+}
+TuiDirectionOrderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiDirectionOrderDirective, deps: [{ token: TuiTableDirective }], target: i0.ɵɵFactoryTarget.Directive });
+TuiDirectionOrderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TuiDirectionOrderDirective, selector: "table[tuiTable][tuiDirectionOrder]", inputs: { directionOrder: "directionOrder" }, outputs: { directionOrderChange: "directionOrderChange" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiDirectionOrderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'table[tuiTable][tuiDirectionOrder]',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: TuiTableDirective, decorators: [{
+                        type: Inject,
+                        args: [TuiTableDirective]
+                    }] }];
+    }, propDecorators: { directionOrder: [{
+                type: Input
+            }], directionOrderChange: [{
+                type: Output
+            }] } });
+
+class TuiHeadDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+TuiHeadDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHeadDirective, deps: [{ token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TuiHeadDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TuiHeadDirective, selector: "[tuiHead]", inputs: { tuiHead: "tuiHead" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiHeadDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tuiHead]',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.TemplateRef, decorators: [{
+                        type: Inject,
+                        args: [TemplateRef]
+                    }] }];
+    }, propDecorators: { tuiHead: [{
+                type: Input
+            }] } });
+
+class TuiResizedDirective {
+    constructor(doc, el, parentRef) {
+        this.doc = doc;
+        this.el = el;
+        this.parentRef = parentRef;
+        this.tuiResized = tuiTypedFromEvent(this.el.nativeElement, 'mousedown').pipe(tuiPreventDefault(), switchMap(() => {
+            const { width, right } = this.parentRef.nativeElement.getBoundingClientRect();
+            return tuiTypedFromEvent(this.doc, 'mousemove').pipe(distinctUntilChanged(), map(({ clientX }) => width + clientX - right), takeUntil(tuiTypedFromEvent(this.doc, 'mouseup')));
+        }));
+    }
+}
+TuiResizedDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiResizedDirective, deps: [{ token: DOCUMENT }, { token: ElementRef }, { token: TUI_ELEMENT_REF }], target: i0.ɵɵFactoryTarget.Directive });
+TuiResizedDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TuiResizedDirective, selector: "[tuiResized]", outputs: { tuiResized: "tuiResized" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiResizedDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tuiResized]',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: Document, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: i0.ElementRef, decorators: [{
+                        type: Inject,
+                        args: [ElementRef]
+                    }] }, { type: i0.ElementRef, decorators: [{
+                        type: Inject,
+                        args: [TUI_ELEMENT_REF]
+                    }] }];
+    }, propDecorators: { tuiResized: [{
+                type: Output
+            }] } });
+
+/**
+ * @deprecated use `*ngFor` + `tuiTableSort`-pipe instead.
+ * See example {@link https://taiga-ui.dev/components/table/Setup}
+ * ___
+ * TODO v4.0 delete it.
+ */
+class TuiRowDirective {
+    constructor(template) {
+        this.template = template;
+        this.tuiRowOf = [];
+    }
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+}
+TuiRowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiRowDirective, deps: [{ token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TuiRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TuiRowDirective, selector: "ng-template[tuiRow]", inputs: { tuiRowOf: "tuiRowOf" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiRowDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[tuiRow]',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i0.TemplateRef, decorators: [{
+                        type: Inject,
+                        args: [TemplateRef]
+                    }] }];
+    }, propDecorators: { tuiRowOf: [{
+                type: Input
+            }] } });
+
+class TuiThComponent {
+    constructor(options, head, table) {
+        this.options = options;
+        this.head = head;
+        this.table = table;
+        this.sorter = this.head
+            ? (a, b) => tuiDefaultSort(a[this.key], b[this.key])
+            : null;
+        this.resizable = this.options.resizable;
+        this.sticky = this.options.sticky;
+        this.width = null;
+    }
+    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() {
+        var _a;
+        if (this.isCurrent) {
+            return ((_a = this.table) === null || _a === void 0 ? void 0 : _a.direction) === 1
+                ? this.options.sortIcons.desc
+                : this.options.sortIcons.asc;
+        }
+        return this.options.sortIcons.off;
+    }
+    updateSorterAndDirection() {
+        var _a;
+        (_a = this.table) === null || _a === void 0 ? void 0 : _a.updateSorterAndDirection(this.isCurrentAndAscDirection ? null : this.sorter);
+    }
+    onResized(width) {
+        this.width = width;
+    }
+    get isCurrentAndAscDirection() {
+        var _a, _b;
+        return this.sorter === ((_a = this.table) === null || _a === void 0 ? void 0 : _a.sorter) && ((_b = this.table) === null || _b === void 0 ? void 0 : _b.direction) === -1;
+    }
+}
+TuiThComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiThComponent, deps: [{ token: TUI_TABLE_OPTIONS }, { token: TuiHeadDirective, optional: true }, { token: forwardRef(() => TuiTableDirective), optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TuiThComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TuiThComponent, selector: "th[tuiTh]", inputs: { sorter: "sorter", resizable: "resizable", sticky: "sticky" }, host: { properties: { "class._sticky": "this.sticky", "style.width.px": "this.width" } }, providers: [
+        {
+            provide: TUI_ELEMENT_REF,
+            useExisting: ElementRef,
+        },
+    ], ngImport: i0, template: "<button\n    *ngIf=\"sorter && table; else content\"\n    type=\"button\"\n    class=\"t-sort\"\n    [class.t-sort_sorted]=\"isCurrent\"\n    (click)=\"updateSorterAndDirection()\"\n>\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n    {{ table.change$ | async }}\n    <tui-svg\n        class=\"t-sort-icon\"\n        [src]=\"icon\"\n    ></tui-svg>\n</button>\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n<div\n    *ngIf=\"resizable\"\n    class=\"t-bar\"\n    (tuiResized)=\"onResized($event)\"\n></div>\n", styles: [":host{transition-property:box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;top:0;height:var(--tui-height-m);font:var(--tui-font-text-s);text-align:left;font-weight:700;color:var(--tui-text-02);background:var(--tui-base-01);cursor:default;padding:0 .75rem;box-sizing:border-box;box-shadow:0 .3125rem #ededed00;border:1px solid var(--tui-base-04);filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:not(:first-child){border-left:none}:host._sticky,:host-context(._stuck) :host._sticky{position:-webkit-sticky;position:sticky;z-index:30}:host._sticky:first-child,:host-context(._stuck) :host._sticky:first-child{left: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;top:0;left:100%;bottom:0;width:.3125rem;pointer-events:none;background:rgba(237,237,237,.7);opacity:0}:host-context(._stuck) :host{z-index:20}:host-context(tr:not(:first-child)){border-top:none}:host-context(table[data-size=\"l\"]){height:var(--tui-height-l);font:var(--tui-font-text-m);font-weight:700;padding:0 1rem}:host-context(thead[tuiThead]){position:-webkit-sticky;position:sticky}:host-context(table._stuck)._sticky:after{opacity:1}:host-context(thead[tuiThead]._stuck){box-shadow:0 .3125rem #edededb3}:host-context(table[data-mode=\"onDark\"]):after{background:rgba(60,60,60,.9)}:host-context(table[data-mode=\"onDark\"] thead[tuiThead]._stuck){box-shadow:0 .3125rem #3c3c3ce6}:host-context(table[data-mode=\"onDark\"] thead[tuiThead]._stuck):first-child{box-shadow:.0625rem .3125rem #3c3c3ce6}:host-context(table[data-size=\"l\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-l)}:host-context(table[data-size=\"m\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-m)}:host-context(table[data-size=\"s\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-s)}.t-sort{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:none;font-size:inherit;line-height:inherit;text-decoration:none;display:inline-flex;flex-direction:inherit;align-items:center;outline:none;font-weight:700;cursor:pointer}.t-sort_sorted{color:var(--tui-text-01)}.t-sort:focus-visible{background:var(--tui-selection)}.t-sort:hover{color:var(--tui-text-01)}.t-bar{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:0;bottom:0;right:-1px;width:3px;justify-self:flex-end;border-left:2px solid transparent;background:var(--tui-support-12);background-clip:content-box;cursor:ew-resize;opacity:0}.t-bar:hover,.t-bar:active{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "directive", type: TuiResizedDirective, selector: "[tuiResized]", outputs: ["tuiResized"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiThComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'th[tuiTh]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: TUI_ELEMENT_REF,
+                            useExisting: ElementRef,
+                        },
+                    ], template: "<button\n    *ngIf=\"sorter && table; else content\"\n    type=\"button\"\n    class=\"t-sort\"\n    [class.t-sort_sorted]=\"isCurrent\"\n    (click)=\"updateSorterAndDirection()\"\n>\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n    {{ table.change$ | async }}\n    <tui-svg\n        class=\"t-sort-icon\"\n        [src]=\"icon\"\n    ></tui-svg>\n</button>\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n<div\n    *ngIf=\"resizable\"\n    class=\"t-bar\"\n    (tuiResized)=\"onResized($event)\"\n></div>\n", styles: [":host{transition-property:box-shadow;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;top:0;height:var(--tui-height-m);font:var(--tui-font-text-s);text-align:left;font-weight:700;color:var(--tui-text-02);background:var(--tui-base-01);cursor:default;padding:0 .75rem;box-sizing:border-box;box-shadow:0 .3125rem #ededed00;border:1px solid var(--tui-base-04);filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:not(:first-child){border-left:none}:host._sticky,:host-context(._stuck) :host._sticky{position:-webkit-sticky;position:sticky;z-index:30}:host._sticky:first-child,:host-context(._stuck) :host._sticky:first-child{left: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;top:0;left:100%;bottom:0;width:.3125rem;pointer-events:none;background:rgba(237,237,237,.7);opacity:0}:host-context(._stuck) :host{z-index:20}:host-context(tr:not(:first-child)){border-top:none}:host-context(table[data-size=\"l\"]){height:var(--tui-height-l);font:var(--tui-font-text-m);font-weight:700;padding:0 1rem}:host-context(thead[tuiThead]){position:-webkit-sticky;position:sticky}:host-context(table._stuck)._sticky:after{opacity:1}:host-context(thead[tuiThead]._stuck){box-shadow:0 .3125rem #edededb3}:host-context(table[data-mode=\"onDark\"]):after{background:rgba(60,60,60,.9)}:host-context(table[data-mode=\"onDark\"] thead[tuiThead]._stuck){box-shadow:0 .3125rem #3c3c3ce6}:host-context(table[data-mode=\"onDark\"] thead[tuiThead]._stuck):first-child{box-shadow:.0625rem .3125rem #3c3c3ce6}:host-context(table[data-size=\"l\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-l)}:host-context(table[data-size=\"m\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-m)}:host-context(table[data-size=\"s\"] thead[tuiThead] tr:nth-child(2)){top:var(--tui-height-s)}.t-sort{transition-property:color;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:none;font-size:inherit;line-height:inherit;text-decoration:none;display:inline-flex;flex-direction:inherit;align-items:center;outline:none;font-weight:700;cursor:pointer}.t-sort_sorted{color:var(--tui-text-01)}.t-sort:focus-visible{background:var(--tui-selection)}.t-sort:hover{color:var(--tui-text-01)}.t-bar{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:absolute;top:0;bottom:0;right:-1px;width:3px;justify-self:flex-end;border-left:2px solid transparent;background:var(--tui-support-12);background-clip:content-box;cursor:ew-resize;opacity:0}.t-bar:hover,.t-bar:active{opacity:1}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [TUI_TABLE_OPTIONS]
+                    }] }, { type: TuiHeadDirective, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [TuiHeadDirective]
+                    }] }, { type: TuiTableDirective, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [forwardRef(() => TuiTableDirective)]
+                    }] }];
+    }, propDecorators: { sorter: [{
+                type: Input
+            }], resizable: [{
+                type: Input
+            }], sticky: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class._sticky']
+            }], width: [{
+                type: HostBinding,
+                args: ['style.width.px']
+            }] } });
+
+class TuiSortableDirective {
+    constructor(sortBy, table, th) {
+        this.sortBy = sortBy;
+        this.table = table;
+        this.th = th;
+        this.sorter = () => 0;
+    }
+    get key() {
+        return this.th.key;
+    }
+    ngOnInit() {
+        this.sorter = this.match ? this.table.sorter : this.sorter;
+        this.th.sorter = this.sorter;
+    }
+    check() {
+        if (this.match && this.table.sorter !== this.sorter) {
+            this.table.updateSorter(this.sorter);
+        }
+    }
+    get match() {
+        return this.sortBy.tuiSortBy === this.key;
+    }
+}
+TuiSortableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiSortableDirective, deps: [{ token: forwardRef(() => TuiSortByDirective) }, { token: TuiTableDirective }, { token: TuiThComponent }], target: i0.ɵɵFactoryTarget.Directive });
+TuiSortableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TuiSortableDirective, selector: "th[tuiTh][tuiSortable]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiSortableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'th[tuiTh][tuiSortable]',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: TuiSortByDirective, decorators: [{
+                        type: Inject,
+                        args: [forwardRef(() => TuiSortByDirective)]
+                    }] }, { type: TuiTableDirective, decorators: [{
+                        type: Inject,
+                        args: [TuiTableDirective]
+                    }] }, { type: TuiThComponent, decorators: [{
+                        type: Inject,
+                        args: [TuiThComponent]
+                    }] }];
+    } });
+
+class TuiSortByDirective {
+    set sortBy(sortBy) {
+        this.tuiSortBy = sortBy;
+        this.checkSortables();
+    }
+    constructor(table) {
+        this.table = table;
+        this.sortables = EMPTY_QUERY;
+        this.tuiSortByChange = this.table.sorterChange.pipe(
+        // delay is for getting actual ContentChildren (sortables) https://github.com/angular/angular/issues/38976
+        delay(0), filter(() => !!this.sortables.length), map(sorter => this.getKey(sorter)));
+        this.tuiSortBy = null;
+    }
+    checkSortables() {
+        this.sortables.forEach(s => s.check());
+    }
+    getKey(sorter) {
+        var _a;
+        return ((_a = this.sortables.find(s => s.sorter === sorter)) === null || _a === void 0 ? void 0 : _a.key) || null;
+    }
+}
+TuiSortByDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiSortByDirective, deps: [{ token: TuiTableDirective }], target: i0.ɵɵFactoryTarget.Directive });
+TuiSortByDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TuiSortByDirective, selector: "table[tuiTable][tuiSortBy]", inputs: { sortBy: ["tuiSortBy", "sortBy"] }, outputs: { tuiSortByChange: "tuiSortByChange" }, queries: [{ propertyName: "sortables", predicate: TuiSortableDirective, descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiSortByDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'table[tuiTable][tuiSortBy]',
+                }]
+        }], ctorParameters: function () {
+        return [{ type: TuiTableDirective, decorators: [{
+                        type: Inject,
+                        args: [TuiTableDirective]
+                    }] }];
+    }, propDecorators: { sortables: [{
+                type: ContentChildren,
+                args: [TuiSortableDirective, { descendants: true }]
+            }], sortBy: [{
+                type: Input,
+                args: ['tuiSortBy']
+            }], tuiSortByChange: [{
+                type: Output
+            }] } });
+
+class TuiTheadDirective {
+    constructor(stuck$) {
+        this.stuck$ = stuck$;
+    }
+}
+TuiTheadDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiTheadDirective, deps: [{ token: TUI_STUCK }], target: i0.ɵɵFactoryTarget.Directive });
+TuiTheadDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TuiTheadDirective, selector: "thead[tuiThead]", host: { listeners: { "$.class._stuck": "stuck$" } }, providers: [
+        TUI_STUCK_PROVIDER,
+        IntersectionObserverService,
+        {
+            provide: INTERSECTION_ROOT_MARGIN,
+            useValue: '0px 10000px 10000px 10000px',
+        },
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiTheadDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'thead[tuiThead]',
+                    providers: [
+                        TUI_STUCK_PROVIDER,
+                        IntersectionObserverService,
+                        {
+                            provide: INTERSECTION_ROOT_MARGIN,
+                            useValue: '0px 10000px 10000px 10000px',
+                        },
+                    ],
+                    host: {
+                        '($.class._stuck)': 'stuck$',
+                    },
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i1.Observable, decorators: [{
+                        type: Inject,
+                        args: [TUI_STUCK]
+                    }] }];
+    } });
+
+class TuiTableSortPipe {
+    constructor(table) {
+        this.table = table;
+    }
+    transform(data) {
+        return this.sort(data, this.table.sorter, this.table.direction);
+    }
+    sort(data, sorter, direction) {
+        return [...data].sort((a, b) => direction * sorter(a, b));
+    }
+}
+TuiTableSortPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiTableSortPipe, deps: [{ token: TuiTableDirective }], target: i0.ɵɵFactoryTarget.Pipe });
+TuiTableSortPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TuiTableSortPipe, name: "tuiTableSort", pure: false });
+__decorate([
+    tuiPure
+], TuiTableSortPipe.prototype, "sort", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiTableSortPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: `tuiTableSort`,
+                    pure: false,
+                }]
+        }], ctorParameters: function () {
+        return [{ type: TuiTableDirective, decorators: [{
+                        type: Inject,
+                        args: [TuiTableDirective]
+                    }] }];
+    }, propDecorators: { sort: [] } });
+
+const TUI_TABLE_PROVIDER = [
+    TuiDestroyService,
+    TuiTableSortPipe,
+    {
+        provide: TuiTableDirective,
+        deps: [[new SkipSelf(), TuiTableDirective], ChangeDetectorRef, TuiDestroyService],
+        useFactory: tuiWatchedControllerFactory,
+    },
+];
+
+class TuiTdComponent {
+}
+TuiTdComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiTdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TuiTdComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TuiTdComponent, selector: "th[tuiTd], td[tuiTd]", host: { properties: { "class._editable": "this.control" } }, queries: [{ propertyName: "control", first: true, predicate: NgControl, descendants: true }], ngImport: i0, template: `
+        <ng-content></ng-content>
+    `, isInline: true, styles: [":host{position:relative;height:var(--tui-height-m);font:var(--tui-font-text-s);text-align:left;padding:0 .75rem;background:var(--tui-base-01);border:1px solid var(--tui-base-04);border-top:none;box-sizing:border-box;filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:first-child{left:0}:host:not(:first-child){border-left:none}:host._editable:focus-within{z-index:1}:host._editable{padding:0;vertical-align:top}:host(th){position:-webkit-sticky;position:sticky;z-index:1}:host(th):after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;bottom:0;left:100%;width:.3125rem;pointer-events:none;background:rgba(237,237,237,.7);opacity:0}:host(th):focus-within:not(:disabled){z-index:11}:host-context(table[data-mode=\"onDark\"]):after{background:rgba(60,60,60,.9)}:host-context(table._stuck){z-index:10}:host-context(table._stuck):last-of-type:after{opacity:1}:host-context(table[data-size=\"l\"]){font:var(--tui-font-text-m);height:var(--tui-height-l);padding-left:1rem;padding-right:1rem}:host-context(table[data-size=\"l\"])._editable{padding:0}:host(td):focus-within{z-index:1}:host(td):not(:focus-within){z-index:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiTdComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'th[tuiTd], td[tuiTd]', template: `
+        <ng-content></ng-content>
+    `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:relative;height:var(--tui-height-m);font:var(--tui-font-text-s);text-align:left;padding:0 .75rem;background:var(--tui-base-01);border:1px solid var(--tui-base-04);border-top:none;box-sizing:border-box;filter:opacity(1)}@supports (-webkit-hyphens: none){:host{transform:translateZ(0)}}:host:first-child{left:0}:host:not(:first-child){border-left:none}:host._editable:focus-within{z-index:1}:host._editable{padding:0;vertical-align:top}:host(th){position:-webkit-sticky;position:sticky;z-index:1}:host(th):after{transition-property:opacity;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;content:\"\";position:absolute;top:0;bottom:0;left:100%;width:.3125rem;pointer-events:none;background:rgba(237,237,237,.7);opacity:0}:host(th):focus-within:not(:disabled){z-index:11}:host-context(table[data-mode=\"onDark\"]):after{background:rgba(60,60,60,.9)}:host-context(table._stuck){z-index:10}:host-context(table._stuck):last-of-type:after{opacity:1}:host-context(table[data-size=\"l\"]){font:var(--tui-font-text-m);height:var(--tui-height-l);padding-left:1rem;padding-right:1rem}:host-context(table[data-size=\"l\"])._editable{padding:0}:host(td):focus-within{z-index:1}:host(td):not(:focus-within){z-index:0}\n"] }]
+        }], propDecorators: { control: [{
+                type: HostBinding,
+                args: ['class._editable']
+            }, {
+                type: ContentChild,
+                args: [NgControl]
+            }] } });
+
+class TuiTrComponent {
+    constructor(table, body) {
+        this.table = table;
+        this.body = body;
+        this.cells = EMPTY_QUERY;
+        this.contentReady$ = new ReplaySubject(1);
+        this.cells$ = this.contentReady$.pipe(switchMap(() => tuiQueryListChanges(this.cells)), map(cells => cells.reduce((record, item) => (Object.assign(Object.assign({}, record), { [item.tuiCell]: item })), {})));
+        this.item$ = this.contentReady$.pipe(switchMap(() => tuiQueryListChanges(this.body.rows)), map(rows => 
+        /**
+         * TODO v4.0 replace `this.body.sorted` with `this.body.data` (don't forget to drop `sorted`-getter).
+         */
+        this.body.sorted[rows.findIndex(row => row === this)]));
+    }
+    ngAfterContentInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield Promise.resolve();
+            this.contentReady$.next(true);
+        });
+    }
+}
+TuiTrComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiTrComponent, deps: [{ token: forwardRef(() => TuiTableDirective) }, { token: forwardRef(() => TuiTbodyComponent) }], target: i0.ɵɵFactoryTarget.Component });
+TuiTrComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TuiTrComponent, selector: "tr[tuiTr]", providers: [TUI_TABLE_PROVIDER], queries: [{ propertyName: "cells", predicate: i0.forwardRef(function () { return TuiCellDirective; }) }], ngImport: i0, template: "<ng-container *ngIf=\"cells$ | async as items\">\n    <ng-container\n        *ngFor=\"let key of table.columns\"\n        [ngTemplateOutlet]=\"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", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiTdComponent, selector: "th[tuiTd], td[tuiTd]" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiTrComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tr[tuiTr]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TUI_TABLE_PROVIDER], template: "<ng-container *ngIf=\"cells$ | async as items\">\n    <ng-container\n        *ngFor=\"let key of table.columns\"\n        [ngTemplateOutlet]=\"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" }]
+        }], ctorParameters: function () {
+        return [{ type: TuiTableDirective, decorators: [{
+                        type: Inject,
+                        args: [forwardRef(() => TuiTableDirective)]
+                    }] }, { type: TuiTbodyComponent, decorators: [{
+                        type: Inject,
+                        args: [forwardRef(() => TuiTbodyComponent)]
+                    }] }];
+    }, propDecorators: { cells: [{
+                type: ContentChildren,
+                args: [forwardRef(() => TuiCellDirective)]
+            }] } });
+
+class TuiTbodyComponent {
+    constructor(pipe, options, arrowOptions, table) {
+        this.pipe = pipe;
+        this.options = options;
+        this.arrowOptions = arrowOptions;
+        this.table = table;
+        this.data = [];
+        this.open = this.options.open;
+        this.openChange = new EventEmitter();
+        this.rows = EMPTY_QUERY;
+        this.toContext = ($implicit, index) => ({ $implicit, index });
+    }
+    get sorted() {
+        return this.pipe.transform(this.data);
+    }
+    onClick() {
+        this.open = !this.open;
+        this.openChange.emit(this.open);
+    }
+}
+TuiTbodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiTbodyComponent, deps: [{ token: TuiTableSortPipe }, { token: TUI_TABLE_OPTIONS }, { token: TUI_ARROW_OPTIONS }, { token: forwardRef(() => TuiTableDirective) }], target: i0.ɵɵFactoryTarget.Component });
+TuiTbodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TuiTbodyComponent, selector: "tbody[tuiTbody]", inputs: { data: "data", heading: "heading", open: "open" }, outputs: { openChange: "openChange" }, providers: TUI_TABLE_PROVIDER, queries: [{ propertyName: "row", first: true, predicate: i0.forwardRef(function () { return TuiRowDirective; }), descendants: true }, { propertyName: "rows", predicate: i0.forwardRef(function () { return TuiTrComponent; }) }], 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-svg\n                class=\"t-chevron\"\n                [class.t-chevron_rotated]=\"open\"\n                [src]=\"arrowOptions.iconLarge\"\n            ></tui-svg>\n        </button>\n    </th>\n</tr>\n<ng-container *ngIf=\"open\">\n    <ng-content></ng-content>\n</ng-container>\n<ng-container *ngIf=\"open && row\">\n    <ng-container\n        *ngFor=\"let item of sorted; let index = index\"\n        [ngTemplateOutlet]=\"row.template\"\n        [ngTemplateOutletContext]=\"item | tuiMapper: toContext : index\"\n    ></ng-container>\n</ng-container>\n", styles: [":host{border-color:var(--tui-base-04)}:host tr{border-color:inherit}.t-expand{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:none;font-size:inherit;line-height:inherit;text-decoration:none;display:flex;width:100%;height: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-selection)}.t-expand:before,.t-expand:after{content:\"\";position:-webkit-sticky;position:sticky;height:100%;border-left: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;height:var(--tui-height-m);font:var(--tui-font-text-s);padding:0;background:var(--tui-base-02);border-bottom:1px solid var(--tui-base-04);border-color:inherit}.t-heading:hover{background:var(--tui-base-03)}:host-context(table[data-size=\"l\"]) .t-heading{font:var(--tui-font-text-m);height:var(--tui-height-l)}.t-name{position:-webkit-sticky;position:sticky;left:.75rem;display:inline-block}:host-context(table[data-size=\"l\"]) .t-name{left:1rem}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:-webkit-sticky;position:sticky;right:.75rem;margin:0 .6875rem 0 auto}.t-chevron_rotated{transform:rotate(180deg)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { kind: "component", type: i2.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }, { kind: "pipe", type: i4.TuiMapperPipe, name: "tuiMapper" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiTbodyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tbody[tuiTbody]', 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-svg\n                class=\"t-chevron\"\n                [class.t-chevron_rotated]=\"open\"\n                [src]=\"arrowOptions.iconLarge\"\n            ></tui-svg>\n        </button>\n    </th>\n</tr>\n<ng-container *ngIf=\"open\">\n    <ng-content></ng-content>\n</ng-container>\n<ng-container *ngIf=\"open && row\">\n    <ng-container\n        *ngFor=\"let item of sorted; let index = index\"\n        [ngTemplateOutlet]=\"row.template\"\n        [ngTemplateOutletContext]=\"item | tuiMapper: toContext : index\"\n    ></ng-container>\n</ng-container>\n", styles: [":host{border-color:var(--tui-base-04)}:host tr{border-color:inherit}.t-expand{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:none;font-size:inherit;line-height:inherit;text-decoration:none;display:flex;width:100%;height: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-selection)}.t-expand:before,.t-expand:after{content:\"\";position:-webkit-sticky;position:sticky;height:100%;border-left: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;height:var(--tui-height-m);font:var(--tui-font-text-s);padding:0;background:var(--tui-base-02);border-bottom:1px solid var(--tui-base-04);border-color:inherit}.t-heading:hover{background:var(--tui-base-03)}:host-context(table[data-size=\"l\"]) .t-heading{font:var(--tui-font-text-m);height:var(--tui-height-l)}.t-name{position:-webkit-sticky;position:sticky;left:.75rem;display:inline-block}:host-context(table[data-size=\"l\"]) .t-name{left:1rem}.t-chevron{transition-property:transform;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:-webkit-sticky;position:sticky;right:.75rem;margin:0 .6875rem 0 auto}.t-chevron_rotated{transform:rotate(180deg)}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: TuiTableSortPipe, decorators: [{
+                        type: Inject,
+                        args: [TuiTableSortPipe]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [TUI_TABLE_OPTIONS]
+                    }] }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [TUI_ARROW_OPTIONS]
+                    }] }, { type: TuiTableDirective, decorators: [{
+                        type: Inject,
+                        args: [forwardRef(() => TuiTableDirective)]
+                    }] }];
+    }, propDecorators: { data: [{
+                type: Input
+            }], heading: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], openChange: [{
+                type: Output
+            }], row: [{
+                type: ContentChild,
+                args: [forwardRef(() => TuiRowDirective)]
+            }], rows: [{
+                type: ContentChildren,
+                args: [forwardRef(() => TuiTrComponent)]
+            }] } });
+
+class TuiThGroupComponent {
+    constructor(table) {
+        this.table = table;
+        this.heads = EMPTY_QUERY;
+        this.heads$ = null;
+    }
+    ngAfterContentInit() {
+        this.heads$ = this.heads.changes.pipe(startWith(null), map(() => this.heads.reduce((record, item) => (Object.assign(Object.assign({}, record), { [item.tuiHead]: item })), {})));
+    }
+}
+TuiThGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiThGroupComponent, deps: [{ token: forwardRef(() => TuiTableDirective) }], target: i0.ɵɵFactoryTarget.Component });
+TuiThGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TuiThGroupComponent, selector: "tr[tuiThGroup]", providers: [TUI_TABLE_PROVIDER], queries: [{ propertyName: "th", first: true, predicate: i0.forwardRef(function () { return TuiThComponent; }), descendants: true }, { propertyName: "heads", predicate: i0.forwardRef(function () { return TuiHeadDirective; }) }], ngImport: i0, template: "<ng-content></ng-content>\n<ng-container *ngIf=\"heads$ | async as headings\">\n    <ng-container\n        *ngFor=\"let key of table.columns\"\n        [ngTemplateOutlet]=\"headings[key.toString()]?.template || plain\"\n    >\n        <ng-template #plain>\n            <th\n                *ngIf=\"!th && !heads.length\"\n                tuiTh\n            >\n                {{ key.toString() }}\n            </th>\n        </ng-template>\n    </ng-container>\n</ng-container>\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TuiThComponent, selector: "th[tuiTh]", inputs: ["sorter", "resizable", "sticky"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiThGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tr[tuiThGroup]', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TUI_TABLE_PROVIDER], template: "<ng-content></ng-content>\n<ng-container *ngIf=\"heads$ | async as headings\">\n    <ng-container\n        *ngFor=\"let key of table.columns\"\n        [ngTemplateOutlet]=\"headings[key.toString()]?.template || plain\"\n    >\n        <ng-template #plain>\n            <th\n                *ngIf=\"!th && !heads.length\"\n                tuiTh\n            >\n                {{ key.toString() }}\n            </th>\n        </ng-template>\n    </ng-container>\n</ng-container>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: TuiTableDirective, decorators: [{
+                        type: Inject,
+                        args: [forwardRef(() => TuiTableDirective)]
+                    }] }];
+    }, propDecorators: { th: [{
+                type: ContentChild,
+                args: [forwardRef(() => TuiThComponent)]
+            }], heads: [{
+                type: ContentChildren,
+                args: [forwardRef(() => TuiHeadDirective)]
+            }] } });
+
+class TuiTableModule {
+}
+TuiTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TuiTableModule, declarations: [TuiTableDirective,
+        TuiTbodyComponent,
+        TuiThGroupComponent,
+        TuiThComponent,
+        TuiTdComponent,
+        TuiTrComponent,
+        TuiCellDirective,
+        TuiHeadDirective,
+        TuiRowDirective,
+        TuiSortByDirective,
+        TuiSortableDirective,
+        TuiTheadDirective,
+        TuiResizedDirective,
+        TuiTableSortPipe,
+        TuiDirectionOrderDirective], imports: [CommonModule, PolymorpheusModule, TuiMapperPipeModule, TuiSvgModule], exports: [TuiTableDirective,
+        TuiTbodyComponent,
+        TuiThGroupComponent,
+        TuiThComponent,
+        TuiTdComponent,
+        TuiTrComponent,
+        TuiCellDirective,
+        TuiHeadDirective,
+        TuiRowDirective,
+        TuiSortByDirective,
+        TuiSortableDirective,
+        TuiTheadDirective,
+        TuiTableSortPipe,
+        TuiDirectionOrderDirective] });
+TuiTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiTableModule, imports: [CommonModule, PolymorpheusModule, TuiMapperPipeModule, TuiSvgModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TuiTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, PolymorpheusModule, TuiMapperPipeModule, TuiSvgModule],
+                    declarations: [
+                        TuiTableDirective,
+                        TuiTbodyComponent,
+                        TuiThGroupComponent,
+                        TuiThComponent,
+                        TuiTdComponent,
+                        TuiTrComponent,
+                        TuiCellDirective,
+                        TuiHeadDirective,
+                        TuiRowDirective,
+                        TuiSortByDirective,
+                        TuiSortableDirective,
+                        TuiTheadDirective,
+                        TuiResizedDirective,
+                        TuiTableSortPipe,
+                        TuiDirectionOrderDirective,
+                    ],
+                    exports: [
+                        TuiTableDirective,
+                        TuiTbodyComponent,
+                        TuiThGroupComponent,
+                        TuiThComponent,
+                        TuiTdComponent,
+                        TuiTrComponent,
+                        TuiCellDirective,
+                        TuiHeadDirective,
+                        TuiRowDirective,
+                        TuiSortByDirective,
+                        TuiSortableDirective,
+                        TuiTheadDirective,
+                        TuiTableSortPipe,
+                        TuiDirectionOrderDirective,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TUI_STUCK, TUI_STUCK_PROVIDER, TUI_TABLE_DEFAULT_OPTIONS, TUI_TABLE_OPTIONS, TUI_TABLE_PROVIDER, TUI_TABLE_PROVIDERS, TuiCellDirective, TuiDirectionOrderDirective, TuiHeadDirective, TuiResizedDirective, TuiRowDirective, TuiSortByDirective, TuiSortableDirective, TuiTableDirective, TuiTableModule, TuiTableSortPipe, TuiTbodyComponent, TuiTdComponent, TuiThComponent, TuiThGroupComponent, TuiTheadDirective, TuiTrComponent, tuiTableOptionsProvider };
+//# sourceMappingURL=taiga-ui-addon-table-components-table.mjs.map