@taiga-ui/addon-table 3.86.0 → 3.87.0

package/bundles/taiga-ui-addon-table-components-table.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/operators'), require('@ng-web-apis/intersection-observer'), require('@taiga-ui/cdk'), require('@taiga-ui/core'), require('@taiga-ui/kit'), require('rxjs'), require('@angular/common'), require('@tinkoff/ng-polymorpheus'), require('@angular/forms')) :
-    typeof define === 'function' && define.amd ? define('@taiga-ui/addon-table/components/table', ['exports', '@angular/core', 'rxjs/operators', '@ng-web-apis/intersection-observer', '@taiga-ui/cdk', '@taiga-ui/core', '@taiga-ui/kit', 'rxjs', '@angular/common', '@tinkoff/ng-polymorpheus', '@angular/forms'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["taiga-ui"] = global["taiga-ui"] || {}, global["taiga-ui"]["addon-table"] = global["taiga-ui"]["addon-table"] || {}, global["taiga-ui"]["addon-table"].components = global["taiga-ui"]["addon-table"].components || {}, global["taiga-ui"]["addon-table"].components.table = {}), global.ng.core, global.rxjs.operators, global.intersectionObserver, global.i4, global.i1, global.kit, global.rxjs, global.ng.common, global.i3, global.ng.forms));
-})(this, (function (exports, i0, operators, intersectionObserver, i4, i1, kit, i1$1, i2, i3, forms) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs/operators'), require('@ng-web-apis/intersection-observer'), require('@taiga-ui/cdk'), require('@taiga-ui/core'), require('@taiga-ui/kit'), require('rxjs'), require('@angular/common'), require('@tinkoff/ng-polymorpheus')) :
+    typeof define === 'function' && define.amd ? define('@taiga-ui/addon-table/components/table', ['exports', '@angular/core', 'rxjs/operators', '@ng-web-apis/intersection-observer', '@taiga-ui/cdk', '@taiga-ui/core', '@taiga-ui/kit', 'rxjs', '@angular/common', '@tinkoff/ng-polymorpheus'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["taiga-ui"] = global["taiga-ui"] || {}, global["taiga-ui"]["addon-table"] = global["taiga-ui"]["addon-table"] || {}, global["taiga-ui"]["addon-table"].components = global["taiga-ui"]["addon-table"].components || {}, global["taiga-ui"]["addon-table"].components.table = {}), global.ng.core, global.rxjs.operators, global.intersectionObserver, global.i2, global.i1, global.kit, global.rxjs, global.ng.common, global.i3));
+})(this, (function (exports, i0, operators, intersectionObserver, i2, i1, kit, i1$1, i2$1, i3) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -23,10 +23,10 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1);
     var i1__namespace = /*#__PURE__*/_interopNamespace(i1$1);
-    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
     var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
 
     var TuiCellDirective = /** @class */ (function () {
@@ -437,14 +437,33 @@
             off: 'tuiIconSortOff',
         },
     };
-    var TUI_TABLE_OPTIONS = i4.tuiCreateToken(TUI_TABLE_DEFAULT_OPTIONS);
+    var TUI_TABLE_OPTIONS = i2.tuiCreateToken(TUI_TABLE_DEFAULT_OPTIONS);
     function tuiTableOptionsProvider(options) {
-        return i4.tuiProvideOptions(TUI_TABLE_OPTIONS, options, TUI_TABLE_DEFAULT_OPTIONS);
+        return i2.tuiProvideOptions(TUI_TABLE_OPTIONS, options, TUI_TABLE_DEFAULT_OPTIONS);
     }
 
+    var TuiTableStylesComponent = /** @class */ (function () {
+        function TuiTableStylesComponent() {
+        }
+        return TuiTableStylesComponent;
+    }());
+    TuiTableStylesComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTableStylesComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    TuiTableStylesComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiTableStylesComponent, selector: "ng-component", host: { classAttribute: "tui-table" }, ngImport: i0__namespace, template: '', isInline: true, styles: ["table[tuiTable] [tuiCell]{padding:0}table[tuiTable] [tuiTitle]{white-space:nowrap}table[tuiTable] [tuiTitle] tui-icon{font-size:1rem}table[tuiTable] [tuiSubtitle]{color:var(--tui-text-02)}table[tuiTable] [tuiTh] [tuiCell],table[tuiTable] [tuiTh] [tuiTitle]{font:inherit;color:inherit}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush, encapsulation: i0__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTableStylesComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        template: '',
+                        styleUrls: ['./table.style.less'],
+                        encapsulation: i0.ViewEncapsulation.None,
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        host: {
+                            class: 'tui-table',
+                        },
+                    }]
+            }] });
     var TuiTableDirective = /** @class */ (function (_super) {
         __extends(TuiTableDirective, _super);
-        function TuiTableDirective(entries$, mode$, stuck$, options, cdr) {
+        function TuiTableDirective(entries$, mode$, stuck$, options, cdr, directiveStyles) {
             var _this = _super.call(this) || this;
             _this.entries$ = entries$;
             _this.mode$ = mode$;
@@ -457,6 +476,7 @@
             _this.directionChange = new i0.EventEmitter();
             _this.sorterChange = new i0.EventEmitter();
             _this.sorter = function () { return 0; };
+            directiveStyles.addComponent(TuiTableStylesComponent);
             return _this;
         }
         TuiTableDirective.prototype.updateSorterAndDirection = function (sorter) {
@@ -482,8 +502,8 @@
             this.change$.next();
         };
         return TuiTableDirective;
-    }(i4.AbstractTuiController));
-    TuiTableDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTableDirective, deps: [{ token: intersectionObserver.IntersectionObserverService }, { token: i1.TUI_MODE }, { token: TUI_STUCK }, { token: TUI_TABLE_OPTIONS }, { token: i0.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    }(i2.AbstractTuiController));
+    TuiTableDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTableDirective, deps: [{ token: intersectionObserver.IntersectionObserverService }, { token: i1.TUI_MODE }, { token: TUI_STUCK }, { token: TUI_TABLE_OPTIONS }, { token: i0.ChangeDetectorRef }, { token: i2.TuiDirectiveStylesService }], target: i0__namespace.ɵɵFactoryTarget.Directive });
     TuiTableDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", 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__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTableDirective, decorators: [{
                 type: i0.Directive,
