@tetacom/ng-components 1.0.36 → 1.0.39

package/fesm2020/tetacom-ng-components.mjs

@@ -1,24 +1,25 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, HostBinding, Directive, Optional, Inject, ContentChild, Input, Host, HostListener, Injectable, NgModule, forwardRef, EventEmitter, ElementRef, Output, Pipe, ViewChild, ViewEncapsulation, ChangeDetectorRef, TemplateRef, Injector, ContentChildren } from '@angular/core';
+import { Component, ChangeDetectionStrategy, HostBinding, Directive, Optional, Inject, ContentChild, Input, Host, HostListener, Injectable, NgModule, forwardRef, EventEmitter, ElementRef, Output, Pipe, ViewChild, ViewEncapsulation, ChangeDetectorRef, TemplateRef, Injector, ContentChildren, SkipSelf, ViewContainerRef, PLATFORM_ID } from '@angular/core';
 import * as i3 from '@angular/common';
-import { DOCUMENT, CommonModule } from '@angular/common';
+import { DOCUMENT, CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i1 from '@angular/common/http';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { map, takeWhile, throttleTime, bufferCount, tap, withLatestFrom, filter } from 'rxjs/operators';
 import * as i3$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
-import { BehaviorSubject, Subject, fromEvent, ReplaySubject, combineLatest, merge } from 'rxjs';
+import { BehaviorSubject, Subject, fromEvent, ReplaySubject, combineLatest, merge, Observable, pipe } from 'rxjs';
 import { trigger, transition, style, animate } from '@angular/animations';
-import * as i4 from '@angular/cdk/scrolling';
-import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import * as i1$1 from '@ngneat/transloco';
 import { TranslocoModule, TRANSLOCO_SCOPE } from '@ngneat/transloco';
+import * as i4 from '@angular/cdk/scrolling';
+import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import * as hash from 'object-hash';
 import hash__default from 'object-hash';
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 import * as d3 from 'd3';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 class AccordionComponent {
     constructor() {
@@ -463,10 +464,10 @@ class CheckboxComponent {
     }
 }
 CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: CheckboxComponent, selector: "teta-checkbox", inputs: { class: "class", palette: "palette", noLabel: "noLabel", disabled: "disabled", value: "value", binary: "binary", allowNull: "allowNull" }, host: { listeners: { "click": "changeValue()" }, properties: { "attr.tabindex": "this.tabindex", "class": "this.getClass", "class.checkbox_disabled": "this.disabled" } }, providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"checkbox__tick\" [class.checkbox__tick_active]=\"checked != false\">\n  <teta-icon [name]=\"checked ? 'tick' : checked === false ? '' : 'minus'\"></teta-icon>\n</div>\n<span class=\"font-body-3\" *ngIf=\"!noLabel\">\n  <ng-content></ng-content>\n</span>\n", styles: [""], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: CheckboxComponent, selector: "teta-checkbox", inputs: { class: "class", palette: "palette", noLabel: "noLabel", disabled: "disabled", value: "value", binary: "binary", allowNull: "allowNull" }, host: { listeners: { "click": "changeValue()" }, properties: { "attr.tabindex": "this.tabindex", "class": "this.getClass", "class.checkbox_disabled": "this.disabled" } }, providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<div class=\"checkbox__tick\" [class.checkbox__tick_active]=\"checked != false\">\n  <teta-icon [name]=\"checked ? 'tick' : checked === false ? '' : 'dash'\"></teta-icon>\n</div>\n<span class=\"font-body-3\" *ngIf=\"!noLabel\">\n  <ng-content></ng-content>\n</span>\n", styles: [""], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-checkbox', providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"checkbox__tick\" [class.checkbox__tick_active]=\"checked != false\">\n  <teta-icon [name]=\"checked ? 'tick' : checked === false ? '' : 'minus'\"></teta-icon>\n</div>\n<span class=\"font-body-3\" *ngIf=\"!noLabel\">\n  <ng-content></ng-content>\n</span>\n", styles: [""] }]
+            args: [{ selector: 'teta-checkbox', providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"checkbox__tick\" [class.checkbox__tick_active]=\"checked != false\">\n  <teta-icon [name]=\"checked ? 'tick' : checked === false ? '' : 'dash'\"></teta-icon>\n</div>\n<span class=\"font-body-3\" *ngIf=\"!noLabel\">\n  <ng-content></ng-content>\n</span>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { tabindex: [{
                 type: HostBinding,
                 args: ['attr.tabindex']
@@ -1231,7 +1232,7 @@ class DropdownBase {
     }
     click(event) {
         if (this.open) {
-            if (!DomUtil.clickedInside(this._body, event)) {
+            if (!DomUtil.clickedInside(this._body, event) || this.autoCloseIgnore.indexOf('inside') < 0) {
                 this.closeDropdown();
             }
         }
@@ -1245,8 +1246,7 @@ class DropdownBase {
         if (!this.open ||
             !this.autoClose ||
             event.detail === 0 ||
-            DomUtil.clickedInside(this._head.nativeElement, event) ||
-            DomUtil.clickedInside(this._body, event)) {
+            DomUtil.clickedInside(this._head.nativeElement, event)) {
             return;
         }
         if (DomUtil.clickedInside(this._body, event)) {
@@ -1400,10 +1400,10 @@ class DropdownComponent extends DropdownBase {
     }
 }
 DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: DOCUMENT }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DropdownComponent, selector: "teta-dropdown", usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[tetaDropdownHead]\"></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[tetaDropdownHead]\"></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"[tetaDropdownHead]\"></ng-content>\n", styles: [""] }]
+            args: [{ selector: 'teta-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'dropdown', template: "<ng-content select=\"[tetaDropdownHead]\"></ng-content>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -2219,7 +2219,7 @@ class DatePickerComponent {
     }
 }
 DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DatePickerComponent, deps: [{ token: TetaConfigService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DatePickerComponent, selector: "teta-date-picker", inputs: { disabled: "disabled", invalid: "invalid", firstDayOfWeek: "firstDayOfWeek", disabledDates: "disabledDates", disabledPeriods: "disabledPeriods", disabledDays: "disabledDays", minDate: "minDate", maxDate: "maxDate", minYearDate: "minYearDate", maxYearDate: "maxYearDate", align: "align", verticalAlign: "verticalAlign", appendToBody: "appendToBody", allowNull: "allowNull", backdrop: "backdrop", showTime: "showTime", format: "format" }, host: { listeners: { "window:keyup": "keyUp($event)" }, properties: { "class.datepicker-wide": "this.showTime", "class.datepicker_open": "this.open", "class.datepicker": "this.classDatepicker", "tabindex": "this.tabindex" } }, providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<teta-dropdown\n  class=\"row row_auto\"\n  [disabled]=\"disabled\"\n  [open]=\"open\"\n  [autoCloseIgnore]=\"['esc']\"\n  (openChange)=\"openPicker($event)\"\n  [align]=\"align\"\n  [verticalAlign]=\"verticalAlign\"\n  [appendToBody]=\"appendToBody\"\n  [backdrop]=\"backdrop\">\n  <div tetaDropdownHead\n       class=\"datepicker-head font-body-3\"\n       [class.datepicker-head_disabled]=\"disabled\"\n       [class.datepicker-head_invalid]=\"invalid\">\n    <teta-icon [name]=\"'calendar'\" class=\"margin-right-1\"></teta-icon>\n    <div class=\"row_auto nowrap\">\n      {{currentValue !== null && currentValue !== undefined ? (currentValue | date : format) : ''}}\n    </div>\n    <teta-icon *ngIf=\"allowNull\"\n               [name]=\"'closeBig'\"\n               (click)=\"clearPicker($event);\"\n               class=\"margin-left-1\"></teta-icon>\n  </div>\n  <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n    <div class=\"padding-3\">\n      <div class=\"row align-center justify-content-between\">\n        <div>\n          <button teta-button\n                  [palette]=\"'text'\"\n                  [view]=\"displayMode===datePickerModeEnum.month ? 'primary' : 'ghost'\"\n                  (click)=\"setMode(datePickerModeEnum.month)\"\n                  (wheel)=\"scrollMonth($event);\">\n            {{locale.months[internalValue?.getMonth()]}}\n          </button>\n          <button teta-button\n                  class=\"margin-left-2\"\n                  [palette]=\"'text'\"\n                  [view]=\"displayMode===datePickerModeEnum.year ? 'primary' : 'ghost'\"\n                  (click)=\"setMode(datePickerModeEnum.year)\"\n                  (wheel)=\"scrollYear($event);\">\n            {{internalValue?.getFullYear()}}\n          </button>\n        </div>\n        <button teta-button\n                [palette]=\"'text'\"\n                [view]=\"'ghost'\"\n                (click)=\"setToday()\">\n          <teta-icon [name]=\"'calendar'\"></teta-icon>\n        </button>\n      </div>\n      <div class=\"datepicker-content\">\n        <teta-year-select\n          *ngIf=\"displayMode === datePickerModeEnum.year\"\n          [currentYear]=\"internalValue?.getFullYear()\"\n          [today]=\"today\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (yearSelected)=\"setYear($event)\">\n        </teta-year-select>\n        <teta-month-select\n          *ngIf=\"displayMode === datePickerModeEnum.month\"\n          [currentMonth]=\"internalValue?.getMonth()\"\n          [currentYear]=\"internalValue?.getFullYear()\"\n          [locale]=\"locale\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (monthSelected)=\"setMonth($event)\">\n        </teta-month-select>\n        <teta-day-select\n          *ngIf=\"displayMode === datePickerModeEnum.date\"\n          [ngModel]=\"currentValue\"\n          (ngModelChange)=\"applyValue($event)\"\n          (dateSelected)=\"setDate($event)\"\n          (yearSelected)=\"setYear($event)\"\n          (monthSelected)=\"setMonth($event)\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [disabledDays]=\"disabledDays\"\n          [disabledDates]=\"disabledDates\"\n          [disabledPeriods]=\"disabledPeriods\"></teta-day-select>\n      </div>\n    </div>\n    <div *ngIf=\"showTime\" class=\"datepicker-time padding-v-1 border-top border-text-10 font-body-3 color-text-90\">\n      <teta-time-part-control [max]=\"23\" [ngModel]=\"internalValue?.getHours()\"\n                              (ngModelChange)=\"setHour($event)\"></teta-time-part-control>\n      :\n      <teta-time-part-control [ngModel]=\"internalValue?.getMinutes()\"\n                              (ngModelChange)=\"setMinute($event)\"></teta-time-part-control>\n      :\n      <teta-time-part-control [ngModel]=\"internalValue?.getSeconds()\"\n                              (ngModelChange)=\"setSecond($event)\"></teta-time-part-control>\n    </div>\n  </div>\n</teta-dropdown>\n", styles: [""], components: [{ type: DropdownComponent, selector: "teta-dropdown" }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: YearSelectComponent, selector: "teta-year-select", inputs: ["currentYear", "today", "size", "minDate", "maxDate", "allowableRange"], outputs: ["yearSelected", "yearApplied"] }, { type: MonthSelectComponent, selector: "teta-month-select", inputs: ["locale", "minDate", "maxDate", "size", "currentMonth", "currentYear"], outputs: ["monthSelected", "monthApplied"] }, { type: DaySelectComponent, selector: "teta-day-select", inputs: ["firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "disabled"], outputs: ["dateSelected", "monthSelected", "yearSelected"] }, { type: TimePartControlComponent, selector: "teta-time-part-control", inputs: ["min", "max", "disabled"] }], directives: [{ type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i3.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: DatePickerComponent, selector: "teta-date-picker", inputs: { disabled: "disabled", invalid: "invalid", firstDayOfWeek: "firstDayOfWeek", disabledDates: "disabledDates", disabledPeriods: "disabledPeriods", disabledDays: "disabledDays", minDate: "minDate", maxDate: "maxDate", minYearDate: "minYearDate", maxYearDate: "maxYearDate", align: "align", verticalAlign: "verticalAlign", appendToBody: "appendToBody", allowNull: "allowNull", backdrop: "backdrop", showTime: "showTime", format: "format" }, host: { listeners: { "window:keyup": "keyUp($event)" }, properties: { "class.datepicker-wide": "this.showTime", "class.datepicker_open": "this.open", "class.datepicker": "this.classDatepicker", "tabindex": "this.tabindex" } }, providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<teta-dropdown\n  class=\"row row_auto\"\n  [disabled]=\"disabled\"\n  [open]=\"open\"\n  [autoCloseIgnore]=\"['esc']\"\n  (openChange)=\"openPicker($event)\"\n  [align]=\"align\"\n  [verticalAlign]=\"verticalAlign\"\n  [appendToBody]=\"appendToBody\"\n  [backdrop]=\"backdrop\">\n  <div tetaDropdownHead\n       class=\"datepicker-head font-body-3\"\n       [class.datepicker-head_disabled]=\"disabled\"\n       [class.datepicker-head_invalid]=\"invalid\">\n    <teta-icon [name]=\"'calendar'\" class=\"margin-right-1\"></teta-icon>\n    <div class=\"row_auto nowrap\">\n      {{currentValue !== null && currentValue !== undefined ? (currentValue | date : format) : ''}}\n    </div>\n    <teta-icon *ngIf=\"allowNull\"\n               [name]=\"'closeBig'\"\n               (click)=\"clearPicker($event);\"\n               class=\"margin-left-1\"></teta-icon>\n  </div>\n  <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n    <div class=\"padding-3\">\n      <div class=\"row align-center justify-content-between\">\n        <div>\n          <button teta-button\n                  [palette]=\"'text'\"\n                  [view]=\"displayMode===datePickerModeEnum.month ? 'primary' : 'ghost'\"\n                  (click)=\"setMode(datePickerModeEnum.month)\"\n                  (wheel)=\"scrollMonth($event);\">\n            {{locale.months[internalValue?.getMonth()]}}\n          </button>\n          <button teta-button\n                  class=\"margin-left-2\"\n                  [palette]=\"'text'\"\n                  [view]=\"displayMode===datePickerModeEnum.year ? 'primary' : 'ghost'\"\n                  (click)=\"setMode(datePickerModeEnum.year)\"\n                  (wheel)=\"scrollYear($event);\">\n            {{internalValue?.getFullYear()}}\n          </button>\n        </div>\n        <button teta-button\n                [palette]=\"'text'\"\n                [view]=\"'ghost'\"\n                (click)=\"setToday()\">\n          <teta-icon [name]=\"'calendar'\"></teta-icon>\n        </button>\n      </div>\n      <div class=\"datepicker-content\">\n        <teta-year-select\n          *ngIf=\"displayMode === datePickerModeEnum.year\"\n          [currentYear]=\"internalValue?.getFullYear()\"\n          [today]=\"today\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (yearSelected)=\"setYear($event)\">\n        </teta-year-select>\n        <teta-month-select\n          *ngIf=\"displayMode === datePickerModeEnum.month\"\n          [currentMonth]=\"internalValue?.getMonth()\"\n          [currentYear]=\"internalValue?.getFullYear()\"\n          [locale]=\"locale\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (monthSelected)=\"setMonth($event)\">\n        </teta-month-select>\n        <teta-day-select\n          *ngIf=\"displayMode === datePickerModeEnum.date\"\n          [ngModel]=\"currentValue\"\n          (ngModelChange)=\"applyValue($event)\"\n          (dateSelected)=\"setDate($event)\"\n          (yearSelected)=\"setYear($event)\"\n          (monthSelected)=\"setMonth($event)\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [disabledDays]=\"disabledDays\"\n          [disabledDates]=\"disabledDates\"\n          [disabledPeriods]=\"disabledPeriods\"></teta-day-select>\n      </div>\n    </div>\n    <div *ngIf=\"showTime\" class=\"datepicker-time padding-v-1 border-top border-text-10 font-body-3 color-text-90\">\n      <teta-time-part-control [max]=\"23\" [ngModel]=\"internalValue?.getHours()\"\n                              (ngModelChange)=\"setHour($event)\"></teta-time-part-control>\n      :\n      <teta-time-part-control [ngModel]=\"internalValue?.getMinutes()\"\n                              (ngModelChange)=\"setMinute($event)\"></teta-time-part-control>\n      :\n      <teta-time-part-control [ngModel]=\"internalValue?.getSeconds()\"\n                              (ngModelChange)=\"setSecond($event)\"></teta-time-part-control>\n    </div>\n  </div>\n</teta-dropdown>\n", styles: [""], components: [{ type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: YearSelectComponent, selector: "teta-year-select", inputs: ["currentYear", "today", "size", "minDate", "maxDate", "allowableRange"], outputs: ["yearSelected", "yearApplied"] }, { type: MonthSelectComponent, selector: "teta-month-select", inputs: ["locale", "minDate", "maxDate", "size", "currentMonth", "currentYear"], outputs: ["monthSelected", "monthApplied"] }, { type: DaySelectComponent, selector: "teta-day-select", inputs: ["firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "disabled"], outputs: ["dateSelected", "monthSelected", "yearSelected"] }, { type: TimePartControlComponent, selector: "teta-time-part-control", inputs: ["min", "max", "disabled"] }], directives: [{ type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], pipes: { "date": i3.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-date-picker', providers: [DATE_PICKER_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown\n  class=\"row row_auto\"\n  [disabled]=\"disabled\"\n  [open]=\"open\"\n  [autoCloseIgnore]=\"['esc']\"\n  (openChange)=\"openPicker($event)\"\n  [align]=\"align\"\n  [verticalAlign]=\"verticalAlign\"\n  [appendToBody]=\"appendToBody\"\n  [backdrop]=\"backdrop\">\n  <div tetaDropdownHead\n       class=\"datepicker-head font-body-3\"\n       [class.datepicker-head_disabled]=\"disabled\"\n       [class.datepicker-head_invalid]=\"invalid\">\n    <teta-icon [name]=\"'calendar'\" class=\"margin-right-1\"></teta-icon>\n    <div class=\"row_auto nowrap\">\n      {{currentValue !== null && currentValue !== undefined ? (currentValue | date : format) : ''}}\n    </div>\n    <teta-icon *ngIf=\"allowNull\"\n               [name]=\"'closeBig'\"\n               (click)=\"clearPicker($event);\"\n               class=\"margin-left-1\"></teta-icon>\n  </div>\n  <div tetaDropdownContent class=\"scrollable\" (click)=\"$event.preventDefault()\">\n    <div class=\"padding-3\">\n      <div class=\"row align-center justify-content-between\">\n        <div>\n          <button teta-button\n                  [palette]=\"'text'\"\n                  [view]=\"displayMode===datePickerModeEnum.month ? 'primary' : 'ghost'\"\n                  (click)=\"setMode(datePickerModeEnum.month)\"\n                  (wheel)=\"scrollMonth($event);\">\n            {{locale.months[internalValue?.getMonth()]}}\n          </button>\n          <button teta-button\n                  class=\"margin-left-2\"\n                  [palette]=\"'text'\"\n                  [view]=\"displayMode===datePickerModeEnum.year ? 'primary' : 'ghost'\"\n                  (click)=\"setMode(datePickerModeEnum.year)\"\n                  (wheel)=\"scrollYear($event);\">\n            {{internalValue?.getFullYear()}}\n          </button>\n        </div>\n        <button teta-button\n                [palette]=\"'text'\"\n                [view]=\"'ghost'\"\n                (click)=\"setToday()\">\n          <teta-icon [name]=\"'calendar'\"></teta-icon>\n        </button>\n      </div>\n      <div class=\"datepicker-content\">\n        <teta-year-select\n          *ngIf=\"displayMode === datePickerModeEnum.year\"\n          [currentYear]=\"internalValue?.getFullYear()\"\n          [today]=\"today\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (yearSelected)=\"setYear($event)\">\n        </teta-year-select>\n        <teta-month-select\n          *ngIf=\"displayMode === datePickerModeEnum.month\"\n          [currentMonth]=\"internalValue?.getMonth()\"\n          [currentYear]=\"internalValue?.getFullYear()\"\n          [locale]=\"locale\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          (monthSelected)=\"setMonth($event)\">\n        </teta-month-select>\n        <teta-day-select\n          *ngIf=\"displayMode === datePickerModeEnum.date\"\n          [ngModel]=\"currentValue\"\n          (ngModelChange)=\"applyValue($event)\"\n          (dateSelected)=\"setDate($event)\"\n          (yearSelected)=\"setYear($event)\"\n          (monthSelected)=\"setMonth($event)\"\n          [minDate]=\"minDate\"\n          [maxDate]=\"maxDate\"\n          [firstDayOfWeek]=\"firstDayOfWeek\"\n          [disabledDays]=\"disabledDays\"\n          [disabledDates]=\"disabledDates\"\n          [disabledPeriods]=\"disabledPeriods\"></teta-day-select>\n      </div>\n    </div>\n    <div *ngIf=\"showTime\" class=\"datepicker-time padding-v-1 border-top border-text-10 font-body-3 color-text-90\">\n      <teta-time-part-control [max]=\"23\" [ngModel]=\"internalValue?.getHours()\"\n                              (ngModelChange)=\"setHour($event)\"></teta-time-part-control>\n      :\n      <teta-time-part-control [ngModel]=\"internalValue?.getMinutes()\"\n                              (ngModelChange)=\"setMinute($event)\"></teta-time-part-control>\n      :\n      <teta-time-part-control [ngModel]=\"internalValue?.getSeconds()\"\n                              (ngModelChange)=\"setSecond($event)\"></teta-time-part-control>\n    </div>\n  </div>\n</teta-dropdown>\n", styles: [""] }]
@@ -2487,7 +2487,7 @@ class MonthPickerComponent {
     }
 }
 MonthPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: MonthPickerComponent, deps: [{ token: TetaConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MonthPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: MonthPickerComponent, selector: "teta-month-picker", inputs: { disabled: "disabled", minDate: "minDate", maxDate: "maxDate", showToday: "showToday", appendToBody: "appendToBody" }, host: { properties: { "class.datepicker_open": "this.showPicker", "class.datepicker": "this.classDatepicker", "tabindex": "this.tabindex" } }, providers: [MONTH_PICKER_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<teta-dropdown\n  class=\"row row_auto\"\n  [appendToBody]=\"appendToBody\"\n  [(open)]=\"showPicker\"\n  [disabled]=\"disabled\">\n  <div tetaDropdownHead\n       (wheel)=\"scrollMonth($event)\"\n       class=\"datepicker-head font-body-3\">\n    <teta-icon [name]=\"'calendar'\" class=\"margin-right-2\"></teta-icon>\n    <div class=\"row_auto\">\n      <ng-container *ngIf=\"_value !==null && _value!==undefined\">\n        {{locale.months[_value.getMonth()]}} {{_value.getFullYear()}}\n      </ng-container>\n    </div>\n    <teta-icon [name]=\"'closeBig'\" (click)=\"clearPicker()\" class=\"margin-left-2\"></teta-icon>\n  </div>\n  <div tetaDropdownContent class=\"scrollable padding-3\">\n    <div class=\"row align-center justify-content-between\">\n      <div>\n        <button teta-button\n                [palette]=\"'text'\"\n                [view]=\"displayMode===datePickerModeEnum.month ? 'primary' : 'ghost'\"\n                (click)=\"setMode(datePickerModeEnum.month)\"\n                (wheel)=\"scrollMonth($event);\">\n          {{locale.months[_currentMonth || today.getMonth()]}}\n        </button>\n        <button teta-button\n                class=\"margin-left-2\"\n                [palette]=\"'text'\"\n                [view]=\"displayMode===datePickerModeEnum.year ? 'primary' : 'ghost'\"\n                (click)=\"setMode(datePickerModeEnum.year)\"\n                (wheel)=\"scrollYear($event);\">\n          {{_currentYear || today.getFullYear()}}\n        </button>\n      </div>\n      <button teta-button\n              [palette]=\"'text'\"\n              [view]=\"'ghost'\"\n              (click)=\"setToday()\">\n        <teta-icon [name]=\"'calendar'\"></teta-icon>\n      </button>\n    </div>\n    <div class=\"datepicker-content\">\n      <teta-year-select\n        *ngIf=\"displayMode === datePickerModeEnum.year\"\n        [currentYear]=\"_currentYear\"\n        [today]=\"today\"\n        [size]=\"8\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        (yearSelected)=\"setYear($event)\">\n      </teta-year-select>\n      <teta-month-select\n        *ngIf=\"displayMode === datePickerModeEnum.month\"\n        [currentMonth]=\"_currentMonth\"\n        [locale]=\"locale\"\n        [currentYear]=\"_currentYear\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        (monthSelected)=\"setMonth($event)\">\n      </teta-month-select>\n    </div>\n  </div>\n</teta-dropdown>\n", styles: [""], components: [{ type: DropdownComponent, selector: "teta-dropdown" }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: YearSelectComponent, selector: "teta-year-select", inputs: ["currentYear", "today", "size", "minDate", "maxDate", "allowableRange"], outputs: ["yearSelected", "yearApplied"] }, { type: MonthSelectComponent, selector: "teta-month-select", inputs: ["locale", "minDate", "maxDate", "size", "currentMonth", "currentYear"], outputs: ["monthSelected", "monthApplied"] }], directives: [{ type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropdownContentDirective, selector: "[tetaDropdownContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MonthPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: MonthPickerComponent, selector: "teta-month-picker", inputs: { disabled: "disabled", minDate: "minDate", maxDate: "maxDate", showToday: "showToday", appendToBody: "appendToBody" }, host: { properties: { "class.datepicker_open": "this.showPicker", "class.datepicker": "this.classDatepicker", "tabindex": "this.tabindex" } }, providers: [MONTH_PICKER_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<teta-dropdown\n  class=\"row row_auto\"\n  [appendToBody]=\"appendToBody\"\n  [(open)]=\"showPicker\"\n  [disabled]=\"disabled\">\n  <div tetaDropdownHead\n       (wheel)=\"scrollMonth($event)\"\n       class=\"datepicker-head font-body-3\">\n    <teta-icon [name]=\"'calendar'\" class=\"margin-right-2\"></teta-icon>\n    <div class=\"row_auto\">\n      <ng-container *ngIf=\"_value !==null && _value!==undefined\">\n        {{locale.months[_value.getMonth()]}} {{_value.getFullYear()}}\n      </ng-container>\n    </div>\n    <teta-icon [name]=\"'closeBig'\" (click)=\"clearPicker()\" class=\"margin-left-2\"></teta-icon>\n  </div>\n  <div tetaDropdownContent class=\"scrollable padding-3\">\n    <div class=\"row align-center justify-content-between\">\n      <div>\n        <button teta-button\n                [palette]=\"'text'\"\n                [view]=\"displayMode===datePickerModeEnum.month ? 'primary' : 'ghost'\"\n                (click)=\"setMode(datePickerModeEnum.month)\"\n                (wheel)=\"scrollMonth($event);\">\n          {{locale.months[_currentMonth || today.getMonth()]}}\n        </button>\n        <button teta-button\n                class=\"margin-left-2\"\n                [palette]=\"'text'\"\n                [view]=\"displayMode===datePickerModeEnum.year ? 'primary' : 'ghost'\"\n                (click)=\"setMode(datePickerModeEnum.year)\"\n                (wheel)=\"scrollYear($event);\">\n          {{_currentYear || today.getFullYear()}}\n        </button>\n      </div>\n      <button teta-button\n              [palette]=\"'text'\"\n              [view]=\"'ghost'\"\n              (click)=\"setToday()\">\n        <teta-icon [name]=\"'calendar'\"></teta-icon>\n      </button>\n    </div>\n    <div class=\"datepicker-content\">\n      <teta-year-select\n        *ngIf=\"displayMode === datePickerModeEnum.year\"\n        [currentYear]=\"_currentYear\"\n        [today]=\"today\"\n        [size]=\"8\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        (yearSelected)=\"setYear($event)\">\n      </teta-year-select>\n      <teta-month-select\n        *ngIf=\"displayMode === datePickerModeEnum.month\"\n        [currentMonth]=\"_currentMonth\"\n        [locale]=\"locale\"\n        [currentYear]=\"_currentYear\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        (monthSelected)=\"setMonth($event)\">\n      </teta-month-select>\n    </div>\n  </div>\n</teta-dropdown>\n", styles: [""], components: [{ type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: YearSelectComponent, selector: "teta-year-select", inputs: ["currentYear", "today", "size", "minDate", "maxDate", "allowableRange"], outputs: ["yearSelected", "yearApplied"] }, { type: MonthSelectComponent, selector: "teta-month-select", inputs: ["locale", "minDate", "maxDate", "size", "currentMonth", "currentYear"], outputs: ["monthSelected", "monthApplied"] }], directives: [{ type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropdownContentDirective, selector: "[tetaDropdownContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: MonthPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-month-picker', providers: [MONTH_PICKER_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, template: "<teta-dropdown\n  class=\"row row_auto\"\n  [appendToBody]=\"appendToBody\"\n  [(open)]=\"showPicker\"\n  [disabled]=\"disabled\">\n  <div tetaDropdownHead\n       (wheel)=\"scrollMonth($event)\"\n       class=\"datepicker-head font-body-3\">\n    <teta-icon [name]=\"'calendar'\" class=\"margin-right-2\"></teta-icon>\n    <div class=\"row_auto\">\n      <ng-container *ngIf=\"_value !==null && _value!==undefined\">\n        {{locale.months[_value.getMonth()]}} {{_value.getFullYear()}}\n      </ng-container>\n    </div>\n    <teta-icon [name]=\"'closeBig'\" (click)=\"clearPicker()\" class=\"margin-left-2\"></teta-icon>\n  </div>\n  <div tetaDropdownContent class=\"scrollable padding-3\">\n    <div class=\"row align-center justify-content-between\">\n      <div>\n        <button teta-button\n                [palette]=\"'text'\"\n                [view]=\"displayMode===datePickerModeEnum.month ? 'primary' : 'ghost'\"\n                (click)=\"setMode(datePickerModeEnum.month)\"\n                (wheel)=\"scrollMonth($event);\">\n          {{locale.months[_currentMonth || today.getMonth()]}}\n        </button>\n        <button teta-button\n                class=\"margin-left-2\"\n                [palette]=\"'text'\"\n                [view]=\"displayMode===datePickerModeEnum.year ? 'primary' : 'ghost'\"\n                (click)=\"setMode(datePickerModeEnum.year)\"\n                (wheel)=\"scrollYear($event);\">\n          {{_currentYear || today.getFullYear()}}\n        </button>\n      </div>\n      <button teta-button\n              [palette]=\"'text'\"\n              [view]=\"'ghost'\"\n              (click)=\"setToday()\">\n        <teta-icon [name]=\"'calendar'\"></teta-icon>\n      </button>\n    </div>\n    <div class=\"datepicker-content\">\n      <teta-year-select\n        *ngIf=\"displayMode === datePickerModeEnum.year\"\n        [currentYear]=\"_currentYear\"\n        [today]=\"today\"\n        [size]=\"8\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        (yearSelected)=\"setYear($event)\">\n      </teta-year-select>\n      <teta-month-select\n        *ngIf=\"displayMode === datePickerModeEnum.month\"\n        [currentMonth]=\"_currentMonth\"\n        [locale]=\"locale\"\n        [currentYear]=\"_currentYear\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        (monthSelected)=\"setMonth($event)\">\n      </teta-month-select>\n    </div>\n  </div>\n</teta-dropdown>\n", styles: [""] }]
@@ -3189,6 +3189,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 }]
         }] });
 
+class ToolbarComponent {
+    get getClass() {
+        const result = [this.class, 'toolbar'];
+        if (this.palette) {
+            result.push(`toolbar-${this.palette}`);
+        }
+        return result.join(' ');
+    }
+    ngOnInit() { }
+}
+ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ToolbarComponent, selector: "teta-toolbar", inputs: { palette: "palette", class: "class" }, host: { properties: { "class": "this.getClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [""] }]
+        }], propDecorators: { palette: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }], getClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class ExpandCardComponent {
+    constructor() {
+        this.open = true;
+        this.openChange = new EventEmitter();
+        this.showCross = true;
+        this.crossClick = new EventEmitter();
+    }
+    ngOnInit() {
+    }
+    setOpen() {
+        this.open = !this.open;
+        this.openChange.emit(this.open);
+    }
+}
+ExpandCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ExpandCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ExpandCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ExpandCardComponent, selector: "teta-expand-card", inputs: { open: "open", showCross: "showCross" }, outputs: { openChange: "openChange", crossClick: "crossClick" }, exportAs: ["expand-card"], ngImport: i0, template: "<teta-toolbar class=\"justify-content-between align-center\">\n  <div class=\"font-title-3\">\n    <ng-content select=\"head\"></ng-content>\n  </div>\n  <div class=\"row gap align-center\">\n    <button teta-button (click)=\"setOpen()\" [palette]=\"'text'\" [view]=\"'ghost'\" [square]=\"true\">\n      <teta-icon [name]=\"open ? 'arrowUpKey' : 'arrowDownKey'\"></teta-icon>\n    </button>\n    <ng-container *ngIf=\"showCross\">\n      <teta-delimiter [palette]=\"'text'\" class='height-4'></teta-delimiter>\n      <button teta-button (click)=\"crossClick.emit($event)\" [palette]=\"'text'\" [view]=\"'ghost'\" [square]=\"true\">\n        <teta-icon [name]=\"'closeBig'\"></teta-icon>\n      </button>\n    </ng-container>\n  </div>\n</teta-toolbar>\n<div class=\"content\" *ngIf=\"open\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{border:solid 1px var(--color-text-5);border-radius:4px;animation:append-animate .5s linear;transition:order 5s ease-in}.content{padding:0 12px 12px;animation:append-animate .5s linear}@keyframes append-animate{0%{opacity:0}to{opacity:1}}\n"], components: [{ type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: DelimiterComponent, selector: "teta-delimiter", inputs: ["direction", "palette", "height", "verticalMargin", "horizontalMargin", "class"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ExpandCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-expand-card', changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'expand-card', template: "<teta-toolbar class=\"justify-content-between align-center\">\n  <div class=\"font-title-3\">\n    <ng-content select=\"head\"></ng-content>\n  </div>\n  <div class=\"row gap align-center\">\n    <button teta-button (click)=\"setOpen()\" [palette]=\"'text'\" [view]=\"'ghost'\" [square]=\"true\">\n      <teta-icon [name]=\"open ? 'arrowUpKey' : 'arrowDownKey'\"></teta-icon>\n    </button>\n    <ng-container *ngIf=\"showCross\">\n      <teta-delimiter [palette]=\"'text'\" class='height-4'></teta-delimiter>\n      <button teta-button (click)=\"crossClick.emit($event)\" [palette]=\"'text'\" [view]=\"'ghost'\" [square]=\"true\">\n        <teta-icon [name]=\"'closeBig'\"></teta-icon>\n      </button>\n    </ng-container>\n  </div>\n</teta-toolbar>\n<div class=\"content\" *ngIf=\"open\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{border:solid 1px var(--color-text-5);border-radius:4px;animation:append-animate .5s linear;transition:order 5s ease-in}.content{padding:0 12px 12px;animation:append-animate .5s linear}@keyframes append-animate{0%{opacity:0}to{opacity:1}}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { open: [{
+                type: Input
+            }], openChange: [{
+                type: Output
+            }], showCross: [{
+                type: Input
+            }], crossClick: [{
+                type: Output
+            }] } });
+
+class ToolbarModule {
+}
+ToolbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ToolbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ToolbarModule, declarations: [ToolbarComponent], imports: [CommonModule], exports: [ToolbarComponent] });
+ToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ToolbarModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ToolbarModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ToolbarComponent],
+                    exports: [ToolbarComponent],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
+class ExpandCardModule {
+}
+ExpandCardModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ExpandCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ExpandCardModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ExpandCardModule, declarations: [ExpandCardComponent], imports: [CommonModule,
+        ToolbarModule,
+        ButtonModule,
+        IconModule,
+        DelimiterModule], exports: [ExpandCardComponent] });
+ExpandCardModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ExpandCardModule, imports: [[
+            CommonModule,
+            ToolbarModule,
+            ButtonModule,
+            IconModule,
+            DelimiterModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ExpandCardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ExpandCardComponent
+                    ],
+                    exports: [
+                        ExpandCardComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        ToolbarModule,
+                        ButtonModule,
+                        IconModule,
+                        DelimiterModule
+                    ]
+                }]
+        }] });
+
 class ExpandPanelContentDirective {
     constructor(template) {
         this.template = template;
@@ -3217,30 +3322,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
 
-class ToolbarComponent {
-    get getClass() {
-        const result = [this.class, 'toolbar'];
-        if (this.palette) {
-            result.push(`toolbar-${this.palette}`);
-        }
-        return result.join(' ');
-    }
-    ngOnInit() { }
-}
-ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ToolbarComponent, selector: "teta-toolbar", inputs: { palette: "palette", class: "class" }, host: { properties: { "class": "this.getClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ToolbarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [""] }]
-        }], propDecorators: { palette: [{
-                type: Input
-            }], class: [{
-                type: Input
-            }], getClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
 class ExpandPanelComponent {
     constructor() {
         this.open = true;
@@ -3276,10 +3357,10 @@ class ExpandPanelComponent {
     }
 }
 ExpandPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ExpandPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ExpandPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ExpandPanelComponent, selector: "teta-expand-panel", inputs: { placeholder: "placeholder", open: "open", cookieName: "cookieName", direction: "direction" }, outputs: { openChange: "openChange" }, queries: [{ propertyName: "content", first: true, predicate: ExpandPanelContentDirective, descendants: true }, { propertyName: "head", first: true, predicate: ExpandPanelHeadDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"open\">\n  <teta-toolbar\n    style=\"display: flex\"\n    [style.justifyContent]=\"direction === 'right' ? 'space-between' : 'unset'\"\n    [style.flexDirection]=\"direction === 'right' ? 'row-reverse' : 'row'\">\n    <button\n      teta-button\n      [square]=\"true\"\n      [palette]=\"'text'\"\n      [view]=\"'ghost'\"\n      (click)=\"closePanel()\"\n    >\n      <teta-icon [name]=\"direction === 'right' ? 'arrowRight' : 'arrowLeft'\"></teta-icon>\n    </button>\n    <span class=\"font-title-2\" style=\"display: contents\"><ng-container *ngTemplateOutlet=\"head?.template\"></ng-container></span>\n  </teta-toolbar>\n  <ng-container *ngTemplateOutlet=\"content?.template\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"!open\">\n  <div class=\"width-10 overflow-hidden\" style=\"height: 100%;\">\n    <button\n      teta-button\n      style=\"\n        transform-origin: 0 0;\n        transform: rotate(-90deg) translateX(-100%);\n        margin: 8px;\n      \"\n      [palette]=\"'text'\"\n      [view]=\"'ghost'\"\n      (click)=\"openPanel()\"\n    >\n      <div class=\"font-button-2 nowrap\">{{ placeholder }}</div>\n      <teta-icon [name]=\"direction === 'right' ? 'arrowUp' : 'arrowDown'\"></teta-icon>\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;min-width:0;min-height:0;height:100%}\n"], components: [{ type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ExpandPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ExpandPanelComponent, selector: "teta-expand-panel", inputs: { placeholder: "placeholder", open: "open", cookieName: "cookieName", direction: "direction" }, outputs: { openChange: "openChange" }, queries: [{ propertyName: "content", first: true, predicate: ExpandPanelContentDirective, descendants: true }, { propertyName: "head", first: true, predicate: ExpandPanelHeadDirective, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"open\">\n  <teta-toolbar\n    style=\"display: flex\"\n    [style.justifyContent]=\"direction === 'right' ? 'space-between' : 'unset'\"\n    [style.flexDirection]=\"direction === 'right' ? 'row-reverse' : 'row'\">\n    <button\n      teta-button\n      [square]=\"true\"\n      [palette]=\"'text'\"\n      [view]=\"'ghost'\"\n      (click)=\"closePanel()\"\n    >\n      <teta-icon [name]=\"direction === 'right' ? 'arrowRightKey' : 'arrowLeftKey'\"></teta-icon>\n    </button>\n    <span class=\"font-title-2\" style=\"display: contents\"><ng-container\n      *ngTemplateOutlet=\"head?.template\"></ng-container></span>\n  </teta-toolbar>\n  <ng-container *ngTemplateOutlet=\"content?.template\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"!open\">\n  <div class=\"width-10 overflow-hidden\" style=\"height: 100%;\">\n    <button\n      teta-button\n      style=\"\n        transform-origin: 0 0;\n        transform: rotate(-90deg) translateX(-100%);\n        margin: 8px;\n      \"\n      [palette]=\"'text'\"\n      [view]=\"'ghost'\"\n      (click)=\"openPanel()\"\n    >\n      <div class=\"font-button-2 nowrap\">{{ placeholder }}</div>\n      <teta-icon [name]=\"direction === 'right' ? 'arrowUpKey' : 'arrowDownKey'\"></teta-icon>\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;min-width:0;min-height:0;height:100%}\n"], components: [{ type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ExpandPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-expand-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"open\">\n  <teta-toolbar\n    style=\"display: flex\"\n    [style.justifyContent]=\"direction === 'right' ? 'space-between' : 'unset'\"\n    [style.flexDirection]=\"direction === 'right' ? 'row-reverse' : 'row'\">\n    <button\n      teta-button\n      [square]=\"true\"\n      [palette]=\"'text'\"\n      [view]=\"'ghost'\"\n      (click)=\"closePanel()\"\n    >\n      <teta-icon [name]=\"direction === 'right' ? 'arrowRight' : 'arrowLeft'\"></teta-icon>\n    </button>\n    <span class=\"font-title-2\" style=\"display: contents\"><ng-container *ngTemplateOutlet=\"head?.template\"></ng-container></span>\n  </teta-toolbar>\n  <ng-container *ngTemplateOutlet=\"content?.template\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"!open\">\n  <div class=\"width-10 overflow-hidden\" style=\"height: 100%;\">\n    <button\n      teta-button\n      style=\"\n        transform-origin: 0 0;\n        transform: rotate(-90deg) translateX(-100%);\n        margin: 8px;\n      \"\n      [palette]=\"'text'\"\n      [view]=\"'ghost'\"\n      (click)=\"openPanel()\"\n    >\n      <div class=\"font-button-2 nowrap\">{{ placeholder }}</div>\n      <teta-icon [name]=\"direction === 'right' ? 'arrowUp' : 'arrowDown'\"></teta-icon>\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;min-width:0;min-height:0;height:100%}\n"] }]
+            args: [{ selector: 'teta-expand-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"open\">\n  <teta-toolbar\n    style=\"display: flex\"\n    [style.justifyContent]=\"direction === 'right' ? 'space-between' : 'unset'\"\n    [style.flexDirection]=\"direction === 'right' ? 'row-reverse' : 'row'\">\n    <button\n      teta-button\n      [square]=\"true\"\n      [palette]=\"'text'\"\n      [view]=\"'ghost'\"\n      (click)=\"closePanel()\"\n    >\n      <teta-icon [name]=\"direction === 'right' ? 'arrowRightKey' : 'arrowLeftKey'\"></teta-icon>\n    </button>\n    <span class=\"font-title-2\" style=\"display: contents\"><ng-container\n      *ngTemplateOutlet=\"head?.template\"></ng-container></span>\n  </teta-toolbar>\n  <ng-container *ngTemplateOutlet=\"content?.template\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"!open\">\n  <div class=\"width-10 overflow-hidden\" style=\"height: 100%;\">\n    <button\n      teta-button\n      style=\"\n        transform-origin: 0 0;\n        transform: rotate(-90deg) translateX(-100%);\n        margin: 8px;\n      \"\n      [palette]=\"'text'\"\n      [view]=\"'ghost'\"\n      (click)=\"openPanel()\"\n    >\n      <div class=\"font-button-2 nowrap\">{{ placeholder }}</div>\n      <teta-icon [name]=\"direction === 'right' ? 'arrowUpKey' : 'arrowDownKey'\"></teta-icon>\n    </button>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;flex-direction:column;flex-grow:0;flex-shrink:0;min-width:0;min-height:0;height:100%}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { content: [{
                 type: ContentChild,
                 args: [ExpandPanelContentDirective, { static: false }]
@@ -3298,24 +3379,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 type: Input
             }] } });
 
-class ToolbarModule {
-}
-ToolbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ToolbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ToolbarModule, declarations: [ToolbarComponent], imports: [CommonModule], exports: [ToolbarComponent] });
-ToolbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ToolbarModule, imports: [[
-            CommonModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ToolbarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ToolbarComponent],
-                    exports: [ToolbarComponent],
-                    imports: [
-                        CommonModule
-                    ]
-                }]
-        }] });
-
 class ExpandPanelModule {
 }
 ExpandPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ExpandPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3396,10 +3459,10 @@ class FileUploadAreaComponent {
     }
 }
 FileUploadAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FileUploadAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FileUploadAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: FileUploadAreaComponent, selector: "teta-file-upload-area", inputs: { multiple: "multiple", disabled: "disabled", accept: "accept" }, outputs: { upload: "upload" }, host: { listeners: { "dragenter": "dragEnter($event)", "dragover": "dragOver($event)", "dragleave": "dragLeave($event)", "drop": "drop($event)" }, properties: { "class.file-upload": "this.fileUpload", "class.file-upload_active": "this.fileUploadActive" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["fileUpload"], descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n<label class=\"file-upload-label\">\n  <input #fileUpload\n         id=\"upload-input\"\n         class=\"file-upload-input\"\n         type=\"file\"\n         name=\"fileUpload\"\n         [attr.accept]=\"accept\"\n         [attr.multiple]=\"multiple ? 'multiple' : null\"\n         [disabled]=\"disabled\"\n         (change)=\"fileChanged($event)\"/>\n  <teta-button [palette]=\"'primary'\" type=\"button\">\n    <teta-icon [name]=\"'upload'\"></teta-icon>\n    \u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C\n  </teta-button>\n</label>\n", styles: [":host{display:flex}\n"], components: [{ type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FileUploadAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: FileUploadAreaComponent, selector: "teta-file-upload-area", inputs: { multiple: "multiple", disabled: "disabled", accept: "accept" }, outputs: { upload: "upload" }, host: { listeners: { "dragenter": "dragEnter($event)", "dragover": "dragOver($event)", "dragleave": "dragLeave($event)", "drop": "drop($event)" }, properties: { "class.file-upload": "this.fileUpload", "class.file-upload_active": "this.fileUploadActive" } }, viewQueries: [{ propertyName: "input", first: true, predicate: ["fileUpload"], descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n<label class=\"file-upload-label\">\n  <input #fileUpload\n         id=\"upload-input\"\n         class=\"file-upload-input\"\n         type=\"file\"\n         name=\"fileUpload\"\n         [attr.accept]=\"accept\"\n         [attr.multiple]=\"multiple ? 'multiple' : null\"\n         [disabled]=\"disabled\"\n         (change)=\"fileChanged($event)\"/>\n  <teta-button [palette]=\"'primary'\" type=\"button\">\n    <teta-icon [name]=\"'search'\"></teta-icon>\n    {{'common.browse' | transloco}}\n  </teta-button>\n</label>\n", styles: [":host{display:flex}\n"], components: [{ type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], pipes: { "transloco": i1$1.TranslocoPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FileUploadAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-file-upload-area', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<label class=\"file-upload-label\">\n  <input #fileUpload\n         id=\"upload-input\"\n         class=\"file-upload-input\"\n         type=\"file\"\n         name=\"fileUpload\"\n         [attr.accept]=\"accept\"\n         [attr.multiple]=\"multiple ? 'multiple' : null\"\n         [disabled]=\"disabled\"\n         (change)=\"fileChanged($event)\"/>\n  <teta-button [palette]=\"'primary'\" type=\"button\">\n    <teta-icon [name]=\"'upload'\"></teta-icon>\n    \u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044C\n  </teta-button>\n</label>\n", styles: [":host{display:flex}\n"] }]
+            args: [{ selector: 'teta-file-upload-area', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<label class=\"file-upload-label\">\n  <input #fileUpload\n         id=\"upload-input\"\n         class=\"file-upload-input\"\n         type=\"file\"\n         name=\"fileUpload\"\n         [attr.accept]=\"accept\"\n         [attr.multiple]=\"multiple ? 'multiple' : null\"\n         [disabled]=\"disabled\"\n         (change)=\"fileChanged($event)\"/>\n  <teta-button [palette]=\"'primary'\" type=\"button\">\n    <teta-icon [name]=\"'search'\"></teta-icon>\n    {{'common.browse' | transloco}}\n  </teta-button>\n</label>\n", styles: [":host{display:flex}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { fileUpload: [{
                 type: HostBinding,
                 args: ['class.file-upload']
@@ -3445,14 +3508,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
 class FileUploadModule {
 }
 FileUploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FileUploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FileUploadModule, declarations: [FileUploadAreaComponent, FileItemComponent], imports: [CommonModule, ButtonModule, IconModule], exports: [FileUploadAreaComponent, FileItemComponent] });
-FileUploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FileUploadModule, imports: [[CommonModule, ButtonModule, IconModule]] });
+FileUploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FileUploadModule, declarations: [FileUploadAreaComponent, FileItemComponent], imports: [CommonModule, ButtonModule, IconModule, TranslocoModule], exports: [FileUploadAreaComponent, FileItemComponent] });
+FileUploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FileUploadModule, imports: [[CommonModule, ButtonModule, IconModule, TranslocoModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: FileUploadModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [FileUploadAreaComponent, FileItemComponent],
                     exports: [FileUploadAreaComponent, FileItemComponent],
-                    imports: [CommonModule, ButtonModule, IconModule],
+                    imports: [CommonModule, ButtonModule, IconModule, TranslocoModule],
                 }]
         }] });
 
@@ -4632,7 +4695,7 @@ SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             useExisting: forwardRef(() => SelectComponent),
             multi: true,
         },
