ontimize-web-ngx 15.2.2 → 15.3.1

package/fesm2015/ontimize-web-ngx.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, EventEmitter, Directive, Host, Self, Optional, Input, HostListener, forwardRef, Output, Injectable, Injector, Component, ContentChildren, ChangeDetectorRef, Pipe, NgModule, ViewChild, ElementRef, ViewEncapsulation, ViewContainerRef, Inject, NgZone, HostBinding, ViewChildren, ChangeDetectionStrategy, inject, CUSTOM_ELEMENTS_SCHEMA, TemplateRef, SkipSelf, isDevMode, ContentChild, Renderer2, APP_INITIALIZER } from '@angular/core';
 import moment from 'moment';
-import { isObservable, from, of, Subscription, Subject, Observable, timer, combineLatest, BehaviorSubject, ReplaySubject, merge, fromEvent, map as map$1 } from 'rxjs';
+import { isObservable, from, of, Subscription, Subject, Observable, timer, combineLatest, BehaviorSubject, ReplaySubject, concatMap, delay, merge, fromEvent, map as map$1 } from 'rxjs';
 export { Observable, Subject } from 'rxjs';
 import * as i1$7 from '@angular/common/http';
 import { HttpClient, HttpHeaders, HttpRequest, HttpEventType, HttpErrorResponse, HttpClientModule } from '@angular/common/http';
@@ -731,6 +731,13 @@ class Util {
         const clonedArray = arr.map((x) => Object.assign({}, x));
         return clonedArray;
     }
+    static getLastActivateRoute(routeSnapshot) {
+        let child = routeSnapshot;
+        while (child.firstChild) {
+            child = child.firstChild;
+        }
+        return child;
+    }
 }
 Util.columnAggregates = ['sum', 'count', 'avg', 'min', 'max'];
 
@@ -1234,6 +1241,7 @@ const MAP = {
         'MESSAGES.ERROR_403_TEXT': 'You are not authorized to view this page.',
         'MESSAGES.ERROR_403_TEXT_BUTTON': 'Navigate back',
         'MESSAGES.AVOID_QUERY_WITHOUT_QUICKFILTER_COLUMNS': 'No column has been selected to perform the search.',
+        'MESSAGES.OPERATION_NOT_ALLOWED_READONLY': 'Operation is not allowed due to the table is read-only',
         'INPUT.COMBO.EMPTY': 'No results found',
         'INPUT.COMBO.MESSAGE_TRIGGER': ' (+{0} others)',
         'TABLE.FILTER_BY_COLUMN.CHECK_ALL': 'Select all',
@@ -1535,6 +1543,7 @@ const MAP = {
         'MESSAGES.ERROR_EXPORT_TABLE_DATA': 'Error al exportar los datos de la tabla.',
         'MESSAGES.SUCCESS_EXPORT_TABLE_DATA': 'Se han exportado los datos de la tabla correctamente.',
         'MESSAGES.OPERATION_NOT_ALLOWED_PERMISSION': 'Operación no permitida debido a restricciones de permisos.',
+        'MESSAGES.OPERATION_NOT_ALLOWED_READONLY': 'Operación no permitida debido a que la tabla es de solo lectura',
         'MESSAGES.NAVIGATION_NOT_ALLOWED_PERMISSION': 'Navegación no permitida debido a restricciones de permisos.',
         'MESSAGES.NAVIGATION_REDIRECTED_PERMISSION': 'Navegación redirigida debido a restricciones de permisos.',
         'MESSAGES.ERROR_403_TEXT': 'No está autorizado para ver esta página.',
@@ -1832,6 +1841,7 @@ const MAP = {
         'MESSAGES.ERROR_EXPORT_TABLE_DATA': 'Erro na exportação dos dados da tabela.',
         'MESSAGES.SUCCESS_EXPORT_TABLE_DATA': 'Os dados da tabela foram exportados corretamente.',
         'MESSAGES.OPERATION_NOT_ALLOWED_PERMISSION': 'Operação não permitida por falta de permissões.',
+        'MESSAGES.OPERATION_NOT_ALLOWED_READONLY': 'Operação não permitida porque a tabela é somente leitura',
         'MESSAGES.NAVIGATION_NOT_ALLOWED_PERMISSION': 'Navegação não permitida por falta de permissões.',
         'MESSAGES.NAVIGATION_REDIRECTED_PERMISSION': 'Navegção redirecionada por falta de permissões.',
         'MESSAGES.ERROR_403_TEXT': 'Não tem autorização para ver esta página.',
@@ -7135,6 +7145,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 type: Input
             }] } });
 
