@tetacom/ng-components 1.0.145 → 1.0.147

package/esm2020/component/tree/tree/tree.component.mjs

@@ -9,8 +9,9 @@ import * as i2 from "@angular/common";
 import * as i3 from "@angular/cdk/scrolling";
 import * as i4 from "../tree-item/tree-item.component";
 export class TreeComponent {
-    constructor(_service, _cdr, _zone) {
+    constructor(_service, _elementRef, _cdr, _zone) {
         this._service = _service;
+        this._elementRef = _elementRef;
         this._cdr = _cdr;
         this._zone = _zone;
         this.padding = 8;
@@ -32,6 +33,7 @@ export class TreeComponent {
             this._openItems = _;
             this.displayData = this.getDisplayData(this._data, 0);
             this.openItemsChange.emit(_);
+            this.viewport?.checkViewportSize();
         });
     }
     set data(data) {
@@ -52,19 +54,22 @@ export class TreeComponent {
     }
     ngOnInit() {
         this.service.emit(this._service);
+        this.addResizeObserver();
     }
     ngOnChanges(changes) {
         this.displayData = this.getDisplayData(this._data, 0);
         this.childPadding = this.hasChildren(this._data);
+        this.viewport?.checkViewportSize();
     }
     ngOnDestroy() {
         this._alive = false;
+        this.removeResizeObserver();
     }
     ngAfterViewInit() {
         this._service.scrollToIndex.pipe(takeWhile(() => this._alive)).subscribe((index) => {
             this._zone.runOutsideAngular(() => {
                 setTimeout(() => {
-                    this.virtualScroll?.scrollToIndex(index, 'smooth');
+                    this.viewport?.scrollToIndex(index, 'smooth');
                 });
             });
         });
@@ -84,13 +89,23 @@ export class TreeComponent {
         });
         return result;
     }
+    addResizeObserver() {
+        this._obs = new ResizeObserver((_) => {
+            this.viewport?.checkViewportSize();
+        });
+        this._obs.observe(this._elementRef.nativeElement);
+    }
+    removeResizeObserver() {
+        this._obs.unobserve(this._elementRef.nativeElement);
+        this._obs.disconnect();
+    }
 }
-TreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TreeComponent, deps: [{ token: i1.TreeService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TreeComponent, selector: "teta-tree", inputs: { data: "data", padding: "padding", childNodeName: "childNodeName", virtual: "virtual", height: "height", openItems: "openItems", compareItems: "compareItems" }, outputs: { service: "service", openItemsChange: "openItemsChange" }, host: { properties: { "class.tree": "this.treeClass" } }, providers: [TreeService], queries: [{ propertyName: "template", first: true, predicate: TetaTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "virtualScroll", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual; else default\"\n                             class=\"table-body-container\"\n                             [itemSize]=\"height\">\n  <teta-tree-item *cdkVirtualFor=\"let item of displayData;templateCacheSize: 0; trackBy: trackRow;\"\n                  [item]=\"item\"\n                  [style.height.px]=\"height\"\n                  [depth]=\"item['level']\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [childPadding]=\"childPadding\"\n                  [template]=\"template?.template\"></teta-tree-item>\n</cdk-virtual-scroll-viewport>\n<ng-template #default>\n  <teta-tree-item *ngFor=\"let item of displayData; trackBy: trackRow\"\n                  [item]=\"item\"\n                  [style.height.px]=\"height\"\n                  [depth]=\"item['level']\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [childPadding]=\"childPadding\"\n                  [template]=\"template?.template\"></teta-tree-item>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i4.TreeItemComponent, selector: "teta-tree-item", inputs: ["item", "depth", "padding", "childNodeName", "template", "childPadding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TreeComponent, deps: [{ token: i1.TreeService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TreeComponent, selector: "teta-tree", inputs: { data: "data", padding: "padding", childNodeName: "childNodeName", virtual: "virtual", height: "height", openItems: "openItems", compareItems: "compareItems" }, outputs: { service: "service", openItemsChange: "openItemsChange" }, host: { properties: { "class.tree": "this.treeClass" } }, providers: [TreeService], queries: [{ propertyName: "template", first: true, predicate: TetaTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual; else default\"\n                             class=\"table-body-container\"\n                             [itemSize]=\"height\">\n  <teta-tree-item *cdkVirtualFor=\"let item of displayData;templateCacheSize: 0; trackBy: trackRow;\"\n                  [item]=\"item\"\n                  [style.height.px]=\"height\"\n                  [depth]=\"item['level']\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [childPadding]=\"childPadding\"\n                  [template]=\"template?.template\"></teta-tree-item>\n</cdk-virtual-scroll-viewport>\n<ng-template #default>\n  <teta-tree-item *ngFor=\"let item of displayData; trackBy: trackRow\"\n                  [item]=\"item\"\n                  [style.height.px]=\"height\"\n                  [depth]=\"item['level']\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [childPadding]=\"childPadding\"\n                  [template]=\"template?.template\"></teta-tree-item>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i4.TreeItemComponent, selector: "teta-tree-item", inputs: ["item", "depth", "padding", "childNodeName", "template", "childPadding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-tree', providers: [TreeService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual; else default\"\n                             class=\"table-body-container\"\n                             [itemSize]=\"height\">\n  <teta-tree-item *cdkVirtualFor=\"let item of displayData;templateCacheSize: 0; trackBy: trackRow;\"\n                  [item]=\"item\"\n                  [style.height.px]=\"height\"\n                  [depth]=\"item['level']\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [childPadding]=\"childPadding\"\n                  [template]=\"template?.template\"></teta-tree-item>\n</cdk-virtual-scroll-viewport>\n<ng-template #default>\n  <teta-tree-item *ngFor=\"let item of displayData; trackBy: trackRow\"\n                  [item]=\"item\"\n                  [style.height.px]=\"height\"\n                  [depth]=\"item['level']\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [childPadding]=\"childPadding\"\n                  [template]=\"template?.template\"></teta-tree-item>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.TreeService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { data: [{
+        }], ctorParameters: function () { return [{ type: i1.TreeService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { data: [{
                 type: Input
             }], padding: [{
                 type: Input
@@ -106,7 +121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Output
             }], openItemsChange: [{
                 type: Output
-            }], virtualScroll: [{
+            }], viewport: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport, { static: false }]
             }], template: [{
@@ -118,4 +133,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: HostBinding,
                 args: ['class.tree']
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJlZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50L3RyZWUvdHJlZS90cmVlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnQvdHJlZS90cmVlL3RyZWUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUV2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLFlBQVksRUFDWixXQUFXLEVBQ1gsS0FBSyxFQUlMLE1BQU0sRUFDUyxTQUFTLEdBQ3pCLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUM1QyxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSwwREFBMEQsQ0FBQztBQUMvRixPQUFPLEVBQUMsTUFBTSxFQUFFLFNBQVMsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQ2pELE9BQU8sRUFBQyx3QkFBd0IsRUFBQyxNQUFNLHdCQUF3QixDQUFDOzs7Ozs7QUFVaEUsTUFBTSxPQUFPLGFBQWE7SUFvQ3hCLFlBQW9CLFFBQXFCLEVBQVUsSUFBdUIsRUFBVSxLQUFhO1FBQTdFLGFBQVEsR0FBUixRQUFRLENBQWE7UUFBVSxTQUFJLEdBQUosSUFBSSxDQUFtQjtRQUFVLFVBQUssR0FBTCxLQUFLLENBQVE7UUExQnhGLFlBQU8sR0FBRyxDQUFDLENBQUM7UUFDWixrQkFBYSxHQUFHLFVBQVUsQ0FBQztRQUUzQixXQUFNLEdBQUcsRUFBRSxDQUFDO1FBUVgsWUFBTyxHQUNmLElBQUksWUFBWSxFQUFlLENBQUM7UUFDeEIsb0JBQWUsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBV3ZDLFdBQU0sR0FBRyxJQUFJLENBQUM7UUF3QnNCLGNBQVMsR0FBRyxJQUFJLENBQUM7UUE0QjdELGFBQVEsR0FBRyxDQUFDLEtBQWEsRUFBRSxJQUFlLEVBQU8s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QkFBd0IsRUFBRSxFQUFDLE1BQU0sRUFBRSxLQUFLLEVBQUM7Z0JBR3BELFFBQVE7c0JBRFAsWUFBWTt1QkFBQyxxQkFBcUIsRUFBRSxFQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUM7Z0JBdUIvQyxZQUFZO3NCQURmLEtBQUs7Z0JBU3NDLFNBQVM7c0JBQXBELFdBQVc7dUJBQUMsWUFBWSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgQ29tcG9uZW50LFxuICBDb250ZW50Q2hpbGQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSG9zdEJpbmRpbmcsXG4gIElucHV0LCBOZ1pvbmUsXG4gIE9uQ2hhbmdlcyxcbiAgT25EZXN0cm95LFxuICBPbkluaXQsXG4gIE91dHB1dCxcbiAgU2ltcGxlQ2hhbmdlcywgVmlld0NoaWxkLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7SVRyZWVEYXRhfSBmcm9tICcuLi8uLi8uLi9jb21tb24vY29udHJhY3QvaS10cmVlLWRhdGEnO1xuaW1wb3J0IHtUcmVlU2VydmljZX0gZnJvbSAnLi4vdHJlZS5zZXJ2aWNlJztcbmltcG9ydCB7VGV0YVRlbXBsYXRlRGlyZWN0aXZlfSBmcm9tICcuLi8uLi8uLi9kaXJlY3RpdmUvdGV0YS10ZW1wbGF0ZS90ZXRhLXRlbXBsYXRlLmRpcmVjdGl2ZSc7XG5pbXBvcnQge2ZpbHRlciwgdGFrZVdoaWxlfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQge0Nka1ZpcnR1YWxTY3JvbGxWaWV3cG9ydH0gZnJvbSBcIkBhbmd1bGFyL2Nkay9zY3JvbGxpbmdcIjtcbmltcG9ydCB7Y29tYmluZUxhdGVzdH0gZnJvbSBcInJ4anNcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndGV0YS10cmVlJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RyZWUuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi90cmVlLmNvbXBvbmVudC5zY3NzJ10sXG4gIHByb3ZpZGVyczogW1RyZWVTZXJ2aWNlXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIFRyZWVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uQ2hhbmdlcywgT25EZXN0cm95IHtcbiAgQElucHV0KClcbiAgc2V0IGRhdGEoZGF0YTogSVRyZWVEYXRhW10pIHtcbiAgICB0aGlzLl9kYXRhID0gZGF0YTtcbiAgfVxuXG4gIGdldCBkYXRhKCkge1xuICAgIHJldHVybiB0aGlzLl9kYXRhO1xuICB9XG5cbiAgQElucHV0KCkgcGFkZGluZyA9IDg7XG4gIEBJbnB1dCgpIGNoaWxkTm9kZU5hbWUgPSAnY2hpbGRyZW4nO1xuICBASW5wdXQoKSB2aXJ0dWFsOiBib29sZWFuO1xuICBASW5wdXQoKSBoZWlnaHQgPSAyODtcblxuICBASW5wdXQoKVxuICBzZXQgb3Blbkl0ZW1zKGl0ZW1zOiBJVHJlZURhdGFbXSkge1xuICAgIHRoaXMuX29wZW5JdGVtcyA9IGl0ZW1zO1xuICAgIHRoaXMuX3NlcnZpY2Uuc2V0T3Blbkl0ZW1zKGl0ZW1zKTtcbiAgfVxuXG4gIEBPdXRwdXQoKSBzZXJ2aWNlOiBFdmVudEVtaXR0ZXI8VHJlZVNlcnZpY2U+ID1cbiAgICBuZXcgRXZlbnRFbWl0dGVyPFRyZWVTZXJ2aWNlPigpO1xuICBAT3V0cHV0KCkgb3Blbkl0ZW1zQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIEBWaWV3Q2hpbGQoQ2RrVmlydHVhbFNjcm9sbFZpZXdwb3J0LCB7c3RhdGljOiBmYWxzZX0pIHZpcnR1YWxTY3JvbGw6IENka1ZpcnR1YWxTY3JvbGxWaWV3cG9ydDtcblxuICBAQ29udGVudENoaWxkKFRldGFUZW1wbGF0ZURpcmVjdGl2ZSwge3N0YXRpYzogdHJ1ZX0pXG4gIHRlbXBsYXRlOiBUZXRhVGVtcGxhdGVEaXJlY3RpdmU7XG4gIGNoaWxkUGFkZGluZzogYm9vbGVhbjtcbiAgZGlzcGxheURhdGE6IElUcmVlRGF0YVtdO1xuXG4gIHByaXZhdGUgX2RhdGE6IElUcmVlRGF0YVtdO1xuICBwcml2YXRlIF9vcGVuSXRlbXM6IElUcmVlRGF0YVtdO1xuICBwcml2YXRlIF9hbGl2ZSA9IHRydWU7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBfc2VydmljZTogVHJlZVNlcnZpY2UsIHByaXZhdGUgX2NkcjogQ2hhbmdlRGV0ZWN0b3JSZWYsIHByaXZhdGUgX3pvbmU6IE5nWm9uZSkge1xuICAgdGhpcy5fc2VydmljZS5vcGVuSXRlbXNcbiAgICAgIC5waXBlKFxuICAgICAgICB0YWtlV2hpbGUoKF8pID0+IHRoaXMuX2FsaXZlKSxcbiAgICAgICAgZmlsdGVyKChfKSA9PiB0aGlzLl9vcGVuSXRlbXMgIT09IF8pXG4gICAgICApXG4gICAgICAuc3Vic2NyaWJlKChfOiBJVHJlZURhdGFbXSkgPT4ge1xuICAgICAgICB0aGlzLl9vcGVuSXRlbXMgPSBfO1xuICAgICAgICB0aGlzLmRpc3BsYXlEYXRhID0gdGhpcy5nZXREaXNwbGF5RGF0YSh0aGlzLl9kYXRhLCAwKTtcbiAgICAgICAgdGhpcy5vcGVuSXRlbXNDaGFuZ2UuZW1pdChfKTtcbiAgICAgIH0pO1xuICB9XG5cbiAgQElucHV0KClcbiAgc2V0IGNvbXBhcmVJdGVtcyhmdW5jOiAoaXRlbTogSVRyZWVEYXRhKSA9PiBhbnkpIHtcbiAgICB0aGlzLl9zZXJ2aWNlLmNvbXBhcmVJdGVtcyA9IGZ1bmM7XG4gIH1cblxuICBnZXQgY29tcGFyZUl0ZW1zKCkge1xuICAgIHJldHVybiB0aGlzLl9zZXJ2aWNlLmNvbXBhcmVJdGVtcztcbiAgfVxuXG4gIEBIb3N0QmluZGluZygnY2xhc3MudHJlZScpIHByaXZhdGUgcmVhZG9ubHkgdHJlZUNsYXNzID0gdHJ1ZTtcblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLnNlcnZpY2UuZW1pdCh0aGlzLl9zZXJ2aWNlKTtcbiAgfVxuXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpOiB2b2lkIHtcbiAgICB0aGlzLmRpc3BsYXlEYXRhID0gdGhpcy5nZXREaXNwbGF5RGF0YSh0aGlzLl9kYXRhLCAwKTtcbiAgICB0aGlzLmNoaWxkUGFkZGluZyA9IHRoaXMuaGFzQ2hpbGRyZW4odGhpcy5fZGF0YSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLl9hbGl2ZSA9IGZhbHNlO1xuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHRoaXMuX3NlcnZpY2Uuc2Nyb2xsVG9JbmRleC5waXBlKFxuICAgICAgdGFrZVdoaWxlKCgpID0+IHRoaXMuX2FsaXZlKVxuICAgICkuc3Vic2NyaWJlKChpbmRleCkgPT4ge1xuXG4gICAgICB0aGlzLl96b25lLnJ1bk91dHNpZGVBbmd1bGFyKCgpID0+IHtcbiAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgdGhpcy52aXJ0dWFsU2Nyb2xsPy5zY3JvbGxUb0luZGV4KGluZGV4LCAnc21vb3RoJylcbiAgICAgICAgfSlcbiAgICAgIH0pXG4gICAgfSlcbiAgfVxuXG4gIHRyYWNrUm93ID0gKGluZGV4OiBudW1iZXIsIGl0ZW06IElUcmVlRGF0YSk6IGFueSA9PiB7XG4gICAgaWYgKHRoaXMuY29tcGFyZUl0ZW1zKSB7XG4gICAgICByZXR1cm4gdGhpcy5jb21wYXJlSXRlbXMoaXRlbSk7XG4gICAgfVxuICAgIHJldHVybiBpbmRleDtcbiAgfTtcblxuXG4gIHByaXZhdGUgaGFzQ2hpbGRyZW4oZGF0YTogSVRyZWVEYXRhW10pOiBib29sZWFuIHtcbiAgICByZXR1cm4gZGF0YT8uc29tZShcbiAgICAgIChfKSA9PiBfW3RoaXMuY2hpbGROb2RlTmFtZV0/Lmxlbmd0aCA+IDBcbiAgICApO1xuICB9XG5cbiAgcHJpdmF0ZSBnZXREaXNwbGF5RGF0YShkYXRhOiBJVHJlZURhdGFbXSwgbGV2ZWw6IG51bWJlcikge1xuICAgIGNvbnN0IHJlc3VsdDogSVRyZWVEYXRhW10gPSBbXTtcbiAgICBkYXRhPy5mb3JFYWNoKChpdGVtOiBJVHJlZURhdGEpID0+IHtcbiAgICAgIGl0ZW1bJ2xldmVsJ10gPSBsZXZlbDtcbiAgICAgIHJlc3VsdC5wdXNoKGl0ZW0pO1xuICAgICAgaWYgKGl0ZW1bdGhpcy5jaGlsZE5vZGVOYW1lXT8ubGVuZ3RoID4gMFxuICAgICAgICAmJiB0aGlzLl9vcGVuSXRlbXM/LmZpbmQoKG9wZW5JdGVtKSA9PiB0aGlzLmNvbXBhcmVJdGVtcyhvcGVuSXRlbSkgPT09IHRoaXMuY29tcGFyZUl0ZW1zKGl0ZW0pKSkge1xuICAgICAgICByZXN1bHQucHVzaCguLi50aGlzLmdldERpc3BsYXlEYXRhKGl0ZW1bdGhpcy5jaGlsZE5vZGVOYW1lXSwgbGV2ZWwgKyAxKSk7XG4gICAgICB9XG4gICAgfSk7XG4gICAgcmV0dXJuIHJlc3VsdDtcbiAgfVxufVxuIiwiPGNkay12aXJ0dWFsLXNjcm9sbC12aWV3cG9ydCAqbmdJZj1cInZpcnR1YWw7IGVsc2UgZGVmYXVsdFwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNsYXNzPVwidGFibGUtYm9keS1jb250YWluZXJcIlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgICBbaXRlbVNpemVdPVwiaGVpZ2h0XCI+XG4gIDx0ZXRhLXRyZWUtaXRlbSAqY2RrVmlydHVhbEZvcj1cImxldCBpdGVtIG9mIGRpc3BsYXlEYXRhO3RlbXBsYXRlQ2FjaGVTaXplOiAwOyB0cmFja0J5OiB0cmFja1JvdztcIlxuICAgICAgICAgICAgICAgICAgW2l0ZW1dPVwiaXRlbVwiXG4gICAgICAgICAgICAgICAgICBbc3R5bGUuaGVpZ2h0LnB4XT1cImhlaWdodFwiXG4gICAgICAgICAgICAgICAgICBbZGVwdGhdPVwiaXRlbVsnbGV2ZWwnXVwiXG4gICAgICAgICAgICAgICAgICBbcGFkZGluZ109XCJwYWRkaW5nXCJcbiAgICAgICAgICAgICAgICAgIFtjaGlsZE5vZGVOYW1lXT1cImNoaWxkTm9kZU5hbWVcIlxuICAgICAgICAgICAgICAgICAgW2NoaWxkUGFkZGluZ109XCJjaGlsZFBhZGRpbmdcIlxuICAgICAgICAgICAgICAgICAgW3RlbXBsYXRlXT1cInRlbXBsYXRlPy50ZW1wbGF0ZVwiPjwvdGV0YS10cmVlLWl0ZW0+XG48L2Nkay12aXJ0dWFsLXNjcm9sbC12aWV3cG9ydD5cbjxuZy10ZW1wbGF0ZSAjZGVmYXVsdD5cbiAgPHRldGEtdHJlZS1pdGVtICpuZ0Zvcj1cImxldCBpdGVtIG9mIGRpc3BsYXlEYXRhOyB0cmFja0J5OiB0cmFja1Jvd1wiXG4gICAgICAgICAgICAgICAgICBbaXRlbV09XCJpdGVtXCJcbiAgICAgICAgICAgICAgICAgIFtzdHlsZS5oZWlnaHQucHhdPVwiaGVpZ2h0XCJcbiAgICAgICAgICAgICAgICAgIFtkZXB0aF09XCJpdGVtWydsZXZlbCddXCJcbiAgICAgICAgICAgICAgICAgIFtwYWRkaW5nXT1cInBhZGRpbmdcIlxuICAgICAgICAgICAgICAgICAgW2NoaWxkTm9kZU5hbWVdPVwiY2hpbGROb2RlTmFtZVwiXG4gICAgICAgICAgICAgICAgICBbY2hpbGRQYWRkaW5nXT1cImNoaWxkUGFkZGluZ1wiXG4gICAgICAgICAgICAgICAgICBbdGVtcGxhdGVdPVwidGVtcGxhdGU/LnRlbXBsYXRlXCI+PC90ZXRhLXRyZWUtaXRlbT5cbjwvbmctdGVtcGxhdGU+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJlZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50L3RyZWUvdHJlZS90cmVlLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnQvdHJlZS90cmVlL3RyZWUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUV2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLFlBQVksRUFDWixXQUFXLEVBQ1gsS0FBSyxFQUlMLE1BQU0sRUFDUyxTQUFTLEdBQ3pCLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUM1QyxPQUFPLEVBQUMscUJBQXFCLEVBQUMsTUFBTSwwREFBMEQsQ0FBQztBQUMvRixPQUFPLEVBQUMsTUFBTSxFQUFFLFNBQVMsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBQ2pELE9BQU8sRUFBQyx3QkFBd0IsRUFBQyxNQUFNLHdCQUF3QixDQUFDOzs7Ozs7QUFTaEUsTUFBTSxPQUFPLGFBQWE7SUFxQ3hCLFlBQW9CLFFBQXFCLEVBQ3JCLFdBQXVCLEVBQ3ZCLElBQXVCLEVBQ3ZCLEtBQWE7UUFIYixhQUFRLEdBQVIsUUFBUSxDQUFhO1FBQ3JCLGdCQUFXLEdBQVgsV0FBVyxDQUFZO1FBQ3ZCLFNBQUksR0FBSixJQUFJLENBQW1CO1FBQ3ZCLFVBQUssR0FBTCxLQUFLLENBQVE7UUE5QnhCLFlBQU8sR0FBRyxDQUFDLENBQUM7UUFDWixrQkFBYSxHQUFHLFVBQVUsQ0FBQztRQUUzQixXQUFNLEdBQUcsRUFBRSxDQUFDO1FBUVgsWUFBTyxHQUNmLElBQUksWUFBWSxFQUFlLENBQUM7UUFDeEIsb0JBQWUsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBV3ZDLFdBQU0sR0FBRyxJQUFJLENBQUM7UUE2QnNCLGNBQVMsR0FBRyxJQUFJLENBQUM7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QUFXLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDcEQsQ0FBQztJQUVPLG9CQUFvQjtRQUMxQixJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxDQUFDO1FBQ3BELElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDekIsQ0FBQzs7MEdBcElVLGFBQWE7OEZBQWIsYUFBYSw2VUFIYixDQUFDLFdBQVcsQ0FBQyxnRUE4QlYscUJBQXFCLHdHQUZ4Qix3QkFBd0IscUVDcERyQywwbENBc0JBOzJGREthLGFBQWE7a0JBUHpCLFNBQVM7K0JBQ0UsV0FBVyxhQUdWLENBQUMsV0FBVyxDQUFDLG1CQUNQLHVCQUF1QixDQUFDLE1BQU07Z0xBSTNDLElBQUk7c0JBRFAsS0FBSztnQkFTRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUdGLFNBQVM7c0JBRFosS0FBSztnQkFNSSxPQUFPO3NCQUFoQixNQUFNO2dCQUVHLGVBQWU7c0JBQXhCLE1BQU07Z0JBRStDLFFBQVE7c0JBQTdELFNBQVM7dUJBQUMsd0JBQXdCLEVBQUUsRUFBQyxNQUFNLEVBQUUsS0FBSyxFQUFDO2dCQUdwRCxRQUFRO3NCQURQLFlBQVk7dUJBQUMscUJBQXFCLEVBQUUsRUFBQyxNQUFNLEVBQUUsSUFBSSxFQUFDO2dCQTRCL0MsWUFBWTtzQkFEZixLQUFLO2dCQVNzQyxTQUFTO3NCQUFwRCxXQUFXO3VCQUFDLFlBQVkiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ2hhbmdlRGV0ZWN0b3JSZWYsXG4gIENvbXBvbmVudCxcbiAgQ29udGVudENoaWxkLCBFbGVtZW50UmVmLFxuICBFdmVudEVtaXR0ZXIsXG4gIEhvc3RCaW5kaW5nLFxuICBJbnB1dCwgTmdab25lLFxuICBPbkNoYW5nZXMsXG4gIE9uRGVzdHJveSxcbiAgT25Jbml0LFxuICBPdXRwdXQsXG4gIFNpbXBsZUNoYW5nZXMsIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge0lUcmVlRGF0YX0gZnJvbSAnLi4vLi4vLi4vY29tbW9uL2NvbnRyYWN0L2ktdHJlZS1kYXRhJztcbmltcG9ydCB7VHJlZVNlcnZpY2V9IGZyb20gJy4uL3RyZWUuc2VydmljZSc7XG5pbXBvcnQge1RldGFUZW1wbGF0ZURpcmVjdGl2ZX0gZnJvbSAnLi4vLi4vLi4vZGlyZWN0aXZlL3RldGEtdGVtcGxhdGUvdGV0YS10ZW1wbGF0ZS5kaXJlY3RpdmUnO1xuaW1wb3J0IHtmaWx0ZXIsIHRha2VXaGlsZX0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHtDZGtWaXJ0dWFsU2Nyb2xsVmlld3BvcnR9IGZyb20gXCJAYW5ndWxhci9jZGsvc2Nyb2xsaW5nXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3RldGEtdHJlZScsXG4gIHRlbXBsYXRlVXJsOiAnLi90cmVlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdHJlZS5jb21wb25lbnQuc2NzcyddLFxuICBwcm92aWRlcnM6IFtUcmVlU2VydmljZV0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBUcmVlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMsIE9uRGVzdHJveSB7XG4gIEBJbnB1dCgpXG4gIHNldCBkYXRhKGRhdGE6IElUcmVlRGF0YVtdKSB7XG4gICAgdGhpcy5fZGF0YSA9IGRhdGE7XG4gIH1cblxuICBnZXQgZGF0YSgpIHtcbiAgICByZXR1cm4gdGhpcy5fZGF0YTtcbiAgfVxuXG4gIEBJbnB1dCgpIHBhZGRpbmcgPSA4O1xuICBASW5wdXQoKSBjaGlsZE5vZGVOYW1lID0gJ2NoaWxkcmVuJztcbiAgQElucHV0KCkgdmlydHVhbDogYm9vbGVhbjtcbiAgQElucHV0KCkgaGVpZ2h0ID0gMjg7XG5cbiAgQElucHV0KClcbiAgc2V0IG9wZW5JdGVtcyhpdGVtczogSVRyZWVEYXRhW10pIHtcbiAgICB0aGlzLl9vcGVuSXRlbXMgPSBpdGVtcztcbiAgICB0aGlzLl9zZXJ2aWNlLnNldE9wZW5JdGVtcyhpdGVtcyk7XG4gIH1cblxuICBAT3V0cHV0KCkgc2VydmljZTogRXZlbnRFbWl0dGVyPFRyZWVTZXJ2aWNlPiA9XG4gICAgbmV3IEV2ZW50RW1pdHRlcjxUcmVlU2VydmljZT4oKTtcbiAgQE91dHB1dCgpIG9wZW5JdGVtc0NoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBAVmlld0NoaWxkKENka1ZpcnR1YWxTY3JvbGxWaWV3cG9ydCwge3N0YXRpYzogZmFsc2V9KSB2aWV3cG9ydDogQ2RrVmlydHVhbFNjcm9sbFZpZXdwb3J0O1xuXG4gIEBDb250ZW50Q2hpbGQoVGV0YVRlbXBsYXRlRGlyZWN0aXZlLCB7c3RhdGljOiB0cnVlfSlcbiAgdGVtcGxhdGU6IFRldGFUZW1wbGF0ZURpcmVjdGl2ZTtcbiAgY2hpbGRQYWRkaW5nOiBib29sZWFuO1xuICBkaXNwbGF5RGF0YTogSVRyZWVEYXRhW107XG5cbiAgcHJpdmF0ZSBfZGF0YTogSVRyZWVEYXRhW107XG4gIHByaXZhdGUgX29wZW5JdGVtczogSVRyZWVEYXRhW107XG4gIHByaXZhdGUgX2FsaXZlID0gdHJ1ZTtcbiAgcHJpdmF0ZSBfb2JzOiBSZXNpemVPYnNlcnZlcjtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIF9zZXJ2aWNlOiBUcmVlU2VydmljZSxcbiAgICAgICAgICAgICAgcHJpdmF0ZSBfZWxlbWVudFJlZjogRWxlbWVudFJlZixcbiAgICAgICAgICAgICAgcHJpdmF0ZSBfY2RyOiBDaGFuZ2VEZXRlY3RvclJlZixcbiAgICAgICAgICAgICAgcHJpdmF0ZSBfem9uZTogTmdab25lKSB7XG4gICAgdGhpcy5fc2VydmljZS5vcGVuSXRlbXNcbiAgICAgIC5waXBlKFxuICAgICAgICB0YWtlV2hpbGUoKF8pID0+IHRoaXMuX2FsaXZlKSxcbiAgICAgICAgZmlsdGVyKChfKSA9PiB0aGlzLl9vcGVuSXRlbXMgIT09IF8pXG4gICAgICApXG4gICAgICAuc3Vic2NyaWJlKChfOiBJVHJlZURhdGFbXSkgPT4ge1xuICAgICAgICB0aGlzLl9vcGVuSXRlbXMgPSBfO1xuICAgICAgICB0aGlzLmRpc3BsYXlEYXRhID0gdGhpcy5nZXREaXNwbGF5RGF0YSh0aGlzLl9kYXRhLCAwKTtcbiAgICAgICAgdGhpcy5vcGVuSXRlbXNDaGFuZ2UuZW1pdChfKTtcbiAgICAgICAgdGhpcy52aWV3cG9ydD8uY2hlY2tWaWV3cG9ydFNpemUoKTtcbiAgICAgIH0pO1xuICB9XG5cbiAgQElucHV0KClcbiAgc2V0IGNvbXBhcmVJdGVtcyhmdW5jOiAoaXRlbTogSVRyZWVEYXRhKSA9PiBhbnkpIHtcbiAgICB0aGlzLl9zZXJ2aWNlLmNvbXBhcmVJdGVtcyA9IGZ1bmM7XG4gIH1cblxuICBnZXQgY29tcGFyZUl0ZW1zKCkge1xuICAgIHJldHVybiB0aGlzLl9zZXJ2aWNlLmNvbXBhcmVJdGVtcztcbiAgfVxuXG4gIEBIb3N0QmluZGluZygnY2xhc3MudHJlZScpIHByaXZhdGUgcmVhZG9ubHkgdHJlZUNsYXNzID0gdHJ1ZTtcblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLnNlcnZpY2UuZW1pdCh0aGlzLl9zZXJ2aWNlKTtcbiAgICB0aGlzLmFkZFJlc2l6ZU9ic2VydmVyKCk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgdGhpcy5kaXNwbGF5RGF0YSA9IHRoaXMuZ2V0RGlzcGxheURhdGEodGhpcy5fZGF0YSwgMCk7XG4gICAgdGhpcy5jaGlsZFBhZGRpbmcgPSB0aGlzLmhhc0NoaWxkcmVuKHRoaXMuX2RhdGEpO1xuICAgIHRoaXMudmlld3BvcnQ/LmNoZWNrVmlld3BvcnRTaXplKCk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLl9hbGl2ZSA9IGZhbHNlO1xuICAgIHRoaXMucmVtb3ZlUmVzaXplT2JzZXJ2ZXIoKVxuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHRoaXMuX3NlcnZpY2Uuc2Nyb2xsVG9JbmRleC5waXBlKFxuICAgICAgdGFrZVdoaWxlKCgpID0+IHRoaXMuX2FsaXZlKVxuICAgICkuc3Vic2NyaWJlKChpbmRleCkgPT4ge1xuXG4gICAgICB0aGlzLl96b25lLnJ1bk91dHNpZGVBbmd1bGFyKCgpID0+IHtcbiAgICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgICAgdGhpcy52aWV3cG9ydD8uc2Nyb2xsVG9JbmRleChpbmRleCwgJ3Ntb290aCcpXG4gICAgICAgIH0pXG4gICAgICB9KVxuICAgIH0pXG4gIH1cblxuICB0cmFja1JvdyA9IChpbmRleDogbnVtYmVyLCBpdGVtOiBJVHJlZURhdGEpOiBhbnkgPT4ge1xuICAgIGlmICh0aGlzLmNvbXBhcmVJdGVtcykge1xuICAgICAgcmV0dXJuIHRoaXMuY29tcGFyZUl0ZW1zKGl0ZW0pO1xuICAgIH1cbiAgICByZXR1cm4gaW5kZXg7XG4gIH07XG5cblxuICBwcml2YXRlIGhhc0NoaWxkcmVuKGRhdGE6IElUcmVlRGF0YVtdKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIGRhdGE/LnNvbWUoXG4gICAgICAoXykgPT4gX1t0aGlzLmNoaWxkTm9kZU5hbWVdPy5sZW5ndGggPiAwXG4gICAgKTtcbiAgfVxuXG4gIHByaXZhdGUgZ2V0RGlzcGxheURhdGEoZGF0YTogSVRyZWVEYXRhW10sIGxldmVsOiBudW1iZXIpIHtcbiAgICBjb25zdCByZXN1bHQ6IElUcmVlRGF0YVtdID0gW107XG4gICAgZGF0YT8uZm9yRWFjaCgoaXRlbTogSVRyZWVEYXRhKSA9PiB7XG4gICAgICBpdGVtWydsZXZlbCddID0gbGV2ZWw7XG4gICAgICByZXN1bHQucHVzaChpdGVtKTtcbiAgICAgIGlmIChpdGVtW3RoaXMuY2hpbGROb2RlTmFtZV0/Lmxlbmd0aCA+IDBcbiAgICAgICAgJiYgdGhpcy5fb3Blbkl0ZW1zPy5maW5kKChvcGVuSXRlbSkgPT4gdGhpcy5jb21wYXJlSXRlbXMob3Blbkl0ZW0pID09PSB0aGlzLmNvbXBhcmVJdGVtcyhpdGVtKSkpIHtcbiAgICAgICAgcmVzdWx0LnB1c2goLi4udGhpcy5nZXREaXNwbGF5RGF0YShpdGVtW3RoaXMuY2hpbGROb2RlTmFtZV0sIGxldmVsICsgMSkpO1xuICAgICAgfVxuICAgIH0pO1xuICAgIHJldHVybiByZXN1bHQ7XG4gIH1cblxuICBwcml2YXRlIGFkZFJlc2l6ZU9ic2VydmVyKCkge1xuICAgIHRoaXMuX29icyA9IG5ldyBSZXNpemVPYnNlcnZlcigoXykgPT4ge1xuICAgICAgdGhpcy52aWV3cG9ydD8uY2hlY2tWaWV3cG9ydFNpemUoKTtcbiAgICB9KTtcblxuICAgIHRoaXMuX29icy5vYnNlcnZlKHRoaXMuX2VsZW1lbnRSZWYubmF0aXZlRWxlbWVudCk7XG4gIH1cblxuICBwcml2YXRlIHJlbW92ZVJlc2l6ZU9ic2VydmVyKCkge1xuICAgIHRoaXMuX29icy51bm9ic2VydmUodGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50KTtcbiAgICB0aGlzLl9vYnMuZGlzY29ubmVjdCgpO1xuICB9XG59XG4iLCI8Y2RrLXZpcnR1YWwtc2Nyb2xsLXZpZXdwb3J0ICpuZ0lmPVwidmlydHVhbDsgZWxzZSBkZWZhdWx0XCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJ0YWJsZS1ib2R5LWNvbnRhaW5lclwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgIFtpdGVtU2l6ZV09XCJoZWlnaHRcIj5cbiAgPHRldGEtdHJlZS1pdGVtICpjZGtWaXJ0dWFsRm9yPVwibGV0IGl0ZW0gb2YgZGlzcGxheURhdGE7dGVtcGxhdGVDYWNoZVNpemU6IDA7IHRyYWNrQnk6IHRyYWNrUm93O1wiXG4gICAgICAgICAgICAgICAgICBbaXRlbV09XCJpdGVtXCJcbiAgICAgICAgICAgICAgICAgIFtzdHlsZS5oZWlnaHQucHhdPVwiaGVpZ2h0XCJcbiAgICAgICAgICAgICAgICAgIFtkZXB0aF09XCJpdGVtWydsZXZlbCddXCJcbiAgICAgICAgICAgICAgICAgIFtwYWRkaW5nXT1cInBhZGRpbmdcIlxuICAgICAgICAgICAgICAgICAgW2NoaWxkTm9kZU5hbWVdPVwiY2hpbGROb2RlTmFtZVwiXG4gICAgICAgICAgICAgICAgICBbY2hpbGRQYWRkaW5nXT1cImNoaWxkUGFkZGluZ1wiXG4gICAgICAgICAgICAgICAgICBbdGVtcGxhdGVdPVwidGVtcGxhdGU/LnRlbXBsYXRlXCI+PC90ZXRhLXRyZWUtaXRlbT5cbjwvY2RrLXZpcnR1YWwtc2Nyb2xsLXZpZXdwb3J0PlxuPG5nLXRlbXBsYXRlICNkZWZhdWx0PlxuICA8dGV0YS10cmVlLWl0ZW0gKm5nRm9yPVwibGV0IGl0ZW0gb2YgZGlzcGxheURhdGE7IHRyYWNrQnk6IHRyYWNrUm93XCJcbiAgICAgICAgICAgICAgICAgIFtpdGVtXT1cIml0ZW1cIlxuICAgICAgICAgICAgICAgICAgW3N0eWxlLmhlaWdodC5weF09XCJoZWlnaHRcIlxuICAgICAgICAgICAgICAgICAgW2RlcHRoXT1cIml0ZW1bJ2xldmVsJ11cIlxuICAgICAgICAgICAgICAgICAgW3BhZGRpbmddPVwicGFkZGluZ1wiXG4gICAgICAgICAgICAgICAgICBbY2hpbGROb2RlTmFtZV09XCJjaGlsZE5vZGVOYW1lXCJcbiAgICAgICAgICAgICAgICAgIFtjaGlsZFBhZGRpbmddPVwiY2hpbGRQYWRkaW5nXCJcbiAgICAgICAgICAgICAgICAgIFt0ZW1wbGF0ZV09XCJ0ZW1wbGF0ZT8udGVtcGxhdGVcIj48L3RldGEtdHJlZS1pdGVtPlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==

package/fesm2015/tetacom-ng-components.mjs

@@ -1163,27 +1163,21 @@ class PositionUtil {
             rect.minWidth = containerWidth;
         }
         if (verticalAlign === VerticalAlign.auto) {
-            if (containerPosition.bottom <=
-                window.innerHeight / 2 ||
-                containerPosition.bottom +
-                    (elementPosition.bottom - elementPosition.top) <=
-                    window.innerHeight) {
-                verticalAlign = VerticalAlign.bottom;
+            if (containerPosition.bottom + elementHeight > window.innerHeight &&
+                containerPosition.bottom >= window.innerHeight / 2) {
+                verticalAlign = VerticalAlign.top;
             }
             else {
-                verticalAlign = VerticalAlign.top;
+                verticalAlign = VerticalAlign.bottom;
             }
         }
         if (verticalAlign === VerticalAlign.innerAuto) {
-            if (containerPosition.bottom <=
-                window.innerHeight / 2 ||
-                containerPosition.bottom +
-                    (elementPosition.bottom - elementPosition.top) <=
-                    window.innerHeight) {
-                verticalAlign = VerticalAlign.innerBottom;
+            if (containerPosition.bottom + elementHeight > window.innerHeight &&
+                containerPosition.bottom >= window.innerHeight / 2) {
+                verticalAlign = VerticalAlign.innerTop;
             }
             else {
-                verticalAlign = VerticalAlign.innerTop;
+                verticalAlign = VerticalAlign.innerBottom;
             }
         }
         if (verticalAlign === VerticalAlign.top) {
@@ -1435,6 +1429,7 @@ class DropdownBase {
     }
     setPosition(container, target) {
         const containerPosition = container.getBoundingClientRect();
+        // target.style.maxHeight = null;
         const targetPosition = target.getBoundingClientRect();
         const rect = {
             bottom: containerPosition.bottom,
@@ -9112,8 +9107,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }] } });
 
 class TreeComponent {
-    constructor(_service, _cdr, _zone) {
+    constructor(_service, _elementRef, _cdr, _zone) {
         this._service = _service;
+        this._elementRef = _elementRef;
         this._cdr = _cdr;
         this._zone = _zone;
         this.padding = 8;
@@ -9132,9 +9128,11 @@ class TreeComponent {
         this._service.openItems
             .pipe(takeWhile((_) => this._alive), filter((_) => this._openItems !== _))
             .subscribe((_) => {
+            var _a;
             this._openItems = _;
             this.displayData = this.getDisplayData(this._data, 0);
             this.openItemsChange.emit(_);
+            (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.checkViewportSize();
         });
     }
     set data(data) {
@@ -9155,20 +9153,24 @@ class TreeComponent {
     }
     ngOnInit() {
         this.service.emit(this._service);
+        this.addResizeObserver();
     }
     ngOnChanges(changes) {
+        var _a;
         this.displayData = this.getDisplayData(this._data, 0);
         this.childPadding = this.hasChildren(this._data);
+        (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.checkViewportSize();
     }
     ngOnDestroy() {
         this._alive = false;
+        this.removeResizeObserver();
     }
     ngAfterViewInit() {
         this._service.scrollToIndex.pipe(takeWhile(() => this._alive)).subscribe((index) => {
             this._zone.runOutsideAngular(() => {
                 setTimeout(() => {
                     var _a;
-                    (_a = this.virtualScroll) === null || _a === void 0 ? void 0 : _a.scrollToIndex(index, 'smooth');
+                    (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.scrollToIndex(index, 'smooth');
                 });
             });
         });
@@ -9189,13 +9191,24 @@ class TreeComponent {
         });
         return result;
     }
+    addResizeObserver() {
+        this._obs = new ResizeObserver((_) => {
+            var _a;
+            (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.checkViewportSize();
+        });
+        this._obs.observe(this._elementRef.nativeElement);
+    }
+    removeResizeObserver() {
+        this._obs.unobserve(this._elementRef.nativeElement);
+        this._obs.disconnect();
+    }
 }
-TreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TreeComponent, deps: [{ token: TreeService }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TreeComponent, selector: "teta-tree", inputs: { data: "data", padding: "padding", childNodeName: "childNodeName", virtual: "virtual", height: "height", openItems: "openItems", compareItems: "compareItems" }, outputs: { service: "service", openItemsChange: "openItemsChange" }, host: { properties: { "class.tree": "this.treeClass" } }, providers: [TreeService], queries: [{ propertyName: "template", first: true, predicate: TetaTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "virtualScroll", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual; else default\"\n                             class=\"table-body-container\"\n                             [itemSize]=\"height\">\n  <teta-tree-item *cdkVirtualFor=\"let item of displayData;templateCacheSize: 0; trackBy: trackRow;\"\n                  [item]=\"item\"\n                  [style.height.px]=\"height\"\n                  [depth]=\"item['level']\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [childPadding]=\"childPadding\"\n                  [template]=\"template?.template\"></teta-tree-item>\n</cdk-virtual-scroll-viewport>\n<ng-template #default>\n  <teta-tree-item *ngFor=\"let item of displayData; trackBy: trackRow\"\n                  [item]=\"item\"\n                  [style.height.px]=\"height\"\n                  [depth]=\"item['level']\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [childPadding]=\"childPadding\"\n                  [template]=\"template?.template\"></teta-tree-item>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TreeItemComponent, selector: "teta-tree-item", inputs: ["item", "depth", "padding", "childNodeName", "template", "childPadding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TreeComponent, deps: [{ token: TreeService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TreeComponent, selector: "teta-tree", inputs: { data: "data", padding: "padding", childNodeName: "childNodeName", virtual: "virtual", height: "height", openItems: "openItems", compareItems: "compareItems" }, outputs: { service: "service", openItemsChange: "openItemsChange" }, host: { properties: { "class.tree": "this.treeClass" } }, providers: [TreeService], queries: [{ propertyName: "template", first: true, predicate: TetaTemplateDirective, descendants: true, static: true }], viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual; else default\"\n                             class=\"table-body-container\"\n                             [itemSize]=\"height\">\n  <teta-tree-item *cdkVirtualFor=\"let item of displayData;templateCacheSize: 0; trackBy: trackRow;\"\n                  [item]=\"item\"\n                  [style.height.px]=\"height\"\n                  [depth]=\"item['level']\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [childPadding]=\"childPadding\"\n                  [template]=\"template?.template\"></teta-tree-item>\n</cdk-virtual-scroll-viewport>\n<ng-template #default>\n  <teta-tree-item *ngFor=\"let item of displayData; trackBy: trackRow\"\n                  [item]=\"item\"\n                  [style.height.px]=\"height\"\n                  [depth]=\"item['level']\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [childPadding]=\"childPadding\"\n                  [template]=\"template?.template\"></teta-tree-item>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TreeItemComponent, selector: "teta-tree-item", inputs: ["item", "depth", "padding", "childNodeName", "template", "childPadding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-tree', providers: [TreeService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual; else default\"\n                             class=\"table-body-container\"\n                             [itemSize]=\"height\">\n  <teta-tree-item *cdkVirtualFor=\"let item of displayData;templateCacheSize: 0; trackBy: trackRow;\"\n                  [item]=\"item\"\n                  [style.height.px]=\"height\"\n                  [depth]=\"item['level']\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [childPadding]=\"childPadding\"\n                  [template]=\"template?.template\"></teta-tree-item>\n</cdk-virtual-scroll-viewport>\n<ng-template #default>\n  <teta-tree-item *ngFor=\"let item of displayData; trackBy: trackRow\"\n                  [item]=\"item\"\n                  [style.height.px]=\"height\"\n                  [depth]=\"item['level']\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [childPadding]=\"childPadding\"\n                  [template]=\"template?.template\"></teta-tree-item>\n</ng-template>\n" }]
-        }], ctorParameters: function () { return [{ type: TreeService }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { data: [{
+        }], ctorParameters: function () { return [{ type: TreeService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { data: [{
                 type: Input
             }], padding: [{
                 type: Input
@@ -9211,7 +9224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Output
             }], openItemsChange: [{
                 type: Output
-            }], virtualScroll: [{
+            }], viewport: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport, { static: false }]
             }], template: [{
@@ -9504,10 +9517,10 @@ class HeadCellComponent {
     }
 }
 HeadCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HeadCellComponent, deps: [{ token: TableService }, { token: i0.ApplicationRef }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-HeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: HeadCellComponent, selector: "teta-head-cell", inputs: { column: "column", showHeadCellMenu: "showHeadCellMenu", data: "data" }, host: { listeners: { "dragenter": "dragenter($event)", "dragover": "allowDrop($event)", "dragleave": "dragleave($event)", "dragend": "dragend($event)", "drop": "drop($event)" }, properties: { "class.table-head__cell_active": "this.dropDownOpen" } }, viewQueries: [{ propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }, { propertyName: "filterTemplate", first: true, predicate: ["filterTemplate"], descendants: true, static: true }, { propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"row row_auto\">\n  <teta-dropdown [autoCloseIgnore]=\"['enter', 'inside']\"\n                 [verticalAlign]=\"verticalAlign.bottom\"\n                 [appendToBody]=\"true\"\n                 [(open)]=\"dropDownOpen\"\n                 [align]=\"align.auto\"\n                 (click)=\"$event.preventDefault()\"\n                 [class.table-head__cell__menu_open]=\"dropDownOpen\"\n                 class=\"column column_auto justify-content-center\">\n    <div tetaDropdownHead\n         draggable=\"true\"\n         class=\"table-head__cell__wrapper\"\n         (dragstart)=\"dragstart($event)\"\n         [ngClass]=\"column.headCellClass\">\n      <teta-head-cell-host [column]=\"column\" [columns]=\"columns | async\" [data]=\"data\"></teta-head-cell-host>\n      <teta-icon *ngIf=\"iconName | async as icon\"\n                 [palette]=\"'text'\"\n                 [name]=\"icon\"></teta-icon>\n    </div>\n    <teta-head-cell-dropdown tetaDropdownContent\n                             *ngIf=\"showHeadCellMenu\"\n                             [tabTemplates]=\"tabTemplates\"\n                             [data]=\"data\"\n                             [column]=\"column\"\n                             [columns]=\"columns | async\"\n                             [state]=\"state | async\"\n                             [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n  </teta-dropdown>\n  <div class=\"drop-area\"\n       draggable=\"false\"\n       [class.drop-area_left]=\"showDrag === 'left'\"\n       [class.drop-area_right]=\"showDrag === 'right'\"\n       *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n     draggable=\"false\"\n     (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n     (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n     [tetaResizeDrag]=\"'vertical'\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd()\">\n  <div class=\"table-head__cell__resize_drag\"></div>\n</div>\n<ng-template #mainTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-main-dropdown-tab [column]=\"column\"\n                          [state]=\"state\"\n                          [close]=\"close\"\n                          [headCellElementRef]=\"elementRef\"></teta-main-dropdown-tab>\n</ng-template>\n<ng-template #filterTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-filter-dropdown-tab [column]=\"column\"\n                            [state]=\"state\"\n                            [close]=\"close\"\n                            [data]=\"data\"></teta-filter-dropdown-tab>\n</ng-template>\n<ng-template #columnsTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-visibility-dropdown-tab [column]=\"column\"\n                                [columns]=\"columns\"\n                                [state]=\"state\"\n                                [close]=\"close\"\n                                [data]=\"data\"></teta-visibility-dropdown-tab>\n</ng-template>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: ResizeDragDirective, selector: "[tetaResizeDrag]", inputs: ["tetaResizeDrag"], outputs: ["resizeStart", "resizeProcess", "resizeEnd"] }, { kind: "component", type: HeadCellHostComponent, selector: "teta-head-cell-host", inputs: ["column", "columns", "data"] }, { kind: "component", type: HeadCellDropdownComponent, selector: "teta-head-cell-dropdown", inputs: ["columns", "column", "state", "data", "tabTemplates", "dropDownOpen"], outputs: ["dropDownOpenChange"] }, { kind: "component", type: MainDropdownTabComponent, selector: "teta-main-dropdown-tab", inputs: ["columns", "column", "state", "data", "close", "headCellElementRef"] }, { kind: "component", type: FilterDropdownTabComponent, selector: "teta-filter-dropdown-tab", inputs: ["columns", "column", "state", "data", "close"] }, { kind: "component", type: VisibilityDropdownTabComponent, selector: "teta-visibility-dropdown-tab", inputs: ["columns", "column", "state", "data", "close"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+HeadCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: HeadCellComponent, selector: "teta-head-cell", inputs: { column: "column", showHeadCellMenu: "showHeadCellMenu", data: "data" }, host: { listeners: { "dragenter": "dragenter($event)", "dragover": "allowDrop($event)", "dragleave": "dragleave($event)", "dragend": "dragend($event)", "drop": "drop($event)" }, properties: { "class.table-head__cell_active": "this.dropDownOpen" } }, viewQueries: [{ propertyName: "mainTemplate", first: true, predicate: ["mainTemplate"], descendants: true, static: true }, { propertyName: "filterTemplate", first: true, predicate: ["filterTemplate"], descendants: true, static: true }, { propertyName: "columnsTemplate", first: true, predicate: ["columnsTemplate"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"row row_auto\">\n  <teta-dropdown [autoCloseIgnore]=\"['enter', 'inside']\"\n                 [verticalAlign]=\"verticalAlign.auto\"\n                 [appendToBody]=\"true\"\n                 [(open)]=\"dropDownOpen\"\n                 [align]=\"align.auto\"\n                 (click)=\"$event.preventDefault()\"\n                 [class.table-head__cell__menu_open]=\"dropDownOpen\"\n                 class=\"column column_auto justify-content-center\">\n    <div tetaDropdownHead\n         draggable=\"true\"\n         class=\"table-head__cell__wrapper\"\n         (dragstart)=\"dragstart($event)\"\n         [ngClass]=\"column.headCellClass\">\n      <teta-head-cell-host [column]=\"column\" [columns]=\"columns | async\" [data]=\"data\"></teta-head-cell-host>\n      <teta-icon *ngIf=\"iconName | async as icon\"\n                 [palette]=\"'text'\"\n                 [name]=\"icon\"></teta-icon>\n    </div>\n    <teta-head-cell-dropdown tetaDropdownContent\n                             *ngIf=\"showHeadCellMenu\"\n                             [tabTemplates]=\"tabTemplates\"\n                             [data]=\"data\"\n                             [column]=\"column\"\n                             [columns]=\"columns | async\"\n                             [state]=\"state | async\"\n                             [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n  </teta-dropdown>\n  <div class=\"drop-area\"\n       draggable=\"false\"\n       [class.drop-area_left]=\"showDrag === 'left'\"\n       [class.drop-area_right]=\"showDrag === 'right'\"\n       *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n     draggable=\"false\"\n     (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n     (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n     [tetaResizeDrag]=\"'vertical'\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd()\">\n  <div class=\"table-head__cell__resize_drag\"></div>\n</div>\n<ng-template #mainTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-main-dropdown-tab [column]=\"column\"\n                          [state]=\"state\"\n                          [close]=\"close\"\n                          [headCellElementRef]=\"elementRef\"></teta-main-dropdown-tab>\n</ng-template>\n<ng-template #filterTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-filter-dropdown-tab [column]=\"column\"\n                            [state]=\"state\"\n                            [close]=\"close\"\n                            [data]=\"data\"></teta-filter-dropdown-tab>\n</ng-template>\n<ng-template #columnsTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-visibility-dropdown-tab [column]=\"column\"\n                                [columns]=\"columns\"\n                                [state]=\"state\"\n                                [close]=\"close\"\n                                [data]=\"data\"></teta-visibility-dropdown-tab>\n</ng-template>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "component", type: DropdownComponent, selector: "teta-dropdown", exportAs: ["dropdown"] }, { kind: "directive", type: DropdownHeadDirective, selector: "[tetaDropdownHead]" }, { kind: "directive", type: DropdownContentDirective, selector: "[tetaDropdownContent]" }, { kind: "directive", type: ResizeDragDirective, selector: "[tetaResizeDrag]", inputs: ["tetaResizeDrag"], outputs: ["resizeStart", "resizeProcess", "resizeEnd"] }, { kind: "component", type: HeadCellHostComponent, selector: "teta-head-cell-host", inputs: ["column", "columns", "data"] }, { kind: "component", type: HeadCellDropdownComponent, selector: "teta-head-cell-dropdown", inputs: ["columns", "column", "state", "data", "tabTemplates", "dropDownOpen"], outputs: ["dropDownOpenChange"] }, { kind: "component", type: MainDropdownTabComponent, selector: "teta-main-dropdown-tab", inputs: ["columns", "column", "state", "data", "close", "headCellElementRef"] }, { kind: "component", type: FilterDropdownTabComponent, selector: "teta-filter-dropdown-tab", inputs: ["columns", "column", "state", "data", "close"] }, { kind: "component", type: VisibilityDropdownTabComponent, selector: "teta-visibility-dropdown-tab", inputs: ["columns", "column", "state", "data", "close"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: HeadCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-head-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row row_auto\">\n  <teta-dropdown [autoCloseIgnore]=\"['enter', 'inside']\"\n                 [verticalAlign]=\"verticalAlign.bottom\"\n                 [appendToBody]=\"true\"\n                 [(open)]=\"dropDownOpen\"\n                 [align]=\"align.auto\"\n                 (click)=\"$event.preventDefault()\"\n                 [class.table-head__cell__menu_open]=\"dropDownOpen\"\n                 class=\"column column_auto justify-content-center\">\n    <div tetaDropdownHead\n         draggable=\"true\"\n         class=\"table-head__cell__wrapper\"\n         (dragstart)=\"dragstart($event)\"\n         [ngClass]=\"column.headCellClass\">\n      <teta-head-cell-host [column]=\"column\" [columns]=\"columns | async\" [data]=\"data\"></teta-head-cell-host>\n      <teta-icon *ngIf=\"iconName | async as icon\"\n                 [palette]=\"'text'\"\n                 [name]=\"icon\"></teta-icon>\n    </div>\n    <teta-head-cell-dropdown tetaDropdownContent\n                             *ngIf=\"showHeadCellMenu\"\n                             [tabTemplates]=\"tabTemplates\"\n                             [data]=\"data\"\n                             [column]=\"column\"\n                             [columns]=\"columns | async\"\n                             [state]=\"state | async\"\n                             [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n  </teta-dropdown>\n  <div class=\"drop-area\"\n       draggable=\"false\"\n       [class.drop-area_left]=\"showDrag === 'left'\"\n       [class.drop-area_right]=\"showDrag === 'right'\"\n       *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n     draggable=\"false\"\n     (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n     (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n     [tetaResizeDrag]=\"'vertical'\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd()\">\n  <div class=\"table-head__cell__resize_drag\"></div>\n</div>\n<ng-template #mainTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-main-dropdown-tab [column]=\"column\"\n                          [state]=\"state\"\n                          [close]=\"close\"\n                          [headCellElementRef]=\"elementRef\"></teta-main-dropdown-tab>\n</ng-template>\n<ng-template #filterTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-filter-dropdown-tab [column]=\"column\"\n                            [state]=\"state\"\n                            [close]=\"close\"\n                            [data]=\"data\"></teta-filter-dropdown-tab>\n</ng-template>\n<ng-template #columnsTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-visibility-dropdown-tab [column]=\"column\"\n                                [columns]=\"columns\"\n                                [state]=\"state\"\n                                [close]=\"close\"\n                                [data]=\"data\"></teta-visibility-dropdown-tab>\n</ng-template>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"] }]
+            args: [{ selector: 'teta-head-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row row_auto\">\n  <teta-dropdown [autoCloseIgnore]=\"['enter', 'inside']\"\n                 [verticalAlign]=\"verticalAlign.auto\"\n                 [appendToBody]=\"true\"\n                 [(open)]=\"dropDownOpen\"\n                 [align]=\"align.auto\"\n                 (click)=\"$event.preventDefault()\"\n                 [class.table-head__cell__menu_open]=\"dropDownOpen\"\n                 class=\"column column_auto justify-content-center\">\n    <div tetaDropdownHead\n         draggable=\"true\"\n         class=\"table-head__cell__wrapper\"\n         (dragstart)=\"dragstart($event)\"\n         [ngClass]=\"column.headCellClass\">\n      <teta-head-cell-host [column]=\"column\" [columns]=\"columns | async\" [data]=\"data\"></teta-head-cell-host>\n      <teta-icon *ngIf=\"iconName | async as icon\"\n                 [palette]=\"'text'\"\n                 [name]=\"icon\"></teta-icon>\n    </div>\n    <teta-head-cell-dropdown tetaDropdownContent\n                             *ngIf=\"showHeadCellMenu\"\n                             [tabTemplates]=\"tabTemplates\"\n                             [data]=\"data\"\n                             [column]=\"column\"\n                             [columns]=\"columns | async\"\n                             [state]=\"state | async\"\n                             [(dropDownOpen)]=\"dropDownOpen\"></teta-head-cell-dropdown>\n  </teta-dropdown>\n  <div class=\"drop-area\"\n       draggable=\"false\"\n       [class.drop-area_left]=\"showDrag === 'left'\"\n       [class.drop-area_right]=\"showDrag === 'right'\"\n       *ngIf=\"showDrag\"></div>\n</div>\n<div class=\"table-head__cell__resize\"\n     draggable=\"false\"\n     (dragstart)=\"$event.preventDefault();$event.stopPropagation()\"\n     (drag)=\"$event.preventDefault();$event.stopPropagation()\"\n     [tetaResizeDrag]=\"'vertical'\"\n     (resizeStart)=\"resizeStart($event)\"\n     (resizeProcess)=\"resizeProcess($event)\"\n     (resizeEnd)=\"resizeEnd()\">\n  <div class=\"table-head__cell__resize_drag\"></div>\n</div>\n<ng-template #mainTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-main-dropdown-tab [column]=\"column\"\n                          [state]=\"state\"\n                          [close]=\"close\"\n                          [headCellElementRef]=\"elementRef\"></teta-main-dropdown-tab>\n</ng-template>\n<ng-template #filterTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-filter-dropdown-tab [column]=\"column\"\n                            [state]=\"state\"\n                            [close]=\"close\"\n                            [data]=\"data\"></teta-filter-dropdown-tab>\n</ng-template>\n<ng-template #columnsTemplate let-column=\"column\" let-columns=\"columns\" let-data=\"data\" let-state=\"state\"\n             let-close=\"close\">\n  <teta-visibility-dropdown-tab [column]=\"column\"\n                                [columns]=\"columns\"\n                                [state]=\"state\"\n                                [close]=\"close\"\n                                [data]=\"data\"></teta-visibility-dropdown-tab>\n</ng-template>\n", styles: [".drop-area{position:absolute;width:1px;background:var(--color-text-50);top:0;bottom:0;z-index:10}.drop-area_left{left:-1px}.drop-area_right{right:-1px}\n"] }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ApplicationRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
                 type: Input
             }], showHeadCellMenu: [{
@@ -10201,6 +10214,7 @@ class TableBodyComponent {
         this._cdr = _cdr;
         this.selectedRows = [];
         this.tableBodyClass = true;
+        this.scroll = new EventEmitter();
         this.locked = [];
         this.unlocked = [];
         this.selectTypeEnum = SelectType;
@@ -10348,10 +10362,10 @@ class TableBodyComponent {
     }
 }
 TableBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TableBodyComponent, deps: [{ token: TableService }, { token: i0.ElementRef }, { token: TetaConfigService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TableBodyComponent, selector: "teta-table-body", inputs: { virtual: "virtual", activeRow: "activeRow", selectedRows: "selectedRows", additionalComponent: "additionalComponent", aggregate: "aggregate", selectType: "selectType", rowClass: "rowClass", trackRow: "trackRow", trackColumns: "trackColumns" }, host: { properties: { "class.table-body": "this.tableBodyClass" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual\"\n                             class=\"table-body-container\"\n                             [itemSize]=\"28\">\n  <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n</cdk-virtual-scroll-viewport>\n<div *ngIf=\"!virtual\"\n     class=\"table-body-container\">\n  <ng-container *ngFor=\"let row of data; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"aggregate\">\n    <ng-container *ngTemplateOutlet=\"aggTemplate;\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <div class=\"table-row\"\n       (click)=\"setActiveRow(row, $event)\"\n       [attr.data-row]=\"rowIndex\"\n       [class.table-row_odd]=\"rowIndex % 2 === 1\"\n       [ngClass]=\"rowClass ? rowClass(row, rowIndex) : ''\"\n       [class.table-row_selected]=\"selectedRows && selectedRows.indexOf(row) >= 0\"\n       [style.flex-grow]=\"totalFlex\"\n       [style.flex-basis.px]=\"totalWidth\"\n       [style.min-width.px]=\"totalWidth\">\n    <div class=\"table-row_locked\"\n         *ngIf=\"locked.length > 0\"\n         [style.flex-grow]=\"lockedFlex\"\n         [style.flex-basis.px]=\"lockedWidth\"\n         [style.min-width.px]=\"lockedWidth\"\n         [style.zIndex]=\"row === activeRow ? 2 : 1\">\n      <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length\"\n                           [row]=\"row\"\n                           style=\"width: 28px;\"></teta-selection-cell>\n      <teta-cell\n        *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-column]=\"column.name\"\n        [column]=\"column\"\n        [filterOptions]=\"dict?dict[column.name]:[]\"\n        [dict]=\"dict\"\n        [row]=\"row\"\n        [ngClass]=\"column.cellClass\"\n        [attr.tabindex]=\"0\"\n        [style.flex-grow]=\"column.flex\"\n        [style.flex-basis.px]=\"column.width\"\n      ></teta-cell>\n    </div>\n    <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\"\n                         [row]=\"row\"\n                         style=\"width: 28px;\"></teta-selection-cell>\n    <teta-cell\n      *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n      [attr.data-row]=\"rowIndex\"\n      [attr.data-column]=\"column.name\"\n      [column]=\"column\"\n      [filterOptions]=\"dict?dict[column.name]:[]\"\n      [dict]=\"dict\"\n      [row]=\"row\"\n      [ngClass]=\"column.cellClass\"\n      [attr.tabindex]=\"0\"\n      [style.flex-grow]=\"column.flex\"\n      [style.flex-basis.px]=\"column.width\"\n    ></teta-cell>\n  </div>\n</ng-template>\n\n<ng-template #aggTemplate>\n  <ng-container *ngIf=\"locale | async as loc\">\n    <div class=\"table-row\"\n         *ngIf=\"aggregate\"\n         [class.table-row_virtual]=\"virtual\"\n         [style.flex-grow]=\"totalFlex\"\n         [style.flex-basis.px]=\"totalWidth\"\n         [style.min-width.px]=\"totalWidth\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\">\n        <div class=\"cell align-center justify-content-center\"\n             style=\"width: 28px;\"\n             *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n          <teta-icon [name]=\"'sumColor'\"></teta-icon>\n        </div>\n        <div class=\"cell cell-component aggregate-cell\"\n             *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n             [attr.data-column]=\"column.name\"\n             [ngClass]=\"column.cellClass\"\n             [attr.tabindex]=\"0\"\n             [style.flex-grow]=\"column.flex\"\n             [style.flex-basis.px]=\"column.width\">\n        <span class=\"cell-text cell-text_numeric font-title-3\">\n          {{loc[getAggregateText(column)]}}:\n          {{getAggregateValue(column) | tetaNumber : 2}}\n        </span>\n        </div>\n      </div>\n      <div class=\"cell align-center justify-content-center\"\n           style=\"width: 28px;\"\n           *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n        <teta-icon [name]=\"'sumColor'\"></teta-icon>\n      </div>\n      <div class=\"cell cell-component aggregate-cell\"\n           *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n           [attr.data-column]=\"column.name\"\n           [ngClass]=\"column.cellClass\"\n           [attr.tabindex]=\"0\"\n           [style.flex-grow]=\"column.flex\"\n           [style.flex-basis.px]=\"column.width\">\n      <span class=\"cell-text cell-text_numeric font-title-3\">\n        {{loc[getAggregateText(column)]}}:\n        {{getAggregateValue(column) | tetaNumber : 2}}\n      </span>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: i6.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: CellComponent, selector: "teta-cell", inputs: ["column", "filterOptions", "dict", "row"] }, { kind: "component", type: SelectionCellComponent, selector: "teta-selection-cell", inputs: ["row"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "tetaNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TableBodyComponent, selector: "teta-table-body", inputs: { virtual: "virtual", activeRow: "activeRow", selectedRows: "selectedRows", additionalComponent: "additionalComponent", aggregate: "aggregate", selectType: "selectType", rowClass: "rowClass", trackRow: "trackRow", trackColumns: "trackColumns" }, outputs: { scroll: "scroll" }, host: { properties: { "class.table-body": "this.tableBodyClass" } }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], ngImport: i0, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual && data.length > 0; else nonVirtual\"\n                             class=\"table-body-container\"\n                             (scroll)=\"scroll.emit($event)\"\n                             [itemSize]=\"28\">\n  <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n</cdk-virtual-scroll-viewport>\n<ng-template #nonVirtual>\n  <div class=\"table-body-container\" (scroll)=\"scroll.emit($event)\">\n    <div class=\"column column_auto\"\n         style=\"position: absolute; top:0; bottom:16px;left:0;right:0;\"\n         *ngIf=\"!data?.length\">\n      <ng-content></ng-content>\n    </div>\n    <ng-container *ngTemplateOutlet=\"emptyRow;\"></ng-container>\n    <ng-container *ngFor=\"let row of data; let rowIndex = index; trackBy: trackRow;\">\n      <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"aggregate\">\n      <ng-container *ngTemplateOutlet=\"aggTemplate;\"></ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <div class=\"table-row\"\n       (click)=\"setActiveRow(row, $event)\"\n       [attr.data-row]=\"rowIndex\"\n       [class.table-row_odd]=\"rowIndex % 2 === 1\"\n       [ngClass]=\"rowClass ? rowClass(row, rowIndex) : ''\"\n       [class.table-row_selected]=\"selectedRows && selectedRows.indexOf(row) >= 0\"\n       [style.flex-grow]=\"totalFlex\"\n       [style.flex-basis.px]=\"totalWidth\"\n       [style.min-width.px]=\"totalWidth\">\n    <div class=\"table-row_locked\"\n         *ngIf=\"locked.length > 0\"\n         [style.flex-grow]=\"lockedFlex\"\n         [style.flex-basis.px]=\"lockedWidth\"\n         [style.min-width.px]=\"lockedWidth\"\n         [style.zIndex]=\"row === activeRow ? 2 : 1\">\n      <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length\"\n                           [row]=\"row\"\n                           style=\"width: 28px;\"></teta-selection-cell>\n      <teta-cell\n        *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-column]=\"column.name\"\n        [column]=\"column\"\n        [filterOptions]=\"dict?dict[column.name]:[]\"\n        [dict]=\"dict\"\n        [row]=\"row\"\n        [ngClass]=\"column.cellClass\"\n        [attr.tabindex]=\"0\"\n        [style.flex-grow]=\"column.flex\"\n        [style.flex-basis.px]=\"column.width\"\n      ></teta-cell>\n    </div>\n    <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\"\n                         [row]=\"row\"\n                         style=\"width: 28px;\"></teta-selection-cell>\n    <teta-cell\n      *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n      [attr.data-row]=\"rowIndex\"\n      [attr.data-column]=\"column.name\"\n      [column]=\"column\"\n      [filterOptions]=\"dict?dict[column.name]:[]\"\n      [dict]=\"dict\"\n      [row]=\"row\"\n      [ngClass]=\"column.cellClass\"\n      [attr.tabindex]=\"0\"\n      [style.flex-grow]=\"column.flex\"\n      [style.flex-basis.px]=\"column.width\"\n    ></teta-cell>\n  </div>\n</ng-template>\n\n<ng-template #aggTemplate>\n  <ng-container *ngIf=\"locale | async as loc\">\n    <div class=\"table-row\"\n         *ngIf=\"aggregate\"\n         [class.table-row_virtual]=\"virtual\"\n         [style.flex-grow]=\"totalFlex\"\n         [style.flex-basis.px]=\"totalWidth\"\n         [style.min-width.px]=\"totalWidth\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\">\n        <div class=\"cell align-center justify-content-center\"\n             style=\"width: 28px;\"\n             *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n          <teta-icon [name]=\"'sumColor'\"></teta-icon>\n        </div>\n        <div class=\"cell cell-component aggregate-cell\"\n             *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n             [attr.data-column]=\"column.name\"\n             [ngClass]=\"column.cellClass\"\n             [attr.tabindex]=\"0\"\n             [style.flex-grow]=\"column.flex\"\n             [style.flex-basis.px]=\"column.width\">\n        <span class=\"cell-text cell-text_numeric font-title-3\">\n          {{loc[getAggregateText(column)]}}:\n          {{getAggregateValue(column) | tetaNumber : 2}}\n        </span>\n        </div>\n      </div>\n      <div class=\"cell align-center justify-content-center\"\n           style=\"width: 28px;\"\n           *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n        <teta-icon [name]=\"'sumColor'\"></teta-icon>\n      </div>\n      <div class=\"cell cell-component aggregate-cell\"\n           *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n           [attr.data-column]=\"column.name\"\n           [ngClass]=\"column.cellClass\"\n           [attr.tabindex]=\"0\"\n           [style.flex-grow]=\"column.flex\"\n           [style.flex-basis.px]=\"column.width\">\n      <span class=\"cell-text cell-text_numeric font-title-3\">\n        {{loc[getAggregateText(column)]}}:\n        {{getAggregateValue(column) | tetaNumber : 2}}\n      </span>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n<ng-template #emptyRow>\n  <div class=\"empty-table-row\"\n       [style.flex-grow]=\"totalFlex\"\n       [style.flex-basis.px]=\"totalWidth\"\n       [style.min-width.px]=\"totalWidth\">\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "directive", type: i6.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i6.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i6.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: CellComponent, selector: "teta-cell", inputs: ["column", "filterOptions", "dict", "row"] }, { kind: "component", type: SelectionCellComponent, selector: "teta-selection-cell", inputs: ["row"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "tetaNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TableBodyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-table-body', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual\"\n                             class=\"table-body-container\"\n                             [itemSize]=\"28\">\n  <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n</cdk-virtual-scroll-viewport>\n<div *ngIf=\"!virtual\"\n     class=\"table-body-container\">\n  <ng-container *ngFor=\"let row of data; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"aggregate\">\n    <ng-container *ngTemplateOutlet=\"aggTemplate;\"></ng-container>\n  </ng-container>\n</div>\n\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <div class=\"table-row\"\n       (click)=\"setActiveRow(row, $event)\"\n       [attr.data-row]=\"rowIndex\"\n       [class.table-row_odd]=\"rowIndex % 2 === 1\"\n       [ngClass]=\"rowClass ? rowClass(row, rowIndex) : ''\"\n       [class.table-row_selected]=\"selectedRows && selectedRows.indexOf(row) >= 0\"\n       [style.flex-grow]=\"totalFlex\"\n       [style.flex-basis.px]=\"totalWidth\"\n       [style.min-width.px]=\"totalWidth\">\n    <div class=\"table-row_locked\"\n         *ngIf=\"locked.length > 0\"\n         [style.flex-grow]=\"lockedFlex\"\n         [style.flex-basis.px]=\"lockedWidth\"\n         [style.min-width.px]=\"lockedWidth\"\n         [style.zIndex]=\"row === activeRow ? 2 : 1\">\n      <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length\"\n                           [row]=\"row\"\n                           style=\"width: 28px;\"></teta-selection-cell>\n      <teta-cell\n        *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-column]=\"column.name\"\n        [column]=\"column\"\n        [filterOptions]=\"dict?dict[column.name]:[]\"\n        [dict]=\"dict\"\n        [row]=\"row\"\n        [ngClass]=\"column.cellClass\"\n        [attr.tabindex]=\"0\"\n        [style.flex-grow]=\"column.flex\"\n        [style.flex-basis.px]=\"column.width\"\n      ></teta-cell>\n    </div>\n    <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\"\n                         [row]=\"row\"\n                         style=\"width: 28px;\"></teta-selection-cell>\n    <teta-cell\n      *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n      [attr.data-row]=\"rowIndex\"\n      [attr.data-column]=\"column.name\"\n      [column]=\"column\"\n      [filterOptions]=\"dict?dict[column.name]:[]\"\n      [dict]=\"dict\"\n      [row]=\"row\"\n      [ngClass]=\"column.cellClass\"\n      [attr.tabindex]=\"0\"\n      [style.flex-grow]=\"column.flex\"\n      [style.flex-basis.px]=\"column.width\"\n    ></teta-cell>\n  </div>\n</ng-template>\n\n<ng-template #aggTemplate>\n  <ng-container *ngIf=\"locale | async as loc\">\n    <div class=\"table-row\"\n         *ngIf=\"aggregate\"\n         [class.table-row_virtual]=\"virtual\"\n         [style.flex-grow]=\"totalFlex\"\n         [style.flex-basis.px]=\"totalWidth\"\n         [style.min-width.px]=\"totalWidth\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\">\n        <div class=\"cell align-center justify-content-center\"\n             style=\"width: 28px;\"\n             *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n          <teta-icon [name]=\"'sumColor'\"></teta-icon>\n        </div>\n        <div class=\"cell cell-component aggregate-cell\"\n             *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n             [attr.data-column]=\"column.name\"\n             [ngClass]=\"column.cellClass\"\n             [attr.tabindex]=\"0\"\n             [style.flex-grow]=\"column.flex\"\n             [style.flex-basis.px]=\"column.width\">\n        <span class=\"cell-text cell-text_numeric font-title-3\">\n          {{loc[getAggregateText(column)]}}:\n          {{getAggregateValue(column) | tetaNumber : 2}}\n        </span>\n        </div>\n      </div>\n      <div class=\"cell align-center justify-content-center\"\n           style=\"width: 28px;\"\n           *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n        <teta-icon [name]=\"'sumColor'\"></teta-icon>\n      </div>\n      <div class=\"cell cell-component aggregate-cell\"\n           *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n           [attr.data-column]=\"column.name\"\n           [ngClass]=\"column.cellClass\"\n           [attr.tabindex]=\"0\"\n           [style.flex-grow]=\"column.flex\"\n           [style.flex-basis.px]=\"column.width\">\n      <span class=\"cell-text cell-text_numeric font-title-3\">\n        {{loc[getAggregateText(column)]}}:\n        {{getAggregateValue(column) | tetaNumber : 2}}\n      </span>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n" }]
+            args: [{ selector: 'teta-table-body', changeDetection: ChangeDetectionStrategy.OnPush, template: "<cdk-virtual-scroll-viewport *ngIf=\"virtual && data.length > 0; else nonVirtual\"\n                             class=\"table-body-container\"\n                             (scroll)=\"scroll.emit($event)\"\n                             [itemSize]=\"28\">\n  <ng-container *cdkVirtualFor=\"let row of data;templateCacheSize: 0; let rowIndex = index; trackBy: trackRow;\">\n    <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n  </ng-container>\n</cdk-virtual-scroll-viewport>\n<ng-template #nonVirtual>\n  <div class=\"table-body-container\" (scroll)=\"scroll.emit($event)\">\n    <div class=\"column column_auto\"\n         style=\"position: absolute; top:0; bottom:16px;left:0;right:0;\"\n         *ngIf=\"!data?.length\">\n      <ng-content></ng-content>\n    </div>\n    <ng-container *ngTemplateOutlet=\"emptyRow;\"></ng-container>\n    <ng-container *ngFor=\"let row of data; let rowIndex = index; trackBy: trackRow;\">\n      <ng-container *ngTemplateOutlet=\"bodyTemplate; context: {row: row, rowIndex: rowIndex}\"></ng-container>\n    </ng-container>\n    <ng-container *ngIf=\"aggregate\">\n      <ng-container *ngTemplateOutlet=\"aggTemplate;\"></ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #bodyTemplate let-row=\"row\" let-rowIndex=\"rowIndex\">\n  <div class=\"table-row\"\n       (click)=\"setActiveRow(row, $event)\"\n       [attr.data-row]=\"rowIndex\"\n       [class.table-row_odd]=\"rowIndex % 2 === 1\"\n       [ngClass]=\"rowClass ? rowClass(row, rowIndex) : ''\"\n       [class.table-row_selected]=\"selectedRows && selectedRows.indexOf(row) >= 0\"\n       [style.flex-grow]=\"totalFlex\"\n       [style.flex-basis.px]=\"totalWidth\"\n       [style.min-width.px]=\"totalWidth\">\n    <div class=\"table-row_locked\"\n         *ngIf=\"locked.length > 0\"\n         [style.flex-grow]=\"lockedFlex\"\n         [style.flex-basis.px]=\"lockedWidth\"\n         [style.min-width.px]=\"lockedWidth\"\n         [style.zIndex]=\"row === activeRow ? 2 : 1\">\n      <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length\"\n                           [row]=\"row\"\n                           style=\"width: 28px;\"></teta-selection-cell>\n      <teta-cell\n        *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n        [attr.data-row]=\"rowIndex\"\n        [attr.data-column]=\"column.name\"\n        [column]=\"column\"\n        [filterOptions]=\"dict?dict[column.name]:[]\"\n        [dict]=\"dict\"\n        [row]=\"row\"\n        [ngClass]=\"column.cellClass\"\n        [attr.tabindex]=\"0\"\n        [style.flex-grow]=\"column.flex\"\n        [style.flex-basis.px]=\"column.width\"\n      ></teta-cell>\n    </div>\n    <teta-selection-cell *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\"\n                         [row]=\"row\"\n                         style=\"width: 28px;\"></teta-selection-cell>\n    <teta-cell\n      *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n      [attr.data-row]=\"rowIndex\"\n      [attr.data-column]=\"column.name\"\n      [column]=\"column\"\n      [filterOptions]=\"dict?dict[column.name]:[]\"\n      [dict]=\"dict\"\n      [row]=\"row\"\n      [ngClass]=\"column.cellClass\"\n      [attr.tabindex]=\"0\"\n      [style.flex-grow]=\"column.flex\"\n      [style.flex-basis.px]=\"column.width\"\n    ></teta-cell>\n  </div>\n</ng-template>\n\n<ng-template #aggTemplate>\n  <ng-container *ngIf=\"locale | async as loc\">\n    <div class=\"table-row\"\n         *ngIf=\"aggregate\"\n         [class.table-row_virtual]=\"virtual\"\n         [style.flex-grow]=\"totalFlex\"\n         [style.flex-basis.px]=\"totalWidth\"\n         [style.min-width.px]=\"totalWidth\">\n      <div class=\"table-row_locked\"\n           *ngIf=\"locked.length > 0\"\n           [style.flex-grow]=\"lockedFlex\"\n           [style.flex-basis.px]=\"lockedWidth\"\n           [style.min-width.px]=\"lockedWidth\">\n        <div class=\"cell align-center justify-content-center\"\n             style=\"width: 28px;\"\n             *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n          <teta-icon [name]=\"'sumColor'\"></teta-icon>\n        </div>\n        <div class=\"cell cell-component aggregate-cell\"\n             *ngFor=\"let column of locked; let colIndex = index; trackBy: trackColumns;\"\n             [attr.data-column]=\"column.name\"\n             [ngClass]=\"column.cellClass\"\n             [attr.tabindex]=\"0\"\n             [style.flex-grow]=\"column.flex\"\n             [style.flex-basis.px]=\"column.width\">\n        <span class=\"cell-text cell-text_numeric font-title-3\">\n          {{loc[getAggregateText(column)]}}:\n          {{getAggregateValue(column) | tetaNumber : 2}}\n        </span>\n        </div>\n      </div>\n      <div class=\"cell align-center justify-content-center\"\n           style=\"width: 28px;\"\n           *ngIf=\"selectType === selectTypeEnum.checkBox && locked.length < 1\">\n        <teta-icon [name]=\"'sumColor'\"></teta-icon>\n      </div>\n      <div class=\"cell cell-component aggregate-cell\"\n           *ngFor=\"let column of unlocked; let colIndex = index; trackBy: trackColumns;\"\n           [attr.data-column]=\"column.name\"\n           [ngClass]=\"column.cellClass\"\n           [attr.tabindex]=\"0\"\n           [style.flex-grow]=\"column.flex\"\n           [style.flex-basis.px]=\"column.width\">\n      <span class=\"cell-text cell-text_numeric font-title-3\">\n        {{loc[getAggregateText(column)]}}:\n        {{getAggregateValue(column) | tetaNumber : 2}}\n      </span>\n      </div>\n    </div>\n  </ng-container>\n</ng-template>\n<ng-template #emptyRow>\n  <div class=\"empty-table-row\"\n       [style.flex-grow]=\"totalFlex\"\n       [style.flex-basis.px]=\"totalWidth\"\n       [style.min-width.px]=\"totalWidth\">\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ElementRef }, { type: TetaConfigService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { virtual: [{
                 type: Input
             }], activeRow: [{
@@ -10376,6 +10390,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
             }], tableBodyClass: [{
                 type: HostBinding,
                 args: ['class.table-body']
+            }], scroll: [{
+                type: Output
             }] } });
 
 class TableComponent {
@@ -10417,8 +10433,8 @@ class TableComponent {
         this.verticalAlign = VerticalAlign;
         this.align = Align;
         this._alive = true;
-        this.onScroll = () => {
-            this._headElement.scrollLeft = this._bodyElement.scrollLeft;
+        this.onScroll = (event) => {
+            this._headElement.scrollLeft = event.target.scrollLeft;
         };
         this._svc.state
             .pipe(takeWhile((_) => this._alive), filter((state) => state !== this._state))
@@ -10615,12 +10631,9 @@ class TableComponent {
     ngAfterViewInit() {
         this._headElement =
             this._elementRef.nativeElement.querySelector('.table-head');
-        this._bodyElement = this._elementRef.nativeElement.querySelector('.table-body-container');
-        this._bodyElement.addEventListener('scroll', this.onScroll);
     }
     ngOnDestroy() {
         this._alive = false;
-        this._bodyElement.removeEventListener('scroll', this.onScroll);
     }
     ngOnChanges(changes) {
         var _a;
@@ -10726,10 +10739,10 @@ class TableComponent {
     }
 }
 TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TableComponent, deps: [{ token: TableService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TableComponent, selector: "teta-table", inputs: { data: "data", columns: "columns", dict: "dict", filterOptions: "filterOptions", state: "state", cookieName: "cookieName", virtual: "virtual", detailComponent: "detailComponent", activeRow: "activeRow", selectedRows: "selectedRows", selectType: "selectType", aggregate: "aggregate", trackRow: "trackRow", trackColumns: "trackColumns", editType: "editType", editEvent: "editEvent", rowEditable: "rowEditable", rowClass: "rowClass", scrollToIndex: "scrollToIndex", showHeadCellMenu: "showHeadCellMenu", contextMenu: "contextMenu", contextMenuOpen: "contextMenuOpen" }, outputs: { contextMenuOpenChange: "contextMenuOpenChange", stateChange: "stateChange", bodyLeft: "bodyLeft", activeRowChange: "activeRowChange", selectedRowsChange: "selectedRowsChange", cellClick: "cellClick", cellDoubleClick: "cellDoubleClick", cellFocus: "cellFocus", cellKeyDown: "cellKeyDown", rowLeft: "rowLeft", rowEditStart: "rowEditStart", rowEditEnd: "rowEditEnd", cellEditStart: "cellEditStart", cellEditEnd: "cellEditEnd", valueChange: "valueChange", tableService: "tableService" }, host: { listeners: { "document:click": "handleClickOutsideAnyRow($event)", "focusin": "focusIn($event)", "dblclick": "dblclick($event)", "keydown": "keydown($event)", "mousedown": "mousedown($event)" }, properties: { "class.table": "this.tableClass" } }, providers: [TableService], viewQueries: [{ propertyName: "menu", first: true, predicate: ["contextMenu"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"column column_auto\">\n  <teta-table-head\n    style=\"z-index: 1\"\n    [selectType]=\"selectType\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n  <div class=\"column column_auto position-relative\"\n       style=\"z-index: 0\"\n       [tetaContextMenu]=\"contextMenu\"\n       [verticalAlign]=\"verticalAlign.auto\"\n       [align]=\"align.auto\"\n       [appendToBody]=\"true\"\n       [data]=\"contextMenuRow\"\n       [open]=\"contextMenuOpen\"\n       (openChange)=\"setContextMenuOpen($event)\">\n    <teta-table-body\n      (contextmenu)=\"setContextMenuRow($event)\"\n      [aggregate]=\"aggregate\"\n      [virtual]=\"virtual\"\n      [activeRow]=\"activeRow\"\n      [trackRow]=\"trackRow\"\n      [trackColumns]=\"trackColumns\"\n      [selectedRows]=\"selectedRowsList\"\n      [additionalComponent]=\"detailComponent\"\n      [selectType]=\"selectType\"\n      [rowClass]=\"rowClass\"></teta-table-body>\n    <div class=\"column column_auto\"\n         style=\"position: absolute; top:0; bottom:0;left:0;right:0;\"\n         *ngIf=\"!data?.length\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: ContextMenuDirective, selector: "[tetaContextMenu]", inputs: ["tetaContextMenu", "autoCloseIgnore"] }, { kind: "component", type: TableHeadComponent, selector: "teta-table-head", inputs: ["selectType", "showHeadCellMenu"] }, { kind: "component", type: TableBodyComponent, selector: "teta-table-body", inputs: ["virtual", "activeRow", "selectedRows", "additionalComponent", "aggregate", "selectType", "rowClass", "trackRow", "trackColumns"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TableComponent, selector: "teta-table", inputs: { data: "data", columns: "columns", dict: "dict", filterOptions: "filterOptions", state: "state", cookieName: "cookieName", virtual: "virtual", detailComponent: "detailComponent", activeRow: "activeRow", selectedRows: "selectedRows", selectType: "selectType", aggregate: "aggregate", trackRow: "trackRow", trackColumns: "trackColumns", editType: "editType", editEvent: "editEvent", rowEditable: "rowEditable", rowClass: "rowClass", scrollToIndex: "scrollToIndex", showHeadCellMenu: "showHeadCellMenu", contextMenu: "contextMenu", contextMenuOpen: "contextMenuOpen" }, outputs: { contextMenuOpenChange: "contextMenuOpenChange", stateChange: "stateChange", bodyLeft: "bodyLeft", activeRowChange: "activeRowChange", selectedRowsChange: "selectedRowsChange", cellClick: "cellClick", cellDoubleClick: "cellDoubleClick", cellFocus: "cellFocus", cellKeyDown: "cellKeyDown", rowLeft: "rowLeft", rowEditStart: "rowEditStart", rowEditEnd: "rowEditEnd", cellEditStart: "cellEditStart", cellEditEnd: "cellEditEnd", valueChange: "valueChange", tableService: "tableService" }, host: { listeners: { "document:click": "handleClickOutsideAnyRow($event)", "focusin": "focusIn($event)", "dblclick": "dblclick($event)", "keydown": "keydown($event)", "mousedown": "mousedown($event)" }, properties: { "class.table": "this.tableClass" } }, providers: [TableService], viewQueries: [{ propertyName: "menu", first: true, predicate: ["contextMenu"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"column column_auto\">\n  <teta-table-head\n    style=\"z-index: 1\"\n    [selectType]=\"selectType\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n  <div class=\"column column_auto position-relative\"\n       style=\"z-index: 0\"\n       [tetaContextMenu]=\"contextMenu\"\n       [verticalAlign]=\"verticalAlign.auto\"\n       [align]=\"align.auto\"\n       [appendToBody]=\"true\"\n       [data]=\"contextMenuRow\"\n       [open]=\"contextMenuOpen\"\n       (openChange)=\"setContextMenuOpen($event)\">\n    <teta-table-body\n      (contextmenu)=\"setContextMenuRow($event)\"\n      (scroll)=\"onScroll($event)\"\n      [aggregate]=\"aggregate\"\n      [virtual]=\"virtual\"\n      [activeRow]=\"activeRow\"\n      [trackRow]=\"trackRow\"\n      [trackColumns]=\"trackColumns\"\n      [selectedRows]=\"selectedRowsList\"\n      [additionalComponent]=\"detailComponent\"\n      [selectType]=\"selectType\"\n      [rowClass]=\"rowClass\">\n      <ng-content></ng-content>\n    </teta-table-body>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: ContextMenuDirective, selector: "[tetaContextMenu]", inputs: ["tetaContextMenu", "autoCloseIgnore"] }, { kind: "component", type: TableHeadComponent, selector: "teta-table-head", inputs: ["selectType", "showHeadCellMenu"] }, { kind: "component", type: TableBodyComponent, selector: "teta-table-body", inputs: ["virtual", "activeRow", "selectedRows", "additionalComponent", "aggregate", "selectType", "rowClass", "trackRow", "trackColumns"], outputs: ["scroll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableService], template: "<div class=\"column column_auto\">\n  <teta-table-head\n    style=\"z-index: 1\"\n    [selectType]=\"selectType\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n  <div class=\"column column_auto position-relative\"\n       style=\"z-index: 0\"\n       [tetaContextMenu]=\"contextMenu\"\n       [verticalAlign]=\"verticalAlign.auto\"\n       [align]=\"align.auto\"\n       [appendToBody]=\"true\"\n       [data]=\"contextMenuRow\"\n       [open]=\"contextMenuOpen\"\n       (openChange)=\"setContextMenuOpen($event)\">\n    <teta-table-body\n      (contextmenu)=\"setContextMenuRow($event)\"\n      [aggregate]=\"aggregate\"\n      [virtual]=\"virtual\"\n      [activeRow]=\"activeRow\"\n      [trackRow]=\"trackRow\"\n      [trackColumns]=\"trackColumns\"\n      [selectedRows]=\"selectedRowsList\"\n      [additionalComponent]=\"detailComponent\"\n      [selectType]=\"selectType\"\n      [rowClass]=\"rowClass\"></teta-table-body>\n    <div class=\"column column_auto\"\n         style=\"position: absolute; top:0; bottom:0;left:0;right:0;\"\n         *ngIf=\"!data?.length\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'teta-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [TableService], template: "<div class=\"column column_auto\">\n  <teta-table-head\n    style=\"z-index: 1\"\n    [selectType]=\"selectType\"\n    [showHeadCellMenu]=\"showHeadCellMenu\"></teta-table-head>\n  <div class=\"column column_auto position-relative\"\n       style=\"z-index: 0\"\n       [tetaContextMenu]=\"contextMenu\"\n       [verticalAlign]=\"verticalAlign.auto\"\n       [align]=\"align.auto\"\n       [appendToBody]=\"true\"\n       [data]=\"contextMenuRow\"\n       [open]=\"contextMenuOpen\"\n       (openChange)=\"setContextMenuOpen($event)\">\n    <teta-table-body\n      (contextmenu)=\"setContextMenuRow($event)\"\n      (scroll)=\"onScroll($event)\"\n      [aggregate]=\"aggregate\"\n      [virtual]=\"virtual\"\n      [activeRow]=\"activeRow\"\n      [trackRow]=\"trackRow\"\n      [trackColumns]=\"trackColumns\"\n      [selectedRows]=\"selectedRowsList\"\n      [additionalComponent]=\"detailComponent\"\n      [selectType]=\"selectType\"\n      [rowClass]=\"rowClass\">\n      <ng-content></ng-content>\n    </teta-table-body>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ElementRef }]; }, propDecorators: { data: [{
                 type: Input
             }], columns: [{