@tetacom/ng-components 1.4.5 → 1.4.7

package/fesm2022/tetacom-ng-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, HostBinding, Directive, Optional, Inject, ContentChild, Input, Injectable, Host, HostListener, ViewChild, forwardRef, ElementRef, EventEmitter, Output, TemplateRef, Injector, ViewContainerRef, Pipe, ViewEncapsulation, ChangeDetectorRef, NgModule, ContentChildren, inject, input, computed, SkipSelf, PLATFORM_ID, InjectionToken } from '@angular/core';
+import { Component, ChangeDetectionStrategy, HostBinding, Directive, Optional, Inject, ContentChild, Input, Injectable, Host, HostListener, ViewChild, forwardRef, ElementRef, EventEmitter, Output, TemplateRef, Injector, ViewContainerRef, Pipe, ViewEncapsulation, ChangeDetectorRef, NgModule, inject, input, computed, output, effect, ContentChildren, SkipSelf, PLATFORM_ID, InjectionToken } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { NgTemplateOutlet, DOCUMENT, NgClass, AsyncPipe, DatePipe, CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i1 from '@angular/common/http';
@@ -10,14 +10,14 @@ import * as d3 from 'd3';
 import { BehaviorSubject, ReplaySubject, combineLatest, takeWhile as takeWhile$1, filter, map as map$1, lastValueFrom, take, shareReplay, Subject, animationFrameScheduler, fromEvent, tap as tap$1, merge, Observable, share, pipe } from 'rxjs';
 import { OrbitControls } from 'three-stdlib';
 import * as i2 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, FormsModule, UntypedFormControl, UntypedFormGroup, Validators, ControlContainer, NgForm, NgModelGroup, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, UntypedFormControl, UntypedFormGroup, Validators, ControlContainer, FormGroup, NgForm, ReactiveFormsModule } from '@angular/forms';
 import { maskitoDateTimeOptionsGenerator, maskitoDateOptionsGenerator, maskitoDateRangeOptionsGenerator } from '@maskito/kit';
 import dayjs from 'dayjs';
 import * as i4 from '@maskito/angular';
 import { MaskitoModule } from '@maskito/angular';
 import { trigger, transition, style, animate } from '@angular/animations';
 import * as i1$2 from '@ngneat/transloco';
-import { TranslocoModule, TRANSLOCO_SCOPE } from '@ngneat/transloco';
+import { TranslocoModule, TRANSLOCO_SCOPE, TranslocoService } from '@ngneat/transloco';
 import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
 import objectHash from 'object-hash';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -1392,11 +1392,11 @@ class DayPickerComponent {
         this.dayOrder = arr;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: DayPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: DayPickerComponent, isStandalone: true, selector: "teta-day-picker", inputs: { date: "date", calendar: "calendar", viewType: "viewType", range: "range", min: "min", max: "max", locale: "locale", hoveredDate: "hoveredDate" }, outputs: { hoveredDateChange: "hoveredDateChange", selectDate: "selectDate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"datepicker-week font-caption\">\n  @for (day of dayOrder; track day) {\n  <p class=\"datepicker-day\">\n    {{ day }}\n  </p>\n  }\n</div>\n<div class=\"datepicker-picker color-text-90 font-body-3\">\n  @for (day of calendar; track day) {\n  <div\n    [class]=\"getRangeActiveClass(day) + ' datepicker-date font-body-3 datepicker_' + viewType\"\n    (mouseenter)=\"hover(day.date)\"\n    (click)=\"pickDate(day)\"\n    [ngClass]=\"{\n      'datepicker-date_active': day.selected || (day.date === hoveredDate && range && !range.to),\n      'datepicker-date-range_hover': range && isHoveredRange(day),\n      'datepicker-date_disabled': day.disabled,\n      'color-text-30': day.disabled || (!range && !day.isCurrentMonth),\n      'datepicker-date-range_disabled': !day.isCurrentMonth && range,\n      'datepicker-date-range_active': isActiveRange(day)\n    }\"\n  >\n    <teta-day-item [day]=\"day\"></teta-day-item>\n  </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DayItemComponent, selector: "teta-day-item", inputs: ["day"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: DayPickerComponent, isStandalone: true, selector: "teta-day-picker", inputs: { date: "date", calendar: "calendar", viewType: "viewType", range: "range", min: "min", max: "max", locale: "locale", hoveredDate: "hoveredDate" }, outputs: { hoveredDateChange: "hoveredDateChange", selectDate: "selectDate" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"datepicker-week font-caption\">\n  @for (day of dayOrder; track day) {\n  <p class=\"datepicker-day\">\n    {{ day }}\n  </p>\n  }\n</div>\n<div class=\"datepicker-picker color-text-90 font-body-3\">\n  @for (day of calendar; track day.date.getTime()) {\n  <div\n    [class]=\"getRangeActiveClass(day) + ' datepicker-date font-body-3 datepicker_' + viewType\"\n    (mouseenter)=\"hover(day.date)\"\n    (click)=\"pickDate(day)\"\n    [ngClass]=\"{\n      'datepicker-date_active': day.selected || (day.date === hoveredDate && range && !range.to),\n      'datepicker-date-range_hover': range && isHoveredRange(day),\n      'datepicker-date_disabled': day.disabled,\n      'color-text-30': day.disabled || (!range && !day.isCurrentMonth),\n      'datepicker-date-range_disabled': !day.isCurrentMonth && range,\n      'datepicker-date-range_active': isActiveRange(day)\n    }\"\n  >\n    <teta-day-item [day]=\"day\"></teta-day-item>\n  </div>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: DayItemComponent, selector: "teta-day-item", inputs: ["day"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: DayPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-day-picker', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, DayItemComponent], template: "<div class=\"datepicker-week font-caption\">\n  @for (day of dayOrder; track day) {\n  <p class=\"datepicker-day\">\n    {{ day }}\n  </p>\n  }\n</div>\n<div class=\"datepicker-picker color-text-90 font-body-3\">\n  @for (day of calendar; track day) {\n  <div\n    [class]=\"getRangeActiveClass(day) + ' datepicker-date font-body-3 datepicker_' + viewType\"\n    (mouseenter)=\"hover(day.date)\"\n    (click)=\"pickDate(day)\"\n    [ngClass]=\"{\n      'datepicker-date_active': day.selected || (day.date === hoveredDate && range && !range.to),\n      'datepicker-date-range_hover': range && isHoveredRange(day),\n      'datepicker-date_disabled': day.disabled,\n      'color-text-30': day.disabled || (!range && !day.isCurrentMonth),\n      'datepicker-date-range_disabled': !day.isCurrentMonth && range,\n      'datepicker-date-range_active': isActiveRange(day)\n    }\"\n  >\n    <teta-day-item [day]=\"day\"></teta-day-item>\n  </div>\n  }\n</div>\n" }]
