@taiga-ui/addon-table 2.59.1 → 3.0.0-rc.1

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

@@ -1,84 +1,95 @@
-import { __decorate, __param } from 'tslib';
-import { TemplateRef, Inject, Input, Directive, ElementRef, Output, InjectionToken, SkipSelf, forwardRef, EventEmitter, ChangeDetectorRef, HostBinding, Optional, Component, ChangeDetectionStrategy, ContentChildren, Pipe, ContentChild, NgModule } from '@angular/core';
-import { tuiDefaultProp, typedFromEvent, preventDefault, TuiController, TuiTableSortKeyException, EMPTY_QUERY, tuiPure, TuiDestroyService, TuiMapperPipeModule } from '@taiga-ui/cdk';
+import { __decorate } from 'tslib';
+import * as i0 from '@angular/core';
+import { TemplateRef, Directive, Inject, Input, ElementRef, Output, InjectionToken, SkipSelf, forwardRef, EventEmitter, ChangeDetectorRef, HostBinding, Component, ChangeDetectionStrategy, Optional, ContentChildren, Pipe, ContentChild, NgModule } from '@angular/core';
+import * as i4 from '@taiga-ui/cdk';
+import { tuiDefaultProp, tuiTypedFromEvent, tuiPreventDefault, AbstractTuiController, TuiTableSortKeyException, EMPTY_QUERY, tuiPure, TuiDestroyService, TuiMapperPipeModule } from '@taiga-ui/cdk';
+import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import { TUI_ELEMENT_REF, TUI_TEXTFIELD_APPEARANCE, TUI_TEXTFIELD_LABEL_OUTSIDE, TUI_TEXTFIELD_SIZE, MODE_PROVIDER, TUI_MODE, watchedControllerFactory, TuiSvgModule } from '@taiga-ui/core';
+import * as i1$1 from '@taiga-ui/core';
+import { TUI_ELEMENT_REF, TUI_TEXTFIELD_APPEARANCE, TUI_TEXTFIELD_LABEL_OUTSIDE, TUI_TEXTFIELD_SIZE, MODE_PROVIDER, TUI_MODE, tuiWatchedControllerFactory, TuiSvgModule } from '@taiga-ui/core';
 import { switchMap, distinctUntilChanged, map, takeUntil, filter, startWith } from 'rxjs/operators';
-import { defaultSort } from '@taiga-ui/addon-table/utils';
+import { tuiDefaultSort } from '@taiga-ui/addon-table/utils';
 import { IntersectionObserverService, INTERSECTION_ROOT_MARGIN, INTERSECTION_THRESHOLD } from '@ng-web-apis/intersection-observer';
-import { Observable } from 'rxjs';
 import { TUI_INPUT_COUNT_OPTIONS } from '@taiga-ui/kit';
+import * as i1 from 'rxjs';
+import * as i3 from '@tinkoff/ng-polymorpheus';
 import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';
 import { NgControl } from '@angular/forms';
 
-let TuiCellDirective = class TuiCellDirective {
+class TuiCellDirective {
     constructor(template) {
         this.template = template;
         this.tuiCell = ``;
     }
-};
-TuiCellDirective.ctorParameters = () => [
-    { type: TemplateRef, decorators: [{ type: Inject, args: [TemplateRef,] }] }
-];
+}
+TuiCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiCellDirective, deps: [{ token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TuiCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiCellDirective, selector: "[tuiCell]", inputs: { tuiCell: "tuiCell" }, ngImport: i0 });
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiCellDirective.prototype, "tuiCell", void 0);
-TuiCellDirective = __decorate([
-    Directive({
-        selector: `[tuiCell]`,
-    }),
-    __param(0, Inject(TemplateRef))
-], TuiCellDirective);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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
+            }] } });
 
-let TuiHeadDirective = class TuiHeadDirective {
+class TuiHeadDirective {
     constructor(template) {
         this.template = template;
     }
-};
-TuiHeadDirective.ctorParameters = () => [
-    { type: TemplateRef, decorators: [{ type: Inject, args: [TemplateRef,] }] }
-];
-__decorate([
-    Input()
-], TuiHeadDirective.prototype, "tuiHead", void 0);
-TuiHeadDirective = __decorate([
-    Directive({
-        selector: `[tuiHead]`,
-    }),
-    __param(0, Inject(TemplateRef))
-], TuiHeadDirective);
+}
+TuiHeadDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiHeadDirective, deps: [{ token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TuiHeadDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiHeadDirective, selector: "[tuiHead]", inputs: { tuiHead: "tuiHead" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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
+            }] } });
 
