@tetacom/ng-components 1.0.67 → 1.0.68

package/fesm2020/tetacom-ng-components.mjs

@@ -1,5 +1,5 @@
 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, SkipSelf, ViewContainerRef, PLATFORM_ID } from '@angular/core';
+import { Component, ChangeDetectionStrategy, HostBinding, Directive, Optional, Inject, ContentChild, Input, Host, HostListener, Injectable, NgModule, forwardRef, EventEmitter, ElementRef, Output, Pipe, ViewChild, TemplateRef, Injector, ViewEncapsulation, ChangeDetectorRef, ContentChildren, SkipSelf, ViewContainerRef, PLATFORM_ID } from '@angular/core';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i1 from '@angular/common/http';
@@ -1053,6 +1053,9 @@ class DomUtil {
         }
         return null;
     }
+    static isOverflown(element) {
+        return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+    }
 }
 
 class PositionUtil {
@@ -3584,151 +3587,424 @@ class NumericFilterValue {
     }
 }
 
-class InputComponent {
-    constructor() {
-        this.required = false;
+class TetaContentRef {
+    constructor(nodes, viewRef, componentRef) {
+        this.nodes = nodes;
+        this.viewRef = viewRef;
+        this.componentRef = componentRef;
     }
-    get column() {
-        return !this.horizontal;
+}
+
+class DynamicData {
+    constructor(value) {
+        for (const key in value) {
+            if (value.hasOwnProperty(key)) {
+                this[key] = value[key];
+            }
+        }
     }
-    ngOnInit() { }
 }
-InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: InputComponent, selector: "teta-input", inputs: { label: "label", horizontal: "horizontal", required: "required" }, host: { properties: { "class.row": "this.horizontal", "class.column": "this.column" } }, ngImport: i0, template: "<div class=\"font-caption color-text-90 align-center row nowrap overflow-hidden text-overflow-ellipsis\"\n     [class.row_6]=\"horizontal\"\n     [class.text-field_required]=\"required\"\n     *ngIf=\"label?.length > 0\">\n  {{label}}\n</div>\n<div class=\"input-container\" [class.row_6]=\"horizontal\">\n  <ng-content></ng-content>\n  <div class=\"input-message font-error-message\">\n    <ng-content select=\"message\"></ng-content>\n  </div>\n</div>\n", styles: [":host{display:flex;grid-gap:4px;flex-grow:1;flex-basis:10px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: InputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"font-caption color-text-90 align-center row nowrap overflow-hidden text-overflow-ellipsis\"\n     [class.row_6]=\"horizontal\"\n     [class.text-field_required]=\"required\"\n     *ngIf=\"label?.length > 0\">\n  {{label}}\n</div>\n<div class=\"input-container\" [class.row_6]=\"horizontal\">\n  <ng-content></ng-content>\n  <div class=\"input-message font-error-message\">\n    <ng-content select=\"message\"></ng-content>\n  </div>\n</div>\n", styles: [":host{display:flex;grid-gap:4px;flex-grow:1;flex-basis:10px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { label: [{
-                type: Input
-            }], horizontal: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.row']
-            }], required: [{
-                type: Input
-            }], column: [{
-                type: HostBinding,
-                args: ['class.column']
-            }] } });
 
-class NumericFilterComponent extends FilterComponentBase {
-    constructor(changeDetector, _config) {
-        super();
-        this.changeDetector = changeDetector;
-        this._config = _config;
-        this.filterOptions = [];
-        this.filterChanged = new EventEmitter();
-        this.locale = this._config.locale;
+class DynamicComponentService {
+    constructor(_componentFactoryResolver, _rendererFactory, _appRef) {
+        this._componentFactoryResolver = _componentFactoryResolver;
+        this._rendererFactory = _rendererFactory;
+        this._appRef = _appRef;
+        this._renderer = this._rendererFactory.createRenderer(null, null);
     }
-    set state(val) {
-        this.state$ = val;
-        this.filter = this.getFilter();
-        this.changeDetector.detectChanges();
+    createComponent(component, contentRef, injector, container) {
+        const componentRef = this._componentFactoryResolver
+            .resolveComponentFactory(component)
+            .create(injector, contentRef.nodes);
+        this._appRef.attachView(componentRef.hostView);
+        container.appendChild(componentRef.location.nativeElement);
+        return componentRef;
     }
-    get state() {
-        return this.state$;
+    createContent(content, injector, context) {
+        if (content === null || content === undefined) {
+            throw new Error('Content is undefined');
+        }
+        if (typeof content === 'string') {
+            return this.fromString(content);
+        }
+        else if (content instanceof TemplateRef) {
+            return this.fromTemplate(content, context);
+        }
+        else {
+            return this.fromComponent(content, injector, context);
+        }
     }
-    ngOnInit() {
-        this.filter = this.getFilter();
+    destroy(component, content, container) {
+        if (component) {
+            this._appRef.detachView(component.hostView);
+            component.destroy();
+        }
+        if (content && content.viewRef) {
+            content.viewRef.destroy();
+        }
+        content = null;
     }
-    getFilter() {
-        let filter = this.state.numericFilters?.find((f) => f.field === this.column.filterField);
-        if (filter === null || filter === undefined) {
-            filter = this.state.addNumericFilter(new NumericFilter({
-                value: new NumericFilterValue(),
-                field: this.column.filterField,
-                name: this.column.name,
-                strict: true,
-            }));
+    getContext(content, context) {
+        if (content instanceof TemplateRef) {
+            return {
+                $implicit: context,
+                data: context,
+            };
         }
-        return filter;
+        return context;
     }
-}
-NumericFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NumericFilterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TetaConfigService }], target: i0.ɵɵFactoryTarget.Component });
-NumericFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: NumericFilterComponent, selector: "teta-numeric-filter", inputs: { column: "column", data: "data", filterOptions: "filterOptions", state: "state" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-row padding-3\" *ngIf=\"locale | async as loc\">\n  <teta-input [label]=\"loc.from\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [tetaOnlyNumber]=\"true\"\n           [ngModel]=\"filter.value?.greaterThan\"\n           (ngModelChange)=\"filter.value.greaterThan=$event\"/>\n  </teta-input>\n  <teta-input [label]=\"loc.to\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [tetaOnlyNumber]=\"true\"\n           [ngModel]=\"filter.value?.lessThan\"\n           (ngModelChange)=\"filter.value.lessThan=$event\"/>\n  </teta-input>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "horizontal", "required"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NumericFilterComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-numeric-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-row padding-3\" *ngIf=\"locale | async as loc\">\n  <teta-input [label]=\"loc.from\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [tetaOnlyNumber]=\"true\"\n           [ngModel]=\"filter.value?.greaterThan\"\n           (ngModelChange)=\"filter.value.greaterThan=$event\"/>\n  </teta-input>\n  <teta-input [label]=\"loc.to\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [tetaOnlyNumber]=\"true\"\n           [ngModel]=\"filter.value?.lessThan\"\n           (ngModelChange)=\"filter.value.lessThan=$event\"/>\n  </teta-input>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: TetaConfigService }]; }, propDecorators: { column: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], filterOptions: [{
-                type: Input
-            }], filterChanged: [{
-                type: Output
-            }], state: [{
-                type: Input
-            }] } });
-
-var StringFilterType;
-(function (StringFilterType) {
-    /**
-     * Строгое совпадение
-     */
-    StringFilterType[StringFilterType["Equals"] = 1] = "Equals";
-    /**
-     * Начинается с указанной подстроки
-     */
-    StringFilterType[StringFilterType["StartsWith"] = 2] = "StartsWith";
-    /**
-     * Оканчивается указанной подстрокой
-     */
-    StringFilterType[StringFilterType["EndsWith"] = 3] = "EndsWith";
-    /**
-     * Содержит указанную подстроку
-     */
-    StringFilterType[StringFilterType["Contains"] = 4] = "Contains";
-})(StringFilterType || (StringFilterType = {}));
-
-class StringFilter extends FilterBase {
-    constructor(options) {
-        super(options);
-        if (options) {
-            this.value = options.value || this.value;
-            this.type = options.type || StringFilterType.Contains;
+    getInjector(data, parent) {
+        return Injector.create({
+            providers: [
+                {
+                    provide: DynamicData,
+                    useValue: data,
+                },
+            ],
+            parent,
+        });
+    }
+    fromString(content) {
+        return new TetaContentRef([[this._renderer.createText(`${content}`)]]);
+    }
+    fromTemplate(content, context) {
+        const viewRef = content.createEmbeddedView(context);
+        this._appRef.attachView(viewRef);
+        return new TetaContentRef([viewRef.rootNodes], viewRef);
+    }
+    fromComponent(content, injector, context) {
+        const componentFactory = this._componentFactoryResolver.resolveComponentFactory(content);
+        const componentRef = componentFactory.create(injector);
+        for (const key in context) {
+            if (context.hasOwnProperty(key)) {
+                componentRef.instance[key] = context[key];
+            }
         }
+        const componentNativeEl = componentRef.location.nativeElement;
+        this._appRef.attachView(componentRef.hostView);
+        return new TetaContentRef([[componentNativeEl]], componentRef.hostView, componentRef);
     }
 }
+DynamicComponentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DynamicComponentService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.RendererFactory2 }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
+DynamicComponentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DynamicComponentService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DynamicComponentService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.RendererFactory2 }, { type: i0.ApplicationRef }]; } });
 