+            args: [{ selector: 'teta-day-picker', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgClass, DayItemComponent], template: "<div class=\"datepicker-week font-caption\">\n  @for (day of dayOrder; track day) {\n  <p class=\"datepicker-day\">\n    {{ day }}\n  </p>\n  }\n</div>\n<div class=\"datepicker-picker color-text-90 font-body-3\">\n  @for (day of calendar; track day.date.getTime()) {\n  <div\n    [class]=\"getRangeActiveClass(day) + ' datepicker-date font-body-3 datepicker_' + viewType\"\n    (mouseenter)=\"hover(day.date)\"\n    (click)=\"pickDate(day)\"\n    [ngClass]=\"{\n      'datepicker-date_active': day.selected || (day.date === hoveredDate && range && !range.to),\n      'datepicker-date-range_hover': range && isHoveredRange(day),\n      'datepicker-date_disabled': day.disabled,\n      'color-text-30': day.disabled || (!range && !day.isCurrentMonth),\n      'datepicker-date-range_disabled': !day.isCurrentMonth && range,\n      'datepicker-date-range_active': isActiveRange(day)\n    }\"\n  >\n    <teta-day-item [day]=\"day\"></teta-day-item>\n  </div>\n  }\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { date: [{
                 type: Input
             }], calendar: [{
@@ -5621,15 +5621,8 @@ class FormsUtil {
     }
     static { this.formProvider = {
         provide: ControlContainer,
-        useFactory: FormsUtil.formFactory,
-        deps: [
-            [new Optional(), NgForm],
-            [new Optional(), NgModelGroup],
-        ],
+        useFactory: () => inject(ControlContainer, { skipSelf: true })
     }; }
-    static formFactory(ngForm, ngModelGroup) {
-        return ngModelGroup || ngForm || null;
-    }
 }
 
 class PropertyGridItemDescriptionDirective {
@@ -5650,49 +5643,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
                 args: ['tetaPropertyGridItemDescription']
             }] } });
 
-class TableColumn extends FilterItem {
-    /**
-     * Инициализация из анонимного объекта
-     */
-    constructor(options) {
-        super(options);
-        /**
-         * Ширина
-         */
-        this.width = 80;
-        /**
-         * Коэффициент растяжения ячейки
-         */
-        this.flex = 1;
-        /**
-         * Дочерние колонки
-         */
-        this.columns = [];
-        this.width = options?.width ?? 80;
-        this.flex = options?.flex ?? 1;
-        this.headCellClass = options?.headCellClass ?? [];
-        this.cellClass = options?.cellClass ?? [];
-        this.locked = options?.locked ?? false;
-        this.parentName = options?.parentName;
-        this.unit = options?.unit ?? '';
-        this.unitMeasureParameterId = options?.unitMeasureParameterId;
-        this.unitId = options?.unitId;
-        this.data = options?.data;
-        this.editable = options?.editable ?? true;
-        this.headCellComponent = options?.headCellComponent;
-        this.headDropdownConfig = options?.headDropdownConfig;
-        this.cellComponent = options?.cellComponent;
-        this.aggregate = options?.aggregate;
-        this.defaultValue = options?.defaultValue;
-        this.maxValue = options?.maxValue;
-        this.minValue = options?.minValue;
-        this.maxLength = options?.maxLength;
-        this.required = options?.required;
-        this.columns = options?.columns?.map((x) => new TableColumn(x)) ?? [];
-        this.validators = options?.validators;
-    }
-}
-
 const TOGGLE_CONTROL_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => ToggleComponent),