-    ], queries: [{ propertyName: "optionDirective", first: true, predicate: SelectOptionDirective, descendants: true, static: true }, { propertyName: "valueDirective", first: true, predicate: SelectValueDirective, descendants: true, static: true }], ngImport: i0, template: "<teta-dropdown [align]=\"align\"\n               [verticalAlign]=\"verticalAlign\"\n               [autoClose]=\"autoClose\"\n               [autoCloseIgnore]=\"autoCloseIgnore\"\n               [(open)]=\"open\"\n               [appendToBody]=\"appendToBody\"\n               [disabled]=\"disabled\"\n               class=\"row row_auto\">\n  <div tetaDropdownHead\n       class=\"row row_auto select-head\"\n       [class.select-head_invalid]=\"invalid\">\n    <div class=\"row_auto flex align-center\">\n      <teta-icon *ngIf=\"icon\" [name]=\"icon\" class=\"margin-right-1\"></teta-icon>\n      <span class=\"placeholder\" *ngIf=\"(value == null || value?.length === 0) && placeholder\">\n          {{placeholder}}\n        </span>\n      <ng-container\n        *ngTemplateOutlet=\"valueDirective ? valueDirective.template : valueDefault; context: {$implicit: value, value: value}\"></ng-container>\n    </div>\n    <teta-icon [name]=\"'arrowDownSmall'\"></teta-icon>\n  </div>\n  <div *ngIf=\"options?.length\" tetaDropdownContent class=\"select-list scrollable row_auto\" (click)=\"$event.preventDefault()\">\n    <ng-container *ngIf=\"searchRef\">\n      <div class=\"select-search\">\n        <teta-text-field [ngModel]=\"searchText\"\n                         (ngModelChange)=\"search($event)\"\n                         [placeholder]=\"'\u041F\u043E\u0438\u0441\u043A'\"\n                         [leftIconName]=\"'search'\"></teta-text-field>\n      </div>\n      <div class=\"list-divider\"></div>\n    </ng-container>\n    <ng-container *ngIf=\"!multiple && allowNull\">\n      <div class=\"list-item list-item_interactive\"\n           (click)=\"clear()\"\n           [class.list-item_active]=\"value==null\">\n        \u041D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E\n      </div>\n      <div class=\"list-divider\"></div>\n    </ng-container>\n    <ng-container *ngIf=\"!virtual\">\n      <div class=\"list-item list-item_interactive\"\n           *ngFor=\"let option of visibleOptions\"\n           [class.select-list-item_active]=\"itemSelected(option) && multiple\"\n           [class.list-item_active]=\"itemSelected(option)\"\n           [class.select-list-item]=\"multiple\"\n           (click)=\"clickOption(option, $event)\">\n        <teta-icon *ngIf=\"itemSelected(option) && multiple\" [name]=\"'tick'\" [palette]=\"'primary'\"></teta-icon>\n        <span [tetaHighlight]=\"searchText\">\n          <ng-container\n            *ngTemplateOutlet=\"optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}\">\n          </ng-container>\n        </span>\n      </div>\n    </ng-container>\n    <cdk-virtual-scroll-viewport *ngIf=\"virtual\"\n                                 [itemSize]=\"40\"\n                                 minBufferPx=\"200\"\n                                 maxBufferPx=\"600\">\n      <div class=\"select-list-item select-list-item_interactive\"\n           *cdkVirtualFor=\"let option of visibleOptions; templateCacheSize: 0;\"\n           [class.select-list-item_active]=\"itemSelected(option)\"\n           [tetaHighlight]=\"searchText\"\n           (click)=\"clickOption(option, $event)\">\n        <teta-icon *ngIf=\"itemSelected(option)\" [name]=\"'tick'\" [palette]=\"'primary'\" class=\"margin-left-2\"></teta-icon>\n        <div [tetaHighlight]=\"searchText\">\n          <ng-container\n            *ngTemplateOutlet=\"optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}\">\n          </ng-container>\n        </div>\n      </div>\n    </cdk-virtual-scroll-viewport>\n    <div class=\"row row_auto select-chip-field flex-wrap\" *ngIf=\"multiple && value?.length\">\n      <div *ngFor=\"let item of value\" class=\"chip\">\n        <teta-icon [name]=\"'closeCircle'\" (click)=\"removeItemClick(item, $event)\"></teta-icon>\n        {{getText(item)}}\n      </div>\n    </div>\n  </div>\n</teta-dropdown>\n\n<ng-template #optionDefault let-option>\n  {{getText(option)}}\n</ng-template>\n<ng-template #valueDefault let-value>\n  <div class=\"row_auto overflow-hidden text-overflow-ellipsis\" *ngIf=\"multiple\">\n    <ng-container\n      *ngFor=\"let item of value; let i = index\">{{getText(item) + (value.length === i + 1 ? '' : ', ') }}</ng-container>\n  </div>\n  <ng-container *ngIf=\"!multiple\">\n    <span class=\"row row_auto  overflow-hidden text-overflow-ellipsis\">{{getText(value)}}</span>\n  </ng-container>\n</ng-template>\n", styles: [""], components: [{ type: DropdownComponent, selector: "teta-dropdown" }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "invalid"] }, { type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], directives: [{ type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: HighlightDirective, selector: "[tetaHighlight]", inputs: ["tetaHighlight"] }, { type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "optionDirective", first: true, predicate: SelectOptionDirective, descendants: true, static: true }, { propertyName: "valueDirective", first: true, predicate: SelectValueDirective, descendants: true, static: true }], ngImport: i0, template: "<teta-dropdown [align]=\"align\"\n               [verticalAlign]=\"verticalAlign\"\n               [autoClose]=\"autoClose\"\n               [autoCloseIgnore]=\"autoCloseIgnore\"\n               [(open)]=\"open\"\n               [appendToBody]=\"appendToBody\"\n               [disabled]=\"disabled\"\n               class=\"row row_auto\">\n  <div tetaDropdownHead\n       class=\"row row_auto select-head\"\n       [class.select-head_invalid]=\"invalid\">\n    <div class=\"row_auto flex align-center\">\n      <teta-icon *ngIf=\"icon\" [name]=\"icon\" class=\"margin-right-1\"></teta-icon>\n      <span class=\"placeholder\" *ngIf=\"(value == null || value?.length === 0) && placeholder\">\n          {{placeholder}}\n        </span>\n      <ng-container\n        *ngTemplateOutlet=\"valueDirective ? valueDirective.template : valueDefault; context: {$implicit: value, value: value}\"></ng-container>\n    </div>\n    <teta-icon [name]=\"'arrowDownSmall'\"></teta-icon>\n  </div>\n  <div *ngIf=\"options?.length\" tetaDropdownContent class=\"select-list scrollable row_auto\" (click)=\"$event.preventDefault()\">\n    <ng-container *ngIf=\"searchRef\">\n      <div class=\"select-search\">\n        <teta-text-field [ngModel]=\"searchText\"\n                         (ngModelChange)=\"search($event)\"\n                         [placeholder]=\"'\u041F\u043E\u0438\u0441\u043A'\"\n                         [leftIconName]=\"'search'\"></teta-text-field>\n      </div>\n      <div class=\"list-divider\"></div>\n    </ng-container>\n    <ng-container *ngIf=\"!multiple && allowNull\">\n      <div class=\"list-item list-item_interactive\"\n           (click)=\"clear()\"\n           [class.list-item_active]=\"value==null\">\n        \u041D\u0435 \u0432\u044B\u0431\u0440\u0430\u043D\u043E\n      </div>\n      <div class=\"list-divider\"></div>\n    </ng-container>\n    <ng-container *ngIf=\"!virtual\">\n      <div class=\"list-item list-item_interactive\"\n           *ngFor=\"let option of visibleOptions\"\n           [class.select-list-item_active]=\"itemSelected(option) && multiple\"\n           [class.list-item_active]=\"itemSelected(option)\"\n           [class.select-list-item]=\"multiple\"\n           (click)=\"clickOption(option, $event)\">\n        <teta-icon *ngIf=\"itemSelected(option) && multiple\" [name]=\"'tick'\" [palette]=\"'primary'\"></teta-icon>\n        <span [tetaHighlight]=\"searchText\">\n          <ng-container\n            *ngTemplateOutlet=\"optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}\">\n          </ng-container>\n        </span>\n      </div>\n    </ng-container>\n    <cdk-virtual-scroll-viewport *ngIf=\"virtual\"\n                                 [itemSize]=\"40\"\n                                 minBufferPx=\"200\"\n                                 maxBufferPx=\"600\">\n      <div class=\"select-list-item select-list-item_interactive\"\n           *cdkVirtualFor=\"let option of visibleOptions; templateCacheSize: 0;\"\n           [class.select-list-item_active]=\"itemSelected(option)\"\n           [tetaHighlight]=\"searchText\"\n           (click)=\"clickOption(option, $event)\">\n        <teta-icon *ngIf=\"itemSelected(option)\" [name]=\"'tick'\" [palette]=\"'primary'\" class=\"margin-left-2\"></teta-icon>\n        <div [tetaHighlight]=\"searchText\">\n          <ng-container\n            *ngTemplateOutlet=\"optionDirective ? optionDirective.template : optionDefault; context: {$implicit: option, option: option}\">\n          </ng-container>\n        </div>\n      </div>\n    </cdk-virtual-scroll-viewport>\n    <div class=\"row row_auto select-chip-field flex-wrap\" *ngIf=\"multiple && value?.length\">\n      <div *ngFor=\"let item of value\" class=\"chip\">\n        <teta-icon [name]=\"'closeCircle'\" (click)=\"removeItemClick(item, $event)\"></teta-icon>\n        {{getText(item)}}\n      </div>\n    </div>\n  </div>\n</teta-dropdown>\n\n<ng-template #optionDefault let-option>\n  {{getText(option)}}\n</ng-template>\n<ng-template #valueDefault let-value>\n  <div class=\"row_auto overflow-hidden text-overflow-ellipsis\" *ngIf=\"multiple\">\n    <ng-container\n      *ngFor=\"let item of value; let i = index\">{{getText(item) + (value.length === i + 1 ? '' : ', ') }}</ng-container>\n  </div>\n  <ng-container *ngIf=\"!multiple\">\n    <span class=\"row row_auto  overflow-hidden text-overflow-ellipsis\">{{getText(value)}}</span>\n  </ng-container>\n</ng-template>\n", styles: [""], components: [{ type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "invalid"] }, { type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], directives: [{ type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: HighlightDirective, selector: "[tetaHighlight]", inputs: ["tetaHighlight"] }, { type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-select', providers: [
@@ -5316,10 +5379,10 @@ ModalContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 ModalContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ModalContainerComponent, selector: "teta-modal-container", inputs: { config: "config" }, outputs: { closeEvent: "closeEvent" }, host: { listeners: { "keyup": "keyup($event)", "click": "click($event)" }, properties: { "attr.tabindex": "this.tabindex", "@dialog": "this.dialog", "class": "this.classList" } }, ngImport: i0, template: "<div class=\"modal__container\" [class.modal__container_resize]=\"config?.resizable\">\n  <ng-content></ng-content>\n</div>\n", styles: [""], animations: [
         trigger('dialog', [
             transition('void => *', [
-                style({ opacity: '0' }),
-                animate(150, style({ opacity: '1' })),
+                style({ top: '-100%' }),
+                animate('150ms ease-in', style({ top: '0' })),
             ]),
-            transition('* => void', [animate(150, style({ opacity: '0' }))]),
+            transition('* => void', [animate('150ms ease-in', style({ top: '-100%' }))]),
         ]),
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ModalContainerComponent, decorators: [{
@@ -5327,10 +5390,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
             args: [{ selector: 'teta-modal-container', animations: [
                         trigger('dialog', [
                             transition('void => *', [
-                                style({ opacity: '0' }),
-                                animate(150, style({ opacity: '1' })),
+                                style({ top: '-100%' }),
+                                animate('150ms ease-in', style({ top: '0' })),
                             ]),
-                            transition('* => void', [animate(150, style({ opacity: '0' }))]),
+                            transition('* => void', [animate('150ms ease-in', style({ top: '-100%' }))]),
                         ]),
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"modal__container\" [class.modal__container_resize]=\"config?.resizable\">\n  <ng-content></ng-content>\n</div>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { config: [{
@@ -5470,7 +5533,9 @@ class ModalInstance {
     destroy() {
         this._window.destroy();
         if (this._content && this._content.viewRef) {
-            this._content.viewRef.destroy();
+            setTimeout(() => {
+                this._content.viewRef.destroy();
+            }, 150);
         }
     }
 }
@@ -6032,6 +6097,12 @@ class FormsUtil {
         return (formGroup.controls[controlName]?.invalid &&
             formGroup.controls[controlName]?.dirty);
     }
+    static getControlErrors(formGroup, controlName) {
+        if (FormsUtil.controlIsInvalid(formGroup, controlName)) {
+            return Object.keys(formGroup.controls[controlName]?.errors);
+        }
+        return [];
+    }
     static matchValuesValidator(matchTo) {
         return (control) => !!control.parent &&
             !!control.parent.value &&
@@ -7129,8 +7200,8 @@ class StateUtil {
 var SelectType;
 (function (SelectType) {
     SelectType[SelectType["none"] = 0] = "none";
-    SelectType[SelectType["multiple"] = 1] = "multiple";
-    SelectType[SelectType["single"] = 2] = "single";
+    SelectType[SelectType["checkBox"] = 1] = "checkBox";
+    SelectType[SelectType["mouse"] = 2] = "mouse";
 })(SelectType || (SelectType = {}));
 
 var EditType;
@@ -7161,7 +7232,7 @@ class TableColumnStore {
 
 class TableService {
     constructor() {
-        this.selectType = SelectType.multiple;
+        this.selectType = SelectType.mouse;
         this.editType = EditType.cell;
         this.editEvent = EditEvent.doubleClick;
         this.trackRow = (index, row) => index;
@@ -7479,12 +7550,7 @@ class TableService {
             this._selectedRows.next(this._selectedRows.value.filter((_) => _ !== row));
         }
         else {
-            if (this.selectType === SelectType.single) {
-                this._selectedRows.next([row]);
-            }
-            else {
-                this._selectedRows.next([...this._selectedRows.value, row]);
-            }
+            this._selectedRows.next([...this._selectedRows.value, row]);
         }
     }
     selectRange(row) {
@@ -7518,23 +7584,13 @@ class TableService {
         if (this.selectType === SelectType.none) {
             return;
         }
-        if (this.selectType === SelectType.single) {
-            this._selectedRows.next([row]);
-        }
-        else {
-            this._selectedRows.next([...this._selectedRows.value, row]);
-        }
+        this._selectedRows.next([...this._selectedRows.value, row]);
     }
     deselectRow(row) {
         if (this.selectType === SelectType.none) {
             return;
         }
-        if (this.selectType === SelectType.single) {
-            this._selectedRows.next([]);
-        }
-        else {
-            this._selectedRows.next(this._selectedRows.value.filter((_) => _ !== row));
-        }
+        this._selectedRows.next(this._selectedRows.value.filter((_) => _ !== row));
     }
     selectAll() {
         this._selectedRows.next(this._displayData.value);
@@ -8739,7 +8795,7 @@ class HeadCellComponent {
     }
 }
 HeadCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HeadCellComponent, deps: [{ token: TableService }, { token: i0.ApplicationRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-HeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: HeadCellComponent, selector: "teta-head-cell", inputs: { column: "column", showHeadCellMenu: "showHeadCellMenu", data: "data" }, host: { listeners: { "dragstart": "dragstart($event)", "dragenter": "dragenter($event)", "dragover": "allowDrop($event)", "dragleave": "dragleave($event)", "dragend": "dragend($event)", "drop": "drop($event)" }, properties: { "class.table-head__cell_active": "this.dropDownOpen" } }, ngImport: i0, template: "<div draggable=\"true\" class=\"row row_auto\">\n  <teta-dropdown [autoCloseIgnore]=\"['enter']\"\n                 [verticalAlign]=\"verticalAlign.bottom\"\n                 [appendToBody]=\"true\"\n                 [(open)]=\"dropDownOpen\"\n                 [align]=\"align.left\"\n                 (click)=\"$event.preventDefault()\"\n                 [class.table-head__cell__menu_open]=\"dropDownOpen\"\n                 class=\"column column_auto justify-content-center\">\n    <div tetaDropdownHead class=\"table-head__cell__wrapper\"\n         [ngClass]=\"column.headCellClass\">\n      <teta-head-cell-host [column]=\"column\" [data]=\"data\"></teta-head-cell-host>\n      <teta-icon *ngIf=\"iconName | async as icon\"\n                 [palette]=\"'text'\"\n                 [name]=\"icon\"></teta-icon>\n    </div>\n    <teta-head-cell-dropdown tetaDropdownContent\n                             *ngIf=\"showHeadCellMenu\"\n                             (autosize)=\"autosizeColumn()\"\n                             (autosizeAll)=\"autosizeAllColumns()\"\n                             [data]=\"data\"\n                             [column]=\"column\"\n                             [columns]=\"columns | async\"\n                             [state]=\"state | async\"\n                             [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n  </teta-dropdown>\n  <div class=\"drop-area\"\n       draggable=\"false\"\n       [class.drop-area_left]=\"showDrag === 'left'\"\n       [class.drop-area_right]=\"showDrag === 'right'\"\n       *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n     draggable=\"false\"\n     (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n     (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n     [tetaResizeDrag]=\"'vertical'\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd()\"></div>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"], components: [{ type: DropdownComponent, selector: "teta-dropdown" }, { type: HeadCellHostComponent, selector: "teta-head-cell-host", inputs: ["column", "data"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: HeadCellDropdownComponent, selector: "teta-head-cell-dropdown", inputs: ["columns", "column", "state", "data", "dropDownOpen"], outputs: ["dropDownOpenChange", "autosize", "autosizeAll"] }], directives: [{ type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { type: ResizeDragDirective, selector: "[tetaResizeDrag]", inputs: ["tetaResizeDrag"], outputs: ["resizeStart", "resizeProcess", "resizeEnd"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: HeadCellComponent, selector: "teta-head-cell", inputs: { column: "column", showHeadCellMenu: "showHeadCellMenu", data: "data" }, host: { listeners: { "dragstart": "dragstart($event)", "dragenter": "dragenter($event)", "dragover": "allowDrop($event)", "dragleave": "dragleave($event)", "dragend": "dragend($event)", "drop": "drop($event)" }, properties: { "class.table-head__cell_active": "this.dropDownOpen" } }, ngImport: i0, template: "<div draggable=\"true\" class=\"row row_auto\">\n  <teta-dropdown [autoCloseIgnore]=\"['enter']\"\n                 [verticalAlign]=\"verticalAlign.bottom\"\n                 [appendToBody]=\"true\"\n                 [(open)]=\"dropDownOpen\"\n                 [align]=\"align.left\"\n                 (click)=\"$event.preventDefault()\"\n                 [class.table-head__cell__menu_open]=\"dropDownOpen\"\n                 class=\"column column_auto justify-content-center\">\n    <div tetaDropdownHead class=\"table-head__cell__wrapper\"\n         [ngClass]=\"column.headCellClass\">\n      <teta-head-cell-host [column]=\"column\" [data]=\"data\"></teta-head-cell-host>\n      <teta-icon *ngIf=\"iconName | async as icon\"\n                 [palette]=\"'text'\"\n                 [name]=\"icon\"></teta-icon>\n    </div>\n    <teta-head-cell-dropdown tetaDropdownContent\n                             *ngIf=\"showHeadCellMenu\"\n                             (autosize)=\"autosizeColumn()\"\n                             (autosizeAll)=\"autosizeAllColumns()\"\n                             [data]=\"data\"\n                             [column]=\"column\"\n                             [columns]=\"columns | async\"\n                             [state]=\"state | async\"\n                             [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n  </teta-dropdown>\n  <div class=\"drop-area\"\n       draggable=\"false\"\n       [class.drop-area_left]=\"showDrag === 'left'\"\n       [class.drop-area_right]=\"showDrag === 'right'\"\n       *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n     draggable=\"false\"\n     (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n     (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n     [tetaResizeDrag]=\"'vertical'\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd()\"></div>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"], components: [{ type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { type: HeadCellHostComponent, selector: "teta-head-cell-host", inputs: ["column", "data"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { type: HeadCellDropdownComponent, selector: "teta-head-cell-dropdown", inputs: ["columns", "column", "state", "data", "dropDownOpen"], outputs: ["dropDownOpenChange", "autosize", "autosizeAll"] }], directives: [{ type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { type: ResizeDragDirective, selector: "[tetaResizeDrag]", inputs: ["tetaResizeDrag"], outputs: ["resizeStart", "resizeProcess", "resizeEnd"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HeadCellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-head-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div draggable=\"true\" class=\"row row_auto\">\n  <teta-dropdown [autoCloseIgnore]=\"['enter']\"\n                 [verticalAlign]=\"verticalAlign.bottom\"\n                 [appendToBody]=\"true\"\n                 [(open)]=\"dropDownOpen\"\n                 [align]=\"align.left\"\n                 (click)=\"$event.preventDefault()\"\n                 [class.table-head__cell__menu_open]=\"dropDownOpen\"\n                 class=\"column column_auto justify-content-center\">\n    <div tetaDropdownHead class=\"table-head__cell__wrapper\"\n         [ngClass]=\"column.headCellClass\">\n      <teta-head-cell-host [column]=\"column\" [data]=\"data\"></teta-head-cell-host>\n      <teta-icon *ngIf=\"iconName | async as icon\"\n                 [palette]=\"'text'\"\n                 [name]=\"icon\"></teta-icon>\n    </div>\n    <teta-head-cell-dropdown tetaDropdownContent\n                             *ngIf=\"showHeadCellMenu\"\n                             (autosize)=\"autosizeColumn()\"\n                             (autosizeAll)=\"autosizeAllColumns()\"\n                             [data]=\"data\"\n                             [column]=\"column\"\n                             [columns]=\"columns | async\"\n                             [state]=\"state | async\"\n                             [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n  </teta-dropdown>\n  <div class=\"drop-area\"\n       draggable=\"false\"\n       [class.drop-area_left]=\"showDrag === 'left'\"\n       [class.drop-area_right]=\"showDrag === 'right'\"\n       *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n     draggable=\"false\"\n     (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n     (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n     [tetaResizeDrag]=\"'vertical'\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd()\"></div>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"] }]
@@ -8855,7 +8911,7 @@ class TableHeadComponent {
             this.columns = columns;
             const locked = ArrayUtil.flatten(columns, 'columns', true)
                 .filter((_) => this._hiddenColumns.indexOf(_.name) < 0 && _.locked);
-            const startWidth = this.selectType !== SelectType.none ? 28 : 0;
+            const startWidth = this.selectType === SelectType.checkBox ? 28 : 0;
             this.lockedFlex = locked.reduce((prev, curr) => prev + curr.flex, 0);
             this.lockedWidth = locked.reduce((prev, curr) => prev + curr.width, startWidth);
             this._cdr.markForCheck();
@@ -8892,10 +8948,10 @@ class TableHeadComponent {
     }
 }
 TableHeadComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TableHeadComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TableHeadComponent, selector: "teta-table-head", inputs: { selectType: "selectType", showHeadCellMenu: "showHeadCellMenu" }, host: { properties: { "class.table-head": "this.tableHeadClass" } }, ngImport: i0, template: "<div class=\"table-head_locked\"\n     *ngIf=\"locked?.length\"\n     [style.flex-grow]=\"lockedFlex\"\n     [style.flex-basis.px]=\"lockedWidth\"\n     [style.min-width.px]=\"lockedWidth\">\n  <teta-selection-head-cell\n    *ngIf=\"selectType !== selectTypeEnum.none\"\n    style=\"width: 28px;\"></teta-selection-head-cell>\n  <teta-table-head-group\n    *ngFor=\"let column of locked; trackBy: track\"\n    class=\"table-head__group\"\n    [data]=\"data\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"\n    [column]=\"column\"></teta-table-head-group>\n</div>\n<ng-container *ngIf=\"unlocked?.length\">\n  <teta-selection-head-cell\n    *ngIf=\"selectType !== selectTypeEnum.none && locked?.length < 1\"\n    style=\"width: 28px;\"></teta-selection-head-cell>\n  <teta-table-head-group\n    *ngFor=\"let column of unlocked; trackBy: track\"\n    class=\"table-head__group\"\n    [data]=\"data\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"\n    [column]=\"column\"></teta-table-head-group>\n</ng-container>\n", styles: [""], components: [{ type: SelectionHeadCellComponent, selector: "teta-selection-head-cell" }, { type: TableHeadGroupComponent, selector: "teta-table-head-group", inputs: ["showHeadCellMenu", "data", "column"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableHeadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TableHeadComponent, selector: "teta-table-head", inputs: { selectType: "selectType", showHeadCellMenu: "showHeadCellMenu" }, host: { properties: { "class.table-head": "this.tableHeadClass" } }, ngImport: i0, template: "<div class=\"table-head_locked\"\n     *ngIf=\"locked?.length\"\n     [style.flex-grow]=\"lockedFlex\"\n     [style.flex-basis.px]=\"lockedWidth\"\n     [style.min-width.px]=\"lockedWidth\">\n  <teta-selection-head-cell\n    *ngIf=\"selectType === selectTypeEnum.checkBox\"\n    style=\"width: 28px;\"></teta-selection-head-cell>\n  <teta-table-head-group\n    *ngFor=\"let column of locked; trackBy: track\"\n    class=\"table-head__group\"\n    [data]=\"data\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"\n    [column]=\"column\"></teta-table-head-group>\n</div>\n<ng-container *ngIf=\"unlocked?.length\">\n  <teta-selection-head-cell\n    *ngIf=\"selectType === selectTypeEnum.checkBox && locked?.length < 1\"\n    style=\"width: 28px;\"></teta-selection-head-cell>\n  <teta-table-head-group\n    *ngFor=\"let column of unlocked; trackBy: track\"\n    class=\"table-head__group\"\n    [data]=\"data\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"\n    [column]=\"column\"></teta-table-head-group>\n</ng-container>\n", styles: [""], components: [{ type: SelectionHeadCellComponent, selector: "teta-selection-head-cell" }, { type: TableHeadGroupComponent, selector: "teta-table-head-group", inputs: ["showHeadCellMenu", "data", "column"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TableHeadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-table-head', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-head_locked\"\n     *ngIf=\"locked?.length\"\n     [style.flex-grow]=\"lockedFlex\"\n     [style.flex-basis.px]=\"lockedWidth\"\n     [style.min-width.px]=\"lockedWidth\">\n  <teta-selection-head-cell\n    *ngIf=\"selectType !== selectTypeEnum.none\"\n    style=\"width: 28px;\"></teta-selection-head-cell>\n  <teta-table-head-group\n    *ngFor=\"let column of locked; trackBy: track\"\n    class=\"table-head__group\"\n    [data]=\"data\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"\n    [column]=\"column\"></teta-table-head-group>\n</div>\n<ng-container *ngIf=\"unlocked?.length\">\n  <teta-selection-head-cell\n    *ngIf=\"selectType !== selectTypeEnum.none && locked?.length < 1\"\n    style=\"width: 28px;\"></teta-selection-head-cell>\n  <teta-table-head-group\n    *ngFor=\"let column of unlocked; trackBy: track\"\n    class=\"table-head__group\"\n    [data]=\"data\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"\n    [column]=\"column\"></teta-table-head-group>\n</ng-container>\n", styles: [""] }]
+            args: [{ selector: 'teta-table-head', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"table-head_locked\"\n     *ngIf=\"locked?.length\"\n     [style.flex-grow]=\"lockedFlex\"\n     [style.flex-basis.px]=\"lockedWidth\"\n     [style.min-width.px]=\"lockedWidth\">\n  <teta-selection-head-cell\n    *ngIf=\"selectType === selectTypeEnum.checkBox\"\n    style=\"width: 28px;\"></teta-selection-head-cell>\n  <teta-table-head-group\n    *ngFor=\"let column of locked; trackBy: track\"\n    class=\"table-head__group\"\n    [data]=\"data\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"\n    [column]=\"column\"></teta-table-head-group>\n</div>\n<ng-container *ngIf=\"unlocked?.length\">\n  <teta-selection-head-cell\n    *ngIf=\"selectType === selectTypeEnum.checkBox && locked?.length < 1\"\n    style=\"width: 28px;\"></teta-selection-head-cell>\n  <teta-table-head-group\n    *ngFor=\"let column of unlocked; trackBy: track\"\n    class=\"table-head__group\"\n    [data]=\"data\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"\n    [column]=\"column\"></teta-table-head-group>\n</ng-container>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { selectType: [{
                 type: Input
             }], showHeadCellMenu: [{
@@ -9433,7 +9489,7 @@ class TableBodyComponent {
         this._columns = columns;
         this.locked = this._columns?.filter((_) => _.locked === true);
         this.unlocked = this._columns?.filter((_) => _.locked === false);
-        const startWidth = this.selectType !== SelectType.none ? 28 : 0;
+        const startWidth = this.selectType === SelectType.checkBox ? 28 : 0;
         this.lockedFlex = this.locked.reduce((prev, curr) => prev + curr.flex, 0);
         this.lockedWidth = this.locked.reduce((prev, curr) => prev + curr.width, startWidth);
         this.totalFlex = this._columns.reduce((prev, curr) => prev + curr.flex, 0);
@@ -9503,10 +9559,10 @@ class TableBodyComponent {
     }
 }
 TableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TableBodyComponent, deps: [{ token: TableService }, { token: TetaConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TableBodyComponent, selector: "teta-table-body", inputs: { virtual: "virtual", activeRow: "activeRow", selectedRows: "selectedRows", additionalComponent: "additionalComponent", tree: "tree", aggregate: "aggregate", grouping: "grouping", groupRowComponent: "groupRowComponent", openLevels: "openLevels", selectType: "selectType", rowClass: "rowClass" }, host: { properties: { "class.table-body": "this.tableBodyClass" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual\"\n                             class=\"table-body-container\"\n                             [itemSize]=\"28\">\n  <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n</cdk-virtual-scroll-viewport>\n<div *ngIf=\"!virtual\"\n     class=\"table-body-container\">\n  <ng-container *ngFor=\"let row of data; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"aggregate\">\n    <ng-container *ngTemplateOutlet=\"aggTemplate;\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <div class=\"table-row\"\n       (click)=\"setActiveRow(row)\"\n       (contextmenu)=\"setActiveRow(row)\"\n       [attr.data-row]=\"rowIndex\"\n       [class.table-row_odd]=\"rowIndex % 2 === 1\"\n       [ngClass]=\"rowClass ? rowClass(row, rowIndex) : ''\"\n       [class.table-row_active]=\"row === activeRow || (selectedRows && selectedRows.indexOf(row) >= 0)\"\n       [style.flex-grow]=\"totalFlex\"\n       [style.flex-basis.px]=\"totalWidth\"\n       [style.min-width.px]=\"totalWidth\">\n    <ng-container *ngIf=\"!grouping\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\"\n           [style.zIndex]=\"row === activeRow ? 1 : 'unset'\">\n        <teta-selection-cell *ngIf=\"selectType !== selectTypeEnum.none && locked.length\"\n                             [row]=\"row\"\n                             style=\"width: 28px;\"></teta-selection-cell>\n        <teta-cell\n          *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n          [attr.data-row]=\"rowIndex\"\n          [attr.data-column]=\"column.name\"\n          [column]=\"column\"\n          [filterOptions]=\"dict?dict[column.name]:[]\"\n          [dict]=\"dict\"\n          [row]=\"row\"\n          [ngClass]=\"column.cellClass\"\n          [attr.tabindex]=\"0\"\n          [style.flex-grow]=\"column.flex\"\n          [style.flex-basis.px]=\"column.width\"\n        ></teta-cell>\n      </div>\n      <teta-selection-cell *ngIf=\"selectType !== selectTypeEnum.none && locked.length < 1\"\n                           [row]=\"row\"\n                           style=\"width: 28px;\"></teta-selection-cell>\n      <teta-cell\n        *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-column]=\"column.name\"\n        [column]=\"column\"\n        [filterOptions]=\"dict?dict[column.name]:[]\"\n        [dict]=\"dict\"\n        [row]=\"row\"\n        [ngClass]=\"column.cellClass\"\n        [attr.tabindex]=\"0\"\n        [style.flex-grow]=\"column.flex\"\n        [style.flex-basis.px]=\"column.width\"\n      ></teta-cell>\n    </ng-container>\n    <ng-container *ngIf=\"grouping\">\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #aggTemplate>\n  <ng-container *ngIf=\"locale | async as loc\">\n    <div class=\"table-row\"\n         *ngIf=\"aggregate\"\n         [class.table-row_virtual]=\"virtual\"\n         [style.flex-grow]=\"virtual ? totalFlex : ''\"\n         [style.flex-basis.px]=\"virtual ? totalWidth : ''\"\n         [style.min-width.px]=\"virtual ? totalWidth : ''\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\">\n        <div class=\"cell align-center justify-content-center\"\n             style=\"width: 28px;\">\n          <teta-icon [name]=\"'sumColor'\"></teta-icon>\n        </div>\n        <div class=\"cell cell-component justify-content-end\"\n             *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n             [attr.data-column]=\"column.name\"\n             [ngClass]=\"column.cellClass\"\n             [attr.tabindex]=\"0\"\n             [style.flex-grow]=\"column.flex\"\n             [style.flex-basis.px]=\"column.width\">\n        <span class=\"cell-text cell-text_numeric font-title-3\">\n          {{loc[getAggregateText(column)]}}:\n          {{getAggregateValue(column) | tetaNumber : 2}}\n        </span>\n        </div>\n      </div>\n      <div class=\"cell align-center justify-content-center\"\n           style=\"width: 28px;\"\n           *ngIf=\"selectType !== selectTypeEnum.none && locked.length < 1\">\n        <teta-icon [name]=\"'sumColor'\"></teta-icon>\n      </div>\n      <div class=\"cell cell-component justify-content-end\"\n           *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n           [attr.data-column]=\"column.name\"\n           [ngClass]=\"column.cellClass\"\n           [attr.tabindex]=\"0\"\n           [style.flex-grow]=\"column.flex\"\n           [style.flex-basis.px]=\"column.width\">\n      <span class=\"cell-text cell-text_numeric font-title-3\">\n        {{loc[getAggregateText(column)]}}:\n        {{getAggregateValue(column) | tetaNumber : 2}}\n      </span>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: [""], components: [{ type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: SelectionCellComponent, selector: "teta-selection-cell", inputs: ["row"] }, { type: CellComponent, selector: "teta-cell", inputs: ["column", "filterOptions", "dict", "row"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i3.AsyncPipe, "tetaNumber": NumberPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TableBodyComponent, selector: "teta-table-body", inputs: { virtual: "virtual", activeRow: "activeRow", selectedRows: "selectedRows", additionalComponent: "additionalComponent", tree: "tree", aggregate: "aggregate", grouping: "grouping", groupRowComponent: "groupRowComponent", openLevels: "openLevels", selectType: "selectType", rowClass: "rowClass" }, host: { properties: { "class.table-body": "this.tableBodyClass" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual\"\n                             class=\"table-body-container\"\n                             [itemSize]=\"28\">\n  <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n</cdk-virtual-scroll-viewport>\n<div *ngIf=\"!virtual\"\n     class=\"table-body-container\">\n  <ng-container *ngFor=\"let row of data; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"aggregate\">\n    <ng-container *ngTemplateOutlet=\"aggTemplate;\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <div class=\"table-row\"\n       (click)=\"setActiveRow(row)\"\n       (contextmenu)=\"setActiveRow(row)\"\n       [attr.data-row]=\"rowIndex\"\n       [class.table-row_odd]=\"rowIndex % 2 === 1\"\n       [ngClass]=\"rowClass ? rowClass(row, rowIndex) : ''\"\n       [class.table-row_selected]=\"selectedRows && selectedRows.indexOf(row) >= 0\"\n       [style.flex-grow]=\"totalFlex\"\n       [style.flex-basis.px]=\"totalWidth\"\n       [style.min-width.px]=\"totalWidth\">\n    <ng-container *ngIf=\"!grouping\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\"\n           [style.zIndex]=\"row === activeRow ? 1 : 'unset'\">\n        <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length\"\n                             [row]=\"row\"\n                             style=\"width: 28px;\"></teta-selection-cell>\n        <teta-cell\n          *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n          [attr.data-row]=\"rowIndex\"\n          [attr.data-column]=\"column.name\"\n          [column]=\"column\"\n          [filterOptions]=\"dict?dict[column.name]:[]\"\n          [dict]=\"dict\"\n          [row]=\"row\"\n          [ngClass]=\"column.cellClass\"\n          [attr.tabindex]=\"0\"\n          [style.flex-grow]=\"column.flex\"\n          [style.flex-basis.px]=\"column.width\"\n        ></teta-cell>\n      </div>\n      <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\"\n                           [row]=\"row\"\n                           style=\"width: 28px;\"></teta-selection-cell>\n      <teta-cell\n        *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-column]=\"column.name\"\n        [column]=\"column\"\n        [filterOptions]=\"dict?dict[column.name]:[]\"\n        [dict]=\"dict\"\n        [row]=\"row\"\n        [ngClass]=\"column.cellClass\"\n        [attr.tabindex]=\"0\"\n        [style.flex-grow]=\"column.flex\"\n        [style.flex-basis.px]=\"column.width\"\n      ></teta-cell>\n    </ng-container>\n    <ng-container *ngIf=\"grouping\">\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #aggTemplate>\n  <ng-container *ngIf=\"locale | async as loc\">\n    <div class=\"table-row\"\n         *ngIf=\"aggregate\"\n         [class.table-row_virtual]=\"virtual\"\n         [style.flex-grow]=\"virtual ? totalFlex : ''\"\n         [style.flex-basis.px]=\"virtual ? totalWidth : ''\"\n         [style.min-width.px]=\"virtual ? totalWidth : ''\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\">\n        <div class=\"cell align-center justify-content-center\"\n             style=\"width: 28px;\">\n          <teta-icon [name]=\"'sumColor'\"></teta-icon>\n        </div>\n        <div class=\"cell cell-component justify-content-end\"\n             *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n             [attr.data-column]=\"column.name\"\n             [ngClass]=\"column.cellClass\"\n             [attr.tabindex]=\"0\"\n             [style.flex-grow]=\"column.flex\"\n             [style.flex-basis.px]=\"column.width\">\n        <span class=\"cell-text cell-text_numeric font-title-3\">\n          {{loc[getAggregateText(column)]}}:\n          {{getAggregateValue(column) | tetaNumber : 2}}\n        </span>\n        </div>\n      </div>\n      <div class=\"cell align-center justify-content-center\"\n           style=\"width: 28px;\"\n           *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n        <teta-icon [name]=\"'sumColor'\"></teta-icon>\n      </div>\n      <div class=\"cell cell-component justify-content-end\"\n           *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n           [attr.data-column]=\"column.name\"\n           [ngClass]=\"column.cellClass\"\n           [attr.tabindex]=\"0\"\n           [style.flex-grow]=\"column.flex\"\n           [style.flex-basis.px]=\"column.width\">\n      <span class=\"cell-text cell-text_numeric font-title-3\">\n        {{loc[getAggregateText(column)]}}:\n        {{getAggregateValue(column) | tetaNumber : 2}}\n      </span>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: [""], components: [{ type: i4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: SelectionCellComponent, selector: "teta-selection-cell", inputs: ["row"] }, { type: CellComponent, selector: "teta-cell", inputs: ["column", "filterOptions", "dict", "row"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i3.AsyncPipe, "tetaNumber": NumberPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TableBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-table-body', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual\"\n                             class=\"table-body-container\"\n                             [itemSize]=\"28\">\n  <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n</cdk-virtual-scroll-viewport>\n<div *ngIf=\"!virtual\"\n     class=\"table-body-container\">\n  <ng-container *ngFor=\"let row of data; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"aggregate\">\n    <ng-container *ngTemplateOutlet=\"aggTemplate;\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <div class=\"table-row\"\n       (click)=\"setActiveRow(row)\"\n       (contextmenu)=\"setActiveRow(row)\"\n       [attr.data-row]=\"rowIndex\"\n       [class.table-row_odd]=\"rowIndex % 2 === 1\"\n       [ngClass]=\"rowClass ? rowClass(row, rowIndex) : ''\"\n       [class.table-row_active]=\"row === activeRow || (selectedRows && selectedRows.indexOf(row) >= 0)\"\n       [style.flex-grow]=\"totalFlex\"\n       [style.flex-basis.px]=\"totalWidth\"\n       [style.min-width.px]=\"totalWidth\">\n    <ng-container *ngIf=\"!grouping\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\"\n           [style.zIndex]=\"row === activeRow ? 1 : 'unset'\">\n        <teta-selection-cell *ngIf=\"selectType !== selectTypeEnum.none && locked.length\"\n                             [row]=\"row\"\n                             style=\"width: 28px;\"></teta-selection-cell>\n        <teta-cell\n          *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n          [attr.data-row]=\"rowIndex\"\n          [attr.data-column]=\"column.name\"\n          [column]=\"column\"\n          [filterOptions]=\"dict?dict[column.name]:[]\"\n          [dict]=\"dict\"\n          [row]=\"row\"\n          [ngClass]=\"column.cellClass\"\n          [attr.tabindex]=\"0\"\n          [style.flex-grow]=\"column.flex\"\n          [style.flex-basis.px]=\"column.width\"\n        ></teta-cell>\n      </div>\n      <teta-selection-cell *ngIf=\"selectType !== selectTypeEnum.none && locked.length < 1\"\n                           [row]=\"row\"\n                           style=\"width: 28px;\"></teta-selection-cell>\n      <teta-cell\n        *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-column]=\"column.name\"\n        [column]=\"column\"\n        [filterOptions]=\"dict?dict[column.name]:[]\"\n        [dict]=\"dict\"\n        [row]=\"row\"\n        [ngClass]=\"column.cellClass\"\n        [attr.tabindex]=\"0\"\n        [style.flex-grow]=\"column.flex\"\n        [style.flex-basis.px]=\"column.width\"\n      ></teta-cell>\n    </ng-container>\n    <ng-container *ngIf=\"grouping\">\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #aggTemplate>\n  <ng-container *ngIf=\"locale | async as loc\">\n    <div class=\"table-row\"\n         *ngIf=\"aggregate\"\n         [class.table-row_virtual]=\"virtual\"\n         [style.flex-grow]=\"virtual ? totalFlex : ''\"\n         [style.flex-basis.px]=\"virtual ? totalWidth : ''\"\n         [style.min-width.px]=\"virtual ? totalWidth : ''\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\">\n        <div class=\"cell align-center justify-content-center\"\n             style=\"width: 28px;\">\n          <teta-icon [name]=\"'sumColor'\"></teta-icon>\n        </div>\n        <div class=\"cell cell-component justify-content-end\"\n             *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n             [attr.data-column]=\"column.name\"\n             [ngClass]=\"column.cellClass\"\n             [attr.tabindex]=\"0\"\n             [style.flex-grow]=\"column.flex\"\n             [style.flex-basis.px]=\"column.width\">\n        <span class=\"cell-text cell-text_numeric font-title-3\">\n          {{loc[getAggregateText(column)]}}:\n          {{getAggregateValue(column) | tetaNumber : 2}}\n        </span>\n        </div>\n      </div>\n      <div class=\"cell align-center justify-content-center\"\n           style=\"width: 28px;\"\n           *ngIf=\"selectType !== selectTypeEnum.none && locked.length < 1\">\n        <teta-icon [name]=\"'sumColor'\"></teta-icon>\n      </div>\n      <div class=\"cell cell-component justify-content-end\"\n           *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n           [attr.data-column]=\"column.name\"\n           [ngClass]=\"column.cellClass\"\n           [attr.tabindex]=\"0\"\n           [style.flex-grow]=\"column.flex\"\n           [style.flex-basis.px]=\"column.width\">\n      <span class=\"cell-text cell-text_numeric font-title-3\">\n        {{loc[getAggregateText(column)]}}:\n        {{getAggregateValue(column) | tetaNumber : 2}}\n      </span>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: [""] }]
+            args: [{ selector: 'teta-table-body', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual\"\n                             class=\"table-body-container\"\n                             [itemSize]=\"28\">\n  <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n</cdk-virtual-scroll-viewport>\n<div *ngIf=\"!virtual\"\n     class=\"table-body-container\">\n  <ng-container *ngFor=\"let row of data; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"aggregate\">\n    <ng-container *ngTemplateOutlet=\"aggTemplate;\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <div class=\"table-row\"\n       (click)=\"setActiveRow(row)\"\n       (contextmenu)=\"setActiveRow(row)\"\n       [attr.data-row]=\"rowIndex\"\n       [class.table-row_odd]=\"rowIndex % 2 === 1\"\n       [ngClass]=\"rowClass ? rowClass(row, rowIndex) : ''\"\n       [class.table-row_selected]=\"selectedRows && selectedRows.indexOf(row) >= 0\"\n       [style.flex-grow]=\"totalFlex\"\n       [style.flex-basis.px]=\"totalWidth\"\n       [style.min-width.px]=\"totalWidth\">\n    <ng-container *ngIf=\"!grouping\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\"\n           [style.zIndex]=\"row === activeRow ? 1 : 'unset'\">\n        <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length\"\n                             [row]=\"row\"\n                             style=\"width: 28px;\"></teta-selection-cell>\n        <teta-cell\n          *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n          [attr.data-row]=\"rowIndex\"\n          [attr.data-column]=\"column.name\"\n          [column]=\"column\"\n          [filterOptions]=\"dict?dict[column.name]:[]\"\n          [dict]=\"dict\"\n          [row]=\"row\"\n          [ngClass]=\"column.cellClass\"\n          [attr.tabindex]=\"0\"\n          [style.flex-grow]=\"column.flex\"\n          [style.flex-basis.px]=\"column.width\"\n        ></teta-cell>\n      </div>\n      <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\"\n                           [row]=\"row\"\n                           style=\"width: 28px;\"></teta-selection-cell>\n      <teta-cell\n        *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-column]=\"column.name\"\n        [column]=\"column\"\n        [filterOptions]=\"dict?dict[column.name]:[]\"\n        [dict]=\"dict\"\n        [row]=\"row\"\n        [ngClass]=\"column.cellClass\"\n        [attr.tabindex]=\"0\"\n        [style.flex-grow]=\"column.flex\"\n        [style.flex-basis.px]=\"column.width\"\n      ></teta-cell>\n    </ng-container>\n    <ng-container *ngIf=\"grouping\">\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #aggTemplate>\n  <ng-container *ngIf=\"locale | async as loc\">\n    <div class=\"table-row\"\n         *ngIf=\"aggregate\"\n         [class.table-row_virtual]=\"virtual\"\n         [style.flex-grow]=\"virtual ? totalFlex : ''\"\n         [style.flex-basis.px]=\"virtual ? totalWidth : ''\"\n         [style.min-width.px]=\"virtual ? totalWidth : ''\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\">\n        <div class=\"cell align-center justify-content-center\"\n             style=\"width: 28px;\">\n          <teta-icon [name]=\"'sumColor'\"></teta-icon>\n        </div>\n        <div class=\"cell cell-component justify-content-end\"\n             *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n             [attr.data-column]=\"column.name\"\n             [ngClass]=\"column.cellClass\"\n             [attr.tabindex]=\"0\"\n             [style.flex-grow]=\"column.flex\"\n             [style.flex-basis.px]=\"column.width\">\n        <span class=\"cell-text cell-text_numeric font-title-3\">\n          {{loc[getAggregateText(column)]}}:\n          {{getAggregateValue(column) | tetaNumber : 2}}\n        </span>\n        </div>\n      </div>\n      <div class=\"cell align-center justify-content-center\"\n           style=\"width: 28px;\"\n           *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n        <teta-icon [name]=\"'sumColor'\"></teta-icon>\n      </div>\n      <div class=\"cell cell-component justify-content-end\"\n           *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n           [attr.data-column]=\"column.name\"\n           [ngClass]=\"column.cellClass\"\n           [attr.tabindex]=\"0\"\n           [style.flex-grow]=\"column.flex\"\n           [style.flex-basis.px]=\"column.width\">\n      <span class=\"cell-text cell-text_numeric font-title-3\">\n        {{loc[getAggregateText(column)]}}:\n        {{getAggregateValue(column) | tetaNumber : 2}}\n      </span>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: TetaConfigService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { virtual: [{
                 type: Input
             }], activeRow: [{
@@ -9566,12 +9622,13 @@ class ContextMenuDirective extends DynamicContentBaseDirective {
         this._zone = _zone;
         this._cdr = _cdr;
         this._click = _click;
+        this.autoCloseIgnore = [];
     }
     get _dynamicContent() {
         return this.tetaContextMenu;
     }
     showContent(event) {
-        if (this.tetaContextMenu) {
+        if (this.tetaContextMenu && !event.defaultPrevented) {
             event.preventDefault();
             setTimeout(() => {
                 this.createMenu(event);
@@ -9585,14 +9642,32 @@ class ContextMenuDirective extends DynamicContentBaseDirective {
             event.stopPropagation();
         }
     }
-    ngOnInit() {
-        super.ngOnInit();
-        merge(this._click.click, this._click.contextMenu)
-            .pipe(takeWhile(() => this._alive), filter(() => this._open), filter(() => this._componentRef != null), filter((event) => !DomUtil.clickedInside(this._componentRef.location.nativeElement, event)), tap((_) => {
+    documentClick(event) {
+        if (this._open && this._componentRef && (!DomUtil.clickedInside(this._componentRef.location.nativeElement, event) || this.autoCloseIgnore.indexOf('inside') < 0)) {
             this.destroyContentRef();
             this.openChange.emit(false);
-        }))
-            .subscribe();
+        }
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        // merge(this._click.click, this._click.contextMenu)
+        //   .pipe(
+        //     takeWhile(() => this._alive),
+        //     filter(() => this._open),
+        //     filter(() => this._componentRef != null),
+        //     filter(
+        //       (event: MouseEvent) =>
+        //         !DomUtil.clickedInside(
+        //           this._componentRef.location.nativeElement,
+        //           event
+        //         ) || this.autoCloseIgnore.indexOf('inside') < 0
+        //     ),
+        //     tap((_) => {
+        //       this.destroyContentRef();
+        //       this.openChange.emit(false);
+        //     })
+        //   )
+        //   .subscribe();
     }
     ngOnDestroy() {
         super.ngOnDestroy();
@@ -9622,7 +9697,7 @@ class ContextMenuDirective extends DynamicContentBaseDirective {
     }
 }
 ContextMenuDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ContextMenuDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: DynamicComponentService }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: ClickService }], target: i0.ɵɵFactoryTarget.Directive });
-ContextMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: ContextMenuDirective, selector: "[tetaContextMenu]", inputs: { tetaContextMenu: "tetaContextMenu" }, host: { listeners: { "contextmenu": "showContent($event)", "click": "click($event)" } }, usesInheritance: true, ngImport: i0 });
+ContextMenuDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: ContextMenuDirective, selector: "[tetaContextMenu]", inputs: { tetaContextMenu: "tetaContextMenu", autoCloseIgnore: "autoCloseIgnore" }, host: { listeners: { "contextmenu": "showContent($event)", "click": "click($event)", "document:click": "documentClick($event)", "document:contextmenu": "documentClick($event)" } }, usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ContextMenuDirective, decorators: [{
             type: Directive,
             args: [{
@@ -9633,12 +9708,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                     args: [DOCUMENT]
                 }] }, { type: i0.ElementRef }, { type: DynamicComponentService }, { type: i0.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: ClickService }]; }, propDecorators: { tetaContextMenu: [{
                 type: Input
+            }], autoCloseIgnore: [{
+                type: Input
             }], showContent: [{
                 type: HostListener,
                 args: ['contextmenu', ['$event']]
             }], click: [{
                 type: HostListener,
                 args: ['click', ['$event']]
+            }], documentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['document:contextmenu', ['$event']]
             }] } });
 
 class TableComponent {
@@ -9647,7 +9730,7 @@ class TableComponent {
         this._elementRef = _elementRef;
         this.data = [];
         this.columns = [];
-        this.selectType = SelectType.multiple;
+        this.selectType = SelectType.mouse;
         this.groupRowComponent = GroupRowComponent;
         this.trackRow = (index, row) => index;
         this.editType = EditType.cell;
@@ -9731,9 +9814,12 @@ class TableComponent {
             if (event.ctrlKey) {
                 this._svc.selectOrDeselectRow(row);
             }
-            if (event.shiftKey) {
+            else if (event.shiftKey) {
                 this._svc.selectRange(row);
             }
+            else {
+                this._svc.selectRows([row]);
+            }
         }
         if (!this.eventIsOnRow(event) && !event.defaultPrevented) {
             if (this.editType === EditType.row) {
@@ -9960,7 +10046,7 @@ class TableComponent {
     }
 }
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TableComponent, deps: [{ token: TableService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TableComponent, selector: "teta-table", inputs: { data: "data", columns: "columns", dict: "dict", filterOptions: "filterOptions", state: "state", cookieName: "cookieName", virtual: "virtual", detailComponent: "detailComponent", activeRow: "activeRow", selectedRows: "selectedRows", selectType: "selectType", aggregate: "aggregate", grouping: "grouping", groupRowComponent: "groupRowComponent", openLevels: "openLevels", tree: "tree", trackRow: "trackRow", editType: "editType", editEvent: "editEvent", rowEditable: "rowEditable", rowClass: "rowClass", scrollToIndex: "scrollToIndex", showHeadCellMenu: "showHeadCellMenu", contextMenu: "contextMenu", contextMenuOpen: "contextMenuOpen" }, outputs: { contextMenuOpenChange: "contextMenuOpenChange", stateChange: "stateChange", bodyLeft: "bodyLeft", activeRowChange: "activeRowChange", selectedRowsChange: "selectedRowsChange", cellClick: "cellClick", cellDoubleClick: "cellDoubleClick", cellFocus: "cellFocus", cellKeyDown: "cellKeyDown", rowLeft: "rowLeft", rowEditStart: "rowEditStart", rowEditEnd: "rowEditEnd", cellEditStart: "cellEditStart", cellEditEnd: "cellEditEnd", valueChange: "valueChange", tableService: "tableService" }, host: { listeners: { "document:click": "handleClickOutsideAnyRow($event)", "focusin": "focusIn($event)", "dblclick": "dblclick($event)", "keydown": "keydown($event)", "mousedown": "mousedown($event)" }, properties: { "class.table": "this.tableClass" } }, providers: [TableService], viewQueries: [{ propertyName: "menu", first: true, predicate: ["contextMenu"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"column column_auto\">\n  <teta-table-head\n    [selectType]=\"selectType\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n  <teta-table-body\n    [tetaContextMenu]=\"contextMenu\"\n    [open]=\"contextMenuOpen\"\n    (openChange)=\"setContextMenuOpen($event)\"\n    [aggregate]=\"aggregate\"\n    [virtual]=\"virtual\"\n    [activeRow]=\"activeRow\"\n    [selectedRows]=\"selectedRowsList\"\n    [additionalComponent]=\"detailComponent\"\n    [grouping]=\"grouping\"\n    [groupRowComponent]=\"groupRowComponent\"\n    [openLevels]=\"openLevels\"\n    [selectType]=\"selectType\"\n    [rowClass]=\"rowClass\"\n    [tree]=\"tree\"></teta-table-body>\n</div>\n", styles: [""], components: [{ type: TableHeadComponent, selector: "teta-table-head", inputs: ["selectType", "showHeadCellMenu"] }, { type: TableBodyComponent, selector: "teta-table-body", inputs: ["virtual", "activeRow", "selectedRows", "additionalComponent", "tree", "aggregate", "grouping", "groupRowComponent", "openLevels", "selectType", "rowClass"] }], directives: [{ type: ContextMenuDirective, selector: "[tetaContextMenu]", inputs: ["tetaContextMenu"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: TableComponent, selector: "teta-table", inputs: { data: "data", columns: "columns", dict: "dict", filterOptions: "filterOptions", state: "state", cookieName: "cookieName", virtual: "virtual", detailComponent: "detailComponent", activeRow: "activeRow", selectedRows: "selectedRows", selectType: "selectType", aggregate: "aggregate", grouping: "grouping", groupRowComponent: "groupRowComponent", openLevels: "openLevels", tree: "tree", trackRow: "trackRow", editType: "editType", editEvent: "editEvent", rowEditable: "rowEditable", rowClass: "rowClass", scrollToIndex: "scrollToIndex", showHeadCellMenu: "showHeadCellMenu", contextMenu: "contextMenu", contextMenuOpen: "contextMenuOpen" }, outputs: { contextMenuOpenChange: "contextMenuOpenChange", stateChange: "stateChange", bodyLeft: "bodyLeft", activeRowChange: "activeRowChange", selectedRowsChange: "selectedRowsChange", cellClick: "cellClick", cellDoubleClick: "cellDoubleClick", cellFocus: "cellFocus", cellKeyDown: "cellKeyDown", rowLeft: "rowLeft", rowEditStart: "rowEditStart", rowEditEnd: "rowEditEnd", cellEditStart: "cellEditStart", cellEditEnd: "cellEditEnd", valueChange: "valueChange", tableService: "tableService" }, host: { listeners: { "document:click": "handleClickOutsideAnyRow($event)", "focusin": "focusIn($event)", "dblclick": "dblclick($event)", "keydown": "keydown($event)", "mousedown": "mousedown($event)" }, properties: { "class.table": "this.tableClass" } }, providers: [TableService], viewQueries: [{ propertyName: "menu", first: true, predicate: ["contextMenu"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"column column_auto\">\n  <teta-table-head\n    [selectType]=\"selectType\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n  <teta-table-body\n    [tetaContextMenu]=\"contextMenu\"\n    [open]=\"contextMenuOpen\"\n    (openChange)=\"setContextMenuOpen($event)\"\n    [aggregate]=\"aggregate\"\n    [virtual]=\"virtual\"\n    [activeRow]=\"activeRow\"\n    [selectedRows]=\"selectedRowsList\"\n    [additionalComponent]=\"detailComponent\"\n    [grouping]=\"grouping\"\n    [groupRowComponent]=\"groupRowComponent\"\n    [openLevels]=\"openLevels\"\n    [selectType]=\"selectType\"\n    [rowClass]=\"rowClass\"\n    [tree]=\"tree\"></teta-table-body>\n</div>\n", styles: [""], components: [{ type: TableHeadComponent, selector: "teta-table-head", inputs: ["selectType", "showHeadCellMenu"] }, { type: TableBodyComponent, selector: "teta-table-body", inputs: ["virtual", "activeRow", "selectedRows", "additionalComponent", "tree", "aggregate", "grouping", "groupRowComponent", "openLevels", "selectType", "rowClass"] }], directives: [{ type: ContextMenuDirective, selector: "[tetaContextMenu]", inputs: ["tetaContextMenu", "autoCloseIgnore"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableService], template: "<div class=\"column column_auto\">\n  <teta-table-head\n    [selectType]=\"selectType\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n  <teta-table-body\n    [tetaContextMenu]=\"contextMenu\"\n    [open]=\"contextMenuOpen\"\n    (openChange)=\"setContextMenuOpen($event)\"\n    [aggregate]=\"aggregate\"\n    [virtual]=\"virtual\"\n    [activeRow]=\"activeRow\"\n    [selectedRows]=\"selectedRowsList\"\n    [additionalComponent]=\"detailComponent\"\n    [grouping]=\"grouping\"\n    [groupRowComponent]=\"groupRowComponent\"\n    [openLevels]=\"openLevels\"\n    [selectType]=\"selectType\"\n    [rowClass]=\"rowClass\"\n    [tree]=\"tree\"></teta-table-body>\n</div>\n", styles: [""] }]
@@ -10396,10 +10482,10 @@ class ThemeSwitchComponent {
     }
 }
 ThemeSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ThemeSwitchComponent, deps: [{ token: ThemeSwitchService }], target: i0.ɵɵFactoryTarget.Component });
-ThemeSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ThemeSwitchComponent, selector: "teta-theme-switch", inputs: { palette: "palette", view: "view" }, ngImport: i0, template: "<button teta-button [palette]=\"palette\" [view]=\"view\" [square]=\"true\" (click)=\"switchTheme()\">\n  <teta-icon [name]=\"'lamp'\" [palette]=\"'text'\"></teta-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}\n"], components: [{ type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ThemeSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ThemeSwitchComponent, selector: "teta-theme-switch", inputs: { palette: "palette", view: "view" }, ngImport: i0, template: "<button teta-button [palette]=\"palette\" [view]=\"view\" [square]=\"true\" (click)=\"switchTheme()\">\n  <teta-icon [name]=\"'lamp'\"></teta-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}\n"], components: [{ type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ThemeSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-theme-switch', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button teta-button [palette]=\"palette\" [view]=\"view\" [square]=\"true\" (click)=\"switchTheme()\">\n  <teta-icon [name]=\"'lamp'\" [palette]=\"'text'\"></teta-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'teta-theme-switch', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button teta-button [palette]=\"palette\" [view]=\"view\" [square]=\"true\" (click)=\"switchTheme()\">\n  <teta-icon [name]=\"'lamp'\"></teta-icon>\n</button>\n", styles: [":host{display:flex;align-items:center}\n"] }]
         }], ctorParameters: function () { return [{ type: ThemeSwitchService }]; }, propDecorators: { palette: [{
                 type: Input
             }], view: [{
@@ -10683,70 +10769,660 @@ class Chart3dOptions {
     }
 }
 
-/* accordion */
-
-class DisableControlDirective {
-    constructor(ngControl) {
-        this.ngControl = ngControl;
+class ResizePanelComponent {
+    constructor(_elementRef, _renderer, _document) {
+        this._elementRef = _elementRef;
+        this._renderer = _renderer;
+        this._document = _document;
+        this.resizePanelClass = true;
+        this._direction = 'horizontal';
+        this._grabPosition = 'left';
+        this._positionMap = new Map()
+            .set('left', 'resize-grab_left')
+            .set('right', 'resize-grab_right')
+            .set('top', 'resize-grab_top')
+            .set('bottom', 'resize-grab_bottom');
     }
-    set tetaDisableControl(val) {
-        if (this.ngControl.control) {
-            if (val) {
-                this.ngControl.control.disable();
-            }
-            else {
-                this.ngControl.control.enable();
-            }
-        }
+    set direction(val) {
+        this._direction = val;
     }
-}
-DisableControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DisableControlDirective, deps: [{ token: i3$1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
-DisableControlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: DisableControlDirective, selector: "[tetaDisableControl]", inputs: { tetaDisableControl: "tetaDisableControl" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DisableControlDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tetaDisableControl]'
-                }]
-        }], ctorParameters: function () { return [{ type: i3$1.NgControl }]; }, propDecorators: { tetaDisableControl: [{
-                type: Input
-            }] } });
-
-class DisableControlModule {
-}
-DisableControlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DisableControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DisableControlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DisableControlModule, declarations: [DisableControlDirective], imports: [CommonModule], exports: [DisableControlDirective] });
-DisableControlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DisableControlModule, imports: [[
-            CommonModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DisableControlModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [DisableControlDirective],
-                    imports: [
-                        CommonModule
-                    ],
-                    exports: [
-                        DisableControlDirective
-                    ]
-                }]
-        }] });
-
-// import {DragSortItemDirective} from './drag-sort-item.directive';
-class DragSortContainerDirective {
-    constructor() {
-        this.dragSorted = new EventEmitter();
+    get direction() {
+        return this._direction;
     }
-    drop(event) {
-        event.stopPropagation();
-        event.preventDefault();
+    get icon() {
+        return this.direction === "horizontal" ? 'moreHorizontal' : 'moreVertical';
     }
-    setDragItem(item) {
-        this._dragItem = item;
+    set grabPosition(val) {
+        this._grabPosition = val;
     }
-    getDragItem() {
-        return this._dragItem;
+    get grabPosition() {
+        if (this.direction === 'vertical') {
+            if (['left', 'right'].includes(this._grabPosition)) {
+                return this._grabPosition;
+            }
+            return 'left';
+        }
+        if (['top', 'bottom'].includes(this._grabPosition)) {
+            return this._grabPosition;
+        }
+        return 'bottom';
     }
-    getList() {
+    resizeStart(event) {
+        this.setStartPosition();
+        if (this.direction === 'vertical') {
+            this._startSize = this._elementRef.nativeElement.clientWidth;
+            this._startPosition = event.clientX;
+        }
+        else {
+            this._startSize = this._elementRef.nativeElement.clientHeight;
+            this._startPosition = event.clientY;
+        }
+    }
+    resizeProcess(event) {
+        event.preventDefault();
+        if (this.direction === 'vertical') {
+            this.manageVertical(event);
+        }
+        else {
+            this.manageHorizontal(event);
+        }
+    }
+    resizeEnd(event) {
+        window.dispatchEvent(new Event('resize'));
+    }
+    ngOnInit() {
+        this.restorePosition();
+    }
+    ngOnDestroy() {
+    }
+    getClassName() {
+        return this._positionMap.get(this.grabPosition) || '';
+    }
+    setStartPosition() {
+        if (this.direction === 'vertical') {
+            this._renderer.setStyle(this._elementRef.nativeElement, 'width', `${this._elementRef.nativeElement.offsetWidth}px`);
+        }
+        else {
+            this._renderer.setStyle(this._elementRef.nativeElement, 'height', `${this._elementRef.nativeElement.offsetHeight}px`);
+        }
+        this._renderer.setStyle(this._elementRef.nativeElement, 'flex-grow', `0`);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'flex-shrink', `0`);
+        this._renderer.setStyle(this._elementRef.nativeElement, 'flex', `none`);
+    }
+    manageHorizontal(event) {
+        let newSize = this.grabPosition === 'bottom'
+            ? this._startSize + (event.clientY - this._startPosition)
+            : this._startSize - (event.clientY - this._startPosition);
+        if (this.maxSize && newSize > this.maxSize) {
+            newSize = this.maxSize;
+        }
+        if (this.minSize && newSize < this.minSize) {
+            newSize = this.minSize;
+        }
+        this._renderer.setStyle(this._elementRef.nativeElement, 'height', `${newSize}px`);
+        this.save();
+    }
+    manageVertical(event) {
+        let newSize = this.grabPosition === 'right'
+            ? this._startSize + (event.clientX - this._startPosition)
+            : this._startSize - (event.clientX - this._startPosition);
+        if (this.maxSize && newSize > this.maxSize) {
+            newSize = this.maxSize;
+        }
+        if (this.minSize && newSize < this.minSize) {
+            newSize = this.minSize;
+        }
+        this._renderer.setStyle(this._elementRef.nativeElement, 'width', `${newSize}px`);
+        this.save();
+    }
+    restore() {
+        if (this.name?.length > 0) {
+            return JSON.parse(localStorage.getItem(`resize-panel${this.name}`));
+        }
+    }
+    restorePosition() {
+        const savedSize = this.restore();
+        if (savedSize) {
+            if (this.direction === 'vertical') {
+                this._renderer.setStyle(this._elementRef.nativeElement, 'width', `${savedSize}px`);
+            }
+            else {
+                this._renderer.setStyle(this._elementRef.nativeElement, 'height', `${savedSize}px`);
+            }
+            this._renderer.setStyle(this._elementRef.nativeElement, 'flex-grow', `0`);
+            this._renderer.setStyle(this._elementRef.nativeElement, 'flex-shrink', `0`);
+            this._renderer.setStyle(this._elementRef.nativeElement, 'flex', `none`);
+        }
+    }
+    save() {
+        if (this.name?.length > 0) {
+            if (this.direction === 'vertical') {
+                localStorage.setItem(`resize-panel${this.name}`, this._elementRef.nativeElement.clientWidth);
+            }
+            else {
+                localStorage.setItem(`resize-panel${this.name}`, this._elementRef.nativeElement.clientHeight);
+            }
+        }
+    }
+}
+ResizePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ResizePanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+ResizePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ResizePanelComponent, selector: "teta-resize-panel", inputs: { direction: "direction", grabPosition: "grabPosition", name: "name", minSize: "minSize", maxSize: "maxSize" }, host: { properties: { "class.resize-panel": "this.resizePanelClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n<div #grab class=\"resize-grab\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd($event)\"\n     [tetaResizeDrag]=\"direction\"\n     [ngClass]=\"getClassName()\">\n\n  <teta-icon [name]=\"icon\"></teta-icon>\n</div>\n", styles: [""], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: ResizeDragDirective, selector: "[tetaResizeDrag]", inputs: ["tetaResizeDrag"], outputs: ["resizeStart", "resizeProcess", "resizeEnd"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ResizePanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-resize-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div #grab class=\"resize-grab\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd($event)\"\n     [tetaResizeDrag]=\"direction\"\n     [ngClass]=\"getClassName()\">\n\n  <teta-icon [name]=\"icon\"></teta-icon>\n</div>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; }, propDecorators: { direction: [{
+                type: Input
+            }], grabPosition: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], minSize: [{
+                type: Input
+            }], maxSize: [{
+                type: Input
+            }], resizePanelClass: [{
+                type: HostBinding,
+                args: ['class.resize-panel']
+            }] } });
+
+class ResizePanelModule {
+}
+ResizePanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ResizePanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ResizePanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ResizePanelModule, declarations: [ResizePanelComponent], imports: [CommonModule, IconModule, ResizeDragModule], exports: [ResizePanelComponent] });
+ResizePanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ResizePanelModule, imports: [[CommonModule, IconModule, ResizeDragModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ResizePanelModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ResizePanelComponent],
+                    exports: [ResizePanelComponent],
+                    imports: [CommonModule, IconModule, ResizeDragModule],
+                }]
+        }] });
+
+/* accordion */
+
+class DisableControlDirective {
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+    }
+    set tetaDisableControl(val) {
+        if (this.ngControl.control) {
+            if (val) {
+                this.ngControl.control.disable();
+            }
+            else {
+                this.ngControl.control.enable();
+            }
+        }
+    }
+}
+DisableControlDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DisableControlDirective, deps: [{ token: i3$1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+DisableControlDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: DisableControlDirective, selector: "[tetaDisableControl]", inputs: { tetaDisableControl: "tetaDisableControl" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DisableControlDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaDisableControl]'
+                }]
+        }], ctorParameters: function () { return [{ type: i3$1.NgControl }]; }, propDecorators: { tetaDisableControl: [{
+                type: Input
+            }] } });
+
+class DisableControlModule {
+}
+DisableControlModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DisableControlModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DisableControlModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DisableControlModule, declarations: [DisableControlDirective], imports: [CommonModule], exports: [DisableControlDirective] });
+DisableControlModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DisableControlModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DisableControlModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DisableControlDirective],
+                    imports: [
+                        CommonModule
+                    ],
+                    exports: [
+                        DisableControlDirective
+                    ]
+                }]
+        }] });
+
+class DragInstance {
+    constructor(options) {
+        this.container = options.container;
+        this.data = options.data;
+    }
+}
+
+class DragPreviewDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+DragPreviewDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DragPreviewDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+DragPreviewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: DragPreviewDirective, selector: "[tetaDragPreview]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DragPreviewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaDragPreview]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
+class DragContainerInstance {
+    constructor(options) {
+        this.data = options.data;
+        this.previewTemplate = options.previewTemplate;
+        this.viewContainer = options.viewContainer;
+    }
+}
+
+class DragDropService {
+    constructor(_document, _rendererFactory) {
+        this._document = _document;
+        this._rendererFactory = _rendererFactory;
+        this.dropTarget$ = new BehaviorSubject(null);
+        this._delta = 10;
+        this.dropped$ = new Subject();
+        this._renderer = this._rendererFactory.createRenderer(null, null);
+        this.dropTarget = this.dropTarget$.asObservable();
+        this.dropped = this.dropped$.asObservable();
+        merge(fromEvent(this._document, 'mousemove'), fromEvent(this._document, 'touchmove')).pipe(filter(() => {
+            return this.startPosition != null;
+        })).subscribe((event) => {
+            if (!this.dragProcess && this.getDelta(event) > this._delta) {
+                this.startProcess();
+            }
+            if (this.dragProcess && this._preview) {
+                this.movePreview(event);
+            }
+        });
+        merge(fromEvent(this._document, 'mouseup'), fromEvent(this._document, 'touchend')).pipe(withLatestFrom(this.dropTarget)).subscribe((data) => {
+            const [event, target] = data;
+            if (target) {
+                this.dropped$.next({
+                    target,
+                    container: this.dragProcess.selection.container,
+                    data: [...this.dragProcess.selection.items]
+                });
+                this.cancelDrag();
+            }
+            this.stopProcess();
+        });
+        merge(fromEvent(this._document, 'visibilitychange'), fromEvent(window, 'blur'))
+            .subscribe(() => {
+            this.cancelDrag();
+        });
+    }
+    setDropTarget(target) {
+        if (this.dragProcess) {
+            this.dropTarget$.next(target);
+        }
+    }
+    setStartPosition(point) {
+        this.startPosition = point;
+    }
+    setSelection(instance, container) {
+        if (this.selection?.container === container && this.selection?.items?.indexOf(instance) >= 0) {
+            return;
+        }
+        this.selection = {
+            container,
+            items: [instance]
+        };
+    }
+    addSelection(instance, container) {
+        if (!this.selection) {
+            this.setSelection(instance, container);
+            return;
+        }
+        if (this.selection && this.selection.container !== container) {
+            return;
+        }
+        const index = this.selection.items.indexOf(instance);
+        if (index < 0) {
+            this.selection.items.push(instance);
+        }
+        else {
+            this.selection.items.splice(index, 1);
+        }
+    }
+    clearSelection() {
+        this.selection = null;
+    }
+    cancelDrag() {
+        this.setDropTarget(null);
+        this.clearSelection();
+        this.stopProcess();
+    }
+    startProcess() {
+        this.dragProcess = {
+            selection: this.selection
+        };
+        this._preview = this.createPreview();
+    }
+    stopProcess() {
+        this.destroyPreview();
+        this.dragProcess = null;
+        this.startPosition = null;
+    }
+    getDelta(event) {
+        return Math.max(Math.abs(this.startPosition.x - event.x), Math.abs(this.startPosition.y - event.y));
+    }
+    createPreview() {
+        if (this.dragProcess.selection.container.previewTemplate) {
+            this._previewRef = this.dragProcess.selection.container.viewContainer.createEmbeddedView(this.dragProcess.selection.container.previewTemplate, {
+                $implicit: this.dragProcess.selection.items,
+                data: this.dragProcess.selection.items
+            });
+            const preview = this._renderer.createElement('div');
+            this._renderer.setStyle(preview, 'position', 'fixed');
+            this._renderer.setStyle(preview, 'pointer-events', 'none');
+            this._renderer.setStyle(preview, 'top', '0');
+            this._renderer.setStyle(preview, 'left', '0');
+            this._renderer.appendChild(preview, this._previewRef.rootNodes[0]);
+            this._renderer.appendChild(document.body, preview);
+            return preview;
+        }
+        return null;
+    }
+    movePreview(event) {
+        if (this._preview) {
+            this._renderer.setStyle(this._preview, 'transform', `translate(${event.x}px, ${event.y}px)`);
+        }
+    }
+    destroyPreview() {
+        if (this._preview) {
+            this.dragProcess?.selection?.container?.viewContainer?.clear();
+            this._preview?.remove();
+            this._previewRef?.destroy();
+            this._preview = this._previewRef = null;
+        }
+    }
+}
+DragDropService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DragDropService, deps: [{ token: DOCUMENT }, { token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
+DragDropService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DragDropService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DragDropService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.RendererFactory2 }]; } });
+
+class DragContainerDirective {
+    constructor(_dragService, _elementRef, _viewContainerRef, _zone, _cdr) {
+        this._dragService = _dragService;
+        this._elementRef = _elementRef;
+        this._viewContainerRef = _viewContainerRef;
+        this._zone = _zone;
+        this._cdr = _cdr;
+        this.multiple = false;
+        this.allowDrop = true;
+        this.tetaDrop = new EventEmitter();
+        this.tetaDragEnter = new EventEmitter();
+        this._alive = true;
+    }
+    get isDropTarget() {
+        return this.dropTarget === this.instance;
+    }
+    mouseleave(event) {
+        this._dragService.setDropTarget(null);
+    }
+    mouseover(event) {
+        if (this.allowDrop) {
+            this._dragService.setDropTarget(this.instance);
+        }
+    }
+    escape(event) {
+        this._dragService.cancelDrag();
+    }
+    ngOnInit() {
+        this.instance = new DragContainerInstance({
+            data: this.data,
+            previewTemplate: this._previewTemplate?.templateRef,
+            viewContainer: this._viewContainerRef
+        });
+        this._dragService.dropTarget.pipe(takeWhile(() => this._alive))
+            .subscribe((target) => {
+            this.dropTarget = target;
+            this._cdr.detectChanges();
+        });
+        this._dragService.dropped.pipe(takeWhile(() => this._alive))
+            .subscribe((event) => {
+            this.tetaDrop.emit(event);
+        });
+    }
+    ngOnDestroy() {
+        this._alive = false;
+    }
+}
+DragContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DragContainerDirective, deps: [{ token: DragDropService }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+DragContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: DragContainerDirective, selector: "[tetaDragContainer]", inputs: { data: ["tetaDragContainer", "data"], multiple: "multiple", allowDrop: "allowDrop" }, outputs: { tetaDrop: "tetaDrop", tetaDragEnter: "tetaDragEnter" }, host: { listeners: { "mouseleave": "mouseleave($event)", "mouseover": "mouseover($event)", "window:keydown.escape": "escape($event)" }, properties: { "class.teta-drag-container": "\"true\"", "class.teta-drop-target": "isDropTarget" } }, queries: [{ propertyName: "_previewTemplate", first: true, predicate: DragPreviewDirective, descendants: true, static: true }], exportAs: ["dragContainer"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DragContainerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaDragContainer]',
+                    exportAs: 'dragContainer',
+                    host: {
+                        '[class.teta-drag-container]': '"true"',
+                        '[class.teta-drop-target]': 'isDropTarget'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: DragDropService }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['tetaDragContainer']
+            }], multiple: [{
+                type: Input
+            }], allowDrop: [{
+                type: Input
+            }], tetaDrop: [{
+                type: Output
+            }], tetaDragEnter: [{
+                type: Output
+            }], _previewTemplate: [{
+                type: ContentChild,
+                args: [DragPreviewDirective, {
+                        static: true
+                    }]
+            }], mouseleave: [{
+                type: HostListener,
+                args: ['mouseleave', ['$event']]
+            }], mouseover: [{
+                type: HostListener,
+                args: ['mouseover', ['$event']]
+            }], escape: [{
+                type: HostListener,
+                args: ['window:keydown.escape', ['$event']]
+            }] } });
+
+class DragDirective {
+    constructor(_container, _dragService, _zone, _cdr) {
+        this._container = _container;
+        this._dragService = _dragService;
+        this._zone = _zone;
+        this._cdr = _cdr;
+        this.allowDrag = true;
+        this.allowDrop = true;
+        this.tetaDragEnter = new EventEmitter();
+        this.tetaDrop = new EventEmitter();
+        this._alive = true;
+    }
+    get selection() {
+        return this._dragService?.selection?.items?.indexOf(this.instance) >= 0;
+    }
+    get isDropTarget() {
+        return this.dropTarget === this.instance;
+    }
+    mousedown(event) {
+        if (event.ctrlKey && this._container?.multiple) {
+            this._dragService.addSelection(this.instance, this._container.instance);
+        }
+        else {
+            this._dragService.setSelection(this.instance, this._container.instance);
+        }
+        this._dragService.setStartPosition({
+            x: event.x,
+            y: event.y
+        });
+    }
+    mouseenter(event) {
+        if (this.allowDrop) {
+            event.stopPropagation();
+            this._dragService.setDropTarget(this.instance);
+        }
+    }
+    mouseleave(event) {
+        this._dragService.setDropTarget(null);
+    }
+    ngOnInit() {
+        this.instance = new DragInstance({
+            container: this._container.instance,
+            data: this.data
+        });
+        this._dragService.dropTarget.pipe(takeWhile(() => this._alive))
+            .subscribe((target) => {
+            this.dropTarget = target;
+            if (target === this.instance) {
+                this.tetaDragEnter.emit(this.instance);
+            }
+            this._cdr.detectChanges();
+            this._cdr.markForCheck();
+        });
+        this._dragService.dropped.pipe(takeWhile(() => this._alive))
+            .pipe(filter((event) => {
+            return event.target === this.instance;
+        }))
+            .subscribe((event) => {
+            this.tetaDrop.emit(event);
+        });
+    }
+    ngOnDestroy() {
+        this._alive = false;
+    }
+}
+DragDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DragDirective, deps: [{ token: DragContainerDirective, optional: true, skipSelf: true }, { token: DragDropService }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+DragDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: DragDirective, selector: "[tetaDrag]", inputs: { data: ["tetaDrag", "data"], allowDrag: "allowDrag", allowDrop: "allowDrop" }, outputs: { tetaDragEnter: "tetaDragEnter", tetaDrop: "tetaDrop" }, host: { listeners: { "mousedown": "mousedown($event)", "touchstart": "mousedown($event)", "mouseenter": "mouseenter($event)", "mouseleave": "mouseleave($event)" }, properties: { "style.userSelect": "\"none\"", "class.teta-drag-item": "\"true\"", "class.teta_draggable_item": "this.allowDrag", "class.teta_droppable_item": "this.allowDrop", "class.teta-drag-selection": "this.selection", "class.teta-drop-target": "this.isDropTarget" } }, exportAs: ["drag"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DragDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaDrag]',
+                    exportAs: 'drag',
+                    host: {
+                        '[style.userSelect]': '"none"',
+                        '[class.teta-drag-item]': '"true"'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: DragContainerDirective, decorators: [{
+                    type: Inject,
+                    args: [DragContainerDirective]
+                }, {
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }, { type: DragDropService }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input,
+                args: ['tetaDrag']
+            }], allowDrag: [{
+                type: HostBinding,
+                args: ['class.teta_draggable_item']
+            }, {
+                type: Input
+            }], allowDrop: [{
+                type: HostBinding,
+                args: ['class.teta_droppable_item']
+            }, {
+                type: Input
+            }], tetaDragEnter: [{
+                type: Output
+            }], tetaDrop: [{
+                type: Output
+            }], selection: [{
+                type: HostBinding,
+                args: ['class.teta-drag-selection']
+            }], isDropTarget: [{
+                type: HostBinding,
+                args: ['class.teta-drop-target']
+            }], mousedown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }, {
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }], mouseenter: [{
+                type: HostListener,
+                args: ['mouseenter', ['$event']]
+            }], mouseleave: [{
+                type: HostListener,
+                args: ['mouseleave', ['$event']]
+            }] } });
+
+class DragPlaceholderDirective {
+    constructor() { }
+}
+DragPlaceholderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DragPlaceholderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+DragPlaceholderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: DragPlaceholderDirective, selector: "[tetaDragPlaceholder]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DragPlaceholderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaDragPlaceholder]'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class DragDropModule {
+}
+DragDropModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DragDropModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DragDropModule, declarations: [DragContainerDirective,
+        DragDirective,
+        DragPreviewDirective,
+        DragPlaceholderDirective], imports: [CommonModule], exports: [DragContainerDirective,
+        DragDirective,
+        DragPreviewDirective,
+        DragPlaceholderDirective] });
+DragDropModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DragDropModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DragDropModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        DragContainerDirective,
+                        DragDirective,
+                        DragPreviewDirective,
+                        DragPlaceholderDirective
+                    ],
+                    exports: [
+                        DragContainerDirective,
+                        DragDirective,
+                        DragPreviewDirective,
+                        DragPlaceholderDirective
+                    ],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
+// import {DragSortItemDirective} from './drag-sort-item.directive';
+class DragSortContainerDirective {
+    constructor() {
+        this.dragSorted = new EventEmitter();
+    }
+    drop(event) {
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    setDragItem(item) {
+        this._dragItem = item;
+    }
+    getDragItem() {
+        return this._dragItem;
+    }
+    getList() {
         return this.dragSortList;
     }
     setList(list) {
@@ -11006,176 +11682,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 }]
         }] });
 
