@tetacom/ng-components 1.0.33 → 1.0.36

package/fesm2020/tetacom-ng-components.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, HostBinding, Directive, Optional, Inject, ContentChild, Input, Host, HostListener, Injectable, NgModule, forwardRef, EventEmitter, ElementRef, Output, Pipe, ViewChild, ViewEncapsulation, ChangeDetectorRef, TemplateRef, Injector, ContentChildren } from '@angular/core';
-import * as i2 from '@angular/common';
+import * as i3 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i1 from '@angular/common/http';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { map, takeWhile, throttleTime, bufferCount, tap, withLatestFrom, filter } from 'rxjs/operators';
-import * as i3 from '@angular/forms';
+import * as i3$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
-import { BehaviorSubject, Subject, fromEvent, ReplaySubject, combineLatest, of, merge } from 'rxjs';
+import { BehaviorSubject, Subject, fromEvent, ReplaySubject, combineLatest, merge } from 'rxjs';
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i4 from '@angular/cdk/scrolling';
 import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
@@ -63,7 +63,7 @@ class AccordionItemComponent {
     ngOnInit() { }
 }
 AccordionItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AccordionItemComponent, deps: [{ token: AccordionComponent, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-AccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: AccordionItemComponent, selector: "teta-accordion-item", inputs: { open: "open", disabled: "disabled" }, host: { properties: { "class.accordion-item_active": "this.open", "class.accordion-item": "this.accordionItemClass" } }, queries: [{ propertyName: "content", first: true, predicate: AccordionContentDirective, descendants: true }], ngImport: i0, template: "<ng-content select=\"teta-accordion-head\"></ng-content>\n<div class=\"accordion-content\" *ngIf=\"open\">\n  <ng-container *ngTemplateOutlet=\"content.template\"></ng-container>\n</div>\n", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AccordionItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: AccordionItemComponent, selector: "teta-accordion-item", inputs: { open: "open", disabled: "disabled" }, host: { properties: { "class.accordion-item_active": "this.open", "class.accordion-item": "this.accordionItemClass" } }, queries: [{ propertyName: "content", first: true, predicate: AccordionContentDirective, descendants: true }], ngImport: i0, template: "<ng-content select=\"teta-accordion-head\"></ng-content>\n<div class=\"accordion-content\" *ngIf=\"open\">\n  <ng-container *ngTemplateOutlet=\"content.template\"></ng-container>\n</div>\n", styles: [""], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AccordionItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"teta-accordion-head\"></ng-content>\n<div class=\"accordion-content\" *ngIf=\"open\">\n  <ng-container *ngTemplateOutlet=\"content.template\"></ng-container>\n</div>\n", styles: [""] }]
@@ -151,7 +151,7 @@ class AccordionHeadComponent {
     ngOnInit() { }
 }
 AccordionHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AccordionHeadComponent, deps: [{ token: AccordionItemComponent, host: true }], target: i0.ɵɵFactoryTarget.Component });
-AccordionHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: AccordionHeadComponent, selector: "teta-accordion-head", inputs: { showToggle: "showToggle" }, host: { listeners: { "click": "toggle()" }, properties: { "class.accordion-head": "this.accordionHeadClass", "class.accordion-head_open": "this.open", "class.accordion-head_disabled": "this.disabled" } }, ngImport: i0, template: "<ng-content></ng-content>\n<div *ngIf=\"showToggle\" class=\"accordion-toggle\">\n  <teta-icon [name]=\"open ? 'arrowUpKey' : 'arrowDownKey'\"\n             [palette]=\"'text'\"></teta-icon>\n</div>\n\n", styles: [""], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+AccordionHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: AccordionHeadComponent, selector: "teta-accordion-head", inputs: { showToggle: "showToggle" }, host: { listeners: { "click": "toggle()" }, properties: { "class.accordion-head": "this.accordionHeadClass", "class.accordion-head_open": "this.open", "class.accordion-head_disabled": "this.disabled" } }, ngImport: i0, template: "<ng-content></ng-content>\n<div *ngIf=\"showToggle\" class=\"accordion-toggle\">\n  <teta-icon [name]=\"open ? 'arrowUpKey' : 'arrowDownKey'\"\n             [palette]=\"'text'\"></teta-icon>\n</div>\n\n", styles: [""], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: AccordionHeadComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-accordion-head', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div *ngIf=\"showToggle\" class=\"accordion-toggle\">\n  <teta-icon [name]=\"open ? 'arrowUpKey' : 'arrowDownKey'\"\n             [palette]=\"'text'\"></teta-icon>\n</div>\n\n", styles: [""] }]
@@ -463,10 +463,10 @@ class CheckboxComponent {
     }
 }
 CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: CheckboxComponent, selector: "teta-checkbox", inputs: { class: "class", palette: "palette", noLabel: "noLabel", disabled: "disabled", value: "value", binary: "binary", allowNull: "allowNull" }, host: { listeners: { "click": "changeValue()" }, properties: { "attr.tabindex": "this.tabindex", "class": "this.getClass", "class.checkbox_disabled": "this.disabled" } }, providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"checkbox__tick\">\n  <teta-icon [name]=\"checked ? 'tick' : checked === false ? '' : 'minus'\"></teta-icon>\n</div>\n<span class=\"font-body-3 margin-left-1\" *ngIf=\"!noLabel\">\n  <ng-content></ng-content>\n</span>\n", styles: [""], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: CheckboxComponent, selector: "teta-checkbox", inputs: { class: "class", palette: "palette", noLabel: "noLabel", disabled: "disabled", value: "value", binary: "binary", allowNull: "allowNull" }, host: { listeners: { "click": "changeValue()" }, properties: { "attr.tabindex": "this.tabindex", "class": "this.getClass", "class.checkbox_disabled": "this.disabled" } }, providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"checkbox__tick\" [class.checkbox__tick_active]=\"checked != false\">\n  <teta-icon [name]=\"checked ? 'tick' : checked === false ? '' : 'minus'\"></teta-icon>\n</div>\n<span class=\"font-body-3\" *ngIf=\"!noLabel\">\n  <ng-content></ng-content>\n</span>\n", styles: [""], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-checkbox', providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"checkbox__tick\">\n  <teta-icon [name]=\"checked ? 'tick' : checked === false ? '' : 'minus'\"></teta-icon>\n</div>\n<span class=\"font-body-3 margin-left-1\" *ngIf=\"!noLabel\">\n  <ng-content></ng-content>\n</span>\n", styles: [""] }]
