@tetacom/ng-components 1.0.42 → 1.0.45

package/fesm2020/tetacom-ng-components.mjs

@@ -13,8 +13,7 @@ import * as i1$1 from '@ngneat/transloco';
 import { TranslocoModule, TRANSLOCO_SCOPE } from '@ngneat/transloco';
 import * as i5 from '@angular/cdk/scrolling';
 import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import * as hash from 'object-hash';
-import hash__default from 'object-hash';
+import objectHash from 'object-hash';
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 import * as d3 from 'd3';
@@ -3036,7 +3035,7 @@ class ArrayUtil {
         }
         return null;
     }
-    static filterRecursive(array, filter, children = 'children', keepChildren = true) {
+    static filterRecursive(array, filter, children = 'children', keepChildren = true, fullscanChildren = false) {
         const result = [];
         if (array && array.length) {
             for (const item of array) {
@@ -3045,12 +3044,15 @@ class ArrayUtil {
                     result.push(resultItem);
                     if (!keepChildren) {
                         resultItem[children] = [];
+                        if (fullscanChildren) {
+                            continue;
+                        }
                         break;
                     }
                 }
                 else if (item[children] && item[children].length > 0) {
                     resultItem[children] = [];
-                    const found = ArrayUtil.filterRecursive(item[children], filter, children, keepChildren);
+                    const found = ArrayUtil.filterRecursive(item[children], filter, children, keepChildren, fullscanChildren);
                     if (found?.length > 0) {
                         resultItem[children] = found;
                         result.push(resultItem);
@@ -3073,7 +3075,7 @@ class ArrayUtil {
         return result;
     }
     static findParents(tree, item) {
-        if (tree.indexOf(item) >= 0) {
+        if (tree?.indexOf(item) >= 0) {
             return tree;
         }
         if (Array.isArray(tree)) {
@@ -4645,7 +4647,7 @@ class SelectComponent {
         else {
             this.value =
                 this.options &&
-                    this.options.find((option) => this.getValue(option) === value);
+                    this.options?.find((option) => this.getValue(option) === value);
         }
         this._cdr.detectChanges();
     }
@@ -6902,45 +6904,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                 }]
         }] });
 
-class TableRow {
-    constructor(data) {
-        this.expanded = false;
-        this.showDetails = false;
-        this.path = [];
-        this.groupValue = [];
-        // children: GridRow<T>[] = [];
-        // parents: GridRow<T>[];
-        // private backup: any = {};
-        this._edit = false;
-        if (data) {
-            this.data = data;
-        }
-    }
-    set edit(value) {
-        if (value !== this._edit) {
-            this._edit = value;
-            this._hash = null;
-        }
-    }
-    get edit() {
-        return this._edit;
-    }
-    get hash() {
-        if (!this._hash) {
-            const hashObj = { ...this.data };
-            if (hashObj.children) {
-                delete hashObj.children;
-            }
-            this._hash = hash.sha1(hashObj);
-        }
-        return this._hash;
-    }
-    editData(items) {
-        this.data = items;
-        this._hash = null;
-    }
-}
-
 class TableColumn extends FilterItem {
     /**
      * Инициализация из анонимного объекта
@@ -6950,17 +6913,13 @@ class TableColumn extends FilterItem {
         /**
          * Ширина
          */
-        this.width = 150;
+        this.width = 80;
         /**
          * Коэффициент растяжения ячейки
          */
-        this.flex = 0;
-        /**
-         * Порядок группировки
-         */
-        this.groupingOrder = 0;
-        this.width = options?.width ?? 150;
-        this.flex = options?.flex ?? 0;
+        this.flex = 1;
+        this.width = options?.width ?? 80;
+        this.flex = options?.flex ?? 1;
         this.headCellClass = options?.headCellClass ?? [];
         this.cellClass = options?.cellClass ?? [];
         this.locked = options?.locked ?? false;
@@ -6970,9 +6929,6 @@ class TableColumn extends FilterItem {
         this.unitId = options?.unitId;
         this.data = options?.data;
         this.editable = options?.editable ?? true;
-        this.groupBy = options?.groupBy ?? false;
-        this.groupingOrder = options?.groupingOrder ?? 0;
-        this.groupByFn = options?.groupByFn;
         this.headCellComponent = options?.headCellComponent;
         this.headDropdownConfig = options?.headDropdownConfig;
         this.cellComponent = options?.cellComponent;
@@ -7185,7 +7141,12 @@ class TableService {
         this.selectType = SelectType.mouse;
         this.editType = EditType.cell;
         this.editEvent = EditEvent.doubleClick;
-        this.trackRow = (index, row) => index;
+        this.trackRow = (index, row) => {
+            if (row['id']) {
+                return row['id'];
+            }
+            return index;
+        };
         this.initialColumns = [];
         this.displayColumns = [];
         this._columns = new BehaviorSubject([]);
@@ -7202,7 +7163,6 @@ class TableService {
         this._valueSet = new Subject();
         this._stateChanged = new Subject();
         this._filterClear = new Subject();
-        this._groupToggle = new Subject();
         this._selectedRows = new BehaviorSubject([]);
         this._activeRow = new BehaviorSubject(null);
         this._scrollIndex = new Subject();
@@ -7219,7 +7179,6 @@ class TableService {
         this.valueSet = this._valueSet.asObservable();
         this.stateChanged = this._stateChanged.asObservable();
         this.filterClear = this._filterClear.asObservable();
-        this.groupToggle = this._groupToggle.asObservable();
         this.selectedRows = this._selectedRows.asObservable();
         this.activeRow = this._activeRow.asObservable();
         this.hiddenColumns = this._hiddenColumns.asObservable();
@@ -7232,7 +7191,7 @@ class TableService {
         return this._currentEditCell;
     }
     setData(data) {
-        this._displayData.next(data?.map((_) => new TableRow(_)));
+        this._displayData.next(data ? [...data] : []);
     }
     setDict(dict) {
         this._dict.next(dict);
@@ -7246,10 +7205,9 @@ class TableService {
             'editable',
             'cellComponent',
             'headCellComponent',
-            'headDropdownConfig',
-            'groupByFn',
+            'headDropdownConfig'
         ];
-        this.initialColumnsHash = hash__default(this.initialColumns, {
+        this.initialColumnsHash = objectHash(this.initialColumns, {
             algorithm: 'sha1',
             ignoreUnknown: true,
             excludeKeys: (key) => {
@@ -7576,9 +7534,6 @@ class TableService {
     columnIsHidden(column) {
         return this._hiddenColumns.value.indexOf(column.name) >= 0;
     }
-    toggleGroup(row) {
-        this._groupToggle.next(row);
-    }
     changeValue(coordinates) {
         this._valueChanged.next(coordinates);
     }
@@ -7597,7 +7552,7 @@ class TableService {
         this._valueSet.next(value);
     }
     getRowByIndex(rowIndex) {
-        return this._displayData.value[rowIndex];
+        return this._displayData?.value[rowIndex];
     }
     getRowIndex(row) {
         return this._displayData.value.indexOf(row);
@@ -7772,26 +7727,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-class GroupRowComponentBase {
-}
-
-class GroupRowComponent extends GroupRowComponentBase {
-    constructor() {
-        super();
-    }
-    ngOnInit() { }
-}
-GroupRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: GroupRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GroupRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: GroupRowComponent, selector: "teta-group-row", inputs: { row: "row", columns: "columns" }, usesInheritance: true, ngImport: i0, template: "<span>{{row.groupValue[row.level]}} ()</span>\n<!--<span>{{row.groupValue[row.level]}} ({{row.children.length}})</span>-->\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: GroupRowComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-group-row', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span>{{row.groupValue[row.level]}} ()</span>\n<!--<span>{{row.groupValue[row.level]}} ({{row.children.length}})</span>-->\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { row: [{
-                type: Input
-            }], columns: [{
-                type: Input
-            }] } });
-
 class ClickService {
     constructor(_document) {
         this._document = _document;
@@ -8149,6 +8084,13 @@ class DefaultHeadCellComponent extends HeadCellComponentBase {
     get column() {
         return this._column;
     }
+    set columns(val) {
+        this._columns = val;
+        this._cdr.detectChanges();
+    }
+    get columns() {
+        return this._columns;
+    }
     set data(data) {
         this._data = data;
         this._cdr.detectChanges();
@@ -8160,12 +8102,14 @@ class DefaultHeadCellComponent extends HeadCellComponentBase {
     }
 }
 DefaultHeadCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DefaultHeadCellComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DefaultHeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: DefaultHeadCellComponent, selector: "teta-default-head-cell", inputs: { column: "column", data: "data" }, usesInheritance: true, ngImport: i0, template: "<div class=\"column column_auto\" [tetaHint]=\"column.hint || column.caption\">\n  <div class=\"table-head__cell__text\">\n    {{column.caption}}\n  </div>\n  <div *ngIf=\"column.unit\" class=\"table-head__cell__text font-caption\" style=\"overflow: visible;\">\n    [{{column.unit}}]\n  </div>\n</div>\n", styles: [":host{align-items:center;justify-content:center;display:flex;min-width:0;padding:6px 8px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: HintDirective, selector: "[tetaHint]", inputs: ["tetaHint", "align", "verticalAlign", "delay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DefaultHeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: DefaultHeadCellComponent, selector: "teta-default-head-cell", inputs: { column: "column", columns: "columns", data: "data" }, usesInheritance: true, ngImport: i0, template: "<div class=\"column column_auto\" [tetaHint]=\"column.hint || column.caption\">\n  <div class=\"table-head__cell__text\">\n    {{column.caption}}\n  </div>\n  <div *ngIf=\"column.unit\" class=\"table-head__cell__text font-caption\" style=\"overflow: visible;\">\n    [{{column.unit}}]\n  </div>\n</div>\n", styles: [":host{align-items:center;justify-content:center;display:flex;min-width:0;padding:6px 8px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: HintDirective, selector: "[tetaHint]", inputs: ["tetaHint", "align", "verticalAlign", "delay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DefaultHeadCellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-default-head-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"column column_auto\" [tetaHint]=\"column.hint || column.caption\">\n  <div class=\"table-head__cell__text\">\n    {{column.caption}}\n  </div>\n  <div *ngIf=\"column.unit\" class=\"table-head__cell__text font-caption\" style=\"overflow: visible;\">\n    [{{column.unit}}]\n  </div>\n</div>\n", styles: [":host{align-items:center;justify-content:center;display:flex;min-width:0;padding:6px 8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
                 type: Input
+            }], columns: [{
+                type: Input
             }], data: [{
                 type: Input
             }] } });
@@ -8183,6 +8127,15 @@ class HeadCellHostComponent {
     get column() {
         return this._column;
     }
+    set columns(columns) {
+        this._columns = columns;
+        if (this.init) {
+            this.componentRef.instance.columns = this._columns;
+        }
+    }
+    get columns() {
+        return this._columns;
+    }
     set data(data) {
         this._data = data;
         if (this.init) {
@@ -8199,17 +8152,20 @@ class HeadCellHostComponent {
         this.componentRef =
             this.viewContainerRef.createComponent(this.column.headCellComponent);
         this.componentRef.instance.column = this.column;
+        this.componentRef.instance.columns = this.columns;
         this.componentRef.instance.data = this.data;
         this.init = true;
     }
 }
 HeadCellHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: HeadCellHostComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-HeadCellHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: HeadCellHostComponent, selector: "teta-head-cell-host", inputs: { column: "column", data: "data" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HeadCellHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: HeadCellHostComponent, selector: "teta-head-cell-host", inputs: { column: "column", columns: "columns", data: "data" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: HeadCellHostComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-head-cell-host', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { column: [{
                 type: Input
+            }], columns: [{
+                type: Input
             }], data: [{
                 type: Input
             }] } });
@@ -8971,10 +8927,10 @@ class HeadCellComponent {
     }
 }
 HeadCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: HeadCellComponent, deps: [{ token: TableService }, { token: i0.ApplicationRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-HeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: HeadCellComponent, selector: "teta-head-cell", inputs: { column: "column", showHeadCellMenu: "showHeadCellMenu", data: "data" }, host: { listeners: { "dragstart": "dragstart($event)", "dragenter": "dragenter($event)", "dragover": "allowDrop($event)", "dragleave": "dragleave($event)", "dragend": "dragend($event)", "drop": "drop($event)" }, properties: { "class.table-head__cell_active": "this.dropDownOpen" } }, viewQueries: [{ propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }, { propertyName: "filterTemplate", first: true, predicate: ["filterTemplate"], descendants: true, static: true }, { propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }], ngImport: i0, template: "<div draggable=\"true\" class=\"row row_auto\">\n  <teta-dropdown [autoCloseIgnore]=\"['enter', 'inside']\"\n                 [verticalAlign]=\"verticalAlign.bottom\"\n                 [appendToBody]=\"false\"\n                 [(open)]=\"dropDownOpen\"\n                 [align]=\"align.left\"\n                 (click)=\"$event.preventDefault()\"\n                 [class.table-head__cell__menu_open]=\"dropDownOpen\"\n                 class=\"column column_auto justify-content-center\">\n    <div tetaDropdownHead class=\"table-head__cell__wrapper\"\n         [ngClass]=\"column.headCellClass\">\n      <teta-head-cell-host [column]=\"column\" [data]=\"data\"></teta-head-cell-host>\n      <teta-icon *ngIf=\"iconName | async as icon\"\n                 [palette]=\"'text'\"\n                 [name]=\"icon\"></teta-icon>\n    </div>\n    <teta-head-cell-dropdown tetaDropdownContent\n                             *ngIf=\"showHeadCellMenu\"\n                             [tabTemplates]=\"tabTemplates\"\n                             [data]=\"data\"\n                             [column]=\"column\"\n                             [columns]=\"columns | async\"\n                             [state]=\"state | async\"\n                             [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n  </teta-dropdown>\n  <div class=\"drop-area\"\n       draggable=\"false\"\n       [class.drop-area_left]=\"showDrag === 'left'\"\n       [class.drop-area_right]=\"showDrag === 'right'\"\n       *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n     draggable=\"false\"\n     (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n     (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n     [tetaResizeDrag]=\"'vertical'\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd()\">\n  <div class=\"table-head__cell__resize_drag\"></div>\n</div>\n<ng-template #mainTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-main-dropdown-tab [column]=\"column\" [state]=\"state\" [close]=\"close\"></teta-main-dropdown-tab>\n</ng-template>\n<ng-template #filterTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-filter-dropdown-tab [column]=\"column\"\n                            [state]=\"state\"\n                            [close]=\"close\"\n                            [data]=\"data\"></teta-filter-dropdown-tab>\n</ng-template>\n<ng-template #columnsTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-visibility-dropdown-tab [column]=\"column\"\n                                [columns]=\"columns\"\n                                [state]=\"state\"\n                                [close]=\"close\"\n                                [data]=\"data\"></teta-visibility-dropdown-tab>\n</ng-template>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: ResizeDragDirective, selector: "[tetaResizeDrag]", inputs: ["tetaResizeDrag"], outputs: ["resizeStart", "resizeProcess", "resizeEnd"] }, { kind: "component", type: HeadCellHostComponent, selector: "teta-head-cell-host", inputs: ["column", "data"] }, { kind: "component", type: HeadCellDropdownComponent, selector: "teta-head-cell-dropdown", inputs: ["columns", "column", "state", "data", "tabTemplates", "dropDownOpen"], outputs: ["dropDownOpenChange"] }, { kind: "component", type: MainDropdownTabComponent, selector: "teta-main-dropdown-tab", inputs: ["columns", "column", "state", "data", "close"] }, { kind: "component", type: FilterDropdownTabComponent, selector: "teta-filter-dropdown-tab", inputs: ["columns", "column", "state", "data", "close"] }, { kind: "component", type: VisibilityDropdownTabComponent, selector: "teta-visibility-dropdown-tab", inputs: ["columns", "column", "state", "data", "close"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: HeadCellComponent, selector: "teta-head-cell", inputs: { column: "column", showHeadCellMenu: "showHeadCellMenu", data: "data" }, host: { listeners: { "dragstart": "dragstart($event)", "dragenter": "dragenter($event)", "dragover": "allowDrop($event)", "dragleave": "dragleave($event)", "dragend": "dragend($event)", "drop": "drop($event)" }, properties: { "class.table-head__cell_active": "this.dropDownOpen" } }, viewQueries: [{ propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }, { propertyName: "filterTemplate", first: true, predicate: ["filterTemplate"], descendants: true, static: true }, { propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }], ngImport: i0, template: "<div draggable=\"true\" class=\"row row_auto\">\n  <teta-dropdown [autoCloseIgnore]=\"['enter', 'inside']\"\n                 [verticalAlign]=\"verticalAlign.bottom\"\n                 [appendToBody]=\"false\"\n                 [(open)]=\"dropDownOpen\"\n                 [align]=\"align.left\"\n                 (click)=\"$event.preventDefault()\"\n                 [class.table-head__cell__menu_open]=\"dropDownOpen\"\n                 class=\"column column_auto justify-content-center\">\n    <div tetaDropdownHead class=\"table-head__cell__wrapper\"\n         [ngClass]=\"column.headCellClass\">\n      <teta-head-cell-host [column]=\"column\" [columns]=\"columns | async\" [data]=\"data\"></teta-head-cell-host>\n      <teta-icon *ngIf=\"iconName | async as icon\"\n                 [palette]=\"'text'\"\n                 [name]=\"icon\"></teta-icon>\n    </div>\n    <teta-head-cell-dropdown tetaDropdownContent\n                             *ngIf=\"showHeadCellMenu\"\n                             [tabTemplates]=\"tabTemplates\"\n                             [data]=\"data\"\n                             [column]=\"column\"\n                             [columns]=\"columns | async\"\n                             [state]=\"state | async\"\n                             [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n  </teta-dropdown>\n  <div class=\"drop-area\"\n       draggable=\"false\"\n       [class.drop-area_left]=\"showDrag === 'left'\"\n       [class.drop-area_right]=\"showDrag === 'right'\"\n       *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n     draggable=\"false\"\n     (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n     (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n     [tetaResizeDrag]=\"'vertical'\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd()\">\n  <div class=\"table-head__cell__resize_drag\"></div>\n</div>\n<ng-template #mainTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-main-dropdown-tab [column]=\"column\" [state]=\"state\" [close]=\"close\"></teta-main-dropdown-tab>\n</ng-template>\n<ng-template #filterTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-filter-dropdown-tab [column]=\"column\"\n                            [state]=\"state\"\n                            [close]=\"close\"\n                            [data]=\"data\"></teta-filter-dropdown-tab>\n</ng-template>\n<ng-template #columnsTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-visibility-dropdown-tab [column]=\"column\"\n                                [columns]=\"columns\"\n                                [state]=\"state\"\n                                [close]=\"close\"\n                                [data]=\"data\"></teta-visibility-dropdown-tab>\n</ng-template>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: ResizeDragDirective, selector: "[tetaResizeDrag]", inputs: ["tetaResizeDrag"], outputs: ["resizeStart", "resizeProcess", "resizeEnd"] }, { kind: "component", type: HeadCellHostComponent, selector: "teta-head-cell-host", inputs: ["column", "columns", "data"] }, { kind: "component", type: HeadCellDropdownComponent, selector: "teta-head-cell-dropdown", inputs: ["columns", "column", "state", "data", "tabTemplates", "dropDownOpen"], outputs: ["dropDownOpenChange"] }, { kind: "component", type: MainDropdownTabComponent, selector: "teta-main-dropdown-tab", inputs: ["columns", "column", "state", "data", "close"] }, { kind: "component", type: FilterDropdownTabComponent, selector: "teta-filter-dropdown-tab", inputs: ["columns", "column", "state", "data", "close"] }, { kind: "component", type: VisibilityDropdownTabComponent, selector: "teta-visibility-dropdown-tab", inputs: ["columns", "column", "state", "data", "close"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: HeadCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-head-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div draggable=\"true\" class=\"row row_auto\">\n  <teta-dropdown [autoCloseIgnore]=\"['enter', 'inside']\"\n                 [verticalAlign]=\"verticalAlign.bottom\"\n                 [appendToBody]=\"false\"\n                 [(open)]=\"dropDownOpen\"\n                 [align]=\"align.left\"\n                 (click)=\"$event.preventDefault()\"\n                 [class.table-head__cell__menu_open]=\"dropDownOpen\"\n                 class=\"column column_auto justify-content-center\">\n    <div tetaDropdownHead class=\"table-head__cell__wrapper\"\n         [ngClass]=\"column.headCellClass\">\n      <teta-head-cell-host [column]=\"column\" [data]=\"data\"></teta-head-cell-host>\n      <teta-icon *ngIf=\"iconName | async as icon\"\n                 [palette]=\"'text'\"\n                 [name]=\"icon\"></teta-icon>\n    </div>\n    <teta-head-cell-dropdown tetaDropdownContent\n                             *ngIf=\"showHeadCellMenu\"\n                             [tabTemplates]=\"tabTemplates\"\n                             [data]=\"data\"\n                             [column]=\"column\"\n                             [columns]=\"columns | async\"\n                             [state]=\"state | async\"\n                             [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n  </teta-dropdown>\n  <div class=\"drop-area\"\n       draggable=\"false\"\n       [class.drop-area_left]=\"showDrag === 'left'\"\n       [class.drop-area_right]=\"showDrag === 'right'\"\n       *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n     draggable=\"false\"\n     (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n     (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n     [tetaResizeDrag]=\"'vertical'\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd()\">\n  <div class=\"table-head__cell__resize_drag\"></div>\n</div>\n<ng-template #mainTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-main-dropdown-tab [column]=\"column\" [state]=\"state\" [close]=\"close\"></teta-main-dropdown-tab>\n</ng-template>\n<ng-template #filterTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-filter-dropdown-tab [column]=\"column\"\n                            [state]=\"state\"\n                            [close]=\"close\"\n                            [data]=\"data\"></teta-filter-dropdown-tab>\n</ng-template>\n<ng-template #columnsTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-visibility-dropdown-tab [column]=\"column\"\n                                [columns]=\"columns\"\n                                [state]=\"state\"\n                                [close]=\"close\"\n                                [data]=\"data\"></teta-visibility-dropdown-tab>\n</ng-template>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"] }]
+            args: [{ selector: 'teta-head-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div draggable=\"true\" class=\"row row_auto\">\n  <teta-dropdown [autoCloseIgnore]=\"['enter', 'inside']\"\n                 [verticalAlign]=\"verticalAlign.bottom\"\n                 [appendToBody]=\"false\"\n                 [(open)]=\"dropDownOpen\"\n                 [align]=\"align.left\"\n                 (click)=\"$event.preventDefault()\"\n                 [class.table-head__cell__menu_open]=\"dropDownOpen\"\n                 class=\"column column_auto justify-content-center\">\n    <div tetaDropdownHead class=\"table-head__cell__wrapper\"\n         [ngClass]=\"column.headCellClass\">\n      <teta-head-cell-host [column]=\"column\" [columns]=\"columns | async\" [data]=\"data\"></teta-head-cell-host>\n      <teta-icon *ngIf=\"iconName | async as icon\"\n                 [palette]=\"'text'\"\n                 [name]=\"icon\"></teta-icon>\n    </div>\n    <teta-head-cell-dropdown tetaDropdownContent\n                             *ngIf=\"showHeadCellMenu\"\n                             [tabTemplates]=\"tabTemplates\"\n                             [data]=\"data\"\n                             [column]=\"column\"\n                             [columns]=\"columns | async\"\n                             [state]=\"state | async\"\n                             [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n  </teta-dropdown>\n  <div class=\"drop-area\"\n       draggable=\"false\"\n       [class.drop-area_left]=\"showDrag === 'left'\"\n       [class.drop-area_right]=\"showDrag === 'right'\"\n       *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n     draggable=\"false\"\n     (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n     (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n     [tetaResizeDrag]=\"'vertical'\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd()\">\n  <div class=\"table-head__cell__resize_drag\"></div>\n</div>\n<ng-template #mainTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-main-dropdown-tab [column]=\"column\" [state]=\"state\" [close]=\"close\"></teta-main-dropdown-tab>\n</ng-template>\n<ng-template #filterTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-filter-dropdown-tab [column]=\"column\"\n                            [state]=\"state\"\n                            [close]=\"close\"\n                            [data]=\"data\"></teta-filter-dropdown-tab>\n</ng-template>\n<ng-template #columnsTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-visibility-dropdown-tab [column]=\"column\"\n                                [columns]=\"columns\"\n                                [state]=\"state\"\n                                [close]=\"close\"\n                                [data]=\"data\"></teta-visibility-dropdown-tab>\n</ng-template>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"] }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ApplicationRef }, { type: i0.ElementRef }]; }, propDecorators: { column: [{
                 type: Input
             }], showHeadCellMenu: [{
@@ -9252,7 +9208,7 @@ class CellComponentBase {
             .pipe(takeWhile((_) => this._alive))
             .subscribe((cellValue) => {
             if (this.index === cellValue.row && this.column.name === cellValue.column) {
-                this.row.data[this.column.name] = cellValue.value;
+                this.row[this.column.name] = cellValue.value;
                 this.cdr.detectChanges();
             }
         });
@@ -9317,10 +9273,10 @@ class NumericCellComponent extends CellComponentBase {
     }
 }
 NumericCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NumericCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NumericCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: NumericCellComponent, selector: "teta-numeric-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row.data[column.name] | tetaNumber : 2}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       tetaOnlyNumber\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row.data[column.name]\"\n       (ngModelChange)=\"row.data[column.name]=$event;\"/>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator"] }, { kind: "pipe", type: NumberPipe, name: "tetaNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NumericCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: NumericCellComponent, selector: "teta-numeric-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row[column.name] | tetaNumber : 2}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       tetaOnlyNumber\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row[column.name]\"\n       (ngModelChange)=\"row[column.name]=$event;\"/>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator"] }, { kind: "pipe", type: NumberPipe, name: "tetaNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: NumericCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-numeric-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row.data[column.name] | tetaNumber : 2}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       tetaOnlyNumber\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row.data[column.name]\"\n       (ngModelChange)=\"row.data[column.name]=$event;\"/>\n" }]
+            args: [{ selector: 'teta-numeric-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row[column.name] | tetaNumber : 2}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       tetaOnlyNumber\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row[column.name]\"\n       (ngModelChange)=\"row[column.name]=$event;\"/>\n" }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
                 type: Input
             }], row: [{
@@ -9340,7 +9296,7 @@ class DateCellComponent extends CellComponentBase {
         super.ngOnInit();
     }
     setValue(value) {
-        this.row.data[this.column.name] = value ? new Date(value) : value;
+        this.row[this.column.name] = value ? new Date(value) : value;
         this.valueChanged();
         this.cdr.detectChanges();
     }
@@ -9357,10 +9313,10 @@ class DateCellComponent extends CellComponentBase {
     }
 }
 DateCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DateCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: DateCellComponent, selector: "teta-date-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row.data[column.name] | date : 'dd.MM.yyyy'}}\n</span>\n<teta-date-picker class=\"datepicker-table\"\n                  #input\n                  *ngIf=\"edit\"\n                  [appendToBody]=\"true\"\n                  [showTime]=\"false\"\n                  [ngModel]=\"row.data[column.name]\"\n                  (ngModelChange)=\"setValue($event)\"\n></teta-date-picker>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["disabled", "invalid", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "minYearDate", "maxYearDate", "align", "verticalAlign", "appendToBody", "allowNull", "backdrop", "showTime", "format"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: DateCellComponent, selector: "teta-date-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row[column.name] | date : 'dd.MM.yyyy'}}\n</span>\n<teta-date-picker class=\"datepicker-table\"\n                  #input\n                  *ngIf=\"edit\"\n                  [appendToBody]=\"true\"\n                  [showTime]=\"false\"\n                  [ngModel]=\"row[column.name]\"\n                  (ngModelChange)=\"setValue($event)\"\n></teta-date-picker>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["disabled", "invalid", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "minYearDate", "maxYearDate", "align", "verticalAlign", "appendToBody", "allowNull", "backdrop", "showTime", "format"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DateCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-date-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row.data[column.name] | date : 'dd.MM.yyyy'}}\n</span>\n<teta-date-picker class=\"datepicker-table\"\n                  #input\n                  *ngIf=\"edit\"\n                  [appendToBody]=\"true\"\n                  [showTime]=\"false\"\n                  [ngModel]=\"row.data[column.name]\"\n                  (ngModelChange)=\"setValue($event)\"\n></teta-date-picker>\n" }]
+            args: [{ selector: 'teta-date-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row[column.name] | date : 'dd.MM.yyyy'}}\n</span>\n<teta-date-picker class=\"datepicker-table\"\n                  #input\n                  *ngIf=\"edit\"\n                  [appendToBody]=\"true\"\n                  [showTime]=\"false\"\n                  [ngModel]=\"row[column.name]\"\n                  (ngModelChange)=\"setValue($event)\"\n></teta-date-picker>\n" }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
                 type: Input
             }], row: [{
@@ -9383,7 +9339,7 @@ class ListCellComponent extends CellComponentBase {
     }
     get displayFilterOptions() {
         if (this.column?.parentName?.length > 0) {
-            const parentValue = this.row.data[this.column.parentName];
+            const parentValue = this.row[this.column.parentName];
             if (parentValue) {
                 return this.filterOptions.filter(_ => _.parentId === parentValue);
             }
@@ -9392,7 +9348,7 @@ class ListCellComponent extends CellComponentBase {
     }
     setValue(value) {
         // if(this.c)
-        this.row.data[this.column.name] = value;
+        this.row[this.column.name] = value;
         this.valueChanged();
     }
     startEdit(initiator, type) {
@@ -9415,7 +9371,7 @@ class ListCellComponent extends CellComponentBase {
             !(this.filterOptions instanceof Array)) {
             return '';
         }
-        const item = this.filterOptions.find((option) => option.id === this.row.data[this.column.name]);
+        const item = this.filterOptions.find((option) => option.id === this.row[this.column.name]);
         if (item === null || item === undefined) {
             return '';
         }
@@ -9423,10 +9379,10 @@ class ListCellComponent extends CellComponentBase {
     }
 }
 ListCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ListCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListCellComponent, selector: "teta-list-cell", inputs: { column: "column", row: "row", filterOptions: "filterOptions" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{value}}\n</span>\n<teta-select #input\n             class=\"row_auto select-table\"\n             *ngIf=\"edit\"\n             [allowNull]=\"!column.required\"\n             [verticalAlign]=\"verticalAlign.auto\"\n             [appendToBody]=\"true\"\n             [options]=\"displayFilterOptions\"\n             [valueRef]=\"'id'\"\n             [textRef]=\"'name'\"\n             [ngModel]=\"row.data[column.name]\"\n             (ngModelChange)=\"setValue($event)\">\n</teta-select>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "valueRef", "textRef", "searchRef"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ListCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ListCellComponent, selector: "teta-list-cell", inputs: { column: "column", row: "row", filterOptions: "filterOptions" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{value}}\n</span>\n<teta-select #input\n             class=\"row_auto select-table\"\n             *ngIf=\"edit\"\n             [allowNull]=\"!column.required\"\n             [verticalAlign]=\"verticalAlign.auto\"\n             [appendToBody]=\"true\"\n             [options]=\"displayFilterOptions\"\n             [valueRef]=\"'id'\"\n             [textRef]=\"'name'\"\n             [ngModel]=\"row[column.name]\"\n             (ngModelChange)=\"setValue($event)\">\n</teta-select>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "valueRef", "textRef", "searchRef"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ListCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-list-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{value}}\n</span>\n<teta-select #input\n             class=\"row_auto select-table\"\n             *ngIf=\"edit\"\n             [allowNull]=\"!column.required\"\n             [verticalAlign]=\"verticalAlign.auto\"\n             [appendToBody]=\"true\"\n             [options]=\"displayFilterOptions\"\n             [valueRef]=\"'id'\"\n             [textRef]=\"'name'\"\n             [ngModel]=\"row.data[column.name]\"\n             (ngModelChange)=\"setValue($event)\">\n</teta-select>\n" }]
+            args: [{ selector: 'teta-list-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{value}}\n</span>\n<teta-select #input\n             class=\"row_auto select-table\"\n             *ngIf=\"edit\"\n             [allowNull]=\"!column.required\"\n             [verticalAlign]=\"verticalAlign.auto\"\n             [appendToBody]=\"true\"\n             [options]=\"displayFilterOptions\"\n             [valueRef]=\"'id'\"\n             [textRef]=\"'name'\"\n             [ngModel]=\"row[column.name]\"\n             (ngModelChange)=\"setValue($event)\">\n</teta-select>\n" }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
                 type: Input
             }], row: [{
@@ -9470,10 +9426,10 @@ class StringCellComponent extends CellComponentBase {
     }
 }
 StringCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: StringCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-StringCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: StringCellComponent, selector: "teta-string-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row.data[column.name]}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row.data[column.name]\"\n       (ngModelChange)=\"row.data[column.name]=$event\"/>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+StringCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: StringCellComponent, selector: "teta-string-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row[column.name]}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row[column.name]\"\n       (ngModelChange)=\"row[column.name]=$event\"/>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: StringCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-string-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row.data[column.name]}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row.data[column.name]\"\n       (ngModelChange)=\"row.data[column.name]=$event\"/>\n\n" }]
+            args: [{ selector: 'teta-string-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row[column.name]}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row[column.name]\"\n       (ngModelChange)=\"row[column.name]=$event\"/>\n\n" }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
                 type: Input
             }], row: [{
@@ -9508,10 +9464,10 @@ class BooleanCellComponent extends CellComponentBase {
     }
 }
 BooleanCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BooleanCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BooleanCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: BooleanCellComponent, selector: "teta-boolean-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{ row.data[column.name] }}\n</span>\n<teta-checkbox\n  #input\n  *ngIf=\"edit\"\n  [binary]=\"true\"\n  [(ngModel)]=\"row.data[column.name]\"\n  (blur)=\"setValue()\"\n></teta-checkbox>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "allowNull"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BooleanCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: BooleanCellComponent, selector: "teta-boolean-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{ row[column.name] }}\n</span>\n<teta-checkbox\n  #input\n  *ngIf=\"edit\"\n  [binary]=\"true\"\n  [(ngModel)]=\"row[column.name]\"\n  (blur)=\"setValue()\"\n></teta-checkbox>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "allowNull"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: BooleanCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-boolean-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{ row.data[column.name] }}\n</span>\n<teta-checkbox\n  #input\n  *ngIf=\"edit\"\n  [binary]=\"true\"\n  [(ngModel)]=\"row.data[column.name]\"\n  (blur)=\"setValue()\"\n></teta-checkbox>\n" }]
+            args: [{ selector: 'teta-boolean-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{ row[column.name] }}\n</span>\n<teta-checkbox\n  #input\n  *ngIf=\"edit\"\n  [binary]=\"true\"\n  [(ngModel)]=\"row[column.name]\"\n  (blur)=\"setValue()\"\n></teta-checkbox>\n" }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
                 type: Input
             }], row: [{
@@ -9648,8 +9604,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
             }] } });
 
 class TableBodyComponent {
-    constructor(_svc, _config, _cdr) {
+    constructor(_svc, _elementRef, _config, _cdr) {
         this._svc = _svc;
+        this._elementRef = _elementRef;
         this._config = _config;
         this._cdr = _cdr;
         this.selectedRows = [];
@@ -9660,17 +9617,6 @@ class TableBodyComponent {
         this._columns = [];
         this._alive = true;
         this._hiddenColumns = [];
-        this.getData = (index, count, success) => {
-            const data = [];
-            if (this.data?.length > 0) {
-                const start = Math.max(0, index);
-                const end = Math.min(index + count - 1, this.data.length - 1);
-                for (let i = start; i <= end; i++) {
-                    data.push(this.data[i]);
-                }
-            }
-            return success(data);
-        };
     }
     set data(data) {
         this._data = data;
@@ -9694,6 +9640,17 @@ class TableBodyComponent {
     setActiveRow(row) {
         this._svc.setActiveRow(row);
     }
+    // getData = (index, count, success) => {
+    //   const data = [];
+    //   if (this.data?.length > 0) {
+    //     const start = Math.max(0, index);
+    //     const end = Math.min(index + count - 1, this.data.length - 1);
+    //     for (let i = start; i <= end; i++) {
+    //       data.push(this.data[i]);
+    //     }
+    //   }
+    //   return success(data);
+    // };
     ngOnInit() {
         this.locale = this._config.locale;
         combineLatest([this._svc.columns, this._svc.hiddenColumns])
@@ -9714,10 +9671,14 @@ class TableBodyComponent {
             this._cdr.markForCheck();
         });
         this._svc.scrollIndex
-            .pipe(takeWhile((_) => this._alive))
-            .subscribe(async (_) => {
+            .pipe(takeWhile(() => this._alive))
+            .subscribe(async (index) => {
             if (this.viewport) {
-                this.viewport.scrollToIndex(_, 'smooth');
+                this.viewport.scrollToIndex(index, 'auto');
+            }
+            else {
+                const row = this._elementRef.nativeElement.querySelector(`.table-row[data-row="${index}"]`);
+                row?.scrollIntoView();
             }
             this._cdr.markForCheck();
         });
@@ -9761,8 +9722,8 @@ class TableBodyComponent {
         return '';
     }
     trackRow(index, row) {
-        if (row.data['id']) {
-            return row.data['id'];
+        if (row['id']) {
+            return row['id'];
         }
         return index;
     }
@@ -9771,27 +9732,27 @@ class TableBodyComponent {
     }
     getSum(columnName) {
         return this.data?.reduce((accum, current) => {
-            const val = parseFloat(current.data[columnName]);
+            const val = parseFloat(current[columnName]);
             return accum + (isNaN(val) ? 0 : val);
         }, 0);
     }
     getMin(columnName) {
-        return this.data?.reduce((accum, current) => accum != null && accum <= current.data[columnName]
+        return this.data?.reduce((accum, current) => accum != null && accum <= current[columnName]
             ? accum
-            : current.data[columnName], null);
+            : current[columnName], null);
     }
     getMax(columnName) {
-        return this.data?.reduce((accum, current) => accum != null && accum >= current.data[columnName]
+        return this.data?.reduce((accum, current) => accum != null && accum >= current[columnName]
             ? accum
-            : current.data[columnName], null);
+            : current[columnName], null);
     }
 }
-TableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: TableBodyComponent, deps: [{ token: TableService }, { token: TetaConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: TableBodyComponent, selector: "teta-table-body", inputs: { virtual: "virtual", activeRow: "activeRow", selectedRows: "selectedRows", additionalComponent: "additionalComponent", tree: "tree", aggregate: "aggregate", grouping: "grouping", groupRowComponent: "groupRowComponent", openLevels: "openLevels", selectType: "selectType", rowClass: "rowClass" }, host: { properties: { "class.table-body": "this.tableBodyClass" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual\"\n                             class=\"table-body-container\"\n                             [itemSize]=\"28\">\n  <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n</cdk-virtual-scroll-viewport>\n<div *ngIf=\"!virtual\"\n     class=\"table-body-container\">\n  <ng-container *ngFor=\"let row of data; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"aggregate\">\n    <ng-container *ngTemplateOutlet=\"aggTemplate;\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <div class=\"table-row\"\n       (click)=\"setActiveRow(row)\"\n       (contextmenu)=\"setActiveRow(row)\"\n       [attr.data-row]=\"rowIndex\"\n       [class.table-row_odd]=\"rowIndex % 2 === 1\"\n       [ngClass]=\"rowClass ? rowClass(row, rowIndex) : ''\"\n       [class.table-row_selected]=\"selectedRows && selectedRows.indexOf(row) >= 0\"\n       [style.flex-grow]=\"totalFlex\"\n       [style.flex-basis.px]=\"totalWidth\"\n       [style.min-width.px]=\"totalWidth\">\n    <ng-container *ngIf=\"!grouping\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\"\n           [style.zIndex]=\"row === activeRow ? 1 : 'unset'\">\n        <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length\"\n                             [row]=\"row\"\n                             style=\"width: 28px;\"></teta-selection-cell>\n        <teta-cell\n          *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n          [attr.data-row]=\"rowIndex\"\n          [attr.data-column]=\"column.name\"\n          [column]=\"column\"\n          [filterOptions]=\"dict?dict[column.name]:[]\"\n          [dict]=\"dict\"\n          [row]=\"row\"\n          [ngClass]=\"column.cellClass\"\n          [attr.tabindex]=\"0\"\n          [style.flex-grow]=\"column.flex\"\n          [style.flex-basis.px]=\"column.width\"\n        ></teta-cell>\n      </div>\n      <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\"\n                           [row]=\"row\"\n                           style=\"width: 28px;\"></teta-selection-cell>\n      <teta-cell\n        *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-column]=\"column.name\"\n        [column]=\"column\"\n        [filterOptions]=\"dict?dict[column.name]:[]\"\n        [dict]=\"dict\"\n        [row]=\"row\"\n        [ngClass]=\"column.cellClass\"\n        [attr.tabindex]=\"0\"\n        [style.flex-grow]=\"column.flex\"\n        [style.flex-basis.px]=\"column.width\"\n      ></teta-cell>\n    </ng-container>\n    <ng-container *ngIf=\"grouping\">\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #aggTemplate>\n  <ng-container *ngIf=\"locale | async as loc\">\n    <div class=\"table-row\"\n         *ngIf=\"aggregate\"\n         [class.table-row_virtual]=\"virtual\"\n         [style.flex-grow]=\"virtual ? totalFlex : ''\"\n         [style.flex-basis.px]=\"virtual ? totalWidth : ''\"\n         [style.min-width.px]=\"virtual ? totalWidth : ''\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\">\n        <div class=\"cell align-center justify-content-center\"\n             style=\"width: 28px;\">\n          <teta-icon [name]=\"'sumColor'\"></teta-icon>\n        </div>\n        <div class=\"cell cell-component justify-content-end\"\n             *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n             [attr.data-column]=\"column.name\"\n             [ngClass]=\"column.cellClass\"\n             [attr.tabindex]=\"0\"\n             [style.flex-grow]=\"column.flex\"\n             [style.flex-basis.px]=\"column.width\">\n        <span class=\"cell-text cell-text_numeric font-title-3\">\n          {{loc[getAggregateText(column)]}}:\n          {{getAggregateValue(column) | tetaNumber : 2}}\n        </span>\n        </div>\n      </div>\n      <div class=\"cell align-center justify-content-center\"\n           style=\"width: 28px;\"\n           *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n        <teta-icon [name]=\"'sumColor'\"></teta-icon>\n      </div>\n      <div class=\"cell cell-component justify-content-end\"\n           *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n           [attr.data-column]=\"column.name\"\n           [ngClass]=\"column.cellClass\"\n           [attr.tabindex]=\"0\"\n           [style.flex-grow]=\"column.flex\"\n           [style.flex-basis.px]=\"column.width\">\n      <span class=\"cell-text cell-text_numeric font-title-3\">\n        {{loc[getAggregateText(column)]}}:\n        {{getAggregateValue(column) | tetaNumber : 2}}\n      </span>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: i5.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i5.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i5.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: CellComponent, selector: "teta-cell", inputs: ["column", "filterOptions", "dict", "row"] }, { kind: "component", type: SelectionCellComponent, selector: "teta-selection-cell", inputs: ["row"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "tetaNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: TableBodyComponent, deps: [{ token: TableService }, { token: i0.ElementRef }, { token: TetaConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: TableBodyComponent, selector: "teta-table-body", inputs: { virtual: "virtual", activeRow: "activeRow", selectedRows: "selectedRows", additionalComponent: "additionalComponent", aggregate: "aggregate", selectType: "selectType", rowClass: "rowClass" }, host: { properties: { "class.table-body": "this.tableBodyClass" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual\"\n                             class=\"table-body-container\"\n                             [itemSize]=\"28\">\n  <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n</cdk-virtual-scroll-viewport>\n<div *ngIf=\"!virtual\"\n     class=\"table-body-container\">\n  <ng-container *ngFor=\"let row of data; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"aggregate\">\n    <ng-container *ngTemplateOutlet=\"aggTemplate;\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <div class=\"table-row\"\n       (click)=\"setActiveRow(row)\"\n       (contextmenu)=\"setActiveRow(row)\"\n       [attr.data-row]=\"rowIndex\"\n       [class.table-row_odd]=\"rowIndex % 2 === 1\"\n       [ngClass]=\"rowClass ? rowClass(row, rowIndex) : ''\"\n       [class.table-row_selected]=\"selectedRows && selectedRows.indexOf(row) >= 0\"\n       [style.flex-grow]=\"totalFlex\"\n       [style.flex-basis.px]=\"totalWidth\"\n       [style.min-width.px]=\"totalWidth\">\n    <div class=\"table-row_locked\"\n         *ngIf=\"locked.length > 0\"\n         [style.flex-grow]=\"lockedFlex\"\n         [style.flex-basis.px]=\"lockedWidth\"\n         [style.min-width.px]=\"lockedWidth\"\n         [style.zIndex]=\"row === activeRow ? 1 : 'unset'\">\n      <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length\"\n                           [row]=\"row\"\n                           style=\"width: 28px;\"></teta-selection-cell>\n      <teta-cell\n        *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-column]=\"column.name\"\n        [column]=\"column\"\n        [filterOptions]=\"dict?dict[column.name]:[]\"\n        [dict]=\"dict\"\n        [row]=\"row\"\n        [ngClass]=\"column.cellClass\"\n        [attr.tabindex]=\"0\"\n        [style.flex-grow]=\"column.flex\"\n        [style.flex-basis.px]=\"column.width\"\n      ></teta-cell>\n    </div>\n    <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\"\n                         [row]=\"row\"\n                         style=\"width: 28px;\"></teta-selection-cell>\n    <teta-cell\n      *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n      [attr.data-row]=\"rowIndex\"\n      [attr.data-column]=\"column.name\"\n      [column]=\"column\"\n      [filterOptions]=\"dict?dict[column.name]:[]\"\n      [dict]=\"dict\"\n      [row]=\"row\"\n      [ngClass]=\"column.cellClass\"\n      [attr.tabindex]=\"0\"\n      [style.flex-grow]=\"column.flex\"\n      [style.flex-basis.px]=\"column.width\"\n    ></teta-cell>\n  </div>\n</ng-template>\n\n<ng-template #aggTemplate>\n  <ng-container *ngIf=\"locale | async as loc\">\n    <div class=\"table-row\"\n         *ngIf=\"aggregate\"\n         [class.table-row_virtual]=\"virtual\"\n         [style.flex-grow]=\"virtual ? totalFlex : ''\"\n         [style.flex-basis.px]=\"virtual ? totalWidth : ''\"\n         [style.min-width.px]=\"virtual ? totalWidth : ''\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\">\n        <div class=\"cell align-center justify-content-center\"\n             style=\"width: 28px;\">\n          <teta-icon [name]=\"'sumColor'\"></teta-icon>\n        </div>\n        <div class=\"cell cell-component justify-content-end\"\n             *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n             [attr.data-column]=\"column.name\"\n             [ngClass]=\"column.cellClass\"\n             [attr.tabindex]=\"0\"\n             [style.flex-grow]=\"column.flex\"\n             [style.flex-basis.px]=\"column.width\">\n        <span class=\"cell-text cell-text_numeric font-title-3\">\n          {{loc[getAggregateText(column)]}}:\n          {{getAggregateValue(column) | tetaNumber : 2}}\n        </span>\n        </div>\n      </div>\n      <div class=\"cell align-center justify-content-center\"\n           style=\"width: 28px;\"\n           *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n        <teta-icon [name]=\"'sumColor'\"></teta-icon>\n      </div>\n      <div class=\"cell cell-component justify-content-end\"\n           *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n           [attr.data-column]=\"column.name\"\n           [ngClass]=\"column.cellClass\"\n           [attr.tabindex]=\"0\"\n           [style.flex-grow]=\"column.flex\"\n           [style.flex-basis.px]=\"column.width\">\n      <span class=\"cell-text cell-text_numeric font-title-3\">\n        {{loc[getAggregateText(column)]}}:\n        {{getAggregateValue(column) | tetaNumber : 2}}\n      </span>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: i5.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i5.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i5.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: CellComponent, selector: "teta-cell", inputs: ["column", "filterOptions", "dict", "row"] }, { kind: "component", type: SelectionCellComponent, selector: "teta-selection-cell", inputs: ["row"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "tetaNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: TableBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-table-body', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual\"\n                             class=\"table-body-container\"\n                             [itemSize]=\"28\">\n  <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n</cdk-virtual-scroll-viewport>\n<div *ngIf=\"!virtual\"\n     class=\"table-body-container\">\n  <ng-container *ngFor=\"let row of data; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"aggregate\">\n    <ng-container *ngTemplateOutlet=\"aggTemplate;\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <div class=\"table-row\"\n       (click)=\"setActiveRow(row)\"\n       (contextmenu)=\"setActiveRow(row)\"\n       [attr.data-row]=\"rowIndex\"\n       [class.table-row_odd]=\"rowIndex % 2 === 1\"\n       [ngClass]=\"rowClass ? rowClass(row, rowIndex) : ''\"\n       [class.table-row_selected]=\"selectedRows && selectedRows.indexOf(row) >= 0\"\n       [style.flex-grow]=\"totalFlex\"\n       [style.flex-basis.px]=\"totalWidth\"\n       [style.min-width.px]=\"totalWidth\">\n    <ng-container *ngIf=\"!grouping\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\"\n           [style.zIndex]=\"row === activeRow ? 1 : 'unset'\">\n        <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length\"\n                             [row]=\"row\"\n                             style=\"width: 28px;\"></teta-selection-cell>\n        <teta-cell\n          *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n          [attr.data-row]=\"rowIndex\"\n          [attr.data-column]=\"column.name\"\n          [column]=\"column\"\n          [filterOptions]=\"dict?dict[column.name]:[]\"\n          [dict]=\"dict\"\n          [row]=\"row\"\n          [ngClass]=\"column.cellClass\"\n          [attr.tabindex]=\"0\"\n          [style.flex-grow]=\"column.flex\"\n          [style.flex-basis.px]=\"column.width\"\n        ></teta-cell>\n      </div>\n      <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\"\n                           [row]=\"row\"\n                           style=\"width: 28px;\"></teta-selection-cell>\n      <teta-cell\n        *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-column]=\"column.name\"\n        [column]=\"column\"\n        [filterOptions]=\"dict?dict[column.name]:[]\"\n        [dict]=\"dict\"\n        [row]=\"row\"\n        [ngClass]=\"column.cellClass\"\n        [attr.tabindex]=\"0\"\n        [style.flex-grow]=\"column.flex\"\n        [style.flex-basis.px]=\"column.width\"\n      ></teta-cell>\n    </ng-container>\n    <ng-container *ngIf=\"grouping\">\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #aggTemplate>\n  <ng-container *ngIf=\"locale | async as loc\">\n    <div class=\"table-row\"\n         *ngIf=\"aggregate\"\n         [class.table-row_virtual]=\"virtual\"\n         [style.flex-grow]=\"virtual ? totalFlex : ''\"\n         [style.flex-basis.px]=\"virtual ? totalWidth : ''\"\n         [style.min-width.px]=\"virtual ? totalWidth : ''\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\">\n        <div class=\"cell align-center justify-content-center\"\n             style=\"width: 28px;\">\n          <teta-icon [name]=\"'sumColor'\"></teta-icon>\n        </div>\n        <div class=\"cell cell-component justify-content-end\"\n             *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n             [attr.data-column]=\"column.name\"\n             [ngClass]=\"column.cellClass\"\n             [attr.tabindex]=\"0\"\n             [style.flex-grow]=\"column.flex\"\n             [style.flex-basis.px]=\"column.width\">\n        <span class=\"cell-text cell-text_numeric font-title-3\">\n          {{loc[getAggregateText(column)]}}:\n          {{getAggregateValue(column) | tetaNumber : 2}}\n        </span>\n        </div>\n      </div>\n      <div class=\"cell align-center justify-content-center\"\n           style=\"width: 28px;\"\n           *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n        <teta-icon [name]=\"'sumColor'\"></teta-icon>\n      </div>\n      <div class=\"cell cell-component justify-content-end\"\n           *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n           [attr.data-column]=\"column.name\"\n           [ngClass]=\"column.cellClass\"\n           [attr.tabindex]=\"0\"\n           [style.flex-grow]=\"column.flex\"\n           [style.flex-basis.px]=\"column.width\">\n      <span class=\"cell-text cell-text_numeric font-title-3\">\n        {{loc[getAggregateText(column)]}}:\n        {{getAggregateValue(column) | tetaNumber : 2}}\n      </span>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: TableService }, { type: TetaConfigService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { virtual: [{
+            args: [{ selector: 'teta-table-body', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual\"\n                             class=\"table-body-container\"\n                             [itemSize]=\"28\">\n  <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n</cdk-virtual-scroll-viewport>\n<div *ngIf=\"!virtual\"\n     class=\"table-body-container\">\n  <ng-container *ngFor=\"let row of data; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"aggregate\">\n    <ng-container *ngTemplateOutlet=\"aggTemplate;\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <div class=\"table-row\"\n       (click)=\"setActiveRow(row)\"\n       (contextmenu)=\"setActiveRow(row)\"\n       [attr.data-row]=\"rowIndex\"\n       [class.table-row_odd]=\"rowIndex % 2 === 1\"\n       [ngClass]=\"rowClass ? rowClass(row, rowIndex) : ''\"\n       [class.table-row_selected]=\"selectedRows && selectedRows.indexOf(row) >= 0\"\n       [style.flex-grow]=\"totalFlex\"\n       [style.flex-basis.px]=\"totalWidth\"\n       [style.min-width.px]=\"totalWidth\">\n    <div class=\"table-row_locked\"\n         *ngIf=\"locked.length > 0\"\n         [style.flex-grow]=\"lockedFlex\"\n         [style.flex-basis.px]=\"lockedWidth\"\n         [style.min-width.px]=\"lockedWidth\"\n         [style.zIndex]=\"row === activeRow ? 1 : 'unset'\">\n      <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length\"\n                           [row]=\"row\"\n                           style=\"width: 28px;\"></teta-selection-cell>\n      <teta-cell\n        *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-column]=\"column.name\"\n        [column]=\"column\"\n        [filterOptions]=\"dict?dict[column.name]:[]\"\n        [dict]=\"dict\"\n        [row]=\"row\"\n        [ngClass]=\"column.cellClass\"\n        [attr.tabindex]=\"0\"\n        [style.flex-grow]=\"column.flex\"\n        [style.flex-basis.px]=\"column.width\"\n      ></teta-cell>\n    </div>\n    <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\"\n                         [row]=\"row\"\n                         style=\"width: 28px;\"></teta-selection-cell>\n    <teta-cell\n      *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n      [attr.data-row]=\"rowIndex\"\n      [attr.data-column]=\"column.name\"\n      [column]=\"column\"\n      [filterOptions]=\"dict?dict[column.name]:[]\"\n      [dict]=\"dict\"\n      [row]=\"row\"\n      [ngClass]=\"column.cellClass\"\n      [attr.tabindex]=\"0\"\n      [style.flex-grow]=\"column.flex\"\n      [style.flex-basis.px]=\"column.width\"\n    ></teta-cell>\n  </div>\n</ng-template>\n\n<ng-template #aggTemplate>\n  <ng-container *ngIf=\"locale | async as loc\">\n    <div class=\"table-row\"\n         *ngIf=\"aggregate\"\n         [class.table-row_virtual]=\"virtual\"\n         [style.flex-grow]=\"virtual ? totalFlex : ''\"\n         [style.flex-basis.px]=\"virtual ? totalWidth : ''\"\n         [style.min-width.px]=\"virtual ? totalWidth : ''\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\">\n        <div class=\"cell align-center justify-content-center\"\n             style=\"width: 28px;\">\n          <teta-icon [name]=\"'sumColor'\"></teta-icon>\n        </div>\n        <div class=\"cell cell-component justify-content-end\"\n             *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n             [attr.data-column]=\"column.name\"\n             [ngClass]=\"column.cellClass\"\n             [attr.tabindex]=\"0\"\n             [style.flex-grow]=\"column.flex\"\n             [style.flex-basis.px]=\"column.width\">\n        <span class=\"cell-text cell-text_numeric font-title-3\">\n          {{loc[getAggregateText(column)]}}:\n          {{getAggregateValue(column) | tetaNumber : 2}}\n        </span>\n        </div>\n      </div>\n      <div class=\"cell align-center justify-content-center\"\n           style=\"width: 28px;\"\n           *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n        <teta-icon [name]=\"'sumColor'\"></teta-icon>\n      </div>\n      <div class=\"cell cell-component justify-content-end\"\n           *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n           [attr.data-column]=\"column.name\"\n           [ngClass]=\"column.cellClass\"\n           [attr.tabindex]=\"0\"\n           [style.flex-grow]=\"column.flex\"\n           [style.flex-basis.px]=\"column.width\">\n      <span class=\"cell-text cell-text_numeric font-title-3\">\n        {{loc[getAggregateText(column)]}}:\n        {{getAggregateValue(column) | tetaNumber : 2}}\n      </span>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ElementRef }, { type: TetaConfigService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { virtual: [{
                 type: Input
             }], activeRow: [{
                 type: Input
@@ -9799,16 +9760,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                 type: Input
             }], additionalComponent: [{
                 type: Input
-            }], tree: [{
-                type: Input
             }], aggregate: [{
                 type: Input
-            }], grouping: [{
-                type: Input
-            }], groupRowComponent: [{
-                type: Input
-            }], openLevels: [{
-                type: Input
             }], selectType: [{
                 type: Input
             }], rowClass: [{
@@ -9828,8 +9781,12 @@ class TableComponent {
         this.data = [];
         this.columns = [];
         this.selectType = SelectType.mouse;
-        this.groupRowComponent = GroupRowComponent;
-        this.trackRow = (index, row) => index;
+        this.trackRow = (index, row) => {
+            if (row['id']) {
+                return row['id'];
+            }
+            return index;
+        };
         this.editType = EditType.cell;
         this.editEvent = EditEvent.doubleClick;
         this.showHeadCellMenu = true;
@@ -10078,7 +10035,9 @@ class TableComponent {
         }
         if (changes.hasOwnProperty('data')) {
             this._svc.setData(this.data);
-            this._svc.selectRows([]);
+            this._svc.selectRows(this.data?.filter((row) => {
+                return this.selectedRows?.some((selectedRow) => this.trackRow(this._svc.getRowIndex(selectedRow), selectedRow) === this.trackRow(this._svc.getRowIndex(row), row));
+            }));
         }
         if (changes.hasOwnProperty('dict')) {
             this._svc.setDict(this.dict);
@@ -10123,6 +10082,9 @@ class TableComponent {
         return row && this._elementRef.nativeElement.contains(row);
     }
     getCoordinates(event) {
+        if (event.composedPath().indexOf(this._elementRef.nativeElement) < 0) {
+            return null;
+        }
         const cell = this.getEventCell(event);
         if (cell) {
             const rowIndex = parseInt(cell.getAttribute('data-row'), 10);
@@ -10138,6 +10100,9 @@ class TableComponent {
         return null;
     }
     getRow(event) {
+        if (event.composedPath().indexOf(this._elementRef.nativeElement) < 0) {
+            return null;
+        }
         const rowElement = this.getEventRow(event);
         if (rowElement) {
             const rowIndex = parseInt(rowElement.getAttribute('data-row'), 10);
@@ -10149,10 +10114,10 @@ class TableComponent {
     }
 }
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: TableComponent, deps: [{ token: TableService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: TableComponent, selector: "teta-table", inputs: { data: "data", columns: "columns", dict: "dict", filterOptions: "filterOptions", state: "state", cookieName: "cookieName", virtual: "virtual", detailComponent: "detailComponent", activeRow: "activeRow", selectedRows: "selectedRows", selectType: "selectType", aggregate: "aggregate", grouping: "grouping", groupRowComponent: "groupRowComponent", openLevels: "openLevels", tree: "tree", trackRow: "trackRow", editType: "editType", editEvent: "editEvent", rowEditable: "rowEditable", rowClass: "rowClass", scrollToIndex: "scrollToIndex", showHeadCellMenu: "showHeadCellMenu", contextMenu: "contextMenu", contextMenuOpen: "contextMenuOpen" }, outputs: { contextMenuOpenChange: "contextMenuOpenChange", stateChange: "stateChange", bodyLeft: "bodyLeft", activeRowChange: "activeRowChange", selectedRowsChange: "selectedRowsChange", cellClick: "cellClick", cellDoubleClick: "cellDoubleClick", cellFocus: "cellFocus", cellKeyDown: "cellKeyDown", rowLeft: "rowLeft", rowEditStart: "rowEditStart", rowEditEnd: "rowEditEnd", cellEditStart: "cellEditStart", cellEditEnd: "cellEditEnd", valueChange: "valueChange", tableService: "tableService" }, host: { listeners: { "document:click": "handleClickOutsideAnyRow($event)", "focusin": "focusIn($event)", "dblclick": "dblclick($event)", "keydown": "keydown($event)", "mousedown": "mousedown($event)" }, properties: { "class.table": "this.tableClass" } }, providers: [TableService], viewQueries: [{ propertyName: "menu", first: true, predicate: ["contextMenu"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"column column_auto\">\n  <teta-table-head\n    [selectType]=\"selectType\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n  <div class=\"column column_auto position-relative\">\n    <teta-table-body\n      [tetaContextMenu]=\"contextMenu\"\n      [open]=\"contextMenuOpen\"\n      (openChange)=\"setContextMenuOpen($event)\"\n      [aggregate]=\"aggregate\"\n      [virtual]=\"virtual\"\n      [activeRow]=\"activeRow\"\n      [selectedRows]=\"selectedRowsList\"\n      [additionalComponent]=\"detailComponent\"\n      [grouping]=\"grouping\"\n      [groupRowComponent]=\"groupRowComponent\"\n      [openLevels]=\"openLevels\"\n      [selectType]=\"selectType\"\n      [rowClass]=\"rowClass\"\n      [tree]=\"tree\"></teta-table-body>\n    <div class=\"column column_auto\"\n         style=\"position: absolute; top:0; bottom:0;left:0;right:0;\"\n         *ngIf=\"!data?.length\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContextMenuDirective, selector: "[tetaContextMenu]", inputs: ["tetaContextMenu", "autoCloseIgnore"] }, { kind: "component", type: TableHeadComponent, selector: "teta-table-head", inputs: ["selectType", "showHeadCellMenu"] }, { kind: "component", type: TableBodyComponent, selector: "teta-table-body", inputs: ["virtual", "activeRow", "selectedRows", "additionalComponent", "tree", "aggregate", "grouping", "groupRowComponent", "openLevels", "selectType", "rowClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: TableComponent, selector: "teta-table", inputs: { data: "data", columns: "columns", dict: "dict", filterOptions: "filterOptions", state: "state", cookieName: "cookieName", virtual: "virtual", detailComponent: "detailComponent", activeRow: "activeRow", selectedRows: "selectedRows", selectType: "selectType", aggregate: "aggregate", trackRow: "trackRow", editType: "editType", editEvent: "editEvent", rowEditable: "rowEditable", rowClass: "rowClass", scrollToIndex: "scrollToIndex", showHeadCellMenu: "showHeadCellMenu", contextMenu: "contextMenu", contextMenuOpen: "contextMenuOpen" }, outputs: { contextMenuOpenChange: "contextMenuOpenChange", stateChange: "stateChange", bodyLeft: "bodyLeft", activeRowChange: "activeRowChange", selectedRowsChange: "selectedRowsChange", cellClick: "cellClick", cellDoubleClick: "cellDoubleClick", cellFocus: "cellFocus", cellKeyDown: "cellKeyDown", rowLeft: "rowLeft", rowEditStart: "rowEditStart", rowEditEnd: "rowEditEnd", cellEditStart: "cellEditStart", cellEditEnd: "cellEditEnd", valueChange: "valueChange", tableService: "tableService" }, host: { listeners: { "document:click": "handleClickOutsideAnyRow($event)", "focusin": "focusIn($event)", "dblclick": "dblclick($event)", "keydown": "keydown($event)", "mousedown": "mousedown($event)" }, properties: { "class.table": "this.tableClass" } }, providers: [TableService], viewQueries: [{ propertyName: "menu", first: true, predicate: ["contextMenu"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"column column_auto\">\n  <teta-table-head\n    [selectType]=\"selectType\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n  <div class=\"column column_auto position-relative\">\n    <teta-table-body\n      [tetaContextMenu]=\"contextMenu\"\n      [open]=\"contextMenuOpen\"\n      (openChange)=\"setContextMenuOpen($event)\"\n      [aggregate]=\"aggregate\"\n      [virtual]=\"virtual\"\n      [activeRow]=\"activeRow\"\n      [selectedRows]=\"selectedRowsList\"\n      [additionalComponent]=\"detailComponent\"\n      [selectType]=\"selectType\"\n      [rowClass]=\"rowClass\"></teta-table-body>\n    <div class=\"column column_auto\"\n         style=\"position: absolute; top:0; bottom:0;left:0;right:0;\"\n         *ngIf=\"!data?.length\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContextMenuDirective, selector: "[tetaContextMenu]", inputs: ["tetaContextMenu", "autoCloseIgnore"] }, { kind: "component", type: TableHeadComponent, selector: "teta-table-head", inputs: ["selectType", "showHeadCellMenu"] }, { kind: "component", type: TableBodyComponent, selector: "teta-table-body", inputs: ["virtual", "activeRow", "selectedRows", "additionalComponent", "aggregate", "selectType", "rowClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableService], template: "<div class=\"column column_auto\">\n  <teta-table-head\n    [selectType]=\"selectType\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n  <div class=\"column column_auto position-relative\">\n    <teta-table-body\n      [tetaContextMenu]=\"contextMenu\"\n      [open]=\"contextMenuOpen\"\n      (openChange)=\"setContextMenuOpen($event)\"\n      [aggregate]=\"aggregate\"\n      [virtual]=\"virtual\"\n      [activeRow]=\"activeRow\"\n      [selectedRows]=\"selectedRowsList\"\n      [additionalComponent]=\"detailComponent\"\n      [grouping]=\"grouping\"\n      [groupRowComponent]=\"groupRowComponent\"\n      [openLevels]=\"openLevels\"\n      [selectType]=\"selectType\"\n      [rowClass]=\"rowClass\"\n      [tree]=\"tree\"></teta-table-body>\n    <div class=\"column column_auto\"\n         style=\"position: absolute; top:0; bottom:0;left:0;right:0;\"\n         *ngIf=\"!data?.length\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'teta-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableService], template: "<div class=\"column column_auto\">\n  <teta-table-head\n    [selectType]=\"selectType\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n  <div class=\"column column_auto position-relative\">\n    <teta-table-body\n      [tetaContextMenu]=\"contextMenu\"\n      [open]=\"contextMenuOpen\"\n      (openChange)=\"setContextMenuOpen($event)\"\n      [aggregate]=\"aggregate\"\n      [virtual]=\"virtual\"\n      [activeRow]=\"activeRow\"\n      [selectedRows]=\"selectedRowsList\"\n      [additionalComponent]=\"detailComponent\"\n      [selectType]=\"selectType\"\n      [rowClass]=\"rowClass\"></teta-table-body>\n    <div class=\"column column_auto\"\n         style=\"position: absolute; top:0; bottom:0;left:0;right:0;\"\n         *ngIf=\"!data?.length\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ElementRef }]; }, propDecorators: { data: [{
                 type: Input
             }], columns: [{
@@ -10177,14 +10142,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                 type: Input
             }], aggregate: [{
                 type: Input
-            }], grouping: [{
-                type: Input
-            }], groupRowComponent: [{
-                type: Input
-            }], openLevels: [{
-                type: Input
-            }], tree: [{
-                type: Input
             }], trackRow: [{
                 type: Input
             }], editType: [{
@@ -10334,7 +10291,7 @@ class DateTimeCellComponent extends CellComponentBase {
         super.ngOnInit();
     }
     setValue(value) {
-        this.row.data[this.column.name] = value;
+        this.row[this.column.name] = value;
         this.valueChanged();
     }
     startEdit(initiator, type) {
@@ -10350,10 +10307,10 @@ class DateTimeCellComponent extends CellComponentBase {
     }
 }
 DateTimeCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DateTimeCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateTimeCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: DateTimeCellComponent, selector: "teta-date-time-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row.data[column.name] | date : 'dd.MM.yyyy HH:mm:ss'}}\n</span>\n<teta-date-picker class=\"datepicker-table\" #input\n                  *ngIf=\"edit\"\n                  [appendToBody]=\"true\"\n                  [showTime]=\"true\"\n                  [ngModel]=\"row.data[column.name]\"\n                  (ngModelChange)=\"setValue($event)\"\n></teta-date-picker>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["disabled", "invalid", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "minYearDate", "maxYearDate", "align", "verticalAlign", "appendToBody", "allowNull", "backdrop", "showTime", "format"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateTimeCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: DateTimeCellComponent, selector: "teta-date-time-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row[column.name] | date : 'dd.MM.yyyy HH:mm:ss'}}\n</span>\n<teta-date-picker class=\"datepicker-table\" #input\n                  *ngIf=\"edit\"\n                  [appendToBody]=\"true\"\n                  [showTime]=\"true\"\n                  [ngModel]=\"row[column.name]\"\n                  (ngModelChange)=\"setValue($event)\"\n></teta-date-picker>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["disabled", "invalid", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "minYearDate", "maxYearDate", "align", "verticalAlign", "appendToBody", "allowNull", "backdrop", "showTime", "format"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: DateTimeCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-date-time-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row.data[column.name] | date : 'dd.MM.yyyy HH:mm:ss'}}\n</span>\n<teta-date-picker class=\"datepicker-table\" #input\n                  *ngIf=\"edit\"\n                  [appendToBody]=\"true\"\n                  [showTime]=\"true\"\n                  [ngModel]=\"row.data[column.name]\"\n                  (ngModelChange)=\"setValue($event)\"\n></teta-date-picker>\n" }]
+            args: [{ selector: 'teta-date-time-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row[column.name] | date : 'dd.MM.yyyy HH:mm:ss'}}\n</span>\n<teta-date-picker class=\"datepicker-table\" #input\n                  *ngIf=\"edit\"\n                  [appendToBody]=\"true\"\n                  [showTime]=\"true\"\n                  [ngModel]=\"row[column.name]\"\n                  (ngModelChange)=\"setValue($event)\"\n></teta-date-picker>\n" }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
                 type: Input
             }], row: [{
@@ -10409,7 +10366,6 @@ TableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "1
         TableBodyComponent,
         CellComponent,
         CellHostComponent,
-        GroupRowComponent,
         TableHeadGroupComponent,
         HeadCellComponent,
         DefaultHeadCellComponent,
@@ -10448,7 +10404,6 @@ TableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "1
         TableBodyComponent,
         CellComponent,
         CellHostComponent,
-        GroupRowComponent,
         DateTimeCellComponent,
         BooleanCellComponent] });
 TableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: TableModule, imports: [CommonModule,
@@ -10484,7 +10439,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                         TableBodyComponent,
                         CellComponent,
                         CellHostComponent,
-                        GroupRowComponent,
                         TableHeadGroupComponent,
                         HeadCellComponent,
                         DefaultHeadCellComponent,
@@ -10508,7 +10462,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImpor
                         TableBodyComponent,
                         CellComponent,
                         CellHostComponent,
-                        GroupRowComponent,
                         DateTimeCellComponent,
                         BooleanCellComponent,
                     ],
@@ -10873,6 +10826,7 @@ class ResizePanelComponent {
         this._elementRef = _elementRef;
         this._renderer = _renderer;
         this._document = _document;
+        this.size = 8;
         this.resizePanelClass = true;
         this._direction = 'horizontal';
         this._grabPosition = 'left';
@@ -11005,14 +10959,16 @@ class ResizePanelComponent {
     }
 }
 ResizePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ResizePanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-ResizePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ResizePanelComponent, selector: "teta-resize-panel", inputs: { direction: "direction", grabPosition: "grabPosition", name: "name", minSize: "minSize", maxSize: "maxSize" }, host: { properties: { "class.resize-panel": "this.resizePanelClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n<div #grab class=\"resize-grab\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd($event)\"\n     [tetaResizeDrag]=\"direction\"\n     [ngClass]=\"getClassName()\">\n\n  <teta-icon [name]=\"icon\"></teta-icon>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: ResizeDragDirective, selector: "[tetaResizeDrag]", inputs: ["tetaResizeDrag"], outputs: ["resizeStart", "resizeProcess", "resizeEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ResizePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.0", type: ResizePanelComponent, selector: "teta-resize-panel", inputs: { size: "size", direction: "direction", grabPosition: "grabPosition", name: "name", minSize: "minSize", maxSize: "maxSize" }, host: { properties: { "class.resize-panel": "this.resizePanelClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n<div #grab class=\"resize-grab\"\n     [style.width.px]=\"direction === 'vertical' ? size : ''\"\n     [style.height.px]=\"direction === 'horizontal' ? size : ''\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd($event)\"\n     [tetaResizeDrag]=\"direction\"\n     [ngClass]=\"getClassName()\">\n  <teta-icon [name]=\"icon\"></teta-icon>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: ResizeDragDirective, selector: "[tetaResizeDrag]", inputs: ["tetaResizeDrag"], outputs: ["resizeStart", "resizeProcess", "resizeEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.0", ngImport: i0, type: ResizePanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-resize-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div #grab class=\"resize-grab\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd($event)\"\n     [tetaResizeDrag]=\"direction\"\n     [ngClass]=\"getClassName()\">\n\n  <teta-icon [name]=\"icon\"></teta-icon>\n</div>\n" }]
+            args: [{ selector: 'teta-resize-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div #grab class=\"resize-grab\"\n     [style.width.px]=\"direction === 'vertical' ? size : ''\"\n     [style.height.px]=\"direction === 'horizontal' ? size : ''\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd($event)\"\n     [tetaResizeDrag]=\"direction\"\n     [ngClass]=\"getClassName()\">\n  <teta-icon [name]=\"icon\"></teta-icon>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
-                }] }]; }, propDecorators: { direction: [{
+                }] }]; }, propDecorators: { size: [{
+                type: Input
+            }], direction: [{
                 type: Input
             }], grabPosition: [{
                 type: Input
@@ -11378,7 +11334,7 @@ class DragDirective {
     }
     ngOnInit() {
         this.instance = new DragInstance({
-            container: this._container.instance,
+            container: this._container?.instance,
             data: this.data
         });
         this._dragService.dropTarget.pipe(takeWhile(() => this._alive))
@@ -11962,7 +11918,7 @@ class ScrollIntoViewDirective {
             if (coerceBooleanProperty(this.tetaScrollIntoView)) {
                 this.elementRef.nativeElement.scrollIntoView({
                     behavior: 'smooth',
-                    block: 'end'
+                    block: 'start'
                 });
             }
         }
@@ -12122,5 +12078,5 @@ function tetaZoneOptimized(ngZone) {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionContentDirective, AccordionHeadComponent, AccordionItemComponent, AccordionModule, AggregationType, Align, ArrayUtil, BooleanCellComponent, BooleanFilter, BooleanFilterComponent, ButtonComponent, ButtonModule, CHECKBOX_CONTROL_VALUE_ACCESSOR, CellComponent, CellComponentBase, CellHostComponent, Chart3dComponent, Chart3dModule, Chart3dOptions, CheckboxComponent, CheckboxModule, ClickOutsideDirective, ClickOutsideModule, ClickService, ColumnReorderEvent, ColumnResizeEvent, ContextMenuDirective, ContextMenuModule, CurrentModal, DATE_PICKER_CONTROL_VALUE_ACCESSOR, DAY_SELECT_CONTROL_VALUE_ACCESSOR, DateCellComponent, DateFilter, DateFilterComponent, DateFilterValue, DatePeriod, DatePickerComponent, DatePickerModule, DateTimeCellComponent, DateUtil, DaySelectComponent, DelimiterComponent, DelimiterModule, DetailComponentBase, DialogComponent, DialogService, DisableControlDirective, DisableControlModule, DomUtil, DragContainerDirective, DragContainerInstance, DragDirective, DragDropModule, DragDropService, DragInstance, DragPlaceholderDirective, DragPreviewDirective, DragSortContainerDirective, DragSortItemDirective, DragSortModule, DropdownComponent, DropdownContentDirective, DropdownDirective, DropdownHeadDirective, DropdownModule, DynamicComponentModule, DynamicComponentService, DynamicContentBaseDirective, DynamicData, EditEvent, EditType, ExpandCardComponent, ExpandCardModule, ExpandPanelComponent, ExpandPanelContentDirective, ExpandPanelHeadDirective, ExpandPanelModule, FileItemComponent, FileUploadAreaComponent, FileUploadModule, FilterBase, FilterComponentBase, FilterHostComponent, FilterItem, FilterModule, FilterState, FilterType, FormGroupTitleComponent, FormsUtil, GroupRowComponent, HeadCellComponentBase, HeadCellHostComponent, HighlightDirective, HighlightModule, HintDirective, HintModule, IconComponent, IconModule, IconService, IconSpriteDirective, InputComponent, InputModule, LetContext, LetDirective, LetModule, ListCellComponent, ListFilter, ListFilterComponent, ListFilterType, LoaderDirective, LoaderModule, MONTH_PICKER_CONTROL_VALUE_ACCESSOR, Message, MessageComponent, MessageHostComponent, MessageModule, MessageService, ModalCloseReason, ModalContainerComponent, ModalInstance, ModalModule, ModalService, MonthPickerComponent, NoAutofillDirective, NoAutofillModule, NumberPipe, NumberPipeModule, NumericCellComponent, NumericFilter, NumericFilterComponent, NumericFilterValue, OnlyNumberDirective, OnlyNumberModule, OverlayContainerService, PagerComponent, PagerModule, PagerState, PagerUtil, PanelComponent, PanelModule, PopupContentComponent, PositionUtil, ProgressBarComponent, ProgressBarModule, PropertyGridComponent, PropertyGridModule, RadioButtonComponent, RadioComponent, RadioModule, ResizeDragDirective, ResizeDragModule, ResizePanelComponent, ResizePanelModule, SLIDER_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, ScrollIntoViewDirective, ScrollIntoViewModule, SelectComponent, SelectModule, SelectOptionDirective, SelectType, SelectValueDirective, SidebarComponent, SidebarModule, SidebarPosition, SortEvent, SortParam, StateUtil, StringCellComponent, StringFilter, StringFilterComponent, StringFilterType, StringUtil, SwitchButtonComponent, SwitchComponent, SwitchModule, TOGGLE_CONTROL_VALUE_ACCESSOR, TabComponent, TabContentDirective, TabTitleDirective, TableBodyComponent, TableColumn, TableColumnStore, TableComponent, TableHeadComponent, TableModule, TableRow, TableService, TableUtil, TabsComponent, TabsModule, TetaConfigService, TetaContentRef, TetaSize, TetaTemplateDirective, TetaTemplateModule, TextFieldComponent, ThemeSwitchComponent, ThemeSwitchModule, ThemeSwitchService, ToggleComponent, ToggleModule, ToolbarComponent, ToolbarModule, TooltipDirective, TooltipModule, TreeComponent, TreeItemToggleComponent, TreeModule, TreeService, VerticalAlign, enLocale, formatNumber, getCellComponent, getPrecision, prependZero, ruLocale, tetaZoneFree, tetaZoneFull, tetaZoneOptimized };
+export { AccordionComponent, AccordionContentDirective, AccordionHeadComponent, AccordionItemComponent, AccordionModule, AggregationType, Align, ArrayUtil, BooleanCellComponent, BooleanFilter, BooleanFilterComponent, ButtonComponent, ButtonModule, CHECKBOX_CONTROL_VALUE_ACCESSOR, CellComponent, CellComponentBase, CellHostComponent, Chart3dComponent, Chart3dModule, Chart3dOptions, CheckboxComponent, CheckboxModule, ClickOutsideDirective, ClickOutsideModule, ClickService, ColumnReorderEvent, ColumnResizeEvent, ContextMenuDirective, ContextMenuModule, CurrentModal, DATE_PICKER_CONTROL_VALUE_ACCESSOR, DAY_SELECT_CONTROL_VALUE_ACCESSOR, DateCellComponent, DateFilter, DateFilterComponent, DateFilterValue, DatePeriod, DatePickerComponent, DatePickerModule, DateTimeCellComponent, DateUtil, DaySelectComponent, DelimiterComponent, DelimiterModule, DetailComponentBase, DialogComponent, DialogService, DisableControlDirective, DisableControlModule, DomUtil, DragContainerDirective, DragContainerInstance, DragDirective, DragDropModule, DragDropService, DragInstance, DragPlaceholderDirective, DragPreviewDirective, DragSortContainerDirective, DragSortItemDirective, DragSortModule, DropdownComponent, DropdownContentDirective, DropdownDirective, DropdownHeadDirective, DropdownModule, DynamicComponentModule, DynamicComponentService, DynamicContentBaseDirective, DynamicData, EditEvent, EditType, ExpandCardComponent, ExpandCardModule, ExpandPanelComponent, ExpandPanelContentDirective, ExpandPanelHeadDirective, ExpandPanelModule, FileItemComponent, FileUploadAreaComponent, FileUploadModule, FilterBase, FilterComponentBase, FilterHostComponent, FilterItem, FilterModule, FilterState, FilterType, FormGroupTitleComponent, FormsUtil, HeadCellComponentBase, HeadCellHostComponent, HighlightDirective, HighlightModule, HintDirective, HintModule, IconComponent, IconModule, IconService, IconSpriteDirective, InputComponent, InputModule, LetContext, LetDirective, LetModule, ListCellComponent, ListFilter, ListFilterComponent, ListFilterType, LoaderDirective, LoaderModule, MONTH_PICKER_CONTROL_VALUE_ACCESSOR, Message, MessageComponent, MessageHostComponent, MessageModule, MessageService, ModalCloseReason, ModalContainerComponent, ModalInstance, ModalModule, ModalService, MonthPickerComponent, NoAutofillDirective, NoAutofillModule, NumberPipe, NumberPipeModule, NumericCellComponent, NumericFilter, NumericFilterComponent, NumericFilterValue, OnlyNumberDirective, OnlyNumberModule, OverlayContainerService, PagerComponent, PagerModule, PagerState, PagerUtil, PanelComponent, PanelModule, PopupContentComponent, PositionUtil, ProgressBarComponent, ProgressBarModule, PropertyGridComponent, PropertyGridModule, RadioButtonComponent, RadioComponent, RadioModule, ResizeDragDirective, ResizeDragModule, ResizePanelComponent, ResizePanelModule, SLIDER_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, ScrollIntoViewDirective, ScrollIntoViewModule, SelectComponent, SelectModule, SelectOptionDirective, SelectType, SelectValueDirective, SidebarComponent, SidebarModule, SidebarPosition, SortEvent, SortParam, StateUtil, StringCellComponent, StringFilter, StringFilterComponent, StringFilterType, StringUtil, SwitchButtonComponent, SwitchComponent, SwitchModule, TOGGLE_CONTROL_VALUE_ACCESSOR, TabComponent, TabContentDirective, TabTitleDirective, TableBodyComponent, TableColumn, TableColumnStore, TableComponent, TableHeadComponent, TableModule, TableService, TableUtil, TabsComponent, TabsModule, TetaConfigService, TetaContentRef, TetaSize, TetaTemplateDirective, TetaTemplateModule, TextFieldComponent, ThemeSwitchComponent, ThemeSwitchModule, ThemeSwitchService, ToggleComponent, ToggleModule, ToolbarComponent, ToolbarModule, TooltipDirective, TooltipModule, TreeComponent, TreeItemToggleComponent, TreeModule, TreeService, VerticalAlign, enLocale, formatNumber, getCellComponent, getPrecision, prependZero, ruLocale, tetaZoneFree, tetaZoneFull, tetaZoneOptimized };
 //# sourceMappingURL=tetacom-ng-components.mjs.map