-// @dynamic
-let TuiResizedDirective = class TuiResizedDirective {
+class TuiResizedDirective {
     constructor(documentRef, elementRef, parentRef) {
         this.documentRef = documentRef;
         this.elementRef = elementRef;
         this.parentRef = parentRef;
-        this.tuiResized = typedFromEvent(this.elementRef.nativeElement, `mousedown`).pipe(preventDefault(), switchMap(() => {
+        this.tuiResized = tuiTypedFromEvent(this.elementRef.nativeElement, `mousedown`).pipe(tuiPreventDefault(), switchMap(() => {
             const { width, right } = this.parentRef.nativeElement.getBoundingClientRect();
-            return typedFromEvent(this.documentRef, `mousemove`).pipe(distinctUntilChanged(), map(({ clientX }) => width + clientX - right), takeUntil(typedFromEvent(this.documentRef, `mouseup`)));
+            return tuiTypedFromEvent(this.documentRef, `mousemove`).pipe(distinctUntilChanged(), map(({ clientX }) => width + clientX - right), takeUntil(tuiTypedFromEvent(this.documentRef, `mouseup`)));
         }));
     }
-};
-TuiResizedDirective.ctorParameters = () => [
-    { type: Document, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
-    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
-    { type: ElementRef, decorators: [{ type: Inject, args: [TUI_ELEMENT_REF,] }] }
-];
-__decorate([
-    Output()
-], TuiResizedDirective.prototype, "tuiResized", void 0);
-TuiResizedDirective = __decorate([
-    Directive({
-        selector: `[tuiResized]`,
-    }),
-    __param(0, Inject(DOCUMENT)),
-    __param(1, Inject(ElementRef)),
-    __param(2, Inject(TUI_ELEMENT_REF))
-], TuiResizedDirective);
+}
+TuiResizedDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiResizedDirective, deps: [{ token: DOCUMENT }, { token: ElementRef }, { token: TUI_ELEMENT_REF }], target: i0.ɵɵFactoryTarget.Directive });
+TuiResizedDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiResizedDirective, selector: "[tuiResized]", outputs: { tuiResized: "tuiResized" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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
+            }] } });
 
-let TuiRowDirective = class TuiRowDirective {
+class TuiRowDirective {
     constructor(template) {
         this.template = template;
         this.tuiRowOf = [];
@@ -86,43 +97,35 @@ let TuiRowDirective = class TuiRowDirective {
     static ngTemplateContextGuard(_dir, _ctx) {
         return true;
     }
-};
-TuiRowDirective.ctorParameters = () => [
-    { type: TemplateRef, decorators: [{ type: Inject, args: [TemplateRef,] }] }
-];
+}
+TuiRowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiRowDirective, deps: [{ token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+TuiRowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiRowDirective, selector: "ng-template[tuiRow]", inputs: { tuiRowOf: "tuiRowOf" }, ngImport: i0 });
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiRowDirective.prototype, "tuiRowOf", void 0);
-TuiRowDirective = __decorate([
-    Directive({
-        selector: `ng-template[tuiRow]`,
-    }),
-    __param(0, Inject(TemplateRef))
-], TuiRowDirective);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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
+            }] } });
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function stuckFactory({ nativeElement }, entries$) {
-    const stream$ = entries$.pipe(map(([{ intersectionRatio }]) => intersectionRatio < 1));
-    nativeElement[`$.class._stuck`] = stream$;
-    return stream$;
-}
 const TUI_STUCK = new InjectionToken(`Stream of sticky stuck events`);
 const TUI_STUCK_PROVIDER = {
     provide: TUI_STUCK,
     deps: [ElementRef, IntersectionObserverService],
-    useFactory: stuckFactory,
+    useFactory: ({ nativeElement }, entries$) => {
+        const stream$ = entries$.pipe(map(([{ intersectionRatio }]) => intersectionRatio < 1));
+        nativeElement[`$.class._stuck`] = stream$;
+        return stream$;
+    },
 };
 