-class StringFilterComponent extends FilterComponentBase {
-    constructor(changeDetector, _config) {
-        super();
-        this.changeDetector = changeDetector;
-        this._config = _config;
-        this.filterOptions = [];
-        this.filterChanged = new EventEmitter();
-        this.locale = this._config.locale;
+class DynamicContentBaseDirective {
+    constructor(_document, _elementRef, _service, _injector, _zone, _cdr) {
+        this._document = _document;
+        this._elementRef = _elementRef;
+        this._service = _service;
+        this._injector = _injector;
+        this._zone = _zone;
+        this._cdr = _cdr;
+        this.align = Align.left;
+        this.verticalAlign = VerticalAlign.bottom;
+        this.openChange = new EventEmitter();
+        this._alive = true;
+        this._open = false;
+        this._zone.onStable
+            .pipe(takeWhile((_) => this._alive), filter((_) => this._open))
+            .subscribe((_) => {
+            this.setPosition();
+        });
     }
-    set state(val) {
-        this.state$ = val;
-        this.filter = this.getFilter();
-        this.changeDetector.detectChanges();
+    set open(open) {
+        this._open = open;
+        if (this._open) {
+            this.createContentRef();
+        }
+        else {
+            this.destroyContentRef();
+        }
     }
-    get state() {
-        return this.state$;
+    ngOnDestroy() {
+        this._alive = false;
+        this.destroyContentRef();
     }
     ngOnInit() {
     }
-    setFilter() {
-        this.filterChanged.emit(this.filter);
-    }
-    getFilter() {
-        let filter = this.state.stringFilters.find((f) => f.field === this.column.filterField);
-        if (!filter) {
-            filter = this.state.addStringFilter(new StringFilter({
-                value: '',
-                field: this.column.filterField,
-                type: this.column.stringFilterType,
-                name: this.column.name,
-            }));
+    createContentRef(className) {
+        if (!this._componentRef) {
+            this._open = true;
+            const injector = this._service.getInjector(this.data, this._injector);
+            const context = this._service.getContext(this._dynamicContent, this.data);
+            this._content = this._service.createContent(this._dynamicContent, this._injector, context);
+            this._componentRef = this._service.createComponent(PopupContentComponent, this._content, injector, this.appendToBody ? this._document.body : this._elementRef.nativeElement);
+            if (className) {
+                this._componentRef.instance.addClass(className);
+            }
         }
-        filter.type = this.column.stringFilterType;
-        return filter;
+        return this._componentRef;
     }
-}
-StringFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: StringFilterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TetaConfigService }], target: i0.ɵɵFactoryTarget.Component });
+    destroyContentRef() {
+        this._open = false;
+        this._service.destroy(this._componentRef, this._content, this.appendToBody ? this._document.body : this._elementRef.nativeElement);
+        this._componentRef = null;
+    }
+}
+DynamicContentBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DynamicContentBaseDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+DynamicContentBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: DynamicContentBaseDirective, inputs: { data: "data", className: "className", align: "align", verticalAlign: "verticalAlign", appendToBody: "appendToBody", open: "open" }, outputs: { openChange: "openChange" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DynamicContentBaseDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: undefined }, { type: i0.ElementRef }, { type: DynamicComponentService }, { type: i0.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], verticalAlign: [{
+                type: Input
+            }], appendToBody: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }], openChange: [{
+                type: Output
+            }] } });
+
+class HintDirective extends DynamicContentBaseDirective {
+    constructor(_document, _elementRef, _service, _injector, _zone, _cdr) {
+        super(_document, _elementRef, _service, _injector, _zone, _cdr);
+        this._document = _document;
+        this._elementRef = _elementRef;
+        this._service = _service;
+        this._injector = _injector;
+        this._zone = _zone;
+        this._cdr = _cdr;
+        this.align = Align.center;
+        this.verticalAlign = VerticalAlign.top;
+        this.delay = 300;
+        this.overflownOnly = false;
+    }
+    get _dynamicContent() {
+        return this.tetaHint;
+    }
+    mouseenter() {
+        clearTimeout(this._timeout);
+        this._timeout = setTimeout(() => {
+            this.createHint();
+        }, this.delay);
+    }
+    mouseleave() {
+        clearTimeout(this._timeout);
+        if (this._open && this._componentRef) {
+            this._timeout = setTimeout(() => {
+                this.destroyContentRef();
+            }, this.delay);
+        }
+    }
+    click(event) {
+        if (this._open &&
+            this._componentRef &&
+            DomUtil.clickedInside(this._componentRef.location.nativeElement, event)) {
+            event.stopPropagation();
+        }
+    }
+    setPosition() {
+        if (this._componentRef && this._open) {
+            if (!this._componentRect) {
+                this._componentRect =
+                    this._componentRef.location.nativeElement.getBoundingClientRect();
+            }
+            const position = PositionUtil.getPosition(this._elementRef.nativeElement.getBoundingClientRect(), this._componentRect, this.align, this.verticalAlign, 0, 4);
+            PositionUtil.setElementPosition(this._componentRef.location.nativeElement, position);
+        }
+    }
+    createHint() {
+        if (!this._dynamicContent || (this.overflownOnly && !DomUtil.isOverflown(this._elementRef.nativeElement))) {
+            return;
+        }
+        this._componentRef = this.createContentRef();
+        this._componentRef.instance.className = [
+            ...ArrayUtil.asArray(this.className),
+            'hint',
+        ];
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+}
+HintDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HintDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: DynamicComponentService }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+HintDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: HintDirective, selector: "[tetaHint]", inputs: { tetaHint: "tetaHint", align: "align", verticalAlign: "verticalAlign", delay: "delay", overflownOnly: "overflownOnly" }, host: { listeners: { "mouseenter": "mouseenter($event)", "mouseleave": "mouseleave($event)", "click": "click($event)" } }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HintDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaHint]',
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.ElementRef }, { type: DynamicComponentService }, { type: i0.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tetaHint: [{
+                type: Input
+            }], align: [{
+                type: Input
+            }], verticalAlign: [{
+                type: Input
+            }], delay: [{
+                type: Input
+            }], overflownOnly: [{
+                type: Input
+            }], mouseenter: [{
+                type: HostListener,
+                args: ['mouseenter', ['$event']]
+            }], mouseleave: [{
+                type: HostListener,
+                args: ['mouseleave', ['$event']]
+            }], click: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class InputComponent {
+    constructor() {
+        this.required = false;
+    }
+    get column() {
+        return !this.horizontal;
+    }
+    ngOnInit() { }
+}
+InputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: InputComponent, selector: "teta-input", inputs: { label: "label", horizontal: "horizontal", required: "required" }, host: { properties: { "class.row": "this.horizontal", "class.column": "this.column" } }, ngImport: i0, template: "<div class=\"font-caption color-text-90 align-center row nowrap overflow-hidden text-overflow-ellipsis\"\n     [class.row_6]=\"horizontal\"\n     [class.text-field_required]=\"required\"\n     *ngIf=\"label?.length > 0\">\n  <span class=\"overflow-hidden text-overflow-ellipsis\"\n        [tetaHint]=\"label\"\n        [overflownOnly]=\"true\">\n    {{label}}\n  </span>\n</div>\n<div class=\"input-container\" [class.row_6]=\"horizontal\">\n  <ng-content></ng-content>\n  <div class=\"input-message font-error-message\">\n    <ng-content select=\"message\"></ng-content>\n  </div>\n</div>\n", styles: [":host{display:flex;grid-gap:4px;flex-grow:1;flex-basis:10px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: HintDirective, selector: "[tetaHint]", inputs: ["tetaHint", "align", "verticalAlign", "delay", "overflownOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"font-caption color-text-90 align-center row nowrap overflow-hidden text-overflow-ellipsis\"\n     [class.row_6]=\"horizontal\"\n     [class.text-field_required]=\"required\"\n     *ngIf=\"label?.length > 0\">\n  <span class=\"overflow-hidden text-overflow-ellipsis\"\n        [tetaHint]=\"label\"\n        [overflownOnly]=\"true\">\n    {{label}}\n  </span>\n</div>\n<div class=\"input-container\" [class.row_6]=\"horizontal\">\n  <ng-content></ng-content>\n  <div class=\"input-message font-error-message\">\n    <ng-content select=\"message\"></ng-content>\n  </div>\n</div>\n", styles: [":host{display:flex;grid-gap:4px;flex-grow:1;flex-basis:10px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { label: [{
+                type: Input
+            }], horizontal: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.row']
+            }], required: [{
+                type: Input
+            }], column: [{
+                type: HostBinding,
+                args: ['class.column']
+            }] } });
+
+class NumericFilterComponent extends FilterComponentBase {
+    constructor(changeDetector, _config) {
+        super();
+        this.changeDetector = changeDetector;
+        this._config = _config;
+        this.filterOptions = [];
+        this.filterChanged = new EventEmitter();
+        this.locale = this._config.locale;
+    }
+    set state(val) {
+        this.state$ = val;
+        this.filter = this.getFilter();
+        this.changeDetector.detectChanges();
+    }
+    get state() {
+        return this.state$;
+    }
+    ngOnInit() {
+        this.filter = this.getFilter();
+    }
+    getFilter() {
+        let filter = this.state.numericFilters?.find((f) => f.field === this.column.filterField);
+        if (filter === null || filter === undefined) {
+            filter = this.state.addNumericFilter(new NumericFilter({
+                value: new NumericFilterValue(),
+                field: this.column.filterField,
+                name: this.column.name,
+                strict: true,
+            }));
+        }
+        return filter;
+    }
+}
+NumericFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NumericFilterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TetaConfigService }], target: i0.ɵɵFactoryTarget.Component });
+NumericFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: NumericFilterComponent, selector: "teta-numeric-filter", inputs: { column: "column", data: "data", filterOptions: "filterOptions", state: "state" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"form-row padding-3\" *ngIf=\"locale | async as loc\">\n  <teta-input [label]=\"loc.from\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [tetaOnlyNumber]=\"true\"\n           [ngModel]=\"filter.value?.greaterThan\"\n           (ngModelChange)=\"filter.value.greaterThan=$event\"/>\n  </teta-input>\n  <teta-input [label]=\"loc.to\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [tetaOnlyNumber]=\"true\"\n           [ngModel]=\"filter.value?.lessThan\"\n           (ngModelChange)=\"filter.value.lessThan=$event\"/>\n  </teta-input>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "horizontal", "required"] }, { kind: "directive", type: OnlyNumberDirective, selector: "[tetaOnlyNumber]", inputs: ["tetaOnlyNumber", "allowDecimals", "allowSign", "decimalSeparator", "commaSeparator"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NumericFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-numeric-filter', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-row padding-3\" *ngIf=\"locale | async as loc\">\n  <teta-input [label]=\"loc.from\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [tetaOnlyNumber]=\"true\"\n           [ngModel]=\"filter.value?.greaterThan\"\n           (ngModelChange)=\"filter.value.greaterThan=$event\"/>\n  </teta-input>\n  <teta-input [label]=\"loc.to\">\n    <input class=\"input\" type=\"text\"\n           style=\"width: 110px\"\n           [tetaOnlyNumber]=\"true\"\n           [ngModel]=\"filter.value?.lessThan\"\n           (ngModelChange)=\"filter.value.lessThan=$event\"/>\n  </teta-input>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: TetaConfigService }]; }, propDecorators: { column: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], filterOptions: [{
+                type: Input
+            }], filterChanged: [{
+                type: Output
+            }], state: [{
+                type: Input
+            }] } });
+
+var StringFilterType;
+(function (StringFilterType) {
+    /**
+     * Строгое совпадение
+     */
+    StringFilterType[StringFilterType["Equals"] = 1] = "Equals";
+    /**
+     * Начинается с указанной подстроки
+     */
+    StringFilterType[StringFilterType["StartsWith"] = 2] = "StartsWith";
+    /**
+     * Оканчивается указанной подстрокой
+     */
+    StringFilterType[StringFilterType["EndsWith"] = 3] = "EndsWith";
+    /**
+     * Содержит указанную подстроку
+     */
+    StringFilterType[StringFilterType["Contains"] = 4] = "Contains";
+})(StringFilterType || (StringFilterType = {}));
+
+class StringFilter extends FilterBase {
+    constructor(options) {
+        super(options);
+        if (options) {
+            this.value = options.value || this.value;
+            this.type = options.type || StringFilterType.Contains;
+        }
+    }
+}
+
+class StringFilterComponent extends FilterComponentBase {
+    constructor(changeDetector, _config) {
+        super();
+        this.changeDetector = changeDetector;
+        this._config = _config;
+        this.filterOptions = [];
+        this.filterChanged = new EventEmitter();
+        this.locale = this._config.locale;
+    }
+    set state(val) {
+        this.state$ = val;
+        this.filter = this.getFilter();
+        this.changeDetector.detectChanges();
+    }
+    get state() {
+        return this.state$;
+    }
+    ngOnInit() {
+    }
+    setFilter() {
+        this.filterChanged.emit(this.filter);
+    }
+    getFilter() {
+        let filter = this.state.stringFilters.find((f) => f.field === this.column.filterField);
+        if (!filter) {
+            filter = this.state.addStringFilter(new StringFilter({
+                value: '',
+                field: this.column.filterField,
+                type: this.column.stringFilterType,
+                name: this.column.name,
+            }));
+        }
+        filter.type = this.column.stringFilterType;
+        return filter;
+    }
+}
+StringFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: StringFilterComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: TetaConfigService }], target: i0.ɵɵFactoryTarget.Component });
 StringFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: StringFilterComponent, selector: "teta-string-filter", inputs: { column: "column", data: "data", filterOptions: "filterOptions", state: "state" }, outputs: { filterChanged: "filterChanged" }, usesInheritance: true, ngImport: i0, template: "<div class=\"padding-3\">\n  <teta-input [label]=\"(locale | async)?.search\">\n    <input type=\"text\" class=\"input\" [(ngModel)]=\"filter.value\" (blur)=\"setFilter()\" (keydown.enter)=\"setFilter()\" />\n  </teta-input>\n</div>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "horizontal", "required"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: StringFilterComponent, decorators: [{
             type: Component,
