@tetacom/ng-components 1.6.5 → 1.6.7

package/fesm2022/tetacom-ng-components.mjs

@@ -6034,7 +6034,7 @@ class SelectComponent {
                 useExisting: forwardRef(() => SelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "optionDirective", first: true, predicate: SelectOptionDirective, descendants: true, static: true }, { propertyName: "valueDirective", first: true, predicate: SelectValueDirective, descendants: true, static: true }], ngImport: i0, template: "@if (locale | async; as loc) {\n  <teta-dropdown\n    [align]=\"align\"\n    [verticalAlign]=\"verticalAlign\"\n    [autoClose]=\"autoClose\"\n    [autoCloseIgnore]=\"autoCloseIgnore\"\n    [(open)]=\"open\"\n    [appendToBody]=\"appendToBody\"\n    [disabled]=\"disabled\"\n    [viewType]=\"viewType\"\n    class=\"row row_auto\"\n  >\n    <div tetaDropdownHead [class]=\"'row row_auto select-head select_' + viewType\" [class.select-head_invalid]=\"invalid\">\n      <div class=\"row_auto flex align-center\">\n        @if (icon) {\n          <teta-icon [name]=\"icon\" [palette]=\"'text'\" class=\"margin-right-1\"></teta-icon>\n        }\n        @if ((value === null || value === undefined || value?.length === 0) && !multiple) {\n          <span class=\"placeholder\">\n            {{ placeholder || loc.notSelected }}\n          </span>\n        }\n        <ng-container\n          *ngTemplateOutlet=\"\n            valueDirective ? valueDirective.template : valueDefault;\n            context: { $implicit: value, value: value }\n          \"\n        ></ng-container>\n      </div>\n      <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n    </div>\n    @if (options?.length) {\n      <div tetaDropdownContent class=\"select-body row_auto\" (click)=\"$event.preventDefault()\">\n        @if (searchRef) {\n          <div class=\"select-search padding-h-2 padding-top-2\">\n            <teta-text-field\n              [ngModel]=\"searchText\"\n              [class]=\"'select_' + viewType\"\n              (ngModelChange)=\"search($event)\"\n              [placeholder]=\"loc.search\"\n              [leftIconName]=\"'search'\"\n            ></teta-text-field>\n          </div>\n        }\n        @if (visibleOptions?.length) {\n          @if (!multiple && allowNull) {\n            <div [class]=\"'margin-h-2 list-item list-item_interactive select_' + viewType\" (click)=\"clear()\">\n              {{ loc.notSelected }}\n            </div>\n            <div class=\"list-divider margin-bottom-0\"></div>\n          }\n          @if (virtual) {\n            <teta-scrollable class=\"column column_auto\">\n              <cdk-virtual-scroll-viewport tetaScrollable [itemSize]=\"40\" minBufferPx=\"200\" maxBufferPx=\"600\">\n                <div\n                  [class]=\"'list-item list-item_interactive justify-content-between select_' + viewType\"\n                  *cdkVirtualFor=\"let option of visibleOptions; templateCacheSize: 0\"\n                  [class.list-item_active]=\"itemSelected(option)\"\n                  [tetaHighlight]=\"searchText\"\n                  (click)=\"clickOption(option, $event)\"\n                >\n                  <div [tetaHighlight]=\"searchText\">\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        optionDirective ? optionDirective.template : optionDefault;\n                        context: { $implicit: option, option: option }\n                      \"\n                    >\n                    </ng-container>\n                  </div>\n                  @if (itemSelected(option)) {\n                    <teta-icon [name]=\"'tick'\" [palette]=\"'text'\" class=\"margin-left-2\"></teta-icon>\n                  }\n                </div>\n              </cdk-virtual-scroll-viewport>\n            </teta-scrollable>\n          } @else {\n            <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n              <div class=\"list\">\n                @for (option of visibleOptions; track option) {\n                  <div\n                    [class]=\"'list-item list-item_interactive justify-content-between  select_' + viewType\"\n                    [class.list-item_active]=\"itemSelected(option)\"\n                    (click)=\"clickOption(option, $event)\"\n                  >\n                    <span [tetaHighlight]=\"searchText\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          optionDirective ? optionDirective.template : optionDefault;\n                          context: { $implicit: option, option: option }\n                        \"\n                      >\n                      </ng-container>\n                    </span>\n                    @if (itemSelected(option) && multiple) {\n                      <teta-icon [name]=\"'tick'\" [palette]=\"'text'\"></teta-icon>\n                    }\n                  </div>\n                }\n              </div>\n            </teta-scrollable>\n          }\n        } @else {\n          <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n            {{ notFoundText || loc.notFound }}\n          </p>\n        }\n        @if (multiple && value?.length) {\n          <div class=\"row row_auto select-chip-field flex-wrap\">\n            @for (item of value; track item) {\n              <div class=\"tag\">\n                <p>{{ getText(item) }}</p>\n                <teta-icon\n                  class=\"cursor-pointer\"\n                  [palette]=\"'text'\"\n                  [name]=\"'closeCircle'\"\n                  (click)=\"removeItemClick(item, $event)\"\n                ></teta-icon>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </teta-dropdown>\n  <ng-template #notFound>\n    <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n      {{ notFoundText || loc.notFound }}\n    </p>\n  </ng-template>\n  <ng-template #optionDefault let-option>\n    {{ getText(option) }}\n  </ng-template>\n  <ng-template #valueDefault let-value>\n    @if (multiple) {\n      <div class=\"row_auto overflow-hidden text-overflow-ellipsis\">\n        {{ loc.selected + ' ' + value?.length }}\n      </div>\n    }\n    @if (!multiple) {\n      <span class=\"row row_auto overflow-hidden text-overflow-ellipsis\">{{ getText(value) }}</span>\n    }\n  </ng-template>\n}\n", styles: [""], dependencies: [{ kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "decimalPart", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: ScrollableDirective, selector: "[tetaScrollable]" }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: HighlightDirective, selector: "[tetaHighlight]", inputs: ["tetaHighlight"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "optionDirective", first: true, predicate: SelectOptionDirective, descendants: true, static: true }, { propertyName: "valueDirective", first: true, predicate: SelectValueDirective, descendants: true, static: true }], ngImport: i0, template: "@if (locale | async; as loc) {\n  <teta-dropdown\n    [align]=\"align\"\n    [verticalAlign]=\"verticalAlign\"\n    [autoClose]=\"autoClose\"\n    [autoCloseIgnore]=\"autoCloseIgnore\"\n    [(open)]=\"open\"\n    [appendToBody]=\"appendToBody\"\n    [disabled]=\"disabled\"\n    [viewType]=\"viewType\"\n    class=\"row row_auto\"\n  >\n    <div tetaDropdownHead [class]=\"'row row_auto select-head select_' + viewType\" [class.select-head_invalid]=\"invalid\">\n      <div class=\"row_auto flex align-center\">\n        @if (icon) {\n          <teta-icon [name]=\"icon\" [palette]=\"'text'\" class=\"margin-right-1\"></teta-icon>\n        }\n        @if ((value === null || value === undefined || value?.length === 0) && !multiple) {\n          <span class=\"placeholder\">\n            {{ placeholder || loc.notSelected }}\n          </span>\n        }\n        <ng-container\n          *ngTemplateOutlet=\"\n            valueDirective ? valueDirective.template : valueDefault;\n            context: { $implicit: value, value: value }\n          \"\n        ></ng-container>\n      </div>\n      <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n    </div>\n    @if (options?.length) {\n      <div tetaDropdownContent class=\"select-body row_auto\" (click)=\"$event.preventDefault()\">\n        @if (searchRef) {\n          <div class=\"select-search padding-h-2 padding-top-2\">\n            <teta-text-field\n              [ngModel]=\"searchText\"\n              [class]=\"'select_' + viewType\"\n              (ngModelChange)=\"search($event)\"\n              [placeholder]=\"loc.search\"\n              [leftIconName]=\"'search'\"\n            ></teta-text-field>\n          </div>\n        }\n        @if (visibleOptions?.length) {\n          @if (!multiple && allowNull) {\n            <div [class]=\"'margin-h-2 list-item list-item_interactive select_' + viewType\" (click)=\"clear()\">\n              {{ loc.notSelected }}\n            </div>\n            <div class=\"list-divider margin-bottom-0\"></div>\n          }\n          @if (virtual) {\n            <div class=\"column column_auto padding-v-2\" style=\"height: 50vh\">\n              <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n                <cdk-virtual-scroll-viewport\n                  tetaScrollable\n                  [itemSize]=\"28\"\n                  minBufferPx=\"200\"\n                  maxBufferPx=\"600\"\n                  style=\"flex-grow: 1\"\n                >\n                  <div\n                    [class]=\"'margin-h-2 list-item list-item_interactive justify-content-between select_' + viewType\"\n                    style=\"display: flex\"\n                    *cdkVirtualFor=\"let option of visibleOptions; templateCacheSize: 0\"\n                    [class.list-item_active]=\"itemSelected(option)\"\n                    [tetaHighlight]=\"searchText\"\n                    [style.height.px]=\"28\"\n                    (click)=\"clickOption(option, $event)\"\n                  >\n                    <div [tetaHighlight]=\"searchText\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          optionDirective ? optionDirective.template : optionDefault;\n                          context: { $implicit: option, option: option }\n                        \"\n                      >\n                      </ng-container>\n                    </div>\n                    @if (itemSelected(option)) {\n                      <teta-icon [name]=\"'tick'\" [palette]=\"'text'\" class=\"margin-left-2\"></teta-icon>\n                    }\n                  </div>\n                </cdk-virtual-scroll-viewport>\n              </teta-scrollable>\n            </div>\n          } @else {\n            <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n              <div class=\"list\">\n                @for (option of visibleOptions; track option) {\n                  <div\n                    [class]=\"'list-item list-item_interactive justify-content-between  select_' + viewType\"\n                    [class.list-item_active]=\"itemSelected(option)\"\n                    (click)=\"clickOption(option, $event)\"\n                  >\n                    <span [tetaHighlight]=\"searchText\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          optionDirective ? optionDirective.template : optionDefault;\n                          context: { $implicit: option, option: option }\n                        \"\n                      >\n                      </ng-container>\n                    </span>\n                    @if (itemSelected(option) && multiple) {\n                      <teta-icon [name]=\"'tick'\" [palette]=\"'text'\"></teta-icon>\n                    }\n                  </div>\n                }\n              </div>\n            </teta-scrollable>\n          }\n        } @else {\n          <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n            {{ notFoundText || loc.notFound }}\n          </p>\n        }\n        @if (multiple && value?.length) {\n          <div class=\"row row_auto select-chip-field flex-wrap\">\n            @for (item of value; track item) {\n              <div class=\"tag\">\n                <p>{{ getText(item) }}</p>\n                <teta-icon\n                  class=\"cursor-pointer\"\n                  [palette]=\"'text'\"\n                  [name]=\"'closeCircle'\"\n                  (click)=\"removeItemClick(item, $event)\"\n                ></teta-icon>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </teta-dropdown>\n  <ng-template #notFound>\n    <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n      {{ notFoundText || loc.notFound }}\n    </p>\n  </ng-template>\n  <ng-template #optionDefault let-option>\n    {{ getText(option) }}\n  </ng-template>\n  <ng-template #valueDefault let-value>\n    @if (multiple) {\n      <div class=\"row_auto overflow-hidden text-overflow-ellipsis\">\n        {{ loc.selected + ' ' + value?.length }}\n      </div>\n    }\n    @if (!multiple) {\n      <span class=\"row row_auto overflow-hidden text-overflow-ellipsis\">{{ getText(value) }}</span>\n    }\n  </ng-template>\n}\n", styles: [""], dependencies: [{ kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "decimalPart", "invalid"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: ScrollableDirective, selector: "[tetaScrollable]" }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: HighlightDirective, selector: "[tetaHighlight]", inputs: ["tetaHighlight"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -6060,7 +6060,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         CdkVirtualForOf,
                         HighlightDirective,
                         AsyncPipe,
-                    ], template: "@if (locale | async; as loc) {\n  <teta-dropdown\n    [align]=\"align\"\n    [verticalAlign]=\"verticalAlign\"\n    [autoClose]=\"autoClose\"\n    [autoCloseIgnore]=\"autoCloseIgnore\"\n    [(open)]=\"open\"\n    [appendToBody]=\"appendToBody\"\n    [disabled]=\"disabled\"\n    [viewType]=\"viewType\"\n    class=\"row row_auto\"\n  >\n    <div tetaDropdownHead [class]=\"'row row_auto select-head select_' + viewType\" [class.select-head_invalid]=\"invalid\">\n      <div class=\"row_auto flex align-center\">\n        @if (icon) {\n          <teta-icon [name]=\"icon\" [palette]=\"'text'\" class=\"margin-right-1\"></teta-icon>\n        }\n        @if ((value === null || value === undefined || value?.length === 0) && !multiple) {\n          <span class=\"placeholder\">\n            {{ placeholder || loc.notSelected }}\n          </span>\n        }\n        <ng-container\n          *ngTemplateOutlet=\"\n            valueDirective ? valueDirective.template : valueDefault;\n            context: { $implicit: value, value: value }\n          \"\n        ></ng-container>\n      </div>\n      <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n    </div>\n    @if (options?.length) {\n      <div tetaDropdownContent class=\"select-body row_auto\" (click)=\"$event.preventDefault()\">\n        @if (searchRef) {\n          <div class=\"select-search padding-h-2 padding-top-2\">\n            <teta-text-field\n              [ngModel]=\"searchText\"\n              [class]=\"'select_' + viewType\"\n              (ngModelChange)=\"search($event)\"\n              [placeholder]=\"loc.search\"\n              [leftIconName]=\"'search'\"\n            ></teta-text-field>\n          </div>\n        }\n        @if (visibleOptions?.length) {\n          @if (!multiple && allowNull) {\n            <div [class]=\"'margin-h-2 list-item list-item_interactive select_' + viewType\" (click)=\"clear()\">\n              {{ loc.notSelected }}\n            </div>\n            <div class=\"list-divider margin-bottom-0\"></div>\n          }\n          @if (virtual) {\n            <teta-scrollable class=\"column column_auto\">\n              <cdk-virtual-scroll-viewport tetaScrollable [itemSize]=\"40\" minBufferPx=\"200\" maxBufferPx=\"600\">\n                <div\n                  [class]=\"'list-item list-item_interactive justify-content-between select_' + viewType\"\n                  *cdkVirtualFor=\"let option of visibleOptions; templateCacheSize: 0\"\n                  [class.list-item_active]=\"itemSelected(option)\"\n                  [tetaHighlight]=\"searchText\"\n                  (click)=\"clickOption(option, $event)\"\n                >\n                  <div [tetaHighlight]=\"searchText\">\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        optionDirective ? optionDirective.template : optionDefault;\n                        context: { $implicit: option, option: option }\n                      \"\n                    >\n                    </ng-container>\n                  </div>\n                  @if (itemSelected(option)) {\n                    <teta-icon [name]=\"'tick'\" [palette]=\"'text'\" class=\"margin-left-2\"></teta-icon>\n                  }\n                </div>\n              </cdk-virtual-scroll-viewport>\n            </teta-scrollable>\n          } @else {\n            <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n              <div class=\"list\">\n                @for (option of visibleOptions; track option) {\n                  <div\n                    [class]=\"'list-item list-item_interactive justify-content-between  select_' + viewType\"\n                    [class.list-item_active]=\"itemSelected(option)\"\n                    (click)=\"clickOption(option, $event)\"\n                  >\n                    <span [tetaHighlight]=\"searchText\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          optionDirective ? optionDirective.template : optionDefault;\n                          context: { $implicit: option, option: option }\n                        \"\n                      >\n                      </ng-container>\n                    </span>\n                    @if (itemSelected(option) && multiple) {\n                      <teta-icon [name]=\"'tick'\" [palette]=\"'text'\"></teta-icon>\n                    }\n                  </div>\n                }\n              </div>\n            </teta-scrollable>\n          }\n        } @else {\n          <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n            {{ notFoundText || loc.notFound }}\n          </p>\n        }\n        @if (multiple && value?.length) {\n          <div class=\"row row_auto select-chip-field flex-wrap\">\n            @for (item of value; track item) {\n              <div class=\"tag\">\n                <p>{{ getText(item) }}</p>\n                <teta-icon\n                  class=\"cursor-pointer\"\n                  [palette]=\"'text'\"\n                  [name]=\"'closeCircle'\"\n                  (click)=\"removeItemClick(item, $event)\"\n                ></teta-icon>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </teta-dropdown>\n  <ng-template #notFound>\n    <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n      {{ notFoundText || loc.notFound }}\n    </p>\n  </ng-template>\n  <ng-template #optionDefault let-option>\n    {{ getText(option) }}\n  </ng-template>\n  <ng-template #valueDefault let-value>\n    @if (multiple) {\n      <div class=\"row_auto overflow-hidden text-overflow-ellipsis\">\n        {{ loc.selected + ' ' + value?.length }}\n      </div>\n    }\n    @if (!multiple) {\n      <span class=\"row row_auto overflow-hidden text-overflow-ellipsis\">{{ getText(value) }}</span>\n    }\n  </ng-template>\n}\n" }]
+                    ], template: "@if (locale | async; as loc) {\n  <teta-dropdown\n    [align]=\"align\"\n    [verticalAlign]=\"verticalAlign\"\n    [autoClose]=\"autoClose\"\n    [autoCloseIgnore]=\"autoCloseIgnore\"\n    [(open)]=\"open\"\n    [appendToBody]=\"appendToBody\"\n    [disabled]=\"disabled\"\n    [viewType]=\"viewType\"\n    class=\"row row_auto\"\n  >\n    <div tetaDropdownHead [class]=\"'row row_auto select-head select_' + viewType\" [class.select-head_invalid]=\"invalid\">\n      <div class=\"row_auto flex align-center\">\n        @if (icon) {\n          <teta-icon [name]=\"icon\" [palette]=\"'text'\" class=\"margin-right-1\"></teta-icon>\n        }\n        @if ((value === null || value === undefined || value?.length === 0) && !multiple) {\n          <span class=\"placeholder\">\n            {{ placeholder || loc.notSelected }}\n          </span>\n        }\n        <ng-container\n          *ngTemplateOutlet=\"\n            valueDirective ? valueDirective.template : valueDefault;\n            context: { $implicit: value, value: value }\n          \"\n        ></ng-container>\n      </div>\n      <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n    </div>\n    @if (options?.length) {\n      <div tetaDropdownContent class=\"select-body row_auto\" (click)=\"$event.preventDefault()\">\n        @if (searchRef) {\n          <div class=\"select-search padding-h-2 padding-top-2\">\n            <teta-text-field\n              [ngModel]=\"searchText\"\n              [class]=\"'select_' + viewType\"\n              (ngModelChange)=\"search($event)\"\n              [placeholder]=\"loc.search\"\n              [leftIconName]=\"'search'\"\n            ></teta-text-field>\n          </div>\n        }\n        @if (visibleOptions?.length) {\n          @if (!multiple && allowNull) {\n            <div [class]=\"'margin-h-2 list-item list-item_interactive select_' + viewType\" (click)=\"clear()\">\n              {{ loc.notSelected }}\n            </div>\n            <div class=\"list-divider margin-bottom-0\"></div>\n          }\n          @if (virtual) {\n            <div class=\"column column_auto padding-v-2\" style=\"height: 50vh\">\n              <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n                <cdk-virtual-scroll-viewport\n                  tetaScrollable\n                  [itemSize]=\"28\"\n                  minBufferPx=\"200\"\n                  maxBufferPx=\"600\"\n                  style=\"flex-grow: 1\"\n                >\n                  <div\n                    [class]=\"'margin-h-2 list-item list-item_interactive justify-content-between select_' + viewType\"\n                    style=\"display: flex\"\n                    *cdkVirtualFor=\"let option of visibleOptions; templateCacheSize: 0\"\n                    [class.list-item_active]=\"itemSelected(option)\"\n                    [tetaHighlight]=\"searchText\"\n                    [style.height.px]=\"28\"\n                    (click)=\"clickOption(option, $event)\"\n                  >\n                    <div [tetaHighlight]=\"searchText\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          optionDirective ? optionDirective.template : optionDefault;\n                          context: { $implicit: option, option: option }\n                        \"\n                      >\n                      </ng-container>\n                    </div>\n                    @if (itemSelected(option)) {\n                      <teta-icon [name]=\"'tick'\" [palette]=\"'text'\" class=\"margin-left-2\"></teta-icon>\n                    }\n                  </div>\n                </cdk-virtual-scroll-viewport>\n              </teta-scrollable>\n            </div>\n          } @else {\n            <teta-scrollable class=\"column column_auto\" [contentClass]=\"['column', 'column_auto']\">\n              <div class=\"list\">\n                @for (option of visibleOptions; track option) {\n                  <div\n                    [class]=\"'list-item list-item_interactive justify-content-between  select_' + viewType\"\n                    [class.list-item_active]=\"itemSelected(option)\"\n                    (click)=\"clickOption(option, $event)\"\n                  >\n                    <span [tetaHighlight]=\"searchText\">\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          optionDirective ? optionDirective.template : optionDefault;\n                          context: { $implicit: option, option: option }\n                        \"\n                      >\n                      </ng-container>\n                    </span>\n                    @if (itemSelected(option) && multiple) {\n                      <teta-icon [name]=\"'tick'\" [palette]=\"'text'\"></teta-icon>\n                    }\n                  </div>\n                }\n              </div>\n            </teta-scrollable>\n          }\n        } @else {\n          <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n            {{ notFoundText || loc.notFound }}\n          </p>\n        }\n        @if (multiple && value?.length) {\n          <div class=\"row row_auto select-chip-field flex-wrap\">\n            @for (item of value; track item) {\n              <div class=\"tag\">\n                <p>{{ getText(item) }}</p>\n                <teta-icon\n                  class=\"cursor-pointer\"\n                  [palette]=\"'text'\"\n                  [name]=\"'closeCircle'\"\n                  (click)=\"removeItemClick(item, $event)\"\n                ></teta-icon>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </teta-dropdown>\n  <ng-template #notFound>\n    <p class=\"padding-h-3 text-overflow-ellipsis overflow-hidden select-not-found-option\">\n      {{ notFoundText || loc.notFound }}\n    </p>\n  </ng-template>\n  <ng-template #optionDefault let-option>\n    {{ getText(option) }}\n  </ng-template>\n  <ng-template #valueDefault let-value>\n    @if (multiple) {\n      <div class=\"row_auto overflow-hidden text-overflow-ellipsis\">\n        {{ loc.selected + ' ' + value?.length }}\n      </div>\n    }\n    @if (!multiple) {\n      <span class=\"row row_auto overflow-hidden text-overflow-ellipsis\">{{ getText(value) }}</span>\n    }\n  </ng-template>\n}\n" }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: TetaConfigService }], propDecorators: { multiple: [{
                 type: HostBinding,
                 args: ['class.select_multiple']
@@ -7851,11 +7851,11 @@ class DateCellComponent extends CellComponentBase {
         this.cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DateCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DateCellComponent, isStandalone: true, selector: "teta-date-cell", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\" [class.cell-text_disabled]=\"!editable\">\n  {{ control?.value | date: 'dd.MM.yyyy' }}\n</span>\n@if (edit) {\n  <teta-date-picker\n    class=\"datepicker-table\"\n    #input\n    [allowNull]=\"!column.required\"\n    [appendToBody]=\"true\"\n    [showTime]=\"false\"\n    [formControl]=\"control\"\n  ></teta-date-picker>\n}\n", styles: [""], dependencies: [{ kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["date", "showTime", "minDate", "maxDate", "invalid", "disabled", "align", "verticalAlign", "viewType", "appendToBody", "backdrop", "allowNull", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minYearDate", "maxYearDate"], outputs: ["selectDate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DateCellComponent, isStandalone: true, selector: "teta-date-cell", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\" [class.cell-text_disabled]=\"!editable\">\n  {{ control?.value | date: 'dd.MM.yyyy' }}\n</span>\n@if (edit) {\n  <teta-date-picker\n    class=\"datepicker-table\"\n    #input\n    [allowNull]=\"!column.required\"\n    [appendToBody]=\"true\"\n    [showTime]=\"false\"\n    [formControl]=\"control\"\n  ></teta-date-picker>\n}\n", styles: [""], dependencies: [{ kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["date", "showTime", "minDate", "maxDate", "invalid", "disabled", "align", "verticalAlign", "viewType", "appendToBody", "backdrop", "allowNull", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minYearDate", "maxYearDate"], outputs: ["selectDate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: DatePipe, name: "date" }], viewProviders: [FormsUtil.formProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DateCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-date-cell', changeDetection: ChangeDetectionStrategy.OnPush, imports: [DatePickerComponent, FormsModule, ReactiveFormsModule, DatePipe], template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\" [class.cell-text_disabled]=\"!editable\">\n  {{ control?.value | date: 'dd.MM.yyyy' }}\n</span>\n@if (edit) {\n  <teta-date-picker\n    class=\"datepicker-table\"\n    #input\n    [allowNull]=\"!column.required\"\n    [appendToBody]=\"true\"\n    [showTime]=\"false\"\n    [formControl]=\"control\"\n  ></teta-date-picker>\n}\n" }]
+            args: [{ selector: 'teta-date-cell', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [FormsUtil.formProvider], imports: [DatePickerComponent, FormsModule, ReactiveFormsModule, DatePipe], template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\" [class.cell-text_disabled]=\"!editable\">\n  {{ control?.value | date: 'dd.MM.yyyy' }}\n</span>\n@if (edit) {\n  <teta-date-picker\n    class=\"datepicker-table\"\n    #input\n    [allowNull]=\"!column.required\"\n    [appendToBody]=\"true\"\n    [showTime]=\"false\"\n    [formControl]=\"control\"\n  ></teta-date-picker>\n}\n" }]
         }], ctorParameters: () => [{ type: TableService }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input', { static: false }]
@@ -7902,11 +7902,11 @@ class ListCellComponent extends CellComponentBase {
         return item.name;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ListCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ListCellComponent, isStandalone: true, selector: "teta-list-cell", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'flex'\" class=\"cell-text justify-content-between\"\n      [class.cell-text_disabled]=\"!editable\">\n  <span class=\"row_auto overflow-hidden text-overflow-ellipsis\">{{ getValue(control.value) }}</span>\n  @if (column.editable) {\n    <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n  }\n</span>\n@if (edit) {\n  <teta-select\n    #input\n    class=\"row_auto select-table\"\n    [allowNull]=\"!column.required\"\n    [verticalAlign]=\"verticalAlign.auto\"\n    [appendToBody]=\"true\"\n    [options]=\"displayFilterOptions\"\n    [valueRef]=\"'id'\"\n    [textRef]=\"'name'\"\n    [searchRef]=\"displayFilterOptions?.length > 20 ? 'name' : ''\"\n    [formControl]=\"control\"\n  >\n  </teta-select>\n}\n", styles: [""], dependencies: [{ kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "viewType", "notFoundText", "valueRef", "textRef", "searchRef"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ListCellComponent, isStandalone: true, selector: "teta-list-cell", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'flex'\" class=\"cell-text justify-content-between\"\n      [class.cell-text_disabled]=\"!editable\">\n  <span class=\"row_auto overflow-hidden text-overflow-ellipsis\">{{ getValue(control.value) }}</span>\n  @if (column.editable) {\n    <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n  }\n</span>\n@if (edit) {\n  <teta-select\n    #input\n    class=\"row_auto select-table\"\n    [allowNull]=\"!column.required\"\n    [verticalAlign]=\"verticalAlign.auto\"\n    [appendToBody]=\"true\"\n    [options]=\"displayFilterOptions\"\n    [valueRef]=\"'id'\"\n    [textRef]=\"'name'\"\n    [searchRef]=\"displayFilterOptions?.length > 20 ? 'name' : ''\"\n    [formControl]=\"control\"\n  >\n  </teta-select>\n}\n", styles: [""], dependencies: [{ kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "viewType", "notFoundText", "valueRef", "textRef", "searchRef"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], viewProviders: [FormsUtil.formProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ListCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-list-cell', changeDetection: ChangeDetectionStrategy.OnPush, imports: [SelectComponent, FormsModule, ReactiveFormsModule, IconComponent], template: "<span [style.display]=\"edit ? 'none' : 'flex'\" class=\"cell-text justify-content-between\"\n      [class.cell-text_disabled]=\"!editable\">\n  <span class=\"row_auto overflow-hidden text-overflow-ellipsis\">{{ getValue(control.value) }}</span>\n  @if (column.editable) {\n    <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n  }\n</span>\n@if (edit) {\n  <teta-select\n    #input\n    class=\"row_auto select-table\"\n    [allowNull]=\"!column.required\"\n    [verticalAlign]=\"verticalAlign.auto\"\n    [appendToBody]=\"true\"\n    [options]=\"displayFilterOptions\"\n    [valueRef]=\"'id'\"\n    [textRef]=\"'name'\"\n    [searchRef]=\"displayFilterOptions?.length > 20 ? 'name' : ''\"\n    [formControl]=\"control\"\n  >\n  </teta-select>\n}\n" }]
+            args: [{ selector: 'teta-list-cell', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [FormsUtil.formProvider], imports: [SelectComponent, FormsModule, ReactiveFormsModule, IconComponent], template: "<span [style.display]=\"edit ? 'none' : 'flex'\" class=\"cell-text justify-content-between\"\n      [class.cell-text_disabled]=\"!editable\">\n  <span class=\"row_auto overflow-hidden text-overflow-ellipsis\">{{ getValue(control.value) }}</span>\n  @if (column.editable) {\n    <teta-icon [name]=\"'arrowDownSmall'\" [palette]=\"'text'\"></teta-icon>\n  }\n</span>\n@if (edit) {\n  <teta-select\n    #input\n    class=\"row_auto select-table\"\n    [allowNull]=\"!column.required\"\n    [verticalAlign]=\"verticalAlign.auto\"\n    [appendToBody]=\"true\"\n    [options]=\"displayFilterOptions\"\n    [valueRef]=\"'id'\"\n    [textRef]=\"'name'\"\n    [searchRef]=\"displayFilterOptions?.length > 20 ? 'name' : ''\"\n    [formControl]=\"control\"\n  >\n  </teta-select>\n}\n" }]
         }], ctorParameters: () => [{ type: TableService }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input', { static: false }]
@@ -7933,11 +7933,11 @@ class StringCellComponent extends CellComponentBase {
         this.cdr.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: StringCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: StringCellComponent, isStandalone: true, selector: "teta-string-cell", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span\n  [style.display]=\"edit ? 'none' : 'block'\"\n  class=\"cell-text\"\n  [tetaHint]=\"row[column.name]\"\n  [align]=\"align.auto\"\n  [appendToBody]=\"true\"\n  [overflownOnly]=\"true\"\n  [class.cell-text_disabled]=\"!editable\"\n>\n  {{ control.value }}\n</span>\n@if (edit) {\n  <input\n    #input\n    type=\"text\"\n    class=\"input row_auto border-radius-0\"\n    (keydown.enter)=\"input.blur()\"\n    [formControl]=\"control\"\n  />\n}\n", styles: [""], dependencies: [{ kind: "directive", type: HintDirective, selector: "[tetaHint]", inputs: ["tetaHint", "align", "verticalAlign", "delay", "viewType", "overflownOnly"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: StringCellComponent, isStandalone: true, selector: "teta-string-cell", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span\n  [style.display]=\"edit ? 'none' : 'block'\"\n  class=\"cell-text\"\n  [tetaHint]=\"row[column.name]\"\n  [align]=\"align.auto\"\n  [appendToBody]=\"true\"\n  [overflownOnly]=\"true\"\n  [class.cell-text_disabled]=\"!editable\"\n>\n  {{ control.value }}\n</span>\n@if (edit) {\n  <input\n    #input\n    type=\"text\"\n    class=\"input row_auto border-radius-0\"\n    (keydown.enter)=\"input.blur()\"\n    [formControl]=\"control\"\n  />\n}\n", styles: [""], dependencies: [{ kind: "directive", type: HintDirective, selector: "[tetaHint]", inputs: ["tetaHint", "align", "verticalAlign", "delay", "viewType", "overflownOnly"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], viewProviders: [FormsUtil.formProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: StringCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-string-cell', changeDetection: ChangeDetectionStrategy.OnPush, imports: [HintDirective, FormsModule, ReactiveFormsModule], template: "<span\n  [style.display]=\"edit ? 'none' : 'block'\"\n  class=\"cell-text\"\n  [tetaHint]=\"row[column.name]\"\n  [align]=\"align.auto\"\n  [appendToBody]=\"true\"\n  [overflownOnly]=\"true\"\n  [class.cell-text_disabled]=\"!editable\"\n>\n  {{ control.value }}\n</span>\n@if (edit) {\n  <input\n    #input\n    type=\"text\"\n    class=\"input row_auto border-radius-0\"\n    (keydown.enter)=\"input.blur()\"\n    [formControl]=\"control\"\n  />\n}\n" }]
+            args: [{ selector: 'teta-string-cell', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [FormsUtil.formProvider], imports: [HintDirective, FormsModule, ReactiveFormsModule], template: "<span\n  [style.display]=\"edit ? 'none' : 'block'\"\n  class=\"cell-text\"\n  [tetaHint]=\"row[column.name]\"\n  [align]=\"align.auto\"\n  [appendToBody]=\"true\"\n  [overflownOnly]=\"true\"\n  [class.cell-text_disabled]=\"!editable\"\n>\n  {{ control.value }}\n</span>\n@if (edit) {\n  <input\n    #input\n    type=\"text\"\n    class=\"input row_auto border-radius-0\"\n    (keydown.enter)=\"input.blur()\"\n    [formControl]=\"control\"\n  />\n}\n" }]
         }], ctorParameters: () => [{ type: TableService }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input', { static: false }]
@@ -7964,11 +7964,11 @@ class BooleanCellComponent extends CellComponentBase {
         this.cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BooleanCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: BooleanCellComponent, isStandalone: true, selector: "teta-boolean-cell", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\" [class.cell-text_disabled]=\"!editable\">\n  {{ control?.value }}\n</span>\n@if (edit) {\n  <teta-checkbox #input [binary]=\"true\" [formControl]=\"control\"></teta-checkbox>\n}\n", styles: [""], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "labelPosition", "allowNull"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: BooleanCellComponent, isStandalone: true, selector: "teta-boolean-cell", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\" [class.cell-text_disabled]=\"!editable\">\n  {{ control?.value }}\n</span>\n@if (edit) {\n  <teta-checkbox #input [binary]=\"true\" [formControl]=\"control\"></teta-checkbox>\n}\n", styles: [""], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "labelPosition", "allowNull"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], viewProviders: [FormsUtil.formProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BooleanCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-boolean-cell', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CheckboxComponent, FormsModule, ReactiveFormsModule], template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\" [class.cell-text_disabled]=\"!editable\">\n  {{ control?.value }}\n</span>\n@if (edit) {\n  <teta-checkbox #input [binary]=\"true\" [formControl]=\"control\"></teta-checkbox>\n}\n" }]
+            args: [{ selector: 'teta-boolean-cell', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [FormsUtil.formProvider], imports: [CheckboxComponent, FormsModule, ReactiveFormsModule], template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\" [class.cell-text_disabled]=\"!editable\">\n  {{ control?.value }}\n</span>\n@if (edit) {\n  <teta-checkbox #input [binary]=\"true\" [formControl]=\"control\"></teta-checkbox>\n}\n" }]
         }], ctorParameters: () => [{ type: TableService }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input', { static: false }]
@@ -10274,11 +10274,11 @@ class DateTimeCellComponent extends CellComponentBase {
         this.cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DateTimeCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DateTimeCellComponent, isStandalone: true, selector: "teta-date-time-cell", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\" [class.cell-text_disabled]=\"!editable\">\n  {{ control?.value | date: 'dd.MM.yyyy HH:mm:ss' }}\n</span>\n@if (edit) {\n  <teta-date-picker\n    class=\"datepicker-table\"\n    #input\n    [appendToBody]=\"true\"\n    [showTime]=\"true\"\n    [formControl]=\"control\"\n  ></teta-date-picker>\n}\n", styles: [""], dependencies: [{ kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["date", "showTime", "minDate", "maxDate", "invalid", "disabled", "align", "verticalAlign", "viewType", "appendToBody", "backdrop", "allowNull", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minYearDate", "maxYearDate"], outputs: ["selectDate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: DateTimeCellComponent, isStandalone: true, selector: "teta-date-time-cell", viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\" [class.cell-text_disabled]=\"!editable\">\n  {{ control?.value | date: 'dd.MM.yyyy HH:mm:ss' }}\n</span>\n@if (edit) {\n  <teta-date-picker\n    class=\"datepicker-table\"\n    #input\n    [appendToBody]=\"true\"\n    [showTime]=\"true\"\n    [formControl]=\"control\"\n  ></teta-date-picker>\n}\n", styles: [""], dependencies: [{ kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["date", "showTime", "minDate", "maxDate", "invalid", "disabled", "align", "verticalAlign", "viewType", "appendToBody", "backdrop", "allowNull", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minYearDate", "maxYearDate"], outputs: ["selectDate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: DatePipe, name: "date" }], viewProviders: [FormsUtil.formProvider], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: DateTimeCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-date-time-cell', changeDetection: ChangeDetectionStrategy.OnPush, imports: [DatePickerComponent, FormsModule, ReactiveFormsModule, DatePipe], template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\" [class.cell-text_disabled]=\"!editable\">\n  {{ control?.value | date: 'dd.MM.yyyy HH:mm:ss' }}\n</span>\n@if (edit) {\n  <teta-date-picker\n    class=\"datepicker-table\"\n    #input\n    [appendToBody]=\"true\"\n    [showTime]=\"true\"\n    [formControl]=\"control\"\n  ></teta-date-picker>\n}\n" }]
+            args: [{ selector: 'teta-date-time-cell', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [FormsUtil.formProvider], imports: [DatePickerComponent, FormsModule, ReactiveFormsModule, DatePipe], template: "<span [style.display]=\"edit ? 'none' : 'block'\" class=\"cell-text\" [class.cell-text_disabled]=\"!editable\">\n  {{ control?.value | date: 'dd.MM.yyyy HH:mm:ss' }}\n</span>\n@if (edit) {\n  <teta-date-picker\n    class=\"datepicker-table\"\n    #input\n    [appendToBody]=\"true\"\n    [showTime]=\"true\"\n    [formControl]=\"control\"\n  ></teta-date-picker>\n}\n" }]
         }], ctorParameters: () => [{ type: TableService }, { type: i0.ChangeDetectorRef }], propDecorators: { input: [{
                 type: ViewChild,
                 args: ['input', { static: false }]