-// TODO: 3.0 remove in ivy compilation
-const TABLE_THRESHOLD = [0, 1];
-const TABLE_LABEL = {
-    labelOutside: true,
-};
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function inputCountOptionsFactory(options) {
-    return Object.assign(Object.assign({}, options), { hideButtons: true });
-}
 const TUI_TABLE_PROVIDERS = [
     {
         provide: INTERSECTION_ROOT_MARGIN,
@@ -130,21 +133,22 @@ const TUI_TABLE_PROVIDERS = [
     },
     {
         provide: INTERSECTION_THRESHOLD,
-        useValue: TABLE_THRESHOLD,
+        useValue: [0, 1],
     },
     {
         provide: TUI_TEXTFIELD_APPEARANCE,
-        // TODO: 3.0 remove in ivy compilation
-        useValue: `table`,
+        useValue: "table" /* Table */,
     },
     {
         provide: TUI_TEXTFIELD_LABEL_OUTSIDE,
-        useValue: TABLE_LABEL,
+        useValue: {
+            labelOutside: true,
+        },
     },
     {
         provide: TUI_INPUT_COUNT_OPTIONS,
         deps: [[new SkipSelf(), TUI_INPUT_COUNT_OPTIONS]],
-        useFactory: inputCountOptionsFactory,
+        useFactory: (options) => (Object.assign(Object.assign({}, options), { hideButtons: true })),
     },
     {
         provide: TUI_TEXTFIELD_SIZE,
@@ -155,7 +159,7 @@ const TUI_TABLE_PROVIDERS = [
     TUI_STUCK_PROVIDER,
 ];
 
-let TuiTableDirective = class TuiTableDirective extends TuiController {
+class TuiTableDirective extends AbstractTuiController {
     constructor(entries$, mode$, stuck$, changeDetectorRef) {
         super();
         this.entries$ = entries$;
@@ -185,58 +189,67 @@ let TuiTableDirective = class TuiTableDirective extends TuiController {
     ngAfterViewInit() {
         this.changeDetectorRef.detectChanges();
     }
-};
-TuiTableDirective.ctorParameters = () => [
-    { type: Observable, decorators: [{ type: Inject, args: [IntersectionObserverService,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_MODE,] }] },
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_STUCK,] }] },
-    { type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] }
-];
+}
+TuiTableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiTableDirective, deps: [{ token: IntersectionObserverService }, { token: TUI_MODE }, { token: TUI_STUCK }, { token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+TuiTableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", 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 });
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiTableDirective.prototype, "columns", void 0);
 __decorate([
-    Input(),
-    HostBinding(`attr.data-size`),
     tuiDefaultProp()
 ], TuiTableDirective.prototype, "size", void 0);
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiTableDirective.prototype, "direction", void 0);
 __decorate([
-    Output()
-], TuiTableDirective.prototype, "directionChange", void 0);
-__decorate([
-    Output()
-], TuiTableDirective.prototype, "sorterChange", void 0);
-__decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiTableDirective.prototype, "sorter", void 0);
-TuiTableDirective = __decorate([
-    Directive({
-        selector: `table[tuiTable]`,
-        providers: TUI_TABLE_PROVIDERS,
-        host: {
-            '($.data-mode.attr)': `mode$`,
-            '($.class._stuck)': `stuck$`,
-            style: `border-collapse: separate`,
-        },
-    }),
-    __param(0, Inject(IntersectionObserverService)),
-    __param(1, Inject(TUI_MODE)),
-    __param(2, Inject(TUI_STUCK)),
-    __param(3, Inject(ChangeDetectorRef))
-], TuiTableDirective);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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: 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
+            }] } });
 