@@ -4805,17 +5081,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 args: ['class.form-group-title']
             }] } });
 
+class HintModule {
+}
+HintModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+HintModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: HintModule, declarations: [HintDirective], imports: [CommonModule,
+        DynamicComponentModule], exports: [HintDirective] });
+HintModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HintModule, imports: [CommonModule,
+        DynamicComponentModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HintModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [HintDirective],
+                    exports: [HintDirective],
+                    imports: [
+                        CommonModule,
+                        DynamicComponentModule
+                    ]
+                }]
+        }] });
+
 class InputModule {
 }
 InputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: InputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: InputModule, declarations: [InputComponent, TextFieldComponent, FormGroupTitleComponent], imports: [CommonModule, IconModule, FormsModule, OnlyNumberModule], exports: [InputComponent, TextFieldComponent, FormGroupTitleComponent] });
-InputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: InputModule, imports: [CommonModule, IconModule, FormsModule, OnlyNumberModule] });
+InputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: InputModule, declarations: [InputComponent, TextFieldComponent, FormGroupTitleComponent], imports: [CommonModule, IconModule, FormsModule, OnlyNumberModule, HintModule], exports: [InputComponent, TextFieldComponent, FormGroupTitleComponent] });
+InputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: InputModule, imports: [CommonModule, IconModule, FormsModule, OnlyNumberModule, HintModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: InputModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [InputComponent, TextFieldComponent, FormGroupTitleComponent],
                     exports: [InputComponent, TextFieldComponent, FormGroupTitleComponent],
-                    imports: [CommonModule, IconModule, FormsModule, OnlyNumberModule],
+                    imports: [CommonModule, IconModule, FormsModule, OnlyNumberModule, HintModule],
                 }]
         }] });
 