+            args: [{ selector: 'teta-checkbox', providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"checkbox__tick\" [class.checkbox__tick_active]=\"checked != false\">\n  <teta-icon [name]=\"checked ? 'tick' : checked === false ? '' : 'minus'\"></teta-icon>\n</div>\n<span class=\"font-body-3\" *ngIf=\"!noLabel\">\n  <ng-content></ng-content>\n</span>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { tabindex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
@@ -695,6 +695,46 @@ class DateUtil {
     static isValidDate(date) {
         return date instanceof Date && !isNaN(date.getTime());
     }
+    static millisecondToHumanFormat(milliSeconds, maxValue = 5000, showDays = false) {
+        const negative = milliSeconds < 0;
+        if (negative) {
+            milliSeconds = -milliSeconds;
+        }
+        let d;
+        if (showDays) {
+            d = Math.trunc(milliSeconds / (60000 * 60 * 24));
+            milliSeconds = milliSeconds - 60000 * 60 * 24 * d;
+        }
+        const h = Math.trunc(milliSeconds / (60000 * 60));
+        milliSeconds = milliSeconds - 60000 * 60 * h;
+        const m = Math.trunc(milliSeconds / 60000);
+        milliSeconds = milliSeconds - 60000 * m;
+        const s = Math.trunc(milliSeconds / 1000);
+        milliSeconds = milliSeconds - 1000 * s;
+        const frac = milliSeconds;
+        let result = m ? m + ' м ' : ''; // start with minutes
+        if (maxValue < 60000 * 60) {
+            if (s) {
+                result = result + s + ' с '; // add seconds value
+            }
+            if (s === 0 && !m) {
+                result = result + '0 c';
+            }
+        }
+        if (maxValue < 5000) {
+            result = frac ? result + frac + ' мс ' : result;
+        }
+        if (h) {
+            result = h + ' ч ' + result;
+        }
+        if (d) {
+            result = d + 'д ' + result;
+        }
+        if (negative) {
+            result = '-' + result;
+        }
+        return result.trim();
+    }
     static fillConvertDates(result, input) {
         for (const key in input) {
             if (!input.hasOwnProperty || !input.hasOwnProperty(key)) {
@@ -919,39 +959,81 @@ var VerticalAlign;
     VerticalAlign[VerticalAlign["auto"] = 3] = "auto";
 })(VerticalAlign || (VerticalAlign = {}));
 
-class PickerLocaleModel {
-    constructor(options) {
-        if (options) {
-            this.dayNames = options.dayNames;
-            this.dayNamesShort = options.dayNamesShort;
-            this.dayNamesMin = options.dayNamesMin;
-            this.monthNames = options.monthNames;
-            this.monthNamesShort = options.monthNamesShort;
-            this.today = options.today;
-        }
-    }
-}
+const enLocale = {
+    apply: 'Apply',
+    cancel: 'Cancel',
+    clear: 'Clear',
+    pin: 'Pin',
+    unpin: 'Unpin',
+    sortAsc: 'Sort asc',
+    sortDesc: 'Sort desc',
+    clearSort: 'Clear sort',
+    clearAllSort: 'Clear all sort',
+    clearFilter: 'Clear filter',
+    clearAllFilters: 'Clear all filters',
+    autosizeColumn: 'Autosize column',
+    autosizeAll: 'Autosize all columns',
+    resetColumnsSize: 'Reset columns size',
+    from: 'From',
+    to: 'To',
+    all: 'All',
+    min: 'Min',
+    max: 'Max',
+    sum: 'Sum',
+    avg: 'Avg',
+    search: 'Search',
+    months: [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December'
+    ],
+    days: [
+        'Sunday',
+        'Monday',
+        'Tuesday',
+        'Wednesday',
+        'Thursday',
+        'Friday',
+        'Saturday'
+    ],
+    daysShort: [
+        'Su',
+        'Mo',
+        'Tu',
+        'We',
+        'Th',
+        'Fr',
+        'Sa'
+    ]
+};
 
-class PickerLocaleService {
+class TetaConfigService {
     constructor() {
-        this._defaults = new PickerLocaleModel({
-            dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
-            dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-            dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
-            monthNames: ['January', 'February', 'March', 'April', 'May', 'June',
-                'July', 'August', 'September', 'October', 'November', 'December'],
-            monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-            today: 'Today'
-        });
-        this.locale = new BehaviorSubject(this._defaults);
+        this.defaultLocale = enLocale;
+        this.locale$ = new BehaviorSubject(this.defaultLocale);
+        this.locale = this.locale$.asObservable();
     }
-    setLocale(locale) {
-        this.locale.next(locale);
+    setLocale(newLocale) {
+        if (newLocale) {
+            this.locale$.next(newLocale);
+        }
+        else {
+            this.locale$.next(this.defaultLocale);
+        }
     }
 }
-PickerLocaleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PickerLocaleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PickerLocaleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PickerLocaleService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PickerLocaleService, decorators: [{
+TetaConfigService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TetaConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+TetaConfigService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TetaConfigService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TetaConfigService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1109,11 +1191,12 @@ class DropdownBase {
         this._renderer = _renderer;
         this.align = Align.left;
         this.verticalAlign = VerticalAlign.bottom;
-        this.shadow = true;
+        this.backdrop = false;
         this.openChange = new EventEmitter();
         this.autoClose = true;
         this.autoCloseIgnore = ['inside'];
         this._body = null;
+        this._backdrop = null;
         this._open = false;
         this._alive = true;
         this._zone.onStable
@@ -1193,6 +1276,9 @@ class DropdownBase {
             this._renderer.removeChild(this.container, this._body);
             this._open = false;
             this._body = null;
+            if (this._backdrop) {
+                this._renderer.removeChild(this._document.body, this._backdrop);
+            }
             this.openChange.emit(this.open);
         }
     }
@@ -1204,9 +1290,13 @@ class DropdownBase {
         this.openChange.emit(this.open);
         const renderer = this._renderer;
         const content = this._content.nativeElement;
-        const container = (this._body =
-            this._body || renderer.createElement('div'));
+        const container = (this._body = this._body || renderer.createElement('div'));
         renderer.addClass(container, 'dropdown');
+        if (this.backdrop) {
+            this._backdrop = renderer.createElement('div');
+            renderer.addClass(this._backdrop, 'dropdown-backdrop');
+            renderer.appendChild(this._document.body, this._backdrop);
+        }
         if (this.className != null) {
             if (this.className instanceof Array && this.className.length > 0) {
                 this.className.forEach((_) => {
@@ -1251,7 +1341,7 @@ class DropdownBase {
     }
 }
 DropdownBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DropdownBase, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-DropdownBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: DropdownBase, inputs: { align: "align", verticalAlign: "verticalAlign", appendToBody: "appendToBody", disabled: "disabled", shadow: "shadow", className: "className", open: "open", autoClose: "autoClose", autoCloseIgnore: "autoCloseIgnore" }, outputs: { openChange: "openChange" }, host: { listeners: { "click": "click($event)", "document:click": "documentClick($event)", "window:keyup": "keyUp($event)" } }, queries: [{ propertyName: "_head", first: true, predicate: DropdownHeadDirective, descendants: true, read: ElementRef }, { propertyName: "_content", first: true, predicate: DropdownContentDirective, descendants: true }], ngImport: i0 });
+DropdownBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: DropdownBase, inputs: { align: "align", verticalAlign: "verticalAlign", appendToBody: "appendToBody", disabled: "disabled", backdrop: "backdrop", className: "className", open: "open", autoClose: "autoClose", autoCloseIgnore: "autoCloseIgnore" }, outputs: { openChange: "openChange" }, host: { listeners: { "click": "click($event)", "document:click": "documentClick($event)", "window:keyup": "keyUp($event)" } }, queries: [{ propertyName: "_head", first: true, predicate: DropdownHeadDirective, descendants: true, read: ElementRef }, { propertyName: "_content", first: true, predicate: DropdownContentDirective, descendants: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DropdownBase, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { align: [{
@@ -1262,7 +1352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 type: Input
             }], disabled: [{
                 type: Input
-            }], shadow: [{
+            }], backdrop: [{
                 type: Input
             }], className: [{
                 type: Input
@@ -1510,7 +1600,7 @@ class YearSelectComponent {
     }
 }
 YearSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: YearSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: PickerTouchService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-YearSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: YearSelectComponent, selector: "teta-year-select", inputs: { currentYear: "currentYear", today: "today", size: "size", minDate: "minDate", maxDate: "maxDate", allowableRange: "allowableRange" }, outputs: { yearSelected: "yearSelected", yearApplied: "yearApplied" }, ngImport: i0, template: "<div class=\"list row_auto margin-top-2\"\n     (wheel)=\"scrollYearSelector($event);\">\n  <div class=\"list-item list-item_interactive\"\n       [class.list-item_active]=\"year === currentYear\"\n       [class.list-item_disabled]=\"isYearDisabled(year)\"\n       (click)=\"setYear($event, year)\"\n       (dblclick)=\"applyYear($event, year)\"\n       *ngFor=\"let year of years\">\n    {{year}}\n  </div>\n</div>\n", styles: [":host{display:flex}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+YearSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: YearSelectComponent, selector: "teta-year-select", inputs: { currentYear: "currentYear", today: "today", size: "size", minDate: "minDate", maxDate: "maxDate", allowableRange: "allowableRange" }, outputs: { yearSelected: "yearSelected", yearApplied: "yearApplied" }, ngImport: i0, template: "<div class=\"list row_auto margin-top-2\"\n     (wheel)=\"scrollYearSelector($event);\">\n  <div class=\"list-item list-item_interactive\"\n       [class.list-item_active]=\"year === currentYear\"\n       [class.list-item_disabled]=\"isYearDisabled(year)\"\n       (click)=\"setYear($event, year)\"\n       (dblclick)=\"applyYear($event, year)\"\n       *ngFor=\"let year of years\">\n    {{year}}\n  </div>\n</div>\n", styles: [":host{display:flex}\n"], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: YearSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-year-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"list row_auto margin-top-2\"\n     (wheel)=\"scrollYearSelector($event);\">\n  <div class=\"list-item list-item_interactive\"\n       [class.list-item_active]=\"year === currentYear\"\n       [class.list-item_disabled]=\"isYearDisabled(year)\"\n       (click)=\"setYear($event, year)\"\n       (dblclick)=\"applyYear($event, year)\"\n       *ngFor=\"let year of years\">\n    {{year}}\n  </div>\n</div>\n", styles: [":host{display:flex}\n"] }]
@@ -1637,7 +1727,8 @@ class MonthSelectComponent {
         }
         return new Date(year, month, 1);
     }
-    ngOnInit() { }
+    ngOnInit() {
+    }
     ngOnDestroy() {
         this._alive = false;
     }
@@ -1668,10 +1759,10 @@ class MonthSelectComponent {
     }
 }
 MonthSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: MonthSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: PickerTouchService }], target: i0.ɵɵFactoryTarget.Component });
-MonthSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: MonthSelectComponent, selector: "teta-month-select", inputs: { locale: "locale", minDate: "minDate", maxDate: "maxDate", size: "size", currentMonth: "currentMonth", currentYear: "currentYear" }, outputs: { monthSelected: "monthSelected", monthApplied: "monthApplied" }, ngImport: i0, template: "<div class=\"list row_auto margin-top-2\"\n     (wheel)=\"scrollMonthSelector($event);\">\n  <div *ngFor=\"let month of months\"\n       class=\"list-item list-item_interactive\"\n       [class.list-item_active]=\"month === _currentMonth\"\n       [class.list-item_disabled]=\"isMonthDisabled(month)\"\n       [class.datepicker__month__item_current]=\"month === today?.getMonth() && currentYear === today?.getFullYear()\"\n       (click)=\"setMonth($event, month)\"\n       (dblclick)=\"applyMonth($event, month)\">\n    <span class=\"color-text-20 margin-right-2\">\n      {{month + 1 | tetaPrependZero: 2}}\n    </span>\n    {{locale.monthNames[month]}}\n  </div>\n</div>\n", styles: [":host{display:flex}\n"], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "tetaPrependZero": PrependZeroPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MonthSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: MonthSelectComponent, selector: "teta-month-select", inputs: { locale: "locale", minDate: "minDate", maxDate: "maxDate", size: "size", currentMonth: "currentMonth", currentYear: "currentYear" }, outputs: { monthSelected: "monthSelected", monthApplied: "monthApplied" }, ngImport: i0, template: "<div class=\"list row_auto margin-top-2\"\n     (wheel)=\"scrollMonthSelector($event);\">\n  <div *ngFor=\"let month of months\"\n       class=\"list-item list-item_interactive\"\n       [class.list-item_active]=\"month === _currentMonth\"\n       [class.list-item_disabled]=\"isMonthDisabled(month)\"\n       [class.datepicker__month__item_current]=\"month === today?.getMonth() && currentYear === today?.getFullYear()\"\n       (click)=\"setMonth($event, month)\"\n       (dblclick)=\"applyMonth($event, month)\">\n    <span class=\"color-text-20 margin-right-2\">\n      {{month + 1 | tetaPrependZero: 2}}\n    </span>\n    {{locale.months[month]}}\n  </div>\n</div>\n", styles: [":host{display:flex}\n"], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "tetaPrependZero": PrependZeroPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: MonthSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-month-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"list row_auto margin-top-2\"\n     (wheel)=\"scrollMonthSelector($event);\">\n  <div *ngFor=\"let month of months\"\n       class=\"list-item list-item_interactive\"\n       [class.list-item_active]=\"month === _currentMonth\"\n       [class.list-item_disabled]=\"isMonthDisabled(month)\"\n       [class.datepicker__month__item_current]=\"month === today?.getMonth() && currentYear === today?.getFullYear()\"\n       (click)=\"setMonth($event, month)\"\n       (dblclick)=\"applyMonth($event, month)\">\n    <span class=\"color-text-20 margin-right-2\">\n      {{month + 1 | tetaPrependZero: 2}}\n    </span>\n    {{locale.monthNames[month]}}\n  </div>\n</div>\n", styles: [":host{display:flex}\n"] }]
+            args: [{ selector: 'teta-month-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"list row_auto margin-top-2\"\n     (wheel)=\"scrollMonthSelector($event);\">\n  <div *ngFor=\"let month of months\"\n       class=\"list-item list-item_interactive\"\n       [class.list-item_active]=\"month === _currentMonth\"\n       [class.list-item_disabled]=\"isMonthDisabled(month)\"\n       [class.datepicker__month__item_current]=\"month === today?.getMonth() && currentYear === today?.getFullYear()\"\n       (click)=\"setMonth($event, month)\"\n       (dblclick)=\"applyMonth($event, month)\">\n    <span class=\"color-text-20 margin-right-2\">\n      {{month + 1 | tetaPrependZero: 2}}\n    </span>\n    {{locale.months[month]}}\n  </div>\n</div>\n", styles: [":host{display:flex}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: PickerTouchService }]; }, propDecorators: { locale: [{
                 type: Input
             }], minDate: [{
@@ -1750,8 +1841,10 @@ class DaySelectComponent {
         this.currentValue = model ? model : new Date();
         this._cdr.markForCheck();
     }
-    onChange(_) { }
-    onTouched() { }
+    onChange(_) {
+    }
+    onTouched() {
+    }
     registerOnChange(fn) {
         this.onChange = fn;
     }
@@ -1820,12 +1913,12 @@ class DaySelectComponent {
         return false;
     }
 }
-DaySelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DaySelectComponent, deps: [{ token: PickerLocaleService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-DaySelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DaySelectComponent, selector: "teta-day-select", inputs: { firstDayOfWeek: "firstDayOfWeek", disabledDates: "disabledDates", disabledPeriods: "disabledPeriods", disabledDays: "disabledDays", minDate: "minDate", maxDate: "maxDate", disabled: "disabled" }, outputs: { dateSelected: "dateSelected", monthSelected: "monthSelected", yearSelected: "yearSelected" }, providers: [DAY_SELECT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"datepicker-week font-caption color-text-80\">\n  <div class=\"datepicker-day\"\n       [class.font-caption-bold]=\"day === 0 || day === 6\"\n       *ngFor=\"let day of weekDays\">\n    {{locale.dayNamesMin[day]}}\n  </div>\n</div>\n<div class=\"datepicker-picker color-text-90 font-body-3\"\n     (wheel)=\"scrollMonth($event)\"\n>\n  <div *ngFor=\"let day of days\"\n       class=\"datepicker-date\"\n       (click)=\"setDate(day, $event);\"\n       (dblclick)=\"applyValue(day, $event);\"\n       [class.datepicker-date_active]=\"day.selected\"\n       [class.datepicker-date_disabled]=\"day.disabled || !day.isCurrentMonth\"\n       [class.datepicker-date_weekend]=\"day.weekend\"\n       [class.datepicker-date_today]=\"day.today\">\n    <ng-container *ngIf=\"day !== null && day !== undefined\">\n      {{day.date.getDate()}}\n    </ng-container>\n  </div>\n</div>\n", styles: [""], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DaySelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DaySelectComponent, deps: [{ token: TetaConfigService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+DaySelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DaySelectComponent, selector: "teta-day-select", inputs: { firstDayOfWeek: "firstDayOfWeek", disabledDates: "disabledDates", disabledPeriods: "disabledPeriods", disabledDays: "disabledDays", minDate: "minDate", maxDate: "maxDate", disabled: "disabled" }, outputs: { dateSelected: "dateSelected", monthSelected: "monthSelected", yearSelected: "yearSelected" }, providers: [DAY_SELECT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"datepicker-week font-caption color-text-80\">\n  <div class=\"datepicker-day\"\n       [class.font-caption-bold]=\"day === 0 || day === 6\"\n       *ngFor=\"let day of weekDays\">\n    {{locale.daysShort[day]}}\n  </div>\n</div>\n<div class=\"datepicker-picker color-text-90 font-body-3\"\n     (wheel)=\"scrollMonth($event)\">\n  <div *ngFor=\"let day of days\"\n       class=\"datepicker-date\"\n       (click)=\"setDate(day, $event);\"\n       (dblclick)=\"applyValue(day, $event);\"\n       [class.datepicker-date_active]=\"day.selected\"\n       [class.datepicker-date_disabled]=\"day.disabled || !day.isCurrentMonth\"\n       [class.datepicker-date_weekend]=\"day.weekend\"\n       [class.datepicker-date_today]=\"day.today\">\n    <ng-container *ngIf=\"day !== null && day !== undefined\">\n      {{day.date.getDate()}}\n    </ng-container>\n  </div>\n</div>\n", styles: [""], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DaySelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-day-select', providers: [DAY_SELECT_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"datepicker-week font-caption color-text-80\">\n  <div class=\"datepicker-day\"\n       [class.font-caption-bold]=\"day === 0 || day === 6\"\n       *ngFor=\"let day of weekDays\">\n    {{locale.dayNamesMin[day]}}\n  </div>\n</div>\n<div class=\"datepicker-picker color-text-90 font-body-3\"\n     (wheel)=\"scrollMonth($event)\"\n>\n  <div *ngFor=\"let day of days\"\n       class=\"datepicker-date\"\n       (click)=\"setDate(day, $event);\"\n       (dblclick)=\"applyValue(day, $event);\"\n       [class.datepicker-date_active]=\"day.selected\"\n       [class.datepicker-date_disabled]=\"day.disabled || !day.isCurrentMonth\"\n       [class.datepicker-date_weekend]=\"day.weekend\"\n       [class.datepicker-date_today]=\"day.today\">\n    <ng-container *ngIf=\"day !== null && day !== undefined\">\n      {{day.date.getDate()}}\n    </ng-container>\n  </div>\n</div>\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: PickerLocaleService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { firstDayOfWeek: [{
+            args: [{ selector: 'teta-day-select', providers: [DAY_SELECT_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"datepicker-week font-caption color-text-80\">\n  <div class=\"datepicker-day\"\n       [class.font-caption-bold]=\"day === 0 || day === 6\"\n       *ngFor=\"let day of weekDays\">\n    {{locale.daysShort[day]}}\n  </div>\n</div>\n<div class=\"datepicker-picker color-text-90 font-body-3\"\n     (wheel)=\"scrollMonth($event)\">\n  <div *ngFor=\"let day of days\"\n       class=\"datepicker-date\"\n       (click)=\"setDate(day, $event);\"\n       (dblclick)=\"applyValue(day, $event);\"\n       [class.datepicker-date_active]=\"day.selected\"\n       [class.datepicker-date_disabled]=\"day.disabled || !day.isCurrentMonth\"\n       [class.datepicker-date_weekend]=\"day.weekend\"\n       [class.datepicker-date_today]=\"day.today\">\n    <ng-container *ngIf=\"day !== null && day !== undefined\">\n      {{day.date.getDate()}}\n    </ng-container>\n  </div>\n</div>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: TetaConfigService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { firstDayOfWeek: [{
                 type: Input
             }], disabledDates: [{
                 type: Input
@@ -1927,6 +2020,7 @@ class DatePickerComponent {
         this.firstDayOfWeek = 1;
         this.align = Align.left;
         this.verticalAlign = VerticalAlign.auto;
+        this.allowNull = true;
         this.showTime = false;
         this.classDatepicker = true;
         this.tabindex = 0;
@@ -2092,6 +2186,10 @@ class DatePickerComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this._cdr.detectChanges();
+    }
     ngOnInit() {
     }
     ngOnDestroy() {
@@ -2120,12 +2218,12 @@ class DatePickerComponent {
         return DateUtil.truncateToDay(new Date());
     }
 }
-DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DatePickerComponent, deps: [{ token: PickerLocaleService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DatePickerComponent, selector: "teta-date-picker", inputs: { disabled: "disabled", invalid: "invalid", firstDayOfWeek: "firstDayOfWeek", disabledDates: "disabledDates", disabledPeriods: "disabledPeriods", disabledDays: "disabledDays", minDate: "minDate", maxDate: "maxDate", minYearDate: "minYearDate", maxYearDate: "maxYearDate", align: "align", verticalAlign: "verticalAlign", appendToBody: "appendToBody", showTime: "showTime", format: "format" }, host: { listeners: { "window:keyup": "keyUp($event)" }, properties: { "class.datepicker-wide": "this.showTime", "class.datepicker_open": "this.open", "class.datepicker": "this.classDatepicker", "tabindex": "this.tabindex" } }, providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<teta-dropdown\n  class=\"row row_auto\"\n  [disabled]=\"disabled\"\n  [open]=\"open\"\n  [autoCloseIgnore]=\"['esc']\"\n  (openChange)=\"openPicker($event)\"\n  [align]=\"align\"\n  [verticalAlign]=\"verticalAlign\"\n  [appendToBody]=\"appendToBody\">\n  <div tetaDropdownHead\n       class=\"datepicker-head font-body-3\"\n       [class.datepicker-head_disabled]=\"disabled\"\n       [class.datepicker-head_invalid]=\"invalid\">\n    <teta-icon [name]=\"'calendar'\" class=\"margin-right-1\"></teta-icon>\n    <div class=\"row_auto\">\n      {{currentValue !== null && currentValue !== undefined ? (currentValue | date : format) : ''}}\n    </div>\n    <teta-icon [name]=\"'closeBig'\" (click)=\"clearPicker($event);\" class=\"margin-left-1\"></teta-icon>\n  </div>\n  <div tetaDropdownContent class=\"datepicker-body scrollable\" (click)=\"$event.preventDefault()\">\n    <div class=\"padding-3\">\n      <div class=\"row align-center justify-content-between\">\n        <div>\n          <button teta-button\n                  [palette]=\"'text'\"\n                  [view]=\"displayMode===datePickerModeEnum.month ? 'primary' : 'ghost'\"\n                  (click)=\"setMode(datePickerModeEnum.month)\"\n                  (wheel)=\"scrollMonth($event);\">\n            {{locale.monthNames[internalValue?.getMonth()]}}\n          </button>\n          <button teta-button\n                  class=\"margin-left-2\"\n                  [palette]=\"'text'\"\n                  [view]=\"displayMode===datePickerModeEnum.year ? 'primary' : 'ghost'\"\n                  (click)=\"setMode(datePickerModeEnum.year)\"\n                  (wheel)=\"scrollYear($event);\">\n            {{internalValue?.getFullYear()}}\n          </button>\n        </div>\n        <button teta-button\n                [palette]=\"'text'\"\n                [view]=\"'ghost'\"\n                (click)=\"setToday()\">\n          <teta-icon [name]=\"'calendar'\"></teta-icon>\n        </button>\n      </div>\n      <div class=\"datepicker-content\">\n        <teta-year-select\n          *ngIf=\"displayMode === datePickerModeEnum.year\"\n          [currentYear]=\"internalValue?.getFullYear()\"\n          [today]=\"today\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (yearSelected)=\"setYear($event)\">\n        </teta-year-select>\n        <teta-month-select\n          *ngIf=\"displayMode === datePickerModeEnum.month\"\n          [currentMonth]=\"internalValue?.getMonth()\"\n          [currentYear]=\"internalValue?.getFullYear()\"\n          [locale]=\"locale\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (monthSelected)=\"setMonth($event)\">\n        </teta-month-select>\n        <teta-day-select\n          *ngIf=\"displayMode === datePickerModeEnum.date\"\n          [ngModel]=\"currentValue\"\n          (ngModelChange)=\"applyValue($event)\"\n          (dateSelected)=\"setDate($event)\"\n          (yearSelected)=\"setYear($event)\"\n          (monthSelected)=\"setMonth($event)\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [disabledDays]=\"disabledDays\"\n          [disabledDates]=\"disabledDates\"\n          [disabledPeriods]=\"disabledPeriods\"></teta-day-select>\n      </div>\n    </div>\n    <div *ngIf=\"showTime\" class=\"datepicker-time padding-v-1 border-top border-text-10 font-body-3 color-text-90\">\n      <teta-time-part-control [max]=\"23\" [ngModel]=\"internalValue?.getHours()\"\n                              (ngModelChange)=\"setHour($event)\"></teta-time-part-control>\n      :\n      <teta-time-part-control [ngModel]=\"internalValue?.getMinutes()\"\n                              (ngModelChange)=\"setMinute($event)\"></teta-time-part-control>\n      :\n      <teta-time-part-control [ngModel]=\"internalValue?.getSeconds()\"\n                              (ngModelChange)=\"setSecond($event)\"></teta-time-part-control>\n    </div>\n  </div>\n</teta-dropdown>\n", styles: [""], components: [{ type: DropdownComponent, selector: "teta-dropdown" }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: YearSelectComponent, selector: "teta-year-select", inputs: ["currentYear", "today", "size", "minDate", "maxDate", "allowableRange"], outputs: ["yearSelected", "yearApplied"] }, { type: MonthSelectComponent, selector: "teta-month-select", inputs: ["locale", "minDate", "maxDate", "size", "currentMonth", "currentYear"], outputs: ["monthSelected", "monthApplied"] }, { type: DaySelectComponent, selector: "teta-day-select", inputs: ["firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "disabled"], outputs: ["dateSelected", "monthSelected", "yearSelected"] }, { type: TimePartControlComponent, selector: "teta-time-part-control", inputs: ["min", "max", "disabled"] }], directives: [{ type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }], pipes: { "date": i2.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DatePickerComponent, deps: [{ token: TetaConfigService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DatePickerComponent, selector: "teta-date-picker", inputs: { disabled: "disabled", invalid: "invalid", firstDayOfWeek: "firstDayOfWeek", disabledDates: "disabledDates", disabledPeriods: "disabledPeriods", disabledDays: "disabledDays", minDate: "minDate", maxDate: "maxDate", minYearDate: "minYearDate", maxYearDate: "maxYearDate", align: "align", verticalAlign: "verticalAlign", appendToBody: "appendToBody", allowNull: "allowNull", backdrop: "backdrop", showTime: "showTime", format: "format" }, host: { listeners: { "window:keyup": "keyUp($event)" }, properties: { "class.datepicker-wide": "this.showTime", "class.datepicker_open": "this.open", "class.datepicker": "this.classDatepicker", "tabindex": "this.tabindex" } }, providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<teta-dropdown\n  class=\"row row_auto\"\n  [disabled]=\"disabled\"\n  [open]=\"open\"\n  [autoCloseIgnore]=\"['esc']\"\n  (openChange)=\"openPicker($event)\"\n  [align]=\"align\"\n  [verticalAlign]=\"verticalAlign\"\n  [appendToBody]=\"appendToBody\"\n  [backdrop]=\"backdrop\">\n  <div tetaDropdownHead\n       class=\"datepicker-head font-body-3\"\n       [class.datepicker-head_disabled]=\"disabled\"\n       [class.datepicker-head_invalid]=\"invalid\">\n    <teta-icon [name]=\"'calendar'\" class=\"margin-right-1\"></teta-icon>\n    <div class=\"row_auto nowrap\">\n      {{currentValue !== null && currentValue !== undefined ? (currentValue | date : format) : ''}}\n    </div>\n    <teta-icon *ngIf=\"allowNull\"\n               [name]=\"'closeBig'\"\n               (click)=\"clearPicker($event);\"\n               class=\"margin-left-1\"></teta-icon>\n  </div>\n  <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n    <div class=\"padding-3\">\n      <div class=\"row align-center justify-content-between\">\n        <div>\n          <button teta-button\n                  [palette]=\"'text'\"\n                  [view]=\"displayMode===datePickerModeEnum.month ? 'primary' : 'ghost'\"\n                  (click)=\"setMode(datePickerModeEnum.month)\"\n                  (wheel)=\"scrollMonth($event);\">\n            {{locale.months[internalValue?.getMonth()]}}\n          </button>\n          <button teta-button\n                  class=\"margin-left-2\"\n                  [palette]=\"'text'\"\n                  [view]=\"displayMode===datePickerModeEnum.year ? 'primary' : 'ghost'\"\n                  (click)=\"setMode(datePickerModeEnum.year)\"\n                  (wheel)=\"scrollYear($event);\">\n            {{internalValue?.getFullYear()}}\n          </button>\n        </div>\n        <button teta-button\n                [palette]=\"'text'\"\n                [view]=\"'ghost'\"\n                (click)=\"setToday()\">\n          <teta-icon [name]=\"'calendar'\"></teta-icon>\n        </button>\n      </div>\n      <div class=\"datepicker-content\">\n        <teta-year-select\n          *ngIf=\"displayMode === datePickerModeEnum.year\"\n          [currentYear]=\"internalValue?.getFullYear()\"\n          [today]=\"today\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (yearSelected)=\"setYear($event)\">\n        </teta-year-select>\n        <teta-month-select\n          *ngIf=\"displayMode === datePickerModeEnum.month\"\n          [currentMonth]=\"internalValue?.getMonth()\"\n          [currentYear]=\"internalValue?.getFullYear()\"\n          [locale]=\"locale\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (monthSelected)=\"setMonth($event)\">\n        </teta-month-select>\n        <teta-day-select\n          *ngIf=\"displayMode === datePickerModeEnum.date\"\n          [ngModel]=\"currentValue\"\n          (ngModelChange)=\"applyValue($event)\"\n          (dateSelected)=\"setDate($event)\"\n          (yearSelected)=\"setYear($event)\"\n          (monthSelected)=\"setMonth($event)\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [disabledDays]=\"disabledDays\"\n          [disabledDates]=\"disabledDates\"\n          [disabledPeriods]=\"disabledPeriods\"></teta-day-select>\n      </div>\n    </div>\n    <div *ngIf=\"showTime\" class=\"datepicker-time padding-v-1 border-top border-text-10 font-body-3 color-text-90\">\n      <teta-time-part-control [max]=\"23\" [ngModel]=\"internalValue?.getHours()\"\n                              (ngModelChange)=\"setHour($event)\"></teta-time-part-control>\n      :\n      <teta-time-part-control [ngModel]=\"internalValue?.getMinutes()\"\n                              (ngModelChange)=\"setMinute($event)\"></teta-time-part-control>\n      :\n      <teta-time-part-control [ngModel]=\"internalValue?.getSeconds()\"\n                              (ngModelChange)=\"setSecond($event)\"></teta-time-part-control>\n    </div>\n  </div>\n</teta-dropdown>\n", styles: [""], components: [{ type: DropdownComponent, selector: "teta-dropdown" }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: YearSelectComponent, selector: "teta-year-select", inputs: ["currentYear", "today", "size", "minDate", "maxDate", "allowableRange"], outputs: ["yearSelected", "yearApplied"] }, { type: MonthSelectComponent, selector: "teta-month-select", inputs: ["locale", "minDate", "maxDate", "size", "currentMonth", "currentYear"], outputs: ["monthSelected", "monthApplied"] }, { type: DaySelectComponent, selector: "teta-day-select", inputs: ["firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "disabled"], outputs: ["dateSelected", "monthSelected", "yearSelected"] }, { type: TimePartControlComponent, selector: "teta-time-part-control", inputs: ["min", "max", "disabled"] }], directives: [{ type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i3.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-date-picker', providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown\n  class=\"row row_auto\"\n  [disabled]=\"disabled\"\n  [open]=\"open\"\n  [autoCloseIgnore]=\"['esc']\"\n  (openChange)=\"openPicker($event)\"\n  [align]=\"align\"\n  [verticalAlign]=\"verticalAlign\"\n  [appendToBody]=\"appendToBody\">\n  <div tetaDropdownHead\n       class=\"datepicker-head font-body-3\"\n       [class.datepicker-head_disabled]=\"disabled\"\n       [class.datepicker-head_invalid]=\"invalid\">\n    <teta-icon [name]=\"'calendar'\" class=\"margin-right-1\"></teta-icon>\n    <div class=\"row_auto\">\n      {{currentValue !== null && currentValue !== undefined ? (currentValue | date : format) : ''}}\n    </div>\n    <teta-icon [name]=\"'closeBig'\" (click)=\"clearPicker($event);\" class=\"margin-left-1\"></teta-icon>\n  </div>\n  <div tetaDropdownContent class=\"datepicker-body scrollable\" (click)=\"$event.preventDefault()\">\n    <div class=\"padding-3\">\n      <div class=\"row align-center justify-content-between\">\n        <div>\n          <button teta-button\n                  [palette]=\"'text'\"\n                  [view]=\"displayMode===datePickerModeEnum.month ? 'primary' : 'ghost'\"\n                  (click)=\"setMode(datePickerModeEnum.month)\"\n                  (wheel)=\"scrollMonth($event);\">\n            {{locale.monthNames[internalValue?.getMonth()]}}\n          </button>\n          <button teta-button\n                  class=\"margin-left-2\"\n                  [palette]=\"'text'\"\n                  [view]=\"displayMode===datePickerModeEnum.year ? 'primary' : 'ghost'\"\n                  (click)=\"setMode(datePickerModeEnum.year)\"\n                  (wheel)=\"scrollYear($event);\">\n            {{internalValue?.getFullYear()}}\n          </button>\n        </div>\n        <button teta-button\n                [palette]=\"'text'\"\n                [view]=\"'ghost'\"\n                (click)=\"setToday()\">\n          <teta-icon [name]=\"'calendar'\"></teta-icon>\n        </button>\n      </div>\n      <div class=\"datepicker-content\">\n        <teta-year-select\n          *ngIf=\"displayMode === datePickerModeEnum.year\"\n          [currentYear]=\"internalValue?.getFullYear()\"\n          [today]=\"today\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (yearSelected)=\"setYear($event)\">\n        </teta-year-select>\n        <teta-month-select\n          *ngIf=\"displayMode === datePickerModeEnum.month\"\n          [currentMonth]=\"internalValue?.getMonth()\"\n          [currentYear]=\"internalValue?.getFullYear()\"\n          [locale]=\"locale\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (monthSelected)=\"setMonth($event)\">\n        </teta-month-select>\n        <teta-day-select\n          *ngIf=\"displayMode === datePickerModeEnum.date\"\n          [ngModel]=\"currentValue\"\n          (ngModelChange)=\"applyValue($event)\"\n          (dateSelected)=\"setDate($event)\"\n          (yearSelected)=\"setYear($event)\"\n          (monthSelected)=\"setMonth($event)\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [disabledDays]=\"disabledDays\"\n          [disabledDates]=\"disabledDates\"\n          [disabledPeriods]=\"disabledPeriods\"></teta-day-select>\n      </div>\n    </div>\n    <div *ngIf=\"showTime\" class=\"datepicker-time padding-v-1 border-top border-text-10 font-body-3 color-text-90\">\n      <teta-time-part-control [max]=\"23\" [ngModel]=\"internalValue?.getHours()\"\n                              (ngModelChange)=\"setHour($event)\"></teta-time-part-control>\n      :\n      <teta-time-part-control [ngModel]=\"internalValue?.getMinutes()\"\n                              (ngModelChange)=\"setMinute($event)\"></teta-time-part-control>\n      :\n      <teta-time-part-control [ngModel]=\"internalValue?.getSeconds()\"\n                              (ngModelChange)=\"setSecond($event)\"></teta-time-part-control>\n    </div>\n  </div>\n</teta-dropdown>\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: PickerLocaleService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { disabled: [{
+            args: [{ selector: 'teta-date-picker', providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown\n  class=\"row row_auto\"\n  [disabled]=\"disabled\"\n  [open]=\"open\"\n  [autoCloseIgnore]=\"['esc']\"\n  (openChange)=\"openPicker($event)\"\n  [align]=\"align\"\n  [verticalAlign]=\"verticalAlign\"\n  [appendToBody]=\"appendToBody\"\n  [backdrop]=\"backdrop\">\n  <div tetaDropdownHead\n       class=\"datepicker-head font-body-3\"\n       [class.datepicker-head_disabled]=\"disabled\"\n       [class.datepicker-head_invalid]=\"invalid\">\n    <teta-icon [name]=\"'calendar'\" class=\"margin-right-1\"></teta-icon>\n    <div class=\"row_auto nowrap\">\n      {{currentValue !== null && currentValue !== undefined ? (currentValue | date : format) : ''}}\n    </div>\n    <teta-icon *ngIf=\"allowNull\"\n               [name]=\"'closeBig'\"\n               (click)=\"clearPicker($event);\"\n               class=\"margin-left-1\"></teta-icon>\n  </div>\n  <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n    <div class=\"padding-3\">\n      <div class=\"row align-center justify-content-between\">\n        <div>\n          <button teta-button\n                  [palette]=\"'text'\"\n                  [view]=\"displayMode===datePickerModeEnum.month ? 'primary' : 'ghost'\"\n                  (click)=\"setMode(datePickerModeEnum.month)\"\n                  (wheel)=\"scrollMonth($event);\">\n            {{locale.months[internalValue?.getMonth()]}}\n          </button>\n          <button teta-button\n                  class=\"margin-left-2\"\n                  [palette]=\"'text'\"\n                  [view]=\"displayMode===datePickerModeEnum.year ? 'primary' : 'ghost'\"\n                  (click)=\"setMode(datePickerModeEnum.year)\"\n                  (wheel)=\"scrollYear($event);\">\n            {{internalValue?.getFullYear()}}\n          </button>\n        </div>\n        <button teta-button\n                [palette]=\"'text'\"\n                [view]=\"'ghost'\"\n                (click)=\"setToday()\">\n          <teta-icon [name]=\"'calendar'\"></teta-icon>\n        </button>\n      </div>\n      <div class=\"datepicker-content\">\n        <teta-year-select\n          *ngIf=\"displayMode === datePickerModeEnum.year\"\n          [currentYear]=\"internalValue?.getFullYear()\"\n          [today]=\"today\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (yearSelected)=\"setYear($event)\">\n        </teta-year-select>\n        <teta-month-select\n          *ngIf=\"displayMode === datePickerModeEnum.month\"\n          [currentMonth]=\"internalValue?.getMonth()\"\n          [currentYear]=\"internalValue?.getFullYear()\"\n          [locale]=\"locale\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (monthSelected)=\"setMonth($event)\">\n        </teta-month-select>\n        <teta-day-select\n          *ngIf=\"displayMode === datePickerModeEnum.date\"\n          [ngModel]=\"currentValue\"\n          (ngModelChange)=\"applyValue($event)\"\n          (dateSelected)=\"setDate($event)\"\n          (yearSelected)=\"setYear($event)\"\n          (monthSelected)=\"setMonth($event)\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [disabledDays]=\"disabledDays\"\n          [disabledDates]=\"disabledDates\"\n          [disabledPeriods]=\"disabledPeriods\"></teta-day-select>\n      </div>\n    </div>\n    <div *ngIf=\"showTime\" class=\"datepicker-time padding-v-1 border-top border-text-10 font-body-3 color-text-90\">\n      <teta-time-part-control [max]=\"23\" [ngModel]=\"internalValue?.getHours()\"\n                              (ngModelChange)=\"setHour($event)\"></teta-time-part-control>\n      :\n      <teta-time-part-control [ngModel]=\"internalValue?.getMinutes()\"\n                              (ngModelChange)=\"setMinute($event)\"></teta-time-part-control>\n      :\n      <teta-time-part-control [ngModel]=\"internalValue?.getSeconds()\"\n                              (ngModelChange)=\"setSecond($event)\"></teta-time-part-control>\n    </div>\n  </div>\n</teta-dropdown>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: TetaConfigService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { disabled: [{
                 type: Input
             }], invalid: [{
                 type: Input
@@ -2151,6 +2249,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 type: Input
             }], appendToBody: [{
                 type: Input
+            }], allowNull: [{
+                type: Input
+            }], backdrop: [{
+                type: Input
             }], showTime: [{
                 type: HostBinding,
                 args: ['class.datepicker-wide']
@@ -2189,8 +2291,10 @@ class MonthPickerComponent {
         this.displayMode = DatePickerMode.month;
         this._value = null;
         this._alive = true;
-        this.onChange = (_) => { };
-        this.onTouched = () => { };
+        this.onChange = (_) => {
+        };
+        this.onTouched = () => {
+        };
         this.isMinInvalid = (dat) => {
             if (!this.minDate || !(this.minDate instanceof Date) || !dat) {
                 return false;
@@ -2382,12 +2486,12 @@ class MonthPickerComponent {
         this.displayMode = result;
     }
 }
-MonthPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: MonthPickerComponent, deps: [{ token: PickerLocaleService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MonthPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: MonthPickerComponent, selector: "teta-month-picker", inputs: { disabled: "disabled", minDate: "minDate", maxDate: "maxDate", showToday: "showToday", appendToBody: "appendToBody" }, host: { properties: { "class.datepicker_open": "this.showPicker", "class.datepicker": "this.classDatepicker", "tabindex": "this.tabindex" } }, providers: [MONTH_PICKER_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<teta-dropdown\n  class=\"row row_auto\"\n  [appendToBody]=\"appendToBody\"\n  [(open)]=\"showPicker\"\n  [disabled]=\"disabled\">\n  <div tetaDropdownHead\n       (wheel)=\"scrollMonth($event)\"\n       class=\"datepicker-head font-body-3\">\n    <teta-icon [name]=\"'calendar'\" class=\"margin-right-2\"></teta-icon>\n    <div class=\"row_auto\">\n      <ng-container *ngIf=\"_value !==null && _value!==undefined\">\n        {{locale.monthNames[_value.getMonth()]}} {{_value.getFullYear()}}\n      </ng-container>\n    </div>\n    <teta-icon [name]=\"'closeBig'\" (click)=\"clearPicker()\" class=\"margin-left-2\"></teta-icon>\n  </div>\n  <div tetaDropdownContent class=\"datepicker-body scrollable padding-3\">\n    <div class=\"row align-center justify-content-between\">\n      <div>\n        <button teta-button\n                [palette]=\"'text'\"\n                [view]=\"displayMode===datePickerModeEnum.month ? 'primary' : 'ghost'\"\n                (click)=\"setMode(datePickerModeEnum.month)\"\n                (wheel)=\"scrollMonth($event);\">\n          {{locale.monthNames[_currentMonth || today.getMonth()]}}\n        </button>\n        <button teta-button\n                class=\"margin-left-2\"\n                [palette]=\"'text'\"\n                [view]=\"displayMode===datePickerModeEnum.year ? 'primary' : 'ghost'\"\n                (click)=\"setMode(datePickerModeEnum.year)\"\n                (wheel)=\"scrollYear($event);\">\n          {{_currentYear || today.getFullYear()}}\n        </button>\n      </div>\n      <button teta-button\n              [palette]=\"'text'\"\n              [view]=\"'ghost'\"\n              (click)=\"setToday()\">\n        <teta-icon [name]=\"'calendar'\"></teta-icon>\n      </button>\n    </div>\n    <div class=\"datepicker-content\">\n      <teta-year-select\n        *ngIf=\"displayMode === datePickerModeEnum.year\"\n        [currentYear]=\"_currentYear\"\n        [today]=\"today\"\n        [size]=\"8\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        (yearSelected)=\"setYear($event)\">\n      </teta-year-select>\n      <teta-month-select\n        *ngIf=\"displayMode === datePickerModeEnum.month\"\n        [currentMonth]=\"_currentMonth\"\n        [locale]=\"locale\"\n        [currentYear]=\"_currentYear\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        (monthSelected)=\"setMonth($event)\">\n      </teta-month-select>\n    </div>\n  </div>\n</teta-dropdown>\n", styles: [""], components: [{ type: DropdownComponent, selector: "teta-dropdown" }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: YearSelectComponent, selector: "teta-year-select", inputs: ["currentYear", "today", "size", "minDate", "maxDate", "allowableRange"], outputs: ["yearSelected", "yearApplied"] }, { type: MonthSelectComponent, selector: "teta-month-select", inputs: ["locale", "minDate", "maxDate", "size", "currentMonth", "currentYear"], outputs: ["monthSelected", "monthApplied"] }], directives: [{ type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropdownContentDirective, selector: "[tetaDropdownContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MonthPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: MonthPickerComponent, deps: [{ token: TetaConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MonthPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: MonthPickerComponent, selector: "teta-month-picker", inputs: { disabled: "disabled", minDate: "minDate", maxDate: "maxDate", showToday: "showToday", appendToBody: "appendToBody" }, host: { properties: { "class.datepicker_open": "this.showPicker", "class.datepicker": "this.classDatepicker", "tabindex": "this.tabindex" } }, providers: [MONTH_PICKER_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<teta-dropdown\n  class=\"row row_auto\"\n  [appendToBody]=\"appendToBody\"\n  [(open)]=\"showPicker\"\n  [disabled]=\"disabled\">\n  <div tetaDropdownHead\n       (wheel)=\"scrollMonth($event)\"\n       class=\"datepicker-head font-body-3\">\n    <teta-icon [name]=\"'calendar'\" class=\"margin-right-2\"></teta-icon>\n    <div class=\"row_auto\">\n      <ng-container *ngIf=\"_value !==null && _value!==undefined\">\n        {{locale.months[_value.getMonth()]}} {{_value.getFullYear()}}\n      </ng-container>\n    </div>\n    <teta-icon [name]=\"'closeBig'\" (click)=\"clearPicker()\" class=\"margin-left-2\"></teta-icon>\n  </div>\n  <div tetaDropdownContent class=\"scrollable padding-3\">\n    <div class=\"row align-center justify-content-between\">\n      <div>\n        <button teta-button\n                [palette]=\"'text'\"\n                [view]=\"displayMode===datePickerModeEnum.month ? 'primary' : 'ghost'\"\n                (click)=\"setMode(datePickerModeEnum.month)\"\n                (wheel)=\"scrollMonth($event);\">\n          {{locale.months[_currentMonth || today.getMonth()]}}\n        </button>\n        <button teta-button\n                class=\"margin-left-2\"\n                [palette]=\"'text'\"\n                [view]=\"displayMode===datePickerModeEnum.year ? 'primary' : 'ghost'\"\n                (click)=\"setMode(datePickerModeEnum.year)\"\n                (wheel)=\"scrollYear($event);\">\n          {{_currentYear || today.getFullYear()}}\n        </button>\n      </div>\n      <button teta-button\n              [palette]=\"'text'\"\n              [view]=\"'ghost'\"\n              (click)=\"setToday()\">\n        <teta-icon [name]=\"'calendar'\"></teta-icon>\n      </button>\n    </div>\n    <div class=\"datepicker-content\">\n      <teta-year-select\n        *ngIf=\"displayMode === datePickerModeEnum.year\"\n        [currentYear]=\"_currentYear\"\n        [today]=\"today\"\n        [size]=\"8\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        (yearSelected)=\"setYear($event)\">\n      </teta-year-select>\n      <teta-month-select\n        *ngIf=\"displayMode === datePickerModeEnum.month\"\n        [currentMonth]=\"_currentMonth\"\n        [locale]=\"locale\"\n        [currentYear]=\"_currentYear\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        (monthSelected)=\"setMonth($event)\">\n      </teta-month-select>\n    </div>\n  </div>\n</teta-dropdown>\n", styles: [""], components: [{ type: DropdownComponent, selector: "teta-dropdown" }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: YearSelectComponent, selector: "teta-year-select", inputs: ["currentYear", "today", "size", "minDate", "maxDate", "allowableRange"], outputs: ["yearSelected", "yearApplied"] }, { type: MonthSelectComponent, selector: "teta-month-select", inputs: ["locale", "minDate", "maxDate", "size", "currentMonth", "currentYear"], outputs: ["monthSelected", "monthApplied"] }], directives: [{ type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropdownContentDirective, selector: "[tetaDropdownContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: MonthPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-month-picker', providers: [MONTH_PICKER_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown\n  class=\"row row_auto\"\n  [appendToBody]=\"appendToBody\"\n  [(open)]=\"showPicker\"\n  [disabled]=\"disabled\">\n  <div tetaDropdownHead\n       (wheel)=\"scrollMonth($event)\"\n       class=\"datepicker-head font-body-3\">\n    <teta-icon [name]=\"'calendar'\" class=\"margin-right-2\"></teta-icon>\n    <div class=\"row_auto\">\n      <ng-container *ngIf=\"_value !==null && _value!==undefined\">\n        {{locale.monthNames[_value.getMonth()]}} {{_value.getFullYear()}}\n      </ng-container>\n    </div>\n    <teta-icon [name]=\"'closeBig'\" (click)=\"clearPicker()\" class=\"margin-left-2\"></teta-icon>\n  </div>\n  <div tetaDropdownContent class=\"datepicker-body scrollable padding-3\">\n    <div class=\"row align-center justify-content-between\">\n      <div>\n        <button teta-button\n                [palette]=\"'text'\"\n                [view]=\"displayMode===datePickerModeEnum.month ? 'primary' : 'ghost'\"\n                (click)=\"setMode(datePickerModeEnum.month)\"\n                (wheel)=\"scrollMonth($event);\">\n          {{locale.monthNames[_currentMonth || today.getMonth()]}}\n        </button>\n        <button teta-button\n                class=\"margin-left-2\"\n                [palette]=\"'text'\"\n                [view]=\"displayMode===datePickerModeEnum.year ? 'primary' : 'ghost'\"\n                (click)=\"setMode(datePickerModeEnum.year)\"\n                (wheel)=\"scrollYear($event);\">\n          {{_currentYear || today.getFullYear()}}\n        </button>\n      </div>\n      <button teta-button\n              [palette]=\"'text'\"\n              [view]=\"'ghost'\"\n              (click)=\"setToday()\">\n        <teta-icon [name]=\"'calendar'\"></teta-icon>\n      </button>\n    </div>\n    <div class=\"datepicker-content\">\n      <teta-year-select\n        *ngIf=\"displayMode === datePickerModeEnum.year\"\n        [currentYear]=\"_currentYear\"\n        [today]=\"today\"\n        [size]=\"8\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        (yearSelected)=\"setYear($event)\">\n      </teta-year-select>\n      <teta-month-select\n        *ngIf=\"displayMode === datePickerModeEnum.month\"\n        [currentMonth]=\"_currentMonth\"\n        [locale]=\"locale\"\n        [currentYear]=\"_currentYear\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        (monthSelected)=\"setMonth($event)\">\n      </teta-month-select>\n    </div>\n  </div>\n</teta-dropdown>\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: PickerLocaleService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
+            args: [{ selector: 'teta-month-picker', providers: [MONTH_PICKER_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown\n  class=\"row row_auto\"\n  [appendToBody]=\"appendToBody\"\n  [(open)]=\"showPicker\"\n  [disabled]=\"disabled\">\n  <div tetaDropdownHead\n       (wheel)=\"scrollMonth($event)\"\n       class=\"datepicker-head font-body-3\">\n    <teta-icon [name]=\"'calendar'\" class=\"margin-right-2\"></teta-icon>\n    <div class=\"row_auto\">\n      <ng-container *ngIf=\"_value !==null && _value!==undefined\">\n        {{locale.months[_value.getMonth()]}} {{_value.getFullYear()}}\n      </ng-container>\n    </div>\n    <teta-icon [name]=\"'closeBig'\" (click)=\"clearPicker()\" class=\"margin-left-2\"></teta-icon>\n  </div>\n  <div tetaDropdownContent class=\"scrollable padding-3\">\n    <div class=\"row align-center justify-content-between\">\n      <div>\n        <button teta-button\n                [palette]=\"'text'\"\n                [view]=\"displayMode===datePickerModeEnum.month ? 'primary' : 'ghost'\"\n                (click)=\"setMode(datePickerModeEnum.month)\"\n                (wheel)=\"scrollMonth($event);\">\n          {{locale.months[_currentMonth || today.getMonth()]}}\n        </button>\n        <button teta-button\n                class=\"margin-left-2\"\n                [palette]=\"'text'\"\n                [view]=\"displayMode===datePickerModeEnum.year ? 'primary' : 'ghost'\"\n                (click)=\"setMode(datePickerModeEnum.year)\"\n                (wheel)=\"scrollYear($event);\">\n          {{_currentYear || today.getFullYear()}}\n        </button>\n      </div>\n      <button teta-button\n              [palette]=\"'text'\"\n              [view]=\"'ghost'\"\n              (click)=\"setToday()\">\n        <teta-icon [name]=\"'calendar'\"></teta-icon>\n      </button>\n    </div>\n    <div class=\"datepicker-content\">\n      <teta-year-select\n        *ngIf=\"displayMode === datePickerModeEnum.year\"\n        [currentYear]=\"_currentYear\"\n        [today]=\"today\"\n        [size]=\"8\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        (yearSelected)=\"setYear($event)\">\n      </teta-year-select>\n      <teta-month-select\n        *ngIf=\"displayMode === datePickerModeEnum.month\"\n        [currentMonth]=\"_currentMonth\"\n        [locale]=\"locale\"\n        [currentYear]=\"_currentYear\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        (monthSelected)=\"setMonth($event)\">\n      </teta-month-select>\n    </div>\n  </div>\n</teta-dropdown>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: TetaConfigService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
                 type: Input
             }], minDate: [{
                 type: Input
@@ -2714,14 +2818,14 @@ class OnlyNumberDirective {
         this._control.control.setValue(valid ? value : this._previousValue ?? 0);
     }
 }
-OnlyNumberDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: OnlyNumberDirective, deps: [{ token: i0.ElementRef }, { token: i3.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+OnlyNumberDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: OnlyNumberDirective, deps: [{ token: i0.ElementRef }, { token: i3$1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
 OnlyNumberDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: { tetaOnlyNumber: "tetaOnlyNumber", allowDecimals: "allowDecimals", allowSign: "allowSign", decimalSeparator: "decimalSeparator", commaSeparator: "commaSeparator" }, host: { listeners: { "change": "onChange($event)", "paste": "onPaste($event)", "keydown": "onKeyDown($event)" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: OnlyNumberDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tetaOnlyNumber]',
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i3.NgControl }]; }, propDecorators: { tetaOnlyNumber: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i3$1.NgControl }]; }, propDecorators: { tetaOnlyNumber: [{
                 type: Input
             }], allowDecimals: [{
                 type: Input
@@ -3115,7 +3219,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
 
 class ToolbarComponent {
     get getClass() {
-        const result = [this.class, 'toolbar', 'toolbar_panel'];
+        const result = [this.class, 'toolbar'];
         if (this.palette) {
             result.push(`toolbar-${this.palette}`);
         }
@@ -3172,7 +3276,7 @@ class ExpandPanelComponent {
     }
 }
 ExpandPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ExpandPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ExpandPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ExpandPanelComponent, selector: "teta-expand-panel", inputs: { placeholder: "placeholder", open: "open", cookieName: "cookieName", direction: "direction" }, outputs: { openChange: "openChange" }, queries: [{ propertyName: "content", first: true, predicate: ExpandPanelContentDirective, descendants: true }, { propertyName: "head", first: true, predicate: ExpandPanelHeadDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"open\">\n  <teta-toolbar\n    style=\"display: flex\"\n    [style.justifyContent]=\"direction === 'right' ? 'space-between' : 'unset'\"\n    [style.flexDirection]=\"direction === 'right' ? 'row-reverse' : 'row'\">\n    <button\n      teta-button\n      [square]=\"true\"\n      [palette]=\"'text'\"\n      [view]=\"'ghost'\"\n      (click)=\"closePanel()\"\n    >\n      <teta-icon [name]=\"direction === 'right' ? 'arrowRight' : 'arrowLeft'\"></teta-icon>\n    </button>\n    <span class=\"font-title-2\" style=\"display: contents\"><ng-container *ngTemplateOutlet=\"head?.template\"></ng-container></span>\n  </teta-toolbar>\n  <ng-container *ngTemplateOutlet=\"content?.template\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"!open\">\n  <div class=\"width-10 overflow-hidden\" style=\"height: 100%;\">\n    <button\n      teta-button\n      style=\"\n        transform-origin: 0 0;\n        transform: rotate(-90deg) translateX(-100%);\n        margin: 8px;\n      \"\n      [palette]=\"'text'\"\n      [view]=\"'ghost'\"\n      (click)=\"openPanel()\"\n    >\n      <div class=\"font-button-2 nowrap\">{{ placeholder }}</div>\n      <teta-icon [name]=\"direction === 'right' ? 'arrowUp' : 'arrowDown'\"></teta-icon>\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;min-width:0;min-height:0;height:100%}\n"], components: [{ type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ExpandPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ExpandPanelComponent, selector: "teta-expand-panel", inputs: { placeholder: "placeholder", open: "open", cookieName: "cookieName", direction: "direction" }, outputs: { openChange: "openChange" }, queries: [{ propertyName: "content", first: true, predicate: ExpandPanelContentDirective, descendants: true }, { propertyName: "head", first: true, predicate: ExpandPanelHeadDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"open\">\n  <teta-toolbar\n    style=\"display: flex\"\n    [style.justifyContent]=\"direction === 'right' ? 'space-between' : 'unset'\"\n    [style.flexDirection]=\"direction === 'right' ? 'row-reverse' : 'row'\">\n    <button\n      teta-button\n      [square]=\"true\"\n      [palette]=\"'text'\"\n      [view]=\"'ghost'\"\n      (click)=\"closePanel()\"\n    >\n      <teta-icon [name]=\"direction === 'right' ? 'arrowRight' : 'arrowLeft'\"></teta-icon>\n    </button>\n    <span class=\"font-title-2\" style=\"display: contents\"><ng-container *ngTemplateOutlet=\"head?.template\"></ng-container></span>\n  </teta-toolbar>\n  <ng-container *ngTemplateOutlet=\"content?.template\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"!open\">\n  <div class=\"width-10 overflow-hidden\" style=\"height: 100%;\">\n    <button\n      teta-button\n      style=\"\n        transform-origin: 0 0;\n        transform: rotate(-90deg) translateX(-100%);\n        margin: 8px;\n      \"\n      [palette]=\"'text'\"\n      [view]=\"'ghost'\"\n      (click)=\"openPanel()\"\n    >\n      <div class=\"font-button-2 nowrap\">{{ placeholder }}</div>\n      <teta-icon [name]=\"direction === 'right' ? 'arrowUp' : 'arrowDown'\"></teta-icon>\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;min-width:0;min-height:0;height:100%}\n"], components: [{ type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ExpandPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-expand-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"open\">\n  <teta-toolbar\n    style=\"display: flex\"\n    [style.justifyContent]=\"direction === 'right' ? 'space-between' : 'unset'\"\n    [style.flexDirection]=\"direction === 'right' ? 'row-reverse' : 'row'\">\n    <button\n      teta-button\n      [square]=\"true\"\n      [palette]=\"'text'\"\n      [view]=\"'ghost'\"\n      (click)=\"closePanel()\"\n    >\n      <teta-icon [name]=\"direction === 'right' ? 'arrowRight' : 'arrowLeft'\"></teta-icon>\n    </button>\n    <span class=\"font-title-2\" style=\"display: contents\"><ng-container *ngTemplateOutlet=\"head?.template\"></ng-container></span>\n  </teta-toolbar>\n  <ng-container *ngTemplateOutlet=\"content?.template\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"!open\">\n  <div class=\"width-10 overflow-hidden\" style=\"height: 100%;\">\n    <button\n      teta-button\n      style=\"\n        transform-origin: 0 0;\n        transform: rotate(-90deg) translateX(-100%);\n        margin: 8px;\n      \"\n      [palette]=\"'text'\"\n      [view]=\"'ghost'\"\n      (click)=\"openPanel()\"\n    >\n      <div class=\"font-button-2 nowrap\">{{ placeholder }}</div>\n      <teta-icon [name]=\"direction === 'right' ? 'arrowUp' : 'arrowDown'\"></teta-icon>\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;min-width:0;min-height:0;height:100%}\n"] }]
@@ -3352,22 +3456,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 }]
         }] });
 
-class FilterPanelComponent {
-    constructor() { }
-    ngOnInit() { }
+class StringUtil {
+    static firstLetterToLower(input) {
+        return input.charAt(0).toLocaleLowerCase() + input.slice(1);
+    }
+    ;
+    static firstLetterToUpper(input) {
+        return input.charAt(0).toLocaleUpperCase() + input.slice(1);
+    }
+    ;
 }
-FilterPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FilterPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FilterPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: FilterPanelComponent, selector: "teta-filter-panel", ngImport: i0, template: "<p>filter-panel works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FilterPanelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-filter-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>filter-panel works!</p>\n", styles: [""] }]
-        }], ctorParameters: function () { return []; } });
 
 class FilterBase {
     constructor(options) {
         if (options) {
-            this.field = options.field;
-            this.name = options.name;
+            this.field = StringUtil.firstLetterToLower(options.field);
+            this.name = StringUtil.firstLetterToLower(options.name);
         }
     }
 }
@@ -3405,10 +3509,10 @@ class InputComponent {
     ngOnInit() { }
 }
 InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: InputComponent, selector: "teta-input", inputs: { label: "label", horizontal: "horizontal", required: "required" }, host: { properties: { "class.row": "this.horizontal", "class.column": "this.column" } }, ngImport: i0, template: "<div class=\"font-caption color-text-90 align-center row nowrap overflow-hidden text-overflow-ellipsis\"\n     [class.row_6]=\"horizontal\"\n     [class.text-field_required]=\"required\"\n     *ngIf=\"label?.length > 0\">\n  {{label}}\n</div>\n<div class=\"input-container\" [class.row_6]=\"horizontal\">\n  <ng-content></ng-content>\n  <div class=\"input-message font-error-message\">\n    <ng-content select=\"message\"></ng-content>\n  </div>\n</div>\n", styles: [":host{display:flex;grid-gap:8px;flex-grow:1;flex-basis:10px}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: InputComponent, selector: "teta-input", inputs: { label: "label", horizontal: "horizontal", required: "required" }, host: { properties: { "class.row": "this.horizontal", "class.column": "this.column" } }, ngImport: i0, template: "<div class=\"font-caption color-text-90 align-center row nowrap overflow-hidden text-overflow-ellipsis\"\n     [class.row_6]=\"horizontal\"\n     [class.text-field_required]=\"required\"\n     *ngIf=\"label?.length > 0\">\n  {{label}}\n</div>\n<div class=\"input-container\" [class.row_6]=\"horizontal\">\n  <ng-content></ng-content>\n  <div class=\"input-message font-error-message\">\n    <ng-content select=\"message\"></ng-content>\n  </div>\n</div>\n", styles: [":host{display:flex;grid-gap:4px;flex-grow:1;flex-basis:10px}\n"], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"font-caption color-text-90 align-center row nowrap overflow-hidden text-overflow-ellipsis\"\n     [class.row_6]=\"horizontal\"\n     [class.text-field_required]=\"required\"\n     *ngIf=\"label?.length > 0\">\n  {{label}}\n</div>\n<div class=\"input-container\" [class.row_6]=\"horizontal\">\n  <ng-content></ng-content>\n  <div class=\"input-message font-error-message\">\n    <ng-content select=\"message\"></ng-content>\n  </div>\n</div>\n", styles: [":host{display:flex;grid-gap:8px;flex-grow:1;flex-basis:10px}\n"] }]
+            args: [{ selector: 'teta-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"font-caption color-text-90 align-center row nowrap overflow-hidden text-overflow-ellipsis\"\n     [class.row_6]=\"horizontal\"\n     [class.text-field_required]=\"required\"\n     *ngIf=\"label?.length > 0\">\n  {{label}}\n</div>\n<div class=\"input-container\" [class.row_6]=\"horizontal\">\n  <ng-content></ng-content>\n  <div class=\"input-message font-error-message\">\n    <ng-content select=\"message\"></ng-content>\n  </div>\n</div>\n", styles: [":host{display:flex;grid-gap:4px;flex-grow:1;flex-basis:10px}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { label: [{
                 type: Input
             }], horizontal: [{
@@ -3424,11 +3528,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             }] } });
 
 class NumericFilterComponent extends FilterComponentBase {
-    constructor(changeDetector) {
+    constructor(changeDetector, _config) {
         super();
         this.changeDetector = changeDetector;
+        this._config = _config;
         this.filterOptions = [];
         this.filterChanged = new EventEmitter();
+        this.locale = this._config.locale;
     }
     set state(val) {
         this.state$ = val;
@@ -3454,12 +3560,14 @@ class NumericFilterComponent extends FilterComponentBase {
         return filter;
     }
 }
-NumericFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NumericFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NumericFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: NumericFilterComponent, selector: "teta-numeric-filter", inputs: { column: "column", filterOptions: "filterOptions", state: "state" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-row padding-3\">\n  <teta-input [label]=\"'\u041E\u0442'\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [tetaOnlyNumber]=\"true\"\n           [ngModel]=\"filter.value?.greaterThan\"\n           (ngModelChange)=\"filter.value.greaterThan=$event\"/>\n  </teta-input>\n  <teta-input [label]=\"'\u0414\u043E'\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [tetaOnlyNumber]=\"true\"\n           [ngModel]=\"filter.value?.lessThan\"\n           (ngModelChange)=\"filter.value.lessThan=$event\"/>\n  </teta-input>\n</div>\n", styles: [""], components: [{ type: InputComponent, selector: "teta-input", inputs: ["label", "horizontal", "required"] }], directives: [{ type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NumericFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NumericFilterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TetaConfigService }], target: i0.ɵɵFactoryTarget.Component });
+NumericFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: NumericFilterComponent, selector: "teta-numeric-filter", inputs: { column: "column", data: "data", filterOptions: "filterOptions", state: "state" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-row padding-3\" *ngIf=\"locale | async as loc\">\n  <teta-input [label]=\"loc.from\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [tetaOnlyNumber]=\"true\"\n           [ngModel]=\"filter.value?.greaterThan\"\n           (ngModelChange)=\"filter.value.greaterThan=$event\"/>\n  </teta-input>\n  <teta-input [label]=\"loc.to\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [tetaOnlyNumber]=\"true\"\n           [ngModel]=\"filter.value?.lessThan\"\n           (ngModelChange)=\"filter.value.lessThan=$event\"/>\n  </teta-input>\n</div>\n", styles: [""], components: [{ type: InputComponent, selector: "teta-input", inputs: ["label", "horizontal", "required"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NumericFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-numeric-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-row padding-3\">\n  <teta-input [label]=\"'\u041E\u0442'\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [tetaOnlyNumber]=\"true\"\n           [ngModel]=\"filter.value?.greaterThan\"\n           (ngModelChange)=\"filter.value.greaterThan=$event\"/>\n  </teta-input>\n  <teta-input [label]=\"'\u0414\u043E'\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [tetaOnlyNumber]=\"true\"\n           [ngModel]=\"filter.value?.lessThan\"\n           (ngModelChange)=\"filter.value.lessThan=$event\"/>\n  </teta-input>\n</div>\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
+            args: [{ selector: 'teta-numeric-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-row padding-3\" *ngIf=\"locale | async as loc\">\n  <teta-input [label]=\"loc.from\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [tetaOnlyNumber]=\"true\"\n           [ngModel]=\"filter.value?.greaterThan\"\n           (ngModelChange)=\"filter.value.greaterThan=$event\"/>\n  </teta-input>\n  <teta-input [label]=\"loc.to\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [tetaOnlyNumber]=\"true\"\n           [ngModel]=\"filter.value?.lessThan\"\n           (ngModelChange)=\"filter.value.lessThan=$event\"/>\n  </teta-input>\n</div>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: TetaConfigService }]; }, propDecorators: { column: [{
+                type: Input
+            }], data: [{
                 type: Input
             }], filterOptions: [{
                 type: Input
@@ -3500,11 +3608,13 @@ class StringFilter extends FilterBase {
 }
 
 class StringFilterComponent extends FilterComponentBase {
-    constructor(changeDetector) {
+    constructor(changeDetector, _config) {
         super();
         this.changeDetector = changeDetector;
+        this._config = _config;
         this.filterOptions = [];
         this.filterChanged = new EventEmitter();
+        this.locale = this._config.locale;
     }
     set state(val) {
         this.state$ = val;
@@ -3533,12 +3643,14 @@ class StringFilterComponent extends FilterComponentBase {
         return filter;
     }
 }
-StringFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: StringFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-StringFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: StringFilterComponent, selector: "teta-string-filter", inputs: { column: "column", filterOptions: "filterOptions", state: "state" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"padding-3\">\n  <teta-input [label]=\"'\u041F\u043E\u0438\u0441\u043A'\">\n    <input type=\"text\" class=\"input\" [(ngModel)]=\"filter.value\" (blur)=\"setFilter()\" (keydown.enter)=\"setFilter()\" />\n  </teta-input>\n</div>\n\n", styles: [""], components: [{ type: InputComponent, selector: "teta-input", inputs: ["label", "horizontal", "required"] }], directives: [{ type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+StringFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: StringFilterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TetaConfigService }], target: i0.ɵɵFactoryTarget.Component });
+StringFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: StringFilterComponent, selector: "teta-string-filter", inputs: { column: "column", data: "data", filterOptions: "filterOptions", state: "state" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"padding-3\">\n  <teta-input [label]=\"(locale | async)?.search\">\n    <input type=\"text\" class=\"input\" [(ngModel)]=\"filter.value\" (blur)=\"setFilter()\" (keydown.enter)=\"setFilter()\" />\n  </teta-input>\n</div>\n\n", styles: [""], components: [{ type: InputComponent, selector: "teta-input", inputs: ["label", "horizontal", "required"] }], directives: [{ type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: StringFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-string-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"padding-3\">\n  <teta-input [label]=\"'\u041F\u043E\u0438\u0441\u043A'\">\n    <input type=\"text\" class=\"input\" [(ngModel)]=\"filter.value\" (blur)=\"setFilter()\" (keydown.enter)=\"setFilter()\" />\n  </teta-input>\n</div>\n\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
+            args: [{ selector: 'teta-string-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"padding-3\">\n  <teta-input [label]=\"(locale | async)?.search\">\n    <input type=\"text\" class=\"input\" [(ngModel)]=\"filter.value\" (blur)=\"setFilter()\" (keydown.enter)=\"setFilter()\" />\n  </teta-input>\n</div>\n\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: TetaConfigService }]; }, propDecorators: { column: [{
+                type: Input
+            }], data: [{
                 type: Input
             }], filterOptions: [{
                 type: Input
@@ -3570,11 +3682,16 @@ class TextFieldComponent {
         this.placeholder = '';
         this.disabled = false;
         this.onlyNumber = false;
-        this.tabindex = 0;
         this.textField = true;
         this.value = '';
     }
+    get tabindex() {
+        return this.disabled ? null : 0;
+    }
     onFocus() {
+        if (this.disabled) {
+            return;
+        }
         this.input.nativeElement.focus();
     }
     keyPress(event) {
@@ -3593,7 +3710,7 @@ class TextFieldComponent {
     }
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
-        this._cdr.detectChanges();
+        this._cdr.markForCheck();
     }
     writeValue(input) {
         this.value = input;
@@ -3611,7 +3728,7 @@ TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             useExisting: forwardRef(() => TextFieldComponent),
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<teta-icon *ngIf=\"leftIconName\" [name]=\"leftIconName\"></teta-icon>\n<input\n  #input\n  [ngModel]=\"value\"\n  [tetaOnlyNumber]=\"onlyNumber\"\n  (ngModelChange)=\"value = $event; onChange($event);\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n  (blur)=\"emitBlur()\"\n  (keydown)=\"keyPress($event)\"\n  autocomplete=\"off\"\n  type=\"text\"\n/>\n<teta-icon\n  *ngIf=\"value && !disabled\"\n  class=\"close-icon\"\n  [name]=\"'closeCircle'\"\n  (click)=\"value = ''; onChange('');\"\n></teta-icon>\n", styles: [""], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "<teta-icon *ngIf=\"leftIconName\" [name]=\"leftIconName\"></teta-icon>\n<input\n  #input\n  [ngModel]=\"value\"\n  [tetaOnlyNumber]=\"onlyNumber\"\n  (ngModelChange)=\"value = $event; onChange($event);\"\n  [placeholder]=\"placeholder\"\n  [disabled]=\"disabled\"\n  (blur)=\"emitBlur()\"\n  (keydown)=\"keyPress($event)\"\n  autocomplete=\"off\"\n  type=\"text\"\n/>\n<teta-icon\n  *ngIf=\"value && !disabled\"\n  class=\"close-icon\"\n  [name]=\"'closeCircle'\"\n  (click)=\"value = ''; onChange('');\"\n></teta-icon>\n", styles: [""], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-text-field', providers: [
@@ -3652,15 +3769,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             }] } });
 
 class ListFilterComponent extends FilterComponentBase {
-    constructor(changeDetector) {
+    constructor(changeDetector, _config) {
         super();
         this.changeDetector = changeDetector;
+        this._config = _config;
         this.filterOptions = [];
         this.filterChanged = new EventEmitter();
         this.search = '';
+        this.locale = this._config.locale;
     }
     get visibleOptions() {
-        return this.filterOptions?.filter((_) => _.name?.toString().indexOf(this.search) >= 0);
+        return this.filterOptions?.filter((option) => {
+            return option.name?.toString().indexOf(this.search) >= 0;
+        });
     }
     set state(val) {
         this.state$ = val;
@@ -3670,7 +3791,8 @@ class ListFilterComponent extends FilterComponentBase {
     get state() {
         return this.state$;
     }
-    ngOnInit() { }
+    ngOnInit() {
+    }
     all() {
         if (!this.filter?.value || this.filter?.value?.length === 0) {
             return false;
@@ -3713,12 +3835,14 @@ class ListFilterComponent extends FilterComponentBase {
         return filter;
     }
 }
-ListFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ListFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ListFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ListFilterComponent, selector: "teta-list-filter", inputs: { column: "column", filterOptions: "filterOptions", state: "state" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"padding-2\">\n  <teta-text-field [(ngModel)]=\"search\"></teta-text-field>\n</div>\n<div class=\"list padding-v-2 scrollable\">\n  <div class=\"list-item\">\n    <teta-checkbox [binary]=\"true\"\n                   [allowNull]=\"true\"\n                   [ngModel]=\"all()\"\n                   (ngModelChange)=\"setAll($event)\">\u0412\u0441\u0435\n    </teta-checkbox>\n  </div>\n  <div class=\"list-divider\"></div>\n  <div class=\"list-item\" *ngFor=\"let option of visibleOptions\">\n    <teta-checkbox [ngModel]=\"filter.value\"\n                   (ngModelChange)=\"setFilter($event)\"\n                   [value]=\"option.id\"\n                   [binary]=\"false\">\n      {{option.name}}\n    </teta-checkbox>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-height:0;min-width:0}\n"], components: [{ type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "invalid"] }, { type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "allowNull"] }], directives: [{ 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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ListFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ListFilterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TetaConfigService }], target: i0.ɵɵFactoryTarget.Component });
+ListFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ListFilterComponent, selector: "teta-list-filter", inputs: { column: "column", data: "data", filterOptions: "filterOptions", state: "state" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"padding-2\">\n  <teta-text-field [(ngModel)]=\"search\"></teta-text-field>\n</div>\n<div class=\"list padding-v-2 scrollable\">\n  <div class=\"list-item\">\n    <teta-checkbox [binary]=\"true\"\n                   [allowNull]=\"true\"\n                   [ngModel]=\"all()\"\n                   (ngModelChange)=\"setAll($event)\">\n      {{(locale | async)?.all}}\n    </teta-checkbox>\n  </div>\n  <div class=\"list-divider\"></div>\n  <div class=\"list-item\" *ngFor=\"let option of visibleOptions\">\n    <teta-checkbox [ngModel]=\"filter.value\"\n                   (ngModelChange)=\"setFilter($event)\"\n                   [value]=\"option.id\"\n                   [binary]=\"false\">\n      {{option.name}}\n    </teta-checkbox>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-height:0;min-width:0}\n"], components: [{ type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "invalid"] }, { type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "allowNull"] }], directives: [{ type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ListFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-list-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"padding-2\">\n  <teta-text-field [(ngModel)]=\"search\"></teta-text-field>\n</div>\n<div class=\"list padding-v-2 scrollable\">\n  <div class=\"list-item\">\n    <teta-checkbox [binary]=\"true\"\n                   [allowNull]=\"true\"\n                   [ngModel]=\"all()\"\n                   (ngModelChange)=\"setAll($event)\">\u0412\u0441\u0435\n    </teta-checkbox>\n  </div>\n  <div class=\"list-divider\"></div>\n  <div class=\"list-item\" *ngFor=\"let option of visibleOptions\">\n    <teta-checkbox [ngModel]=\"filter.value\"\n                   (ngModelChange)=\"setFilter($event)\"\n                   [value]=\"option.id\"\n                   [binary]=\"false\">\n      {{option.name}}\n    </teta-checkbox>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-height:0;min-width:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
+            args: [{ selector: 'teta-list-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"padding-2\">\n  <teta-text-field [(ngModel)]=\"search\"></teta-text-field>\n</div>\n<div class=\"list padding-v-2 scrollable\">\n  <div class=\"list-item\">\n    <teta-checkbox [binary]=\"true\"\n                   [allowNull]=\"true\"\n                   [ngModel]=\"all()\"\n                   (ngModelChange)=\"setAll($event)\">\n      {{(locale | async)?.all}}\n    </teta-checkbox>\n  </div>\n  <div class=\"list-divider\"></div>\n  <div class=\"list-item\" *ngFor=\"let option of visibleOptions\">\n    <teta-checkbox [ngModel]=\"filter.value\"\n                   (ngModelChange)=\"setFilter($event)\"\n                   [value]=\"option.id\"\n                   [binary]=\"false\">\n      {{option.name}}\n    </teta-checkbox>\n  </div>\n</div>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-height:0;min-width:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: TetaConfigService }]; }, propDecorators: { column: [{
+                type: Input
+            }], data: [{
                 type: Input
             }], filterOptions: [{
                 type: Input
@@ -3747,11 +3871,13 @@ class DateFilter extends FilterBase {
 }
 
 class DateFilterComponent extends FilterComponentBase {
-    constructor(changeDetector) {
+    constructor(changeDetector, _config) {
         super();
         this.changeDetector = changeDetector;
+        this._config = _config;
         this.filterOptions = [];
         this.filterChanged = new EventEmitter();
+        this.locale = this._config.locale;
     }
     set state(val) {
         this.state$ = val;
@@ -3777,12 +3903,14 @@ class DateFilterComponent extends FilterComponentBase {
         return filter;
     }
 }
-DateFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DateFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DateFilterComponent, selector: "teta-date-filter", inputs: { column: "column", filterOptions: "filterOptions", state: "state" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-row padding-3\">\n  <teta-input [label]=\"'\u041E\u0442'\">\n    <teta-date-picker style=\"width: 110px\"\n                      [ngModel]=\"filter.value?.greaterThan\"\n                      [appendToBody]=\"true\"\n                      (ngModelChange)=\"filter.value.greaterThan=$event\"></teta-date-picker>\n  </teta-input>\n  <teta-input [label]=\"'\u0414\u043E'\">\n    <teta-date-picker style=\"width: 110px\"\n                      [ngModel]=\"filter.value?.lessThan\"\n                      [appendToBody]=\"true\"\n                      (ngModelChange)=\"filter.value.lessThan=$event\"></teta-date-picker>\n  </teta-input>\n</div>\n", styles: [""], components: [{ type: InputComponent, selector: "teta-input", inputs: ["label", "horizontal", "required"] }, { type: DatePickerComponent, selector: "teta-date-picker", inputs: ["disabled", "invalid", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "minYearDate", "maxYearDate", "align", "verticalAlign", "appendToBody", "showTime", "format"] }], directives: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DateFilterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TetaConfigService }], target: i0.ɵɵFactoryTarget.Component });
+DateFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DateFilterComponent, selector: "teta-date-filter", inputs: { column: "column", data: "data", filterOptions: "filterOptions", state: "state" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-row padding-3\" *ngIf=\"locale | async as loc\">\n  <teta-input [label]=\"loc.from\">\n    <teta-date-picker style=\"width: 110px\"\n                      [ngModel]=\"filter.value?.greaterThan\"\n                      [appendToBody]=\"true\"\n                      (ngModelChange)=\"filter.value.greaterThan=$event\"></teta-date-picker>\n  </teta-input>\n  <teta-input [label]=\"loc.to\">\n    <teta-date-picker style=\"width: 110px\"\n                      [ngModel]=\"filter.value?.lessThan\"\n                      [appendToBody]=\"true\"\n                      (ngModelChange)=\"filter.value.lessThan=$event\"></teta-date-picker>\n  </teta-input>\n</div>\n", styles: [""], components: [{ type: InputComponent, selector: "teta-input", inputs: ["label", "horizontal", "required"] }, { type: DatePickerComponent, selector: "teta-date-picker", inputs: ["disabled", "invalid", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "minYearDate", "maxYearDate", "align", "verticalAlign", "appendToBody", "allowNull", "backdrop", "showTime", "format"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DateFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-row padding-3\">\n  <teta-input [label]=\"'\u041E\u0442'\">\n    <teta-date-picker style=\"width: 110px\"\n                      [ngModel]=\"filter.value?.greaterThan\"\n                      [appendToBody]=\"true\"\n                      (ngModelChange)=\"filter.value.greaterThan=$event\"></teta-date-picker>\n  </teta-input>\n  <teta-input [label]=\"'\u0414\u043E'\">\n    <teta-date-picker style=\"width: 110px\"\n                      [ngModel]=\"filter.value?.lessThan\"\n                      [appendToBody]=\"true\"\n                      (ngModelChange)=\"filter.value.lessThan=$event\"></teta-date-picker>\n  </teta-input>\n</div>\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
+            args: [{ selector: 'teta-date-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-row padding-3\" *ngIf=\"locale | async as loc\">\n  <teta-input [label]=\"loc.from\">\n    <teta-date-picker style=\"width: 110px\"\n                      [ngModel]=\"filter.value?.greaterThan\"\n                      [appendToBody]=\"true\"\n                      (ngModelChange)=\"filter.value.greaterThan=$event\"></teta-date-picker>\n  </teta-input>\n  <teta-input [label]=\"loc.to\">\n    <teta-date-picker style=\"width: 110px\"\n                      [ngModel]=\"filter.value?.lessThan\"\n                      [appendToBody]=\"true\"\n                      (ngModelChange)=\"filter.value.lessThan=$event\"></teta-date-picker>\n  </teta-input>\n</div>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: TetaConfigService }]; }, propDecorators: { column: [{
+                type: Input
+            }], data: [{
                 type: Input
             }], filterOptions: [{
                 type: Input
@@ -4083,7 +4211,7 @@ class RadioButtonComponent {
     }
 }
 RadioButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: RadioButtonComponent, deps: [{ token: i0.ViewContainerRef }, { token: RadioComponent, host: true }], target: i0.ɵɵFactoryTarget.Component });
-RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: RadioButtonComponent, selector: "teta-radio-button", inputs: { checked: "checked", disabled: "disabled", value: "value" }, host: { listeners: { "click": "hostClick()" }, properties: { "class.radio-button": "this.radioButton", "class.radio-button-selected": "this.selected", "class.radio-button-checked": "this.checked", "class.radio-button_disabled": "this.disabled" } }, ngImport: i0, template: "<div class=\"radio-button-icon\">\n  <div *ngIf=\"checked\" class=\"radio-button-small-icon\"></div>\n</div>\n<ng-content></ng-content>\n", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+RadioButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: RadioButtonComponent, selector: "teta-radio-button", inputs: { checked: "checked", disabled: "disabled", value: "value" }, host: { listeners: { "click": "hostClick()" }, properties: { "class.radio-button": "this.radioButton", "class.radio-button-selected": "this.selected", "class.radio-button-checked": "this.checked", "class.radio-button_disabled": "this.disabled" } }, ngImport: i0, template: "<div class=\"radio-button-icon\">\n  <div *ngIf=\"checked\" class=\"radio-button-small-icon\"></div>\n</div>\n<ng-content></ng-content>\n", styles: [""], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: RadioButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-radio-button', encapsulation: ViewEncapsulation.None, template: "<div class=\"radio-button-icon\">\n  <div *ngIf=\"checked\" class=\"radio-button-small-icon\"></div>\n</div>\n<ng-content></ng-content>\n", styles: [""] }]
@@ -4144,12 +4272,14 @@ class BooleanFilterComponent extends FilterComponentBase {
     }
 }
 BooleanFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BooleanFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BooleanFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: BooleanFilterComponent, selector: "teta-boolean-filter", inputs: { column: "column", filterOptions: "filterOptions", state: "state" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"padding-3\">\n  <teta-radio [ngModel]=\"filter.value\" (ngModelChange)=\"setFilter()\">\n    <teta-radio-button [value]=\"null\">null</teta-radio-button>\n    <teta-radio-button [value]=\"true\">true</teta-radio-button>\n    <teta-radio-button [value]=\"false\">false</teta-radio-button>\n  </teta-radio>\n</div>\n", styles: [""], components: [{ type: RadioComponent, selector: "teta-radio", inputs: ["inline", "checkChangeSelected", "disabled", "value"] }, { type: RadioButtonComponent, selector: "teta-radio-button", inputs: ["checked", "disabled", "value"] }], directives: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BooleanFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: BooleanFilterComponent, selector: "teta-boolean-filter", inputs: { column: "column", data: "data", filterOptions: "filterOptions", state: "state" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"padding-3\">\n  <teta-radio [ngModel]=\"filter.value\" (ngModelChange)=\"setFilter()\">\n    <teta-radio-button [value]=\"null\">null</teta-radio-button>\n    <teta-radio-button [value]=\"true\">true</teta-radio-button>\n    <teta-radio-button [value]=\"false\">false</teta-radio-button>\n  </teta-radio>\n</div>\n", styles: [""], components: [{ type: RadioComponent, selector: "teta-radio", inputs: ["inline", "checkChangeSelected", "disabled", "value"] }, { type: RadioButtonComponent, selector: "teta-radio-button", inputs: ["checked", "disabled", "value"] }], directives: [{ type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BooleanFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-boolean-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"padding-3\">\n  <teta-radio [ngModel]=\"filter.value\" (ngModelChange)=\"setFilter()\">\n    <teta-radio-button [value]=\"null\">null</teta-radio-button>\n    <teta-radio-button [value]=\"true\">true</teta-radio-button>\n    <teta-radio-button [value]=\"false\">false</teta-radio-button>\n  </teta-radio>\n</div>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
                 type: Input
+            }], data: [{
+                type: Input
             }], filterOptions: [{
                 type: Input
             }], filterChanged: [{
@@ -4189,6 +4319,13 @@ class FilterHostComponent {
             this._componentRef.injector.get(ChangeDetectorRef).detectChanges();
         }
     }
+    set data(data) {
+        this._data = data;
+        if (this._init) {
+            this._componentRef.instance.data = this._data;
+            this._componentRef.injector.get(ChangeDetectorRef).detectChanges();
+        }
+    }
     set filterOptions(val) {
         this._filterOptions = val;
         if (this._init) {
@@ -4204,6 +4341,7 @@ class FilterHostComponent {
             this.viewContainerRef.createComponent(this._column.filterComponent);
         this._componentRef.instance.column = this._column;
         this._componentRef.instance.state = this._state;
+        this._componentRef.instance.data = this._data;
         this._componentRef.instance.filterOptions = this._filterOptions;
         this._componentRef.injector.get(ChangeDetectorRef).detectChanges();
         this._init = true;
@@ -4218,7 +4356,7 @@ class FilterHostComponent {
     }
 }
 FilterHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FilterHostComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-FilterHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: FilterHostComponent, selector: "teta-filter-host", inputs: { column: "column", state: "state", filterOptions: "filterOptions" }, outputs: { filterChanged: "filterChanged" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FilterHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: FilterHostComponent, selector: "teta-filter-host", inputs: { column: "column", state: "state", data: "data", filterOptions: "filterOptions" }, outputs: { filterChanged: "filterChanged" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FilterHostComponent, decorators: [{
             type: Component,
             args: [{
@@ -4231,6 +4369,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 type: Input
             }], state: [{
                 type: Input
+            }], data: [{
+                type: Input
             }], filterOptions: [{
                 type: Input
             }], filterChanged: [{
@@ -4347,9 +4487,13 @@ class SelectComponent {
         this.allowNull = true;
         this.open = false;
         this.selectClass = true;
-        this.tabindex = 0;
-        this.onChange = () => { };
-        this.onTouched = () => { };
+        this.onChange = () => {
+        };
+        this.onTouched = () => {
+        };
+    }
+    get tabindex() {
+        return this.disabled ? null : 0;
     }
     get isDisabled() {
         return this.disabled;
@@ -4452,7 +4596,8 @@ class SelectComponent {
     focus() {
         this._elementRef.nativeElement.focus();
     }
-    ngOnInit() { }
+    ngOnInit() {
+    }
     writeValue(value) {
         if (this.multiple) {
             this.value =
@@ -4477,7 +4622,8 @@ class SelectComponent {
         this.disabled = isDisabled;
         this._cdr.markForCheck();
     }
-    getSelectedValue() { }
+    getSelectedValue() {
+    }
 }
 SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
 SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SelectComponent, selector: "teta-select", inputs: { multiple: "multiple", options: "options", invalid: "invalid", align: "align", verticalAlign: "verticalAlign", autoClose: "autoClose", autoCloseIgnore: "autoCloseIgnore", disabled: "disabled", itemSize: "itemSize", virtual: "virtual", icon: "icon", placeholder: "placeholder", appendToBody: "appendToBody", allowNull: "allowNull", valueRef: "valueRef", textRef: "textRef", searchRef: "searchRef" }, host: { properties: { "class.select_multiple": "this.multiple", "class.select_open": "this.open", "class.select": "this.selectClass", "tabindex": "this.tabindex", "class.select_disabled": "this.isDisabled" } }, providers: [
@@ -4486,7 +4632,7 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             useExisting: forwardRef(() => SelectComponent),
             multi: true,
         },
-    ], queries: [{ propertyName: "optionDirective", first: true, predicate: SelectOptionDirective, descendants: true, static: true }, { propertyName: "valueDirective", first: true, predicate: SelectValueDirective, descendants: true, static: true }], ngImport: i0, template: "<teta-dropdown [align]=\"align\"\n               [verticalAlign]=\"verticalAlign\"\n               [autoClose]=\"autoClose\"\n               [autoCloseIgnore]=\"autoCloseIgnore\"\n               [(open)]=\"open\"\n               [appendToBody]=\"appendToBody\"\n               [disabled]=\"disabled\"\n               class=\"row row_auto\">\n  <div tetaDropdownHead\n       class=\"row row_auto select-head\"\n       [class.select-head_invalid]=\"invalid\">\n    <div class=\"row_auto flex align-center\">\n      <teta-icon *ngIf=\"icon\" [name]=\"icon\" class=\"margin-right-1\"></teta-icon>\n      <span class=\"placeholder\" *ngIf=\"(value == null || value?.length === 0) && placeholder\">\n          {{placeholder}}\n        </span>\n      <ng-container\n        *ngTemplateOutlet=\"valueDirective ? valueDirective.template : valueDefault; context: {$implicit: value, value: value}\"></ng-container>\n    </div>\n    <teta-icon [name]=\"'arrowDownSmall'\"></teta-icon>\n  </div>\n  <div *ngIf=\"options?.length\" tetaDropdownContent class=\"select-list scrollable row_auto\" (click)=\"$event.preventDefault()\">\n    <ng-container *ngIf=\"searchRef\">\n      <div class=\"select-search\">\n        <teta-text-field [ngModel]=\"searchText\"\n                         (ngModelChange)=\"search($event)\"\n                         [placeholder]=\"'\u041F\u043E\u0438\u0441\u043A'\"\n                         [leftIconName]=\"'search'\"></teta-text-field>\n      </div>\n      <div class=\"list-divider\"></div>\n    </ng-container>\n    <ng-container *ngIf=\"!multiple && allowNull\">\n      <div class=\"list-item list-item_interactive\"\n           (click)=\"clear()\"\n           [class.list-item_active]=\"value==null\">\n        \u041D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E\n      </div>\n      <div class=\"list-divider\"></div>\n    </ng-container>\n    <ng-container *ngIf=\"!virtual\">\n      <div class=\"list-item list-item_interactive\"\n           *ngFor=\"let option of visibleOptions\"\n           [class.select-list-item_active]=\"itemSelected(option) && multiple\"\n           [class.list-item_active]=\"itemSelected(option)\"\n           [class.select-list-item]=\"multiple\"\n           (click)=\"clickOption(option, $event)\">\n        <teta-icon *ngIf=\"itemSelected(option) && multiple\" [name]=\"'tick'\" [palette]=\"'primary'\"></teta-icon>\n        <span [tetaHighlight]=\"searchText\">\n          <ng-container\n            *ngTemplateOutlet=\"optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}\">\n          </ng-container>\n        </span>\n      </div>\n    </ng-container>\n    <cdk-virtual-scroll-viewport *ngIf=\"virtual\"\n                                 [itemSize]=\"40\"\n                                 minBufferPx=\"200\"\n                                 maxBufferPx=\"600\">\n      <div class=\"select-list-item select-list-item_interactive\"\n           *cdkVirtualFor=\"let option of visibleOptions; templateCacheSize: 0;\"\n           [class.select-list-item_active]=\"itemSelected(option)\"\n           [tetaHighlight]=\"searchText\"\n           (click)=\"clickOption(option, $event)\">\n        <teta-icon *ngIf=\"itemSelected(option)\" [name]=\"'tick'\" [palette]=\"'primary'\" class=\"margin-left-2\"></teta-icon>\n        <div [tetaHighlight]=\"searchText\">\n          <ng-container\n            *ngTemplateOutlet=\"optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}\">\n          </ng-container>\n        </div>\n      </div>\n    </cdk-virtual-scroll-viewport>\n    <div class=\"row row_auto select-chip-field flex-wrap\" *ngIf=\"multiple && value?.length\">\n      <div *ngFor=\"let item of value\" class=\"chip\">\n        <teta-icon [name]=\"'closeCircle'\" (click)=\"removeItemClick(item, $event)\"></teta-icon>\n        {{getText(item)}}\n      </div>\n    </div>\n  </div>\n</teta-dropdown>\n\n<ng-template #optionDefault let-option>\n  {{getText(option)}}\n</ng-template>\n<ng-template #valueDefault let-value>\n  <div class=\"row_auto overflow-hidden text-overflow-ellipsis\" *ngIf=\"multiple\">\n    <ng-container\n      *ngFor=\"let item of value; let i = index\">{{getText(item) + (value.length === i + 1 ? '' : ', ') }}</ng-container>\n  </div>\n  <ng-container *ngIf=\"!multiple\">\n    <span class=\"row row_auto  overflow-hidden text-overflow-ellipsis\">{{getText(value)}}</span>\n  </ng-container>\n</ng-template>\n", styles: [""], components: [{ type: DropdownComponent, selector: "teta-dropdown" }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "invalid"] }, { type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], directives: [{ type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { 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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: HighlightDirective, selector: "[tetaHighlight]", inputs: ["tetaHighlight"] }, { type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "optionDirective", first: true, predicate: SelectOptionDirective, descendants: true, static: true }, { propertyName: "valueDirective", first: true, predicate: SelectValueDirective, descendants: true, static: true }], ngImport: i0, template: "<teta-dropdown [align]=\"align\"\n               [verticalAlign]=\"verticalAlign\"\n               [autoClose]=\"autoClose\"\n               [autoCloseIgnore]=\"autoCloseIgnore\"\n               [(open)]=\"open\"\n               [appendToBody]=\"appendToBody\"\n               [disabled]=\"disabled\"\n               class=\"row row_auto\">\n  <div tetaDropdownHead\n       class=\"row row_auto select-head\"\n       [class.select-head_invalid]=\"invalid\">\n    <div class=\"row_auto flex align-center\">\n      <teta-icon *ngIf=\"icon\" [name]=\"icon\" class=\"margin-right-1\"></teta-icon>\n      <span class=\"placeholder\" *ngIf=\"(value == null || value?.length === 0) && placeholder\">\n          {{placeholder}}\n        </span>\n      <ng-container\n        *ngTemplateOutlet=\"valueDirective ? valueDirective.template : valueDefault; context: {$implicit: value, value: value}\"></ng-container>\n    </div>\n    <teta-icon [name]=\"'arrowDownSmall'\"></teta-icon>\n  </div>\n  <div *ngIf=\"options?.length\" tetaDropdownContent class=\"select-list scrollable row_auto\" (click)=\"$event.preventDefault()\">\n    <ng-container *ngIf=\"searchRef\">\n      <div class=\"select-search\">\n        <teta-text-field [ngModel]=\"searchText\"\n                         (ngModelChange)=\"search($event)\"\n                         [placeholder]=\"'\u041F\u043E\u0438\u0441\u043A'\"\n                         [leftIconName]=\"'search'\"></teta-text-field>\n      </div>\n      <div class=\"list-divider\"></div>\n    </ng-container>\n    <ng-container *ngIf=\"!multiple && allowNull\">\n      <div class=\"list-item list-item_interactive\"\n           (click)=\"clear()\"\n           [class.list-item_active]=\"value==null\">\n        \u041D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E\n      </div>\n      <div class=\"list-divider\"></div>\n    </ng-container>\n    <ng-container *ngIf=\"!virtual\">\n      <div class=\"list-item list-item_interactive\"\n           *ngFor=\"let option of visibleOptions\"\n           [class.select-list-item_active]=\"itemSelected(option) && multiple\"\n           [class.list-item_active]=\"itemSelected(option)\"\n           [class.select-list-item]=\"multiple\"\n           (click)=\"clickOption(option, $event)\">\n        <teta-icon *ngIf=\"itemSelected(option) && multiple\" [name]=\"'tick'\" [palette]=\"'primary'\"></teta-icon>\n        <span [tetaHighlight]=\"searchText\">\n          <ng-container\n            *ngTemplateOutlet=\"optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}\">\n          </ng-container>\n        </span>\n      </div>\n    </ng-container>\n    <cdk-virtual-scroll-viewport *ngIf=\"virtual\"\n                                 [itemSize]=\"40\"\n                                 minBufferPx=\"200\"\n                                 maxBufferPx=\"600\">\n      <div class=\"select-list-item select-list-item_interactive\"\n           *cdkVirtualFor=\"let option of visibleOptions; templateCacheSize: 0;\"\n           [class.select-list-item_active]=\"itemSelected(option)\"\n           [tetaHighlight]=\"searchText\"\n           (click)=\"clickOption(option, $event)\">\n        <teta-icon *ngIf=\"itemSelected(option)\" [name]=\"'tick'\" [palette]=\"'primary'\" class=\"margin-left-2\"></teta-icon>\n        <div [tetaHighlight]=\"searchText\">\n          <ng-container\n            *ngTemplateOutlet=\"optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}\">\n          </ng-container>\n        </div>\n      </div>\n    </cdk-virtual-scroll-viewport>\n    <div class=\"row row_auto select-chip-field flex-wrap\" *ngIf=\"multiple && value?.length\">\n      <div *ngFor=\"let item of value\" class=\"chip\">\n        <teta-icon [name]=\"'closeCircle'\" (click)=\"removeItemClick(item, $event)\"></teta-icon>\n        {{getText(item)}}\n      </div>\n    </div>\n  </div>\n</teta-dropdown>\n\n<ng-template #optionDefault let-option>\n  {{getText(option)}}\n</ng-template>\n<ng-template #valueDefault let-value>\n  <div class=\"row_auto overflow-hidden text-overflow-ellipsis\" *ngIf=\"multiple\">\n    <ng-container\n      *ngFor=\"let item of value; let i = index\">{{getText(item) + (value.length === i + 1 ? '' : ', ') }}</ng-container>\n  </div>\n  <ng-container *ngIf=\"!multiple\">\n    <span class=\"row row_auto  overflow-hidden text-overflow-ellipsis\">{{getText(value)}}</span>\n  </ng-container>\n</ng-template>\n", styles: [""], components: [{ type: DropdownComponent, selector: "teta-dropdown" }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "invalid"] }, { type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], directives: [{ type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: HighlightDirective, selector: "[tetaHighlight]", inputs: ["tetaHighlight"] }, { type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-select', providers: [
@@ -4654,8 +4800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
 class FilterModule {
 }
 FilterModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FilterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FilterModule, declarations: [FilterPanelComponent,
-        NumericFilterComponent,
+FilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FilterModule, declarations: [NumericFilterComponent,
         StringFilterComponent,
         ListFilterComponent,
         DateFilterComponent,
@@ -4667,8 +4812,7 @@ FilterModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         RadioModule,
         InputModule,
         CheckboxModule,
-        OnlyNumberModule], exports: [FilterPanelComponent,
-        NumericFilterComponent,
+        OnlyNumberModule], exports: [NumericFilterComponent,
         StringFilterComponent,
         ListFilterComponent,
         DateFilterComponent,
@@ -4688,7 +4832,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             type: NgModule,
             args: [{
                     declarations: [
-                        FilterPanelComponent,
                         NumericFilterComponent,
                         StringFilterComponent,
                         ListFilterComponent,
@@ -4697,7 +4840,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                         BooleanFilterComponent,
                     ],
                     exports: [
-                        FilterPanelComponent,
                         NumericFilterComponent,
                         StringFilterComponent,
                         ListFilterComponent,
@@ -4738,8 +4880,8 @@ class FilterItem {
         this.hint = options?.hint ?? '';
         this.sortable = options?.sortable ?? true;
         this.filterable = options?.filterable ?? true;
-        this.sortField = options?.sortField ?? this.name;
-        this.filterField = options?.filterField ?? this.name;
+        this.sortField = StringUtil.firstLetterToLower(options?.sortField ?? this.name);
+        this.filterField = StringUtil.firstLetterToLower(options?.filterField ?? this.name);
         this.filterType = options?.filterType;
         this.stringFilterType = options?.stringFilterType ?? StringFilterType.Contains;
         this.listFilterType = options?.listFilterType ?? ListFilterType.None;
@@ -4755,7 +4897,7 @@ class SortParam {
      */
     constructor(options) {
         if (options) {
-            this.field = options.field || this.field;
+            this.field = StringUtil.firstLetterToLower(options.field || this.field);
             this.asc = options.asc || false;
             this.order = options.order || this.order;
         }
@@ -4976,7 +5118,7 @@ class MessageComponent {
     }
 }
 MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: MessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: MessageComponent, selector: "teta-message", inputs: { message: "message", index: "index", class: "class" }, outputs: { closed: "closed" }, host: { listeners: { "mouseleave": "init()", "mouseenter": "reset()" }, properties: { "class": "this.getClass" } }, ngImport: i0, template: "<div class=\"row align-center justify-content-between\">\n  <div class=\"font-title-3 padding-left-1\">\n    {{message.title}}\n  </div>\n  <button teta-button\n          [square]=\"true\"\n          [palette]=\"message.palette\"\n          [view]=\"'primary'\"\n          (click)=\"closeMe($event)\">\n    <teta-icon [name]=\"'closeBig'\"></teta-icon>\n  </button>\n</div>\n<div class=\"font-body-3 padding-v-1\" *ngIf=\"!message.template && message.text\">\n  {{message.text}}\n</div>\n<ng-container *ngIf=\"message.template\">\n  <ng-container *ngTemplateOutlet=\"message.template; context: {$implicit: message}\"></ng-container>\n</ng-container>\n", styles: [""], components: [{ type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: MessageComponent, selector: "teta-message", inputs: { message: "message", index: "index", class: "class" }, outputs: { closed: "closed" }, host: { listeners: { "mouseleave": "init()", "mouseenter": "reset()" }, properties: { "class": "this.getClass" } }, ngImport: i0, template: "<div class=\"row align-center justify-content-between\">\n  <div class=\"font-title-3 padding-left-1\">\n    {{message.title}}\n  </div>\n  <button teta-button\n          [square]=\"true\"\n          [palette]=\"message.palette\"\n          [view]=\"'primary'\"\n          (click)=\"closeMe($event)\">\n    <teta-icon [name]=\"'closeBig'\"></teta-icon>\n  </button>\n</div>\n<div class=\"font-body-3 padding-v-1\" *ngIf=\"!message.template && message.text\">\n  {{message.text}}\n</div>\n<ng-container *ngIf=\"message.template\">\n  <ng-container *ngTemplateOutlet=\"message.template; context: {$implicit: message}\"></ng-container>\n</ng-container>\n", styles: [""], components: [{ type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-message', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row align-center justify-content-between\">\n  <div class=\"font-title-3 padding-left-1\">\n    {{message.title}}\n  </div>\n  <button teta-button\n          [square]=\"true\"\n          [palette]=\"message.palette\"\n          [view]=\"'primary'\"\n          (click)=\"closeMe($event)\">\n    <teta-icon [name]=\"'closeBig'\"></teta-icon>\n  </button>\n</div>\n<div class=\"font-body-3 padding-v-1\" *ngIf=\"!message.template && message.text\">\n  {{message.text}}\n</div>\n<ng-container *ngIf=\"message.template\">\n  <ng-container *ngTemplateOutlet=\"message.template; context: {$implicit: message}\"></ng-container>\n</ng-container>\n", styles: [""] }]
@@ -5062,7 +5204,7 @@ class MessageHostComponent {
     }
 }
 MessageHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: MessageHostComponent, deps: [{ token: MessageService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MessageHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: MessageHostComponent, selector: "teta-message-host", inputs: { class: "class", align: "align", verticalAlign: "verticalAlign" }, outputs: { itemClose: "itemClose" }, host: { properties: { "class": "this.getClass" } }, ngImport: i0, template: "<teta-message\n  *ngFor=\"let message of messages; let i=index\"\n  (closed)=\"closedItem($event)\"\n  [message]=\"message\"\n  [index]=\"i\">\n</teta-message>\n", styles: [""], components: [{ type: MessageComponent, selector: "teta-message", inputs: ["message", "index", "class"], outputs: ["closed"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MessageHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: MessageHostComponent, selector: "teta-message-host", inputs: { class: "class", align: "align", verticalAlign: "verticalAlign" }, outputs: { itemClose: "itemClose" }, host: { properties: { "class": "this.getClass" } }, ngImport: i0, template: "<teta-message\n  *ngFor=\"let message of messages; let i=index\"\n  (closed)=\"closedItem($event)\"\n  [message]=\"message\"\n  [index]=\"i\">\n</teta-message>\n", styles: [""], components: [{ type: MessageComponent, selector: "teta-message", inputs: ["message", "index", "class"], outputs: ["closed"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: MessageHostComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-message-host', changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-message\n  *ngFor=\"let message of messages; let i=index\"\n  (closed)=\"closedItem($event)\"\n  [message]=\"message\"\n  [index]=\"i\">\n</teta-message>\n", styles: [""] }]
@@ -5243,7 +5385,7 @@ class DialogComponent {
     ngOnInit() { }
 }
 DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DialogComponent, deps: [{ token: CurrentModal }, { token: DynamicData }], target: i0.ɵɵFactoryTarget.Component });
-DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DialogComponent, selector: "teta-dialog", inputs: { message: "message", buttonText: "buttonText", buttonIcon: "buttonIcon", buttonPalette: "buttonPalette", showCancelButton: "showCancelButton" }, ngImport: i0, template: "<div class=\"padding-2 font-body-2\">\n  {{message | transloco}}\n</div>\n<teta-toolbar class=\"justify-content-end\">\n  <button teta-button\n          *ngIf=\"showCancelButton\"\n          (click)=\"cancel()\"\n          [palette]=\"'text'\"\n          [view]=\"'ghost'\">\n    {{'common.cancel' | transloco}}\n  </button>\n\n  <button teta-button\n          (click)=\"ok()\"\n          [square]=\"!buttonText?.length\"\n          [palette]=\"buttonPalette\">\n    <teta-icon *ngIf=\"buttonIcon\" [name]=\"buttonIcon\"></teta-icon>\n    <ng-container *ngIf=\"buttonText?.length > 0\">{{buttonText | transloco}}</ng-container>\n  </button>\n</teta-toolbar>\n", styles: [":host{display:flex;flex-direction:column;width:240px}\n"], components: [{ type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "transloco": i1$1.TranslocoPipe } });
+DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DialogComponent, selector: "teta-dialog", inputs: { message: "message", buttonText: "buttonText", buttonIcon: "buttonIcon", buttonPalette: "buttonPalette", showCancelButton: "showCancelButton" }, ngImport: i0, template: "<div class=\"padding-2 font-body-2\">\n  {{message | transloco}}\n</div>\n<teta-toolbar class=\"justify-content-end\">\n  <button teta-button\n          *ngIf=\"showCancelButton\"\n          (click)=\"cancel()\"\n          [palette]=\"'text'\"\n          [view]=\"'ghost'\">\n    {{'common.cancel' | transloco}}\n  </button>\n\n  <button teta-button\n          (click)=\"ok()\"\n          [square]=\"!buttonText?.length\"\n          [palette]=\"buttonPalette\">\n    <teta-icon *ngIf=\"buttonIcon\" [name]=\"buttonIcon\"></teta-icon>\n    <ng-container *ngIf=\"buttonText?.length > 0\">{{buttonText | transloco}}</ng-container>\n  </button>\n</teta-toolbar>\n", styles: [":host{display:flex;flex-direction:column;width:240px}\n"], components: [{ type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "transloco": i1$1.TranslocoPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-dialog', template: "<div class=\"padding-2 font-body-2\">\n  {{message | transloco}}\n</div>\n<teta-toolbar class=\"justify-content-end\">\n  <button teta-button\n          *ngIf=\"showCancelButton\"\n          (click)=\"cancel()\"\n          [palette]=\"'text'\"\n          [view]=\"'ghost'\">\n    {{'common.cancel' | transloco}}\n  </button>\n\n  <button teta-button\n          (click)=\"ok()\"\n          [square]=\"!buttonText?.length\"\n          [palette]=\"buttonPalette\">\n    <teta-icon *ngIf=\"buttonIcon\" [name]=\"buttonIcon\"></teta-icon>\n    <ng-container *ngIf=\"buttonText?.length > 0\">{{buttonText | transloco}}</ng-container>\n  </button>\n</teta-toolbar>\n", styles: [":host{display:flex;flex-direction:column;width:240px}\n"] }]
@@ -5983,7 +6125,7 @@ class ToggleComponent {
     }
 }
 ToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ToggleComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ToggleComponent, selector: "teta-toggle", inputs: { palette: "palette", noLabel: "noLabel", disabled: "disabled" }, host: { listeners: { "click": "changeValue()" }, properties: { "attr.tabindex": "this.tabindex", "class.toggle": "this.toggleClass", "class.toggle_disabled": "this.disabled" } }, providers: [TOGGLE_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<span class=\"font-body-3 row_auto\" *ngIf=\"!noLabel\">\n  <ng-content></ng-content>\n</span>\n<div class=\"toggle-button\" [class.toggle-button-on]=\"model\" [ngClass]=\"paletteClass\">\n  <div class=\"toggle-button-circle\"></div>\n</div>\n", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ToggleComponent, selector: "teta-toggle", inputs: { palette: "palette", noLabel: "noLabel", disabled: "disabled" }, host: { listeners: { "click": "changeValue()" }, properties: { "attr.tabindex": "this.tabindex", "class.toggle": "this.toggleClass", "class.toggle_disabled": "this.disabled" } }, providers: [TOGGLE_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<span class=\"font-body-3 row_auto\" *ngIf=\"!noLabel\">\n  <ng-content></ng-content>\n</span>\n<div class=\"toggle-button\" [class.toggle-button-on]=\"model\" [ngClass]=\"paletteClass\">\n  <div class=\"toggle-button-circle\"></div>\n</div>\n", styles: [""], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-toggle', providers: [TOGGLE_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"font-body-3 row_auto\" *ngIf=\"!noLabel\">\n  <ng-content></ng-content>\n</span>\n<div class=\"toggle-button\" [class.toggle-button-on]=\"model\" [ngClass]=\"paletteClass\">\n  <div class=\"toggle-button-circle\"></div>\n</div>\n", styles: [""] }]
@@ -6039,7 +6181,8 @@ class DynamicContentBaseDirective {
         this._alive = false;
         this.destroyContentRef();
     }
-    ngOnInit() { }
+    ngOnInit() {
+    }
     createContentRef(className) {
         if (!this._componentRef) {
             this._open = true;
@@ -6054,11 +6197,9 @@ class DynamicContentBaseDirective {
         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;
-        }
+        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 });
@@ -6241,7 +6382,7 @@ 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            [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]" }] });
+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", "allowNull", "backdrop", "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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: HintDirective, selector: "[tetaHint]", inputs: ["tetaHint", "align", "verticalAlign", "delay"] }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i3.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            [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: [""] }]
@@ -6267,7 +6408,7 @@ class PropertyGridGroupComponent {
     ngOnInit() { }
 }
 PropertyGridGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PropertyGridGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PropertyGridGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: PropertyGridGroupComponent, selector: "teta-property-grid-group", inputs: { column: "column", hideNonEditable: "hideNonEditable", dict: "dict", formGroup: "formGroup", horizontal: "horizontal" }, outputs: { controlValueChange: "controlValueChange" }, host: { properties: { "class.form-container": "this.formClass" } }, ngImport: i0, template: "<div class=\"font-title-3\">{{column.caption}}</div>\n<ng-container *ngFor=\"let col of column.columns\">\n  <ng-container *ngIf=\"col.columns?.length < 1\">\n    <teta-property-grid-item *ngIf=\"column.editable || !hideNonEditable\"\n                             [dict]=\"dict\"\n                             [column]=\"col\"\n                             [hideNonEditable]=\"hideNonEditable\"\n                             (controlValueChange)=\"controlValueChange.emit($event)\"\n                             [horizontal]=\"horizontal\"\n                             [formGroup]=\"formGroup\"></teta-property-grid-item>\n  </ng-container>\n  <ng-container *ngIf=\"col.columns?.length > 0\">\n    <teta-property-grid-group [dict]=\"dict\"\n                              [column]=\"col\"\n                              [hideNonEditable]=\"hideNonEditable\"\n                              [horizontal]=\"horizontal\"\n                              (controlValueChange)=\"controlValueChange.emit($event)\"\n                              [formGroup]=\"formGroup\"></teta-property-grid-group>\n  </ng-container>\n</ng-container>\n", styles: [""], components: [{ type: PropertyGridItemComponent, selector: "teta-property-grid-item", inputs: ["column", "hideNonEditable", "dict", "formGroup", "horizontal"], outputs: ["controlValueChange"] }, { type: PropertyGridGroupComponent, selector: "teta-property-grid-group", inputs: ["column", "hideNonEditable", "dict", "formGroup", "horizontal"], outputs: ["controlValueChange"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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"] }] });
+PropertyGridGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: PropertyGridGroupComponent, selector: "teta-property-grid-group", inputs: { column: "column", hideNonEditable: "hideNonEditable", dict: "dict", formGroup: "formGroup", horizontal: "horizontal" }, outputs: { controlValueChange: "controlValueChange" }, host: { properties: { "class.form-container": "this.formClass" } }, ngImport: i0, template: "<div class=\"font-title-3\">{{column.caption}}</div>\n<ng-container *ngFor=\"let col of column.columns\">\n  <ng-container *ngIf=\"col.columns?.length < 1\">\n    <teta-property-grid-item *ngIf=\"column.editable || !hideNonEditable\"\n                             [dict]=\"dict\"\n                             [column]=\"col\"\n                             [hideNonEditable]=\"hideNonEditable\"\n                             (controlValueChange)=\"controlValueChange.emit($event)\"\n                             [horizontal]=\"horizontal\"\n                             [formGroup]=\"formGroup\"></teta-property-grid-item>\n  </ng-container>\n  <ng-container *ngIf=\"col.columns?.length > 0\">\n    <teta-property-grid-group [dict]=\"dict\"\n                              [column]=\"col\"\n                              [hideNonEditable]=\"hideNonEditable\"\n                              [horizontal]=\"horizontal\"\n                              (controlValueChange)=\"controlValueChange.emit($event)\"\n                              [formGroup]=\"formGroup\"></teta-property-grid-group>\n  </ng-container>\n</ng-container>\n", styles: [""], components: [{ type: PropertyGridItemComponent, selector: "teta-property-grid-item", inputs: ["column", "hideNonEditable", "dict", "formGroup", "horizontal"], outputs: ["controlValueChange"] }, { type: PropertyGridGroupComponent, selector: "teta-property-grid-group", inputs: ["column", "hideNonEditable", "dict", "formGroup", "horizontal"], outputs: ["controlValueChange"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PropertyGridGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-property-grid-group', template: "<div class=\"font-title-3\">{{column.caption}}</div>\n<ng-container *ngFor=\"let col of column.columns\">\n  <ng-container *ngIf=\"col.columns?.length < 1\">\n    <teta-property-grid-item *ngIf=\"column.editable || !hideNonEditable\"\n                             [dict]=\"dict\"\n                             [column]=\"col\"\n                             [hideNonEditable]=\"hideNonEditable\"\n                             (controlValueChange)=\"controlValueChange.emit($event)\"\n                             [horizontal]=\"horizontal\"\n                             [formGroup]=\"formGroup\"></teta-property-grid-item>\n  </ng-container>\n  <ng-container *ngIf=\"col.columns?.length > 0\">\n    <teta-property-grid-group [dict]=\"dict\"\n                              [column]=\"col\"\n                              [hideNonEditable]=\"hideNonEditable\"\n                              [horizontal]=\"horizontal\"\n                              (controlValueChange)=\"controlValueChange.emit($event)\"\n                              [formGroup]=\"formGroup\"></teta-property-grid-group>\n  </ng-container>\n</ng-container>\n", styles: [""] }]
@@ -6320,7 +6461,7 @@ class PropertyGridComponent {
     }
 }
 PropertyGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PropertyGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PropertyGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: PropertyGridComponent, selector: "teta-property-grid", inputs: { hideNonEditable: "hideNonEditable", columns: "columns", dict: "dict", formGroup: "formGroup", horizontal: "horizontal" }, outputs: { controlValueChange: "controlValueChange" }, host: { properties: { "class.form-container": "this.formClass" } }, ngImport: i0, template: "<ng-container *ngIf=\"columns?.length\">\n  <ng-container *ngFor=\"let column of columns\">\n    <teta-property-grid-item *ngIf=\"column.columns?.length < 1 && (column.editable || !hideNonEditable)\"\n                             [dict]=\"dict\"\n                             [column]=\"column\"\n                             [formGroup]=\"formGroup\"\n                             [horizontal]=\"horizontal\"\n                             (controlValueChange)=\"onControlValueChange($event)\"\n                             [hideNonEditable]=\"hideNonEditable\"></teta-property-grid-item>\n    <teta-property-grid-group *ngIf=\"column.columns?.length > 0\"\n                              [dict]=\"dict\"\n                              [column]=\"column\"\n                              [formGroup]=\"formGroup\"\n                              [horizontal]=\"horizontal\"\n                              (controlValueChange)=\"onControlValueChange($event)\"\n                              [hideNonEditable]=\"hideNonEditable\"></teta-property-grid-group>\n  </ng-container>\n</ng-container>\n", styles: [":host{padding:12px 8px}\n"], components: [{ type: PropertyGridItemComponent, selector: "teta-property-grid-item", inputs: ["column", "hideNonEditable", "dict", "formGroup", "horizontal"], outputs: ["controlValueChange"] }, { type: PropertyGridGroupComponent, selector: "teta-property-grid-group", inputs: ["column", "hideNonEditable", "dict", "formGroup", "horizontal"], outputs: ["controlValueChange"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
+PropertyGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: PropertyGridComponent, selector: "teta-property-grid", inputs: { hideNonEditable: "hideNonEditable", columns: "columns", dict: "dict", formGroup: "formGroup", horizontal: "horizontal" }, outputs: { controlValueChange: "controlValueChange" }, host: { properties: { "class.form-container": "this.formClass" } }, ngImport: i0, template: "<ng-container *ngIf=\"columns?.length\">\n  <ng-container *ngFor=\"let column of columns\">\n    <teta-property-grid-item *ngIf=\"column.columns?.length < 1 && (column.editable || !hideNonEditable)\"\n                             [dict]=\"dict\"\n                             [column]=\"column\"\n                             [formGroup]=\"formGroup\"\n                             [horizontal]=\"horizontal\"\n                             (controlValueChange)=\"onControlValueChange($event)\"\n                             [hideNonEditable]=\"hideNonEditable\"></teta-property-grid-item>\n    <teta-property-grid-group *ngIf=\"column.columns?.length > 0\"\n                              [dict]=\"dict\"\n                              [column]=\"column\"\n                              [formGroup]=\"formGroup\"\n                              [horizontal]=\"horizontal\"\n                              (controlValueChange)=\"onControlValueChange($event)\"\n                              [hideNonEditable]=\"hideNonEditable\"></teta-property-grid-group>\n  </ng-container>\n</ng-container>\n", styles: [":host{padding:12px 8px}\n"], components: [{ type: PropertyGridItemComponent, selector: "teta-property-grid-item", inputs: ["column", "hideNonEditable", "dict", "formGroup", "horizontal"], outputs: ["controlValueChange"] }, { type: PropertyGridGroupComponent, selector: "teta-property-grid-group", inputs: ["column", "hideNonEditable", "dict", "formGroup", "horizontal"], outputs: ["controlValueChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PropertyGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-property-grid', template: "<ng-container *ngIf=\"columns?.length\">\n  <ng-container *ngFor=\"let column of columns\">\n    <teta-property-grid-item *ngIf=\"column.columns?.length < 1 && (column.editable || !hideNonEditable)\"\n                             [dict]=\"dict\"\n                             [column]=\"column\"\n                             [formGroup]=\"formGroup\"\n                             [horizontal]=\"horizontal\"\n                             (controlValueChange)=\"onControlValueChange($event)\"\n                             [hideNonEditable]=\"hideNonEditable\"></teta-property-grid-item>\n    <teta-property-grid-group *ngIf=\"column.columns?.length > 0\"\n                              [dict]=\"dict\"\n                              [column]=\"column\"\n                              [formGroup]=\"formGroup\"\n                              [horizontal]=\"horizontal\"\n                              (controlValueChange)=\"onControlValueChange($event)\"\n                              [hideNonEditable]=\"hideNonEditable\"></teta-property-grid-group>\n  </ng-container>\n</ng-container>\n", styles: [":host{padding:12px 8px}\n"] }]
@@ -6558,7 +6699,7 @@ class SidebarComponent {
     ngOnInit() { }
 }
 SidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SidebarComponent, selector: "teta-sidebar", inputs: { position: "position", backdrop: "backdrop", open: "open", className: "className" }, outputs: { openChange: "openChange" }, host: { properties: { "style.z-index": "this.zIndex" } }, ngImport: i0, template: "<div *ngIf=\"backdrop && open\"\n     [@sidebar]\n     (click)=\"setOpen(false)\"\n     class=\"sidebar-backdrop\"></div>\n<div class=\"sidebar\"\n     [@sidebar]\n     [ngClass]=\"className\"\n     [class.sidebar-top]=\"position === sidebarPosition.top\"\n     [class.sidebar-bottom]=\"position === sidebarPosition.bottom\"\n     [class.sidebar-left]=\"position === sidebarPosition.left\"\n     [class.sidebar-right]=\"position === sidebarPosition.right\"\n     *ngIf=\"open\">\n  <ng-content></ng-content>\n</div>\n", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
+SidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SidebarComponent, selector: "teta-sidebar", inputs: { position: "position", backdrop: "backdrop", open: "open", className: "className" }, outputs: { openChange: "openChange" }, host: { properties: { "style.z-index": "this.zIndex" } }, ngImport: i0, template: "<div *ngIf=\"backdrop && open\"\n     [@sidebar]\n     (click)=\"setOpen(false)\"\n     class=\"sidebar-backdrop\"></div>\n<div class=\"sidebar\"\n     [@sidebar]\n     [ngClass]=\"className\"\n     [class.sidebar-top]=\"position === sidebarPosition.top\"\n     [class.sidebar-bottom]=\"position === sidebarPosition.bottom\"\n     [class.sidebar-left]=\"position === sidebarPosition.left\"\n     [class.sidebar-right]=\"position === sidebarPosition.right\"\n     *ngIf=\"open\">\n  <ng-content></ng-content>\n</div>\n", styles: [""], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [
         trigger('sidebar', [
             transition('void => *', [
                 style({ opacity: '0' }),
@@ -6951,6 +7092,25 @@ class StateUtil {
         }
         return new FilterState(state);
     }
+    static sortAsc(sortEvent, state) {
+        return StateUtil.sort(sortEvent, state, true);
+    }
+    static sortDesc(sortEvent, state) {
+        return StateUtil.sort(sortEvent, state, false);
+    }
+    static sort(sortEvent, state, asc) {
+        const column = sortEvent.column;
+        const shiftKey = sortEvent.shiftKey;
+        const sort = state.sortParams.find((sortParam) => sortParam.field === column.sortField);
+        if (sort) {
+            state.sortParams = StateUtil.clearSortParam(sort, state.sortParams);
+        }
+        if (!shiftKey) {
+            state.sortParams.length = 0;
+        }
+        state.sortParams.push(new SortParam({ field: column.sortField, asc: asc, order: 0 }));
+        return new FilterState(state);
+    }
     static clearSortParam(sort, sortParams) {
         const index = sortParams.indexOf(sort);
         sortParams.splice(index, 1);
@@ -6973,6 +7133,20 @@ var SelectType;
     SelectType[SelectType["single"] = 2] = "single";
 })(SelectType || (SelectType = {}));
 
+var EditType;
+(function (EditType) {
+    EditType[EditType["none"] = 0] = "none";
+    EditType[EditType["cell"] = 1] = "cell";
+    EditType[EditType["row"] = 2] = "row";
+})(EditType || (EditType = {}));
+
+var EditEvent;
+(function (EditEvent) {
+    EditEvent[EditEvent["click"] = 0] = "click";
+    EditEvent[EditEvent["focus"] = 1] = "focus";
+    EditEvent[EditEvent["doubleClick"] = 2] = "doubleClick";
+})(EditEvent || (EditEvent = {}));
+
 class TableColumnStore {
     constructor(options) {
         if (options) {
@@ -6987,12 +7161,17 @@ class TableColumnStore {
 
 class TableService {
     constructor() {
+        this.selectType = SelectType.multiple;
+        this.editType = EditType.cell;
+        this.editEvent = EditEvent.doubleClick;
+        this.trackRow = (index, row) => index;
         this.initialColumns = [];
         this.displayColumns = [];
         this._columns = new BehaviorSubject([]);
-        this.initialData = [];
+        this._hiddenColumns = new BehaviorSubject([]);
         this._displayData = new BehaviorSubject([]);
         this._dict = new BehaviorSubject({});
+        this._filterOptions = new BehaviorSubject({});
         this._state = new BehaviorSubject(new FilterState());
         this._editRowStart = new Subject();
         this._editRowStop = new Subject();
@@ -7005,11 +7184,11 @@ class TableService {
         this._groupToggle = new Subject();
         this._selectedRows = new BehaviorSubject([]);
         this._activeRow = new BehaviorSubject(null);
-        this._hiddenColumns = new BehaviorSubject([]);
         this._scrollIndex = new Subject();
         this.columns = this._columns.asObservable();
         this.displayData = this._displayData.asObservable();
         this.dict = this._dict.asObservable();
+        this.filterOptions = this._filterOptions.asObservable();
         this.state = this._state.asObservable();
         this.editRowStart = this._editRowStart.asObservable();
         this.editRowStop = this._editRowStop.asObservable();
@@ -7025,17 +7204,21 @@ class TableService {
         this.hiddenColumns = this._hiddenColumns.asObservable();
         this.scrollIndex = this._scrollIndex.asObservable();
     }
-    // cellEditable: boolean | ((row: ICellCoordinates<T>) => boolean);
     get dragSource() {
         return this._dragSource;
     }
+    get currentEditCell() {
+        return this._currentEditCell;
+    }
     setData(data) {
-        this.initialData = data?.map((_) => new TableRow(_));
-        this._displayData.next(this.initialData);
+        this._displayData.next(data?.map((_) => new TableRow(_)));
     }
     setDict(dict) {
         this._dict.next(dict);
     }
+    setFilterOptions(filterOptions) {
+        this._filterOptions.next(filterOptions);
+    }
     setColumns(columns) {
         this.initialColumns = columns ? columns.map((_) => new TableColumn(_)) : [];
         this.initialColumnsHash = hash__default(this.initialColumns, {
@@ -7122,9 +7305,14 @@ class TableService {
         const hiddenColumns = localStorage.getItem(this._hiddenCookieName) || '[]';
         this._hiddenColumns.next(JSON.parse(hiddenColumns));
     }
-    sort(sortEvent) {
+    sortAsc(sortEvent) {
         if (sortEvent.column.sortable) {
-            this.setState(StateUtil.sortColumn(sortEvent, this._state.value));
+            this.setState(StateUtil.sortAsc(sortEvent, this._state.value));
+        }
+    }
+    sortDesc(sortEvent) {
+        if (sortEvent.column.sortable) {
+            this.setState(StateUtil.sortDesc(sortEvent, this._state.value));
         }
     }
     clearSort(column) {
@@ -7243,33 +7431,40 @@ class TableService {
             }
         }
     }
-    startEditRow(cellCoordinates) {
-        if (this._currentEditRow?.row !== cellCoordinates?.row) {
-            if (this._currentEditRow != null) {
-                const row = this._displayData.value.indexOf(this._currentEditRow.row);
-                this._editRowStop.next(this._currentEditRow);
+    startEditRow(cellEvent) {
+        if (this._currentEditCell?.row !== cellEvent?.row) {
+            if (this._currentEditCell != null) {
+                this._editRowStop.next(this._currentEditCell);
             }
-            if (cellCoordinates === null) {
-                this._editRowStart.next(cellCoordinates);
-                this._currentEditRow = cellCoordinates;
+            if (cellEvent === null) {
+                this._editRowStart.next(cellEvent);
+                this._currentEditCell = cellEvent;
             }
             else {
-                if (this.boolOrFuncCallback(this.rowEditable)(cellCoordinates.row)) {
-                    this._editRowStart.next(cellCoordinates);
-                    this._currentEditRow = cellCoordinates;
+                if (this.boolOrFuncCallback(this.rowEditable)(this.getRowByIndex(cellEvent?.row))) {
+                    this._editRowStart.next(cellEvent);
+                    this._currentEditCell = cellEvent;
                 }
             }
         }
     }
-    startEditCell(cellCoordinates) {
-        if (this._currentEditCell?.column.name !== cellCoordinates?.column.name ||
-            this._currentEditCell?.row !== cellCoordinates?.row) {
+    startEditCell(cellEvent) {
+        if (this._currentEditCell?.column !== cellEvent?.column ||
+            this._currentEditCell?.row !== cellEvent?.row) {
             if (this._currentEditCell != null) {
                 this._editCellStop.next(this._currentEditCell);
             }
-            if (this.boolOrFuncCallback(cellCoordinates.column.editable)(cellCoordinates)) {
-                this._editCellStart.next(cellCoordinates);
-                this._currentEditCell = cellCoordinates;
+            const column = this.getColumnByName(cellEvent?.column);
+            if (this.boolOrFuncCallback(column?.editable)({
+                row: this.getRowByIndex(cellEvent?.row),
+                column: column
+            })) {
+                this._editCellStart.next(cellEvent);
+                this._currentEditCell = cellEvent;
+                const key = cellEvent?.event?.key;
+                if (key && (key.length === 1 || (key === 'Delete' && !column.required))) {
+                    this.clearValue(cellEvent);
+                }
             }
         }
     }
@@ -7279,6 +7474,46 @@ class TableService {
     selectRows(rows) {
         this._selectedRows.next(rows);
     }
+    selectOrDeselectRow(row) {
+        if (this._selectedRows.value.indexOf(row) >= 0) {
+            this._selectedRows.next(this._selectedRows.value.filter((_) => _ !== row));
+        }
+        else {
+            if (this.selectType === SelectType.single) {
+                this._selectedRows.next([row]);
+            }
+            else {
+                this._selectedRows.next([...this._selectedRows.value, row]);
+            }
+        }
+    }
+    selectRange(row) {
+        const index = this._displayData.value.indexOf(row);
+        let minIndex = this._selectedRows.value.reduce((prev, curr) => {
+            const newIndex = this._displayData.value.indexOf(curr);
+            if (newIndex < prev) {
+                return newIndex;
+            }
+            return prev;
+        }, this._displayData.value.length);
+        let maxIndex = this._selectedRows.value.reduce((prev, curr) => {
+            const newIndex = this._displayData.value.indexOf(curr);
+            if (newIndex > prev) {
+                return newIndex;
+            }
+            return prev;
+        }, 0);
+        if (index > maxIndex) {
+            maxIndex = index;
+        }
+        if (index < minIndex) {
+            minIndex = index;
+        }
+        if (minIndex < index && index < maxIndex) {
+            maxIndex = index;
+        }
+        this._selectedRows.next([...this._displayData.value.slice(minIndex, maxIndex + 1)]);
+    }
     selectRow(row) {
         if (this.selectType === SelectType.none) {
             return;
@@ -7333,10 +7568,114 @@ class TableService {
         this._valueChanged.next(coordinates);
     }
     setValue(cellValue) {
-        this._valueSet.next(cellValue);
+        let value;
+        if (typeof cellValue.row === 'object' && typeof cellValue.column === 'object') {
+            value = {
+                row: this.getRowIndex(cellValue.row),
+                column: cellValue.column.name,
+                value: cellValue.value
+            };
+        }
+        else {
+            value = cellValue;
+        }
+        this._valueSet.next(value);
     }
     getRowByIndex(rowIndex) {
-        return this._displayData.value[parseInt(rowIndex, 10)];
+        return this._displayData.value[rowIndex];
+    }
+    getRowIndex(row) {
+        return this._displayData.value.indexOf(row);
+    }
+    getNextEditableCell(coords) {
+        const nextCell = this.getNextCell(coords);
+        if (!nextCell) {
+            return null;
+        }
+        const column = this.getColumnByName(nextCell?.column);
+        if (this.boolOrFuncCallback(column.editable)({
+            row: this.getRowByIndex(nextCell.row),
+            column
+        })) {
+            return nextCell;
+        }
+        return this.getNextEditableCell(nextCell);
+    }
+    getPreviousEditableCell(coords) {
+        const prevCell = this.getPreviousCell(coords);
+        if (!prevCell) {
+            return null;
+        }
+        const column = this.getColumnByName(prevCell?.column);
+        if (this.boolOrFuncCallback(column.editable)({
+            row: this.getRowByIndex(prevCell.row),
+            column
+        })) {
+            return prevCell;
+        }
+        return this.getPreviousEditableCell(prevCell);
+    }
+    getNextCell(coords) {
+        const columns = this.getFlatColumns();
+        let colIndex = columns.findIndex((col) => col.name === coords?.column);
+        let rowIndex = coords?.row;
+        if (colIndex >= 0 && rowIndex >= 0) {
+            if (colIndex === columns.length - 1) {
+                colIndex = 0;
+                rowIndex = rowIndex + 1;
+            }
+            else {
+                colIndex = colIndex + 1;
+            }
+            return {
+                column: columns[colIndex]?.name,
+                row: rowIndex
+            };
+        }
+        return null;
+    }
+    getPreviousCell(coords) {
+        const columns = this.getFlatColumns();
+        let colIndex = columns.findIndex((col) => col.name === coords?.column);
+        let rowIndex = coords?.row;
+        if (colIndex >= 0 && rowIndex >= 0) {
+            if (colIndex === 0) {
+                colIndex = columns.length - 1;
+                rowIndex = rowIndex - 1;
+            }
+            else {
+                colIndex = colIndex - 1;
+            }
+            return {
+                column: columns[colIndex]?.name,
+                row: rowIndex
+            };
+        }
+        return null;
+    }
+    getNextRowCell(coords) {
+        const columns = this.getFlatColumns();
+        let colIndex = columns.findIndex((col) => col.name === coords?.column);
+        let rowIndex = coords?.row;
+        if (colIndex >= 0 && rowIndex >= 0 && rowIndex < this._displayData.value.length - 1) {
+            return {
+                column: columns[colIndex]?.name,
+                row: rowIndex + 1
+            };
+        }
+        return null;
+    }
+    getPreviousRowCell(coords) {
+        const columns = this.getFlatColumns();
+        let colIndex = columns.findIndex((col) => col.name === coords?.column);
+        let rowIndex = coords?.row;
+        if (colIndex >= 0 && rowIndex > 1) {
+            return {
+                column: columns[colIndex]?.name,
+                row: rowIndex - 1
+            };
+        }
+        return null;
     }
     getColumnByName(columnName) {
         return ArrayUtil.findRecursive(this.displayColumns, (iterableNode) => columnName === iterableNode.name, 'columns');
@@ -7356,6 +7695,19 @@ class TableService {
             return true;
         };
     }
+    getVisibleColumns() {
+        const visible = ArrayUtil.flatten(this._columns.value, 'columns', true).filter((_) => this._hiddenColumns.value.indexOf(_.name) < 0);
+        return visible.sort((a, b) => Number(b.locked) - Number(a.locked));
+    }
+    getCellInstance(coords) {
+        return coords ? {
+            row: this.getRowByIndex(coords.row),
+            column: this.getColumnByName(coords.column)
+        } : null;
+    }
+    getFlatColumns() {
+        return ArrayUtil.flatten(this.displayColumns, 'columns', true).sort((a, b) => Number(b.locked) - Number(a.locked));
+    }
     findParent(column, columns) {
         const found = columns.find((x) => x.name === column.name);
         if (found !== null && found !== undefined) {
@@ -7389,6 +7741,12 @@ class TableService {
         column.flex = 0;
         column.width = maxWidth + 20;
     }
+    clearValue(event) {
+        this.setValue({
+            ...event,
+            value: null
+        });
+    }
 }
 TableService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TableService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
 TableService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TableService, providedIn: 'root' });
@@ -7419,35 +7777,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 type: Input
             }] } });
 
-var EditType;
-(function (EditType) {
-    EditType[EditType["cell"] = 0] = "cell";
-    EditType[EditType["row"] = 1] = "row";
-})(EditType || (EditType = {}));
-
-var EditEvent;
-(function (EditEvent) {
-    EditEvent[EditEvent["click"] = 0] = "click";
-    EditEvent[EditEvent["focus"] = 1] = "focus";
-    EditEvent[EditEvent["doubleClick"] = 2] = "doubleClick";
-})(EditEvent || (EditEvent = {}));
-
-class TableContextMenuConfig {
-    constructor(options) {
-        this.contextMenu = true;
-        this.copy = true;
-        this.delete = true;
-        this.add = true;
-        this.paste = true;
-        if (options) {
-            this.contextMenu = options?.contextMenu;
-            this.copy = options?.copy;
-            this.delete = options?.delete;
-            this.add = options?.add;
-            this.paste = options?.paste;
+class SelectionHeadCellComponent {
+    constructor(_svc, _cdr) {
+        this._svc = _svc;
+        this._cdr = _cdr;
+        this.tableCellClass = true;
+        this._alive = true;
+    }
+    selectAll(value) {
+        if (value) {
+            this._svc.selectAll();
+        }
+        else {
+            this._svc.deselectAll();
         }
     }
+    allSelected() {
+        return this._svc.allRowsSelected();
+    }
+    ngOnInit() {
+        this._svc.selectedRows
+            .pipe(takeWhile((_) => this._alive))
+            .subscribe((_) => {
+            this._cdr.markForCheck();
+        });
+    }
+    ngOnDestroy() {
+        this._alive = false;
+    }
 }
+SelectionHeadCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SelectionHeadCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SelectionHeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SelectionHeadCellComponent, selector: "teta-selection-head-cell", host: { properties: { "class.table-head__group": "this.tableCellClass" } }, ngImport: i0, template: "<teta-checkbox [binary]=\"true\"\n               [allowNull]=\"true\"\n               [noLabel]=\"true\"\n               [ngModel]=\"allSelected()\"\n               (ngModelChange)=\"selectAll($event)\"></teta-checkbox>\n", styles: [":host{display:flex;align-items:center;justify-content:center}\n"], components: [{ type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "allowNull"] }], directives: [{ type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SelectionHeadCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-selection-head-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-checkbox [binary]=\"true\"\n               [allowNull]=\"true\"\n               [noLabel]=\"true\"\n               [ngModel]=\"allSelected()\"\n               (ngModelChange)=\"selectAll($event)\"></teta-checkbox>\n", styles: [":host{display:flex;align-items:center;justify-content:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tableCellClass: [{
+                type: HostBinding,
+                args: ['class.table-head__group']
+            }] } });
 
 class TableUtil {
     static getColumnLeaves(column) {
@@ -7456,10 +7823,6 @@ class TableUtil {
         }
         return null;
     }
-    static getGridTemplateColumns(columns) {
-        const res = columns?.map((column) => column.flex > 0 ? `minmax(${column.width}px, ${column.flex}fr)` : `${column.width}px`).join(' ');
-        return res;
-    }
     static getData(data, state) {
         let result = data;
         result = TableUtil.filterData(result, state);
@@ -7511,15 +7874,15 @@ class TableUtil {
         const filterString = (row) => {
             const item = row;
             if (filter.type === StringFilterType.EndsWith) {
-                return item[filter.field].endsWith(filter.value);
+                return item[filter.field]?.toLowerCase().endsWith(filter.value?.toLowerCase());
             }
             if (filter.type === StringFilterType.Equals) {
-                return item[filter.field] === filter.value;
+                return item[filter.field]?.toLowerCase() === filter.value?.toLowerCase();
             }
             if (filter.type === StringFilterType.StartsWith) {
-                return item[filter.field].startsWith(filter.value);
+                return item[filter.field]?.toLowerCase().startsWith(filter.value?.toLowerCase());
             }
-            return item[filter.field].indexOf(filter.value) >= 0;
+            return item[filter.field]?.toLowerCase().indexOf(filter.value?.toLowerCase()) >= 0;
         };
         return data.filter(filterString);
     }
@@ -7528,10 +7891,10 @@ class TableUtil {
             const item = row;
             return (filter.value.lessThan === null || filter.value.lessThan === undefined
                 ? true
-                : filter.value.lessThan.getTime() > item[filter.field].getTime()) &&
+                : filter.value.lessThan.getTime() >= item[filter.field].getTime()) &&
                 (filter.value.greaterThan === null || filter.value.greaterThan === undefined
                     ? true
-                    : filter.value.greaterThan.getTime() < item[filter.field].getTime());
+                    : filter.value.greaterThan.getTime() <= item[filter.field].getTime());
         };
         return data.filter(filterDate);
     }
@@ -7540,10 +7903,10 @@ class TableUtil {
             const item = row;
             return (filter.value.lessThan === null || filter.value.lessThan === undefined
                 ? true
-                : filter.value.lessThan > item[filter.field]) &&
+                : filter.value.lessThan >= item[filter.field]) &&
                 (filter.value.greaterThan === null || filter.value.greaterThan === undefined
                     ? true
-                    : filter.value.greaterThan < item[filter.field]) &&
+                    : filter.value.greaterThan <= item[filter.field]) &&
                 (filter.value.equalsTo === null || filter.value.equalsTo === undefined
                     ? true
                     : filter.value.equalsTo === item[filter.field]);
@@ -7565,7 +7928,7 @@ class TableUtil {
     }
     static sort(data, sortParam) {
         const res = data.sort(sortParam.asc ? TableUtil.asc(sortParam.field) : TableUtil.desc(sortParam.field));
-        return res;
+        return [...res];
     }
     static desc(field) {
         const res = (a, b) => a[field] > b[field] ? -1 : 1;
@@ -7577,56 +7940,10 @@ class TableUtil {
     }
 }
 
-class SelectionHeadCellComponent {
-    constructor(_svc, _cdr) {
-        this._svc = _svc;
-        this._cdr = _cdr;
-        this.tableCellClass = true;
-        this._alive = true;
-    }
-    selectAll(value) {
-        if (value) {
-            this._svc.selectAll();
-        }
-        else {
-            this._svc.deselectAll();
-        }
-    }
-    allSelected() {
-        return this._svc.allRowsSelected();
-    }
-    ngOnInit() {
-        this._svc.selectedRows
-            .pipe(takeWhile((_) => this._alive))
-            .subscribe((_) => {
-            this._cdr.markForCheck();
-        });
-    }
-    ngOnDestroy() {
-        this._alive = false;
-    }
-}
-SelectionHeadCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SelectionHeadCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SelectionHeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SelectionHeadCellComponent, selector: "teta-selection-head-cell", host: { properties: { "class.table-head__group": "this.tableCellClass" } }, ngImport: i0, template: "<teta-checkbox [binary]=\"true\"\n               [allowNull]=\"true\"\n               [noLabel]=\"true\"\n               [ngModel]=\"allSelected()\"\n               (ngModelChange)=\"selectAll($event)\"></teta-checkbox>\n", styles: [":host{display:flex;align-items:center;justify-content:center}\n"], components: [{ type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "allowNull"] }], directives: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SelectionHeadCellComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-selection-head-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-checkbox [binary]=\"true\"\n               [allowNull]=\"true\"\n               [noLabel]=\"true\"\n               [ngModel]=\"allSelected()\"\n               (ngModelChange)=\"selectAll($event)\"></teta-checkbox>\n", styles: [":host{display:flex;align-items:center;justify-content:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tableCellClass: [{
-                type: HostBinding,
-                args: ['class.table-head__group']
-            }] } });
-
-class ColumnResizeEvent {
-    constructor(column, newWidth) {
-        this.column = column;
-        this.newWidth = newWidth;
-    }
-}
-
-class SortEvent {
-    constructor(column, shiftKey) {
-        this.column = column;
-        this.shiftKey = shiftKey;
+class ColumnResizeEvent {
+    constructor(column, newWidth) {
+        this.column = column;
+        this.newWidth = newWidth;
     }
 }
 
@@ -7657,15 +7974,25 @@ class DefaultHeadCellComponent extends HeadCellComponentBase {
     get column() {
         return this._column;
     }
-    ngOnInit() { }
+    set data(data) {
+        this._data = data;
+        this._cdr.detectChanges();
+    }
+    get data() {
+        return this._data;
+    }
+    ngOnInit() {
+    }
 }
 DefaultHeadCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DefaultHeadCellComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DefaultHeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DefaultHeadCellComponent, selector: "teta-default-head-cell", inputs: { column: "column" }, usesInheritance: true, ngImport: i0, template: "<div class=\"column column_auto align-center\" [tetaHint]=\"column.hint || column.caption\">\n  <div class=\"table-head__cell__text align-center\">\n    {{column.caption}}\n  </div>\n  <div *ngIf=\"column.unit\" class=\"table-head__cell__text align-center color-text-70\" style=\"overflow: visible;\">\n    [{{column.unit}}]\n  </div>\n</div>\n", styles: [":host{align-items:center;justify-content:center;display:flex;min-width:0}\n"], directives: [{ type: HintDirective, selector: "[tetaHint]", inputs: ["tetaHint", "align", "verticalAlign", "delay"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DefaultHeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DefaultHeadCellComponent, selector: "teta-default-head-cell", inputs: { column: "column", data: "data" }, usesInheritance: true, ngImport: i0, template: "<div class=\"column column_auto\" [tetaHint]=\"column.hint || column.caption\">\n  <div class=\"table-head__cell__text\">\n    {{column.caption}}\n  </div>\n  <div *ngIf=\"column.unit\" class=\"table-head__cell__text\" style=\"overflow: visible;\">\n    [{{column.unit}}]\n  </div>\n</div>\n", styles: [":host{align-items:center;justify-content:center;display:flex;min-width:0;padding:6px 8px}\n"], directives: [{ type: HintDirective, selector: "[tetaHint]", inputs: ["tetaHint", "align", "verticalAlign", "delay"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DefaultHeadCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-default-head-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"column column_auto align-center\" [tetaHint]=\"column.hint || column.caption\">\n  <div class=\"table-head__cell__text align-center\">\n    {{column.caption}}\n  </div>\n  <div *ngIf=\"column.unit\" class=\"table-head__cell__text align-center color-text-70\" style=\"overflow: visible;\">\n    [{{column.unit}}]\n  </div>\n</div>\n", styles: [":host{align-items:center;justify-content:center;display:flex;min-width:0}\n"] }]
+            args: [{ selector: 'teta-default-head-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"column column_auto\" [tetaHint]=\"column.hint || column.caption\">\n  <div class=\"table-head__cell__text\">\n    {{column.caption}}\n  </div>\n  <div *ngIf=\"column.unit\" class=\"table-head__cell__text\" style=\"overflow: visible;\">\n    [{{column.unit}}]\n  </div>\n</div>\n", styles: [":host{align-items:center;justify-content:center;display:flex;min-width:0;padding:6px 8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
                 type: Input
+            }], data: [{
+                type: Input
             }] } });
 
 class HeadCellHostComponent {
@@ -7681,6 +8008,15 @@ class HeadCellHostComponent {
     get column() {
         return this._column;
     }
+    set data(data) {
+        this._data = data;
+        if (this.init) {
+            this.componentRef.instance.data = this._data;
+        }
+    }
+    get data() {
+        return this._data;
+    }
     ngOnInit() {
         if (!HeadCellComponentBase.isPrototypeOf(this.column.headCellComponent)) {
             this.column.headCellComponent = DefaultHeadCellComponent;
@@ -7688,18 +8024,28 @@ class HeadCellHostComponent {
         this.componentRef =
             this.viewContainerRef.createComponent(this.column.headCellComponent);
         this.componentRef.instance.column = this.column;
+        this.componentRef.instance.data = this.data;
         this.init = true;
     }
 }
 HeadCellHostComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HeadCellHostComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-HeadCellHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: HeadCellHostComponent, selector: "teta-head-cell-host", inputs: { column: "column" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HeadCellHostComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: HeadCellHostComponent, selector: "teta-head-cell-host", inputs: { column: "column", data: "data" }, ngImport: i0, template: '', isInline: true, styles: [":host{display:contents}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HeadCellHostComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-head-cell-host', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { column: [{
                 type: Input
+            }], data: [{
+                type: Input
             }] } });
 
+class SortEvent {
+    constructor(column, shiftKey) {
+        this.column = column;
+        this.shiftKey = shiftKey;
+    }
+}
+
 class TabContentDirective {
     constructor(template) {
         this.template = template;
@@ -7814,7 +8160,7 @@ class TabsComponent {
     }
 }
 TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TabsComponent, selector: "teta-tabs", inputs: { activeId: "activeId", destroyOnHide: "destroyOnHide" }, outputs: { tabChange: "tabChange" }, host: { properties: { "class.tabs": "this.classTabs" } }, queries: [{ propertyName: "tabs", predicate: TabComponent }], ngImport: i0, template: "<div class=\"tabs-head\" role=\"tablist\">\n  <div class=\"tabs-head-item\"\n       *ngFor=\"let tab of tabs\"\n       (click)=\"select(tab.id);\"\n       [class.tabs-head-item_active]=\"tab.id === activeId\"\n       [class.tabs-head-item_disabled]=\"tab.disabled\">\n    <span [id]=\"tab.id\" class=\"tabs-title\"\n          role=\"tab\"\n          [attr.tabindex]=\"(tab.disabled ? '-1': undefined)\"\n          [attr.aria-controls]=\"(!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null)\"\n          [attr.aria-expanded]=\"tab.id === activeId\"\n          [attr.aria-disabled]=\"tab.disabled\">\n      {{tab.title}}\n      <ng-template [ngTemplateOutlet]=\"tab.titleTpl?.template\"></ng-template>\n    </span>\n  </div>\n</div>\n<div class=\"tabs-content\">\n  <ng-template ngFor let-tab [ngForOf]=\"tabs\">\n    <ng-container *ngIf=\"!destroyOnHide || tab.id === activeId\">\n      <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.template\"></ng-template>\n    </ng-container>\n  </ng-template>\n</div>\n", styles: [""], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TabsComponent, selector: "teta-tabs", inputs: { activeId: "activeId", destroyOnHide: "destroyOnHide" }, outputs: { tabChange: "tabChange" }, host: { properties: { "class.tabs": "this.classTabs" } }, queries: [{ propertyName: "tabs", predicate: TabComponent }], ngImport: i0, template: "<div class=\"tabs-head\" role=\"tablist\">\n  <div class=\"tabs-head-item\"\n       *ngFor=\"let tab of tabs\"\n       (click)=\"select(tab.id);\"\n       [class.tabs-head-item_active]=\"tab.id === activeId\"\n       [class.tabs-head-item_disabled]=\"tab.disabled\">\n    <span [id]=\"tab.id\" class=\"tabs-title\"\n          role=\"tab\"\n          [attr.tabindex]=\"(tab.disabled ? '-1': undefined)\"\n          [attr.aria-controls]=\"(!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null)\"\n          [attr.aria-expanded]=\"tab.id === activeId\"\n          [attr.aria-disabled]=\"tab.disabled\">\n      {{tab.title}}\n      <ng-template [ngTemplateOutlet]=\"tab.titleTpl?.template\"></ng-template>\n    </span>\n  </div>\n</div>\n<div class=\"tabs-content\">\n  <ng-template ngFor let-tab [ngForOf]=\"tabs\">\n    <ng-container *ngIf=\"!destroyOnHide || tab.id === activeId\">\n      <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.template\"></ng-template>\n    </ng-container>\n  </ng-template>\n</div>\n", styles: [""], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-tabs', template: "<div class=\"tabs-head\" role=\"tablist\">\n  <div class=\"tabs-head-item\"\n       *ngFor=\"let tab of tabs\"\n       (click)=\"select(tab.id);\"\n       [class.tabs-head-item_active]=\"tab.id === activeId\"\n       [class.tabs-head-item_disabled]=\"tab.disabled\">\n    <span [id]=\"tab.id\" class=\"tabs-title\"\n          role=\"tab\"\n          [attr.tabindex]=\"(tab.disabled ? '-1': undefined)\"\n          [attr.aria-controls]=\"(!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null)\"\n          [attr.aria-expanded]=\"tab.id === activeId\"\n          [attr.aria-disabled]=\"tab.disabled\">\n      {{tab.title}}\n      <ng-template [ngTemplateOutlet]=\"tab.titleTpl?.template\"></ng-template>\n    </span>\n  </div>\n</div>\n<div class=\"tabs-content\">\n  <ng-template ngFor let-tab [ngForOf]=\"tabs\">\n    <ng-container *ngIf=\"!destroyOnHide || tab.id === activeId\">\n      <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.template\"></ng-template>\n    </ng-container>\n  </ng-template>\n</div>\n", styles: [""] }]
@@ -7921,7 +8267,7 @@ class TreeItemComponent {
     }
 }
 TreeItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TreeItemComponent, deps: [{ token: TreeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TreeItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TreeItemComponent, selector: "teta-tree-item", inputs: { item: "item", depth: "depth", padding: "padding", childNodeName: "childNodeName", template: "template", noChildMode: "noChildMode" }, host: { properties: { "class.tree__item-container": "this.treeItemClass" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tree__item_content\" [ngClass]=\"'tree__item_content-' + computedDepth\" (click)=\"openItem()\">\n  <ng-container\n    *ngTemplateOutlet=\"template; context: {$implicit: item, item: item, open: itemIsOpen, service: service, depth: depth}\"></ng-container>\n</div>\n<div [@children] class=\"tree__children\" *ngIf=\"itemIsOpen && item[childNodeName]?.length > 0\">\n  <teta-tree-item *ngFor=\"let child of item[childNodeName];\"\n                  [item]=\"child\"\n                  [template]=\"template\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [depth]=\"depth + 1\"></teta-tree-item>\n</div>\n", styles: [""], components: [{ type: TreeItemComponent, selector: "teta-tree-item", inputs: ["item", "depth", "padding", "childNodeName", "template", "noChildMode"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
+TreeItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TreeItemComponent, selector: "teta-tree-item", inputs: { item: "item", depth: "depth", padding: "padding", childNodeName: "childNodeName", template: "template", noChildMode: "noChildMode" }, host: { properties: { "class.tree__item-container": "this.treeItemClass" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tree__item_content\" [ngClass]=\"'tree__item_content-' + computedDepth\" (click)=\"openItem()\">\n  <ng-container\n    *ngTemplateOutlet=\"template; context: {$implicit: item, item: item, open: itemIsOpen, service: service, depth: depth}\"></ng-container>\n</div>\n<div [@children] class=\"tree__children\" *ngIf=\"itemIsOpen && item[childNodeName]?.length > 0\">\n  <teta-tree-item *ngFor=\"let child of item[childNodeName];\"\n                  [item]=\"child\"\n                  [template]=\"template\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [depth]=\"depth + 1\"></teta-tree-item>\n</div>\n", styles: [""], components: [{ type: TreeItemComponent, selector: "teta-tree-item", inputs: ["item", "depth", "padding", "childNodeName", "template", "noChildMode"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
         trigger('children', [
             transition('void => *', [
                 style({ opacity: '0' }),
@@ -7998,7 +8344,7 @@ class TreeComponent {
     }
 }
 TreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TreeComponent, deps: [{ token: TreeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TreeComponent, selector: "teta-tree", inputs: { data: "data", class: "class", padding: "padding", childNodeName: "childNodeName", openItems: "openItems", compareItems: "compareItems" }, outputs: { service: "service", openItemsChange: "openItemsChange" }, host: { properties: { "class": "this.getClass" } }, providers: [TreeService], queries: [{ propertyName: "template", first: true, predicate: TetaTemplateDirective, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let item of data\">\n  <teta-tree-item [item]=\"item\"\n                  [depth]=\"0\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [noChildMode]=\"noChildMode\"\n                  [template]=\"template?.template\"></teta-tree-item>\n</ng-container>\n", styles: [""], components: [{ type: TreeItemComponent, selector: "teta-tree-item", inputs: ["item", "depth", "padding", "childNodeName", "template", "noChildMode"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TreeComponent, selector: "teta-tree", inputs: { data: "data", class: "class", padding: "padding", childNodeName: "childNodeName", openItems: "openItems", compareItems: "compareItems" }, outputs: { service: "service", openItemsChange: "openItemsChange" }, host: { properties: { "class": "this.getClass" } }, providers: [TreeService], queries: [{ propertyName: "template", first: true, predicate: TetaTemplateDirective, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let item of data\">\n  <teta-tree-item [item]=\"item\"\n                  [depth]=\"0\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [noChildMode]=\"noChildMode\"\n                  [template]=\"template?.template\"></teta-tree-item>\n</ng-container>\n", styles: [""], components: [{ type: TreeItemComponent, selector: "teta-tree-item", inputs: ["item", "depth", "padding", "childNodeName", "template", "noChildMode"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-tree', providers: [TreeService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngFor=\"let item of data\">\n  <teta-tree-item [item]=\"item\"\n                  [depth]=\"0\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [noChildMode]=\"noChildMode\"\n                  [template]=\"template?.template\"></teta-tree-item>\n</ng-container>\n", styles: [""] }]
@@ -8040,7 +8386,7 @@ class TreeItemToggleComponent {
     }
 }
 TreeItemToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TreeItemToggleComponent, deps: [{ token: TreeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TreeItemToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TreeItemToggleComponent, selector: "teta-tree-item-toggle", inputs: { item: "item" }, ngImport: i0, template: "<teta-icon [name]=\"(open | async) ? 'arrowDownKey' : 'arrowRightKey'\"\n           class=\"tree__icon\"></teta-icon>\n", styles: [":host{display:inline-flex;align-items:center}\n"], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TreeItemToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TreeItemToggleComponent, selector: "teta-tree-item-toggle", inputs: { item: "item" }, ngImport: i0, template: "<teta-icon [name]=\"(open | async) ? 'arrowDownKey' : 'arrowRightKey'\"\n           class=\"tree__icon\"></teta-icon>\n", styles: [":host{display:inline-flex;align-items:center}\n"], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TreeItemToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-tree-item-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-icon [name]=\"(open | async) ? 'arrowDownKey' : 'arrowRightKey'\"\n           class=\"tree__icon\"></teta-icon>\n", styles: [":host{display:inline-flex;align-items:center}\n"] }]
@@ -8049,14 +8395,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             }] } });
 
 class HeadCellDropdownComponent {
-    constructor(_svc, _cdr) {
+    constructor(_svc, _config, _cdr) {
         this._svc = _svc;
+        this._config = _config;
         this._cdr = _cdr;
         this.dropDownOpenChange = new EventEmitter();
         this.autosize = new EventEmitter();
         this.autosizeAll = new EventEmitter();
-        this.shadow = true;
-        this.bg = true;
         this._alive = true;
         this.compareItems = (item) => item.name;
         this.setChildrenVisibility = (column, visible, hiddenColumns) => {
@@ -8080,7 +8425,8 @@ class HeadCellDropdownComponent {
                 this.showParents(column, hiddenColumns);
             }
         };
-        this.dict = this._svc.dict;
+        this.locale = this._config.locale;
+        this.filterOptions = this._svc.filterOptions;
         this._svc.hiddenColumns
             .pipe(takeWhile((_) => this._alive), map((_) => [..._]))
             .subscribe((_) => {
@@ -8121,12 +8467,23 @@ class HeadCellDropdownComponent {
     pinColumn() {
         this._svc.pinColumn(this.column);
     }
+    sortAsc(event) {
+        this._svc.sortAsc(new SortEvent(this.column, event.shiftKey));
+    }
+    sortDesc(event) {
+        this._svc.sortDesc(new SortEvent(this.column, event.shiftKey));
+    }
     clearSort() {
         this._svc.clearSort(this.column);
     }
     clearAllSort() {
         this._svc.clearAllSort();
     }
+    // sortColumn(column: TableColumn, event: MouseEvent): void {
+    //   if (!event.defaultPrevented) {
+    //     this._svc.sort(new SortEvent(this.column, event.shiftKey));
+    //   }
+    // }
     hasFilteredColumns() {
         return StateUtil.hasFilteredColumns(this.state);
     }
@@ -8202,17 +8559,19 @@ class HeadCellDropdownComponent {
         return ArrayUtil.findRecursive(columns, (iterableNode) => iterableNode.columns?.indexOf(column) >= 0, 'columns');
     }
 }
-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: { listeners: { "keydown.enter": "enter()" }, 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\"\n                        [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 });
+HeadCellDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HeadCellDropdownComponent, deps: [{ token: TableService }, { token: TetaConfigService }, { 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", data: "data", dropDownOpen: "dropDownOpen" }, outputs: { dropDownOpenChange: "dropDownOpenChange", autosize: "autosize", autosizeAll: "autosizeAll" }, host: { listeners: { "keydown.enter": "enter()" } }, ngImport: i0, template: "<teta-tabs class=\"column_auto\" *ngIf=\"locale | async as loc\">\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          {{column.locked ? loc.unpin : loc.pin}}\n        </div>\n        <div class=\"list-divider\"></div>\n        <ng-container *ngIf=\"column.sortable\">\n          <div class=\"list-item list-item_interactive\"\n               (click)=\"sortAsc($event)\">\n            {{loc.sortAsc}}\n          </div>\n          <div class=\"list-item list-item_interactive\"\n               (click)=\"sortDesc($event)\">\n            {{loc.sortDesc}}\n          </div>\n          <ng-container *ngIf=\"hasSortedColumns()\">\n            <div class=\"list-item list-item_interactive\"\n                 *ngIf=\"sortParam\"\n                 (click)=\"clearSort()\">\n              {{loc.clearSort}}\n            </div>\n            <div class=\"list-item list-item_interactive\"\n                 (click)=\"clearAllSort()\">\n              {{loc.clearAllSort}}\n            </div>\n            <div class=\"list-divider\"></div>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"hasFilteredColumns()\">\n          <div class=\"list-item list-item_interactive\"\n               *ngIf=\"filtered\"\n               (click)=\"clearFilter()\">\n            {{loc.clearFilter}}\n          </div>\n          <div class=\"list-item list-item_interactive\"\n               (click)=\"clearAllFilters()\">\n            {{loc.clearAllFilters}}\n          </div>\n          <div class=\"list-divider\"></div>\n        </ng-container>\n        <div class=\"list-item list-item_interactive\" (click)=\"autosize.emit()\">\n          {{loc.autosizeColumn}}\n        </div>\n        <div class=\"list-item list-item_interactive\" (click)=\"autosizeAll.emit()\">\n          {{loc.autosizeAll}}\n        </div>\n        <div class=\"list-divider\"></div>\n        <div class=\"list-item list-item_interactive\" (click)=\"restoreDefaultColumns()\">\n          {{loc.resetColumnsSize}}\n        </div>\n      </div>\n    </ng-template>\n  </teta-tab>\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\"\n                        [data]=\"data\"\n                        [state]=\"state\"\n                        *ngIf=\"filterOptions | async as options\"\n                        [filterOptions]=\"options[column.name]\"></teta-filter-host>\n      <teta-toolbar class=\"justify-content-between\">\n        <button teta-button [palette]=\"'text'\" [view]=\"'ghost'\" (click)=\"clearFilter()\">\n          {{loc.clear}}\n        </button>\n        <button teta-button [palette]=\"'primary'\" (click)=\"applyFilter()\">\n          <teta-icon [name]=\"'tick'\"></teta-icon>\n          {{loc.apply}}\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]=\"'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          {{loc.all}}\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          {{loc.apply}}\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", "data", "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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TabTitleDirective, selector: "[tetaTabTitle]" }, { type: TabContentDirective, selector: "[tetaTabContent]" }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: TetaTemplateDirective, selector: "[tetaTemplate]", inputs: ["tetaTemplate"] }], pipes: { "async": i3.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\"\n                        [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: [{
+            args: [{ selector: 'teta-head-cell-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-tabs class=\"column_auto\" *ngIf=\"locale | async as loc\">\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          {{column.locked ? loc.unpin : loc.pin}}\n        </div>\n        <div class=\"list-divider\"></div>\n        <ng-container *ngIf=\"column.sortable\">\n          <div class=\"list-item list-item_interactive\"\n               (click)=\"sortAsc($event)\">\n            {{loc.sortAsc}}\n          </div>\n          <div class=\"list-item list-item_interactive\"\n               (click)=\"sortDesc($event)\">\n            {{loc.sortDesc}}\n          </div>\n          <ng-container *ngIf=\"hasSortedColumns()\">\n            <div class=\"list-item list-item_interactive\"\n                 *ngIf=\"sortParam\"\n                 (click)=\"clearSort()\">\n              {{loc.clearSort}}\n            </div>\n            <div class=\"list-item list-item_interactive\"\n                 (click)=\"clearAllSort()\">\n              {{loc.clearAllSort}}\n            </div>\n            <div class=\"list-divider\"></div>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"hasFilteredColumns()\">\n          <div class=\"list-item list-item_interactive\"\n               *ngIf=\"filtered\"\n               (click)=\"clearFilter()\">\n            {{loc.clearFilter}}\n          </div>\n          <div class=\"list-item list-item_interactive\"\n               (click)=\"clearAllFilters()\">\n            {{loc.clearAllFilters}}\n          </div>\n          <div class=\"list-divider\"></div>\n        </ng-container>\n        <div class=\"list-item list-item_interactive\" (click)=\"autosize.emit()\">\n          {{loc.autosizeColumn}}\n        </div>\n        <div class=\"list-item list-item_interactive\" (click)=\"autosizeAll.emit()\">\n          {{loc.autosizeAll}}\n        </div>\n        <div class=\"list-divider\"></div>\n        <div class=\"list-item list-item_interactive\" (click)=\"restoreDefaultColumns()\">\n          {{loc.resetColumnsSize}}\n        </div>\n      </div>\n    </ng-template>\n  </teta-tab>\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\"\n                        [data]=\"data\"\n                        [state]=\"state\"\n                        *ngIf=\"filterOptions | async as options\"\n                        [filterOptions]=\"options[column.name]\"></teta-filter-host>\n      <teta-toolbar class=\"justify-content-between\">\n        <button teta-button [palette]=\"'text'\" [view]=\"'ghost'\" (click)=\"clearFilter()\">\n          {{loc.clear}}\n        </button>\n        <button teta-button [palette]=\"'primary'\" (click)=\"applyFilter()\">\n          <teta-icon [name]=\"'tick'\"></teta-icon>\n          {{loc.apply}}\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]=\"'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          {{loc.all}}\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          {{loc.apply}}\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: TetaConfigService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { columns: [{
                 type: Input
             }], column: [{
                 type: Input
             }], state: [{
                 type: Input
+            }], data: [{
+                type: Input
             }], dropDownOpen: [{
                 type: Input
             }], dropDownOpenChange: [{
@@ -8221,12 +8580,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 type: Output
             }], autosizeAll: [{
                 type: Output
-            }], shadow: [{
-                type: HostBinding,
-                args: ['class.shadow-2']
-            }], bg: [{
-                type: HostBinding,
-                args: ['class.bg-background-50']
             }], enter: [{
                 type: HostListener,
                 args: ['keydown.enter']
@@ -8368,11 +8721,6 @@ class HeadCellComponent {
     autosizeAllColumns() {
         this._svc.autosizeAllColumns(this._elementRef.nativeElement);
     }
-    sortColumn(column, event) {
-        if (!event.defaultPrevented) {
-            this._svc.sort(new SortEvent(this.column, event.shiftKey));
-        }
-    }
     resizeStart(event) {
         const rect = this._elementRef.nativeElement.getBoundingClientRect();
         this._startPosition = rect.x;
@@ -8380,8 +8728,10 @@ class HeadCellComponent {
     }
     resizeProcess(event) {
         if (this._startPosition && event.pageX > 0) {
-            this._svc.resizeColumn(new ColumnResizeEvent(this.column, event.pageX - this._startPosition));
-            this._app.tick();
+            requestAnimationFrame(() => {
+                this._svc.resizeColumn(new ColumnResizeEvent(this.column, event.pageX - this._startPosition));
+                this._app.tick();
+            });
         }
     }
     resizeEnd() {
@@ -8389,14 +8739,19 @@ class HeadCellComponent {
     }
 }
 HeadCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HeadCellComponent, deps: [{ token: TableService }, { token: i0.ApplicationRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-HeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: HeadCellComponent, selector: "teta-head-cell", inputs: { column: "column", showHeadCellMenu: "showHeadCellMenu" }, host: { listeners: { "dragstart": "dragstart($event)", "dragenter": "dragenter($event)", "dragover": "allowDrop($event)", "dragleave": "dragleave($event)", "dragend": "dragend($event)", "drop": "drop($event)" } }, ngImport: i0, template: "<div draggable=\"true\" class=\"row row_auto\">\n  <div class=\"table-head__cell__wrapper\"\n       [ngClass]=\"column.headCellClass\"\n       (click)=\"sortColumn(column, $event)\">\n    <teta-icon *ngIf=\"iconName | async as icon\"\n               [palette]=\"'text'\"\n               [name]=\"icon\"></teta-icon>\n    <teta-head-cell-host [column]=\"column\"></teta-head-cell-host>\n    <teta-dropdown *ngIf=\"showHeadCellMenu\"\n                   [autoCloseIgnore]=\"['enter']\"\n                   [verticalAlign]=\"verticalAlign.bottom\"\n                   [appendToBody]=\"true\"\n                   [(open)]=\"dropDownOpen\"\n                   [align]=\"align.right\"\n                   (click)=\"$event.preventDefault()\"\n                   [class.table-head__cell__menu_open]=\"dropDownOpen\"\n                   class=\"table-head__cell__menu\">\n      <button tetaDropdownHead teta-button\n              [square]=\"true\"\n              [palette]=\"'text'\"\n              [view]=\"'ghost'\">\n        <teta-icon [palette]=\"'text'\" [name]=\"'menu'\"></teta-icon>\n      </button>\n      <teta-head-cell-dropdown tetaDropdownContent\n                               (autosize)=\"autosizeColumn()\"\n                               (autosizeAll)=\"autosizeAllColumns()\"\n                               [column]=\"column\"\n                               [columns]=\"columns | async\"\n                               [state]=\"state | async\"\n                               [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n    </teta-dropdown>\n  </div>\n  <div class=\"drop-area\"\n       draggable=\"false\"\n       [class.drop-area_left]=\"showDrag === 'left'\"\n       [class.drop-area_right]=\"showDrag === 'right'\"\n       *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n     draggable=\"false\"\n     (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n     (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n     [tetaResizeDrag]=\"'vertical'\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd()\"></div>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: HeadCellHostComponent, selector: "teta-head-cell-host", inputs: ["column"] }, { type: DropdownComponent, selector: "teta-dropdown" }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: HeadCellDropdownComponent, selector: "teta-head-cell-dropdown", inputs: ["columns", "column", "state", "dropDownOpen"], outputs: ["dropDownOpenChange", "autosize", "autosizeAll"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { type: ResizeDragDirective, selector: "[tetaResizeDrag]", inputs: ["tetaResizeDrag"], outputs: ["resizeStart", "resizeProcess", "resizeEnd"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: HeadCellComponent, selector: "teta-head-cell", inputs: { column: "column", showHeadCellMenu: "showHeadCellMenu", data: "data" }, host: { listeners: { "dragstart": "dragstart($event)", "dragenter": "dragenter($event)", "dragover": "allowDrop($event)", "dragleave": "dragleave($event)", "dragend": "dragend($event)", "drop": "drop($event)" }, properties: { "class.table-head__cell_active": "this.dropDownOpen" } }, ngImport: i0, template: "<div draggable=\"true\" class=\"row row_auto\">\n  <teta-dropdown [autoCloseIgnore]=\"['enter']\"\n                 [verticalAlign]=\"verticalAlign.bottom\"\n                 [appendToBody]=\"true\"\n                 [(open)]=\"dropDownOpen\"\n                 [align]=\"align.left\"\n                 (click)=\"$event.preventDefault()\"\n                 [class.table-head__cell__menu_open]=\"dropDownOpen\"\n                 class=\"column column_auto justify-content-center\">\n    <div tetaDropdownHead class=\"table-head__cell__wrapper\"\n         [ngClass]=\"column.headCellClass\">\n      <teta-head-cell-host [column]=\"column\" [data]=\"data\"></teta-head-cell-host>\n      <teta-icon *ngIf=\"iconName | async as icon\"\n                 [palette]=\"'text'\"\n                 [name]=\"icon\"></teta-icon>\n    </div>\n    <teta-head-cell-dropdown tetaDropdownContent\n                             *ngIf=\"showHeadCellMenu\"\n                             (autosize)=\"autosizeColumn()\"\n                             (autosizeAll)=\"autosizeAllColumns()\"\n                             [data]=\"data\"\n                             [column]=\"column\"\n                             [columns]=\"columns | async\"\n                             [state]=\"state | async\"\n                             [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n  </teta-dropdown>\n  <div class=\"drop-area\"\n       draggable=\"false\"\n       [class.drop-area_left]=\"showDrag === 'left'\"\n       [class.drop-area_right]=\"showDrag === 'right'\"\n       *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n     draggable=\"false\"\n     (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n     (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n     [tetaResizeDrag]=\"'vertical'\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd()\"></div>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"], components: [{ type: DropdownComponent, selector: "teta-dropdown" }, { type: HeadCellHostComponent, selector: "teta-head-cell-host", inputs: ["column", "data"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: HeadCellDropdownComponent, selector: "teta-head-cell-dropdown", inputs: ["columns", "column", "state", "data", "dropDownOpen"], outputs: ["dropDownOpenChange", "autosize", "autosizeAll"] }], directives: [{ type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { type: ResizeDragDirective, selector: "[tetaResizeDrag]", inputs: ["tetaResizeDrag"], outputs: ["resizeStart", "resizeProcess", "resizeEnd"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HeadCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-head-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div draggable=\"true\" class=\"row row_auto\">\n  <div class=\"table-head__cell__wrapper\"\n       [ngClass]=\"column.headCellClass\"\n       (click)=\"sortColumn(column, $event)\">\n    <teta-icon *ngIf=\"iconName | async as icon\"\n               [palette]=\"'text'\"\n               [name]=\"icon\"></teta-icon>\n    <teta-head-cell-host [column]=\"column\"></teta-head-cell-host>\n    <teta-dropdown *ngIf=\"showHeadCellMenu\"\n                   [autoCloseIgnore]=\"['enter']\"\n                   [verticalAlign]=\"verticalAlign.bottom\"\n                   [appendToBody]=\"true\"\n                   [(open)]=\"dropDownOpen\"\n                   [align]=\"align.right\"\n                   (click)=\"$event.preventDefault()\"\n                   [class.table-head__cell__menu_open]=\"dropDownOpen\"\n                   class=\"table-head__cell__menu\">\n      <button tetaDropdownHead teta-button\n              [square]=\"true\"\n              [palette]=\"'text'\"\n              [view]=\"'ghost'\">\n        <teta-icon [palette]=\"'text'\" [name]=\"'menu'\"></teta-icon>\n      </button>\n      <teta-head-cell-dropdown tetaDropdownContent\n                               (autosize)=\"autosizeColumn()\"\n                               (autosizeAll)=\"autosizeAllColumns()\"\n                               [column]=\"column\"\n                               [columns]=\"columns | async\"\n                               [state]=\"state | async\"\n                               [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n    </teta-dropdown>\n  </div>\n  <div class=\"drop-area\"\n       draggable=\"false\"\n       [class.drop-area_left]=\"showDrag === 'left'\"\n       [class.drop-area_right]=\"showDrag === 'right'\"\n       *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n     draggable=\"false\"\n     (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n     (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n     [tetaResizeDrag]=\"'vertical'\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd()\"></div>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"] }]
+            args: [{ selector: 'teta-head-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div draggable=\"true\" class=\"row row_auto\">\n  <teta-dropdown [autoCloseIgnore]=\"['enter']\"\n                 [verticalAlign]=\"verticalAlign.bottom\"\n                 [appendToBody]=\"true\"\n                 [(open)]=\"dropDownOpen\"\n                 [align]=\"align.left\"\n                 (click)=\"$event.preventDefault()\"\n                 [class.table-head__cell__menu_open]=\"dropDownOpen\"\n                 class=\"column column_auto justify-content-center\">\n    <div tetaDropdownHead class=\"table-head__cell__wrapper\"\n         [ngClass]=\"column.headCellClass\">\n      <teta-head-cell-host [column]=\"column\" [data]=\"data\"></teta-head-cell-host>\n      <teta-icon *ngIf=\"iconName | async as icon\"\n                 [palette]=\"'text'\"\n                 [name]=\"icon\"></teta-icon>\n    </div>\n    <teta-head-cell-dropdown tetaDropdownContent\n                             *ngIf=\"showHeadCellMenu\"\n                             (autosize)=\"autosizeColumn()\"\n                             (autosizeAll)=\"autosizeAllColumns()\"\n                             [data]=\"data\"\n                             [column]=\"column\"\n                             [columns]=\"columns | async\"\n                             [state]=\"state | async\"\n                             [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n  </teta-dropdown>\n  <div class=\"drop-area\"\n       draggable=\"false\"\n       [class.drop-area_left]=\"showDrag === 'left'\"\n       [class.drop-area_right]=\"showDrag === 'right'\"\n       *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n     draggable=\"false\"\n     (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n     (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n     [tetaResizeDrag]=\"'vertical'\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd()\"></div>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"] }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ApplicationRef }, { type: i0.ElementRef }]; }, propDecorators: { column: [{
                 type: Input
             }], showHeadCellMenu: [{
                 type: Input
+            }], data: [{
+                type: Input
+            }], dropDownOpen: [{
+                type: HostBinding,
+                args: ['class.table-head__cell_active']
             }], dragstart: [{
                 type: HostListener,
                 args: ['dragstart', ['$event']]
@@ -8435,38 +8790,52 @@ class TableHeadGroupComponent {
     get column() {
         return this._column;
     }
-    get _leaves() {
-        return TableUtil.getColumnLeaves(this._column)?.filter((_) => this._hiddenColumns.indexOf(_.name) < 0);
+    get flexGrow() {
+        if (this.column?.columns?.length > 0) {
+            const flat = ArrayUtil.flatten(this.column?.columns, 'columns', true);
+            return flat?.reduce((prev, curr) => prev + curr.flex, 0);
+        }
+        return this.column.flex;
     }
-    get gridColumnEnd() {
-        if (this._leaves?.length > 0) {
-            return `span ${this._leaves.length}`;
+    get flexBasis() {
+        if (this.column?.columns?.length > 0) {
+            const flat = ArrayUtil.flatten(this.column?.columns, 'columns', true);
+            return flat?.reduce((prev, curr) => prev + curr.width, 0);
         }
-        return null;
+        return this.column.width;
     }
-    get gridTemplateColumns() {
-        return TableUtil.getGridTemplateColumns(this._leaves);
+    get _leaves() {
+        return TableUtil.getColumnLeaves(this._column)?.filter((_) => this._hiddenColumns.indexOf(_.name) < 0);
     }
     columnIsHidden(column) {
         return this._svc.columnIsHidden(column);
     }
-    ngOnInit() { }
+    ngOnInit() {
+    }
     ngOnDestroy() {
         this._alive = false;
     }
 }
 TableHeadGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TableHeadGroupComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TableHeadGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TableHeadGroupComponent, selector: "teta-table-head-group", inputs: { showHeadCellMenu: "showHeadCellMenu", column: "column" }, host: { properties: { "style.grid-column-end": "this.gridColumnEnd" } }, ngImport: i0, template: "<ng-container *ngIf=\"column.columns && column.columns.length > 0\">\n  <div class=\"table-head__group__container\">\n    <div class=\"table-head__group__caption\">\n      {{column.caption}}\n    </div>\n    <div class=\"table-head__group__children\" [style.grid-template-columns]=\"gridTemplateColumns\">\n      <ng-container *ngFor=\"let col of column.columns\">\n        <teta-table-head-group\n          class=\"table-head__group\"\n          *ngIf=\"!columnIsHidden(col)\"\n          [showHeadCellMenu]=\"showHeadCellMenu\"\n          [column]=\"col\"></teta-table-head-group>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"!column.columns || column.columns.length === 0\">\n  <teta-head-cell\n    *ngIf=\"!columnIsHidden(column)\"\n    class=\"table-head__cell\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"\n    [attr.data-column]=\"column.name\"\n    [column]=\"column\"></teta-head-cell>\n</ng-container>\n", styles: [""], components: [{ type: TableHeadGroupComponent, selector: "teta-table-head-group", inputs: ["showHeadCellMenu", "column"] }, { type: HeadCellComponent, selector: "teta-head-cell", inputs: ["column", "showHeadCellMenu"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableHeadGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TableHeadGroupComponent, selector: "teta-table-head-group", inputs: { showHeadCellMenu: "showHeadCellMenu", data: "data", column: "column" }, host: { properties: { "style.flex-grow": "this.flexGrow", "style.min-width.px": "this.flexBasis", "style.flex-basis.px": "this.flexBasis" } }, ngImport: i0, template: "<ng-container *ngIf=\"column.columns && column.columns.length > 0\">\n  <div class=\"table-head__group__container\">\n    <div class=\"table-head__group__caption\">\n      {{column.caption}}\n    </div>\n    <div class=\"table-head__group__children\">\n      <ng-container *ngFor=\"let col of column.columns\">\n        <teta-table-head-group\n          class=\"table-head__group\"\n          *ngIf=\"!columnIsHidden(col)\"\n          [data]=\"data\"\n          [showHeadCellMenu]=\"showHeadCellMenu\"\n          [column]=\"col\"></teta-table-head-group>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"!column.columns || column.columns.length === 0\">\n  <teta-head-cell\n    *ngIf=\"!columnIsHidden(column)\"\n    class=\"table-head__cell\"\n    [data]=\"data\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"\n    [attr.data-column]=\"column.name\"\n    [column]=\"column\"></teta-head-cell>\n</ng-container>\n", styles: [""], components: [{ type: TableHeadGroupComponent, selector: "teta-table-head-group", inputs: ["showHeadCellMenu", "data", "column"] }, { type: HeadCellComponent, selector: "teta-head-cell", inputs: ["column", "showHeadCellMenu", "data"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TableHeadGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-table-head-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"column.columns && column.columns.length > 0\">\n  <div class=\"table-head__group__container\">\n    <div class=\"table-head__group__caption\">\n      {{column.caption}}\n    </div>\n    <div class=\"table-head__group__children\" [style.grid-template-columns]=\"gridTemplateColumns\">\n      <ng-container *ngFor=\"let col of column.columns\">\n        <teta-table-head-group\n          class=\"table-head__group\"\n          *ngIf=\"!columnIsHidden(col)\"\n          [showHeadCellMenu]=\"showHeadCellMenu\"\n          [column]=\"col\"></teta-table-head-group>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"!column.columns || column.columns.length === 0\">\n  <teta-head-cell\n    *ngIf=\"!columnIsHidden(column)\"\n    class=\"table-head__cell\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"\n    [attr.data-column]=\"column.name\"\n    [column]=\"column\"></teta-head-cell>\n</ng-container>\n", styles: [""] }]
+            args: [{ selector: 'teta-table-head-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"column.columns && column.columns.length > 0\">\n  <div class=\"table-head__group__container\">\n    <div class=\"table-head__group__caption\">\n      {{column.caption}}\n    </div>\n    <div class=\"table-head__group__children\">\n      <ng-container *ngFor=\"let col of column.columns\">\n        <teta-table-head-group\n          class=\"table-head__group\"\n          *ngIf=\"!columnIsHidden(col)\"\n          [data]=\"data\"\n          [showHeadCellMenu]=\"showHeadCellMenu\"\n          [column]=\"col\"></teta-table-head-group>\n      </ng-container>\n    </div>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"!column.columns || column.columns.length === 0\">\n  <teta-head-cell\n    *ngIf=\"!columnIsHidden(column)\"\n    class=\"table-head__cell\"\n    [data]=\"data\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"\n    [attr.data-column]=\"column.name\"\n    [column]=\"column\"></teta-head-cell>\n</ng-container>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { showHeadCellMenu: [{
                 type: Input
+            }], data: [{
+                type: Input
             }], column: [{
                 type: Input
-            }], gridColumnEnd: [{
+            }], flexGrow: [{
+                type: HostBinding,
+                args: ['style.flex-grow']
+            }], flexBasis: [{
+                type: HostBinding,
+                args: ['style.min-width.px']
+            }, {
                 type: HostBinding,
-                args: ['style.grid-column-end']
+                args: ['style.flex-basis.px']
             }] } });
 
 class TableHeadComponent {
@@ -8484,22 +8853,21 @@ class TableHeadComponent {
             const [columns, hiddenColumns] = values;
             this._hiddenColumns = hiddenColumns;
             this.columns = columns;
-            this.gridTemplateColumns = TableUtil.getGridTemplateColumns(ArrayUtil.flatten(columns, 'columns', true)
-                .filter((_) => this._hiddenColumns.indexOf(_.name) < 0)
-                .sort((a, b) => Number(b.locked) - Number(a.locked)));
+            const locked = ArrayUtil.flatten(columns, 'columns', true)
+                .filter((_) => this._hiddenColumns.indexOf(_.name) < 0 && _.locked);
+            const startWidth = this.selectType !== SelectType.none ? 28 : 0;
+            this.lockedFlex = locked.reduce((prev, curr) => prev + curr.flex, 0);
+            this.lockedWidth = locked.reduce((prev, curr) => prev + curr.width, startWidth);
             this._cdr.markForCheck();
         });
         this._svc.state.pipe(takeWhile((_) => this._alive)).subscribe((_) => {
             this.state = _;
             this._cdr.markForCheck();
         });
-    }
-    get getTemplateColumns() {
-        let template = this.gridTemplateColumns;
-        if (this.selectType !== SelectType.none) {
-            template = `48px ${template}`;
-        }
-        return template;
+        this._svc.displayData.pipe(takeWhile((_) => this._alive)).subscribe((_) => {
+            this.data = _;
+            this._cdr.markForCheck();
+        });
     }
     set columns(columns) {
         this._columns = columns;
@@ -8514,36 +8882,20 @@ class TableHeadComponent {
     get unlocked() {
         return this._columns.filter((_) => _.locked === false && this._hiddenColumns.indexOf(_.name) < 0);
     }
-    getSpan() {
-        if (this.locked?.length > 0) {
-            let span = this.locked.length;
-            if (this.selectType !== SelectType.none) {
-                span += 1;
-            }
-            return `span ${span}`;
-        }
-        return null;
-    }
-    getLockedGridTemplateColumns(columns) {
-        let template = TableUtil.getGridTemplateColumns(columns);
-        if (this.selectType !== SelectType.none) {
-            template = `48px ${template}`;
-        }
-        return template;
-    }
     track(index, item) {
         return item.name;
     }
-    ngOnInit() { }
+    ngOnInit() {
+    }
     ngOnDestroy() {
         this._alive = false;
     }
 }
 TableHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TableHeadComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TableHeadComponent, selector: "teta-table-head", inputs: { selectType: "selectType", showHeadCellMenu: "showHeadCellMenu" }, host: { properties: { "class.table-head": "this.tableHeadClass", "style.grid-template-columns": "this.getTemplateColumns" } }, ngImport: i0, template: "<div class=\"table-head_locked\"\n     *ngIf=\"locked?.length\"\n     [style.grid-template-columns]=\"getLockedGridTemplateColumns(locked)\"\n     [style.grid-column-end]=\"getSpan()\">\n  <teta-selection-head-cell *ngIf=\"selectType !== selectTypeEnum.none\"></teta-selection-head-cell>\n  <ng-container *ngFor=\"let column of locked; trackBy: track\">\n    <teta-table-head-group\n      class=\"table-head__group\"\n      [showHeadCellMenu]=\"showHeadCellMenu\"\n      [column]=\"column\"></teta-table-head-group>\n  </ng-container>\n</div>\n<ng-container *ngIf=\"unlocked?.length\">\n  <teta-selection-head-cell *ngIf=\"selectType !== selectTypeEnum.none && locked?.length < 1\"></teta-selection-head-cell>\n  <ng-container *ngFor=\"let column of unlocked; trackBy: track\">\n    <teta-table-head-group\n      class=\"table-head__group\"\n      [showHeadCellMenu]=\"showHeadCellMenu\"\n      [column]=\"column\"></teta-table-head-group>\n  </ng-container>\n</ng-container>\n", styles: [""], components: [{ type: SelectionHeadCellComponent, selector: "teta-selection-head-cell" }, { type: TableHeadGroupComponent, selector: "teta-table-head-group", inputs: ["showHeadCellMenu", "column"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TableHeadComponent, selector: "teta-table-head", inputs: { selectType: "selectType", showHeadCellMenu: "showHeadCellMenu" }, host: { properties: { "class.table-head": "this.tableHeadClass" } }, ngImport: i0, template: "<div class=\"table-head_locked\"\n     *ngIf=\"locked?.length\"\n     [style.flex-grow]=\"lockedFlex\"\n     [style.flex-basis.px]=\"lockedWidth\"\n     [style.min-width.px]=\"lockedWidth\">\n  <teta-selection-head-cell\n    *ngIf=\"selectType !== selectTypeEnum.none\"\n    style=\"width: 28px;\"></teta-selection-head-cell>\n  <teta-table-head-group\n    *ngFor=\"let column of locked; trackBy: track\"\n    class=\"table-head__group\"\n    [data]=\"data\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"\n    [column]=\"column\"></teta-table-head-group>\n</div>\n<ng-container *ngIf=\"unlocked?.length\">\n  <teta-selection-head-cell\n    *ngIf=\"selectType !== selectTypeEnum.none && locked?.length < 1\"\n    style=\"width: 28px;\"></teta-selection-head-cell>\n  <teta-table-head-group\n    *ngFor=\"let column of unlocked; trackBy: track\"\n    class=\"table-head__group\"\n    [data]=\"data\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"\n    [column]=\"column\"></teta-table-head-group>\n</ng-container>\n", styles: [""], components: [{ type: SelectionHeadCellComponent, selector: "teta-selection-head-cell" }, { type: TableHeadGroupComponent, selector: "teta-table-head-group", inputs: ["showHeadCellMenu", "data", "column"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TableHeadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-table-head', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-head_locked\"\n     *ngIf=\"locked?.length\"\n     [style.grid-template-columns]=\"getLockedGridTemplateColumns(locked)\"\n     [style.grid-column-end]=\"getSpan()\">\n  <teta-selection-head-cell *ngIf=\"selectType !== selectTypeEnum.none\"></teta-selection-head-cell>\n  <ng-container *ngFor=\"let column of locked; trackBy: track\">\n    <teta-table-head-group\n      class=\"table-head__group\"\n      [showHeadCellMenu]=\"showHeadCellMenu\"\n      [column]=\"column\"></teta-table-head-group>\n  </ng-container>\n</div>\n<ng-container *ngIf=\"unlocked?.length\">\n  <teta-selection-head-cell *ngIf=\"selectType !== selectTypeEnum.none && locked?.length < 1\"></teta-selection-head-cell>\n  <ng-container *ngFor=\"let column of unlocked; trackBy: track\">\n    <teta-table-head-group\n      class=\"table-head__group\"\n      [showHeadCellMenu]=\"showHeadCellMenu\"\n      [column]=\"column\"></teta-table-head-group>\n  </ng-container>\n</ng-container>\n", styles: [""] }]
+            args: [{ selector: 'teta-table-head', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-head_locked\"\n     *ngIf=\"locked?.length\"\n     [style.flex-grow]=\"lockedFlex\"\n     [style.flex-basis.px]=\"lockedWidth\"\n     [style.min-width.px]=\"lockedWidth\">\n  <teta-selection-head-cell\n    *ngIf=\"selectType !== selectTypeEnum.none\"\n    style=\"width: 28px;\"></teta-selection-head-cell>\n  <teta-table-head-group\n    *ngFor=\"let column of locked; trackBy: track\"\n    class=\"table-head__group\"\n    [data]=\"data\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"\n    [column]=\"column\"></teta-table-head-group>\n</div>\n<ng-container *ngIf=\"unlocked?.length\">\n  <teta-selection-head-cell\n    *ngIf=\"selectType !== selectTypeEnum.none && locked?.length < 1\"\n    style=\"width: 28px;\"></teta-selection-head-cell>\n  <teta-table-head-group\n    *ngFor=\"let column of unlocked; trackBy: track\"\n    class=\"table-head__group\"\n    [data]=\"data\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"\n    [column]=\"column\"></teta-table-head-group>\n</ng-container>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { selectType: [{
                 type: Input
             }], showHeadCellMenu: [{
@@ -8551,9 +8903,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             }], tableHeadClass: [{
                 type: HostBinding,
                 args: ['class.table-head']
-            }], getTemplateColumns: [{
-                type: HostBinding,
-                args: ['style.grid-template-columns']
             }] } });
 
 var AggregationType;
@@ -8594,7 +8943,7 @@ class SelectionCellComponent {
     }
 }
 SelectionCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SelectionCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SelectionCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SelectionCellComponent, selector: "teta-selection-cell", inputs: { row: "row" }, host: { properties: { "class.cell": "this.tableCellClass" } }, ngImport: i0, template: "<teta-checkbox [binary]=\"true\"\n               [noLabel]=\"true\"\n               [ngModel]=\"selectedRows?.indexOf(row) >= 0\"\n               (ngModelChange)=\"selectRow($event)\"></teta-checkbox>\n", styles: [":host{display:flex;align-items:center;justify-content:center}\n"], components: [{ type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "allowNull"] }], directives: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SelectionCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: SelectionCellComponent, selector: "teta-selection-cell", inputs: { row: "row" }, host: { properties: { "class.cell": "this.tableCellClass" } }, ngImport: i0, template: "<teta-checkbox [binary]=\"true\"\n               [noLabel]=\"true\"\n               [ngModel]=\"selectedRows?.indexOf(row) >= 0\"\n               (ngModelChange)=\"selectRow($event)\"></teta-checkbox>\n", styles: [":host{display:flex;align-items:center;justify-content:center}\n"], components: [{ type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "allowNull"] }], directives: [{ type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SelectionCellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-selection-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-checkbox [binary]=\"true\"\n               [noLabel]=\"true\"\n               [ngModel]=\"selectedRows?.indexOf(row) >= 0\"\n               (ngModelChange)=\"selectRow($event)\"></teta-checkbox>\n", styles: [":host{display:flex;align-items:center;justify-content:center}\n"] }]
@@ -8615,18 +8964,23 @@ class CellComponentBase {
         this._alive = true;
     }
     get edit() {
-        return (this._edit &&
-            this.svc.boolOrFuncCallback(this.column.editable)({
-                column: this.column,
-                row: this.row,
-            }));
+        return (this._edit && this.editable);
     }
-    valueChanged() {
-        this.svc.changeValue({
+    get editable() {
+        return this.svc.boolOrFuncCallback(this.column.editable)({
             column: this.column,
             row: this.row,
         });
     }
+    get index() {
+        return this.svc.getRowIndex(this.row);
+    }
+    valueChanged() {
+        this.svc.changeValue({
+            column: this.column.name,
+            row: this.index,
+        });
+    }
     ngOnDestroy() {
         this._alive = false;
     }
@@ -8637,38 +8991,27 @@ class CellComponentBase {
         this.svc.editRowStart
             .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,
-            // })
-            ) {
+            if (this.index === cell?.row && !this._edit) {
                 this.start(cell, 'row');
             }
-            if (this.row !== cell?.row && this._edit) {
+            if (this.index !== cell?.row && this._edit) {
                 this.stop();
             }
         });
         this.svc.editCellStart
             .pipe(takeWhile((_) => this._alive))
             .subscribe((cell) => {
-            if (this.row === cell.row &&
-                this.column.name === cell.column.name &&
-                !this._edit) {
+            if (this.index === cell?.row && this.column.name === cell?.column && !this._edit) {
                 this.start(cell, 'cell');
             }
-            if ((this.row !== cell.row || this.column.name !== cell.column.name) &&
-                this._edit) {
+            if ((this.index !== cell?.row || this.column.name !== cell?.column) && this._edit) {
                 this.stop();
             }
         });
         this.svc.valueSet
             .pipe(takeWhile((_) => this._alive))
             .subscribe((cellValue) => {
-            if (this.row === cellValue.cell.row
-                && this.column.name === cellValue.cell.column.name) {
+            if (this.index === cellValue.row && this.column.name === cellValue.column) {
                 this.row.data[this.column.name] = cellValue.value;
                 this.cdr.detectChanges();
             }
@@ -8676,15 +9019,15 @@ class CellComponentBase {
         this.svc.valueChanged
             .pipe(takeWhile((_) => this._alive))
             .subscribe((cellValue) => {
-            if (this.row === cellValue.row) {
+            if (this.index === cellValue.row) {
                 this.cdr.detectChanges();
             }
         });
     }
     start(initiator, type) {
         this._edit = true;
+        this.cdr.detectChanges();
         this.startEdit(initiator, type);
-        this.cdr.markForCheck();
     }
     stop() {
         this._edit = false;
@@ -8717,12 +9060,16 @@ class NumericCellComponent extends CellComponentBase {
         super.ngOnInit();
     }
     startEdit(initiator, type) {
-        if (initiator?.column.name === this.column.name) {
-            setTimeout(() => {
-                this.input?.nativeElement.focus();
-                this.input?.nativeElement.select();
-                this.cdr.markForCheck();
-            }, 0);
+        if (initiator?.column === this.column.name) {
+            this.cdr.detectChanges();
+            this.input.nativeElement?.focus();
+            // this.input.nativeElement?.select();
+            // this.cdr.detectChanges();
+            // setTimeout(() => {
+            //   this.input?.nativeElement.focus();
+            //   this.input?.nativeElement.select();
+            //   this.cdr.markForCheck();
+            // }, 0);
         }
     }
     stopEdit() {
@@ -8730,10 +9077,10 @@ class NumericCellComponent extends CellComponentBase {
     }
 }
 NumericCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NumericCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-NumericCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: NumericCellComponent, selector: "teta-numeric-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text cell-text_numeric\">\n  {{row.data[column.name] | tetaNumber : 2}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       tetaOnlyNumber\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row.data[column.name]\"\n       (ngModelChange)=\"row.data[column.name]=$event;\"/>\n", styles: [":host{justify-content:end}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator"] }, { 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"] }], pipes: { "tetaNumber": NumberPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+NumericCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: NumericCellComponent, selector: "teta-numeric-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row.data[column.name] | tetaNumber : 2}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       tetaOnlyNumber\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row.data[column.name]\"\n       (ngModelChange)=\"row.data[column.name]=$event;\"/>\n", styles: [""], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "tetaNumber": NumberPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NumericCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-numeric-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text cell-text_numeric\">\n  {{row.data[column.name] | tetaNumber : 2}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       tetaOnlyNumber\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row.data[column.name]\"\n       (ngModelChange)=\"row.data[column.name]=$event;\"/>\n", styles: [":host{justify-content:end}\n"] }]
+            args: [{ selector: 'teta-numeric-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row.data[column.name] | tetaNumber : 2}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       tetaOnlyNumber\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row.data[column.name]\"\n       (ngModelChange)=\"row.data[column.name]=$event;\"/>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
                 type: Input
             }], row: [{
@@ -8758,7 +9105,7 @@ class DateCellComponent extends CellComponentBase {
         this.cdr.detectChanges();
     }
     startEdit(initiator, type) {
-        if (initiator?.column.name === this.column.name) {
+        if (initiator?.column === this.column.name) {
             setTimeout(() => {
                 this.input?.focus();
                 this.cdr.markForCheck();
@@ -8770,10 +9117,10 @@ class DateCellComponent extends CellComponentBase {
     }
 }
 DateCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DateCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DateCellComponent, selector: "teta-date-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\">\n  {{row.data[column.name] | date : 'dd.MM.yyyy'}}\n</span>\n<teta-date-picker class=\"datepicker-table\"\n                  #input\n                  *ngIf=\"edit\"\n                  [appendToBody]=\"true\"\n                  [showTime]=\"false\"\n                  [ngModel]=\"row.data[column.name]\"\n                  (ngModelChange)=\"setValue($event)\"\n></teta-date-picker>\n", styles: [""], components: [{ type: DatePickerComponent, selector: "teta-date-picker", inputs: ["disabled", "invalid", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "minYearDate", "maxYearDate", "align", "verticalAlign", "appendToBody", "showTime", "format"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }], pipes: { "date": i2.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DateCellComponent, selector: "teta-date-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row.data[column.name] | date : 'dd.MM.yyyy'}}\n</span>\n<teta-date-picker class=\"datepicker-table\"\n                  #input\n                  *ngIf=\"edit\"\n                  [appendToBody]=\"true\"\n                  [showTime]=\"false\"\n                  [ngModel]=\"row.data[column.name]\"\n                  (ngModelChange)=\"setValue($event)\"\n></teta-date-picker>\n", styles: [""], components: [{ type: DatePickerComponent, selector: "teta-date-picker", inputs: ["disabled", "invalid", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "minYearDate", "maxYearDate", "align", "verticalAlign", "appendToBody", "allowNull", "backdrop", "showTime", "format"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i3.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DateCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-date-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\">\n  {{row.data[column.name] | date : 'dd.MM.yyyy'}}\n</span>\n<teta-date-picker class=\"datepicker-table\"\n                  #input\n                  *ngIf=\"edit\"\n                  [appendToBody]=\"true\"\n                  [showTime]=\"false\"\n                  [ngModel]=\"row.data[column.name]\"\n                  (ngModelChange)=\"setValue($event)\"\n></teta-date-picker>\n", styles: [""] }]
+            args: [{ selector: 'teta-date-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row.data[column.name] | date : 'dd.MM.yyyy'}}\n</span>\n<teta-date-picker class=\"datepicker-table\"\n                  #input\n                  *ngIf=\"edit\"\n                  [appendToBody]=\"true\"\n                  [showTime]=\"false\"\n                  [ngModel]=\"row.data[column.name]\"\n                  (ngModelChange)=\"setValue($event)\"\n></teta-date-picker>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
                 type: Input
             }], row: [{
@@ -8809,7 +9156,7 @@ class ListCellComponent extends CellComponentBase {
         this.valueChanged();
     }
     startEdit(initiator, type) {
-        if (initiator?.column.name === this.column.name) {
+        if (initiator?.column === this.column.name) {
             setTimeout(() => {
                 this.input?.focus();
                 this.cdr.markForCheck();
@@ -8836,10 +9183,10 @@ class ListCellComponent extends CellComponentBase {
     }
 }
 ListCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ListCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ListCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ListCellComponent, selector: "teta-list-cell", inputs: { column: "column", row: "row", filterOptions: "filterOptions" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\">\n  {{value}}\n</span>\n<teta-select #input\n             class=\"row_auto select-table\"\n             *ngIf=\"edit\"\n             [allowNull]=\"!column.required\"\n             [verticalAlign]=\"verticalAlign.auto\"\n             [appendToBody]=\"true\"\n             [options]=\"displayFilterOptions\"\n             [valueRef]=\"'id'\"\n             [textRef]=\"'name'\"\n             [ngModel]=\"row.data[column.name]\"\n             (ngModelChange)=\"setValue($event)\">\n</teta-select>\n", styles: [""], components: [{ type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "valueRef", "textRef", "searchRef"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ListCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ListCellComponent, selector: "teta-list-cell", inputs: { column: "column", row: "row", filterOptions: "filterOptions" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{value}}\n</span>\n<teta-select #input\n             class=\"row_auto select-table\"\n             *ngIf=\"edit\"\n             [allowNull]=\"!column.required\"\n             [verticalAlign]=\"verticalAlign.auto\"\n             [appendToBody]=\"true\"\n             [options]=\"displayFilterOptions\"\n             [valueRef]=\"'id'\"\n             [textRef]=\"'name'\"\n             [ngModel]=\"row.data[column.name]\"\n             (ngModelChange)=\"setValue($event)\">\n</teta-select>\n", styles: [""], components: [{ type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "valueRef", "textRef", "searchRef"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ListCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-list-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\">\n  {{value}}\n</span>\n<teta-select #input\n             class=\"row_auto select-table\"\n             *ngIf=\"edit\"\n             [allowNull]=\"!column.required\"\n             [verticalAlign]=\"verticalAlign.auto\"\n             [appendToBody]=\"true\"\n             [options]=\"displayFilterOptions\"\n             [valueRef]=\"'id'\"\n             [textRef]=\"'name'\"\n             [ngModel]=\"row.data[column.name]\"\n             (ngModelChange)=\"setValue($event)\">\n</teta-select>\n", styles: [""] }]
+            args: [{ selector: 'teta-list-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{value}}\n</span>\n<teta-select #input\n             class=\"row_auto select-table\"\n             *ngIf=\"edit\"\n             [allowNull]=\"!column.required\"\n             [verticalAlign]=\"verticalAlign.auto\"\n             [appendToBody]=\"true\"\n             [options]=\"displayFilterOptions\"\n             [valueRef]=\"'id'\"\n             [textRef]=\"'name'\"\n             [ngModel]=\"row.data[column.name]\"\n             (ngModelChange)=\"setValue($event)\">\n</teta-select>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
                 type: Input
             }], row: [{
@@ -8864,23 +9211,29 @@ class StringCellComponent extends CellComponentBase {
         super.ngOnInit();
     }
     startEdit(initiator, type) {
-        if (initiator?.column.name === this.column.name) {
-            this.cdr.markForCheck();
-            setTimeout(() => {
-                this.input.nativeElement?.focus();
-                this.input.nativeElement?.select();
-            }, 0);
+        if (initiator?.column === this.column.name) {
+            this.cdr.detectChanges();
+            this.input.nativeElement?.focus();
+            this.input.nativeElement?.select();
+            // this.cdr.detectChanges();
+            // this.input.nativeElement?.focus();
+            // this.input.nativeElement?.select();
+            // this.cdr.detectChanges();
+            // setTimeout(() => {
+            //   this.input.nativeElement?.focus();
+            //   this.input.nativeElement?.select();
+            // }, 0);
         }
     }
     stopEdit() {
-        this.cdr.markForCheck();
+        this.cdr.detectChanges();
     }
 }
 StringCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: StringCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-StringCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: StringCellComponent, selector: "teta-string-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\">\n  {{row.data[column.name]}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row.data[column.name]\"\n       (ngModelChange)=\"row.data[column.name]=$event\"/>\n\n", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+StringCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: StringCellComponent, selector: "teta-string-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row.data[column.name]}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row.data[column.name]\"\n       (ngModelChange)=\"row.data[column.name]=$event\"/>\n\n", styles: [""], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: StringCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-string-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\">\n  {{row.data[column.name]}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row.data[column.name]\"\n       (ngModelChange)=\"row.data[column.name]=$event\"/>\n\n", styles: [""] }]
+            args: [{ selector: 'teta-string-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row.data[column.name]}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row.data[column.name]\"\n       (ngModelChange)=\"row.data[column.name]=$event\"/>\n\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
                 type: Input
             }], row: [{
@@ -8903,7 +9256,7 @@ class BooleanCellComponent extends CellComponentBase {
         super.ngOnInit();
     }
     startEdit(initiator, type) {
-        if (initiator?.column.name === this.column.name) {
+        if (initiator?.column === this.column.name) {
             this.cdr.markForCheck();
             setTimeout(() => {
                 this.input?.nativeElement.focus();
@@ -8915,10 +9268,10 @@ class BooleanCellComponent extends CellComponentBase {
     }
 }
 BooleanCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BooleanCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-BooleanCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: BooleanCellComponent, selector: "teta-boolean-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\">\n  {{ row.data[column.name] }}\n</span>\n<teta-checkbox\n  #input\n  *ngIf=\"edit\"\n  [binary]=\"true\"\n  [(ngModel)]=\"row.data[column.name]\"\n  (blur)=\"setValue()\"\n></teta-checkbox>\n", styles: [""], components: [{ type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "allowNull"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+BooleanCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: BooleanCellComponent, selector: "teta-boolean-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{ row.data[column.name] }}\n</span>\n<teta-checkbox\n  #input\n  *ngIf=\"edit\"\n  [binary]=\"true\"\n  [(ngModel)]=\"row.data[column.name]\"\n  (blur)=\"setValue()\"\n></teta-checkbox>\n", styles: [""], components: [{ type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "allowNull"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: BooleanCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-boolean-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\">\n  {{ row.data[column.name] }}\n</span>\n<teta-checkbox\n  #input\n  *ngIf=\"edit\"\n  [binary]=\"true\"\n  [(ngModel)]=\"row.data[column.name]\"\n  (blur)=\"setValue()\"\n></teta-checkbox>\n", styles: [""] }]
+            args: [{ selector: 'teta-boolean-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{ row.data[column.name] }}\n</span>\n<teta-checkbox\n  #input\n  *ngIf=\"edit\"\n  [binary]=\"true\"\n  [(ngModel)]=\"row.data[column.name]\"\n  (blur)=\"setValue()\"\n></teta-checkbox>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
                 type: Input
             }], row: [{
@@ -9015,11 +9368,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             }] } });
 
 class TableBodyComponent {
-    constructor(_svc, _cdr) {
+    constructor(_svc, _config, _cdr) {
         this._svc = _svc;
+        this._config = _config;
         this._cdr = _cdr;
-        this.tableBodyClass = true;
         this.selectedRows = [];
+        this.tableBodyClass = true;
         this.locked = [];
         this.unlocked = [];
         this.selectTypeEnum = SelectType;
@@ -9037,13 +9391,13 @@ class TableBodyComponent {
             }
             return success(data);
         };
+        this.locale = this._config.locale;
         combineLatest([this._svc.columns, this._svc.hiddenColumns])
             .pipe(takeWhile((_) => this._alive))
             .subscribe((values) => {
             const [columns, hiddenColumns] = values;
             this._hiddenColumns = hiddenColumns;
             this.columns = ArrayUtil.flatten(columns, 'columns', true).filter((_) => this._hiddenColumns.indexOf(_.name) < 0);
-            this.gridTemplateColumns = TableUtil.getGridTemplateColumns(this.columns.sort((a, b) => Number(b.locked) - Number(a.locked)));
             this._cdr.markForCheck();
         });
         this._svc.displayData.pipe(takeWhile((_) => this._alive)).subscribe((_) => {
@@ -9057,12 +9411,6 @@ class TableBodyComponent {
         this._svc.scrollIndex
             .pipe(takeWhile((_) => this._alive))
             .subscribe(async (_) => {
-            // if (this.viewport && this.dataSource && _ !== null) {
-            //   await this.dataSource.adapter.relax();
-            //   await this.dataSource.adapter.fix({
-            //     scrollPosition: (_ + 1) * 24,
-            //   });
-            // }
             if (this.viewport) {
                 this.viewport.scrollToIndex(_, 'smooth');
             }
@@ -9085,6 +9433,11 @@ class TableBodyComponent {
         this._columns = columns;
         this.locked = this._columns?.filter((_) => _.locked === true);
         this.unlocked = this._columns?.filter((_) => _.locked === false);
+        const startWidth = this.selectType !== SelectType.none ? 28 : 0;
+        this.lockedFlex = this.locked.reduce((prev, curr) => prev + curr.flex, 0);
+        this.lockedWidth = this.locked.reduce((prev, curr) => prev + curr.width, startWidth);
+        this.totalFlex = this._columns.reduce((prev, curr) => prev + curr.flex, 0);
+        this.totalWidth = this._columns.reduce((prev, curr) => prev + curr.width, startWidth);
     }
     get columns() {
         return this._columns;
@@ -9113,43 +9466,19 @@ class TableBodyComponent {
     }
     getAggregateText(column) {
         if (column.aggregate === AggregationType.sum) {
-            return 'Сумма=';
+            return 'sum';
         }
         if (column.aggregate === AggregationType.avg) {
-            return 'Среднее=';
+            return 'avg';
         }
         if (column.aggregate === AggregationType.min) {
-            return 'Мин=';
+            return 'min';
         }
         if (column.aggregate === AggregationType.max) {
-            return 'Макс=';
+            return 'max';
         }
         return '';
     }
-    getSpan() {
-        if (this.locked?.length > 0) {
-            let span = this.locked.length;
-            if (this.selectType !== SelectType.none) {
-                span += 1;
-            }
-            return `span ${span}`;
-        }
-        return null;
-    }
-    getTemplateColumns() {
-        let template = this.gridTemplateColumns;
-        if (this.selectType !== SelectType.none) {
-            template = `48px ${template}`;
-        }
-        return template;
-    }
-    getLockedGridTemplateColumns(columns) {
-        let template = TableUtil.getGridTemplateColumns(columns);
-        if (this.selectType !== SelectType.none) {
-            template = `48px ${template}`;
-        }
-        return template;
-    }
     trackRow(index, row) {
         return index;
     }
@@ -9173,16 +9502,16 @@ class TableBodyComponent {
             : current.data[columnName], null);
     }
 }
-TableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TableBodyComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TableBodyComponent, selector: "teta-table-body", inputs: { virtual: "virtual", activeRow: "activeRow", rowHeight: "rowHeight", additionalComponent: "additionalComponent", tree: "tree", aggregate: "aggregate", grouping: "grouping", groupRowComponent: "groupRowComponent", openLevels: "openLevels", selectType: "selectType", rowClass: "rowClass" }, host: { properties: { "class.table-body": "this.tableBodyClass" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual\"\n                             class=\"table-body-container\"\n                             [itemSize]=\"24\">\n  <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n</cdk-virtual-scroll-viewport>\n<div *ngIf=\"!virtual\"\n     class=\"table-body-container\"\n     [style.grid-template-rows]=\"rowHeight + 'px'\"\n     [style.grid-auto-rows]=\"rowHeight + 'px'\"\n     [style.grid-template-columns]=\"getTemplateColumns()\">\n  <ng-container *ngFor=\"let row of data; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"aggregate\">\n    <ng-container *ngTemplateOutlet=\"aggTemplate;\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <div class=\"table-row\"\n       (click)=\"setActiveRow(row)\"\n       [attr.data-row]=\"rowIndex\"\n       [ngClass]=\"rowClass ? rowClass(row, rowIndex) : ''\"\n       [class.table-row_virtual]=\"virtual\"\n       [style.grid-template-columns]=\"virtual ? getTemplateColumns() : ''\"\n       [class.table-row_active]=\"row === activeRow || selectedRows.indexOf(row) >= 0\">\n    <ng-container *ngIf=\"!grouping\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.grid-template-columns]=\"getLockedGridTemplateColumns(locked)\"\n           [style.zIndex]=\"row === activeRow ? 1 : 'unset'\"\n           [style.grid-column-end]=\"getSpan()\">\n        <teta-selection-cell *ngIf=\"selectType !== selectTypeEnum.none && locked.length\"\n                             [row]=\"row\"></teta-selection-cell>\n        <teta-cell\n          *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n          [attr.data-row]=\"rowIndex\"\n          [attr.data-column]=\"column.name\"\n          [column]=\"column\"\n          [filterOptions]=\"dict[column.name]\"\n          [dict]=\"dict\"\n          [row]=\"row\"\n          [ngClass]=\"column.cellClass\"\n          [attr.tabindex]=\"0\"\n        ></teta-cell>\n      </div>\n      <teta-selection-cell *ngIf=\"selectType !== selectTypeEnum.none && locked.length < 1\"\n                           [row]=\"row\"></teta-selection-cell>\n      <teta-cell\n        *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-column]=\"column.name\"\n        [column]=\"column\"\n        [filterOptions]=\"dict[column.name]\"\n        [dict]=\"dict\"\n        [row]=\"row\"\n        [ngClass]=\"column.cellClass\"\n        [attr.tabindex]=\"0\"\n      ></teta-cell>\n    </ng-container>\n    <ng-container *ngIf=\"grouping\">\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #aggTemplate>\n  <div class=\"table-row\"\n       *ngIf=\"aggregate\"\n       [class.table-row_virtual]=\"virtual\"\n       [style.grid-template-columns]=\"virtual ? getTemplateColumns() : ''\">\n    <div class=\"table-row_locked\"\n         *ngIf=\"locked.length > 0\"\n         [style.grid-template-columns]=\"getLockedGridTemplateColumns(locked)\"\n         [style.grid-column-end]=\"getSpan()\">\n      <div class=\"cell align-center justify-content-center\">\n        <teta-icon [name]=\"'sumColor'\"></teta-icon>\n      </div>\n      <div class=\"cell cell-component justify-content-end\"\n           *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n           [attr.data-column]=\"column.name\"\n           [ngClass]=\"column.cellClass\"\n           [attr.tabindex]=\"0\">\n        <span class=\"cell-text cell-text_numeric font-title-3\">\n          {{getAggregateText(column)}}:\n          {{getAggregateValue(column) | tetaNumber : 2}}\n        </span>\n      </div>\n    </div>\n    <div class=\"cell align-center justify-content-center\"\n         *ngIf=\"selectType !== selectTypeEnum.none && locked.length < 1\">\n      <teta-icon [name]=\"'sumColor'\"></teta-icon>\n    </div>\n    <div class=\"cell cell-component justify-content-end\"\n         *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n         [attr.data-column]=\"column.name\"\n         [ngClass]=\"column.cellClass\"\n         [attr.tabindex]=\"0\">\n      <span class=\"cell-text cell-text_numeric font-title-3\">\n        {{getAggregateText(column)}}\n        {{getAggregateValue(column) | tetaNumber : 2}}\n      </span>\n    </div>\n  </div>\n</ng-template>\n", styles: [""], components: [{ type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: SelectionCellComponent, selector: "teta-selection-cell", inputs: ["row"] }, { type: CellComponent, selector: "teta-cell", inputs: ["column", "filterOptions", "dict", "row"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "tetaNumber": NumberPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TableBodyComponent, deps: [{ token: TableService }, { token: TetaConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TableBodyComponent, selector: "teta-table-body", inputs: { virtual: "virtual", activeRow: "activeRow", selectedRows: "selectedRows", additionalComponent: "additionalComponent", tree: "tree", aggregate: "aggregate", grouping: "grouping", groupRowComponent: "groupRowComponent", openLevels: "openLevels", selectType: "selectType", rowClass: "rowClass" }, host: { properties: { "class.table-body": "this.tableBodyClass" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual\"\n                             class=\"table-body-container\"\n                             [itemSize]=\"28\">\n  <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n</cdk-virtual-scroll-viewport>\n<div *ngIf=\"!virtual\"\n     class=\"table-body-container\">\n  <ng-container *ngFor=\"let row of data; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"aggregate\">\n    <ng-container *ngTemplateOutlet=\"aggTemplate;\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <div class=\"table-row\"\n       (click)=\"setActiveRow(row)\"\n       (contextmenu)=\"setActiveRow(row)\"\n       [attr.data-row]=\"rowIndex\"\n       [class.table-row_odd]=\"rowIndex % 2 === 1\"\n       [ngClass]=\"rowClass ? rowClass(row, rowIndex) : ''\"\n       [class.table-row_active]=\"row === activeRow || (selectedRows && selectedRows.indexOf(row) >= 0)\"\n       [style.flex-grow]=\"totalFlex\"\n       [style.flex-basis.px]=\"totalWidth\"\n       [style.min-width.px]=\"totalWidth\">\n    <ng-container *ngIf=\"!grouping\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\"\n           [style.zIndex]=\"row === activeRow ? 1 : 'unset'\">\n        <teta-selection-cell *ngIf=\"selectType !== selectTypeEnum.none && locked.length\"\n                             [row]=\"row\"\n                             style=\"width: 28px;\"></teta-selection-cell>\n        <teta-cell\n          *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n          [attr.data-row]=\"rowIndex\"\n          [attr.data-column]=\"column.name\"\n          [column]=\"column\"\n          [filterOptions]=\"dict?dict[column.name]:[]\"\n          [dict]=\"dict\"\n          [row]=\"row\"\n          [ngClass]=\"column.cellClass\"\n          [attr.tabindex]=\"0\"\n          [style.flex-grow]=\"column.flex\"\n          [style.flex-basis.px]=\"column.width\"\n        ></teta-cell>\n      </div>\n      <teta-selection-cell *ngIf=\"selectType !== selectTypeEnum.none && locked.length < 1\"\n                           [row]=\"row\"\n                           style=\"width: 28px;\"></teta-selection-cell>\n      <teta-cell\n        *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-column]=\"column.name\"\n        [column]=\"column\"\n        [filterOptions]=\"dict?dict[column.name]:[]\"\n        [dict]=\"dict\"\n        [row]=\"row\"\n        [ngClass]=\"column.cellClass\"\n        [attr.tabindex]=\"0\"\n        [style.flex-grow]=\"column.flex\"\n        [style.flex-basis.px]=\"column.width\"\n      ></teta-cell>\n    </ng-container>\n    <ng-container *ngIf=\"grouping\">\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #aggTemplate>\n  <ng-container *ngIf=\"locale | async as loc\">\n    <div class=\"table-row\"\n         *ngIf=\"aggregate\"\n         [class.table-row_virtual]=\"virtual\"\n         [style.flex-grow]=\"virtual ? totalFlex : ''\"\n         [style.flex-basis.px]=\"virtual ? totalWidth : ''\"\n         [style.min-width.px]=\"virtual ? totalWidth : ''\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\">\n        <div class=\"cell align-center justify-content-center\"\n             style=\"width: 28px;\">\n          <teta-icon [name]=\"'sumColor'\"></teta-icon>\n        </div>\n        <div class=\"cell cell-component justify-content-end\"\n             *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n             [attr.data-column]=\"column.name\"\n             [ngClass]=\"column.cellClass\"\n             [attr.tabindex]=\"0\"\n             [style.flex-grow]=\"column.flex\"\n             [style.flex-basis.px]=\"column.width\">\n        <span class=\"cell-text cell-text_numeric font-title-3\">\n          {{loc[getAggregateText(column)]}}:\n          {{getAggregateValue(column) | tetaNumber : 2}}\n        </span>\n        </div>\n      </div>\n      <div class=\"cell align-center justify-content-center\"\n           style=\"width: 28px;\"\n           *ngIf=\"selectType !== selectTypeEnum.none && locked.length < 1\">\n        <teta-icon [name]=\"'sumColor'\"></teta-icon>\n      </div>\n      <div class=\"cell cell-component justify-content-end\"\n           *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n           [attr.data-column]=\"column.name\"\n           [ngClass]=\"column.cellClass\"\n           [attr.tabindex]=\"0\"\n           [style.flex-grow]=\"column.flex\"\n           [style.flex-basis.px]=\"column.width\">\n      <span class=\"cell-text cell-text_numeric font-title-3\">\n        {{loc[getAggregateText(column)]}}:\n        {{getAggregateValue(column) | tetaNumber : 2}}\n      </span>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: [""], components: [{ type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: SelectionCellComponent, selector: "teta-selection-cell", inputs: ["row"] }, { type: CellComponent, selector: "teta-cell", inputs: ["column", "filterOptions", "dict", "row"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i3.AsyncPipe, "tetaNumber": NumberPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TableBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-table-body', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual\"\n                             class=\"table-body-container\"\n                             [itemSize]=\"24\">\n  <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n</cdk-virtual-scroll-viewport>\n<div *ngIf=\"!virtual\"\n     class=\"table-body-container\"\n     [style.grid-template-rows]=\"rowHeight + 'px'\"\n     [style.grid-auto-rows]=\"rowHeight + 'px'\"\n     [style.grid-template-columns]=\"getTemplateColumns()\">\n  <ng-container *ngFor=\"let row of data; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"aggregate\">\n    <ng-container *ngTemplateOutlet=\"aggTemplate;\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <div class=\"table-row\"\n       (click)=\"setActiveRow(row)\"\n       [attr.data-row]=\"rowIndex\"\n       [ngClass]=\"rowClass ? rowClass(row, rowIndex) : ''\"\n       [class.table-row_virtual]=\"virtual\"\n       [style.grid-template-columns]=\"virtual ? getTemplateColumns() : ''\"\n       [class.table-row_active]=\"row === activeRow || selectedRows.indexOf(row) >= 0\">\n    <ng-container *ngIf=\"!grouping\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.grid-template-columns]=\"getLockedGridTemplateColumns(locked)\"\n           [style.zIndex]=\"row === activeRow ? 1 : 'unset'\"\n           [style.grid-column-end]=\"getSpan()\">\n        <teta-selection-cell *ngIf=\"selectType !== selectTypeEnum.none && locked.length\"\n                             [row]=\"row\"></teta-selection-cell>\n        <teta-cell\n          *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n          [attr.data-row]=\"rowIndex\"\n          [attr.data-column]=\"column.name\"\n          [column]=\"column\"\n          [filterOptions]=\"dict[column.name]\"\n          [dict]=\"dict\"\n          [row]=\"row\"\n          [ngClass]=\"column.cellClass\"\n          [attr.tabindex]=\"0\"\n        ></teta-cell>\n      </div>\n      <teta-selection-cell *ngIf=\"selectType !== selectTypeEnum.none && locked.length < 1\"\n                           [row]=\"row\"></teta-selection-cell>\n      <teta-cell\n        *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-column]=\"column.name\"\n        [column]=\"column\"\n        [filterOptions]=\"dict[column.name]\"\n        [dict]=\"dict\"\n        [row]=\"row\"\n        [ngClass]=\"column.cellClass\"\n        [attr.tabindex]=\"0\"\n      ></teta-cell>\n    </ng-container>\n    <ng-container *ngIf=\"grouping\">\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #aggTemplate>\n  <div class=\"table-row\"\n       *ngIf=\"aggregate\"\n       [class.table-row_virtual]=\"virtual\"\n       [style.grid-template-columns]=\"virtual ? getTemplateColumns() : ''\">\n    <div class=\"table-row_locked\"\n         *ngIf=\"locked.length > 0\"\n         [style.grid-template-columns]=\"getLockedGridTemplateColumns(locked)\"\n         [style.grid-column-end]=\"getSpan()\">\n      <div class=\"cell align-center justify-content-center\">\n        <teta-icon [name]=\"'sumColor'\"></teta-icon>\n      </div>\n      <div class=\"cell cell-component justify-content-end\"\n           *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n           [attr.data-column]=\"column.name\"\n           [ngClass]=\"column.cellClass\"\n           [attr.tabindex]=\"0\">\n        <span class=\"cell-text cell-text_numeric font-title-3\">\n          {{getAggregateText(column)}}:\n          {{getAggregateValue(column) | tetaNumber : 2}}\n        </span>\n      </div>\n    </div>\n    <div class=\"cell align-center justify-content-center\"\n         *ngIf=\"selectType !== selectTypeEnum.none && locked.length < 1\">\n      <teta-icon [name]=\"'sumColor'\"></teta-icon>\n    </div>\n    <div class=\"cell cell-component justify-content-end\"\n         *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n         [attr.data-column]=\"column.name\"\n         [ngClass]=\"column.cellClass\"\n         [attr.tabindex]=\"0\">\n      <span class=\"cell-text cell-text_numeric font-title-3\">\n        {{getAggregateText(column)}}\n        {{getAggregateValue(column) | tetaNumber : 2}}\n      </span>\n    </div>\n  </div>\n</ng-template>\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { virtual: [{
+            args: [{ selector: 'teta-table-body', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual\"\n                             class=\"table-body-container\"\n                             [itemSize]=\"28\">\n  <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n</cdk-virtual-scroll-viewport>\n<div *ngIf=\"!virtual\"\n     class=\"table-body-container\">\n  <ng-container *ngFor=\"let row of data; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"aggregate\">\n    <ng-container *ngTemplateOutlet=\"aggTemplate;\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <div class=\"table-row\"\n       (click)=\"setActiveRow(row)\"\n       (contextmenu)=\"setActiveRow(row)\"\n       [attr.data-row]=\"rowIndex\"\n       [class.table-row_odd]=\"rowIndex % 2 === 1\"\n       [ngClass]=\"rowClass ? rowClass(row, rowIndex) : ''\"\n       [class.table-row_active]=\"row === activeRow || (selectedRows && selectedRows.indexOf(row) >= 0)\"\n       [style.flex-grow]=\"totalFlex\"\n       [style.flex-basis.px]=\"totalWidth\"\n       [style.min-width.px]=\"totalWidth\">\n    <ng-container *ngIf=\"!grouping\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\"\n           [style.zIndex]=\"row === activeRow ? 1 : 'unset'\">\n        <teta-selection-cell *ngIf=\"selectType !== selectTypeEnum.none && locked.length\"\n                             [row]=\"row\"\n                             style=\"width: 28px;\"></teta-selection-cell>\n        <teta-cell\n          *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n          [attr.data-row]=\"rowIndex\"\n          [attr.data-column]=\"column.name\"\n          [column]=\"column\"\n          [filterOptions]=\"dict?dict[column.name]:[]\"\n          [dict]=\"dict\"\n          [row]=\"row\"\n          [ngClass]=\"column.cellClass\"\n          [attr.tabindex]=\"0\"\n          [style.flex-grow]=\"column.flex\"\n          [style.flex-basis.px]=\"column.width\"\n        ></teta-cell>\n      </div>\n      <teta-selection-cell *ngIf=\"selectType !== selectTypeEnum.none && locked.length < 1\"\n                           [row]=\"row\"\n                           style=\"width: 28px;\"></teta-selection-cell>\n      <teta-cell\n        *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-column]=\"column.name\"\n        [column]=\"column\"\n        [filterOptions]=\"dict?dict[column.name]:[]\"\n        [dict]=\"dict\"\n        [row]=\"row\"\n        [ngClass]=\"column.cellClass\"\n        [attr.tabindex]=\"0\"\n        [style.flex-grow]=\"column.flex\"\n        [style.flex-basis.px]=\"column.width\"\n      ></teta-cell>\n    </ng-container>\n    <ng-container *ngIf=\"grouping\">\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #aggTemplate>\n  <ng-container *ngIf=\"locale | async as loc\">\n    <div class=\"table-row\"\n         *ngIf=\"aggregate\"\n         [class.table-row_virtual]=\"virtual\"\n         [style.flex-grow]=\"virtual ? totalFlex : ''\"\n         [style.flex-basis.px]=\"virtual ? totalWidth : ''\"\n         [style.min-width.px]=\"virtual ? totalWidth : ''\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\">\n        <div class=\"cell align-center justify-content-center\"\n             style=\"width: 28px;\">\n          <teta-icon [name]=\"'sumColor'\"></teta-icon>\n        </div>\n        <div class=\"cell cell-component justify-content-end\"\n             *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n             [attr.data-column]=\"column.name\"\n             [ngClass]=\"column.cellClass\"\n             [attr.tabindex]=\"0\"\n             [style.flex-grow]=\"column.flex\"\n             [style.flex-basis.px]=\"column.width\">\n        <span class=\"cell-text cell-text_numeric font-title-3\">\n          {{loc[getAggregateText(column)]}}:\n          {{getAggregateValue(column) | tetaNumber : 2}}\n        </span>\n        </div>\n      </div>\n      <div class=\"cell align-center justify-content-center\"\n           style=\"width: 28px;\"\n           *ngIf=\"selectType !== selectTypeEnum.none && locked.length < 1\">\n        <teta-icon [name]=\"'sumColor'\"></teta-icon>\n      </div>\n      <div class=\"cell cell-component justify-content-end\"\n           *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n           [attr.data-column]=\"column.name\"\n           [ngClass]=\"column.cellClass\"\n           [attr.tabindex]=\"0\"\n           [style.flex-grow]=\"column.flex\"\n           [style.flex-basis.px]=\"column.width\">\n      <span class=\"cell-text cell-text_numeric font-title-3\">\n        {{loc[getAggregateText(column)]}}:\n        {{getAggregateValue(column) | tetaNumber : 2}}\n      </span>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: TableService }, { type: TetaConfigService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { virtual: [{
                 type: Input
             }], activeRow: [{
                 type: Input
-            }], rowHeight: [{
+            }], selectedRows: [{
                 type: Input
             }], additionalComponent: [{
                 type: Input
@@ -9208,34 +9537,137 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 args: ['class.table-body']
             }] } });
 
+class ClickService {
+    constructor(_document) {
+        this._document = _document;
+        this.click = fromEvent(this._document, 'click');
+        this.contextMenu = fromEvent(this._document, 'contextmenu');
+    }
+}
+ClickService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ClickService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+ClickService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ClickService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ClickService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; } });
+
+class ContextMenuDirective extends DynamicContentBaseDirective {
+    constructor(_document, _elementRef, _service, _injector, _zone, _cdr, _click) {
+        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._click = _click;
+    }
+    get _dynamicContent() {
+        return this.tetaContextMenu;
+    }
+    showContent(event) {
+        if (this.tetaContextMenu) {
+            event.preventDefault();
+            setTimeout(() => {
+                this.createMenu(event);
+            });
+        }
+    }
+    click(event) {
+        if (this._componentRef &&
+            DomUtil.clickedInside(this._componentRef.location.nativeElement, event)) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        merge(this._click.click, this._click.contextMenu)
+            .pipe(takeWhile(() => this._alive), filter(() => this._open), filter(() => this._componentRef != null), filter((event) => !DomUtil.clickedInside(this._componentRef.location.nativeElement, event)), tap((_) => {
+            this.destroyContentRef();
+            this.openChange.emit(false);
+        }))
+            .subscribe();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+    setPosition() {
+        if (this._componentRef && this._open) {
+            const position = PositionUtil.getPosition({
+                top: this._eventPoint.y,
+                bottom: this._eventPoint.y,
+                left: this._eventPoint.x,
+                right: this._eventPoint.x,
+            }, this._componentRef.location.nativeElement.getBoundingClientRect(), this.align, this.verticalAlign);
+            PositionUtil.setElementPosition(this._componentRef.location.nativeElement, position);
+        }
+    }
+    createMenu(event) {
+        if (this.tetaContextMenu == null) {
+            return;
+        }
+        this._eventPoint = event;
+        this._componentRef = this.createContentRef();
+        this._componentRef.instance.className = [
+            ...ArrayUtil.asArray(this.className),
+            'context-menu',
+        ];
+        this.openChange.emit(true);
+    }
+}
+ContextMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ContextMenuDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: DynamicComponentService }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: ClickService }], target: i0.ɵɵFactoryTarget.Directive });
+ContextMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: ContextMenuDirective, selector: "[tetaContextMenu]", inputs: { tetaContextMenu: "tetaContextMenu" }, host: { listeners: { "contextmenu": "showContent($event)", "click": "click($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ContextMenuDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaContextMenu]',
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.ElementRef }, { type: DynamicComponentService }, { type: i0.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: ClickService }]; }, propDecorators: { tetaContextMenu: [{
+                type: Input
+            }], showContent: [{
+                type: HostListener,
+                args: ['contextmenu', ['$event']]
+            }], click: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
 class TableComponent {
     constructor(_svc, _elementRef) {
         this._svc = _svc;
         this._elementRef = _elementRef;
         this.data = [];
         this.columns = [];
-        this.rowHeight = 24;
-        this.selectType = SelectType.none;
+        this.selectType = SelectType.multiple;
         this.groupRowComponent = GroupRowComponent;
-        this.contextMenuConfig = new TableContextMenuConfig();
+        this.trackRow = (index, row) => index;
+        this.editType = EditType.cell;
+        this.editEvent = EditEvent.doubleClick;
         this.showHeadCellMenu = true;
+        this.contextMenuOpenChange = new EventEmitter();
         this.stateChange = new EventEmitter();
         this.bodyLeft = new EventEmitter();
         this.activeRowChange = new EventEmitter();
         this.selectedRowsChange = new EventEmitter();
-        this.rowLeft = new EventEmitter();
-        this.rowEditStart = new EventEmitter();
-        this.rowEditEnd = new EventEmitter();
         this.cellClick = new EventEmitter();
         this.cellDoubleClick = new EventEmitter();
         this.cellFocus = new EventEmitter();
+        this.cellKeyDown = new EventEmitter();
+        this.rowLeft = new EventEmitter();
+        this.rowEditStart = new EventEmitter();
+        this.rowEditEnd = new EventEmitter();
         this.cellEditStart = new EventEmitter();
         this.cellEditEnd = new EventEmitter();
         this.valueChange = new EventEmitter();
-        this.cellKeyUp = new EventEmitter();
-        this.pasteRows = new EventEmitter();
-        this.addRow = new EventEmitter();
-        this.deleteRows = new EventEmitter();
         this.tableService = new EventEmitter();
         this.tableClass = true;
         this._alive = true;
@@ -9247,16 +9679,16 @@ class TableComponent {
             .subscribe((state) => this.stateChange.next(state));
         this._svc.editCellStart
             .pipe(takeWhile((_) => this._alive))
-            .subscribe((item) => this.cellEditStart.emit(item));
+            .subscribe((item) => this.cellEditStart.emit(this._svc.getCellInstance(item)));
         this._svc.editCellStop
             .pipe(takeWhile((_) => this._alive))
-            .subscribe((item) => this.cellEditEnd.emit(item));
+            .subscribe((item) => this.cellEditEnd.emit(this._svc.getCellInstance(item)));
         this._svc.editRowStart
             .pipe(takeWhile((_) => this._alive))
-            .subscribe((item) => this.rowEditStart.emit(item?.row));
+            .subscribe((item) => this.rowEditStart.emit(this._svc.getCellInstance(item)));
         this._svc.editRowStop
             .pipe(takeWhile((_) => this._alive))
-            .subscribe((item) => this.rowEditEnd.emit(item?.row));
+            .subscribe((item) => this.rowEditEnd.emit(this._svc.getRowByIndex(item?.row)));
         this._svc.selectedRows
             .pipe(takeWhile((_) => this._alive))
             .subscribe((items) => {
@@ -9269,7 +9701,7 @@ class TableComponent {
         this._svc.valueChanged
             .pipe(takeWhile((_) => this._alive))
             .subscribe((coordinates) => {
-            this.valueChange.emit(coordinates);
+            this.valueChange.emit(this._svc.getCellInstance(coordinates));
         });
     }
     set state(state) {
@@ -9281,19 +9713,44 @@ class TableComponent {
     handleClickOutsideAnyRow(event) {
         const coordinates = this.getCoordinates(event);
         if (coordinates) {
-            this.cellClick.emit(coordinates);
+            this.cellClick.emit({
+                ...this._svc.getCellInstance(coordinates),
+                event
+            });
             if (this.editEvent === EditEvent.click) {
                 this.startEditRowOrCell(coordinates);
             }
+            else {
+                if (this._svc.currentEditCell && (coordinates.row !== this._svc.currentEditCell.row || coordinates.column !== this._svc.currentEditCell.column)) {
+                    this.startEditRowOrCell(null);
+                }
+            }
+        }
+        const row = this.getRow(event);
+        if (row) {
+            if (event.ctrlKey) {
+                this._svc.selectOrDeselectRow(row);
+            }
+            if (event.shiftKey) {
+                this._svc.selectRange(row);
+            }
         }
         if (!this.eventIsOnRow(event) && !event.defaultPrevented) {
-            this._svc.startEditRow(null);
+            if (this.editType === EditType.row) {
+                this._svc.startEditRow(null);
+            }
+            else {
+                this._svc.startEditCell(null);
+            }
         }
     }
     focusIn(event) {
         const coordinates = this.getCoordinates(event);
         if (coordinates) {
-            this.cellFocus.emit(coordinates);
+            this.cellFocus.emit({
+                ...this._svc.getCellInstance(coordinates),
+                event
+            });
             if (this.editEvent === EditEvent.focus) {
                 this.startEditRowOrCell(coordinates);
             }
@@ -9302,26 +9759,91 @@ class TableComponent {
     dblclick(event) {
         const coordinates = this.getCoordinates(event);
         if (coordinates) {
-            this.cellDoubleClick.emit(coordinates);
+            this.cellDoubleClick.emit({
+                ...this._svc.getCellInstance(coordinates),
+                event
+            });
             if (this.editEvent === EditEvent.doubleClick) {
                 this.startEditRowOrCell(coordinates);
             }
         }
     }
-    keyup(event) {
-        const coordinates = this.getCoordinates(event);
-        if (coordinates) {
-            this.cellKeyUp.emit(coordinates);
-        }
-        switch (event.key) {
-            case 'Enter':
+    keydown(event) {
+        if (event.key === 'Escape') {
+            if (this.editType === EditType.row) {
                 this._svc.startEditRow(null);
-                break;
-            case 'Escape':
+            }
+            else {
+                this._svc.startEditCell(null);
+            }
+        }
+        const coordinates = this.getCoordinates(event);
+        if (event.key === 'Enter') {
+            if (this.editType === EditType.row) {
                 this._svc.startEditRow(null);
-                break;
-            default:
-                break;
+            }
+            else {
+                if (this._svc.currentEditCell) {
+                    const target = this._svc.getNextRowCell(coordinates);
+                    if (target) {
+                        this.startEditRowOrCell({
+                            row: target.row,
+                            column: target.column,
+                            event: undefined
+                        });
+                    }
+                    else {
+                        this._svc.startEditCell(null);
+                    }
+                }
+            }
+        }
+        if (coordinates) {
+            this.cellKeyDown.emit({
+                ...this._svc.getCellInstance(coordinates),
+                event
+            });
+            if (event.key && (event.key.length === 1 || event.key === 'Delete')) {
+                this.startEditRowOrCell({
+                    row: coordinates.row,
+                    column: coordinates.column,
+                    event: event
+                });
+            }
+            if (event.key === 'Tab' && this._svc.currentEditCell) {
+                event.preventDefault();
+                let target = this._svc.getNextEditableCell(coordinates);
+                if (event.shiftKey) {
+                    target = this._svc.getPreviousEditableCell(coordinates);
+                }
+                if (target) {
+                    this.startEditRowOrCell({
+                        row: target.row,
+                        column: target.column,
+                        event: undefined
+                    });
+                }
+            }
+            if (!this._svc.currentEditCell) {
+                let target;
+                if (event.key === 'ArrowRight') {
+                    target = this._svc.getNextCell(coordinates);
+                }
+                if (event.key === 'ArrowLeft') {
+                    target = this._svc.getPreviousCell(coordinates);
+                }
+                if (event.key === 'ArrowUp') {
+                    target = this._svc.getPreviousRowCell(coordinates);
+                }
+                if (event.key === 'ArrowDown') {
+                    target = this._svc.getNextRowCell(coordinates);
+                }
+                if (target) {
+                    event.preventDefault();
+                    const element = this.getCellElement(target);
+                    element?.focus();
+                }
+            }
         }
     }
     mousedown(event) {
@@ -9329,48 +9851,6 @@ class TableComponent {
             event.preventDefault();
         }
     }
-    contextMenu(event) {
-        if (this.getSelectedText() ||
-            this.contextMenuConfig?.contextMenu === false) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        this.contextMenuTarget = this.getCoordinates(event);
-        this.showContextMenu = true;
-        this.setPosition(event);
-    }
-    rowAdd() {
-        this.addRow.emit();
-        this.contextMenuTarget = null;
-        this.showContextMenu = false;
-    }
-    copy(rows) {
-        of(1)
-            .pipe(withLatestFrom(this._svc.columns, this._svc.hiddenColumns))
-            .subscribe((data) => {
-            const [, columns, hidden] = data;
-            navigator.clipboard.writeText(this.toClipboardString(rows, this.getVisibleColumns(columns, hidden)));
-            this.contextMenuTarget = null;
-            this.showContextMenu = false;
-        });
-    }
-    delete(rows) {
-        this.deleteRows.emit(rows);
-        this.contextMenuTarget = null;
-        this.showContextMenu = false;
-    }
-    async pasteData() {
-        const result = await navigator.clipboard.readText();
-        of(1)
-            .pipe(withLatestFrom(this._svc.columns, this._svc.hiddenColumns))
-            .subscribe((data) => {
-            const [, columns, hidden] = data;
-            this.pasteRows.emit(this.fromClipboard(result, this.getVisibleColumns(columns, hidden)));
-        });
-        this.contextMenuTarget = null;
-        this.showContextMenu = false;
-    }
     ngOnInit() {
         this._svc.restoreState();
         this._svc.restoreHiddenColumns();
@@ -9413,8 +9893,19 @@ class TableComponent {
         }
         if (changes.hasOwnProperty('dict')) {
             this._svc.setDict(this.dict);
+            this._svc.setFilterOptions(this.dict);
+        }
+        if (changes.hasOwnProperty('filterOptions')) {
+            this._svc.setFilterOptions(this.filterOptions);
+        }
+        if (changes.hasOwnProperty('trackRow')) {
+            this._svc.trackRow = this.trackRow;
         }
     }
+    setContextMenuOpen(value) {
+        this.contextMenuOpen = value;
+        this.contextMenuOpenChange.emit(this.contextMenuOpen);
+    }
     startEditRowOrCell(coordinates) {
         if (this.editType === EditType.row) {
             this._svc.startEditRow(coordinates);
@@ -9428,6 +9919,14 @@ class TableComponent {
             return target.tagName?.toLowerCase() === 'teta-cell';
         });
     }
+    getEventRow(event) {
+        return event.composedPath().find((target) => {
+            return target?.getAttribute && target?.getAttribute('data-row');
+        });
+    }
+    getCellElement(coordinates) {
+        return this._elementRef.nativeElement.querySelector(`teta-cell[data-row="${coordinates.row}"][data-column="${coordinates.column}"]`);
+    }
     eventIsOnRow(event) {
         const row = event.composedPath().find((target) => {
             return target?.getAttribute && target?.getAttribute('data-row');
@@ -9437,76 +9936,43 @@ class TableComponent {
     getCoordinates(event) {
         const cell = this.getEventCell(event);
         if (cell) {
-            const rowIndex = cell.getAttribute('data-row');
+            const rowIndex = parseInt(cell.getAttribute('data-row'), 10);
             const columnName = cell.getAttribute('data-column');
-            if (rowIndex && columnName) {
-                const row = this._svc.getRowByIndex(rowIndex);
-                const column = this._svc.getColumnByName(columnName);
+            if (rowIndex >= 0 && columnName) {
                 return {
-                    row,
-                    column: column ? column : new TableColumn(),
+                    row: rowIndex,
+                    column: columnName,
                     event,
                 };
             }
         }
         return null;
     }
-    getSelectedText() {
-        let text = '';
-        if (typeof window.getSelection != 'undefined') {
-            text = window.getSelection().toString();
-        }
-        return text;
-    }
-    setPosition(event) {
-        const position = PositionUtil.getPosition({
-            top: event.y,
-            bottom: event.y,
-            left: event.x,
-            right: event.x,
-        }, this.menu.nativeElement.getBoundingClientRect(), Align.left, VerticalAlign.auto);
-        PositionUtil.setElementPosition(this.menu.nativeElement, position);
-    }
-    toClipboardString(rows, columns) {
-        return rows.reduce((res, currentRow, i) => `${res}${i === 0 ? '' : '\n'}${columns.reduce((columnResult, column, j) => `${columnResult}${j === 0 ? '' : '\t'}${currentRow.data[column.name] ?? ''}`, '')}`, '');
-    }
-    fromClipboard(data, columns) {
-        const rows = data.split('\n').filter((_) => _?.length > 0);
-        const result = rows.map((_) => _.replace('\r', '').replace('\n', '').split('\t'));
-        return result.map((row) => row.reduce((res, item, index) => {
-            let value = item;
-            if (columns[index]?.filterType === FilterType.number ||
-                columns[index]?.filterType === FilterType.list) {
-                value = parseFloat(item);
-            }
-            if (columns[index]?.filterType === FilterType.boolean) {
-                value = Boolean(JSON.parse(item.toLowerCase()));
-            }
-            if (columns[index]) {
-                res[columns[index].name] = value;
-            }
-            return res;
-        }, {}));
-    }
-    getVisibleColumns(columns, hidden) {
-        const visible = ArrayUtil.flatten(columns, 'columns', true).filter((_) => hidden.indexOf(_.name) < 0);
-        return visible.sort((a, b) => Number(b.locked) - Number(a.locked));
+    getRow(event) {
+        const rowElement = this.getEventRow(event);
+        if (rowElement) {
+            const rowIndex = parseInt(rowElement.getAttribute('data-row'), 10);
+            if (rowIndex >= 0) {
+                return this._svc.getRowByIndex(rowIndex);
+            }
+        }
+        return null;
     }
 }
 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", 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", filterOptions: "filterOptions", state: "state", cookieName: "cookieName", virtual: "virtual", detailComponent: "detailComponent", activeRow: "activeRow", selectedRows: "selectedRows", selectType: "selectType", aggregate: "aggregate", grouping: "grouping", groupRowComponent: "groupRowComponent", openLevels: "openLevels", tree: "tree", trackRow: "trackRow", editType: "editType", editEvent: "editEvent", rowEditable: "rowEditable", rowClass: "rowClass", scrollToIndex: "scrollToIndex", showHeadCellMenu: "showHeadCellMenu", contextMenu: "contextMenu", contextMenuOpen: "contextMenuOpen" }, outputs: { contextMenuOpenChange: "contextMenuOpenChange", stateChange: "stateChange", bodyLeft: "bodyLeft", activeRowChange: "activeRowChange", selectedRowsChange: "selectedRowsChange", cellClick: "cellClick", cellDoubleClick: "cellDoubleClick", cellFocus: "cellFocus", cellKeyDown: "cellKeyDown", rowLeft: "rowLeft", rowEditStart: "rowEditStart", rowEditEnd: "rowEditEnd", cellEditStart: "cellEditStart", cellEditEnd: "cellEditEnd", valueChange: "valueChange", tableService: "tableService" }, host: { listeners: { "document:click": "handleClickOutsideAnyRow($event)", "focusin": "focusIn($event)", "dblclick": "dblclick($event)", "keydown": "keydown($event)", "mousedown": "mousedown($event)" }, properties: { "class.table": "this.tableClass" } }, providers: [TableService], viewQueries: [{ propertyName: "menu", first: true, predicate: ["contextMenu"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"column column_auto\">\n  <teta-table-head\n    [selectType]=\"selectType\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n  <teta-table-body\n    [tetaContextMenu]=\"contextMenu\"\n    [open]=\"contextMenuOpen\"\n    (openChange)=\"setContextMenuOpen($event)\"\n    [aggregate]=\"aggregate\"\n    [virtual]=\"virtual\"\n    [activeRow]=\"activeRow\"\n    [selectedRows]=\"selectedRowsList\"\n    [additionalComponent]=\"detailComponent\"\n    [grouping]=\"grouping\"\n    [groupRowComponent]=\"groupRowComponent\"\n    [openLevels]=\"openLevels\"\n    [selectType]=\"selectType\"\n    [rowClass]=\"rowClass\"\n    [tree]=\"tree\"></teta-table-body>\n</div>\n", styles: [""], components: [{ type: TableHeadComponent, selector: "teta-table-head", inputs: ["selectType", "showHeadCellMenu"] }, { type: TableBodyComponent, selector: "teta-table-body", inputs: ["virtual", "activeRow", "selectedRows", "additionalComponent", "tree", "aggregate", "grouping", "groupRowComponent", "openLevels", "selectType", "rowClass"] }], directives: [{ type: ContextMenuDirective, selector: "[tetaContextMenu]", inputs: ["tetaContextMenu"] }], 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: [""] }]
+            args: [{ selector: 'teta-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableService], template: "<div class=\"column column_auto\">\n  <teta-table-head\n    [selectType]=\"selectType\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n  <teta-table-body\n    [tetaContextMenu]=\"contextMenu\"\n    [open]=\"contextMenuOpen\"\n    (openChange)=\"setContextMenuOpen($event)\"\n    [aggregate]=\"aggregate\"\n    [virtual]=\"virtual\"\n    [activeRow]=\"activeRow\"\n    [selectedRows]=\"selectedRowsList\"\n    [additionalComponent]=\"detailComponent\"\n    [grouping]=\"grouping\"\n    [groupRowComponent]=\"groupRowComponent\"\n    [openLevels]=\"openLevels\"\n    [selectType]=\"selectType\"\n    [rowClass]=\"rowClass\"\n    [tree]=\"tree\"></teta-table-body>\n</div>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ElementRef }]; }, propDecorators: { data: [{
                 type: Input
             }], columns: [{
                 type: Input
             }], dict: [{
                 type: Input
-            }], state: [{
+            }], filterOptions: [{
                 type: Input
-            }], rowHeight: [{
+            }], state: [{
                 type: Input
             }], cookieName: [{
                 type: Input
@@ -9530,7 +9996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 type: Input
             }], tree: [{
                 type: Input
-            }], trackBy: [{
+            }], trackRow: [{
                 type: Input
             }], editType: [{
                 type: Input
@@ -9542,10 +10008,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 type: Input
             }], scrollToIndex: [{
                 type: Input
-            }], contextMenuConfig: [{
-                type: Input
             }], showHeadCellMenu: [{
                 type: Input
+            }], contextMenu: [{
+                type: Input
+            }], contextMenuOpen: [{
+                type: Input
+            }], contextMenuOpenChange: [{
+                type: Output
             }], stateChange: [{
                 type: Output
             }], bodyLeft: [{
@@ -9554,31 +10024,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 type: Output
             }], selectedRowsChange: [{
                 type: Output
-            }], rowLeft: [{
-                type: Output
-            }], rowEditStart: [{
-                type: Output
-            }], rowEditEnd: [{
-                type: Output
             }], cellClick: [{
                 type: Output
             }], cellDoubleClick: [{
                 type: Output
             }], cellFocus: [{
                 type: Output
-            }], cellEditStart: [{
+            }], cellKeyDown: [{
                 type: Output
-            }], cellEditEnd: [{
+            }], rowLeft: [{
                 type: Output
-            }], valueChange: [{
+            }], rowEditStart: [{
                 type: Output
-            }], cellKeyUp: [{
+            }], rowEditEnd: [{
                 type: Output
-            }], pasteRows: [{
+            }], cellEditStart: [{
                 type: Output
-            }], addRow: [{
+            }], cellEditEnd: [{
                 type: Output
-            }], deleteRows: [{
+            }], valueChange: [{
                 type: Output
             }], tableService: [{
                 type: Output
@@ -9597,15 +10061,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             }], dblclick: [{
                 type: HostListener,
                 args: ['dblclick', ['$event']]
-            }], keyup: [{
+            }], keydown: [{
                 type: HostListener,
-                args: ['window:keyup', ['$event']]
+                args: ['keydown', ['$event']]
             }], mousedown: [{
                 type: HostListener,
                 args: ['mousedown', ['$event']]
-            }], contextMenu: [{
-                type: HostListener,
-                args: ['contextmenu', ['$event']]
             }] } });
 
 class TabsModule {
@@ -9692,9 +10153,9 @@ class DateTimeCellComponent extends CellComponentBase {
         this.valueChanged();
     }
     startEdit(initiator, type) {
-        if (initiator?.column.name === this.column.name) {
+        if (initiator?.column === this.column.name) {
             setTimeout(() => {
-                this.input.openPicker(true);
+                this.input?.openPicker(true);
                 this.cdr.markForCheck();
             }, 0);
         }
@@ -9704,10 +10165,10 @@ class DateTimeCellComponent extends CellComponentBase {
     }
 }
 DateTimeCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DateTimeCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateTimeCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DateTimeCellComponent, selector: "teta-date-time-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\">\n  {{row.data[column.name] | date : 'dd.MM.yyyy HH:mm:ss'}}\n</span>\n<teta-date-picker class=\"datepicker-table\" #input\n                  *ngIf=\"edit\"\n                  [appendToBody]=\"true\"\n                  [showTime]=\"true\"\n                  [ngModel]=\"row.data[column.name]\"\n                  (ngModelChange)=\"setValue($event)\"\n></teta-date-picker>\n", styles: [""], components: [{ type: DatePickerComponent, selector: "teta-date-picker", inputs: ["disabled", "invalid", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "minYearDate", "maxYearDate", "align", "verticalAlign", "appendToBody", "showTime", "format"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }], pipes: { "date": i2.DatePipe } });
+DateTimeCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DateTimeCellComponent, selector: "teta-date-time-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row.data[column.name] | date : 'dd.MM.yyyy HH:mm:ss'}}\n</span>\n<teta-date-picker class=\"datepicker-table\" #input\n                  *ngIf=\"edit\"\n                  [appendToBody]=\"true\"\n                  [showTime]=\"true\"\n                  [ngModel]=\"row.data[column.name]\"\n                  (ngModelChange)=\"setValue($event)\"\n></teta-date-picker>\n", styles: [""], components: [{ type: DatePickerComponent, selector: "teta-date-picker", inputs: ["disabled", "invalid", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "minYearDate", "maxYearDate", "align", "verticalAlign", "appendToBody", "allowNull", "backdrop", "showTime", "format"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i3.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DateTimeCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-date-time-cell', template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\">\n  {{row.data[column.name] | date : 'dd.MM.yyyy HH:mm:ss'}}\n</span>\n<teta-date-picker class=\"datepicker-table\" #input\n                  *ngIf=\"edit\"\n                  [appendToBody]=\"true\"\n                  [showTime]=\"true\"\n                  [ngModel]=\"row.data[column.name]\"\n                  (ngModelChange)=\"setValue($event)\"\n></teta-date-picker>\n", styles: [""] }]
+            args: [{ selector: 'teta-date-time-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row.data[column.name] | date : 'dd.MM.yyyy HH:mm:ss'}}\n</span>\n<teta-date-picker class=\"datepicker-table\" #input\n                  *ngIf=\"edit\"\n                  [appendToBody]=\"true\"\n                  [showTime]=\"true\"\n                  [ngModel]=\"row.data[column.name]\"\n                  (ngModelChange)=\"setValue($event)\"\n></teta-date-picker>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
                 type: Input
             }], row: [{
@@ -9731,6 +10192,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 }]
         }] });
 
+class ContextMenuModule {
+}
+ContextMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ContextMenuModule, declarations: [ContextMenuDirective], imports: [CommonModule,
+        DynamicComponentModule], exports: [ContextMenuDirective] });
+ContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ContextMenuModule, imports: [[
+            CommonModule,
+            DynamicComponentModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ContextMenuModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ContextMenuDirective],
+                    exports: [ContextMenuDirective],
+                    imports: [
+                        CommonModule,
+                        DynamicComponentModule
+                    ]
+                }]
+        }] });
+
 class TableModule {
 }
 TableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -9769,7 +10251,8 @@ TableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "1
         ToolbarModule,
         ClickOutsideModule,
         ResizeDragModule,
-        ScrollingModule], exports: [TableComponent,
+        ScrollingModule,
+        ContextMenuModule], exports: [TableComponent,
         NumericCellComponent,
         ListCellComponent,
         DateCellComponent,
@@ -9801,6 +10284,7 @@ TableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "1
             ClickOutsideModule,
             ResizeDragModule,
             ScrollingModule,
+            ContextMenuModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TableModule, decorators: [{
             type: NgModule,
@@ -9860,6 +10344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                         ClickOutsideModule,
                         ResizeDragModule,
                         ScrollingModule,
+                        ContextMenuModule,
                     ],
                 }]
         }] });
@@ -9967,7 +10452,8 @@ class Chart3dComponent {
     ngOnInit() {
         this._themeService.theme
             .pipe(takeWhile((_) => this._alive), tap((_) => {
-            this.gridColor = _ ? '#474751' : '#d7dee3';
+            this.gridColor = _ ? '#5d6a73' : '#bdbdc6';
+            this.axesColor = _ ? '#8e8f9d' : '#7d8f9a';
             this.init();
         }))
             .subscribe();
@@ -9976,6 +10462,7 @@ class Chart3dComponent {
         this.addResizeObserver();
         this.createScene();
         this.startRenderingLoop();
+        this.init();
     }
     ngOnDestroy() {
         this._alive = false;
@@ -9989,37 +10476,51 @@ class Chart3dComponent {
         }
         const { x, y, z } = this.getScales(this._config.series);
         this.config.series.forEach((data, idx) => {
-            const geometry = new THREE.BufferGeometry().setFromPoints(data.points.map((_) => new THREE.Vector3(x(_.x), z(_.z), y(_.y))));
+            if (!data.points?.length) {
+                return;
+            }
+            const points = data.points.map((_) => new THREE.Vector3(x(_.x), y(_.y), z(_.z)));
             const color = d3.scaleOrdinal(d3.schemeTableau10);
             const material = new THREE.LineBasicMaterial({
                 color: data?.color ?? color(idx.toString()),
             });
-            const line = new THREE.Line(geometry, material);
-            line.computeLineDistances();
-            line.scale.set(1, 1, 1);
-            this._scene.add(line);
+            const tubeGeometry = new THREE.TubeGeometry(new THREE.CatmullRomCurve3(points), 1024, 0.5, 20, false);
+            let tube = new THREE.Line(tubeGeometry, material);
+            this._scene.add(tube);
+        });
+        const circles = x.ticks(this.SIDE_SIZE / 10);
+        const material = new THREE.LineBasicMaterial({ color: this.axesColor });
+        const pointsLines = [];
+        pointsLines.push(new THREE.Vector3(0, 0, 0));
+        pointsLines.push(new THREE.Vector3(0, 0, z(-z.domain()[1])));
+        pointsLines.push(new THREE.Vector3(0, 0, 0));
+        pointsLines.push(new THREE.Vector3(x(-x.domain()[1]), 0, 0));
+        const geometryLines = new THREE.BufferGeometry().setFromPoints(pointsLines);
+        const line = new THREE.Line(geometryLines, material);
+        this._scene.add(line);
+        circles.forEach((r) => {
+            const material = new THREE.LineDashedMaterial({
+                color: this.gridColor,
+                dashSize: 1,
+                gapSize: 3
+            });
+            const circleGeometry = new THREE.BufferGeometry().setFromPoints(new THREE.Path().absarc(0, 0, x(r), 0, Math.PI * 2, false).getSpacedPoints(100));
+            const circle = new THREE.LineSegments(circleGeometry, material);
+            circle.geometry.rotateX(-Math.PI / 2);
+            this._scene.add(circle);
         });
-        const plane = new THREE.GridHelper(this.SIDE_SIZE, this.SIDE_SIZE / 10, this.gridColor, this.gridColor);
-        plane.position.set(this.SIDE_SIZE / 2, 0, this.SIDE_SIZE / 2);
-        this._scene.add(plane);
-        const gridX = new THREE.GridHelper(this.SIDE_SIZE, this.SIDE_SIZE / 10, this.gridColor, this.gridColor);
-        gridX.geometry.rotateX(-Math.PI / 2);
-        gridX.position.set(this.SIDE_SIZE / 2, this.SIDE_SIZE / 2, 0);
-        this._scene.add(gridX);
-        const gridY = new THREE.GridHelper(this.SIDE_SIZE, this.SIDE_SIZE / 10, this.gridColor, this.gridColor);
-        gridY.geometry.rotateZ(Math.PI / 2);
-        gridY.position.set(0, this.SIDE_SIZE / 2, this.SIDE_SIZE / 2);
-        this._scene.add(gridY);
         this.drawTicks(x, y, z);
-        this._controls = new OrbitControls(this._camera, this._renderer.domElement);
-        this._controls.enableDamping = true;
-        this._controls.enablePan = true;
-        this._controls.dampingFactor = 0.25;
-        this._controls.screenSpacePanning = true;
-        this._controls.minDistance = 0;
-        this._controls.maxDistance = 10000;
-        this._controls.maxPolarAngle = Math.PI / 2;
-        this._controls.enableZoom = true;
+        if (!this._controls) {
+            this._controls = new OrbitControls(this._camera, this._renderer.domElement);
+            this._controls.enableDamping = true;
+            this._controls.enablePan = true;
+            this._controls.dampingFactor = 0.25;
+            this._controls.screenSpacePanning = true;
+            this._controls.minDistance = 0;
+            this._controls.maxDistance = 10000;
+            this._controls.maxPolarAngle = Math.PI / 2;
+            this._controls.enableZoom = true;
+        }
     }
     createScene() {
         this._scene = new THREE.Scene();
@@ -10081,7 +10582,7 @@ class Chart3dComponent {
             map: texture,
         });
         const sprite = new THREE.Sprite(spriteMaterial);
-        sprite.scale.set(5, 5, 5);
+        sprite.scale.set(0.4 * fontSize, 0.4 * fontSize, 0.4 * fontSize);
         return sprite;
     }
     drawTicks(x, y, z) {
@@ -10093,24 +10594,27 @@ class Chart3dComponent {
             generatedTicks.forEach((_) => {
                 const sprite = this.makeSprite(_);
                 if (idx === 0) {
-                    sprite.position.set(x(_), z(0), -5);
+                    sprite.position.set(x(_), y(y.domain()[1]), 0);
                 }
                 if (idx === 1) {
-                    sprite.position.set(-5, z(0), y(_));
+                    sprite.position.set(-10, y(_), 0);
                 }
                 if (idx === 2) {
-                    sprite.position.set(0, z(_), -5);
+                    sprite.position.set(0, y(y.domain()[1]), z(_));
                 }
                 ticks.add(sprite);
             });
         });
-        const northLabel = this.makeSprite('North', { fontSize: 28 });
-        const westLabel = this.makeSprite('West', { fontSize: 28 });
+        const northLabel = this.makeSprite('X', { fontSize: 28 });
+        const westLabel = this.makeSprite('Y', { fontSize: 28 });
         const tvdLabel = this.makeSprite('TVD', { fontSize: 28 });
-        northLabel.position.set(x(scalesExtrems[0]) + 10, 0, 0);
-        westLabel.position.set(0, 0, y(scalesExtrems[1]) + 10);
-        tvdLabel.position.set(0, z(scalesExtrems[2]), 0);
+        northLabel.position.set(x(x.domain()[1]) + 5, 0, 0);
+        westLabel.position.set(0, 0, y(y.domain()[0]) + 5);
+        tvdLabel.position.set(0, z(z.domain()[1]) + 5, 0);
         ticks.add(northLabel, westLabel, tvdLabel);
+        const axesHelper = new THREE.AxesHelper(this.SIDE_SIZE);
+        axesHelper.setColors(this.axesColor, this.axesColor, this.axesColor);
+        this._scene.add(axesHelper);
         this._scene.add(ticks);
     }
     getScales(series) {
@@ -10127,34 +10631,22 @@ class Chart3dComponent {
         }, { x: [], y: [], z: [] });
         const x = d3
             .scaleLinear()
-            .domain([
-            d3.min(flattenExtrems.x),
-            this._config?.axes?.max == null
-                ? d3.max(flattenExtrems.x)
+            .domain([0, this._config?.axes?.max == null
+                ? parseInt(d3.max(flattenExtrems.x))
                 : this._config.axes.max,
         ])
-            .range([0, this.SIDE_SIZE])
-            .nice();
+            .range([0, this.SIDE_SIZE]).nice();
         const y = d3
             .scaleLinear()
-            .domain([
-            d3.min(flattenExtrems.y),
-            this._config?.axes?.max == null
-                ? d3.max(flattenExtrems.y)
-                : this._config.axes.max,
-        ])
-            .range([0, this.SIDE_SIZE])
-            .nice();
+            .domain([0, parseInt(d3.max(flattenExtrems.y), 10)])
+            .range([this.SIDE_SIZE, 0]);
         const z = d3
             .scaleLinear()
-            .domain([
-            d3.min(flattenExtrems.z),
+            .domain([0,
             this._config?.axes?.max == null
-                ? d3.max(flattenExtrems.z)
-                : this._config.axes.max,
-        ])
-            .range([this.SIDE_SIZE, 0])
-            .nice();
+                ? parseInt(d3.max(flattenExtrems.z))
+                : this._config.axes.max])
+            .range([0, this.SIDE_SIZE]).nice();
         return { x, y, z };
     }
 }
@@ -10193,129 +10685,6 @@ class Chart3dOptions {
 
 /* accordion */
 
-class ClickService {
-    constructor(_document) {
-        this._document = _document;
-        this.click = fromEvent(this._document, 'click');
-        this.contextMenu = fromEvent(this._document, 'contextmenu');
-    }
-}
-ClickService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ClickService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-ClickService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ClickService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ClickService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }]; } });
-
-class ContextMenuDirective extends DynamicContentBaseDirective {
-    constructor(_document, _elementRef, _service, _injector, _zone, _cdr, _click) {
-        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._click = _click;
-    }
-    get _dynamicContent() {
-        return this.tetaContextMenu;
-    }
-    showContent(event) {
-        event.preventDefault();
-        setTimeout(() => {
-            this.createMenu(event);
-        });
-    }
-    click(event) {
-        if (this._componentRef &&
-            DomUtil.clickedInside(this._componentRef.location.nativeElement, event)) {
-            event.preventDefault();
-            event.stopPropagation();
-        }
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        merge(this._click.click, this._click.contextMenu)
-            .pipe(takeWhile(() => this._alive), filter(() => this._open), filter(() => this._componentRef != null), filter((event) => !DomUtil.clickedInside(this._componentRef.location.nativeElement, event)), tap((_) => {
-            this.destroyContentRef();
-            this.openChange.emit(false);
-        }))
-            .subscribe();
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-    }
-    setPosition() {
-        if (this._componentRef && this._open) {
-            const position = PositionUtil.getPosition({
-                top: this._eventPoint.y,
-                bottom: this._eventPoint.y,
-                left: this._eventPoint.x,
-                right: this._eventPoint.x,
-            }, this._componentRef.location.nativeElement.getBoundingClientRect(), this.align, this.verticalAlign);
-            PositionUtil.setElementPosition(this._componentRef.location.nativeElement, position);
-        }
-    }
-    createMenu(event) {
-        if (this.tetaContextMenu == null) {
-            return;
-        }
-        this._eventPoint = event;
-        this._componentRef = this.createContentRef();
-        this._componentRef.instance.className = [
-            ...ArrayUtil.asArray(this.className),
-            'context-menu',
-        ];
-        this.openChange.emit(true);
-    }
-}
-ContextMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ContextMenuDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: DynamicComponentService }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: ClickService }], target: i0.ɵɵFactoryTarget.Directive });
-ContextMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: ContextMenuDirective, selector: "[tetaContextMenu]", inputs: { tetaContextMenu: "tetaContextMenu" }, host: { listeners: { "contextmenu": "showContent($event)", "click": "click($event)" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ContextMenuDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tetaContextMenu]',
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.ElementRef }, { type: DynamicComponentService }, { type: i0.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: ClickService }]; }, propDecorators: { tetaContextMenu: [{
-                type: Input
-            }], showContent: [{
-                type: HostListener,
-                args: ['contextmenu', ['$event']]
-            }], click: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
-class ContextMenuModule {
-}
-ContextMenuModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ContextMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ContextMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ContextMenuModule, declarations: [ContextMenuDirective], imports: [CommonModule,
-        DynamicComponentModule], exports: [ContextMenuDirective] });
-ContextMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ContextMenuModule, imports: [[
-            CommonModule,
-            DynamicComponentModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ContextMenuModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ContextMenuDirective],
-                    exports: [ContextMenuDirective],
-                    imports: [
-                        CommonModule,
-                        DynamicComponentModule
-                    ]
-                }]
-        }] });
-
 class DisableControlDirective {
     constructor(ngControl) {
         this.ngControl = ngControl;
@@ -10331,14 +10700,14 @@ class DisableControlDirective {
         }
     }
 }
-DisableControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DisableControlDirective, deps: [{ token: i3.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+DisableControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DisableControlDirective, deps: [{ token: i3$1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
 DisableControlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: DisableControlDirective, selector: "[tetaDisableControl]", inputs: { tetaDisableControl: "tetaDisableControl" }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DisableControlDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[tetaDisableControl]'
                 }]
-        }], ctorParameters: function () { return [{ type: i3.NgControl }]; }, propDecorators: { tetaDisableControl: [{
+        }], ctorParameters: function () { return [{ type: i3$1.NgControl }]; }, propDecorators: { tetaDisableControl: [{
                 type: Input
             }] } });
 
@@ -10771,7 +11140,7 @@ class ResizePanelComponent {
     }
 }
 ResizePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ResizePanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-ResizePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ResizePanelComponent, selector: "teta-resize-panel", inputs: { direction: "direction", grabPosition: "grabPosition", name: "name", minSize: "minSize", maxSize: "maxSize" }, host: { properties: { "class.resize-panel": "this.resizePanelClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n<div #grab class=\"resize-grab\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd($event)\"\n     [tetaResizeDrag]=\"direction\"\n     [ngClass]=\"getClassName()\">\n  <teta-icon [name]=\"direction\"></teta-icon>\n</div>\n", styles: [""], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: ResizeDragDirective, selector: "[tetaResizeDrag]", inputs: ["tetaResizeDrag"], outputs: ["resizeStart", "resizeProcess", "resizeEnd"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ResizePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ResizePanelComponent, selector: "teta-resize-panel", inputs: { direction: "direction", grabPosition: "grabPosition", name: "name", minSize: "minSize", maxSize: "maxSize" }, host: { properties: { "class.resize-panel": "this.resizePanelClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n<div #grab class=\"resize-grab\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd($event)\"\n     [tetaResizeDrag]=\"direction\"\n     [ngClass]=\"getClassName()\">\n  <teta-icon [name]=\"direction\"></teta-icon>\n</div>\n", styles: [""], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: ResizeDragDirective, selector: "[tetaResizeDrag]", inputs: ["tetaResizeDrag"], outputs: ["resizeStart", "resizeProcess", "resizeEnd"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ResizePanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-resize-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div #grab class=\"resize-grab\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd($event)\"\n     [tetaResizeDrag]=\"direction\"\n     [ngClass]=\"getClassName()\">\n  <teta-icon [name]=\"direction\"></teta-icon>\n</div>\n", styles: [""] }]
@@ -10965,12 +11334,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                     args: [DOCUMENT]
                 }] }]; } });
 
-class StringUtil {
-    static firstLetterToLower(input) {
-        return input.charAt(0).toLocaleLowerCase() + input.slice(1);
-    }
-    ;
-}
+const ruLocale = {
+    apply: 'Применить',
+    cancel: 'Отменить',
+    clear: 'Очистить',
+    pin: 'Закрепить',
+    unpin: 'Открепить',
+    sortAsc: 'Сортировать по возрастанию',
+    sortDesc: 'Сортировать по убыванию',
+    clearSort: 'Сбросить сортировку',
+    clearAllSort: 'Сбросить все сортировки',
+    clearFilter: 'Очистить фильтр',
+    clearAllFilters: 'Очистить все фильтры',
+    autosizeColumn: 'Авторазмер колонки',
+    autosizeAll: 'Авторазмер всех колонок',
+    resetColumnsSize: 'Восстановить размер колонок',
+    from: 'От',
+    to: 'До',
+    all: 'Все',
+    min: 'Мин',
+    max: 'Макс',
+    sum: 'Сумма',
+    avg: 'Средн',
+    search: 'Поиск',
+    months: [
+        'Январь',
+        'Февраль',
+        'Март',
+        'Апрель',
+        'Май',
+        'Июнь',
+        'Июль',
+        'Август',
+        'Сентябрь',
+        'Октябрь',
+        'Ноябрь',
+        'Декабрь'
+    ],
+    days: [
+        'Воскресенье',
+        'Понедельник',
+        'Вторник',
+        'Среда',
+        'Четверг',
+        'Пятниуа',
+        'Суббота'
+    ],
+    daysShort: [
+        'Вс',
+        'Пн',
+        'Вт',
+        'Ср',
+        'Чт',
+        'Пт',
+        'Сб'
+    ]
+};
 
 /**
  * Components
@@ -10980,5 +11399,5 @@ class StringUtil {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionContentDirective, AccordionHeadComponent, AccordionItemComponent, AccordionModule, AggregationType, Align, ArrayUtil, BooleanCellComponent, BooleanFilter, BooleanFilterComponent, ButtonComponent, ButtonModule, CHECKBOX_CONTROL_VALUE_ACCESSOR, CellComponent, CellComponentBase, CellHostComponent, Chart3dComponent, Chart3dModule, Chart3dOptions, CheckboxComponent, CheckboxModule, ClickOutsideDirective, ClickOutsideModule, ClickService, ColumnReorderEvent, ColumnResizeEvent, ContextMenuDirective, ContextMenuModule, CurrentModal, DATE_PICKER_CONTROL_VALUE_ACCESSOR, DAY_SELECT_CONTROL_VALUE_ACCESSOR, DateCellComponent, DateFilter, DateFilterComponent, DateFilterValue, DatePeriod, DatePickerComponent, DatePickerModule, DateTimeCellComponent, DateUtil, DaySelectComponent, DelimiterComponent, DelimiterModule, DetailComponentBase, DialogComponent, DialogService, DisableControlDirective, DisableControlModule, DomUtil, DragSortContainerDirective, DragSortItemDirective, DragSortModule, DropdownComponent, DropdownContentDirective, DropdownDirective, DropdownHeadDirective, DropdownModule, DynamicComponentModule, DynamicComponentService, DynamicContentBaseDirective, DynamicData, EditEvent, EditType, ExpandPanelComponent, ExpandPanelContentDirective, ExpandPanelHeadDirective, ExpandPanelModule, FileItemComponent, FileUploadAreaComponent, FileUploadModule, FilterBase, FilterComponentBase, FilterHostComponent, FilterItem, FilterModule, FilterPanelComponent, FilterState, FilterType, FormGroupTitleComponent, FormsUtil, GroupRowComponent, HeadCellComponentBase, HeadCellHostComponent, HighlightDirective, HighlightModule, HintDirective, HintModule, IconComponent, IconModule, IconService, IconSpriteDirective, InputComponent, InputModule, ListCellComponent, ListFilter, ListFilterComponent, ListFilterType, LoaderDirective, LoaderModule, MONTH_PICKER_CONTROL_VALUE_ACCESSOR, Message, MessageComponent, MessageHostComponent, MessageModule, MessageService, ModalCloseReason, ModalContainerComponent, ModalInstance, ModalModule, ModalService, MonthPickerComponent, NoAutofillDirective, NoAutofillModule, NumberPipe, NumberPipeModule, NumericCellComponent, NumericFilter, NumericFilterComponent, NumericFilterValue, OnlyNumberDirective, OnlyNumberModule, OverlayContainerService, PagerComponent, PagerModule, PagerState, PagerUtil, PanelComponent, PanelModule, PopupContentComponent, PositionUtil, ProgressBarComponent, ProgressBarModule, PropertyGridComponent, PropertyGridModule, RadioButtonComponent, RadioComponent, RadioModule, ResizeDragDirective, ResizeDragModule, ResizePanelComponent, ResizePanelModule, SLIDER_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, SelectComponent, SelectModule, SelectOptionDirective, SelectType, SelectValueDirective, SidebarComponent, SidebarModule, SidebarPosition, SortEvent, SortParam, StateUtil, StringCellComponent, StringFilter, StringFilterComponent, StringFilterType, StringUtil, SwitchButtonComponent, SwitchComponent, SwitchModule, TOGGLE_CONTROL_VALUE_ACCESSOR, TabComponent, TabContentDirective, TabTitleDirective, TableBodyComponent, TableColumn, TableColumnStore, TableComponent, TableContextMenuConfig, TableHeadComponent, TableModule, TableRow, TableService, TableUtil, TabsComponent, TabsModule, TetaContentRef, TetaSize, TetaTemplateDirective, TetaTemplateModule, TextFieldComponent, ThemeSwitchComponent, ThemeSwitchModule, ThemeSwitchService, ToggleComponent, ToggleModule, ToolbarComponent, ToolbarModule, TooltipDirective, TooltipModule, TreeComponent, TreeItemToggleComponent, TreeModule, TreeService, VerticalAlign, formatNumber, getCellComponent, getPrecision, prependZero };
+export { AccordionComponent, AccordionContentDirective, AccordionHeadComponent, AccordionItemComponent, AccordionModule, AggregationType, Align, ArrayUtil, BooleanCellComponent, BooleanFilter, BooleanFilterComponent, ButtonComponent, ButtonModule, CHECKBOX_CONTROL_VALUE_ACCESSOR, CellComponent, CellComponentBase, CellHostComponent, Chart3dComponent, Chart3dModule, Chart3dOptions, CheckboxComponent, CheckboxModule, ClickOutsideDirective, ClickOutsideModule, ClickService, ColumnReorderEvent, ColumnResizeEvent, ContextMenuDirective, ContextMenuModule, CurrentModal, DATE_PICKER_CONTROL_VALUE_ACCESSOR, DAY_SELECT_CONTROL_VALUE_ACCESSOR, DateCellComponent, DateFilter, DateFilterComponent, DateFilterValue, DatePeriod, DatePickerComponent, DatePickerModule, DateTimeCellComponent, DateUtil, DaySelectComponent, DelimiterComponent, DelimiterModule, DetailComponentBase, DialogComponent, DialogService, DisableControlDirective, DisableControlModule, DomUtil, DragSortContainerDirective, DragSortItemDirective, DragSortModule, DropdownComponent, DropdownContentDirective, DropdownDirective, DropdownHeadDirective, DropdownModule, DynamicComponentModule, DynamicComponentService, DynamicContentBaseDirective, DynamicData, EditEvent, EditType, ExpandPanelComponent, ExpandPanelContentDirective, ExpandPanelHeadDirective, ExpandPanelModule, FileItemComponent, FileUploadAreaComponent, FileUploadModule, FilterBase, FilterComponentBase, FilterHostComponent, FilterItem, FilterModule, FilterState, FilterType, FormGroupTitleComponent, FormsUtil, GroupRowComponent, HeadCellComponentBase, HeadCellHostComponent, HighlightDirective, HighlightModule, HintDirective, HintModule, IconComponent, IconModule, IconService, IconSpriteDirective, InputComponent, InputModule, ListCellComponent, ListFilter, ListFilterComponent, ListFilterType, LoaderDirective, LoaderModule, MONTH_PICKER_CONTROL_VALUE_ACCESSOR, Message, MessageComponent, MessageHostComponent, MessageModule, MessageService, ModalCloseReason, ModalContainerComponent, ModalInstance, ModalModule, ModalService, MonthPickerComponent, NoAutofillDirective, NoAutofillModule, NumberPipe, NumberPipeModule, NumericCellComponent, NumericFilter, NumericFilterComponent, NumericFilterValue, OnlyNumberDirective, OnlyNumberModule, OverlayContainerService, PagerComponent, PagerModule, PagerState, PagerUtil, PanelComponent, PanelModule, PopupContentComponent, PositionUtil, ProgressBarComponent, ProgressBarModule, PropertyGridComponent, PropertyGridModule, RadioButtonComponent, RadioComponent, RadioModule, ResizeDragDirective, ResizeDragModule, ResizePanelComponent, ResizePanelModule, SLIDER_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, SelectComponent, SelectModule, SelectOptionDirective, SelectType, SelectValueDirective, SidebarComponent, SidebarModule, SidebarPosition, SortEvent, SortParam, StateUtil, StringCellComponent, StringFilter, StringFilterComponent, StringFilterType, StringUtil, SwitchButtonComponent, SwitchComponent, SwitchModule, TOGGLE_CONTROL_VALUE_ACCESSOR, TabComponent, TabContentDirective, TabTitleDirective, TableBodyComponent, TableColumn, TableColumnStore, TableComponent, TableHeadComponent, TableModule, TableRow, TableService, TableUtil, TabsComponent, TabsModule, TetaConfigService, TetaContentRef, TetaSize, TetaTemplateDirective, TetaTemplateModule, TextFieldComponent, ThemeSwitchComponent, ThemeSwitchModule, ThemeSwitchService, ToggleComponent, ToggleModule, ToolbarComponent, ToolbarModule, TooltipDirective, TooltipModule, TreeComponent, TreeItemToggleComponent, TreeModule, TreeService, VerticalAlign, enLocale, formatNumber, getCellComponent, getPrecision, prependZero, ruLocale };
 //# sourceMappingURL=tetacom-ng-components.mjs.map