@tetacom/ng-components 1.1.18 → 1.1.20

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, Host, HostListener, Injectable, NgModule, forwardRef, EventEmitter, Output, PLATFORM_ID, ElementRef, TemplateRef, Injector, Pipe, ViewChild, InjectionToken, inject, ViewContainerRef, ViewEncapsulation, ChangeDetectorRef, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, SkipSelf } from '@angular/core';
+import { Component, ChangeDetectionStrategy, HostBinding, Directive, Optional, Inject, ContentChild, Input, Host, HostListener, Injectable, NgModule, forwardRef, EventEmitter, Output, PLATFORM_ID, ElementRef, TemplateRef, Injector, Pipe, ViewChild, ViewEncapsulation, ChangeDetectorRef, ViewContainerRef, ContentChildren, inject, CUSTOM_ELEMENTS_SCHEMA, SkipSelf, InjectionToken } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DOCUMENT, CommonModule, isPlatformBrowser, DatePipe } from '@angular/common';
 import * as i1$1 from '@angular/common/http';
@@ -12,8 +12,7 @@ import { MaskitoModule } from '@maskito/angular';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { trigger, transition, style, animate } from '@angular/animations';
 import dayjs from 'dayjs';
-import * as i3$1 from 'rxjs';
-import { ReplaySubject, BehaviorSubject, combineLatest, takeWhile as takeWhile$1, filter as filter$1, map as map$1, shareReplay, Observable, share, pipe, fromEvent, tap, Subject, merge } from 'rxjs';
+import { ReplaySubject, BehaviorSubject, combineLatest, takeWhile as takeWhile$1, filter as filter$1, map as map$1, shareReplay, fromEvent, tap, Subject, merge, Observable, pipe, share } from 'rxjs';
 import { maskitoDateTimeOptionsGenerator, maskitoDateOptionsGenerator, maskitoDateRangeOptionsGenerator } from '@maskito/kit';
 import * as i1$2 from '@ngneat/transloco';
 import { TranslocoModule, TRANSLOCO_SCOPE } from '@ngneat/transloco';
@@ -131,8 +130,6 @@ class IconComponent {
         }
         return result.join(' ');
     }
-    constructor() { }
-    ngOnInit() { }
     getName() {
         return `#${this.name}`;
     }
@@ -142,7 +139,7 @@ class IconComponent {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg class=\"icon__image\">\n  <use [attr.xlink:href]=\"getName()\"></use>\n</svg>\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { name: [{
+        }], propDecorators: { name: [{
                 type: Input
             }], size: [{
                 type: Input
@@ -4348,90 +4345,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                 args: ['class.scrollable_hide_scroll']
             }] } });
 