@@ -5423,16 +5718,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
 class CurrentModal {
 }
 
-class DynamicData {
-    constructor(value) {
-        for (const key in value) {
-            if (value.hasOwnProperty(key)) {
-                this[key] = value[key];
-            }
-        }
-    }
-}
-
 class DialogComponent {
     constructor(modal, data) {
         this.modal = modal;
@@ -5493,150 +5778,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                     exports: [ModalContainerComponent, DialogComponent],
                     imports: [
                         CommonModule,
-                        ToolbarModule,
-                        ButtonModule,
-                        TranslocoModule,
-                        IconModule,
-                    ],
-                    providers: [
-                        {
-                            provide: TRANSLOCO_SCOPE,
-                            useValue: { scope: 'common', alias: 'common' },
-                            multi: true,
-                        },
-                    ],
-                }]
-        }] });
-
-class ModalInstance {
-    constructor(_window, _content) {
-        this._window = _window;
-        this._content = _content;
-        this._onClose = new Subject();
-        this.close = (event) => {
-            this._onClose.next(event);
-            this._onClose.complete();
-            this.destroy();
-        };
-        this.onClose = this._onClose.asObservable();
-        if (this._window && this._window.instance) {
-            this._window.instance.closeEvent.subscribe((event) => {
-                this.close(event);
-            });
-        }
-    }
-    get window() {
-        return this._window;
-    }
-    get component() {
-        return this._content.componentRef ? this._content.componentRef : null;
-    }
-    destroy() {
-        this._window.destroy();
-        if (this._content && this._content.viewRef) {
-            setTimeout(() => {
-                this._content.viewRef.destroy();
-            }, 150);
-        }
-    }
-}
-
-class TetaContentRef {
-    constructor(nodes, viewRef, componentRef) {
-        this.nodes = nodes;
-        this.viewRef = viewRef;
-        this.componentRef = componentRef;
-    }
-}
-
-class DynamicComponentService {
-    constructor(_componentFactoryResolver, _rendererFactory, _appRef) {
-        this._componentFactoryResolver = _componentFactoryResolver;
-        this._rendererFactory = _rendererFactory;
-        this._appRef = _appRef;
-        this._renderer = this._rendererFactory.createRenderer(null, null);
-    }
-    createComponent(component, contentRef, injector, container) {
-        const componentRef = this._componentFactoryResolver
-            .resolveComponentFactory(component)
-            .create(injector, contentRef.nodes);
-        this._appRef.attachView(componentRef.hostView);
-        container.appendChild(componentRef.location.nativeElement);
-        return componentRef;
-    }
-    createContent(content, injector, context) {
-        if (content === null || content === undefined) {
-            throw new Error('Content is undefined');
-        }
-        if (typeof content === 'string') {
-            return this.fromString(content);
-        }
-        else if (content instanceof TemplateRef) {
-            return this.fromTemplate(content, context);
-        }
-        else {
-            return this.fromComponent(content, injector, context);
-        }
-    }
-    destroy(component, content, container) {
-        if (component) {
-            this._appRef.detachView(component.hostView);
-            component.destroy();
-        }
-        if (content && content.viewRef) {
-            content.viewRef.destroy();
-        }
-        content = null;
-    }
-    getContext(content, context) {
-        if (content instanceof TemplateRef) {
-            return {
-                $implicit: context,
-                data: context,
-            };
+                        ToolbarModule,
+                        ButtonModule,
+                        TranslocoModule,
+                        IconModule,
+                    ],
+                    providers: [
+                        {
+                            provide: TRANSLOCO_SCOPE,
+                            useValue: { scope: 'common', alias: 'common' },
+                            multi: true,
+                        },
+                    ],
+                }]
+        }] });
+
+class ModalInstance {
+    constructor(_window, _content) {
+        this._window = _window;
+        this._content = _content;
+        this._onClose = new Subject();
+        this.close = (event) => {
+            this._onClose.next(event);
+            this._onClose.complete();
+            this.destroy();
+        };
+        this.onClose = this._onClose.asObservable();
+        if (this._window && this._window.instance) {
+            this._window.instance.closeEvent.subscribe((event) => {
+                this.close(event);
+            });
         }
-        return context;
-    }
-    getInjector(data, parent) {
-        return Injector.create({
-            providers: [
-                {
-                    provide: DynamicData,
-                    useValue: data,
-                },
-            ],
-            parent,
-        });
     }
-    fromString(content) {
-        return new TetaContentRef([[this._renderer.createText(`${content}`)]]);
+    get window() {
+        return this._window;
     }
-    fromTemplate(content, context) {
-        const viewRef = content.createEmbeddedView(context);
-        this._appRef.attachView(viewRef);
-        return new TetaContentRef([viewRef.rootNodes], viewRef);
+    get component() {
+        return this._content.componentRef ? this._content.componentRef : null;
     }
-    fromComponent(content, injector, context) {
-        const componentFactory = this._componentFactoryResolver.resolveComponentFactory(content);
-        const componentRef = componentFactory.create(injector);
-        for (const key in context) {
-            if (context.hasOwnProperty(key)) {
-                componentRef.instance[key] = context[key];
-            }
+    destroy() {
+        this._window.destroy();
+        if (this._content && this._content.viewRef) {
+            setTimeout(() => {
+                this._content.viewRef.destroy();
+            }, 150);
         }
-        const componentNativeEl = componentRef.location.nativeElement;
-        this._appRef.attachView(componentRef.hostView);
-        return new TetaContentRef([[componentNativeEl]], componentRef.hostView, componentRef);
     }
 }
-DynamicComponentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DynamicComponentService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.RendererFactory2 }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Injectable });
-DynamicComponentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DynamicComponentService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DynamicComponentService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.RendererFactory2 }, { type: i0.ApplicationRef }]; } });
 
 class ModalService {
     constructor(_document, _injector, _factory) {
@@ -6215,169 +6403,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 args: ['click']
             }] } });
 
