@tetacom/ng-components 1.0.142 → 1.0.143

package/fesm2015/tetacom-ng-components.mjs

@@ -6,7 +6,7 @@ import * as i1 from '@angular/common/http';
 import { HttpClient, HttpClientModule } from '@angular/common/http';
 import { map, takeWhile, throttleTime, withLatestFrom, tap, bufferCount, filter } from 'rxjs/operators';
 import * as i3 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, UntypedFormControl, UntypedFormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, UntypedFormControl, UntypedFormGroup, Validators, ControlContainer, NgForm, NgModelGroup, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { BehaviorSubject, fromEvent, Subject, ReplaySubject, combineLatest, merge, Observable, pipe } from 'rxjs';
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1$1 from '@ngneat/transloco';
@@ -329,6 +329,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 }]
         }] });
 
+class AutocompleteComponent {
+    constructor() { }
+    ngOnInit() {
+    }
+}
+AutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: AutocompleteComponent, selector: "teta-autocomplete", ngImport: i0, template: "<p>autocomplete works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>autocomplete works!</p>\n" }]
+        }], ctorParameters: function () { return []; } });
+
+class AutocompleteModule {
+}
+AutocompleteModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AutocompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AutocompleteModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: AutocompleteModule, declarations: [AutocompleteComponent], imports: [CommonModule], exports: [AutocompleteComponent] });
+AutocompleteModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AutocompleteModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: AutocompleteModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        AutocompleteComponent
+                    ],
+                    exports: [
+                        AutocompleteComponent
+                    ],
+                    imports: [
+                        CommonModule
+                    ]
+                }]
+        }] });
+
 class ButtonComponent {
     constructor() {
         this.view = 'primary';
@@ -1167,12 +1199,12 @@ class PositionUtil {
                 (containerPosition.top + containerPosition.bottom) / 2 -
                     elementHeight / 2;
         }
-        if (rect.left < 0) {
-            rect.left = 0;
-        }
         if (rect.left + elementWidth > window.innerWidth) {
             rect.left = window.innerWidth - elementWidth;
         }
+        if (rect.left < 0) {
+            rect.left = 0;
+        }
         if (rect.top + elementHeight > window.innerHeight || rect.bottom < 0) {
             rect.bottom = 0;
         }
@@ -3991,10 +4023,10 @@ class InputComponent {
     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", hint: "hint", 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]=\"hint ?? label\"\n        [align]=\"align.left\"\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 });
+InputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: InputComponent, selector: "teta-input", inputs: { label: "label", hint: "hint", 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]=\"hint ?? label\"\n        [align]=\"align.left\"\n        [overflownOnly]=\"!hint || hint === label\">\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]=\"hint ?? label\"\n        [align]=\"align.left\"\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"] }]
+            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]=\"hint ?? label\"\n        [align]=\"align.left\"\n        [overflownOnly]=\"!hint || hint === label\">\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
             }], hint: [{
@@ -6597,6 +6629,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 }]
         }] });
 
