@tetacom/ng-components 1.1.17 → 1.1.19

package/fesm2022/tetacom-ng-components.mjs

@@ -6934,6 +6934,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                 }]
         }] });
 
+function isFunction(obj) {
+    return !!(obj && obj?.constructor && obj?.call && obj?.apply);
+}
+
+function boolOrFuncCallback(variable) {
+    return (args) => {
+        if (typeof variable === 'boolean') {
+            return variable;
+        }
+        else if (isFunction(variable)) {
+            return variable(args);
+        }
+        return true;
+    };
+}
+
 class FormsUtil {
     static validateAllFormFields(formGroup) {
         formGroup.updateValueAndValidity();
@@ -7144,7 +7160,7 @@ class PropertyGridItemComponent {
     item;
     itemTemplates;
     get template() {
-        return this.itemTemplates.find((item) => item.name === this.column.name);
+        return this.itemTemplates.find(item => item.name === this.column.name);
     }
     get formGroup() {
         if (this._formGroup instanceof FormGroup) {
@@ -7155,6 +7171,12 @@ class PropertyGridItemComponent {
         }
         return null;
     }
+    get editable() {
+        return boolOrFuncCallback(this.column.editable)({
+            column: this.column,
+            row: this.formGroup?.getRawValue(),
+        });
+    }
     horizontal;
     controlValueChange = new EventEmitter();
     align = Align;
@@ -7198,8 +7220,6 @@ class PropertyGridItemComponent {
             });
         }
     }
-    ngOnInit() {
-    }
     ngOnDestroy() {
         this._alive = false;
         this._formSub?.unsubscribe();
@@ -7210,7 +7230,7 @@ class PropertyGridItemComponent {
             this._formSub?.unsubscribe();
             this._formSub = this.formGroup?.controls[this.column.name]?.valueChanges
                 .pipe(takeWhile(() => this._alive))
-                .subscribe((_) => {
+                .subscribe(_ => {
                 this.controlValueChange.emit({
                     id: _,
                     name: this.column.name,
@@ -7219,11 +7239,11 @@ class PropertyGridItemComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: PropertyGridItemComponent, deps: [{ token: i1$2.TranslocoService }, { token: i3.ControlContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.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: ["date", "locale", "showTime", "minDate", "maxDate", "invalid", "disabled", "align", "verticalAlign", "viewType", "appendToBody", "backdrop", "allowNull", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minYearDate", "maxYearDate"], outputs: ["selectDate"] }, { 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: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "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] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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=\"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                       [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: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.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: ["date", "locale", "showTime", "minDate", "maxDate", "invalid", "disabled", "align", "verticalAlign", "viewType", "appendToBody", "backdrop", "allowNull", "firstDayOfWeek", "disabledDates", "disabledPeriods", "disabledDays", "minYearDate", "maxYearDate"], outputs: ["selectDate"] }, { 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: InputComponent, selector: "teta-input", inputs: ["label", "hint", "viewType", "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: "16.2.1", ngImport: i0, type: PropertyGridItemComponent, decorators: [{
             type: Component,
-            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" }]
+            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=\"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                       [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$2.TranslocoService }, { type: i3.ControlContainer, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { column: [{
@@ -7245,6 +7265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
             }] } });
 
 class PropertyGridGroupComponent {
+    _formGroup;
     column;
     hideNonEditable;
     dict;
@@ -7253,20 +7274,36 @@ class PropertyGridGroupComponent {
     controlValueChange = new EventEmitter();
     decimalPart;
     itemTemplates;
-    constructor() {
+    get formGroup() {
+        if (this._formGroup instanceof FormGroup) {
+            return this._formGroup;
+        }
+        if (this._formGroup instanceof NgForm) {
+            return this._formGroup.form;
+        }
+        return null;
     }
-    ngOnInit() {
+    get editable() {
+        return boolOrFuncCallback(this.column.editable)({
+            column: this.column,
+            row: this.formGroup?.getRawValue(),
+        });
+    }
+    constructor(_formGroup) {
+        this._formGroup = _formGroup;
     }
     trackColumns(index, column) {
         return column.name;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: PropertyGridGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: PropertyGridGroupComponent, deps: [{ token: i3.ControlContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.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"] }], viewProviders: [FormsUtil.formProvider] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", 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                                 [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: [{
+            args: [{ selector: 'teta-property-grid-group', viewProviders: [FormsUtil.formProvider], 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 [{ type: i3.ControlContainer, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { column: [{
                 type: Input
             }], hideNonEditable: [{
                 type: Input
@@ -7319,6 +7356,12 @@ class PropertyGridComponent {
     constructor(_formGroup) {
         this._formGroup = _formGroup;
     }
+    getEditable(column) {
+        return boolOrFuncCallback(column.editable)({
+            column: column,
+            row: this.formGroup?.getRawValue(),
+        });
+    }
     onControlValueChange(event) {
         const affected = this.columns.filter(_ => _.parentName === event.name);
         if (affected?.length) {
@@ -7336,7 +7379,6 @@ class PropertyGridComponent {
         }
         this.controlValueChange.emit(event);
     }
-    ngOnInit() { }
     ngOnDestroy() {
         this._alive = false;
     }
@@ -7346,13 +7388,12 @@ class PropertyGridComponent {
     getDictValue(value, name) {
         return this.dict[name]?.find(_ => _.id === value);
     }
-    ngAfterViewInit() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: PropertyGridComponent, deps: [{ token: i3.ControlContainer, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.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] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", 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 && (getEditable(column) || !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 && (getEditable(column) || !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: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.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: "16.2.1", ngImport: i0, type: PropertyGridComponent, decorators: [{
             type: Component,
-            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"] }]
+            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 && (getEditable(column) || !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 && (getEditable(column) || !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: [{
@@ -7961,16 +8002,10 @@ class TableColumn extends FilterItem {
      * Стобец закреплен
      */
     locked;
-    /**
-     * Название столбца в строке результатов
-     */
     /**
      * Название столбца родителя
      */
     parentName;
-    /**
-     * Название столбца для заголовка таблицы
-     */
     /**
      * Единицы измерения
      */
@@ -8579,7 +8614,7 @@ class TableService {
                 this._currentEditCell = cellEvent;
             }
             else {
-                if (this.boolOrFuncCallback(!!this.rowEditable)(this.getRowByIndex(cellEvent?.row)?.data)) {
+                if (boolOrFuncCallback(!!this.rowEditable)(this.getRowByIndex(cellEvent?.row)?.data)) {
                     this._editRowStart.next(cellEvent);
                     this._currentEditCell = cellEvent;
                 }
@@ -8593,7 +8628,7 @@ class TableService {
                 this._editCellStop.next(this._currentEditCell);
             }
             const column = this.getColumnByName(cellEvent?.column);
-            if (this.boolOrFuncCallback(column?.editable)({
+            if (boolOrFuncCallback(column?.editable)({
                 row: this.getRowByIndex(cellEvent?.row),
                 column: column,
             })) {
@@ -8731,7 +8766,7 @@ class TableService {
             return null;
         }
         const column = this.getColumnByName(nextCell?.column);
-        if (this.boolOrFuncCallback(column.editable)({
+        if (boolOrFuncCallback(column.editable)({
             row: this.getRowByIndex(nextCell.row),
             column,
         })) {
@@ -8745,7 +8780,7 @@ class TableService {
             return null;
         }
         const column = this.getColumnByName(prevCell?.column);
-        if (this.boolOrFuncCallback(column.editable)({
+        if (boolOrFuncCallback(column.editable)({
             row: this.getRowByIndex(prevCell.row),
             column,
         })) {
@@ -8824,17 +8859,6 @@ class TableService {
         this._scrollIndex.next(null);
         this._scrollIndex.next(index);
     }
-    boolOrFuncCallback(variable) {
-        return (args) => {
-            if (typeof variable === 'boolean') {
-                return variable;
-            }
-            else if (this.isFunction(variable)) {
-                return variable(args);
-            }
-            return true;
-        };
-    }
     getVisibleColumns() {
         const visible = ArrayUtil.flatten(this._columns.value, 'columns', true).filter(_ => this._hiddenColumns.value.indexOf(_.name) < 0);
         return visible.sort((a, b) => Number(b.locked) - Number(a.locked));
@@ -8885,9 +8909,6 @@ class TableService {
     getTableElement(element) {
         return element.closest('teta-table');
     }
-    isFunction(obj) {
-        return !!(obj && obj?.constructor && obj?.call && obj?.apply);
-    }
     setColumnAutoWidth(column, table) {
         const cells = table.querySelectorAll(`teta-cell[data-column="${column.name}"] .cell-text`);
         let maxWidth = 0;
@@ -10061,7 +10082,7 @@ class VisibilityDropdownTabComponent {
     hiddenColumns;
     get openItems() {
         if (this._openItems == null) {
-            this._openItems = this.columns.map((_) => _);
+            this._openItems = this.columns.map(_ => _);
         }
         return this._openItems;
     }
@@ -10080,8 +10101,8 @@ class VisibilityDropdownTabComponent {
         this._cdr = _cdr;
         this.locale = this._config.locale;
         this._svc.hiddenColumns
-            .pipe(takeWhile((_) => this._alive), map((_) => [..._]))
-            .subscribe((_) => {
+            .pipe(takeWhile(_ => this._alive), map(_ => [..._]))
+            .subscribe(_ => {
             this.hiddenColumns = _;
         });
     }
@@ -10093,7 +10114,7 @@ class VisibilityDropdownTabComponent {
             return true;
         }
         const columns = ArrayUtil.flatten(this.columns, 'columns');
-        const notHidden = columns.find((_) => this.hiddenColumns.indexOf(_.name) < 0);
+        const notHidden = columns.find(_ => this.hiddenColumns.indexOf(_.name) < 0);
         if (!notHidden) {
             return false;
         }
@@ -10104,7 +10125,7 @@ class VisibilityDropdownTabComponent {
             this.hiddenColumns = [];
         }
         else {
-            this.hiddenColumns = ArrayUtil.flatten(this.columns, 'columns').map((_) => _.name);
+            this.hiddenColumns = ArrayUtil.flatten(this.columns, 'columns').map(_ => _.name);
         }
     }
     setColumnsVisibility() {
@@ -10123,7 +10144,7 @@ class VisibilityDropdownTabComponent {
             this.hideColumn(column, hiddenColumns);
         }
         if (column.columns) {
-            column.columns.forEach((x) => {
+            column.columns.forEach(x => {
                 this.setChildrenVisibility(x, visible, hiddenColumns);
             });
         }
@@ -10148,7 +10169,7 @@ class VisibilityDropdownTabComponent {
         if (parent &&
             !this.columnIsHidden(parent) &&
             parent.columns &&
-            parent.columns.every((_) => this.columnIsHidden(_))) {
+            parent.columns.every(_ => this.columnIsHidden(_))) {
             this.hideColumn(parent, hiddenColumns);
             this.hideParents(parent, hiddenColumns);
         }
@@ -10160,9 +10181,7 @@ class VisibilityDropdownTabComponent {
         hiddenColumns.splice(hiddenColumns.indexOf(column.name), 1);
     }
     findParentColumn(column, columns) {
-        return ArrayUtil.findRecursive(columns, (iterableNode) => iterableNode.columns?.indexOf(column) >= 0, 'columns');
-    }
-    ngOnInit() {
+        return ArrayUtil.findRecursive(columns, iterableNode => iterableNode.columns?.indexOf(column) >= 0, 'columns');
     }
     ngOnDestroy() {
         this._alive = false;
@@ -10620,9 +10639,9 @@ class CellComponentBase {
         return this._edit && this.editable;
     }
     get editable() {
-        return this.svc.boolOrFuncCallback(this.column.editable)({
+        return boolOrFuncCallback(this.column.editable)({
             column: this.column,
-            row: this.row,
+            row: this.row.data,
         });
     }
     get index() {
@@ -12090,16 +12109,12 @@ class Chart3dService {
     minMax;
     data;
     scales;
-    minMax$ = new ReplaySubject(1);
     data$ = new ReplaySubject(1);
     constructor() {
         this.data = this.data$.asObservable();
-        this.minMax = this.minMax$.asObservable();
-        this.data
-            .pipe(tap$1(_ => {
-            this.minMax$.next(this.getAxesMinMax(_));
-        }))
-            .subscribe();
+        this.minMax = this.data.pipe(map$1(_ => {
+            return this.getAxesMinMax(_);
+        }));
         this.scales = this.minMax.pipe(map$1(minMax => {
             return this.getScales(minMax);
         }), shareReplay(1));
@@ -12282,13 +12297,13 @@ class Axes3dComponent {
         }));
     }
     createAxes(scales, minMax) {
-        const axisZ = this.generateTicks(minMax.z, 12).map((_) => {
+        const axisZ = this.generateTicks(minMax.z, 12).map(_ => {
             return { value: _.toFixed(1), position: scales.z(_) };
         });
-        const axisY = this.generateTicks(minMax.y, 12).map((_) => {
+        const axisY = this.generateTicks(minMax.y, 12).map(_ => {
             return { value: _.toFixed(1), position: scales.y(_) };
         });
-        const axisX = this.generateTicks(minMax.x, 4).map((_) => {
+        const axisX = this.generateTicks(minMax.x, 4).map(_ => {
             return { value: _.toFixed(1), position: scales.x(_) };
         });
         return { z: axisZ, y: axisY, x: axisX };
@@ -12298,18 +12313,21 @@ class Axes3dComponent {
         const tickStep = (max - min) / count;
         const ticks = d3
             .range(min, max + tickStep, tickStep)
-            .filter((step) => step <= max);
+            .filter(step => step <= max);
         return ticks;
     }
+    trackBy(i) {
+        return i;
+    }
     ngOnDestroy() {
         this._alive = false;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: Axes3dComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: Axes3dComponent, isStandalone: true, selector: "teta-axes-3d", inputs: { rotation: "rotation" }, ngImport: i0, template: "<ng-container *ngIf=\"{axes:axes|async}as data\">\n  <ngts-text *ngFor='let tick of data.axes?.y;let i=index'\n             [text]=\"tick.value+'-'\"\n             [color]=\"'var(--color-text-90)'\"\n             [rotation]='rotation'\n             [fontSize]='2.5'\n             [position]='[0,tick.position,50]'\n             [anchorX]=\"'right'\"\n             [anchorY]=\"'middle'\"\n             [textAlign]=\"'right'\"\n  ></ngts-text>\n  <ngts-text *ngFor='let tick of data.axes?.z;let i=index'\n             [text]='tick.value'\n             [color]=\"'var(--color-text-90)'\"\n             [rotation]='rotation'\n             [fontSize]='2.5'\n             [position]='[25,-50,tick.position]'\n  ></ngts-text>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: NgtsText, selector: "ngts-text[text]", inputs: ["textRef", "text", "characters", "font", "anchorX", "anchorY"], outputs: ["sync"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: Axes3dComponent, isStandalone: true, selector: "teta-axes-3d", inputs: { rotation: "rotation" }, ngImport: i0, template: "<ng-container *ngIf=\"{axes:axes|async}as data\">\n<ngts-text *ngFor=\"let tick of data.axes?.y;let i=index; trackBy: trackBy\" [text]=\"tick.value+'-'\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[0,tick.position,50]\"\n           [anchorX]=\"'right'\"\n           [anchorY]=\"'middle'\"\n           [textAlign]=\"'right'\"\n></ngts-text>\n<ngts-text *ngFor=\"let tick of data.axes?.z;let i=index; trackBy: trackBy\"  [text]=\"tick.value\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[25,-50,tick.position]\"\n           ></ngts-text>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: NgtsText, selector: "ngts-text[text]", inputs: ["textRef", "text", "characters", "font", "anchorX", "anchorY"], outputs: ["sync"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: Axes3dComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-axes-3d', standalone: true, imports: [CommonModule, NgtsText], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{axes:axes|async}as data\">\n  <ngts-text *ngFor='let tick of data.axes?.y;let i=index'\n             [text]=\"tick.value+'-'\"\n             [color]=\"'var(--color-text-90)'\"\n             [rotation]='rotation'\n             [fontSize]='2.5'\n             [position]='[0,tick.position,50]'\n             [anchorX]=\"'right'\"\n             [anchorY]=\"'middle'\"\n             [textAlign]=\"'right'\"\n  ></ngts-text>\n  <ngts-text *ngFor='let tick of data.axes?.z;let i=index'\n             [text]='tick.value'\n             [color]=\"'var(--color-text-90)'\"\n             [rotation]='rotation'\n             [fontSize]='2.5'\n             [position]='[25,-50,tick.position]'\n  ></ngts-text>\n</ng-container>\n" }]
+            args: [{ selector: 'teta-axes-3d', standalone: true, imports: [CommonModule, NgtsText], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"{axes:axes|async}as data\">\n<ngts-text *ngFor=\"let tick of data.axes?.y;let i=index; trackBy: trackBy\" [text]=\"tick.value+'-'\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[0,tick.position,50]\"\n           [anchorX]=\"'right'\"\n           [anchorY]=\"'middle'\"\n           [textAlign]=\"'right'\"\n></ngts-text>\n<ngts-text *ngFor=\"let tick of data.axes?.z;let i=index; trackBy: trackBy\"  [text]=\"tick.value\"\n           [color]=\"'var(--color-text-90)'\"\n           [rotation]=\"rotation\"\n           [fontSize]=\"2.5\"\n           [position]=\"[25,-50,tick.position]\"\n           ></ngts-text>\n</ng-container>\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { rotation: [{
                 type: Input
             }] } });
@@ -12479,7 +12497,7 @@ class SceneComponent {
         this.rotation = this.store.get('camera').rotation;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SceneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SceneComponent, isStandalone: true, selector: "teta-scene", ngImport: i0, template: "<ng-container *ngIf=\"{data:data|async} as config\">\n  <ngt-scene>\n    <ngts-orbit-controls [minAzimuthAngle]=\"0\" [maxAzimuthAngle]=\"Math.PI/2\" [maxZoom]=\"15\" [minZoom]=\"4\"\n                         (change)=\"setRotation()\"></ngts-orbit-controls>\n  </ngt-scene>\n  <teta-area-3d></teta-area-3d>\n  <ng-container *ngFor=\"let s of config.data.series\">\n    <div teta-series-3d-host [series]=\"s\"></div>\n  </ng-container>\n  <teta-axes-3d [rotation]=\"rotation\"></teta-axes-3d>\n</ng-container>\n\n\n", dependencies: [{ kind: "component", type: NgtsOrbitControls, selector: "ngts-orbit-controls", inputs: ["controlsRef", "camera", "domElement", "makeDefault", "regress", "target", "enableDamping"], outputs: ["change", "start", "end"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: Area3dComponent, selector: "teta-area-3d" }, { kind: "component", type: Axes3dComponent, selector: "teta-axes-3d", inputs: ["rotation"] }, { kind: "component", type: Series3dHost, selector: "[teta-series-3d-host]", inputs: ["series"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: SceneComponent, isStandalone: true, selector: "teta-scene", ngImport: i0, template: "<ng-container *ngIf=\"{data:data|async} as config\">\n  <ngt-scene>\n    <ngts-orbit-controls [minAzimuthAngle]=\"0\" [maxAzimuthAngle]=\"Math.PI/2\" [maxZoom]=\"15\" [minZoom]=\"4\"\n                         (change)=\"setRotation()\"></ngts-orbit-controls>\n  </ngt-scene>\n  <teta-area-3d></teta-area-3d>\n  <ng-container *ngFor=\"let s of config.data?.series;\">\n    <div teta-series-3d-host [series]=\"s\"></div>\n  </ng-container>\n  <teta-axes-3d [rotation]=\"rotation\"></teta-axes-3d>\n</ng-container>\n\n\n", dependencies: [{ kind: "component", type: NgtsOrbitControls, selector: "ngts-orbit-controls", inputs: ["controlsRef", "camera", "domElement", "makeDefault", "regress", "target", "enableDamping"], outputs: ["change", "start", "end"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "component", type: Area3dComponent, selector: "teta-area-3d" }, { kind: "component", type: Axes3dComponent, selector: "teta-axes-3d", inputs: ["rotation"] }, { kind: "component", type: Series3dHost, selector: "[teta-series-3d-host]", inputs: ["series"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: SceneComponent, decorators: [{
             type: Component,
@@ -12491,15 +12509,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                         Axes3dComponent,
                         Block3dComponent,
                         Series3dHost,
-                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container *ngIf=\"{data:data|async} as config\">\n  <ngt-scene>\n    <ngts-orbit-controls [minAzimuthAngle]=\"0\" [maxAzimuthAngle]=\"Math.PI/2\" [maxZoom]=\"15\" [minZoom]=\"4\"\n                         (change)=\"setRotation()\"></ngts-orbit-controls>\n  </ngt-scene>\n  <teta-area-3d></teta-area-3d>\n  <ng-container *ngFor=\"let s of config.data.series\">\n    <div teta-series-3d-host [series]=\"s\"></div>\n  </ng-container>\n  <teta-axes-3d [rotation]=\"rotation\"></teta-axes-3d>\n</ng-container>\n\n\n" }]
+                    ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: "<ng-container *ngIf=\"{data:data|async} as config\">\n  <ngt-scene>\n    <ngts-orbit-controls [minAzimuthAngle]=\"0\" [maxAzimuthAngle]=\"Math.PI/2\" [maxZoom]=\"15\" [minZoom]=\"4\"\n                         (change)=\"setRotation()\"></ngts-orbit-controls>\n  </ngt-scene>\n  <teta-area-3d></teta-area-3d>\n  <ng-container *ngFor=\"let s of config.data?.series;\">\n    <div teta-series-3d-host [series]=\"s\"></div>\n  </ng-container>\n  <teta-axes-3d [rotation]=\"rotation\"></teta-axes-3d>\n</ng-container>\n\n\n" }]
         }], ctorParameters: function () { return []; } });
 
+class CanvasComponent {
+    scene;
+    camera;
+    data;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: CanvasComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: CanvasComponent, isStandalone: true, selector: "teta-canvas", inputs: { scene: "scene", camera: "camera", data: "data" }, providers: [NgtStore], ngImport: i0, template: "<ngt-canvas *ngIf=\"data?.series?.length;else noData\" [sceneGraph]=\"scene\"\n            [camera]=\"camera\">\n</ngt-canvas>\n<ng-template #noData>\n  <p>{{data?.noDataText || 'no data'}}</p>\n</ng-template>\n", styles: [":host{width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: NgtCanvas, selector: "ngt-canvas", inputs: ["sceneGraph", "sceneGraphInputs", "compoundPrefixes", "linear", "legacy", "flat", "orthographic", "frameloop", "dpr", "raycaster", "shadows", "camera", "gl", "eventSource", "eventPrefix", "lookAt", "performance"], outputs: ["created", "pointerMissed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: CanvasComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'teta-canvas', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgtStore], imports: [NgtCanvas, SceneComponent, CommonModule], template: "<ngt-canvas *ngIf=\"data?.series?.length;else noData\" [sceneGraph]=\"scene\"\n            [camera]=\"camera\">\n</ngt-canvas>\n<ng-template #noData>\n  <p>{{data?.noDataText || 'no data'}}</p>\n</ng-template>\n", styles: [":host{width:100%;height:100%}\n"] }]
+        }], propDecorators: { scene: [{
+                type: Input
+            }], camera: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
+class Canvas3dHost {
+    viewContainerRef;
+    scene;
+    camera;
+    data;
+    _init = false;
+    _componentRef;
+    constructor(viewContainerRef) {
+        this.viewContainerRef = viewContainerRef;
+    }
+    ngOnInit() {
+        this.createCanvas();
+        this._init = true;
+    }
+    ngOnChanges() {
+        if (this._init) {
+            this.createCanvas();
+            this._componentRef.injector.get(ChangeDetectorRef).detectChanges();
+        }
+    }
+    createCanvas() {
+        this.viewContainerRef.clear();
+        this._componentRef = this.viewContainerRef.createComponent(CanvasComponent);
+        this._componentRef.instance.scene = this.scene;
+        this._componentRef.instance.camera = this.camera;
+        this._componentRef.instance.data = this.data;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: Canvas3dHost, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: Canvas3dHost, isStandalone: true, selector: "[teta-canvas-3d-host]", inputs: { scene: "scene", camera: "camera", data: "data" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: Canvas3dHost, decorators: [{
+            type: Component,
+            args: [{
+                    selector: '[teta-canvas-3d-host]',
+                    template: '',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { scene: [{
+                type: Input
+            }], camera: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }] } });
+
 extend(THREE);
 class ThreeChartComponent {
     data;
     scene;
     camera;
     chartService = inject(Chart3dService);
+    store = inject(NgtStore);
+    cdr = inject(ChangeDetectorRef);
     ngOnInit() {
         this.scene = SceneComponent;
         this.camera = new OrthographicCamera(20, 20, 20, 20, 0.1, 1000);
@@ -12513,11 +12597,11 @@ class ThreeChartComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ThreeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ThreeChartComponent, isStandalone: true, selector: "teta-three-chart", inputs: { data: "data" }, providers: [NgtStore], usesOnChanges: true, ngImport: i0, template: "<div class=\"column_auto column justify-content-center align-center\" style=\"height: 100%;width: 100%;\">\n  <ngt-canvas *ngIf=\"data?.series?.length;else noData\" [sceneGraph]=\"scene\"\n              [camera]=\"camera\">\n  </ngt-canvas>\n  <ng-template #noData>\n    <p>{{data?.noDataText||'no data'}}</p>\n  </ng-template>\n</div>\n", styles: [":host{width:100%;height:100%}\n"], dependencies: [{ kind: "component", type: NgtCanvas, selector: "ngt-canvas", inputs: ["sceneGraph", "sceneGraphInputs", "compoundPrefixes", "linear", "legacy", "flat", "orthographic", "frameloop", "dpr", "raycaster", "shadows", "camera", "gl", "eventSource", "eventPrefix", "lookAt", "performance"], outputs: ["created", "pointerMissed"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ThreeChartComponent, isStandalone: true, selector: "teta-three-chart", inputs: { data: "data" }, providers: [NgtStore], usesOnChanges: true, ngImport: i0, template: "<div  class=\"column_auto column justify-content-center align-center\" style=\"height: 100%;width: 100%;\">\n  <div teta-canvas-3d-host [camera]=\"camera\" [data]=\"data\" [scene]=\"scene\"></div>\n</div>\n", styles: [":host{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: Canvas3dHost, selector: "[teta-canvas-3d-host]", inputs: ["scene", "camera", "data"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ThreeChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-three-chart', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgtStore], imports: [NgtCanvas, SceneComponent, CommonModule], template: "<div class=\"column_auto column justify-content-center align-center\" style=\"height: 100%;width: 100%;\">\n  <ngt-canvas *ngIf=\"data?.series?.length;else noData\" [sceneGraph]=\"scene\"\n              [camera]=\"camera\">\n  </ngt-canvas>\n  <ng-template #noData>\n    <p>{{data?.noDataText||'no data'}}</p>\n  </ng-template>\n</div>\n", styles: [":host{width:100%;height:100%}\n"] }]
+            args: [{ selector: 'teta-three-chart', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, providers: [NgtStore], imports: [NgtCanvas, SceneComponent, CommonModule, CanvasComponent, Canvas3dHost], template: "<div  class=\"column_auto column justify-content-center align-center\" style=\"height: 100%;width: 100%;\">\n  <div teta-canvas-3d-host [camera]=\"camera\" [data]=\"data\" [scene]=\"scene\"></div>\n</div>\n", styles: [":host{width:100%;height:100%}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }] } });
@@ -14206,5 +14290,5 @@ const ruLocale = {
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATION_FRAME, AccordionComponent, AccordionContentDirective, AccordionHeadComponent, AccordionItemComponent, AccordionModule, AggregationType, Align, Area3dComponent, ArrayUtil, AutoPositionDirective, AutoPositionModule, AutocompleteComponent, AutocompleteModule, AvatarComponent, AvatarModule, Axes3dComponent, Base3dSeriesComponent, Block3dComponent, 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, CustomSeriesComponent, DATE_PICKER_CONTROL_VALUE_ACCESSOR, DATE_Range_CONTROL_VALUE_ACCESSOR, DateCalendarComponent, DateCellComponent, DateFilter, DateFilterComponent, DateFilterValue, DatePeriod, DatePickerComponent, DatePickerMode, DatePickerModule, DateRangeComponent, DateTimeCellComponent, DateUtil, DayModel, DelimiterComponent, DelimiterModule, DetailComponentBase, DialogComponent, DialogService, DisableControlDirective, DisableControlModule, DividerComponent, DividerModule, 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, IconFileModule, IconModule, IconService, IconSpriteDirective, InputComponent, InputModule, LetContext, LetDirective, LetModule, Line3dComponent, ListCellComponent, ListFilter, ListFilterComponent, ListFilterType, LoaderDirective, LoaderModule, Message, MessageComponent, MessageHostComponent, MessageModule, MessageService, ModalCloseReason, ModalContainerComponent, ModalInstance, ModalModule, ModalService, 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, RangeCalendarComponent, ResizeDragDirective, ResizeDragModule, ResizePanelComponent, ResizePanelModule, SLIDER_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, SceneComponent, ScrollIntoViewDirective, ScrollIntoViewModule, ScrollableComponent, ScrollableDirective, ScrollableModule, SelectComponent, SelectModule, SelectOptionDirective, SelectType, SelectValueDirective, Series3dHost, Series3dType, 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, TableRow, TableService, TableUtil, TabsComponent, TabsModule, TetaConfigService, TetaContentRef, TetaDatePipe, TetaDatePipeModule, TetaSize, TetaTemplateDirective, TetaTemplateModule, TextFieldComponent, ThemeSwitchComponent, ThemeSwitchModule, ThemeSwitchService, ThreeChartComponent, ToggleComponent, ToggleModule, ToolbarComponent, ToolbarModule, TooltipDirective, TooltipModule, TreeComponent, TreeItemToggleComponent, TreeModule, TreeService, VerticalAlign, WINDOW, enLocale, exportDomToImage, formatNumber, getCellComponent, getPrecision, prependZero, ruLocale, tetaZoneFree, tetaZoneFull, tetaZoneOptimized };
+export { ANIMATION_FRAME, AccordionComponent, AccordionContentDirective, AccordionHeadComponent, AccordionItemComponent, AccordionModule, AggregationType, Align, Area3dComponent, ArrayUtil, AutoPositionDirective, AutoPositionModule, AutocompleteComponent, AutocompleteModule, AvatarComponent, AvatarModule, Axes3dComponent, Base3dSeriesComponent, Block3dComponent, BooleanCellComponent, BooleanFilter, BooleanFilterComponent, ButtonComponent, ButtonModule, CHECKBOX_CONTROL_VALUE_ACCESSOR, Canvas3dHost, CanvasComponent, CellComponent, CellComponentBase, CellHostComponent, Chart3dComponent, Chart3dModule, Chart3dOptions, CheckboxComponent, CheckboxModule, ClickOutsideDirective, ClickOutsideModule, ClickService, ColorInputComponent, ColumnReorderEvent, ColumnResizeEvent, ContextMenuDirective, ContextMenuModule, CurrentModal, CustomSeriesComponent, DATE_PICKER_CONTROL_VALUE_ACCESSOR, DATE_Range_CONTROL_VALUE_ACCESSOR, DateCalendarComponent, DateCellComponent, DateFilter, DateFilterComponent, DateFilterValue, DatePeriod, DatePickerComponent, DatePickerMode, DatePickerModule, DateRangeComponent, DateTimeCellComponent, DateUtil, DayModel, DelimiterComponent, DelimiterModule, DetailComponentBase, DialogComponent, DialogService, DisableControlDirective, DisableControlModule, DividerComponent, DividerModule, 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, IconFileModule, IconModule, IconService, IconSpriteDirective, InputComponent, InputModule, LetContext, LetDirective, LetModule, Line3dComponent, ListCellComponent, ListFilter, ListFilterComponent, ListFilterType, LoaderDirective, LoaderModule, Message, MessageComponent, MessageHostComponent, MessageModule, MessageService, ModalCloseReason, ModalContainerComponent, ModalInstance, ModalModule, ModalService, 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, RangeCalendarComponent, ResizeDragDirective, ResizeDragModule, ResizePanelComponent, ResizePanelModule, SLIDER_CONTROL_VALUE_ACCESSOR, SWITCH_CONTROL_VALUE_ACCESSOR, SceneComponent, ScrollIntoViewDirective, ScrollIntoViewModule, ScrollableComponent, ScrollableDirective, ScrollableModule, SelectComponent, SelectModule, SelectOptionDirective, SelectType, SelectValueDirective, Series3dHost, Series3dType, 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, TableRow, TableService, TableUtil, TabsComponent, TabsModule, TetaConfigService, TetaContentRef, TetaDatePipe, TetaDatePipeModule, TetaSize, TetaTemplateDirective, TetaTemplateModule, TextFieldComponent, ThemeSwitchComponent, ThemeSwitchModule, ThemeSwitchService, ThreeChartComponent, ToggleComponent, ToggleModule, ToolbarComponent, ToolbarModule, TooltipDirective, TooltipModule, TreeComponent, TreeItemToggleComponent, TreeModule, TreeService, VerticalAlign, WINDOW, boolOrFuncCallback, enLocale, exportDomToImage, formatNumber, getCellComponent, getPrecision, isFunction, prependZero, ruLocale, tetaZoneFree, tetaZoneFull, tetaZoneOptimized };
 //# sourceMappingURL=tetacom-ng-components.mjs.map