-class DynamicContentBaseDirective {
-    constructor(_document, _elementRef, _service, _injector, _zone, _cdr) {
-        this._document = _document;
-        this._elementRef = _elementRef;
-        this._service = _service;
-        this._injector = _injector;
-        this._zone = _zone;
-        this._cdr = _cdr;
-        this.align = Align.left;
-        this.verticalAlign = VerticalAlign.bottom;
-        this.openChange = new EventEmitter();
-        this._alive = true;
-        this._open = false;
-        this._zone.onStable
-            .pipe(takeWhile((_) => this._alive), filter((_) => this._open))
-            .subscribe((_) => {
-            this.setPosition();
-        });
-    }
-    set open(open) {
-        this._open = open;
-        if (this._open) {
-            this.createContentRef();
-        }
-        else {
-            this.destroyContentRef();
-        }
-    }
-    ngOnDestroy() {
-        this._alive = false;
-        this.destroyContentRef();
-    }
-    ngOnInit() {
-    }
-    createContentRef(className) {
-        if (!this._componentRef) {
-            this._open = true;
-            const injector = this._service.getInjector(this.data, this._injector);
-            const context = this._service.getContext(this._dynamicContent, this.data);
-            this._content = this._service.createContent(this._dynamicContent, this._injector, context);
-            this._componentRef = this._service.createComponent(PopupContentComponent, this._content, injector, this.appendToBody ? this._document.body : this._elementRef.nativeElement);
-            if (className) {
-                this._componentRef.instance.addClass(className);
-            }
-        }
-        return this._componentRef;
-    }
-    destroyContentRef() {
-        this._open = false;
-        this._service.destroy(this._componentRef, this._content, this.appendToBody ? this._document.body : this._elementRef.nativeElement);
-        this._componentRef = null;
-    }
-}
-DynamicContentBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DynamicContentBaseDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-DynamicContentBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: DynamicContentBaseDirective, inputs: { data: "data", className: "className", align: "align", verticalAlign: "verticalAlign", appendToBody: "appendToBody", open: "open" }, outputs: { openChange: "openChange" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DynamicContentBaseDirective, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: undefined }, { type: i0.ElementRef }, { type: DynamicComponentService }, { type: i0.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], align: [{
-                type: Input
-            }], verticalAlign: [{
-                type: Input
-            }], appendToBody: [{
-                type: Input
-            }], open: [{
-                type: Input
-            }], openChange: [{
-                type: Output
-            }] } });
-
-class HintDirective extends DynamicContentBaseDirective {
-    constructor(_document, _elementRef, _service, _injector, _zone, _cdr) {
-        super(_document, _elementRef, _service, _injector, _zone, _cdr);
-        this._document = _document;
-        this._elementRef = _elementRef;
-        this._service = _service;
-        this._injector = _injector;
-        this._zone = _zone;
-        this._cdr = _cdr;
-        this.align = Align.center;
-        this.verticalAlign = VerticalAlign.top;
-        this.delay = 300;
-    }
-    get _dynamicContent() {
-        return this.tetaHint;
-    }
-    mouseenter() {
-        clearTimeout(this._timeout);
-        this._timeout = setTimeout(() => {
-            this.createHint();
-        }, this.delay);
-    }
-    mouseleave() {
-        clearTimeout(this._timeout);
-        if (this._open && this._componentRef) {
-            this._timeout = setTimeout(() => {
-                this.destroyContentRef();
-            }, this.delay);
-        }
-    }
-    click(event) {
-        if (this._open &&
-            this._componentRef &&
-            DomUtil.clickedInside(this._componentRef.location.nativeElement, event)) {
-            event.stopPropagation();
-        }
-    }
-    setPosition() {
-        if (this._componentRef && this._open) {
-            if (!this._componentRect) {
-                this._componentRect =
-                    this._componentRef.location.nativeElement.getBoundingClientRect();
-            }
-            const position = PositionUtil.getPosition(this._elementRef.nativeElement.getBoundingClientRect(), this._componentRect, this.align, this.verticalAlign, 0, 4);
-            PositionUtil.setElementPosition(this._componentRef.location.nativeElement, position);
-        }
-    }
-    createHint() {
-        if (!this._dynamicContent) {
-            return;
-        }
-        this._componentRef = this.createContentRef();
-        this._componentRef.instance.className = [
-            ...ArrayUtil.asArray(this.className),
-            'hint',
-        ];
-    }
-    ngOnDestroy() {
-        super.ngOnDestroy();
-    }
-}
-HintDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HintDirective, deps: [{ token: DOCUMENT }, { token: i0.ElementRef }, { token: DynamicComponentService }, { token: i0.Injector }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-HintDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: HintDirective, selector: "[tetaHint]", inputs: { tetaHint: "tetaHint", align: "align", verticalAlign: "verticalAlign", delay: "delay" }, host: { listeners: { "mouseenter": "mouseenter($event)", "mouseleave": "mouseleave($event)", "click": "click($event)" } }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HintDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tetaHint]',
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.ElementRef }, { type: DynamicComponentService }, { type: i0.Injector }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tetaHint: [{
-                type: Input
-            }], align: [{
-                type: Input
-            }], verticalAlign: [{
-                type: Input
-            }], delay: [{
-                type: Input
-            }], mouseenter: [{
-                type: HostListener,
-                args: ['mouseenter', ['$event']]
-            }], mouseleave: [{
-                type: HostListener,
-                args: ['mouseleave', ['$event']]
-            }], click: [{
-                type: HostListener,
-                args: ['click', ['$event']]
-            }] } });
-
 class PropertyGridItemComponent {
     constructor(_transloco) {
         this._transloco = _transloco;
@@ -6448,7 +6473,7 @@ class PropertyGridItemComponent {
     }
 }
 PropertyGridItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PropertyGridItemComponent, deps: [{ token: i1$1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
-PropertyGridItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PropertyGridItemComponent, selector: "teta-property-grid-item", inputs: { column: "column", hideNonEditable: "hideNonEditable", dict: "dict", formGroup: "formGroup", horizontal: "horizontal" }, outputs: { controlValueChange: "controlValueChange" }, ngImport: i0, template: "<teta-input [label]=\"caption\"\n            [tetaHint]=\"column.hint\"\n            [align]=\"align.left\"\n            [formGroup]=\"formGroup\"\n            [horizontal]=\"horizontal\"\n            [required]=\"column.required\"\n            *ngIf=\"column.editable || !hideNonEditable\">\n  <ng-container [ngSwitch]=\"column.filterType\">\n    <teta-select class=\"row_auto\"\n                 *ngSwitchCase=\"filterTypeEnum.list\"\n                 [searchRef]=\"getDict()?.length > 10 ? 'name' : ''\"\n                 [allowNull]=\"!column.required\"\n                 [appendToBody]=\"true\"\n                 [invalid]=\"controlIsInvalid(column.name)\"\n                 [formControlName]=\"column.name\"\n                 [options]=\"getDict()\"\n                 [valueRef]=\"'id'\"\n                 [textRef]=\"'name'\"\n                 [multiple]=\"false\"></teta-select>\n    <teta-date-picker *ngSwitchCase=\"filterTypeEnum.date\"\n                      class=\"row_auto\"\n                      [appendToBody]=\"true\"\n                      [invalid]=\"controlIsInvalid(column.name)\"\n                      [formControlName]=\"column.name\"></teta-date-picker>\n    <teta-toggle *ngSwitchCase=\"filterTypeEnum.boolean\"\n                 [formControlName]=\"column.name\">{{column.caption}}</teta-toggle>\n    <teta-text-field class=\"row_auto\"\n                     *ngSwitchDefault\n                     (focusout)=\"valueChange()\"\n                     [onlyNumber]=\"column.filterType === filterTypeEnum.number\"\n                     [placeholder]=\"column.caption\"\n                     [invalid]=\"controlIsInvalid(column.name)\"\n                     [formControlName]=\"column.name\"></teta-text-field>\n  </ng-container>\n  <div *ngIf=\"controlIsInvalid(column.name)\"\n       ngProjectAs=\"message\"\n       class=\"color-red-50\">\n    {{getError(column)}}\n  </div>\n</teta-input>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["disabled", "invalid", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "minYearDate", "maxYearDate", "align", "verticalAlign", "appendToBody", "allowNull", "backdrop", "showTime", "format"] }, { kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "valueRef", "textRef", "searchRef"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "horizontal", "required"] }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "invalid"] }, { kind: "component", type: ToggleComponent, selector: "teta-toggle", inputs: ["palette", "noLabel", "disabled"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: HintDirective, selector: "[tetaHint]", inputs: ["tetaHint", "align", "verticalAlign", "delay"] }] });
+PropertyGridItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PropertyGridItemComponent, selector: "teta-property-grid-item", inputs: { column: "column", hideNonEditable: "hideNonEditable", dict: "dict", formGroup: "formGroup", horizontal: "horizontal" }, outputs: { controlValueChange: "controlValueChange" }, ngImport: i0, template: "<teta-input [label]=\"caption\"\n            [tetaHint]=\"column.hint\"\n            [align]=\"align.left\"\n            [formGroup]=\"formGroup\"\n            [horizontal]=\"horizontal\"\n            [required]=\"column.required\"\n            *ngIf=\"column.editable || !hideNonEditable\">\n  <ng-container [ngSwitch]=\"column.filterType\">\n    <teta-select class=\"row_auto\"\n                 *ngSwitchCase=\"filterTypeEnum.list\"\n                 [searchRef]=\"getDict()?.length > 10 ? 'name' : ''\"\n                 [allowNull]=\"!column.required\"\n                 [appendToBody]=\"true\"\n                 [invalid]=\"controlIsInvalid(column.name)\"\n                 [formControlName]=\"column.name\"\n                 [options]=\"getDict()\"\n                 [valueRef]=\"'id'\"\n                 [textRef]=\"'name'\"\n                 [multiple]=\"false\"></teta-select>\n    <teta-date-picker *ngSwitchCase=\"filterTypeEnum.date\"\n                      class=\"row_auto\"\n                      [appendToBody]=\"true\"\n                      [invalid]=\"controlIsInvalid(column.name)\"\n                      [formControlName]=\"column.name\"></teta-date-picker>\n    <teta-toggle *ngSwitchCase=\"filterTypeEnum.boolean\"\n                 [formControlName]=\"column.name\">{{column.caption}}</teta-toggle>\n    <teta-text-field class=\"row_auto\"\n                     *ngSwitchDefault\n                     (focusout)=\"valueChange()\"\n                     [onlyNumber]=\"column.filterType === filterTypeEnum.number\"\n                     [placeholder]=\"column.caption\"\n                     [invalid]=\"controlIsInvalid(column.name)\"\n                     [formControlName]=\"column.name\"></teta-text-field>\n  </ng-container>\n  <div *ngIf=\"controlIsInvalid(column.name)\"\n       ngProjectAs=\"message\"\n       class=\"color-red-50\">\n    {{getError(column)}}\n  </div>\n</teta-input>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["disabled", "invalid", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "minYearDate", "maxYearDate", "align", "verticalAlign", "appendToBody", "allowNull", "backdrop", "showTime", "format"] }, { kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "valueRef", "textRef", "searchRef"] }, { kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "horizontal", "required"] }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "invalid"] }, { kind: "component", type: ToggleComponent, selector: "teta-toggle", inputs: ["palette", "noLabel", "disabled"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: HintDirective, selector: "[tetaHint]", inputs: ["tetaHint", "align", "verticalAlign", "delay", "overflownOnly"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PropertyGridItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-property-grid-item', template: "<teta-input [label]=\"caption\"\n            [tetaHint]=\"column.hint\"\n            [align]=\"align.left\"\n            [formGroup]=\"formGroup\"\n            [horizontal]=\"horizontal\"\n            [required]=\"column.required\"\n            *ngIf=\"column.editable || !hideNonEditable\">\n  <ng-container [ngSwitch]=\"column.filterType\">\n    <teta-select class=\"row_auto\"\n                 *ngSwitchCase=\"filterTypeEnum.list\"\n                 [searchRef]=\"getDict()?.length > 10 ? 'name' : ''\"\n                 [allowNull]=\"!column.required\"\n                 [appendToBody]=\"true\"\n                 [invalid]=\"controlIsInvalid(column.name)\"\n                 [formControlName]=\"column.name\"\n                 [options]=\"getDict()\"\n                 [valueRef]=\"'id'\"\n                 [textRef]=\"'name'\"\n                 [multiple]=\"false\"></teta-select>\n    <teta-date-picker *ngSwitchCase=\"filterTypeEnum.date\"\n                      class=\"row_auto\"\n                      [appendToBody]=\"true\"\n                      [invalid]=\"controlIsInvalid(column.name)\"\n                      [formControlName]=\"column.name\"></teta-date-picker>\n    <teta-toggle *ngSwitchCase=\"filterTypeEnum.boolean\"\n                 [formControlName]=\"column.name\">{{column.caption}}</teta-toggle>\n    <teta-text-field class=\"row_auto\"\n                     *ngSwitchDefault\n                     (focusout)=\"valueChange()\"\n                     [onlyNumber]=\"column.filterType === filterTypeEnum.number\"\n                     [placeholder]=\"column.caption\"\n                     [invalid]=\"controlIsInvalid(column.name)\"\n                     [formControlName]=\"column.name\"></teta-text-field>\n  </ng-container>\n  <div *ngIf=\"controlIsInvalid(column.name)\"\n       ngProjectAs=\"message\"\n       class=\"color-red-50\">\n    {{getError(column)}}\n  </div>\n</teta-input>\n" }]
@@ -6645,25 +6670,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 }]
         }] });
 