@@ -512,6 +532,9 @@
                         }] }, { type: i0__namespace.ChangeDetectorRef, decorators: [{
                             type: i0.Inject,
                             args: [i0.ChangeDetectorRef]
+                        }] }, { type: i2__namespace.TuiDirectiveStylesService, decorators: [{
+                            type: i0.Inject,
+                            args: [i2.TuiDirectiveStylesService]
                         }] }];
         }, propDecorators: { columns: [{
                     type: i0.Input
@@ -591,17 +614,17 @@
             this.doc = doc;
             this.el = el;
             this.parentRef = parentRef;
-            this.tuiResized = i4.tuiTypedFromEvent(this.el.nativeElement, 'mousedown').pipe(i4.tuiPreventDefault(), operators.switchMap(function () {
+            this.tuiResized = i2.tuiTypedFromEvent(this.el.nativeElement, 'mousedown').pipe(i2.tuiPreventDefault(), operators.switchMap(function () {
                 var _a = _this.parentRef.nativeElement.getBoundingClientRect(), width = _a.width, right = _a.right;
-                return i4.tuiTypedFromEvent(_this.doc, 'mousemove').pipe(operators.distinctUntilChanged(), operators.map(function (_a) {
+                return i2.tuiTypedFromEvent(_this.doc, 'mousemove').pipe(operators.distinctUntilChanged(), operators.map(function (_a) {
                     var clientX = _a.clientX;
                     return width + clientX - right;
-                }), operators.takeUntil(i4.tuiTypedFromEvent(_this.doc, 'mouseup')));
+                }), operators.takeUntil(i2.tuiTypedFromEvent(_this.doc, 'mouseup')));
             }));
         }
         return TuiResizedDirective;
     }());
-    TuiResizedDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiResizedDirective, deps: [{ token: i2.DOCUMENT }, { token: i0.ElementRef }, { token: i1.TUI_ELEMENT_REF }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    TuiResizedDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiResizedDirective, deps: [{ token: i2$1.DOCUMENT }, { token: i0.ElementRef }, { token: i1.TUI_ELEMENT_REF }], target: i0__namespace.ɵɵFactoryTarget.Directive });
     TuiResizedDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.17", type: TuiResizedDirective, selector: "[tuiResized]", outputs: { tuiResized: "tuiResized" }, ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiResizedDirective, decorators: [{
                 type: i0.Directive,
@@ -611,7 +634,7 @@
             }], ctorParameters: function () {
             return [{ type: Document, decorators: [{
                             type: i0.Inject,
-                            args: [i2.DOCUMENT]
+                            args: [i2$1.DOCUMENT]
                         }] }, { type: i0__namespace.ElementRef, decorators: [{
                             type: i0.Inject,
                             args: [i0.ElementRef]
@@ -662,7 +685,7 @@
             this.head = head;
             this.table = table;
             this.sorter = this.head
-                ? function (a, b) { return i4.tuiDefaultSort(a[_this.key], b[_this.key]); }
+                ? function (a, b) { return i2.tuiDefaultSort(a[_this.key], b[_this.key]); }
                 : null;
             this.resizable = this.options.resizable;
             this.sticky = this.options.sticky;
@@ -671,7 +694,7 @@
         Object.defineProperty(TuiThComponent.prototype, "key", {
             get: function () {
                 if (!this.head) {
-                    throw new i4.TuiTableSortKeyException();
+                    throw new i2.TuiTableSortKeyException();
                 }
                 return this.head.tuiHead;
             },
@@ -721,7 +744,7 @@
                 provide: i1.TUI_ELEMENT_REF,
                 useExisting: i0.ElementRef,
             },
-        ], ngImport: i0__namespace, 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:bold;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:translate(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: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 #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:bold;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"], components: [{ type: i1__namespace$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TuiResizedDirective, selector: "[tuiResized]", outputs: ["tuiResized"] }], pipes: { "async": i2__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+        ], ngImport: i0__namespace, 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:bold;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:translate(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:bold;padding:0 1rem}:host-context(table[data-size=\"s\"]){height:var(--tui-height-s);font:var(--tui-font-text-s);font-weight:bold;padding:0 .5rem}: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:bold;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"], components: [{ type: i1__namespace$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TuiResizedDirective, selector: "[tuiResized]", outputs: ["tuiResized"] }], pipes: { "async": i2__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiThComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -821,7 +844,7 @@
         function TuiSortByDirective(table) {
             var _this = this;
             this.table = table;
-            this.sortables = i4.EMPTY_QUERY;
+            this.sortables = i2.EMPTY_QUERY;
             this.tuiSortByChange = this.table.sorterChange.pipe(
             // delay is for getting actual ContentChildren (sortables) https://github.com/angular/angular/issues/38976
             operators.delay(0), operators.filter(function () { return !!_this.sortables.length; }), operators.map(function (sorter) { return _this.getKey(sorter); }));
@@ -919,7 +942,7 @@
     TuiTableSortPipe.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTableSortPipe, deps: [{ token: TuiTableDirective }], target: i0__namespace.ɵɵFactoryTarget.Pipe });
     TuiTableSortPipe.ɵpipe = i0__namespace.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTableSortPipe, name: "tuiTableSort", pure: false });
     __decorate([
-        i4.tuiPure
+        i2.tuiPure
     ], TuiTableSortPipe.prototype, "sort", null);
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTableSortPipe, decorators: [{
                 type: i0.Pipe,
@@ -935,11 +958,11 @@
         }, propDecorators: { sort: [] } });
 
     var TUI_TABLE_PROVIDER = [
-        i4.TuiDestroyService,
+        i2.TuiDestroyService,
         TuiTableSortPipe,
         {
             provide: TuiTableDirective,
-            deps: [[new i0.SkipSelf(), TuiTableDirective], i0.ChangeDetectorRef, i4.TuiDestroyService],
+            deps: [[new i0.SkipSelf(), TuiTableDirective], i0.ChangeDetectorRef, i2.TuiDestroyService],
             useFactory: i1.tuiWatchedControllerFactory,
         },
     ];
@@ -950,7 +973,7 @@
         return TuiTdComponent;
     }());
     TuiTdComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTdComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiTdComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiTdComponent, selector: "th[tuiTd], td[tuiTd]", host: { properties: { "class._editable": "this.control" } }, queries: [{ propertyName: "control", first: true, predicate: forms.NgControl, descendants: true }], ngImport: i0__namespace, template: "\n        <ng-content></ng-content>\n    ", 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: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: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__namespace.ChangeDetectionStrategy.OnPush });
