@tetacom/ng-components 1.1.24 → 1.1.26

package/fesm2022/tetacom-ng-components.mjs

@@ -7,16 +7,16 @@ import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { map, takeWhile, throttleTime, filter, tap as tap$1, withLatestFrom } from 'rxjs/operators';
 import * as i3 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, UntypedFormControl, UntypedFormGroup, Validators, ControlContainer, NgForm, NgModelGroup, FormGroup } from '@angular/forms';
-import * as i6 from '@maskito/angular';
+import * as i7 from '@maskito/angular';
 import { MaskitoModule } from '@maskito/angular';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { trigger, transition, style, animate } from '@angular/animations';
 import dayjs from 'dayjs';
-import { ReplaySubject, BehaviorSubject, combineLatest, takeWhile as takeWhile$1, filter as filter$1, map as map$1, shareReplay, fromEvent, tap, Subject, merge, Observable, pipe, share } from 'rxjs';
+import { ReplaySubject, BehaviorSubject, combineLatest, takeWhile as takeWhile$1, filter as filter$1, map as map$1, lastValueFrom, take, shareReplay, fromEvent, tap, Subject, merge, Observable, pipe, share } from 'rxjs';
 import { maskitoDateTimeOptionsGenerator, maskitoDateOptionsGenerator, maskitoDateRangeOptionsGenerator } from '@maskito/kit';
 import * as i1$2 from '@ngneat/transloco';
 import { TranslocoModule, TRANSLOCO_SCOPE } from '@ngneat/transloco';
-import * as i6$1 from '@angular/cdk/scrolling';
+import * as i6 from '@angular/cdk/scrolling';
 import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import objectHash from 'object-hash';
 import * as d3 from 'd3';
@@ -2979,6 +2979,87 @@ class BasePicker {
     }
 }
 
