@tetacom/ng-components 1.0.22 → 1.0.23

package/fesm2020/tetacom-ng-components.mjs

@@ -5999,10 +5999,172 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", 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() {
+        if (this._open) {
+            this._open = false;
+            this._service.destroy(this._componentRef, this._content, this.appendToBody ? this._document.body : this._elementRef.nativeElement);
+            this._componentRef = null;
+        }
+    }
+}
+DynamicContentBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DynamicContentBaseDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+DynamicContentBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", 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: "13.0.1", 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',
+        ];
+    }
+}
+HintDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", 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: "12.0.0", version: "13.0.1", 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: "13.0.1", 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;
         this.controlValueChange = new EventEmitter();
+        this.align = Align;
         this.filterTypeEnum = FilterType;
         this._alive = true;
     }
@@ -6068,10 +6230,10 @@ class PropertyGridItemComponent {
     }
 }
 PropertyGridItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PropertyGridItemComponent, deps: [{ token: i1$1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component });
-PropertyGridItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: PropertyGridItemComponent, selector: "teta-property-grid-item", inputs: { column: "column", hideNonEditable: "hideNonEditable", dict: "dict", formGroup: "formGroup", horizontal: "horizontal" }, outputs: { controlValueChange: "controlValueChange" }, ngImport: i0, template: "<teta-input [label]=\"caption\"\n            [formGroup]=\"formGroup\"\n            [horizontal]=\"horizontal\"\n            *ngIf=\"column.editable || !hideNonEditable\">\n  <ng-container [ngSwitch]=\"column.filterType\">\n    <teta-select class=\"row_auto\"\n                 *ngSwitchCase=\"filterTypeEnum.list\"\n                 [searchRef]=\"getDict()?.length > 10 ? 'name' : ''\"\n                 [allowNull]=\"!column.required\"\n                 [appendToBody]=\"true\"\n                 [invalid]=\"controlIsInvalid(column.name)\"\n                 [formControlName]=\"column.name\"\n                 [options]=\"getDict()\"\n                 [valueRef]=\"'id'\"\n                 [textRef]=\"'name'\"\n                 [multiple]=\"false\"></teta-select>\n    <teta-date-picker *ngSwitchCase=\"filterTypeEnum.date\"\n                      class=\"row_auto\"\n                      [appendToBody]=\"true\"\n                      [invalid]=\"controlIsInvalid(column.name)\"\n                      [formControlName]=\"column.name\"></teta-date-picker>\n    <teta-toggle *ngSwitchCase=\"filterTypeEnum.boolean\"\n                 [formControlName]=\"column.name\">{{column.caption}}</teta-toggle>\n    <teta-text-field class=\"row_auto\"\n                     *ngSwitchDefault\n                     (focusout)=\"valueChange()\"\n                     [onlyNumber]=\"column.filterType === filterTypeEnum.number\"\n                     [placeholder]=\"column.caption\"\n                     [invalid]=\"controlIsInvalid(column.name)\"\n                     [formControlName]=\"column.name\"></teta-text-field>\n  </ng-container>\n  <div *ngIf=\"controlIsInvalid(column.name)\"\n       ngProjectAs=\"message\"\n       class=\"color-red-50\">\n    {{getError(column)}}\n  </div>\n</teta-input>\n", styles: [""], components: [{ type: InputComponent, selector: "teta-input", inputs: ["label", "horizontal", "required"] }, { type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "valueRef", "textRef", "searchRef"] }, { type: DatePickerComponent, selector: "teta-date-picker", inputs: ["disabled", "invalid", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "minYearDate", "maxYearDate", "align", "verticalAlign", "appendToBody", "showTime", "format"] }, { type: ToggleComponent, selector: "teta-toggle", inputs: ["palette", "noLabel", "disabled"] }, { type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "invalid"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+PropertyGridItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: PropertyGridItemComponent, selector: "teta-property-grid-item", inputs: { column: "column", hideNonEditable: "hideNonEditable", dict: "dict", formGroup: "formGroup", horizontal: "horizontal" }, outputs: { controlValueChange: "controlValueChange" }, ngImport: i0, template: "<teta-input [label]=\"caption\"\n            [tetaHint]=\"column.hint\"\n            [align]=\"align.left\"\n            [formGroup]=\"formGroup\"\n            [horizontal]=\"horizontal\"\n            *ngIf=\"column.editable || !hideNonEditable\">\n  <ng-container [ngSwitch]=\"column.filterType\">\n    <teta-select class=\"row_auto\"\n                 *ngSwitchCase=\"filterTypeEnum.list\"\n                 [searchRef]=\"getDict()?.length > 10 ? 'name' : ''\"\n                 [allowNull]=\"!column.required\"\n                 [appendToBody]=\"true\"\n                 [invalid]=\"controlIsInvalid(column.name)\"\n                 [formControlName]=\"column.name\"\n                 [options]=\"getDict()\"\n                 [valueRef]=\"'id'\"\n                 [textRef]=\"'name'\"\n                 [multiple]=\"false\"></teta-select>\n    <teta-date-picker *ngSwitchCase=\"filterTypeEnum.date\"\n                      class=\"row_auto\"\n                      [appendToBody]=\"true\"\n                      [invalid]=\"controlIsInvalid(column.name)\"\n                      [formControlName]=\"column.name\"></teta-date-picker>\n    <teta-toggle *ngSwitchCase=\"filterTypeEnum.boolean\"\n                 [formControlName]=\"column.name\">{{column.caption}}</teta-toggle>\n    <teta-text-field class=\"row_auto\"\n                     *ngSwitchDefault\n                     (focusout)=\"valueChange()\"\n                     [onlyNumber]=\"column.filterType === filterTypeEnum.number\"\n                     [placeholder]=\"column.caption\"\n                     [invalid]=\"controlIsInvalid(column.name)\"\n                     [formControlName]=\"column.name\"></teta-text-field>\n  </ng-container>\n  <div *ngIf=\"controlIsInvalid(column.name)\"\n       ngProjectAs=\"message\"\n       class=\"color-red-50\">\n    {{getError(column)}}\n  </div>\n</teta-input>\n", styles: [""], components: [{ type: InputComponent, selector: "teta-input", inputs: ["label", "horizontal", "required"] }, { type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "valueRef", "textRef", "searchRef"] }, { type: DatePickerComponent, selector: "teta-date-picker", inputs: ["disabled", "invalid", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minDate", "maxDate", "minYearDate", "maxYearDate", "align", "verticalAlign", "appendToBody", "showTime", "format"] }, { type: ToggleComponent, selector: "teta-toggle", inputs: ["palette", "noLabel", "disabled"] }, { type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "invalid"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: HintDirective, selector: "[tetaHint]", inputs: ["tetaHint", "align", "verticalAlign", "delay"] }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PropertyGridItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-property-grid-item', template: "<teta-input [label]=\"caption\"\n            [formGroup]=\"formGroup\"\n            [horizontal]=\"horizontal\"\n            *ngIf=\"column.editable || !hideNonEditable\">\n  <ng-container [ngSwitch]=\"column.filterType\">\n    <teta-select class=\"row_auto\"\n                 *ngSwitchCase=\"filterTypeEnum.list\"\n                 [searchRef]=\"getDict()?.length > 10 ? 'name' : ''\"\n                 [allowNull]=\"!column.required\"\n                 [appendToBody]=\"true\"\n                 [invalid]=\"controlIsInvalid(column.name)\"\n                 [formControlName]=\"column.name\"\n                 [options]=\"getDict()\"\n                 [valueRef]=\"'id'\"\n                 [textRef]=\"'name'\"\n                 [multiple]=\"false\"></teta-select>\n    <teta-date-picker *ngSwitchCase=\"filterTypeEnum.date\"\n                      class=\"row_auto\"\n                      [appendToBody]=\"true\"\n                      [invalid]=\"controlIsInvalid(column.name)\"\n                      [formControlName]=\"column.name\"></teta-date-picker>\n    <teta-toggle *ngSwitchCase=\"filterTypeEnum.boolean\"\n                 [formControlName]=\"column.name\">{{column.caption}}</teta-toggle>\n    <teta-text-field class=\"row_auto\"\n                     *ngSwitchDefault\n                     (focusout)=\"valueChange()\"\n                     [onlyNumber]=\"column.filterType === filterTypeEnum.number\"\n                     [placeholder]=\"column.caption\"\n                     [invalid]=\"controlIsInvalid(column.name)\"\n                     [formControlName]=\"column.name\"></teta-text-field>\n  </ng-container>\n  <div *ngIf=\"controlIsInvalid(column.name)\"\n       ngProjectAs=\"message\"\n       class=\"color-red-50\">\n    {{getError(column)}}\n  </div>\n</teta-input>\n", styles: [""] }]
+            args: [{ selector: 'teta-property-grid-item', template: "<teta-input [label]=\"caption\"\n            [tetaHint]=\"column.hint\"\n            [align]=\"align.left\"\n            [formGroup]=\"formGroup\"\n            [horizontal]=\"horizontal\"\n            *ngIf=\"column.editable || !hideNonEditable\">\n  <ng-container [ngSwitch]=\"column.filterType\">\n    <teta-select class=\"row_auto\"\n                 *ngSwitchCase=\"filterTypeEnum.list\"\n                 [searchRef]=\"getDict()?.length > 10 ? 'name' : ''\"\n                 [allowNull]=\"!column.required\"\n                 [appendToBody]=\"true\"\n                 [invalid]=\"controlIsInvalid(column.name)\"\n                 [formControlName]=\"column.name\"\n                 [options]=\"getDict()\"\n                 [valueRef]=\"'id'\"\n                 [textRef]=\"'name'\"\n                 [multiple]=\"false\"></teta-select>\n    <teta-date-picker *ngSwitchCase=\"filterTypeEnum.date\"\n                      class=\"row_auto\"\n                      [appendToBody]=\"true\"\n                      [invalid]=\"controlIsInvalid(column.name)\"\n                      [formControlName]=\"column.name\"></teta-date-picker>\n    <teta-toggle *ngSwitchCase=\"filterTypeEnum.boolean\"\n                 [formControlName]=\"column.name\">{{column.caption}}</teta-toggle>\n    <teta-text-field class=\"row_auto\"\n                     *ngSwitchDefault\n                     (focusout)=\"valueChange()\"\n                     [onlyNumber]=\"column.filterType === filterTypeEnum.number\"\n                     [placeholder]=\"column.caption\"\n                     [invalid]=\"controlIsInvalid(column.name)\"\n                     [formControlName]=\"column.name\"></teta-text-field>\n  </ng-container>\n  <div *ngIf=\"controlIsInvalid(column.name)\"\n       ngProjectAs=\"message\"\n       class=\"color-red-50\">\n    {{getError(column)}}\n  </div>\n</teta-input>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1$1.TranslocoService }]; }, propDecorators: { column: [{
                 type: Input
             }], hideNonEditable: [{
@@ -6267,6 +6429,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 }]
         }] });
 