+    TuiTdComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiTdComponent, selector: "th[tuiTd], td[tuiTd]", host: { properties: { "class._editable": "legacy" } }, queries: [{ propertyName: "legacy", first: true, predicate: i2.AbstractTuiControl, descendants: true }], ngImport: i0__namespace, template: "\n        <ng-content></ng-content>\n    ", isInline: true, styles: [":host{position:relative;text-align:left;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:translate(0)}}:host._editable{padding:0!important}: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:1rem}:host-context(table[data-size=\"m\"]){height:var(--tui-height-m);font:var(--tui-font-text-s);padding:.75rem}:host-context(table[data-size=\"s\"]){height:var(--tui-height-s);font:var(--tui-font-text-s);padding:.25rem .5rem}:host(td):focus-within{z-index:1}:host(td):not(:focus-within){z-index:0}\n"], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTdComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -958,13 +981,13 @@
                         template: "\n        <ng-content></ng-content>\n    ",
                         styleUrls: ['./td.style.less'],
                         changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        host: {
+                            '[class._editable]': 'legacy',
+                        },
                     }]
-            }], propDecorators: { control: [{
-                    type: i0.HostBinding,
-                    args: ['class._editable']
-                }, {
+            }], propDecorators: { legacy: [{
                     type: i0.ContentChild,
-                    args: [forms.NgControl]
+                    args: [i2.AbstractTuiControl]
                 }] } });
 
     var TuiTrComponent = /** @class */ (function () {
@@ -972,13 +995,13 @@
             var _this = this;
             this.table = table;
             this.body = body;
-            this.cells = i4.EMPTY_QUERY;
+            this.cells = i2.EMPTY_QUERY;
             this.contentReady$ = new i1$1.ReplaySubject(1);
-            this.cells$ = this.contentReady$.pipe(operators.switchMap(function () { return i4.tuiQueryListChanges(_this.cells); }), operators.map(function (cells) { return cells.reduce(function (record, item) {
+            this.cells$ = this.contentReady$.pipe(operators.switchMap(function () { return i2.tuiQueryListChanges(_this.cells); }), operators.map(function (cells) { return cells.reduce(function (record, item) {
                 var _a;
                 return (Object.assign(Object.assign({}, record), (_a = {}, _a[item.tuiCell] = item, _a)));
             }, {}); }));
-            this.item$ = this.contentReady$.pipe(operators.switchMap(function () { return i4.tuiQueryListChanges(_this.body.rows); }), operators.map(function (rows) {
+            this.item$ = this.contentReady$.pipe(operators.switchMap(function () { return i2.tuiQueryListChanges(_this.body.rows); }), operators.map(function (rows) {
                 /**
                  * TODO v4.0 replace `this.body.sorted` with `this.body.data` (don't forget to drop `sorted`-getter).
                  */
@@ -1001,7 +1024,7 @@
         return TuiTrComponent;
     }());
     TuiTrComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTrComponent, deps: [{ token: i0.forwardRef(function () { return TuiTableDirective; }) }, { token: i0.forwardRef(function () { return TuiTbodyComponent; }) }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiTrComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiTrComponent, selector: "tr[tuiTr]", providers: [TUI_TABLE_PROVIDER], queries: [{ propertyName: "cells", predicate: i0__namespace.forwardRef(function () { return TuiCellDirective; }) }], ngImport: i0__namespace, 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", components: [{ type: TuiTdComponent, selector: "th[tuiTd], td[tuiTd]" }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TuiTrComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiTrComponent, selector: "tr[tuiTr]", providers: [TUI_TABLE_PROVIDER], queries: [{ propertyName: "cells", predicate: i0__namespace.forwardRef(function () { return TuiCellDirective; }) }], ngImport: i0__namespace, 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", components: [{ type: TuiTdComponent, selector: "th[tuiTd], td[tuiTd]" }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTrComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1032,7 +1055,7 @@
             this.data = [];
             this.open = this.options.open;
             this.openChange = new i0.EventEmitter();
-            this.rows = i4.EMPTY_QUERY;
+            this.rows = i2.EMPTY_QUERY;
             this.toContext = function ($implicit, index) { return ({ $implicit: $implicit, index: index }); };
         }
         Object.defineProperty(TuiTbodyComponent.prototype, "sorted", {
@@ -1049,7 +1072,7 @@
         return TuiTbodyComponent;
     }());
     TuiTbodyComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTbodyComponent, deps: [{ token: TuiTableSortPipe }, { token: TUI_TABLE_OPTIONS }, { token: kit.TUI_ARROW_OPTIONS }, { token: i0.forwardRef(function () { return TuiTableDirective; }) }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiTbodyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", 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__namespace.forwardRef(function () { return TuiRowDirective; }), descendants: true }, { propertyName: "rows", predicate: i0__namespace.forwardRef(function () { return TuiTrComponent; }) }], ngImport: i0__namespace, 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: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{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"], components: [{ type: i1__namespace$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i2__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "tuiMapper": i4__namespace.TuiMapperPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TuiTbodyComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", 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__namespace.forwardRef(function () { return TuiRowDirective; }), descendants: true }, { propertyName: "rows", predicate: i0__namespace.forwardRef(function () { return TuiTrComponent; }) }], ngImport: i0__namespace, 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: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{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"], components: [{ type: i1__namespace$1.TuiSvgComponent, selector: "tui-svg", inputs: ["src"] }], directives: [{ type: i2__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.PolymorpheusOutletDirective, selector: "[polymorpheusOutlet]", inputs: ["polymorpheusOutlet", "polymorpheusOutletContext"] }, { type: i2__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "tuiMapper": i2__namespace.TuiMapperPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTbodyComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1092,7 +1115,7 @@
     var TuiThGroupComponent = /** @class */ (function () {
         function TuiThGroupComponent(table) {
             this.table = table;
-            this.heads = i4.EMPTY_QUERY;
+            this.heads = i2.EMPTY_QUERY;
             this.heads$ = null;
         }
         TuiThGroupComponent.prototype.ngAfterContentInit = function () {
@@ -1105,7 +1128,7 @@
         return TuiThGroupComponent;
     }());
     TuiThGroupComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiThGroupComponent, deps: [{ token: i0.forwardRef(function () { return TuiTableDirective; }) }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    TuiThGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiThGroupComponent, selector: "tr[tuiThGroup]", providers: [TUI_TABLE_PROVIDER], queries: [{ propertyName: "th", first: true, predicate: i0__namespace.forwardRef(function () { return TuiThComponent; }), descendants: true }, { propertyName: "heads", predicate: i0__namespace.forwardRef(function () { return TuiHeadDirective; }) }], ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    TuiThGroupComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TuiThGroupComponent, selector: "tr[tuiThGroup]", providers: [TUI_TABLE_PROVIDER], queries: [{ propertyName: "th", first: true, predicate: i0__namespace.forwardRef(function () { return TuiThComponent; }), descendants: true }, { propertyName: "heads", predicate: i0__namespace.forwardRef(function () { return TuiHeadDirective; }) }], ngImport: i0__namespace, 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__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i2__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiThGroupComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1147,7 +1170,7 @@
             TuiTheadDirective,
             TuiResizedDirective,
             TuiTableSortPipe,
-            TuiDirectionOrderDirective], imports: [i2.CommonModule, i3.PolymorpheusModule, i4.TuiMapperPipeModule, i1.TuiSvgModule], exports: [TuiTableDirective,
+            TuiDirectionOrderDirective], imports: [i2$1.CommonModule, i3.PolymorpheusModule, i2.TuiMapperPipeModule, i1.TuiSvgModule], exports: [TuiTableDirective,
             TuiTbodyComponent,
             TuiThGroupComponent,
             TuiThComponent,
@@ -1161,11 +1184,11 @@
             TuiTheadDirective,
             TuiTableSortPipe,
             TuiDirectionOrderDirective] });
-    TuiTableModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTableModule, imports: [[i2.CommonModule, i3.PolymorpheusModule, i4.TuiMapperPipeModule, i1.TuiSvgModule]] });
+    TuiTableModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTableModule, imports: [[i2$1.CommonModule, i3.PolymorpheusModule, i2.TuiMapperPipeModule, i1.TuiSvgModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0__namespace, type: TuiTableModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
-                        imports: [i2.CommonModule, i3.PolymorpheusModule, i4.TuiMapperPipeModule, i1.TuiSvgModule],
+                        imports: [i2$1.CommonModule, i3.PolymorpheusModule, i2.TuiMapperPipeModule, i1.TuiSvgModule],
                         declarations: [
                             TuiTableDirective,
                             TuiTbodyComponent,