+class PropertyGridItemDescriptionDirective {
+    constructor(template) {
+        this.template = template;
+    }
+}
+PropertyGridItemDescriptionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PropertyGridItemDescriptionDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+PropertyGridItemDescriptionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.0.2", type: PropertyGridItemDescriptionDirective, selector: "[tetaPropertyGridItemDescription]", inputs: { name: ["tetaPropertyGridItemDescription", "name"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PropertyGridItemDescriptionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaPropertyGridItemDescription]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; }, propDecorators: { name: [{
+                type: Input,
+                args: ['tetaPropertyGridItemDescription']
+            }] } });
+
 class FormsUtil {
     static validateAllFormFields(formGroup) {
         formGroup.updateValueAndValidity();
@@ -6642,17 +6691,20 @@ class FormsUtil {
         const form = new UntypedFormGroup({});
         const flat = ArrayUtil.flatten(columns, 'columns');
         flat.forEach((column) => {
-            const control = new UntypedFormControl({
-                value: dataItem ? dataItem[column.name] : undefined,
-                disabled: !column.editable,
-            }, {
-                validators: FormsUtil.getValidators(column),
-                updateOn: column.filterType === FilterType.number || column.filterType === FilterType.string ? 'blur' : 'change'
-            });
+            const control = FormsUtil.initControlFromColumn(column, dataItem);
             form.registerControl(column.name, control);
         });
         return form;
     }
+    static initControlFromColumn(column, dataItem) {
+        return new UntypedFormControl({
+            value: dataItem ? dataItem[column.name] : undefined,
+            disabled: !column.editable,
+        }, {
+            validators: FormsUtil.getValidators(column),
+            updateOn: column.filterType === FilterType.number || column.filterType === FilterType.string ? 'blur' : 'change'
+        });
+    }
     static getValidators(column) {
         const validators = [];
         if (column.required) {
@@ -6674,7 +6726,18 @@ class FormsUtil {
         }
         return null;
     }
+    static formFactory(ngForm, ngModelGroup) {
+        return ngModelGroup || ngForm || null;
+    }
 }
+FormsUtil.formProvider = {
+    provide: ControlContainer,
+    useFactory: FormsUtil.formFactory,
+    deps: [
+        [new Optional(), NgForm],
+        [new Optional(), NgModelGroup],
+    ],
+};
 
 const TOGGLE_CONTROL_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
@@ -6752,26 +6815,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class PropertyGridItemComponent {
-    constructor(_transloco) {
+    constructor(_transloco, _formGroup) {
         this._transloco = _transloco;
+        this._formGroup = _formGroup;
         this.controlValueChange = new EventEmitter();
         this.align = Align;
         this.filterTypeEnum = FilterType;
         this._alive = true;
     }
-    set formGroup(form) {
-        var _a, _b, _c;
-        this._formGroup = form;
-        (_a = this._formSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
-        this._formSub = (_c = (_b = this._formGroup) === null || _b === void 0 ? void 0 : _b.controls[this.column.name]) === null || _c === void 0 ? void 0 : _c.valueChanges.pipe(takeWhile(() => this._alive)).subscribe((_) => {
-            this.controlValueChange.emit({
-                id: _,
-                name: this.column.name,
-            });
-        });
+    // @Input()
+    // set formGroup(form: UntypedFormGroup) {
+    //   this._formGroup = form;
+    //   this._formSub?.unsubscribe();
+    //   this._formSub = this._formGroup?.controls[this.column.name]?.valueChanges
+    //     .pipe(
+    //       takeWhile(() => this._alive)
+    //     )
+    //     .subscribe((_) => {
+    //       this.controlValueChange.emit({
+    //         id: _,
+    //         name: this.column.name,
+    //       });
+    //     });
+    // }
+    get template() {
+        return this.itemTemplates.find((item) => item.name === this.column.name);
     }
     get formGroup() {
-        return this._formGroup;
+        if (this._formGroup instanceof FormGroup) {
+            return this._formGroup;
+        }
+        if (this._formGroup instanceof NgForm) {
+            return this._formGroup.form;
+        }
+        return null;
     }
     get caption() {
         if (this.column.filterType === FilterType.boolean) {
@@ -6811,13 +6888,6 @@ class PropertyGridItemComponent {
             });
         }
     }
-    valueChange() {
-        var _a, _b;
-        this.controlValueChange.emit({
-            id: (_b = (_a = this.formGroup) === null || _a === void 0 ? void 0 : _a.controls[this.column.name]) === null || _b === void 0 ? void 0 : _b.value,
-            name: this.column.name,
-        });
-    }
     ngOnInit() {
     }
     ngOnDestroy() {
@@ -6825,13 +6895,30 @@ class PropertyGridItemComponent {
         this._alive = false;
         (_a = this._formSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
     }
+    ngOnChanges(changes) {
+        var _a, _b, _c;
+        if (this.column && this.item) {
+            this.formGroup.registerControl(this.column.name, FormsUtil.initControlFromColumn(this.column, this.item));
+            (_a = this._formSub) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+            this._formSub = (_c = (_b = this.formGroup) === null || _b === void 0 ? void 0 : _b.controls[this.column.name]) === null || _c === void 0 ? void 0 : _c.valueChanges.pipe(takeWhile(() => this._alive)).subscribe((_) => {
+                this.controlValueChange.emit({
+                    id: _,
+                    name: this.column.name,
+                });
+            });
+        }
+    }
 }
-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", decimalPart: "decimalPart", formGroup: "formGroup", horizontal: "horizontal" }, outputs: { controlValueChange: "controlValueChange" }, ngImport: i0, template: "<teta-input [label]=\"caption\"\n            [hint]=\"column.hint\"\n            [formGroup]=\"formGroup\"\n            [horizontal]=\"horizontal\"\n            [required]=\"column.required\"\n            *ngIf=\"column.editable || !hideNonEditable\">\n  <ng-container [ngSwitch]=\"column.filterType\"\n                *ngIf=\"formGroup?.get(column.name)\">\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\">\n      {{column.caption}}\n    </teta-toggle>\n    <teta-text-field class=\"row_auto\"\n                     *ngSwitchDefault\n\n                     [decimalPart]=\"column.filterType === filterTypeEnum.number ? decimalPart : null\"\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", "hint", "horizontal", "required"] }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "decimalPart", "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"] }] });
+PropertyGridItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PropertyGridItemComponent, deps: [{ token: i1$1.TranslocoService }, { token: i3.ControlContainer, optional: true }], 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", decimalPart: "decimalPart", item: "item", itemTemplates: "itemTemplates", horizontal: "horizontal" }, outputs: { controlValueChange: "controlValueChange" }, usesOnChanges: true, ngImport: i0, template: "<teta-input [label]=\"caption\"\n            [hint]=\"column.hint\"\n            [formGroup]=\"formGroup\"\n            [horizontal]=\"horizontal\"\n            [required]=\"column.required\"\n            *ngIf=\"column.editable || !hideNonEditable\">\n  <ng-container *ngIf=\"template; else default\">\n    <ng-container *ngTemplateOutlet=\"template.template;context: {$implicit: formGroup?.get(column.name)}\"></ng-container>\n  </ng-container>\n  <ng-template #default>\n    <ng-container [ngSwitch]=\"column.filterType\"\n                  *ngIf=\"formGroup?.get(column.name)\">\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\">\n        {{column.caption}}\n      </teta-toggle>\n      <teta-text-field class=\"row_auto\"\n                       *ngSwitchDefault\n\n                       [decimalPart]=\"column.filterType === filterTypeEnum.number ? decimalPart : null\"\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  </ng-template>\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "hint", "horizontal", "required"] }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "decimalPart", "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"] }], viewProviders: [FormsUtil.formProvider] });
 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            [hint]=\"column.hint\"\n            [formGroup]=\"formGroup\"\n            [horizontal]=\"horizontal\"\n            [required]=\"column.required\"\n            *ngIf=\"column.editable || !hideNonEditable\">\n  <ng-container [ngSwitch]=\"column.filterType\"\n                *ngIf=\"formGroup?.get(column.name)\">\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\">\n      {{column.caption}}\n    </teta-toggle>\n    <teta-text-field class=\"row_auto\"\n                     *ngSwitchDefault\n\n                     [decimalPart]=\"column.filterType === filterTypeEnum.number ? decimalPart : null\"\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" }]