-class HintModule {
-}
-HintModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-HintModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: HintModule, declarations: [HintDirective], imports: [CommonModule,
-        DynamicComponentModule], exports: [HintDirective] });
-HintModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HintModule, imports: [CommonModule,
-        DynamicComponentModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HintModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [HintDirective],
-                    exports: [HintDirective],
-                    imports: [
-                        CommonModule,
-                        DynamicComponentModule
-                    ]
-                }]
-        }] });
-
 class PropertyGridModule {
 }
 PropertyGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PropertyGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -8147,7 +8153,7 @@ class DefaultHeadCellComponent extends HeadCellComponentBase {
     }
 }
 DefaultHeadCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DefaultHeadCellComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DefaultHeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: DefaultHeadCellComponent, selector: "teta-default-head-cell", inputs: { column: "column", columns: "columns", data: "data" }, usesInheritance: true, ngImport: i0, template: "<div class=\"column column_auto\" [tetaHint]=\"column.hint || column.caption\">\n  <div class=\"table-head__cell__text\">\n    {{column.caption}}\n  </div>\n  <div *ngIf=\"column.unit\" class=\"table-head__cell__text font-caption color-text-70\">\n    [{{column.unit}}]\n  </div>\n</div>\n", styles: [":host{align-items:center;justify-content:center;display:flex;min-width:0;padding:6px 8px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: HintDirective, selector: "[tetaHint]", inputs: ["tetaHint", "align", "verticalAlign", "delay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DefaultHeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: DefaultHeadCellComponent, selector: "teta-default-head-cell", inputs: { column: "column", columns: "columns", data: "data" }, usesInheritance: true, ngImport: i0, template: "<div class=\"column column_auto\" [tetaHint]=\"column.hint || column.caption\">\n  <div class=\"table-head__cell__text\">\n    {{column.caption}}\n  </div>\n  <div *ngIf=\"column.unit\" class=\"table-head__cell__text font-caption color-text-70\">\n    [{{column.unit}}]\n  </div>\n</div>\n", styles: [":host{align-items:center;justify-content:center;display:flex;min-width:0;padding:6px 8px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: HintDirective, selector: "[tetaHint]", inputs: ["tetaHint", "align", "verticalAlign", "delay", "overflownOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DefaultHeadCellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-default-head-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"column column_auto\" [tetaHint]=\"column.hint || column.caption\">\n  <div class=\"table-head__cell__text\">\n    {{column.caption}}\n  </div>\n  <div *ngIf=\"column.unit\" class=\"table-head__cell__text font-caption color-text-70\">\n    [{{column.unit}}]\n  </div>\n</div>\n", styles: [":host{align-items:center;justify-content:center;display:flex;min-width:0;padding:6px 8px}\n"] }]
