@tetacom/ng-components 1.0.68 → 1.0.71

package/fesm2020/tetacom-ng-components.mjs

@@ -8584,10 +8584,11 @@ class TreeItemComponent {
         this.treeItemClass = true;
         this.itemIsOpen = false;
         this._alive = true;
+        this.treeItemInstance = true;
     }
     get computedDepth() {
         return (this.depth +
-            (this.item[this.childNodeName]?.length > 0 ? 0 : this.noChildMode ? 1 : 2));
+            (this.item[this.childNodeName]?.length > 0 ? 0 : this.childPadding ? 2 : 1));
     }
     openItem() {
         this.service.openItem(this.item);
@@ -8602,32 +8603,33 @@ class TreeItemComponent {
             this._cdr.markForCheck();
         });
     }
-    ngOnChanges(changes) { }
+    ngOnChanges(changes) {
+    }
     ngOnDestroy() {
         this._alive = false;
     }
 }
 TreeItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TreeItemComponent, deps: [{ token: TreeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TreeItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TreeItemComponent, selector: "teta-tree-item", inputs: { item: "item", depth: "depth", padding: "padding", childNodeName: "childNodeName", template: "template", noChildMode: "noChildMode" }, host: { properties: { "class.tree__item-container": "this.treeItemClass" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tree__item_content\" [ngClass]=\"'tree__item_content-' + computedDepth\" (click)=\"openItem()\">\n  <ng-container\n    *ngTemplateOutlet=\"template; context: {$implicit: item, item: item, open: itemIsOpen, service: service, depth: depth}\"></ng-container>\n</div>\n<div [@children] class=\"tree__children\" *ngIf=\"itemIsOpen && item[childNodeName]?.length > 0\">\n  <teta-tree-item *ngFor=\"let child of item[childNodeName];\"\n                  [item]=\"child\"\n                  [template]=\"template\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [depth]=\"depth + 1\"></teta-tree-item>\n</div>\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: TreeItemComponent, selector: "teta-tree-item", inputs: ["item", "depth", "padding", "childNodeName", "template", "noChildMode"] }], animations: [
-        trigger('children', [
+TreeItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TreeItemComponent, selector: "teta-tree-item", inputs: { item: "item", depth: "depth", padding: "padding", childNodeName: "childNodeName", template: "template", childPadding: "childPadding" }, host: { properties: { "class.tree__item-container": "this.treeItemClass", "@treeItemInstance": "this.treeItemInstance" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tree__item_content\" [ngClass]=\"'tree__item_content-' + computedDepth\" (click)=\"openItem()\">\n  <ng-container\n    *ngTemplateOutlet=\"template; context: {$implicit: item, item: item, open: itemIsOpen, service: service, depth: depth}\"></ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+        trigger('treeItemInstance', [
             transition('void => *', [
                 style({ opacity: '0' }),
                 animate(200, style({ opacity: '1' })),
             ]),
-            transition('* => void', [animate(200, style({ opacity: '0' }))]),
+            // transition('* => void', [animate(200, style({opacity: '0'}))]),
         ]),
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TreeItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-tree-item', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
-                        trigger('children', [
+                        trigger('treeItemInstance', [
                             transition('void => *', [
                                 style({ opacity: '0' }),
                                 animate(200, style({ opacity: '1' })),
                             ]),
-                            transition('* => void', [animate(200, style({ opacity: '0' }))]),
+                            // transition('* => void', [animate(200, style({opacity: '0'}))]),
                         ]),
-                    ], template: "<div class=\"tree__item_content\" [ngClass]=\"'tree__item_content-' + computedDepth\" (click)=\"openItem()\">\n  <ng-container\n    *ngTemplateOutlet=\"template; context: {$implicit: item, item: item, open: itemIsOpen, service: service, depth: depth}\"></ng-container>\n</div>\n<div [@children] class=\"tree__children\" *ngIf=\"itemIsOpen && item[childNodeName]?.length > 0\">\n  <teta-tree-item *ngFor=\"let child of item[childNodeName];\"\n                  [item]=\"child\"\n                  [template]=\"template\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [depth]=\"depth + 1\"></teta-tree-item>\n</div>\n" }]
+                    ], template: "<div class=\"tree__item_content\" [ngClass]=\"'tree__item_content-' + computedDepth\" (click)=\"openItem()\">\n  <ng-container\n    *ngTemplateOutlet=\"template; context: {$implicit: item, item: item, open: itemIsOpen, service: service, depth: depth}\"></ng-container>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: TreeService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { item: [{
                 type: Input
             }], depth: [{
@@ -8638,69 +8640,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 type: Input
             }], template: [{
                 type: Input
-            }], noChildMode: [{
+            }], childPadding: [{
                 type: Input
             }], treeItemClass: [{
                 type: HostBinding,
                 args: ['class.tree__item-container']
+            }], treeItemInstance: [{
+                type: HostBinding,
+                args: ['@treeItemInstance']
             }] } });
 
 class TreeComponent {
     constructor(_service, _cdr) {
         this._service = _service;
         this._cdr = _cdr;
-        this.service = new EventEmitter();
         this.padding = 8;
         this.childNodeName = 'children';
+        this.height = 28;
+        this.service = new EventEmitter();
         this.openItemsChange = new EventEmitter();
         this._alive = true;
+        this.treeClass = true;
+        this.trackRow = (index, item) => {
+            if (this.compareItems) {
+                return this.compareItems(item);
+            }
+            return index;
+        };
         this._service.openItems
             .pipe(takeWhile((_) => this._alive), filter((_) => this._openItems !== _))
-            .subscribe((_) => this.openItemsChange.emit(_));
+            .subscribe((_) => {
+            this._openItems = _;
+            this.openItemsChange.emit(_);
+        });
+    }
+    set data(data) {
+        this._data = data;
+    }
+    get data() {
+        return this._data;
     }
     set openItems(items) {
         this._openItems = items;
         this._service.setOpenItems(items);
     }
-    get noChildMode() {
-        const hasChildren = this.data.find((_) => _[this.childNodeName]?.length > 0);
-        return !hasChildren;
-    }
     set compareItems(func) {
         this._service.compareItems = func;
     }
-    get getClass() {
-        const result = [this.class, 'tree'];
-        return result.join(' ');
+    get compareItems() {
+        return this._service.compareItems;
     }
     ngOnInit() {
         this.service.emit(this._service);
     }
-    ngAfterContentInit() { }
     ngOnChanges(changes) {
+        this.displayData = this.getDisplayData(this._data, 0);
+        this.childPadding = this.hasChildren(this._data);
         this._cdr.detectChanges();
     }
     ngOnDestroy() {
         this._alive = false;
     }
+    hasChildren(data) {
+        return data.some((_) => _[this.childNodeName]?.length > 0);
+    }
+    getDisplayData(data, level) {
+        const result = [];
+        data?.forEach((item) => {
+            item['level'] = level;
+            result.push(item);
+            if (item[this.childNodeName]?.length > 0
+                && this._openItems?.find((openItem) => this.compareItems(openItem) === this.compareItems(item))) {
+                result.push(...this.getDisplayData(item[this.childNodeName], level + 1));
+            }
+        });
+        return result;
+    }
 }
 TreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TreeComponent, deps: [{ token: TreeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: TreeComponent, selector: "teta-tree", inputs: { data: "data", class: "class", padding: "padding", childNodeName: "childNodeName", openItems: "openItems", compareItems: "compareItems" }, outputs: { service: "service", openItemsChange: "openItemsChange" }, host: { properties: { "class": "this.getClass" } }, providers: [TreeService], queries: [{ propertyName: "template", first: true, predicate: TetaTemplateDirective, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngFor=\"let item of data\">\n  <teta-tree-item [item]=\"item\"\n                  [depth]=\"0\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [noChildMode]=\"noChildMode\"\n                  [template]=\"template?.template\"></teta-tree-item>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TreeItemComponent, selector: "teta-tree-item", inputs: ["item", "depth", "padding", "childNodeName", "template", "noChildMode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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 }], 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\"\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: i5.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i5.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i5.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: "<ng-container *ngFor=\"let item of data\">\n  <teta-tree-item [item]=\"item\"\n                  [depth]=\"0\"\n                  [padding]=\"padding\"\n                  [childNodeName]=\"childNodeName\"\n                  [noChildMode]=\"noChildMode\"\n                  [template]=\"template?.template\"></teta-tree-item>\n</ng-container>\n" }]
+            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\"\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 }]; }, propDecorators: { data: [{
                 type: Input
-            }], service: [{
-                type: Output
-            }], class: [{
-                type: Input
             }], padding: [{
                 type: Input
             }], childNodeName: [{
                 type: Input
+            }], virtual: [{
+                type: Input
+            }], height: [{
+                type: Input
             }], openItems: [{
                 type: Input
+            }], service: [{
+                type: Output
             }], openItemsChange: [{
                 type: Output
             }], template: [{
@@ -8708,9 +8743,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
                 args: [TetaTemplateDirective, { static: true }]
             }], compareItems: [{
                 type: Input
-            }], getClass: [{
+            }], treeClass: [{
                 type: HostBinding,
-                args: ['class']
+                args: ['class.tree']
             }] } });
 
 class TreeItemToggleComponent {
@@ -8845,7 +8880,7 @@ class VisibilityDropdownTabComponent {
     }
 }
 VisibilityDropdownTabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: VisibilityDropdownTabComponent, deps: [{ token: TableService }, { token: TetaConfigService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-VisibilityDropdownTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: VisibilityDropdownTabComponent, selector: "teta-visibility-dropdown-tab", inputs: { columns: "columns", column: "column", state: "state", data: "data", close: "close" }, ngImport: i0, template: "<ng-container *ngIf=\"locale | async as loc\">\n  <div class=\"list-item padding-left-6 padding-top-2\" [class.padding-left-9]=\"childMode\">\n    <teta-checkbox [binary]=\"true\"\n                   [allowNull]=\"true\"\n                   [ngModel]=\"allColumnsVisible()\"\n                   (ngModelChange)=\"setAllColumns($event)\">\n      {{loc.all}}\n    </teta-checkbox>\n  </div>\n  <div class=\"list-divider\"></div>\n  <div class=\"padding-v-2 column column_auto scrollable\">\n    <teta-tree [data]=\"columns\"\n               [openItems]=\"openItems\"\n               (openItemsChange)=\"openItems = $event\"\n               [childNodeName]=\"'columns'\"\n               [compareItems]=\"compareItems\">\n      <ng-template tetaTemplate let-item>\n        <div class=\"tree__item\">\n          <teta-tree-item-toggle [item]=\"item\" *ngIf=\"item.columns?.length > 0\"></teta-tree-item-toggle>\n          <teta-checkbox\n            [ngModel]=\"!columnIsHidden(item)\"\n            (ngModelChange)=\"setColumnVisibility(item, $event)\"\n            (click)=\"$event.stopPropagation()\"\n            [binary]=\"true\"\n          >\n            {{item.caption}}\n          </teta-checkbox>\n        </div>\n      </ng-template>\n    </teta-tree>\n  </div>\n  <teta-toolbar class=\"justify-content-end\">\n    <button teta-button\n            [disabled]=\"allColumnsVisible() === false\"\n            [palette]=\"'primary'\"\n            (click)=\"setColumnsVisibility()\">\n      {{loc.apply}}\n    </button>\n  </teta-toolbar>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "allowNull"] }, { kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { kind: "component", type: TreeComponent, selector: "teta-tree", inputs: ["data", "class", "padding", "childNodeName", "openItems", "compareItems"], outputs: ["service", "openItemsChange"] }, { kind: "directive", type: TetaTemplateDirective, selector: "[tetaTemplate]", inputs: ["tetaTemplate"] }, { kind: "component", type: TreeItemToggleComponent, selector: "teta-tree-item-toggle", inputs: ["item"] }, { kind: "component", type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+VisibilityDropdownTabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: VisibilityDropdownTabComponent, selector: "teta-visibility-dropdown-tab", inputs: { columns: "columns", column: "column", state: "state", data: "data", close: "close" }, ngImport: i0, template: "<ng-container *ngIf=\"locale | async as loc\">\n  <div class=\"list-item padding-left-6 padding-top-2\" [class.padding-left-9]=\"childMode\">\n    <teta-checkbox [binary]=\"true\"\n                   [allowNull]=\"true\"\n                   [ngModel]=\"allColumnsVisible()\"\n                   (ngModelChange)=\"setAllColumns($event)\">\n      {{loc.all}}\n    </teta-checkbox>\n  </div>\n  <div class=\"list-divider\"></div>\n  <div class=\"padding-v-2 column column_auto scrollable\">\n    <teta-tree [data]=\"columns\"\n               [openItems]=\"openItems\"\n               (openItemsChange)=\"openItems = $event\"\n               [childNodeName]=\"'columns'\"\n               [compareItems]=\"compareItems\">\n      <ng-template tetaTemplate let-item>\n        <div class=\"tree__item\">\n          <teta-tree-item-toggle [item]=\"item\" *ngIf=\"item.columns?.length > 0\"></teta-tree-item-toggle>\n          <teta-checkbox\n            [ngModel]=\"!columnIsHidden(item)\"\n            (ngModelChange)=\"setColumnVisibility(item, $event)\"\n            (click)=\"$event.stopPropagation()\"\n            [binary]=\"true\"\n          >\n            {{item.caption}}\n          </teta-checkbox>\n        </div>\n      </ng-template>\n    </teta-tree>\n  </div>\n  <teta-toolbar class=\"justify-content-end\">\n    <button teta-button\n            [disabled]=\"allColumnsVisible() === false\"\n            [palette]=\"'primary'\"\n            (click)=\"setColumnsVisibility()\">\n      {{loc.apply}}\n    </button>\n  </teta-toolbar>\n</ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "allowNull"] }, { kind: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square"] }, { kind: "component", type: TreeComponent, selector: "teta-tree", inputs: ["data", "padding", "childNodeName", "virtual", "height", "openItems", "compareItems"], outputs: ["service", "openItemsChange"] }, { kind: "directive", type: TetaTemplateDirective, selector: "[tetaTemplate]", inputs: ["tetaTemplate"] }, { kind: "component", type: TreeItemToggleComponent, selector: "teta-tree-item-toggle", inputs: ["item"] }, { kind: "component", type: ToolbarComponent, selector: "teta-toolbar", inputs: ["palette", "class"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: VisibilityDropdownTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'teta-visibility-dropdown-tab', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"locale | async as loc\">\n  <div class=\"list-item padding-left-6 padding-top-2\" [class.padding-left-9]=\"childMode\">\n    <teta-checkbox [binary]=\"true\"\n                   [allowNull]=\"true\"\n                   [ngModel]=\"allColumnsVisible()\"\n                   (ngModelChange)=\"setAllColumns($event)\">\n      {{loc.all}}\n    </teta-checkbox>\n  </div>\n  <div class=\"list-divider\"></div>\n  <div class=\"padding-v-2 column column_auto scrollable\">\n    <teta-tree [data]=\"columns\"\n               [openItems]=\"openItems\"\n               (openItemsChange)=\"openItems = $event\"\n               [childNodeName]=\"'columns'\"\n               [compareItems]=\"compareItems\">\n      <ng-template tetaTemplate let-item>\n        <div class=\"tree__item\">\n          <teta-tree-item-toggle [item]=\"item\" *ngIf=\"item.columns?.length > 0\"></teta-tree-item-toggle>\n          <teta-checkbox\n            [ngModel]=\"!columnIsHidden(item)\"\n            (ngModelChange)=\"setColumnVisibility(item, $event)\"\n            (click)=\"$event.stopPropagation()\"\n            [binary]=\"true\"\n          >\n            {{item.caption}}\n          </teta-checkbox>\n        </div>\n      </ng-template>\n    </teta-tree>\n  </div>\n  <teta-toolbar class=\"justify-content-end\">\n    <button teta-button\n            [disabled]=\"allColumnsVisible() === false\"\n            [palette]=\"'primary'\"\n            (click)=\"setColumnsVisibility()\">\n      {{loc.apply}}\n    </button>\n  </teta-toolbar>\n</ng-container>\n" }]