-const ANIMATION_FRAME = new InjectionToken('Shared Observable based on `window.requestAnimationFrame`', {
-    factory: () => {
-        const { requestAnimationFrame, cancelAnimationFrame } = inject(WINDOW);
-        const animationFrame$ = new Observable(subscriber => {
-            let id = NaN;
-            const callback = (timestamp) => {
-                subscriber.next(timestamp);
-                id = requestAnimationFrame(callback);
-            };
-            id = requestAnimationFrame(callback);
-            return () => {
-                cancelAnimationFrame(id);
-            };
-        });
-        return animationFrame$.pipe(share());
-    },
-});
-const WINDOW = new InjectionToken('An abstraction over global window object', {
-    factory: () => {
-        const { defaultView } = inject(DOCUMENT);
-        if (!defaultView) {
-            throw new Error('Window is not available');
-        }
-        return defaultView;
-    },
-});
-
-function tetaZoneFull(ngZone) {
-    return source => new Observable(subscriber => source.subscribe({
-        next: value => ngZone.run(() => subscriber.next(value)),
-        error: (error) => ngZone.run(() => subscriber.error(error)),
-        complete: () => ngZone.run(() => subscriber.complete()),
-    }));
-}
-function tetaZoneFree(ngZone) {
-    return source => new Observable(subscriber => ngZone.runOutsideAngular(() => source.subscribe(subscriber)));
-}
-function tetaZoneOptimized(ngZone) {
-    return pipe(tetaZoneFree(ngZone), tetaZoneFull(ngZone));
-}
-
-class LetDirective {
-    tetaLet;
-    constructor(viewContainer, templateRef) {
-        viewContainer.createEmbeddedView(templateRef, new LetContext(this));
-    }
-    static ngTemplateContextGuard(_dir, _ctx) {
-        return true;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: LetDirective, deps: [{ token: ViewContainerRef }, { token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: LetDirective, selector: "[tetaLet]", inputs: { tetaLet: "tetaLet" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: LetDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[tetaLet]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef, decorators: [{
-                    type: Inject,
-                    args: [ViewContainerRef]
-                }] }, { type: i0.TemplateRef, decorators: [{
-                    type: Inject,
-                    args: [TemplateRef]
-                }] }]; }, propDecorators: { tetaLet: [{
-                type: Input
-            }] } });
-class LetContext {
-    internalDirectiveInstance;
-    constructor(internalDirectiveInstance) {
-        this.internalDirectiveInstance = internalDirectiveInstance;
-    }
-    get $implicit() {
-        return this.internalDirectiveInstance.tetaLet;
-    }
-    get tetaLet() {
-        return this.internalDirectiveInstance.tetaLet;
-    }
-}
-
 class ScrollableComponent {
-    _elementRef;
-    _injector;
-    _ngZone;
-    _animationFrame;
+    _cdr;
     _scrollDirective;
     _scrollableWrapper;
     _scrollbarVertical;
@@ -4443,29 +4358,25 @@ class ScrollableComponent {
     scrollSize;
     _container;
     _alive = true;
-    constructor(_elementRef, _injector, _ngZone, _animationFrame) {
-        this._elementRef = _elementRef;
-        this._injector = _injector;
-        this._ngZone = _ngZone;
-        this._animationFrame = _animationFrame;
-        this.scrollSize = this._animationFrame.pipe(throttleTime(300), map(() => ({
+    _observer;
+    constructor(_cdr) {
+        this._cdr = _cdr;
+        this._observer = new ResizeObserver(this._observe);
+    }
+    _observe = () => {
+        this.scrollSize = {
             scrollHeight: this._container.nativeElement.scrollHeight,
             scrollWidth: this._container.nativeElement.scrollWidth,
             clientHeight: this._container.nativeElement.clientHeight,
             clientWidth: this._container.nativeElement.clientWidth,
-        })), tetaZoneFull(this._ngZone));
-    }
+        };
+        this._cdr.detectChanges();
+    };
     scrollVertical(event) {
         this._container.nativeElement.scrollTop = event.target.scrollTop;
-        // event.scrollLeft = this._container.nativeElement.scrollLeft;
-        // this._elementRef.nativeElement.dispatchEvent(event);
-        // this.scroll.emit(event);
     }
     scrollHorizontal(event) {
         this._container.nativeElement.scrollLeft = event.target.scrollLeft;
-        // event.scrollTop = this._container.nativeElement.scrollTop;
-        // this._elementRef.nativeElement.dispatchEvent(event);
-        // this.scroll.emit(event);
     }
     ngOnInit() {
         this._container = this._scrollableWrapper;
@@ -4474,44 +4385,46 @@ class ScrollableComponent {
         }
         fromEvent(this._container.nativeElement, 'scroll')
             .pipe(takeWhile(() => this._alive), tap((event) => {
-            this._scrollbarHorizontal.nativeElement.scrollLeft = event.target.scrollLeft;
-            this._scrollbarVertical.nativeElement.scrollTop = event.target.scrollTop;
-            // this._elementRef.nativeElement.dispatchEvent(event);
+            this._scrollbarHorizontal.nativeElement.scrollLeft =
+                event.target.scrollLeft;
+            this._scrollbarVertical.nativeElement.scrollTop =
+                event.target.scrollTop;
             this.scroll.emit(event);
-        })).subscribe();
+        }))
+            .subscribe();
+        this._observer.observe(this._container.nativeElement);
     }
     ngOnDestroy() {
         this._alive = false;
+        this._observer.unobserve(this._container.nativeElement);
+        this._observer.disconnect();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollableComponent, deps: [{ token: i0.ElementRef }, { token: i0.Injector }, { token: i0.NgZone }, { token: ANIMATION_FRAME }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ScrollableComponent, selector: "teta-scrollable", inputs: { direction: "direction", showScrollbars: "showScrollbars", contentClass: "contentClass" }, outputs: { scroll: "scroll" }, host: { properties: { "class.show-scrollbars": "this.showScrollbars" } }, queries: [{ propertyName: "_scrollDirective", first: true, predicate: ScrollableDirective, descendants: true, read: ElementRef, static: true }], viewQueries: [{ propertyName: "_scrollableWrapper", first: true, predicate: ["scrollableWrapper"], descendants: true, static: true }, { propertyName: "_scrollbarVertical", first: true, predicate: ["scrollbarVertical"], descendants: true, static: true }, { propertyName: "_scrollbarHorizontal", first: true, predicate: ["scrollbarHorizontal"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"scroll-controls\" *tetaLet=\"scrollSize | async as size\">\n  <div #scrollbarVertical\n       [class.display-none]=\"size?.scrollHeight <= size?.clientHeight\"\n       class=\"scroll-scrollbar scroll-scrollbar-vertical\"\n       (scroll)=\"scrollVertical($event)\">\n    <div [style.height.px]=\"size?.scrollHeight\" style=\"width: 1px;\"></div>\n  </div>\n  <div #scrollbarHorizontal\n       [class.display-none]=\"size?.scrollWidth <= size?.clientWidth\"\n       class=\"scroll-scrollbar scroll-scrollbar-horizontal\"\n       (scroll)=\"scrollHorizontal($event)\">\n    <div [style.width.px]=\"size?.scrollWidth\" style=\"height: 1px;\"></div>\n  </div>\n</div>\n\n\n<!--<div #scrollableWrapper class=\"scroll-content-wrapper\">-->\n<!--  <div class=\"scroll-content\"-->\n<!--       [class.column]=\"direction === 'column'\">-->\n<!--    &lt;!&ndash;  <div class=\"scroll-content\">&ndash;&gt;-->\n<!--    <ng-content></ng-content>-->\n<!--  </div>-->\n<!--</div>-->\n<div #scrollableWrapper class=\"scroll-content-wrapper\"\n     [ngClass]=\"contentClass\"\n     [class.column]=\"direction === 'column'\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{overflow:hidden;position:relative;z-index:0;display:flex}:host:hover .scroll-controls{opacity:1}:host.show-scrollbars .scroll-controls{opacity:1}:host::-webkit-scrollbar{width:0;height:0}.scroll-content-wrapper{display:flex;overflow:auto;flex-grow:1}.scroll-content-wrapper::-webkit-scrollbar{width:0;height:0}.scroll-content{position:relative;z-index:0;flex:1;display:flex;height:auto;min-width:0}.scroll-controls{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s linear}.scroll-scrollbar{position:absolute;overflow:auto;pointer-events:auto}.scroll-scrollbar-vertical{right:0;top:0;bottom:12px;width:12px}.scroll-scrollbar-horizontal{right:12px;left:0;bottom:0;height:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: LetDirective, selector: "[tetaLet]", inputs: ["tetaLet"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollableComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.1", type: ScrollableComponent, selector: "teta-scrollable", inputs: { direction: "direction", showScrollbars: "showScrollbars", contentClass: "contentClass" }, outputs: { scroll: "scroll" }, host: { properties: { "class.show-scrollbars": "this.showScrollbars" } }, queries: [{ propertyName: "_scrollDirective", first: true, predicate: ScrollableDirective, descendants: true, read: ElementRef, static: true }], viewQueries: [{ propertyName: "_scrollableWrapper", first: true, predicate: ["scrollableWrapper"], descendants: true, static: true }, { propertyName: "_scrollbarVertical", first: true, predicate: ["scrollbarVertical"], descendants: true, static: true }, { propertyName: "_scrollbarHorizontal", first: true, predicate: ["scrollbarHorizontal"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"scroll-controls\">\n  <div #scrollbarVertical\n       [class.display-none]=\"scrollSize?.scrollHeight <= scrollSize?.clientHeight\"\n       class=\"scroll-scrollbar scroll-scrollbar-vertical\"\n       (scroll)=\"scrollVertical($event)\">\n    <div [style.height.px]=\"scrollSize?.scrollHeight\" style=\"width: 1px;\"></div>\n  </div>\n  <div #scrollbarHorizontal\n       [class.display-none]=\"scrollSize?.scrollWidth <= scrollSize?.clientWidth\"\n       class=\"scroll-scrollbar scroll-scrollbar-horizontal\"\n       (scroll)=\"scrollHorizontal($event)\">\n    <div [style.width.px]=\"scrollSize?.scrollWidth\" style=\"height: 1px;\"></div>\n  </div>\n</div>\n\n\n<!--<div #scrollableWrapper class=\"scroll-content-wrapper\">-->\n<!--  <div class=\"scroll-content\"-->\n<!--       [class.column]=\"direction === 'column'\">-->\n<!--    &lt;!&ndash;  <div class=\"scroll-content\">&ndash;&gt;-->\n<!--    <ng-content></ng-content>-->\n<!--  </div>-->\n<!--</div>-->\n<div #scrollableWrapper class=\"scroll-content-wrapper\"\n     [ngClass]=\"contentClass\"\n     [class.column]=\"direction === 'column'\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{overflow:hidden;position:relative;z-index:0;display:flex}:host:hover .scroll-controls{opacity:1}:host.show-scrollbars .scroll-controls{opacity:1}:host::-webkit-scrollbar{width:0;height:0}.scroll-content-wrapper{display:flex;overflow:auto;flex-grow:1}.scroll-content-wrapper::-webkit-scrollbar{width:0;height:0}.scroll-content{position:relative;z-index:0;flex:1;display:flex;height:auto;min-width:0}.scroll-controls{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s linear}.scroll-scrollbar{position:absolute;overflow:auto;pointer-events:auto}.scroll-scrollbar-vertical{right:0;top:0;bottom:12px;width:12px}.scroll-scrollbar-horizontal{right:12px;left:0;bottom:0;height:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: ScrollableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-scrollable', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scroll-controls\" *tetaLet=\"scrollSize | async as size\">\n  <div #scrollbarVertical\n       [class.display-none]=\"size?.scrollHeight <= size?.clientHeight\"\n       class=\"scroll-scrollbar scroll-scrollbar-vertical\"\n       (scroll)=\"scrollVertical($event)\">\n    <div [style.height.px]=\"size?.scrollHeight\" style=\"width: 1px;\"></div>\n  </div>\n  <div #scrollbarHorizontal\n       [class.display-none]=\"size?.scrollWidth <= size?.clientWidth\"\n       class=\"scroll-scrollbar scroll-scrollbar-horizontal\"\n       (scroll)=\"scrollHorizontal($event)\">\n    <div [style.width.px]=\"size?.scrollWidth\" style=\"height: 1px;\"></div>\n  </div>\n</div>\n\n\n<!--<div #scrollableWrapper class=\"scroll-content-wrapper\">-->\n<!--  <div class=\"scroll-content\"-->\n<!--       [class.column]=\"direction === 'column'\">-->\n<!--    &lt;!&ndash;  <div class=\"scroll-content\">&ndash;&gt;-->\n<!--    <ng-content></ng-content>-->\n<!--  </div>-->\n<!--</div>-->\n<div #scrollableWrapper class=\"scroll-content-wrapper\"\n     [ngClass]=\"contentClass\"\n     [class.column]=\"direction === 'column'\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{overflow:hidden;position:relative;z-index:0;display:flex}:host:hover .scroll-controls{opacity:1}:host.show-scrollbars .scroll-controls{opacity:1}:host::-webkit-scrollbar{width:0;height:0}.scroll-content-wrapper{display:flex;overflow:auto;flex-grow:1}.scroll-content-wrapper::-webkit-scrollbar{width:0;height:0}.scroll-content{position:relative;z-index:0;flex:1;display:flex;height:auto;min-width:0}.scroll-controls{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s linear}.scroll-scrollbar{position:absolute;overflow:auto;pointer-events:auto}.scroll-scrollbar-vertical{right:0;top:0;bottom:12px;width:12px}.scroll-scrollbar-horizontal{right:12px;left:0;bottom:0;height:12px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Injector }, { type: i0.NgZone }, { type: i3$1.Observable, decorators: [{
-                    type: Inject,
-                    args: [ANIMATION_FRAME]
-                }] }]; }, propDecorators: { _scrollDirective: [{
+            args: [{ selector: 'teta-scrollable', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scroll-controls\">\n  <div #scrollbarVertical\n       [class.display-none]=\"scrollSize?.scrollHeight <= scrollSize?.clientHeight\"\n       class=\"scroll-scrollbar scroll-scrollbar-vertical\"\n       (scroll)=\"scrollVertical($event)\">\n    <div [style.height.px]=\"scrollSize?.scrollHeight\" style=\"width: 1px;\"></div>\n  </div>\n  <div #scrollbarHorizontal\n       [class.display-none]=\"scrollSize?.scrollWidth <= scrollSize?.clientWidth\"\n       class=\"scroll-scrollbar scroll-scrollbar-horizontal\"\n       (scroll)=\"scrollHorizontal($event)\">\n    <div [style.width.px]=\"scrollSize?.scrollWidth\" style=\"height: 1px;\"></div>\n  </div>\n</div>\n\n\n<!--<div #scrollableWrapper class=\"scroll-content-wrapper\">-->\n<!--  <div class=\"scroll-content\"-->\n<!--       [class.column]=\"direction === 'column'\">-->\n<!--    &lt;!&ndash;  <div class=\"scroll-content\">&ndash;&gt;-->\n<!--    <ng-content></ng-content>-->\n<!--  </div>-->\n<!--</div>-->\n<div #scrollableWrapper class=\"scroll-content-wrapper\"\n     [ngClass]=\"contentClass\"\n     [class.column]=\"direction === 'column'\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{overflow:hidden;position:relative;z-index:0;display:flex}:host:hover .scroll-controls{opacity:1}:host.show-scrollbars .scroll-controls{opacity:1}:host::-webkit-scrollbar{width:0;height:0}.scroll-content-wrapper{display:flex;overflow:auto;flex-grow:1}.scroll-content-wrapper::-webkit-scrollbar{width:0;height:0}.scroll-content{position:relative;z-index:0;flex:1;display:flex;height:auto;min-width:0}.scroll-controls{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s linear}.scroll-scrollbar{position:absolute;overflow:auto;pointer-events:auto}.scroll-scrollbar-vertical{right:0;top:0;bottom:12px;width:12px}.scroll-scrollbar-horizontal{right:12px;left:0;bottom:0;height:12px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { _scrollDirective: [{
                 type: ContentChild,
                 args: [ScrollableDirective, {
                         static: true,
-                        read: ElementRef
+                        read: ElementRef,
                     }]
             }], _scrollableWrapper: [{
                 type: ViewChild,
                 args: ['scrollableWrapper', {
-                        static: true
+                        static: true,
                     }]
             }], _scrollbarVertical: [{
                 type: ViewChild,
                 args: ['scrollbarVertical', {
-                        static: true
+                        static: true,
                     }]
             }], _scrollbarHorizontal: [{
                 type: ViewChild,
                 args: ['scrollbarHorizontal', {
-                        static: true
+                        static: true,
                     }]
             }], direction: [{
                 type: Input
@@ -5280,6 +5193,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
                 type: Input
             }] } });
 
+class LetDirective {
+    tetaLet;
+    constructor(viewContainer, templateRef) {
+        viewContainer.createEmbeddedView(templateRef, new LetContext(this));
+    }
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: LetDirective, deps: [{ token: ViewContainerRef }, { token: TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.1", type: LetDirective, selector: "[tetaLet]", inputs: { tetaLet: "tetaLet" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImport: i0, type: LetDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tetaLet]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef, decorators: [{
+                    type: Inject,
+                    args: [ViewContainerRef]
+                }] }, { type: i0.TemplateRef, decorators: [{
+                    type: Inject,
+                    args: [TemplateRef]
+                }] }]; }, propDecorators: { tetaLet: [{
+                type: Input
+            }] } });
+class LetContext {
+    internalDirectiveInstance;
+    constructor(internalDirectiveInstance) {
+        this.internalDirectiveInstance = internalDirectiveInstance;
+    }
+    get $implicit() {
+        return this.internalDirectiveInstance.tetaLet;
+    }
+    get tetaLet() {
+        return this.internalDirectiveInstance.tetaLet;
+    }
+}
+
 class SelectComponent {
     _cdr;
     _elementRef;
@@ -6934,6 +6885,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 +7111,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 +7122,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 +7171,6 @@ class PropertyGridItemComponent {
             });
         }
     }