@@ -8329,10 +8335,10 @@ class TabsComponent {
     }
 }
 TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TabsComponent, selector: "teta-tabs", inputs: { activeId: "activeId", destroyOnHide: "destroyOnHide" }, outputs: { tabChange: "tabChange" }, host: { properties: { "class.tabs": "this.classTabs" } }, queries: [{ propertyName: "tabs", predicate: TabComponent }], ngImport: i0, template: "<div class=\"tabs-head\" role=\"tablist\">\n  <div class=\"tabs-head-item\"\n       *ngFor=\"let tab of tabs\"\n       (click)=\"select(tab.id);\"\n       [class.tabs-head-item_active]=\"tab.id === activeId\"\n       [class.tabs-head-item_disabled]=\"tab.disabled\">\n    <span [id]=\"tab.id\" class=\"tabs-title\"\n          role=\"tab\"\n          [attr.tabindex]=\"(tab.disabled ? '-1': undefined)\"\n          [attr.aria-controls]=\"(!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null)\"\n          [attr.aria-expanded]=\"tab.id === activeId\"\n          [attr.aria-disabled]=\"tab.disabled\">\n      {{tab.title}}\n      <ng-template [ngTemplateOutlet]=\"tab.titleTpl?.template\"></ng-template>\n    </span>\n  </div>\n</div>\n<div class=\"tabs-content\">\n  <ng-template ngFor let-tab [ngForOf]=\"tabs\">\n    <ng-container *ngIf=\"!destroyOnHide || tab.id === activeId\">\n      <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.template\"></ng-template>\n    </ng-container>\n  </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TabsComponent, selector: "teta-tabs", inputs: { activeId: "activeId", destroyOnHide: "destroyOnHide" }, outputs: { tabChange: "tabChange" }, host: { properties: { "class.tabs": "this.classTabs" } }, queries: [{ propertyName: "tabs", predicate: TabComponent }], ngImport: i0, template: "<div class=\"tabs-head\" role=\"tablist\">\n  <div class=\"tabs-head-item\"\n       *ngFor=\"let tab of tabs\"\n       (click)=\"select(tab.id);\"\n       [class.tabs-head-item_active]=\"tab.id === activeId\"\n       [class.tabs-head-item_disabled]=\"tab.disabled\">\n    <span [id]=\"tab.id\" class=\"tabs-title\"\n          role=\"tab\"\n          [attr.tabindex]=\"(tab.disabled ? '-1': undefined)\"\n          [attr.aria-controls]=\"(!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null)\"\n          [attr.aria-expanded]=\"tab.id === activeId\"\n          [attr.aria-disabled]=\"tab.disabled\">\n      {{tab.title}}\n      <ng-template [ngTemplateOutlet]=\"tab.titleTpl?.template\"></ng-template>\n    </span>\n  </div>\n  <ng-content></ng-content>\n</div>\n<div class=\"tabs-content\">\n  <ng-template ngFor let-tab [ngForOf]=\"tabs\">\n    <ng-container *ngIf=\"!destroyOnHide || tab.id === activeId\">\n      <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.template\"></ng-template>\n    </ng-container>\n  </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-tabs', template: "<div class=\"tabs-head\" role=\"tablist\">\n  <div class=\"tabs-head-item\"\n       *ngFor=\"let tab of tabs\"\n       (click)=\"select(tab.id);\"\n       [class.tabs-head-item_active]=\"tab.id === activeId\"\n       [class.tabs-head-item_disabled]=\"tab.disabled\">\n    <span [id]=\"tab.id\" class=\"tabs-title\"\n          role=\"tab\"\n          [attr.tabindex]=\"(tab.disabled ? '-1': undefined)\"\n          [attr.aria-controls]=\"(!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null)\"\n          [attr.aria-expanded]=\"tab.id === activeId\"\n          [attr.aria-disabled]=\"tab.disabled\">\n      {{tab.title}}\n      <ng-template [ngTemplateOutlet]=\"tab.titleTpl?.template\"></ng-template>\n    </span>\n  </div>\n</div>\n<div class=\"tabs-content\">\n  <ng-template ngFor let-tab [ngForOf]=\"tabs\">\n    <ng-container *ngIf=\"!destroyOnHide || tab.id === activeId\">\n      <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.template\"></ng-template>\n    </ng-container>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'teta-tabs', template: "<div class=\"tabs-head\" role=\"tablist\">\n  <div class=\"tabs-head-item\"\n       *ngFor=\"let tab of tabs\"\n       (click)=\"select(tab.id);\"\n       [class.tabs-head-item_active]=\"tab.id === activeId\"\n       [class.tabs-head-item_disabled]=\"tab.disabled\">\n    <span [id]=\"tab.id\" class=\"tabs-title\"\n          role=\"tab\"\n          [attr.tabindex]=\"(tab.disabled ? '-1': undefined)\"\n          [attr.aria-controls]=\"(!destroyOnHide || tab.id === activeId ? tab.id + '-panel' : null)\"\n          [attr.aria-expanded]=\"tab.id === activeId\"\n          [attr.aria-disabled]=\"tab.disabled\">\n      {{tab.title}}\n      <ng-template [ngTemplateOutlet]=\"tab.titleTpl?.template\"></ng-template>\n    </span>\n  </div>\n  <ng-content></ng-content>\n</div>\n<div class=\"tabs-content\">\n  <ng-template ngFor let-tab [ngForOf]=\"tabs\">\n    <ng-container *ngIf=\"!destroyOnHide || tab.id === activeId\">\n      <ng-template [ngTemplateOutlet]=\"tab.contentTpl?.template\"></ng-template>\n    </ng-container>\n  </ng-template>\n</div>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { classTabs: [{
                 type: HostBinding,
                 args: ['class.tabs']
@@ -9465,10 +9471,10 @@ class StringCellComponent extends CellComponentBase {
     }
 }
 StringCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: StringCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-StringCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: StringCellComponent, selector: "teta-string-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row[column.name]}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row[column.name]\"\n       (ngModelChange)=\"row[column.name]=$event\"/>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+StringCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: StringCellComponent, selector: "teta-string-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [tetaHint]=\"row[column.name]\"\n      [appendToBody]=\"true\"\n      [overflownOnly]=\"true\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row[column.name]}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row[column.name]\"\n       (ngModelChange)=\"row[column.name]=$event\"/>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: HintDirective, selector: "[tetaHint]", inputs: ["tetaHint", "align", "verticalAlign", "delay", "overflownOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: StringCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-string-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row[column.name]}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row[column.name]\"\n       (ngModelChange)=\"row[column.name]=$event\"/>\n\n" }]
+            args: [{ selector: 'teta-string-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [tetaHint]=\"row[column.name]\"\n      [appendToBody]=\"true\"\n      [overflownOnly]=\"true\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row[column.name]}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row[column.name]\"\n       (ngModelChange)=\"row[column.name]=$event\"/>\n\n" }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
                 type: Input
             }], row: [{