@tetacom/ng-components 1.5.2 → 1.5.4

package/component/tree/tree/tree.component.d.ts

@@ -1,44 +1,38 @@
-import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { EventEmitter, OnChanges, OnDestroy, OnInit, AfterViewInit } from '@angular/core';
 import { ITreeData } from '../../../common/contract/i-tree-data';
 import { TreeService } from '../tree.service';
 import { TetaTemplateDirective } from '../../../directive/teta-template/teta-template.directive';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import * as i0 from "@angular/core";
-export declare class TreeComponent implements OnInit, OnChanges, OnDestroy {
-    private _service;
-    private _elementRef;
-    private _cdr;
-    private _zone;
-    set data(data: ITreeData[]);
-    get data(): ITreeData[];
-    padding: number;
-    childNodeName: string;
-    virtual: boolean;
-    height: number;
-    set openItems(items: ITreeData[]);
+export declare class TreeComponent implements OnInit, OnChanges, OnDestroy, AfterViewInit {
+    private treeService;
+    private elementRef;
+    private ngZone;
+    data: import("@angular/core").InputSignal<ITreeData[]>;
+    padding: import("@angular/core").InputSignal<number>;
+    childNodeName: import("@angular/core").InputSignal<string>;
+    virtual: import("@angular/core").InputSignal<boolean>;
+    height: import("@angular/core").InputSignal<number>;
+    openItems: import("@angular/core").ModelSignal<ITreeData[]>;
     service: EventEmitter<TreeService>;
-    openItemsChange: EventEmitter<any>;
     viewport: CdkVirtualScrollViewport;
     template: TetaTemplateDirective;
-    childPadding: boolean;
-    displayData: ITreeData[];
-    private _data;
-    private _openItems;
+    childPadding: import("@angular/core").Signal<boolean>;
+    displayData: import("@angular/core").Signal<ITreeData[]>;
     private _alive;
     private _obs;
-    constructor(_service: TreeService, _elementRef: ElementRef, _cdr: ChangeDetectorRef, _zone: NgZone);
+    constructor();
     set compareItems(func: (item: ITreeData) => any);
     get compareItems(): (item: ITreeData) => any;
     private readonly treeClass;
     ngOnInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
+    ngOnChanges(): void;
     ngOnDestroy(): void;
     ngAfterViewInit(): void;
     trackRow: (index: number, item: ITreeData) => any;
-    private hasChildren;
     private getDisplayData;
     private addResizeObserver;
     private removeResizeObserver;
     static ɵfac: i0.ɵɵFactoryDeclaration<TreeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TreeComponent, "teta-tree", never, { "data": { "alias": "data"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "childNodeName": { "alias": "childNodeName"; "required": false; }; "virtual": { "alias": "virtual"; "required": false; }; "height": { "alias": "height"; "required": false; }; "openItems": { "alias": "openItems"; "required": false; }; "compareItems": { "alias": "compareItems"; "required": false; }; }, { "service": "service"; "openItemsChange": "openItemsChange"; }, ["template"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TreeComponent, "teta-tree", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "childNodeName": { "alias": "childNodeName"; "required": false; "isSignal": true; }; "virtual": { "alias": "virtual"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "openItems": { "alias": "openItems"; "required": false; "isSignal": true; }; "compareItems": { "alias": "compareItems"; "required": false; }; }, { "openItems": "openItemsChange"; "service": "service"; }, ["template"], never, true, never>;
 }

package/component/tree/tree-item/tree-item.component.d.ts

@@ -1,29 +1,25 @@
-import { ChangeDetectorRef, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef } from '@angular/core';
+import { Signal, TemplateRef } from '@angular/core';
 import { ITreeData } from '../../../common/contract/i-tree-data';
 import { TreeService } from '../tree.service';
 import * as i0 from "@angular/core";
 /**
  * TODO: Lazy загрузка дочерних элементов, Output onExpand, шаблон для иконки expand
  */
-export declare class TreeItemComponent implements OnInit, OnChanges, OnDestroy {
-    service: TreeService;
-    private _cdr;
-    item: ITreeData;
-    depth: number;
-    padding: number;
-    childNodeName: string;
-    template: TemplateRef<any>;
-    childPadding: boolean;
+export declare class TreeItemComponent {
+    treeService: TreeService;
+    item: import("@angular/core").InputSignal<ITreeData>;
+    depth: import("@angular/core").InputSignal<number>;
+    padding: import("@angular/core").InputSignal<number>;
+    childNodeName: import("@angular/core").InputSignal<string>;
+    template: import("@angular/core").InputSignal<TemplateRef<any>>;
+    childPadding: import("@angular/core").InputSignal<boolean>;
+    openItems: Signal<ITreeData[]>;
     private readonly treeItemClass;
-    itemIsOpen: boolean;
-    private _alive;
+    itemIsOpen: Signal<boolean>;
     private readonly treeItemInstance;
-    get computedDepth(): number;
-    constructor(service: TreeService, _cdr: ChangeDetectorRef);
+    computedDepth: Signal<number>;
+    constructor();
     openItem(): void;
-    ngOnInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
-    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TreeItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TreeItemComponent, "teta-tree-item", never, { "item": { "alias": "item"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; "padding": { "alias": "padding"; "required": false; }; "childNodeName": { "alias": "childNodeName"; "required": false; }; "template": { "alias": "template"; "required": false; }; "childPadding": { "alias": "childPadding"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TreeItemComponent, "teta-tree-item", never, { "item": { "alias": "item"; "required": false; "isSignal": true; }; "depth": { "alias": "depth"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "childNodeName": { "alias": "childNodeName"; "required": false; "isSignal": true; }; "template": { "alias": "template"; "required": false; "isSignal": true; }; "childPadding": { "alias": "childPadding"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/component/tree/tree-item-toggle/tree-item-toggle.component.d.ts

@@ -1,15 +1,13 @@
-import { ChangeDetectorRef, OnInit } from '@angular/core';
+import { Signal } from '@angular/core';
 import { TreeService } from '../tree.service';
 import { ITreeData } from '../../../common/contract/i-tree-data';
-import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
-export declare class TreeItemToggleComponent implements OnInit {
-    service: TreeService;
-    private _cdr;
-    item: ITreeData;
-    open: Observable<boolean>;
-    constructor(service: TreeService, _cdr: ChangeDetectorRef);
-    ngOnInit(): void;
+export declare class TreeItemToggleComponent {
+    treeService: TreeService;
+    item: import("@angular/core").InputSignal<ITreeData>;
+    open: Signal<boolean>;
+    openItems: Signal<ITreeData[]>;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<TreeItemToggleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TreeItemToggleComponent, "teta-tree-item-toggle", never, { "item": { "alias": "item"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TreeItemToggleComponent, "teta-tree-item-toggle", never, { "item": { "alias": "item"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/fesm2022/tetacom-ng-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, HostBinding, Directive, Optional, Inject, ContentChild, Input, Injectable, Host, HostListener, ViewChild, forwardRef, ElementRef, EventEmitter, Output, TemplateRef, Injector, ViewContainerRef, Pipe, ViewEncapsulation, ChangeDetectorRef, inject, NgModule, input, computed, output, contentChildren, effect, ContentChildren, SkipSelf, PLATFORM_ID, InjectionToken } from '@angular/core';
+import { Component, ChangeDetectionStrategy, HostBinding, Directive, Optional, Inject, ContentChild, Input, Injectable, Host, HostListener, ViewChild, forwardRef, ElementRef, EventEmitter, Output, TemplateRef, Injector, ViewContainerRef, Pipe, ViewEncapsulation, ChangeDetectorRef, inject, NgModule, input, computed, output, contentChildren, effect, NgZone, model, ContentChildren, SkipSelf, PLATFORM_ID, InjectionToken } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { NgTemplateOutlet, DOCUMENT, NgClass, AsyncPipe, DatePipe, CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i1 from '@angular/common/http';
@@ -20,6 +20,7 @@ import * as i1$2 from '@jsverse/transloco';
 import { TranslocoModule, TRANSLOCO_SCOPE, TranslocoService } from '@jsverse/transloco';
 import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf } from '@angular/cdk/scrolling';
 import objectHash from 'object-hash';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import isLeapYear from 'dayjs/plugin/isLeapYear';
 import utc from 'dayjs/plugin/utc';
@@ -7716,6 +7717,12 @@ class CellComponentBase {
             if (this.index === cellValue.row && this.column.name === cellValue.column) {
                 this.row.data[this.column.name] = cellValue.value;
                 this.setupControl();
+                for (const controlsKey in this.formGroup.controls) {
+                    this.formGroup.controls[controlsKey].updateValueAndValidity({
+                        emitEvent: false,
+                        onlySelf: true,
+                    });
+                }
                 this.formGroup.updateValueAndValidity();
                 this.row.valid = this.formGroup.valid;
                 this.cdr.detectChanges();
@@ -7763,7 +7770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             type: Component,
             args: [{
                     template: '',
-                    standalone: false
+                    standalone: false,
                 }]
         }], ctorParameters: () => [{ type: TableService }, { type: i0.ChangeDetectorRef }], propDecorators: { cellClass: [{
                 type: HostBinding,
@@ -8593,25 +8600,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
         }], ctorParameters: () => [] });
 
 class TreeItemToggleComponent {
-    constructor(service, _cdr) {
-        this.service = service;
-        this._cdr = _cdr;
-    }
-    ngOnInit() {
-        this.open = this.service.openItems.pipe(map((_) => {
-            const found = _?.find((x) => this.service.compareItems(x) === this.service.compareItems(this.item));
-            return found != null;
-        }));
+    constructor() {
+        this.treeService = inject(TreeService);
+        this.item = input();
+        this.openItems = toSignal(this.treeService.openItems);
+        this.open = computed(() => {
+            const found = this.openItems()?.find((x) => this.treeService.compareItems(x) === this.treeService.compareItems(this.item()));
+            return !!found;
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TreeItemToggleComponent, deps: [{ token: TreeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: TreeItemToggleComponent, isStandalone: true, selector: "teta-tree-item-toggle", inputs: { item: "item" }, ngImport: i0, template: "<teta-icon [name]=\"(open | async) ? 'arrowDownKey' : 'arrowRightKey'\" class=\"tree__icon\"></teta-icon>\n", styles: [":host{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TreeItemToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: TreeItemToggleComponent, isStandalone: true, selector: "teta-tree-item-toggle", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<teta-icon [name]=\"open() ? 'arrowDownKey' : 'arrowRightKey'\" class=\"tree__icon\"></teta-icon>\n", styles: [":host{display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "teta-icon", inputs: ["name", "size", "palette", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TreeItemToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'teta-tree-item-toggle', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent, AsyncPipe], template: "<teta-icon [name]=\"(open | async) ? 'arrowDownKey' : 'arrowRightKey'\" class=\"tree__icon\"></teta-icon>\n", styles: [":host{display:inline-flex;align-items:center}\n"] }]
-        }], ctorParameters: () => [{ type: TreeService }, { type: i0.ChangeDetectorRef }], propDecorators: { item: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'teta-tree-item-toggle', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], template: "<teta-icon [name]=\"open() ? 'arrowDownKey' : 'arrowRightKey'\" class=\"tree__icon\"></teta-icon>\n", styles: [":host{display:inline-flex;align-items:center}\n"] }]
+        }], ctorParameters: () => [] });
 
 class TetaTemplateDirective {
     constructor(template) {
@@ -8638,36 +8642,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
  * TODO: Lazy загрузка дочерних элементов, Output onExpand, шаблон для иконки expand
  */
 class TreeItemComponent {
-    get computedDepth() {
-        return this.depth + (this.item[this.childNodeName]?.length > 0 ? 0 : this.childPadding ? 2 : 1);
-    }
-    constructor(service, _cdr) {
-        this.service = service;
-        this._cdr = _cdr;
-        this.depth = 0;
-        this.padding = 16;
-        this.childNodeName = 'children';
+    constructor() {
+        this.treeService = inject(TreeService);
+        this.item = input();
+        this.depth = input(0);
+        this.padding = input(16);
+        this.childNodeName = input('children');
+        this.template = input();
+        this.childPadding = input();
         this.treeItemClass = true;
-        this.itemIsOpen = false;
-        this._alive = true;
         this.treeItemInstance = true;
-    }
-    openItem() {
-        this.service.openItem(this.item);
-    }
-    ngOnInit() {
-        this.service.openItems.pipe(takeWhile((_) => this._alive)).subscribe((_) => {
-            const found = _?.find((x) => this.service.compareItems(x) === this.service.compareItems(this.item));
-            this.itemIsOpen = found != null;
-            this._cdr.markForCheck();
+        this.computedDepth = computed(() => {
+            return this.depth() + (this.item()[this.childNodeName()]?.length > 0 ? 0 : this.childPadding() ? 2 : 1);
+        });
+        this.openItems = toSignal(this.treeService.openItems);
+        this.itemIsOpen = computed(() => {
+            const found = this.openItems()?.find((x) => this.treeService.compareItems(x) === this.treeService.compareItems(this.item()));
+            return !!found;
         });
     }
-    ngOnChanges(changes) { }
-    ngOnDestroy() {
-        this._alive = false;
+    openItem() {
+        this.treeService.openItem(this.item());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TreeItemComponent, deps: [{ token: TreeService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: TreeItemComponent, isStandalone: true, 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=\"\n      template;\n      context: { $implicit: item, item: item, open: itemIsOpen, service: service, depth: depth }\n    \"\n  ></ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TreeItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.5", type: TreeItemComponent, isStandalone: true, selector: "teta-tree-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, depth: { classPropertyName: "depth", publicName: "depth", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, childNodeName: { classPropertyName: "childNodeName", publicName: "childNodeName", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, childPadding: { classPropertyName: "childPadding", publicName: "childPadding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.tree__item-container": "this.treeItemClass", "@treeItemInstance": "this.treeItemInstance" } }, ngImport: i0, template: "<div class=\"tree__item_content\" [ngClass]=\"'tree__item_content-' + computedDepth()\" (click)=\"openItem()\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      template();\n      context: { $implicit: item(), item: item(), open: itemIsOpen(), service: treeService, depth: depth() }\n    \"\n  ></ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: 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'}))]),
@@ -8681,20 +8679,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                             transition('void => *', [style({ opacity: '0' }), animate(200, style({ opacity: '1' }))]),
                             // transition('* => void', [animate(200, style({opacity: '0'}))]),
                         ]),
-                    ], imports: [NgClass, NgTemplateOutlet], template: "<div class=\"tree__item_content\" [ngClass]=\"'tree__item_content-' + computedDepth\" (click)=\"openItem()\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      template;\n      context: { $implicit: item, item: item, open: itemIsOpen, service: service, depth: depth }\n    \"\n  ></ng-container>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: TreeService }, { type: i0.ChangeDetectorRef }], propDecorators: { item: [{
-                type: Input
-            }], depth: [{
-                type: Input
-            }], padding: [{
-                type: Input
-            }], childNodeName: [{
-                type: Input
-            }], template: [{
-                type: Input
-            }], childPadding: [{
-                type: Input
-            }], treeItemClass: [{
+                    ], imports: [NgClass, NgTemplateOutlet], template: "<div class=\"tree__item_content\" [ngClass]=\"'tree__item_content-' + computedDepth()\" (click)=\"openItem()\">\n  <ng-container\n    *ngTemplateOutlet=\"\n      template();\n      context: { $implicit: item(), item: item(), open: itemIsOpen(), service: treeService, depth: depth() }\n    \"\n  ></ng-container>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { treeItemClass: [{
                 type: HostBinding,
                 args: ['class.tree__item-container']
             }], treeItemInstance: [{
@@ -8703,26 +8689,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }] } });
 
 class TreeComponent {
-    set data(data) {
-        this._data = data;
-    }
-    get data() {
-        return this._data;
-    }
-    set openItems(items) {
-        this._openItems = items;
-        this._service.setOpenItems(items);
-    }
-    constructor(_service, _elementRef, _cdr, _zone) {
-        this._service = _service;
-        this._elementRef = _elementRef;
-        this._cdr = _cdr;
-        this._zone = _zone;
-        this.padding = 8;
-        this.childNodeName = 'children';
-        this.height = 28;
+    constructor() {
+        this.treeService = inject(TreeService);
+        this.elementRef = inject(ElementRef);
+        this.ngZone = inject(NgZone);
+        this.data = input([]);
+        this.padding = input(8);
+        this.childNodeName = input('children');
+        this.virtual = input(false);
+        this.height = input(28);
+        this.openItems = model([]);
         this.service = new EventEmitter();
-        this.openItemsChange = new EventEmitter();
+        this.childPadding = computed(() => {
+            return this.data()?.some((_) => _[this.childNodeName()]?.length > 0);
+        });
+        this.displayData = computed(() => {
+            return this.getDisplayData(this.data(), 0);
+        });
         this._alive = true;
         this.treeClass = true;
         this.trackRow = (index, item) => {
@@ -8731,28 +8714,27 @@ class TreeComponent {
             }
             return index;
         };
-        this._service.openItems
-            .pipe(takeWhile((_) => this._alive), filter$1((_) => this._openItems !== _))
+        effect(() => {
+            this.treeService.setOpenItems(this.openItems());
+        });
+        this.treeService.openItems
+            .pipe(takeWhile((_) => this._alive), filter$1((_) => this.openItems() !== _))
             .subscribe((_) => {
-            this._openItems = _;
-            this.displayData = this.getDisplayData(this._data, 0);
-            this.openItemsChange.emit(_);
+            this.openItems.set(_);
             this.viewport?.checkViewportSize();
         });
     }
     set compareItems(func) {
-        this._service.compareItems = func;
+        this.treeService.compareItems = func;
     }
     get compareItems() {
-        return this._service.compareItems;
+        return this.treeService.compareItems;
     }
     ngOnInit() {
-        this.service.emit(this._service);
+        this.service.emit(this.treeService);
         this.addResizeObserver();
     }
-    ngOnChanges(changes) {
-        this.displayData = this.getDisplayData(this._data, 0);
-        this.childPadding = this.hasChildren(this._data);
+    ngOnChanges() {
         this.viewport?.checkViewportSize();
     }
     ngOnDestroy() {
@@ -8760,25 +8742,22 @@ class TreeComponent {
         this.removeResizeObserver();
     }
     ngAfterViewInit() {
-        this._service.scrollToIndex.pipe(takeWhile(() => this._alive)).subscribe((index) => {
-            this._zone.runOutsideAngular(() => {
+        this.treeService.scrollToIndex.pipe(takeWhile(() => this._alive)).subscribe((index) => {
+            this.ngZone.runOutsideAngular(() => {
                 setTimeout(() => {
                     this.viewport?.scrollToIndex(index, 'smooth');
                 });
             });
         });
     }
-    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));
+            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;
@@ -8787,14 +8766,14 @@ class TreeComponent {
         this._obs = new ResizeObserver((_) => {
             this.viewport?.checkViewportSize();
         });
-        this._obs.observe(this._elementRef.nativeElement);
+        this._obs.observe(this.elementRef.nativeElement);
     }
     removeResizeObserver() {
-        this._obs.unobserve(this._elementRef.nativeElement);
+        this._obs.unobserve(this.elementRef.nativeElement);
         this._obs.disconnect();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TreeComponent, deps: [{ token: TreeService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: TreeComponent, isStandalone: true, 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: "@if (virtual) {\n  <teta-scrollable class=\"column column_auto\">\n    <cdk-virtual-scroll-viewport tetaScrollable class=\"table-body-container\" [itemSize]=\"height\">\n      <teta-tree-item\n        *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\"\n      ></teta-tree-item>\n    </cdk-virtual-scroll-viewport>\n  </teta-scrollable>\n} @else {\n  <teta-scrollable class=\"column column_auto\" direction=\"column\">\n    @for (item of displayData; track trackRow($index, item)) {\n      <teta-tree-item\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\"\n      ></teta-tree-item>\n    }\n  </teta-scrollable>\n}\n", styles: [""], dependencies: [{ kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: ScrollableDirective, selector: "[tetaScrollable]" }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: TreeItemComponent, selector: "teta-tree-item", inputs: ["item", "depth", "padding", "childNodeName", "template", "childPadding"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: TreeComponent, isStandalone: true, selector: "teta-tree", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, childNodeName: { classPropertyName: "childNodeName", publicName: "childNodeName", isSignal: true, isRequired: false, transformFunction: null }, virtual: { classPropertyName: "virtual", publicName: "virtual", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, openItems: { classPropertyName: "openItems", publicName: "openItems", isSignal: true, isRequired: false, transformFunction: null }, compareItems: { classPropertyName: "compareItems", publicName: "compareItems", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { openItems: "openItemsChange", service: "service" }, 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: "@if (virtual()) {\n  <teta-scrollable class=\"column column_auto\">\n    <cdk-virtual-scroll-viewport tetaScrollable class=\"table-body-container\" [itemSize]=\"height()\">\n      <teta-tree-item\n        *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\"\n      ></teta-tree-item>\n    </cdk-virtual-scroll-viewport>\n  </teta-scrollable>\n} @else {\n  <teta-scrollable class=\"column column_auto\" direction=\"column\">\n    @for (item of displayData(); track trackRow($index, item)) {\n      <teta-tree-item\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\"\n      ></teta-tree-item>\n    }\n  </teta-scrollable>\n}\n", styles: [""], dependencies: [{ kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: ScrollableDirective, selector: "[tetaScrollable]" }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { 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: "19.0.5", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
@@ -8805,22 +8784,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         ScrollableDirective,
                         CdkVirtualForOf,
                         TreeItemComponent,
-                    ], template: "@if (virtual) {\n  <teta-scrollable class=\"column column_auto\">\n    <cdk-virtual-scroll-viewport tetaScrollable class=\"table-body-container\" [itemSize]=\"height\">\n      <teta-tree-item\n        *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\"\n      ></teta-tree-item>\n    </cdk-virtual-scroll-viewport>\n  </teta-scrollable>\n} @else {\n  <teta-scrollable class=\"column column_auto\" direction=\"column\">\n    @for (item of displayData; track trackRow($index, item)) {\n      <teta-tree-item\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\"\n      ></teta-tree-item>\n    }\n  </teta-scrollable>\n}\n" }]
-        }], ctorParameters: () => [{ type: TreeService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { data: [{
-                type: Input
-            }], padding: [{
-                type: Input
-            }], childNodeName: [{
-                type: Input
-            }], virtual: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], openItems: [{
-                type: Input
-            }], service: [{
-                type: Output
-            }], openItemsChange: [{
+                    ], template: "@if (virtual()) {\n  <teta-scrollable class=\"column column_auto\">\n    <cdk-virtual-scroll-viewport tetaScrollable class=\"table-body-container\" [itemSize]=\"height()\">\n      <teta-tree-item\n        *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\"\n      ></teta-tree-item>\n    </cdk-virtual-scroll-viewport>\n  </teta-scrollable>\n} @else {\n  <teta-scrollable class=\"column column_auto\" direction=\"column\">\n    @for (item of displayData(); track trackRow($index, item)) {\n      <teta-tree-item\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\"\n      ></teta-tree-item>\n    }\n  </teta-scrollable>\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { service: [{
                 type: Output
             }], viewport: [{
                 type: ViewChild,
@@ -8942,7 +8907,7 @@ class VisibilityDropdownTabComponent {
         this._alive = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: VisibilityDropdownTabComponent, deps: [{ token: TableService }, { token: TetaConfigService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: VisibilityDropdownTabComponent, isStandalone: true, selector: "teta-visibility-dropdown-tab", inputs: { columns: "columns", column: "column", state: "state", data: "data", close: "close" }, ngImport: i0, template: "@if (locale | async; as loc) {\n  <div class=\"list-item padding-left-6 padding-top-2\" [class.padding-left-9]=\"childMode\">\n    <teta-checkbox\n      [binary]=\"true\"\n      [allowNull]=\"true\"\n      [ngModel]=\"allColumnsVisible()\"\n      (ngModelChange)=\"setAllColumns($event)\"\n    >\n      {{ loc.all }}\n    </teta-checkbox>\n  </div>\n  <div class=\"list-divider\"></div>\n  <teta-scrollable class=\"padding-v-2 column column_auto\">\n    <teta-tree\n      [data]=\"columns\"\n      [openItems]=\"openItems\"\n      (openItemsChange)=\"openItems = $event\"\n      [childNodeName]=\"'columns'\"\n      [compareItems]=\"compareItems\"\n    >\n      <ng-template tetaTemplate let-item>\n        <div class=\"tree__item\" style=\"align-items: unset\">\n          @if (item.columns?.length > 0) {\n            <teta-tree-item-toggle [item]=\"item\"></teta-tree-item-toggle>\n          }\n          <teta-checkbox\n            style=\"flex-grow: 1\"\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  </teta-scrollable>\n  <teta-toolbar class=\"justify-content-end\">\n    <button\n      type=\"button\"\n      teta-button\n      [disabled]=\"allColumnsVisible() === false\"\n      [palette]=\"'primary'\"\n      (click)=\"setColumnsVisibility()\"\n    >\n      {{ loc.apply }}\n    </button>\n  </teta-toolbar>\n}\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-height:0}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "labelPosition", "allowNull"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { 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: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: VisibilityDropdownTabComponent, isStandalone: true, selector: "teta-visibility-dropdown-tab", inputs: { columns: "columns", column: "column", state: "state", data: "data", close: "close" }, ngImport: i0, template: "@if (locale | async; as loc) {\n  <div class=\"list-item padding-left-6 padding-top-2\" [class.padding-left-9]=\"childMode\">\n    <teta-checkbox\n      [binary]=\"true\"\n      [allowNull]=\"true\"\n      [ngModel]=\"allColumnsVisible()\"\n      (ngModelChange)=\"setAllColumns($event)\"\n    >\n      {{ loc.all }}\n    </teta-checkbox>\n  </div>\n  <div class=\"list-divider\"></div>\n  <teta-scrollable class=\"padding-v-2 column column_auto\">\n    <teta-tree\n      [data]=\"columns\"\n      [openItems]=\"openItems\"\n      (openItemsChange)=\"openItems = $event\"\n      [childNodeName]=\"'columns'\"\n      [compareItems]=\"compareItems\"\n    >\n      <ng-template tetaTemplate let-item>\n        <div class=\"tree__item\" style=\"align-items: unset\">\n          @if (item.columns?.length > 0) {\n            <teta-tree-item-toggle [item]=\"item\"></teta-tree-item-toggle>\n          }\n          <teta-checkbox\n            style=\"flex-grow: 1\"\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  </teta-scrollable>\n  <teta-toolbar class=\"justify-content-end\">\n    <button\n      type=\"button\"\n      teta-button\n      [disabled]=\"allColumnsVisible() === false\"\n      [palette]=\"'primary'\"\n      (click)=\"setColumnsVisibility()\"\n    >\n      {{ loc.apply }}\n    </button>\n  </teta-toolbar>\n}\n", styles: [":host{display:flex;flex-direction:column;flex-grow:1;min-height:0}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "teta-checkbox", inputs: ["class", "palette", "noLabel", "disabled", "value", "binary", "labelPosition", "allowNull"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ScrollableComponent, selector: "teta-scrollable", inputs: ["direction", "showScrollbars", "contentClass"], outputs: ["scroll"] }, { kind: "component", type: TreeComponent, selector: "teta-tree", inputs: ["data", "padding", "childNodeName", "virtual", "height", "openItems", "compareItems"], outputs: ["openItemsChange", "service"] }, { 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: "component", type: ButtonComponent, selector: "button[teta-button], teta-button", inputs: ["palette", "class", "view", "square", "viewType", "size"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: VisibilityDropdownTabComponent, decorators: [{
             type: Component,