-        }], ctorParameters: function () { return [{ type: i1$1.TranslocoService }]; }, propDecorators: { column: [{
+            args: [{ selector: 'teta-property-grid-item', viewProviders: [FormsUtil.formProvider], template: "<teta-input [label]=\"caption\"\n            [hint]=\"column.hint\"\n            [formGroup]=\"formGroup\"\n            [horizontal]=\"horizontal\"\n            [required]=\"column.required\"\n            *ngIf=\"column.editable || !hideNonEditable\">\n  <ng-container *ngIf=\"template; else default\">\n    <ng-container *ngTemplateOutlet=\"template.template;context: {$implicit: formGroup?.get(column.name)}\"></ng-container>\n  </ng-container>\n  <ng-template #default>\n    <ng-container [ngSwitch]=\"column.filterType\"\n                  *ngIf=\"formGroup?.get(column.name)\">\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\">\n        {{column.caption}}\n      </teta-toggle>\n      <teta-text-field class=\"row_auto\"\n                       *ngSwitchDefault\n\n                       [decimalPart]=\"column.filterType === filterTypeEnum.number ? decimalPart : null\"\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  </ng-template>\n  <div *ngIf=\"controlIsInvalid(column.name)\"\n       ngProjectAs=\"message\"\n       class=\"color-red-50\">\n    {{getError(column)}}\n  </div>\n</teta-input>\n" }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.TranslocoService }, { type: i3.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { column: [{
                 type: Input
             }], hideNonEditable: [{
                 type: Input
@@ -6839,7 +6926,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], decimalPart: [{
                 type: Input
-            }], formGroup: [{
+            }], item: [{
+                type: Input
+            }], itemTemplates: [{
                 type: Input
             }], horizontal: [{
                 type: Input
@@ -6858,17 +6947,17 @@ class PropertyGridGroupComponent {
     }
 }
 PropertyGridGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PropertyGridGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PropertyGridGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PropertyGridGroupComponent, selector: "teta-property-grid-group", inputs: { column: "column", hideNonEditable: "hideNonEditable", dict: "dict", formGroup: "formGroup", horizontal: "horizontal", decimalPart: "decimalPart" }, outputs: { controlValueChange: "controlValueChange" }, ngImport: i0, template: "<teta-expand-item>\n  <span ngProjectAs='head'>\n    {{column.caption}}\n  </span>\n  <div class=\"form-container\">\n    <ng-container *ngFor=\"let col of column.columns; trackBy: trackColumns\">\n      <ng-container *ngIf=\"col.columns?.length < 1\">\n        <teta-property-grid-item *ngIf=\"column.editable || !hideNonEditable\"\n                                 [id]=\"col.name\"\n                                 [dict]=\"dict\"\n                                 [column]=\"col\"\n                                 [decimalPart]=\"decimalPart\"\n                                 [hideNonEditable]=\"hideNonEditable\"\n                                 (controlValueChange)=\"controlValueChange.emit($event)\"\n                                 [horizontal]=\"horizontal\"\n                                 [formGroup]=\"formGroup\"></teta-property-grid-item>\n      </ng-container>\n      <ng-container *ngIf=\"col.columns?.length > 0\">\n        <teta-property-grid-group [id]=\"col.name\"\n                                  [dict]=\"dict\"\n                                  [column]=\"col\"\n                                  [decimalPart]=\"decimalPart\"\n                                  [hideNonEditable]=\"hideNonEditable\"\n                                  [horizontal]=\"horizontal\"\n                                  (controlValueChange)=\"controlValueChange.emit($event)\"\n                                  [formGroup]=\"formGroup\"></teta-property-grid-group>\n      </ng-container>\n    </ng-container>\n  </div>\n</teta-expand-item>\n", styles: [":host{display:flex;flex-direction:column}\n"], 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: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ExpandItemComponent, selector: "teta-expand-item", inputs: ["open"], outputs: ["openChange"], exportAs: ["expand-item"] }, { kind: "component", type: PropertyGridGroupComponent, selector: "teta-property-grid-group", inputs: ["column", "hideNonEditable", "dict", "formGroup", "horizontal", "decimalPart"], outputs: ["controlValueChange"] }, { kind: "component", type: PropertyGridItemComponent, selector: "teta-property-grid-item", inputs: ["column", "hideNonEditable", "dict", "decimalPart", "formGroup", "horizontal"], outputs: ["controlValueChange"] }] });
+PropertyGridGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PropertyGridGroupComponent, selector: "teta-property-grid-group", inputs: { column: "column", hideNonEditable: "hideNonEditable", dict: "dict", item: "item", horizontal: "horizontal", decimalPart: "decimalPart", itemTemplates: "itemTemplates" }, outputs: { controlValueChange: "controlValueChange" }, ngImport: i0, template: "<teta-expand-item>\n  <span ngProjectAs='head'>\n    {{column.caption}}\n  </span>\n  <div class=\"form-container\">\n    <ng-container *ngFor=\"let col of column.columns; trackBy: trackColumns\">\n      <ng-container *ngIf=\"col.columns?.length < 1\">\n        <teta-property-grid-item *ngIf=\"column.editable || !hideNonEditable\"\n                                 [id]=\"col.name\"\n                                 [dict]=\"dict\"\n                                 [column]=\"col\"\n                                 [item]=\"item\"\n                                 [itemTemplates]=\"itemTemplates\"\n                                 [decimalPart]=\"decimalPart\"\n                                 [hideNonEditable]=\"hideNonEditable\"\n                                 (controlValueChange)=\"controlValueChange.emit($event)\"\n                                 [horizontal]=\"horizontal\"></teta-property-grid-item>\n      </ng-container>\n      <ng-container *ngIf=\"col.columns?.length > 0\">\n        <teta-property-grid-group [id]=\"col.name\"\n                                  [dict]=\"dict\"\n                                  [column]=\"col\"\n                                  [item]=\"item\"\n                                  [itemTemplates]=\"itemTemplates\"\n                                  [decimalPart]=\"decimalPart\"\n                                  [hideNonEditable]=\"hideNonEditable\"\n                                  [horizontal]=\"horizontal\"\n                                  (controlValueChange)=\"controlValueChange.emit($event)\"></teta-property-grid-group>\n      </ng-container>\n    </ng-container>\n  </div>\n</teta-expand-item>\n", styles: [":host{display:flex;flex-direction:column}\n"], 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: "component", type: ExpandItemComponent, selector: "teta-expand-item", inputs: ["open"], outputs: ["openChange"], exportAs: ["expand-item"] }, { kind: "component", type: PropertyGridGroupComponent, selector: "teta-property-grid-group", inputs: ["column", "hideNonEditable", "dict", "item", "horizontal", "decimalPart", "itemTemplates"], outputs: ["controlValueChange"] }, { kind: "component", type: PropertyGridItemComponent, selector: "teta-property-grid-item", inputs: ["column", "hideNonEditable", "dict", "decimalPart", "item", "itemTemplates", "horizontal"], outputs: ["controlValueChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PropertyGridGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-property-grid-group', template: "<teta-expand-item>\n  <span ngProjectAs='head'>\n    {{column.caption}}\n  </span>\n  <div class=\"form-container\">\n    <ng-container *ngFor=\"let col of column.columns; trackBy: trackColumns\">\n      <ng-container *ngIf=\"col.columns?.length < 1\">\n        <teta-property-grid-item *ngIf=\"column.editable || !hideNonEditable\"\n                                 [id]=\"col.name\"\n                                 [dict]=\"dict\"\n                                 [column]=\"col\"\n                                 [decimalPart]=\"decimalPart\"\n                                 [hideNonEditable]=\"hideNonEditable\"\n                                 (controlValueChange)=\"controlValueChange.emit($event)\"\n                                 [horizontal]=\"horizontal\"\n                                 [formGroup]=\"formGroup\"></teta-property-grid-item>\n      </ng-container>\n      <ng-container *ngIf=\"col.columns?.length > 0\">\n        <teta-property-grid-group [id]=\"col.name\"\n                                  [dict]=\"dict\"\n                                  [column]=\"col\"\n                                  [decimalPart]=\"decimalPart\"\n                                  [hideNonEditable]=\"hideNonEditable\"\n                                  [horizontal]=\"horizontal\"\n                                  (controlValueChange)=\"controlValueChange.emit($event)\"\n                                  [formGroup]=\"formGroup\"></teta-property-grid-group>\n      </ng-container>\n    </ng-container>\n  </div>\n</teta-expand-item>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'teta-property-grid-group', template: "<teta-expand-item>\n  <span ngProjectAs='head'>\n    {{column.caption}}\n  </span>\n  <div class=\"form-container\">\n    <ng-container *ngFor=\"let col of column.columns; trackBy: trackColumns\">\n      <ng-container *ngIf=\"col.columns?.length < 1\">\n        <teta-property-grid-item *ngIf=\"column.editable || !hideNonEditable\"\n                                 [id]=\"col.name\"\n                                 [dict]=\"dict\"\n                                 [column]=\"col\"\n                                 [item]=\"item\"\n                                 [itemTemplates]=\"itemTemplates\"\n                                 [decimalPart]=\"decimalPart\"\n                                 [hideNonEditable]=\"hideNonEditable\"\n                                 (controlValueChange)=\"controlValueChange.emit($event)\"\n                                 [horizontal]=\"horizontal\"></teta-property-grid-item>\n      </ng-container>\n      <ng-container *ngIf=\"col.columns?.length > 0\">\n        <teta-property-grid-group [id]=\"col.name\"\n                                  [dict]=\"dict\"\n                                  [column]=\"col\"\n                                  [item]=\"item\"\n                                  [itemTemplates]=\"itemTemplates\"\n                                  [decimalPart]=\"decimalPart\"\n                                  [hideNonEditable]=\"hideNonEditable\"\n                                  [horizontal]=\"horizontal\"\n                                  (controlValueChange)=\"controlValueChange.emit($event)\"></teta-property-grid-group>\n      </ng-container>\n    </ng-container>\n  </div>\n</teta-expand-item>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { column: [{
                 type: Input
             }], hideNonEditable: [{
                 type: Input
             }], dict: [{
                 type: Input
-            }], formGroup: [{
+            }], item: [{
                 type: Input
             }], horizontal: [{
                 type: Input
@@ -6876,13 +6965,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Output
             }], decimalPart: [{
                 type: Input
+            }], itemTemplates: [{
+                type: Input
             }] } });
 
 class PropertyGridComponent {
-    constructor() {
+    constructor(_formGroup) {
+        this._formGroup = _formGroup;
         this.formClass = true;
         this.controlValueChange = new EventEmitter();
         this._alive = true;
+        // console.log(this.formGroup)
+    }
+    get formGroup() {
+        if (this._formGroup instanceof FormGroup) {
+            return this._formGroup;
+        }
+        if (this._formGroup instanceof NgForm) {
+            return this._formGroup.form;
+        }
+        return null;
     }
     onControlValueChange(event) {
         const affected = this.columns.filter((_) => _.parentName === event.name);
@@ -6913,22 +7015,31 @@ class PropertyGridComponent {
         var _a;
         return (_a = this.dict[name]) === null || _a === void 0 ? void 0 : _a.find((_) => _.id === value);
     }
+    ngAfterViewInit() {
+    }
 }
-PropertyGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PropertyGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PropertyGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PropertyGridComponent, selector: "teta-property-grid", inputs: { hideNonEditable: "hideNonEditable", columns: "columns", dict: "dict", formGroup: "formGroup", horizontal: "horizontal", decimalPart: "decimalPart" }, outputs: { controlValueChange: "controlValueChange" }, host: { properties: { "class.form-container": "this.formClass" } }, ngImport: i0, template: "<ng-container *ngIf=\"columns?.length\">\n  <ng-container *ngFor=\"let column of columns; trackBy: trackColumns\">\n    <teta-property-grid-item *ngIf=\"column.columns?.length < 1 && (column.editable || !hideNonEditable)\"\n                             [dict]=\"dict\"\n                             [column]=\"column\"\n                             [id]=\"column.name\"\n                             [decimalPart]=\"decimalPart\"\n                             [formGroup]=\"formGroup\"\n                             [horizontal]=\"horizontal\"\n                             (controlValueChange)=\"onControlValueChange($event)\"\n                             [hideNonEditable]=\"hideNonEditable\"></teta-property-grid-item>\n    <teta-property-grid-group *ngIf=\"column.columns?.length > 0 && (column.editable || !hideNonEditable)\"\n                              [id]=\"column.name\"\n                              [dict]=\"dict\"\n                              [column]=\"column\"\n                              [decimalPart]=\"decimalPart\"\n                              [formGroup]=\"formGroup\"\n                              [horizontal]=\"horizontal\"\n                              (controlValueChange)=\"onControlValueChange($event)\"\n                              [hideNonEditable]=\"hideNonEditable\"></teta-property-grid-group>\n  </ng-container>\n</ng-container>\n", styles: [":host{padding:12px 8px}\n"], 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: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PropertyGridGroupComponent, selector: "teta-property-grid-group", inputs: ["column", "hideNonEditable", "dict", "formGroup", "horizontal", "decimalPart"], outputs: ["controlValueChange"] }, { kind: "component", type: PropertyGridItemComponent, selector: "teta-property-grid-item", inputs: ["column", "hideNonEditable", "dict", "decimalPart", "formGroup", "horizontal"], outputs: ["controlValueChange"] }] });
+PropertyGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PropertyGridComponent, deps: [{ token: i3.ControlContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+PropertyGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: PropertyGridComponent, selector: "teta-property-grid", inputs: { hideNonEditable: "hideNonEditable", columns: "columns", dict: "dict", item: "item", horizontal: "horizontal", decimalPart: "decimalPart" }, outputs: { controlValueChange: "controlValueChange" }, host: { properties: { "class.form-container": "this.formClass" } }, queries: [{ propertyName: "itemTemplates", predicate: PropertyGridItemDescriptionDirective }], ngImport: i0, template: "<ng-container *ngIf=\"columns?.length\">\n  <ng-container *ngFor=\"let column of columns; trackBy: trackColumns\">\n    <teta-property-grid-item *ngIf=\"column.columns?.length < 1 && (column.editable || !hideNonEditable)\"\n                             [dict]=\"dict\"\n                             [column]=\"column\"\n                             [item]=\"item\"\n                             [id]=\"column.name\"\n                             [itemTemplates]=\"itemTemplates\"\n                             [decimalPart]=\"decimalPart\"\n                             [formGroup]=\"formGroup\"\n                             [horizontal]=\"horizontal\"\n                             (controlValueChange)=\"onControlValueChange($event)\"\n                             [hideNonEditable]=\"hideNonEditable\"></teta-property-grid-item>\n    <teta-property-grid-group *ngIf=\"column.columns?.length > 0 && (column.editable || !hideNonEditable)\"\n                              [id]=\"column.name\"\n                              [dict]=\"dict\"\n                              [column]=\"column\"\n                              [item]=\"item\"\n                              [itemTemplates]=\"itemTemplates\"\n                              [decimalPart]=\"decimalPart\"\n                              [formGroup]=\"formGroup\"\n                              [horizontal]=\"horizontal\"\n                              (controlValueChange)=\"onControlValueChange($event)\"\n                              [hideNonEditable]=\"hideNonEditable\"></teta-property-grid-group>\n  </ng-container>\n</ng-container>\n", styles: [":host{padding:12px 8px}\n"], 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: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PropertyGridGroupComponent, selector: "teta-property-grid-group", inputs: ["column", "hideNonEditable", "dict", "item", "horizontal", "decimalPart", "itemTemplates"], outputs: ["controlValueChange"] }, { kind: "component", type: PropertyGridItemComponent, selector: "teta-property-grid-item", inputs: ["column", "hideNonEditable", "dict", "decimalPart", "item", "itemTemplates", "horizontal"], outputs: ["controlValueChange"] }], viewProviders: [FormsUtil.formProvider] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PropertyGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-property-grid', template: "<ng-container *ngIf=\"columns?.length\">\n  <ng-container *ngFor=\"let column of columns; trackBy: trackColumns\">\n    <teta-property-grid-item *ngIf=\"column.columns?.length < 1 && (column.editable || !hideNonEditable)\"\n                             [dict]=\"dict\"\n                             [column]=\"column\"\n                             [id]=\"column.name\"\n                             [decimalPart]=\"decimalPart\"\n                             [formGroup]=\"formGroup\"\n                             [horizontal]=\"horizontal\"\n                             (controlValueChange)=\"onControlValueChange($event)\"\n                             [hideNonEditable]=\"hideNonEditable\"></teta-property-grid-item>\n    <teta-property-grid-group *ngIf=\"column.columns?.length > 0 && (column.editable || !hideNonEditable)\"\n                              [id]=\"column.name\"\n                              [dict]=\"dict\"\n                              [column]=\"column\"\n                              [decimalPart]=\"decimalPart\"\n                              [formGroup]=\"formGroup\"\n                              [horizontal]=\"horizontal\"\n                              (controlValueChange)=\"onControlValueChange($event)\"\n                              [hideNonEditable]=\"hideNonEditable\"></teta-property-grid-group>\n  </ng-container>\n</ng-container>\n", styles: [":host{padding:12px 8px}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { formClass: [{
+            args: [{ selector: 'teta-property-grid', viewProviders: [FormsUtil.formProvider], template: "<ng-container *ngIf=\"columns?.length\">\n  <ng-container *ngFor=\"let column of columns; trackBy: trackColumns\">\n    <teta-property-grid-item *ngIf=\"column.columns?.length < 1 && (column.editable || !hideNonEditable)\"\n                             [dict]=\"dict\"\n                             [column]=\"column\"\n                             [item]=\"item\"\n                             [id]=\"column.name\"\n                             [itemTemplates]=\"itemTemplates\"\n                             [decimalPart]=\"decimalPart\"\n                             [formGroup]=\"formGroup\"\n                             [horizontal]=\"horizontal\"\n                             (controlValueChange)=\"onControlValueChange($event)\"\n                             [hideNonEditable]=\"hideNonEditable\"></teta-property-grid-item>\n    <teta-property-grid-group *ngIf=\"column.columns?.length > 0 && (column.editable || !hideNonEditable)\"\n                              [id]=\"column.name\"\n                              [dict]=\"dict\"\n                              [column]=\"column\"\n                              [item]=\"item\"\n                              [itemTemplates]=\"itemTemplates\"\n                              [decimalPart]=\"decimalPart\"\n                              [formGroup]=\"formGroup\"\n                              [horizontal]=\"horizontal\"\n                              (controlValueChange)=\"onControlValueChange($event)\"\n                              [hideNonEditable]=\"hideNonEditable\"></teta-property-grid-group>\n  </ng-container>\n</ng-container>\n", styles: [":host{padding:12px 8px}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i3.ControlContainer, decorators: [{
+                        type: Optional
+                    }] }];
+    }, propDecorators: { formClass: [{
                 type: HostBinding,
                 args: ['class.form-container']
+            }], itemTemplates: [{
+                type: ContentChildren,
+                args: [PropertyGridItemDescriptionDirective]
             }], hideNonEditable: [{
                 type: Input
             }], columns: [{
                 type: Input
             }], dict: [{
                 type: Input
-            }], formGroup: [{
+            }], item: [{
                 type: Input
             }], horizontal: [{
                 type: Input
@@ -6938,50 +7049,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Output
             }] } });
 