+class HintModule {
+}
+HintModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+HintModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HintModule, declarations: [HintDirective], imports: [CommonModule,
+        DynamicComponentModule], exports: [HintDirective] });
+HintModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HintModule, imports: [[
+            CommonModule,
+            DynamicComponentModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", 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: "13.0.1", ngImport: i0, type: PropertyGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -6285,7 +6468,8 @@ PropertyGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         InputModule,
         ToggleModule,
         ReactiveFormsModule,
-        TranslocoModule], exports: [PropertyGridComponent] });
+        TranslocoModule,
+        HintModule], exports: [PropertyGridComponent] });
 PropertyGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PropertyGridModule, providers: [
         {
             provide: TRANSLOCO_SCOPE,
@@ -6303,6 +6487,7 @@ PropertyGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
             ToggleModule,
             ReactiveFormsModule,
             TranslocoModule,
+            HintModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: PropertyGridModule, decorators: [{
             type: NgModule,
@@ -6328,6 +6513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                         ToggleModule,
                         ReactiveFormsModule,
                         TranslocoModule,
+                        HintModule,
                     ],
                     providers: [
                         {
@@ -7441,167 +7627,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 args: ['class.table-head__cell__component']
             }] } });
 
-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() {
-        if (this._open) {
-            this._open = false;
-            this._service.destroy(this._componentRef, this._content, this.appendToBody ? this._document.body : this._elementRef.nativeElement);
-            this._componentRef = null;
-        }
-    }
-}
-DynamicContentBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: DynamicContentBaseDirective, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-DynamicContentBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.1", 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: "13.0.1", 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',
-        ];
-    }
-}
-HintDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", 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: "12.0.0", version: "13.0.1", 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: "13.0.1", 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 DefaultHeadCellComponent extends HeadCellComponentBase {
     constructor(_cdr) {
         super();
@@ -9603,27 +9628,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImpor
                 }]
         }] });
 
-class HintModule {
-}
-HintModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HintModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-HintModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HintModule, declarations: [HintDirective], imports: [CommonModule,
-        DynamicComponentModule], exports: [HintDirective] });
-HintModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HintModule, imports: [[
-            CommonModule,
-            DynamicComponentModule
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: HintModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [HintDirective],
-                    exports: [HintDirective],
-                    imports: [
-                        CommonModule,
-                        DynamicComponentModule
-                    ]
-                }]
-        }] });
-
 class TetaTemplateModule {
 }
 TetaTemplateModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: TetaTemplateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });