@tetacom/ng-components 1.0.22 → 1.0.26

package/fesm2020/tetacom-ng-components.mjs

@@ -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';
@@ -5999,10 +6000,172 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 args: ['click']
             }] } });
 
+class DynamicContentBaseDirective {
+    constructor(_document, _elementRef, _service, _injector, _zone, _cdr) {
+        this._document = _document;
+        this._elementRef = _elementRef;
+        this._service = _service;
+        this._injector = _injector;
+        this._zone = _zone;
+        this._cdr = _cdr;
+        this.align = Align.left;
+        this.verticalAlign = VerticalAlign.bottom;
+        this.openChange = new EventEmitter();
+        this._alive = true;
+        this._open = false;
+        this._zone.onStable
+            .pipe(takeWhile((_) => this._alive), filter((_) => this._open))
+            .subscribe((_) => {
+            this.setPosition();
+        });
+    }
+    set open(open) {
+        this._open = open;
+        if (this._open) {
+            this.createContentRef();
+        }
+        else {
+            this.destroyContentRef();
+        }
+    }
+    ngOnDestroy() {
+        this._alive = false;
+        this.destroyContentRef();
+    }
+    ngOnInit() { }
+    createContentRef(className) {
+        if (!this._componentRef) {
+            this._open = true;
+            const injector = this._service.getInjector(this.data, this._injector);
+            const context = this._service.getContext(this._dynamicContent, this.data);
+            this._content = this._service.createContent(this._dynamicContent, this._injector, context);
+            this._componentRef = this._service.createComponent(PopupContentComponent, this._content, injector, this.appendToBody ? this._document.body : this._elementRef.nativeElement);
+            if (className) {
+                this._componentRef.instance.addClass(className);
+            }
+        }
+        return this._componentRef;
+    }
+    destroyContentRef() {
+        if (this._open) {
+            this._open = false;
+            this._service.destroy(this._componentRef, this._content, this.appendToBody ? this._document.body : this._elementRef.nativeElement);
+            this._componentRef = null;
+        }
+    }
+}
+DynamicContentBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DynamicContentBaseDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+DynamicContentBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: DynamicContentBaseDirective, inputs: { data: "data", className: "className", align: "align", verticalAlign: "verticalAlign", appendToBody: "appendToBody", open: "open" }, outputs: { openChange: "openChange" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DynamicContentBaseDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: undefined }, { type: i0.ElementRef }, { type: DynamicComponentService }, { type: i0.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], verticalAlign: [{
+                type: Input
+            }], appendToBody: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], openChange: [{
+                type: Output
+            }] } });
+
+class HintDirective extends DynamicContentBaseDirective {
+    constructor(_document, _elementRef, _service, _injector, _zone, _cdr) {
+        super(_document, _elementRef, _service, _injector, _zone, _cdr);
+        this._document = _document;
+        this._elementRef = _elementRef;
+        this._service = _service;
+        this._injector = _injector;
+        this._zone = _zone;
+        this._cdr = _cdr;
+        this.align = Align.center;
+        this.verticalAlign = VerticalAlign.top;
+        this.delay = 300;
+    }
+    get _dynamicContent() {
+        return this.tetaHint;
+    }
+    mouseenter() {
+        clearTimeout(this._timeout);
+        this._timeout = setTimeout(() => {
+            this.createHint();
+        }, this.delay);
+    }
+    mouseleave() {
+        clearTimeout(this._timeout);
+        if (this._open && this._componentRef) {
+            this._timeout = setTimeout(() => {
+                this.destroyContentRef();
+            }, this.delay);
+        }
+    }
+    click(event) {
+        if (this._open &&
+            this._componentRef &&
+            DomUtil.clickedInside(this._componentRef.location.nativeElement, event)) {
+            event.stopPropagation();
+        }
+    }
+    setPosition() {
+        if (this._componentRef && this._open) {
+            if (!this._componentRect) {
+                this._componentRect =
+                    this._componentRef.location.nativeElement.getBoundingClientRect();
+            }
+            const position = PositionUtil.getPosition(this._elementRef.nativeElement.getBoundingClientRect(), this._componentRect, this.align, this.verticalAlign, 0, 4);
+            PositionUtil.setElementPosition(this._componentRef.location.nativeElement, position);
+        }
+    }
+    createHint() {
+        if (!this._dynamicContent) {
+            return;
+        }
+        this._componentRef = this.createContentRef();
+        this._componentRef.instance.className = [
+            ...ArrayUtil.asArray(this.className),
+            'hint',
+        ];
+    }
+}
+HintDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HintDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: DynamicComponentService }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+HintDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: HintDirective, selector: "[tetaHint]", inputs: { tetaHint: "tetaHint", align: "align", verticalAlign: "verticalAlign", delay: "delay" }, host: { listeners: { "mouseenter": "mouseenter($event)", "mouseleave": "mouseleave($event)", "click": "click($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HintDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaHint]',
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.ElementRef }, { type: DynamicComponentService }, { type: i0.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tetaHint: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], verticalAlign: [{
+                type: Input
+            }], delay: [{
+                type: Input
+            }], mouseenter: [{
+                type: HostListener,
+                args: ['mouseenter', ['$event']]
+            }], mouseleave: [{
+                type: HostListener,
+                args: ['mouseleave', ['$event']]
+            }], click: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
 class PropertyGridItemComponent {
     constructor(_transloco) {
         this._transloco = _transloco;
         this.controlValueChange = new EventEmitter();
+        this.align = Align;
         this.filterTypeEnum = FilterType;
         this._alive = true;
     }
@@ -6068,10 +6231,10 @@ class PropertyGridItemComponent {
     }
 }
 PropertyGridItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PropertyGridItemComponent, deps: [{ token: i1$1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
-PropertyGridItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: PropertyGridItemComponent, selector: "teta-property-grid-item", inputs: { column: "column", hideNonEditable: "hideNonEditable", dict: "dict", formGroup: "formGroup", horizontal: "horizontal" }, outputs: { controlValueChange: "controlValueChange" }, ngImport: i0, template: "<teta-input [label]=\"caption\"\n            [formGroup]=\"formGroup\"\n            [horizontal]=\"horizontal\"\n            *ngIf=\"column.editable || !hideNonEditable\">\n  <ng-container [ngSwitch]=\"column.filterType\">\n    <teta-select class=\"row_auto\"\n                 *ngSwitchCase=\"filterTypeEnum.list\"\n                 [searchRef]=\"getDict()?.length > 10 ? 'name' : ''\"\n                 [allowNull]=\"!column.required\"\n                 [appendToBody]=\"true\"\n                 [invalid]=\"controlIsInvalid(column.name)\"\n                 [formControlName]=\"column.name\"\n                 [options]=\"getDict()\"\n                 [valueRef]=\"'id'\"\n                 [textRef]=\"'name'\"\n                 [multiple]=\"false\"></teta-select>\n    <teta-date-picker *ngSwitchCase=\"filterTypeEnum.date\"\n                      class=\"row_auto\"\n                      [appendToBody]=\"true\"\n                      [invalid]=\"controlIsInvalid(column.name)\"\n                      [formControlName]=\"column.name\"></teta-date-picker>\n    <teta-toggle *ngSwitchCase=\"filterTypeEnum.boolean\"\n                 [formControlName]=\"column.name\">{{column.caption}}</teta-toggle>\n    <teta-text-field class=\"row_auto\"\n                     *ngSwitchDefault\n                     (focusout)=\"valueChange()\"\n                     [onlyNumber]=\"column.filterType === filterTypeEnum.number\"\n                     [placeholder]=\"column.caption\"\n                     [invalid]=\"controlIsInvalid(column.name)\"\n                     [formControlName]=\"column.name\"></teta-text-field>\n  </ng-container>\n  <div *ngIf=\"controlIsInvalid(column.name)\"\n       ngProjectAs=\"message\"\n       class=\"color-red-50\">\n    {{getError(column)}}\n  </div>\n</teta-input>\n", styles: [""], components: [{ type: InputComponent, selector: "teta-input", inputs: ["label", "horizontal", "required"] }, { type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "valueRef", "textRef", "searchRef"] }, { type: DatePickerComponent, selector: "teta-date-picker", inputs: ["disabled", "invalid", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "minYearDate", "maxYearDate", "align", "verticalAlign", "appendToBody", "showTime", "format"] }, { type: ToggleComponent, selector: "teta-toggle", inputs: ["palette", "noLabel", "disabled"] }, { type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "invalid"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+PropertyGridItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: PropertyGridItemComponent, selector: "teta-property-grid-item", inputs: { column: "column", hideNonEditable: "hideNonEditable", dict: "dict", formGroup: "formGroup", horizontal: "horizontal" }, outputs: { controlValueChange: "controlValueChange" }, ngImport: i0, template: "<teta-input [label]=\"caption\"\n            [tetaHint]=\"column.hint\"\n            [align]=\"align.left\"\n            [formGroup]=\"formGroup\"\n            [horizontal]=\"horizontal\"\n            *ngIf=\"column.editable || !hideNonEditable\">\n  <ng-container [ngSwitch]=\"column.filterType\">\n    <teta-select class=\"row_auto\"\n                 *ngSwitchCase=\"filterTypeEnum.list\"\n                 [searchRef]=\"getDict()?.length > 10 ? 'name' : ''\"\n                 [allowNull]=\"!column.required\"\n                 [appendToBody]=\"true\"\n                 [invalid]=\"controlIsInvalid(column.name)\"\n                 [formControlName]=\"column.name\"\n                 [options]=\"getDict()\"\n                 [valueRef]=\"'id'\"\n                 [textRef]=\"'name'\"\n                 [multiple]=\"false\"></teta-select>\n    <teta-date-picker *ngSwitchCase=\"filterTypeEnum.date\"\n                      class=\"row_auto\"\n                      [appendToBody]=\"true\"\n                      [invalid]=\"controlIsInvalid(column.name)\"\n                      [formControlName]=\"column.name\"></teta-date-picker>\n    <teta-toggle *ngSwitchCase=\"filterTypeEnum.boolean\"\n                 [formControlName]=\"column.name\">{{column.caption}}</teta-toggle>\n    <teta-text-field class=\"row_auto\"\n                     *ngSwitchDefault\n                     (focusout)=\"valueChange()\"\n                     [onlyNumber]=\"column.filterType === filterTypeEnum.number\"\n                     [placeholder]=\"column.caption\"\n                     [invalid]=\"controlIsInvalid(column.name)\"\n                     [formControlName]=\"column.name\"></teta-text-field>\n  </ng-container>\n  <div *ngIf=\"controlIsInvalid(column.name)\"\n       ngProjectAs=\"message\"\n       class=\"color-red-50\">\n    {{getError(column)}}\n  </div>\n</teta-input>\n", styles: [""], components: [{ type: InputComponent, selector: "teta-input", inputs: ["label", "horizontal", "required"] }, { type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "valueRef", "textRef", "searchRef"] }, { type: DatePickerComponent, selector: "teta-date-picker", inputs: ["disabled", "invalid", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "minYearDate", "maxYearDate", "align", "verticalAlign", "appendToBody", "showTime", "format"] }, { type: ToggleComponent, selector: "teta-toggle", inputs: ["palette", "noLabel", "disabled"] }, { type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "invalid"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: HintDirective, selector: "[tetaHint]", inputs: ["tetaHint", "align", "verticalAlign", "delay"] }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PropertyGridItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-property-grid-item', template: "<teta-input [label]=\"caption\"\n            [formGroup]=\"formGroup\"\n            [horizontal]=\"horizontal\"\n            *ngIf=\"column.editable || !hideNonEditable\">\n  <ng-container [ngSwitch]=\"column.filterType\">\n    <teta-select class=\"row_auto\"\n                 *ngSwitchCase=\"filterTypeEnum.list\"\n                 [searchRef]=\"getDict()?.length > 10 ? 'name' : ''\"\n                 [allowNull]=\"!column.required\"\n                 [appendToBody]=\"true\"\n                 [invalid]=\"controlIsInvalid(column.name)\"\n                 [formControlName]=\"column.name\"\n                 [options]=\"getDict()\"\n                 [valueRef]=\"'id'\"\n                 [textRef]=\"'name'\"\n                 [multiple]=\"false\"></teta-select>\n    <teta-date-picker *ngSwitchCase=\"filterTypeEnum.date\"\n                      class=\"row_auto\"\n                      [appendToBody]=\"true\"\n                      [invalid]=\"controlIsInvalid(column.name)\"\n                      [formControlName]=\"column.name\"></teta-date-picker>\n    <teta-toggle *ngSwitchCase=\"filterTypeEnum.boolean\"\n                 [formControlName]=\"column.name\">{{column.caption}}</teta-toggle>\n    <teta-text-field class=\"row_auto\"\n                     *ngSwitchDefault\n                     (focusout)=\"valueChange()\"\n                     [onlyNumber]=\"column.filterType === filterTypeEnum.number\"\n                     [placeholder]=\"column.caption\"\n                     [invalid]=\"controlIsInvalid(column.name)\"\n                     [formControlName]=\"column.name\"></teta-text-field>\n  </ng-container>\n  <div *ngIf=\"controlIsInvalid(column.name)\"\n       ngProjectAs=\"message\"\n       class=\"color-red-50\">\n    {{getError(column)}}\n  </div>\n</teta-input>\n", styles: [""] }]
+            args: [{ selector: 'teta-property-grid-item', template: "<teta-input [label]=\"caption\"\n            [tetaHint]=\"column.hint\"\n            [align]=\"align.left\"\n            [formGroup]=\"formGroup\"\n            [horizontal]=\"horizontal\"\n            *ngIf=\"column.editable || !hideNonEditable\">\n  <ng-container [ngSwitch]=\"column.filterType\">\n    <teta-select class=\"row_auto\"\n                 *ngSwitchCase=\"filterTypeEnum.list\"\n                 [searchRef]=\"getDict()?.length > 10 ? 'name' : ''\"\n                 [allowNull]=\"!column.required\"\n                 [appendToBody]=\"true\"\n                 [invalid]=\"controlIsInvalid(column.name)\"\n                 [formControlName]=\"column.name\"\n                 [options]=\"getDict()\"\n                 [valueRef]=\"'id'\"\n                 [textRef]=\"'name'\"\n                 [multiple]=\"false\"></teta-select>\n    <teta-date-picker *ngSwitchCase=\"filterTypeEnum.date\"\n                      class=\"row_auto\"\n                      [appendToBody]=\"true\"\n                      [invalid]=\"controlIsInvalid(column.name)\"\n                      [formControlName]=\"column.name\"></teta-date-picker>\n    <teta-toggle *ngSwitchCase=\"filterTypeEnum.boolean\"\n                 [formControlName]=\"column.name\">{{column.caption}}</teta-toggle>\n    <teta-text-field class=\"row_auto\"\n                     *ngSwitchDefault\n                     (focusout)=\"valueChange()\"\n                     [onlyNumber]=\"column.filterType === filterTypeEnum.number\"\n                     [placeholder]=\"column.caption\"\n                     [invalid]=\"controlIsInvalid(column.name)\"\n                     [formControlName]=\"column.name\"></teta-text-field>\n  </ng-container>\n  <div *ngIf=\"controlIsInvalid(column.name)\"\n       ngProjectAs=\"message\"\n       class=\"color-red-50\">\n    {{getError(column)}}\n  </div>\n</teta-input>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1$1.TranslocoService }]; }, propDecorators: { column: [{
                 type: Input
             }], hideNonEditable: [{
@@ -6267,6 +6430,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 }]
         }] });
 
+class HintModule {
+}
+HintModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+HintModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HintModule, declarations: [HintDirective], imports: [CommonModule,
+        DynamicComponentModule], exports: [HintDirective] });
+HintModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HintModule, imports: [[
+            CommonModule,
+            DynamicComponentModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HintModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [HintDirective],
+                    exports: [HintDirective],
+                    imports: [
+                        CommonModule,
+                        DynamicComponentModule
+                    ]
+                }]
+        }] });
+
 class PropertyGridModule {
 }
 PropertyGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PropertyGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -6285,7 +6469,8 @@ PropertyGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         InputModule,
         ToggleModule,
         ReactiveFormsModule,
-        TranslocoModule], exports: [PropertyGridComponent] });
+        TranslocoModule,
+        HintModule], exports: [PropertyGridComponent] });
 PropertyGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PropertyGridModule, providers: [
         {
             provide: TRANSLOCO_SCOPE,
@@ -6303,6 +6488,7 @@ PropertyGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
             ToggleModule,
             ReactiveFormsModule,
             TranslocoModule,
+            HintModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PropertyGridModule, decorators: [{
             type: NgModule,
@@ -6328,6 +6514,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                         ToggleModule,
                         ReactiveFormsModule,
                         TranslocoModule,
+                        HintModule,
                     ],
                     providers: [
                         {
@@ -6615,6 +6802,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;
@@ -6827,6 +7015,7 @@ class TableService {
         this.hiddenColumns = this._hiddenColumns.asObservable();
         this.scrollIndex = this._scrollIndex.asObservable();
     }
+    // cellEditable: boolean | ((row: ICellCoordinates<T>) => boolean);
     get dragSource() {
         return this._dragSource;
     }
@@ -6839,7 +7028,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);
@@ -7063,7 +7256,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;
             }
@@ -7441,167 +7634,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 args: ['class.table-head__cell__component']
             }] } });
 
-class DynamicContentBaseDirective {
-    constructor(_document, _elementRef, _service, _injector, _zone, _cdr) {
-        this._document = _document;
-        this._elementRef = _elementRef;
-        this._service = _service;
-        this._injector = _injector;
-        this._zone = _zone;
-        this._cdr = _cdr;
-        this.align = Align.left;
-        this.verticalAlign = VerticalAlign.bottom;
-        this.openChange = new EventEmitter();
-        this._alive = true;
-        this._open = false;
-        this._zone.onStable
-            .pipe(takeWhile((_) => this._alive), filter((_) => this._open))
-            .subscribe((_) => {
-            this.setPosition();
-        });
-    }
-    set open(open) {
-        this._open = open;
-        if (this._open) {
-            this.createContentRef();
-        }
-        else {
-            this.destroyContentRef();
-        }
-    }
-    ngOnDestroy() {
-        this._alive = false;
-        this.destroyContentRef();
-    }
-    ngOnInit() { }
-    createContentRef(className) {
-        if (!this._componentRef) {
-            this._open = true;
-            const injector = this._service.getInjector(this.data, this._injector);
-            const context = this._service.getContext(this._dynamicContent, this.data);
-            this._content = this._service.createContent(this._dynamicContent, this._injector, context);
-            this._componentRef = this._service.createComponent(PopupContentComponent, this._content, injector, this.appendToBody ? this._document.body : this._elementRef.nativeElement);
-            if (className) {
-                this._componentRef.instance.addClass(className);
-            }
-        }
-        return this._componentRef;
-    }
-    destroyContentRef() {
-        if (this._open) {
-            this._open = false;
-            this._service.destroy(this._componentRef, this._content, this.appendToBody ? this._document.body : this._elementRef.nativeElement);
-            this._componentRef = null;
-        }
-    }
-}
-DynamicContentBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DynamicContentBaseDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-DynamicContentBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: DynamicContentBaseDirective, inputs: { data: "data", className: "className", align: "align", verticalAlign: "verticalAlign", appendToBody: "appendToBody", open: "open" }, outputs: { openChange: "openChange" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DynamicContentBaseDirective, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: undefined }, { type: i0.ElementRef }, { type: DynamicComponentService }, { type: i0.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], align: [{
-                type: Input
-            }], verticalAlign: [{
-                type: Input
-            }], appendToBody: [{
-                type: Input
-            }], open: [{
-                type: Input
-            }], openChange: [{
-                type: Output
-            }] } });
-
-class HintDirective extends DynamicContentBaseDirective {
-    constructor(_document, _elementRef, _service, _injector, _zone, _cdr) {
-        super(_document, _elementRef, _service, _injector, _zone, _cdr);
-        this._document = _document;
-        this._elementRef = _elementRef;
-        this._service = _service;
-        this._injector = _injector;
-        this._zone = _zone;
-        this._cdr = _cdr;
-        this.align = Align.center;
-        this.verticalAlign = VerticalAlign.top;
-        this.delay = 300;
-    }
-    get _dynamicContent() {
-        return this.tetaHint;
-    }
-    mouseenter() {
-        clearTimeout(this._timeout);
-        this._timeout = setTimeout(() => {
-            this.createHint();
-        }, this.delay);
-    }
-    mouseleave() {
-        clearTimeout(this._timeout);
-        if (this._open && this._componentRef) {
-            this._timeout = setTimeout(() => {
-                this.destroyContentRef();
-            }, this.delay);
-        }
-    }
-    click(event) {
-        if (this._open &&
-            this._componentRef &&
-            DomUtil.clickedInside(this._componentRef.location.nativeElement, event)) {
-            event.stopPropagation();
-        }
-    }
-    setPosition() {
-        if (this._componentRef && this._open) {
-            if (!this._componentRect) {
-                this._componentRect =
-                    this._componentRef.location.nativeElement.getBoundingClientRect();
-            }
-            const position = PositionUtil.getPosition(this._elementRef.nativeElement.getBoundingClientRect(), this._componentRect, this.align, this.verticalAlign, 0, 4);
-            PositionUtil.setElementPosition(this._componentRef.location.nativeElement, position);
-        }
-    }
-    createHint() {
-        if (!this._dynamicContent) {
-            return;
-        }
-        this._componentRef = this.createContentRef();
-        this._componentRef.instance.className = [
-            ...ArrayUtil.asArray(this.className),
-            'hint',
-        ];
-    }
-}
-HintDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HintDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: DynamicComponentService }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-HintDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: HintDirective, selector: "[tetaHint]", inputs: { tetaHint: "tetaHint", align: "align", verticalAlign: "verticalAlign", delay: "delay" }, host: { listeners: { "mouseenter": "mouseenter($event)", "mouseleave": "mouseleave($event)", "click": "click($event)" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HintDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tetaHint]',
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.ElementRef }, { type: DynamicComponentService }, { type: i0.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tetaHint: [{
-                type: Input
-            }], align: [{
-                type: Input
-            }], verticalAlign: [{
-                type: Input
-            }], delay: [{
-                type: Input
-            }], mouseenter: [{
-                type: HostListener,
-                args: ['mouseenter', ['$event']]
-            }], mouseleave: [{
-                type: HostListener,
-                args: ['mouseleave', ['$event']]
-            }], click: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
 class DefaultHeadCellComponent extends HeadCellComponentBase {
     constructor(_cdr) {
         super();
@@ -8156,10 +8188,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: [{
@@ -8566,7 +8598,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,
             }));
@@ -8585,14 +8617,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) {
@@ -8600,7 +8634,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 &&
@@ -8615,12 +8649,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;
@@ -9357,14 +9398,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);
@@ -9453,7 +9493,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: [""] }]
@@ -9497,8 +9537,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 type: Input
             }], rowEditable: [{
                 type: Input
-            }], cellEditable: [{
-                type: Input
             }], rowClass: [{
                 type: Input
             }], scrollToIndex: [{
@@ -9603,27 +9641,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 }]
         }] });
 
-class HintModule {
-}
-HintModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-HintModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HintModule, declarations: [HintDirective], imports: [CommonModule,
-        DynamicComponentModule], exports: [HintDirective] });
-HintModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HintModule, imports: [[
-            CommonModule,
-            DynamicComponentModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HintModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [HintDirective],
-                    exports: [HintDirective],
-                    imports: [
-                        CommonModule,
-                        DynamicComponentModule
-                    ]
-                }]
-        }] });
-
 class TetaTemplateModule {
 }
 TetaTemplateModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TetaTemplateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -10512,6 +10529,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;