-let TuiThComponent = class TuiThComponent {
+class TuiThComponent {
     constructor(head, table) {
         this.head = head;
         this.table = table;
         this.sorter = this.head
-            ? (a, b) => defaultSort(a[this.key], b[this.key])
+            ? (a, b) => tuiDefaultSort(a[this.key], b[this.key])
             : null;
         this.resizable = false;
         this.sticky = false;
@@ -257,47 +270,62 @@ let TuiThComponent = class TuiThComponent {
     onResized(width) {
         this.width = width;
     }
-};
-TuiThComponent.ctorParameters = () => [
-    { type: TuiHeadDirective, decorators: [{ type: Optional }, { type: Inject, args: [TuiHeadDirective,] }] },
-    { type: TuiTableDirective, decorators: [{ type: Optional }, { type: Inject, args: [forwardRef(() => TuiTableDirective),] }] }
-];
+}
+TuiThComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiThComponent, deps: [{ token: TuiHeadDirective, optional: true }, { token: forwardRef(() => TuiTableDirective), optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TuiThComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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)=\"table.updateSorter(sorter)\"\n>\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n    {{ table.change$ | async }}\n    <tui-svg\n        class=\"t-sort-icon\"\n        [src]=\"icon\"\n        [class.t-sort-icon_rotated]=\"isCurrent && table.direction === 1\"\n    ></tui-svg>\n</button>\n<ng-template #content><ng-content></ng-content></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:.3s;transition-duration:var(--tui-duration, .3s);transition-timing-function:ease-in-out;position:relative;top:0;z-index:20;height:var(--tui-height-m);font:var(--tui-font-text-s);text-align:left;font-weight:bold;color:var(--tui-text-02);background:var(--tui-base-01);cursor:default;padding:0 .75rem;box-sizing:border-box;box-shadow:0 .3125rem rgba(237,237,237,0);border:1px solid var(--tui-base-04)}:host:not(:first-child){border-left:none}:host._sticky{position:-webkit-sticky;position:sticky;z-index:30}:host._sticky:first-child{left:0}:host._sticky:after{transition-property:opacity;transition-duration:.3s;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(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:bold;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 rgba(237,237,237,.7)}: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 rgba(60,60,60,.9)}:host-context(table[data-mode=\"onDark\"] thead[tuiThead]._stuck):first-child{box-shadow:.0625rem .3125rem rgba(60,60,60,.9)}: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:.3s;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;display:inline-flex;flex-direction:inherit;align-items:center;outline:none;font-weight:bold;cursor:pointer}.t-sort_sorted{color:var(--tui-text-01)}.t-sort_sorted .t-sort-icon_rotated{transform:scaleY(-1)}.t-sort:focus-visible{background:var(--tui-selection)}.t-sort:hover{color:var(--tui-text-01)}.t-bar{transition-property:opacity;transition-duration:.3s;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"], components: [{ type: i1$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TuiResizedDirective, selector: "[tuiResized]", outputs: ["tuiResized"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiThComponent.prototype, "sorter", void 0);
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiThComponent.prototype, "resizable", void 0);
 __decorate([
-    Input(),
-    HostBinding(`class._sticky`),
     tuiDefaultProp()
 ], TuiThComponent.prototype, "sticky", void 0);
-__decorate([
-    HostBinding(`style.width.px`)
-], TuiThComponent.prototype, "width", void 0);
-TuiThComponent = __decorate([
-    Component({
-        selector: `th[tuiTh]`,
-        template: "<button\n    *ngIf=\"sorter && table; else content\"\n    type=\"button\"\n    class=\"t-sort\"\n    [class.t-sort_sorted]=\"isCurrent\"\n    (click)=\"table.updateSorter(sorter)\"\n>\n    <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n    {{ table.change$ | async }}\n    <tui-svg\n        class=\"t-sort-icon\"\n        [src]=\"icon\"\n        [class.t-sort-icon_rotated]=\"isCurrent && table.direction === -1\"\n    ></tui-svg>\n</button>\n<ng-template #content><ng-content></ng-content></ng-template>\n<div\n    *ngIf=\"resizable\"\n    class=\"t-bar\"\n    (tuiResized)=\"onResized($event)\"\n></div>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        providers: [
-            {
-                provide: TUI_ELEMENT_REF,
-                useExisting: ElementRef,
-            },
-        ],
-        styles: [":host{transition-property:box-shadow;transition-duration:var(--tui-duration,300ms);transition-timing-function:ease-in-out;position:relative;top:0;z-index:20;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 rgba(237,237,237,0);border:1px solid var(--tui-base-04)}:host:not(:first-child){border-left:none}:host._sticky{position:-webkit-sticky;position:sticky;z-index:30}:host._sticky:first-child{left:0}:host._sticky:after{transition-property:opacity;transition-duration:var(--tui-duration,300ms);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(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 rgba(237,237,237,.7)}: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 rgba(60,60,60,.9)}:host-context(table[data-mode=onDark]thead[tuiThead]._stuck):first-child{box-shadow:.0625rem .3125rem rgba(60,60,60,.9)}: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,300ms);transition-timing-function:ease-in-out;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:0 0;font-size:inherit;line-height:inherit;display:inline-flex;flex-direction:inherit;align-items:center;outline:0;font-weight:700;cursor:pointer}.t-sort_sorted{color:var(--tui-text-01)}.t-sort_sorted .t-sort-icon_rotated{transform:scaleY(-1)}.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,300ms);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:active,.t-bar:hover{opacity:1}"]
-    }),
-    __param(0, Optional()),
-    __param(0, Inject(TuiHeadDirective)),
-    __param(1, Optional()),
-    __param(1, Inject(forwardRef(() => TuiTableDirective)))
-], TuiThComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiThComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `th[tuiTh]`,
+                    templateUrl: `./th.template.html`,
+                    styleUrls: [`./th.style.less`],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [
+                        {
+                            provide: TUI_ELEMENT_REF,
+                            useExisting: ElementRef,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ 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`]
+            }] } });
 
-let TuiSortableDirective = class TuiSortableDirective {
+class TuiSortableDirective {
     constructor(sortBy, table, th) {
         this.sortBy = sortBy;
         this.table = table;
@@ -319,22 +347,26 @@ let TuiSortableDirective = class TuiSortableDirective {
     get match() {
         return this.sortBy.tuiSortBy === this.key;
     }
-};
-TuiSortableDirective.ctorParameters = () => [
-    { type: TuiSortByDirective, decorators: [{ type: Inject, args: [forwardRef(() => TuiSortByDirective),] }] },
-    { type: TuiTableDirective, decorators: [{ type: Inject, args: [TuiTableDirective,] }] },
-    { type: TuiThComponent, decorators: [{ type: Inject, args: [TuiThComponent,] }] }
-];
-TuiSortableDirective = __decorate([
-    Directive({
-        selector: `th[tuiTh][tuiSortable]`,
-    }),
-    __param(0, Inject(forwardRef(() => TuiSortByDirective))),
-    __param(1, Inject(TuiTableDirective)),
-    __param(2, Inject(TuiThComponent))
-], TuiSortableDirective);
+}
+TuiSortableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSortableDirective, deps: [{ token: forwardRef(() => TuiSortByDirective) }, { token: TuiTableDirective }, { token: TuiThComponent }], target: i0.ɵɵFactoryTarget.Directive });
+TuiSortableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiSortableDirective, selector: "th[tuiTh][tuiSortable]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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]
+                }] }]; } });
 
-let TuiSortByDirective = class TuiSortByDirective {
+class TuiSortByDirective {
     constructor(table) {
         this.table = table;
         this.sortables = EMPTY_QUERY;
@@ -342,57 +374,68 @@ let TuiSortByDirective = class TuiSortByDirective {
         this.tuiSortByChange = this.table.sorterChange.pipe(filter(() => !!this.sortables.length), map(sorter => this.getKey(sorter)));
     }
     getKey(sorter) {
-        var _a, _b;
-        return (_b = (_a = this.sortables.find(s => s.sorter === sorter)) === null || _a === void 0 ? void 0 : _a.key) !== null && _b !== void 0 ? _b : null;
+        var _a;
+        return ((_a = this.sortables.find(s => s.sorter === sorter)) === null || _a === void 0 ? void 0 : _a.key) || null;
     }
-};
-TuiSortByDirective.ctorParameters = () => [
-    { type: TuiTableDirective, decorators: [{ type: Inject, args: [TuiTableDirective,] }] }
-];
-__decorate([
-    ContentChildren(TuiSortableDirective, { descendants: true })
-], TuiSortByDirective.prototype, "sortables", void 0);
+}
+TuiSortByDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiSortByDirective, deps: [{ token: TuiTableDirective }], target: i0.ɵɵFactoryTarget.Directive });
+TuiSortByDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiSortByDirective, selector: "table[tuiTable][tuiSortBy]", inputs: { tuiSortBy: "tuiSortBy" }, outputs: { tuiSortByChange: "tuiSortByChange" }, queries: [{ propertyName: "sortables", predicate: TuiSortableDirective, descendants: true }], ngImport: i0 });
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiSortByDirective.prototype, "tuiSortBy", void 0);
-__decorate([
-    Output()
-], TuiSortByDirective.prototype, "tuiSortByChange", void 0);
-TuiSortByDirective = __decorate([
-    Directive({
-        selector: `table[tuiTable][tuiSortBy]`,
-    }),
-    __param(0, Inject(TuiTableDirective))
-], TuiSortByDirective);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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 }]
+            }], tuiSortBy: [{
+                type: Input
+            }], tuiSortByChange: [{
+                type: Output
+            }] } });
 
-let TuiTheadDirective = class TuiTheadDirective {
+class TuiTheadDirective {
     constructor(stuck$) {
         this.stuck$ = stuck$;
     }
-};
-TuiTheadDirective.ctorParameters = () => [
-    { type: Observable, decorators: [{ type: Inject, args: [TUI_STUCK,] }] }
-];
-TuiTheadDirective = __decorate([
-    Directive({
-        selector: `thead[tuiThead]`,
-        providers: [
-            TUI_STUCK_PROVIDER,
-            IntersectionObserverService,
-            {
-                provide: INTERSECTION_ROOT_MARGIN,
-                useValue: `0px 10000px 10000px 10000px`,
-            },
-        ],
-        host: {
-            '($.class._stuck)': `stuck$`,
+}
+TuiTheadDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiTheadDirective, deps: [{ token: TUI_STUCK }], target: i0.ɵɵFactoryTarget.Directive });
+TuiTheadDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TuiTheadDirective, selector: "thead[tuiThead]", host: { listeners: { "$.class._stuck": "stuck$" } }, providers: [
+        TUI_STUCK_PROVIDER,
+        IntersectionObserverService,
+        {
+            provide: INTERSECTION_ROOT_MARGIN,
+            useValue: `0px 10000px 10000px 10000px`,
         },
-    }),
-    __param(0, Inject(TUI_STUCK))
-], TuiTheadDirective);
+    ], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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]
+                }] }]; } });
 
-let TuiTableSortPipe = class TuiTableSortPipe {
+class TuiTableSortPipe {
     constructor(table) {
         this.table = table;
     }
@@ -402,34 +445,58 @@ let TuiTableSortPipe = class TuiTableSortPipe {
     sort(data, sorter, direction) {
         return [...data].sort((a, b) => direction * sorter(a, b));
     }
-};
-TuiTableSortPipe.ctorParameters = () => [
-    { type: TuiTableDirective, decorators: [{ type: Inject, args: [TuiTableDirective,] }] }
-];
+}
+TuiTableSortPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiTableSortPipe, deps: [{ token: TuiTableDirective }], target: i0.ɵɵFactoryTarget.Pipe });
+TuiTableSortPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiTableSortPipe, name: "tuiTableSort", pure: false });
 __decorate([
     tuiPure
 ], TuiTableSortPipe.prototype, "sort", null);
-TuiTableSortPipe = __decorate([
-    Pipe({
-        name: `tuiTableSort`,
-        pure: false,
-    }),
-    __param(0, Inject(TuiTableDirective))
-], TuiTableSortPipe);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiTableSortPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: `tuiTableSort`,
+                    pure: false,
+                }]
+        }], ctorParameters: function () { return [{ type: TuiTableDirective, decorators: [{
+                    type: Inject,
+                    args: [TuiTableDirective]
+                }] }]; }, propDecorators: { sort: [] } });
 
-// TODO: 3.0 remove in ivy compilation
-const TABLE_FACTORY = watchedControllerFactory;
 const TUI_TABLE_PROVIDER = [
     TuiDestroyService,
     TuiTableSortPipe,
     {
         provide: TuiTableDirective,
         deps: [[new SkipSelf(), TuiTableDirective], ChangeDetectorRef, TuiDestroyService],
-        useFactory: TABLE_FACTORY,
+        useFactory: tuiWatchedControllerFactory,
     },
 ];
 
-let TuiTrComponent = class TuiTrComponent {
+class TuiTdComponent {
+}
+TuiTdComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiTdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TuiTdComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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;transform:translate(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:.3s;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: "12.2.16", ngImport: i0, type: TuiTdComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `th[tuiTd], td[tuiTd]`,
+                    template: `
+        <ng-content></ng-content>
+    `,
+                    styleUrls: [`./td.style.less`],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { control: [{
+                type: HostBinding,
+                args: [`class._editable`]
+            }, {
+                type: ContentChild,
+                args: [NgControl]
+            }] } });
+
+class TuiTrComponent {
     constructor(table, body) {
         this.table = table;
         this.body = body;
@@ -437,26 +504,29 @@ let TuiTrComponent = class TuiTrComponent {
         this.cells$ = this.cells.changes.pipe(startWith(null), map(() => this.cells.reduce((record, item) => (Object.assign(Object.assign({}, record), { [item.tuiCell]: item })), {})));
         this.item$ = this.body.rows.changes.pipe(startWith(null), map(() => this.body.sorted[this.body.rows.toArray().findIndex(row => row === this)]));
     }
-};
-TuiTrComponent.ctorParameters = () => [
-    { type: TuiTableDirective, decorators: [{ type: Inject, args: [forwardRef(() => TuiTableDirective),] }] },
-    { type: TuiTbodyComponent, decorators: [{ type: Inject, args: [forwardRef(() => TuiTbodyComponent),] }] }
-];
-__decorate([
-    ContentChildren(forwardRef(() => TuiCellDirective))
-], TuiTrComponent.prototype, "cells", void 0);
-TuiTrComponent = __decorate([
-    Component({
-        selector: `tr[tuiTr]`,
-        template: "<ng-container *ngIf=\"cells$ | async as items\">\n    <ng-container\n        *ngFor=\"let key of table.columns\"\n        [ngTemplateOutlet]=\"items[key.toString()]?.template || plain\"\n    >\n        <ng-template #plain>\n            <td\n                *ngIf=\"item$ | async as item\"\n                tuiTd\n            >\n                {{ item[key.toString()] }}\n            </td>\n        </ng-template>\n    </ng-container>\n</ng-container>\n",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        providers: [TUI_TABLE_PROVIDER]
-    }),
-    __param(0, Inject(forwardRef(() => TuiTableDirective))),
-    __param(1, Inject(forwardRef(() => TuiTbodyComponent)))
-], TuiTrComponent);
+}
+TuiTrComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiTrComponent, deps: [{ token: forwardRef(() => TuiTableDirective) }, { token: forwardRef(() => TuiTbodyComponent) }], target: i0.ɵɵFactoryTarget.Component });
+TuiTrComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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.toString()]?.template || plain\"\n    >\n        <ng-template #plain>\n            <td\n                *ngIf=\"item$ | async as item\"\n                tuiTd\n            >\n                {{ item[key.toString()] }}\n            </td>\n        </ng-template>\n    </ng-container>\n</ng-container>\n", components: [{ type: TuiTdComponent, selector: "th[tuiTd], td[tuiTd]" }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiTrComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `tr[tuiTr]`,
+                    templateUrl: `./tr.template.html`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [TUI_TABLE_PROVIDER],
+                }]
+        }], 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)]
+            }] } });
 
-let TuiTbodyComponent = class TuiTbodyComponent {
+class TuiTbodyComponent {
     constructor(pipe, table) {
         this.pipe = pipe;
         this.table = table;
@@ -474,129 +544,148 @@ let TuiTbodyComponent = class TuiTbodyComponent {
         this.open = !this.open;
         this.openChange.emit(this.open);
     }
-};
-TuiTbodyComponent.ctorParameters = () => [
-    { type: TuiTableSortPipe, decorators: [{ type: Inject, args: [TuiTableSortPipe,] }] },
-    { type: TuiTableDirective, decorators: [{ type: Inject, args: [forwardRef(() => TuiTableDirective),] }] }
-];
+}
+TuiTbodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiTbodyComponent, deps: [{ token: TuiTableSortPipe }, { token: forwardRef(() => TuiTableDirective) }], target: i0.ɵɵFactoryTarget.Component });
+TuiTbodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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: "<ng-content></ng-content>\n<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                src=\"tuiIconChevronDownLarge\"\n                class=\"t-chevron\"\n                [class.t-chevron_rotated]=\"open\"\n            ></tui-svg>\n        </button>\n    </th>\n</tr>\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;display:flex;width:100%;height:100%;align-items:center;box-sizing:border-box;outline:none;font-weight:bold;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{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}: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:.3s;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"], components: [{ type: i1$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "tuiMapper": i4.TuiMapperPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiTbodyComponent.prototype, "data", void 0);
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiTbodyComponent.prototype, "heading", void 0);
 __decorate([
-    Input(),
     tuiDefaultProp()
 ], TuiTbodyComponent.prototype, "open", void 0);
-__decorate([
-    Output()
-], TuiTbodyComponent.prototype, "openChange", void 0);
-__decorate([
-    ContentChild(forwardRef(() => TuiRowDirective))
-], TuiTbodyComponent.prototype, "row", void 0);
-__decorate([
-    ContentChildren(forwardRef(() => TuiTrComponent))
-], TuiTbodyComponent.prototype, "rows", void 0);
-TuiTbodyComponent = __decorate([
-    Component({
-        selector: `tbody[tuiTbody]`,
-        template: "<ng-content></ng-content>\n<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\n                polymorpheus-outlet\n                class=\"t-name\"\n                [content]=\"heading\"\n            ></span>\n            <tui-svg\n                src=\"tuiIconChevronDownLarge\"\n                class=\"t-chevron\"\n                [class.t-chevron_rotated]=\"open\"\n            ></tui-svg>\n        </button>\n    </th>\n</tr>\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",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        providers: TUI_TABLE_PROVIDER,
-        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:0 0;font-size:inherit;line-height:inherit;display:flex;width:100%;height:100%;align-items:center;box-sizing:border-box;outline:0;font-weight:700;cursor:pointer;border-color:inherit}.t-expand:focus-visible .t-name{background:var(--tui-selection)}.t-expand:after,.t-expand:before{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{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}: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,300ms);transition-timing-function:ease-in-out;position:-webkit-sticky;position:sticky;right:.75rem;margin:0 .6875rem 0 auto}.t-chevron_rotated{transform:rotate(180deg)}"]
-    }),
-    __param(0, Inject(TuiTableSortPipe)),
-    __param(1, Inject(forwardRef(() => TuiTableDirective)))
-], TuiTbodyComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiTbodyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `tbody[tuiTbody]`,
+                    templateUrl: `./tbody.template.html`,
+                    styleUrls: [`./tbody.style.less`],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: TUI_TABLE_PROVIDER,
+                }]
+        }], ctorParameters: function () { return [{ type: TuiTableSortPipe, decorators: [{
+                    type: Inject,
+                    args: [TuiTableSortPipe]
+                }] }, { 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)]
+            }] } });
 
-let TuiTdComponent = class TuiTdComponent {
-};
-__decorate([
-    HostBinding(`class._editable`),
-    ContentChild(NgControl)
-], TuiTdComponent.prototype, "control", void 0);
-TuiTdComponent = __decorate([
-    Component({
-        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;transform:translate3d(0,0,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,300ms);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}"]
-    })
-], TuiTdComponent);
-
-let TuiThGroupComponent = class TuiThGroupComponent {
+class TuiThGroupComponent {
     constructor(table) {
         this.table = table;
         this.heads = EMPTY_QUERY;
         this.heads$ = this.heads.changes.pipe(startWith(null), map(() => this.heads.reduce((record, item) => (Object.assign(Object.assign({}, record), { [item.tuiHead]: item })), {})));
     }
-};
-TuiThGroupComponent.ctorParameters = () => [
-    { type: TuiTableDirective, decorators: [{ type: Inject, args: [forwardRef(() => TuiTableDirective),] }] }
-];
-__decorate([
-    ContentChild(forwardRef(() => TuiThComponent))
-], TuiThGroupComponent.prototype, "th", void 0);
-__decorate([
-    ContentChildren(forwardRef(() => TuiHeadDirective))
-], TuiThGroupComponent.prototype, "heads", void 0);
-TuiThGroupComponent = __decorate([
-    Component({
-        selector: `tr[tuiThGroup]`,
-        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",
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        providers: [TUI_TABLE_PROVIDER]
-    }),
-    __param(0, Inject(forwardRef(() => TuiTableDirective)))
-], TuiThGroupComponent);
+}
+TuiThGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiThGroupComponent, deps: [{ token: forwardRef(() => TuiTableDirective) }], target: i0.ɵɵFactoryTarget.Component });
+TuiThGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", 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", components: [{ type: TuiThComponent, selector: "th[tuiTh]", inputs: ["sorter", "resizable", "sticky"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiThGroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: `tr[tuiThGroup]`,
+                    templateUrl: `./th-group.template.html`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [TUI_TABLE_PROVIDER],
+                }]
+        }], ctorParameters: function () { return [{ type: TuiTableDirective, decorators: [{
+                    type: Inject,
+                    args: [forwardRef(() => TuiTableDirective)]
+                }] }]; }, propDecorators: { th: [{
+                type: ContentChild,
+                args: [forwardRef(() => TuiThComponent)]
+            }], heads: [{
+                type: ContentChildren,
+                args: [forwardRef(() => TuiHeadDirective)]
+            }] } });
 
-let TuiTableModule = class TuiTableModule {
-};
-TuiTableModule = __decorate([
-    NgModule({
-        imports: [CommonModule, PolymorpheusModule, TuiMapperPipeModule, TuiSvgModule],
-        declarations: [
-            TuiTableDirective,
-            TuiTbodyComponent,
-            TuiThGroupComponent,
-            TuiThComponent,
-            TuiTdComponent,
-            TuiTrComponent,
-            TuiCellDirective,
-            TuiHeadDirective,
-            TuiRowDirective,
-            TuiSortByDirective,
-            TuiSortableDirective,
-            TuiTheadDirective,
-            TuiResizedDirective,
-            TuiTableSortPipe,
-        ],
-        exports: [
-            TuiTableDirective,
-            TuiTbodyComponent,
-            TuiThGroupComponent,
-            TuiThComponent,
-            TuiTdComponent,
-            TuiTrComponent,
-            TuiCellDirective,
-            TuiHeadDirective,
-            TuiRowDirective,
-            TuiSortByDirective,
-            TuiSortableDirective,
-            TuiTheadDirective,
-            TuiTableSortPipe,
-        ],
-    })
-], TuiTableModule);
+class TuiTableModule {
+}
+TuiTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TuiTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiTableModule, declarations: [TuiTableDirective,
+        TuiTbodyComponent,
+        TuiThGroupComponent,
+        TuiThComponent,
+        TuiTdComponent,
+        TuiTrComponent,
+        TuiCellDirective,
+        TuiHeadDirective,
+        TuiRowDirective,
+        TuiSortByDirective,
+        TuiSortableDirective,
+        TuiTheadDirective,
+        TuiResizedDirective,
+        TuiTableSortPipe], imports: [CommonModule, PolymorpheusModule, TuiMapperPipeModule, TuiSvgModule], exports: [TuiTableDirective,
+        TuiTbodyComponent,
+        TuiThGroupComponent,
+        TuiThComponent,
+        TuiTdComponent,
+        TuiTrComponent,
+        TuiCellDirective,
+        TuiHeadDirective,
+        TuiRowDirective,
+        TuiSortByDirective,
+        TuiSortableDirective,
+        TuiTheadDirective,
+        TuiTableSortPipe] });
+TuiTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TuiTableModule, imports: [[CommonModule, PolymorpheusModule, TuiMapperPipeModule, TuiSvgModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", 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,
+                    ],
+                    exports: [
+                        TuiTableDirective,
+                        TuiTbodyComponent,
+                        TuiThGroupComponent,
+                        TuiThComponent,
+                        TuiTdComponent,
+                        TuiTrComponent,
+                        TuiCellDirective,
+                        TuiHeadDirective,
+                        TuiRowDirective,
+                        TuiSortByDirective,
+                        TuiSortableDirective,
+                        TuiTheadDirective,
+                        TuiTableSortPipe,
+                    ],
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { TABLE_FACTORY, TABLE_LABEL, TABLE_THRESHOLD, TUI_STUCK, TUI_STUCK_PROVIDER, TUI_TABLE_PROVIDER, TUI_TABLE_PROVIDERS, TuiCellDirective, TuiHeadDirective, TuiResizedDirective, TuiRowDirective, TuiSortByDirective, TuiSortableDirective, TuiTableDirective, TuiTableModule, TuiTableSortPipe, TuiTbodyComponent, TuiTdComponent, TuiThComponent, TuiThGroupComponent, TuiTheadDirective, TuiTrComponent, inputCountOptionsFactory, stuckFactory };
+export { TUI_STUCK, TUI_STUCK_PROVIDER, TUI_TABLE_PROVIDER, TUI_TABLE_PROVIDERS, TuiCellDirective, TuiHeadDirective, TuiResizedDirective, TuiRowDirective, TuiSortByDirective, TuiSortableDirective, TuiTableDirective, TuiTableModule, TuiTableSortPipe, TuiTbodyComponent, TuiTdComponent, TuiThComponent, TuiThGroupComponent, TuiTheadDirective, TuiTrComponent };
 //# sourceMappingURL=taiga-ui-addon-table-components-table.js.map