-class ResizePanelComponent {
-    constructor(_elementRef, _renderer, _document) {
-        this._elementRef = _elementRef;
-        this._renderer = _renderer;
-        this._document = _document;
-        this.resizePanelClass = true;
-        this._direction = 'horizontal';
-        this._grabPosition = 'left';
-        this._positionMap = new Map()
-            .set('left', 'resize-grab_left')
-            .set('right', 'resize-grab_right')
-            .set('top', 'resize-grab_top')
-            .set('bottom', 'resize-grab_bottom');
-    }
-    set direction(val) {
-        this._direction = val;
-    }
-    get direction() {
-        return this._direction;
-    }
-    set grabPosition(val) {
-        this._grabPosition = val;
-    }
-    get grabPosition() {
-        if (this.direction === 'vertical') {
-            if (['left', 'right'].includes(this._grabPosition)) {
-                return this._grabPosition;
-            }
-            return 'left';
-        }
-        if (['top', 'bottom'].includes(this._grabPosition)) {
-            return this._grabPosition;
-        }
-        return 'bottom';
-    }
-    resizeStart(event) {
-        this.setStartPosition();
-        if (this.direction === 'vertical') {
-            this._startSize = this._elementRef.nativeElement.clientWidth;
-            this._startPosition = event.clientX;
-        }
-        else {
-            this._startSize = this._elementRef.nativeElement.clientHeight;
-            this._startPosition = event.clientY;
-        }
-    }
-    resizeProcess(event) {
-        event.preventDefault();
-        if (this.direction === 'vertical') {
-            this.manageVertical(event);
-        }
-        else {
-            this.manageHorizontal(event);
-        }
-    }
-    resizeEnd(event) {
-        window.dispatchEvent(new Event('resize'));
-    }
-    ngOnInit() {
-        this.restorePosition();
-    }
-    ngOnDestroy() {
-    }
-    getClassName() {
-        return this._positionMap.get(this.grabPosition) || '';
-    }
-    setStartPosition() {
-        if (this.direction === 'vertical') {
-            this._renderer.setStyle(this._elementRef.nativeElement, 'width', `${this._elementRef.nativeElement.offsetWidth}px`);
-        }
-        else {
-            this._renderer.setStyle(this._elementRef.nativeElement, 'height', `${this._elementRef.nativeElement.offsetHeight}px`);
-        }
-        this._renderer.setStyle(this._elementRef.nativeElement, 'flex-grow', `0`);
-        this._renderer.setStyle(this._elementRef.nativeElement, 'flex-shrink', `0`);
-        this._renderer.setStyle(this._elementRef.nativeElement, 'flex', `none`);
-    }
-    manageHorizontal(event) {
-        let newSize = this.grabPosition === 'bottom'
-            ? this._startSize + (event.clientY - this._startPosition)
-            : this._startSize - (event.clientY - this._startPosition);
-        if (this.maxSize && newSize > this.maxSize) {
-            newSize = this.maxSize;
-        }
-        if (this.minSize && newSize < this.minSize) {
-            newSize = this.minSize;
-        }
-        this._renderer.setStyle(this._elementRef.nativeElement, 'height', `${newSize}px`);
-        this.save();
-    }
-    manageVertical(event) {
-        let newSize = this.grabPosition === 'right'
-            ? this._startSize + (event.clientX - this._startPosition)
-            : this._startSize - (event.clientX - this._startPosition);
-        if (this.maxSize && newSize > this.maxSize) {
-            newSize = this.maxSize;
-        }
-        if (this.minSize && newSize < this.minSize) {
-            newSize = this.minSize;
-        }
-        this._renderer.setStyle(this._elementRef.nativeElement, 'width', `${newSize}px`);
-        this.save();
-    }
-    restore() {
-        if (this.name?.length > 0) {
-            return JSON.parse(localStorage.getItem(`resize-panel${this.name}`));
-        }
-    }
-    restorePosition() {
-        const savedSize = this.restore();
-        if (savedSize) {
-            if (this.direction === 'vertical') {
-                this._renderer.setStyle(this._elementRef.nativeElement, 'width', `${savedSize}px`);
-            }
-            else {
-                this._renderer.setStyle(this._elementRef.nativeElement, 'height', `${savedSize}px`);
-            }
-            this._renderer.setStyle(this._elementRef.nativeElement, 'flex-grow', `0`);
-            this._renderer.setStyle(this._elementRef.nativeElement, 'flex-shrink', `0`);
-            this._renderer.setStyle(this._elementRef.nativeElement, 'flex', `none`);
-        }
-    }
-    save() {
-        if (this.name?.length > 0) {
-            if (this.direction === 'vertical') {
-                localStorage.setItem(`resize-panel${this.name}`, this._elementRef.nativeElement.clientWidth);
-            }
-            else {
-                localStorage.setItem(`resize-panel${this.name}`, this._elementRef.nativeElement.clientHeight);
-            }
-        }
-    }
-}
-ResizePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ResizePanelComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-ResizePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: ResizePanelComponent, selector: "teta-resize-panel", inputs: { direction: "direction", grabPosition: "grabPosition", name: "name", minSize: "minSize", maxSize: "maxSize" }, host: { properties: { "class.resize-panel": "this.resizePanelClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n<div #grab class=\"resize-grab\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd($event)\"\n     [tetaResizeDrag]=\"direction\"\n     [ngClass]=\"getClassName()\">\n  <teta-icon [name]=\"direction\"></teta-icon>\n</div>\n", styles: [""], components: [{ type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], directives: [{ type: ResizeDragDirective, selector: "[tetaResizeDrag]", inputs: ["tetaResizeDrag"], outputs: ["resizeStart", "resizeProcess", "resizeEnd"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ResizePanelComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-resize-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div #grab class=\"resize-grab\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd($event)\"\n     [tetaResizeDrag]=\"direction\"\n     [ngClass]=\"getClassName()\">\n  <teta-icon [name]=\"direction\"></teta-icon>\n</div>\n", styles: [""] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }]; }, propDecorators: { direction: [{
-                type: Input
-            }], grabPosition: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], minSize: [{
-                type: Input
-            }], maxSize: [{
-                type: Input
-            }], resizePanelClass: [{
-                type: HostBinding,
-                args: ['class.resize-panel']
-            }] } });
-
-class ResizePanelModule {
-}
-ResizePanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ResizePanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ResizePanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ResizePanelModule, declarations: [ResizePanelComponent], imports: [CommonModule, IconModule, ResizeDragModule], exports: [ResizePanelComponent] });
-ResizePanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ResizePanelModule, imports: [[CommonModule, IconModule, ResizeDragModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ResizePanelModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ResizePanelComponent],
-                    exports: [ResizePanelComponent],
-                    imports: [CommonModule, IconModule, ResizeDragModule],
-                }]
-        }] });
-
 class TooltipDirective extends DynamicContentBaseDirective {
     constructor(_document, _elementRef, _service, _injector, _zone, _cdr, _click) {
         super(_document, _elementRef, _service, _injector, _zone, _cdr);
@@ -11296,6 +11802,120 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 }]
         }] });
 