@@ -6147,9 +6097,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
             }] } });
 
 class PropertyGridItemComponent {
-    get template() {
-        return this.itemTemplates.find((item) => item.name === this.column.name);
-    }
     get formGroup() {
         if (this._formGroup instanceof FormGroup) {
             return this._formGroup;
@@ -6159,30 +6106,40 @@ class PropertyGridItemComponent {
         }
         return null;
     }
-    get editable() {
-        return boolOrFuncCallback(this.column.editable)({
-            column: this.column,
-            row: this.formGroup?.getRawValue(),
+    constructor() {
+        this.transloco = inject(TranslocoService);
+        this._formGroup = inject(ControlContainer);
+        this.column = input();
+        this.hideNonEditable = input();
+        this.dict = input();
+        this.decimalPart = input();
+        this.item = input();
+        this.itemTemplates = input();
+        this.template = computed(() => {
+            return this.itemTemplates().find((item) => item.name === this.column().name);
         });
-    }
-    get caption() {
-        if (this.column.filterType === FilterType.boolean) {
-            return '';
-        }
-        return `${this.column.caption}${this.column.unit ? `, ${this.column.unit}` : ''}`;
-    }
-    constructor(_transloco, _formGroup) {
-        this._transloco = _transloco;
-        this._formGroup = _formGroup;
-        this.controlValueChange = new EventEmitter();
+        this.editable = computed(() => {
+            return boolOrFuncCallback(this.column().editable)({
+                column: this.column(),
+                row: this.formGroup?.getRawValue(),
+            });
+        });
+        this.horizontal = input();
+        this.controlValueChange = output();
         this.align = Align;
         this.filterTypeEnum = FilterType;
+        this.caption = computed(() => {
+            if (this.column().filterType === FilterType.boolean) {
+                return '';
+            }
+            return `${this.column().caption}${this.column().unit ? `, ${this.column().unit}` : ''}`;
+        });
         this._alive = true;
     }
     getDict() {
         const dict = this.dict ? this.dict[this.column.name] : [];
-        if (this.column.parentName?.length > 0) {
-            return dict?.filter((dictItem) => dictItem.parentId === this.formGroup?.getRawValue()[this.column.parentName]);
+        if (this.column().parentName?.length > 0) {
+            return dict?.filter((dictItem) => dictItem.parentId === this.formGroup?.getRawValue()[this.column().parentName]);
         }
         return dict;
     }
@@ -6192,20 +6149,20 @@ class PropertyGridItemComponent {
     getError(column) {
         const control = this.formGroup?.get(column.name);
         if (control?.hasError('required')) {
-            return this._transloco.translate('errors.field_is_required');
+            return this.transloco.translate('errors.field_is_required');
         }
         if (control?.hasError('min')) {
-            return this._transloco.translate('errors.min_value', {
+            return this.transloco.translate('errors.min_value', {
                 value: column.minValue,
             });
         }
         if (control?.hasError('max')) {
-            return this._transloco.translate('errors.max_value', {
+            return this.transloco.translate('errors.max_value', {
                 value: column.maxValue,
             });
         }
         if (control?.hasError('maxlength')) {
-            return this._transloco.translate('errors.max_length', {
+            return this.transloco.translate('errors.max_length', {
                 value: column.maxLength,
             });
         }
@@ -6216,21 +6173,21 @@ class PropertyGridItemComponent {
         this._formSub?.unsubscribe();
     }
     ngOnChanges(changes) {
-        if (this.column && this.item) {
-            this.formGroup.registerControl(this.column.name, FormsUtil.initControlFromColumn(this.column, this.item));
+        if (this.column() && this.item()) {
+            this.formGroup.setControl(this.column().name, FormsUtil.initControlFromColumn(this.column(), this.item()));
             this._formSub?.unsubscribe();
-            this._formSub = this.formGroup?.controls[this.column.name]?.valueChanges
+            this._formSub = this.formGroup?.controls[this.column().name]?.valueChanges
                 .pipe(takeWhile(() => this._alive))
                 .subscribe((_) => {
                 this.controlValueChange.emit({
                     id: _,
-                    name: this.column.name,
+                    name: this.column().name,
                 });
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PropertyGridItemComponent, deps: [{ token: i1$2.TranslocoService }, { token: i2.ControlContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: PropertyGridItemComponent, isStandalone: true, 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: "@if (editable || !hideNonEditable) {\n<teta-input\n  [label]=\"caption\"\n  [hint]=\"column.hint\"\n  [formGroup]=\"formGroup\"\n  [horizontal]=\"horizontal\"\n  [required]=\"column.required\"\n>\n  @if (template) {\n  <ng-container\n    *ngTemplateOutlet=\"template.template; context: { $implicit: formGroup?.get(column.name) }\"\n  ></ng-container>\n  } @else { @if (formGroup?.get(column.name)) { @switch (column.filterType) { @case (filterTypeEnum.list) {\n  <teta-select\n    class=\"row_auto\"\n    [tetaDisableControl]=\"!editable\"\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\"\n  ></teta-select>\n  } @case (filterTypeEnum.date) {\n  <teta-date-picker\n    class=\"row_auto\"\n    [appendToBody]=\"true\"\n    [tetaDisableControl]=\"!editable\"\n    [invalid]=\"controlIsInvalid(column.name)\"\n    [formControlName]=\"column.name\"\n  ></teta-date-picker>\n  } @case (filterTypeEnum.boolean) {\n  <teta-toggle [tetaDisableControl]=\"!editable\" [formControlName]=\"column.name\">\n    {{ column.caption }}\n  </teta-toggle>\n  } @default {\n  <teta-text-field\n    class=\"row_auto\"\n    [tetaDisableControl]=\"!editable\"\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\"\n  ></teta-text-field>\n  } } } }\n  <ng-template #default>\n    @if (formGroup?.get(column.name)) { @switch (column.filterType) { @case (filterTypeEnum.list) {\n    <teta-select\n      class=\"row_auto\"\n      [tetaDisableControl]=\"!editable\"\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\"\n    ></teta-select>\n    } @case (filterTypeEnum.date) {\n    <teta-date-picker\n      class=\"row_auto\"\n      [appendToBody]=\"true\"\n      [tetaDisableControl]=\"!editable\"\n      [invalid]=\"controlIsInvalid(column.name)\"\n      [formControlName]=\"column.name\"\n    ></teta-date-picker>\n    } @case (filterTypeEnum.boolean) {\n    <teta-toggle [tetaDisableControl]=\"!editable\" [formControlName]=\"column.name\">\n      {{ column.caption }}\n    </teta-toggle>\n    } @default {\n    <teta-text-field\n      class=\"row_auto\"\n      [decimalPart]=\"column.filterType === filterTypeEnum.number ? decimalPart : null\"\n      [onlyNumber]=\"column.filterType === filterTypeEnum.number\"\n      [placeholder]=\"column.caption\"\n      [invalid]=\"controlIsInvalid(column.name)\"\n      [tetaDisableControl]=\"!editable\"\n      [formControlName]=\"column.name\"\n    ></teta-text-field>\n    } } }\n  </ng-template>\n  @if (controlIsInvalid(column.name)) {\n  <div ngProjectAs=\"message\" class=\"color-red-50\">\n    {{ getError(column) }}\n  </div>\n  }\n</teta-input>\n}\n", styles: [""], dependencies: [{ kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "viewType", "notFoundText", "valueRef", "textRef", "searchRef"] }, { kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["date", "showTime", "minDate", "maxDate", "invalid", "disabled", "align", "verticalAlign", "viewType", "appendToBody", "backdrop", "allowNull", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minYearDate", "maxYearDate"], outputs: ["selectDate"] }, { kind: "component", type: ToggleComponent, selector: "teta-toggle", inputs: ["palette", "noLabel", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "decimalPart", "invalid"] }, { kind: "directive", type: DisableControlDirective, selector: "[tetaDisableControl]", inputs: ["tetaDisableControl"] }], viewProviders: [FormsUtil.formProvider] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PropertyGridItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: PropertyGridItemComponent, isStandalone: true, selector: "teta-property-grid-item", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, hideNonEditable: { classPropertyName: "hideNonEditable", publicName: "hideNonEditable", isSignal: true, isRequired: false, transformFunction: null }, dict: { classPropertyName: "dict", publicName: "dict", isSignal: true, isRequired: false, transformFunction: null }, decimalPart: { classPropertyName: "decimalPart", publicName: "decimalPart", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, itemTemplates: { classPropertyName: "itemTemplates", publicName: "itemTemplates", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { controlValueChange: "controlValueChange" }, usesOnChanges: true, ngImport: i0, template: "@if (editable() || !hideNonEditable()) {\n  <teta-input\n    [label]=\"caption()\"\n    [hint]=\"column().hint\"\n    [formGroup]=\"formGroup\"\n    [horizontal]=\"horizontal()\"\n    [required]=\"column().required\">\n    @if (template()) {\n      <ng-container\n        *ngTemplateOutlet=\"template().template; context: { $implicit: formGroup?.get(column().name) }\"></ng-container>\n    } @else {\n      @if (formGroup?.get(column().name)) {\n        @switch (column().filterType) {\n          @case (filterTypeEnum.list) {\n            <teta-select\n              class=\"row_auto\"\n              [tetaDisableControl]=\"!editable()\"\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          }\n          @case (filterTypeEnum.date) {\n            <teta-date-picker\n              class=\"row_auto\"\n              [appendToBody]=\"true\"\n              [tetaDisableControl]=\"!editable()\"\n              [invalid]=\"controlIsInvalid(column().name)\"\n              [formControlName]=\"column().name\"></teta-date-picker>\n          }\n          @case (filterTypeEnum.boolean) {\n            <teta-toggle [tetaDisableControl]=\"!editable\" [formControlName]=\"column().name\">\n              {{ column().caption }}\n            </teta-toggle>\n          }\n          @default {\n            <teta-text-field\n              class=\"row_auto\"\n              [tetaDisableControl]=\"!editable()\"\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\"\n            ></teta-text-field>\n          }\n        }\n      }\n    }\n    @if (controlIsInvalid(column().name)) {\n      <div ngProjectAs=\"message\" class=\"color-red-50\">\n        {{ getError(column()) }}\n      </div>\n    }\n  </teta-input>\n}\n", styles: [""], dependencies: [{ kind: "component", type: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "horizontal", "required"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SelectComponent, selector: "teta-select", inputs: ["multiple", "options", "invalid", "align", "verticalAlign", "autoClose", "autoCloseIgnore", "disabled", "itemSize", "virtual", "icon", "placeholder", "appendToBody", "allowNull", "viewType", "notFoundText", "valueRef", "textRef", "searchRef"] }, { kind: "component", type: DatePickerComponent, selector: "teta-date-picker", inputs: ["date", "showTime", "minDate", "maxDate", "invalid", "disabled", "align", "verticalAlign", "viewType", "appendToBody", "backdrop", "allowNull", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minYearDate", "maxYearDate"], outputs: ["selectDate"] }, { kind: "component", type: ToggleComponent, selector: "teta-toggle", inputs: ["palette", "noLabel", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "teta-text-field", inputs: ["placeholder", "leftIconName", "disabled", "onlyNumber", "decimalPart", "invalid"] }, { kind: "directive", type: DisableControlDirective, selector: "[tetaDisableControl]", inputs: ["tetaDisableControl"] }], viewProviders: [FormsUtil.formProvider] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PropertyGridItemComponent, decorators: [{
             type: Component,
@@ -6244,88 +6201,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
                         ToggleComponent,
                         TextFieldComponent,
                         DisableControlDirective,
-                    ], template: "@if (editable || !hideNonEditable) {\n<teta-input\n  [label]=\"caption\"\n  [hint]=\"column.hint\"\n  [formGroup]=\"formGroup\"\n  [horizontal]=\"horizontal\"\n  [required]=\"column.required\"\n>\n  @if (template) {\n  <ng-container\n    *ngTemplateOutlet=\"template.template; context: { $implicit: formGroup?.get(column.name) }\"\n  ></ng-container>\n  } @else { @if (formGroup?.get(column.name)) { @switch (column.filterType) { @case (filterTypeEnum.list) {\n  <teta-select\n    class=\"row_auto\"\n    [tetaDisableControl]=\"!editable\"\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\"\n  ></teta-select>\n  } @case (filterTypeEnum.date) {\n  <teta-date-picker\n    class=\"row_auto\"\n    [appendToBody]=\"true\"\n    [tetaDisableControl]=\"!editable\"\n    [invalid]=\"controlIsInvalid(column.name)\"\n    [formControlName]=\"column.name\"\n  ></teta-date-picker>\n  } @case (filterTypeEnum.boolean) {\n  <teta-toggle [tetaDisableControl]=\"!editable\" [formControlName]=\"column.name\">\n    {{ column.caption }}\n  </teta-toggle>\n  } @default {\n  <teta-text-field\n    class=\"row_auto\"\n    [tetaDisableControl]=\"!editable\"\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\"\n  ></teta-text-field>\n  } } } }\n  <ng-template #default>\n    @if (formGroup?.get(column.name)) { @switch (column.filterType) { @case (filterTypeEnum.list) {\n    <teta-select\n      class=\"row_auto\"\n      [tetaDisableControl]=\"!editable\"\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\"\n    ></teta-select>\n    } @case (filterTypeEnum.date) {\n    <teta-date-picker\n      class=\"row_auto\"\n      [appendToBody]=\"true\"\n      [tetaDisableControl]=\"!editable\"\n      [invalid]=\"controlIsInvalid(column.name)\"\n      [formControlName]=\"column.name\"\n    ></teta-date-picker>\n    } @case (filterTypeEnum.boolean) {\n    <teta-toggle [tetaDisableControl]=\"!editable\" [formControlName]=\"column.name\">\n      {{ column.caption }}\n    </teta-toggle>\n    } @default {\n    <teta-text-field\n      class=\"row_auto\"\n      [decimalPart]=\"column.filterType === filterTypeEnum.number ? decimalPart : null\"\n      [onlyNumber]=\"column.filterType === filterTypeEnum.number\"\n      [placeholder]=\"column.caption\"\n      [invalid]=\"controlIsInvalid(column.name)\"\n      [tetaDisableControl]=\"!editable\"\n      [formControlName]=\"column.name\"\n    ></teta-text-field>\n    } } }\n  </ng-template>\n  @if (controlIsInvalid(column.name)) {\n  <div ngProjectAs=\"message\" class=\"color-red-50\">\n    {{ getError(column) }}\n  </div>\n  }\n</teta-input>\n}\n" }]
-        }], ctorParameters: () => [{ type: i1$2.TranslocoService }, { type: i2.ControlContainer, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { column: [{
-                type: Input
-            }], hideNonEditable: [{
-                type: Input
-            }], dict: [{
-                type: Input
-            }], decimalPart: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }], itemTemplates: [{
-                type: Input
-            }], horizontal: [{
-                type: Input
-            }], controlValueChange: [{
-                type: Output
-            }] } });
+                    ], template: "@if (editable() || !hideNonEditable()) {\n  <teta-input\n    [label]=\"caption()\"\n    [hint]=\"column().hint\"\n    [formGroup]=\"formGroup\"\n    [horizontal]=\"horizontal()\"\n    [required]=\"column().required\">\n    @if (template()) {\n      <ng-container\n        *ngTemplateOutlet=\"template().template; context: { $implicit: formGroup?.get(column().name) }\"></ng-container>\n    } @else {\n      @if (formGroup?.get(column().name)) {\n        @switch (column().filterType) {\n          @case (filterTypeEnum.list) {\n            <teta-select\n              class=\"row_auto\"\n              [tetaDisableControl]=\"!editable()\"\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          }\n          @case (filterTypeEnum.date) {\n            <teta-date-picker\n              class=\"row_auto\"\n              [appendToBody]=\"true\"\n              [tetaDisableControl]=\"!editable()\"\n              [invalid]=\"controlIsInvalid(column().name)\"\n              [formControlName]=\"column().name\"></teta-date-picker>\n          }\n          @case (filterTypeEnum.boolean) {\n            <teta-toggle [tetaDisableControl]=\"!editable\" [formControlName]=\"column().name\">\n              {{ column().caption }}\n            </teta-toggle>\n          }\n          @default {\n            <teta-text-field\n              class=\"row_auto\"\n              [tetaDisableControl]=\"!editable()\"\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\"\n            ></teta-text-field>\n          }\n        }\n      }\n    }\n    @if (controlIsInvalid(column().name)) {\n      <div ngProjectAs=\"message\" class=\"color-red-50\">\n        {{ getError(column()) }}\n      </div>\n    }\n  </teta-input>\n}\n" }]
+        }], ctorParameters: () => [] });
 
 class PropertyGridGroupComponent {
-    get formGroup() {
-        if (this._formGroup instanceof FormGroup) {
-            return this._formGroup;
-        }
-        if (this._formGroup instanceof NgForm) {
-            return this._formGroup.form;
-        }
-        return null;
-    }
-    get editable() {
-        return boolOrFuncCallback(this.column.editable)({
-            column: this.column,
-            row: this.formGroup?.getRawValue(),
-        });
-    }
-    constructor(_formGroup) {
-        this._formGroup = _formGroup;
-        this.controlValueChange = new EventEmitter();
-    }
-    trackColumns(index, column) {
-        return column.name;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PropertyGridGroupComponent, deps: [{ token: i2.ControlContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: PropertyGridGroupComponent, isStandalone: true, 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    @for (col of column.columns; track trackColumns($index, col)) { @if (col.columns?.length < 1) { @if (column.editable\n    || !hideNonEditable) {\n    <teta-property-grid-item\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\"\n    ></teta-property-grid-item>\n    } } @if (col.columns?.length > 0) {\n    <teta-property-grid-group\n      [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)\"\n    ></teta-property-grid-group>\n    } }\n  </div>\n</teta-expand-item>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: PropertyGridGroupComponent, selector: "teta-property-grid-group", inputs: ["column", "hideNonEditable", "dict", "item", "horizontal", "decimalPart", "itemTemplates"], outputs: ["controlValueChange"] }, { kind: "component", type: ExpandItemComponent, selector: "teta-expand-item", inputs: ["open"], outputs: ["openChange"], exportAs: ["expand-item"] }, { kind: "component", type: PropertyGridItemComponent, selector: "teta-property-grid-item", inputs: ["column", "hideNonEditable", "dict", "decimalPart", "item", "itemTemplates", "horizontal"], outputs: ["controlValueChange"] }], viewProviders: [FormsUtil.formProvider] }); }
+    constructor() {
+        this.column = input();
+        this.hideNonEditable = input();
+        this.dict = input();
+        this.item = input();
+        this.horizontal = input();
+        this.controlValueChange = output();
+        this.decimalPart = input();
+        this.itemTemplates = input();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PropertyGridGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: PropertyGridGroupComponent, isStandalone: true, selector: "teta-property-grid-group", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: true, isRequired: false, transformFunction: null }, hideNonEditable: { classPropertyName: "hideNonEditable", publicName: "hideNonEditable", isSignal: true, isRequired: false, transformFunction: null }, dict: { classPropertyName: "dict", publicName: "dict", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, decimalPart: { classPropertyName: "decimalPart", publicName: "decimalPart", isSignal: true, isRequired: false, transformFunction: null }, itemTemplates: { classPropertyName: "itemTemplates", publicName: "itemTemplates", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { controlValueChange: "controlValueChange" }, ngImport: i0, template: "<teta-expand-item>\n  <span ngProjectAs=\"head\">\n    {{ column().caption }}\n  </span>\n  <div class=\"form-container\">\n    @for (col of column().columns; track col.name) {\n      @if (col.columns?.length < 1) {\n        @if (column().editable || !hideNonEditable) {\n          <teta-property-grid-item\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()\"\n          ></teta-property-grid-item>\n        }\n      } @else {\n        <teta-property-grid-group\n          [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)\"\n        ></teta-property-grid-group>\n      }\n    }\n  </div>\n</teta-expand-item>\n", styles: [":host{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: PropertyGridGroupComponent, selector: "teta-property-grid-group", inputs: ["column", "hideNonEditable", "dict", "item", "horizontal", "decimalPart", "itemTemplates"], outputs: ["controlValueChange"] }, { kind: "component", type: ExpandItemComponent, selector: "teta-expand-item", inputs: ["open"], outputs: ["openChange"], exportAs: ["expand-item"] }, { 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: "18.2.1", ngImport: i0, type: PropertyGridGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-property-grid-group', viewProviders: [FormsUtil.formProvider], standalone: true, imports: [ExpandItemComponent, PropertyGridItemComponent], template: "<teta-expand-item>\n  <span ngProjectAs=\"head\">\n    {{ column.caption }}\n  </span>\n  <div class=\"form-container\">\n    @for (col of column.columns; track trackColumns($index, col)) { @if (col.columns?.length < 1) { @if (column.editable\n    || !hideNonEditable) {\n    <teta-property-grid-item\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\"\n    ></teta-property-grid-item>\n    } } @if (col.columns?.length > 0) {\n    <teta-property-grid-group\n      [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)\"\n    ></teta-property-grid-group>\n    } }\n  </div>\n</teta-expand-item>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
-        }], ctorParameters: () => [{ type: i2.ControlContainer, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { column: [{
-                type: Input
-            }], hideNonEditable: [{
-                type: Input
-            }], dict: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }], horizontal: [{
-                type: Input
-            }], controlValueChange: [{
-                type: Output
-            }], decimalPart: [{
-                type: Input
-            }], itemTemplates: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'teta-property-grid-group', viewProviders: [FormsUtil.formProvider], standalone: true, imports: [ExpandItemComponent, PropertyGridItemComponent], template: "<teta-expand-item>\n  <span ngProjectAs=\"head\">\n    {{ column().caption }}\n  </span>\n  <div class=\"form-container\">\n    @for (col of column().columns; track col.name) {\n      @if (col.columns?.length < 1) {\n        @if (column().editable || !hideNonEditable) {\n          <teta-property-grid-item\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()\"\n          ></teta-property-grid-item>\n        }\n      } @else {\n        <teta-property-grid-group\n          [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)\"\n        ></teta-property-grid-group>\n      }\n    }\n  </div>\n</teta-expand-item>\n", styles: [":host{display:flex;flex-direction:column}\n"] }]
+        }] });
 
 class PropertyGridComponent {
-    set item(item) {
-        this._item = item;
-        if (this.formGroup) {
-            this.formGroup.patchValue(item, {
-                emitEvent: false,
-            });
-        }
-    }
-    get item() {
-        return this._item;
-    }
     get formGroup() {
         if (this._formGroup instanceof FormGroup) {
             return this._formGroup;
@@ -6338,8 +6236,22 @@ class PropertyGridComponent {
     constructor(_formGroup) {
         this._formGroup = _formGroup;
         this.formClass = true;
-        this.controlValueChange = new EventEmitter();
-        this._alive = true;
+        this.hideNonEditable = input();
+        this.columns = input();
+        this.dict = input();
+        this.item = input();
+        this.horizontal = input();
+        this.decimalPart = input();
+        this.controlValueChange = output();
+        effect(() => {
+            if (this.item() && this.formGroup) {
+                for (const key in this.item()) {
+                    if (this.item().hasOwnProperty(key)) {
+                        this.formGroup.setControl(key, new UntypedFormControl(this.item()[key]));
+                    }
+                }
+            }
+        });
     }
     getEditable(column) {
         return boolOrFuncCallback(column.editable)({
@@ -6348,7 +6260,7 @@ class PropertyGridComponent {
         });
     }
     onControlValueChange(event) {
-        const affected = this.columns.filter((_) => _.parentName === event.name);
+        const affected = this.columns().filter((_) => _.parentName === event.name);
         if (affected?.length) {
             affected.forEach((item) => {
                 const value = this.formGroup.getRawValue()[item.name];
@@ -6364,21 +6276,15 @@ class PropertyGridComponent {
         }
         this.controlValueChange.emit(event);
     }
-    ngOnDestroy() {
-        this._alive = false;
-    }
-    trackColumns(index, column) {
-        return column.name;
-    }
     getDictValue(value, name) {
-        return this.dict[name]?.find((_) => _.id === value);
+        return this.dict()[name]?.find((_) => _.id === value);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PropertyGridComponent, deps: [{ token: i2.ControlContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: PropertyGridComponent, isStandalone: true, 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: "@if (columns?.length) { @for (column of columns; track trackColumns($index, column)) { @if (column.columns?.length < 1\n&& (getEditable(column) || !hideNonEditable)) {\n<teta-property-grid-item\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\"\n></teta-property-grid-item>\n} @if (column.columns?.length > 0 && (getEditable(column) || !hideNonEditable)) {\n<teta-property-grid-group\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\"\n></teta-property-grid-group>\n} } }\n", styles: [":host{padding:12px 8px}\n"], dependencies: [{ kind: "component", type: PropertyGridItemComponent, selector: "teta-property-grid-item", inputs: ["column", "hideNonEditable", "dict", "decimalPart", "item", "itemTemplates", "horizontal"], outputs: ["controlValueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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"] }], viewProviders: [FormsUtil.formProvider] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: PropertyGridComponent, isStandalone: true, selector: "teta-property-grid", inputs: { hideNonEditable: { classPropertyName: "hideNonEditable", publicName: "hideNonEditable", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, dict: { classPropertyName: "dict", publicName: "dict", isSignal: true, isRequired: false, transformFunction: null }, item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, horizontal: { classPropertyName: "horizontal", publicName: "horizontal", isSignal: true, isRequired: false, transformFunction: null }, decimalPart: { classPropertyName: "decimalPart", publicName: "decimalPart", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { controlValueChange: "controlValueChange" }, host: { properties: { "class.form-container": "this.formClass" } }, queries: [{ propertyName: "itemTemplates", predicate: PropertyGridItemDescriptionDirective }], ngImport: i0, template: "@if (columns().length) {\n  @for (column of columns(); track column.name) {\n    @if (column.columns?.length < 1 && (getEditable(column) || !hideNonEditable)) {\n      <teta-property-grid-item\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()\"\n      ></teta-property-grid-item>\n    }\n    @if (column.columns?.length > 0 && (getEditable(column) || !hideNonEditable)) {\n      <teta-property-grid-group\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()\"\n      ></teta-property-grid-group>\n    }\n  }\n}\n", styles: [":host{padding:12px 8px}\n"], dependencies: [{ kind: "component", type: PropertyGridItemComponent, selector: "teta-property-grid-item", inputs: ["column", "hideNonEditable", "dict", "decimalPart", "item", "itemTemplates", "horizontal"], outputs: ["controlValueChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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"] }], viewProviders: [FormsUtil.formProvider] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PropertyGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-property-grid', viewProviders: [FormsUtil.formProvider], standalone: true, imports: [PropertyGridItemComponent, FormsModule, ReactiveFormsModule, PropertyGridGroupComponent], template: "@if (columns?.length) { @for (column of columns; track trackColumns($index, column)) { @if (column.columns?.length < 1\n&& (getEditable(column) || !hideNonEditable)) {\n<teta-property-grid-item\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\"\n></teta-property-grid-item>\n} @if (column.columns?.length > 0 && (getEditable(column) || !hideNonEditable)) {\n<teta-property-grid-group\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\"\n></teta-property-grid-group>\n} } }\n", styles: [":host{padding:12px 8px}\n"] }]
+            args: [{ selector: 'teta-property-grid', viewProviders: [FormsUtil.formProvider], standalone: true, imports: [PropertyGridItemComponent, FormsModule, ReactiveFormsModule, PropertyGridGroupComponent], template: "@if (columns().length) {\n  @for (column of columns(); track column.name) {\n    @if (column.columns?.length < 1 && (getEditable(column) || !hideNonEditable)) {\n      <teta-property-grid-item\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()\"\n      ></teta-property-grid-item>\n    }\n    @if (column.columns?.length > 0 && (getEditable(column) || !hideNonEditable)) {\n      <teta-property-grid-group\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()\"\n      ></teta-property-grid-group>\n    }\n  }\n}\n", styles: [":host{padding:12px 8px}\n"] }]
         }], ctorParameters: () => [{ type: i2.ControlContainer, decorators: [{
                     type: Optional
                 }] }], propDecorators: { formClass: [{
@@ -6387,70 +6293,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
             }], itemTemplates: [{
                 type: ContentChildren,
                 args: [PropertyGridItemDescriptionDirective]
-            }], hideNonEditable: [{
-                type: Input
-            }], columns: [{
-                type: Input
-            }], dict: [{
-                type: Input
-            }], item: [{
-                type: Input
-            }], horizontal: [{
-                type: Input
-            }], decimalPart: [{
-                type: Input
-            }], controlValueChange: [{
-                type: Output
             }] } });
 
-class PropertyGridModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PropertyGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: PropertyGridModule, imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            TranslocoModule,
-            PropertyGridComponent,
-            PropertyGridGroupComponent,
-            PropertyGridItemComponent,
-            PropertyGridItemDescriptionDirective], exports: [PropertyGridComponent, PropertyGridItemDescriptionDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PropertyGridModule, providers: [
-            {
-                provide: TRANSLOCO_SCOPE,
-                useValue: { scope: 'errors', alias: 'errors' },
-                multi: true,
-            },
-        ], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            TranslocoModule,
-            PropertyGridComponent,
-            PropertyGridGroupComponent,
-            PropertyGridItemComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: PropertyGridModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [PropertyGridComponent, PropertyGridItemDescriptionDirective],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        TranslocoModule,
-                        PropertyGridComponent,
-                        PropertyGridGroupComponent,
-                        PropertyGridItemComponent,
-                        PropertyGridItemDescriptionDirective,
-                    ],
-                    providers: [
-                        {
-                            provide: TRANSLOCO_SCOPE,
-                            useValue: { scope: 'errors', alias: 'errors' },
-                            multi: true,
-                        },
-                    ],
-                }]
-        }] });
-
 var SidebarPosition;
 (function (SidebarPosition) {
     SidebarPosition[SidebarPosition["left"] = 0] = "left";
@@ -6875,6 +6719,49 @@ class ColumnReorderEvent {
     }
 }
 
+class TableColumn extends FilterItem {
+    /**
+     * Инициализация из анонимного объекта
+     */
+    constructor(options) {
+        super(options);
+        /**
+         * Ширина
+         */
+        this.width = 80;
+        /**
+         * Коэффициент растяжения ячейки
+         */
+        this.flex = 1;
+        /**
+         * Дочерние колонки
+         */
+        this.columns = [];
+        this.width = options?.width ?? 80;
+        this.flex = options?.flex ?? 1;
+        this.headCellClass = options?.headCellClass ?? [];
+        this.cellClass = options?.cellClass ?? [];
+        this.locked = options?.locked ?? false;
+        this.parentName = options?.parentName;
+        this.unit = options?.unit ?? '';
+        this.unitMeasureParameterId = options?.unitMeasureParameterId;
+        this.unitId = options?.unitId;
+        this.data = options?.data;
+        this.editable = options?.editable ?? true;
+        this.headCellComponent = options?.headCellComponent;
+        this.headDropdownConfig = options?.headDropdownConfig;
+        this.cellComponent = options?.cellComponent;
+        this.aggregate = options?.aggregate;
+        this.defaultValue = options?.defaultValue;
+        this.maxValue = options?.maxValue;
+        this.minValue = options?.minValue;
+        this.maxLength = options?.maxLength;
+        this.required = options?.required;
+        this.columns = options?.columns?.map((x) => new TableColumn(x)) ?? [];
+        this.validators = options?.validators;
+    }
+}
+
 class TableColumnStore {
     constructor(options) {
         if (options) {
@@ -11665,5 +11552,5 @@ function tetaZoneOptimized(ngZone) {
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATION_FRAME, AccordionComponent, AccordionContentDirective, AccordionHeadComponent, AccordionItemComponent, AggregationType, Align, ArrayUtil, AutoPositionDirective, AutocompleteComponent, AvatarComponent, BooleanCellComponent, BooleanFilter, BooleanFilterComponent, ButtonComponent, CHECKBOX_CONTROL_VALUE_ACCESSOR, CellComponent, CellComponentBase, CellHostComponent, Chart3dComponent, Chart3dOptions, CheckboxComponent, ClickOutsideDirective, ClickService, ColorInputComponent, ColumnReorderEvent, ColumnResizeEvent, ContextMenuDirective, CurrentModal, DATE_PICKER_CONTROL_VALUE_ACCESSOR, DATE_Range_CONTROL_VALUE_ACCESSOR, DateCalendarComponent, DateCellComponent, DateFilter, DateFilterComponent, DateFilterValue, DatePeriod, DatePickerComponent, DatePickerMode, DateRangeComponent, DateTimeCellComponent, DateUtil, DayModel, DelimiterComponent, DetailComponentBase, DialogComponent, DialogService, DisableControlDirective, DividerComponent, DomUtil, DragContainerDirective, DragContainerInstance, DragDirective, DragDropService, DragInstance, DragPlaceholderDirective, DragPreviewDirective, DragSortContainerDirective, DragSortItemDirective, DropdownComponent, DropdownContentDirective, DropdownDirective, DropdownHeadDirective, DynamicComponentService, DynamicContentBaseDirective, DynamicData, EditEvent, EditType, ExpandCardComponent, ExpandItemComponent, ExpandPanelComponent, ExpandPanelContentDirective, ExpandPanelHeadDirective, ExportType, FileItemComponent, FileUploadAreaComponent, FilterBase, FilterComponentBase, FilterHostComponent, FilterItem, FilterState, FilterType, FormGroupTitleComponent, FormsUtil, HeadCellComponentBase, HeadCellHostComponent, HighlightDirective, HintDirective, IconComponent, IconFileComponent, IconService, IconSpriteDirective, InputComponent, LetContext, LetDirective, ListCellComponent, ListFilter, ListFilterComponent, ListFilterType, LoaderDirective, Message, MessageComponent, MessageHostComponent, MessageService, ModalCloseReason, ModalContainerComponent, ModalInstance, ModalModule, ModalService, NoAutofillDirective, NumberPipe, NumericCellComponent, NumericFilter, NumericFilterComponent, NumericFilterValue, OnlyNumberDirective, OverlayContainerService, PagerComponent, PagerState, PagerUtil, PanelComponent, PopupContentComponent, PositionUtil, ProgressBarComponent, PropertyGridComponent, PropertyGridItemComponent, PropertyGridItemDescriptionDirective, PropertyGridModule, RadioButtonComponent, RadioComponent, RangeCalendarComponent, ResizeDragDirective, ResizePanelComponent, SLIDER_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, ScrollIntoViewDirective, ScrollableComponent, ScrollableDirective, SelectComponent, SelectOptionDirective, SelectType, SelectValueDirective, SidebarComponent, SidebarPosition, SortEvent, SortParam, StateUtil, StepperComponent, StringCellComponent, StringFilter, StringFilterComponent, StringFilterType, StringUtil, SwitchButtonComponent, SwitchComponent, TOGGLE_CONTROL_VALUE_ACCESSOR, TabComponent, TabContentDirective, TabTitleDirective, TableBodyComponent, TableColumn, TableColumnStore, TableComponent, TableHeadComponent, TableRow, TableRowComponent, TableService, TableUtil, TabsComponent, TetaConfigService, TetaContentRef, TetaDatePipe, TetaSize, TetaTemplateDirective, TextFieldComponent, ThemeSwitchComponent, ThemeSwitchService, ToggleComponent, ToolbarComponent, TooltipDirective, TreeComponent, TreeItemToggleComponent, TreeService, VerticalAlign, WINDOW, boolOrFuncCallback, enLocale, exportDomToImage, formatNumber, getCellComponent, getPrecision, isFunction, prependZero, ruLocale, tetaZoneFree, tetaZoneFull, tetaZoneOptimized };
+export { ANIMATION_FRAME, AccordionComponent, AccordionContentDirective, AccordionHeadComponent, AccordionItemComponent, AggregationType, Align, ArrayUtil, AutoPositionDirective, AutocompleteComponent, AvatarComponent, BooleanCellComponent, BooleanFilter, BooleanFilterComponent, ButtonComponent, CHECKBOX_CONTROL_VALUE_ACCESSOR, CellComponent, CellComponentBase, CellHostComponent, Chart3dComponent, Chart3dOptions, CheckboxComponent, ClickOutsideDirective, ClickService, ColorInputComponent, ColumnReorderEvent, ColumnResizeEvent, ContextMenuDirective, CurrentModal, DATE_PICKER_CONTROL_VALUE_ACCESSOR, DATE_Range_CONTROL_VALUE_ACCESSOR, DateCalendarComponent, DateCellComponent, DateFilter, DateFilterComponent, DateFilterValue, DatePeriod, DatePickerComponent, DatePickerMode, DateRangeComponent, DateTimeCellComponent, DateUtil, DayModel, DelimiterComponent, DetailComponentBase, DialogComponent, DialogService, DisableControlDirective, DividerComponent, DomUtil, DragContainerDirective, DragContainerInstance, DragDirective, DragDropService, DragInstance, DragPlaceholderDirective, DragPreviewDirective, DragSortContainerDirective, DragSortItemDirective, DropdownComponent, DropdownContentDirective, DropdownDirective, DropdownHeadDirective, DynamicComponentService, DynamicContentBaseDirective, DynamicData, EditEvent, EditType, ExpandCardComponent, ExpandItemComponent, ExpandPanelComponent, ExpandPanelContentDirective, ExpandPanelHeadDirective, ExportType, FileItemComponent, FileUploadAreaComponent, FilterBase, FilterComponentBase, FilterHostComponent, FilterItem, FilterState, FilterType, FormGroupTitleComponent, FormsUtil, HeadCellComponentBase, HeadCellHostComponent, HighlightDirective, HintDirective, IconComponent, IconFileComponent, IconService, IconSpriteDirective, InputComponent, LetContext, LetDirective, ListCellComponent, ListFilter, ListFilterComponent, ListFilterType, LoaderDirective, Message, MessageComponent, MessageHostComponent, MessageService, ModalCloseReason, ModalContainerComponent, ModalInstance, ModalModule, ModalService, NoAutofillDirective, NumberPipe, NumericCellComponent, NumericFilter, NumericFilterComponent, NumericFilterValue, OnlyNumberDirective, OverlayContainerService, PagerComponent, PagerState, PagerUtil, PanelComponent, PopupContentComponent, PositionUtil, ProgressBarComponent, PropertyGridComponent, PropertyGridItemComponent, PropertyGridItemDescriptionDirective, RadioButtonComponent, RadioComponent, RangeCalendarComponent, ResizeDragDirective, ResizePanelComponent, SLIDER_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, ScrollIntoViewDirective, ScrollableComponent, ScrollableDirective, SelectComponent, SelectOptionDirective, SelectType, SelectValueDirective, SidebarComponent, SidebarPosition, SortEvent, SortParam, StateUtil, StepperComponent, StringCellComponent, StringFilter, StringFilterComponent, StringFilterType, StringUtil, SwitchButtonComponent, SwitchComponent, TOGGLE_CONTROL_VALUE_ACCESSOR, TabComponent, TabContentDirective, TabTitleDirective, TableBodyComponent, TableColumn, TableColumnStore, TableComponent, TableHeadComponent, TableRow, TableRowComponent, TableService, TableUtil, TabsComponent, TetaConfigService, TetaContentRef, TetaDatePipe, TetaSize, TetaTemplateDirective, TextFieldComponent, ThemeSwitchComponent, ThemeSwitchService, ToggleComponent, ToolbarComponent, TooltipDirective, TreeComponent, TreeItemToggleComponent, TreeService, VerticalAlign, WINDOW, boolOrFuncCallback, enLocale, exportDomToImage, formatNumber, getCellComponent, getPrecision, isFunction, prependZero, ruLocale, tetaZoneFree, tetaZoneFull, tetaZoneOptimized };
 //# sourceMappingURL=tetacom-ng-components.mjs.map