@@ -9444,6 +9479,7 @@ class StringCellComponent extends CellComponentBase {
         super(svc, cdr);
         this.svc = svc;
         this.cdr = cdr;
+        this.align = Align;
     }
     setValue() {
         this.valueChanged();
@@ -9471,10 +9507,10 @@ class StringCellComponent extends CellComponentBase {
     }
 }
 StringCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: StringCellComponent, deps: [{ token: TableService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-StringCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: StringCellComponent, selector: "teta-string-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [tetaHint]=\"row[column.name]\"\n      [appendToBody]=\"true\"\n      [overflownOnly]=\"true\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row[column.name]}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row[column.name]\"\n       (ngModelChange)=\"row[column.name]=$event\"/>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: HintDirective, selector: "[tetaHint]", inputs: ["tetaHint", "align", "verticalAlign", "delay", "overflownOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+StringCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.2", type: StringCellComponent, selector: "teta-string-cell", inputs: { column: "column", row: "row" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [tetaHint]=\"row[column.name]\"\n      [align]=\"align.auto\"\n      [appendToBody]=\"true\"\n      [overflownOnly]=\"true\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row[column.name]}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row[column.name]\"\n       (ngModelChange)=\"row[column.name]=$event\"/>\n\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: HintDirective, selector: "[tetaHint]", inputs: ["tetaHint", "align", "verticalAlign", "delay", "overflownOnly"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: StringCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-string-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [tetaHint]=\"row[column.name]\"\n      [appendToBody]=\"true\"\n      [overflownOnly]=\"true\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row[column.name]}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row[column.name]\"\n       (ngModelChange)=\"row[column.name]=$event\"/>\n\n" }]