-class NumericItemDefaultComponent {
-    constructor() { }
-    ngOnInit() { }
-}
-NumericItemDefaultComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NumericItemDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NumericItemDefaultComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: NumericItemDefaultComponent, selector: "teta-numeric-item-default", ngImport: i0, template: "<p>numeric-item-default works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: NumericItemDefaultComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-numeric-item-default', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>numeric-item-default works!</p>\n" }]
-        }], ctorParameters: function () { return []; } });
-
-class DateItemDefaultComponent {
-    constructor() { }
-    ngOnInit() { }
-}
-DateItemDefaultComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DateItemDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DateItemDefaultComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: DateItemDefaultComponent, selector: "teta-date-item-default", ngImport: i0, template: "<p>date-item-default works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: DateItemDefaultComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-date-item-default', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>date-item-default works!</p>\n" }]
-        }], ctorParameters: function () { return []; } });
-
-class ListItemDefaultComponent {
-    constructor() { }
-    ngOnInit() { }
-}
-ListItemDefaultComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ListItemDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ListItemDefaultComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: ListItemDefaultComponent, selector: "teta-list-item-default", ngImport: i0, template: "<p>list-item-default works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ListItemDefaultComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-list-item-default', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>list-item-default works!</p>\n" }]
-        }], ctorParameters: function () { return []; } });
-
-class StringItemDefaultComponent {
-    constructor() { }
-    ngOnInit() { }
-}
-StringItemDefaultComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: StringItemDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StringItemDefaultComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: StringItemDefaultComponent, selector: "teta-string-item-default", ngImport: i0, template: "<p>string-item-default works!</p>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: StringItemDefaultComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'teta-string-item-default', changeDetection: ChangeDetectionStrategy.OnPush, template: "<p>string-item-default works!</p>\n" }]
-        }], ctorParameters: function () { return []; } });
-
 class ToggleModule {
 }
 ToggleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: ToggleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -7000,12 +7067,9 @@ class PropertyGridModule {
 }
 PropertyGridModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PropertyGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 PropertyGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: PropertyGridModule, declarations: [PropertyGridComponent,
-        NumericItemDefaultComponent,
-        DateItemDefaultComponent,
-        ListItemDefaultComponent,
-        StringItemDefaultComponent,
         PropertyGridGroupComponent,
-        PropertyGridItemComponent], imports: [CommonModule,
+        PropertyGridItemComponent,
+        PropertyGridItemDescriptionDirective], imports: [CommonModule,
         FormsModule,
         NumberPipeModule,
         DatePickerModule,
@@ -7016,7 +7080,7 @@ PropertyGridModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", vers
         ReactiveFormsModule,
         TranslocoModule,
         HintModule,
-        ExpandCardModule], exports: [PropertyGridComponent] });
+        ExpandCardModule], exports: [PropertyGridComponent, PropertyGridItemDescriptionDirective] });
 PropertyGridModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: PropertyGridModule, providers: [
         {
             provide: TRANSLOCO_SCOPE,
@@ -7040,14 +7104,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             args: [{
                     declarations: [
                         PropertyGridComponent,
-                        NumericItemDefaultComponent,
-                        DateItemDefaultComponent,
-                        ListItemDefaultComponent,
-                        StringItemDefaultComponent,
                         PropertyGridGroupComponent,
                         PropertyGridItemComponent,
+                        PropertyGridItemDescriptionDirective,
                     ],
-                    exports: [PropertyGridComponent],
+                    exports: [PropertyGridComponent, PropertyGridItemDescriptionDirective],
                     imports: [
                         CommonModule,
                         FormsModule,
@@ -10367,7 +10428,10 @@ class TableComponent {
         });
         this._svc.activeRow
             .pipe(takeWhile((_) => this._alive))
-            .subscribe((item) => this.activeRowChange.emit(item));
+            .subscribe((item) => {
+            this.activeRow = item;
+            this.activeRowChange.emit(item);
+        });
         this._svc.valueChanged
             .pipe(takeWhile((_) => this._alive))
             .subscribe((coordinates) => {
@@ -12761,5 +12825,5 @@ function tetaZoneOptimized(ngZone) {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionContentDirective, AccordionHeadComponent, AccordionItemComponent, AccordionModule, AggregationType, Align, ArrayUtil, AutoPositionDirective, AutoPositionModule, BooleanCellComponent, BooleanFilter, BooleanFilterComponent, ButtonComponent, ButtonModule, CHECKBOX_CONTROL_VALUE_ACCESSOR, CellComponent, CellComponentBase, CellHostComponent, Chart3dComponent, Chart3dModule, Chart3dOptions, CheckboxComponent, CheckboxModule, ClickOutsideDirective, ClickOutsideModule, ClickService, ColorInputComponent, ColumnReorderEvent, ColumnResizeEvent, ContextMenuDirective, ContextMenuModule, CurrentModal, DATE_PICKER_CONTROL_VALUE_ACCESSOR, DAY_SELECT_CONTROL_VALUE_ACCESSOR, DateCellComponent, DateFilter, DateFilterComponent, DateFilterValue, DatePeriod, DatePickerComponent, DatePickerModule, DateTimeCellComponent, DateUtil, DaySelectComponent, DelimiterComponent, DelimiterModule, DetailComponentBase, DialogComponent, DialogService, DisableControlDirective, DisableControlModule, DomUtil, DragContainerDirective, DragContainerInstance, DragDirective, DragDropModule, DragDropService, DragInstance, DragPlaceholderDirective, DragPreviewDirective, DragSortContainerDirective, DragSortItemDirective, DragSortModule, DropdownComponent, DropdownContentDirective, DropdownDirective, DropdownHeadDirective, DropdownModule, DynamicComponentModule, DynamicComponentService, DynamicContentBaseDirective, DynamicData, EditEvent, EditType, ExpandCardComponent, ExpandCardModule, ExpandItemComponent, ExpandPanelComponent, ExpandPanelContentDirective, ExpandPanelHeadDirective, ExpandPanelModule, ExportType, FileItemComponent, FileUploadAreaComponent, FileUploadModule, FilterBase, FilterComponentBase, FilterHostComponent, FilterItem, FilterModule, FilterState, FilterType, FormGroupTitleComponent, FormsUtil, HeadCellComponentBase, HeadCellHostComponent, HighlightDirective, HighlightModule, HintDirective, HintModule, IconComponent, IconFileComponent, IconModule, IconService, IconSpriteDirective, InputComponent, InputModule, LetContext, LetDirective, LetModule, ListCellComponent, ListFilter, ListFilterComponent, ListFilterType, LoaderDirective, LoaderModule, MONTH_PICKER_CONTROL_VALUE_ACCESSOR, Message, MessageComponent, MessageHostComponent, MessageModule, MessageService, ModalCloseReason, ModalContainerComponent, ModalInstance, ModalModule, ModalService, MonthPickerComponent, NoAutofillDirective, NoAutofillModule, NumberPipe, NumberPipeModule, NumericCellComponent, NumericFilter, NumericFilterComponent, NumericFilterValue, OnlyNumberDirective, OnlyNumberModule, OverlayContainerService, PagerComponent, PagerModule, PagerState, PagerUtil, PanelComponent, PanelModule, PopupContentComponent, PositionUtil, ProgressBarComponent, ProgressBarModule, PropertyGridComponent, PropertyGridModule, RadioButtonComponent, RadioComponent, RadioModule, ResizeDragDirective, ResizeDragModule, ResizePanelComponent, ResizePanelModule, SLIDER_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, ScrollIntoViewDirective, ScrollIntoViewModule, SelectComponent, SelectModule, SelectOptionDirective, SelectType, SelectValueDirective, SidebarComponent, SidebarModule, SidebarPosition, SortEvent, SortParam, StateUtil, StringCellComponent, StringFilter, StringFilterComponent, StringFilterType, StringUtil, SwitchButtonComponent, SwitchComponent, SwitchModule, TOGGLE_CONTROL_VALUE_ACCESSOR, TabComponent, TabContentDirective, TabTitleDirective, TableBodyComponent, TableColumn, TableColumnStore, TableComponent, TableHeadComponent, TableModule, TableService, TableUtil, TabsComponent, TabsModule, TetaConfigService, TetaContentRef, TetaDatePipe, TetaDatePipeModule, TetaSize, TetaTemplateDirective, TetaTemplateModule, TextFieldComponent, ThemeSwitchComponent, ThemeSwitchModule, ThemeSwitchService, ToggleComponent, ToggleModule, ToolbarComponent, ToolbarModule, TooltipDirective, TooltipModule, TreeComponent, TreeItemToggleComponent, TreeModule, TreeService, VerticalAlign, enLocale, exportDomToImage, formatNumber, getCellComponent, getPrecision, prependZero, ruLocale, tetaZoneFree, tetaZoneFull, tetaZoneOptimized };
+export { AccordionComponent, AccordionContentDirective, AccordionHeadComponent, AccordionItemComponent, AccordionModule, AggregationType, Align, ArrayUtil, AutoPositionDirective, AutoPositionModule, AutocompleteComponent, AutocompleteModule, BooleanCellComponent, BooleanFilter, BooleanFilterComponent, ButtonComponent, ButtonModule, CHECKBOX_CONTROL_VALUE_ACCESSOR, CellComponent, CellComponentBase, CellHostComponent, Chart3dComponent, Chart3dModule, Chart3dOptions, CheckboxComponent, CheckboxModule, ClickOutsideDirective, ClickOutsideModule, ClickService, ColorInputComponent, ColumnReorderEvent, ColumnResizeEvent, ContextMenuDirective, ContextMenuModule, CurrentModal, DATE_PICKER_CONTROL_VALUE_ACCESSOR, DAY_SELECT_CONTROL_VALUE_ACCESSOR, DateCellComponent, DateFilter, DateFilterComponent, DateFilterValue, DatePeriod, DatePickerComponent, DatePickerModule, DateTimeCellComponent, DateUtil, DaySelectComponent, DelimiterComponent, DelimiterModule, DetailComponentBase, DialogComponent, DialogService, DisableControlDirective, DisableControlModule, DomUtil, DragContainerDirective, DragContainerInstance, DragDirective, DragDropModule, DragDropService, DragInstance, DragPlaceholderDirective, DragPreviewDirective, DragSortContainerDirective, DragSortItemDirective, DragSortModule, DropdownComponent, DropdownContentDirective, DropdownDirective, DropdownHeadDirective, DropdownModule, DynamicComponentModule, DynamicComponentService, DynamicContentBaseDirective, DynamicData, EditEvent, EditType, ExpandCardComponent, ExpandCardModule, ExpandItemComponent, ExpandPanelComponent, ExpandPanelContentDirective, ExpandPanelHeadDirective, ExpandPanelModule, ExportType, FileItemComponent, FileUploadAreaComponent, FileUploadModule, FilterBase, FilterComponentBase, FilterHostComponent, FilterItem, FilterModule, FilterState, FilterType, FormGroupTitleComponent, FormsUtil, HeadCellComponentBase, HeadCellHostComponent, HighlightDirective, HighlightModule, HintDirective, HintModule, IconComponent, IconFileComponent, IconModule, IconService, IconSpriteDirective, InputComponent, InputModule, LetContext, LetDirective, LetModule, ListCellComponent, ListFilter, ListFilterComponent, ListFilterType, LoaderDirective, LoaderModule, MONTH_PICKER_CONTROL_VALUE_ACCESSOR, Message, MessageComponent, MessageHostComponent, MessageModule, MessageService, ModalCloseReason, ModalContainerComponent, ModalInstance, ModalModule, ModalService, MonthPickerComponent, NoAutofillDirective, NoAutofillModule, NumberPipe, NumberPipeModule, NumericCellComponent, NumericFilter, NumericFilterComponent, NumericFilterValue, OnlyNumberDirective, OnlyNumberModule, OverlayContainerService, PagerComponent, PagerModule, PagerState, PagerUtil, PanelComponent, PanelModule, PopupContentComponent, PositionUtil, ProgressBarComponent, ProgressBarModule, PropertyGridComponent, PropertyGridItemDescriptionDirective, PropertyGridModule, RadioButtonComponent, RadioComponent, RadioModule, ResizeDragDirective, ResizeDragModule, ResizePanelComponent, ResizePanelModule, SLIDER_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, ScrollIntoViewDirective, ScrollIntoViewModule, SelectComponent, SelectModule, SelectOptionDirective, SelectType, SelectValueDirective, SidebarComponent, SidebarModule, SidebarPosition, SortEvent, SortParam, StateUtil, StringCellComponent, StringFilter, StringFilterComponent, StringFilterType, StringUtil, SwitchButtonComponent, SwitchComponent, SwitchModule, TOGGLE_CONTROL_VALUE_ACCESSOR, TabComponent, TabContentDirective, TabTitleDirective, TableBodyComponent, TableColumn, TableColumnStore, TableComponent, TableHeadComponent, TableModule, TableService, TableUtil, TabsComponent, TabsModule, TetaConfigService, TetaContentRef, TetaDatePipe, TetaDatePipeModule, TetaSize, TetaTemplateDirective, TetaTemplateModule, TextFieldComponent, ThemeSwitchComponent, ThemeSwitchModule, ThemeSwitchService, ToggleComponent, ToggleModule, ToolbarComponent, ToolbarModule, TooltipDirective, TooltipModule, TreeComponent, TreeItemToggleComponent, TreeModule, TreeService, VerticalAlign, enLocale, exportDomToImage, formatNumber, getCellComponent, getPrecision, prependZero, ruLocale, tetaZoneFree, tetaZoneFull, tetaZoneOptimized };
 //# sourceMappingURL=tetacom-ng-components.mjs.map