+class OFormLayoutManagerService {
+    constructor(injector) {
+        this.injector = injector;
+        this.registeredFormLayoutManagers = {};
+    }
+    registerFormLayoutManager(comp) {
+        this.registeredFormLayoutManagers[comp.getAttribute()] = comp;
+    }
+    removeFormLayoutManager(comp) {
+        delete this.registeredFormLayoutManagers[comp.getAttribute()];
+    }
+    get activeFormLayoutManager() {
+        return this._activeFormLayoutManager;
+    }
+    set activeFormLayoutManager(arg) {
+        this._activeFormLayoutManager = arg;
+    }
+    set context(value) {
+        this._context = value;
+    }
+    get context() {
+        return this._context;
+    }
+}
+OFormLayoutManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFormLayoutManagerService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+OFormLayoutManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFormLayoutManagerService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFormLayoutManagerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
+
 class OFormLayoutDialogComponent {
     constructor(dialogRef, injector, data) {
         this.dialogRef = dialogRef;
@@ -7165,7 +7208,9 @@ class OFormLayoutDialogComponent {
         }
     }
     updateNavigation(data) {
-        this.label = this.formLayoutManager.getLabelFromData(data);
+        const formLayoutManagerService = this.injector.get(OFormLayoutManagerService);
+        const context = formLayoutManagerService.context;
+        this.label = (context === null || context === void 0 ? void 0 : context.label) || this.formLayoutManager.getLabelFromData(data);
     }
     updateActiveData(data) {
         this.data = Object.assign(this.data, data);
@@ -12475,33 +12520,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                 }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
-class OFormLayoutManagerService {
-    constructor(injector) {
-        this.injector = injector;
-        this.registeredFormLayoutManagers = {};
-    }
-    registerFormLayoutManager(comp) {
-        this.registeredFormLayoutManagers[comp.getAttribute()] = comp;
-    }
-    removeFormLayoutManager(comp) {
-        delete this.registeredFormLayoutManagers[comp.getAttribute()];
-    }
-    get activeFormLayoutManager() {
-        return this._activeFormLayoutManager;
-    }
-    set activeFormLayoutManager(arg) {
-        this._activeFormLayoutManager = arg;
-    }
-}
-OFormLayoutManagerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFormLayoutManagerService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-OFormLayoutManagerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFormLayoutManagerService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OFormLayoutManagerService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
-
 class OModulesInfoService {
     constructor(injector, router) {
         this.injector = injector;
@@ -13123,8 +13141,9 @@ class OTableComponentStateService extends AbstractComponentStateService {
         };
     }
     getSortState() {
+        var _a;
         const sortColumns = [];
-        this.component.sort.getSortColumns().forEach(sortData => {
+        (_a = this.component.sort) === null || _a === void 0 ? void 0 : _a.getSortColumns().forEach(sortData => {
             sortColumns.push(sortData.id + Codes.COLUMNS_ALIAS_SEPARATOR + sortData.direction);
         });
         return {
@@ -15168,7 +15187,8 @@ class CanActivateFormLayoutChildGuard {
             }
             formLayoutManager.canAddDetailComponent().subscribe(res => {
                 if (res) {
-                    formLayoutManager.addDetailComponent(childRoute, state.url.substring(0, state.url.indexOf('?')));
+                    const context = this.oFormLayoutService.context;
+                    formLayoutManager.addDetailComponent(childRoute, state.url.substring(0, state.url.indexOf('?')), context);
                 }
             });
             return false;
@@ -15209,6 +15229,7 @@ class OFormLayoutTabGroupComponent {
         this.tabsModificationsCache = [];
         this.dialogService = injector.get(DialogService);
         this.router = this.injector.get(Router);
+        this.actRoute = this.injector.get(ActivatedRoute);
     }
     get state() {
         return this.formLayoutManager.state;
@@ -15404,7 +15425,9 @@ class OFormLayoutTabGroupComponent {
             index = this.data.findIndex((item) => Object.keys(keysValues).every(key => keysValues[key] == item.params[key]));
         }
         if (index >= 0) {
-            let label = this.formLayoutManager.getLabelFromData(data);
+            const oFormLayoutManagerService = this.injector.get(OFormLayoutManagerService);
+            const context = oFormLayoutManagerService.context;
+            let label = (context === null || context === void 0 ? void 0 : context.label) || this.formLayoutManager.getLabelFromData(data);
             this.tabGroup.selectedIndex = (index + 1);
             label = label.length ? label : this.formLayoutManager.getLabelFromUrlParams(this.data[index].params);
             this.data[index].label = label;
@@ -15443,39 +15466,21 @@ class OFormLayoutTabGroupComponent {
         this.state.tabsData = this.state.tabsData.filter(tabData => !tabData.insertionMode);
         if (this.state.tabsData.length >= 1 && (this.state.tabsData[0].url || '').length > 0) {
             this.showLoading.next(true);
-            const extras = {};
-            extras[Codes.QUERY_PARAMS] = this.state.tabsData[0].queryParams;
-            extras[Codes.QUERY_PARAMS][Codes.INSERTION_MODE] = `${this.state.tabsData[0].insertionMode}`;
-            if (this.formLayoutManager) {
-                this.formLayoutManager.setAsActiveFormLayoutManager();
-            }
-            this.router.navigate([this.state.tabsData[0].url], extras).then(() => {
-                if (this.data[0] && this.data[0].component && this.state.tabsData.length > 1) {
-                    setTimeout(() => {
-                        this.createTabsFromState();
-                    }, 0);
-                }
-                else {
-                    this.showLoading.next(false);
-                }
+            const zone = this.injector.get(NgZone);
+            from(this.state.tabsData).pipe(concatMap(tab => of(tab).pipe(delay(100)))).subscribe((tab) => {
+                const extras = {};
+                extras['relativeTo'] = this.actRoute;
+                extras[Codes.QUERY_PARAMS] = tab.queryParams;
+                extras[Codes.QUERY_PARAMS][Codes.INSERTION_MODE] = tab.insertionMode;
+                if (this.formLayoutManager) {
+                    this.formLayoutManager.setAsActiveFormLayoutManager();
+                }
+                zone.run(() => this.router.navigate([tab.url], extras)
+                    .then(() => this.showLoading.next(false))
+                    .catch(() => this.showLoading.next(true)));
             });
         }
     }
-    createTabsFromState() {
-        const tabComponent = this.data[0].component;
-        const stateTabsData = this.state.tabsData.slice(1);
-        if (stateTabsData.length > 0) {
-            stateTabsData.forEach((tabData) => {
-                setTimeout(() => {
-                    const newDetailData = this.createDetailComponent(tabComponent, tabData);
-                    this.data.push(newDetailData);
-                }, 0);
-            });
-        }
-        else {
-            this.showLoading.next(false);
-        }
-    }
     createDetailComponent(component, paramsObj) {
         const newDetailComp = {
             params: paramsObj.params,
@@ -15933,6 +15938,7 @@ class OFormLayoutManagerComponent {
             return;
         }
         this.oFormLayoutManagerService.activeFormLayoutManager = undefined;
+        this.oFormLayoutManagerService.context = void 0;
         const routeConfig = this.getParentActRouteRoute();
         if (Util.isDefined(routeConfig)) {
             for (let i = (routeConfig.canActivateChild || []).length - 1; i >= 0; i--) {
@@ -15953,7 +15959,8 @@ class OFormLayoutManagerComponent {
     isSplitPaneMode() {
         return this.mode === OFormLayoutManagerComponent.SPLIT_PANE_MODE;
     }
-    addDetailComponent(childRoute, url) {
+    addDetailComponent(childRoute, url, context) {
+        childRoute = Util.getLastActivateRoute(childRoute);
         const newDetailComp = {
             params: childRoute.params,
             queryParams: childRoute.queryParams,
@@ -15961,7 +15968,7 @@ class OFormLayoutManagerComponent {
             component: childRoute.routeConfig.component,
             url: url,
             id: Util.randomNumber().toString(),
-            label: '',
+            label: (context === null || context === void 0 ? void 0 : context.label) || '',
             innerFormsInfo: {},
             insertionMode: childRoute.queryParams[Codes.INSERTION_MODE] === 'true'
         };
@@ -16070,7 +16077,9 @@ class OFormLayoutManagerComponent {
             return !comp.oFormLayoutDialog;
         }
         const compRef = this.getLayoutModeComponent();
-        return Util.isDefined(compRef) && compRef.isMainComponent(comp);
+        return (Util.isDefined(compRef)
+            && (compRef.isMainComponent(comp)
+                || (Util.isDefined(comp.parentComponent)) && compRef.isMainComponent(comp.parentComponent)));
     }
     getRouteForComponent(comp) {
         const result = [];
@@ -16710,7 +16719,7 @@ class AbstractOServiceComponent extends AbstractOServiceBaseComponent {
     }
     get selection() {
         if (!Util.isDefined(this._selection)) {
-            this._selection = new SelectionModel(true, []);
+            this._selection = new SelectionModel(true, [], true, this.compareRow());
         }
         return this._selection;
     }
@@ -16857,7 +16866,10 @@ class AbstractOServiceComponent extends AbstractOServiceBaseComponent {
             this.navigateToDetail(route, qParams, relativeTo);
         }
     }
-    viewDetail(item) {
+    viewDetail(item, context) {
+        var _a;
+        const formLayoutManagerService = this.injector.get(OFormLayoutManagerService);
+        formLayoutManagerService.context = void 0;
         if (this.oFormLayoutDialog) {
             console.warn('Navigation is not available yet in a form layout manager with mode="dialog"');
             return;
@@ -16868,6 +16880,9 @@ class AbstractOServiceComponent extends AbstractOServiceBaseComponent {
             const qParams = Codes.getIsDetailObject();
             const relativeTo = this.recursiveDetail ? this.actRoute.parent : this.actRoute;
             const zone = this.injector.get(NgZone);
+            if (!((_a = this.formLayoutManager) === null || _a === void 0 ? void 0 : _a.isSplitPaneMode())) {
+                formLayoutManagerService.context = context;
+            }
             zone.run(() => this.navigateToDetail(route, qParams, relativeTo));
         }
     }
@@ -17388,6 +17403,9 @@ class AbstractOServiceComponent extends AbstractOServiceBaseComponent {
         }
         return sqlTypesArg;
     }
+    compareRow() {
+        return (o1, o2) => this.keysArray.every(key => o1[key] === o2[key]);
+    }
 }
 AbstractOServiceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AbstractOServiceComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: OFormComponent }], target: i0.ɵɵFactoryTarget.Directive });
 AbstractOServiceComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AbstractOServiceComponent, inputs: { oattr: ["attr", "oattr"], service: "service", serviceType: ["service-type", "serviceType"], entity: "entity", queryOnInit: ["query-on-init", "queryOnInit"], queryOnBind: ["query-on-bind", "queryOnBind"], queryOnEvent: ["query-on-event", "queryOnEvent"], pageable: "pageable", columns: "columns", keys: "keys", parentKeys: ["parent-keys", "parentKeys"], staticData: ["static-data", "staticData"], queryMethod: ["query-method", "queryMethod"], paginatedQueryMethod: ["paginated-query-method", "paginatedQueryMethod"], oQueryRows: ["query-rows", "oQueryRows"], insertMethod: ["insert-method", "insertMethod"], updateMethod: ["update-method", "updateMethod"], deleteMethod: ["delete-method", "deleteMethod"], storeState: ["store-state", "storeState"], queryWithNullParentKeys: ["query-with-null-parent-keys", "queryWithNullParentKeys"], queryFallbackFunction: ["query-fallback-function", "queryFallbackFunction"], _title: ["title", "_title"], ovisible: ["visible", "ovisible"], oenabled: ["enabled", "oenabled"], controls: "controls", detailMode: ["detail-mode", "detailMode"], detailFormRoute: ["detail-form-route", "detailFormRoute"], recursiveDetail: ["recursive-detail", "recursiveDetail"], detailButtonInRow: ["detail-button-in-row", "detailButtonInRow"], detailButtonInRowIcon: ["detail-button-in-row-icon", "detailButtonInRowIcon"], editFormRoute: ["edit-form-route", "editFormRoute"], recursiveEdit: ["recursive-edit", "recursiveEdit"], editButtonInRow: ["edit-button-in-row", "editButtonInRow"], editButtonInRowIcon: ["edit-button-in-row-icon", "editButtonInRowIcon"], insertButton: ["insert-button", "insertButton"], rowHeight: ["row-height", "rowHeight"], insertFormRoute: ["insert-form-route", "insertFormRoute"], recursiveInsert: ["recursive-insert", "recursiveInsert"], filterCaseSensitive: ["filter-case-sensitive", "filterCaseSensitive"], quickFilter: ["quick-filter", "quickFilter"], quickFilterPlaceholder: ["quick-filter-placeholder", "quickFilterPlaceholder"], paginationControls: ["pagination-controls", "paginationControls"], pageSizeOptions: ["page-size-options", "pageSizeOptions"], quickFilterAppearance: ["quick-filter-appearance", "quickFilterAppearance"], disablePageSizeCalculation: ["disable-page-size-calculation", "disablePageSizeCalculation"] }, outputs: { onClick: "onClick", onDoubleClick: "onDoubleClick", onDataLoaded: "onDataLoaded", onPaginatedDataLoaded: "onPaginatedDataLoaded", onSearch: "onSearch" }, viewQueries: [{ propertyName: "matpaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "searchInputComponent", first: true, predicate: i0.forwardRef(function () { return OSearchInputComponent; }), descendants: true }], usesInheritance: true, ngImport: i0 });
@@ -27388,6 +27406,9 @@ class OColumn {
         if (Util.isDefined(column.searchable)) {
             this.searchable = column.searchable;
         }
+        else {
+            this.searchable = (column === null || column === void 0 ? void 0 : column.type) !== 'date';
+        }
         if (Util.isDefined(column.groupable)) {
             this.groupable = column.groupable;
         }
@@ -29864,7 +29885,15 @@ class OTableButtonComponent {
     }
     innerOnClick(event) {
         event.stopPropagation();
-        this.onClick.emit();
+        if (!this.isReadOnly()) {
+            this.onClick.emit();
+        }
+        else if (this._table.showNotificationOfReadOnly) {
+            this.table.getSnackService().open('MESSAGES.OPERATION_NOT_ALLOWED_READONLY');
+        }
+    }
+    isReadOnly() {
+        return this._table.isComponentReadOnly('o-table-button', this.oattr);
     }
     isIconPositionLeft() {
         return this.iconPosition === Codes.ICON_POSITION_LEFT;
@@ -29990,7 +30019,7 @@ class OTableButtonsComponent {
     }
 }
 OTableButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTableButtonsComponent, deps: [{ token: i0.Injector }, { token: forwardRef(() => OTableBase) }], target: i0.ɵɵFactoryTarget.Component });
-OTableButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTableButtonsComponent, selector: "o-table-buttons", inputs: { insertButton: ["insert-button", "insertButton"], refreshButton: ["refresh-button", "refreshButton"], deleteButton: ["delete-button", "deleteButton"] }, host: { properties: { "class.o-table-buttons": "true" } }, ngImport: i0, template: "<div class=\"buttons\" fxLayout>\n  <o-table-button *ngIf=\"showInsertOButton\" [enabled]=\"enabledInsertButton | async\" label=\"TABLE.BUTTONS.ADD\"\n    svg-icon=\"ontimize:add\" (onClick)=\"add()\" class=\"o-table-button-add\"></o-table-button>\n  <o-table-button *ngIf=\"showRefreshOButton\" [enabled]=\"enabledRefreshButton | async\" label=\"TABLE.BUTTONS.REFRESH\"\n    svg-icon=\"ontimize:autorenew\" (onClick)=\"reloadData()\" class=\"o-table-button-refresh\">\n  </o-table-button>\n  <o-table-button *ngIf=\"showDeleteOButton\" [enabled]=\"enabledDeleteButton | async\" label=\"TABLE.BUTTONS.DELETE\"\n    svg-icon=\"ontimize:delete\" (onClick)=\"remove()\" class=\"o-table-button-delete\"></o-table-button>\n  <ng-content></ng-content>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "component", type: OTableButtonComponent, selector: "o-table-button", inputs: ["attr", "enabled", "icon", "svg-icon", "icon-position", "label"], outputs: ["onClick"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+OTableButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTableButtonsComponent, selector: "o-table-buttons", inputs: { insertButton: ["insert-button", "insertButton"], refreshButton: ["refresh-button", "refreshButton"], deleteButton: ["delete-button", "deleteButton"] }, host: { properties: { "class.o-table-buttons": "true" } }, ngImport: i0, template: "<div class=\"buttons\" fxLayout>\n  <o-table-button attr=\"add\" *ngIf=\"showInsertOButton\" [enabled]=\"enabledInsertButton | async\" label=\"TABLE.BUTTONS.ADD\"\n    svg-icon=\"ontimize:add\" (onClick)=\"add()\" class=\"o-table-button-add\"></o-table-button>\n  <o-table-button attr=\"refresh\" *ngIf=\"showRefreshOButton\" [enabled]=\"enabledRefreshButton | async\" label=\"TABLE.BUTTONS.REFRESH\"\n    svg-icon=\"ontimize:autorenew\" (onClick)=\"reloadData()\" class=\"o-table-button-refresh\">\n  </o-table-button>\n  <o-table-button attr=\"delete\" *ngIf=\"showDeleteOButton\" [enabled]=\"enabledDeleteButton | async\" label=\"TABLE.BUTTONS.DELETE\"\n    svg-icon=\"ontimize:delete\" (onClick)=\"remove()\" class=\"o-table-button-delete\"></o-table-button>\n  <ng-content></ng-content>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "component", type: OTableButtonComponent, selector: "o-table-button", inputs: ["attr", "enabled", "icon", "svg-icon", "icon-position", "label"], outputs: ["onClick"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -30007,7 +30036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type: Component,
             args: [{ selector: 'o-table-buttons', inputs: DEFAULT_INPUTS_O_TABLE_BUTTONS, outputs: DEFAULT_OUTPUTS_O_TABLE_BUTTONS, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.o-table-buttons]': 'true',
-                    }, template: "<div class=\"buttons\" fxLayout>\n  <o-table-button *ngIf=\"showInsertOButton\" [enabled]=\"enabledInsertButton | async\" label=\"TABLE.BUTTONS.ADD\"\n    svg-icon=\"ontimize:add\" (onClick)=\"add()\" class=\"o-table-button-add\"></o-table-button>\n  <o-table-button *ngIf=\"showRefreshOButton\" [enabled]=\"enabledRefreshButton | async\" label=\"TABLE.BUTTONS.REFRESH\"\n    svg-icon=\"ontimize:autorenew\" (onClick)=\"reloadData()\" class=\"o-table-button-refresh\">\n  </o-table-button>\n  <o-table-button *ngIf=\"showDeleteOButton\" [enabled]=\"enabledDeleteButton | async\" label=\"TABLE.BUTTONS.DELETE\"\n    svg-icon=\"ontimize:delete\" (onClick)=\"remove()\" class=\"o-table-button-delete\"></o-table-button>\n  <ng-content></ng-content>\n</div>" }]
+                    }, template: "<div class=\"buttons\" fxLayout>\n  <o-table-button attr=\"add\" *ngIf=\"showInsertOButton\" [enabled]=\"enabledInsertButton | async\" label=\"TABLE.BUTTONS.ADD\"\n    svg-icon=\"ontimize:add\" (onClick)=\"add()\" class=\"o-table-button-add\"></o-table-button>\n  <o-table-button attr=\"refresh\" *ngIf=\"showRefreshOButton\" [enabled]=\"enabledRefreshButton | async\" label=\"TABLE.BUTTONS.REFRESH\"\n    svg-icon=\"ontimize:autorenew\" (onClick)=\"reloadData()\" class=\"o-table-button-refresh\">\n  </o-table-button>\n  <o-table-button attr=\"delete\" *ngIf=\"showDeleteOButton\" [enabled]=\"enabledDeleteButton | async\" label=\"TABLE.BUTTONS.DELETE\"\n    svg-icon=\"ontimize:delete\" (onClick)=\"remove()\" class=\"o-table-button-delete\"></o-table-button>\n  <ng-content></ng-content>\n</div>\n" }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: OTableBase, decorators: [{
                         type: Inject,
@@ -31339,7 +31368,8 @@ class OTableQuickfilterComponent {
             column.type === 'real' ||
             column.type === 'percentage' ||
             column.type === 'currency' ||
-            column.type === 'service');
+            column.type === 'service' ||
+            column.type === 'date');
     }
     getColumnsWithoutRendererExpressions(columns) {
         return columns
@@ -32187,7 +32217,10 @@ const DEFAULT_INPUTS_O_TABLE = [
     'showChartsOnDemandOption: show-charts-on-demand-option',
     'showResetWidthOption: show-reset-width-option',
     'disableSelectionFunction: disable-selection-function',
-    'nonHidableColumns: non-hidable-columns'
+    'nonHidableColumns: non-hidable-columns',
+    'readOnly: read-only',
+    'readOnlyConfiguration: read-only-configuration',
+    'showNotificationOfReadOnly: show-notification-of-read-only'
 ];
 const DEFAULT_OUTPUTS_O_TABLE = [
     'onRowSelected',
@@ -32225,6 +32258,10 @@ class OTableComponent extends AbstractOServiceComponent {
             }
         }
     }
+    isComponentReadOnly(selector, attr) {
+        var _a, _b;
+        return (_b = (_a = this.readOnlyConfiguration) === null || _a === void 0 ? void 0 : _a[selector]) === null || _b === void 0 ? void 0 : _b[attr];
+    }
     get oTableOptions() {
         return this._oTableOptions;
     }
@@ -32347,6 +32384,8 @@ class OTableComponent extends AbstractOServiceComponent {
         this.showButtonsText = true;
         this.filterColumnActiveByDefault = true;
         this.showResetWidthOption = true;
+        this.readOnly = false;
+        this.showNotificationOfReadOnly = false;
         this.insertButton = true;
         this.refreshButton = true;
         this.deleteButton = true;
@@ -32440,6 +32479,14 @@ class OTableComponent extends AbstractOServiceComponent {
                 this.rowHeight = oTableGlobalConfig.rowHeight;
             }
             ;
+            if (Util.isDefined(oTableGlobalConfig.showChartsOnDemandOption)) {
+                this.showChartsOnDemandOption = oTableGlobalConfig.showChartsOnDemandOption;
+            }
+            ;
+            if (Util.isDefined(oTableGlobalConfig.showReportOnDemandOption)) {
+                this.showReportOnDemandOption = oTableGlobalConfig.showReportOnDemandOption;
+            }
+            ;
         }
         catch (error) {
         }
@@ -32935,7 +32982,7 @@ class OTableComponent extends AbstractOServiceComponent {
     }
     get selection() {
         if (!Util.isDefined(this._selection)) {
-            this._selection = new SelectionModel(this.isSelectionModeMultiple(), []);
+            this._selection = new SelectionModel(this.isSelectionModeMultiple(), [], true, this.compareRow());
         }
         return this._selection;
     }
@@ -33256,12 +33303,24 @@ class OTableComponent extends AbstractOServiceComponent {
     onMatTableContentChanged() {
     }
     add() {
+        if (this.readOnly) {
+            if (this.showNotificationOfReadOnly) {
+                this.snackBarService.open('MESSAGES.OPERATION_NOT_ALLOWED_READONLY');
+            }
+            return;
+        }
         if (!this.checkEnabledActionPermission(PermissionsUtils.ACTION_INSERT)) {
             return;
         }
         super.insertDetail();
     }
     remove(clearSelectedItems = false) {
+        if (this.readOnly) {
+            if (this.showNotificationOfReadOnly) {
+                this.snackBarService.open('MESSAGES.OPERATION_NOT_ALLOWED_READONLY');
+            }
+            return;
+        }
         if (!this.checkEnabledActionPermission(PermissionsUtils.ACTION_DELETE)) {
             return;
         }
@@ -33342,7 +33401,7 @@ class OTableComponent extends AbstractOServiceComponent {
     handleClick(row, column, rowIndex, cellRef, event) {
         this.clickTimer = setTimeout(() => {
             if (!this.clickPrevent) {
-                if (this.oenabled && column.editor
+                if (this.oenabled && !this.readOnly && column.editor
                     && (this.detailMode !== Codes.DETAIL_MODE_CLICK)
                     && (this.editionMode === Codes.EDITION_MODE_CLICK)) {
                     this.activateColumnEdition(column, row, cellRef);
@@ -33355,7 +33414,10 @@ class OTableComponent extends AbstractOServiceComponent {
         }, this.clickDelay);
     }
     doHandleClick(row, column, rowIndex, $event) {
-        if (!this.oenabled) {
+        if (this.readOnly && this.showNotificationOfReadOnly) {
+            this.snackBarService.open('MESSAGES.OPERATION_NOT_ALLOWED_READONLY');
+        }
+        if (!this.oenabled || this.readOnly) {
             return;
         }
         if ((this.detailMode === Codes.DETAIL_MODE_CLICK)) {
@@ -33403,6 +33465,12 @@ class OTableComponent extends AbstractOServiceComponent {
     handleDoubleClick(row, column, rowIndex, cellRef, $event) {
         clearTimeout(this.clickTimer);
         this.clickPrevent = true;
+        if (this.readOnly) {
+            if (this.showNotificationOfReadOnly) {
+                this.snackBarService.open('MESSAGES.OPERATION_NOT_ALLOWED_READONLY');
+            }
+            return;
+        }
         if (this.oenabled && column.editor
             && (!Codes.isDoubleClickMode(this.detailMode))
             && (Codes.isDoubleClickMode(this.editionMode))) {
@@ -33565,10 +33633,28 @@ class OTableComponent extends AbstractOServiceComponent {
         if (this.isDisableCheckbox(item)) {
             return;
         }
-        if (Util.isDefined(item) && !this.isRowSelected(item)) {
+        if (this.isRowSelected(item)) {
+            this.selection.clear(item);
+        }
+        if (Util.isDefined(item)) {
             this.selection.select(item);
         }
     }
+    setSelectedByKeys(keyValues) {
+        const rowsToSelect = this.getDataArray().filter(row => {
+            return keyValues.findIndex(keyValue => row[this.keys] === keyValue) > -1;
+        });
+        this.selection.select(...rowsToSelect);
+    }
+    setSelectedByMultipleKeys(keyValues) {
+        const rowsToSelect = this.getDataArray().filter(row => {
+            return keyValues.findIndex(keyValue => Object.keys(keyValue).every(key => keyValue[key] === row[key])) > -1;
+        });
+        rowsToSelect.every(rowToSelect => this.selection.select(rowToSelect));
+    }
+    setSelectedByRowIds(rowIds) {
+        rowIds.forEach(rowId => this.selectedRow(this.getDataArray()[rowId]));
+    }
     get showDeleteButton() {
         return this.deleteButton;
     }
@@ -33842,7 +33928,7 @@ class OTableComponent extends AbstractOServiceComponent {
             this.state.selection.forEach(selectedItem => {
                 const selectedItemKeys = Object.keys(selectedItem);
                 const foundItem = this.dataSource.renderedData.find(data => selectedItemKeys.every(key => data[key] === selectedItem[key]));
-                if (foundItem && !this.isRowSelected(foundItem)) {
+                if (foundItem) {
                     this.setSelected(foundItem);
                 }
             });
@@ -33932,6 +34018,12 @@ class OTableComponent extends AbstractOServiceComponent {
         return this._oTableOptions ? this._oTableOptions.columns.find(item => item.name === attr) : undefined;
     }
     insertRecord(recordData, sqlTypes) {
+        if (this.readOnly) {
+            if (this.showNotificationOfReadOnly) {
+                this.snackBarService.open('MESSAGES.OPERATION_NOT_ALLOWED_READONLY');
+            }
+            throw new Error(`Insert operation is not allowed because the table is read-only.`);
+        }
         if (!this.checkEnabledActionPermission(PermissionsUtils.ACTION_INSERT)) {
             return undefined;
         }
@@ -33945,6 +34037,12 @@ class OTableComponent extends AbstractOServiceComponent {
         return this.daoTable.insertQuery(recordData, sqlTypes);
     }
     updateRecord(filter, updateData, sqlTypes) {
+        if (this.readOnly) {
+            if (this.showNotificationOfReadOnly) {
+                this.snackBarService.open('MESSAGES.OPERATION_NOT_ALLOWED_READONLY');
+            }
+            throw new Error(`Update operation is not allowed because the table is read-only.`);
+        }
         if (!this.checkEnabledActionPermission(PermissionsUtils.ACTION_UPDATE)) {
             return of(this.dataSource.data);
         }
@@ -34183,14 +34281,20 @@ class OTableComponent extends AbstractOServiceComponent {
         });
     }
     viewDetail(item) {
-        if (!this.checkEnabledActionPermission('detail')) {
+        if (this.readOnly && this.showNotificationOfReadOnly) {
+            this.snackBarService.open('MESSAGES.OPERATION_NOT_ALLOWED_READONLY');
+        }
+        if (!this.checkEnabledActionPermission('detail') || this.readOnly) {
             return;
         }
         this.destroyActivedTooltips();
         super.viewDetail(item);
     }
     editDetail(item) {
-        if (!this.checkEnabledActionPermission('edit')) {
+        if (this.readOnly && this.showNotificationOfReadOnly) {
+            this.snackBarService.open('MESSAGES.OPERATION_NOT_ALLOWED_READONLY');
+        }
+        if (!this.checkEnabledActionPermission('edit') || this.readOnly) {
             return;
         }
         super.editDetail(item);
@@ -34225,8 +34329,7 @@ class OTableComponent extends AbstractOServiceComponent {
         return name + this.getSuffixColumnInsertable();
     }
     isRowSelected(row) {
-        const keys = Object.keys(row);
-        return !this.isSelectionModeNone() && this.selection.selected.some((element) => keys.every(key => row[key] === element[key]));
+        return !this.isSelectionModeNone() && this.selection.isSelected(row);
     }
     getColumnWidthFromState(colDef) {
         let columnWidth = colDef.definition && colDef.definition.width ? colDef.definition.width : void 0;
@@ -34538,13 +34641,16 @@ class OTableComponent extends AbstractOServiceComponent {
     isDisableCheckbox(item) {
         let disable = false;
         if (Util.isDefined(this.disableSelectionFunction)) {
-            return this.disableSelectionFunction(item);
+            return this.disableSelectionFunction(Object.assign({}, item));
         }
         return disable;
     }
     getService() {
         return this.dataService;
     }
+    getSnackService() {
+        return this.snackBarService;
+    }
 }
 OTableComponent.DEFAULT_BASE_SIZE_SPINNER = 100;
 OTableComponent.FIRST_LAST_CELL_PADDING = 24;
@@ -34552,7 +34658,7 @@ OTableComponent.EXPANDED_ROW_CONTAINER_CLASS = 'expanded-row-container-';
 OTableComponent.AVAILABLE_GROUPING_COLUMNS_RENDERERS = ['currency', 'integer', 'real'];
 OTableComponent.DEFAULT_ROW_HEIGHT = 36;
 OTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTableComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: i1$1.MatDialog }, { token: i0.ViewContainerRef }, { token: i0.ApplicationRef }, { token: forwardRef(() => OFormComponent), optional: true }, { token: VIRTUAL_SCROLL_STRATEGY, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTableComponent, selector: "o-table", inputs: { visibleColumns: ["visible-columns", "visibleColumns"], defaultVisibleColumns: ["default-visible-columns", "defaultVisibleColumns"], sortColumns: ["sort-columns", "sortColumns"], quickFilterCallback: ["quick-filter-function", "quickFilterCallback"], deleteButton: ["delete-button", "deleteButton"], refreshButton: ["refresh-button", "refreshButton"], columnsVisibilityButton: ["columns-visibility-button", "columnsVisibilityButton"], exportButton: ["export-button", "exportButton"], showConfigurationOption: ["show-configuration-option", "showConfigurationOption"], showButtonsText: ["show-buttons-text", "showButtonsText"], selectAllCheckbox: ["select-all-checkbox", "selectAllCheckbox"], paginationControls: ["pagination-controls", "paginationControls"], fixedHeader: ["fixed-header", "fixedHeader"], showTitle: ["show-title", "showTitle"], editionMode: ["edition-mode", "editionMode"], selectionMode: ["selection-mode", "selectionMode"], horizontalScroll: ["horizontal-scroll", "horizontalScroll"], showPaginatorFirstLastButtons: ["show-paginator-first-last-buttons", "showPaginatorFirstLastButtons"], autoAlignTitles: ["auto-align-titles", "autoAlignTitles"], multipleSort: ["multiple-sort", "multipleSort"], selectAllCheckboxVisible: ["select-all-checkbox-visible", "selectAllCheckboxVisible"], orderable: "orderable", resizable: "resizable", keepSelectedItems: ["keep-selected-items", "keepSelectedItems"], exportMode: ["export-mode", "exportMode"], exportServiceType: ["export-service-type", "exportServiceType"], autoAdjust: ["auto-adjust", "autoAdjust"], showFilterOption: ["show-filter-option", "showFilterOption"], visibleExportDialogButtons: ["visible-export-dialog-buttons", "visibleExportDialogButtons"], rowClass: ["row-class", "rowClass"], filterColumnActiveByDefault: ["filter-column-active-by-default", "filterColumnActiveByDefault"], groupedColumns: ["grouped-columns", "groupedColumns"], groupable: "groupable", expandGroupsSameLevel: ["expand-groups-same-level", "expandGroupsSameLevel"], collapseGroupedColumns: ["collapse-grouped-columns", "collapseGroupedColumns"], virtualScroll: ["virtual-scroll", "virtualScroll"], contextMenu: ["context-menu", "contextMenu"], showExpandableIconFunction: ["show-expandable-icon-function", "showExpandableIconFunction"], showReportOnDemandOption: ["show-report-on-demand-option", "showReportOnDemandOption"], showChartsOnDemandOption: ["show-charts-on-demand-option", "showChartsOnDemandOption"], showResetWidthOption: ["show-reset-width-option", "showResetWidthOption"], disableSelectionFunction: ["disable-selection-function", "disableSelectionFunction"], nonHidableColumns: ["non-hidable-columns", "nonHidableColumns"] }, outputs: { onRowSelected: "onRowSelected", onRowDeselected: "onRowDeselected", onRowDeleted: "onRowDeleted" }, host: { listeners: { "document:click": "handleDOMClick($event)", "window:resize": "updateScrolledState()" }, properties: { "class.o-table": "true", "class.ontimize-table": "true", "class.o-table-fixed": "fixedHeader", "class.o-table-disabled": "!enabled" } }, providers: [
+OTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTableComponent, selector: "o-table", inputs: { visibleColumns: ["visible-columns", "visibleColumns"], defaultVisibleColumns: ["default-visible-columns", "defaultVisibleColumns"], sortColumns: ["sort-columns", "sortColumns"], quickFilterCallback: ["quick-filter-function", "quickFilterCallback"], deleteButton: ["delete-button", "deleteButton"], refreshButton: ["refresh-button", "refreshButton"], columnsVisibilityButton: ["columns-visibility-button", "columnsVisibilityButton"], exportButton: ["export-button", "exportButton"], showConfigurationOption: ["show-configuration-option", "showConfigurationOption"], showButtonsText: ["show-buttons-text", "showButtonsText"], selectAllCheckbox: ["select-all-checkbox", "selectAllCheckbox"], paginationControls: ["pagination-controls", "paginationControls"], fixedHeader: ["fixed-header", "fixedHeader"], showTitle: ["show-title", "showTitle"], editionMode: ["edition-mode", "editionMode"], selectionMode: ["selection-mode", "selectionMode"], horizontalScroll: ["horizontal-scroll", "horizontalScroll"], showPaginatorFirstLastButtons: ["show-paginator-first-last-buttons", "showPaginatorFirstLastButtons"], autoAlignTitles: ["auto-align-titles", "autoAlignTitles"], multipleSort: ["multiple-sort", "multipleSort"], selectAllCheckboxVisible: ["select-all-checkbox-visible", "selectAllCheckboxVisible"], orderable: "orderable", resizable: "resizable", keepSelectedItems: ["keep-selected-items", "keepSelectedItems"], exportMode: ["export-mode", "exportMode"], exportServiceType: ["export-service-type", "exportServiceType"], autoAdjust: ["auto-adjust", "autoAdjust"], showFilterOption: ["show-filter-option", "showFilterOption"], visibleExportDialogButtons: ["visible-export-dialog-buttons", "visibleExportDialogButtons"], rowClass: ["row-class", "rowClass"], filterColumnActiveByDefault: ["filter-column-active-by-default", "filterColumnActiveByDefault"], groupedColumns: ["grouped-columns", "groupedColumns"], groupable: "groupable", expandGroupsSameLevel: ["expand-groups-same-level", "expandGroupsSameLevel"], collapseGroupedColumns: ["collapse-grouped-columns", "collapseGroupedColumns"], virtualScroll: ["virtual-scroll", "virtualScroll"], contextMenu: ["context-menu", "contextMenu"], showExpandableIconFunction: ["show-expandable-icon-function", "showExpandableIconFunction"], showReportOnDemandOption: ["show-report-on-demand-option", "showReportOnDemandOption"], showChartsOnDemandOption: ["show-charts-on-demand-option", "showChartsOnDemandOption"], showResetWidthOption: ["show-reset-width-option", "showResetWidthOption"], disableSelectionFunction: ["disable-selection-function", "disableSelectionFunction"], nonHidableColumns: ["non-hidable-columns", "nonHidableColumns"], readOnly: ["read-only", "readOnly"], readOnlyConfiguration: ["read-only-configuration", "readOnlyConfiguration"], showNotificationOfReadOnly: ["show-notification-of-read-only", "showNotificationOfReadOnly"] }, outputs: { onRowSelected: "onRowSelected", onRowDeselected: "onRowDeselected", onRowDeleted: "onRowDeleted" }, host: { listeners: { "document:click": "handleDOMClick($event)", "window:resize": "updateScrolledState()" }, properties: { "class.o-table": "true", "class.ontimize-table": "true", "class.o-table-fixed": "fixedHeader", "class.o-table-disabled": "!enabled" } }, providers: [
         OntimizeServiceProvider,
         ComponentStateServiceProvider,
         OTableDataSourceService,
@@ -34606,6 +34712,14 @@ __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
 ], OTableComponent.prototype, "showResetWidthOption", void 0);
+__decorate([
+    BooleanInputConverter(),
+    __metadata("design:type", Boolean)
+], OTableComponent.prototype, "readOnly", void 0);
+__decorate([
+    BooleanInputConverter(),
+    __metadata("design:type", Boolean)
+], OTableComponent.prototype, "showNotificationOfReadOnly", void 0);
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -34725,7 +34839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], tableRowExpandable: [{
                 type: ContentChild,
                 args: [OTableRowExpandableComponent]
-            }], selectAllCheckbox: [], exportButton: [], showConfigurationOption: [], columnsVisibilityButton: [], showFilterOption: [], showReportOnDemandOption: [], showChartsOnDemandOption: [], showButtonsText: [], filterColumnActiveByDefault: [], showResetWidthOption: [], insertButton: [], refreshButton: [], deleteButton: [], fixedHeader: [], showTitle: [], horizontalScroll: [], showPaginatorFirstLastButtons: [], autoAlignTitles: [], multipleSort: [], orderable: [], resizable: [], autoAdjust: [], groupable: [], expandGroupsSameLevel: [], collapseGroupedColumns: [], virtualScroll: [], contextMenu: [], keepSelectedItems: [], tableBodyEl: [{
+            }], selectAllCheckbox: [], exportButton: [], showConfigurationOption: [], columnsVisibilityButton: [], showFilterOption: [], showReportOnDemandOption: [], showChartsOnDemandOption: [], showButtonsText: [], filterColumnActiveByDefault: [], showResetWidthOption: [], readOnly: [], showNotificationOfReadOnly: [], insertButton: [], refreshButton: [], deleteButton: [], fixedHeader: [], showTitle: [], horizontalScroll: [], showPaginatorFirstLastButtons: [], autoAlignTitles: [], multipleSort: [], orderable: [], resizable: [], autoAdjust: [], groupable: [], expandGroupsSameLevel: [], collapseGroupedColumns: [], virtualScroll: [], contextMenu: [], keepSelectedItems: [], tableBodyEl: [{
                 type: ViewChild,
                 args: ['tableBody']
             }], tableHeaderEl: [{
@@ -36036,6 +36150,12 @@ class OTableCellRendererActionComponent extends OBaseTableCellRenderer {
             event.stopPropagation();
             event.preventDefault();
         }
+        if (this.table.readOnly) {
+            if (this.table.showNotificationOfReadOnly) {
+                this.table.getSnackService().open('MESSAGES.OPERATION_NOT_ALLOWED_READONLY');
+            }
+            return;
+        }
         if (Util.isDefined(this.action)) {
             switch (this.action.toLowerCase()) {
                 case 'detail':
@@ -36833,7 +36953,6 @@ class OTableColumnComponent {
         this.table = table;
         this.injector = injector;
         this._defaultSQLTypeKey = 'OTHER';
-        this._searchable = true;
         this.editable = false;
         this.tooltip = false;
         this._multiline = false;
@@ -37604,7 +37723,7 @@ class OTreeComponent extends AbstractOServiceComponent {
             return this.rootNodes;
         }
         else {
-            return this.childQueryData(node);
+            return node.treeNode.childQueryData(node);
         }
     }
     getComponentFilter(existingFilter = {}) {
@@ -37671,6 +37790,7 @@ class OTreeComponent extends AbstractOServiceComponent {
                 'id': this.getNodeId(node, parentNode),
                 'label': this.getItemText(node),
                 'level': level,
+                'node': this,
                 treeNode: this.treeNode,
                 'expandable': Util.isDefined(this.treeNode) || !!(nodeChildren === null || nodeChildren === void 0 ? void 0 : nodeChildren.length) || this.recursive,
                 'data': node,
@@ -37745,7 +37865,7 @@ class OTreeComponent extends AbstractOServiceComponent {
         this.onNodeClick.emit(node);
         this.selectedNode = node;
         if (this.detailMode !== Codes.DETAIL_MODE_NONE && !this.isRootNode(node)) {
-            this.navigateToViewDetail(node);
+            node.node.viewDetail(node.data, { label: node.label });
         }
     }
     isRootNode(node) {
@@ -37964,23 +38084,6 @@ class OTreeComponent extends AbstractOServiceComponent {
         }
         return this.keys + ':' + id;
     }
-    childQueryData(node) {
-        let queryMethodName = this.queryMethod;
-        if (!this.dataService || !(queryMethodName in this.dataService) || !this.entity) {
-            return of({ data: [] });
-        }
-        const parentItem = ServiceUtils.getParentKeysFromForm(this._pKeysEquiv, this.form);
-        let filter;
-        if (this.recursive) {
-            filter = parentItem !== null && parentItem !== void 0 ? parentItem : {};
-            filter[this.parentColumn] = node.data[this.keysArray[0]];
-        }
-        else {
-            filter = ServiceUtils.getFilterUsingParentKeys(node.data, node.treeNode._pKeysEquiv);
-        }
-        let queryArguments = [filter, this.colArray, this.entity];
-        return this.dataService[queryMethodName](...queryArguments);
-    }
     navigateToViewDetail(node) {
         if (Util.isDefined(node.route)) {
             let route = undefined;
@@ -38003,9 +38106,15 @@ class OTreeComponent extends AbstractOServiceComponent {
     isSelectedNode(node) {
         return this.selectedNode == node;
     }
+    onItemDetailClick(node) {
+        this.handleItemClick(node.data);
+    }
 }
 OTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTreeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: forwardRef(() => OFormComponent), optional: true }], target: i0.ɵɵFactoryTarget.Component });
-OTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTreeComponent, selector: "o-tree", inputs: { oattr: ["attr", "oattr"], service: "service", entity: "entity", columns: "columns", keys: "keys", parentKeys: ["parent-keys", "parentKeys"], queryMethod: ["query-method", "queryMethod"], insertButton: ["insert-button", "insertButton"], refreshButton: ["refresh-button", "refreshButton"], deleteButton: ["delete-button", "deleteButton"], visibleColumns: ["visible-columns", "visibleColumns"], selectAllCheckbox: ["select-all-checkbox", "selectAllCheckbox"], separator: "separator", parentColumn: ["parent-column", "parentColumn"], sortColumn: ["sort-column", "sortColumn"], selectAllCheckboxVisible: ["select-all-checkbox-visible", "selectAllCheckboxVisible"], filterCaseSensitive: ["filter-case-sensitive", "filterCaseSensitive"], quickFilter: ["quick-filter", "quickFilter"], quickFilterPlaceholder: ["quick-filter-placeholder", "quickFilterPlaceholder"], quickFilterColumns: ["quick-filter-columns", "quickFilterColumns"], detailMode: ["detail-mode", "detailMode"], detailFormRoute: ["detail-form-route", "detailFormRoute"], showButtonsText: ["show-buttons-text", "showButtonsText"], rootTitle: ["root-title", "rootTitle"], recursive: "recursive", route: "route" }, outputs: { onNodeSelected: "onNodeSelected", onNodeExpanded: "onNodeExpanded", onNodeCollapsed: "onNodeCollapsed", onLoadNextLevel: "onLoadNextLevel", onDataLoaded: "onDataLoaded", onNodeClick: "onNodeClick" }, host: { properties: { "class.o-tree": "true" } }, providers: [OTreeDao], queries: [{ propertyName: "leafNodeTemplate", first: true, predicate: ["leafNodeTemplate"], descendants: true, read: TemplateRef }, { propertyName: "parentNodeTemplate", first: true, predicate: ["parentNodeTemplate"], descendants: true, read: TemplateRef }, { propertyName: "nodeTemplate", first: true, predicate: ["nodeTemplate"], descendants: true, read: TemplateRef }, { propertyName: "treeNode", first: true, predicate: i0.forwardRef(function () { return OTreeNodeComponent; }) }], usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxFlex>\n\n  <div *ngIf=\"hasControls()\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n\n    <div class=\"buttons\">\n      <ng-container *ngIf=\"showButtonsText;else showButtonsWithoutText\">\n\n        <button *ngIf=\"insertButton\" type=\"button\" mat-stroked-button aria-label=\"Insert\" [disabled]=\"!enabledInsertButton\" (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'INSERT' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"refreshButton\" type=\"button\" mat-stroked-button aria-label=\"Refresh\" [disabled]=\"!enabledRefreshButton\" (click)=\"reloadData()\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n          <span>{{ 'REFRESH' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" mat-stroked-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n          <span>{{ 'DELETE' | oTranslate }}</span>\n        </button>\n\n      </ng-container>\n\n      <ng-template #showButtonsWithoutText>\n        <button *ngIf=\"insertButton\" type=\"button\" mat-icon-button aria-label=\"Insert\" [disabled]=\"!enabledInsertButton\" (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"refreshButton\" type=\"button\" mat-icon-button aria-label=\"Refresh\" [disabled]=\"!enabledRefreshButton\" (click)=\"reloadData()\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" mat-icon-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n        </button>\n      </ng-template>\n\n      <ng-content select=\"[o-tree-button]\"></ng-content>\n    </div>\n    <div fxFlex>\n      <span fxLayoutAlign=\"center center\" class=\"title\">{{ title | oTranslate }}</span>\n    </div>\n    <o-search-input *ngIf=\"quickFilter\" [filter-case-sensitive]=\"filterCaseSensitive\" [show-case-sensitive-checkbox]=\"showCaseSensitiveCheckbox()\"\n      [columns]=\"quickFilterColumns\" [placeholder]=\"quickFilterPlaceholder\" appearance=\"outline\" float-label=\"never\" show-menu=\"no\">\n    </o-search-input>\n    <button type=\"button\" *ngIf=\"showTreeMenuButton\" mat-icon-button class=\"o-tree-menu-button\" [matMenuTriggerFor]=\"treeMenu.matMenu\"\n      (click)=\"$event.stopPropagation()\">\n      <mat-icon svgIcon=\"ontimize:more_vert\"></mat-icon>\n    </button>\n    <o-tree-menu #treeMenu [select-all-checkbox]=\"selectAllCheckbox\" [select-all-checkbox-visible]=\"selectAllCheckboxVisible\"\n      (onSelectCheckboxChange)=\"onSelectCheckboxChange($event)\"></o-tree-menu>\n\n  </div>\n\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n\n    <!-- This is the tree node template for leaf nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node\" (click)=\"leafNodeClicked($event, node)\" matTreeNodeToggle matTreeNodePadding\n      [ngClass]=\"{'selected-node': isSelectedNode(node)}\">\n      <!-- use a disabled button to provide padding for tree leaf -->\n      <button mat-icon-button disabled></button>\n\n      <ng-container *ngIf=\"selectAllCheckboxVisible; else simpleLeafNodeTpl\">\n        <div class=\"node-wrapper\">\n          <mat-checkbox *ngIf=\"selectAllCheckboxVisible; else simpleLeafNodeTpl\" [checked]=\"checklistSelection.isSelected(node)\"\n            (click)=\"checkboxClicked($event)\" (change)=\"todoLeafItemSelectionToggle(node)\">\n          </mat-checkbox>\n          <ng-container [ngTemplateOutlet]=\"leafNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n          </ng-container>\n        </div>\n      </ng-container>\n      <ng-template #simpleLeafNodeTpl>\n        <ng-container [ngTemplateOutlet]=\"leafNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n        </ng-container>\n      </ng-template>\n\n    </mat-tree-node>\n    <!-- This is the tree node template for expandable nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" (click)=\"parentNodeClicked($event, node)\" matTreeNodePadding\n      [ngClass]=\"{'selected-node': isSelectedNode(node)}\">\n      <button mat-icon-button [attr.aria-label]=\"'toggle ' + node.label\" matTreeNodeToggle (click)=\"onClickToggleButton($event, node)\">\n        <mat-icon class=\"mat-icon-rtl-mirror\">\n          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\n        </mat-icon>\n      </button>\n\n      <ng-container *ngIf=\"selectAllCheckboxVisible; else simpleParentNodeTpl\">\n        <div class=\"node-wrapper\">\n          <mat-checkbox *ngIf=\"selectAllCheckboxVisible; else simpleParentNodeTpl\" (click)=\"checkboxClicked($event)\"\n            (change)=\"todoItemSelectionToggle(node)\" [checked]=\"descendantsAllSelected(node)\" [indeterminate]=\"descendantsPartiallySelected(node)\">\n          </mat-checkbox>\n          <ng-container [ngTemplateOutlet]=\"parentNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-template #simpleParentNodeTpl>\n        <ng-container [ngTemplateOutlet]=\"parentNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n        </ng-container>\n      </ng-template>\n    </mat-tree-node>\n  </mat-tree>\n</div>\n\n<ng-template let-node #leafNodeFulltemplate>\n  <ng-container *ngIf=\"leafNodeTemplate; else defaultLeafNodeTpl\" [ngTemplateOutlet]=\"leafNodeTemplate\"\n    [ngTemplateOutletContext]=\"{$implicit:node.data}\">\n  </ng-container>\n\n  <ng-template #defaultLeafNodeTpl>\n    {{node.label}}\n  </ng-template>\n</ng-template>\n\n<ng-template let-node #parentNodeFulltemplate>\n  <ng-container *ngIf=\"parentNodeTemplate; else defaultParentNodeTpl\" [ngTemplateOutlet]=\"parentNodeTemplate\"\n    [ngTemplateOutletContext]=\"{$implicit:node.data}\">\n  </ng-container>\n\n  <ng-template #defaultParentNodeTpl>\n    <span>{{node.label}}</span>\n    <mat-progress-bar *ngIf=\"node.isLoading\" mode=\"indeterminate\" fxFlex></mat-progress-bar>\n  </ng-template>\n</ng-template>\n", styles: [".o-tree .mat-mdc-progress-bar{margin-left:30px}.o-tree .node-wrapper{align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OSearchInputComponent, selector: "o-search-input", inputs: ["placeholder", "label", "width", "float-label", "appearance", "columns", "filter-case-sensitive", "show-case-sensitive-checkbox", "show-menu"], outputs: ["onSearch"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i10$2.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i10$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i10$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i10$2.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "component", type: OTreeMenuComponent, selector: "o-tree-menu", inputs: ["select-all-checkbox", "select-all-checkbox-visible"], outputs: ["onSelectCheckboxChange"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
+OTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTreeComponent, selector: "o-tree", inputs: { oattr: ["attr", "oattr"], service: "service", entity: "entity", columns: "columns", keys: "keys", parentKeys: ["parent-keys", "parentKeys"], queryMethod: ["query-method", "queryMethod"], insertButton: ["insert-button", "insertButton"], refreshButton: ["refresh-button", "refreshButton"], deleteButton: ["delete-button", "deleteButton"], visibleColumns: ["visible-columns", "visibleColumns"], selectAllCheckbox: ["select-all-checkbox", "selectAllCheckbox"], separator: "separator", parentColumn: ["parent-column", "parentColumn"], sortColumn: ["sort-column", "sortColumn"], selectAllCheckboxVisible: ["select-all-checkbox-visible", "selectAllCheckboxVisible"], filterCaseSensitive: ["filter-case-sensitive", "filterCaseSensitive"], quickFilter: ["quick-filter", "quickFilter"], quickFilterPlaceholder: ["quick-filter-placeholder", "quickFilterPlaceholder"], quickFilterColumns: ["quick-filter-columns", "quickFilterColumns"], detailMode: ["detail-mode", "detailMode"], detailFormRoute: ["detail-form-route", "detailFormRoute"], showButtonsText: ["show-buttons-text", "showButtonsText"], rootTitle: ["root-title", "rootTitle"], recursive: "recursive", route: "route" }, outputs: { onNodeSelected: "onNodeSelected", onNodeExpanded: "onNodeExpanded", onNodeCollapsed: "onNodeCollapsed", onLoadNextLevel: "onLoadNextLevel", onDataLoaded: "onDataLoaded", onNodeClick: "onNodeClick" }, host: { properties: { "class.o-tree": "true" } }, providers: [
+        OTreeDao,
+        OntimizeServiceProvider
+    ], queries: [{ propertyName: "leafNodeTemplate", first: true, predicate: ["leafNodeTemplate"], descendants: true, read: TemplateRef }, { propertyName: "parentNodeTemplate", first: true, predicate: ["parentNodeTemplate"], descendants: true, read: TemplateRef }, { propertyName: "nodeTemplate", first: true, predicate: ["nodeTemplate"], descendants: true, read: TemplateRef }, { propertyName: "treeNode", first: true, predicate: i0.forwardRef(function () { return OTreeNodeComponent; }) }], usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxFlex>\n\n  <div *ngIf=\"hasControls()\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n\n    <div class=\"buttons\">\n      <ng-container *ngIf=\"showButtonsText;else showButtonsWithoutText\">\n\n        <button *ngIf=\"insertButton\" type=\"button\" mat-stroked-button aria-label=\"Insert\" [disabled]=\"!enabledInsertButton\" (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'INSERT' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"refreshButton\" type=\"button\" mat-stroked-button aria-label=\"Refresh\" [disabled]=\"!enabledRefreshButton\" (click)=\"reloadData()\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n          <span>{{ 'REFRESH' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" mat-stroked-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n          <span>{{ 'DELETE' | oTranslate }}</span>\n        </button>\n\n      </ng-container>\n\n      <ng-template #showButtonsWithoutText>\n        <button *ngIf=\"insertButton\" type=\"button\" mat-icon-button aria-label=\"Insert\" [disabled]=\"!enabledInsertButton\" (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"refreshButton\" type=\"button\" mat-icon-button aria-label=\"Refresh\" [disabled]=\"!enabledRefreshButton\" (click)=\"reloadData()\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" mat-icon-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n        </button>\n      </ng-template>\n\n      <ng-content select=\"[o-tree-button]\"></ng-content>\n    </div>\n    <div fxFlex>\n      <span fxLayoutAlign=\"center center\" class=\"title\">{{ title | oTranslate }}</span>\n    </div>\n    <o-search-input *ngIf=\"quickFilter\" [filter-case-sensitive]=\"filterCaseSensitive\" [show-case-sensitive-checkbox]=\"showCaseSensitiveCheckbox()\"\n      [columns]=\"quickFilterColumns\" [placeholder]=\"quickFilterPlaceholder\" appearance=\"outline\" float-label=\"never\" show-menu=\"no\">\n    </o-search-input>\n    <button type=\"button\" *ngIf=\"showTreeMenuButton\" mat-icon-button class=\"o-tree-menu-button\" [matMenuTriggerFor]=\"treeMenu.matMenu\"\n      (click)=\"$event.stopPropagation()\">\n      <mat-icon svgIcon=\"ontimize:more_vert\"></mat-icon>\n    </button>\n    <o-tree-menu #treeMenu [select-all-checkbox]=\"selectAllCheckbox\" [select-all-checkbox-visible]=\"selectAllCheckboxVisible\"\n      (onSelectCheckboxChange)=\"onSelectCheckboxChange($event)\"></o-tree-menu>\n\n  </div>\n\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n\n    <!-- This is the tree node template for leaf nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node\" (click)=\"leafNodeClicked($event, node)\" matTreeNodeToggle matTreeNodePadding\n      [ngClass]=\"{'selected-node': isSelectedNode(node)}\">\n      <!-- use a disabled button to provide padding for tree leaf -->\n      <button mat-icon-button disabled></button>\n\n      <ng-container *ngIf=\"selectAllCheckboxVisible; else simpleLeafNodeTpl\">\n        <div class=\"node-wrapper\">\n          <mat-checkbox *ngIf=\"selectAllCheckboxVisible; else simpleLeafNodeTpl\" [checked]=\"checklistSelection.isSelected(node)\"\n            (click)=\"checkboxClicked($event)\" (change)=\"todoLeafItemSelectionToggle(node)\">\n          </mat-checkbox>\n          <ng-container [ngTemplateOutlet]=\"leafNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n          </ng-container>\n        </div>\n      </ng-container>\n      <ng-template #simpleLeafNodeTpl>\n        <ng-container [ngTemplateOutlet]=\"leafNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n        </ng-container>\n      </ng-template>\n\n    </mat-tree-node>\n    <!-- This is the tree node template for expandable nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" (click)=\"parentNodeClicked($event, node)\" matTreeNodePadding\n      [ngClass]=\"{'selected-node': isSelectedNode(node)}\">\n      <button mat-icon-button [attr.aria-label]=\"'toggle ' + node.label\" matTreeNodeToggle (click)=\"onClickToggleButton($event, node)\">\n        <mat-icon class=\"mat-icon-rtl-mirror\">\n          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\n        </mat-icon>\n      </button>\n\n      <ng-container *ngIf=\"selectAllCheckboxVisible; else simpleParentNodeTpl\">\n        <div class=\"node-wrapper\">\n          <mat-checkbox *ngIf=\"selectAllCheckboxVisible; else simpleParentNodeTpl\" (click)=\"checkboxClicked($event)\"\n            (change)=\"todoItemSelectionToggle(node)\" [checked]=\"descendantsAllSelected(node)\" [indeterminate]=\"descendantsPartiallySelected(node)\">\n          </mat-checkbox>\n          <ng-container [ngTemplateOutlet]=\"parentNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-template #simpleParentNodeTpl>\n        <ng-container [ngTemplateOutlet]=\"parentNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n        </ng-container>\n      </ng-template>\n    </mat-tree-node>\n  </mat-tree>\n</div>\n\n<ng-template let-node #leafNodeFulltemplate>\n  <ng-container *ngIf=\"leafNodeTemplate; else defaultLeafNodeTpl\" [ngTemplateOutlet]=\"leafNodeTemplate\"\n    [ngTemplateOutletContext]=\"{$implicit:node.data}\">\n  </ng-container>\n\n  <ng-template #defaultLeafNodeTpl>\n    {{node.label}}\n  </ng-template>\n</ng-template>\n\n<ng-template let-node #parentNodeFulltemplate>\n  <ng-container *ngIf=\"parentNodeTemplate; else defaultParentNodeTpl\" [ngTemplateOutlet]=\"parentNodeTemplate\"\n    [ngTemplateOutletContext]=\"{$implicit:node.data}\">\n  </ng-container>\n\n  <ng-template #defaultParentNodeTpl>\n    <span>{{node.label}}</span>\n    <mat-progress-bar *ngIf=\"node.isLoading\" mode=\"indeterminate\" fxFlex></mat-progress-bar>\n  </ng-template>\n</ng-template>\n", styles: [".o-tree .mat-mdc-progress-bar{margin-left:30px}.o-tree .node-wrapper{align-items:center}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: OSearchInputComponent, selector: "o-search-input", inputs: ["placeholder", "label", "width", "float-label", "appearance", "columns", "filter-case-sensitive", "show-case-sensitive-checkbox", "show-menu"], outputs: ["onSearch"] }, { kind: "directive", type: i2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i4$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5$2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i10$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i10$2.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i10$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i10$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i10$2.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { kind: "component", type: OTreeMenuComponent, selector: "o-tree-menu", inputs: ["select-all-checkbox", "select-all-checkbox-visible"], outputs: ["onSelectCheckboxChange"] }, { kind: "pipe", type: OTranslatePipe, name: "oTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     BooleanInputConverter(),
     __metadata("design:type", Boolean)
@@ -38034,7 +38143,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             type: Component,
             args: [{ selector: 'o-tree', inputs: DEFAULT_INPUTS_O_TREE, outputs: DEFAULT_OUTPUTS_O_TREE, encapsulation: ViewEncapsulation.None, host: {
                         '[class.o-tree]': 'true'
-                    }, providers: [OTreeDao], template: "<div fxLayout=\"column\" fxFlex>\n\n  <div *ngIf=\"hasControls()\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n\n    <div class=\"buttons\">\n      <ng-container *ngIf=\"showButtonsText;else showButtonsWithoutText\">\n\n        <button *ngIf=\"insertButton\" type=\"button\" mat-stroked-button aria-label=\"Insert\" [disabled]=\"!enabledInsertButton\" (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'INSERT' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"refreshButton\" type=\"button\" mat-stroked-button aria-label=\"Refresh\" [disabled]=\"!enabledRefreshButton\" (click)=\"reloadData()\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n          <span>{{ 'REFRESH' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" mat-stroked-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n          <span>{{ 'DELETE' | oTranslate }}</span>\n        </button>\n\n      </ng-container>\n\n      <ng-template #showButtonsWithoutText>\n        <button *ngIf=\"insertButton\" type=\"button\" mat-icon-button aria-label=\"Insert\" [disabled]=\"!enabledInsertButton\" (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"refreshButton\" type=\"button\" mat-icon-button aria-label=\"Refresh\" [disabled]=\"!enabledRefreshButton\" (click)=\"reloadData()\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" mat-icon-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n        </button>\n      </ng-template>\n\n      <ng-content select=\"[o-tree-button]\"></ng-content>\n    </div>\n    <div fxFlex>\n      <span fxLayoutAlign=\"center center\" class=\"title\">{{ title | oTranslate }}</span>\n    </div>\n    <o-search-input *ngIf=\"quickFilter\" [filter-case-sensitive]=\"filterCaseSensitive\" [show-case-sensitive-checkbox]=\"showCaseSensitiveCheckbox()\"\n      [columns]=\"quickFilterColumns\" [placeholder]=\"quickFilterPlaceholder\" appearance=\"outline\" float-label=\"never\" show-menu=\"no\">\n    </o-search-input>\n    <button type=\"button\" *ngIf=\"showTreeMenuButton\" mat-icon-button class=\"o-tree-menu-button\" [matMenuTriggerFor]=\"treeMenu.matMenu\"\n      (click)=\"$event.stopPropagation()\">\n      <mat-icon svgIcon=\"ontimize:more_vert\"></mat-icon>\n    </button>\n    <o-tree-menu #treeMenu [select-all-checkbox]=\"selectAllCheckbox\" [select-all-checkbox-visible]=\"selectAllCheckboxVisible\"\n      (onSelectCheckboxChange)=\"onSelectCheckboxChange($event)\"></o-tree-menu>\n\n  </div>\n\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n\n    <!-- This is the tree node template for leaf nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node\" (click)=\"leafNodeClicked($event, node)\" matTreeNodeToggle matTreeNodePadding\n      [ngClass]=\"{'selected-node': isSelectedNode(node)}\">\n      <!-- use a disabled button to provide padding for tree leaf -->\n      <button mat-icon-button disabled></button>\n\n      <ng-container *ngIf=\"selectAllCheckboxVisible; else simpleLeafNodeTpl\">\n        <div class=\"node-wrapper\">\n          <mat-checkbox *ngIf=\"selectAllCheckboxVisible; else simpleLeafNodeTpl\" [checked]=\"checklistSelection.isSelected(node)\"\n            (click)=\"checkboxClicked($event)\" (change)=\"todoLeafItemSelectionToggle(node)\">\n          </mat-checkbox>\n          <ng-container [ngTemplateOutlet]=\"leafNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n          </ng-container>\n        </div>\n      </ng-container>\n      <ng-template #simpleLeafNodeTpl>\n        <ng-container [ngTemplateOutlet]=\"leafNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n        </ng-container>\n      </ng-template>\n\n    </mat-tree-node>\n    <!-- This is the tree node template for expandable nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" (click)=\"parentNodeClicked($event, node)\" matTreeNodePadding\n      [ngClass]=\"{'selected-node': isSelectedNode(node)}\">\n      <button mat-icon-button [attr.aria-label]=\"'toggle ' + node.label\" matTreeNodeToggle (click)=\"onClickToggleButton($event, node)\">\n        <mat-icon class=\"mat-icon-rtl-mirror\">\n          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\n        </mat-icon>\n      </button>\n\n      <ng-container *ngIf=\"selectAllCheckboxVisible; else simpleParentNodeTpl\">\n        <div class=\"node-wrapper\">\n          <mat-checkbox *ngIf=\"selectAllCheckboxVisible; else simpleParentNodeTpl\" (click)=\"checkboxClicked($event)\"\n            (change)=\"todoItemSelectionToggle(node)\" [checked]=\"descendantsAllSelected(node)\" [indeterminate]=\"descendantsPartiallySelected(node)\">\n          </mat-checkbox>\n          <ng-container [ngTemplateOutlet]=\"parentNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-template #simpleParentNodeTpl>\n        <ng-container [ngTemplateOutlet]=\"parentNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n        </ng-container>\n      </ng-template>\n    </mat-tree-node>\n  </mat-tree>\n</div>\n\n<ng-template let-node #leafNodeFulltemplate>\n  <ng-container *ngIf=\"leafNodeTemplate; else defaultLeafNodeTpl\" [ngTemplateOutlet]=\"leafNodeTemplate\"\n    [ngTemplateOutletContext]=\"{$implicit:node.data}\">\n  </ng-container>\n\n  <ng-template #defaultLeafNodeTpl>\n    {{node.label}}\n  </ng-template>\n</ng-template>\n\n<ng-template let-node #parentNodeFulltemplate>\n  <ng-container *ngIf=\"parentNodeTemplate; else defaultParentNodeTpl\" [ngTemplateOutlet]=\"parentNodeTemplate\"\n    [ngTemplateOutletContext]=\"{$implicit:node.data}\">\n  </ng-container>\n\n  <ng-template #defaultParentNodeTpl>\n    <span>{{node.label}}</span>\n    <mat-progress-bar *ngIf=\"node.isLoading\" mode=\"indeterminate\" fxFlex></mat-progress-bar>\n  </ng-template>\n</ng-template>\n", styles: [".o-tree .mat-mdc-progress-bar{margin-left:30px}.o-tree .node-wrapper{align-items:center}\n"] }]
+                    }, providers: [
+                        OTreeDao,
+                        OntimizeServiceProvider
+                    ], template: "<div fxLayout=\"column\" fxFlex>\n\n  <div *ngIf=\"hasControls()\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n\n    <div class=\"buttons\">\n      <ng-container *ngIf=\"showButtonsText;else showButtonsWithoutText\">\n\n        <button *ngIf=\"insertButton\" type=\"button\" mat-stroked-button aria-label=\"Insert\" [disabled]=\"!enabledInsertButton\" (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n          <span>{{ 'INSERT' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"refreshButton\" type=\"button\" mat-stroked-button aria-label=\"Refresh\" [disabled]=\"!enabledRefreshButton\" (click)=\"reloadData()\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n          <span>{{ 'REFRESH' | oTranslate }}</span>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" mat-stroked-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n          <span>{{ 'DELETE' | oTranslate }}</span>\n        </button>\n\n      </ng-container>\n\n      <ng-template #showButtonsWithoutText>\n        <button *ngIf=\"insertButton\" type=\"button\" mat-icon-button aria-label=\"Insert\" [disabled]=\"!enabledInsertButton\" (click)=\"add($event)\">\n          <mat-icon svgIcon=\"ontimize:add\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"refreshButton\" type=\"button\" mat-icon-button aria-label=\"Refresh\" [disabled]=\"!enabledRefreshButton\" (click)=\"reloadData()\">\n          <mat-icon svgIcon=\"ontimize:autorenew\"></mat-icon>\n        </button>\n\n        <button *ngIf=\"deleteButton\" type=\"button\" mat-icon-button aria-label=\"Delete\" [disabled]=\"!enabledDeleteButton\"\n          [class.disabled]=\"!enabledDeleteButton\">\n          <mat-icon svgIcon=\"ontimize:delete\"></mat-icon>\n        </button>\n      </ng-template>\n\n      <ng-content select=\"[o-tree-button]\"></ng-content>\n    </div>\n    <div fxFlex>\n      <span fxLayoutAlign=\"center center\" class=\"title\">{{ title | oTranslate }}</span>\n    </div>\n    <o-search-input *ngIf=\"quickFilter\" [filter-case-sensitive]=\"filterCaseSensitive\" [show-case-sensitive-checkbox]=\"showCaseSensitiveCheckbox()\"\n      [columns]=\"quickFilterColumns\" [placeholder]=\"quickFilterPlaceholder\" appearance=\"outline\" float-label=\"never\" show-menu=\"no\">\n    </o-search-input>\n    <button type=\"button\" *ngIf=\"showTreeMenuButton\" mat-icon-button class=\"o-tree-menu-button\" [matMenuTriggerFor]=\"treeMenu.matMenu\"\n      (click)=\"$event.stopPropagation()\">\n      <mat-icon svgIcon=\"ontimize:more_vert\"></mat-icon>\n    </button>\n    <o-tree-menu #treeMenu [select-all-checkbox]=\"selectAllCheckbox\" [select-all-checkbox-visible]=\"selectAllCheckboxVisible\"\n      (onSelectCheckboxChange)=\"onSelectCheckboxChange($event)\"></o-tree-menu>\n\n  </div>\n\n  <mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n\n    <!-- This is the tree node template for leaf nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node\" (click)=\"leafNodeClicked($event, node)\" matTreeNodeToggle matTreeNodePadding\n      [ngClass]=\"{'selected-node': isSelectedNode(node)}\">\n      <!-- use a disabled button to provide padding for tree leaf -->\n      <button mat-icon-button disabled></button>\n\n      <ng-container *ngIf=\"selectAllCheckboxVisible; else simpleLeafNodeTpl\">\n        <div class=\"node-wrapper\">\n          <mat-checkbox *ngIf=\"selectAllCheckboxVisible; else simpleLeafNodeTpl\" [checked]=\"checklistSelection.isSelected(node)\"\n            (click)=\"checkboxClicked($event)\" (change)=\"todoLeafItemSelectionToggle(node)\">\n          </mat-checkbox>\n          <ng-container [ngTemplateOutlet]=\"leafNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n          </ng-container>\n        </div>\n      </ng-container>\n      <ng-template #simpleLeafNodeTpl>\n        <ng-container [ngTemplateOutlet]=\"leafNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n        </ng-container>\n      </ng-template>\n\n    </mat-tree-node>\n    <!-- This is the tree node template for expandable nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" (click)=\"parentNodeClicked($event, node)\" matTreeNodePadding\n      [ngClass]=\"{'selected-node': isSelectedNode(node)}\">\n      <button mat-icon-button [attr.aria-label]=\"'toggle ' + node.label\" matTreeNodeToggle (click)=\"onClickToggleButton($event, node)\">\n        <mat-icon class=\"mat-icon-rtl-mirror\">\n          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\n        </mat-icon>\n      </button>\n\n      <ng-container *ngIf=\"selectAllCheckboxVisible; else simpleParentNodeTpl\">\n        <div class=\"node-wrapper\">\n          <mat-checkbox *ngIf=\"selectAllCheckboxVisible; else simpleParentNodeTpl\" (click)=\"checkboxClicked($event)\"\n            (change)=\"todoItemSelectionToggle(node)\" [checked]=\"descendantsAllSelected(node)\" [indeterminate]=\"descendantsPartiallySelected(node)\">\n          </mat-checkbox>\n          <ng-container [ngTemplateOutlet]=\"parentNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-template #simpleParentNodeTpl>\n        <ng-container [ngTemplateOutlet]=\"parentNodeFulltemplate\" [ngTemplateOutletContext]=\"{$implicit:node}\">\n        </ng-container>\n      </ng-template>\n    </mat-tree-node>\n  </mat-tree>\n</div>\n\n<ng-template let-node #leafNodeFulltemplate>\n  <ng-container *ngIf=\"leafNodeTemplate; else defaultLeafNodeTpl\" [ngTemplateOutlet]=\"leafNodeTemplate\"\n    [ngTemplateOutletContext]=\"{$implicit:node.data}\">\n  </ng-container>\n\n  <ng-template #defaultLeafNodeTpl>\n    {{node.label}}\n  </ng-template>\n</ng-template>\n\n<ng-template let-node #parentNodeFulltemplate>\n  <ng-container *ngIf=\"parentNodeTemplate; else defaultParentNodeTpl\" [ngTemplateOutlet]=\"parentNodeTemplate\"\n    [ngTemplateOutletContext]=\"{$implicit:node.data}\">\n  </ng-container>\n\n  <ng-template #defaultParentNodeTpl>\n    <span>{{node.label}}</span>\n    <mat-progress-bar *ngIf=\"node.isLoading\" mode=\"indeterminate\" fxFlex></mat-progress-bar>\n  </ng-template>\n</ng-template>\n", styles: [".o-tree .mat-mdc-progress-bar{margin-left:30px}.o-tree .node-wrapper{align-items:center}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: OFormComponent, decorators: [{
                         type: Optional
@@ -38057,10 +38169,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }] } });
 
 class OTreeNodeComponent extends OTreeComponent {
-    constructor(injector, elRef, form, oTree, parentNode) {
-        super(injector, elRef, form);
+    constructor(injector, elementRef, form, parentComponent, parentNode) {
+        super(injector, elementRef, form);
         this.injector = injector;
-        this.oTree = oTree;
+        this.parentComponent = parentComponent;
         this.parentNode = parentNode;
     }
     ngOnInit() {
@@ -38073,14 +38185,32 @@ class OTreeNodeComponent extends OTreeComponent {
         this.visibleColumnsArray = Util.parseArray(this.visibleColumns, true);
         this.quickFilterColArray = Util.parseArray(this.quickFilterColumns, true);
     }
+    childQueryData(node) {
+        let queryMethodName = this.queryMethod;
+        if (!this.dataService || !(queryMethodName in this.dataService) || !this.entity) {
+            return of({ data: [] });
+        }
+        const parentItem = ServiceUtils.getParentKeysFromForm(this._pKeysEquiv, this.form);
+        let filter;
+        if (this.recursive) {
+            filter = parentItem !== null && parentItem !== void 0 ? parentItem : {};
+            filter[this.parentColumn] = node.data[this.keysArray[0]];
+        }
+        else {
+            filter = ServiceUtils.getFilterUsingParentKeys(node.data, node.treeNode._pKeysEquiv);
+        }
+        let queryArguments = [filter, this.colArray, this.entity];
+        return this.dataService[queryMethodName](...queryArguments);
+    }
 }
 OTreeNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTreeNodeComponent, deps: [{ token: i0.Injector }, { token: i0.ElementRef }, { token: forwardRef(() => OFormComponent), optional: true }, { token: forwardRef(() => OTreeComponent), optional: true }, { token: OTreeNodeComponent, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component });
-OTreeNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTreeNodeComponent, selector: "o-tree-node", usesInheritance: true, ngImport: i0, template: ' ', isInline: true });
+OTreeNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OTreeNodeComponent, selector: "o-tree-node", providers: [OntimizeServiceProvider], usesInheritance: true, ngImport: i0, template: ' ', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OTreeNodeComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'o-tree-node',
-                    template: ' '
+                    template: ' ',
+                    providers: [OntimizeServiceProvider]
                 }]
         }], ctorParameters: function () {
         return [{ type: i0.Injector }, { type: i0.ElementRef }, { type: OFormComponent, decorators: [{