npm - @tetacom/ng-components - Versions diffs - 1.0.23 → 1.0.27 - Mend

@tetacom/ng-components 1.0.23 → 1.0.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (355) hide show

package/fesm2020/tetacom-ng-components.mjs CHANGED Viewed

@@ -14,6 +14,7 @@ import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrollin
 import * as i1$1 from '@ngneat/transloco';
 import { TranslocoModule, TRANSLOCO_SCOPE } from '@ngneat/transloco';
 import * as hash from 'object-hash';
+import hash__default from 'object-hash';
 import { SizeStrategy, Datasource, UiScrollModule } from 'ngx-ui-scroll';
 import * as d3 from 'd3';
 import { zoomIdentity } from 'd3';
@@ -2478,8 +2479,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
         }] });
 class ClickOutsideDirective {
-    constructor(_elementRef) {
+    constructor(_elementRef, _ngZone) {
         this._elementRef = _elementRef;
+        this._ngZone = _ngZone;
         this.clickOutside = new EventEmitter();
         this.rightClick = false;
         this._handleEvents = false;
@@ -2489,6 +2491,7 @@ class ClickOutsideDirective {
             }
             const clickedInside = DomUtil.clickedInside(this._elementRef.nativeElement, click);
             if (!clickedInside) {
+                console.log('clickedInside', clickedInside);
                 this.clickOutside.emit(click);
             }
         };
@@ -2496,7 +2499,11 @@ class ClickOutsideDirective {
     set tetaClickOutside(val) {
         this._handleEvents = val;
         if (this._handleEvents) {
-            this.addListener(this.rightClick);
+            this._ngZone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    this.addListener(this.rightClick);
+                });
+            });
         }
         else {
             this.removeListener();
@@ -2510,6 +2517,7 @@ class ClickOutsideDirective {
     }
     addListener(handleRightClick) {
         window.addEventListener('click', this.listener);
+        console.log('handleRightClick', handleRightClick);
         if (handleRightClick) {
             window.addEventListener('contextmenu', this.listener);
         }
@@ -2519,14 +2527,14 @@ class ClickOutsideDirective {
         window.removeEventListener('contextmenu', this.listener);
     }
 }
-ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
 ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: ClickOutsideDirective, selector: "[tetaClickOutside]", inputs: { rightClick: "rightClick", tetaClickOutside: "tetaClickOutside" }, outputs: { clickOutside: "clickOutside" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tetaClickOutside]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { clickOutside: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { clickOutside: [{
                 type: Output
             }], rightClick: [{
                 type: Input
@@ -3328,10 +3336,10 @@ class FileItemComponent {
     ngOnInit() { }
 }
 FileItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FileItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FileItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: FileItemComponent, selector: "teta-file-item", ngImport: i0, template: "<p>file-item works!</p>\n", styles: [""] });
+FileItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: FileItemComponent, selector: "teta-file-item", ngImport: i0, template: "<p>file-item works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FileItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-file-item', template: "<p>file-item works!</p>\n", styles: [""] }]
+            args: [{ selector: 'teta-file-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>file-item works!</p>\n", styles: [""] }]
         }], ctorParameters: function () { return []; } });
 class FileUploadModule {
@@ -6801,6 +6809,7 @@ class TableColumn extends FilterItem {
         this.groupingOrder = options?.groupingOrder ?? 0;
         this.groupByFn = options?.groupByFn;
         this.headCellComponent = options?.headCellComponent;
+        this.headDropdownTemplate = options?.headDropdownTemplate;
         this.cellComponent = options?.cellComponent;
         this.aggregate = options?.aggregate;
         this.defaultValue = options?.defaultValue;
@@ -7013,6 +7022,7 @@ class TableService {
         this.hiddenColumns = this._hiddenColumns.asObservable();
         this.scrollIndex = this._scrollIndex.asObservable();
     }
+    // cellEditable: boolean | ((row: ICellCoordinates<T>) => boolean);
     get dragSource() {
         return this._dragSource;
     }
@@ -7025,7 +7035,11 @@ class TableService {
     }
     setColumns(columns) {
         this.initialColumns = columns ? columns.map((_) => new TableColumn(_)) : [];
-        this.initialColumnsHash = hash.sha1(this.initialColumns);
+        this.initialColumnsHash = hash__default(this.initialColumns, {
+            algorithm: 'sha1',
+            ignoreUnknown: true,
+            excludeKeys: key => key === 'headDropdownTemplate',
+        });
         const restored = this.restoreColumns();
         if (restored) {
             this.setDisplayColumns(restored);
@@ -7249,7 +7263,7 @@ class TableService {
             if (this._currentEditCell != null) {
                 this._editCellStop.next(this._currentEditCell);
             }
-            if (this.boolOrFuncCallback(this.cellEditable)(cellCoordinates)) {
+            if (this.boolOrFuncCallback(cellCoordinates.column.editable)(cellCoordinates)) {
                 this._editCellStart.next(cellCoordinates);
                 this._currentEditCell = cellCoordinates;
             }
@@ -8181,10 +8195,10 @@ class HeadCellDropdownComponent {
     }
 }
 HeadCellDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HeadCellDropdownComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-HeadCellDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: HeadCellDropdownComponent, selector: "teta-head-cell-dropdown", inputs: { columns: "columns", column: "column", state: "state", dropDownOpen: "dropDownOpen" }, outputs: { dropDownOpenChange: "dropDownOpenChange", autosize: "autosize", autosizeAll: "autosizeAll" }, host: { properties: { "class.shadow-2": "this.shadow", "class.bg-background-50": "this.bg" } }, ngImport: i0, template: "<teta-tabs class=\"column_auto\">\n  <teta-tab *ngIf=\"column.filterable\">\n    <ng-template tetaTabTitle>\n      <teta-icon [name]=\"'filter'\"></teta-icon>\n    </ng-template>\n    <ng-template tetaTabContent>\n      <teta-filter-host [column]=\"column\" [state]=\"state\"\n                        *ngIf=\"dict | async as d\"\n                        [filterOptions]=\"d[column.name]\"></teta-filter-host>\n      <teta-toolbar class=\"justify-content-between\">\n        <button teta-button [palette]=\"'text'\" [view]=\"'ghost'\" (click)=\"clearFilter()\">\n          \u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C\n        </button>\n        <button teta-button [palette]=\"'primary'\" (click)=\"applyFilter()\">\n          <teta-icon [name]=\"'tick'\"></teta-icon>\n          \u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C\n        </button>\n      </teta-toolbar>\n    </ng-template>\n  </teta-tab>\n  <teta-tab>\n    <ng-template tetaTabTitle>\n      <teta-icon [name]=\"'menu'\"></teta-icon>\n    </ng-template>\n    <ng-template tetaTabContent>\n      <div class=\"list column_auto\">\n        <div class=\"list-item list-item_interactive\" (click)=\"pinColumn()\">\n          <teta-icon [palette]=\"'text'\"\n                     [name]=\"column.locked ? 'unpin' : 'pin'\"\n                     class=\"margin-right-2\"></teta-icon>\n          {{column.locked ? '\u041E\u0442\u043A\u0440\u0435\u043F\u0438\u0442\u044C' : '\u0417\u0430\u043A\u0440\u0435\u043F\u0438\u0442\u044C'}}\n        </div>\n        <div class=\"list-divider\"></div>\n        <ng-container *ngIf=\"hasSortedColumns()\">\n          <div class=\"list-item list-item_interactive\"\n               *ngIf=\"sortParam\"\n               (click)=\"clearSort()\">\n            <teta-icon [palette]=\"'text'\"\n                       [name]=\"'pin'\" class=\"margin-right-2\"></teta-icon>\n            \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u043A\u0443\n          </div>\n          <div class=\"list-item list-item_interactive\"\n               (click)=\"clearAllSort()\">\n            <teta-icon [palette]=\"'text'\"\n                       [name]=\"'pin'\"\n                       class=\"margin-right-2\"></teta-icon>\n            \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0432\u0441\u0435 \u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u043A\u0438\n          </div>\n          <div class=\"list-divider\"></div>\n        </ng-container>\n        <ng-container *ngIf=\"hasFilteredColumns()\">\n          <div class=\"list-item list-item_interactive\"\n               *ngIf=\"filtered\"\n               (click)=\"clearFilter()\">\n            <teta-icon [palette]=\"'text'\"\n                       [name]=\"'pin'\"\n                       class=\"margin-right-2\"></teta-icon>\n            \u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440\n          </div>\n          <div class=\"list-item list-item_interactive\"\n               (click)=\"clearAllFilters()\">\n            <teta-icon [palette]=\"'text'\"\n                       [name]=\"'pin'\"\n                       class=\"margin-right-2\"></teta-icon>\n            \u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0432\u0441\u0435 \u0444\u0438\u043B\u044C\u0442\u0440\u044B\n          </div>\n          <div class=\"list-divider\"></div>\n        </ng-container>\n        <div class=\"list-item list-item_interactive\" (click)=\"autosize.emit()\">\n          <teta-icon [palette]=\"'text'\"\n                     [name]=\"'autoSize'\"\n                     class=\"margin-right-2\"></teta-icon>\n          \u0410\u0432\u0442\u043E\u0440\u0430\u0437\u043C\u0435\u0440 \u043A\u043E\u043B\u043E\u043D\u043A\u0438\n        </div>\n        <div class=\"list-item list-item_interactive\" (click)=\"autosizeAll.emit()\">\n          <teta-icon [palette]=\"'text'\"\n                     [name]=\"'autoSizeAll'\"\n                     class=\"margin-right-2\"></teta-icon>\n          \u0410\u0432\u0442\u043E\u0440\u0430\u0437\u043C\u0435\u0440 \u0432\u0441\u0435\u0445 \u043A\u043E\u043B\u043E\u043D\u043E\u043A\n        </div>\n        <div class=\"list-divider\"></div>\n        <div class=\"list-item list-item_interactive\" (click)=\"restoreDefaultColumns()\">\n          <teta-icon [palette]=\"'text'\"\n                     [name]=\"'undo'\"\n                     class=\"margin-right-2\"></teta-icon>\n          \u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C \u0432\u0441\u0435 \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F\n        </div>\n      </div>\n    </ng-template>\n  </teta-tab>\n  <teta-tab>\n    <ng-template tetaTabTitle>\n      <teta-icon [name]=\"'eye'\"></teta-icon>\n    </ng-template>\n    <ng-template tetaTabContent>\n      <div class=\"list-item padding-left-6 padding-top-2\" [class.padding-left-9]=\"childMode\">\n        <teta-checkbox [binary]=\"true\"\n                       [allowNull]=\"true\"\n                       [ngModel]=\"allColumnsVisible()\"\n                       (ngModelChange)=\"setAllColumns($event)\">\n          \u0412\u0441\u0435\n        </teta-checkbox>\n      </div>\n      <div class=\"list-divider\"></div>\n      <div class=\"padding-v-2 column column_auto scrollable\">\n        <teta-tree [data]=\"columns\"\n                   [openItems]=\"openItems\"\n                   (openItemsChange)=\"openItems = $event\"\n                   [childNodeName]=\"'columns'\"\n                   [compareItems]=\"compareItems\">\n          <ng-template tetaTemplate let-item>\n            <div class=\"tree__item\">\n              <teta-tree-item-toggle [item]=\"item\" *ngIf=\"item.columns?.length > 0\"></teta-tree-item-toggle>\n              <teta-checkbox\n                [ngModel]=\"!columnIsHidden(item)\"\n                (ngModelChange)=\"setColumnVisibility(item, $event)\"\n                (click)=\"$event.stopPropagation()\"\n                [binary]=\"true\"\n              >\n                {{item.caption}}\n              </teta-checkbox>\n            </div>\n          </ng-template>\n        </teta-tree>\n      </div>\n      <teta-toolbar class=\"justify-content-end\">\n        <button teta-button\n                [disabled]=\"allColumnsVisible() === false\"\n                [palette]=\"'primary'\"\n                (click)=\"setColumnsVisibility()\">\n          \u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C\n        </button>\n      </teta-toolbar>\n    </ng-template>\n  </teta-tab>\n</teta-tabs>\n", styles: [":host{display:flex;flex-grow:1;min-height:0;width:250px}\n"], components: [{ type: TabsComponent, selector: "teta-tabs", inputs: ["activeId", "destroyOnHide"], outputs: ["tabChange"] }, { type: TabComponent, selector: "teta-tab", inputs: ["id", "title", "disabled"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: FilterHostComponent, selector: "teta-filter-host", inputs: ["column", "state", "filterOptions"], outputs: ["filterChanged"] }, { type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "allowNull"] }, { type: TreeComponent, selector: "teta-tree", inputs: ["data", "class", "padding", "childNodeName", "openItems", "compareItems"], outputs: ["service", "openItemsChange"] }, { type: TreeItemToggleComponent, selector: "teta-tree-item-toggle", inputs: ["item"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TabTitleDirective, selector: "[tetaTabTitle]" }, { type: TabContentDirective, selector: "[tetaTabContent]" }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: TetaTemplateDirective, selector: "[tetaTemplate]", inputs: ["tetaTemplate"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HeadCellDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: HeadCellDropdownComponent, selector: "teta-head-cell-dropdown", inputs: { columns: "columns", column: "column", state: "state", dropDownOpen: "dropDownOpen" }, outputs: { dropDownOpenChange: "dropDownOpenChange", autosize: "autosize", autosizeAll: "autosizeAll" }, host: { properties: { "class.shadow-2": "this.shadow", "class.bg-background-50": "this.bg" } }, ngImport: i0, template: "<teta-tabs class=\"column_auto\">\n  <teta-tab *ngIf=\"column.filterable\">\n    <ng-template tetaTabTitle>\n      <teta-icon [name]=\"'filter'\"></teta-icon>\n    </ng-template>\n    <ng-template tetaTabContent>\n      <teta-filter-host [column]=\"column\" [state]=\"state\"\n                        *ngIf=\"dict | async as d\"\n                        [filterOptions]=\"d[column.name]\"></teta-filter-host>\n      <teta-toolbar class=\"justify-content-between\">\n        <button teta-button [palette]=\"'text'\" [view]=\"'ghost'\" (click)=\"clearFilter()\">\n          \u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C\n        </button>\n        <button teta-button [palette]=\"'primary'\" (click)=\"applyFilter()\">\n          <teta-icon [name]=\"'tick'\"></teta-icon>\n          \u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C\n        </button>\n      </teta-toolbar>\n    </ng-template>\n  </teta-tab>\n  <teta-tab *ngIf=\"column.headDropdownTemplate\">\n    <ng-template tetaTabTitle>\n      <teta-icon [name]=\"'measurement'\"></teta-icon>\n    </ng-template>\n    <ng-template tetaTabContent>\n      <ng-container\n        *ngTemplateOutlet=\"column.headDropdownTemplate; context: {$implicit: column, column: column}\"></ng-container>\n    </ng-template>\n  </teta-tab>\n  <teta-tab>\n    <ng-template tetaTabTitle>\n      <teta-icon [name]=\"'menu'\"></teta-icon>\n    </ng-template>\n    <ng-template tetaTabContent>\n      <div class=\"list column_auto\">\n        <div class=\"list-item list-item_interactive\" (click)=\"pinColumn()\">\n          <teta-icon [palette]=\"'text'\"\n                     [name]=\"column.locked ? 'unpin' : 'pin'\"\n                     class=\"margin-right-2\"></teta-icon>\n          {{column.locked ? '\u041E\u0442\u043A\u0440\u0435\u043F\u0438\u0442\u044C' : '\u0417\u0430\u043A\u0440\u0435\u043F\u0438\u0442\u044C'}}\n        </div>\n        <div class=\"list-divider\"></div>\n        <ng-container *ngIf=\"hasSortedColumns()\">\n          <div class=\"list-item list-item_interactive\"\n               *ngIf=\"sortParam\"\n               (click)=\"clearSort()\">\n            <teta-icon [palette]=\"'text'\"\n                       [name]=\"'pin'\" class=\"margin-right-2\"></teta-icon>\n            \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u043A\u0443\n          </div>\n          <div class=\"list-item list-item_interactive\"\n               (click)=\"clearAllSort()\">\n            <teta-icon [palette]=\"'text'\"\n                       [name]=\"'pin'\"\n                       class=\"margin-right-2\"></teta-icon>\n            \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0432\u0441\u0435 \u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u043A\u0438\n          </div>\n          <div class=\"list-divider\"></div>\n        </ng-container>\n        <ng-container *ngIf=\"hasFilteredColumns()\">\n          <div class=\"list-item list-item_interactive\"\n               *ngIf=\"filtered\"\n               (click)=\"clearFilter()\">\n            <teta-icon [palette]=\"'text'\"\n                       [name]=\"'pin'\"\n                       class=\"margin-right-2\"></teta-icon>\n            \u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440\n          </div>\n          <div class=\"list-item list-item_interactive\"\n               (click)=\"clearAllFilters()\">\n            <teta-icon [palette]=\"'text'\"\n                       [name]=\"'pin'\"\n                       class=\"margin-right-2\"></teta-icon>\n            \u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0432\u0441\u0435 \u0444\u0438\u043B\u044C\u0442\u0440\u044B\n          </div>\n          <div class=\"list-divider\"></div>\n        </ng-container>\n        <div class=\"list-item list-item_interactive\" (click)=\"autosize.emit()\">\n          <teta-icon [palette]=\"'text'\"\n                     [name]=\"'autoSize'\"\n                     class=\"margin-right-2\"></teta-icon>\n          \u0410\u0432\u0442\u043E\u0440\u0430\u0437\u043C\u0435\u0440 \u043A\u043E\u043B\u043E\u043D\u043A\u0438\n        </div>\n        <div class=\"list-item list-item_interactive\" (click)=\"autosizeAll.emit()\">\n          <teta-icon [palette]=\"'text'\"\n                     [name]=\"'autoSizeAll'\"\n                     class=\"margin-right-2\"></teta-icon>\n          \u0410\u0432\u0442\u043E\u0440\u0430\u0437\u043C\u0435\u0440 \u0432\u0441\u0435\u0445 \u043A\u043E\u043B\u043E\u043D\u043E\u043A\n        </div>\n        <div class=\"list-divider\"></div>\n        <div class=\"list-item list-item_interactive\" (click)=\"restoreDefaultColumns()\">\n          <teta-icon [palette]=\"'text'\"\n                     [name]=\"'undo'\"\n                     class=\"margin-right-2\"></teta-icon>\n          \u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C \u0432\u0441\u0435 \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F\n        </div>\n      </div>\n    </ng-template>\n  </teta-tab>\n  <teta-tab>\n    <ng-template tetaTabTitle>\n      <teta-icon [name]=\"'eye'\"></teta-icon>\n    </ng-template>\n    <ng-template tetaTabContent>\n      <div class=\"list-item padding-left-6 padding-top-2\" [class.padding-left-9]=\"childMode\">\n        <teta-checkbox [binary]=\"true\"\n                       [allowNull]=\"true\"\n                       [ngModel]=\"allColumnsVisible()\"\n                       (ngModelChange)=\"setAllColumns($event)\">\n          \u0412\u0441\u0435\n        </teta-checkbox>\n      </div>\n      <div class=\"list-divider\"></div>\n      <div class=\"padding-v-2 column column_auto scrollable\">\n        <teta-tree [data]=\"columns\"\n                   [openItems]=\"openItems\"\n                   (openItemsChange)=\"openItems = $event\"\n                   [childNodeName]=\"'columns'\"\n                   [compareItems]=\"compareItems\">\n          <ng-template tetaTemplate let-item>\n            <div class=\"tree__item\">\n              <teta-tree-item-toggle [item]=\"item\" *ngIf=\"item.columns?.length > 0\"></teta-tree-item-toggle>\n              <teta-checkbox\n                [ngModel]=\"!columnIsHidden(item)\"\n                (ngModelChange)=\"setColumnVisibility(item, $event)\"\n                (click)=\"$event.stopPropagation()\"\n                [binary]=\"true\"\n              >\n                {{item.caption}}\n              </teta-checkbox>\n            </div>\n          </ng-template>\n        </teta-tree>\n      </div>\n      <teta-toolbar class=\"justify-content-end\">\n        <button teta-button\n                [disabled]=\"allColumnsVisible() === false\"\n                [palette]=\"'primary'\"\n                (click)=\"setColumnsVisibility()\">\n          \u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C\n        </button>\n      </teta-toolbar>\n    </ng-template>\n  </teta-tab>\n</teta-tabs>\n", styles: [":host{display:flex;flex-grow:1;min-height:0;width:250px}\n"], components: [{ type: TabsComponent, selector: "teta-tabs", inputs: ["activeId", "destroyOnHide"], outputs: ["tabChange"] }, { type: TabComponent, selector: "teta-tab", inputs: ["id", "title", "disabled"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: FilterHostComponent, selector: "teta-filter-host", inputs: ["column", "state", "filterOptions"], outputs: ["filterChanged"] }, { type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "allowNull"] }, { type: TreeComponent, selector: "teta-tree", inputs: ["data", "class", "padding", "childNodeName", "openItems", "compareItems"], outputs: ["service", "openItemsChange"] }, { type: TreeItemToggleComponent, selector: "teta-tree-item-toggle", inputs: ["item"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TabTitleDirective, selector: "[tetaTabTitle]" }, { type: TabContentDirective, selector: "[tetaTabContent]" }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: TetaTemplateDirective, selector: "[tetaTemplate]", inputs: ["tetaTemplate"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HeadCellDropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-head-cell-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-tabs class=\"column_auto\">\n  <teta-tab *ngIf=\"column.filterable\">\n    <ng-template tetaTabTitle>\n      <teta-icon [name]=\"'filter'\"></teta-icon>\n    </ng-template>\n    <ng-template tetaTabContent>\n      <teta-filter-host [column]=\"column\" [state]=\"state\"\n                        *ngIf=\"dict | async as d\"\n                        [filterOptions]=\"d[column.name]\"></teta-filter-host>\n      <teta-toolbar class=\"justify-content-between\">\n        <button teta-button [palette]=\"'text'\" [view]=\"'ghost'\" (click)=\"clearFilter()\">\n          \u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C\n        </button>\n        <button teta-button [palette]=\"'primary'\" (click)=\"applyFilter()\">\n          <teta-icon [name]=\"'tick'\"></teta-icon>\n          \u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C\n        </button>\n      </teta-toolbar>\n    </ng-template>\n  </teta-tab>\n  <teta-tab>\n    <ng-template tetaTabTitle>\n      <teta-icon [name]=\"'menu'\"></teta-icon>\n    </ng-template>\n    <ng-template tetaTabContent>\n      <div class=\"list column_auto\">\n        <div class=\"list-item list-item_interactive\" (click)=\"pinColumn()\">\n          <teta-icon [palette]=\"'text'\"\n                     [name]=\"column.locked ? 'unpin' : 'pin'\"\n                     class=\"margin-right-2\"></teta-icon>\n          {{column.locked ? '\u041E\u0442\u043A\u0440\u0435\u043F\u0438\u0442\u044C' : '\u0417\u0430\u043A\u0440\u0435\u043F\u0438\u0442\u044C'}}\n        </div>\n        <div class=\"list-divider\"></div>\n        <ng-container *ngIf=\"hasSortedColumns()\">\n          <div class=\"list-item list-item_interactive\"\n               *ngIf=\"sortParam\"\n               (click)=\"clearSort()\">\n            <teta-icon [palette]=\"'text'\"\n                       [name]=\"'pin'\" class=\"margin-right-2\"></teta-icon>\n            \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u043A\u0443\n          </div>\n          <div class=\"list-item list-item_interactive\"\n               (click)=\"clearAllSort()\">\n            <teta-icon [palette]=\"'text'\"\n                       [name]=\"'pin'\"\n                       class=\"margin-right-2\"></teta-icon>\n            \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0432\u0441\u0435 \u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u043A\u0438\n          </div>\n          <div class=\"list-divider\"></div>\n        </ng-container>\n        <ng-container *ngIf=\"hasFilteredColumns()\">\n          <div class=\"list-item list-item_interactive\"\n               *ngIf=\"filtered\"\n               (click)=\"clearFilter()\">\n            <teta-icon [palette]=\"'text'\"\n                       [name]=\"'pin'\"\n                       class=\"margin-right-2\"></teta-icon>\n            \u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440\n          </div>\n          <div class=\"list-item list-item_interactive\"\n               (click)=\"clearAllFilters()\">\n            <teta-icon [palette]=\"'text'\"\n                       [name]=\"'pin'\"\n                       class=\"margin-right-2\"></teta-icon>\n            \u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0432\u0441\u0435 \u0444\u0438\u043B\u044C\u0442\u0440\u044B\n          </div>\n          <div class=\"list-divider\"></div>\n        </ng-container>\n        <div class=\"list-item list-item_interactive\" (click)=\"autosize.emit()\">\n          <teta-icon [palette]=\"'text'\"\n                     [name]=\"'autoSize'\"\n                     class=\"margin-right-2\"></teta-icon>\n          \u0410\u0432\u0442\u043E\u0440\u0430\u0437\u043C\u0435\u0440 \u043A\u043E\u043B\u043E\u043D\u043A\u0438\n        </div>\n        <div class=\"list-item list-item_interactive\" (click)=\"autosizeAll.emit()\">\n          <teta-icon [palette]=\"'text'\"\n                     [name]=\"'autoSizeAll'\"\n                     class=\"margin-right-2\"></teta-icon>\n          \u0410\u0432\u0442\u043E\u0440\u0430\u0437\u043C\u0435\u0440 \u0432\u0441\u0435\u0445 \u043A\u043E\u043B\u043E\u043D\u043E\u043A\n        </div>\n        <div class=\"list-divider\"></div>\n        <div class=\"list-item list-item_interactive\" (click)=\"restoreDefaultColumns()\">\n          <teta-icon [palette]=\"'text'\"\n                     [name]=\"'undo'\"\n                     class=\"margin-right-2\"></teta-icon>\n          \u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C \u0432\u0441\u0435 \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F\n        </div>\n      </div>\n    </ng-template>\n  </teta-tab>\n  <teta-tab>\n    <ng-template tetaTabTitle>\n      <teta-icon [name]=\"'eye'\"></teta-icon>\n    </ng-template>\n    <ng-template tetaTabContent>\n      <div class=\"list-item padding-left-6 padding-top-2\" [class.padding-left-9]=\"childMode\">\n        <teta-checkbox [binary]=\"true\"\n                       [allowNull]=\"true\"\n                       [ngModel]=\"allColumnsVisible()\"\n                       (ngModelChange)=\"setAllColumns($event)\">\n          \u0412\u0441\u0435\n        </teta-checkbox>\n      </div>\n      <div class=\"list-divider\"></div>\n      <div class=\"padding-v-2 column column_auto scrollable\">\n        <teta-tree [data]=\"columns\"\n                   [openItems]=\"openItems\"\n                   (openItemsChange)=\"openItems = $event\"\n                   [childNodeName]=\"'columns'\"\n                   [compareItems]=\"compareItems\">\n          <ng-template tetaTemplate let-item>\n            <div class=\"tree__item\">\n              <teta-tree-item-toggle [item]=\"item\" *ngIf=\"item.columns?.length > 0\"></teta-tree-item-toggle>\n              <teta-checkbox\n                [ngModel]=\"!columnIsHidden(item)\"\n                (ngModelChange)=\"setColumnVisibility(item, $event)\"\n                (click)=\"$event.stopPropagation()\"\n                [binary]=\"true\"\n              >\n                {{item.caption}}\n              </teta-checkbox>\n            </div>\n          </ng-template>\n        </teta-tree>\n      </div>\n      <teta-toolbar class=\"justify-content-end\">\n        <button teta-button\n                [disabled]=\"allColumnsVisible() === false\"\n                [palette]=\"'primary'\"\n                (click)=\"setColumnsVisibility()\">\n          \u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C\n        </button>\n      </teta-toolbar>\n    </ng-template>\n  </teta-tab>\n</teta-tabs>\n", styles: [":host{display:flex;flex-grow:1;min-height:0;width:250px}\n"] }]
+            args: [{ selector: 'teta-head-cell-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-tabs class=\"column_auto\">\n  <teta-tab *ngIf=\"column.filterable\">\n    <ng-template tetaTabTitle>\n      <teta-icon [name]=\"'filter'\"></teta-icon>\n    </ng-template>\n    <ng-template tetaTabContent>\n      <teta-filter-host [column]=\"column\" [state]=\"state\"\n                        *ngIf=\"dict | async as d\"\n                        [filterOptions]=\"d[column.name]\"></teta-filter-host>\n      <teta-toolbar class=\"justify-content-between\">\n        <button teta-button [palette]=\"'text'\" [view]=\"'ghost'\" (click)=\"clearFilter()\">\n          \u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C\n        </button>\n        <button teta-button [palette]=\"'primary'\" (click)=\"applyFilter()\">\n          <teta-icon [name]=\"'tick'\"></teta-icon>\n          \u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C\n        </button>\n      </teta-toolbar>\n    </ng-template>\n  </teta-tab>\n  <teta-tab *ngIf=\"column.headDropdownTemplate\">\n    <ng-template tetaTabTitle>\n      <teta-icon [name]=\"'measurement'\"></teta-icon>\n    </ng-template>\n    <ng-template tetaTabContent>\n      <ng-container\n        *ngTemplateOutlet=\"column.headDropdownTemplate; context: {$implicit: column, column: column}\"></ng-container>\n    </ng-template>\n  </teta-tab>\n  <teta-tab>\n    <ng-template tetaTabTitle>\n      <teta-icon [name]=\"'menu'\"></teta-icon>\n    </ng-template>\n    <ng-template tetaTabContent>\n      <div class=\"list column_auto\">\n        <div class=\"list-item list-item_interactive\" (click)=\"pinColumn()\">\n          <teta-icon [palette]=\"'text'\"\n                     [name]=\"column.locked ? 'unpin' : 'pin'\"\n                     class=\"margin-right-2\"></teta-icon>\n          {{column.locked ? '\u041E\u0442\u043A\u0440\u0435\u043F\u0438\u0442\u044C' : '\u0417\u0430\u043A\u0440\u0435\u043F\u0438\u0442\u044C'}}\n        </div>\n        <div class=\"list-divider\"></div>\n        <ng-container *ngIf=\"hasSortedColumns()\">\n          <div class=\"list-item list-item_interactive\"\n               *ngIf=\"sortParam\"\n               (click)=\"clearSort()\">\n            <teta-icon [palette]=\"'text'\"\n                       [name]=\"'pin'\" class=\"margin-right-2\"></teta-icon>\n            \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u043A\u0443\n          </div>\n          <div class=\"list-item list-item_interactive\"\n               (click)=\"clearAllSort()\">\n            <teta-icon [palette]=\"'text'\"\n                       [name]=\"'pin'\"\n                       class=\"margin-right-2\"></teta-icon>\n            \u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0432\u0441\u0435 \u0441\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u043A\u0438\n          </div>\n          <div class=\"list-divider\"></div>\n        </ng-container>\n        <ng-container *ngIf=\"hasFilteredColumns()\">\n          <div class=\"list-item list-item_interactive\"\n               *ngIf=\"filtered\"\n               (click)=\"clearFilter()\">\n            <teta-icon [palette]=\"'text'\"\n                       [name]=\"'pin'\"\n                       class=\"margin-right-2\"></teta-icon>\n            \u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440\n          </div>\n          <div class=\"list-item list-item_interactive\"\n               (click)=\"clearAllFilters()\">\n            <teta-icon [palette]=\"'text'\"\n                       [name]=\"'pin'\"\n                       class=\"margin-right-2\"></teta-icon>\n            \u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0432\u0441\u0435 \u0444\u0438\u043B\u044C\u0442\u0440\u044B\n          </div>\n          <div class=\"list-divider\"></div>\n        </ng-container>\n        <div class=\"list-item list-item_interactive\" (click)=\"autosize.emit()\">\n          <teta-icon [palette]=\"'text'\"\n                     [name]=\"'autoSize'\"\n                     class=\"margin-right-2\"></teta-icon>\n          \u0410\u0432\u0442\u043E\u0440\u0430\u0437\u043C\u0435\u0440 \u043A\u043E\u043B\u043E\u043D\u043A\u0438\n        </div>\n        <div class=\"list-item list-item_interactive\" (click)=\"autosizeAll.emit()\">\n          <teta-icon [palette]=\"'text'\"\n                     [name]=\"'autoSizeAll'\"\n                     class=\"margin-right-2\"></teta-icon>\n          \u0410\u0432\u0442\u043E\u0440\u0430\u0437\u043C\u0435\u0440 \u0432\u0441\u0435\u0445 \u043A\u043E\u043B\u043E\u043D\u043E\u043A\n        </div>\n        <div class=\"list-divider\"></div>\n        <div class=\"list-item list-item_interactive\" (click)=\"restoreDefaultColumns()\">\n          <teta-icon [palette]=\"'text'\"\n                     [name]=\"'undo'\"\n                     class=\"margin-right-2\"></teta-icon>\n          \u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C \u0432\u0441\u0435 \u0438\u0437\u043C\u0435\u043D\u0435\u043D\u0438\u044F\n        </div>\n      </div>\n    </ng-template>\n  </teta-tab>\n  <teta-tab>\n    <ng-template tetaTabTitle>\n      <teta-icon [name]=\"'eye'\"></teta-icon>\n    </ng-template>\n    <ng-template tetaTabContent>\n      <div class=\"list-item padding-left-6 padding-top-2\" [class.padding-left-9]=\"childMode\">\n        <teta-checkbox [binary]=\"true\"\n                       [allowNull]=\"true\"\n                       [ngModel]=\"allColumnsVisible()\"\n                       (ngModelChange)=\"setAllColumns($event)\">\n          \u0412\u0441\u0435\n        </teta-checkbox>\n      </div>\n      <div class=\"list-divider\"></div>\n      <div class=\"padding-v-2 column column_auto scrollable\">\n        <teta-tree [data]=\"columns\"\n                   [openItems]=\"openItems\"\n                   (openItemsChange)=\"openItems = $event\"\n                   [childNodeName]=\"'columns'\"\n                   [compareItems]=\"compareItems\">\n          <ng-template tetaTemplate let-item>\n            <div class=\"tree__item\">\n              <teta-tree-item-toggle [item]=\"item\" *ngIf=\"item.columns?.length > 0\"></teta-tree-item-toggle>\n              <teta-checkbox\n                [ngModel]=\"!columnIsHidden(item)\"\n                (ngModelChange)=\"setColumnVisibility(item, $event)\"\n                (click)=\"$event.stopPropagation()\"\n                [binary]=\"true\"\n              >\n                {{item.caption}}\n              </teta-checkbox>\n            </div>\n          </ng-template>\n        </teta-tree>\n      </div>\n      <teta-toolbar class=\"justify-content-end\">\n        <button teta-button\n                [disabled]=\"allColumnsVisible() === false\"\n                [palette]=\"'primary'\"\n                (click)=\"setColumnsVisibility()\">\n          \u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C\n        </button>\n      </teta-toolbar>\n    </ng-template>\n  </teta-tab>\n</teta-tabs>\n", styles: [":host{display:flex;flex-grow:1;min-height:0;width:250px}\n"] }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { columns: [{
                 type: Input
             }], column: [{
@@ -8591,7 +8605,7 @@ class CellComponentBase {
     }
     get edit() {
         return (this._edit &&
-            this.svc.boolOrFuncCallback(this.svc.cellEditable)({
+            this.svc.boolOrFuncCallback(this.column.editable)({
                 column: this.column,
                 row: this.row,
             }));
@@ -8610,14 +8624,16 @@ class CellComponentBase {
     }
     init() {
         this.svc.editRowStart
-            .pipe(takeWhile((_) => this._alive), filter((_) => this.column.editable))
+            .pipe(takeWhile((_) => this._alive))
             .subscribe((cell) => {
             if (this.row === cell?.row &&
-                !this._edit &&
-                this.svc.boolOrFuncCallback(this.svc.cellEditable)({
-                    column: this.column,
-                    row: this.row,
-                })) {
+                !this._edit
+            // &&
+            // this.svc.boolOrFuncCallback(this.svc.cellEditable)({
+            //   column: this.column,
+            //   row: this.row,
+            // })
+            ) {
                 this.start(cell, 'row');
             }
             if (this.row !== cell?.row && this._edit) {
@@ -8625,7 +8641,7 @@ class CellComponentBase {
             }
         });
         this.svc.editCellStart
-            .pipe(takeWhile((_) => this._alive), filter((_) => this.column.editable))
+            .pipe(takeWhile((_) => this._alive))
             .subscribe((cell) => {
             if (this.row === cell.row &&
                 this.column.name === cell.column.name &&
@@ -8640,12 +8656,19 @@ class CellComponentBase {
         this.svc.valueSet
             .pipe(takeWhile((_) => this._alive))
             .subscribe((cellValue) => {
-            if (this.row === cellValue.cell.row &&
-                this.column.name === cellValue.cell.column.name) {
+            if (this.row === cellValue.cell.row
+                && this.column.name === cellValue.cell.column.name) {
                 this.row.data[this.column.name] = cellValue.value;
                 this.cdr.detectChanges();
             }
         });
+        this.svc.valueChanged
+            .pipe(takeWhile((_) => this._alive))
+            .subscribe((cellValue) => {
+            if (this.row === cellValue.row) {
+                this.cdr.detectChanges();
+            }
+        });
     }
     start(initiator, type) {
         this._edit = true;
@@ -8686,6 +8709,7 @@ class NumericCellComponent extends CellComponentBase {
         if (initiator?.column.name === this.column.name) {
             setTimeout(() => {
                 this.input?.nativeElement.focus();
+                this.input?.nativeElement.select();
                 this.cdr.markForCheck();
             }, 0);
         }
@@ -8822,7 +8846,8 @@ class StringCellComponent extends CellComponentBase {
         if (initiator?.column.name === this.column.name) {
             this.cdr.markForCheck();
             setTimeout(() => {
-                this.input.nativeElement.focus();
+                this.input.nativeElement?.focus();
+                this.input.nativeElement?.select();
             }, 0);
         }
     }
@@ -9382,14 +9407,13 @@ class TableComponent {
         if (changes.hasOwnProperty('rowEditable')) {
             this._svc.rowEditable = this.rowEditable;
         }
-        if (changes.hasOwnProperty('cellEditable')) {
-            this._svc.cellEditable = this.cellEditable;
-        }
         if (changes.hasOwnProperty('cookieName')) {
             this._svc.setCookieName(this.cookieName);
         }
         if (changes.hasOwnProperty('columns')) {
-            this._svc.setColumns(this.columns);
+            if (this.columns !== null && this.columns !== undefined) {
+                this._svc.setColumns(this.columns);
+            }
         }
         if (changes.hasOwnProperty('data')) {
             this._svc.setData(this.data);
@@ -9478,7 +9502,7 @@ class TableComponent {
     }
 }
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TableComponent, deps: [{ token: TableService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TableComponent, selector: "teta-table", inputs: { data: "data", columns: "columns", dict: "dict", state: "state", rowHeight: "rowHeight", cookieName: "cookieName", virtual: "virtual", detailComponent: "detailComponent", activeRow: "activeRow", selectedRows: "selectedRows", selectType: "selectType", aggregate: "aggregate", grouping: "grouping", groupRowComponent: "groupRowComponent", openLevels: "openLevels", tree: "tree", trackBy: "trackBy", editType: "editType", editEvent: "editEvent", rowEditable: "rowEditable", cellEditable: "cellEditable", rowClass: "rowClass", scrollToIndex: "scrollToIndex", contextMenuConfig: "contextMenuConfig", showHeadCellMenu: "showHeadCellMenu" }, outputs: { stateChange: "stateChange", bodyLeft: "bodyLeft", activeRowChange: "activeRowChange", selectedRowsChange: "selectedRowsChange", rowLeft: "rowLeft", rowEditStart: "rowEditStart", rowEditEnd: "rowEditEnd", cellClick: "cellClick", cellDoubleClick: "cellDoubleClick", cellFocus: "cellFocus", cellEditStart: "cellEditStart", cellEditEnd: "cellEditEnd", valueChange: "valueChange", cellKeyUp: "cellKeyUp", pasteRows: "pasteRows", addRow: "addRow", deleteRows: "deleteRows", tableService: "tableService" }, host: { listeners: { "document:click": "handleClickOutsideAnyRow($event)", "focusin": "focusIn($event)", "dblclick": "dblclick($event)", "window:keyup": "keyup($event)", "mousedown": "mousedown($event)", "contextmenu": "contextMenu($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 [selectType]=\"selectType\" [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n  <teta-table-body\n    [aggregate]=\"aggregate\"\n    [virtual]=\"virtual\"\n    [activeRow]=\"activeRow\"\n    [additionalComponent]=\"detailComponent\"\n    [grouping]=\"grouping\"\n    [groupRowComponent]=\"groupRowComponent\"\n    [openLevels]=\"openLevels\"\n    [selectType]=\"selectType\"\n    [rowHeight]=\"rowHeight\"\n    [rowClass]=\"rowClass\"\n    [tree]=\"tree\"></teta-table-body>\n</div>\n\n<div #contextMenu\n     class=\"list shadow-1\"\n     style=\"position: fixed; z-index: 2;\"\n     [style.visibility]=\"showContextMenu ? 'visible ' : 'hidden'\"\n     [tetaClickOutside]=\"showContextMenu\"\n     (clickOutside)=\"showContextMenu = false\">\n  <ng-container *ngIf=\"contextMenuConfig?.add\">\n    <div class=\"list-item list-item_interactive\"\n         (click)=\"rowAdd()\">\n      <teta-icon [name]=\"'add'\" [palette]=\"'text'\"></teta-icon>\n      \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443\n    </div>\n    <div class=\"list-divider\"></div>\n  </ng-container>\n  <ng-container *ngIf=\"contextMenuConfig?.copy\">\n    <div class=\"list-item list-item_interactive\"\n         (click)=\"copy(selectedRowsList)\"\n         *ngIf=\"selectedRowsList?.length > 0\">\n      <teta-icon [name]=\"'copySelected'\" [palette]=\"'text'\"></teta-icon>\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0432\u044B\u0434\u0435\u043B\u0435\u043D\u043D\u044B\u0435 \u0441\u0442\u0440\u043E\u043A\u0438\n    </div>\n    <div class=\"list-item list-item_interactive\"\n         (click)=\"copy([contextMenuTarget.row])\"\n         *ngIf=\"contextMenuTarget\">\n      <teta-icon [name]=\"'copy'\" [palette]=\"'text'\"></teta-icon>\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443\n    </div>\n    <div class=\"list-divider\"></div>\n  </ng-container>\n  <ng-container *ngIf=\"contextMenuConfig?.paste\">\n    <div class=\"list-item list-item_interactive\"\n         (click)=\"pasteData()\">\n      <teta-icon [name]=\"'paste'\" [palette]=\"'text'\"></teta-icon>\n      \u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044C\n    </div>\n    <div class=\"list-divider\"></div>\n  </ng-container>\n  <ng-container *ngIf=\"contextMenuConfig?.delete\">\n    <div class=\"list-item list-item_interactive\"\n         (click)=\"delete(selectedRowsList)\"\n         *ngIf=\"selectedRowsList?.length > 0\">\n      <teta-icon [name]=\"'deleteSelected'\" [palette]=\"'text'\"></teta-icon>\n      \u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0432\u044B\u0434\u0435\u043B\u0435\u043D\u043D\u044B\u0435 \u0441\u0442\u0440\u043E\u043A\u0438\n    </div>\n    <div class=\"list-item list-item_interactive\"\n         (click)=\"delete([contextMenuTarget.row])\"\n         *ngIf=\"contextMenuTarget\">\n      <teta-icon [name]=\"'delete'\" [palette]=\"'text'\"></teta-icon>\n      \u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443\n    </div>\n  </ng-container>\n</div>\n", styles: [""], components: [{ type: TableHeadComponent, selector: "teta-table-head", inputs: ["selectType", "showHeadCellMenu"] }, { type: TableBodyComponent, selector: "teta-table-body", inputs: ["virtual", "activeRow", "rowHeight", "additionalComponent", "tree", "aggregate", "grouping", "groupRowComponent", "openLevels", "selectType", "rowClass"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: ClickOutsideDirective, selector: "[tetaClickOutside]", inputs: ["rightClick", "tetaClickOutside"], outputs: ["clickOutside"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TableComponent, selector: "teta-table", inputs: { data: "data", columns: "columns", dict: "dict", state: "state", rowHeight: "rowHeight", cookieName: "cookieName", virtual: "virtual", detailComponent: "detailComponent", activeRow: "activeRow", selectedRows: "selectedRows", selectType: "selectType", aggregate: "aggregate", grouping: "grouping", groupRowComponent: "groupRowComponent", openLevels: "openLevels", tree: "tree", trackBy: "trackBy", editType: "editType", editEvent: "editEvent", rowEditable: "rowEditable", rowClass: "rowClass", scrollToIndex: "scrollToIndex", contextMenuConfig: "contextMenuConfig", showHeadCellMenu: "showHeadCellMenu" }, outputs: { stateChange: "stateChange", bodyLeft: "bodyLeft", activeRowChange: "activeRowChange", selectedRowsChange: "selectedRowsChange", rowLeft: "rowLeft", rowEditStart: "rowEditStart", rowEditEnd: "rowEditEnd", cellClick: "cellClick", cellDoubleClick: "cellDoubleClick", cellFocus: "cellFocus", cellEditStart: "cellEditStart", cellEditEnd: "cellEditEnd", valueChange: "valueChange", cellKeyUp: "cellKeyUp", pasteRows: "pasteRows", addRow: "addRow", deleteRows: "deleteRows", tableService: "tableService" }, host: { listeners: { "document:click": "handleClickOutsideAnyRow($event)", "focusin": "focusIn($event)", "dblclick": "dblclick($event)", "window:keyup": "keyup($event)", "mousedown": "mousedown($event)", "contextmenu": "contextMenu($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 [selectType]=\"selectType\" [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n  <teta-table-body\n    [aggregate]=\"aggregate\"\n    [virtual]=\"virtual\"\n    [activeRow]=\"activeRow\"\n    [additionalComponent]=\"detailComponent\"\n    [grouping]=\"grouping\"\n    [groupRowComponent]=\"groupRowComponent\"\n    [openLevels]=\"openLevels\"\n    [selectType]=\"selectType\"\n    [rowHeight]=\"rowHeight\"\n    [rowClass]=\"rowClass\"\n    [tree]=\"tree\"></teta-table-body>\n</div>\n\n<div #contextMenu\n     class=\"list shadow-1\"\n     style=\"position: fixed; z-index: 2;\"\n     [style.visibility]=\"showContextMenu ? 'visible ' : 'hidden'\"\n     [tetaClickOutside]=\"showContextMenu\"\n     (clickOutside)=\"showContextMenu = false\">\n  <ng-container *ngIf=\"contextMenuConfig?.add\">\n    <div class=\"list-item list-item_interactive\"\n         (click)=\"rowAdd()\">\n      <teta-icon [name]=\"'add'\" [palette]=\"'text'\"></teta-icon>\n      \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443\n    </div>\n    <div class=\"list-divider\"></div>\n  </ng-container>\n  <ng-container *ngIf=\"contextMenuConfig?.copy\">\n    <div class=\"list-item list-item_interactive\"\n         (click)=\"copy(selectedRowsList)\"\n         *ngIf=\"selectedRowsList?.length > 0\">\n      <teta-icon [name]=\"'copySelected'\" [palette]=\"'text'\"></teta-icon>\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0432\u044B\u0434\u0435\u043B\u0435\u043D\u043D\u044B\u0435 \u0441\u0442\u0440\u043E\u043A\u0438\n    </div>\n    <div class=\"list-item list-item_interactive\"\n         (click)=\"copy([contextMenuTarget.row])\"\n         *ngIf=\"contextMenuTarget\">\n      <teta-icon [name]=\"'copy'\" [palette]=\"'text'\"></teta-icon>\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443\n    </div>\n    <div class=\"list-divider\"></div>\n  </ng-container>\n  <ng-container *ngIf=\"contextMenuConfig?.paste\">\n    <div class=\"list-item list-item_interactive\"\n         (click)=\"pasteData()\">\n      <teta-icon [name]=\"'paste'\" [palette]=\"'text'\"></teta-icon>\n      \u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044C\n    </div>\n    <div class=\"list-divider\"></div>\n  </ng-container>\n  <ng-container *ngIf=\"contextMenuConfig?.delete\">\n    <div class=\"list-item list-item_interactive\"\n         (click)=\"delete(selectedRowsList)\"\n         *ngIf=\"selectedRowsList?.length > 0\">\n      <teta-icon [name]=\"'deleteSelected'\" [palette]=\"'text'\"></teta-icon>\n      \u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0432\u044B\u0434\u0435\u043B\u0435\u043D\u043D\u044B\u0435 \u0441\u0442\u0440\u043E\u043A\u0438\n    </div>\n    <div class=\"list-item list-item_interactive\"\n         (click)=\"delete([contextMenuTarget.row])\"\n         *ngIf=\"contextMenuTarget\">\n      <teta-icon [name]=\"'delete'\" [palette]=\"'text'\"></teta-icon>\n      \u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443\n    </div>\n  </ng-container>\n</div>\n", styles: [""], components: [{ type: TableHeadComponent, selector: "teta-table-head", inputs: ["selectType", "showHeadCellMenu"] }, { type: TableBodyComponent, selector: "teta-table-body", inputs: ["virtual", "activeRow", "rowHeight", "additionalComponent", "tree", "aggregate", "grouping", "groupRowComponent", "openLevels", "selectType", "rowClass"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: ClickOutsideDirective, selector: "[tetaClickOutside]", inputs: ["rightClick", "tetaClickOutside"], outputs: ["clickOutside"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", 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 [selectType]=\"selectType\" [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n  <teta-table-body\n    [aggregate]=\"aggregate\"\n    [virtual]=\"virtual\"\n    [activeRow]=\"activeRow\"\n    [additionalComponent]=\"detailComponent\"\n    [grouping]=\"grouping\"\n    [groupRowComponent]=\"groupRowComponent\"\n    [openLevels]=\"openLevels\"\n    [selectType]=\"selectType\"\n    [rowHeight]=\"rowHeight\"\n    [rowClass]=\"rowClass\"\n    [tree]=\"tree\"></teta-table-body>\n</div>\n\n<div #contextMenu\n     class=\"list shadow-1\"\n     style=\"position: fixed; z-index: 2;\"\n     [style.visibility]=\"showContextMenu ? 'visible ' : 'hidden'\"\n     [tetaClickOutside]=\"showContextMenu\"\n     (clickOutside)=\"showContextMenu = false\">\n  <ng-container *ngIf=\"contextMenuConfig?.add\">\n    <div class=\"list-item list-item_interactive\"\n         (click)=\"rowAdd()\">\n      <teta-icon [name]=\"'add'\" [palette]=\"'text'\"></teta-icon>\n      \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443\n    </div>\n    <div class=\"list-divider\"></div>\n  </ng-container>\n  <ng-container *ngIf=\"contextMenuConfig?.copy\">\n    <div class=\"list-item list-item_interactive\"\n         (click)=\"copy(selectedRowsList)\"\n         *ngIf=\"selectedRowsList?.length > 0\">\n      <teta-icon [name]=\"'copySelected'\" [palette]=\"'text'\"></teta-icon>\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0432\u044B\u0434\u0435\u043B\u0435\u043D\u043D\u044B\u0435 \u0441\u0442\u0440\u043E\u043A\u0438\n    </div>\n    <div class=\"list-item list-item_interactive\"\n         (click)=\"copy([contextMenuTarget.row])\"\n         *ngIf=\"contextMenuTarget\">\n      <teta-icon [name]=\"'copy'\" [palette]=\"'text'\"></teta-icon>\n      \u041A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443\n    </div>\n    <div class=\"list-divider\"></div>\n  </ng-container>\n  <ng-container *ngIf=\"contextMenuConfig?.paste\">\n    <div class=\"list-item list-item_interactive\"\n         (click)=\"pasteData()\">\n      <teta-icon [name]=\"'paste'\" [palette]=\"'text'\"></teta-icon>\n      \u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044C\n    </div>\n    <div class=\"list-divider\"></div>\n  </ng-container>\n  <ng-container *ngIf=\"contextMenuConfig?.delete\">\n    <div class=\"list-item list-item_interactive\"\n         (click)=\"delete(selectedRowsList)\"\n         *ngIf=\"selectedRowsList?.length > 0\">\n      <teta-icon [name]=\"'deleteSelected'\" [palette]=\"'text'\"></teta-icon>\n      \u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0432\u044B\u0434\u0435\u043B\u0435\u043D\u043D\u044B\u0435 \u0441\u0442\u0440\u043E\u043A\u0438\n    </div>\n    <div class=\"list-item list-item_interactive\"\n         (click)=\"delete([contextMenuTarget.row])\"\n         *ngIf=\"contextMenuTarget\">\n      <teta-icon [name]=\"'delete'\" [palette]=\"'text'\"></teta-icon>\n      \u0423\u0434\u0430\u043B\u0438\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443\n    </div>\n  </ng-container>\n</div>\n", styles: [""] }]
@@ -9522,8 +9546,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 type: Input
             }], rowEditable: [{
                 type: Input
-            }], cellEditable: [{
-                type: Input
             }], rowClass: [{
                 type: Input
             }], scrollToIndex: [{
@@ -10516,6 +10538,7 @@ var ScaleType;
     ScaleType[ScaleType["log"] = 1] = "log";
     ScaleType[ScaleType["pow"] = 2] = "pow";
     ScaleType[ScaleType["sqrt"] = 3] = "sqrt";
+    ScaleType[ScaleType["time"] = 4] = "time";
 })(ScaleType || (ScaleType = {}));
 var ZoomType;
@@ -12408,10 +12431,10 @@ class Chart3dComponent {
     }
 }
 Chart3dComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: Chart3dComponent, deps: [{ token: i0.ElementRef }, { token: ThemeSwitchService }], target: i0.ɵɵFactoryTarget.Component });
-Chart3dComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: Chart3dComponent, selector: "teta-chart3d", inputs: { config: "config" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<canvas #canvas></canvas>\n", styles: [":host{display:flex;width:100%;height:100%}\n"] });
+Chart3dComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: Chart3dComponent, selector: "teta-chart3d", inputs: { config: "config" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }], ngImport: i0, template: "<canvas #canvas></canvas>\n", styles: [":host{display:flex;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: Chart3dComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-chart3d', template: "<canvas #canvas></canvas>\n", styles: [":host{display:flex;width:100%;height:100%}\n"] }]
+            args: [{ selector: 'teta-chart3d', changeDetection: ChangeDetectionStrategy.OnPush, template: "<canvas #canvas></canvas>\n", styles: [":host{display:flex;width:100%;height:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ThemeSwitchService }]; }, propDecorators: { canvasRef: [{
                 type: ViewChild,
                 args: ['canvas']