-    ngOnInit() {
-    }
     ngOnDestroy() {
         this._alive = false;
         this._formSub?.unsubscribe();
@@ -7210,7 +7181,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 +7190,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 +7216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.1", ngImpor
             }] } });
 
 class PropertyGridGroupComponent {
+    _formGroup;
     column;
     hideNonEditable;
     dict;
@@ -7253,20 +7225,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 +7307,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 +7330,6 @@ class PropertyGridComponent {
         }
         this.controlValueChange.emit(event);
     }
-    ngOnInit() { }
     ngOnDestroy() {
         this._alive = false;
     }
@@ -7346,13 +7339,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 +7953,10 @@ class TableColumn extends FilterItem {
      * Стобец закреплен
      */
     locked;
-    /**
-     * Название столбца в строке результатов
-     */
     /**
      * Название столбца родителя
      */
     parentName;
-    /**
-     * Название столбца для заголовка таблицы
-     */
     /**
      * Единицы измерения
      */
@@ -8579,7 +8565,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 +8579,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 +8717,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 +8731,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 +8810,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 +8860,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 +10033,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 +10052,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 +10065,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 +10076,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 +10095,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 +10120,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 +10132,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 +10590,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() {
@@ -14263,6 +14233,47 @@ const ruLocale = {
     ]
 };
 
+function tetaZoneFull(ngZone) {
+    return source => new Observable(subscriber => source.subscribe({
+        next: value => ngZone.run(() => subscriber.next(value)),
+        error: (error) => ngZone.run(() => subscriber.error(error)),
+        complete: () => ngZone.run(() => subscriber.complete()),
+    }));
+}
+function tetaZoneFree(ngZone) {
+    return source => new Observable(subscriber => ngZone.runOutsideAngular(() => source.subscribe(subscriber)));
+}
+function tetaZoneOptimized(ngZone) {
+    return pipe(tetaZoneFree(ngZone), tetaZoneFull(ngZone));
+}
+
+const ANIMATION_FRAME = new InjectionToken('Shared Observable based on `window.requestAnimationFrame`', {
+    factory: () => {
+        const { requestAnimationFrame, cancelAnimationFrame } = inject(WINDOW);
+        const animationFrame$ = new Observable(subscriber => {
+            let id = NaN;
+            const callback = (timestamp) => {
+                subscriber.next(timestamp);
+                id = requestAnimationFrame(callback);
+            };
+            id = requestAnimationFrame(callback);
+            return () => {
+                cancelAnimationFrame(id);
+            };
+        });
+        return animationFrame$.pipe(share());
+    },
+});
+const WINDOW = new InjectionToken('An abstraction over global window object', {
+    factory: () => {
+        const { defaultView } = inject(DOCUMENT);
+        if (!defaultView) {
+            throw new Error('Window is not available');
+        }
+        return defaultView;
+    },
+});
+
 /**
  * Components
  */
@@ -14271,5 +14282,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, 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, 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