+            args: [{ selector: 'teta-string-cell', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [style.display]=\"edit ? 'none' : 'block'\"\n      class=\"cell-text\"\n      [tetaHint]=\"row[column.name]\"\n      [align]=\"align.auto\"\n      [appendToBody]=\"true\"\n      [overflownOnly]=\"true\"\n      [class.cell-text_disabled]=\"!editable\">\n  {{row[column.name]}}\n</span>\n<input #input\n       *ngIf=\"edit\"\n       type=\"text\"\n       class=\"input row_auto border-radius-0\"\n       (blur)=\"setValue()\"\n       [ngModel]=\"row[column.name]\"\n       (ngModelChange)=\"row[column.name]=$event\"/>\n\n" }]
         }], ctorParameters: function () { return [{ type: TableService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { column: [{
                 type: Input
             }], row: [{
@@ -10317,14 +10353,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImpor
 class TreeModule {
 }
 TreeModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: TreeModule, declarations: [TreeComponent, TreeItemComponent, TreeItemToggleComponent], imports: [CommonModule, IconModule, TetaTemplateModule], exports: [TreeComponent, TetaTemplateModule, TreeItemToggleComponent] });
-TreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TreeModule, imports: [CommonModule, IconModule, TetaTemplateModule, TetaTemplateModule] });
+TreeModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.2", ngImport: i0, type: TreeModule, declarations: [TreeComponent, TreeItemComponent, TreeItemToggleComponent], imports: [CommonModule, IconModule, TetaTemplateModule, ScrollingModule], exports: [TreeComponent, TetaTemplateModule, TreeItemToggleComponent] });
+TreeModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TreeModule, imports: [CommonModule, IconModule, TetaTemplateModule, ScrollingModule, TetaTemplateModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.2", ngImport: i0, type: TreeModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [TreeComponent, TreeItemComponent, TreeItemToggleComponent],
                     exports: [TreeComponent, TetaTemplateModule, TreeItemToggleComponent],
-                    imports: [CommonModule, IconModule, TetaTemplateModule],
+                    imports: [CommonModule, IconModule, TetaTemplateModule, ScrollingModule],
                 }]
         }] });