+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',
+    dateRangeMask: 'dd.mm.yyyy - dd.mm.yyyy',
+    dateMask: 'dd.mm.yyyy',
+    dateTimeMask: 'dd.mm.yyyy, hh:mm',
+    autosizeColumn: 'Autosize column',
+    autosizeAll: 'Autosize all columns',
+    resetColumnsSize: 'Reset columns settings',
+    from: 'From',
+    to: 'To',
+    all: 'All',
+    min: 'Min',
+    max: 'Max',
+    sum: 'Sum',
+    avg: 'Avg',
+    search: 'Search',
+    selected: 'Selected',
+    notSelected: 'Not selected',
+    notFound: 'Not found',
+    yes: 'Yes',
+    no: 'No',
+    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 TetaConfigService {
+    defaultLocale = enLocale;
+    locale$ = new BehaviorSubject(this.defaultLocale);
+    locale = this.locale$.asObservable();
+    constructor() {
+    }
+    setLocale(newLocale) {
+        if (newLocale) {
+            this.locale$.next(newLocale);
+        }
+        else {
+            this.locale$.next(this.defaultLocale);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: TetaConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: TetaConfigService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: TetaConfigService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
 const DATE_PICKER_CONTROL_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => DatePickerComponent),
@@ -2988,6 +3069,7 @@ class DatePickerComponent extends BasePicker {
     _elementRef;
     _cdr;
     datePipe;
+    localeService;
     date = null;
     locale = 'ru';
     showTime = false;
@@ -3013,11 +3095,12 @@ class DatePickerComponent extends BasePicker {
     mask = '';
     classDatepicker = true;
     tabindex = 0;
-    constructor(_elementRef, _cdr, datePipe) {
+    constructor(_elementRef, _cdr, datePipe, localeService) {
         super(_elementRef, _cdr, datePipe);
         this._elementRef = _elementRef;
         this._cdr = _cdr;
         this.datePipe = datePipe;
+        this.localeService = localeService;
     }
     ngOnInit() {
         if (!this.date) {
@@ -3029,7 +3112,8 @@ class DatePickerComponent extends BasePicker {
         }
         this.prepareInput();
     }
-    prepareInput() {
+    async prepareInput() {
+        const config = await lastValueFrom(this.localeService.locale.pipe(take(1)));
         const str = this.date ? this.getLocaleString(this.date) : '';
         let option;
         const setMinMax = () => {
@@ -3041,7 +3125,7 @@ class DatePickerComponent extends BasePicker {
             }
         };
         if (this.showTime) {
-            this.mask = 'dd.mm.yyyy, hh:mm';
+            this.mask = config.dateTimeMask;
             option = {
                 dateMode: 'dd/mm/yyyy',
                 timeMode: 'HH:MM',
@@ -3051,7 +3135,7 @@ class DatePickerComponent extends BasePicker {
             this.maskitoOptions = maskitoDateTimeOptionsGenerator(option);
         }
         else {
-            this.mask = 'dd.mm.yyyy';
+            this.mask = config.dateMask;
             option = {
                 mode: 'dd/mm/yyyy',
                 separator: '.',
@@ -3115,13 +3199,13 @@ class DatePickerComponent extends BasePicker {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DatePickerComponent, selector: "teta-date-picker", inputs: { date: "date", locale: "locale", showTime: "showTime", minDate: "minDate", maxDate: "maxDate", invalid: "invalid", disabled: "disabled", align: "align", verticalAlign: "verticalAlign", viewType: "viewType", appendToBody: "appendToBody", backdrop: "backdrop", allowNull: "allowNull", firstDayOfWeek: "firstDayOfWeek", disabledDates: "disabledDates", disabledPeriods: "disabledPeriods", disabledDays: "disabledDays", minYearDate: "minYearDate", maxYearDate: "maxYearDate" }, outputs: { selectDate: "selectDate" }, host: { properties: { "class.datepicker": "this.classDatepicker", "tabindex": "this.tabindex" } }, providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR, DatePipe], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<teta-dropdown *ngIf='{\n                selectedDate:selectedDate | async\n               } as data'\n               class='row row_auto'\n               [appendToBody]='appendToBody'\n               [backdrop]='backdrop'\n               [open]='open'\n               (openChange)='openChange($event)'\n               [viewType]='viewType'\n               [disabled]='disabled'\n               [verticalAlign]='verticalAlign'\n               [align]='align'\n               [autoCloseIgnore]=\"['esc', 'inside','enter']\">\n  <div tetaDropdownHead\n       [class]=\"'datepicker-head font-body-3 gap-8  datepicker_'+viewType\"\n       [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\n    <teta-input class='row row_auto flex'>\n      <div [class]=\"'row_auto row datepicker_'+viewType\">\n        <div class='row row_auto position-relative font-body-3 align-center'>\n          <input [ngClass]=\"{'color-text-90':!disabled}\"\n                 [disabled]='disabled' #input style='z-index: 1'\n                 class='row_auto border-0'\n                 (keydown)='checkEnter($event)'\n                 [(ngModel)]='inputText'\n                 (ngModelChange)='changeInput($event)'\n                 [maskito]='maskitoOptions'>\n          <div (click)='input.focus()' *ngIf='data.selectedDate||allowNull' class='position-absolute color-text-10'\n               style='top:-0.3px;cursor: text;user-select: none'>{{placeholder}}</div>\n        </div>\n        <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n      </div>\n    </teta-input>\n  </div>\n  <div tetaDropdownContent\n       (click)='$event.preventDefault()'>\n    <!--    <ng-container *ngIf='open'>-->\n    <teta-date-calendar [isDateNull]='date===null'\n                        [open]='open'\n                        [max]='maxDate'\n                        [min]='minDate'\n                        (setDate)='changeSelectedDate($event)'\n                        [selectedDate]='data.selectedDate'\n                        [viewType]='viewType' [locale]='locale'></teta-date-calendar>\n    <!--    </ng-container>-->\n  </div>\n</teta-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i6.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "component", type: DateCalendarComponent, selector: "teta-date-calendar", inputs: ["selectedDate", "locale", "open", "viewType", "min", "isDateNull", "max"], outputs: ["setDate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.DatePipe }, { token: TetaConfigService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DatePickerComponent, selector: "teta-date-picker", inputs: { date: "date", locale: "locale", showTime: "showTime", minDate: "minDate", maxDate: "maxDate", invalid: "invalid", disabled: "disabled", align: "align", verticalAlign: "verticalAlign", viewType: "viewType", appendToBody: "appendToBody", backdrop: "backdrop", allowNull: "allowNull", firstDayOfWeek: "firstDayOfWeek", disabledDates: "disabledDates", disabledPeriods: "disabledPeriods", disabledDays: "disabledDays", minYearDate: "minYearDate", maxYearDate: "maxYearDate" }, outputs: { selectDate: "selectDate" }, host: { properties: { "class.datepicker": "this.classDatepicker", "tabindex": "this.tabindex" } }, providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR, DatePipe], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<teta-dropdown *ngIf='{\n                selectedDate:selectedDate | async\n               } as data'\n               class='row row_auto'\n               [appendToBody]='appendToBody'\n               [backdrop]='backdrop'\n               [open]='open'\n               (openChange)='openChange($event)'\n               [viewType]='viewType'\n               [disabled]='disabled'\n               [verticalAlign]='verticalAlign'\n               [align]='align'\n               [autoCloseIgnore]=\"['esc', 'inside','enter']\">\n  <div tetaDropdownHead\n       [class]=\"'datepicker-head font-body-3 gap-8  datepicker_'+viewType\"\n       [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\n    <teta-input class='row row_auto flex'>\n      <div [class]=\"'row_auto row datepicker_'+viewType\">\n        <div class='row row_auto position-relative font-body-3 align-center'>\n          <input [ngClass]=\"{'color-text-90':!disabled}\"\n                 [disabled]='disabled' #input style='z-index: 1'\n                 class='row_auto border-0'\n                 (keydown)='checkEnter($event)'\n                 [(ngModel)]='inputText'\n                 (ngModelChange)='changeInput($event)'\n                 [maskito]='maskitoOptions'>\n          <div (click)='input.focus()' *ngIf='data.selectedDate||allowNull' class='position-absolute color-text-10'\n               style='top:-0.3px;cursor: text;user-select: none'>{{placeholder}}</div>\n        </div>\n        <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n      </div>\n    </teta-input>\n  </div>\n  <div tetaDropdownContent\n       (click)='$event.preventDefault()'>\n    <!--    <ng-container *ngIf='open'>-->\n    <teta-date-calendar [isDateNull]='date===null'\n                        [open]='open'\n                        [max]='maxDate'\n                        [min]='minDate'\n                        (setDate)='changeSelectedDate($event)'\n                        [selectedDate]='data.selectedDate'\n                        [viewType]='viewType' [locale]='locale'></teta-date-calendar>\n    <!--    </ng-container>-->\n  </div>\n</teta-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i7.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "component", type: DateCalendarComponent, selector: "teta-date-calendar", inputs: ["selectedDate", "locale", "open", "viewType", "min", "isDateNull", "max"], outputs: ["setDate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR, DatePipe], template: "<teta-dropdown *ngIf='{\n                selectedDate:selectedDate | async\n               } as data'\n               class='row row_auto'\n               [appendToBody]='appendToBody'\n               [backdrop]='backdrop'\n               [open]='open'\n               (openChange)='openChange($event)'\n               [viewType]='viewType'\n               [disabled]='disabled'\n               [verticalAlign]='verticalAlign'\n               [align]='align'\n               [autoCloseIgnore]=\"['esc', 'inside','enter']\">\n  <div tetaDropdownHead\n       [class]=\"'datepicker-head font-body-3 gap-8  datepicker_'+viewType\"\n       [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\n    <teta-input class='row row_auto flex'>\n      <div [class]=\"'row_auto row datepicker_'+viewType\">\n        <div class='row row_auto position-relative font-body-3 align-center'>\n          <input [ngClass]=\"{'color-text-90':!disabled}\"\n                 [disabled]='disabled' #input style='z-index: 1'\n                 class='row_auto border-0'\n                 (keydown)='checkEnter($event)'\n                 [(ngModel)]='inputText'\n                 (ngModelChange)='changeInput($event)'\n                 [maskito]='maskitoOptions'>\n          <div (click)='input.focus()' *ngIf='data.selectedDate||allowNull' class='position-absolute color-text-10'\n               style='top:-0.3px;cursor: text;user-select: none'>{{placeholder}}</div>\n        </div>\n        <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n      </div>\n    </teta-input>\n  </div>\n  <div tetaDropdownContent\n       (click)='$event.preventDefault()'>\n    <!--    <ng-container *ngIf='open'>-->\n    <teta-date-calendar [isDateNull]='date===null'\n                        [open]='open'\n                        [max]='maxDate'\n                        [min]='minDate'\n                        (setDate)='changeSelectedDate($event)'\n                        [selectedDate]='data.selectedDate'\n                        [viewType]='viewType' [locale]='locale'></teta-date-calendar>\n    <!--    </ng-container>-->\n  </div>\n</teta-dropdown>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.DatePipe }]; }, propDecorators: { date: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.DatePipe }, { type: TetaConfigService }]; }, propDecorators: { date: [{
                 type: Input
             }], locale: [{
                 type: Input
@@ -3291,6 +3375,7 @@ class DateRangeComponent extends BasePicker {
     _cdr;
     _elementRef;
     datePipe;
+    localeService;
     date = { from: null, to: null };
     locale = 'ru';
     showTime = false;
@@ -3309,11 +3394,12 @@ class DateRangeComponent extends BasePicker {
     mask = '';
     selectedDate = new ReplaySubject(1);
     classDaterange = true;
-    constructor(_cdr, _elementRef, datePipe) {
+    constructor(_cdr, _elementRef, datePipe, localeService) {
         super(_elementRef, _cdr, datePipe);
         this._cdr = _cdr;
         this._elementRef = _elementRef;
         this.datePipe = datePipe;
+        this.localeService = localeService;
     }
     changeSelectedDate(date, selectedDate) {
         if (selectedDate.from) {
@@ -3337,7 +3423,8 @@ class DateRangeComponent extends BasePicker {
             ' - ' +
             this.datePipe.transform(new Date(), 'dd.MM.yyyy'));
     }
-    prepareInput() {
+    async prepareInput() {
+        const config = await lastValueFrom(this.localeService.locale.pipe(take(1)));
         let str = this.getLocaleString(this.date.from) +
             ' - ' +
             this.getLocaleString(this.date.to);
@@ -3352,7 +3439,7 @@ class DateRangeComponent extends BasePicker {
             mode: 'dd/mm/yyyy',
             separator: '.',
         };
-        this.mask = 'dd.mm.yyyy - dd.mm.yyyy';
+        this.mask = config.dateRangeMask;
         if (this.minDate) {
             option.min = dayjs(new Date(this.minDate)).startOf('day');
         }
@@ -3454,13 +3541,13 @@ class DateRangeComponent extends BasePicker {
         this.prepareInput();
     }
     onChange(date) { }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DateRangeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DateRangeComponent, selector: "teta-date-range", inputs: { date: "date", locale: "locale", showTime: "showTime", minDate: "minDate", maxDate: "maxDate", invalid: "invalid", disabled: "disabled", align: "align", verticalAlign: "verticalAlign", viewType: "viewType", appendToBody: "appendToBody", backdrop: "backdrop", allowNull: "allowNull" }, outputs: { selectDate: "selectDate" }, host: { properties: { "class.daterange": "this.classDaterange" } }, providers: [DATE_Range_CONTROL_VALUE_ACCESSOR, DatePipe], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<teta-dropdown *ngIf=\"{selectedDate:selectedDate|async}as data\" [appendToBody]=\"appendToBody\" [backdrop]=\"backdrop\"\n               class='row row_auto'\n               [(open)]=\"open\" (openChange)=\"openChange($event)\" [viewType]=\"viewType\"\n               [disabled]=\"disabled\" [verticalAlign]=\"verticalAlign\" [align]=\"align\"\n               [autoCloseIgnore]=\"['esc', 'inside','enter']\">\n  <div tetaDropdownHead\n       [class]=\"'datepicker-head font-body-3 gap-8 datepicker_'+viewType\"\n       [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\n    <teta-input class=\"row row_auto flex\">\n      <div [class]=\"'row_auto row datepicker_'+viewType\">\n        <div class=\"row row_auto position-relative font-body-3 align-center\">\n          <input [ngClass]=\"{'color-text-90':!disabled}\" [disabled]=\"disabled\" #input style=\"z-index: 1\"\n                 class=\"border-0 color-text-90\" (keydown)=\"checkEnter($event)\"\n                 [(ngModel)]=\"inputText\" (ngModelChange)=\"changeInput($event)\"\n                 [maskito]=\"maskitoOptions\">\n          <div (click)=\"input.focus()\" *ngIf=\"data.selectedDate||allowNull\" class=\"position-absolute color-text-10\"\n               style=\"top:-0.3px;cursor: text;user-select: none\">{{placeholder}}</div>\n        </div>\n        <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n      </div>\n    </teta-input>\n  </div>\n  <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n    <ng-container *ngIf=\"open\">\n      <div class=\"row\">\n        <teta-range-calendar [isDateNull]=\"date===null||(date?.from===null&&date?.to===null)\" [open]=\"open\"\n                             [max]=\"maxDate\"\n                             [allowNull]=\"allowNull\"\n                             [min]=\"minDate\"\n                             (setDate)=\"changeSelectedDate($event,data.selectedDate)\"\n                             [selectedDate]=\"data.selectedDate\"\n                             [date]=\"date\"\n                             [viewType]=\"viewType\" [locale]=\"locale\"></teta-range-calendar>\n      </div>\n    </ng-container>\n  </div>\n</teta-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i6.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i6.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "component", type: RangeCalendarComponent, selector: "teta-range-calendar", inputs: ["locale", "open", "date", "viewType", "allowNull", "selectedDate", "min", "isDateNull", "max"], outputs: ["hoveredDateChange", "setDate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DateRangeComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.DatePipe }, { token: TetaConfigService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: DateRangeComponent, selector: "teta-date-range", inputs: { date: "date", locale: "locale", showTime: "showTime", minDate: "minDate", maxDate: "maxDate", invalid: "invalid", disabled: "disabled", align: "align", verticalAlign: "verticalAlign", viewType: "viewType", appendToBody: "appendToBody", backdrop: "backdrop", allowNull: "allowNull" }, outputs: { selectDate: "selectDate" }, host: { properties: { "class.daterange": "this.classDaterange" } }, providers: [DATE_Range_CONTROL_VALUE_ACCESSOR, DatePipe], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<teta-dropdown *ngIf=\"{selectedDate:selectedDate|async}as data\" [appendToBody]=\"appendToBody\" [backdrop]=\"backdrop\"\n               class='row row_auto'\n               [(open)]=\"open\" (openChange)=\"openChange($event)\" [viewType]=\"viewType\"\n               [disabled]=\"disabled\" [verticalAlign]=\"verticalAlign\" [align]=\"align\"\n               [autoCloseIgnore]=\"['esc', 'inside','enter']\">\n  <div tetaDropdownHead\n       [class]=\"'datepicker-head font-body-3 gap-8 datepicker_'+viewType\"\n       [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\n    <teta-input class=\"row row_auto flex\">\n      <div [class]=\"'row_auto row datepicker_'+viewType\">\n        <div class=\"row row_auto position-relative font-body-3 align-center\">\n          <input [ngClass]=\"{'color-text-90':!disabled}\" [disabled]=\"disabled\" #input style=\"z-index: 1\"\n                 class=\"border-0 color-text-90\" (keydown)=\"checkEnter($event)\"\n                 [(ngModel)]=\"inputText\" (ngModelChange)=\"changeInput($event)\"\n                 [maskito]=\"maskitoOptions\">\n          <div (click)=\"input.focus()\" *ngIf=\"data.selectedDate||allowNull\" class=\"position-absolute color-text-10\"\n               style=\"top:-0.3px;cursor: text;user-select: none\">{{placeholder}}</div>\n        </div>\n        <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n      </div>\n    </teta-input>\n  </div>\n  <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n    <ng-container *ngIf=\"open\">\n      <div class=\"row\">\n        <teta-range-calendar [isDateNull]=\"date===null||(date?.from===null&&date?.to===null)\" [open]=\"open\"\n                             [max]=\"maxDate\"\n                             [allowNull]=\"allowNull\"\n                             [min]=\"minDate\"\n                             (setDate)=\"changeSelectedDate($event,data.selectedDate)\"\n                             [selectedDate]=\"data.selectedDate\"\n                             [date]=\"date\"\n                             [viewType]=\"viewType\" [locale]=\"locale\"></teta-range-calendar>\n      </div>\n    </ng-container>\n  </div>\n</teta-dropdown>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"] }, { kind: "directive", type: i7.MaskitoCva, selector: "input[maskito], textarea[maskito]", inputs: ["maskito"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "component", type: RangeCalendarComponent, selector: "teta-range-calendar", inputs: ["locale", "open", "date", "viewType", "allowNull", "selectedDate", "min", "isDateNull", "max"], outputs: ["hoveredDateChange", "setDate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-date-range', providers: [DATE_Range_CONTROL_VALUE_ACCESSOR, DatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown *ngIf=\"{selectedDate:selectedDate|async}as data\" [appendToBody]=\"appendToBody\" [backdrop]=\"backdrop\"\n               class='row row_auto'\n               [(open)]=\"open\" (openChange)=\"openChange($event)\" [viewType]=\"viewType\"\n               [disabled]=\"disabled\" [verticalAlign]=\"verticalAlign\" [align]=\"align\"\n               [autoCloseIgnore]=\"['esc', 'inside','enter']\">\n  <div tetaDropdownHead\n       [class]=\"'datepicker-head font-body-3 gap-8 datepicker_'+viewType\"\n       [ngClass]=\"{'datepicker-head_invalid':invalid,'datepicker-head_disabled':disabled}\">\n    <teta-input class=\"row row_auto flex\">\n      <div [class]=\"'row_auto row datepicker_'+viewType\">\n        <div class=\"row row_auto position-relative font-body-3 align-center\">\n          <input [ngClass]=\"{'color-text-90':!disabled}\" [disabled]=\"disabled\" #input style=\"z-index: 1\"\n                 class=\"border-0 color-text-90\" (keydown)=\"checkEnter($event)\"\n                 [(ngModel)]=\"inputText\" (ngModelChange)=\"changeInput($event)\"\n                 [maskito]=\"maskitoOptions\">\n          <div (click)=\"input.focus()\" *ngIf=\"data.selectedDate||allowNull\" class=\"position-absolute color-text-10\"\n               style=\"top:-0.3px;cursor: text;user-select: none\">{{placeholder}}</div>\n        </div>\n        <teta-icon [name]=\"'calendar'\" [palette]=\"'text'\"></teta-icon>\n      </div>\n    </teta-input>\n  </div>\n  <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n    <ng-container *ngIf=\"open\">\n      <div class=\"row\">\n        <teta-range-calendar [isDateNull]=\"date===null||(date?.from===null&&date?.to===null)\" [open]=\"open\"\n                             [max]=\"maxDate\"\n                             [allowNull]=\"allowNull\"\n                             [min]=\"minDate\"\n                             (setDate)=\"changeSelectedDate($event,data.selectedDate)\"\n                             [selectedDate]=\"data.selectedDate\"\n                             [date]=\"date\"\n                             [viewType]=\"viewType\" [locale]=\"locale\"></teta-range-calendar>\n      </div>\n    </ng-container>\n  </div>\n</teta-dropdown>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.DatePipe }]; }, propDecorators: { date: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.DatePipe }, { type: TetaConfigService }]; }, propDecorators: { date: [{
                 type: Input
             }], locale: [{
                 type: Input
@@ -4079,92 +4166,6 @@ class NumericFilterValue {
     }
 }
 
-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 settings',
-    from: 'From',
-    to: 'To',
-    all: 'All',
-    min: 'Min',
-    max: 'Max',
-    sum: 'Sum',
-    avg: 'Avg',
-    search: 'Search',
-    selected: 'Selected',
-    notSelected: 'Not selected',
-    notFound: 'Not found',
-    yes: 'Yes',
-    no: 'No',
-    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 TetaConfigService {
-    defaultLocale = enLocale;
-    locale$ = new BehaviorSubject(this.defaultLocale);
-    locale = this.locale$.asObservable();
-    constructor() {
-    }
-    setLocale(newLocale) {
-        if (newLocale) {
-            this.locale$.next(newLocale);
-        }
-        else {
-            this.locale$.next(this.defaultLocale);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: TetaConfigService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: TetaConfigService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: TetaConfigService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return []; } });
-
 class NumericFilterComponent extends FilterComponentBase {
     changeDetector;
     _config;
@@ -5423,7 +5424,7 @@ class SelectComponent {
                 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: "<ng-container *tetaLet='locale | async as loc'>\n  <teta-dropdown [align]='align'\n                 [verticalAlign]='verticalAlign'\n                 [autoClose]='autoClose'\n                 [autoCloseIgnore]='autoCloseIgnore'\n                 [(open)]='open'\n                 [appendToBody]='appendToBody'\n                 [disabled]='disabled'\n                 [viewType]='viewType'\n                 class='row row_auto'>\n    <div tetaDropdownHead\n         [class]=\"'row row_auto select-head select_'+viewType\"\n         [class.select-head_invalid]='invalid'>\n      <div class='row_auto flex align-center'>\n        <teta-icon *ngIf='icon' [name]='icon' [palette]=\"'text'\" class='margin-right-1'></teta-icon>\n        <span class='placeholder' *ngIf='(value=== null ||value=== undefined || value?.length === 0)&&!multiple'>\n          {{placeholder || loc.notSelected}}\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'\" [palette]=\"'text'\"></teta-icon>\n    </div>\n    <div *ngIf='options?.length'\n         tetaDropdownContent\n         class='select-body row_auto'\n         (click)='$event.preventDefault()'>\n      <ng-container *ngIf='searchRef'>\n        <div class='select-search padding-h-2'>\n          <teta-text-field [ngModel]='searchText'\n                           [class]=\"'select_'+viewType\"\n                           (ngModelChange)='search($event)'\n                           [placeholder]='loc.search'\n                           [leftIconName]=\"'search'\"></teta-text-field>\n        </div>\n      </ng-container>\n      <ng-container *ngIf='visibleOptions?.length;else notFound '>\n        <ng-container *ngIf='!multiple && allowNull'>\n          <div [class]=\"'margin-h-2 list-item list-item_interactive select_'+viewType\"\n               (click)='clear()'>\n            {{loc.notSelected}}\n          </div>\n          <div class='list-divider margin-bottom-0'></div>\n        </ng-container>\n        <teta-scrollable *ngIf='virtual; else default' class='column column_auto padding-h-2'>\n          <cdk-virtual-scroll-viewport tetaScrollable\n                                       [itemSize]='40'\n                                       minBufferPx='200'\n                                       maxBufferPx='600'>\n            <div [class]=\"'list-item list-item_interactive justify-content-between select_'+viewType\"\n                 *cdkVirtualFor='let option of visibleOptions; templateCacheSize: 0;'\n                 [class.list-item_active]='itemSelected(option)'\n                 [tetaHighlight]='searchText'\n                 (click)='clickOption(option, $event)'>\n              <div [tetaHighlight]='searchText'>\n                <ng-container\n                  *ngTemplateOutlet='optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}'>\n                </ng-container>\n              </div>\n              <teta-icon *ngIf='itemSelected(option)' [name]=\"'tick'\" [palette]=\"'text'\"\n                         class='margin-left-2'></teta-icon>\n            </div>\n          </cdk-virtual-scroll-viewport>\n        </teta-scrollable>\n        <ng-template #default>\n          <teta-scrollable class='column column_auto padding-h-2' [contentClass]=\"['column', 'column_auto']\">\n            <div class='list'>\n              <div [class]=\"'list-item list-item_interactive justify-content-between  select_'+viewType\"\n                   *ngFor='let option of visibleOptions'\n                   [class.list-item_active]='itemSelected(option)'\n                   (click)='clickOption(option, $event)'>\n              <span [tetaHighlight]='searchText'>\n                <ng-container\n                  *ngTemplateOutlet='optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}'>\n                </ng-container>\n              </span>\n                <teta-icon *ngIf='itemSelected(option) && multiple' [name]=\"'tick'\" [palette]=\"'text'\"></teta-icon>\n              </div>\n            </div>\n          </teta-scrollable>\n        </ng-template>\n      </ng-container>\n      <div class='row row_auto select-chip-field flex-wrap' *ngIf='multiple && value?.length'>\n        <div *ngFor='let item of value' class='tag'>\n          {{getText(item)}}\n          <teta-icon class='cursor-pointer' [palette]=\"'text'\" [name]=\"'closeCircle'\"\n                     (click)='removeItemClick(item, $event)'></teta-icon>\n        </div>\n      </div>\n    </div>\n  </teta-dropdown>\n  <ng-template #notFound>\n    <p\n      class='padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option'>{{notFoundText || loc.notFound}}</p>\n  </ng-template>\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      {{loc.selected + ' ' + value?.length}}\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</ng-container>\n\n", styles: [""], dependencies: [{ kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: HighlightDirective, selector: "[tetaHighlight]", inputs: ["tetaHighlight"] }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "decimalPart", "invalid"] }, { kind: "directive", type: LetDirective, selector: "[tetaLet]", inputs: ["tetaLet"] }, { kind: "directive", type: ScrollableDirective, selector: "[tetaScrollable]" }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], 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: "<ng-container *tetaLet='locale | async as loc'>\n  <teta-dropdown [align]='align'\n                 [verticalAlign]='verticalAlign'\n                 [autoClose]='autoClose'\n                 [autoCloseIgnore]='autoCloseIgnore'\n                 [(open)]='open'\n                 [appendToBody]='appendToBody'\n                 [disabled]='disabled'\n                 [viewType]='viewType'\n                 class='row row_auto'>\n    <div tetaDropdownHead\n         [class]=\"'row row_auto select-head select_'+viewType\"\n         [class.select-head_invalid]='invalid'>\n      <div class='row_auto flex align-center'>\n        <teta-icon *ngIf='icon' [name]='icon' [palette]=\"'text'\" class='margin-right-1'></teta-icon>\n        <span class='placeholder' *ngIf='(value=== null ||value=== undefined || value?.length === 0)&&!multiple'>\n          {{placeholder || loc.notSelected}}\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'\" [palette]=\"'text'\"></teta-icon>\n    </div>\n    <div *ngIf='options?.length'\n         tetaDropdownContent\n         class='select-body row_auto'\n         (click)='$event.preventDefault()'>\n      <ng-container *ngIf='searchRef'>\n        <div class='select-search padding-h-2'>\n          <teta-text-field [ngModel]='searchText'\n                           [class]=\"'select_'+viewType\"\n                           (ngModelChange)='search($event)'\n                           [placeholder]='loc.search'\n                           [leftIconName]=\"'search'\"></teta-text-field>\n        </div>\n      </ng-container>\n      <ng-container *ngIf='visibleOptions?.length;else notFound '>\n        <ng-container *ngIf='!multiple && allowNull'>\n          <div [class]=\"'margin-h-2 list-item list-item_interactive select_'+viewType\"\n               (click)='clear()'>\n            {{loc.notSelected}}\n          </div>\n          <div class='list-divider margin-bottom-0'></div>\n        </ng-container>\n        <teta-scrollable *ngIf='virtual; else default' class='column column_auto padding-h-2'>\n          <cdk-virtual-scroll-viewport tetaScrollable\n                                       [itemSize]='40'\n                                       minBufferPx='200'\n                                       maxBufferPx='600'>\n            <div [class]=\"'list-item list-item_interactive justify-content-between select_'+viewType\"\n                 *cdkVirtualFor='let option of visibleOptions; templateCacheSize: 0;'\n                 [class.list-item_active]='itemSelected(option)'\n                 [tetaHighlight]='searchText'\n                 (click)='clickOption(option, $event)'>\n              <div [tetaHighlight]='searchText'>\n                <ng-container\n                  *ngTemplateOutlet='optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}'>\n                </ng-container>\n              </div>\n              <teta-icon *ngIf='itemSelected(option)' [name]=\"'tick'\" [palette]=\"'text'\"\n                         class='margin-left-2'></teta-icon>\n            </div>\n          </cdk-virtual-scroll-viewport>\n        </teta-scrollable>\n        <ng-template #default>\n          <teta-scrollable class='column column_auto padding-h-2' [contentClass]=\"['column', 'column_auto']\">\n            <div class='list'>\n              <div [class]=\"'list-item list-item_interactive justify-content-between  select_'+viewType\"\n                   *ngFor='let option of visibleOptions'\n                   [class.list-item_active]='itemSelected(option)'\n                   (click)='clickOption(option, $event)'>\n              <span [tetaHighlight]='searchText'>\n                <ng-container\n                  *ngTemplateOutlet='optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}'>\n                </ng-container>\n              </span>\n                <teta-icon *ngIf='itemSelected(option) && multiple' [name]=\"'tick'\" [palette]=\"'text'\"></teta-icon>\n              </div>\n            </div>\n          </teta-scrollable>\n        </ng-template>\n      </ng-container>\n      <div class='row row_auto select-chip-field flex-wrap' *ngIf='multiple && value?.length'>\n        <div *ngFor='let item of value' class='tag'>\n          {{getText(item)}}\n          <teta-icon class='cursor-pointer' [palette]=\"'text'\" [name]=\"'closeCircle'\"\n                     (click)='removeItemClick(item, $event)'></teta-icon>\n        </div>\n      </div>\n    </div>\n  </teta-dropdown>\n  <ng-template #notFound>\n    <p\n      class='padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option'>{{notFoundText || loc.notFound}}</p>\n  </ng-template>\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      {{loc.selected + ' ' + value?.length}}\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</ng-container>\n\n", styles: [""], dependencies: [{ kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i6.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: HighlightDirective, selector: "[tetaHighlight]", inputs: ["tetaHighlight"] }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "decimalPart", "invalid"] }, { kind: "directive", type: LetDirective, selector: "[tetaLet]", inputs: ["tetaLet"] }, { kind: "directive", type: ScrollableDirective, selector: "[tetaScrollable]" }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -9959,7 +9960,7 @@ class TreeComponent {
         this._obs.disconnect();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: TreeComponent, deps: [{ token: TreeService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: TreeComponent, selector: "teta-tree", inputs: { data: "data", padding: "padding", childNodeName: "childNodeName", virtual: "virtual", height: "height", openItems: "openItems", compareItems: "compareItems" }, outputs: { service: "service", openItemsChange: "openItemsChange" }, host: { properties: { "class.tree": "this.treeClass" } }, providers: [TreeService], queries: [{ propertyName: "template", first: true, predicate: TetaTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<teta-scrollable *ngIf=\"virtual; else default\" class=\"column column_auto\">\n  <cdk-virtual-scroll-viewport tetaScrollable\n                               class=\"table-body-container\"\n                               [itemSize]=\"height\">\n    <teta-tree-item *cdkVirtualFor=\"let item of displayData;templateCacheSize: 0; trackBy: trackRow;\"\n                    [item]=\"item\"\n                    [style.height.px]=\"height\"\n                    [depth]=\"item['level']\"\n                    [padding]=\"padding\"\n                    [childNodeName]=\"childNodeName\"\n                    [childPadding]=\"childPadding\"\n                    [template]=\"template?.template\"></teta-tree-item>\n  </cdk-virtual-scroll-viewport>\n</teta-scrollable>\n<ng-template #default>\n  <teta-scrollable class=\"column column_auto\" direction=\"column\">\n    <teta-tree-item *ngFor=\"let item of displayData; trackBy: trackRow\"\n                    [item]=\"item\"\n                    [style.height.px]=\"height\"\n                    [depth]=\"item['level']\"\n                    [padding]=\"padding\"\n                    [childNodeName]=\"childNodeName\"\n                    [childPadding]=\"childPadding\"\n                    [template]=\"template?.template\"></teta-tree-item>\n  </teta-scrollable>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: ScrollableDirective, selector: "[tetaScrollable]" }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "component", type: TreeItemComponent, selector: "teta-tree-item", inputs: ["item", "depth", "padding", "childNodeName", "template", "childPadding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: TreeComponent, selector: "teta-tree", inputs: { data: "data", padding: "padding", childNodeName: "childNodeName", virtual: "virtual", height: "height", openItems: "openItems", compareItems: "compareItems" }, outputs: { service: "service", openItemsChange: "openItemsChange" }, host: { properties: { "class.tree": "this.treeClass" } }, providers: [TreeService], queries: [{ propertyName: "template", first: true, predicate: TetaTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<teta-scrollable *ngIf=\"virtual; else default\" class=\"column column_auto\">\n  <cdk-virtual-scroll-viewport tetaScrollable\n                               class=\"table-body-container\"\n                               [itemSize]=\"height\">\n    <teta-tree-item *cdkVirtualFor=\"let item of displayData;templateCacheSize: 0; trackBy: trackRow;\"\n                    [item]=\"item\"\n                    [style.height.px]=\"height\"\n                    [depth]=\"item['level']\"\n                    [padding]=\"padding\"\n                    [childNodeName]=\"childNodeName\"\n                    [childPadding]=\"childPadding\"\n                    [template]=\"template?.template\"></teta-tree-item>\n  </cdk-virtual-scroll-viewport>\n</teta-scrollable>\n<ng-template #default>\n  <teta-scrollable class=\"column column_auto\" direction=\"column\">\n    <teta-tree-item *ngFor=\"let item of displayData; trackBy: trackRow\"\n                    [item]=\"item\"\n                    [style.height.px]=\"height\"\n                    [depth]=\"item['level']\"\n                    [padding]=\"padding\"\n                    [childNodeName]=\"childNodeName\"\n                    [childPadding]=\"childPadding\"\n                    [template]=\"template?.template\"></teta-tree-item>\n  </teta-scrollable>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: ScrollableDirective, selector: "[tetaScrollable]" }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "component", type: TreeItemComponent, selector: "teta-tree-item", inputs: ["item", "depth", "padding", "childNodeName", "template", "childPadding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
@@ -11184,7 +11185,7 @@ class TableBodyComponent {
             : current.data[columnName], null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: TableBodyComponent, deps: [{ token: TableService }, { token: i0.ElementRef }, { token: TetaConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: TableBodyComponent, selector: "teta-table-body", inputs: { virtual: "virtual", activeRow: "activeRow", selectedRows: "selectedRows", additionalComponent: "additionalComponent", aggregate: "aggregate", selectType: "selectType", rowClass: "rowClass", trackRow: "trackRow", trackColumns: "trackColumns" }, outputs: { scrollChange: "scrollChange" }, host: { properties: { "class.table-body": "this.tableBodyClass" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<teta-scrollable class=\"table-body-container\"\n                 style=\"padding-bottom: 12px\"\n                 showScrollbars=\"true\"\n                 *ngIf=\"virtual && data.length > 0; else nonVirtual\">\n  <cdk-virtual-scroll-viewport tetaScrollable\n                               class=\"table-body-container\"\n                               (scroll)=\"emitScroll($event)\"\n                               [itemSize]=\"28\">\n    <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackTableRow;\">\n      <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</teta-scrollable>\n<ng-template #nonVirtual>\n  <teta-scrollable class=\"table-body-container\"\n                   style=\"padding-bottom: 12px\"\n                   direction=\"column\"\n                   showScrollbars=\"true\"\n                   (scroll)=\"emitScroll($event)\">\n    <div class=\"table-body-container\">\n      <div class=\"column column_auto\"\n           style=\"position: absolute; top:0; bottom:16px;left:0;right:0;\"\n           *ngIf=\"!data?.length\">\n        <ng-content></ng-content>\n      </div>\n      <ng-container *ngFor=\"let row of data; let rowIndex = index; trackBy: trackTableRow;\">\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      <ng-container *ngTemplateOutlet=\"emptyRow;\"></ng-container>\n    </div>\n  </teta-scrollable>\n</ng-template>\n\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <div class=\"table-row\"\n       ngForm\n       (click)=\"setActiveRow(row.data, $event)\"\n       [attr.data-row]=\"rowIndex\"\n       [class.table-row_odd]=\"rowIndex % 2 === 1\"\n       [ngClass]=\"rowClass ? rowClass(row.data, rowIndex) : ''\"\n       [class.table-row_selected]=\"selectedRows && selectedRows.indexOf(row.data) >= 0\"\n       [style.flex-grow]=\"totalFlex\"\n       [style.flex-basis.px]=\"totalWidth\"\n       [style.min-width.px]=\"totalWidth\">\n    <div class=\"table-row_locked\"\n         *ngIf=\"locked.length > 0\"\n         [style.flex-grow]=\"lockedFlex\"\n         [style.flex-basis.px]=\"lockedWidth\"\n         [style.min-width.px]=\"lockedWidth\"\n         [style.zIndex]=\"row.data === activeRow ? 2 : 1\">\n      <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length\"\n                           [row]=\"row.data\"\n                           style=\"width: 28px;\"></teta-selection-cell>\n      <teta-cell\n        *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-column]=\"column.name\"\n        [column]=\"column\"\n        [filterOptions]=\"dict?dict[column.name]:[]\"\n        [dict]=\"dict\"\n        [row]=\"row\"\n        [ngClass]=\"column.cellClass\"\n        [attr.tabindex]=\"0\"\n        [style.flex-grow]=\"column.flex\"\n        [style.flex-basis.px]=\"column.width\"\n      ></teta-cell>\n    </div>\n    <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\"\n                         [row]=\"row.data\"\n                         style=\"width: 28px;\"></teta-selection-cell>\n    <teta-cell\n      *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n      [attr.data-row]=\"rowIndex\"\n      [attr.data-column]=\"column.name\"\n      [column]=\"column\"\n      [filterOptions]=\"dict?dict[column.name]:[]\"\n      [dict]=\"dict\"\n      [row]=\"row\"\n      [ngClass]=\"column.cellClass\"\n      [attr.tabindex]=\"0\"\n      [style.flex-grow]=\"column.flex\"\n      [style.flex-basis.px]=\"column.width\"\n    ></teta-cell>\n  </div>\n</ng-template>\n\n<ng-template #aggTemplate>\n  <ng-container *ngIf=\"locale | async as loc\">\n    <div class=\"table-row\"\n         *ngIf=\"aggregate\"\n         [class.table-row_virtual]=\"virtual\"\n         [style.flex-grow]=\"totalFlex\"\n         [style.flex-basis.px]=\"totalWidth\"\n         [style.min-width.px]=\"totalWidth\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\">\n        <div class=\"cell align-center justify-content-center\"\n             style=\"width: 28px;\"\n             *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n          <teta-icon [name]=\"'sumColor'\"></teta-icon>\n        </div>\n        <div class=\"cell cell-component aggregate-cell\"\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              *ngIf=\"column.aggregate !== aggregationType.none\">\n          {{loc[getAggregateText(column)]}}:\n          {{getAggregateValue(column) | tetaNumber : 2}}\n        </span>\n        </div>\n      </div>\n      <div class=\"cell align-center justify-content-center\"\n           style=\"width: 28px;\"\n           *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n        <teta-icon [name]=\"'sumColor'\"></teta-icon>\n      </div>\n      <div class=\"cell cell-component aggregate-cell\"\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            *ngIf=\"column.aggregate !== aggregationType.none\">\n        {{loc[getAggregateText(column)]}}:\n        {{getAggregateValue(column) | tetaNumber : 2}}\n      </span>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n<ng-template #emptyRow>\n  <div class=\"empty-table-row\"\n       style=\"height: 0.1px\"\n       [style.flex-grow]=\"totalFlex\"\n       [style.flex-basis.px]=\"totalWidth\"\n       [style.min-width.px]=\"totalWidth\">\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: i6$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: ScrollableDirective, selector: "[tetaScrollable]" }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "component", type: CellComponent, selector: "teta-cell", inputs: ["column", "filterOptions", "dict", "row"] }, { kind: "component", type: SelectionCellComponent, selector: "teta-selection-cell", inputs: ["row"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "tetaNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: TableBodyComponent, selector: "teta-table-body", inputs: { virtual: "virtual", activeRow: "activeRow", selectedRows: "selectedRows", additionalComponent: "additionalComponent", aggregate: "aggregate", selectType: "selectType", rowClass: "rowClass", trackRow: "trackRow", trackColumns: "trackColumns" }, outputs: { scrollChange: "scrollChange" }, host: { properties: { "class.table-body": "this.tableBodyClass" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<teta-scrollable class=\"table-body-container\"\n                 style=\"padding-bottom: 12px\"\n                 showScrollbars=\"true\"\n                 *ngIf=\"virtual && data.length > 0; else nonVirtual\">\n  <cdk-virtual-scroll-viewport tetaScrollable\n                               class=\"table-body-container\"\n                               (scroll)=\"emitScroll($event)\"\n                               [itemSize]=\"28\">\n    <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackTableRow;\">\n      <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</teta-scrollable>\n<ng-template #nonVirtual>\n  <teta-scrollable class=\"table-body-container\"\n                   style=\"padding-bottom: 12px\"\n                   direction=\"column\"\n                   showScrollbars=\"true\"\n                   (scroll)=\"emitScroll($event)\">\n    <div class=\"table-body-container\">\n      <div class=\"column column_auto\"\n           style=\"position: absolute; top:0; bottom:16px;left:0;right:0;\"\n           *ngIf=\"!data?.length\">\n        <ng-content></ng-content>\n      </div>\n      <ng-container *ngFor=\"let row of data; let rowIndex = index; trackBy: trackTableRow;\">\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      <ng-container *ngTemplateOutlet=\"emptyRow;\"></ng-container>\n    </div>\n  </teta-scrollable>\n</ng-template>\n\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <div class=\"table-row\"\n       ngForm\n       (click)=\"setActiveRow(row.data, $event)\"\n       [attr.data-row]=\"rowIndex\"\n       [class.table-row_odd]=\"rowIndex % 2 === 1\"\n       [ngClass]=\"rowClass ? rowClass(row.data, rowIndex) : ''\"\n       [class.table-row_selected]=\"selectedRows && selectedRows.indexOf(row.data) >= 0\"\n       [style.flex-grow]=\"totalFlex\"\n       [style.flex-basis.px]=\"totalWidth\"\n       [style.min-width.px]=\"totalWidth\">\n    <div class=\"table-row_locked\"\n         *ngIf=\"locked.length > 0\"\n         [style.flex-grow]=\"lockedFlex\"\n         [style.flex-basis.px]=\"lockedWidth\"\n         [style.min-width.px]=\"lockedWidth\"\n         [style.zIndex]=\"row.data === activeRow ? 2 : 1\">\n      <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length\"\n                           [row]=\"row.data\"\n                           style=\"width: 28px;\"></teta-selection-cell>\n      <teta-cell\n        *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-column]=\"column.name\"\n        [column]=\"column\"\n        [filterOptions]=\"dict?dict[column.name]:[]\"\n        [dict]=\"dict\"\n        [row]=\"row\"\n        [ngClass]=\"column.cellClass\"\n        [attr.tabindex]=\"0\"\n        [style.flex-grow]=\"column.flex\"\n        [style.flex-basis.px]=\"column.width\"\n      ></teta-cell>\n    </div>\n    <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\"\n                         [row]=\"row.data\"\n                         style=\"width: 28px;\"></teta-selection-cell>\n    <teta-cell\n      *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n      [attr.data-row]=\"rowIndex\"\n      [attr.data-column]=\"column.name\"\n      [column]=\"column\"\n      [filterOptions]=\"dict?dict[column.name]:[]\"\n      [dict]=\"dict\"\n      [row]=\"row\"\n      [ngClass]=\"column.cellClass\"\n      [attr.tabindex]=\"0\"\n      [style.flex-grow]=\"column.flex\"\n      [style.flex-basis.px]=\"column.width\"\n    ></teta-cell>\n  </div>\n</ng-template>\n\n<ng-template #aggTemplate>\n  <ng-container *ngIf=\"locale | async as loc\">\n    <div class=\"table-row\"\n         *ngIf=\"aggregate\"\n         [class.table-row_virtual]=\"virtual\"\n         [style.flex-grow]=\"totalFlex\"\n         [style.flex-basis.px]=\"totalWidth\"\n         [style.min-width.px]=\"totalWidth\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\">\n        <div class=\"cell align-center justify-content-center\"\n             style=\"width: 28px;\"\n             *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n          <teta-icon [name]=\"'sumColor'\"></teta-icon>\n        </div>\n        <div class=\"cell cell-component aggregate-cell\"\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              *ngIf=\"column.aggregate !== aggregationType.none\">\n          {{loc[getAggregateText(column)]}}:\n          {{getAggregateValue(column) | tetaNumber : 2}}\n        </span>\n        </div>\n      </div>\n      <div class=\"cell align-center justify-content-center\"\n           style=\"width: 28px;\"\n           *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n        <teta-icon [name]=\"'sumColor'\"></teta-icon>\n      </div>\n      <div class=\"cell cell-component aggregate-cell\"\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            *ngIf=\"column.aggregate !== aggregationType.none\">\n        {{loc[getAggregateText(column)]}}:\n        {{getAggregateValue(column) | tetaNumber : 2}}\n      </span>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n<ng-template #emptyRow>\n  <div class=\"empty-table-row\"\n       style=\"height: 0.1px\"\n       [style.flex-grow]=\"totalFlex\"\n       [style.flex-basis.px]=\"totalWidth\"\n       [style.min-width.px]=\"totalWidth\">\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: i6.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: ScrollableDirective, selector: "[tetaScrollable]" }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "component", type: CellComponent, selector: "teta-cell", inputs: ["column", "filterOptions", "dict", "row"] }, { kind: "component", type: SelectionCellComponent, selector: "teta-selection-cell", inputs: ["row"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "tetaNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: TableBodyComponent, decorators: [{
             type: Component,
@@ -12109,11 +12110,11 @@ class Chart3dService {
     }
     getMinMaxRange(minMax, axisMin, axisMax) {
         const min = axisMin ||
-            (minMax[0] === minMax[1]
+            (Math.abs(minMax[0] - minMax[1]) < 0.0000001
                 ? minMax[0] - Math.abs(minMax[0] - 1) * 0.1
                 : minMax[0]);
         const max = axisMax ||
-            (minMax[0] === minMax[1]
+            (Math.abs(minMax[0] - minMax[1]) < 0.0000001
                 ? minMax[1] + Math.abs(minMax[1] + 1) * 0.1
                 : minMax[1]);
         return [min, max];
@@ -12274,11 +12275,11 @@ class Axes3dComponent {
         this._alive = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: Axes3dComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: Axes3dComponent, isStandalone: true, selector: "teta-axes-3d", inputs: { rotation: "rotation" }, ngImport: i0, template: "<ng-container *ngIf=\"{axes:axes|async}as data\">\n<ngts-text *ngFor=\"let tick of data.axes?.y;let i=index; trackBy: trackBy\" [text]=\"tick.value+'-'\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[0,tick.position,50]\"\n           [anchorX]=\"'right'\"\n           [anchorY]=\"'middle'\"\n           [textAlign]=\"'right'\"\n></ngts-text>\n<ngts-text *ngFor=\"let tick of data.axes?.z;let i=index; trackBy: trackBy\"  [text]=\"tick.value\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[25,-50,tick.position]\"\n           ></ngts-text>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: NgtsText, selector: "ngts-text[text]", inputs: ["textRef", "text", "characters", "font", "anchorX", "anchorY"], outputs: ["sync"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: Axes3dComponent, isStandalone: true, selector: "teta-axes-3d", inputs: { rotation: "rotation" }, ngImport: i0, template: "<ng-container *ngIf='{axes:axes|async}as data'>\n  <ngts-text *ngFor='let tick of data.axes?.x;let i=index; trackBy: trackBy' [text]=\"tick.value+'-'\"\n             [color]=\"'var(--color-text-90)'\"\n             [rotation]='rotation'\n             [fontSize]='2.5'\n             [position]='[tick.position, -50, 50]'\n             [anchorX]=\"'right'\"\n             [anchorY]=\"'middle'\"\n             [textAlign]=\"'right'\"\n  ></ngts-text>\n  <ngts-text *ngFor='let tick of data.axes?.y;let i=index; trackBy: trackBy' [text]=\"tick.value+'-'\"\n             [color]=\"'var(--color-text-90)'\"\n             [rotation]='rotation'\n             [fontSize]='2.5'\n             [position]='[0,tick.position,50]'\n             [anchorX]=\"'right'\"\n             [anchorY]=\"'middle'\"\n             [textAlign]=\"'right'\"\n  ></ngts-text>\n  <ngts-text *ngFor='let tick of data.axes?.z;let i=index; trackBy: trackBy' [text]='tick.value'\n             [color]=\"'var(--color-text-90)'\"\n             [rotation]='rotation'\n             [fontSize]='2.5'\n             [position]='[25,-50,tick.position]'\n  ></ngts-text>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: NgtsText, selector: "ngts-text[text]", inputs: ["textRef", "text", "characters", "font", "anchorX", "anchorY"], outputs: ["sync"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: Axes3dComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-axes-3d', standalone: true, imports: [CommonModule, NgtsText], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{axes:axes|async}as data\">\n<ngts-text *ngFor=\"let tick of data.axes?.y;let i=index; trackBy: trackBy\" [text]=\"tick.value+'-'\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[0,tick.position,50]\"\n           [anchorX]=\"'right'\"\n           [anchorY]=\"'middle'\"\n           [textAlign]=\"'right'\"\n></ngts-text>\n<ngts-text *ngFor=\"let tick of data.axes?.z;let i=index; trackBy: trackBy\"  [text]=\"tick.value\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[25,-50,tick.position]\"\n           ></ngts-text>\n</ng-container>\n" }]
+            args: [{ selector: 'teta-axes-3d', standalone: true, imports: [CommonModule, NgtsText], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf='{axes:axes|async}as data'>\n  <ngts-text *ngFor='let tick of data.axes?.x;let i=index; trackBy: trackBy' [text]=\"tick.value+'-'\"\n             [color]=\"'var(--color-text-90)'\"\n             [rotation]='rotation'\n             [fontSize]='2.5'\n             [position]='[tick.position, -50, 50]'\n             [anchorX]=\"'right'\"\n             [anchorY]=\"'middle'\"\n             [textAlign]=\"'right'\"\n  ></ngts-text>\n  <ngts-text *ngFor='let tick of data.axes?.y;let i=index; trackBy: trackBy' [text]=\"tick.value+'-'\"\n             [color]=\"'var(--color-text-90)'\"\n             [rotation]='rotation'\n             [fontSize]='2.5'\n             [position]='[0,tick.position,50]'\n             [anchorX]=\"'right'\"\n             [anchorY]=\"'middle'\"\n             [textAlign]=\"'right'\"\n  ></ngts-text>\n  <ngts-text *ngFor='let tick of data.axes?.z;let i=index; trackBy: trackBy' [text]='tick.value'\n             [color]=\"'var(--color-text-90)'\"\n             [rotation]='rotation'\n             [fontSize]='2.5'\n             [position]='[25,-50,tick.position]'\n  ></ngts-text>\n</ng-container>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { rotation: [{
                 type: Input
             }] } });
@@ -12448,7 +12449,7 @@ class SceneComponent {
         this.rotation = this.store.get('camera').rotation;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SceneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SceneComponent, isStandalone: true, selector: "teta-scene", ngImport: i0, template: "<ng-container *ngIf=\"{data:data|async} as config\">\n  <ngt-scene>\n    <ngts-orbit-controls [minAzimuthAngle]=\"0\" [maxAzimuthAngle]=\"Math.PI/2\" [maxZoom]=\"15\" [minZoom]=\"4\"\n                         (change)=\"setRotation()\"></ngts-orbit-controls>\n  </ngt-scene>\n  <teta-area-3d></teta-area-3d>\n  <ng-container *ngFor=\"let s of config.data?.series;\">\n    <div teta-series-3d-host [series]=\"s\"></div>\n  </ng-container>\n  <teta-axes-3d [rotation]=\"rotation\"></teta-axes-3d>\n</ng-container>\n\n\n", dependencies: [{ kind: "component", type: NgtsOrbitControls, selector: "ngts-orbit-controls", inputs: ["controlsRef", "camera", "domElement", "makeDefault", "regress", "target", "enableDamping"], outputs: ["change", "start", "end"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: Area3dComponent, selector: "teta-area-3d" }, { kind: "component", type: Axes3dComponent, selector: "teta-axes-3d", inputs: ["rotation"] }, { kind: "component", type: Series3dHost, selector: "[teta-series-3d-host]", inputs: ["series"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SceneComponent, isStandalone: true, selector: "teta-scene", ngImport: i0, template: "<ng-container *ngIf='{data:data|async} as config'>\n  <ngt-scene>\n    <ngts-orbit-controls [minAzimuthAngle]='0'\n                         [maxAzimuthAngle]='Math.PI/2'\n                         [maxZoom]='30'\n                         [minZoom]='2'\n                         (change)='setRotation()'></ngts-orbit-controls>\n  </ngt-scene>\n  <teta-area-3d></teta-area-3d>\n  <ng-container *ngFor='let s of config.data?.series;'>\n    <div teta-series-3d-host [series]='s'></div>\n  </ng-container>\n  <teta-axes-3d [rotation]='rotation'></teta-axes-3d>\n</ng-container>\n\n\n", dependencies: [{ kind: "component", type: NgtsOrbitControls, selector: "ngts-orbit-controls", inputs: ["controlsRef", "camera", "domElement", "makeDefault", "regress", "target", "enableDamping"], outputs: ["change", "start", "end"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: Area3dComponent, selector: "teta-area-3d" }, { kind: "component", type: Axes3dComponent, selector: "teta-axes-3d", inputs: ["rotation"] }, { kind: "component", type: Series3dHost, selector: "[teta-series-3d-host]", inputs: ["series"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SceneComponent, decorators: [{
             type: Component,
@@ -12460,7 +12461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                         Axes3dComponent,
                         Block3dComponent,
                         Series3dHost,
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container *ngIf=\"{data:data|async} as config\">\n  <ngt-scene>\n    <ngts-orbit-controls [minAzimuthAngle]=\"0\" [maxAzimuthAngle]=\"Math.PI/2\" [maxZoom]=\"15\" [minZoom]=\"4\"\n                         (change)=\"setRotation()\"></ngts-orbit-controls>\n  </ngt-scene>\n  <teta-area-3d></teta-area-3d>\n  <ng-container *ngFor=\"let s of config.data?.series;\">\n    <div teta-series-3d-host [series]=\"s\"></div>\n  </ng-container>\n  <teta-axes-3d [rotation]=\"rotation\"></teta-axes-3d>\n</ng-container>\n\n\n" }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container *ngIf='{data:data|async} as config'>\n  <ngt-scene>\n    <ngts-orbit-controls [minAzimuthAngle]='0'\n                         [maxAzimuthAngle]='Math.PI/2'\n                         [maxZoom]='30'\n                         [minZoom]='2'\n                         (change)='setRotation()'></ngts-orbit-controls>\n  </ngt-scene>\n  <teta-area-3d></teta-area-3d>\n  <ng-container *ngFor='let s of config.data?.series;'>\n    <div teta-series-3d-host [series]='s'></div>\n  </ng-container>\n  <teta-axes-3d [rotation]='rotation'></teta-axes-3d>\n</ng-container>\n\n\n" }]
         }], ctorParameters: function () { return []; } });
 
 class CanvasComponent {
@@ -12552,7 +12553,13 @@ class ThreeChartComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ThreeChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-three-chart', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgtStore], imports: [NgtCanvas, SceneComponent, CommonModule, CanvasComponent, Canvas3dHost], template: "<div  class=\"column_auto column justify-content-center align-center\" style=\"height: 100%;width: 100%;\">\n  <div teta-canvas-3d-host [camera]=\"camera\" [data]=\"data\" [scene]=\"scene\"></div>\n</div>\n", styles: [":host{width:100%;height:100%}\n"] }]
+            args: [{ selector: 'teta-three-chart', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgtStore], imports: [
+                        NgtCanvas,
+                        SceneComponent,
+                        CommonModule,
+                        CanvasComponent,
+                        Canvas3dHost,
+                    ], template: "<div  class=\"column_auto column justify-content-center align-center\" style=\"height: 100%;width: 100%;\">\n  <div teta-canvas-3d-host [camera]=\"camera\" [data]=\"data\" [scene]=\"scene\"></div>\n</div>\n", styles: [":host{width:100%;height:100%}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }] } });
@@ -12589,7 +12596,7 @@ class Chart3dComponent {
     }
     ngOnInit() {
         this._themeService.theme
-            .pipe(takeWhile((_) => this._alive), tap$1((_) => {
+            .pipe(takeWhile(_ => this._alive), tap$1(_ => {
             this.gridColor = _ ? '#5d6a73' : '#bdbdc6';
             this.axesColor = _ ? '#8e8f9d' : '#7d8f9a';
             this.init();
@@ -12618,7 +12625,7 @@ class Chart3dComponent {
             if (!data.points?.length) {
                 return;
             }
-            const points = data.points.map((_) => new THREE.Vector3(x(_.x), y(_.y), z(_.z)));
+            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()),
@@ -12637,13 +12644,15 @@ class Chart3dComponent {
         const geometryLines = new THREE.BufferGeometry().setFromPoints(pointsLines);
         const line = new THREE.Line(geometryLines, material);
         this._scene.add(line);
-        circles.forEach((r) => {
+        circles.forEach(r => {
             const material = new THREE.LineDashedMaterial({
                 color: this.gridColor,
                 dashSize: 1,
-                gapSize: 3
+                gapSize: 3,
             });
-            const circleGeometry = new THREE.BufferGeometry().setFromPoints(new THREE.Path().absarc(0, 0, x(r), 0, Math.PI * 2, false).getSpacedPoints(100));
+            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);
@@ -12695,7 +12704,7 @@ class Chart3dComponent {
         animate();
     }
     addResizeObserver() {
-        this._obs = new ResizeObserver((_) => {
+        this._obs = new ResizeObserver(_ => {
             this.setSize(_[0]?.contentRect.width, _[0]?.contentRect.height);
         });
         this._obs.observe(this._elementRef.nativeElement);
@@ -12761,7 +12770,7 @@ class Chart3dComponent {
         this._scene.add(ticks);
     }
     getScales(series) {
-        const extrems = series.map((_) => ({
+        const extrems = series.map(_ => ({
             x: d3.extent(_.points, (p) => p.x),
             y: d3.extent(_.points, (p) => p.y),
             z: d3.extent(_.points, (p) => p.z),
@@ -12774,22 +12783,28 @@ class Chart3dComponent {
         }, { x: [], y: [], z: [] });
         const x = d3
             .scaleLinear()
-            .domain([0, this._config?.axes?.max == null
+            .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([0, parseInt(d3.max(flattenExtrems.y), 10)])
             .range([this.SIDE_SIZE, 0]);
         const z = d3
             .scaleLinear()
-            .domain([0,
+            .domain([
+            0,
             this._config?.axes?.max == null
                 ? parseInt(d3.max(flattenExtrems.z))
-                : this._config.axes.max])
-            .range([0, this.SIDE_SIZE]).nice();
+                : this._config.axes.max,
+        ])
+            .range([0, this.SIDE_SIZE])
+            .nice();
         return { x, y, z };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: Chart3dComponent, deps: [{ token: i0.ElementRef }, { token: ThemeSwitchService }], target: i0.ɵɵFactoryTarget.Component });
@@ -14175,6 +14190,9 @@ const ruLocale = {
     apply: 'Применить',
     cancel: 'Отменить',
     clear: 'Очистить',
+    dateRangeMask: 'дд.мм.гггг - дд.мм.гггг',
+    dateMask: 'дд.мм.гггг',
+    dateTimeMask: 'дд.мм.гггг, чч:мм',
     pin: 'Закрепить',
     unpin: 'Открепить',
     sortAsc: 'Сортировать по возрастанию',
@@ -14211,7 +14229,7 @@ const ruLocale = {
         'Сентябрь',
         'Октябрь',
         'Ноябрь',
-        'Декабрь'
+        'Декабрь',
     ],
     days: [
         'Воскресенье',
@@ -14220,17 +14238,9 @@ const ruLocale = {
         'Среда',
         'Четверг',
         'Пятниуа',
-        'Суббота'
+        'Суббота',
     ],
-    daysShort: [
-        'Вс',
-        'Пн',
-        'Вт',
-        'Ср',
-        'Чт',
-        'Пт',
-        'Сб'
-    ]
+    daysShort: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
 };
 
 function tetaZoneFull(ngZone) {