+class LetDirective {
+    constructor(viewContainer, templateRef) {
+        viewContainer.createEmbeddedView(templateRef, new LetContext(this));
+    }
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+}
+LetDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LetDirective, deps: [{ token: ViewContainerRef }, { token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+LetDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: LetDirective, selector: "[tetaLet]", inputs: { tetaLet: "tetaLet" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaLet]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef, decorators: [{
+                    type: Inject,
+                    args: [ViewContainerRef]
+                }] }, { type: i0.TemplateRef, decorators: [{
+                    type: Inject,
+                    args: [TemplateRef]
+                }] }]; }, propDecorators: { tetaLet: [{
+                type: Input
+            }] } });
+class LetContext {
+    constructor(internalDirectiveInstance) {
+        this.internalDirectiveInstance = internalDirectiveInstance;
+    }
+    get $implicit() {
+        return this.internalDirectiveInstance.tetaLet;
+    }
+    get tetaLet() {
+        return this.internalDirectiveInstance.tetaLet;
+    }
+}
+
+class LetModule {
+}
+LetModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LetModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+LetModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LetModule, declarations: [LetDirective], imports: [CommonModule], exports: [LetDirective] });
+LetModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LetModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: LetModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        LetDirective
+                    ], exports: [
+                        LetDirective
+                    ],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
+class ScrollIntoViewDirective {
+    constructor(platformId, elementRef) {
+        this.platformId = platformId;
+        this.elementRef = elementRef;
+        this.behavior = 'smooth';
+        this.block = 'end';
+    }
+    ngOnChanges(simpleChange) {
+        if (isPlatformBrowser(this.platformId)) {
+            if (coerceBooleanProperty(this.tetaScrollIntoView)) {
+                this.elementRef.nativeElement.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'end'
+                });
+            }
+        }
+    }
+}
+ScrollIntoViewDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ScrollIntoViewDirective, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ScrollIntoViewDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", type: ScrollIntoViewDirective, selector: "[tetaScrollIntoView]", inputs: { tetaScrollIntoView: "tetaScrollIntoView", behavior: "behavior", block: "block" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ScrollIntoViewDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaScrollIntoView]'
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i0.ElementRef }]; }, propDecorators: { tetaScrollIntoView: [{
+                type: Input
+            }], behavior: [{
+                type: Input
+            }], block: [{
+                type: Input
+            }] } });
+
+class ScrollIntoViewModule {
+}
+ScrollIntoViewModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ScrollIntoViewModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ScrollIntoViewModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ScrollIntoViewModule, declarations: [ScrollIntoViewDirective], imports: [CommonModule], exports: [ScrollIntoViewDirective] });
+ScrollIntoViewModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ScrollIntoViewModule, imports: [[
+            CommonModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: ScrollIntoViewModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ScrollIntoViewDirective
+                    ], exports: [
+                        ScrollIntoViewDirective
+                    ],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
 class OverlayContainerService {
     constructor(document$) {
         this.document$ = document$;
@@ -11391,6 +12011,20 @@ const ruLocale = {
     ]
 };
 
+function tetaZoneFull(ngZone) {
+    return source => new Observable(subscriber => source.subscribe({
+        next: value => ngZone.run(() => subscriber.next(value)),
+        error: (error) => ngZone.run(() => subscriber.error(error)),
+        complete: () => ngZone.run(() => subscriber.complete()),
+    }));
+}
+function tetaZoneFree(ngZone) {
+    return source => new Observable(subscriber => ngZone.runOutsideAngular(() => source.subscribe(subscriber)));
+}
+function tetaZoneOptimized(ngZone) {
+    return pipe(tetaZoneFree(ngZone), tetaZoneFull(ngZone));
+}
+
 /**
  * Components
  */
@@ -11399,5 +12033,5 @@ const ruLocale = {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionContentDirective, AccordionHeadComponent, AccordionItemComponent, AccordionModule, AggregationType, Align, ArrayUtil, BooleanCellComponent, BooleanFilter, BooleanFilterComponent, ButtonComponent, ButtonModule, CHECKBOX_CONTROL_VALUE_ACCESSOR, CellComponent, CellComponentBase, CellHostComponent, Chart3dComponent, Chart3dModule, Chart3dOptions, CheckboxComponent, CheckboxModule, ClickOutsideDirective, ClickOutsideModule, ClickService, ColumnReorderEvent, ColumnResizeEvent, ContextMenuDirective, ContextMenuModule, CurrentModal, DATE_PICKER_CONTROL_VALUE_ACCESSOR, DAY_SELECT_CONTROL_VALUE_ACCESSOR, DateCellComponent, DateFilter, DateFilterComponent, DateFilterValue, DatePeriod, DatePickerComponent, DatePickerModule, DateTimeCellComponent, DateUtil, DaySelectComponent, DelimiterComponent, DelimiterModule, DetailComponentBase, DialogComponent, DialogService, DisableControlDirective, DisableControlModule, DomUtil, DragSortContainerDirective, DragSortItemDirective, DragSortModule, DropdownComponent, DropdownContentDirective, DropdownDirective, DropdownHeadDirective, DropdownModule, DynamicComponentModule, DynamicComponentService, DynamicContentBaseDirective, DynamicData, EditEvent, EditType, ExpandPanelComponent, ExpandPanelContentDirective, ExpandPanelHeadDirective, ExpandPanelModule, FileItemComponent, FileUploadAreaComponent, FileUploadModule, FilterBase, FilterComponentBase, FilterHostComponent, FilterItem, FilterModule, FilterState, FilterType, FormGroupTitleComponent, FormsUtil, GroupRowComponent, HeadCellComponentBase, HeadCellHostComponent, HighlightDirective, HighlightModule, HintDirective, HintModule, IconComponent, IconModule, IconService, IconSpriteDirective, InputComponent, InputModule, ListCellComponent, ListFilter, ListFilterComponent, ListFilterType, LoaderDirective, LoaderModule, MONTH_PICKER_CONTROL_VALUE_ACCESSOR, Message, MessageComponent, MessageHostComponent, MessageModule, MessageService, ModalCloseReason, ModalContainerComponent, ModalInstance, ModalModule, ModalService, MonthPickerComponent, NoAutofillDirective, NoAutofillModule, NumberPipe, NumberPipeModule, NumericCellComponent, NumericFilter, NumericFilterComponent, NumericFilterValue, OnlyNumberDirective, OnlyNumberModule, OverlayContainerService, PagerComponent, PagerModule, PagerState, PagerUtil, PanelComponent, PanelModule, PopupContentComponent, PositionUtil, ProgressBarComponent, ProgressBarModule, PropertyGridComponent, PropertyGridModule, RadioButtonComponent, RadioComponent, RadioModule, ResizeDragDirective, ResizeDragModule, ResizePanelComponent, ResizePanelModule, SLIDER_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, SelectComponent, SelectModule, SelectOptionDirective, SelectType, SelectValueDirective, SidebarComponent, SidebarModule, SidebarPosition, SortEvent, SortParam, StateUtil, StringCellComponent, StringFilter, StringFilterComponent, StringFilterType, StringUtil, SwitchButtonComponent, SwitchComponent, SwitchModule, TOGGLE_CONTROL_VALUE_ACCESSOR, TabComponent, TabContentDirective, TabTitleDirective, TableBodyComponent, TableColumn, TableColumnStore, TableComponent, TableHeadComponent, TableModule, TableRow, TableService, TableUtil, TabsComponent, TabsModule, TetaConfigService, TetaContentRef, TetaSize, TetaTemplateDirective, TetaTemplateModule, TextFieldComponent, ThemeSwitchComponent, ThemeSwitchModule, ThemeSwitchService, ToggleComponent, ToggleModule, ToolbarComponent, ToolbarModule, TooltipDirective, TooltipModule, TreeComponent, TreeItemToggleComponent, TreeModule, TreeService, VerticalAlign, enLocale, formatNumber, getCellComponent, getPrecision, prependZero, ruLocale };
+export { AccordionComponent, AccordionContentDirective, AccordionHeadComponent, AccordionItemComponent, AccordionModule, AggregationType, Align, ArrayUtil, BooleanCellComponent, BooleanFilter, BooleanFilterComponent, ButtonComponent, ButtonModule, CHECKBOX_CONTROL_VALUE_ACCESSOR, CellComponent, CellComponentBase, CellHostComponent, Chart3dComponent, Chart3dModule, Chart3dOptions, CheckboxComponent, CheckboxModule, ClickOutsideDirective, ClickOutsideModule, ClickService, ColumnReorderEvent, ColumnResizeEvent, ContextMenuDirective, ContextMenuModule, CurrentModal, DATE_PICKER_CONTROL_VALUE_ACCESSOR, DAY_SELECT_CONTROL_VALUE_ACCESSOR, DateCellComponent, DateFilter, DateFilterComponent, DateFilterValue, DatePeriod, DatePickerComponent, DatePickerModule, DateTimeCellComponent, DateUtil, DaySelectComponent, DelimiterComponent, DelimiterModule, DetailComponentBase, DialogComponent, DialogService, DisableControlDirective, DisableControlModule, DomUtil, DragContainerDirective, DragContainerInstance, DragDirective, DragDropModule, DragDropService, DragInstance, DragPlaceholderDirective, DragPreviewDirective, DragSortContainerDirective, DragSortItemDirective, DragSortModule, DropdownComponent, DropdownContentDirective, DropdownDirective, DropdownHeadDirective, DropdownModule, DynamicComponentModule, DynamicComponentService, DynamicContentBaseDirective, DynamicData, EditEvent, EditType, ExpandCardComponent, ExpandCardModule, ExpandPanelComponent, ExpandPanelContentDirective, ExpandPanelHeadDirective, ExpandPanelModule, FileItemComponent, FileUploadAreaComponent, FileUploadModule, FilterBase, FilterComponentBase, FilterHostComponent, FilterItem, FilterModule, FilterState, FilterType, FormGroupTitleComponent, FormsUtil, GroupRowComponent, HeadCellComponentBase, HeadCellHostComponent, HighlightDirective, HighlightModule, HintDirective, HintModule, IconComponent, IconModule, IconService, IconSpriteDirective, InputComponent, InputModule, LetContext, LetDirective, LetModule, ListCellComponent, ListFilter, ListFilterComponent, ListFilterType, LoaderDirective, LoaderModule, MONTH_PICKER_CONTROL_VALUE_ACCESSOR, Message, MessageComponent, MessageHostComponent, MessageModule, MessageService, ModalCloseReason, ModalContainerComponent, ModalInstance, ModalModule, ModalService, MonthPickerComponent, NoAutofillDirective, NoAutofillModule, NumberPipe, NumberPipeModule, NumericCellComponent, NumericFilter, NumericFilterComponent, NumericFilterValue, OnlyNumberDirective, OnlyNumberModule, OverlayContainerService, PagerComponent, PagerModule, PagerState, PagerUtil, PanelComponent, PanelModule, PopupContentComponent, PositionUtil, ProgressBarComponent, ProgressBarModule, PropertyGridComponent, PropertyGridModule, RadioButtonComponent, RadioComponent, RadioModule, ResizeDragDirective, ResizeDragModule, ResizePanelComponent, ResizePanelModule, SLIDER_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, ScrollIntoViewDirective, ScrollIntoViewModule, SelectComponent, SelectModule, SelectOptionDirective, SelectType, SelectValueDirective, SidebarComponent, SidebarModule, SidebarPosition, SortEvent, SortParam, StateUtil, StringCellComponent, StringFilter, StringFilterComponent, StringFilterType, StringUtil, SwitchButtonComponent, SwitchComponent, SwitchModule, TOGGLE_CONTROL_VALUE_ACCESSOR, TabComponent, TabContentDirective, TabTitleDirective, TableBodyComponent, TableColumn, TableColumnStore, TableComponent, TableHeadComponent, TableModule, TableRow, TableService, TableUtil, TabsComponent, TabsModule, TetaConfigService, TetaContentRef, TetaSize, TetaTemplateDirective, TetaTemplateModule, TextFieldComponent, ThemeSwitchComponent, ThemeSwitchModule, ThemeSwitchService, ToggleComponent, ToggleModule, ToolbarComponent, ToolbarModule, TooltipDirective, TooltipModule, TreeComponent, TreeItemToggleComponent, TreeModule, TreeService, VerticalAlign, enLocale, formatNumber, getCellComponent, getPrecision, prependZero, ruLocale, tetaZoneFree, tetaZoneFull, tetaZoneOptimized };
 //# sourceMappingURL=tetacom-ng-components.mjs.map